feat: upload file Area bs component

packages/@sparrow-common/src/features/create-team/components/icon-uploader/IconUploader.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-  import { DeleteIcon, EditIcon, UploadIcon } from "@sparrow/library/assets";
+  import { NewDeleteIcon, NewEditIcon } from "@sparrow/library/assets";
   import { base64ToURL, imageDataToURL } from "@sparrow/common/utils";
+  import { FileTypeIcon } from "@sparrow/library/icons";
+  import { NewUploadIcon } from "@sparrow/library/icons";
 
   export let value: any = [];
   export let inputId: string;
@@ -19,7 +21,11 @@
   export let height = "auto";
   export let iconHeight = 12;
   export let iconWidth = 12;
+  export let disabled = false;
+  export let fileTypes = ["JPG", "PNG", "JPEG"];
+  export let fileName: string = "";
   let isDragOver = false;
+  let isFocused = false;
 
   const generateAcceptString = (): string => {
     const acceptString = supportedFileTypes.map((type) => `${type}`).join(", ");
@@ -33,95 +39,150 @@
   ) => {
     onChange(event, maxFileSize, supportedFileTypes);
   };
+  const truncateFileName = (name: string, length: number): string => {
+    return name.length > length ? name.substring(0, length) + ".." : name;
+  };
 </script>
 
 <div class="sparrow-text-input-container mb-2">
-  <div class="d-flex">
+  <div class="d-flex flex-column">
     {#if value.length == 0 || value.size === 0}
       <div
-        style="width:{width} !important; height:{height} !important;  border: 3px dashed {isError
-          ? 'var(--border-danger-200)'
-          : 'var(--border-secondary-200)'}; border-width: 2px;"
-        class="sparrow-file-input w-100 px-auto bg-tertiary-300 {isDragOver &&
-          'opacity-75 '}"
+        style="
+      width: ${width} !important;
+      height: ${height} !important;
+      border: {isError ? '2px' : '1px'} dashed {isError
+          ? 'var(--border-ds-danger-300)'
+          : 'var(--border-ds-surface-100)'};
+      background-color: ${!disabled
+          ? isError && isFocused
+            ? 'var(--bg-ds-surface-400)'
+            : 'transparent'
+          : 'var(--bg-ds-surface-600)'};
+    "
+        class="sparrow-file-input text-fs-14 p-2 w-100 px-auto bg-ds-surface-400 {isDragOver
+          ? 'drag-over'
+          : ''}"
+        tabindex="0"
         on:dragover={(e) => {
-          e.preventDefault();
-          isDragOver = true;
+          if (!disabled) {
+            e.preventDefault();
+            isDragOver = true;
+          }
         }}
         on:dragleave={() => {
-          isDragOver = false;
+          if (!disabled) isDragOver = false;
         }}
         on:drop={(e) => {
-          e.preventDefault();
-          isDragOver = false;
-          handleDrop(e, maxFileSize, supportedFileTypes);
+          if (!disabled) {
+            e.preventDefault();
+            isDragOver = false;
+            handleDrop(e, maxFileSize, supportedFileTypes);
+          }
+        }}
+        on:focus={() => {
+          if (!disabled) isFocused = true;
+        }}
+        on:blur={() => {
+          if (!disabled) isFocused = false;
         }}
       >
-        <span
-          class="sparrow-file-input-placeholder fw-normal d-flex justify-content-center mt-4"
-          >{inputPlaceholder}</span
-        >
-
         <div
-          class="sparrow-choose-file-input-button d-flex justify-content-center my-4"
+          class="sparrow-choose-file-input-button d-flex justify-content-center"
         >
