@metacells/mcellui-core 0.1.0

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@metacells/mcellui-core",
+  "version": "0.1.0",
+  "description": "Core theme system and utilities for mcellui - React Native UI components",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./tokens": {
+      "types": "./src/tokens/index.ts",
+      "default": "./src/tokens/index.ts"
+    },
+    "./utils": {
+      "types": "./src/utils/index.ts",
+      "default": "./src/utils/index.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "react-native",
+    "expo",
+    "ui-components",
+    "theme",
+    "design-system",
+    "mcellui"
+  ],
+  "author": "christlerjohannes",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/metacells/mcellui"
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src/"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.10",
+    "typescript": "^5.4.0"
+  }
+}

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,188 @@
+/**
+ * ErrorBoundary
+ *
+ * A React error boundary component for catching and handling
+ * runtime errors in nativeui components.
+ *
+ * @example
+ * ```tsx
+ * // Wrap individual components
+ * <ErrorBoundary fallback={<Text>Something went wrong</Text>}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ *
+ * // With custom error handler
+ * <ErrorBoundary
+ *   onError={(error, errorInfo) => {
+ *     logErrorToService(error, errorInfo);
+ *   }}
+ *   fallback={({ error, reset }) => (
+ *     <View>
+ *       <Text>Error: {error.message}</Text>
+ *       <Button onPress={reset}>Try Again</Button>
+ *     </View>
+ *   )}
+ * >
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+
+import React, { Component, ReactNode, ErrorInfo } from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+
+export interface ErrorBoundaryFallbackProps {
+  /** The error that was caught */
+  error: Error;
+  /** Function to reset the error boundary and retry */
+  reset: () => void;
+}
+
+export interface ErrorBoundaryProps {
+  /** Children to render when no error */
+  children: ReactNode;
+
+  /**
+   * Fallback UI to show when an error occurs.
+   * Can be a ReactNode or a render function receiving error details.
+   */
+  fallback?: ReactNode | ((props: ErrorBoundaryFallbackProps) => ReactNode);
+
+  /**
+   * Callback when an error is caught.
+   * Use for logging errors to external services.
+   */
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+
+  /**
+   * Callback when the error boundary resets.
+   */
+  onReset?: () => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    this.props.onError?.(error, errorInfo);
+  }
+
+  reset = (): void => {
+    this.props.onReset?.();
+    this.setState({ hasError: false, error: null });
+  };
+
+  render(): ReactNode {
+    const { hasError, error } = this.state;
+    const { children, fallback } = this.props;
+
+    if (hasError && error) {
+      // No fallback provided - render default
+      if (!fallback) {
+        return (
+          <DefaultErrorFallback
+            error={error}
+            reset={this.reset}
+          />
+        );
+      }
+
+      // Render function fallback
+      if (typeof fallback === 'function') {
+        return fallback({ error, reset: this.reset });
+      }
+
+      // ReactNode fallback
+      return fallback;
+    }
+
+    return children;
+  }
+}
+
+/**
+ * Default error fallback UI
+ */
+function DefaultErrorFallback({ error, reset }: ErrorBoundaryFallbackProps) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Something went wrong</Text>
+      <Text style={styles.message}>{error.message}</Text>
+      <Pressable style={styles.button} onPress={reset}>
+        <Text style={styles.buttonText}>Try Again</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+    backgroundColor: '#f8f8f8',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#1a1a1a',
+    marginBottom: 8,
+  },
+  message: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+  },
+  button: {
+    backgroundColor: '#1a1a1a',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '500',
+  },
+});
+
+/**
+ * Higher-order component to wrap a component with an error boundary
+ *
+ * @example
+ * ```tsx
+ * const SafeMyComponent = withErrorBoundary(MyComponent, {
+ *   fallback: <Text>Error loading component</Text>,
+ * });
+ * ```
+ */
+export function withErrorBoundary<P extends object>(
+  WrappedComponent: React.ComponentType<P>,
+  errorBoundaryProps?: Omit<ErrorBoundaryProps, 'children'>
+): React.FC<P> {
+  const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+
+  const ComponentWithErrorBoundary: React.FC<P> = (props) => (
+    <ErrorBoundary {...errorBoundaryProps}>
+      <WrappedComponent {...props} />
+    </ErrorBoundary>
+  );
+
+  ComponentWithErrorBoundary.displayName = `withErrorBoundary(${displayName})`;
+
+  return ComponentWithErrorBoundary;
+}

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export {
+  ErrorBoundary,
+  withErrorBoundary,
+  type ErrorBoundaryProps,
+  type ErrorBoundaryFallbackProps,
+} from './ErrorBoundary';

