cnnative-ui 1.0.0

package/README.md

@@ -0,0 +1,34 @@
+# cnnative-ui
+
+The core component library source code for the **cnnative** ecosystem. Beautiful, accessible, and high-performance React Native and Expo component primitives styled with NativeWind.
+
+This library is designed around the **copy-paste component model** popularized by shadcn/ui. You own the code of your components—it is written directly into your application directories rather than hidden deep inside `node_modules`.
+
+## Component Features
+
+*   **Premium Micro-Animations**: Built-in support for fluid spring transitions using React Native Reanimated and Moti.
+*   **Vibrant Glassmorphism**: Stunning pre-configured frosted glass cards, panel layouts, and sheets.
+*   **Tailwind Styling**: Out-of-the-box support for NativeWind styling variables and Tailwind utility configurations.
+*   **Tactile Haptics**: Native-feeling haptic feedback integrated directly into interactive primitives (buttons, switches, dials).
+
+## Peer Dependencies
+
+To use components added by the `cnnative` CLI in your project, ensure the following peer dependencies are installed:
+
+```bash
+# Using Expo
+npx expo install react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-svg expo-haptics expo-blur expo-linear-gradient expo-local-authentication
+
+# Standard utility libraries
+npm install clsx tailwind-merge class-variance-authority lucide-react-native moti
+```
+
+## How It Works
+
+1.  Initialize your workspace: `npx cnnative init`
+2.  Copy components dynamically: `npx cnnative add button`
+3.  Customize the component code directly within your `components/ui/` folder!
+
+## License
+
+MIT

package/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package/jest.config.js

@@ -0,0 +1,22 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  preset: '@react-native/jest-preset',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleDirectories: ['node_modules', '<rootDir>/node_modules', '<rootDir>/../../node_modules'],
+  testMatch: ['**/__tests__/**/*.test.[jt]s?(x)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|lucide-react-native|react-native-reanimated|react-native-gesture-handler|moti)'
+  ],
+  testPathIgnorePatterns: ['/node_modules/', '/dist/'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  collectCoverage: true,
+  coverageReporters: ['json', 'html', 'text'],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/index.ts',
+    '!src/tokens/**'
+  ]
+};

package/jest.init.js

@@ -0,0 +1,5 @@
+// Initialize global mocks before jest-expo setup runs
+const NativeModules = require('react-native/Libraries/BatchedBridge/NativeModules');
+if (!NativeModules.UIManager) {
+  NativeModules.UIManager = {};
+}

package/jest.setup.js

