@hyvor/design 1.1.18 → 1.1.19-beta-file-uploader.1

package/dist/components/Base/Base.svelte

@@ -4,6 +4,7 @@
 	import DarkProvider from './../Dark/DarkProvider.svelte';
 	import '../../index.js';
 	import ToastProvider from '../Toast/ToastProvider.svelte';
+	import FileUploaderProvider from '../FileUploader/FileUploaderProvider.svelte';
 
 	interface Props {
 		dark?: boolean;
@@ -23,3 +24,4 @@
 
 <ToastProvider />
 <ConfirmModalProvider />
+<FileUploaderProvider />

package/dist/components/EmojiPicker/EmojiSelector.svelte

@@ -160,8 +160,6 @@
 		max-height: 370px;
 		overflow-y: auto;
 	}
-	.wrap {
-	}
 	.emojis {
 		display: flex;
 		flex-wrap: wrap;

package/dist/components/FileUploader/FileUploader.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import IconCardImage from '@hyvor/icons/IconCardImage';
+	import IconCaretLeft from '@hyvor/icons/IconCaretLeft';
+	import IconCloudUpload from '@hyvor/icons/IconCloudUpload';
+	import Button from '../Button/Button.svelte';
+	import Modal from '../Modal/Modal.svelte';
+	import TabNav from '../TabNav/TabNav.svelte';
+	import TabNavItem from '../TabNav/TabNavItem.svelte';
+	import {
+		clearSelectedFile,
+		closeFileUploader,
+		getFileUploaderConfig,
+		selectedFile
+	} from './file-uploader.js';
+	import TabUpload from './TabUpload/TabUpload.svelte';
+	import Preview from './Preview/Preview.svelte';
+
+	const config = getFileUploaderConfig();
+
+	let tab = $state('upload');
+
+	function onClose() {
+		closeFileUploader();
+	}
+
+	function handleBack() {
+		clearSelectedFile();
+	}
+</script>
+
+<div class="image-uploader">
+	<Modal
+		show={true}
+		size="large"
+		closeOnEscape={false}
+		closeOnOutsideClick={false}
+		on:cancel={onClose}
+	>
+		{#snippet title()}
+			<div>
+				{#if $selectedFile}
+					<Button color="input" onclick={handleBack}>
+						{#snippet start()}
+							<IconCaretLeft va />
+						{/snippet}
+						Back
+					</Button>
+				{:else}
+					<TabNav bind:active={tab}>
+						<TabNavItem name="upload">
+							{#snippet start()}
+								<IconCloudUpload />
+							{/snippet}
+							Upload
+						</TabNavItem>
+
+						<!-- <TabNavItem name="media">
+							{#snippet start()}
+								<IconCardImage />
+							{/snippet}
+							Media Library
+						</TabNavItem> -->
+
+						{#if config.type === 'image'}
+							<!-- <TabNavItem name="unsplash">
+								{#snippet start()}
+									<svg
+										role="img"
+										width="1em"
+										height="1em"
+										fill="currentColor"
+										viewBox="0 0 24 24"
+										xmlns="http://www.w3.org/2000/svg"
+										><path
+											d="M7.5 6.75V0h9v6.75h-9zm9 3.75H24V24H0V10.5h7.5v6.75h9V10.5z"
+										/></svg
+									>
+								{/snippet}
+								Unsplash
+							</TabNavItem>
+							<TabNavItem name="excalidraw">
+								{#snippet start()}
+									<ExcalidrawIcon />
+								{/snippet}
+								Excalidraw
+							</TabNavItem> -->
+						{/if}
+					</TabNav>
+				{/if}
+			</div>
+		{/snippet}
+		<div class="body" style:position={selectedFile ? 'relative' : undefined}>
+			{#if tab === 'upload'}
+				<TabUpload />
+			{/if}
+
+			{#if $selectedFile}
+				<Preview />
+			{/if}
+
+			<!-- {#if tab === 'upload'}
+				<TabUpload {type} on:select={handleSelect} />
+			{:else if tab === 'media' && type !== 'any'}
+				<Media {type} on:select={handleSelect} />
+			{:else if tab === 'unsplash'}
+				<Unsplash on:select={handleSelect} />
+			{:else if tab === 'excalidraw'}
+				<Excalidraw on:select={handleSelect} />
+			{/if}
+
+			 -->
+		</div>
+	</Modal>
+</div>
+
+<style>.image-uploader :global(.wrap) {
+  z-index: 1000 !important;
+}
+
+.image-uploader :global(.inner) {
+  height: 100%;
+  width: 1100px !important;
+  display: flex;
+  flex-direction: column;
+}
+.image-uploader :global(.inner) :global(> .content) {
+  flex: 1;
+  padding-top: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.body {
+  flex: 1;
+  min-height: 0;
+}</style>

package/dist/components/FileUploader/FileUploader.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const FileUploader: import("svelte").Component<Record<string, never>, {}, "">;
+type FileUploader = ReturnType<typeof FileUploader>;
+export default FileUploader;

package/dist/components/FileUploader/FileUploaderProvider.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { fileUploaderConfig } from './file-uploader.js';
+	import FileUploader from './FileUploader.svelte';
+</script>
+
+{#if $fileUploaderConfig}
+	<FileUploader />
+{/if}

package/dist/components/FileUploader/FileUploaderProvider.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FileUploaderProvider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FileUploaderProvider = InstanceType<typeof FileUploaderProvider>;
+export default FileUploaderProvider;

package/dist/components/FileUploader/Preview/Meta.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	interface Props {
+		name: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { name, children }: Props = $props();
+</script>
+
+<div class="meta">
+	<div class="name">{name}</div>
+	<div class="value">{@render children?.()}</div>
+</div>
+
+<style>
+	.meta {
+		display: flex;
+		flex-direction: column;
+		padding: 0 15px;
+	}
+
+	.name {
+		font-size: 13px;
+		color: var(--text-light);
+		margin-bottom: 10px;
+	}
+	.value {
+		font-weight: 600;
+	}
+</style>

package/dist/components/FileUploader/Preview/Meta.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    name: string;
+    children?: import('svelte').Snippet;
+}
+declare const Meta: import("svelte").Component<Props, {}, "">;
+type Meta = ReturnType<typeof Meta>;
+export default Meta;

package/dist/components/FileUploader/Preview/Preview.svelte

@@ -0,0 +1,308 @@
+<script lang="ts">
+	import Meta from './Meta.svelte';
+	import IconCheckAll from '@hyvor/icons/IconCheckAll';
+	import IconCloudUpload from '@hyvor/icons/IconCloudUpload';
+
+	import { onDestroy, onMount } from 'svelte';
+	import { completeFileUpload, getFileUploaderConfig, selectedFile } from '../file-uploader.js';
+	import TextInput from '../../TextInput/TextInput.svelte';
+	import Switch from '../../Switch/Switch.svelte';
+	import Button from '../../Button/Button.svelte';
+	import Loader from '../../Loader/Loader.svelte';
+	import toast from '../../Toast/toast.js';
+	import { byteFormatter, toKebabCase } from '../helpers.js';
+
+	const config = getFileUploaderConfig();
+	let file = $selectedFile!;
+
+	const fileUrl = getFileUrl();
+
+	function getFileUrl(): string {
+		if (file.upload) {
+			return URL.createObjectURL(file.upload.blob);
+		}
+		return ''; // TODO
+	}
+
+	let imageSize = $state(getInitialImageSize());
+
+	function getInitialImageSize() {
+		if (file.upload) {
+			return file.upload.blob.size;
+		}
+		return null;
+	}
+
+	let imageName = $state(toKebabCase(getInitialImageName()));
+
+	function getInitialImageName() {
+		if (file.upload && file.upload.blob instanceof File) {
+			return file.upload.blob.name;
+		}
+		// TODO: add other
+		return null;
+	}
+
+	let nameError = $state('');
+
+	let imgEl: HTMLImageElement | undefined = $state();
+
+	let width = $state(0);
+	let height = $state(0);
+
+	function getShouldUpload() {
+		if (file.from === 'excalidraw' || file.from == 'upload') return true;
+		return false;
+	}
+
+	function getCanChangeUpload() {
+		return file.from === 'upload' && file.upload?.type === 'url' && file.upload?.fetchedUrl;
+	}
+
+	function getHosting() {
+		if (file.from === 'upload') {
+			if (file.upload?.type === 'url' && file.upload?.fetchedUrl) {
+				const fetchedUrl = file.upload.fetchedUrl!;
+				const domain = new URL(fetchedUrl).hostname;
+				return `External (${domain})`;
+			}
+		}
+
+		if (file.from === 'unsplash') {
+			return 'Unsplash';
+		}
+
+		if (file.from === 'media') {
+			return 'Media Library';
+		}
+
+		return null;
+	}
+
+	let shouldUpload = $state(getShouldUpload());
+	const canChangeUpload = getCanChangeUpload();
+	const hosting = getHosting();
+
+	function handleImageLoad() {
+		if (!imgEl) return;
+		width = imgEl.naturalWidth;
+		height = imgEl.naturalHeight;
+	}
+
+	function tryGetSize() {
+		fetch(fileUrl)
+			.then((res) => res.blob())
+			.then((blob) => {
+				imageSize = blob.size;
+			})
+			.catch((err) => {
+				console.error(err);
+			});
+	}
+
+	let isUploading = $state(false);
+
+	function handleUpload() {
+		if (shouldUpload && file.upload) {
+			// TODO: other blobs should be handled
+			isUploading = true;
+
+			if (imageName.length > 255) {
+				toast.error('Image name is too long');
+				isUploading = false;
+				return;
+			}
+
+			config
+				.uploader(file.upload.blob, imageName)
+				.then((res) => {
+					completeFileUpload({
+						url: res.url,
+						selectedFile: file
+					});
+				})
+				.catch((err) => {
+					toast.error(err.message || 'Failed to upload image');
+				})
+				.finally(() => {
+					isUploading = false;
+				});
+		} else {
+			completeFileUpload({
+				url: file.upload!.fetchedUrl!,
+				selectedFile: file
+			});
+		}
+	}
+
+	function handleNameChange() {
+		nameError = '';
+		if (imageName.length > 255) {
+			nameError = 'Too long';
+		} else if (imageName.includes('/')) {
+			nameError = '/ is not allowed';
+		}
+		console.log(imageName);
+	}
+
+	onMount(() => {
+		if (imageSize === null) {
+			tryGetSize();
+		}
+	});
+
+	onDestroy(() => {
+		URL.revokeObjectURL(fileUrl);
+	});
+</script>
+
+<div class="selected-image">
+	{#if isUploading}
+		<Loader full>Uploading...</Loader>
+	{:else}
+		<div class="img-wrap">
+			{#if file.type === 'audio'}
+				<audio src={fileUrl} controls></audio>
+			{:else if file.type === 'image'}
+				<img src={fileUrl} alt="Editing" bind:this={imgEl} onload={handleImageLoad} />
+			{:else}
+				No preview available
+			{/if}
+		</div>
+
+		<div class="top-bar">
+			<div class="meta">
+				{#if file.type === 'image'}
+					<Meta name="Dimensions (px)">
+						{width} x {height}
+					</Meta>
+				{/if}
+				<Meta name="File Size">
+					{#if imageSize !== null}
+						{byteFormatter(imageSize)}
+					{:else}
+						Unknown
+					{/if}
+				</Meta>
+				<div class="name-editor">
+					<div class="name">
+						Name
+						{#if nameError}
+							<span class="name-error">Error: {nameError}</span>
+						{/if}
+					</div>
+					<TextInput
+						bind:value={imageName}
+						on:input={handleNameChange}
+						placeholder="Image Name"
+						state={nameError ? 'error' : 'default'}
+						disabled={!shouldUpload}
+					/>
+				</div>
+				{#if hosting}
+					<Meta name="Hosting">
+						{hosting}
+					</Meta>
+				{/if}
+			</div>
+			{#if file.from !== 'media'}
+				<div class="upload-switch">
+					Upload to Media Library
+					<Switch bind:checked={shouldUpload} disabled={!canChangeUpload} />
+				</div>
+			{/if}
+		</div>
+
+		<div class="footer">
+			<Button on:click={handleUpload}>
+				{shouldUpload ? 'Upload' : 'Select'}
+				{#snippet end()}
+					{#if shouldUpload}
+						<IconCloudUpload />
+					{:else}
+						<IconCheckAll />
+					{/if}
+				{/snippet}
+			</Button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.selected-image {
+		position: absolute;
+		z-index: 1000000;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: var(--box-background);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.top-bar {
+		padding: 10px 25px;
+		border-top: 1px solid var(--border);
+		border-bottom: 1px solid var(--border);
+		margin: 0 -25px;
+		display: flex;
+		align-items: center;
+	}
+
+	.meta {
+		display: flex;
+		flex: 1;
+	}
+
+	.img-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		padding: 25px;
+		flex: 1;
+		min-height: 0;
+		min-width: 0;
+		margin-bottom: 20px;
+	}
+	.img-wrap :global(img) {
+		display: block;
+		max-width: 100%;
+	}
+	img {
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	.upload-switch {
+		display: inline-flex;
+		align-items: center;
+		gap: 10px;
+		font-size: 14px;
+	}
+
+	.footer {
+		padding: 5px 25px;
+		padding-top: 15px;
+		text-align: center;
+	}
+
+	.name-editor {
+		display: flex;
+		flex-direction: column;
+		padding: 0 15px;
+	}
+
+	.name {
+		font-size: 13px;
+		color: var(--text-light);
+		margin-bottom: 5px;
+		display: inline-flex;
+		gap: 4px;
+	}
+	.name .name-error {
+		color: var(--red-dark);
+		font-size: 12px;
+	}
+</style>

package/dist/components/FileUploader/Preview/Preview.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Preview: import("svelte").Component<Record<string, never>, {}, "">;
+type Preview = ReturnType<typeof Preview>;
+export default Preview;

package/dist/components/FileUploader/TabUpload/TabUpload.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+	import IconArrowReturnLeft from '@hyvor/icons/IconArrowReturnLeft';
+	import { onMount } from 'svelte';
+	import {
+		getFileUploaderConfig,
+		getMimeNamesJoined,
+		setSelectedFile,
+		validateMimeType,
+		type UploadType
+	} from '../file-uploader.js';
+	import { byteFormatter, isValidUrl } from '../helpers.js';
+	import toast from '../../Toast/toast.js';
+	import Loader from '../../Loader/Loader.svelte';
+	import TextInput from '../../TextInput/TextInput.svelte';
+	import Button from '../../Button/Button.svelte';
+
+	let isUploading = $state(false);
+
+	const config = getFileUploaderConfig();
+
+	let inputEl: HTMLInputElement;
+	let byUrlInputEl: HTMLInputElement | undefined = $state();
+
+	let byUrl = $state('');
+	let isDragging = $state(false);
+
+	function getCtrl() {
+		const platform =
+			(navigator as any)?.userAgentData?.platform || navigator?.platform || 'unknown';
+		return platform.match(/mac/i) ? '⌘' : 'Ctrl';
+	}
+
+	function getSelectedType(blob: Blob | null = null): UploadType {
+		if (config.type === 'file' && blob) {
+			if (blob.type.indexOf('image') === 0) return 'image';
+			if (blob.type.indexOf('audio') === 0) return 'audio';
+		}
+		return config.type;
+	}
+
+	function handleFetch() {
+		isUploading = true;
+
+		fetch(byUrl)
+			.then((res) => res.blob())
+			.then((blob) => {
+				if (!validateMimeType(blob.type)) {
+					const names = getMimeNamesJoined();
+					toast.error(
+						`Only ${names} files are allowed. Current file type is ${blob.type}`
+					);
+					return;
+				}
+
+				setSelectedFile({
+					type: getSelectedType(blob),
+					from: 'upload',
+					upload: {
+						type: 'url',
+						fetchedUrl: byUrl,
+						blob
+					}
+				});
+			})
+			.catch((err) => {
+				toast.error(`Failed to fetch file from the URL`);
+			})
+			.finally(() => {
+				isUploading = false;
+			});
+	}
+
+	function handlePaste(e: ClipboardEvent) {
+		// first check if there's any text (url)
+		const text = e.clipboardData?.getData('text/plain') || '';
+		if (isValidUrl(text) && (e.target as HTMLElement).tagName !== 'INPUT') {
+			byUrl = text;
+			handleFetch();
+			return;
+		}
+
+		// only looking for images
+		if (config.type === 'audio') return;
+
+		const items = e.clipboardData?.items;
+		if (!items) return;
+
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i]!;
+			if (item.type.indexOf('image') === 0) {
+				const blob = item.getAsFile();
+				if (!blob) continue;
+
+				setSelectedFile({
+					type: getSelectedType(blob),
+					from: 'upload',
+					upload: { type: 'paste', blob }
+				});
+				break;
+			}
+		}
+	}
+
+	function handleDragEnter(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		isDragging = true;
+	}
+
+	function handleDragLeave(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		isDragging = false;
+	}
+
+	function handleDragDrop(e: DragEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+
+		isDragging = false;
+
+		if (!e.dataTransfer) return;
+		const files = e.dataTransfer.files;
+		const file = getFileFromFiles(files);
+		if (!file) return;
+
+		setSelectedFile({
+			type: getSelectedType(file),
+			from: 'upload',
+			upload: { type: 'dnd', blob: file }
+		});
+	}
+
+	function handleUploadClick() {
+		inputEl?.click();
+	}
+
+	function handleInputChange(e: any) {
+		const file = getFileFromFiles(e.target.files);
+		if (!file) return;
+
+		setSelectedFile({
+			type: getSelectedType(file),
+			from: 'upload',
+			upload: { type: 'browse', blob: file }
+		});
+	}
+
+	function getFileFromFiles(files: FileList | null): File | null {
+		if (!files || files.length === 0) {
+			toast.error('No files selected');
+			return null;
+		}
+		const file = files[0];
+		if (!file) {
+			toast.error('No files selected');
+			return null;
+		}
+
+		const maxBytes = config.maxFileSizeInMB * 1024 * 1024;
+		if (file.size > maxBytes) {
+			toast.error('File size exceeds the limit of ' + byteFormatter(maxBytes));
+			return null;
+		}
+
+		if (validateMimeType(file.type) === false) {
+			const names = getMimeNamesJoined();
+			toast.error(`Only ${names} files are allowed. Current file type is ${file.type}`);
+			return null;
+		}
+
+		return file;
+	}
+
+	onMount(() => {
+		byUrl && byUrlInputEl && byUrlInputEl.focus();
+	});
+</script>
+
+<svelte:window
+	onpaste={handlePaste}
+	ondragenter={handleDragEnter}
+	ondragover={handleDragEnter}
+	ondragleave={handleDragLeave}
+	ondragexit={handleDragLeave}
+/>
+
+<div class="tab">
+	<input
+		type="file"
+		accept={config.type === 'audio' ? 'audio/*' : config.type === 'image' ? 'image/*' : '*'}
+		style="display:none"
+		bind:this={inputEl}
+		onchange={handleInputChange}
+	/>
+
+	{#if isUploading}
+		<Loader full />
+	{:else}
+		<div class="upload-wrap">
+			<div
+				class="upload-area"
+				onclick={handleUploadClick}
+				ondrop={handleDragDrop}
+				role="button"
+				tabindex="0"
+				onkeyup={(e) => e.key === 'Enter' && handleUploadClick()}
+			>
+				{#if isDragging}
+					Drop here!
+				{:else}
+					Drag and drop, paste ({getCtrl()} + v), or click to upload
+				{/if}
+			</div>
+		</div>
+
+		{#if config.type === 'image'}
+			<div class="by-url-wrap">
+				<div class="title">or, Upload by URL</div>
+
+				<div class="input-button">
+					<TextInput
+						block
+						placeholder="Enter image URL"
+						bind:value={byUrl}
+						on:keyup={(e) => e.key === 'Enter' && handleFetch()}
+						bind:input={byUrlInputEl}
+					/>
+					<Button disabled={byUrl.trim() === ''} on:click={handleFetch}>
+						Fetch {#snippet end()}
+							<IconArrowReturnLeft />
+						{/snippet}
+					</Button>
+				</div>
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<style>.tab {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 15px;
+}
+
+.upload-wrap {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+.upload-wrap .upload-area {
+  background-color: var(--input);
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: var(--text-light);
+  transition: 0.2s box-shadow;
+  cursor: pointer;
+}
+.upload-wrap .upload-area:hover {
+  box-shadow: 0 0 0 2px var(--accent-light);
+}
+
+.by-url-wrap {
+  margin-top: 15px;
+}
+.by-url-wrap .title {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-light);
+  margin-bottom: 10px;
+  padding-left: 5px;
+  text-align: center;
+}
+.by-url-wrap .input-button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}</style>

package/dist/components/FileUploader/TabUpload/TabUpload.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TabUpload: import("svelte").Component<Record<string, never>, {}, "">;
+type TabUpload = ReturnType<typeof TabUpload>;
+export default TabUpload;

package/dist/components/FileUploader/file-uploader.d.ts

@@ -0,0 +1,56 @@
+export declare let fileUploaderConfig: import("svelte/store").Writable<FileUploaderConfigInternal | null>;
+export declare let selectedFile: import("svelte/store").Writable<SelectedFile | null>;
+export type UploadType = 'image' | 'audio' | 'file';
+export interface FileUploaderConfig {
+    /**
+     * image:
+     *  - shows unsplash and excalidraw tabs
+     * audio:
+     *  - shows audio preview
+     * file
+     *  - allows any file type
+     *  - preview tries to detect file type (image/audio/other)
+     */
+    type: UploadType;
+    uploader: (file: Blob, name: string | null) => Promise<{
+        url: string;
+    }>;
+    allowedMimeTypes?: string[];
+    maxFileSizeInMB?: number;
+}
+export type SelectedFileFrom = 'upload' | 'media' | 'unsplash' | 'excalidraw';
+export type SelectedFileUploadType = 'paste' | 'dnd' | 'browse' | 'url';
+export interface UnsplashImage {
+    url: string;
+    author: string;
+    author_url: string;
+    title: string | null;
+    alt: string | null;
+}
+export interface SelectedFile {
+    type: UploadType;
+    from: SelectedFileFrom;
+    upload?: {
+        type: SelectedFileUploadType;
+        blob: Blob;
+        fetchedUrl?: string;
+    };
+    unsplash?: UnsplashImage;
+}
+export interface UploadedFile {
+    url: string;
+    selectedFile: SelectedFile;
+}
+export type FileUploaderConfigInternal = Required<FileUploaderConfig> & {
+    onCancel: () => void;
+    onUpload: (file: UploadedFile) => void;
+};
+export declare function uploadFile(config: FileUploaderConfig): Promise<UploadedFile | null>;
+export declare function getFileUploaderConfig(): FileUploaderConfigInternal;
+export declare function closeFileUploader(): void;
+export declare function completeFileUpload(file: UploadedFile): void;
+export declare function setSelectedFile(file: SelectedFile): void;
+export declare function clearSelectedFile(): void;
+export declare function validateMimeType(mimeType: string): boolean;
+export declare function getMimeNames(): string[];
+export declare function getMimeNamesJoined(): string;

package/dist/components/FileUploader/file-uploader.js

@@ -0,0 +1,92 @@
+import { get, writable } from "svelte/store";
+export let fileUploaderConfig = writable(null);
+export let selectedFile = writable(null);
+const defaults = {
+    type: 'image',
+    uploader: null,
+    allowedMimeTypes: [],
+    maxFileSizeInMB: 10,
+};
+// UploadedFile is uploaded
+// null means cancelled
+export function uploadFile(config) {
+    return new Promise((resolve, reject) => {
+        const finalConfig = {
+            ...defaults,
+            ...config,
+            onCancel: () => {
+                resolve(null);
+            },
+            onUpload: (file) => {
+                resolve(file);
+            },
+        };
+        if (config.allowedMimeTypes === undefined) {
+            // set based on type
+            if (finalConfig.type === 'image') {
+                finalConfig.allowedMimeTypes = ALLOWED_MIME_TYPES_IMAGE;
+            }
+            else if (finalConfig.type === 'audio') {
+                finalConfig.allowedMimeTypes = ALLOWED_MIME_TYPES_AUDIO;
+            }
+        }
+        fileUploaderConfig.set(finalConfig);
+    });
+}
+// to be used internally when the modal is opened
+export function getFileUploaderConfig() {
+    return get(fileUploaderConfig);
+}
+export function closeFileUploader() {
+    const config = getFileUploaderConfig();
+    config.onCancel();
+    fileUploaderConfig.set(null);
+    clearSelectedFile();
+}
+export function completeFileUpload(file) {
+    const config = getFileUploaderConfig();
+    config.onUpload(file);
+    closeFileUploader();
+}
+export function setSelectedFile(file) {
+    selectedFile.set(file);
+}
+export function clearSelectedFile() {
+    selectedFile.set(null);
+}
+const ALLOWED_MIME_TYPES_IMAGE = [
+    'image/gif',
+    'image/jpeg',
+    'image/png',
+    'image/svg+xml',
+    'image/webp',
+    'image/apng',
+    'image/avif'
+];
+const ALLOWED_MIME_TYPES_AUDIO = [
+    'audio/mpeg',
+    'audio/ogg',
+    'audio/wav',
+    'audio/webm'
+];
+export function validateMimeType(mimeType) {
+    const config = getFileUploaderConfig();
+    if (config.allowedMimeTypes.length === 0) {
+        return true; // all mime types allowed
+    }
+    return config.allowedMimeTypes.includes(mimeType);
+}
+export function getMimeNames() {
+    const config = getFileUploaderConfig();
+    if (config.allowedMimeTypes.length === 0) {
+        return []; // all mime types allowed
+    }
+    return config.allowedMimeTypes.map(m => m.split('/')[1]?.split('+')[0]);
+}
+export function getMimeNamesJoined() {
+    const names = getMimeNames();
+    if (names.length === 0) {
+        return 'any';
+    }
+    return names.join(', ').toUpperCase();
+}

package/dist/components/FileUploader/helpers.d.ts

@@ -0,0 +1,6 @@
+export declare function isValidUrl(url: string): boolean;
+/**
+ * https://stackoverflow.com/a/18650828
+ */
+export declare function byteFormatter(bytes: number): string;
+export declare function toKebabCase(str: string | null): string;

package/dist/components/FileUploader/helpers.js

@@ -0,0 +1,31 @@
+export function isValidUrl(url) {
+    try {
+        new URL(url);
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+}
+/**
+ * https://stackoverflow.com/a/18650828
+ */
+export function byteFormatter(bytes) {
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    if (bytes == 0)
+        return '0 Bytes';
+    const i = parseInt(String(Math.floor(Math.log(bytes) / Math.log(1000))));
+    return Math.round(bytes / Math.pow(1000, i)) + ' ' + sizes[i];
+}
+export function toKebabCase(str) {
+    if (!str) {
+        return '';
+    }
+    return str
+        .replace(/\s+/g, '-') // Replace spaces with hyphens
+        .replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`) // Add hyphen before capital letters and convert them to lowercase
+        .replace(/_+/g, '-') // Replace underscores with hyphens
+        .replace(/--+/g, '-') // Replace multiple hyphens with a single one
+        .replace(/^-|-$|^-+|-+$/g, '') // Remove leading and trailing hyphens
+        .toLowerCase(); // Ensure everything is in lowercase
+}

package/dist/components/HyvorBar/BarUserPreview.svelte

@@ -31,11 +31,6 @@
 		flex-shrink: 0;
 		margin-right: 8px;
 	}
-	img {
-		width: 40px;
-		height: 40px;
-		border-radius: 50%;
-	}
 	.right {
 		flex: 1;
 		line-height: 18px;

package/dist/components/index.d.ts

@@ -25,6 +25,7 @@ export { default as FormControl } from './FormControl/FormControl.svelte';
 export { default as InputGroup } from './FormControl/InputGroup.svelte';
 export { default as Label } from './FormControl/Label.svelte';
 export { default as Validation } from './FormControl/Validation.svelte';
+export { uploadFile, type FileUploaderConfig, type UploadedFile as FileUploaderUploadedFile, type SelectedFile as FileUploaderSelectedFile, } from './FileUploader/file-uploader.js';
 export { default as HyvorBar } from './HyvorBar/HyvorBar.svelte';
 export { bar as hyvorBar } from './HyvorBar/bar.js';
 export { default as IconButton } from './IconButton/IconButton.svelte';

package/dist/components/index.js

@@ -25,6 +25,7 @@ export { default as FormControl } from './FormControl/FormControl.svelte';
 export { default as InputGroup } from './FormControl/InputGroup.svelte';
 export { default as Label } from './FormControl/Label.svelte';
 export { default as Validation } from './FormControl/Validation.svelte';
+export { uploadFile, } from './FileUploader/file-uploader.js';
 export { default as HyvorBar } from './HyvorBar/HyvorBar.svelte';
 export { bar as hyvorBar } from './HyvorBar/bar.js';
 export { default as IconButton } from './IconButton/IconButton.svelte';

package/package.json

@@ -60,5 +60,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.1.18"
+	"version": "1.1.19-beta-file-uploader.1"
 }