@expresscsv/react 0.1.18 → 0.1.19

package/README.md

@@ -106,6 +106,40 @@ const { open } = useExpressCSV({
 });
 ```
 
+## Template Downloads
+
+Generated templates can include example rows that match your schema.
+
+```tsx
+import { useExpressCSV, x, type Infer } from "@expresscsv/react";
+
+const candidateSchema = x.row({
+  firstName: x.string().label("First Name"),
+  email: x.string().email().label("Email"),
+  role: x.select([
+    { label: "Admin", value: "admin" },
+    { label: "Editor", value: "editor" },
+  ]).label("Role"),
+});
+
+const { open } = useExpressCSV({
+  schema: candidateSchema,
+  publishableKey: "your-publishable-key",
+  importIdentifier: "candidate-import",
+  templateDownload: {
+    source: "generate",
+    formats: ["csv", "xlsx"],
+    exampleRows: () => [
+      {
+        firstName: "Alice",
+        email: "alice@example.com",
+        role: "admin",
+      },
+    ],
+  },
+});
+```
+
 ## Theming and Styling
 
 Customize the widget's appearance with the `theme`, `colorMode`, `customCSS`, and `fonts` options.
@@ -530,7 +564,7 @@ function useExpressCSV<TSchema>(
 | `fonts` | `Record<string, ECSVFontSource>` | No | - | Custom font sources |
 | `stepDisplay` | `'progressBar' \| 'segmented' \| 'numbered'` | No | `'progressBar'` | Step indicator style |
 | `previewSchemaBeforeUpload` | `boolean` | No | `true` | Show schema preview before upload |
-| `templateDownload` | `TemplateDownloadConfig` | No | - | Template download configuration |
+| `templateDownload` | `TemplateDownloadOptions<TSchema>` | No | - | Template download configuration with optional schema-typed example rows |
 | `saveSession` | `boolean` | No | - | Persist session state |
 | `locale` | `DeepPartial<ExpressCSVLocaleInput>` | No | - | Localization overrides |
 
@@ -648,7 +682,7 @@ const schema = x.row({
 });
 ```
 
-`x.dynamicRow(...)` lets you build the row at runtime, which is useful when the schema depends on account data, user preferences, or enabled custom fields.
+`x.row(...)` also works for runtime-built schemas, which is useful when the shape depends on account data, user preferences, or enabled custom fields.
 
 ```tsx
 import { x } from "@expresscsv/react";
@@ -658,7 +692,7 @@ function buildCustomerSchema(options: {
   collectHealthScore: boolean;
   collectSegment: boolean;
 }) {
-  return x.dynamicRow({
+  return x.row({
     email: x.string().email().label("Email"),
     companyName: x.string().label("Company Name"),
     ...(options.collectCrmId ? { crmId: x.string().label("CRM ID") } : {}),
@@ -686,6 +720,8 @@ const schema = buildCustomerSchema({
 });
 ```
 
+Dynamic schema assembly preserves the same runtime parsing behavior, but it can widen `Infer<typeof schema>` because the exact keys are no longer fully known to TypeScript. Use it intentionally.
+
 #### Common Modifiers
 
 All field types support:

package/dist/index.d.cts

