From f6c1ce88923696218c1a98143a010bb2a606e75c Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 16 May 2025 13:50:38 +0530
Subject: [PATCH 1/6] feat: FileInput

---
 .../src/lib/ui/InputFile/InputFile.stories.ts | 15 +++++++++++
 .../src/lib/ui/InputFile/InputFile.svelte     | 27 +++++++++++++++++++
 platforms/metagram/src/lib/ui/index.ts        |  1 +
 3 files changed, 43 insertions(+)
 create mode 100644 platforms/metagram/src/lib/ui/InputFile/InputFile.stories.ts
 create mode 100644 platforms/metagram/src/lib/ui/InputFile/InputFile.svelte

diff --git a/platforms/metagram/src/lib/ui/InputFile/InputFile.stories.ts b/platforms/metagram/src/lib/ui/InputFile/InputFile.stories.ts
new file mode 100644
index 00000000..d0d9bf93
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/InputFile/InputFile.stories.ts
@@ -0,0 +1,15 @@
+import { InputFile } from '..';
+
+export default {
+	title: 'UI/InputFile',
+	component: InputFile,
+	tags: ['autodocs'],
+	render: (args: { type: string; placeholder: string; helperText: string }) => ({
+		Component: InputFile,
+		props: args
+	})
+};
+
+export const Main = {
+	args: {}
+};
diff --git a/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte b/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
new file mode 100644
index 00000000..601afe6a
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	interface IInputFileProps {
+		files: FileList | undefined;
+		placeholder: string;
+	}
+
+	let { files = $bindable() }: IInputFileProps = $props();
+
+	const uniqueId = Math.random().toString().split('.')[1];
+
+	$effect(() => {
+		console.log(files);
+	});
+</script>
+
+<input id={uniqueId} type="file" bind:files class="hidden" />
+
+<label
+	for={uniqueId}
+	class="bg-grey text-black-400 font-geist flex h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal"
+>
+	{#if files}
+		<h3 class="text-black-800">{files[0].name.slice(0, 5) + '...'}</h3>
+	{:else}
+		Click to upload a photo
+	{/if}
+</label>
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index 678e7c16..a1a8c779 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -1,3 +1,4 @@
 export { default as Button } from './Button/Button.svelte';
 export { default as Avatar } from './Avatar/Avatar.svelte';
 export { default as Input } from './Input/Input.svelte';
+export { default as InputFile } from './InputFile/InputFile.svelte';

From ac9c6aa07543d4cd265a554d5b9e307ab457abf4 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 16 May 2025 14:16:55 +0530
Subject: [PATCH 2/6] fix: added icon

---
 platforms/metagram/src/lib/ui/InputFile/InputFile.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte b/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
index 601afe6a..fcb69cda 100644
--- a/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
+++ b/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import {  Album01Icon } from "@hugeicons/core-free-icons";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+
 	interface IInputFileProps {
 		files: FileList | undefined;
 		placeholder: string;
@@ -22,6 +25,9 @@
 	{#if files}
 		<h3 class="text-black-800">{files[0].name.slice(0, 5) + '...'}</h3>
 	{:else}
-		Click to upload a photo
+        <div class="flex flex-col gap-2 items-center">
+            <HugeiconsIcon size="24px" icon={Album01Icon} color="var(--color-black-600)"/>
+            Click to upload a photo
+        </div>
 	{/if}
 </label>

From 513d1033c59ced6cf6bb6ca4de373c4834e59580 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 19 May 2025 10:19:52 +0530
Subject: [PATCH 3/6] feat: cancel upload

---
 .../src/lib/ui/InputFile/InputFile.svelte     | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte b/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
index fcb69cda..a2afc7a5 100644
--- a/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
+++ b/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import {  Album01Icon } from "@hugeicons/core-free-icons";
-	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { Album01Icon } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
 
 	interface IInputFileProps {
 		files: FileList | undefined;
@@ -10,24 +10,41 @@
 	let { files = $bindable() }: IInputFileProps = $props();
 
 	const uniqueId = Math.random().toString().split('.')[1];
+	let inputFile: HTMLInputElement | undefined = $state();
+
+	function cancelUpload(e: MouseEvent) {
+		e.preventDefault();
+		if (inputFile) inputFile.value = '';
+		files = undefined;
+	}
 
 	$effect(() => {
 		console.log(files);
 	});
 </script>
 
-<input id={uniqueId} type="file" bind:files class="hidden" />
+<input id={uniqueId} type="file" bind:files class="hidden" accept="image/*" bind:this={inputFile} />
 
 <label
 	for={uniqueId}
 	class="bg-grey text-black-400 font-geist flex h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal"
 >
 	{#if files}
-		<h3 class="text-black-800">{files[0].name.slice(0, 5) + '...'}</h3>
+		<div class="flex flex-col items-center gap-2">
+			<HugeiconsIcon size="24px" icon={Album01Icon} color="var(--color-black-600)" />
+			<h3 class="text-black-800">{files[0].name.slice(0, 10) + '...'}</h3>
+			<button
+				type="button"
+				onclick={(e) => cancelUpload(e)}
+				class="text-brand-burnt-orange underline decoration-solid"
+			>
+				Delete Upload
+			</button>
+		</div>
 	{:else}
-        <div class="flex flex-col gap-2 items-center">
-            <HugeiconsIcon size="24px" icon={Album01Icon} color="var(--color-black-600)"/>
-            Click to upload a photo
-        </div>
+		<div class="flex flex-col items-center gap-2">
+			<HugeiconsIcon size="24px" icon={Album01Icon} color="var(--color-black-600)" />
+			Click to upload a photo
+		</div>
 	{/if}
 </label>

From cd540cdcc8d7f87ec59f14fe02ed28ea73b9027a Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 19 May 2025 10:30:47 +0530
Subject: [PATCH 4/6] fix: remove redundant code

---
 platforms/metagram/src/lib/ui/InputFile/InputFile.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte b/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
index a2afc7a5..ce5328a9 100644
--- a/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
+++ b/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
@@ -17,10 +17,6 @@
 		if (inputFile) inputFile.value = '';
 		files = undefined;
 	}
-
-	$effect(() => {
-		console.log(files);
-	});
 </script>
 
 <input id={uniqueId} type="file" bind:files class="hidden" accept="image/*" bind:this={inputFile} />

From 2beb5febd2f188a985ce0ab910c549b4e025312c Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 19 May 2025 11:25:24 +0530
Subject: [PATCH 5/6] fix: usage docs added and as per requirements '

---
 .../src/lib/ui/InputFile/InputFile.svelte     | 62 +++++++++++++++----
 platforms/metagram/src/lib/utils/index.ts     |  2 +-
 2 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte b/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
index ce5328a9..9b8c5dce 100644
--- a/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
+++ b/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
@@ -4,22 +4,25 @@
 
 	interface IInputFileProps {
 		files: FileList | undefined;
-		placeholder: string;
+		accept: string;
+		label: string;
+		cancelLabel: string;
+		oncancel: () => void;
 	}
 
-	let { files = $bindable() }: IInputFileProps = $props();
+	let {
+		files = $bindable(),
+		accept = 'image/*',
+		label = 'Click to upload a photo',
+		cancelLabel = 'Delete upload',
+		oncancel
+	}: IInputFileProps = $props();
 
 	const uniqueId = Math.random().toString().split('.')[1];
 	let inputFile: HTMLInputElement | undefined = $state();
-
-	function cancelUpload(e: MouseEvent) {
-		e.preventDefault();
-		if (inputFile) inputFile.value = '';
-		files = undefined;
-	}
 </script>
 
-<input id={uniqueId} type="file" bind:files class="hidden" accept="image/*" bind:this={inputFile} />
+<input id={uniqueId} type="file" bind:files class="hidden" {accept} bind:this={inputFile} />
 
 <label
 	for={uniqueId}
@@ -31,16 +34,51 @@
 			<h3 class="text-black-800">{files[0].name.slice(0, 10) + '...'}</h3>
 			<button
 				type="button"
-				onclick={(e) => cancelUpload(e)}
+				{oncancel}
 				class="text-brand-burnt-orange underline decoration-solid"
 			>
-				Delete Upload
+				{cancelLabel}
 			</button>
 		</div>
 	{:else}
 		<div class="flex flex-col items-center gap-2">
 			<HugeiconsIcon size="24px" icon={Album01Icon} color="var(--color-black-600)" />
-			Click to upload a photo
+			{label}
 		</div>
 	{/if}
 </label>
+
+<!--
+	@component
+	export default InputFile;
+	@description
+	A styled file input component with a custom label, file preview, and a cancel button. 
+	Supports binding file selection and a cancel handler.
+
+	@props
+	- files: The bound FileList or undefined.
+	- accept: The accepted file types (default: "image/*").
+	- label: Label text shown when no file is selected (default: "Click to upload a photo").
+	- cancelLabel: Text for the cancel button (default: "Delete upload").
+	- oncancel: Function called when user clicks the cancel button.
+
+	@usage
+	```html
+	<script lang="ts">
+		import InputFile from './InputFile.svelte';
+		let files: FileList | undefined;
+
+		function handleCancel() {
+			files = undefined;
+		}
+	</script>
+
+	<InputFile
+		bind:files
+		accept="image/png, image/jpeg"
+		label="Upload your profile photo"
+		cancelLabel="Remove"
+		oncancel={handleCancel}
+	/>
+	```
+-->
diff --git a/platforms/metagram/src/lib/utils/index.ts b/platforms/metagram/src/lib/utils/index.ts
index 7748e43d..3b6cdd63 100644
--- a/platforms/metagram/src/lib/utils/index.ts
+++ b/platforms/metagram/src/lib/utils/index.ts
@@ -1 +1 @@
-export * from './mergeClasses';
+export * from './mergeClasses';
\ No newline at end of file

From e48e3a2bf5c80ba18877d73c0cf9f251bef77a70 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 19 May 2025 11:52:06 +0530
Subject: [PATCH 6/6] fix: moved to framents

---
 .../src/lib/{ui => fragments}/InputFile/InputFile.stories.ts    | 0
 .../src/lib/{ui => fragments}/InputFile/InputFile.svelte        | 0
 platforms/metagram/src/lib/fragments/index.ts                   | 1 +
 platforms/metagram/src/lib/ui/index.ts                          | 1 -
 platforms/metagram/src/lib/utils/index.ts                       | 2 +-
 5 files changed, 2 insertions(+), 2 deletions(-)
 rename platforms/metagram/src/lib/{ui => fragments}/InputFile/InputFile.stories.ts (100%)
 rename platforms/metagram/src/lib/{ui => fragments}/InputFile/InputFile.svelte (100%)

diff --git a/platforms/metagram/src/lib/ui/InputFile/InputFile.stories.ts b/platforms/metagram/src/lib/fragments/InputFile/InputFile.stories.ts
similarity index 100%
rename from platforms/metagram/src/lib/ui/InputFile/InputFile.stories.ts
rename to platforms/metagram/src/lib/fragments/InputFile/InputFile.stories.ts
diff --git a/platforms/metagram/src/lib/ui/InputFile/InputFile.svelte b/platforms/metagram/src/lib/fragments/InputFile/InputFile.svelte
similarity index 100%
rename from platforms/metagram/src/lib/ui/InputFile/InputFile.svelte
rename to platforms/metagram/src/lib/fragments/InputFile/InputFile.svelte
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
index 8d8f89ef..110a55c6 100644
--- a/platforms/metagram/src/lib/fragments/index.ts
+++ b/platforms/metagram/src/lib/fragments/index.ts
@@ -1 +1,2 @@
 export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
+export { default as InputFile } from './InputFile/InputFile.svelte';
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index a1a8c779..678e7c16 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -1,4 +1,3 @@
 export { default as Button } from './Button/Button.svelte';
 export { default as Avatar } from './Avatar/Avatar.svelte';
 export { default as Input } from './Input/Input.svelte';
-export { default as InputFile } from './InputFile/InputFile.svelte';
diff --git a/platforms/metagram/src/lib/utils/index.ts b/platforms/metagram/src/lib/utils/index.ts
index 3b6cdd63..7748e43d 100644
--- a/platforms/metagram/src/lib/utils/index.ts
+++ b/platforms/metagram/src/lib/utils/index.ts
@@ -1 +1 @@
-export * from './mergeClasses';
\ No newline at end of file
+export * from './mergeClasses';