@elabs-ai/components-data 4.0.0 → 4.2.0

package/src/templates-data-app.stories.tsx

@@ -3,7 +3,7 @@
  * (app-shell + DataTable with toolbar). This story is the single source of
  * truth: `pnpm gen:templates` derives the consumer template source
  * (`docs/playbooks/templates/data-app.tsx`) from it.
- * Verify across all three themes with globals=theme:<slug>.
+ * Verify across every theme with globals=theme:<slug>.
  */
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
@@ -52,9 +52,11 @@ const columns: ColumnDef<DataRow>[] = [
   {
     accessorKey: "records",
     header: "Records",
-    cell: ({ row }) => (
-      <span className="tabular-nums">{row.original.records.toLocaleString()}</span>
-    ),
+    // #69: `meta.numeric` is the seam — DataTable applies `tabular-nums` +
+    // end-alignment on both `<th>` and `<td>`, so the exemplar no longer
+    // hand-rolls a wrapper span for it.
+    meta: { numeric: true },
+    cell: ({ row }) => row.original.records.toLocaleString(),
   },
   { accessorKey: "lastRun", header: "Last run" },
 ];

package/src/to-csv.test.ts

@@ -82,6 +82,19 @@ describe("toCsv", () => {
     expect(csv).toContain("'@baz");
   });
 
+  it("does NOT quote a plain negative number as an injection risk (#review false positive)", () => {
+    const rows = [{ val: -5 } as unknown as Row];
+    const csv = toCsv(rows);
+    expect(csv).toContain("-5");
+    expect(csv).not.toContain("'-5");
+  });
+
+  it("does not quote a leading-plus number either", () => {
+    const rows = [{ val: "+12.5" } as Row];
+    const csv = toCsv(rows);
+    expect(csv).not.toContain("'+12.5");
+  });
+
   it("null → empty string", () => {
     const rows = [{ val: null } as Row];
     const csv = toCsv(rows);

package/src/to-csv.ts

@@ -4,10 +4,12 @@
  * `toCsv` is pure + SSR-safe (no DOM, no deps). `downloadCsv` delegates the
  * browser save mechanics to `@elabs-ai/components-ui`'s shared `downloadBlob` (one home for
  * the Blob → `<a download>` dance; @elabs-ai/components-ui is already a peer dep here).
- * ChartFrame uses its own local copy of `toCsv` in @elabs-ai/components-charts to avoid a
- * cross-sibling dependency (charts → data is not allowed per the one-way rule).
+ * Value stringification + injection-guarded field quoting live in
+ * `@elabs-ai/components-ui`'s `csv` lib (`csvStringifyValue`/`csvQuoteField`) — the shared
+ * home so `@elabs-ai/components-charts`'s ChartFrame serializer can reuse the same logic
+ * without a charts → data dependency (not allowed per the one-way rule).
  */
-import { downloadBlob } from "@elabs-ai/components-ui";
+import { csvQuoteField, csvStringifyValue, downloadBlob } from "@elabs-ai/components-ui";
 
 export type CsvColumn<TData> = { key: keyof TData & string; header?: string };
 
@@ -25,33 +27,8 @@ export interface DownloadCsvOptions<TData> extends ToCsvOptions<TData> {
   filename?: string;
 }
 
-/** RFC 4180 injection guard prefixes. */
-const INJECTION_PREFIXES = ["=", "+", "-", "@"];
-
-function stringifyValue(value: unknown): string {
-  if (value === null || value === undefined) return "";
-  if (value instanceof Date) return value.toISOString();
-  if (typeof value === "object") return JSON.stringify(value);
-  return String(value);
-}
-
-function quoteField(field: string, delimiter: string): string {
-  // CSV-injection guard: prefix with a single quote if the field starts with a
-  // formula trigger character.
-  if (INJECTION_PREFIXES.some((p) => field.startsWith(p))) {
-    field = "'" + field;
-  }
-  // RFC 4180: quote iff the field contains delimiter, double-quote, CR, or LF.
-  if (
-    field.includes(delimiter) ||
-    field.includes('"') ||
-    field.includes("\n") ||
-    field.includes("\r")
-  ) {
-    return '"' + field.replaceAll('"', '""') + '"';
-  }
-  return field;
-}
+const stringifyValue = csvStringifyValue;
+const quoteField = csvQuoteField;
 
 /**
  * Serialize rows to a CSV string (no DOM access — safe for SSR / jsdom).