@@ -0,0 +1,173 @@
+import '@testing-library/jest-native/extend-expect';
+
+// Mock react-native-gesture-handler
+jest.mock('react-native-gesture-handler', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  return {
+    __esModule: true,
+    GestureHandlerRootView: ({ children, style, ...props }) => React.createElement(View, { ...props, style }, children),
+    Swipeable: ({ children }) => children,
+    DrawerLayout: ({ children }) => children,
+    State: {},
+    PanGestureHandler: ({ children }) => children,
+    TapGestureHandler: ({ children }) => children,
+    FlingGestureHandler: ({ children }) => children,
+    ForceTouchGestureHandler: ({ children }) => children,
+    LongPressGestureHandler: ({ children }) => children,
+    PinchGestureHandler: ({ children }) => children,
+    RotationGestureHandler: ({ children }) => children,
+  };
+});
+
+// Mock react-native-reanimated
+jest.mock('react-native-reanimated', () => {
+  const react = require('react');
+  const { View, Text } = require('react-native');
+  return {
+    __esModule: true,
+    default: {
+      createAnimatedComponent: (c) => c,
+      View: ({ children, style, ...props }) => react.createElement(View, { ...props, style }, children),
+      Text: ({ children, style, ...props }) => react.createElement(Text, { ...props, style }, children),
+    },
+    useAnimatedStyle: (fn) => fn(),
+    useSharedValue: (val) => ({ value: val }),
+    withRepeat: (val) => val,
+    withTiming: (val, config, cb) => {
+      if (cb) cb(true);
+      return val;
+    },
+    withSpring: (val, config, cb) => {
+      if (cb) cb(true);
+      return val;
+    },
+    withDelay: (delay, animation) => animation,
+    Easing: {
+      linear: (t) => t,
+      ease: (t) => t,
+      quad: (t) => t,
+      cubic: (t) => t,
+      poly: (n) => (t) => Math.pow(t, n),
+      sin: (t) => t,
+      circle: (t) => t,
+      exp: (t) => t,
+      elastic: (bounciness) => (t) => t,
+      back: (s) => (t) => t,
+      bounce: (t) => t,
+      bezier: (x1, y1, x2, y2) => (t) => t,
+      in: (easing) => easing,
+      out: (easing) => easing,
+      inOut: (easing) => easing,
+    },
+    interpolate: (value, inputRange, outputRange, extrapolate) => {
+      return outputRange[0];
+    },
+    Extrapolate: {
+      CLAMP: 'clamp',
+      IDENTITY: 'identity',
+      EXTEND: 'extend',
+    },
+    interpolateColor: (value, inputRange, outputRange) => {
+      return outputRange[0];
+    },
+    runOnJS: (fn) => fn,
+    runOnUI: (fn) => fn,
+    useAnimatedRef: () => react.createRef(),
+    measure: () => ({ x: 0, y: 0, width: 100, height: 100, pageX: 0, pageY: 0 }),
+    createAnimatedComponent: (c) => c,
+    useReducedMotion: () => false,
+  };
+});
+
+// Mock expo-haptics
+jest.mock('expo-haptics', () => ({
+  impactAsync: jest.fn(),
+  notificationAsync: jest.fn(),
+  ImpactFeedbackStyle: {
+    Light: 'light',
+    Medium: 'medium',
+    Heavy: 'heavy'
+  },
+  NotificationFeedbackType: {
+    Success: 'success',
+    Warning: 'warning',
+    Error: 'error'
+  }
+}));
+
+// Mock lucide-react-native
+jest.mock('lucide-react-native', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  const createMockIcon = (name) => {
+    const Component = (props) => React.createElement(View, { ...props, testID: `lucide-${name}` });
+    Component.displayName = `MockIcon(${name})`;
+    return Component;
+  };
+  return {
+    __esModule: true,
+    Check: createMockIcon('Check'),
+    RefreshCw: createMockIcon('RefreshCw'),
+    Fingerprint: createMockIcon('Fingerprint'),
+    ScanFace: createMockIcon('ScanFace'),
+    Star: createMockIcon('Star'),
+    ChevronDown: createMockIcon('ChevronDown'),
+    X: createMockIcon('X'),
+    ChevronLeft: createMockIcon('ChevronLeft'),
+    ChevronRight: createMockIcon('ChevronRight'),
+    MoreHorizontal: createMockIcon('MoreHorizontal'),
+  };
+});
+
+// Mock expo-blur
+jest.mock('expo-blur', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  return {
+    BlurView: (props) => React.createElement(View, { ...props, testID: 'expo-blur-view' })
+  };
+});
+
+// Mock react-native-safe-area-context
+jest.mock('react-native-safe-area-context', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  return {
+    SafeAreaProvider: ({ children }) => React.createElement(View, {}, children),
+    SafeAreaView: ({ children }) => React.createElement(View, {}, children),
+    useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }),
+  };
+});
+
+// Mock theme-context
+jest.mock('./src/context/theme-context', () => {
+  return {
+    __esModule: true,
+    ThemeProvider: ({ children }) => children,
+    useThemeContext: () => ({
+      colorScheme: 'light',
+      setColorScheme: jest.fn(),
+      isDark: false,
+      themeName: 'default',
+      setThemeName: jest.fn(),
+      theme: {
+        background: 'hsl(0 0% 100%)',
+        foreground: 'hsl(222.2 84% 4.9%)',
+        card: 'hsl(0 0% 100%)',
+        cardForeground: 'hsl(222.2 84% 4.9%)',
+        popover: 'hsl(0 0% 100%)',
+        popoverForeground: 'hsl(222.2 84% 4.9%)',
+        primary: { DEFAULT: 'hsl(222.2 47.4% 11.2%)', foreground: 'hsl(210 40% 98%)' },
+        secondary: { DEFAULT: 'hsl(210 40% 96.1%)', foreground: 'hsl(222.2 47.4% 11.2%)' },
+        muted: { DEFAULT: 'hsl(210 40% 96.1%)', foreground: 'hsl(215.4 16.3% 46.9%)' },
+        accent: { DEFAULT: 'hsl(210 40% 96.1%)', foreground: 'hsl(222.2 47.4% 11.2%)' },
+        destructive: { DEFAULT: 'hsl(0 84.2% 60.2%)', foreground: 'hsl(210 40% 98%)' },
+        border: 'hsl(214.3 31.8% 91.4%)',
+        input: 'hsl(214.3 31.8% 91.4%)',
+        ring: 'hsl(222.2 84% 4.9%)',
+        shimmer: '#E2E8F0',
+      },
+    }),
+  };
+});

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "cnnative-ui",
+  "version": "1.0.0",
+  "description": "A shadcn/ui + Radix-inspired React Native component library that surpasses both",
+  "keywords": [
+    "react-native",
+    "expo",
+    "ui",
+    "components",
+    "shadcn",
+    "nativecn"
+  ],
+  "license": "MIT",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./tokens": "./src/tokens/index.ts",
+    "./lib": "./src/lib/index.ts",
+    "./hooks": "./src/hooks/index.ts",
+    "./components/*": "./src/components/*/index.ts",
+    "./premium/*": "./src/premium/*/index.ts"
+  },
+  "scripts": {
+    "build": "tsc --noEmit",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watch",
+    "clean": "rimraf dist coverage"
+  },
+  "peerDependencies": {
+    "expo": ">=52.0.0",
+    "nativewind": ">=5.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.76.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "expo": {
+      "optional": true
+    },
+    "react-native-gesture-handler": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react-native": "^0.469.0",
+    "moti": "^0.29.0",
+    "tailwind-merge": "^2.6.0"
+  },
+  "devDependencies": {
+    "@react-native/jest-preset": "^0.85.3",
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^13.2.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.0.8",
+    "@types/react-native": "^0.73.0",
+    "babel-jest": "^29.7.0",
+    "babel-preset-expo": "^56.0.14",
+    "expo-blur": "^56.0.3",
+    "expo-haptics": "^56.0.3",
+    "expo-linear-gradient": "^56.0.4",
+    "expo-local-authentication": "^56.0.4",
+    "jest": "^29.7.0",
+    "jest-expo": "^52.0.0",
+    "jest-html-reporters": "^3.1.7",
+    "memfs": "^4.14.1",
+    "nativewind": "^4.2.4",
+    "react": "19.2.6",
+    "react-native": "^0.85.3",
+    "react-native-gesture-handler": "^3.0.0",
+    "react-native-reanimated": "^4.4.0",
+    "react-native-safe-area-context": "^5.8.0",
+    "react-native-svg": "^15.15.5",
+    "react-test-renderer": "19.2.6",
+    "rimraf": "^6.0.1",
+    "tsd": "^0.31.2",
+    "typescript": "^5.7.3"
+  }
+}

