@idealyst/cli 1.0.32 → 1.0.34

package/dist/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/dist/templates/native/app.json

@@ -0,0 +1,5 @@
+{
+  "name": "{{appName}}",
+  "displayName": "{{appName}}",
+  "react-native-version": "0.80.1"
+} 

package/dist/templates/native/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    ['react-native-unistyles/plugin', {
+      root: 'src',
+      autoProcessPaths: ['@idealyst/components', '@idealyst/navigation', '@idealyst/theme'],
+    }],
+    'react-native-reanimated/plugin',
+  ],
+};

package/dist/templates/native/index.js

@@ -0,0 +1,6 @@
+import '@idealyst/theme/unistyles';
+
+import { AppRegistry } from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('{{projectName}}', () => App); 

package/dist/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/dist/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/dist/templates/native/metro.config.js

@@ -0,0 +1,27 @@
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const path = require('path');
+
+const { wrapWithReanimatedMetroConfig } = require('react-native-reanimated/metro-config');
+
+const config = {
+  projectRoot: __dirname,
+  watchFolders: [
+    // Add the workspace root to watch folders so Metro can watch workspace packages
+    path.resolve(__dirname, '..'),
+  ],
+  resolver: {
+    nodeModulesPaths: [
+      path.resolve(__dirname, 'node_modules'),
+      // Add the workspace root node_modules
+      path.resolve(__dirname, '..', 'node_modules'),
+    ],
+    // Important for Idealyst to use .native extensions for React Native (eg: @idealyst/components/src/Button/Button.native.tsx)
+    sourceExts: ['native.tsx', 'native.ts', 'tsx', 'ts', 'native.jsx', 'native.js', 'jsx', 'js', 'json'],
+  },
+  watcher: {
+    // When configuring custom components with .native extensions, make sure the watcher looks for them
+    additionalExts: ['native.tsx', 'native.ts', 'native.jsx', 'native.js'],
+  },
+};
+
+module.exports = wrapWithReanimatedMetroConfig(mergeConfig(getDefaultConfig(__dirname), config));

package/dist/templates/native/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "{{packageName}}",
+  "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/dist/templates/native/src/App-with-trpc.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+import { Screen, Text, View } from '@idealyst/components';
+import { trpc } from './utils/trpc';
+
+// Create tRPC client
+const queryClient = new QueryClient();
+
+const trpcClient = trpc.createClient({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000/trpc', // Update this to your API URL
+      // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
+      // Optional: Add headers for authentication
+      // headers() {
+      //   return {
+      //     authorization: getAuthToken(),
+      //   };
+      // },
+    }),
+  ],
+});
+
+function App() {
+  // Example tRPC usage
+  const { data, isLoading, error } = trpc.hello.useQuery({ name: 'React Native' });
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <Screen>
+          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
+            <Text variant="h1" style={{ textAlign: 'center', marginBottom: 20 }}>
+              Welcome to {{appName}}!
+            </Text>
+            <Text variant="body" style={{ textAlign: 'center', marginBottom: 20 }}>
+              This is a React Native app built with the Idealyst Framework
+            </Text>
+            
+            {/* tRPC Example */}
+            <View style={{ marginTop: 20, alignItems: 'center' }}>
+              <Text variant="h3" style={{ marginBottom: 10 }}>tRPC Example:</Text>
+              {isLoading && <Text>Loading...</Text>}
+              {error && <Text>Error: {error.message}</Text>}
+              {data && <Text style={{ textAlign: 'center' }}>{data.greeting}</Text>}
+            </View>
+            
+            <Text variant="caption" style={{ textAlign: 'center', marginTop: 30 }}>
+              Edit src/App.tsx to get started
+            </Text>
+          </View>
+        </Screen>
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}
+
+export default App; 

package/dist/templates/native/src/utils/trpc.ts

@@ -0,0 +1,127 @@
+import { createTRPCReact } from '@trpc/react-query';
+import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
+
+// Import your API types here when you have an API project
+// Example: import type { AppRouter } from '@your-workspace/api';
+
+// For now, we'll use a generic type that you can replace
+type AppRouter = any;
+
+// Create the tRPC React hooks
+export const trpc = createTRPCReact<AppRouter>();
+
+// Create a vanilla client (for use outside of React components)
+export const trpcClient = createTRPCProxyClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000/trpc', // Update this to match your API URL
+      // Optional: Add headers for authentication
+      // headers() {
+      //   return {
+      //     authorization: getAuthToken(),
+      //   };
+      // },
+    }),
+  ],
+});
+
+/*
+Usage Examples for React Native:
+
+1. First, install the required dependencies:
+   yarn add @trpc/client @trpc/react-query @tanstack/react-query
+
+2. Replace the AppRouter type import above with your actual API router:
+   import type { AppRouter } from '@your-workspace/api';
+
+3. Set up the tRPC provider in your App component:
+
+```tsx
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+import { trpc } from './src/utils/trpc';
+
+const queryClient = new QueryClient();
+
+const trpcClient = trpc.createClient({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000/trpc', // Use your computer's IP for device testing
+      // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
+    }),
+  ],
+});
+
+function App() {
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+       // Your app components
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}
+
+export default App;
+```
+
+4. Use tRPC in your React Native components:
+
+```tsx
+import React from 'react';
+import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
+import { trpc } from '../utils/trpc';
+
+function UsersList() {
+  const { data: users, isLoading, refetch } = trpc.users.getAll.useQuery();
+  const createUser = trpc.users.create.useMutation({
+    onSuccess: () => {
+      refetch(); // Refresh the list after creating
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <View>
+        <Text>Loading...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView>
+      {users?.map(user => (
+        <View key={user.id}>
+          <Text>{user.name}</Text>
+          <Text>{user.email}</Text>
+        </View>
+      ))}
+      <TouchableOpacity
+        onPress={() => createUser.mutate({ 
+          email: 'test@example.com', 
+          name: 'Test User' 
+        })}
+      >
+        <Text>Create User</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+}
+```
+
+5. For device testing, make sure to:
+   - Use your computer's IP address instead of localhost
+   - Ensure your API server is accessible from the device
+   - Consider using ngrok for external testing
+
+6. Error handling example:
+
+```tsx
+const { data, error, isLoading } = trpc.users.getAll.useQuery();
+
+if (error) {
+  return <Text>Error: {error.message}</Text>;
+}
+```
+*/ 

package/dist/templates/native/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "extends": "@react-native/typescript-config/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "jsx": "react-native",
+    "lib": ["es2017"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "strict": true,
+    "target": "esnext",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "src/**/*",
+    "index.js"
+  ],
+  "exclude": [
+    "node_modules",
+    "android",
+    "ios"
+  ]
+}