@spelyco/react-native 1.0.0-alpha.1 → 1.0.0

package/src/provider/toNavigationTheme.ts

@@ -0,0 +1,41 @@
+import { DefaultTheme, type Theme } from "@react-navigation/native";
+import type { SpelycoComputedColorScheme, SpelycoTheme } from "@spelyco/react-lib";
+
+/**
+ * Adapts a `SpelycoTheme` into a `@react-navigation/native` `Theme` so the
+ * drawer chrome, screen background, headers, dividers and route transitions
+ * pick up Spelyco's palette automatically.
+ *
+ * Colour mapping (10-shade tuples):
+ *   primary     → resolved primary hex (from `theme.primary`)
+ *   background  → neutral[0] / neutral[9]
+ *   card        → neutral[1] / neutral[8]      (headers, tab/drawer surface)
+ *   text        → neutral[9] / neutral[0]
+ *   border      → neutral[2] / neutral[7]
+ *   notification→ red[6]     / red[4]          (badge/alert colour)
+ *
+ * Fonts pass through React Navigation's defaults — Phase 1 will wire them to
+ * `theme.fontFamily`/`fontFamilyMono` once a typography contract lands.
+ */
+export function toNavigationTheme(theme: SpelycoTheme, scheme: SpelycoComputedColorScheme): Theme {
+  const primaryShade =
+    typeof theme.primaryShade === "number" ? theme.primaryShade : theme.primaryShade[scheme];
+  const primary = theme.colors[theme.primaryColor]?.[primaryShade] ?? DefaultTheme.colors.primary;
+
+  const neutral = theme.colors.neutral;
+  const red = theme.colors.red;
+  const isDark = scheme === "dark";
+
+  return {
+    dark: isDark,
+    colors: {
+      primary,
+      background: neutral?.[isDark ? 9 : 0] ?? DefaultTheme.colors.background,
+      card: neutral?.[isDark ? 8 : 1] ?? DefaultTheme.colors.card,
+      text: neutral?.[isDark ? 0 : 9] ?? DefaultTheme.colors.text,
+      border: neutral?.[isDark ? 7 : 2] ?? DefaultTheme.colors.border,
+      notification: red?.[isDark ? 4 : 6] ?? DefaultTheme.colors.notification,
+    },
+    fonts: DefaultTheme.fonts,
+  };
+}

package/src/provider/toUnistylesTheme.ts

@@ -0,0 +1,58 @@
+import type {
+  SpelycoColors,
+  SpelycoComputedColorScheme,
+  SpelycoFontSizes,
+  SpelycoLineHeights,
+  SpelycoRadius,
+  SpelycoShadows,
+  SpelycoSpacing,
+  SpelycoTheme,
+} from "@spelyco/react-lib";
+
+/**
+ * The shape consumed by Unistyles' `StyleSheet.configure({ themes })`. Each
+ * scheme gets its own copy with `colorScheme` and a precomputed `primary`
+ * color so component styles can do `theme.primary` without recomputing shades.
+ */
+export interface SpelycoUnistylesTheme {
+  colorScheme: SpelycoComputedColorScheme;
+  colors: SpelycoColors;
+  spacing: SpelycoSpacing;
+  radius: SpelycoRadius;
+  fontSizes: SpelycoFontSizes;
+  lineHeights: SpelycoLineHeights;
+  shadows: SpelycoShadows;
+  primaryColor: string;
+  /** Shade index resolved for this color scheme. */
+  primaryShade: number;
+  /** `colors[primaryColor][primaryShade]` — the actual hex used by components. */
+  primary: string;
+  fontFamily: string;
+  fontFamilyMono: string;
+}
+
+export function toUnistylesTheme(
+  theme: SpelycoTheme,
+  scheme: SpelycoComputedColorScheme
+): SpelycoUnistylesTheme {
+  const primaryShade =
+    typeof theme.primaryShade === "number" ? theme.primaryShade : theme.primaryShade[scheme];
+
+  const primaryTuple = theme.colors[theme.primaryColor];
+  const primary = primaryTuple?.[primaryShade] ?? primaryTuple?.[6] ?? "#000000";
+
+  return {
+    colorScheme: scheme,
+    colors: theme.colors,
+    spacing: theme.spacing,
+    radius: theme.radius,
+    fontSizes: theme.fontSizes,
+    lineHeights: theme.lineHeights,
+    shadows: theme.shadows,
+    primaryColor: theme.primaryColor,
+    primaryShade,
+    primary,
+    fontFamily: theme.fontFamily,
+    fontFamilyMono: theme.fontFamilyMono,
+  };
+}

