v1.5.0

README.md

@@ -14,7 +14,7 @@ Using Force UI as a dependency in package.json -
 
 ```json
 "dependencies": {
-  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.4.2"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.5.0"
 }
 ```
 
@@ -28,7 +28,7 @@ npm install
 Or you can directly run the following command to install the package -
 
 ```bash
-npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.4.2
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.5.0
 ```
 
 <br />

changelog.txt

@@ -1,3 +1,8 @@
+Version 1.5.0 - 14th March, 2025
+- New - Added new Atom, File Preview - to show uploaded file preview.
+- New - Added new variants in Progress Steps component to show icon and number in the completed step.
+- Improvement - Enhanced the UI and functionality of the Searchbox component for better flexibility and user experience.
+
 Version 1.4.2 - 6th March, 2025
 - New - Added new size 'xs' to the Switch component.
 - Improvement - Adjusted the ring width and padding of the Radio Button component.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.4.2",
+    "version": "1.5.0",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.cjs.js",
     "module": "./dist/force-ui.es.js",

src/components/file-preview/file-preview.stories.tsx

@@ -0,0 +1,113 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { FilePreview, FilePreviewFile, FilePreviewProps } from './file-preview';
+import { Input } from '@/index';
+import { useRef, useState } from 'react';
+
+type InputValue = string | FileList | null;
+
+const meta = {
+	title: 'Atoms/FilePreview',
+	component: FilePreview,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+	argTypes: {
+		onRemove: { action: 'removed' },
+	},
+	decorators: [
+		( Story: React.FC ) => (
+			<div className="w-72">
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta<typeof FilePreview>;
+
+export default meta;
+
+type Story = StoryFn<typeof FilePreview>;
+
+const Template: Story = ( args: FilePreviewProps ) => <FilePreview { ...args } />;
+
+const placeholderFile = {
+	name: 'example-file.png',
+	url: 'https://placehold.co/600x400.png',
+	type: 'image/png',
+	size: 102400,
+} as FilePreviewFile;
+
+export const Default: Story = Template.bind( {} );
+Default.args = {
+	file: placeholderFile,
+	onRemove: () => {},
+	disabled: false,
+	size: 'md',
+	error: false,
+};
+
+export const ErrorState = Template.bind( {} );
+ErrorState.args = {
+	file: placeholderFile,
+	onRemove: () => {},
+	disabled: false,
+	size: 'md',
+	error: true,
+};
+
+export const DisabledState = Template.bind( {} );
+DisabledState.args = {
+	file: placeholderFile,
+	onRemove: () => {},
+	disabled: true,
+	size: 'md',
+	error: false,
+};
+
+export const FileInputWithPreview: Story = ( args ) => {
+	const fileInputRef = useRef<HTMLInputElement>( null );
+	const [ selectedFile, setSelectedFile ] = useState<File | null>( null );
+
+	const handleFileChange = ( value: InputValue ) => {
+		if ( ! value ) {
+			setSelectedFile( null );
+			return;
+		}
+
+		let files: FileList | null = null;
+
+		if ( value instanceof FileList ) {
+			files = value;
+		}
+
+		setSelectedFile( files?.[ 0 ] || null );
+	};
+
+	return (
+		<>
+			<Input
+				ref={ fileInputRef }
+				label="Upload File"
+				type="file"
+				size="md"
+				disabled={ false }
+				error={ false }
+				onChange={ handleFileChange }
+			/>
+			{ selectedFile && (
+				<div className="mt-2">
+					<FilePreview
+						{ ...args }
+						file={ selectedFile }
+						onRemove={ () => {
+							setSelectedFile( null );
+							if ( fileInputRef.current ) {
+								fileInputRef.current.value = '';
+							}
+						} }
+					/>
+				</div>
+			) }
+		</>
+	);
+};

src/components/file-preview/file-preview.tsx

@@ -0,0 +1,135 @@
+import { cn, formatFileSize } from '@/utilities/functions';
+import { File, ImageOff, Trash } from 'lucide-react';
+
+export type FilePreviewFile =
+	| File
+	| { name: string; url: string; type: string; size: number };
+
+export interface FilePreviewProps {
+	/** The file to display. It can be a File object or an object with name, url, type, and size properties. */
+	file: FilePreviewFile;
+
+	/** Function called when the file is removed. The parameter is the selected file object, which can be a File object or an object with name, url, type, and size properties or null. */
+	onRemove: ( selectedFile: FilePreviewFile ) => void;
+
+	/** Indicates whether the file preview is disabled. */
+	disabled?: boolean;
+
+	/** The size of the file preview. */
+	size?: 'sm' | 'md' | 'lg';
+
+	/** Indicates whether the file preview has an error. */
+	error?: boolean;
+}
+
+const commonFilePreviewClasses = {
+	sm: {
+		image: 'w-8 h-8',
+		name: 'text-xs',
+		fileIcon: 'h-8',
+		uploadText: 'text-xs',
+	},
+	md: {
+		image: 'w-10 h-10',
+		name: 'text-sm',
+		fileIcon: 'h-10',
+		uploadText: 'text-xs',
+	},
+	lg: {
+		image: 'w-10 h-10',
+		name: 'text-sm',
+		fileIcon: 'h-10',
+		uploadText: 'text-xs',
+	},
+};
+
+export const FilePreview = ( {
+	file,
+	onRemove,
+	error,
+	disabled,
+	size = 'sm',
+}: FilePreviewProps ) => {
+	const renderFileIcon = () => (
+		<span
+			className={ cn(
+				'inline-flex self-start p-0.5',
+				commonFilePreviewClasses[ size ].fileIcon
+			) }
+		>
+			<File className="size-5 text-icon-primary" />
+		</span>
+	);
+
+	return (
+		<div
+			className={ cn(
+				'w-full flex items-start justify-between rounded mt-2 bg-field-primary-background p-2 gap-3',
+				error && 'border-alert-border-danger bg-alert-background-danger'
+			) }
+		>
+			<div className="flex items-center gap-3 w-full">
+				{ file.type.startsWith( 'image' ) ? (
+					<div
+						className={ cn(
+							'rounded-sm flex items-center justify-center shrink-0',
+							error && 'bg-gray-200'
+						) }
+					>
+						{ error ? (
+							<ImageOff className="size-6 text-field-helper" />
+						) : (
+							<img
+								src={
+									'url' in file
+										? file.url
+										: URL.createObjectURL( file )
+								}
+								alt="Preview"
+								className={ cn(
+									'w-full object-contain rounded-sm',
+									commonFilePreviewClasses[ size ].image
+								) }
+							/>
+						) }
+					</div>
+				) : (
+					renderFileIcon()
+				) }
+
+				<div className="text-left flex flex-col gap-0 w-[calc(100%_-_5.5rem)]">
+					<span
+						className={ cn(
+							commonFilePreviewClasses[ size ].name,
+							'font-medium text-field-label truncate'
+						) }
+					>
+						{ file.name }
+					</span>
+					{ file.size && file.size > 0 && (
+						<span
+							className={ cn(
+								commonFilePreviewClasses[ size ].uploadText,
+								'text-xs text-field-helper',
+								error && 'text-support-error'
+							) }
+						>
+							{ formatFileSize( file.size ) }
+						</span>
+					) }
+				</div>
+				{ ! disabled && (
+					<button
+						onClick={ () => onRemove( file ) }
+						className="inline-flex cursor-pointer bg-transparent border-0 p-1 my-0 ml-auto mr-0 ring-0 focus:outline-none self-start"
+						aria-label="Remove file"
+					>
+						<Trash className="size-4 text-support-error" />
+					</button>
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default FilePreview;

src/components/file-preview/index.ts

@@ -0,0 +1 @@
+export { default } from './file-preview';

src/components/index.ts

@@ -40,3 +40,4 @@ export { default as PieChart } from './pie-chart';
 export { default as AreaChart } from './area-chart';
 export { default as Dropzone } from './dropzone';
 export { default as Table } from './table';
+export { default as FilePreview } from './file-preview';

src/components/input/input.tsx

@@ -36,7 +36,7 @@ export declare interface InputProps {
 	disabled?: boolean;
 
 	/** Function called when the input value changes. */
-	onChange?: ( value: string | null ) => void;
+	onChange?: ( value: string | FileList | null ) => void;
 
 	/** Indicates whether the input has an error state. */
 	error?: boolean;
@@ -77,7 +77,10 @@ export const InputComponent = (
 		label = '',
 		...props
 	}: InputProps &
-		Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>,
+		Omit<
+			React.InputHTMLAttributes<HTMLInputElement>,
+			'size' | 'prefix' | 'onChange'
+		>,
 	ref: React.ForwardedRef<HTMLInputElement>
 ) => {
 	const inputRef = useRef<HTMLInputElement>( null );
@@ -96,7 +99,7 @@ export const InputComponent = (
 			return;
 		}
 
-		let newValue: string | FileList | null;
+		let newValue: FileList | string | null;
 		if ( type === 'file' ) {
 			newValue = event.target.files;
 			if ( newValue && newValue.length > 0 ) {
@@ -115,7 +118,7 @@ export const InputComponent = (
 		if ( typeof onChange !== 'function' ) {
 			return;
 		}
-		onChange( newValue as string );
+		onChange( newValue );
 	};
 
 	const handleReset = () => {

src/components/progress-steps/progress-steps.stories.tsx

@@ -1,5 +1,5 @@
 import ProgressSteps, { ProgressStepsProps } from './progress-steps';
-import { Check, Home } from 'lucide-react';
+import { Check, Home, BadgeCheck } from 'lucide-react';
 import type { Meta, StoryFn } from '@storybook/react';
 
 // ProgressSteps.Step display name for better documentation in Storybook
@@ -108,3 +108,35 @@ export const StackType = {
 	},
 	render: Template,
 };
+
+// Numbered Completed Steps Variant
+export const NumberedCompletedSteps = {
+	args: {
+		variant: 'number',
+		size: 'md',
+		type: 'inline',
+		currentStep: 3,
+		completedVariant: 'number',
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'Shows completed steps with step numbers in colored circles',
+			},
+		},
+	},
+	render: Template,
+};
+
+// custom icon in completed steps
+export const CustomIconInCompletedSteps = {
+	args: {
+		variant: 'icon',
+		size: 'md',
+		type: 'inline',
+		currentStep: 3,
+		completedVariant: 'icon',
+		completedIcon: <BadgeCheck />,
+	},
+	render: Template,
+};