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

package/src/components/ActionIcon/ActionIcon.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("react-native", () => ({
+  Pressable: "Pressable",
+}));
+
+vi.mock("react-native-unistyles", () => {
+  type StylesObject = Record<string, unknown>;
+  return {
+    StyleSheet: {
+      create: (stylesFn: ((theme: unknown) => StylesObject) | StylesObject) => {
+        const stubTheme = {
+          colorScheme: "light",
+          primary: "#6366f1",
+          colors: {
+            neutral: ["#fafafa", "#f4f4f5", "", "", "", "", "", "", "#27272a", "#18181b"],
+          },
+          radius: { xs: 2, sm: 4, md: 8, lg: 12, xl: 16, pill: 9999 },
+        };
+        const styles = typeof stylesFn === "function" ? stylesFn(stubTheme) : stylesFn;
+        return Object.assign({}, styles, { useVariants: () => undefined });
+      },
+    },
+  };
+});
+
+vi.mock("@spelyco/react-lib", () => ({
+  createComponent: <TProps,>(config: {
+    name: string;
+    defaultProps?: Partial<TProps>;
+    render: (props: TProps) => unknown;
+  }) => {
+    const Component = (props: TProps) => config.render(props);
+    (Component as { displayName?: string }).displayName = config.name;
+    (
+      Component as { extend?: (o: unknown) => unknown }
+    ).extend = (override) => override;
+    return Component;
+  },
+}));
+
+const { ActionIcon } = await import("./ActionIcon");
+
+describe("ActionIcon", () => {
+  it("is a function (factory-wrapped component)", () => {
+    expect(typeof ActionIcon).toBe("function");
+  });
+
+  it("has displayName 'ActionIcon'", () => {
+    expect((ActionIcon as { displayName?: string }).displayName).toBe("ActionIcon");
+  });
+
+  it("exposes .extend() that returns the override config unchanged", () => {
+    const override = { defaultProps: { variant: "filled" as const } };
+    expect(
+      (ActionIcon as { extend: (o: unknown) => unknown }).extend(override),
+    ).toBe(override);
+  });
+});

package/src/components/ActionIcon/ActionIcon.tsx

@@ -0,0 +1,54 @@
+import { createComponent } from "@spelyco/react-lib";
+import { Pressable, type PressableProps } from "react-native";
+import { StyleSheet, type UnistylesVariants } from "react-native-unistyles";
+
+type ActionIconVariants = UnistylesVariants<typeof styles>;
+
+export type ActionIconProps = PressableProps & ActionIconVariants;
+
+export const ActionIcon = createComponent<ActionIconProps>({
+  name: "ActionIcon",
+  defaultProps: { variant: "subtle", size: "md" },
+  render: ({ variant = "subtle", size = "md", disabled, children, style, ...rest }) => {
+    styles.useVariants({ variant, size, disabled: disabled ?? false });
+    return (
+      <Pressable
+        accessibilityRole="button"
+        disabled={disabled}
+        style={(state) => [styles.root, typeof style === "function" ? style(state) : style]}
+        {...rest}
+      >
+        {children}
+      </Pressable>
+    );
+  },
+});
+
+const styles = StyleSheet.create((theme) => ({
+  root: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md,
+    variants: {
+      variant: {
+        subtle: {
+          backgroundColor: theme.colors.neutral[theme.colorScheme === "dark" ? 8 : 1],
+        },
+        filled: {
+          backgroundColor: theme.primary,
+        },
+        transparent: {
+          backgroundColor: "transparent",
+        },
+      },
+      size: {
+        sm: { width: 32, height: 32 },
+        md: { width: 40, height: 40 },
+        lg: { width: 48, height: 48 },
+      },
+      disabled: {
+        true: { opacity: 0.5 },
+      },
+    },
+  },
+}));