package/src/config/ConfigProvider.tsx

@@ -0,0 +1,117 @@
+/**
+ * ConfigProvider
+ *
+ * Wraps ThemeProvider and automatically applies configuration from nativeui.config.ts.
+ * This is the recommended way to set up NativeUI in your app.
+ *
+ * @example
+ * ```tsx
+ * // App.tsx
+ * import { ConfigProvider } from '@nativeui/core';
+ * import config from './nativeui.config';
+ *
+ * export default function App() {
+ *   return (
+ *     <ConfigProvider config={config}>
+ *       <YourApp />
+ *     </ConfigProvider>
+ *   );
+ * }
+ * ```
+ */
+
+import React, { createContext, useContext, ReactNode, useMemo } from 'react';
+import { ThemeProvider, ThemeProviderProps } from '../theme/ThemeProvider';
+import { NativeUIConfig, ResolvedNativeUIConfig } from './types';
+import { resolveConfig } from './defineConfig';
+
+// Config context for accessing raw config values
+const ConfigContext = createContext<ResolvedNativeUIConfig | null>(null);
+
+export interface ConfigProviderProps {
+  /**
+   * NativeUI configuration object.
+   * Import from your nativeui.config.ts file.
+   */
+  config?: NativeUIConfig;
+
+  /**
+   * Override the color scheme preference.
+   * Takes precedence over config.colorScheme.
+   */
+  colorScheme?: 'light' | 'dark' | 'system';
+
+  /**
+   * Override the theme preset.
+   * Takes precedence over config.theme.
+   */
+  theme?: ThemeProviderProps['theme'];
+
+  /**
+   * Override the radius preset.
+   * Takes precedence over config.radius.
+   */
+  radius?: ThemeProviderProps['radius'];
+
+  /**
+   * Children components.
+   */
+  children: ReactNode;
+}
+
+/**
+ * ConfigProvider combines your nativeui.config.ts with ThemeProvider.
+ * Use this as the root of your app for the easiest setup.
+ */
+export function ConfigProvider({
+  config,
+  colorScheme,
+  theme,
+  radius,
+  children,
+}: ConfigProviderProps) {
+  // Resolve config with defaults
+  const resolvedConfig = useMemo(() => resolveConfig(config), [config]);
+
+  // Props can override config values
+  const finalTheme = theme ?? resolvedConfig.theme;
+  const finalRadius = radius ?? resolvedConfig.radius;
+  const finalColorScheme = colorScheme ?? resolvedConfig.colorScheme;
+
+  return (
+    <ConfigContext.Provider value={resolvedConfig}>
+      <ThemeProvider
+        defaultColorScheme={finalColorScheme}
+        theme={finalTheme}
+        radius={finalRadius}
+        colors={resolvedConfig.colors}
+        lightColors={resolvedConfig.lightColors}
+        darkColors={resolvedConfig.darkColors}
+        fonts={resolvedConfig.fonts}
+      >
+        {children}
+      </ThemeProvider>
+    </ConfigContext.Provider>
+  );
+}
+
+/**
+ * Hook to access the raw NativeUI configuration.
+ * Useful for accessing component defaults and other config values.
+ *
+ * @example
+ * ```tsx
+ * const config = useConfig();
+ * const defaultButtonSize = config.components.button?.defaultSize ?? 'md';
+ * ```
+ */
+export function useConfig(): ResolvedNativeUIConfig {
+  const config = useContext(ConfigContext);
+
+  if (!config) {
+    // Return default config if no provider
+    return resolveConfig({});
+  }
+
+  return config;
+}

package/src/config/defineConfig.ts

