@ggui-ai/mcp-apps-react-native 0.0.1-placeholder → 0.9.0

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,129 @@
+/**
+ * React Native Theme Provider
+ *
+ * Provides design tokens via React Context with light/dark mode support.
+ * Uses the system color scheme by default but supports explicit override.
+ */
+
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
+import { AccessibilityInfo, useColorScheme } from 'react-native';
+import type { RNTheme } from './types';
+import {
+  rnColors,
+  rnSemantic,
+  rnSpacing,
+  rnSpacingNamed,
+  rnFontSize,
+  rnFontWeight,
+  rnLineHeight,
+  rnFontFamily,
+  rnRadius,
+  rnShadow,
+  rnDuration,
+  rnEasing,
+  rnTransition,
+  rnAccessibility,
+} from './tokens';
+
+// Dark mode semantic overrides
+const darkSemantic = {
+  textPrimary: rnColors.gray[50],
+  textSecondary: rnColors.gray[400],
+  textMuted: rnColors.gray[500],
+  textInverse: rnColors.gray[900],
+  bgPrimary: '#0f172a',
+  bgSecondary: '#1e293b',
+  bgTertiary: rnColors.gray[800],
+  bgInverse: rnColors.gray[50],
+  borderLight: rnColors.gray[700],
+  borderDefault: rnColors.gray[600],
+  borderDark: rnColors.gray[500],
+  focus: rnColors.primary[400],
+  hover: rnColors.primary[900],
+  active: rnColors.primary[800],
+  disabled: rnColors.gray[600],
+  success: rnColors.success[400],
+  warning: rnColors.warning[400],
+  error: rnColors.error[400],
+  info: rnColors.info[400],
+} as const;
+
+// Dark shadow overrides (higher opacity for visibility on dark backgrounds)
+const darkShadow = {
+  none: rnShadow.none,
+  sm: { ...rnShadow.sm, shadowOpacity: 0.3 },
+  md: { ...rnShadow.md, shadowOpacity: 0.4 },
+  lg: { ...rnShadow.lg, shadowOpacity: 0.4 },
+  xl: { ...rnShadow.xl, shadowOpacity: 0.5 },
+  '2xl': { ...rnShadow['2xl'], shadowOpacity: 0.6 },
+} as const;
+
+function buildTheme(colorScheme: 'light' | 'dark', reduceMotionEnabled = false): RNTheme {
+  const isDark = colorScheme === 'dark';
+  return {
+    colorScheme,
+    colors: rnColors,
+    semantic: isDark ? darkSemantic : rnSemantic,
+    spacing: rnSpacing,
+    spacingNamed: rnSpacingNamed,
+    fontSize: rnFontSize,
+    fontWeight: rnFontWeight,
+    lineHeight: rnLineHeight,
+    fontFamily: rnFontFamily,
+    radius: rnRadius,
+    shadow: isDark ? darkShadow : rnShadow,
+    duration: reduceMotionEnabled
+      ? Object.fromEntries(Object.keys(rnDuration).map((k) => [k, 0]))
+      : rnDuration,
+    easing: rnEasing,
+    transition: reduceMotionEnabled
+      ? Object.fromEntries(
+          Object.entries(rnTransition).map(([k, v]) => [k, { ...v, duration: 0 }])
+        )
+      : rnTransition,
+    accessibility: rnAccessibility,
+    reduceMotionEnabled,
+  };
+}
+
+const ThemeContext = createContext<RNTheme | null>(null);
+
+export interface ThemeProviderProps {
+  colorScheme?: 'light' | 'dark';
+  children: ReactNode;
+}
+
+export function ThemeProvider({ colorScheme: colorSchemeProp, children }: ThemeProviderProps) {
+  const systemScheme = useColorScheme();
+  const effectiveScheme = colorSchemeProp ?? systemScheme ?? 'light';
+  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+
+  useEffect(() => {
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then(setReduceMotionEnabled)
+      .catch(() => {});
+
+    const subscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      setReduceMotionEnabled,
+    );
+    return () => subscription.remove();
+  }, []);
+
+  const theme = useMemo(
+    () => buildTheme(effectiveScheme, reduceMotionEnabled),
+    [effectiveScheme, reduceMotionEnabled],
+  );
+
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): RNTheme {
+  const theme = useContext(ThemeContext);
+  if (!theme) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return theme;
+}
+
+export { buildTheme };

package/src/theme/index.ts

