@idealyst/cli 1.0.90 → 1.0.91

package/template/packages/mobile/__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/template/packages/mobile/app.json

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

package/template/packages/mobile/babel.config.js

@@ -0,0 +1,11 @@
+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',
+    'react-native-worklets/plugin',
+  ],
+};

package/template/packages/mobile/index.js

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

package/template/packages/mobile/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/template/packages/mobile/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/template/packages/mobile/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 find hoisted node_modules
+    path.resolve(__dirname, '../..'),
+  ],
+  resolver: {
+    nodeModulesPaths: [
+      path.resolve(__dirname, 'node_modules'),
+      // Add the workspace root node_modules for hoisted packages
+      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', 'cjs'],
+  },
+  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/template/packages/mobile/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@{{workspaceScope}}/mobile",
+  "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": "^{{idealystVersion}}",
+    "@idealyst/navigation": "^{{idealystVersion}}",
+    "@idealyst/theme": "^{{idealystVersion}}",
+    "@{{workspaceScope}}/shared": "workspace:*",
+    "@{{workspaceScope}}/database": "workspace:*",
+    "@tanstack/react-query": "^5.83.0",
+    "@trpc/client": "^11.5.1",
+    "@trpc/react-query": "^11.5.1",
+    "@trpc/server": "^11.5.1",
+    "react": "^18.2.0",
+    "react-native": "^0.73.0",
+    "react-native-svg": "^15.8.0",
+    "react-native-worklets": "^0.6.1"
+  },
+  "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/template/packages/mobile/src/App-with-trpc-and-shared.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { App } from '@{{workspaceScope}}/shared';
+
+function NativeApp() {
+  return <App />;
+}
+
+export default NativeApp;

package/template/packages/mobile/src/App-with-trpc.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { NavigatorProvider } from '@idealyst/navigation';
+import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
+
+// Create tRPC client using shared factory
+const queryClient = new QueryClient();
+
+const trpcClient = createTRPCClient({
+  apiUrl: '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() {
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <NavigatorProvider route={AppRouter} />
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}
+
+export default App; 

package/template/packages/mobile/src/App.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { App } from '@{{workspaceScope}}/shared';
+
+function NativeApp() {
+  return <App />;
+}
+
+export default NativeApp;

package/template/packages/mobile/src/utils/trpc.ts

@@ -0,0 +1,7 @@
+// Import tRPC client utilities from shared package
+export { 
+  trpc, 
+  createTRPCClient, 
+  createVanillaTRPCClient 
+} from '@{{workspaceScope}}/shared';
+export type { TRPCClientConfig, AppRouter } from '@{{workspaceScope}}/shared'; 

package/template/packages/mobile/tsconfig.json

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

package/template/packages/shared/README.md

@@ -0,0 +1,135 @@
+# {{projectName}}
+
+{{description}}
+
+## Getting Started
+
+This is a shared component library built with the Idealyst Framework that can be used across React Native and React web applications. It exports source TypeScript files directly for seamless integration in monorepo setups.
+
+### Prerequisites
+
+- Node.js 18+
+- Yarn
+
+### Installation
+
+Install dependencies:
+```bash
+yarn install
+```
+
+### Development
+
+Run tests:
+```bash
+yarn test
+```
+
+Type checking:
+```bash
+yarn type-check
+```
+
+## Usage
+
+Import the HelloWorld component in your React or React Native app:
+
+```typescript
+import { HelloWorld } from '@{{workspaceName}}/shared';
+
+function App() {
+  return <HelloWorld name="Developer" />;
+}
+```
+
+## Component
+
+### HelloWorld
+
+A simple welcome component that works on both web and mobile platforms.
+
+**Props:**
+- `name?: string` - Name to display in the greeting (defaults to "World")
+
+**Example:**
+```typescript
+<HelloWorld name="Alice" />
+```
+
+### Project Structure
+
+```
+{{projectName}}/
+├── src/
+│   ├── components/    # Shared components
+│   ├── utils/         # Utility functions
+│   ├── types/         # TypeScript types
+│   └── index.ts       # Main export file
+├── dist/              # Built library (generated)
+├── rollup.config.js   # Build configuration
+└── tsconfig.json      # TypeScript configuration
+```
+
+### Features
+
+- **Cross-platform**: Works on both React Native and React web
+- **TypeScript**: Full type safety
+- **Tree-shakeable**: Optimized for bundle size
+- **Peer Dependencies**: Lightweight by design
+- **Idealyst Theme Integration**: Compatible with the Idealyst theming system
+
+### Usage
+
+After building, you can import and use the library in your projects:
+
+```tsx
+import { SharedComponent, toTitleCase, ComponentProps } from '{{packageName}}';
+
+// Use the shared component
+<SharedComponent 
+  title="Hello World" 
+  description="This works on both web and mobile!" 
+/>
+
+// Use utility functions
+const formatted = toTitleCase('hello world'); // "Hello World"
+```
+
+### Building for Production
+
+Build the library:
+```bash
+yarn build
+```
+
+This creates:
+- `dist/index.js` - CommonJS build
+- `dist/index.esm.js` - ES modules build
+- `dist/index.d.ts` - TypeScript declarations
+
+### Publishing
+
+Before publishing, make sure to:
+
+1. Update the version in `package.json`
+2. Build the library: `yarn build`
+3. Publish to npm: `npm publish`
+
+### Development in Monorepo
+
+If you're using this in a monorepo, you can reference it directly:
+
+```json
+{
+  "dependencies": {
+    "{{packageName}}": "workspace:*"
+  }
+}
+```
+
+### Learn More
+
+- [Idealyst Framework Documentation](https://github.com/your-username/idealyst-framework)
+- [React Native Documentation](https://reactnative.dev/)
+- [React Documentation](https://react.dev/)
+- [Rollup Documentation](https://rollupjs.org/)