@multiplatform.one/theme 6.0.0

package/src/theme/intent.spec.tsx

@@ -0,0 +1,276 @@
+import type React from "react";
+import { type ReactNode, createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+
+// Mock Tamagui's <Theme> so we can inspect the chosen theme name
+vi.mock("tamagui", () => ({
+  Theme: ({ name, children }: { name: string; children: ReactNode }) =>
+    createElement("div", { "data-tamagui-theme": name }, children),
+}));
+
+import type { ThemeName } from "@tamagui/web";
+import { Intent } from "./Intent";
+import { PresetContext, type PresetContextValue } from "./PresetContext";
+import type { Preset as PresetType } from "./preset.types";
+import { defaultKnobs } from "./knobs";
+import type { ResolvedKnobs } from "./recipes";
+import { useResolvedKnobs, useIntentContext } from "./useResolvedKnobs";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makePreset(intents: PresetType["intents"] = {}): PresetType {
+  return {
+    theme: "light" as ThemeName,
+    knobs: defaultKnobs,
+    intents,
+    tints: [],
+  };
+}
+
+function wrapWithPreset(preset: PresetType, children: ReactNode): ReactNode {
+  const ctx: PresetContextValue = { preset };
+  return createElement(PresetContext.Provider, { value: ctx }, children);
+}
+
+function renderToHtml(node: ReactNode): string {
+  return renderToString(node as React.ReactElement);
+}
+
+/** Return an array of all `data-tamagui-theme` values in rendered HTML. */
+function collectThemes(html: string): string[] {
+  return Array.from(html.matchAll(/data-tamagui-theme="([^"]+)"/g), (m) => m[1]);
+}
+
+/** Create a probe component that captures resolved knobs from useResolvedKnobs. */
+function createRecipesCapture(options?: Parameters<typeof useResolvedKnobs>[0]) {
+  let captured: ResolvedKnobs | undefined;
+  function Probe() {
+    captured = useResolvedKnobs(options);
+    return null;
+  }
+  return {
+    Probe,
+    get result(): ResolvedKnobs {
+      if (!captured) throw new Error("Probe was not rendered");
+      return captured;
+    },
+  };
+}
+
+/** Create a probe that captures the intent context value. */
+function createIntentCapture() {
+  let captured: string | null | undefined;
+  function Probe() {
+    captured = useIntentContext();
+    return createElement("span", null, "probe");
+  }
+  return {
+    Probe,
+    get result(): string | null {
+      if (captured === undefined) throw new Error("Probe was not rendered");
+      return captured;
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Intent context tests
+// ---------------------------------------------------------------------------
+
+describe("Intent", () => {
+  it("wraps children in <Theme name={name}> by default", () => {
+    const html = renderToHtml(
+      wrapWithPreset(
+        makePreset(),
+        createElement(Intent, { name: "error" }, createElement("span", null, "hello")),
+      ),
+    );
+    const themes = collectThemes(html);
+    expect(themes).toContain("error");
+    expect(html).toContain("hello");
+  });
+
+  it("uses explicit theme prop over intent name for Tamagui <Theme>", () => {
+    const html = renderToHtml(
+      wrapWithPreset(
+        makePreset(),
+        createElement(
+          Intent,
+          { name: "error", theme: "red" as ThemeName },
+          createElement("span", null, "hello"),
+        ),
+      ),
+    );
+    const themes = collectThemes(html);
+    expect(themes).toContain("red");
+    expect(themes).not.toContain("error");
+  });
+
+  it("provides intent name via IntentContext (useIntentContext)", () => {
+    const capture = createIntentCapture();
+
+    renderToHtml(
+      wrapWithPreset(
+        makePreset(),
+        createElement(Intent, { name: "error" }, createElement(capture.Probe)),
+      ),
+    );
+    expect(capture.result).toBe("error");
+  });
+
+  it("nesting: innermost <Intent> wins for context", () => {
+    const capture = createIntentCapture();
+
+    renderToHtml(
+      wrapWithPreset(
+        makePreset(),
+        createElement(
+          Intent,
+          { name: "error" },
+          createElement(Intent, { name: "success" }, createElement(capture.Probe)),
+        ),
+      ),
+    );
+    expect(capture.result).toBe("success");
+  });
+
+  it("nesting: innermost <Intent> produces both Tamagui themes in DOM order", () => {
+    const html = renderToHtml(
+      wrapWithPreset(
+        makePreset(),
+        createElement(
+          Intent,
+          { name: "error" },
+          createElement(Intent, { name: "success" }, createElement("span", null, "inner")),
+        ),
+      ),
+    );
+    const themes = collectThemes(html);
+    expect(themes).toEqual(["error", "success"]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// useResolvedKnobs + Intent integration
+// ---------------------------------------------------------------------------
+
+describe("useResolvedKnobs with Intent", () => {
+  it("resolves default intent overrides from context", () => {
+    const capture = createRecipesCapture();
+
+    renderToHtml(
+      wrapWithPreset(
+        makePreset(),
+        createElement(Intent, { name: "error" }, createElement(capture.Probe)),
+      ),
+    );
+
+    // "error" defaultIntent has textAccent: "high" → passed through
+    expect(capture.result.knobProps.textAccent).toBe("high");
+  });
+
+  it("resolves intent via explicit option overriding context", () => {
+    const capture = createRecipesCapture({ intent: "warning" });
+
+    renderToHtml(
+      wrapWithPreset(
+        makePreset(),
+        createElement(Intent, { name: "error" }, createElement(capture.Probe)),
+      ),
+    );
+
+    // "warning" has textAccent: "high" → passed through
+    expect(capture.result.knobProps.textAccent).toBe("high");
+  });
+
+  it("resolves component-specific intent overrides (Button + error)", () => {
+    const capture = createRecipesCapture({ component: "Button" });
+
+    renderToHtml(
+      wrapWithPreset(
+        makePreset(),
+        createElement(Intent, { name: "error" }, createElement(capture.Probe)),
+      ),
+    );
+
+    // "error" → Button: { elevation: "small" } → resolved to "$1"
+    expect(capture.result.knobProps.elevation).toBe("$1");
+  });
+
+  it("resolves component-specific intent overrides via explicit option", () => {
+    const capture = createRecipesCapture({ intent: "error", component: "Button" });
+
+    renderToHtml(wrapWithPreset(makePreset(), createElement(capture.Probe)));
+
+    // "error" → Button: { elevation: "small" } → resolved to "$1"
+    expect(capture.result.knobProps.elevation).toBe("$1");
+  });
+
+  it("preset intent overrides take precedence over defaultIntents", () => {
+    const presetWithIntents = makePreset({
+      error: {
+        textAccent: "low",
+        Button: { elevation: "large" },
+      },
+    });
+
+    const capture = createRecipesCapture({ intent: "error", component: "Button" });
+
+    renderToHtml(wrapWithPreset(presetWithIntents, createElement(capture.Probe)));
+
+    // Preset says textAccent: "low" → passed through
+    expect(capture.result.knobProps.textAccent).toBe("low");
+
+    // Preset says Button.elevation: "large" → resolved to "$4"
+    expect(capture.result.knobProps.elevation).toBe("$4");
+  });
+
+  it("falls back to defaultIntents when preset has no intent overrides", () => {
+    const capture = createRecipesCapture({ intent: "accent", component: "Button" });
+
+    renderToHtml(wrapWithPreset(makePreset(), createElement(capture.Probe)));
+
+    // Component override: Button.fillStyle = "filled" overrides the intent-level "outlined"
+    expect(capture.result.knobProps.outlined).toBe(false);
+  });
+
+  it("accent intent without component uses outlined fill from defaultIntents", () => {
+    const capture = createRecipesCapture({ intent: "accent" });
+
+    renderToHtml(wrapWithPreset(makePreset(), createElement(capture.Probe)));
+
+    // accent defaultIntent: fillStyle: "outlined"
+    expect(capture.result.knobProps.outlined).toBe(true);
+  });
+
+  it("nesting intents: innermost wins for recipe resolution", () => {
+    const capture = createRecipesCapture({ component: "Button" });
+
+    renderToHtml(
+      wrapWithPreset(
+        makePreset(),
+        createElement(
+          Intent,
+          { name: "error" },
+          createElement(Intent, { name: "success" }, createElement(capture.Probe)),
+        ),
+      ),
+    );
+
+    // innermost is "success" → Button: { elevation: "none" } → undefined
+    expect(capture.result.knobProps.elevation).toBeUndefined();
+  });
+
+  it("no intent context and no option → base knobs only", () => {
+    const capture = createRecipesCapture();
+
+    renderToHtml(wrapWithPreset(makePreset(), createElement(capture.Probe)));
+
+    // Default knobs: elevation "none" → resolved to undefined
+    expect(capture.result.knobProps.elevation).toBeUndefined();
+    expect(capture.result.knobProps.textAccent).toBe("high");
+  });
+});

package/src/theme/intents.ts

@@ -0,0 +1,22 @@
+import type { IntentOverride } from "./preset.types";
+
+export const defaultIntents: Record<string, IntentOverride> = {
+  accent: {
+    fillStyle: "outlined",
+    textAccent: "high",
+    Button: { fillStyle: "filled" },
+  },
+  error: {
+    textAccent: "high",
+    Button: { elevation: "small" },
+    Input: { borderWidth: "medium" },
+  },
+  warning: {
+    textAccent: "high",
+    Input: { borderWidth: "small" },
+  },
+  success: {
+    textAccent: "high",
+    Button: { elevation: "none" },
+  },
+};

package/src/theme/knobs.ts

@@ -0,0 +1,147 @@
+// ── Structure ──────────────────────────────────────────────
+
+export const FillStyle = { Filled: "filled", Outlined: "outlined" } as const;
+export type FillStyle = (typeof FillStyle)[keyof typeof FillStyle];
+
+export const BorderRadius = {
+  None: "none",
+  Small: "small",
+  Medium: "medium",
+  Large: "large",
+  Full: "full",
+} as const;
+export type BorderRadius = (typeof BorderRadius)[keyof typeof BorderRadius];
+
+export const BorderWidth = {
+  None: "none",
+  Small: "small",
+  Medium: "medium",
+  Large: "large",
+} as const;
+export type BorderWidth = (typeof BorderWidth)[keyof typeof BorderWidth];
+
+export const Elevation = {
+  None: "none",
+  Small: "small",
+  Medium: "medium",
+  Large: "large",
+} as const;
+export type Elevation = (typeof Elevation)[keyof typeof Elevation];
+
+export const Space = {
+  Small: "small",
+  Medium: "medium",
+  Large: "large",
+} as const;
+export type Space = (typeof Space)[keyof typeof Space];
+
+export const Size = {
+  Small: "small",
+  Medium: "medium",
+  Large: "large",
+} as const;
+export type Size = (typeof Size)[keyof typeof Size];
+
+// ── Emphasis ───────────────────────────────────────────────
+
+export const TextAccent = {
+  Low: "low",
+  Medium: "medium",
+  High: "high",
+} as const;
+export type TextAccent = (typeof TextAccent)[keyof typeof TextAccent];
+
+// ── Typography ─────────────────────────────────────────────
+
+export const FontCategory = {
+  SansSerif: "sans-serif",
+  Serif: "serif",
+  Mono: "mono",
+  Slab: "slab",
+  Rounded: "rounded",
+  Condensed: "condensed",
+  Cursive: "cursive",
+  Handwriting: "handwriting",
+  Pixel: "pixel",
+  Blackletter: "blackletter",
+  Geometric: "geometric",
+} as const;
+export type FontCategory = (typeof FontCategory)[keyof typeof FontCategory];
+
+export const HeadingFont = FontCategory;
+export type HeadingFont = FontCategory;
+
+export const BodyFont = FontCategory;
+export type BodyFont = FontCategory;
+
+export const FontWeight = {
+  Regular: "regular",
+  Bold: "bold",
+} as const;
+export type FontWeight = (typeof FontWeight)[keyof typeof FontWeight];
+
+// ── Animation ──────────────────────────────────────────────
+
+import type { AnimationName } from "./animations/index";
+
+export type Animation = "none" | AnimationName;
+
+// ── Interaction state overrides ────────────────────────────
+// Structural knobs that can vary per interaction state.
+
+export interface StateKnobs {
+  fillStyle?: FillStyle;
+  borderRadius?: BorderRadius;
+  borderWidth?: BorderWidth;
+  elevation?: Elevation;
+  space?: Space;
+  textAccent?: TextAccent;
+  headingFont?: HeadingFont;
+  bodyFont?: BodyFont;
+  fontWeight?: FontWeight;
+}
+
+export const interactionStates = ["hover", "press", "focus", "focusVisible"] as const;
+export type InteractionState = (typeof interactionStates)[number];
+
+// ── Knobs interface ────────────────────────────────────────
+
+export interface Knobs {
+  fillStyle: FillStyle;
+  borderRadius: BorderRadius;
+  borderWidth: BorderWidth;
+  elevation: Elevation;
+  space: Space;
+  size: Size;
+  textAccent: TextAccent;
+  headingFont: HeadingFont;
+  bodyFont: BodyFont;
+  fontWeight: FontWeight;
+  animation: Animation;
+  hover: StateKnobs;
+  press: StateKnobs;
+  focus: StateKnobs;
+  focusVisible: StateKnobs;
+}
+
+// ── Default knobs ──────────────────────────────────────────
+
+export const emptyStateKnobs: StateKnobs = {};
+
+export const defaultKnobs: Knobs = {
+  fillStyle: "filled",
+  borderRadius: "medium",
+  borderWidth: "small",
+  elevation: "none",
+  space: "medium",
+  size: "medium",
+  textAccent: "high",
+  headingFont: "sans-serif",
+  bodyFont: "sans-serif",
+  fontWeight: "regular",
+  animation: "quick",
+  hover: emptyStateKnobs,
+  press: emptyStateKnobs,
+  focus: emptyStateKnobs,
+  focusVisible: emptyStateKnobs,
+};

package/src/theme/pokemonScreen.spec.ts

@@ -0,0 +1,109 @@
+/**
+ * Task Group 5.1 — Pokemon screen source-code analysis tests.
+ *
+ * These tests verify that the refactored Pokemon files follow the
+ * Tamagui-native Card pattern and contain zero hardcoded styling values.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const root = path.resolve(__dirname, "../../../..");
+
+function readSource(relativePath: string): string {
+  return fs.readFileSync(path.resolve(root, relativePath), "utf-8");
+}
+
+/**
+ * Returns all non-comment, non-import lines from a source file.
+ * Strips single-line comments and block comments for cleaner matching.
+ */
+function codeLines(source: string): string[] {
+  return source
+    .replace(/\/\*[\s\S]*?\*\//g, "") // strip block comments
+    .split("\n")
+    .map((l) => l.replace(/\/\/.*$/, "").trim()) // strip line comments
+    .filter((l) => l.length > 0 && !l.startsWith("import ") && !l.startsWith("export type"));
+}
+
+// ---------------------------------------------------------------------------
+// Pokemon source files under test
+// ---------------------------------------------------------------------------
+
+const pokemonFiles = [
+  "features/pokemon/screen.tsx",
+  "features/pokemon/detail.tsx",
+  "features/pokemon/components/PokemonCard.tsx",
+  "features/pokemon/components/MoveList.tsx",
+  "features/pokemon/components/AbilityList.tsx",
+  "features/pokemon/components/TypeList.tsx",
+  "features/pokemon/components/PokemonStats.tsx",
+  "public/frappe-ui/src/FrappeImageView.tsx",
+];
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("Pokemon screen — Card rendering with native Tamagui props", () => {
+  it("screen.tsx uses Card with elevation, borderWidth, and Card.Background/Card.Footer", () => {
+    const src = readSource("features/pokemon/screen.tsx");
+    expect(src).toContain("<Card");
+    expect(src).toMatch(/elevation/);
+    expect(src).toMatch(/borderWidth/);
+    expect(src).toContain("Card.Background");
+    expect(src).toContain("Card.Footer");
+  });
+
+  it("screen.tsx uses ToggleGroup for view switcher instead of manual Button toggles", () => {
+    const src = readSource("features/pokemon/screen.tsx");
+    expect(src).toContain("ToggleGroup");
+  });
+
+  it("FrappeImageView.tsx uses Card with elevation, borderWidth, and sizeToken", () => {
+    const src = readSource("public/frappe-ui/src/FrappeImageView.tsx");
+    expect(src).toContain("<Card");
+    expect(src).toMatch(/elevation/);
+    expect(src).toMatch(/borderWidth/);
+    expect(src).toContain("sizeToken");
+  });
+});
+
+describe("Pokemon screen — no hardcoded styling values", () => {
+  for (const filePath of pokemonFiles) {
+    it(`${filePath} has no hardcoded borderRadius, padding, gap, or elevation overrides`, () => {
+      const src = readSource(filePath);
+      const lines = codeLines(src);
+
+      for (const line of lines) {
+        // Skip lines that are prop definitions on Card/etc (elevate, bordered are fine)
+        // Skip lines that are Tamagui token references like "$3", "$4"
+        // We're looking for raw numeric values assigned to styling props
+
+        // No hardcoded borderRadius with raw numbers (e.g. borderRadius={12})
+        expect(line).not.toMatch(/borderRadius[=:{]\s*\d+(?!\s*\})/);
+
+        // No manual elevation={number} (should use `elevate` boolean instead)
+        // Allow elevation on Progress.Indicator or as Tamagui token strings
+        if (!line.includes("Progress")) {
+          expect(line).not.toMatch(/elevation[=:{]\s*\d+/);
+        }
+
+        // No spreading of borderRadiusProps (Card handles via size)
+        expect(line).not.toMatch(/\.\.\.themeProps\.borderRadiusProps/);
+
+        // No spreading of elevationProps (Card handles via elevate)
+        expect(line).not.toMatch(/\.\.\.themeProps\.elevationProps/);
+      }
+    });
+  }
+
+  it("screen.tsx uses sizeToken on Card components", () => {
+    const src = readSource("features/pokemon/screen.tsx");
+    expect(src).toContain("sizeToken");
+  });
+});