@@ -0,0 +1,29 @@
+/**
+ * Theme Module Exports
+ */
+
+// Theme Provider & Hook
+export { ThemeProvider, useTheme, buildTheme } from './ThemeProvider';
+export type { ThemeProviderProps } from './ThemeProvider';
+
+// Types
+export type { RNTheme, RNThemeColors, RNThemeSemantic, RNTransitionPreset, RNAccessibility } from './types';
+
+// Raw Tokens (for direct use without provider)
+export {
+  rnColors,
+  rnSemantic,
+  rnSpacing,
+  rnSpacingNamed,
+  rnFontSize,
+  rnFontWeight,
+  rnLineHeight,
+  rnFontFamily,
+  rnRadius,
+  rnShadow,
+  rnDuration,
+  rnEasing,
+  rnTransition,
+  rnAccessibility,
+} from './tokens';
+export type { RNShadow } from './tokens';

package/src/theme/tokens.ts

@@ -0,0 +1,201 @@
+/**
+ * React Native Design Tokens
+ *
+ * Converts DTCG/CSS-based design tokens from @ggui-ai/design
+ * into React Native-compatible values (numbers, RN shadow format, etc.)
+ */
+
+import {
+  colors,
+  semantic,
+  focusRing,
+  reducedMotion,
+  highContrast,
+  spacingValues,
+  nativeTokens,
+} from '@ggui-ai/design/tokens';
+import { Easing } from 'react-native';
+
+// --- Colors (already plain hex strings, pass through) ---
+
+export const rnColors = {
+  primary: colors.primary,
+  gray: colors.gray,
+  success: colors.success,
+  warning: colors.warning,
+  error: colors.error,
+  info: colors.info,
+  white: colors.white,
+  black: colors.black,
+  transparent: colors.transparent,
+} as const;
+
+export const rnSemantic = semantic;
+
+// --- Spacing (numeric values for RN) ---
+
+// Two-Layer Theming: spacing tokens are platform constants owned by
+// `@ggui-ai/design` — re-exported here (NOT copied) so a scale change
+// in the design package propagates to RN automatically.
+export const rnSpacing = spacingValues;
+
+// Named spacing aliases for ergonomic use — design's RN-numeric
+// native token set is the single source.
+export const rnSpacingNamed = nativeTokens.light.spacing;
+
+// --- Typography (numeric values for RN) ---
+
+export const rnFontSize = {
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 30,
+  '4xl': 36,
+  '5xl': 48,
+  '6xl': 60,
+} as const;
+
+export const rnFontWeight = {
+  thin: '100' as const,
+  extralight: '200' as const,
+  light: '300' as const,
+  normal: '400' as const,
+  medium: '500' as const,
+  semibold: '600' as const,
+  bold: '700' as const,
+  extrabold: '800' as const,
+  black: '900' as const,
+};
+
+export const rnLineHeight = {
+  none: 1,
+  tight: 1.25,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2,
+} as const;
+
+// Platform font families (RN uses system fonts, not CSS font stacks)
+export const rnFontFamily = {
+  sans: undefined, // Uses system default (San Francisco on iOS, Roboto on Android)
+  mono: 'monospace' as const, // Platform monospace
+} as const;
+
+// --- Border Radius (numeric values for RN) ---
+
+export const rnRadius = {
+  none: 0,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  '2xl': 16,
+  '3xl': 24,
+  full: 9999,
+} as const;
+
+// --- Shadows (RN shadow format) ---
+
+export interface RNShadow {
+  shadowColor: string;
+  shadowOffset: { width: number; height: number };
+  shadowOpacity: number;
+  shadowRadius: number;
+  elevation: number; // Android
+}
+
+export const rnShadow: Record<string, RNShadow> = {
+  none: {
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  md: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+    elevation: 3,
+  },
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.1,
+    shadowRadius: 15,
+    elevation: 6,
+  },
+  xl: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 20 },
+    shadowOpacity: 0.1,
+    shadowRadius: 25,
+    elevation: 10,
+  },
+  '2xl': {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 25 },
+    shadowOpacity: 0.25,
+    shadowRadius: 50,
+    elevation: 15,
+  },
+} as const;
+
+// --- Duration (milliseconds for Animated.timing) ---
+
+export const rnDuration = {
+  instant: 0,
+  fast: 100,
+  normal: 200,
+  slow: 300,
+  slower: 500,
+} as const;
+
+// --- Easing (RN Easing functions mapped to Material Design curves) ---
+
+export const rnEasing = {
+  standard: Easing.bezier(0.4, 0, 0.2, 1),
+  decelerate: Easing.bezier(0, 0, 0.2, 1),
+  accelerate: Easing.bezier(0.4, 0, 1, 1),
+  linear: Easing.linear,
+} as const;
+
+// --- Transition presets (duration + easing combos for Animated.timing) ---
+
+export const rnTransition = {
+  fast: { duration: 100, easing: rnEasing.standard },
+  normal: { duration: 200, easing: rnEasing.standard },
+  slow: { duration: 300, easing: rnEasing.standard },
+  transform: { duration: 200, easing: rnEasing.decelerate },
+} as const;
+
+// --- Accessibility (RN-compatible values from design package) ---
+
+export const rnAccessibility = {
+  focusRing: {
+    color: focusRing.color,
+    width: parseFloat(focusRing.width),
+    offset: parseFloat(focusRing.offset),
+  },
+  reducedMotion: {
+    duration: parseInt(reducedMotion.duration, 10),
+  },
+  highContrast: {
+    borderWidth: parseFloat(highContrast.borderWidth),
+    textColor: highContrast.textColor,
+    backgroundColor: highContrast.backgroundColor,
+    linkColor: highContrast.linkColor,
+  },
+} as const;