package/src/store/colorScheme.test.ts

@@ -0,0 +1,105 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const appearanceListeners: Array<
+  (event: { colorScheme: "light" | "dark" | null }) => void
+> = [];
+
+vi.mock("react-native", () => ({
+  Appearance: {
+    getColorScheme: () => "light",
+    addChangeListener: (
+      cb: (event: { colorScheme: "light" | "dark" | null }) => void,
+    ) => {
+      appearanceListeners.push(cb);
+      return {
+        remove: () => {
+          const i = appearanceListeners.indexOf(cb);
+          if (i >= 0) appearanceListeners.splice(i, 1);
+        },
+      };
+    },
+  },
+}));
+
+vi.mock("@react-native-async-storage/async-storage", () => {
+  const store = new Map<string, string>();
+  return {
+    default: {
+      getItem: vi.fn(async (key: string) => store.get(key) ?? null),
+      setItem: vi.fn(async (key: string, value: string) => {
+        store.set(key, value);
+      }),
+      removeItem: vi.fn(async (key: string) => {
+        store.delete(key);
+      }),
+    },
+  };
+});
+
+const {
+  useColorSchemeStore,
+  setupColorSchemeListener,
+  teardownColorSchemeListener,
+} = await import("./colorScheme");
+
+const resetStore = () => {
+  useColorSchemeStore.setState({
+    colorScheme: "auto",
+    systemColorScheme: "light",
+  });
+  teardownColorSchemeListener();
+};
+
+describe("colorScheme store", () => {
+  beforeEach(() => {
+    resetStore();
+  });
+
+  it("starts with 'auto' and resolves system scheme to 'light' by default", () => {
+    const state = useColorSchemeStore.getState();
+    expect(state.colorScheme).toBe("auto");
+    expect(state.systemColorScheme).toBe("light");
+  });
+
+  it("setColorScheme updates the user preference", () => {
+    useColorSchemeStore.getState().setColorScheme("dark");
+    expect(useColorSchemeStore.getState().colorScheme).toBe("dark");
+  });
+
+  it("toggleColorScheme flips dark <-> light explicitly", () => {
+    useColorSchemeStore.getState().setColorScheme("dark");
+    useColorSchemeStore.getState().toggleColorScheme();
+    expect(useColorSchemeStore.getState().colorScheme).toBe("light");
+    useColorSchemeStore.getState().toggleColorScheme();
+    expect(useColorSchemeStore.getState().colorScheme).toBe("dark");
+  });
+
+  it("toggleColorScheme from 'auto' uses systemColorScheme as the basis", () => {
+    useColorSchemeStore.setState({
+      colorScheme: "auto",
+      systemColorScheme: "light",
+    });
+    useColorSchemeStore.getState().toggleColorScheme();
+    expect(useColorSchemeStore.getState().colorScheme).toBe("dark");
+  });
+
+  it("clearColorScheme resets back to 'auto'", () => {
+    useColorSchemeStore.getState().setColorScheme("dark");
+    useColorSchemeStore.getState().clearColorScheme();
+    expect(useColorSchemeStore.getState().colorScheme).toBe("auto");
+  });
+
+  it("setupColorSchemeListener is idempotent", () => {
+    setupColorSchemeListener();
+    setupColorSchemeListener();
+    expect(appearanceListeners.length).toBe(1);
+  });
+
+  it("system change events update systemColorScheme", () => {
+    setupColorSchemeListener();
+    appearanceListeners[0]?.({ colorScheme: "dark" });
+    expect(useColorSchemeStore.getState().systemColorScheme).toBe("dark");
+    appearanceListeners[0]?.({ colorScheme: null });
+    expect(useColorSchemeStore.getState().systemColorScheme).toBe("light");
+  });
+});

package/src/store/colorScheme.ts

