@metacells/mcellui-core 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metacells/mcellui-core",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Core theme system and utilities for mcellui - React Native UI components",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/ErrorBoundary.tsx

@@ -2,7 +2,7 @@
  * ErrorBoundary
  *
  * A React error boundary component for catching and handling
- * runtime errors in nativeui components.
+ * runtime errors in mcellui components.
  *
  * @example
  * ```tsx

package/src/config/ConfigProvider.tsx

@@ -1,14 +1,25 @@
 /**
  * ConfigProvider
  *
- * Wraps ThemeProvider and automatically applies configuration from nativeui.config.ts.
+ * Wraps ThemeProvider and automatically applies configuration from mcellui.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';
+ * // App.tsx - with auto-config (requires metro-plugin)
+ * import { ConfigProvider } from '@metacells/mcellui-core';
+ *
+ * export default function App() {
+ *   return (
+ *     <ConfigProvider>
+ *       <YourApp />
+ *     </ConfigProvider>
+ *   );
+ * }
+ *
+ * // App.tsx - with explicit config
+ * import { ConfigProvider } from '@metacells/mcellui-core';
+ * import config from './mcellui.config';
  *
  * export default function App() {
  *   return (
@@ -25,13 +36,24 @@ import { ThemeProvider, ThemeProviderProps } from '../theme/ThemeProvider';
 import { NativeUIConfig, ResolvedNativeUIConfig } from './types';
 import { resolveConfig } from './defineConfig';
 
+// Try to load auto-config from metro-plugin (if configured)
+let autoConfig: NativeUIConfig = {};
+try {
+  // This module is resolved by @metacells/mcellui-metro-plugin
+  // to either the user's config file or an empty default
+  autoConfig = require('@mcellui/auto-config').default ?? {};
+} catch {
+  // Metro plugin not configured, use empty default
+  autoConfig = {};
+}
+
 // 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.
+   * Import from your mcellui.config.ts file.
    */
   config?: NativeUIConfig;
 
@@ -60,8 +82,11 @@ export interface ConfigProviderProps {
 }
 
 /**
- * ConfigProvider combines your nativeui.config.ts with ThemeProvider.
+ * ConfigProvider combines your mcellui.config.ts with ThemeProvider.
  * Use this as the root of your app for the easiest setup.
+ *
+ * If no config is provided and @metacells/mcellui-metro-plugin is set up,
+ * it will automatically load your mcellui.config.ts file.
  */
 export function ConfigProvider({
   config,
@@ -70,8 +95,11 @@ export function ConfigProvider({
   radius,
   children,
 }: ConfigProviderProps) {
+  // Use provided config, or fall back to auto-discovered config
+  const effectiveConfig = config ?? autoConfig;
+
   // Resolve config with defaults
-  const resolvedConfig = useMemo(() => resolveConfig(config), [config]);
+  const resolvedConfig = useMemo(() => resolveConfig(effectiveConfig), [effectiveConfig]);
 
   // Props can override config values
   const finalTheme = theme ?? resolvedConfig.theme;

package/src/config/defineConfig.ts

@@ -2,12 +2,12 @@
  * defineConfig
  *
  * Helper function to define NativeUI configuration with type safety.
- * Use this in your `nativeui.config.ts` file.
+ * Use this in your `mcellui.config.ts` file.
  *
  * @example
  * ```ts