package/src/__tests__/a11y/accessibility.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { Button } from '../../components/button/button';
+import { Text } from '../../components/typography';
+import { Switch } from '../../components/switch/switch';
+import { Checkbox } from '../../components/checkbox/checkbox';
+
+describe('Accessibility Standards', () => {
+  it('Button should be accessible as a button role', () => {
+    const { getByRole } = render(
+      <Button accessibilityRole="button">
+        <Text>Accessible Button</Text>
+      </Button>
+    );
+    expect(getByRole('button')).toBeTruthy();
+  });
+
+  it('Switch should reflect checked accessibility state', () => {
+    const { getByRole } = render(
+      <Switch checked={true} accessibilityRole="switch" accessibilityState={{ checked: true }} />
+    );
+    const switchElement = getByRole('switch');
+    expect(switchElement.props.accessibilityState.checked).toBe(true);
+  });
+
+  it('Checkbox should reflect checked accessibility state', () => {
+    const { getByRole } = render(
+      <Checkbox checked={true} accessibilityRole="checkbox" accessibilityState={{ checked: true }} />
+    );
+    const checkboxElement = getByRole('checkbox');
+    expect(checkboxElement.props.accessibilityState.checked).toBe(true);
+  });
+});

package/src/__tests__/components/badge.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { Badge } from '../../components/badge/badge';
+
+describe('Badge Component', () => {
+  it('renders correctly with default variant', () => {
+    const { getByText } = render(<Badge>Default Badge</Badge>);
+    expect(getByText('Default Badge')).toBeTruthy();
+  });
+
+  it('renders correctly with outline variant', () => {
+    const { getByText, getByTestId } = render(
+      <Badge variant="outline" testID="badge-outline">
+        Outline Badge
+      </Badge>
+    );
+    expect(getByText('Outline Badge')).toBeTruthy();
+    expect(getByTestId('badge-outline')).toBeTruthy();
+  });
+
+  it('renders correctly with destructive variant', () => {
+    const { getByText } = render(<Badge variant="destructive">Destructive Badge</Badge>);
+    expect(getByText('Destructive Badge')).toBeTruthy();
+  });
+});

