@updog/data-editor 0.1.18 → 0.1.19

package/README.md

@@ -29,7 +29,7 @@ npm install @updog/data-editor
 
 ```tsx
 import { useState } from "react";
-import { DataEditor, required, email } from "@updog/data-editor";
+import { DataEditor } from "@updog/data-editor";
 import "@updog/data-editor/styles.css";
 import type { DataEditorColumn } from "@updog/data-editor";
 
@@ -41,9 +41,26 @@ type Employee = {
 };
 
 const columns: DataEditorColumn[] = [
-  { id: "name", title: "Full Name", size: 200, validate: required("Name is required") },
-  { id: "email", title: "Email", size: 250, validate: [required("Email is required"), email("Invalid email")] },
-  { id: "role", title: "Role", editor: { type: "select", options: ["Admin", "Editor", "Viewer"] } },
+  {
+    id: "name",
+    title: "Full Name",
+    size: 200,
+    validators: [{ type: "required", message: "Name is required" }],
+  },
+  {
+    id: "email",
+    title: "Email",
+    size: 250,
+    validators: [
+      { type: "required", message: "Email is required" },
+      { type: "email", message: "Invalid email" },
+    ],
+  },
+  {
+    id: "role",
+    title: "Role",
+    editor: { type: "select", options: ["Admin", "Editor", "Viewer"] },
+  },
 ];
 
 export function App() {
@@ -147,7 +164,6 @@ In inline mode, `open` and `onClose` don't apply.
 ## Column Configuration
 
 ```tsx
-import { required, email } from "@updog/data-editor";
 import type { DataEditorColumn } from "@updog/data-editor";
 
 const columns: DataEditorColumn[] = [
@@ -156,8 +172,11 @@ const columns: DataEditorColumn[] = [
     title: "Email",
     size: 260,
 
-    // One validator, or an array. Each returns `{ level: "error", message }` or null.
-    validate: [required("Email is required"), email("Enter a valid email")],
+    // Declarative validators. See "Built-in Validators" for the full list.
+    validators: [
+      { type: "required", message: "Email is required" },
+      { type: "email", message: "Enter a valid email" },
+    ],
 
     // Flag duplicates in this column as errors.
     unique: true,
@@ -189,36 +208,42 @@ const columns: DataEditorColumn[] = [
 
 ## Built-in Validators
 
-Validators are factory functions — call each one with the error message you want displayed.
+Validators are declarative objects passed in the `validators` array on each column. The SDK ships a TS interpreter for the client; Updog Scale ships a matching Go interpreter for server mode. Both runtimes are pinned to the same fixture set, so a column definition produces identical pass/fail results regardless of where it runs.
+
+| `type` | Fields | Behavior |
+|---|---|---|
+| `"required"` | `message?` | Value must be non-empty. |
+| `"email"` | `message?` | Value must look like an email address. |
+| `"numeric"` | `message?` | Value must parse as a number. Commas are stripped before parsing. |
+| `"regex"` | `pattern`, `flags?`, `message?` | Value must match the regular expression. Empty values are skipped. |
+| `"range"` | `min?`, `max?`, `message?` | Value must be numerically within `[min, max]`. Either bound is optional. |
+| `"oneOf"` | `values: string[]`, `message?` | Value must be one of the listed strings. |
+| `"date"` | `format?: "YYYY-MM-DD" \| "DD/MM/YYYY"`, `message?` | Value must parse as a date in the given format. When `format` is omitted, either format is accepted. |
 
 ```tsx
-import {
-  required,
-  numeric,
-  email,
-  date,
-  oneOf,
-  endDateAfterStart,
-} from "@updog/data-editor";
-
-const columns = [
-  { id: "name", title: "Name", validate: required("Required") },
-  { id: "email", title: "Email", validate: [required("Required"), email("Invalid email")] },
-  { id: "salary", title: "Salary", validate: numeric("Must be a number") },
-  { id: "status", title: "Status", validate: oneOf(["active", "inactive"], "Invalid status") },
+const columns: DataEditorColumn[] = [
+  { id: "name", title: "Name", validators: [{ type: "required", message: "Required" }] },
+  {
+    id: "email",
+    title: "Email",
+    validators: [
+      { type: "required", message: "Required" },
+      { type: "email", message: "Invalid email" },
+    ],
+  },
+  { id: "salary", title: "Salary", validators: [{ type: "numeric", message: "Must be a number" }] },
+  {
+    id: "status",
+    title: "Status",
+    validators: [{ type: "oneOf", values: ["active", "inactive"], message: "Invalid status" }],
+  },
   {
     id: "startDate",
     title: "Start",
-    validate: date("Use YYYY-MM-DD or DD/MM/YYYY"),
+    validators: [{ type: "date", format: "YYYY-MM-DD", message: "Use YYYY-MM-DD" }],
     editor: { type: "date" },
     dependentFields: ["endDate"],
   },
-  {
-    id: "endDate",
-    title: "End",
-    validate: [date("Invalid date"), endDateAfterStart("startDate", "End must be on or after start")],
-    editor: { type: "date" },
-  },
 ];
 ```
 
@@ -226,18 +251,34 @@ A `ValidationError` with `level: "error"` flags the cell in the grid but does **
 
 ### Custom validators
 
-A validator is `(value, row) => ValidationError | null`. The only `level` is `"error"`.
+For cross-field checks or anything not covered by the built-ins, wrap a `CellValidator` function in `{ type: "function", fn }`. Function validators are client-mode only — they're dropped (with a one-time warning) when the SDK serializes the schema for server mode. Use `dependentFields` on the column to trigger re-validation when another column changes.
 
 ```tsx
-import type { CellValidator } from "@updog/data-editor";
+import type { CellValidator, DataEditorColumn } from "@updog/data-editor";
 
-const mustContainAt: CellValidator = (value) => {
-  if (!value) return null;
-  if (!String(value).includes("@")) return { level: "error", message: "Must contain @" };
+const endAfterStart: CellValidator = (value, row) => {
+  if (!value || !row.startDate) return null;
+  if (String(value) < String(row.startDate)) {
+    return { level: "error", message: "End must be on or after start" };
+  }
   return null;
 };
+
+const columns: DataEditorColumn[] = [
+  {
+    id: "endDate",
+    title: "End",
+    editor: { type: "date" },
+    validators: [
+      { type: "date", message: "Invalid date" },
+      { type: "function", fn: endAfterStart },
+    ],
+  },
+];
 ```
 
+The only `level` is `"error"`. Return `null` to indicate the value is valid.
+
 ## Data Loading
 
 `loadData` is called once when the editor opens. Call `onChunk` one or more times to stream rows. The grid renders each chunk without blocking.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@updog/data-editor",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "Client-side CSV importer and spreadsheet editor SDK for React. Import CSV, Excel, JSON, TSV, and XML, match columns, validate, and edit 1M+ rows entirely in the browser.",
   "author": "Mikhail Kutateladze <admin@updog.tech>",
   "homepage": "https://updog.tech",