From 795998e35e25bb3a08ff771001e2eab6814d8036 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Thu, 21 Nov 2024 13:09:28 +0600
Subject: [PATCH 1/6] Updated the loader icon classNames

---
 src/components/loader/loader.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx
index 9f555b5c..c3ad9d02 100644
--- a/src/components/loader/loader.tsx
+++ b/src/components/loader/loader.tsx
@@ -28,17 +28,17 @@ export const Loader = ( {
 	}?.[ variant ];
 
 	const sizeClassNames = {
-		sm: '[&>svg]:h-4 [&>svg]:w-4',
-		md: '[&>svg]:h-5 [&>svg]:w-5',
-		lg: '[&>svg]:h-6 [&>svg]:w-6',
-		xl: '[&>svg]:h-8 [&>svg]:w-8',
+		sm: '[&>svg]:size-4',
+		md: '[&>svg]:size-5',
+		lg: '[&>svg]:size-6',
+		xl: '[&>svg]:size-8',
 	}?.[ size ];
 
 	return (
 		<span
 			className={ cn( 'flex', sizeClassNames, variantClassNames, className ) }
 		>
-			{ icon ? icon : <LoaderCircle className="animate-spin" /> }
+			{ icon ? icon : <LoaderCircle className="animate-spin shrink-0" /> }
 		</span>
 	);
 };

From fce9f95f204864e3282475b0c2ad3f5e363b000a Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Thu, 21 Nov 2024 13:12:36 +0600
Subject: [PATCH 2/6] Added decorators to the Dropzone component story

---
 src/components/dropzone/dropzone.stories.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/dropzone/dropzone.stories.tsx b/src/components/dropzone/dropzone.stories.tsx
index e9127d1d..d91a4e48 100644
--- a/src/components/dropzone/dropzone.stories.tsx
+++ b/src/components/dropzone/dropzone.stories.tsx
@@ -15,6 +15,11 @@ const meta: Meta<typeof Dropzone> = {
 			control: { type: 'select' },
 		},
 	},
+	decorators: ( Story ) => (
+		<div className="box-border [&_*]:box-border">
+			<Story />
+		</div>
+	),
 };
 
 export default meta;

From 57392976e88f88a601ce27550779cfa007bb370d Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Thu, 21 Nov 2024 13:13:00 +0600
Subject: [PATCH 3/6] fix: Dropzone component UI

---
 src/components/dropzone/dropzone.tsx | 46 ++++++++++++++++------------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/dropzone/dropzone.tsx b/src/components/dropzone/dropzone.tsx
index 8fc286f4..7eddebc3 100644
--- a/src/components/dropzone/dropzone.tsx
+++ b/src/components/dropzone/dropzone.tsx
@@ -1,4 +1,4 @@
-import { useState, createContext, useContext, useRef } from 'react';
+import { useState, createContext, useContext, useRef, useMemo } from 'react';
 import { CloudUpload, File, ImageOff, Trash } from 'lucide-react';
 import { cn, formatFileSize } from '@/utilities/functions';
 import Loader from '../loader';
@@ -46,6 +46,14 @@ export const FilePreview = () => {
 		return null;
 	}
 
