feat: add worker to upload CSV file #3117

icaroov · 2025-11-12T17:53:42Z

What's the purpose of this pull request?

This pull request introduces a new file upload and CSV parsing feature to the components package, including reusable hooks and UI components. The main changes are the addition of a FileUploadCard component for uploading files, a useCSVParser hook for parsing CSV files in a web worker, and a useFileUpload hook for managing file upload errors and validation. These new utilities are exported for use in other parts of the application.

This PR it was created from #3109

How it works?

New hooks and utilities:

Added useCSVParser hook for parsing CSV files in a web worker, with error handling and CSV template generation.
Added useFileUpload hook to manage file upload errors, validation, and rejection reasons.
Exported new hooks from the hooks index for easier consumption.
Added type exports for CSV parsing to the main index file.

New UI components:

Added FileUploadCard component for file selection, drag-and-drop, and template download, with error state and file validation.
Added exports for FileUploadCard and FileUploadStatus components and their types.

Dependency updates:

Added papaparse to dependencies for running CSV parsing in a web worker.

How to test it?

Starters Deploy Preview

References

Card
Figma

Checklist

You may erase this after checking them all 😉

PR Title and Commit Messages

PR title and commit messages follow the Conventional Commits specification
- Available prefixes: feat, fix, chore, docs, style, refactor, ci and test

PR Description

Added a label according to the PR goal - breaking change, bug, contributing, performance, documentation..

Dependencies

Committed the pnpm-lock.yaml file when there were changes to the packages

Documentation

PR description
For documentation changes, ping @Mariana-Caetano to review and update (Or submit a doc request)

- Introduced `FileUploadCard` for file selection and upload functionality, including drag-and-drop support. - Added `FileUploadStatus` to display upload progress and error handling. - Updated index files to export new components and types. - Enhanced `SearchInputField` to include an attachment button that triggers the file upload card. - Added styles for both new components to ensure proper UI integration.

…lity

…te generation

…isplay

…d template generation

packages/components/src/hooks/useCSVParser.ts

…ability

## What's the purpose of this pull request? This PR aims to generate a new version of faststore. preview: https://storeframework-cm652ufll028lmgv665a6xv0g-pm84gc740.b.vtex.app --------- Co-authored-by: Larícia Mota <laricia.mota@vtex.com.br> Co-authored-by: Matheus P. Silva <cout.matheusps@gmail.com> Co-authored-by: Leandro Rodrigues <leandro.swf@gmail.com> Co-authored-by: vtexgithubbot <vtexgithubbot@github.com> Co-authored-by: Lucas Feijó <lucas.portela@vtex.com> Co-authored-by: Luiz Falcão <39093175+llfalcao@users.noreply.github.com> Co-authored-by: Artur Santiago <artur.santiago@cubos.io> Co-authored-by: Sahan Jayawardana <sahan@clouda.io>

## What's the purpose of this pull request?  ## How it works?  ## How to test it?  ### Starters Deploy Preview   ## References   ## Checklist <em>You may erase this after checking them all 😉</em> **PR Title and Commit Messages** - [ ] PR title and commit messages follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification - Available prefixes: `feat`, `fix`, `chore`, `docs`, `style`, `refactor`, `ci` and `test` **PR Description** - [ ] Added a label according to the PR goal - `breaking change`, `bug`, `contributing`, `performance`, `documentation`.. **Dependencies** - [ ] Committed the `pnpm-lock.yaml` file when there were changes to the packages **Documentation** - [ ] PR description - [ ] For documentation changes, ping `@Mariana-Caetano` to review and update (Or submit a doc request) --------- Co-authored-by: Larícia Mota <laricia.mota@vtex.com.br> Co-authored-by: Matheus P. Silva <cout.matheusps@gmail.com> Co-authored-by: Leandro Rodrigues <leandro.swf@gmail.com> Co-authored-by: vtexgithubbot <vtexgithubbot@github.com> Co-authored-by: Lucas Feijó <lucas.portela@vtex.com> Co-authored-by: Luiz Falcão <39093175+llfalcao@users.noreply.github.com> Co-authored-by: Artur Santiago <artur.santiago@cubos.io> Co-authored-by: Sahan Jayawardana <sahan@clouda.io>