package/src/components/Box/Box.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("react-native", () => ({
+  View: "View",
+}));
+
+vi.mock("@spelyco/react-lib", () => ({
+  createComponent: <TProps,>(config: {
+    name: string;
+    defaultProps?: Partial<TProps>;
+    render: (props: TProps) => unknown;
+  }) => {
+    const Component = (props: TProps) => config.render(props);
+    (Component as { displayName?: string }).displayName = config.name;
+    (
+      Component as { extend?: (o: unknown) => unknown }
+    ).extend = (override) => override;
+    return Component;
+  },
+  useSpelycoTheme: () => ({
+    spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
+  }),
+}));
+
+const { Box } = await import("./Box");
+
+describe("Box", () => {
+  it("is a function (factory-wrapped component)", () => {
+    expect(typeof Box).toBe("function");
+  });
+
+  it("has displayName 'Box'", () => {
+    expect((Box as { displayName?: string }).displayName).toBe("Box");
+  });
+
+  it("exposes .extend() that returns the override config unchanged", () => {
+    const override = { defaultProps: { bg: "#fff" } };
+    expect(
+      (Box as { extend: (o: unknown) => unknown }).extend(override),
+    ).toBe(override);
+  });
+});

package/src/components/Box/Box.tsx

@@ -0,0 +1,48 @@
+import {
+  createComponent,
+  type SpelycoSize,
+  type SpelycoSpacing,
+  useSpelycoTheme,
+} from "@spelyco/react-lib";
+import { View, type ViewProps } from "react-native";
+
+type SpacingToken = SpelycoSize | number;
+
+export interface BoxProps extends ViewProps {
+  /** padding shorthand */
+  p?: SpacingToken;
+  px?: SpacingToken;
+  py?: SpacingToken;
+  /** margin shorthand */
+  m?: SpacingToken;
+  mx?: SpacingToken;
+  my?: SpacingToken;
+  /** Flex gap between children */
+  gap?: SpacingToken;
+  /** Background color (hex). Theme palette tokens land in a later phase. */
+  bg?: string;
+}
+
+const space = (token: SpacingToken | undefined, spacing: SpelycoSpacing): number | undefined => {
+  if (token === undefined) return undefined;
+  if (typeof token === "number") return token;
+  return spacing[token];
+};
+
+export const Box = createComponent<BoxProps>({
+  name: "Box",
+  render: ({ p, px, py, m, mx, my, gap, bg, style, ...rest }) => {
+    const theme = useSpelycoTheme();
+    const dynamicStyle = {
+      padding: space(p, theme.spacing),
+      paddingHorizontal: space(px, theme.spacing),
+      paddingVertical: space(py, theme.spacing),
+      margin: space(m, theme.spacing),
+      marginHorizontal: space(mx, theme.spacing),
+      marginVertical: space(my, theme.spacing),
+      gap: space(gap, theme.spacing),
+      backgroundColor: bg,
+    };
+    return <View {...rest} style={[dynamicStyle, style]} />;
+  },
+});

package/src/components/Box/index.ts

@@ -0,0 +1 @@
+export { Box, type BoxProps } from "./Box";

package/src/components/Button/Button.test.ts