+	const renderFileIcon = useMemo(() => {
+		return (
+			<span className="inline-flex self-start p-0.5">
+				<File className="size-5 text-icon-primary" />
+			</span>
+		);
+	} , [ file ]);
+
 	return (
 		<div
 			className={ cn(
@@ -53,8 +61,8 @@ export const FilePreview = () => {
 				error && 'border-alert-border-danger bg-alert-background-danger'
 			) }
 		>
-			<div className="flex items-center gap-3">
-				{ isLoading && <File className="size-6" /> }
+			<div className="flex items-center gap-3 w-full">
+				{ isLoading && renderFileIcon }
 				{ ! isLoading &&
 					( file.type.startsWith( 'image/' ) ? (
 						<div
@@ -74,13 +82,11 @@ export const FilePreview = () => {
 							) }
 						</div>
 					) : (
-						<span>
-							<File className="size-6 text-icon-primary" />
-						</span>
+						renderFileIcon
 					) ) }
 
-				<div className="text-left flex flex-col">
-					<span className="text-sm font-medium text-field-label">
+				<div className="text-left flex flex-col gap-1 w-[calc(100%_-_5.5rem)]">
+					<span className="text-sm font-medium text-field-label truncate">
 						{ isLoading ? 'Loading...' : file.name }
 					</span>
 					{ ! isLoading && (
@@ -94,17 +100,19 @@ export const FilePreview = () => {
 						</span>
 					) }
 				</div>
+				{ isLoading ? (
+					<span className='inline-flex ml-auto p-0.5'>
+						<Loader className='inline-flex' />
+					</span>
+				) : (
+					<button
+						onClick={ removeFile }
+						className="inline-flex cursor-pointer bg-transparent border-0 p-1 my-0 ml-auto mr-0 ring-0 focus:outline-none self-start"
+					>
+						<Trash className="size-4 text-support-error" />
+					</button>
+				) }
 			</div>
-			{ isLoading ? (
-				<Loader />
-			) : (
-				<button
-					onClick={ removeFile }
-					className="mt-1.5 cursor-pointer bg-transparent border-0 p-0 m-0 ring-0 focus:outline-none"
-				>
-					<Trash className="size-4 text-support-error" />
-				</button>
-			) }
 		</div>
 	);
 };