## What's the purpose of this pull request?  ## How it works?  ## How to test it?  ### Starters Deploy Preview   ## References   ## Checklist <em>You may erase this after checking them all 😉</em> **PR Title and Commit Messages** - [ ] PR title and commit messages follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification - Available prefixes: `feat`, `fix`, `chore`, `docs`, `style`, `refactor`, `ci` and `test` **PR Description** - [ ] Added a label according to the PR goal - `breaking change`, `bug`, `contributing`, `performance`, `documentation`.. **Dependencies** - [ ] Committed the `pnpm-lock.yaml` file when there were changes to the packages **Documentation** - [ ] PR description - [ ] For documentation changes, ping `@Mariana-Caetano` to review and update (Or submit a doc request)

packages/core/src/components/search/SearchInput/SearchInput.tsx

packages/components/src/hooks/useCSVParser.ts

giurigaud · 2025-12-03T18:52:46Z

The changelog needs to be added.

…parsing implementation

codesandbox-ci · 2025-12-03T19:34:56Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

ArthurTriis1 · 2025-12-05T13:40:45Z

Adiciona por favor na descrição do PR o arquivo .csv que estão usando no desenvolvimento

ArthurTriis1 · 2025-12-05T13:44:27Z

packages/components/package.json

    "react-dom": "^18.2.0"
  },
  "dependencies": {
+    "papaparse": "^5.5.3",


Precisamos checar com o time da faststore a opinião sobre a adição desse pacote, consegue explicar um pouco a necessidade dele?

Foi utilizado visando desempenho e simplicidade para processar arquivos CSV grandes. Foi indicado o uso na RFC. Ele lê o CSV em partes (streaming), não trava a tela, já usa Web Worker, detecta separador, trata aspas, dá progresso, permite cancelar e manipula arquivos grandes sem prejudicar a memória.

ArthurTriis1 · 2025-12-05T13:49:40Z

packages/components/src/hooks/useFileUpload.ts

+  'application/vnd.ms-excel': ['.xls'],
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [
+    '.xlsx',


Acredito que na RFC foi proposto o upload apenas de formato csv, surgiu a necessidade de xls e xlsx tb?

Ajustado, aceitando apenas CSV

ArthurTriis1

A funcionalidade parece estar funcionando bem, mas reforço que precisamos da avaliação do time da faststore sobre a adição da lib papaparse e averiguar se devemos de fato permitir o upload de xls e xlsx.

BrunaCubos · 2025-12-05T13:58:30Z

A funcionalidade parece estar funcionando bem, mas reforço que precisamos da avaliação do time da faststore sobre a adição da lib papaparse e averiguar se devemos de fato permitir o upload de xls e xlsx.

A adição da lib do papaparse foi indicado para uso na RFC.

BrunaCubos · 2025-12-09T18:13:55Z

Para desenvolver utilizamos o arquvio fornecido pela propria RFC
FastStore Starter Template.csv

lariciamota · 2025-12-16T13:06:41Z

Oie, pessoal!
Notei que nesse PR tem alguns arquivos do #3109, acredito que esteja faltando rebase e mudar a branch de destino para não ficar misturando. Como o PR anterior também está em revisão e esses arquivos têm mudanças pedidas lá, seria bom ficar com as mudanças separadas para facilitar review e não ter comentários repetidos. Obrigada!

…feat/BE-71

- Replaced native input elements with custom Input and Button components for consistency. - Simplified accepted file types in FileUploadCard to only '.csv'. - Added TODO comment for file size formatting in FileUploadStatus. - Adjusted SCSS variable formatting for improved readability.

…feat/BE-71

- Updated `useFileUpload` to use `FileRejection` type for better type safety. - Introduced `UploadFileDropdown` component with improved CSV file handling using `useCSVParser` hook. - Simplified error handling and template generation for CSV uploads. - Added lazy loading for `UploadFileDropdown` in `SearchInput` component.

…E-70

…feat/BE-71

BrunaCubos and others added 12 commits November 10, 2025 11:23

feat: add dropzone and upload dropdown

231d2ea

fix: import

a496c6a

fix: code review issues

68ce912

feat: add parse to xlsx files on UploadFileDropdown

8fcfbd5

feat: add file size formatting and update template download functiona…

15bfbe7

…lity

feat: add useCSVParser and useFileUpload hooks

4d27dbf

chore: add @koale/useworker dep

d1c94b9

feat: refactor useCSVParser to use workers for parsing and add templa…

a3eed9f

…te generation

feat: add formatFileName and formatFileSize utility functions

963f764

feat: add file upload status customization options and improve file d…

6df04d4

…isplay

feat: integrate CSV file upload and processing with error handling an…

c501cc6

…d template generation

icaroov self-assigned this Nov 12, 2025

icaroov requested a review from a team as a code owner November 12, 2025 17:53

icaroov requested review from BrunaCubos, emersonlaurentino and hellofanny and removed request for a team November 12, 2025 17:53

BrunaCubos reviewed Nov 17, 2025

View reviewed changes

packages/components/src/hooks/useCSVParser.ts Outdated Show resolved Hide resolved

packages/components/src/hooks/useCSVParser.ts Outdated Show resolved Hide resolved

refactor: adjust code structure for improved readability and maintain…

f82edfb

…ability

BrunaCubos approved these changes Nov 18, 2025

View reviewed changes

fix: code review issues

b0770ba

casvtex removed request for emersonlaurentino and hellofanny November 19, 2025 19:42

icaroov changed the base branch from main to feat/quick-order-by-file-feature-branch November 21, 2025 15:01

icaroov and others added 5 commits November 21, 2025 12:05

Merge branch 'feat/quick-order-by-file-feature-branch' into feat/BE-71

861b44d

[no ci] Release: 3.95.0-dev.2

96a0271

feat: Trigger build

6bd417e

eduardoformiga and others added 2 commits December 2, 2025 12:06

[no ci] Release: 3.95.0

a9697d8

raabelo approved these changes Dec 3, 2025

View reviewed changes

packages/core/src/components/search/SearchInput/SearchInput.tsx Outdated Show resolved Hide resolved

packages/components/src/hooks/useCSVParser.ts Show resolved Hide resolved

icaroov added 3 commits December 3, 2025 16:02

fix: translate comments to english

d3e222c

chore: update changelog

c68eedb

refactor: remove unused dependency '@koale/useworker' and update CSV …

7dccc73

…parsing implementation

ArthurTriis1 reviewed Dec 5, 2025

View reviewed changes

ArthurTriis1 approved these changes Dec 5, 2025

View reviewed changes

brunass added 2 commits December 9, 2025 15:07

fix: code review issues

3b07e0d

fix: code review issues

6be60c7

brunass added 5 commits December 17, 2025 15:43

Merge branch 'BE-70' of https://github.com/cubos-vtex/faststore into …

1e321c9

…feat/BE-71

fix: add adjustment from code review

2a6a5ef

fix: add adjustment from code review

92d6425

Merge branch 'BE-70' of https://github.com/cubos-vtex/faststore into …

46cc02f

…feat/BE-71

BrunaCubos mentioned this pull request Dec 17, 2025

feat: add worker to upload CSV file cubos-vtex/faststore#12

Open

brunass added 3 commits December 17, 2025 16:50

Merge branch 'main' of https://github.com/cubos-vtex/faststore into B…

2d165b8

…E-70

Merge branch 'BE-70' of https://github.com/cubos-vtex/faststore into …

d9e0250

…feat/BE-71

feat: add worker to upload CSV file #3117

Are you sure you want to change the base?

feat: add worker to upload CSV file #3117

Conversation

icaroov commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What's the purpose of this pull request?

How it works?

How to test it?

Starters Deploy Preview

References

Checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

giurigaud commented Dec 3, 2025

Uh oh!

codesandbox-ci bot commented Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ArthurTriis1 commented Dec 5, 2025

Uh oh!

ArthurTriis1 Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

BrunaCubos Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

ArthurTriis1 Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

BrunaCubos Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

ArthurTriis1 left a comment

Choose a reason for hiding this comment

Uh oh!

BrunaCubos commented Dec 5, 2025

Uh oh!

BrunaCubos commented Dec 9, 2025

Uh oh!

lariciamota commented Dec 16, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

icaroov commented Nov 12, 2025 •

edited

Loading

codesandbox-ci bot commented Dec 3, 2025 •

edited

Loading