feat(components): add FileUpload component (DS-5195)

.storybook/public/files/security-scan-report.json

@@ -0,0 +1,5 @@
+{
+  "scanId": "demo-scan-001",
+  "status": "completed",
+  "findings": 3
+}

packages/components/src/components/FileUpload/FileUpload.mdx

@@ -0,0 +1,143 @@
+import {
+  Meta,
+  Story,
+  Props,
+  Status,
+} from '../../../../../.storybook/components';
+
+import * as Stories from './FileUpload.stories';
+
+<Meta of={Stories} />
+
+# FileUpload
+
+<Status variant="draft" />
+
+FileUpload lets users select, display, and remove files. It reports user actions
+but does not upload or store files.
+
+## Import
+
+```tsx
+import { FileUpload } from '@koobiq/react-components';
+```
+
+## Usage
+
+<Story of={Stories.Base} />
+
+## Props
+
+<Props of={Stories.Base} />
+
+## Data model
+
+Pass `items` and a render function for a dynamic collection. Pass
+`FileUpload.Item` elements as children for a static collection. Keep the native
+file on each item and pass it to `FileUpload.Item` to enable validation.
+
+## Long file names
+
+Long item names are truncated in the middle, keeping the end of the name and
+its extension visible. Their full text is shown in a tooltip.
+
+<Story of={Stories.LongFileName} />
+
+## Label and help text
+
+Use `label` and `caption` to describe the field.
+
+<Story of={Stories.WithLabel} />
+
+## Single file
+
+FileUpload accepts one file by default.
+
+<Story of={Stories.Single} />
+
+## Multiple files
+
+Use `allowsMultiple` to add several files.
+
+<Story of={Stories.Multiple} />
+
+## Duplicate files
+
+Filter duplicate files in `onAdd` when the collection requires it.
+
+<Story of={Stories.WithoutDuplicates} />
+
+## Selecting a folder or files
+
+Use `allowed` to accept files, folders, or both. Folder files include their
+`relativePath` and can be grouped into one collection item.
+
+<Story of={Stories.Allowed} />
+
+## Compact
+
+Use `size="compact"` for a smaller empty state.
+
+<Story of={Stories.Compact} />
+
+## Scrolling
+
+Use `slotProps` to limit the list height.
+
+<Story of={Stories.Scrollable} />
+
+## Progress
+
+Render upload progress inside the item row.
+
+<Story of={Stories.UploadProgress} />
+
+## Validation
+
+Use `accept` and `maxFileSize` for standard checks, and `validate` for custom
+synchronous checks. Invalid files remain in the collection.
+
+Pass text or JSX to `errorMessage` to replace generated errors. Pass a function
+to format the `ValidationResult`, or `null` to hide the error text.
+
+<Story of={Stories.Validation} />
+
+## Disabled
+
+Use `isDisabled` to disable the whole component.
+
+<Story of={Stories.Disabled} />
+
+## Invalid
+
+Use `isInvalid` with `errorMessage` for a field-level validation error.
+
+<Story of={Stories.Invalid} />
+
+## Drop zone target
+
+By default, the drop area is inside the component.
+Pass an element ref to `dropzoneTarget` to use another container,
+or `"fullscreen"` to make the whole screen the drop area.
+
+<Story of={Stories.DropzoneTarget} />
+
+## Server file
+
+Keep the native `File` in local items and append it to `FormData` on submit.
+
+<Story of={Stories.ServerFile} />
+
+## Customization
+
+Use `messages` to change standard text. Use `slotProps` for field text, list
+parts, and the drop overlay. Use
+`renderEmptyState` to replace the large empty state.
+
+<Story of={Stories.CustomContent} />
+
+## Accessibility
+
+Provide `label`, `aria-label`, or `aria-labelledby` and a `textValue` for each
+item. Label, caption, and error text are associated with the upload area. After
+removal, focus moves to the next file or the browse trigger.

packages/components/src/components/FileUpload/FileUpload.module.css

