@spelyco/react-native 0.0.1 → 1.0.0

package/package.json

@@ -1,23 +1,34 @@
 {
   "name": "@spelyco/react-native",
-  "version": "0.0.1",
-  "description": "React Native UI components for Spelyco",
-  "keywords": ["react-native", "ui", "components", "spelyco"],
+  "version": "1.0.0",
+  "description": "React Native UI components for Spelyco, powered by Unistyles 3",
+  "keywords": [
+    "react-native",
+    "ui",
+    "components",
+    "spelyco",
+    "unistyles"
+  ],
   "license": "MIT",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "react-native": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "react-native": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
     }
   },
-  "files": ["dist"],
+  "files": [
+    "src",
+    "dist"
+  ],
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
     "lint": "biome check src/",
     "lint:fix": "biome check --write src/",
     "test": "vitest run --passWithNoTests",
@@ -25,18 +36,34 @@
     "clean": "rm -rf dist"
   },
   "peerDependencies": {
+    "@react-native-async-storage/async-storage": "*",
+    "@react-navigation/native": "^7",
+    "expo-status-bar": "*",
+    "expo-system-ui": "*",
     "react": ">=18",
-    "react-native": ">=0.73"
+    "react-native": ">=0.76",
+    "react-native-edge-to-edge": "*",
+    "react-native-nitro-modules": "*",
+    "react-native-reanimated": "*",
+    "react-native-unistyles": "^3.2.4"
   },
   "dependencies": {
-    "@spelyco/react-lib": "workspace:*"
+    "@spelyco/react-lib": "1.3.0",
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
-    "@spelyco/tsconfig": "workspace:*",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-navigation/native": "^7.2.2",
+    "@spelyco/tsconfig": "*",
     "@types/react": "^19.2.14",
+    "expo-status-bar": "~55.0.6",
+    "expo-system-ui": "~55.0.18",
     "react": "^19.2.4",
-    "react-native": "^0.84.1",
-    "tsup": "^8.3.5",
+    "react-native": "^0.83.6",
+    "react-native-edge-to-edge": "^1.8.1",
+    "react-native-nitro-modules": "^0.35.6",
+    "react-native-reanimated": "^4.2.1",
+    "react-native-unistyles": "^3.2.4",
     "vitest": "^4.1.1"
   }
-}
+}

package/src/bootUnistyles.ts

@@ -0,0 +1,27 @@
+import { DEFAULT_THEME } from "@spelyco/react-lib";
+import { StyleSheet } from "react-native-unistyles";
+import { toUnistylesTheme } from "./provider/toUnistylesTheme";
+import "./types";
+
+/**
+ * Boots Unistyles with the default theme at module-load time.
+ *
+ * `StyleSheet.configure` must run before any `StyleSheet.create` call,
+ * otherwise Unistyles emits "StyleSheet.configure was not called" warnings.
+ * Component files (e.g. `Button.tsx`) invoke `StyleSheet.create` at module
+ * evaluation, so configuration cannot wait for `SpelycoProvider` to mount.
+ *
+ * The side-effect here is loaded by `src/index.ts` ahead of any component
+ * re-exports, guaranteeing the correct boot order.
+ *
+ * Theme overrides passed to `<SpelycoProvider theme={...}>` are applied later
+ * via `UnistylesRuntime.updateTheme()` once the provider mounts.
+ */
+StyleSheet.configure({
+  themes: {
+    light: toUnistylesTheme(DEFAULT_THEME, "light"),
+    dark: toUnistylesTheme(DEFAULT_THEME, "dark"),
+  },
+  breakpoints: DEFAULT_THEME.breakpoints,
+  settings: { initialTheme: "light" },
+});

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

@@ -0,0 +1,48 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("react-native", () => ({
+  Pressable: "Pressable",
+  Text: "Text",
+}));
+
+vi.mock("react-native-unistyles", () => {
+  type StylesObject = Record<string, unknown>;
+  return {
+    StyleSheet: {
+      create: (stylesFn: ((theme: unknown) => StylesObject) | StylesObject) => {
+        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 });
+      },
+    },
+  };
+});
+
+const { Button } = await import("./Button");
+
+describe("Button", () => {
+  it("is a function (factory-wrapped component)", () => {
+    expect(typeof Button).toBe("function");
+  });
+
+  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

@@ -0,0 +1,94 @@
+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";
+
+type ButtonVariants = UnistylesVariants<typeof styles>;
+
+export type ButtonProps = Omit<PressableProps, "children"> &
+  ButtonVariants & {
+    label: string;
+  };
+
+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>
+    );
+  },
+});
+
+const styles = StyleSheet.create((theme) => ({
+  root: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md,
+    variants: {
+      variant: {
+        primary: {
+          backgroundColor: theme.primary,
+        },
+        secondary: {
+          backgroundColor: theme.colors.neutral[theme.colorScheme === "dark" ? 7 : 1],
+        },
+        ghost: {
+          backgroundColor: "transparent",
+          borderWidth: 1,
+          borderColor: theme.colors.neutral[theme.colorScheme === "dark" ? 6 : 3],
+        },
+      },
+      size: {
+        sm: {
+          paddingHorizontal: theme.spacing.md,
+          paddingVertical: theme.spacing.xs,
+        },
+        md: {
+          paddingHorizontal: theme.spacing.lg,
+          paddingVertical: theme.spacing.sm,
+        },
+        lg: {
+          paddingHorizontal: theme.spacing.xl,
+          paddingVertical: theme.spacing.md,
+        },
+      },
+      disabled: {
+        true: {
+          opacity: 0.5,
+        },
+      },
+    },
+  },
+  label: {
+    fontWeight: "600",
+    variants: {
+      variant: {
+        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: theme.fontSizes.sm },
+        md: { fontSize: theme.fontSizes.md },
+        lg: { fontSize: theme.fontSizes.lg },
+      },
+    },
+  },
+}));

package/src/components/Button/index.ts

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

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +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 * from "./hooks";
+export * from "./provider";
+export * from "./store";