diff --git a/.changeset/csv-importer-component.md b/.changeset/csv-importer-component.md deleted file mode 100644 index 7bedeca1..00000000 --- a/.changeset/csv-importer-component.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -"@tailor-platform/app-shell": minor ---- - -Add `CsvImporter` component — a guided, multi-step CSV import flow with drag-and-drop upload, interactive column mapping, Standard Schema validation, inline cell editing, and async server-side validation support. - -Key features: - -- **Drag & drop upload** with file size limit enforcement -- **Auto column matching** via aliases and fuzzy header detection -- **Standard Schema validation** with built-in `csv.string()`, `csv.number()`, `csv.boolean()`, `csv.date()`, and `csv.enum()` validators that handle coercion and validation in one step -- **Inline error correction** — users can fix validation errors directly in the review table before importing -- **Async `onValidate`** callback for server-side checks (e.g. uniqueness constraints) -- **Built-in i18n support** — English and Japanese labels included out of the box - -```tsx -import { - CsvImporter, - useCsvImporter, - csv, - type CsvCellIssue, -} from "@tailor-platform/app-shell"; - -const { open, props } = useCsvImporter({ - schema: { - // Each column defines a mapping target for CSV headers - columns: [ - { - // Becomes the object key in parsed row data - key: "name", - // Display label shown in the mapping UI - label: "Name", - // Must be mapped to a CSV header before proceeding - required: true, - // Alternative CSV header names for auto-matching - aliases: ["product_name"], - // Standard Schema validator — coerces and validates in one step - schema: csv.string({ min: 1 }), - }, - { - key: "price", - label: "Price", - schema: csv.number({ min: 0 }), // Coerces the raw CSV string to a number and rejects NaN - }, - { - key: "active", - label: "Active", - schema: csv.boolean(), // Recognises "true"/"1"/"yes" and "false"/"0"/"no" (case-insensitive) - }, - ], - }, - - // Async callback invoked after schema validation passes. - // Use it for server-side checks such as uniqueness or foreign-key lookups. - onValidate: async (rows) => { - // Async API request that returns CsvCellIssue[] — shown inline in the review table - return await validateOnServer(rows); - }, - - // Called when the user confirms the import after resolving all errors. - // `event` contains the final rows, mappings, corrections, and summary stats. - onImport: (event) => { - console.log(event.summary); - // => { totalRows, validRows, correctedRows, skippedRows, warningRows } - }, -}); - -// open() opens the import drawer - - -// Renders a multi-step flow CSV importer component in drawer - -``` diff --git a/.changeset/fiery-papers-cry.md b/.changeset/fiery-papers-cry.md deleted file mode 100644 index 3898f88d..00000000 --- a/.changeset/fiery-papers-cry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@tailor-platform/app-shell": patch ---- - -Updated [react-router](https://www.npmjs.com/package/react-router) (^7.13.1 -> ^7.14.0) diff --git a/.changeset/major-groups-march.md b/.changeset/major-groups-march.md deleted file mode 100644 index e1e23b17..00000000 --- a/.changeset/major-groups-march.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@tailor-platform/app-shell": patch ---- - -Updated [lucide-react](https://www.npmjs.com/package/lucide-react) (^0.577.0 -> ^1.7.0) diff --git a/.changeset/vite-plugin-readme-docs.md b/.changeset/vite-plugin-readme-docs.md deleted file mode 100644 index da723f9b..00000000 --- a/.changeset/vite-plugin-readme-docs.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@tailor-platform/app-shell-vite-plugin": patch ---- - -Update README to document the `entrypoint` option, `[...slug]` catch-all path conversion, and the current `AppShell.WithPages` implementation. diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 51f344d6..084b1617 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,86 @@ # @tailor-platform/app-shell +## 0.34.0 + +### Minor Changes + +- c6afaca: Add `CsvImporter` component — a guided, multi-step CSV import flow with drag-and-drop upload, interactive column mapping, Standard Schema validation, inline cell editing, and async server-side validation support. + + Key features: + + - **Drag & drop upload** with file size limit enforcement + - **Auto column matching** via aliases and fuzzy header detection + - **Standard Schema validation** with built-in `csv.string()`, `csv.number()`, `csv.boolean()`, `csv.date()`, and `csv.enum()` validators that handle coercion and validation in one step + - **Inline error correction** — users can fix validation errors directly in the review table before importing + - **Async `onValidate`** callback for server-side checks (e.g. uniqueness constraints) + - **Built-in i18n support** — English and Japanese labels included out of the box + + ```tsx + import { + CsvImporter, + useCsvImporter, + csv, + type CsvCellIssue, + } from "@tailor-platform/app-shell"; + + const { open, props } = useCsvImporter({ + schema: { + // Each column defines a mapping target for CSV headers + columns: [ + { + // Becomes the object key in parsed row data + key: "name", + // Display label shown in the mapping UI + label: "Name", + // Must be mapped to a CSV header before proceeding + required: true, + // Alternative CSV header names for auto-matching + aliases: ["product_name"], + // Standard Schema validator — coerces and validates in one step + schema: csv.string({ min: 1 }), + }, + { + key: "price", + label: "Price", + schema: csv.number({ min: 0 }), // Coerces the raw CSV string to a number and rejects NaN + }, + { + key: "active", + label: "Active", + schema: csv.boolean(), // Recognises "true"/"1"/"yes" and "false"/"0"/"no" (case-insensitive) + }, + ], + }, + + // Async callback invoked after schema validation passes. + // Use it for server-side checks such as uniqueness or foreign-key lookups. + onValidate: async (rows) => { + // Async API request that returns CsvCellIssue[] — shown inline in the review table + return await validateOnServer(rows); + }, + + // Called when the user confirms the import after resolving all errors. + // `event` contains the final rows, mappings, corrections, and summary stats. + onImport: (event) => { + console.log(event.summary); + // => { totalRows, validRows, correctedRows, skippedRows, warningRows } + }, + }); + + // open() opens the import drawer + + + // Renders a multi-step flow CSV importer component in drawer + + ``` + +### Patch Changes + +- 6a39f50: Updated [react-router](https://www.npmjs.com/package/react-router) (^7.13.1 -> ^7.14.0) +- dc4b24b: Updated [lucide-react](https://www.npmjs.com/package/lucide-react) (^0.577.0 -> ^1.7.0) +- Updated dependencies [01984ee] + - @tailor-platform/app-shell-vite-plugin@0.2.1 + ## 0.33.0 ### Minor Changes diff --git a/packages/core/package.json b/packages/core/package.json index 418d8e68..b4eec8b8 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@tailor-platform/app-shell", - "version": "0.33.0", + "version": "0.34.0", "description": "An opinionated React application framework for building ERP applications on Tailor Platform", "keywords": [ "app-shell", diff --git a/packages/vite-plugin/CHANGELOG.md b/packages/vite-plugin/CHANGELOG.md index 9e428d92..5f8dd814 100644 --- a/packages/vite-plugin/CHANGELOG.md +++ b/packages/vite-plugin/CHANGELOG.md @@ -1,5 +1,11 @@ # @tailor-platform/app-shell-vite-plugin +## 0.2.1 + +### Patch Changes + +- 01984ee: Update README to document the `entrypoint` option, `[...slug]` catch-all path conversion, and the current `AppShell.WithPages` implementation. + ## 0.2.0 ### Minor Changes diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json index ec5ad075..bf4dfeb4 100644 --- a/packages/vite-plugin/package.json +++ b/packages/vite-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@tailor-platform/app-shell-vite-plugin", - "version": "0.2.0", + "version": "0.2.1", "description": "Vite plugin for file-based routing in AppShell applications", "keywords": [ "app-shell",