Feat: add file list components and redisign of input file

exports.json

@@ -152,6 +152,21 @@
       "module": "./dist/esm/components/FeedBackBox/index.js",
       "default": "./dist/esm/components/FeedBackBox/index.js"
     },
+    "./FileItem": {
+      "require": "./dist/cjs/components/Form/File/FileItem.js",
+      "module": "./dist/esm/components/Form/File/FileItem.js",
+      "default": "./dist/esm/components/Form/File/FileList.js"
+    },
+    "./FileImageItem": {
+      "require": "./dist/cjs/components/Form/File/FileImageItem.js",
+      "module": "./dist/esm/components/Form/File/FileImageItem.js",
+      "default": "./dist/esm/components/Form/File/FileImageItem.js"
+    },
+    "./FileList": {
+      "require": "./dist/cjs/components/Form/File/FileList.js",
+      "module": "./dist/esm/components/Form/File/FileList.js",
+      "default": "./dist/esm/components/Form/File/FileList.js"
+    },
     "./FileViewer": {
       "require": "./dist/cjs/components/FileViewer/index.js",
       "module": "./dist/esm/components/FileViewer/index.js",
@@ -442,6 +457,9 @@
       "Dropdown": ["./dist/esm/components/Dropdown/index.d.ts"],
       "DynamicHeroIcon": ["./dist/esm/common/DynamicHeroIcon/index.d.ts"],
       "FeedBackBox": ["./dist/esm/components/FeedBackBox/index.d.ts"],
+      "FileItem": ["./dist/esm/components/Form/File/FileItem.d.ts"],
+      "FileImageItem": ["./dist/esm/components/Form/File/FileImageItem.d.ts"],
+      "FileList": ["./dist/esm/components/Form/File/FileList.d.ts"],
       "FileViewer": ["./dist/esm/components/FileViewer/index.d.ts"],
       "Filters": ["./dist/esm/components/Filters/index.d.ts"],
       "FormControl": ["./dist/esm/components/FormControl/index.d.ts"],

package.json

@@ -288,6 +288,21 @@
             "module": "./dist/esm/components/FeedBackBox/index.js",
             "default": "./dist/esm/components/FeedBackBox/index.js"
         },
