@idealyst/cli 1.0.27 → 1.0.29

package/templates/native/__tests__/components.test.tsx

@@ -0,0 +1,300 @@
+/**
+ * Example component tests for React Native
+ * @format
+ */
+
+import React from 'react';
+import ReactTestRenderer from 'react-test-renderer';
+
+describe('React Native Component Testing Examples', () => {
+  // Example 1: Simple Text Component
+  const SimpleText = ({ text, color = 'black' }: { text: string; color?: string }) => {
+    return React.createElement('Text', { style: { color }, testID: 'simple-text' }, text);
+  };
+
+  describe('SimpleText Component', () => {
+    it('renders text correctly', () => {
+      const tree = ReactTestRenderer.create(<SimpleText text="Hello World" />);
+      const textComponent = tree.root.findByProps({ testID: 'simple-text' });
+      expect(textComponent.children).toEqual(['Hello World']);
+    });
+
+    it('applies custom color', () => {
+      const tree = ReactTestRenderer.create(<SimpleText text="Colored Text" color="red" />);
+      const textComponent = tree.root.findByProps({ testID: 'simple-text' });
+      expect(textComponent.props.style.color).toBe('red');
+    });
+
+    it('uses default color when not specified', () => {
+      const tree = ReactTestRenderer.create(<SimpleText text="Default Color" />);
+      const textComponent = tree.root.findByProps({ testID: 'simple-text' });
+      expect(textComponent.props.style.color).toBe('black');
+    });
+  });
+
+  // Example 2: Button with Press Handler
+  const PressableButton = ({ 
+    title, 
+    onPress, 
+    disabled = false 
+  }: { 
+    title: string; 
+    onPress: () => void; 
+    disabled?: boolean; 
+  }) => {
+    return React.createElement(
+      'TouchableOpacity',
+      {
+        testID: 'pressable-button',
+        onPress: disabled ? undefined : onPress,
+        style: { opacity: disabled ? 0.5 : 1 }
+      },
+      React.createElement('Text', { testID: 'button-text' }, title)
+    );
+  };
+
+  describe('PressableButton Component', () => {
+    it('renders button with title', () => {
+      const mockPress = jest.fn();
+      const tree = ReactTestRenderer.create(
+        <PressableButton title="Press Me" onPress={mockPress} />
+      );
+
+      const buttonText = tree.root.findByProps({ testID: 'button-text' });
+      expect(buttonText.children).toEqual(['Press Me']);
+    });
+
+    it('calls onPress when pressed', () => {
+      const mockPress = jest.fn();
+      const tree = ReactTestRenderer.create(
+        <PressableButton title="Press Me" onPress={mockPress} />
+      );
+
+      const button = tree.root.findByProps({ testID: 'pressable-button' });
+      ReactTestRenderer.act(() => {
+        button.props.onPress();
+      });
+
+      expect(mockPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onPress when disabled', () => {
+      const mockPress = jest.fn();
+      const tree = ReactTestRenderer.create(
+        <PressableButton title="Disabled" onPress={mockPress} disabled />
+      );
+
+      const button = tree.root.findByProps({ testID: 'pressable-button' });
+      expect(button.props.onPress).toBeUndefined();
+      expect(button.props.style.opacity).toBe(0.5);
+    });
+  });
+
+  // Example 3: List Component
+  const ItemList = ({ items }: { items: string[] }) => {
+    return React.createElement(
+      'FlatList',
+      {
+        testID: 'item-list',
+        data: items,
+        renderItem: ({ item, index }: { item: string; index: number }) =>
+          React.createElement(
+            'View',
+            { key: index, testID: `item-${index}` },
+            React.createElement('Text', { testID: `item-text-${index}` }, item)
+          ),
+        keyExtractor: (item: string, index: number) => `${item}-${index}`
+      }
+    );
+  };
+
+  describe('ItemList Component', () => {
+    it('renders list with items', () => {
+      const items = ['Item 1', 'Item 2', 'Item 3'];
+      const tree = ReactTestRenderer.create(<ItemList items={items} />);
+
+      const flatList = tree.root.findByProps({ testID: 'item-list' });
+      expect(flatList.props.data).toEqual(items);
+    });
+
+    it('generates correct key extractor', () => {
+      const items = ['Apple', 'Banana'];
+      const tree = ReactTestRenderer.create(<ItemList items={items} />);
+
+      const flatList = tree.root.findByProps({ testID: 'item-list' });
+      const keyExtractor = flatList.props.keyExtractor;
+      
+      expect(keyExtractor('Apple', 0)).toBe('Apple-0');
+      expect(keyExtractor('Banana', 1)).toBe('Banana-1');
+    });
+  });
+
+  // Example 4: Form Input Component
+  const TextInput = ({ 
+    value, 
+    onChangeText, 
+    placeholder,
+    secureTextEntry = false 
+  }: { 
+    value: string; 
+    onChangeText: (text: string) => void; 
+    placeholder?: string;
+    secureTextEntry?: boolean;
+  }) => {
+    return React.createElement('TextInput', {
+      testID: 'text-input',
+      value,
+      onChangeText,
+      placeholder,
+      secureTextEntry,
+      style: { borderWidth: 1, padding: 10 }
+    });
+  };
+
+  describe('TextInput Component', () => {
+    it('renders with initial value', () => {
+      const mockChange = jest.fn();
+      const tree = ReactTestRenderer.create(
+        <TextInput value="Initial Value" onChangeText={mockChange} />
+      );
+
+      const input = tree.root.findByProps({ testID: 'text-input' });
+      expect(input.props.value).toBe('Initial Value');
+    });
+
+    it('calls onChangeText when text changes', () => {
+      const mockChange = jest.fn();
+      const tree = ReactTestRenderer.create(
+        <TextInput value="" onChangeText={mockChange} />
+      );
+
+      const input = tree.root.findByProps({ testID: 'text-input' });
+      ReactTestRenderer.act(() => {
+        input.props.onChangeText('New Text');
+      });
+
+      expect(mockChange).toHaveBeenCalledWith('New Text');
+    });
+
+    it('shows placeholder when provided', () => {
+      const mockChange = jest.fn();
+      const tree = ReactTestRenderer.create(
+        <TextInput 
+          value="" 
+          onChangeText={mockChange} 
+          placeholder="Enter text here" 
+        />
+      );
+
+      const input = tree.root.findByProps({ testID: 'text-input' });
+      expect(input.props.placeholder).toBe('Enter text here');
+    });
+
+    it('enables secure text entry when specified', () => {
+      const mockChange = jest.fn();
+      const tree = ReactTestRenderer.create(
+        <TextInput 
+          value="" 
+          onChangeText={mockChange} 
+          secureTextEntry 
+        />
+      );
+
+      const input = tree.root.findByProps({ testID: 'text-input' });
+      expect(input.props.secureTextEntry).toBe(true);
+    });
+  });
+
+  // Example 5: Component with Hooks
+  const Counter = ({ initialValue = 0 }: { initialValue?: number }) => {
+    const [count, setCount] = React.useState(initialValue);
+
+    return React.createElement(
+      'View',
+      { testID: 'counter-container' },
+      React.createElement('Text', { testID: 'counter-value' }, count.toString()),
+      React.createElement(
+        'TouchableOpacity',
+        {
+          testID: 'increment-button',
+          onPress: () => setCount(prev => prev + 1)
+        },
+        React.createElement('Text', null, '+')
+      ),
+      React.createElement(
+        'TouchableOpacity',
+        {
+          testID: 'decrement-button',
+          onPress: () => setCount(prev => prev - 1)
+        },
+        React.createElement('Text', null, '-')
+      ),
+      React.createElement(
+        'TouchableOpacity',
+        {
+          testID: 'reset-button',
+          onPress: () => setCount(initialValue)
+        },
+        React.createElement('Text', null, 'Reset')
+      )
+    );
+  };
+
+  describe('Counter Component', () => {
+    it('renders with initial value', () => {
+      const tree = ReactTestRenderer.create(<Counter initialValue={5} />);
+      const counterValue = tree.root.findByProps({ testID: 'counter-value' });
+      expect(counterValue.children).toEqual(['5']);
+    });
+
+    it('increments counter when increment button is pressed', () => {
+      const tree = ReactTestRenderer.create(<Counter />);
+      const counterValue = tree.root.findByProps({ testID: 'counter-value' });
+      const incrementButton = tree.root.findByProps({ testID: 'increment-button' });
+
+      expect(counterValue.children).toEqual(['0']);
+
+      ReactTestRenderer.act(() => {
+        incrementButton.props.onPress();
+      });
+
+      expect(counterValue.children).toEqual(['1']);
+    });
+
+    it('decrements counter when decrement button is pressed', () => {
+      const tree = ReactTestRenderer.create(<Counter initialValue={10} />);
+      const counterValue = tree.root.findByProps({ testID: 'counter-value' });
+      const decrementButton = tree.root.findByProps({ testID: 'decrement-button' });
+
+      expect(counterValue.children).toEqual(['10']);
+
+      ReactTestRenderer.act(() => {
+        decrementButton.props.onPress();
+      });
+
+      expect(counterValue.children).toEqual(['9']);
+    });
+
+    it('resets counter to initial value when reset is pressed', () => {
+      const tree = ReactTestRenderer.create(<Counter initialValue={5} />);
+      const counterValue = tree.root.findByProps({ testID: 'counter-value' });
+      const incrementButton = tree.root.findByProps({ testID: 'increment-button' });
+      const resetButton = tree.root.findByProps({ testID: 'reset-button' });
+
+      // Increment a few times
+      ReactTestRenderer.act(() => {
+        incrementButton.props.onPress();
+        incrementButton.props.onPress();
+      });
+
+      expect(counterValue.children).toEqual(['7']);
+
+      // Reset
+      ReactTestRenderer.act(() => {
+        resetButton.props.onPress();
+      });
+
+      expect(counterValue.children).toEqual(['5']);
+    });
+  });
+});

package/templates/native/jest.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  preset: 'react-native',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testMatch: [
+    '**/__tests__/**/*.{ts,tsx,js}',
+    '**/*.{test,spec}.{ts,tsx,js}'
+  ],
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!(react-native|@react-native|@idealyst)/)',
+  ],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/index.ts',
+  ],
+  coverageDirectory: 'coverage',
+  testEnvironment: 'jsdom',
+};