@@ -0,0 +1,63 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import type { SpelycoColorScheme, SpelycoComputedColorScheme } from "@spelyco/react-lib";
+import { Appearance } from "react-native";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+interface ColorSchemeState {
+  /** User preference: 'light' | 'dark' | 'auto'. Persisted. */
+  colorScheme: SpelycoColorScheme;
+  /** Current OS color scheme. Tracked via Appearance, not persisted. */
+  systemColorScheme: SpelycoComputedColorScheme;
+  setColorScheme: (scheme: SpelycoColorScheme) => void;
+  toggleColorScheme: () => void;
+  clearColorScheme: () => void;
+}
+
+const STORAGE_KEY = "@spelyco/color-scheme";
+
+const resolveSystemScheme = (): SpelycoComputedColorScheme => {
+  const scheme = Appearance.getColorScheme();
+  return scheme === "dark" ? "dark" : "light";
+};
+
+export const useColorSchemeStore = create<ColorSchemeState>()(
+  persist(
+    (set, get) => ({
+      colorScheme: "auto",
+      systemColorScheme: resolveSystemScheme(),
+      setColorScheme: (scheme) => set({ colorScheme: scheme }),
+      toggleColorScheme: () => {
+        const { colorScheme, systemColorScheme } = get();
+        const current = colorScheme === "auto" ? systemColorScheme : colorScheme;
+        set({ colorScheme: current === "light" ? "dark" : "light" });
+      },
+      clearColorScheme: () => set({ colorScheme: "auto" }),
+    }),
+    {
+      name: STORAGE_KEY,
+      storage: createJSONStorage(() => AsyncStorage),
+      partialize: (state) => ({ colorScheme: state.colorScheme }),
+    }
+  )
+);
+
+let listenerSubscription: { remove: () => void } | null = null;
+
+/**
+ * Subscribes the store to OS color scheme changes. Idempotent — calling more
+ * than once is a no-op. Should be invoked once from `SpelycoProvider`.
+ */
+export const setupColorSchemeListener = () => {
+  if (listenerSubscription) return;
+  listenerSubscription = Appearance.addChangeListener(({ colorScheme }) => {
+    useColorSchemeStore.setState({
+      systemColorScheme: colorScheme === "dark" ? "dark" : "light",
+    });
+  });
+};
+
+export const teardownColorSchemeListener = () => {
+  listenerSubscription?.remove();
+  listenerSubscription = null;
+};

package/src/store/index.ts

@@ -0,0 +1,5 @@
+export {
+  setupColorSchemeListener,
+  teardownColorSchemeListener,
+  useColorSchemeStore,
+} from "./colorScheme";

package/src/types.ts

@@ -1,9 +1,10 @@
-import type { AppBreakpoints, AppTheme } from "./themes";
+import type { SpelycoBreakpoints } from "@spelyco/react-lib";
+import type { SpelycoUnistylesTheme } from "./provider/toUnistylesTheme";
 
 declare module "react-native-unistyles" {
   export interface UnistylesThemes {
-    light: AppTheme;
-    dark: AppTheme;
+    light: SpelycoUnistylesTheme;
+    dark: SpelycoUnistylesTheme;
   }
-  export interface UnistylesBreakpoints extends AppBreakpoints {}
+  export interface UnistylesBreakpoints extends SpelycoBreakpoints {}
 }

package/dist/configure.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=configure.d.ts.map

package/dist/configure.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"configure.d.ts","sourceRoot":"","sources":["../src/configure.ts"],"names":[],"mappings":""}

package/dist/themes/dark.d.ts

@@ -1,3 +0,0 @@
-import type { AppTheme } from "./light";
-export declare const darkTheme: AppTheme;
-//# sourceMappingURL=dark.d.ts.map

package/dist/themes/dark.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dark.d.ts","sourceRoot":"","sources":["../../src/themes/dark.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,eAAO,MAAM,SAAS,EAAE,QA0BvB,CAAC"}

package/dist/themes/index.d.ts

@@ -1,12 +0,0 @@
-export { darkTheme } from "./dark";
-export type { AppTheme } from "./light";
-export { lightTheme } from "./light";
-export declare const breakpoints: {
-    readonly xs: 0;
-    readonly sm: 360;
-    readonly md: 768;
-    readonly lg: 1024;
-    readonly xl: 1280;
-};
-export type AppBreakpoints = typeof breakpoints;
-//# sourceMappingURL=index.d.ts.map

package/dist/themes/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,OAAO,WAAW,CAAC"}

package/dist/themes/light.d.ts

@@ -1,29 +0,0 @@
-export interface AppTheme {
-    colors: {
-        primary: string;
-        onPrimary: string;
-        secondary: string;
-        onSecondary: string;
-        ghost: string;
-        onGhost: string;
-        background: string;
-        text: string;
-        border: string;
-        disabled: string;
-    };
-    spacing: {
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-    };
-    radii: {
-        sm: number;
-        md: number;
-        lg: number;
-        pill: number;
-    };
-}
-export declare const lightTheme: AppTheme;
-//# sourceMappingURL=light.d.ts.map

