@godxjp/ui 6.0.0 → 6.0.1

package/src/test/__tests__/render-loop-guard.test.tsx

@@ -1,38 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
-import * as React from "react";
-import { RenderLoopGuard, withRenderLoopGuard } from "../render-loop-guard";
-
-function BadCounter() {
-  const [, bump] = React.useState(0);
-  bump(1);
-  return <div>loop</div>;
-}
-
-describe("RenderLoopGuard", () => {
-  it("passes for stable components", () => {
-    render(
-      <RenderLoopGuard maxRenders={10} label="Stable">
-        <p>ok</p>
-      </RenderLoopGuard>,
-    );
-    expect(screen.getByText("ok")).toBeInTheDocument();
-  });
-
-  it("throws when render count exceeds maxRenders", () => {
-    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => undefined);
-    expect(() =>
-      render(
-        <RenderLoopGuard maxRenders={5} label="BadCounter">
-          <BadCounter />
-        </RenderLoopGuard>,
-      ),
-    ).toThrow(/Possible infinite render loop|Too many re-renders/i);
-    errorSpy.mockRestore();
-  });
-
-  it("withRenderLoopGuard wraps StrictMode", () => {
-    render(withRenderLoopGuard(<span data-testid="child">child</span>, { maxRenders: 10 }));
-    expect(screen.getByTestId("child")).toBeInTheDocument();
-  });
-});

package/src/test/jest-dom.d.ts

@@ -1,4 +0,0 @@
-// Loads @testing-library/jest-dom's matcher augmentation onto vitest's `expect`
-// (toBeInTheDocument, toHaveAttribute, …) for type-checking. Picked up via the
-// tsconfig `include: ["src"]` glob. Self-contained — see docs/DEVELOPMENT.md §5.
-import "@testing-library/jest-dom/vitest";

package/src/test/render-loop-guard.tsx

@@ -1,50 +0,0 @@
-import * as React from "react";
-
-/**
- * Test-only guard that surfaces runaway re-render loops as a clear error instead
- * of a hung test. Counts its own renders; once they exceed `maxRenders` it throws,
- * so an effect/state loop in the tree under test fails fast and legibly.
- *
- * Self-contained (no external tooling dependency) — see docs/DEVELOPMENT.md §5.
- */
-const DEFAULT_MAX_RENDERS = 50;
-
-export type RenderLoopGuardProps = {
-  children: React.ReactNode;
-  /** Render budget before the guard throws. */
-  maxRenders?: number;
-  /** Optional label included in the error for easier triage. */
-  label?: string;
-};
-
-export function RenderLoopGuard({
-  children,
-  maxRenders = DEFAULT_MAX_RENDERS,
-  label,
-}: RenderLoopGuardProps): React.ReactElement {
-  const renders = React.useRef(0);
-  renders.current += 1;
-
-  if (renders.current > maxRenders) {
-    throw new Error(
-      `Possible infinite render loop${label ? ` in "${label}"` : ""}: ` +
-        `exceeded ${maxRenders} renders.`,
-    );
-  }
-
-  return <>{children}</>;
-}
-
-export type RenderLoopGuardOptions = Pick<RenderLoopGuardProps, "maxRenders" | "label">;
-
-/** Wrap a UI element in the guard (inside StrictMode, to surface loops sooner). */
-export function withRenderLoopGuard(
-  ui: React.ReactElement,
-  options?: RenderLoopGuardOptions,
-): React.ReactElement {
-  return (
-    <React.StrictMode>
-      <RenderLoopGuard {...options}>{ui}</RenderLoopGuard>
-    </React.StrictMode>
-  );
-}

package/src/test/render.tsx