package/templates/native/jest.setup.js

@@ -0,0 +1,12 @@
+// Global test setup for React Native tests
+import 'react-native-gesture-handler/jestSetup';
+
+// Mock react-native modules that are not available in test environment
+jest.mock('react-native-reanimated', () => {
+  const Reanimated = require('react-native-reanimated/mock');
+  Reanimated.default.call = () => {};
+  return Reanimated;
+});
+
+// Silence the warning: Animated: `useNativeDriver` is not supported
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

package/templates/native/package.json

@@ -3,6 +3,40 @@
   "version": "{{version}}",
   "description": "{{description}}",
   "private": true,
+  "scripts": {
+    "start": "react-native start",
+    "ios": "react-native run-ios",
+    "android": "react-native run-android",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+  },
+  "dependencies": {
+    "@idealyst/components": "^1.0.21",
+    "@idealyst/navigation": "^1.0.21",
+    "@idealyst/theme": "^1.0.21",
+    "react": "^18.2.0",
+    "react-native": "^0.73.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
+    "@react-native/babel-preset": "^0.73.0",
+    "@react-native/eslint-config": "^0.73.0",
+    "@react-native/metro-config": "^0.73.0",
+    "@react-native/typescript-config": "^0.73.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.6",
+    "@types/react-test-renderer": "^18.0.7",
+    "eslint": "^8.19.0",
+    "jest": "^29.6.3",
+    "metro-react-native-babel-preset": "^0.76.8",
+    "prettier": "^2.4.1",
+    "react-test-renderer": "^18.2.0",
+    "typescript": "^5.0.4"
+  },
   "idealyst": {
     "framework": "react-native",
     "version": "1.0.3"

package/templates/native/src/App-with-trpc.tsx

@@ -1,22 +1,9 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { httpBatchLink } from '@trpc/client';
-import { UnistylesRegistry } from 'react-native-unistyles';
 import { Screen, Text, View } from '@idealyst/components';
-import { breakpoints, lightTheme, darkTheme } from '@idealyst/theme';
 import { trpc } from './utils/trpc';
 
-// Register the Unistyles themes and breakpoints
-UnistylesRegistry
-  .addBreakpoints(breakpoints)
-  .addThemes({
-    light: lightTheme,
-    dark: darkTheme,
-  })
-  .addConfig({
-    adaptiveThemes: true,
-  });
-
 // Create tRPC client
 const queryClient = new QueryClient();
 

package/templates/shared/__tests__/shared.test.ts

@@ -0,0 +1,39 @@
+import { add_stuff } from '../src/index';
+
+describe('Shared Library', () => {
+  it('should export add_stuff', () => {
+    expect(add_stuff).toBeDefined();
+    expect(typeof add_stuff).toBe('string');
+    expect(add_stuff).toBe('here');
+  });
+});
+
+describe('Sample Shared Tests', () => {
+  it('should pass a basic test', () => {
+    expect(1 + 1).toBe(2);
+  });
+
+  it('should handle string operations', () => {
+    const testString = 'Hello World';
+    expect(testString).toContain('World');
+    expect(testString.length).toBe(11);
+  });
+
+  it('should work with objects', () => {
+    const testObj = { name: 'test', value: 42 };
+    expect(testObj).toHaveProperty('name');
+    expect(testObj).toHaveProperty('value', 42);
+  });
+
+  it('should handle arrays', () => {
+    const testArray = [1, 2, 3, 4, 5];
+    expect(testArray).toHaveLength(5);
+    expect(testArray).toContain(3);
+    expect(testArray.filter(x => x > 3)).toEqual([4, 5]);
+  });
+
+  it('should work with async operations', async () => {
+    const result = await Promise.resolve('async test');
+    expect(result).toBe('async test');
+  });
+});

package/templates/shared/jest.config.js

@@ -0,0 +1,22 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  roots: ['<rootDir>/src', '<rootDir>/__tests__'],
+  testMatch: [
+    '**/__tests__/**/*.{ts,tsx,js}',
+    '**/*.{test,spec}.{ts,tsx,js}'
+  ],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/index.ts',
+  ],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['text', 'lcov'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  testTimeout: 10000,
+};

package/templates/shared/package.json

@@ -5,6 +5,13 @@
   "main": "src/index.ts",
   "module": "src/index.ts",
   "types": "src/index.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "type-check": "tsc --noEmit"
+  },
   "peerDependencies": {
     "@idealyst/components": "^1.0.21",
     "@idealyst/navigation": "^1.0.21",
@@ -21,9 +28,12 @@
     "@idealyst/components": "^1.0.21",
     "@idealyst/navigation": "^1.0.21",
     "@idealyst/theme": "^1.0.21",
+    "@types/jest": "^29.5.12",
     "@types/react": "^19.1.0",
+    "jest": "^29.7.0",
     "react": "^19.1.0",
     "react-native": "^0.80.1",
+    "ts-jest": "^29.1.2",
     "typescript": "^5.0.0"
   },
   "files": [