package/src/__tests__/components/button.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Button } from '../../components/button/button';
+import { Text } from '../../components/typography';
+
+// We wrap the tests with a basic setup
+describe('Button Component', () => {
+  it('renders correctly with children', () => {
+    const { getByText } = render(
+      <Button>
+        <Text>Click Me</Text>
+      </Button>
+    );
+    expect(getByText('Click Me')).toBeTruthy();
+  });
+
+  it('calls onPress when pressed', () => {
+    const onPressMock = jest.fn();
+    const { getByText } = render(
+      <Button onPress={onPressMock}>
+        <Text>Pressable</Text>
+      </Button>
+    );
+
+    fireEvent.press(getByText('Pressable'));
+    expect(onPressMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onPress when disabled', () => {
+    const onPressMock = jest.fn();
+    const { getByText } = render(
+      <Button onPress={onPressMock} disabled>
+        <Text>Disabled</Text>
+      </Button>
+    );
+
+    fireEvent.press(getByText('Disabled'));
+    expect(onPressMock).not.toHaveBeenCalled();
+  });
+
+  it('applies variant classes correctly', () => {
+    const { getByTestId } = render(
+      <Button variant="destructive" testID="my-button">
+        <Text>Destructive</Text>
+      </Button>
+    );
+    
+    // We expect the native element to have the destruct style strings in its className or style 
+    // In React Native testing with nativewind, checking exact styles is complex without a full provider,
+    // but we can check if it renders without throwing.
+    expect(getByTestId('my-button')).toBeTruthy();
+  });
+});

package/src/__tests__/components/card.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../../components/card/card';
+import { Text } from '../../components/typography';
+
+describe('Card Component', () => {
+  it('renders all card subcomponents correctly', () => {
+    const { getByText } = render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Card Title</CardTitle>
+          <CardDescription>Card Description</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Text>Card Content</Text>
+        </CardContent>
+        <CardFooter>
+          <Text>Card Footer</Text>
+        </CardFooter>
+      </Card>
+    );
+
+    expect(getByText('Card Title')).toBeTruthy();
+    expect(getByText('Card Description')).toBeTruthy();
+    expect(getByText('Card Content')).toBeTruthy();
+    expect(getByText('Card Footer')).toBeTruthy();
+  });
+});

package/src/__tests__/components/input.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { Input } from '../../components/input/input';
+
+describe('Input Component', () => {
+  it('renders correctly', () => {
+    const { getByPlaceholderText } = render(
+      <Input placeholder="Enter email" />
+    );
+    expect(getByPlaceholderText('Enter email')).toBeTruthy();
+  });
+
+  it('handles text changes', () => {
+    const onChangeTextMock = jest.fn();
+    const { getByPlaceholderText } = render(
+      <Input placeholder="Type here" onChangeText={onChangeTextMock} />
+    );
+
+    const input = getByPlaceholderText('Type here');
+    fireEvent.changeText(input, 'Hello Nativecn');
+    
+    expect(onChangeTextMock).toHaveBeenCalledWith('Hello Nativecn');
+  });
+
+  it('passes generic props correctly', () => {
+    const { getByDisplayValue } = render(
+      <Input value="test value" secureTextEntry={true} />
+    );
+    
+    const input = getByDisplayValue('test value');
+    expect(input.props.secureTextEntry).toBe(true);
+  });
+});

package/src/__tests__/hooks/use-controllable.test.ts