@@ -1,29 +0,0 @@
-import * as React from "react";
-import { render, type RenderOptions, type RenderResult } from "@testing-library/react";
-import { MemoryRouter } from "react-router-dom";
-import { withRenderLoopGuard } from "./render-loop-guard";
-import { AppProvider } from "../app/app-provider";
-
-function AllProviders({ children }: { children: React.ReactNode }) {
-  return (
-    <AppProvider persist={false} defaultLocale="vi" fallbackLocale="en">
-      <MemoryRouter>{children}</MemoryRouter>
-    </AppProvider>
-  );
-}
-
-export type RenderWithUiOptions = Omit<RenderOptions, "wrapper"> & {
-  loopGuard?: boolean | { maxRenders?: number; label?: string };
-};
-
-export function renderWithUi(ui: React.ReactElement, options?: RenderWithUiOptions): RenderResult {
-  const { loopGuard = true, ...renderOptions } = options ?? {};
-  const guardedUi =
-    loopGuard === false ? ui : withRenderLoopGuard(ui, loopGuard === true ? undefined : loopGuard);
-
-  return render(guardedUi, { wrapper: AllProviders, ...renderOptions });
-}
-
-export * from "@testing-library/react";
-export { default as userEvent } from "@testing-library/user-event";
-export { RenderLoopGuard, withRenderLoopGuard } from "./render-loop-guard";

package/src/test/theme-globals.test.ts

@@ -1,77 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  DENSITY_CLASS,
-  DENSITY_GLOBALS,
-  FONT_SIZE_GLOBALS,
-  PRIMARY_COLOR_GLOBALS,
-  PRIMARY_COLOR_VARS,
-  themeGlobalsToClassName,
-  themeGlobalsToCssVars,
-} from "./theme-globals";
-
-describe("themeGlobalsToCssVars", () => {
-  describe("primaryColor presets", () => {
-    it.each(PRIMARY_COLOR_GLOBALS)(
-      "preset %s defines primary, ring, accent, foreground",
-      (preset) => {
-        const vars = PRIMARY_COLOR_VARS[preset];
-        expect(vars["--primary"]).toMatch(/^\d+ \d+% \d+%$/);
-        expect(vars["--ring"]).toMatch(/^\d+ \d+% \d+%$/);
-        expect(vars["--accent"]).toMatch(/^\d+ \d+% \d+%$/);
-        expect(vars["--accent-foreground"]).toMatch(/^\d+ \d+% \d+%$/);
-        expect(vars["--primary-foreground"]).toBe("0 0% 100%");
-      },
-    );
-
-    it("maps partner orange to Tailwind hsl aliases", () => {
-      expect(themeGlobalsToCssVars({ primaryColor: "partner" })).toMatchObject({
-        "--primary": "24 95% 53%",
-        "--accent": "24 95% 95%",
-        "--color-primary": "hsl(24 95% 53%)",
-        "--color-ring": "hsl(24 95% 53%)",
-        "--color-accent": "hsl(24 95% 95%)",
-        "--color-accent-foreground": "hsl(24 95% 28%)",
-      });
-    });
-
-    it("defaults to GodX navy when primaryColor omitted", () => {
-      const vars = themeGlobalsToCssVars({});
-      expect(vars["--color-primary"]).toBe("hsl(211 73% 15%)");
-      expect(vars["--color-ring"]).toBe("hsl(24 99% 46%)");
-      expect(vars["--accent"]).toBe("24 99% 95%");
-    });
-  });
-
-  describe("fontSize scale", () => {
-    it.each(FONT_SIZE_GLOBALS)("fontSize=%s produces stable output", (fontSize) => {
-      const vars = themeGlobalsToCssVars({ fontSize });
-      expect(vars).toBeTypeOf("object");
-    });
-
-    it("scales typography for sm and lg", () => {
-      expect(themeGlobalsToCssVars({ fontSize: "sm" })["--font-size-sm"]).toBe("0.8125rem");
-      expect(themeGlobalsToCssVars({ fontSize: "lg" })["--font-size-sm"]).toBe("0.9375rem");
-    });
-
-    it("default fontSize does not override --font-size-sm", () => {
-      expect(themeGlobalsToCssVars({ fontSize: "default" })).not.toHaveProperty("--font-size-sm");
-    });
-  });
-
-  it("merges fontSize + primaryColor in one object", () => {
-    const vars = themeGlobalsToCssVars({ fontSize: "lg", primaryColor: "crm" });
-    expect(vars["--font-size-base"]).toBe("1.0625rem");
-    expect(vars["--primary"]).toBe("262 83% 58%");
-    expect(vars["--color-primary"]).toBe("hsl(262 83% 58%)");
-  });
-});
-
-describe("themeGlobalsToClassName", () => {
-  it.each(DENSITY_GLOBALS)("density %s maps to ui-density-* class", (density) => {
-    expect(themeGlobalsToClassName({ density })).toBe(DENSITY_CLASS[density]);
-  });
-
-  it("defaults density to ui-density-default", () => {
-    expect(themeGlobalsToClassName({})).toBe(DENSITY_CLASS.default);
-  });
-});

