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

[KamilEmeleev]

No description provided.

[github-actions]

Visit the preview URL for this PR (updated for commit 9e6f375):

https://react-koobiq-next--prs-420-qf54rq9a.web.app

_{(expires Sat, 01 Aug 2026 10:01:35 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: fc29847d4a9e5cb1adf458c76a9b681c76e2eeff}

[NikGurev]

Есть небольшие замечания по доке и несоответствие обработки атрибута accept.

В остальном, функционал соответствует тому что сделано в angular

Круто! 🚀

[Copilot]

Pull request overview

This PR introduces a new FileUpload component to the @koobiq/react-components library, along with supporting utilities and public API surface updates in react-core/react-primitives to enable the underlying collection and file-picker primitives.

Changes:

• Added FileUpload component (compound API) with drag-and-drop, picker triggers (file/folder/mixed), focus restoration, and localized strings.
• Added shared utilities: formatFileSize helper + tests, and FileTrigger/Collection public exports in primitives/core.
• Added Storybook stories, MDX documentation, styles, and fixtures for the new component.

Reviewed changes

Copilot reviewed 44 out of 44 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tools/public_api_guard/react-primitives.api.md	Public API report updated for FileTrigger/FileTriggerProps.
tools/public_api_guard/react-core.api.md	Public API report updated for Collection export + formatting.
packages/primitives/src/index.ts	Re-exported FileTrigger and FileTriggerProps from react-aria-components.
packages/core/src/index.ts	Re-exported Collection type from @react-types/shared.
packages/components/src/utils/index.ts	Exported new formatFileSize util from components utils barrel.
packages/components/src/utils/formatFileSize/index.ts	Barrel export for formatFileSize.
packages/components/src/utils/formatFileSize/formatFileSize.ts	Added locale-aware byte-size formatter with customizable labels/formatter.
packages/components/src/utils/formatFileSize/formatFileSize.test.ts	Added unit tests for formatFileSize.
packages/components/src/components/index.ts	Exported FileUpload from components entry.
packages/components/src/components/FileUpload/utils.ts	Added file normalization/filtering helpers (accept, folder-vs-file, relativePath).
packages/components/src/components/FileUpload/types.ts	Added public types for FileUpload props and compound parts.
packages/components/src/components/FileUpload/intl.ts	Added localized message dictionaries (ru-RU/en-US).
packages/components/src/components/FileUpload/index.ts	Component entry exports + context exports.
packages/components/src/components/FileUpload/hooks/useMiddleEllipsis.ts	Added hook for truncating long filenames with middle ellipsis based on measured width.
packages/components/src/components/FileUpload/hooks/useMiddleEllipsis.test.tsx	Added tests for middle-ellipsis behavior and resize updates.
packages/components/src/components/FileUpload/hooks/useFileUploadField.ts	Added hook to wire label/description/error ARIA props to the drop control.
packages/components/src/components/FileUpload/hooks/useFileDropTarget.ts	Added drag-and-drop target handling + directory expansion from dropped entries.
packages/components/src/components/FileUpload/hooks/index.ts	Hook barrel exports.
packages/components/src/components/FileUpload/FileUploadContext.ts	Added contexts for compound components and item-level state.
packages/components/src/components/FileUpload/FileUpload.tsx	Implemented FileUpload root component, collection integration, overlay handling, focus restoration.
packages/components/src/components/FileUpload/FileUpload.test.tsx	Added comprehensive component and hook tests (picker, drop, focus, localization).
packages/components/src/components/FileUpload/FileUpload.stories.tsx	Added Storybook stories demonstrating usage patterns and variants.
packages/components/src/components/FileUpload/FileUpload.module.css	Added root styling and state-driven CSS variables.
packages/components/src/components/FileUpload/FileUpload.mdx	Added component documentation page (MDX).
packages/components/src/components/FileUpload/components/Trigger/Trigger.tsx	Added browse-link trigger(s) built on FileTrigger.
packages/components/src/components/FileUpload/components/Trigger/index.ts	Trigger barrel export.
packages/components/src/components/FileUpload/components/List/ListEmpty.tsx	Added compact empty-state row for list mode.
packages/components/src/components/FileUpload/components/List/ListEmpty.module.css	Styles for list empty row.
packages/components/src/components/FileUpload/components/List/ListAddMore.tsx	Added “add more” footer row when populated (multiple mode).
packages/components/src/components/FileUpload/components/List/ListAddMore.module.css	Styles for add-more row.
packages/components/src/components/FileUpload/components/List/List.tsx	Implemented list wrapper, slot-props plumbing, empty-vs-filled rendering.
packages/components/src/components/FileUpload/components/List/List.module.css	Styles for list container and scrolling list region.
packages/components/src/components/FileUpload/components/List/index.ts	List barrel exports.
packages/components/src/components/FileUpload/components/Item/Item.tsx	Implemented item compound parts (icon/content/name/size/remove) + overflow tooltip.
packages/components/src/components/FileUpload/components/Item/Item.module.css	Styles for item rows and interactive states.
packages/components/src/components/FileUpload/components/Item/index.ts	Item barrel export.
packages/components/src/components/FileUpload/components/index.ts	Components barrel export.
packages/components/src/components/FileUpload/components/Empty/index.ts	Empty-state barrel export.
packages/components/src/components/FileUpload/components/Empty/Empty.tsx	Implemented large empty state compound parts.
packages/components/src/components/FileUpload/components/Empty/Empty.module.css	Styles for large empty state.
packages/components/src/components/FileUpload/components/DropTargetOverlay/index.ts	Overlay barrel export.
packages/components/src/components/FileUpload/components/DropTargetOverlay/DropTargetOverlay.tsx	Implemented overlay positioning/tracking for external/fullscreen drop targets.
packages/components/src/components/FileUpload/components/DropTargetOverlay/DropTargetOverlay.module.css	Overlay styles (fullscreen and non-fullscreen).
.storybook/public/files/security-scan-report.json	Added Storybook fixture file for demos/examples.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[rmnturov]

Под размер файла не делать бы фикс ширину колонки. Надо по содержмому подравнять. Речь про сингл

Вот так надо

[rmnturov]

А вот в режиме мультизагрузки там список файлов это по сути таблица, где ширина колонки с размером тоже не должна быть фикс, а должна отталкиваться от контента

[rmnturov]

Пример про лейбл. В нативном инпут-файле, если лейбл связать с инпутом, то клик на лейбл откроет диалог выбора файла. Уместно будет и нам так сделать?

<label for="avatar">Choose a profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" />

[rmnturov]

Клик мышкой. После выбора файлов или папок не надо показывать рамку фокуса на кнопке «select files». Видимая рамка фокуса нужна только при управлении с клавы.