- * // nativeui.config.ts
- * import { defineConfig } from '@nativeui/core';
+ * // mcellui.config.ts
+ * import { defineConfig } from '@metacells/mcellui-core';
  *
  * export default defineConfig({
  *   theme: 'blue',

package/src/config/index.ts

@@ -5,8 +5,8 @@
  *
  * @example
  * ```ts
- * // nativeui.config.ts
- * import { defineConfig } from '@nativeui/core';
+ * // mcellui.config.ts
+ * import { defineConfig } from '@metacells/mcellui-core';
  *
  * export default defineConfig({
  *   theme: 'blue',
@@ -20,8 +20,8 @@
  * @example
  * ```tsx
  * // App.tsx
- * import { ConfigProvider } from '@nativeui/core';
- * import config from './nativeui.config';
+ * import { ConfigProvider } from '@metacells/mcellui-core';
+ * import config from './mcellui.config';
  *
  * export default function App() {
  *   return (

package/src/config/types.ts

@@ -6,8 +6,8 @@
  *
  * @example
  * ```ts
- * // nativeui.config.ts
- * import { defineConfig } from '@nativeui/core';
+ * // mcellui.config.ts
+ * import { defineConfig } from '@metacells/mcellui-core';
  *
  * export default defineConfig({
  *   theme: 'blue',
@@ -27,7 +27,7 @@ import type { AnimationPreset } from '../theme/animations';
 
 /**
  * NativeUI configuration object.
- * Place in `nativeui.config.ts` at your project root.
+ * Place in `mcellui.config.ts` at your project root.
  */
 export interface NativeUIConfig {
   // ============================================
@@ -113,7 +113,7 @@ export interface NativeUIConfig {
   };
 
   // ============================================
-  // CLI Configuration (used by `npx nativeui add`)
+  // CLI Configuration (used by `npx mcellui add`)
   // ============================================
 
   /**

package/src/constants.ts

@@ -7,7 +7,7 @@
  *
  * @example
  * ```tsx
- * import { SHEET_CONSTANTS } from '@nativeui/core';
+ * import { SHEET_CONSTANTS } from '@metacells/mcellui-core';
  *
  * // In SheetContent:
  * if (translationY > height * SHEET_CONSTANTS.closeThreshold) {

package/src/theme/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 /**
  * ThemeProvider
  *
- * Provides theme context to all nativeui components.
+ * Provides theme context to all mcellui components.
  * Automatically detects system color scheme and provides all design tokens.
  *
  * Like shadcn/ui - change tokens here to transform the entire UI.
@@ -24,6 +24,7 @@ import React, { createContext, useContext, useMemo, useState, useCallback, useEf
 import { useColorScheme, ViewStyle } from 'react-native';
 import { lightColors, darkColors, ThemeColors } from './colors';
 import { setHapticsEnabled } from '../utils/haptics';
+import { setAnimationsDisabled, isExpoGo } from '../utils/expoGo';
 import { spacing } from './spacing';
 import {
   createRadius,
@@ -251,6 +252,24 @@ export interface ThemeProviderProps {
    */
   animationPreset?: AnimationPreset;
 
+  /**
+   * Enable or disable animations globally.
+   * - `true`: Force enable animations
+   * - `false`: Force disable animations (components will use static styles)
+   * - `'auto'`: Automatically detect - disable in Expo Go, enable in dev/prod builds
+   * @default 'auto'
+   *
+   * @example
+   * ```tsx
+   * // Auto-detect (disabled in Expo Go)
+   * <ThemeProvider animations="auto">
+   *
+   * // Force disable for testing or accessibility
+   * <ThemeProvider animations={false}>
+   * ```
+   */
+  animations?: boolean | 'auto';
+
   /** Children components */
   children: ReactNode;
 }
@@ -265,6 +284,7 @@ export function ThemeProvider({
   darkColors: darkColorOverrides,
   haptics = true,
   animationPreset = defaultAnimationPreset,
+  animations = 'auto',
   children,
 }: ThemeProviderProps) {
   const systemColorScheme = useColorScheme();
@@ -275,6 +295,17 @@ export function ThemeProvider({
     setHapticsEnabled(haptics);
   }, [haptics]);
 
+  // Set global animations enabled state
+  useEffect(() => {
+    if (animations === 'auto') {
+      // Use automatic detection (Expo Go = disabled)
+      setAnimationsDisabled(null);
+    } else {
+      // Use explicit override
+      setAnimationsDisabled(!animations);
+    }
+  }, [animations]);
+
   const setColorScheme = useCallback((newPreference: ColorSchemePreference) => {
     setPreference(newPreference);
   }, []);

package/src/theme/animations.ts

@@ -7,8 +7,6 @@
  * Inspired by iOS 17+ animations and Linear App micro-interactions.
  */
 
-import { Easing, EasingFunction } from 'react-native-reanimated';
-
 // Type definitions for Reanimated-compatible configs
 export interface SpringConfig {
   damping?: number;
@@ -20,15 +18,19 @@ export interface SpringConfig {
   velocity?: number;
 }
 
+// Generic easing function type that works with or without Reanimated
+type EasingFn = (t: number) => number;
+
 export interface TimingConfig {
   duration?: number;
-  easing?: EasingFunction;
+  easing?: EasingFn;
 }
 
-// Common easing functions using Reanimated's Easing module (worklet-compatible)
-const easeOutQuad = Easing.out(Easing.quad);
-const easeOutCubic = Easing.out(Easing.cubic);
-const easeInQuad = Easing.in(Easing.quad);
+// Simple easing functions that don't require Reanimated
+// These are compatible with both Reanimated and standard Animated API
+const easeOutQuad: EasingFn = (t) => t * (2 - t);
+const easeOutCubic: EasingFn = (t) => 1 - Math.pow(1 - t, 3);
+const easeInQuad: EasingFn = (t) => t * t;
 
 /**
  * Spring configurations for different animation contexts

package/src/theme/index.ts

@@ -1,7 +1,7 @@
 /**
  * Theme System
  *
- * Complete design token system for nativeui components.
+ * Complete design token system for mcellui components.
  * Inspired by shadcn/ui - change a few tokens to transform the entire UI.
  */
 

package/src/utils/cn.ts

@@ -1,7 +1,7 @@
 /**
  * cn() - Class Name / Style Merger
  *
- * The core utility for merging styles in nativeui.
+ * The core utility for merging styles in mcellui.
  * Inspired by shadcn/ui's cn() but adapted for React Native StyleSheet.
  */
 

package/src/utils/expoGo.ts

@@ -0,0 +1,72 @@
+/**
+ * Expo Go Detection Utility
+ *
+ * Provides detection for Expo Go environment to gracefully disable
+ * Reanimated animations when running in Expo Go client.
+ *
+ * @example
+ * ```tsx
+ * import { isExpoGo, areAnimationsDisabled } from '@metacells/mcellui-core';
+ *
+ * // Check environment
+ * if (isExpoGo()) {
+ *   console.log('Running in Expo Go');
+ * }
+ *
+ * // Check if animations should be disabled
+ * if (areAnimationsDisabled()) {
+ *   // Skip animation, use static styles
+ * }
+ * ```
+ */
+
+let executionEnvironment: string | undefined;
+
+// Try to load expo-constants at module load time
+try {
+  // Dynamic require to avoid bundler issues when expo-constants is not available
+  const Constants = require('expo-constants').default;
+  executionEnvironment = Constants?.executionEnvironment;
+} catch {
+  // expo-constants not available - not in Expo environment
+  executionEnvironment = undefined;
+}
+
+/**
+ * Check if the app is running in Expo Go client.
+ * Returns false in development builds, production builds, or non-Expo environments.
+ */
+export function isExpoGo(): boolean {
+  return executionEnvironment === 'storeClient';
+}
+
+// Internal state for animation override
+let animationsDisabledOverride: boolean | null = null;
+
+/**
+ * Manually override the animation disabled state.
+ * Set to `true` to force disable animations, `false` to force enable,
+ * or `null` to use automatic detection (Expo Go = disabled).
+ *
+ * @param disabled - Override value or null for automatic
+ */
+export function setAnimationsDisabled(disabled: boolean | null): void {
+  animationsDisabledOverride = disabled;
+}
+
+/**
+ * Check if animations should be disabled.
+ * Returns true if:
+ * - Manually overridden to true via setAnimationsDisabled(true)
+ * - Running in Expo Go (automatic detection)
+ *
+ * Returns false if:
+ * - Manually overridden to false via setAnimationsDisabled(false)
+ * - Running in development/production build
+ */
+export function areAnimationsDisabled(): boolean {
+  if (animationsDisabledOverride !== null) {
+    return animationsDisabledOverride;
+  }
+  return isExpoGo();
+}

package/src/utils/haptics.ts

@@ -75,7 +75,7 @@ export function isHapticsEnabled(): boolean {
  * Respects the global haptics enabled state. Disabled via:
  * - `setHapticsEnabled(false)`
  * - `<ThemeProvider haptics={false}>`
- * - `nativeui.config.ts` with `haptics: false`
+ * - `mcellui.config.ts` with `haptics: false`
  *
  * @example
  * ```tsx

package/src/utils/index.ts

@@ -26,3 +26,8 @@ export {
   hapticPresets,
   type HapticStyle,
 } from './haptics';
+export {
+  isExpoGo,
+  setAnimationsDisabled,
+  areAnimationsDisabled,
+} from './expoGo';