@@ -10,22 +10,20 @@ vi.mock("react-native-unistyles", () => {
   return {
     StyleSheet: {
       create: (stylesFn: ((theme: unknown) => StylesObject) | StylesObject) => {
-        const styles =
-          typeof stylesFn === "function"
-            ? stylesFn({
-                colors: {
-                  primary: "#000",
-                  onPrimary: "#fff",
-                  secondary: "#000",
-                  onSecondary: "#fff",
-                  ghost: "transparent",
-                  onGhost: "#000",
-                  border: "#000",
-                },
-                spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
-                radii: { sm: 4, md: 8, lg: 12, pill: 999 },
-              })
-            : stylesFn;
+        const stubTheme = {
+          colorScheme: "light",
+          primary: "#6366f1",
+          primaryColor: "brand",
+          primaryShade: 6,
+          colors: {
+            brand: ["#eef2ff", "", "", "", "", "#6366f1", "#4f46e5", "", "", ""],
+            neutral: ["#fafafa", "#f4f4f5", "#e4e4e7", "#d4d4d8", "#a1a1aa", "#71717a", "#52525b", "#3f3f46", "#27272a", "#18181b"],
+          },
+          spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
+          radius: { xs: 2, sm: 4, md: 8, lg: 12, xl: 16, pill: 9999 },
+          fontSizes: { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 },
+        };
+        const styles = typeof stylesFn === "function" ? stylesFn(stubTheme) : stylesFn;
         return Object.assign({}, styles, { useVariants: () => undefined });
       },
     },
@@ -35,11 +33,16 @@ vi.mock("react-native-unistyles", () => {
 const { Button } = await import("./Button");
 
 describe("Button", () => {
-  it("is exported as a function", () => {
+  it("is a function (factory-wrapped component)", () => {
     expect(typeof Button).toBe("function");
   });
 
-  it("has a name of Button", () => {
-    expect(Button.name).toBe("Button");
+  it("has displayName 'Button'", () => {
+    expect(Button.displayName).toBe("Button");
+  });
+
+  it("exposes .extend() that returns the override config unchanged", () => {
+    const override = { defaultProps: { variant: "ghost" as const } };
+    expect(Button.extend(override)).toBe(override);
   });
 });

package/src/components/Button/Button.tsx

@@ -1,3 +1,4 @@
+import { createComponent } from "@spelyco/react-lib";
 import type { PressableProps } from "react-native";
 import { Pressable, Text } from "react-native";
 import { StyleSheet, type UnistylesVariants } from "react-native-unistyles";
@@ -9,45 +10,49 @@ export type ButtonProps = Omit<PressableProps, "children"> &
     label: string;
   };
 
-export const Button = ({
-  label,
-  variant = "primary",
-  size = "md",
-  disabled,
-  style,
-  ...rest
-}: ButtonProps) => {
-  styles.useVariants({ variant, size, disabled: disabled ?? false });
+export const Button = createComponent<ButtonProps>({
+  name: "Button",
+  defaultProps: {
+    variant: "primary",
+    size: "md",
+  },
+  render: ({ label, variant, size, disabled, style, ...rest }) => {
+    styles.useVariants({
+      variant: variant ?? "primary",
+      size: size ?? "md",
+      disabled: disabled ?? false,
+    });
 
-  return (
-    <Pressable
-      accessibilityRole="button"
-      disabled={disabled}
-      style={(state) => [styles.root, typeof style === "function" ? style(state) : style]}
-      {...rest}
-    >
-      <Text style={styles.label}>{label}</Text>
-    </Pressable>
-  );
-};
+    return (
+      <Pressable
+        accessibilityRole="button"
+        disabled={disabled}
+        style={(state) => [styles.root, typeof style === "function" ? style(state) : style]}
+        {...rest}
+      >
+        <Text style={styles.label}>{label}</Text>
+      </Pressable>
+    );
+  },
+});
 
 const styles = StyleSheet.create((theme) => ({
   root: {
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radii.md,
+    borderRadius: theme.radius.md,
     variants: {
       variant: {
         primary: {
-          backgroundColor: theme.colors.primary,
+          backgroundColor: theme.primary,
         },
         secondary: {
-          backgroundColor: theme.colors.secondary,
+          backgroundColor: theme.colors.neutral[theme.colorScheme === "dark" ? 7 : 1],
         },
         ghost: {
-          backgroundColor: theme.colors.ghost,
+          backgroundColor: "transparent",
           borderWidth: 1,
-          borderColor: theme.colors.border,
+          borderColor: theme.colors.neutral[theme.colorScheme === "dark" ? 6 : 3],
         },
       },
       size: {
@@ -75,14 +80,14 @@ const styles = StyleSheet.create((theme) => ({
     fontWeight: "600",
     variants: {
       variant: {
-        primary: { color: theme.colors.onPrimary },
-        secondary: { color: theme.colors.onSecondary },
-        ghost: { color: theme.colors.onGhost },
+        primary: { color: "#ffffff" },
+        secondary: { color: theme.colors.neutral[theme.colorScheme === "dark" ? 0 : 9] },
+        ghost: { color: theme.colors.neutral[theme.colorScheme === "dark" ? 0 : 9] },
       },
       size: {
-        sm: { fontSize: 14 },
-        md: { fontSize: 16 },
-        lg: { fontSize: 18 },
+        sm: { fontSize: theme.fontSizes.sm },
+        md: { fontSize: theme.fontSizes.md },
+        lg: { fontSize: theme.fontSizes.lg },
       },
     },
   },

package/src/components/Text/Text.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("react-native", () => ({
+  Text: "Text",
+}));
+
+vi.mock("react-native-unistyles", () => {
+  type StylesObject = Record<string, unknown>;
+  return {
+    StyleSheet: {
+      create: (stylesFn: ((theme: unknown) => StylesObject) | StylesObject) => {
+        const stubTheme = {
+          colorScheme: "light",
+          colors: {
+            neutral: ["#fafafa", "", "", "", "", "", "", "", "", "#18181b"],
+          },
+          fontSizes: { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 },
+          lineHeights: { xs: 1.4, sm: 1.45, md: 1.55, lg: 1.6, xl: 1.65 },
+        };
+        const styles = typeof stylesFn === "function" ? stylesFn(stubTheme) : stylesFn;
+        return Object.assign({}, styles, { useVariants: () => undefined });
+      },
+    },
+  };
+});
+
+vi.mock("@spelyco/react-lib", () => ({
+  createComponent: <TProps,>(config: {
+    name: string;
+    defaultProps?: Partial<TProps>;
+    render: (props: TProps) => unknown;
+  }) => {
+    const Component = (props: TProps) => config.render(props);
+    (Component as { displayName?: string }).displayName = config.name;
+    (
+      Component as { extend?: (o: unknown) => unknown }
+    ).extend = (override) => override;
+    return Component;
+  },
+}));
+
+const { Text } = await import("./Text");
+
+describe("Text", () => {
+  it("is a function (factory-wrapped component)", () => {
+    expect(typeof Text).toBe("function");
+  });
+
+  it("has displayName 'Text'", () => {
+    expect((Text as { displayName?: string }).displayName).toBe("Text");
+  });
+
+  it("exposes .extend() that returns the override config unchanged", () => {
+    const override = { defaultProps: { weight: "bold" as const } };
+    expect(
+      (Text as { extend: (o: unknown) => unknown }).extend(override),
+    ).toBe(override);
+  });
+});

package/src/components/Text/Text.tsx

@@ -0,0 +1,61 @@
+import { createComponent, type SpelycoSize } from "@spelyco/react-lib";
+import { Text as RNText, type TextProps as RNTextProps } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+
+export type TextWeight = "normal" | "medium" | "bold";
+
+export interface TextProps extends RNTextProps {
+  size?: SpelycoSize;
+  weight?: TextWeight;
+  /** Direct hex color. When omitted, auto-resolves to the neutral text color
+   *  for the active color scheme. */
+  color?: string;
+}
+
+export const Text = createComponent<TextProps>({
+  name: "Text",
+  defaultProps: { size: "md", weight: "normal" },
+  render: ({ size = "md", weight = "normal", color, style, children, ...rest }) => {
+    styles.useVariants({ size, weight });
+    return (
+      <RNText {...rest} style={[styles.text, color ? { color } : null, style]}>
+        {children}
+      </RNText>
+    );
+  },
+});
+
+const styles = StyleSheet.create((theme) => ({
+  text: {
+    color: theme.colors.neutral[theme.colorScheme === "dark" ? 0 : 9],
+    variants: {
+      size: {
+        xs: {
+          fontSize: theme.fontSizes.xs,
+          lineHeight: theme.fontSizes.xs * theme.lineHeights.xs,
+        },
+        sm: {
+          fontSize: theme.fontSizes.sm,
+          lineHeight: theme.fontSizes.sm * theme.lineHeights.sm,
+        },
+        md: {
+          fontSize: theme.fontSizes.md,
+          lineHeight: theme.fontSizes.md * theme.lineHeights.md,
+        },
+        lg: {
+          fontSize: theme.fontSizes.lg,
+          lineHeight: theme.fontSizes.lg * theme.lineHeights.lg,
+        },
+        xl: {
+          fontSize: theme.fontSizes.xl,
+          lineHeight: theme.fontSizes.xl * theme.lineHeights.xl,
+        },
+      },
+      weight: {
+        normal: { fontWeight: "400" },
+        medium: { fontWeight: "500" },
+        bold: { fontWeight: "700" },
+      },
+    },
+  },
+}));

package/src/components/Text/index.ts

@@ -0,0 +1 @@
+export { Text, type TextProps, type TextWeight } from "./Text";

package/src/components/index.ts

@@ -1 +1,3 @@
-export { Button } from "./Button";
+export { Box, type BoxProps } from "./Box";
+export { Button, type ButtonProps } from "./Button";
+export { Text, type TextProps, type TextWeight } from "./Text";

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export type { UseSpelycoColorSchemeReturn } from "./useSpelycoColorScheme";
+export { useSpelycoColorScheme } from "./useSpelycoColorScheme";

package/src/hooks/useSpelycoColorScheme.ts

@@ -0,0 +1,33 @@
+import type { SpelycoColorScheme, SpelycoComputedColorScheme } from "@spelyco/react-lib";
+import { useColorSchemeStore } from "../store/colorScheme";
+
+export interface UseSpelycoColorSchemeReturn {
+  /** User preference: 'light' | 'dark' | 'auto'. */
+  colorScheme: SpelycoColorScheme;
+  /** Resolved scheme actually applied: 'light' | 'dark'. */
+  computedColorScheme: SpelycoComputedColorScheme;
+  setColorScheme: (scheme: SpelycoColorScheme) => void;
+  /** Cycles light ↔ dark. If currently 'auto', toggles from the OS value. */
+  toggleColorScheme: () => void;
+  /** Resets back to 'auto' (follow OS). */
+  clearColorScheme: () => void;
+}
+
+export const useSpelycoColorScheme = (): UseSpelycoColorSchemeReturn => {
+  const colorScheme = useColorSchemeStore((s) => s.colorScheme);
+  const systemColorScheme = useColorSchemeStore((s) => s.systemColorScheme);
+  const setColorScheme = useColorSchemeStore((s) => s.setColorScheme);
+  const toggleColorScheme = useColorSchemeStore((s) => s.toggleColorScheme);
+  const clearColorScheme = useColorSchemeStore((s) => s.clearColorScheme);
+
+  const computedColorScheme: SpelycoComputedColorScheme =
+    colorScheme === "auto" ? systemColorScheme : colorScheme;
+
+  return {
+    colorScheme,
+    computedColorScheme,
+    setColorScheme,
+    toggleColorScheme,
+    clearColorScheme,
+  };
+};

package/src/index.ts

@@ -1,13 +1,14 @@
+// Boot Unistyles BEFORE any component file is evaluated. The barrel below
+// imports `Button`, `Box`, `Text` which all call `StyleSheet.create` at
+// module-load time; without this side-effect import they would race
+// `StyleSheet.configure` and Unistyles would warn.
+import "./bootUnistyles";
+
+// Re-export the shared lib so consumers only need `@spelyco/react-native`.
+// Pulls in `useSpelycoTheme`, `resolveTheme`, `DEFAULT_THEME`, factory helpers,
+// and all theme types.
+export * from "@spelyco/react-lib";
 export * from "./components";
-export {
-  type AppBreakpoints,
-  type AppTheme,
-  breakpoints,
-  darkTheme,
-  lightTheme,
-} from "./themes";
-export {
-  type ConfigureUnistylesOptions,
-  configureUnistyles,
-  type UnistylesInitialTheme,
-} from "./unistyles";
+export * from "./hooks";
+export * from "./provider";
+export * from "./store";

package/src/provider/SpelycoProvider.tsx

@@ -0,0 +1,102 @@
+import { ThemeProvider } from "@react-navigation/native";
+import {
+  resolveTheme,
+  type SpelycoColorScheme,
+  SpelycoThemeContext,
+  type SpelycoThemeOverride,
+} from "@spelyco/react-lib";
+import { setBackgroundColorAsync } from "expo-system-ui";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
+import { StatusBar } from "react-native";
+import { UnistylesRuntime } from "react-native-unistyles";
+import {
+  setupColorSchemeListener,
+  teardownColorSchemeListener,
+  useColorSchemeStore,
+} from "../store/colorScheme";
+import { toNavigationTheme } from "./toNavigationTheme";
+import { toUnistylesTheme } from "./toUnistylesTheme";
+
+export interface SpelycoProviderProps {
+  /** Partial theme override merged on top of `DEFAULT_THEME`. */
+  theme?: SpelycoThemeOverride;
+  /** User-facing default if no persisted preference exists. */
+  defaultColorScheme?: SpelycoColorScheme;
+  children: ReactNode;
+}
+
+export function SpelycoProvider({
+  theme: themeOverride,
+  defaultColorScheme = "auto",
+  children,
+}: SpelycoProviderProps) {
+  const resolvedTheme = useMemo(() => resolveTheme(themeOverride), [themeOverride]);
+
+  const colorScheme = useColorSchemeStore((s) => s.colorScheme);
+  const systemColorScheme = useColorSchemeStore((s) => s.systemColorScheme);
+  const setColorScheme = useColorSchemeStore((s) => s.setColorScheme);
+
+  const computedColorScheme = colorScheme === "auto" ? systemColorScheme : colorScheme;
+
+  // Honour `defaultColorScheme` on first mount when no preference is persisted.
+  useState(() => {
+    if (colorScheme === "auto" && defaultColorScheme !== "auto") {
+      setColorScheme(defaultColorScheme);
+    }
+    return null;
+  });
+
+  // Push the user-supplied theme override into Unistyles. Boot already ran
+  // with DEFAULT_THEME in `bootUnistyles.ts`; here we replace both schemes if
+  // an override exists so components see the merged tokens.
+  useEffect(() => {
+    if (!themeOverride) return;
+    const nextLight = toUnistylesTheme(resolvedTheme, "light");
+    const nextDark = toUnistylesTheme(resolvedTheme, "dark");
+    UnistylesRuntime.updateTheme("light", () => nextLight);
+    UnistylesRuntime.updateTheme("dark", () => nextDark);
+  }, [themeOverride, resolvedTheme]);
+
+  useEffect(() => {
+    setupColorSchemeListener();
+    return () => teardownColorSchemeListener();
+  }, []);
+
+  useEffect(() => {
+    UnistylesRuntime.setTheme(computedColorScheme);
+  }, [computedColorScheme]);
+
+  // System bars: status bar + Android root background. Runs every time the
+  // computed scheme flips so the OS chrome stays in sync.
+  const systemBars = resolvedTheme.systemBars?.[computedColorScheme];
+  useEffect(() => {
+    if (systemBars?.statusBarBackgroundColor) {
+      setBackgroundColorAsync(systemBars.statusBarBackgroundColor).catch(() => {});
+    }
+  }, [systemBars?.statusBarBackgroundColor]);
+
+  const statusBarStyle = (() => {
+    const style = systemBars?.statusBarStyle ?? "auto";
+    if (style === "light") return "light-content" as const;
+    if (style === "dark") return "dark-content" as const;
+    return "default" as const;
+  })();
+
+  const navigationTheme = useMemo(
+    () => toNavigationTheme(resolvedTheme, computedColorScheme),
+    [resolvedTheme, computedColorScheme]
+  );
+
+  return (
+    <SpelycoThemeContext.Provider value={resolvedTheme}>
+      <ThemeProvider value={navigationTheme}>
+        <StatusBar
+          barStyle={statusBarStyle}
+          backgroundColor={systemBars?.statusBarBackgroundColor}
+          animated
+        />
+        {children}
+      </ThemeProvider>
+    </SpelycoThemeContext.Provider>
+  );
+}

package/src/provider/index.ts

@@ -0,0 +1,3 @@
+export { SpelycoProvider, type SpelycoProviderProps } from "./SpelycoProvider";
+export { toNavigationTheme } from "./toNavigationTheme";
+export { type SpelycoUnistylesTheme, toUnistylesTheme } from "./toUnistylesTheme";