+        "./FileItem": {
+            "require": "./dist/cjs/components/Form/File/FileItem.js",
+            "module": "./dist/esm/components/Form/File/FileItem.js",
+            "default": "./dist/esm/components/Form/File/FileList.js"
+        },
+        "./FileImageItem": {
+            "require": "./dist/cjs/components/Form/File/FileImageItem.js",
+            "module": "./dist/esm/components/Form/File/FileImageItem.js",
+            "default": "./dist/esm/components/Form/File/FileImageItem.js"
+        },
+        "./FileList": {
+            "require": "./dist/cjs/components/Form/File/FileList.js",
+            "module": "./dist/esm/components/Form/File/FileList.js",
+            "default": "./dist/esm/components/Form/File/FileList.js"
+        },
         "./FileViewer": {
             "require": "./dist/cjs/components/FileViewer/index.js",
             "module": "./dist/esm/components/FileViewer/index.js",
@@ -636,6 +651,15 @@
             "FeedBackBox": [
                 "./dist/esm/components/FeedBackBox/index.d.ts"
             ],
+            "FileItem": [
+                "./dist/esm/components/Form/File/FileItem.d.ts"
+            ],
+            "FileImageItem": [
+                "./dist/esm/components/Form/File/FileImageItem.d.ts"
+            ],
+            "FileList": [
+                "./dist/esm/components/Form/File/FileList.d.ts"
+            ],
             "FileViewer": [
                 "./dist/esm/components/FileViewer/index.d.ts"
             ],

src/components/Form/File/FileImageItem.test.tsx

@@ -0,0 +1,70 @@
+import { vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/react'
+import FileImageItem from './FileImageItem'
+
+const defaultProps = {
+  name: 'image.jpg',
+  type: 'image/jpeg',
+  src: 'https://example.com/image.jpg',
+  title: 'Test Image',
+  description: 'This is a test image description',
+  onChangeTitle: vi.fn(),
+  onChangeDescription: vi.fn()
+}
+
+describe('<FileImageItem>', () => {
+  it('renders component correctly', () => {
+    const { getByRole } = render(<FileImageItem {...defaultProps} />)
+
+    expect(getByRole('file-item-image')).toBeDefined()
+  })
+
+  it('displays the image with correct src', () => {
+    const { getByRole } = render(<FileImageItem {...defaultProps} />)
+    const image = getByRole('file-image')
+
+    expect(image).toHaveAttribute('src', 'https://example.com/image.jpg')
+  })
+
+  it('calls onChangeTitle when title input changes', () => {
+    const { getByDisplayValue } = render(<FileImageItem {...defaultProps} />)
+    const titleInput = getByDisplayValue('Test Image')
+
+    fireEvent.change(titleInput, {
+      target: { value: 'Updated Title', name: 'title' }
+    })
+
+    expect(defaultProps.onChangeTitle).toHaveBeenCalled()
+    expect(getByDisplayValue('Updated Title')).toBeDefined()
+  })
+
+  it('calls onChangeDescription when description input changes', () => {
+    const { getByDisplayValue } = render(<FileImageItem {...defaultProps} />)
+    const descriptionInput = getByDisplayValue(
+      'This is a test image description'
+    )
+
+    fireEvent.change(descriptionInput, {
+      target: { value: 'Updated description', name: 'description' }
+    })
+
+    expect(defaultProps.onChangeDescription).toHaveBeenCalled()
+    expect(getByDisplayValue('Updated description')).toBeDefined()
+  })
+
+  it('displays character count for description', () => {
+    const { getByRole, getByDisplayValue } = render(
+      <FileImageItem {...defaultProps} />
+    )
+    const counter = getByRole('file-description-length')
+    const descriptionInput = getByDisplayValue(
+      'This is a test image description'
+    )
+
+    fireEvent.change(descriptionInput, {
+      target: { value: 'Short', name: 'description' }
+    })
+
+    expect(counter).toHaveTextContent('5/100')
+  })
+})

src/components/Form/File/FileImageItem.tsx

@@ -0,0 +1,187 @@
+import {
+  ChangeEvent,
+  ChangeEventHandler,
+  CSSProperties,
+  ReactNode,
+  useState
+} from 'react'
+import { Flex } from 'components/Layout'
+import Text from 'components/Typography'
+import BaseInput from '../Input/BaseInput'
+import TextArea from '../TextArea'
+import FileItem from './FileItem'
+
+export interface FileImageItemProps {
+  /**
+   * Source URL for the image preview
+   */
+  src: string
+  /**
+   * Title of the file
+   */
+  title: string
+  /**
+   * Description of the file
+   */
+  description: string
+  /**
+   * Placeholder text for the title input
+   */
+  titlePlaceholder?: string
+  /**
+   * Placeholder text for the description input
+   */
+  descriptionPlaceholder?: string
+  /**
+   * Label for the title input
+   */
+  titleLabel?: string
+  /**
+   * Label for the description input
+   */
+  descriptionLabel?: string
+  /**
+   * Maximum length for the description text
+   */
+  descriptionMaxLength?: number
+  /**
+   * Name of the file to display
+   */
+  name: string
+  /**
+   * Type/format of the file
+   */
+  type: string
+  /**
+   * Size of the file in KB (optional)
+   */
+  fileSize?: number
+  /**
+   * Additional CSS class names
+   */
+  className?: string
+  /**
+   * Custom CSS styles
+   */
+  style?: CSSProperties
+  /**
+   * Children components (typically action buttons)
+   */
+  children?: ReactNode
+  /**
+   * Handler for title changes
+   */
+  onChangeTitle: ChangeEventHandler<HTMLInputElement>
+  /**
+   * Handler for description changes
+   */
+  onChangeDescription: ChangeEventHandler<HTMLTextAreaElement>
+}
+
+interface stateType {
+  title: string
+  description: string
+}
+
+export const FileImageItem = ({
+  name,
+  type,
+  fileSize,
+  src,
+  title,
+  description,
+  titlePlaceholder,
+  descriptionPlaceholder,
+  titleLabel,
+  descriptionLabel,
+  descriptionMaxLength = 100,
+  className,
+  style,
+  children,
+  onChangeTitle,
+  onChangeDescription
+}: FileImageItemProps) => {
+  const [state, setState] = useState<stateType>({
+    title: title || '',
+    description: description || ''
+  })
+
+  const handleChange = (
+    e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    setState((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value
+    }))
+    e.target.name === 'title' &&
+      onChangeTitle(e as ChangeEvent<HTMLInputElement>)
+    e.target.name === 'description' &&
+      onChangeDescription(e as ChangeEvent<HTMLTextAreaElement>)
+  }
+
+  return (
+    <Flex
+      role="file-item-image"
+      className="flex-col bg-white rounded-lg pb-2"
+      gap="2"
+    >
+      <FileItem
+        name={name}
+        type={type}
+        fileSize={fileSize}
+        className={className}
+        style={style}
+      >
+        {children}
+      </FileItem>
+      <div
+        className="px-4 w-full h-full max-h-[164px] grid gap-4"
+        style={{
+          gridTemplateColumns: '350px 1fr'
+        }}
+      >
+        <figure
+          className="w-full border border-gray-100 rounded-lg overflow-hidden"
+          style={{ maxWidth: '350px', height: '164px' }}
+        >
+          <img
+            role="file-image"
+            src={src}
+            alt="File"
+            className="w-full h-full object-cover"
+          />
+        </figure>
+        <Flex className="flex-col" gap="4">
+          <BaseInput
+            name="title"
+            style={{ marginTop: 0 }}
+            label={titleLabel}
+            placeholder={titlePlaceholder}
+            value={state.title}
+            onChange={handleChange}
+          />
+          <Flex className="flex-col gap-2">
+            <TextArea
+              name="description"
+              maxLength={descriptionMaxLength}
+              label={descriptionLabel}
+              placeholder={descriptionPlaceholder}
+              value={state.description}
+              onChange={handleChange}
+            />
+            <Text
+              role="file-description-length"
+              size="xs"
+              textMuted500
+              className="text-right"
+            >
+              {state.description?.length || 0}/{descriptionMaxLength}
+            </Text>
+          </Flex>
+        </Flex>
+      </div>
+    </Flex>
+  )
+}
+
+export default FileImageItem

src/components/Form/File/FileItem.test.tsx

@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react'
+import FileItem from './FileItem'
+
+const defaultProps = {
+  name: 'test-file.pdf',
+  type: 'application/pdf',
+  fileSize: 1024
+}
+
+describe('<FileItem>', () => {
+  it('should render correctly', () => {
+    const { getByRole } = render(<FileItem {...defaultProps} />)
+
+    expect(getByRole('file-item')).toBeDefined()
+  })
+
+  it('displays file size when provided', () => {
+    const { getByRole } = render(<FileItem {...defaultProps} />)
+
+    expect(getByRole('file-size')).toBeDefined()
+  })
+
+  it('renders children components', () => {
+    const { getByTestId } = render(
+      <FileItem {...defaultProps}>
+        <button data-testid="test-button">Action</button>
+      </FileItem>
+    )
+
+    expect(getByTestId('test-button')).toBeInTheDocument()
+  })
+})