package/src/test/theme-globals.ts

@@ -1,134 +0,0 @@
-import type { CSSProperties } from "react";
-import type { PageDensityProp } from "../props/vocabulary/layout.prop";
-
-/** Density toolbar → `ui-density-*` class (same as PageContainer density). */
-export const DENSITY_GLOBALS = [
-  "compact",
-  "default",
-  "comfortable",
-] as const satisfies readonly PageDensityProp[];
-
-export type DensityGlobal = (typeof DENSITY_GLOBALS)[number];
-
-export const DENSITY_CLASS: Record<DensityGlobal, string> = {
-  compact: "ui-density-compact",
-  default: "ui-density-default",
-  comfortable: "ui-density-comfortable",
-};
-
-export const DENSITY_CLASS_NAMES = Object.values(DENSITY_CLASS);
-
-/** Scales typography tokens — mirrors app `theme.css` overrides. */
-export const FONT_SIZE_GLOBALS = ["sm", "default", "lg"] as const;
-export type FontSizeGlobal = (typeof FONT_SIZE_GLOBALS)[number];
-
-const FONT_SIZE_VARS: Record<FontSizeGlobal, Record<string, string>> = {
-  sm: {
-    "--font-size-xs": "0.6875rem",
-    "--font-size-sm": "0.8125rem",
-    "--font-size-base": "0.9375rem",
-    "--font-size-lg": "1rem",
-    "--font-size-xl": "1.125rem",
-    "--font-size-2xl": "1.25rem",
-  },
-  default: {},
-  lg: {
-    "--font-size-xs": "0.8125rem",
-    "--font-size-sm": "0.9375rem",
-    "--font-size-base": "1.0625rem",
-    "--font-size-lg": "1.1875rem",
-    "--font-size-xl": "1.3125rem",
-    "--font-size-2xl": "1.625rem",
-  },
-};
-
-/** Brand primary presets — HSL components (no `hsl()` wrapper), like `theme.css`. */
-export const PRIMARY_COLOR_GLOBALS = ["brand", "crm", "logistics", "partner", "slate"] as const;
-export type PrimaryColorGlobal = (typeof PRIMARY_COLOR_GLOBALS)[number];
-
-export const PRIMARY_COLOR_LABELS: Record<PrimaryColorGlobal, string> = {
-  brand: "GodX Navy",
-  crm: "CRM Violet",
-  logistics: "Logistics Teal",
-  partner: "Partner Orange",
-  slate: "HQ Slate",
-};
-
-/** Primary, focus ring, and tinted accent mirror service theme.css overrides. */
-export const PRIMARY_COLOR_VARS: Record<PrimaryColorGlobal, Record<string, string>> = {
-  brand: {
-    "--primary": "211 73% 15%",
-    "--primary-foreground": "0 0% 100%",
-    "--ring": "24 99% 46%",
-    "--accent": "24 99% 95%",
-    "--accent-foreground": "24 99% 28%",
-  },
-  crm: {
-    "--primary": "262 83% 58%",
-    "--primary-foreground": "0 0% 100%",
-    "--ring": "262 83% 58%",
-    "--accent": "262 83% 96%",
-    "--accent-foreground": "262 83% 28%",
-  },
-  logistics: {
-    "--primary": "173 80% 36%",
-    "--primary-foreground": "0 0% 100%",
-    "--ring": "173 80% 36%",
-    "--accent": "173 80% 94%",
-    "--accent-foreground": "173 80% 22%",
-  },
-  partner: {
-    "--primary": "24 95% 53%",
-    "--primary-foreground": "0 0% 100%",
-    "--ring": "24 95% 53%",
-    "--accent": "24 95% 95%",
-    "--accent-foreground": "24 95% 28%",
-  },
-  slate: {
-    "--primary": "215 25% 27%",
-    "--primary-foreground": "0 0% 100%",
-    "--ring": "215 25% 27%",
-    "--accent": "215 25% 94%",
-    "--accent-foreground": "215 25% 20%",
-  },
-};
-
-export type ThemeGlobals = {
-  density?: DensityGlobal;
-  fontSize?: FontSizeGlobal;
-  primaryColor?: PrimaryColorGlobal;
-};
-
-function hslFromComponents(components: string): string {
-  return `hsl(${components})`;
-}
-
-/** CSS vars for :root — includes Tailwind @theme `--color-*` aliases. */
-export function themeGlobalsToCssVars(globals: ThemeGlobals): Record<string, string> {
-  const fontSize = globals.fontSize ?? "default";
-  const primaryColor = globals.primaryColor ?? "brand";
-  const primary = PRIMARY_COLOR_VARS[primaryColor];
-
-  return {
-    ...FONT_SIZE_VARS[fontSize],
-    "--primary": primary["--primary"],
-    "--primary-foreground": primary["--primary-foreground"],
-    "--ring": primary["--ring"],
-    "--accent": primary["--accent"],
-    "--accent-foreground": primary["--accent-foreground"],
-    "--color-primary": hslFromComponents(primary["--primary"]),
-    "--color-primary-foreground": hslFromComponents(primary["--primary-foreground"]),
-    "--color-ring": hslFromComponents(primary["--ring"]),
-    "--color-accent": hslFromComponents(primary["--accent"]),
-    "--color-accent-foreground": hslFromComponents(primary["--accent-foreground"]),
-  };
-}
-
-export function themeGlobalsToStyle(globals: ThemeGlobals): CSSProperties {
-  return themeGlobalsToCssVars(globals);
-}
-
-export function themeGlobalsToClassName(globals: ThemeGlobals): string {
-  const density = globals.density ?? "default";
-  return DENSITY_CLASS[density];
-}