@@ -210,7 +218,7 @@ export const Dropzone = ( {
 				<label htmlFor={ uploadInputID.current }>
 					<div
 						className={ cn(
-							'min-w-80 cursor-pointer mx-auto border-dotted border-2 rounded-md text-center hover:border-field-dropzone-color hover:bg-field-dropzone-background-hover focus:outline-none focus:ring focus:ring-toggle-on focus:ring-offset-2 transition-[border,box-shadow] duration-300 ease-in-out',
+							'min-w-80 cursor-pointer mx-auto border-dotted border-2 rounded-md text-center hover:border-field-dropzone-color hover:bg-field-dropzone-background-hover focus:outline-none focus:ring focus:ring-toggle-on focus:ring-offset-2 transition duration-200 ease-in-out',
 							isDragging
 								? 'border-field-dropzone-color bg-field-dropzone-background-hover'
 								: 'border-field-border',

From f02fb018cf34f74e9caf343ae7021dd8494bceee Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Thu, 21 Nov 2024 13:18:02 +0600
Subject: [PATCH 4/6] Added fixed width to the story container

---
 src/components/dropzone/dropzone.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dropzone/dropzone.stories.tsx b/src/components/dropzone/dropzone.stories.tsx
index d91a4e48..28d5906a 100644
--- a/src/components/dropzone/dropzone.stories.tsx
+++ b/src/components/dropzone/dropzone.stories.tsx
@@ -16,7 +16,7 @@ const meta: Meta<typeof Dropzone> = {
 		},
 	},
 	decorators: ( Story ) => (
-		<div className="box-border [&_*]:box-border">
+		<div className="box-border [&_*]:box-border w-96">
 			<Story />
 		</div>
 	),

From 9c91845e67a7c9026c3450c1d7b67fa45b02ffec Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Thu, 21 Nov 2024 13:19:55 +0600
Subject: [PATCH 5/6] chore: Lint

---
 .github/workflows/storybook-deployment.yml | 66 +++++++++++-----------
 src/components/dropzone/dropzone.tsx       | 16 +++---
 2 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/.github/workflows/storybook-deployment.yml b/.github/workflows/storybook-deployment.yml
index 4d0265bc..22df860c 100644
--- a/.github/workflows/storybook-deployment.yml
+++ b/.github/workflows/storybook-deployment.yml
@@ -1,39 +1,39 @@
 # Workflow name
 name: Build and Publish Storybook to GitHub Pages
- 
+
 on:
-  # Event for the workflow to run on
-  push:
-    branches:
-      - master
- 
+    # Event for the workflow to run on
+    push:
+        branches:
+            - master
+
 permissions:
-  contents: read
-  pages: write
-  id-token: write
- 
+    contents: read
+    pages: write
+    id-token: write
+
 # List of jobs
 jobs:
-  deploy:
-    environment:
-        name: github-pages
-        url: ${{ steps.build-publish.outputs.page_url }}
-    runs-on: ubuntu-latest
-    # Job steps
-    steps:
-      # Manual Checkout
-      - uses: actions/checkout@v4
- 
-      # Set up Node
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20.x'
- 
-      #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
-      - id: build-publish
-        uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
-        with:
-          install_command: npm install # default: npm ci
-          build_command: npm run build && npm run build-storybook # default: npm run build-storybook
-          path: storybook-static # default: dist/storybook
-          checkout: false # default: true
\ No newline at end of file
+    deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.build-publish.outputs.page_url }}
+        runs-on: ubuntu-latest
+        # Job steps
+        steps:
+            # Manual Checkout
+            - uses: actions/checkout@v4
+
+            # Set up Node
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '20.x'
+
+            #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
+            - id: build-publish
+              uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+              with:
+                  install_command: npm install # default: npm ci
+                  build_command: npm run build && npm run build-storybook # default: npm run build-storybook
+                  path: storybook-static # default: dist/storybook
+                  checkout: false # default: true
diff --git a/src/components/dropzone/dropzone.tsx b/src/components/dropzone/dropzone.tsx
index 7eddebc3..fe63f520 100644
--- a/src/components/dropzone/dropzone.tsx
+++ b/src/components/dropzone/dropzone.tsx
@@ -42,17 +42,17 @@ export const FilePreview = () => {
 	const { file, removeFile, isLoading, error, errorText } =
 		useFileUploadContext()!;
 
-	if ( ! file ) {
-		return null;
-	}
-
-	const renderFileIcon = useMemo(() => {
+	const renderFileIcon = useMemo( () => {
 		return (
 			<span className="inline-flex self-start p-0.5">
 				<File className="size-5 text-icon-primary" />
 			</span>
 		);
-	} , [ file ]);
+	}, [ file ] );
+
+	if ( ! file ) {
+		return null;
+	}
 
 	return (
 		<div
@@ -101,8 +101,8 @@ export const FilePreview = () => {
 					) }
 				</div>
 				{ isLoading ? (
-					<span className='inline-flex ml-auto p-0.5'>
-						<Loader className='inline-flex' />
+					<span className="inline-flex ml-auto p-0.5">
+						<Loader className="inline-flex" />
 					</span>
 				) : (
 					<button

From 0193d5a761ecb0aa05de15426ec262be3fab134f Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Thu, 21 Nov 2024 13:25:49 +0600
Subject: [PATCH 6/6] Updated the border and border style

---
 src/components/dropzone/dropzone.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/dropzone/dropzone.tsx b/src/components/dropzone/dropzone.tsx
index fe63f520..93ce053e 100644
--- a/src/components/dropzone/dropzone.tsx
+++ b/src/components/dropzone/dropzone.tsx
@@ -1,7 +1,7 @@
 import { useState, createContext, useContext, useRef, useMemo } from 'react';
 import { CloudUpload, File, ImageOff, Trash } from 'lucide-react';
 import { cn, formatFileSize } from '@/utilities/functions';
-import Loader from '../loader';
+import Loader from '@/components/loader';
 import { nanoid } from 'nanoid';
 
 export interface DropzoneProps {
@@ -218,7 +218,7 @@ export const Dropzone = ( {
 				<label htmlFor={ uploadInputID.current }>
 					<div
 						className={ cn(
-							'min-w-80 cursor-pointer mx-auto border-dotted border-2 rounded-md text-center hover:border-field-dropzone-color hover:bg-field-dropzone-background-hover focus:outline-none focus:ring focus:ring-toggle-on focus:ring-offset-2 transition duration-200 ease-in-out',
+							'min-w-80 cursor-pointer mx-auto border-dashed border rounded-md text-center hover:border-field-dropzone-color hover:bg-field-dropzone-background-hover focus:outline-none focus:ring focus:ring-toggle-on focus:ring-offset-2 transition duration-200 ease-in-out',
 							isDragging
 								? 'border-field-dropzone-color bg-field-dropzone-background-hover'
 								: 'border-field-border',