-          <label for={inputId} class="d-flex">
-            <UploadIcon
-              classProp="my-auto"
-              width={iconWidth}
-              height={iconHeight}
-              color={"var(--icon-primary-300)"}
+          <div class="d-flex text-center row justify-content-center">
+            <label for={inputId} class="d-flex justify-content-center">
+              <NewUploadIcon />
+            </label>
+            <label for={inputId} class="sparrow-choose-file-label my-2 ps-2"
+              >Drag & Drop or <span class="sparrow-upload-text text-fs-14"
+                >Upload File</span
+              > here</label
+            >
+            <div for={inputId} class="d-flex justify-content-center text-fs-12">
+              <div class="file-type-container-one pe-2 pt-1 pb-1">
+                <FileTypeIcon />
+                <span class="file-type-text">{fileTypes[0]}</span>
+              </div>
+              {#each fileTypes.slice(1, -1) as fileType, index}
+                <div class="file-type-container-two px-2 pt-1 pb-1" key={index}>
+                  <FileTypeIcon />
+                  <span class="file-type-text">{fileType}</span>
+                </div>
+              {/each}
+              <div class="ps-2 pt-1 pb-1">
+                <FileTypeIcon />
+                <span class="file-type-text"
+                  >{fileTypes[fileTypes.length - 1]}</span
+                >
+              </div>
+            </div>
+            <input
+              class="sparrow-choose-file-input visually-hidden"
+              type="file"
+              {value}
+              id={inputId}
+              placeholder={inputPlaceholder}
+              accept={generateAcceptString()}
+              {disabled}
+              on:change={(e) => {
+                onChange(e, maxFileSize, supportedFileTypes);
+              }}
             />
-          </label>
-
-          <label for={inputId} class="sparrow-choose-file-label ps-2"
-            >Choose File</label
-          >
-
-          <input
-            class="sparrow-choose-file-input visually-hidden"
-            type="file"
-            {value}
-            id={inputId}
-            placeholder={inputPlaceholder}
-            accept={generateAcceptString()}
-            on:change={(e) => {
-              onChange(e, maxFileSize, supportedFileTypes);
-            }}
-          />
+          </div>
         </div>
       </div>
     {/if}
   </div>
 
   {#if !Array.isArray(value) && value.size > 0}
-    <div class="sparrow-input-image-preview rounded d-flex gap-2">
-      {#if value.bufferString}
-        <img class="rounded p-2" src={base64ToURL(value)} alt="" />
-      {:else}
-        <img class="rounded p-2" src={imageDataToURL(value)} alt="" />
-      {/if}
-      <div class="align-items-end justify-content-end d-flex gap-2">
-        <button
-          on:click={editValue}
-          class="edit-btn border-0 p-1 rounded align-items-center justify-content-center d-flex"
-        >
-          <EditIcon height={12} width={12} />
-        </button>
-        <button
-          on:click={resetValue}
-          class="del-btn border-0 p-1 rounded align-items-center justify-content-center d-flex"
+    <div
+      class="sparrow-input-image-preview d-flex gap-2 border-radius-4 align-items-center"
+    >
+      <div
+        class="sparrow-input-box d-flex col align-items-center justify-content-start"
+      >
+        <div class="d-flex align-items-center">
+          {#if value.bufferString}
+            <img
+              class="image-box rounded-circle border"
+              src={base64ToURL(value)}
+              alt="Profile Image"
+            />
+          {:else}
+            <img
+              class="image-box rounded-circle border"
+              src={imageDataToURL(value)}
+              alt="Profile Image"
+            />
+          {/if}
+        </div>
+        <span class="ms-1 file-name-text text-fs-12"
+          >{truncateFileName(fileName, 6)}</span
         >
-          <DeleteIcon height={12} width={12} />
-        </button>
+        <div class="ms-auto d-flex">
+          <button
+            on:click={editValue}
+            class="edit-btn border-0 p-1 d-flex align-items-center justify-content-center"
+          >
+            <NewEditIcon height={16} width={16} />
+          </button>
+          <button
+            on:click={resetValue}
+            class="del-btn border-0 p-1 d-flex align-items-center justify-content-center"
+          >
+            <NewDeleteIcon height={14} width={14} />
+          </button>
+        </div>
       </div>
     </div>
     <input
-      class="sparrow-choose-file-input d-none overflow-hidden"
+      class="sparrow-choose-file-input text-fs-14 d-none overflow-hidden"
       type="file"
       id={inputId}
       placeholder={inputPlaceholder}
       accept={generateAcceptString()}
+      {disabled}
       on:change={(e) => {
         onChange(e, maxFileSize, supportedFileTypes);
       }}
@@ -130,62 +191,105 @@
 </div>
 
 <style lang="scss">
-  .sparrow-input-label {
-    font-size: var(--base-text);
-  }
-  .sparrow-input-required {
-    color: var(--dangerColor);
+  .sparrow-choose-file-input-button {
+    margin-top: 22px;
+    margin-bottom: 22px;
   }
   .sparrow-file-input {
-    outline: none;
+    height: 164px;
+    min-width: 240px;
+    max-width: 540px;
     border-radius: 4px;
-    font-size: var(--base-text);
+    transition:
+      border 0.2s ease-in-out,
+      background-color 0.2s ease-in-out;
+
+    &:hover {
+      border: 1px dashed var(--border-ds-neutral-300) !important;
+      cursor: pointer;
+    }
+
+    &:focus {
+      border: 1px dashed var(--border-ds-primary-300) !important;
+      background-color: var(--bg-ds-surface-500);
+    }
+  }
+
+  .sparrow-file-input.drag-over {
+    border: 1px dashed var(--border-ds-primary-300) !important;
+    background-color: var(--bg-ds-surface-500);
+  }
+  .sparrow-file-input:hover {
+    border: 1px solid var(--border-ds-neutral-300);
+    cursor: pointer;
+  }
+  .sparrow-upload-text {
+    color: var(--text-ds-primary-300);
+    font-family: "Inter", sans-serif;
+    text-align: center;
+    cursor: pointer;
   }
-  .sparrow-input-label-desc {
-    color: var(--request-arc);
-    font-size: var(--small-text);
+  .file-type-text {
+    color: var(--text-ds-neutral-400);
+    font-family: "Inter", sans-serif;
+    text-align: left;
   }
-  .sparrow-file-input-placeholder {
-    color: var(--request-arc);
-    font-size: var(--base-text);
+  .file-type-container-one {
+    border-right: 1px solid var(--border-ds-surface-100);
+  }
+  .file-type-container-two {
+    border-right: 1px solid var(--border-ds-surface-100);
   }
   .sparrow-choose-file-input::file-selector-button {
     background-color: transparent;
-    color: var(--primary-btn-color);
+    color: var(--bg-ds-neutral-400);
     border: 0;
-    font-size: var(--small-text);
   }
 
   .sparrow-choose-file-label {
-    color: var(--text-primary-300);
+    color: var(--text-ds-neutral-400);
   }
 
   .sparrow-input-image-preview > img {
     width: 80px;
     border: 1px solid #313233;
     height: 80px;
-    background-color: var(--bg-tertiary-300);
+    background-color: var(--bg-ds-surface-400);
   }
   .sparrow-input-image-preview {
-    .edit-btn,
-    .del-btn {
-      background-color: transparent;
-      height: 24px;
-      width: 24px;
-      display: flex;
-      align-items: center;
-    }
-    .edit-btn:hover,
-    .del-btn:hover {
-      background-color: var(--bg-tertiary-300);
-    }
+    height: 44px;
+    min-width: 240px;
+    max-width: 540px;
+    gap: 4px;
+    border-radius: 4px;
+    background-color: var(--bg-ds-surface-400);
+    padding: 8px;
+    padding-right: 80px;
   }
-  .sparrow-file-input-error-text {
-    color: var(--dangerColor);
-    font-size: var(--small-text);
+  .sparrow-input-box {
+    width: 100%;
+    max-width: 138px;
+    height: 28px;
+    border-radius: 30px;
+    background-color: var(--bg-ds-surface-100);
+    padding-left: 2px;
   }
 
-  .sparrow-input-file-type {
-    border: 1px solid var(--border-color);
+  .image-box {
+    height: 24px;
+    width: 24px;
+  }
+  .file-name-text {
+    color: var(--text-ds-danger-300);
+    font-family: "Inter", sans-serif;
+    font-weight: 400px;
+  }
+
+  .edit-btn,
+  .del-btn {
+    background-color: transparent;
+    width: 28px;
+    height: 28px;
+    transition: background-color 0.3s ease;
   }
 </style>