@spatika/react 1.0.0

package/src/primitives/smoke.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Label } from "./Label";
+import { Separator } from "./Separator";
+import { Skeleton } from "./Skeleton";
+import { Spinner } from "./Spinner";
+import { Kbd } from "./Kbd";
+
+describe("primitive smoke", () => {
+  it("renders Label", () => {
+    render(<Label htmlFor="x">Name</Label>);
+    expect(screen.getByText("Name")).toBeInTheDocument();
+  });
+
+  it("renders Separator", () => {
+    const { container } = render(<Separator />);
+    expect(container.querySelector('[data-slot="separator-root"]')).toBeTruthy();
+  });
+
+  it("renders Skeleton", () => {
+    const { container } = render(<Skeleton className="h-4 w-20" />);
+    expect(container.querySelector('[data-slot="skeleton"]')).toBeTruthy();
+  });
+
+  it("renders Spinner", () => {
+    const { container } = render(<Spinner />);
+    expect(container.querySelector('[data-slot="spinner"]')).toBeTruthy();
+  });
+
+  it("renders Kbd", () => {
+    render(<Kbd>⌘K</Kbd>);
+    expect(screen.getByText("⌘K")).toBeInTheDocument();
+  });
+});

package/src/test/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

package/src/theme/SpatikaThemeProvider.test.tsx

@@ -0,0 +1,82 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { SPATIKA_THEME_STORAGE_KEY } from "../lib/themes";
+import { SpatikaThemeProvider, useSpatikaTheme } from "./SpatikaThemeProvider";
+
+function ThemeProbe() {
+  const { theme, setTheme, themes } = useSpatikaTheme();
+  return (
+    <div>
+      <span data-testid="theme">{theme}</span>
+      <span data-testid="count">{themes.length}</span>
+      <button type="button" onClick={() => setTheme("neelam")}>
+        Neelam
+      </button>
+    </div>
+  );
+}
+
+function resetDocumentTheme() {
+  document.documentElement.className = "";
+  document.documentElement.removeAttribute("data-spk-theme");
+  document.documentElement.style.colorScheme = "";
+  localStorage.removeItem(SPATIKA_THEME_STORAGE_KEY);
+  localStorage.removeItem("spk-theme-test");
+}
+
+describe("SpatikaThemeProvider", () => {
+  afterEach(() => {
+    cleanup();
+    resetDocumentTheme();
+  });
+
+  it("provides theme context and updates on setTheme", async () => {
+    const user = userEvent.setup();
+    render(
+      <SpatikaThemeProvider defaultTheme="mukta" syncDocument={false}>
+        <ThemeProbe />
+      </SpatikaThemeProvider>,
+    );
+
+    expect(screen.getByTestId("theme")).toHaveTextContent("mukta");
+    expect(screen.getByTestId("count")).toHaveTextContent("4");
+
+    await user.click(screen.getByRole("button", { name: "Neelam" }));
+    expect(screen.getByTestId("theme")).toHaveTextContent("neelam");
+  });
+
+  it("applies the theme to document before paint", () => {
+    render(
+      <SpatikaThemeProvider defaultTheme="neelam">
+        <ThemeProbe />
+      </SpatikaThemeProvider>,
+    );
+
+    expect(document.documentElement.classList.contains("neelam")).toBe(true);
+    expect(document.documentElement.getAttribute("data-spk-theme")).toBe("neelam");
+  });
+
+  it("restores and persists theme via storageKey", async () => {
+    const user = userEvent.setup();
+    localStorage.setItem("spk-theme-test", "sandhya");
+
+    render(
+      <SpatikaThemeProvider defaultTheme="mukta" storageKey="spk-theme-test">
+        <ThemeProbe />
+      </SpatikaThemeProvider>,
+    );
+
+    expect(screen.getByTestId("theme")).toHaveTextContent("sandhya");
+    expect(document.documentElement.classList.contains("sandhya")).toBe(true);
+
+    await user.click(screen.getByRole("button", { name: "Neelam" }));
+    expect(localStorage.getItem("spk-theme-test")).toBe("neelam");
+  });
+
+  it("throws outside provider", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(() => render(<ThemeProbe />)).toThrow(/SpatikaThemeProvider/);
+    spy.mockRestore();
+  });
+});

package/src/theme/SpatikaThemeProvider.tsx

@@ -0,0 +1,112 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  applyTheme,
+  DEFAULT_THEME,
+  readStoredTheme,
+  THEME_IDS,
+  writeStoredTheme,
+  type ThemeId,
+} from "../lib/themes";
+
+export type SpatikaThemeContextValue = {
+  theme: ThemeId;
+  setTheme: (theme: ThemeId) => void;
+  themes: readonly ThemeId[];
+};
+
+const SpatikaThemeContext = createContext<SpatikaThemeContextValue | null>(null);
+
+export type SpatikaThemeProviderProps = {
+  children: ReactNode;
+  /** Controlled theme */
+  theme?: ThemeId;
+  /** Uncontrolled initial theme. Ignored when `storageKey` already has a value. */
+  defaultTheme?: ThemeId;
+  /**
+   * Persist the selected theme in `localStorage` under this key.
+   * Pass `false` (default) to keep the theme in memory only.
+   */
+  storageKey?: string | false;
+  onThemeChange?: (theme: ThemeId) => void;
+  /**
+   * When true (default), also sync theme classes onto `document.documentElement`
+   * so CSS variables apply globally (typical SPA / Storybook usage).
+   */
+  syncDocument?: boolean;
+  /** Optional element to theme instead of (or in addition to) document */
+  target?: HTMLElement | null;
+  className?: string;
+};
+
+/**
+ * MUI-style theme provider for Spatika.
+ * Wraps the app (or a subtree) and applies theme classes / data attributes.
+ */
+export function SpatikaThemeProvider({
+  children,
+  theme: themeProp,
+  defaultTheme = DEFAULT_THEME,
+  storageKey = false,
+  onThemeChange,
+  syncDocument = true,
+  target,
+  className,
+}: SpatikaThemeProviderProps) {
+  const [uncontrolled, setUncontrolled] = useState<ThemeId>(
+    () => readStoredTheme(storageKey) ?? defaultTheme,
+  );
+  const theme = themeProp ?? uncontrolled;
+
+  const setTheme = useCallback(
+    (next: ThemeId) => {
+      if (themeProp === undefined) setUncontrolled(next);
+      onThemeChange?.(next);
+    },
+    [onThemeChange, themeProp],
+  );
+
+  useLayoutEffect(() => {
+    if (syncDocument) applyTheme(theme);
+    if (target) applyTheme(theme, target);
+    writeStoredTheme(storageKey, theme);
+  }, [theme, syncDocument, target, storageKey]);
+
+  const value = useMemo(
+    () =>
+      ({
+        theme,
+        setTheme,
+        themes: THEME_IDS,
+      }) satisfies SpatikaThemeContextValue,
+    [theme, setTheme],
+  );
+
+  return (
+    <SpatikaThemeContext.Provider value={value}>
+      <div
+        className={className}
+        data-spk-theme={theme}
+        data-slot="spatika-theme-provider"
+      >
+        {children}
+      </div>
+    </SpatikaThemeContext.Provider>
+  );
+}
+
+/** Access current theme and setter from `SpatikaThemeProvider`. */
+export function useSpatikaTheme(): SpatikaThemeContextValue {
+  const ctx = useContext(SpatikaThemeContext);
+  if (!ctx) {
+    throw new Error("useSpatikaTheme must be used within <SpatikaThemeProvider>");
+  }
+  return ctx;
+}