@elabs-ai/components-editor 4.0.0

package/src/calc-block/calc-block.stories.tsx

@@ -0,0 +1,297 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { CalcBlock } from "./calc-block";
+import type { CalcSheet, CalcTokenKind, EvaluateCalc } from "./types";
+
+const meta = {
+  title: "Editor/CalcBlock",
+  component: CalcBlock,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof CalcBlock>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function tok(start: number, end: number, kind: CalcTokenKind, resolved = true) {
+  return { start, end, kind, resolved };
+}
+
+// A hand-authored sheet stands in for the consumer's real evaluator (the math
+// engine is app/domain logic and lives outside the design system).
+const SOURCE = [
+  "# Lisbon trip",
+  "flights = 320 EUR",
+  "hotel = 95 EUR * 4",
+  "total = flights + hotel",
+  "tax = 25% of total // estimate",
+  "mystery = foo + 1",
+].join("\n");
+
+const SHEET: CalcSheet = {
+  results: [
+    { line: 1, tokens: [tok(0, 13, "comment")] },
+    {
+      line: 2,
+      tokens: [tok(0, 7, "var-def"), tok(10, 13, "number"), tok(14, 17, "currency")],
+      value: { kind: "currency", raw: 320, unit: "EUR", display: "€320.00" },
+    },
+    {
+      line: 3,
+      tokens: [
+        tok(0, 5, "var-def"),
+        tok(8, 10, "number"),
+        tok(11, 14, "currency"),
+        tok(15, 16, "operator"),
+        tok(17, 18, "number"),
+      ],
+      value: { kind: "currency", raw: 380, unit: "EUR", display: "€380.00" },
+    },
+    {
+      line: 4,
+      tokens: [
+        tok(0, 5, "var-def"),
+        tok(8, 15, "var-ref"),
+        tok(16, 17, "operator"),
+        tok(18, 23, "var-ref"),
+      ],
+      value: { kind: "currency", raw: 700, unit: "EUR", display: "€700.00" },
+    },
+    {
+      line: 5,
+      tokens: [
+        tok(0, 3, "var-def"),
+        tok(6, 8, "number"),
+        tok(8, 9, "operator"),
+        tok(13, 18, "var-ref"),
+        tok(19, 29, "comment"),
+      ],
+      value: { kind: "currency", raw: 175, unit: "EUR", display: "€175.00" },
+    },
+    {
+      line: 6,
+      tokens: [
+        tok(0, 7, "var-def"),
+        tok(10, 13, "unknown", false),
+        tok(14, 15, "operator"),
+        tok(16, 17, "number"),
+      ],
+      error: { message: 'Undefined symbol "foo"' },
+    },
+  ],
+  total: { kind: "currency", raw: 1575, unit: "EUR", display: "€1,575.00" },
+};
+
+const evaluate: EvaluateCalc = () => SHEET;
+
+/** The leading `# Lisbon trip` is lifted into the block's title bar. */
+export const Default: Story = {
+  args: { source: SOURCE, evaluate },
+};
+
+/** With no `# Heading` line, the header falls back to the neutral `calc` label. */
+const UNTITLED_SOURCE = ["flights = 320 EUR", "hotel = 95 EUR * 4", "total = flights + hotel"].join(
+  "\n",
+);
+const UNTITLED_SHEET: CalcSheet = {
+  results: [
+    {
+      line: 1,
+      tokens: [tok(0, 7, "var-def"), tok(10, 13, "number"), tok(14, 17, "currency")],
+      value: { kind: "currency", raw: 320, unit: "EUR", display: "€320.00" },
+    },
+    {
+      line: 2,
+      tokens: [tok(0, 5, "var-def"), tok(8, 10, "number"), tok(11, 14, "currency")],
+      value: { kind: "currency", raw: 380, unit: "EUR", display: "€380.00" },
+    },
+    {
+      line: 3,
+      tokens: [tok(0, 5, "var-def"), tok(8, 15, "var-ref"), tok(18, 23, "var-ref")],
+      value: { kind: "currency", raw: 700, unit: "EUR", display: "€700.00" },
+    },
+  ],
+  total: { kind: "currency", raw: 700, unit: "EUR", display: "€700.00" },
+};
+
+export const Untitled: Story = {
+  args: { source: UNTITLED_SOURCE, evaluate: () => UNTITLED_SHEET },
+};
+
+export const WithoutTotal: Story = {
+  args: { source: SOURCE, evaluate, showTotal: false },
+};
+
+// ── Row rules (dividers) ─────────────────────────────────────────────────────
+// A line-item ledger: a single rule separates the items from the subtotal, a
+// dotted rule sets off the adjustment, and a double rule precedes the total.
+const RULES_SOURCE = [
+  "# Invoice 0042",
+  "design = 1,200 USD",
+  "build = 3,400 USD",
+  "subtotal = design + build",
+  "discount = 10% of subtotal",
+  "total = subtotal - discount",
+].join("\n");
+
+const RULES_SHEET: CalcSheet = {
+  results: [
+    { line: 1, tokens: [tok(0, 14, "comment")] },
+    {
+      line: 2,
+      tokens: [tok(0, 6, "var-def"), tok(9, 14, "number"), tok(15, 18, "currency")],
+      value: { kind: "currency", raw: 1200, unit: "USD", display: "$1,200.00" },
+    },
+    {
+      line: 3,
+      tokens: [tok(0, 5, "var-def"), tok(8, 13, "number"), tok(14, 17, "currency")],
+      value: { kind: "currency", raw: 3400, unit: "USD", display: "$3,400.00" },
+      rule: "single",
+    },
+    {
+      line: 4,
+      tokens: [
+        tok(0, 8, "var-def"),
+        tok(11, 17, "var-ref"),
+        tok(18, 19, "operator"),
+        tok(20, 25, "var-ref"),
+      ],
+      value: { kind: "currency", raw: 4600, unit: "USD", display: "$4,600.00" },
+    },
+    {
+      line: 5,
+      tokens: [tok(0, 8, "var-def"), tok(11, 14, "number"), tok(18, 26, "var-ref")],
+      value: { kind: "currency", raw: -460, unit: "USD", display: "−$460.00" },
+      rule: "double",
+    },
+    {
+      line: 6,
+      tokens: [
+        tok(0, 5, "var-def"),
+        tok(8, 16, "var-ref"),
+        tok(17, 18, "operator"),
+        tok(19, 27, "var-ref"),
+      ],
+      value: { kind: "currency", raw: 4140, unit: "USD", display: "$4,140.00" },
+    },
+  ],
+  total: { kind: "currency", raw: 4140, unit: "USD", display: "$4,140.00" },
+};
+
+export const Rules: Story = {
+  args: { source: RULES_SOURCE, evaluate: () => RULES_SHEET, showTotal: false },
+};
+
+// ── Row tints ────────────────────────────────────────────────────────────────
+// Semantic status washes flag rows at a glance: on-track (success), watch
+// (warning), over budget (destructive), and a neutral (muted) note row.
+const TINTS_SOURCE = [
+  "# Q3 budget",
+  "marketing = 12,000 USD",
+  "travel = 8,000 USD",
+  "overage = 3,000 USD",
+  "headcount = 5",
+].join("\n");
+
+const TINTS_SHEET: CalcSheet = {
+  results: [
+    { line: 1, tokens: [tok(0, 11, "comment")] },
+    {
+      line: 2,
+      tokens: [tok(0, 9, "var-def"), tok(12, 18, "number"), tok(19, 22, "currency")],
+      value: { kind: "currency", raw: 12000, unit: "USD", display: "$12,000.00" },
+      tint: "success",
+    },
+    {
+      line: 3,
+      tokens: [tok(0, 6, "var-def"), tok(9, 14, "number"), tok(15, 18, "currency")],
+      value: { kind: "currency", raw: 8000, unit: "USD", display: "$8,000.00" },
+      tint: "warning",
+    },
+    {
+      line: 4,
+      tokens: [tok(0, 7, "var-def"), tok(10, 15, "number"), tok(16, 19, "currency")],
+      value: { kind: "currency", raw: 3000, unit: "USD", display: "$3,000.00" },
+      tint: "destructive",
+    },
+    {
+      line: 5,
+      tokens: [tok(0, 9, "var-def"), tok(12, 13, "number")],
+      value: { kind: "number", raw: 5, display: "5" },
+      tint: "muted",
+    },
+  ],
+  total: { kind: "currency", raw: 23000, unit: "USD", display: "$23,000.00" },
+};
+
+export const Tints: Story = {
+  args: { source: TINTS_SOURCE, evaluate: () => TINTS_SHEET },
+};
+
+// ── Author markers (what a writer types) ─────────────────────────────────────
+// The same tints/rules as above, but driven by trailing `@markers` the WRITER
+// types in the calc text — CalcBlock strips them before `evaluate` runs, so this
+// evaluator is marker-agnostic and sets NO tint/rule fields itself.
+const AUTHORED_SOURCE = [
+  "# Q3 budget",
+  "marketing = 12,000 USD @success",
+  "travel = 8,000 USD @warning",
+  "overage = 3,000 USD @danger",
+  "subtotal = marketing + travel + overage @line",
+  "note: review with finance @muted",
+].join("\n");
+
+// Token columns are relative to the marker-stripped text CalcBlock passes here.
+const AUTHORED_SHEET: CalcSheet = {
+  results: [
+    { line: 1, tokens: [tok(0, 11, "comment")] },
+    {
+      line: 2,
+      tokens: [tok(0, 9, "var-def"), tok(12, 18, "number"), tok(19, 22, "currency")],
+      value: { kind: "currency", raw: 12000, unit: "USD", display: "$12,000.00" },
+    },
+    {
+      line: 3,
+      tokens: [tok(0, 6, "var-def"), tok(9, 14, "number"), tok(15, 18, "currency")],
+      value: { kind: "currency", raw: 8000, unit: "USD", display: "$8,000.00" },
+    },
+    {
+      line: 4,
+      tokens: [tok(0, 7, "var-def"), tok(10, 15, "number"), tok(16, 19, "currency")],
+      value: { kind: "currency", raw: 3000, unit: "USD", display: "$3,000.00" },
+    },
+    {
+      line: 5,
+      tokens: [
+        tok(0, 8, "var-def"),
+        tok(11, 20, "var-ref"),
+        tok(23, 29, "var-ref"),
+        tok(32, 39, "var-ref"),
+      ],
+      value: { kind: "currency", raw: 23000, unit: "USD", display: "$23,000.00" },
+    },
+    { line: 6, tokens: [tok(0, 4, "var-def"), tok(6, 25, "comment")] },
+  ],
+  total: { kind: "currency", raw: 23000, unit: "USD", display: "$23,000.00" },
+};
+
+export const AuthoredMarkers: Story = {
+  args: { source: AUTHORED_SOURCE, evaluate: () => AUTHORED_SHEET },
+};
+
+/**
+ * Override the footer total and its label — e.g. show a budget remaining the
+ * evaluator surfaced separately, rather than the auto running total.
+ */
+export const TotalOverride: Story = {
+  args: {
+    source: SOURCE,
+    evaluate,
+    totalLabel: "Budget left",
+    total: { kind: "currency", raw: 425, unit: "EUR", display: "€425.00" },
+  },
+};
+
+export const Empty: Story = {
+  args: { source: "", evaluate: () => ({ results: [] }) },
+};

package/src/calc-block/calc-block.test.tsx

@@ -0,0 +1,164 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { CalcBlock } from "./calc-block";
+import type { CalcSheet, EvaluateCalc } from "./types";
+
+const SHEET: CalcSheet = {
+  results: [
+    {
+      line: 1,
+      tokens: [{ start: 0, end: 5, kind: "var-def", resolved: true }],
+      value: { kind: "number", raw: 800, display: "800" },
+    },
+    {
+      line: 2,
+      tokens: [{ start: 0, end: 4, kind: "unknown", resolved: false }],
+      error: { message: "unknown unit" },
+    },
+  ],
+  total: { kind: "number", raw: 1000, display: "1,000" },
+};
+
+// No TooltipProvider on purpose: CalcBlock must render standalone (it uses a
+// native `title`, not a Radix Tooltip) — including its inline error marker —
+// since it mounts inside MarkdownPreview / a story with no provider ancestor.
+function renderBlock(
+  source: string,
+  evaluate: EvaluateCalc,
+  props?: Partial<{ showTotal: boolean }>,
+) {
+  return render(<CalcBlock source={source} evaluate={evaluate} showTotal {...props} />);
+}
+
+describe("CalcBlock", () => {
+  it("renders the header, the result value, the total, and a per-line error", () => {
+    renderBlock("gross = 800\noops", () => SHEET);
+    expect(screen.getByText("calc")).toBeInTheDocument();
+    expect(screen.getByText("800")).toBeInTheDocument(); // the value cell
+    expect(screen.getByText("Total")).toBeInTheDocument();
+    expect(screen.getByText("1,000")).toBeInTheDocument();
+    expect(screen.getByLabelText(/^Error:/)).toBeInTheDocument();
+  });
+
+  it("tags each token span with its brand-calc-tok role class (the #226 non-hue cue hook)", () => {
+    const { container } = renderBlock("gross = 800\noops", () => SHEET);
+    // The role classes are what the low-chroma cues (weight/underline) hang off,
+    // so both the editor decorations and the rendered block read identically.
+    expect(container.querySelector(".brand-calc-tok.brand-calc-tok--var-def")).toBeInTheDocument();
+    expect(container.querySelector(".brand-calc-tok.brand-calc-tok--unknown")).toBeInTheDocument();
+  });
+
+  it("does not bundle a math engine — values come only from the evaluate hook", () => {
+    let called = "";
+    renderBlock("anything", (src) => {
+      called = src;
+      return { results: [] };
+    });
+    expect(called).toBe("anything");
+  });
+
+  it("omits the total footer when showTotal is false", () => {
+    renderBlock("gross = 800", () => SHEET, { showTotal: false });
+    expect(screen.queryByText("Total")).not.toBeInTheDocument();
+  });
+
+  it("renders an empty calc block gracefully", () => {
+    renderBlock("", () => ({ results: [] }));
+    expect(screen.getByText("Empty calc block.")).toBeInTheDocument();
+  });
+
+  it("lifts a leading `# Heading` into the title bar and drops it from the body", () => {
+    const sheet: CalcSheet = {
+      results: [
+        { line: 1, tokens: [] },
+        { line: 2, tokens: [], value: { kind: "number", raw: 1, display: "1" } },
+      ],
+    };
+    const { container } = render(
+      <CalcBlock source={"# Lisbon trip\nx = 1"} evaluate={() => sheet} />,
+    );
+    // Title shown once (header), not duplicated as a body heading row, and the
+    // neutral `calc` label is gone.
+    expect(screen.getAllByText("Lisbon trip")).toHaveLength(1);
+    expect(screen.queryByText("calc")).not.toBeInTheDocument();
+    // The group is labelled by the title.
+    expect(container.querySelector('[role="group"]')).toHaveAccessibleName("Lisbon trip");
+  });
+
+  it("lets the `title` prop override the displayed title", () => {
+    const sheet: CalcSheet = { results: [{ line: 1, tokens: [] }] };
+    render(<CalcBlock source={"x = 1"} title="Receipt" evaluate={() => sheet} />);
+    expect(screen.getByText("Receipt")).toBeInTheDocument();
+    expect(screen.queryByText("calc")).not.toBeInTheDocument();
+  });
+
+  it("marks rows with a rule (divider) and a tint via data attributes", () => {
+    const sheet: CalcSheet = {
+      results: [
+        { line: 1, tokens: [], value: { kind: "number", raw: 1, display: "1" }, rule: "double" },
+        { line: 2, tokens: [], value: { kind: "number", raw: 2, display: "2" }, tint: "success" },
+      ],
+    };
+    const { container } = render(<CalcBlock source={"a = 1\nb = 2"} evaluate={() => sheet} />);
+    expect(container.querySelector('[data-rule="double"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-tint="success"]')).toBeInTheDocument();
+  });
+
+  it("applies trailing author markers, strips them from the text, and hides them from evaluate", () => {
+    let seen = "";
+    const sheet: CalcSheet = {
+      results: [
+        { line: 1, tokens: [], value: { kind: "number", raw: 1, display: "1" } },
+        { line: 2, tokens: [], value: { kind: "number", raw: 2, display: "2" } },
+      ],
+    };
+    const { container } = render(
+      <CalcBlock
+        source={"a = 1 @success @line\nb = 2 @danger"}
+        evaluate={(src) => {
+          seen = src;
+          return sheet;
+        }}
+      />,
+    );
+    // The evaluator never sees the markers (cleaned source).
+    expect(seen).toBe("a = 1\nb = 2");
+    // Markers are stripped from the rendered rows…
+    expect(screen.queryByText(/@success|@line|@danger/)).not.toBeInTheDocument();
+    // …and applied as tint/rule (note `@danger` → destructive).
+    expect(container.querySelector('[data-rule="single"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-tint="success"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-tint="destructive"]')).toBeInTheDocument();
+  });
+
+  it("leaves an unrecognized trailing @word as literal text", () => {
+    const sheet: CalcSheet = { results: [{ line: 1, tokens: [] }] };
+    render(<CalcBlock source={"ping = host @bogus"} evaluate={() => sheet} />);
+    expect(screen.getByText(/@bogus/)).toBeInTheDocument();
+  });
+
+  it("does not parse markers when markers={false}", () => {
+    const sheet: CalcSheet = { results: [{ line: 1, tokens: [] }] };
+    const { container } = render(
+      <CalcBlock source={"a = 1 @success"} markers={false} evaluate={() => sheet} />,
+    );
+    expect(screen.getByText(/@success/)).toBeInTheDocument();
+    expect(container.querySelector("[data-tint]")).not.toBeInTheDocument();
+  });
+
+  it("overrides the footer total value and label", () => {
+    render(
+      <CalcBlock
+        source={"gross = 800"}
+        evaluate={() => SHEET}
+        totalLabel="Budget left"
+        total={{ kind: "number", raw: 425, display: "425" }}
+      />,
+    );
+    expect(screen.getByText("Budget left")).toBeInTheDocument();
+    expect(screen.getByText("425")).toBeInTheDocument();
+    // The overridden total replaces the sheet's computed total.
+    expect(screen.queryByText("1,000")).not.toBeInTheDocument();
+  });
+});