package/src/theme/types.ts

@@ -0,0 +1,94 @@
+/**
+ * React Native Theme Types
+ *
+ * Typed theme interface for the RN design system.
+ * Mirrors the web DTCG theme structure but with RN-compatible values.
+ */
+
+import type { RNShadow } from './tokens';
+
+export interface RNThemeColors {
+  primary: Record<string, string>;
+  gray: Record<string, string>;
+  success: Record<string, string>;
+  warning: Record<string, string>;
+  error: Record<string, string>;
+  info: Record<string, string>;
+  white: string;
+  black: string;
+  transparent: string;
+}
+
+export interface RNThemeSemantic {
+  textPrimary: string;
+  textSecondary: string;
+  textMuted: string;
+  textInverse: string;
+  bgPrimary: string;
+  bgSecondary: string;
+  bgTertiary: string;
+  bgInverse: string;
+  borderLight: string;
+  borderDefault: string;
+  borderDark: string;
+  focus: string;
+  hover: string;
+  active: string;
+  disabled: string;
+  success: string;
+  warning: string;
+  error: string;
+  info: string;
+}
+
+export interface RNTransitionPreset {
+  duration: number;
+  easing: (t: number) => number;
+}
+
+export interface RNAccessibility {
+  focusRing: {
+    color: string;
+    width: number;
+    offset: number;
+  };
+  reducedMotion: {
+    duration: number;
+  };
+  highContrast: {
+    borderWidth: number;
+    textColor: string;
+    backgroundColor: string;
+    linkColor: string;
+  };
+}
+
+export interface RNTheme {
+  colorScheme: 'light' | 'dark';
+  colors: RNThemeColors;
+  semantic: RNThemeSemantic;
+  spacing: Record<number, number>;
+  spacingNamed: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+  };
+  fontSize: Record<string, number>;
+  fontWeight: Record<string, string>;
+  lineHeight: Record<string, number>;
+  fontFamily: {
+    sans: string | undefined;
+    mono: string;
+  };
+  radius: Record<string, number>;
+  shadow: Record<string, RNShadow>;
+  duration: Record<string, number>;
+  easing: Record<string, (t: number) => number>;
+  transition: Record<string, RNTransitionPreset>;
+  accessibility: RNAccessibility;
+  reduceMotionEnabled: boolean;
+}

package/src/types/react-test-renderer.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Local ambient declarations for `react-test-renderer`.
+ *
+ * `react-test-renderer@19` does not ship its own types, and there is no
+ * matching `@types/react-test-renderer@19` on npm. We only need a tiny
+ * surface (`create`, `act`, `ReactTestRenderer.toJSON()`) for the SDK's
+ * test files — full fidelity is not required.
+ */
+declare module 'react-test-renderer' {
+  import type { ReactElement } from 'react';
+
+  export interface ReactTestRendererJSON {
+    type: string;
+    props: Record<string, unknown>;
+    children: null | Array<ReactTestRendererJSON | string>;
+  }
+
+  export interface ReactTestInstance {
+    instance: unknown;
+    type: string | { displayName?: string; name?: string };
+    props: Record<string, unknown>;
+    parent: ReactTestInstance | null;
+    children: Array<ReactTestInstance | string>;
+    find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance;
+    findAll(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance[];
+    findByType(type: unknown): ReactTestInstance;
+    findAllByType(type: unknown): ReactTestInstance[];
+    findByProps(props: Record<string, unknown>): ReactTestInstance;
+    findAllByProps(props: Record<string, unknown>): ReactTestInstance[];
+  }
+
+  export interface ReactTestRenderer {
+    root: ReactTestInstance;
+    toJSON(): ReactTestRendererJSON | ReactTestRendererJSON[] | null;
+    toTree(): unknown;
+    update(element: ReactElement): void;
+    unmount(): void;
+  }
+
+  export interface TestRendererOptions {
+    createNodeMock?: (element: ReactElement) => unknown;
+  }
+
+  export function create(
+    element: ReactElement,
+    options?: TestRendererOptions,
+  ): ReactTestRenderer;
+
+  export function act(callback: () => void | Promise<void>): Promise<void>;
+}