@@ -0,0 +1,75 @@
+/**
+ * defineConfig
+ *
+ * Helper function to define NativeUI configuration with type safety.
+ * Use this in your `nativeui.config.ts` file.
+ *
+ * @example
+ * ```ts
+ * // nativeui.config.ts
+ * import { defineConfig } from '@nativeui/core';
+ *
+ * export default defineConfig({
+ *   theme: 'blue',
+ *   radius: 'lg',
+ *   colors: {
+ *     primary: '#6366F1',
+ *     secondary: '#F3F4F6',
+ *   },
+ *   fonts: {
+ *     heading: 'PlayfairDisplay_700Bold',
+ *   },
+ *   components: {
+ *     button: {
+ *       defaultVariant: 'default',
+ *       defaultSize: 'md',
+ *     },
+ *   },
+ * });
+ * ```
+ */
+
+import { NativeUIConfig, ResolvedNativeUIConfig, defaultConfig } from './types';
+
+/**
+ * Define your NativeUI configuration with full type safety and autocomplete.
+ *
+ * @param config - Your configuration options
+ * @returns The same config object (for type inference)
+ */
+export function defineConfig(config: NativeUIConfig): NativeUIConfig {
+  return config;
+}
+
+/**
+ * Resolve a partial config into a full config with defaults.
+ *
+ * @param config - Partial configuration
+ * @returns Fully resolved configuration with defaults applied
+ */
+export function resolveConfig(config: NativeUIConfig = {}): ResolvedNativeUIConfig {
+  return {
+    // Runtime configuration
+    theme: config.theme ?? defaultConfig.theme,
+    radius: config.radius ?? defaultConfig.radius,
+    colorScheme: config.colorScheme ?? defaultConfig.colorScheme,
+    colors: config.colors ?? defaultConfig.colors,
+    lightColors: config.lightColors ?? defaultConfig.lightColors,
+    darkColors: config.darkColors ?? defaultConfig.darkColors,
+    fonts: config.fonts ?? defaultConfig.fonts,
+    haptics: config.haptics ?? defaultConfig.haptics,
+    animationPreset: config.animationPreset ?? defaultConfig.animationPreset,
+    components: {
+      ...defaultConfig.components,
+      ...config.components,
+    },
+    // CLI configuration
+    componentsPath: config.componentsPath ?? defaultConfig.componentsPath,
+    utilsPath: config.utilsPath ?? defaultConfig.utilsPath,
+    style: config.style ?? defaultConfig.style,
+    aliases: {
+      ...defaultConfig.aliases,
+      ...config.aliases,
+    },
+  };
+}

package/src/config/index.ts

@@ -0,0 +1,42 @@
+/**
+ * NativeUI Configuration
+ *
+ * Configure your entire design system in one place.
+ *
+ * @example
+ * ```ts
+ * // nativeui.config.ts
+ * import { defineConfig } from '@nativeui/core';
+ *
+ * export default defineConfig({
+ *   theme: 'blue',
+ *   radius: 'lg',
+ *   colors: {
+ *     primary: '#6366F1',
+ *   },
+ * });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // App.tsx
+ * import { ConfigProvider } from '@nativeui/core';
+ * import config from './nativeui.config';
+ *
+ * export default function App() {
+ *   return (
+ *     <ConfigProvider config={config}>
+ *       <YourApp />
+ *     </ConfigProvider>
+ *   );
+ * }
+ * ```
+ */
+
+export { defineConfig, resolveConfig } from './defineConfig';
+export { ConfigProvider, useConfig } from './ConfigProvider';
+export type {
+  NativeUIConfig,
+  ResolvedNativeUIConfig,
+} from './types';
+export { defaultConfig } from './types';

package/src/config/types.ts

