@idealyst/cli 1.0.24 → 1.0.26

package/templates/native/README.md

@@ -1,86 +1,86 @@
-# {{projectName}}
-
-{{description}}
-
-## Getting Started
-
-This is a React Native application built with the Idealyst Framework.
-
-### Prerequisites
-
-- Node.js 18+
-- Yarn
-- React Native development environment
-- Android Studio (for Android development)
-- Xcode (for iOS development)
-
-### Installation
-
-Install dependencies:
-```bash
-yarn install
-```
-
-### Running the App
-
-Start the Metro bundler:
-```bash
-yarn start
-```
-
-Run on Android:
-```bash
-yarn android
-```
-
-Run on iOS:
-```bash
-yarn ios
-```
-
-### Project Structure
-
-```
-{{projectName}}/
-├── src/
-│   └── App.tsx        # Main app component
-├── android/           # Android-specific code
-├── ios/               # iOS-specific code
-├── babel.config.js    # Babel configuration
-├── metro.config.js    # Metro configuration
-└── tsconfig.json      # TypeScript configuration
-```
-
-### Features
-
-- **Idealyst Components**: Pre-built UI components
-- **Idealyst Navigation**: Cross-platform navigation
-- **Idealyst Theme**: Consistent theming system
-- **TypeScript**: Full type safety
-- **React Native 0.80.1**: Latest stable version
-
-### Development
-
-The app uses the Idealyst Framework for consistent UI and navigation across platforms.
-
-Edit `src/App.tsx` to start building your application.
-
-### Building for Production
-
-Build Android APK:
-```bash
-yarn build:android
-```
-
-### Testing
-
-Run tests:
-```bash
-yarn test
-```
-
-### Learn More
-
-- [Idealyst Framework Documentation](https://github.com/your-username/idealyst-framework)
-- [React Native Documentation](https://reactnative.dev/)
+# {{projectName}}
+
+{{description}}
+
+## Getting Started
+
+This is a React Native application built with the Idealyst Framework.
+
+### Prerequisites
+
+- Node.js 18+
+- Yarn
+- React Native development environment
+- Android Studio (for Android development)
+- Xcode (for iOS development)
+
+### Installation
+
+Install dependencies:
+```bash
+yarn install
+```
+
+### Running the App
+
+Start the Metro bundler:
+```bash
+yarn start
+```
+
+Run on Android:
+```bash
+yarn android
+```
+
+Run on iOS:
+```bash
+yarn ios
+```
+
+### Project Structure
+
+```
+{{projectName}}/
+├── src/
+│   └── App.tsx        # Main app component
+├── android/           # Android-specific code
+├── ios/               # iOS-specific code
+├── babel.config.js    # Babel configuration
+├── metro.config.js    # Metro configuration
+└── tsconfig.json      # TypeScript configuration
+```
+
+### Features
+
+- **Idealyst Components**: Pre-built UI components
+- **Idealyst Navigation**: Cross-platform navigation
+- **Idealyst Theme**: Consistent theming system
+- **TypeScript**: Full type safety
+- **React Native 0.80.1**: Latest stable version
+
+### Development
+
+The app uses the Idealyst Framework for consistent UI and navigation across platforms.
+
+Edit `src/App.tsx` to start building your application.
+
+### Building for Production
+
+Build Android APK:
+```bash
+yarn build:android
+```
+
+### Testing
+
+Run tests:
+```bash
+yarn test
+```
+
+### Learn More
+
+- [Idealyst Framework Documentation](https://github.com/your-username/idealyst-framework)
+- [React Native Documentation](https://reactnative.dev/)
 - [TypeScript Documentation](https://www.typescriptlang.org/) 

package/templates/native/app.json

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

package/templates/native/babel.config.js

@@ -1,10 +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',
-  ],
+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/templates/native/index.js

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

package/templates/native/metro.config.js

@@ -1,27 +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));
+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/templates/native/package.json

@@ -1,10 +1,10 @@
-{
-  "name": "{{packageName}}",
-  "version": "{{version}}",
-  "description": "{{description}}",
-  "private": true,
-  "idealyst": {
-    "framework": "react-native",
-    "version": "1.0.3"
-  }
+{
+  "name": "{{packageName}}",
+  "version": "{{version}}",
+  "description": "{{description}}",
+  "private": true,
+  "idealyst": {
+    "framework": "react-native",
+    "version": "1.0.3"
+  }
 } 

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

@@ -0,0 +1,72 @@
+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();
+
+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/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/templates/native/tsconfig.json

@@ -1,30 +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"
-  ]
+{
+  "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"
+  ]
 }