package/dist/themes/light.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../src/themes/light.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,MAAM,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAED,eAAO,MAAM,UAAU,EAAE,QA0BxB,CAAC"}

package/dist/unistyles.d.ts

@@ -1,8 +0,0 @@
-import "./types";
-export type UnistylesInitialTheme = "light" | "dark";
-export interface ConfigureUnistylesOptions {
-    initialTheme?: UnistylesInitialTheme;
-    adaptiveThemes?: boolean;
-}
-export declare const configureUnistyles: ({ initialTheme, adaptiveThemes, }?: ConfigureUnistylesOptions) => void;
-//# sourceMappingURL=unistyles.d.ts.map

package/dist/unistyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"unistyles.d.ts","sourceRoot":"","sources":["../src/unistyles.ts"],"names":[],"mappings":"AAGA,OAAO,SAAS,CAAC;AAEjB,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,yBAAyB;IACxC,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAOD,eAAO,MAAM,kBAAkB,GAAI,oCAGhC,yBAA8B,SAMhC,CAAC"}

package/src/configure.ts

@@ -1,3 +0,0 @@
-import { configureUnistyles } from "./unistyles";
-
-configureUnistyles();

package/src/themes/dark.ts

@@ -1,29 +0,0 @@
-import type { AppTheme } from "./light";
-
-export const darkTheme: AppTheme = {
-  colors: {
-    primary: "#818cf8",
-    onPrimary: "#0b1020",
-    secondary: "#1f2937",
-    onSecondary: "#f9fafb",
-    ghost: "transparent",
-    onGhost: "#f9fafb",
-    background: "#0b1020",
-    text: "#f9fafb",
-    border: "#374151",
-    disabled: "#4b5563",
-  },
-  spacing: {
-    xs: 4,
-    sm: 8,
-    md: 12,
-    lg: 16,
-    xl: 24,
-  },
-  radii: {
-    sm: 4,
-    md: 8,
-    lg: 12,
-    pill: 999,
-  },
-};

package/src/themes/index.ts

@@ -1,13 +0,0 @@
-export { darkTheme } from "./dark";
-export type { AppTheme } from "./light";
-export { lightTheme } from "./light";
-
-export const breakpoints = {
-  xs: 0,
-  sm: 360,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-} as const;
-
-export type AppBreakpoints = typeof breakpoints;

package/src/themes/light.ts

@@ -1,55 +0,0 @@
-export interface AppTheme {
-  colors: {
-    primary: string;
-    onPrimary: string;
-    secondary: string;
-    onSecondary: string;
-    ghost: string;
-    onGhost: string;
-    background: string;
-    text: string;
-    border: string;
-    disabled: string;
-  };
-  spacing: {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-  };
-  radii: {
-    sm: number;
-    md: number;
-    lg: number;
-    pill: number;
-  };
-}
-
-export const lightTheme: AppTheme = {
-  colors: {
-    primary: "#6366f1",
-    onPrimary: "#ffffff",
-    secondary: "#e5e7eb",
-    onSecondary: "#111827",
-    ghost: "transparent",
-    onGhost: "#111827",
-    background: "#ffffff",
-    text: "#111827",
-    border: "#d1d5db",
-    disabled: "#9ca3af",
-  },
-  spacing: {
-    xs: 4,
-    sm: 8,
-    md: 12,
-    lg: 16,
-    xl: 24,
-  },
-  radii: {
-    sm: 4,
-    md: 8,
-    lg: 12,
-    pill: 999,
-  },
-};

package/src/unistyles.ts

@@ -1,27 +0,0 @@
-import { StyleSheet } from "react-native-unistyles";
-import { breakpoints, darkTheme, lightTheme } from "./themes";
-
-import "./types";
-
-export type UnistylesInitialTheme = "light" | "dark";
-
-export interface ConfigureUnistylesOptions {
-  initialTheme?: UnistylesInitialTheme;
-  adaptiveThemes?: boolean;
-}
-
-const themes = {
-  light: lightTheme,
-  dark: darkTheme,
-};
-
-export const configureUnistyles = ({
-  initialTheme = "light",
-  adaptiveThemes = true,
-}: ConfigureUnistylesOptions = {}) => {
-  StyleSheet.configure({
-    themes,
-    breakpoints,
-    settings: adaptiveThemes ? { adaptiveThemes: true } : { initialTheme },
-  });
-};