@expresscsv/react 0.1.17 → 0.1.18

package/README.md

@@ -5,6 +5,8 @@
 
 React hook for embedding the [ExpressCSV](https://expresscsv.com) CSV import widget. Wraps [`@expresscsv/sdk`](https://www.npmjs.com/package/@expresscsv/sdk) with automatic lifecycle management and reactive state.
 
+If you want to define schemas in shared or backend code without any frontend dependencies, use [`@expresscsv/schemas`](https://www.npmjs.com/package/@expresscsv/schemas) for the schema definition itself, then pass that schema into `@expresscsv/react`.
+
 ## Installation
 
 ```bash
@@ -312,6 +314,8 @@ interface WebhookPayload {
 }
 ```
 
+When you already have a schema, prefer `InferWebhookPayload<typeof schema>` from `@expresscsv/schemas` instead of rewriting this object shape by hand.
+
 Example payload:
 
 ```json
@@ -350,6 +354,25 @@ Your endpoint should return a **2xx** status code to acknowledge each chunk. Non
 
 Chunks are delivered **serially** — the next chunk is only sent after the previous one succeeds.
 
+If your schema lives in shared or backend code via `@expresscsv/schemas`, you can reuse the built-in webhook payload helper in your webhook handler:
+
+```typescript
+import express from "express";
+import type { InferWebhookPayload } from "@expresscsv/schemas";
+import { candidateSchema } from "../shared/candidate-schema";
+
+const app = express();
+app.use(express.json());
+
+app.post("/webhooks/csv-import", async (req, res) => {
+  const payload = req.body as InferWebhookPayload<typeof candidateSchema>;
+
+  await importCandidates(payload.records);
+
+  res.status(200).json({ ok: true });
+});
+```
+
 Below is a minimal Express.js example:
 
 ```typescript
@@ -566,6 +589,8 @@ interface WebhookConfig {
 
 The `x` schema builder provides a type-safe, fluent API for defining your CSV structure.
 
+For apps that share schemas with backend code or webhook receivers, prefer defining the schema in `@expresscsv/schemas` and importing it into your React app. That keeps schema authoring free of React and widget dependencies, while also giving your backend access to `InferWebhookPayload<typeof schema>`.
+
 #### Field Types
 
 ```tsx
@@ -604,6 +629,63 @@ const schema = x.row({
 });
 ```
 
+#### Runtime-Built Schemas
+
+For a fixed schema, keep it directly in `x.row(...)`:
+
+```tsx
+const schema = x.row({
+  email: x.string().email().label("Email"),
+  lifecycleStage: x
+    .select([
+      { label: "Lead", value: "lead" },
+      { label: "Customer", value: "customer" },
+      { label: "Churned", value: "churned" },
+    ])
+    .label("Lifecycle Stage"),
+  accountOwner: x.string().label("Account Owner").optional(),
+  contractValue: x.number().currency("USD").label("Contract Value").optional(),
+});
+```
+
+`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.
+
+```tsx
+import { x } from "@expresscsv/react";
+
+function buildCustomerSchema(options: {
+  collectCrmId: boolean;
+  collectHealthScore: boolean;
+  collectSegment: boolean;
+}) {
+  return x.dynamicRow({
+    email: x.string().email().label("Email"),
+    companyName: x.string().label("Company Name"),
+    ...(options.collectCrmId ? { crmId: x.string().label("CRM ID") } : {}),
+    ...(options.collectHealthScore
+      ? { healthScore: x.number().label("Health Score") }
+      : {}),
+    ...(options.collectSegment
+      ? {
+          segment: x
+            .select([
+              { label: "SMB", value: "smb" },
+              { label: "Mid-Market", value: "mid-market" },
+              { label: "Enterprise", value: "enterprise" },
+            ])
+            .label("Segment"),
+        }
+      : {}),
+  });
+}
+
+const schema = buildCustomerSchema({
+  collectCrmId: true,
+  collectHealthScore: true,
+  collectSegment: false,
+});
+```
+
 #### Common Modifiers
 
 All field types support:

package/dist/index.d.cts

@@ -3018,6 +3018,13 @@ declare class ExRow<T extends ExRowShape> extends ExType<{
      * @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
      *
@@ -3824,6 +3831,7 @@ 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

@@ -3018,6 +3018,13 @@ declare class ExRow<T extends ExRowShape> extends ExType<{
      * @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
      *
@@ -3824,6 +3831,7 @@ 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

@@ -3018,6 +3018,13 @@ declare class ExRow<T extends ExRowShape> extends ExType<{
      * @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
      *
@@ -3824,6 +3831,7 @@ 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>;