@@ -0,0 +1,185 @@
+/**
+ * NativeUI Configuration Types
+ *
+ * Define your app's design system in a single config file.
+ * Similar to tailwind.config.js but for React Native.
+ *
+ * @example
+ * ```ts
+ * // nativeui.config.ts
+ * import { defineConfig } from '@nativeui/core';
+ *
+ * export default defineConfig({
+ *   theme: 'blue',
+ *   radius: 'lg',
+ *   colors: {
+ *     primary: '#6366F1',
+ *   },
+ * });
+ * ```
+ */
+
+import type { ThemePreset } from '../theme/presets';
+import type { RadiusPreset } from '../theme/radius';
+import type { ThemeColors } from '../theme/colors';
+import type { Fonts } from '../theme/typography';
+import type { AnimationPreset } from '../theme/animations';
+
+/**
+ * NativeUI configuration object.
+ * Place in `nativeui.config.ts` at your project root.
+ */
+export interface NativeUIConfig {
+  // ============================================
+  // Runtime Configuration (used by ConfigProvider)
+  // ============================================
+
+  /**
+   * Color theme preset.
+   * @default 'zinc'
+   */
+  theme?: ThemePreset;
+
+  /**
+   * Border radius preset.
+   * Controls roundness of all components.
+   * @default 'md'
+   */
+  radius?: RadiusPreset;
+
+  /**
+   * Default color scheme preference.
+   * @default 'system'
+   */
+  colorScheme?: 'light' | 'dark' | 'system';
+
+  /**
+   * Color overrides (applied to both light and dark modes).
+   */
+  colors?: Partial<ThemeColors>;
+
+  /**
+   * Light mode specific color overrides.
+   */
+  lightColors?: Partial<ThemeColors>;
+
+  /**
+   * Dark mode specific color overrides.
+   */
+  darkColors?: Partial<ThemeColors>;
+
+  /**
+   * Font configuration.
+   */
+  fonts?: Partial<Fonts>;
+
+  /**
+   * Enable or disable haptic feedback globally.
+   * @default true
+   */
+  haptics?: boolean;
+
+  /**
+   * Animation preset.
+   * Controls the overall feel of animations throughout the app.
+   * - `subtle`: Professional, smooth animations with minimal overshoot
+   * - `playful`: Bouncy, energetic animations with more personality
+   * @default 'subtle'
+   */
+  animationPreset?: AnimationPreset;
+
+  /**
+   * Component-specific overrides.
+   * Override default sizes, padding, etc.
+   */
+  components?: {
+    button?: {
+      defaultVariant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+      defaultSize?: 'sm' | 'md' | 'lg';
+    };
+    input?: {
+      defaultSize?: 'sm' | 'md' | 'lg';
+    };
+    card?: {
+      defaultVariant?: 'default' | 'elevated' | 'outlined';
+    };
+    badge?: {
+      defaultVariant?: 'default' | 'secondary' | 'destructive' | 'outline';
+      defaultSize?: 'sm' | 'md' | 'lg';
+    };
+    avatar?: {
+      defaultSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    };
+  };
+
+  // ============================================
+  // CLI Configuration (used by `npx nativeui add`)
+  // ============================================
+
+  /**
+   * Path where components will be installed.
+   * @default './components/ui'
+   */
+  componentsPath?: string;
+
+  /**
+   * Path where utilities (cn, etc.) will be installed.
+   * @default './lib/utils'
+   */
+  utilsPath?: string;
+
+  /**
+   * Style preset for components.
+   * @default 'default'
+   */
+  style?: 'default' | 'ios' | 'material';
+
+  /**
+   * Path aliases for imports.
+   */
+  aliases?: {
+    /** Alias for components directory */
+    components?: string;
+    /** Alias for utils directory */
+    utils?: string;
+  };
+}
+
+/**
+ * Resolved configuration with all defaults applied.
+ */
+export interface ResolvedNativeUIConfig extends Required<Omit<NativeUIConfig, 'colors' | 'lightColors' | 'darkColors' | 'fonts' | 'components' | 'aliases' | 'haptics' | 'animationPreset'>> {
+  colors: Partial<ThemeColors>;
+  lightColors: Partial<ThemeColors>;
+  darkColors: Partial<ThemeColors>;
+  fonts: Partial<Fonts>;
+  haptics: boolean;
+  animationPreset: AnimationPreset;
+  components: NonNullable<NativeUIConfig['components']>;
+  aliases: NonNullable<NativeUIConfig['aliases']>;
+}
+
+/**
+ * Default configuration values.
+ */
+export const defaultConfig: ResolvedNativeUIConfig = {
+  // Runtime defaults
+  theme: 'zinc',
+  radius: 'md',
+  colorScheme: 'system',
+  colors: {},
+  lightColors: {},
+  darkColors: {},
+  fonts: {},
+  haptics: true,
+  animationPreset: 'subtle',
+  components: {},
+  // CLI defaults
+  componentsPath: './components/ui',
+  utilsPath: './lib/utils',
+  style: 'default',
+  aliases: {
+    components: '@/components',
+    utils: '@/lib/utils',
+  },
+};