[Feat]: Add new Uploader component

[NairaMisakyan]

Component

Uploader

Is your feature request related to a problem? Please describe.

The Uploader component allows users to select and upload files from their device to a system or application. It supports various file types and sizes, providing real-time feedback on the upload process through progress indicators. Key features include drag-and-drop functionality, multiple file uploads, and validation rules to ensure only appropriate files are processed.

Describe the solution you'd like

Component Implementation

• Language: Implement the Uploader component in TypeScript.

• Styling: Utilize SCSS with BEM methodology.

• Theming: Integrate design tokens from @geneui/tokens for consistent colors, borders, spacing, and typography.

• Features:

          - Support for Drag-and-Drop and file browser selection.
          - Support for Multiple and Single file upload modes.
          - Progress Indicators (individual file progress and overall status).
          - Validation Rules: Allow configuration for maxFileSize, acceptedFileTypes, and maxFiles.
          - State Management: Handle idle, uploading, success, and error states.
  

• Accessibility: Ensure full keyboard navigation (e.g., triggering the file picker with Enter/Space) and appropriate ARIA attributes (role="button", aria-live for progress updates).

Unit Tests

• Framework: Write tests using Jest and React Testing Library.

• Coverage:

      - Ensure coverage for all props and configuration permutations.
      - Test file selection/drop triggers.
      - Test validation logic (e.g., dropping a file that is too large or the wrong format).
      - Test error handling when an upload fails.
  

Storybook Stories

• Documentation: Create a Storybook story for the Uploader component.
• Variations: Showcase different configurations (e.g., drag-and-drop zone vs. button-only, single vs. multiple, specific file type restrictions).
• Interactivity: Create controls for all props to allow real-time experimentation.
• API: Document all public interfaces and callback functions (e.g., onUploadSuccess, onFileReject).

Checklist

• Component implemented in TypeScript.
• Styling follows SCSS using BEM.
• Design tokens from @geneui/tokens are applied.
• Unit tests written with high coverage for states and edge cases.
• Storybook stories created with interactive controls.
• Implementation matches provided Figma designs.

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

yes

Additional context

No response