package/src/test/theme-test-utils.tsx

@@ -1,67 +0,0 @@
-import * as React from "react";
-import { render, type RenderOptions, type RenderResult } from "@testing-library/react";
-import { MemoryRouter } from "react-router-dom";
-import { AppProvider } from "../app/app-provider";
-import type { AppProviderProp } from "../props/components/app.prop";
-import {
-  DENSITY_CLASS,
-  themeGlobalsToCssVars,
-  type FontSizeGlobal,
-  type PrimaryColorGlobal,
-} from "./theme-globals";
-import { densityClass } from "../lib/variants";
-import type { PageDensityProp } from "../props/vocabulary/layout.prop";
-
-export type ThemeTestOptions = {
-  density?: PageDensityProp;
-  fontSize?: FontSizeGlobal;
-  primaryColor?: PrimaryColorGlobal;
-  app?: Partial<AppProviderProp>;
-};
-
-type RenderWithThemeOptions = Omit<RenderOptions, "wrapper"> &
-  ThemeTestOptions & {
-    initialEntries?: string[];
-  };
-
-/** Renders UI under density + brand tokens — mirrors preview theme globals. */
-export function ThemeTestRoot({
-  children,
-  density = "default",
-  fontSize = "default",
-  primaryColor = "brand",
-  app,
-}: React.PropsWithChildren<ThemeTestOptions>) {
-  const style = themeGlobalsToCssVars({ density, fontSize, primaryColor }) as React.CSSProperties;
-  return (
-    <div className={densityClass[density]} style={style}>
-      <AppProvider persist={false} defaultLocale="vi" fallbackLocale="en" {...app}>
-        <MemoryRouter>{children}</MemoryRouter>
-      </AppProvider>
-    </div>
-  );
-}
-
-export function renderWithTheme(
-  ui: React.ReactElement,
-  options?: RenderWithThemeOptions,
-): RenderResult {
-  const {
-    density = "default",
-    fontSize = "default",
-    primaryColor = "brand",
-    app,
-    ...renderOptions
-  } = options ?? {};
-
-  return render(ui, {
-    wrapper: ({ children }) => (
-      <ThemeTestRoot density={density} fontSize={fontSize} primaryColor={primaryColor} app={app}>
-        {children}
-      </ThemeTestRoot>
-    ),
-    ...renderOptions,
-  });
-}
-
-export { DENSITY_CLASS, densityClass };