@@ -0,0 +1,58 @@
+import { renderHook, act } from '@testing-library/react-native';
+import { useControllableState } from '../../hooks/use-controllable';
+
+describe('useControllableState', () => {
+  it('should use defaultProp when no prop is provided', () => {
+    const { result } = renderHook(() => 
+      useControllableState({ defaultProp: 'default' })
+    );
+
+    expect(result.current[0]).toBe('default');
+  });
+
+  it('should use prop when provided', () => {
+    const { result } = renderHook(() => 
+      useControllableState({ prop: 'controlled', defaultProp: 'default' })
+    );
+
+    expect(result.current[0]).toBe('controlled');
+  });
+
+  it('should update state internally when uncontrolled', () => {
+    const { result } = renderHook(() => 
+      useControllableState({ defaultProp: 'default' })
+    );
+
+    act(() => {
+      result.current[1]('new value');
+    });
+
+    expect(result.current[0]).toBe('new value');
+  });
+
+  it('should NOT update state internally when controlled', () => {
+    const { result } = renderHook(() => 
+      useControllableState({ prop: 'controlled', defaultProp: 'default' })
+    );
+
+    act(() => {
+      result.current[1]('new value');
+    });
+
+    // Still 'controlled' because the parent didn't change the prop
+    expect(result.current[0]).toBe('controlled');
+  });
+
+  it('should call onChange with new value', () => {
+    const onChange = jest.fn();
+    const { result } = renderHook(() => 
+      useControllableState({ defaultProp: 'default', onChange })
+    );
+
+    act(() => {
+      result.current[1]('new value');
+    });
+
+    expect(onChange).toHaveBeenCalledWith('new value');
+  });
+});

package/src/__tests__/integration.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { NativecnProvider } from '../context/provider';
+import { Button } from '../components/button/button';
+import { Text } from '../components/typography';
+import { ToastProvider, useToastContext } from '../context/toast-context';
+
+const TestComponent = () => {
+  const { toast } = useToastContext();
+  
+  return (
+    <Button onPress={() => toast({ title: 'Success', description: 'Integration works' })}>
+      <Text>Trigger Toast</Text>
+    </Button>
+  );
+};
+
+describe('Integration Tests', () => {
+  it('should render components within the global provider and trigger context actions', () => {
+    // In React Native Testing Library, rendering the provider tree evaluates integration
+    const { getByText } = render(
+      <NativecnProvider>
+        <TestComponent />
+      </NativecnProvider>
+    );
+
+    const btn = getByText('Trigger Toast');
+    expect(btn).toBeTruthy();
+
+    // Fire the button, which triggers the toast context. 
+    // The visual toast won't appear instantaneously in the same tick without advanceTimers, 
+    // but the context function will be executed without throwing.
+    fireEvent.press(btn);
+  });
+});

package/src/__tests__/lib/utils.test.ts

@@ -0,0 +1,23 @@
+import { cn } from '../../lib/utils';
+
+describe('utils', () => {
+  describe('cn', () => {
+    it('should merge class names correctly', () => {
+      expect(cn('bg-red-500', 'text-white')).toBe('bg-red-500 text-white');
+    });
+
+    it('should handle conditional classes', () => {
+      expect(cn('bg-red-500', true && 'text-white', false && 'p-4')).toBe('bg-red-500 text-white');
+    });
+
+    it('should resolve tailwind conflicts using tailwind-merge', () => {
+      // tailwind-merge resolves conflicts by keeping the last class
+      expect(cn('bg-red-500 bg-blue-500')).toBe('bg-blue-500');
+      expect(cn('p-2 p-4')).toBe('p-4');
+    });
+
+    it('should handle arrays of classes', () => {
+      expect(cn(['bg-red-500', 'text-white'])).toBe('bg-red-500 text-white');
+    });
+  });
+});

package/src/__tests__/mocks/handlers.ts

@@ -0,0 +1,19 @@
+// Mock definitions for integration testing environments
+export const mockHaptics = {
+  impactAsync: jest.fn(),
+  notificationAsync: jest.fn(),
+};
+
+export const mockReanimated = {
+  useSharedValue: jest.fn((init) => ({ value: init })),
+  useAnimatedStyle: jest.fn(() => ({})),
+  withSpring: jest.fn((val) => val),
+  withTiming: jest.fn((val) => val),
+};
+
+export const mockThemeContext = {
+  theme: 'light',
+  isDark: false,
+  setColorScheme: jest.fn(),
+  toggleTheme: jest.fn(),
+};