diff --git a/packages/@sparrow-common/src/features/create-team/components/icon-uploader/IconUploader.svelte b/packages/@sparrow-common/src/features/create-team/components/icon-uploader/IconUploader.svelte deleted file mode 100644 index 90c464eae..000000000 --- a/packages/@sparrow-common/src/features/create-team/components/icon-uploader/IconUploader.svelte +++ /dev/null @@ -1,191 +0,0 @@ - - -
-
- {#if value.length == 0 || value.size === 0} -
{ - e.preventDefault(); - isDragOver = true; - }} - on:dragleave={() => { - isDragOver = false; - }} - on:drop={(e) => { - e.preventDefault(); - isDragOver = false; - handleDrop(e, maxFileSize, supportedFileTypes); - }} - > - {inputPlaceholder} - -
- - - - - { - onChange(e, maxFileSize, supportedFileTypes); - }} - /> -
-
- {/if} -
- - {#if !Array.isArray(value) && value.size > 0} -
- {#if value.bufferString} - - {:else} - - {/if} -
- - -
-
- { - onChange(e, maxFileSize, supportedFileTypes); - }} - /> - {/if} -
- - diff --git a/packages/@sparrow-common/src/features/create-team/components/index.ts b/packages/@sparrow-common/src/features/create-team/components/index.ts index 9de7df411..0e535bdc1 100644 --- a/packages/@sparrow-common/src/features/create-team/components/index.ts +++ b/packages/@sparrow-common/src/features/create-team/components/index.ts @@ -1,4 +1,3 @@ -export { default as IconUploader } from "./icon-uploader/IconUploader.svelte"; export { default as TeamName } from "./team-name/TeamName.svelte"; export { default as TeamDescription } from "./team-description/TeamDescription.svelte"; export { default as TeamIcon } from "./team-icon/TeamIcon.svelte"; diff --git a/packages/@sparrow-common/src/features/create-team/components/team-icon/TeamIcon.svelte b/packages/@sparrow-common/src/features/create-team/components/team-icon/TeamIcon.svelte index 621685b7f..c22f378ff 100644 --- a/packages/@sparrow-common/src/features/create-team/components/team-icon/TeamIcon.svelte +++ b/packages/@sparrow-common/src/features/create-team/components/team-icon/TeamIcon.svelte @@ -2,7 +2,8 @@ /** * Components */ - import { IconUploader, FileType } from ".."; + import { FileType } from ".."; + import { IconUploader } from "@sparrow/library/forms"; import { OSDetector } from "@sparrow/common/utils"; /** @@ -16,11 +17,16 @@ import type { TeamForm } from "../../types"; import { platform } from "@tauri-apps/plugin-os"; import { onMount } from "svelte"; + import { MessageTextIcon } from "@sparrow/library/icons"; + import type { SvelteComponent } from "svelte"; + import { UploadArea } from "@sparrow/library/ui"; /** * Exports */ export let teamForm: TeamForm; + export let maxFileSizeText: number = 2; + export let iconComponent: typeof SvelteComponent; /** * Data @@ -125,57 +131,60 @@
- - {ICON_CONFIG.TITLE} - - - {#if !(!Array.isArray(teamForm.file.value) && teamForm.file.value.size > 0)} -

- {ICON_CONFIG.DESCRIPTION} -

- {/if} - - - - - -
- {#if teamForm.file.showFileSizeError} -

- {ICON_CONFIG.SIZE_EXCEED_ERROR_MESSAGE} -

- {:else if teamForm.file.showFileTypeError} -

- {ICON_CONFIG.WRONG_FILE_ERROR_MESSAGE} -

- -
- {#each ICON_CONFIG.FILE_TYPES as fileType (fileType)} - - - - {/each} -
- {/if} -
+ + +
+ + diff --git a/packages/@sparrow-library/src/assets/filetype.svelte b/packages/@sparrow-library/src/assets/filetype.svelte new file mode 100644 index 000000000..ee5dbc4cc --- /dev/null +++ b/packages/@sparrow-library/src/assets/filetype.svelte @@ -0,0 +1,20 @@ + + + + {fileType} + + + diff --git a/packages/@sparrow-library/src/assets/index.ts b/packages/@sparrow-library/src/assets/index.ts index 15f70f18a..b064738da 100644 --- a/packages/@sparrow-library/src/assets/index.ts +++ b/packages/@sparrow-library/src/assets/index.ts @@ -32,6 +32,7 @@ export { default as StatusSuccessIcon } from "./status-success.svelte"; export { default as TickMarkRoundedIcon } from "./tick-mark-rounded.svelte"; export { default as QuestionIcon } from "./question.svelte"; export { default as FilterIcon } from "./filter.svelte"; +export { default as FileType } from "./filetype.svelte"; // Export all SVG files (camelCase) with "Icon" appended export { default as aboutIcon } from "./about.svg"; diff --git a/packages/@sparrow-library/src/forms/file-uploader/IconUploader.svelte b/packages/@sparrow-library/src/forms/file-uploader/IconUploader.svelte new file mode 100644 index 000000000..51e602923 --- /dev/null +++ b/packages/@sparrow-library/src/forms/file-uploader/IconUploader.svelte @@ -0,0 +1,316 @@ + + +
+
+ {#if value.length == 0 || value.size === 0} +
{ + if (!disabled) { + e.preventDefault(); + isDragOver = true; + } + }} + on:dragleave={() => { + if (!disabled) isDragOver = false; + }} + on:drop={(e) => { + if (!disabled) { + e.preventDefault(); + isDragOver = false; + handleDrop(e, maxFileSize, supportedFileTypes); + } + }} + on:focus={() => { + if (!disabled) isFocused = true; + }} + on:blur={() => { + if (!disabled) isFocused = false; + }} + > +
+
+ + +
+
+ + {fileTypes[0]} +
+ {#each fileTypes.slice(1, -1) as fileType, index} +
+ + {fileType} +
+ {/each} +
+ + {fileTypes[fileTypes.length - 1]} +
+
+ { + onChange(e, maxFileSize, supportedFileTypes); + }} + /> +
+
+
+ {/if} +
+ + {#if !Array.isArray(value) && value.size > 0} +
+
+
+ {#if value.bufferString} + Profile Image + {:else} + Profile Image + {/if} +
+ {truncateFileName(fileName, 6)} +
+ + +
+
+
+ { + onChange(e, maxFileSize, supportedFileTypes); + }} + /> + {/if} +
+ + diff --git a/packages/@sparrow-library/src/forms/index.ts b/packages/@sparrow-library/src/forms/index.ts index a3c928814..51b7c05c5 100644 --- a/packages/@sparrow-library/src/forms/index.ts +++ b/packages/@sparrow-library/src/forms/index.ts @@ -5,4 +5,6 @@ export { default as Textarea } from "./textarea/Textarea.svelte"; export { default as Editor } from "./editor/Editor.svelte"; export { default as MultiSelect } from "./multi-select/MultiSelect.svelte"; export { default as TextEditor } from "./text-editor/TextEditor.svelte"; -export {default as Search} from "./search/Search.svelte"; +export { default as Switch } from "./Switch/Switch.svelte"; +export { default as IconUploader } from "./file-uploader/IconUploader.svelte"; +export { default as Search } from "./search/Search.svelte"; diff --git a/packages/@sparrow-library/src/icons/DeleteIcon.svelte b/packages/@sparrow-library/src/icons/DeleteIcon.svelte new file mode 100644 index 000000000..6f479c36f --- /dev/null +++ b/packages/@sparrow-library/src/icons/DeleteIcon.svelte @@ -0,0 +1,20 @@ + + + + + diff --git a/packages/@sparrow-library/src/icons/EditIcon.svelte b/packages/@sparrow-library/src/icons/EditIcon.svelte new file mode 100644 index 000000000..207bc545d --- /dev/null +++ b/packages/@sparrow-library/src/icons/EditIcon.svelte @@ -0,0 +1,20 @@ + + + + + diff --git a/packages/@sparrow-library/src/icons/FileTypeIcon.svelte b/packages/@sparrow-library/src/icons/FileTypeIcon.svelte new file mode 100644 index 000000000..503db996f --- /dev/null +++ b/packages/@sparrow-library/src/icons/FileTypeIcon.svelte @@ -0,0 +1,18 @@ + + + + + diff --git a/packages/@sparrow-library/src/icons/MessageTextIcon.svelte b/packages/@sparrow-library/src/icons/MessageTextIcon.svelte new file mode 100644 index 000000000..0bbf83fcf --- /dev/null +++ b/packages/@sparrow-library/src/icons/MessageTextIcon.svelte @@ -0,0 +1,23 @@ + + +{#if visible} + + + +{/if} diff --git a/packages/@sparrow-library/src/icons/UploadIcon.svelte b/packages/@sparrow-library/src/icons/UploadIcon.svelte new file mode 100644 index 000000000..3b0c6df1d --- /dev/null +++ b/packages/@sparrow-library/src/icons/UploadIcon.svelte @@ -0,0 +1,18 @@ + + + + + diff --git a/packages/@sparrow-library/src/icons/index.ts b/packages/@sparrow-library/src/icons/index.ts index 5c0a7b828..7a4707d45 100644 --- a/packages/@sparrow-library/src/icons/index.ts +++ b/packages/@sparrow-library/src/icons/index.ts @@ -15,6 +15,9 @@ export { default as FolderIcon } from "./Folder.svelte"; export { default as SyncIcon } from "./Sync.svelte"; export { default as GithubIcon } from "./Github.svelte"; export { default as DoubleArrowIcon } from "./DoubleArrow.svelte"; +export { default as UploadIcon2 } from "./UploadIcon.svelte"; +export { default as MessageTextIcon } from "./MessageTextIcon.svelte"; +export { default as FileTypeIcon } from "./FileTypeIcon.svelte"; export { default as DiscordIcon } from "./Discord.svelte"; export { default as LibraryIcon } from "./Library.svelte"; export { default as VectorIcon } from "./Vector.svelte"; @@ -122,6 +125,8 @@ export { default as ThreeDotIcon } from "./ThreeDot.svelte"; export { default as AiSparkleIconV2 } from "./AiSparkleV2.svelte"; export { default as AiSparkleIconV3 } from "./AiSparkleV3.svelte"; +export { default as EditIcon2 } from "./EditIcon.svelte"; +export { default as DeleteIcon } from "./DeleteIcon.svelte"; export { default as DismissRegular } from "./DismissRegular.svelte"; diff --git a/packages/@sparrow-library/src/ui/index.ts b/packages/@sparrow-library/src/ui/index.ts index d7aee90be..456efa9be 100644 --- a/packages/@sparrow-library/src/ui/index.ts +++ b/packages/@sparrow-library/src/ui/index.ts @@ -15,8 +15,9 @@ export * from "./icon-fallback"; export * from "./toast"; export * from "./image-modal"; export * from "./skeleton"; +export * from "./upload-area"; export * from "./toggle"; export * from "./tags"; export * from "./navigator"; export * from "./badge"; -export * from "./keyboardShortcuts" +export * from "./keyboardShortcuts"; diff --git a/packages/@sparrow-library/src/ui/upload-area/UploadArea.svelte b/packages/@sparrow-library/src/ui/upload-area/UploadArea.svelte new file mode 100644 index 000000000..2fb840f2d --- /dev/null +++ b/packages/@sparrow-library/src/ui/upload-area/UploadArea.svelte @@ -0,0 +1,109 @@ + + +
+
+ + {titleName} + + + {#if !(Array.isArray(fileValue) && fileSize > 0)} +

+ {descriptionName} +

+ {/if} + + + + +
+
+ {#if fileSizeError} +
+ {#if iconComponent} + {iconComponent} + {:else} + + {/if} +

+ {fileSizeErrorMessage} +

+
+ {:else if fileTypeError} +
+ {#if iconComponent} + {iconComponent} + {:else} + + {/if} +

+ {fileTypeErrorMessage} +

+
+ + +
+ {#each fileTypes as fileType (fileType)} + + + + {/each} +
+ {/if} +
+ +
+

+ Max file size: {maxFileSizeText}MB +

+
+
+
+
+ + diff --git a/packages/@sparrow-library/src/ui/upload-area/index.ts b/packages/@sparrow-library/src/ui/upload-area/index.ts new file mode 100644 index 000000000..f63448460 --- /dev/null +++ b/packages/@sparrow-library/src/ui/upload-area/index.ts @@ -0,0 +1 @@ +export { default as UploadArea } from "./UploadArea.svelte";