@@ -3015,16 +3015,14 @@ declare class ExRow<T extends ExRowShape> extends ExType<{
      * Factory method to create an ExRow validator for a row of data
      *
      * @param shape - Object defining the structure of fields in the row
+     *
+     * Object literals preserve exact key inference. If callers build the shape
+     * through a widened variable or conditional assembly, TypeScript may widen
+     * the resulting row type as well.
+     *
      * @returns A new ExRow instance
      */
     static create<T extends ExRowShape>(shape: T): ExRow<T>;
-    /**
-     * Factory method for runtime-built row shapes.
-     *
-     * This intentionally widens the returned type to ExRow<ExRowShape> so callers
-     * can assemble fields conditionally without relying on exact key inference.
-     */
-    static createDynamic(shape: ExRowShape): ExRow<ExRowShape>;
     /**
      * Specifies columns that can be null/optional with conditional logic
      *
@@ -3702,19 +3700,29 @@ export declare interface TailwindThemeVars {
 
 /**
  * Configuration for template download in the upload step.
- * When `source` is `"generate"`, a header-only template file is created
- * client-side from the schema column names.
+ * When `source` is `"generate"`, a template file is created client-side
+ * from the schema column names and optional example rows.
  */
 export declare interface TemplateDownloadConfig {
     source: 'generate';
     formats?: TemplateDownloadFormat[];
+    exampleRows?: TemplateDownloadExampleRow[];
 }
 
+/**
+ * A serializable example row used to populate generated templates.
+ */
+export declare type TemplateDownloadExampleRow = Record<string, unknown>;
+
 /**
  * Template download format
  */
 export declare type TemplateDownloadFormat = 'csv' | 'xlsx';
 
+export declare type TemplateDownloadOptions<TSchema extends ExType<unknown, ExBaseDef, unknown>> = Omit<TemplateDownloadConfig, 'exampleRows'> & {
+    exampleRows?: Infer<TSchema>[] | (() => Infer<TSchema>[]);
+};
+
 /**
  * A branded string type for locale entries that require interpolation via `{variable}` syntax.
  * Widget code cannot render a `TemplateString` directly in JSX — it must go through the `t()` function.
@@ -3761,7 +3769,7 @@ export declare interface UseExpressCSVOptions<TSchema extends ExType<unknown, Ex
     fonts?: Record<string, ECSVFontSource>;
     stepDisplay?: 'progressBar' | 'segmented' | 'numbered';
     previewSchemaBeforeUpload?: boolean;
-    templateDownload?: TemplateDownloadConfig;
+    templateDownload?: TemplateDownloadOptions<TSchema>;
     saveSession?: boolean;
     locale?: DeepPartial<ExpressCSVLocaleInput>;
     disableStatusStep?: boolean;
@@ -3831,7 +3839,6 @@ export declare const x: {
     time: typeof ExTime.create;
     datetime: typeof ExDatetime.create;
     row: typeof ExRow.create;
-    dynamicRow: typeof ExRow.createDynamic;
     select: typeof ExSelect.create;
     multiselect: typeof ExMultiselect.create;
     infer: <T extends ExType<unknown, ExBaseDef, unknown>>(_schema: T) => Infer<T>;

package/dist/index.d.mts

@@ -3015,16 +3015,14 @@ declare class ExRow<T extends ExRowShape> extends ExType<{
      * Factory method to create an ExRow validator for a row of data
      *
      * @param shape - Object defining the structure of fields in the row
+     *
+     * Object literals preserve exact key inference. If callers build the shape
+     * through a widened variable or conditional assembly, TypeScript may widen
+     * the resulting row type as well.
+     *
      * @returns A new ExRow instance
      */
     static create<T extends ExRowShape>(shape: T): ExRow<T>;
-    /**
-     * Factory method for runtime-built row shapes.
-     *
-     * This intentionally widens the returned type to ExRow<ExRowShape> so callers
-     * can assemble fields conditionally without relying on exact key inference.
-     */
-    static createDynamic(shape: ExRowShape): ExRow<ExRowShape>;
     /**
      * Specifies columns that can be null/optional with conditional logic
      *
@@ -3702,19 +3700,29 @@ export declare interface TailwindThemeVars {
 
 /**
  * Configuration for template download in the upload step.
- * When `source` is `"generate"`, a header-only template file is created
- * client-side from the schema column names.
+ * When `source` is `"generate"`, a template file is created client-side
+ * from the schema column names and optional example rows.
  */
 export declare interface TemplateDownloadConfig {
     source: 'generate';
     formats?: TemplateDownloadFormat[];
+    exampleRows?: TemplateDownloadExampleRow[];
 }
 
+/**
+ * A serializable example row used to populate generated templates.
+ */
+export declare type TemplateDownloadExampleRow = Record<string, unknown>;
+
 /**
  * Template download format
  */
 export declare type TemplateDownloadFormat = 'csv' | 'xlsx';
 
+export declare type TemplateDownloadOptions<TSchema extends ExType<unknown, ExBaseDef, unknown>> = Omit<TemplateDownloadConfig, 'exampleRows'> & {
+    exampleRows?: Infer<TSchema>[] | (() => Infer<TSchema>[]);
+};
+
 /**
  * A branded string type for locale entries that require interpolation via `{variable}` syntax.
  * Widget code cannot render a `TemplateString` directly in JSX — it must go through the `t()` function.
@@ -3761,7 +3769,7 @@ export declare interface UseExpressCSVOptions<TSchema extends ExType<unknown, Ex
     fonts?: Record<string, ECSVFontSource>;
     stepDisplay?: 'progressBar' | 'segmented' | 'numbered';
     previewSchemaBeforeUpload?: boolean;
-    templateDownload?: TemplateDownloadConfig;
+    templateDownload?: TemplateDownloadOptions<TSchema>;
     saveSession?: boolean;
     locale?: DeepPartial<ExpressCSVLocaleInput>;
     disableStatusStep?: boolean;
@@ -3831,7 +3839,6 @@ export declare const x: {
     time: typeof ExTime.create;
     datetime: typeof ExDatetime.create;
     row: typeof ExRow.create;
-    dynamicRow: typeof ExRow.createDynamic;
     select: typeof ExSelect.create;
     multiselect: typeof ExMultiselect.create;
     infer: <T extends ExType<unknown, ExBaseDef, unknown>>(_schema: T) => Infer<T>;

package/dist/index.d.ts

@@ -3015,16 +3015,14 @@ declare class ExRow<T extends ExRowShape> extends ExType<{
      * Factory method to create an ExRow validator for a row of data
      *
      * @param shape - Object defining the structure of fields in the row
+     *
+     * Object literals preserve exact key inference. If callers build the shape
+     * through a widened variable or conditional assembly, TypeScript may widen
+     * the resulting row type as well.
+     *
      * @returns A new ExRow instance
      */
     static create<T extends ExRowShape>(shape: T): ExRow<T>;
-    /**
-     * Factory method for runtime-built row shapes.
-     *
-     * This intentionally widens the returned type to ExRow<ExRowShape> so callers
-     * can assemble fields conditionally without relying on exact key inference.
-     */
-    static createDynamic(shape: ExRowShape): ExRow<ExRowShape>;
     /**
      * Specifies columns that can be null/optional with conditional logic
      *
@@ -3702,19 +3700,29 @@ export declare interface TailwindThemeVars {
 
 /**
  * Configuration for template download in the upload step.
- * When `source` is `"generate"`, a header-only template file is created
- * client-side from the schema column names.
+ * When `source` is `"generate"`, a template file is created client-side
+ * from the schema column names and optional example rows.
  */
 export declare interface TemplateDownloadConfig {
     source: 'generate';
     formats?: TemplateDownloadFormat[];
+    exampleRows?: TemplateDownloadExampleRow[];
 }
 
+/**
+ * A serializable example row used to populate generated templates.
+ */
+export declare type TemplateDownloadExampleRow = Record<string, unknown>;
+
 /**
  * Template download format
  */
 export declare type TemplateDownloadFormat = 'csv' | 'xlsx';
 
+export declare type TemplateDownloadOptions<TSchema extends ExType<unknown, ExBaseDef, unknown>> = Omit<TemplateDownloadConfig, 'exampleRows'> & {
+    exampleRows?: Infer<TSchema>[] | (() => Infer<TSchema>[]);
+};
+
 /**
  * A branded string type for locale entries that require interpolation via `{variable}` syntax.
  * Widget code cannot render a `TemplateString` directly in JSX — it must go through the `t()` function.
@@ -3761,7 +3769,7 @@ export declare interface UseExpressCSVOptions<TSchema extends ExType<unknown, Ex
     fonts?: Record<string, ECSVFontSource>;
     stepDisplay?: 'progressBar' | 'segmented' | 'numbered';
     previewSchemaBeforeUpload?: boolean;
-    templateDownload?: TemplateDownloadConfig;
+    templateDownload?: TemplateDownloadOptions<TSchema>;
     saveSession?: boolean;
     locale?: DeepPartial<ExpressCSVLocaleInput>;
     disableStatusStep?: boolean;
@@ -3831,7 +3839,6 @@ export declare const x: {
     time: typeof ExTime.create;
     datetime: typeof ExDatetime.create;
     row: typeof ExRow.create;
-    dynamicRow: typeof ExRow.createDynamic;
     select: typeof ExSelect.create;
     multiselect: typeof ExMultiselect.create;
     infer: <T extends ExType<unknown, ExBaseDef, unknown>>(_schema: T) => Infer<T>;