@@ -0,0 +1,103 @@
+.base {
+  --file-upload-container-border-color: var(--kbq-line-contrast-fade);
+  --file-upload-container-background: var(--kbq-background-bg);
+  --file-upload-dropzone-icon-color: var(--kbq-icon-contrast-fade);
+  --file-upload-upload-icon-color: var(--kbq-icon-contrast);
+  --file-upload-left-icon-color: var(--kbq-icon-contrast-fade);
+  --file-upload-text-color: var(--kbq-foreground-contrast);
+  --file-upload-caption-color: var(--file-upload-text-color);
+  --file-upload-file-size-color: var(--kbq-foreground-contrast-secondary);
+  --file-upload-footer-border-color: var(--file-upload-container-border-color);
+  --file-upload-border-width: var(--kbq-size-border-width);
+  --file-upload-border-radius: var(--kbq-size-s);
+  --file-upload-single-min-block-size: 44px;
+  --file-upload-single-padding-block: var(--kbq-size-m);
+  --file-upload-single-padding-inline: var(--kbq-size-l);
+  --file-upload-list-min-block-size: 120px;
+  --file-upload-multiple-min-block-size: 192px;
+  --file-upload-multiple-min-inline-size: 320px;
+  --file-upload-grid-cell-padding-inline: var(--kbq-size-s);
+  --file-upload-grid-cell-gap: var(--kbq-size-s);
+  --file-upload-file-size-inline-size: var(--kbq-size-7xl);
+  --file-upload-compact-padding-block: var(--kbq-size-m);
+  --file-upload-compact-padding-inline: var(--kbq-size-l);
+
+  min-inline-size: 0;
+  inline-size: 100%;
+}
+
+.base[data-invalid][data-empty]:not([data-disabled]) {
+  --file-upload-container-border-color: var(--kbq-line-error);
+  --file-upload-container-background: var(--kbq-background-error-less);
+  --file-upload-dropzone-icon-color: var(--kbq-icon-error);
+  --file-upload-upload-icon-color: var(--kbq-icon-error);
+  --file-upload-caption-color: var(--kbq-foreground-error);
+}
+
+.base[data-invalid][data-empty]:not([data-disabled], [data-multiple]) {
+  --file-upload-left-icon-color: var(--kbq-icon-error);
+  --file-upload-text-color: var(--kbq-foreground-error);
+  --file-upload-file-size-color: var(--kbq-foreground-error);
+}
+
+.base[data-disabled] {
+  --file-upload-container-border-color: var(--kbq-states-line-disabled);
+  --file-upload-container-background: var(--kbq-states-background-disabled);
+  --file-upload-dropzone-icon-color: var(--kbq-states-icon-disabled);
+  --file-upload-upload-icon-color: var(--kbq-states-icon-disabled);
+  --file-upload-left-icon-color: var(--kbq-states-icon-disabled);
+  --file-upload-text-color: var(--kbq-states-foreground-disabled);
+  --file-upload-file-size-color: var(--kbq-states-foreground-disabled);
+  --file-upload-footer-border-color: var(--kbq-states-line-disabled);
+}
+
+.base:not([data-disabled], [data-invalid][data-empty])
+  [data-slot='file-upload-control'][data-drop-target] {
+  --file-upload-container-border-color: var(--kbq-line-theme-fade);
+  --file-upload-container-background: var(--kbq-background-theme-fade);
+  --file-upload-footer-border-color: var(--kbq-line-theme-fade);
+}
+
+.base[data-disabled] [data-slot='file-upload-control'] {
+  pointer-events: none;
+}
+
+.base:not([data-multiple]) [data-slot='file-upload-control'] {
+  min-block-size: var(--file-upload-single-min-block-size);
+}
+
+.base:not([data-multiple])[data-empty] [data-slot='file-upload-control'] {
+  padding-block: var(--file-upload-single-padding-block);
+  padding-inline: var(--file-upload-single-padding-inline);
+}
+
+.base[data-multiple]:not([data-list-empty]) [data-slot='file-upload-control'] {
+  min-block-size: var(--file-upload-multiple-min-block-size);
+}
+
+.base[data-multiple][data-empty]:not([data-list-empty])[data-size='default']
+  [data-slot='file-upload-control'] {
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--file-upload-multiple-min-inline-size);
+}
+
+.base[data-multiple][data-list-empty] [data-slot='file-upload-control'] {
+  padding-block: var(--file-upload-compact-padding-block);
+  padding-inline: var(--file-upload-compact-padding-inline);
+}
+
+.body {
+  min-inline-size: 0;
+  inline-size: 100%;
+}
+
+.body > :first-child + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xs);
+}
+
+.body > :first-child + * + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xxs);
+}