@tailorkit/react 0.1.0-beta.2 → 0.1.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailorkit/react",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.3",
   "license": "AGPL-3.0-only",
   "repository": {
     "type": "git",
@@ -8,7 +8,8 @@
     "directory": "packages/react"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "type": "module",
   "imports": {
@@ -33,8 +34,8 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.9",
     "@standard-schema/spec": "^1.1.0",
-    "@tailorkit/core": "0.1.0-beta.2",
-    "@tailorkit/sandbox": "0.1.0-beta.2"
+    "@tailorkit/core": "0.1.0-beta.3",
+    "@tailorkit/sandbox": "0.1.0-beta.3"
   },
   "devDependencies": {
     "@tailorkit/config": "0.0.0",

package/src/__tests__/node-store.test.ts

@@ -0,0 +1,206 @@
+import { describe, expect, it, vi } from "vitest";
+import { NodeStore } from "../node-store";
+import type { RemoteNode } from "@tailorkit/sandbox/protocol";
+
+const textNode = (id: string, text: string): RemoteNode => ({ id, kind: "text", text });
+
+const elemNode = (
+  id: string,
+  type: string,
+  props: Record<string, unknown> = {},
+  children: RemoteNode[] = [],
+): RemoteNode => ({ children, id, kind: "element", props, type });
+
+const elementWithCallback = (event: string): RemoteNode => ({
+  callbacks: [{ callback: "onSelect", inputCount: 1, event }],
+  children: [],
+  id: "n",
+  kind: "element",
+  props: {},
+  type: "tailorkit-button",
+});
+
+describe("NodeStore", () => {
+  describe("setSnapshot", () => {
+    it("stores all nodes from the tree", () => {
+      const store = new NodeStore();
+      const tree = elemNode("root", "div", {}, [textNode("t1", "hello")]);
+      store.setSnapshot(tree);
+
+      expect(store.getNode("root")).toMatchObject({ id: "root", type: "div" });
+      expect(store.getNode("t1")).toMatchObject({ id: "t1", text: "hello" });
+    });
+
+    it("flattens nested children", () => {
+      const store = new NodeStore();
+      const tree = elemNode("root", "div", {}, [
+        elemNode("child", "span", {}, [textNode("text", "hi")]),
+      ]);
+      store.setSnapshot(tree);
+
+      expect(store.getNode("text")).toMatchObject({ text: "hi" });
+    });
+
+    it("tracks the root id", () => {
+      const store = new NodeStore();
+      store.setSnapshot(textNode("root", "hi"));
+      expect(store.getRootId()).toBe("root");
+    });
+
+    it("removes stale nodes when they leave the tree", () => {
+      const store = new NodeStore();
+      store.setSnapshot(elemNode("root", "div", {}, [textNode("old", "gone")]));
+      store.setSnapshot(elemNode("root", "div", {}, []));
+
+      expect(store.getNode("old")).toBeNull();
+    });
+  });
+
+  describe("subscribe", () => {
+    it("notifies listener when a node changes", () => {
+      const store = new NodeStore();
+      store.setSnapshot(textNode("n1", "initial"));
+
+      const listener = vi.fn();
+      store.subscribe("n1", listener);
+
+      store.setSnapshot(textNode("n1", "updated"));
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not notify when node content is unchanged", () => {
+      const store = new NodeStore();
+      store.setSnapshot(textNode("n1", "same"));
+
+      const listener = vi.fn();
+      store.subscribe("n1", listener);
+
+      store.setSnapshot(textNode("n1", "same"));
+      expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("only notifies the subscriber for its specific node", () => {
+      const store = new NodeStore();
+      store.setSnapshot(elemNode("root", "div", {}, [textNode("n1", "a"), textNode("n2", "b")]));
+
+      const n1Listener = vi.fn();
+      const n2Listener = vi.fn();
+      store.subscribe("n1", n1Listener);
+      store.subscribe("n2", n2Listener);
+
+      store.setSnapshot(
+        elemNode("root", "div", {}, [textNode("n1", "changed"), textNode("n2", "b")]),
+      );
+
+      expect(n1Listener).toHaveBeenCalledTimes(1);
+      expect(n2Listener).not.toHaveBeenCalled();
+    });
+
+    it("does not notify parent when only a child's props change", () => {
+      const store = new NodeStore();
+      store.setSnapshot(elemNode("root", "div", {}, [textNode("child", "initial")]));
+
+      const rootListener = vi.fn();
+      store.subscribe("root", rootListener);
+
+      store.setSnapshot(elemNode("root", "div", {}, [textNode("child", "updated")]));
+
+      expect(rootListener).not.toHaveBeenCalled();
+    });
+
+    it("notifies parent when children list changes", () => {
+      const store = new NodeStore();
+      store.setSnapshot(elemNode("root", "div", {}, [textNode("n1", "a")]));
+
+      const rootListener = vi.fn();
+      store.subscribe("root", rootListener);
+
+      store.setSnapshot(elemNode("root", "div", {}, [textNode("n1", "a"), textNode("n2", "b")]));
+
+      expect(rootListener).toHaveBeenCalledTimes(1);
+    });
+
+    it("unsubscribes cleanly", () => {
+      const store = new NodeStore();
+      store.setSnapshot(textNode("n1", "a"));
+
+      const listener = vi.fn();
+      const unsub = store.subscribe("n1", listener);
+      unsub();
+
+      store.setSnapshot(textNode("n1", "b"));
+      expect(listener).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("subscribeRoot", () => {
+    it("notifies when root id changes", () => {
+      const store = new NodeStore();
+      store.setSnapshot(textNode("root1", "a"));
+
+      const listener = vi.fn();
+      store.subscribeRoot(listener);
+
+      store.setSnapshot(textNode("root2", "b"));
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not notify when root id stays the same", () => {
+      const store = new NodeStore();
+      store.setSnapshot(textNode("root", "a"));
+
+      const listener = vi.fn();
+      store.subscribeRoot(listener);
+
+      store.setSnapshot(textNode("root", "b"));
+      expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("unsubscribes cleanly", () => {
+      const store = new NodeStore();
+      store.setSnapshot(textNode("root1", "a"));
+
+      const listener = vi.fn();
+      const unsub = store.subscribeRoot(listener);
+      unsub();
+
+      store.setSnapshot(textNode("root2", "b"));
+      expect(listener).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("element node change detection", () => {
+    it("detects prop changes", () => {
+      const store = new NodeStore();
+      store.setSnapshot(elemNode("n", "div", { color: "red" }));
+
+      const listener = vi.fn();
+      store.subscribe("n", listener);
+
+      store.setSnapshot(elemNode("n", "div", { color: "blue" }));
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("detects type changes", () => {
+      const store = new NodeStore();
+      store.setSnapshot(elemNode("n", "div"));
+
+      const listener = vi.fn();
+      store.subscribe("n", listener);
+
+      store.setSnapshot(elemNode("n", "span"));
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("detects callback binding changes", () => {
+      const store = new NodeStore();
+
+      store.setSnapshot(elementWithCallback("tailorkitcallbackonselect"));
+      const listener = vi.fn();
+      store.subscribe("n", listener);
+
+      store.setSnapshot(elementWithCallback("tailorkitcallbackonchange"));
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/__tests__/primitives.test.tsx

@@ -0,0 +1,85 @@
+import { render, screen } from "@testing-library/react";
+import { createElement } from "react";
+import { describe, expect, it } from "vitest";
+import { buildThemeCss, PrimitiveThemeContext, primitives } from "../primitives";
+
+const theme = {
+  breakpoints: {
+    base: null,
+    lg: "1024px",
+    sm: "640px",
+  },
+  tokens: {
+    background: {
+      surface: "var(--background)",
+    },
+    borderColor: {
+      default: "var(--border)",
+    },
+    textColor: {
+      foreground: "var(--foreground)",
+      muted: "var(--muted-foreground)",
+    },
+    radius: {
+      md: "8px",
+    },
+    space: {
+      lg: "16px",
+      md: "8px",
+    },
+  },
+};
+
+describe("react primitives", () => {
+  it("builds screen-scoped theme variables", () => {
+    const css = buildThemeCss("screen-1", theme);
+    expect(css).toContain('[data-tailorkit-screen="screen-1"]');
+    expect(css).toContain("--tailorkit-border-solid: solid;");
+    expect(css).toContain("--tailorkit-space-md: 8px;");
+    expect(css).toContain("--tailorkit-background-surface: var(--background);");
+    expect(css).toContain("--tailorkit-textColor-muted: var(--muted-foreground);");
+  });
+
+  it("renders a scoped primitive style with responsive rules", () => {
+    render(
+      <PrimitiveThemeContext.Provider value={{ screenId: "screen-1", theme }}>
+        {primitives.Flex({
+          props: {
+            direction: { base: "column", lg: "row" },
+            border: "solid",
+            gap: "md",
+            padding: { base: "md", lg: "lg" },
+            textColor: { base: "muted", lg: "foreground" },
+          },
+          slots: { default: createElement("span", null, "Content") },
+        })}
+      </PrimitiveThemeContext.Provider>,
+    );
+
+    const content = screen.getByText("Content");
+    const node = content.parentElement;
+    const style = node?.querySelector("style");
+    expect(node?.tagName).toBe("DIV");
+    expect(style?.textContent).toContain("display: flex;");
+    expect(style?.textContent).toContain("border-style: var(--tailorkit-border-solid);");
+    expect(style?.textContent).toContain("border-width: 1px;");
+    expect(style?.textContent).toContain("padding: var(--tailorkit-space-md);");
+    expect(style?.textContent).toContain("color: var(--tailorkit-textColor-muted);");
+    expect(style?.textContent).toContain("@media (min-width: 1024px)");
+    expect(style?.textContent).toContain("color: var(--tailorkit-textColor-foreground);");
+    expect(style?.textContent).toContain("flex-direction: row;");
+  });
+
+  it("renders inline as a span", () => {
+    render(
+      <PrimitiveThemeContext.Provider value={{ screenId: "screen-2", theme }}>
+        {primitives.Inline({
+          props: { padding: "md" },
+          slots: { default: "Label" },
+        })}
+      </PrimitiveThemeContext.Provider>,
+    );
+
+    expect(screen.getByText("Label").tagName).toBe("SPAN");
+  });
+});