@idealyst/cli 1.0.24 → 1.0.26

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+import { UnistylesRegistry } from 'react-native-unistyles';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { trpc } from './utils/trpc';
+import { Screen, Text, View } from '@idealyst/components';
+import { breakpoints, lightTheme, darkTheme } from '@idealyst/theme';
+
+// 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 match your API URL
+      // Optional: Add headers for authentication
+      // headers() {
+      //   return {
+      //     authorization: getAuthToken(),
+      //   };
+      // },
+    }),
+  ],
+});
+
+function HomePage() {
+  // Example tRPC usage
+  const { data, isLoading, error } = trpc.hello.useQuery({ name: 'World' });
+
+  return (
+    <Screen>
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <Text variant="h1">Welcome to {{projectName}}!</Text>
+        <Text variant="body">
+          This is a React Web app built with the Idealyst Framework
+        </Text>
+        
+        {/* tRPC Example */}
+        <View style={{ marginTop: 20 }}>
+          <Text variant="h3">tRPC Example:</Text>
+          {isLoading && <Text>Loading...</Text>}
+          {error && <Text>Error: {error.message}</Text>}
+          {data && <Text>{data.greeting}</Text>}
+        </View>
+        
+        <Text variant="caption" style={{ marginTop: 20 }}>
+          Edit src/App.tsx to get started
+        </Text>
+      </View>
+    </Screen>
+  );
+}
+
+function App() {
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+          </Routes>
+        </BrowserRouter>
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}
+
+export default App; 

package/templates/web/src/App.tsx

@@ -1,15 +1,15 @@
-import { BrowserRouter } from 'react-router-dom';
-import { ExampleStackRouter, } from '@idealyst/navigation/examples';
-import { NavigatorProvider } from '@idealyst/navigation';
-
-function App() {
-  return (
-    <div className="App">
-      <BrowserRouter>
-        <NavigatorProvider route={ExampleStackRouter} />
-      </BrowserRouter>
-    </div>
-  );  
-}
-
+import { BrowserRouter } from 'react-router-dom';
+import { ExampleStackRouter, } from '@idealyst/navigation/examples';
+import { NavigatorProvider } from '@idealyst/navigation';
+
+function App() {
+  return (
+    <div className="App">
+      <BrowserRouter>
+        <NavigatorProvider route={ExampleStackRouter} />
+      </BrowserRouter>
+    </div>
+  );  
+}
+
 export default App; 

package/templates/web/src/main.tsx

@@ -1,25 +1,25 @@
-import '@idealyst/navigation/examples/unistyles';
-
-import * as React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
-
-// Hydrate the app if it's SSR, otherwise render normally
-const container = document.getElementById('root')!;
-
-if (container.hasChildNodes()) {
-  // If the container has child nodes, it means we're hydrating SSR content
-  ReactDOM.hydrateRoot(container, 
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>
-  );
-} else {
-  // Otherwise, render normally (for development)
-  const root = ReactDOM.createRoot(container);
-  root.render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>
-  );
+import '@idealyst/navigation/examples/unistyles';
+
+import * as React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+
+// Hydrate the app if it's SSR, otherwise render normally
+const container = document.getElementById('root')!;
+
+if (container.hasChildNodes()) {
+  // If the container has child nodes, it means we're hydrating SSR content
+  ReactDOM.hydrateRoot(container, 
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+  );
+} else {
+  // Otherwise, render normally (for development)
+  const root = ReactDOM.createRoot(container);
+  root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+  );
 } 

package/templates/web/src/utils/trpc.ts

@@ -0,0 +1,93 @@
+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
+      // headers() {
+      //   return {
+      //     authorization: getAuthToken(),
+      //   };
+      // },
+    }),
+  ],
+});
+
+/*
+Usage Examples:
+
+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 { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+import { trpc } from './utils/trpc';
+
+const queryClient = new QueryClient();
+
+const trpcClient = trpc.createClient({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000/trpc',
+    }),
+  ],
+});
+
+function App() {
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        {/* Your app components */}
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}
+```
+
+4. Use tRPC in your components:
+
+```tsx
+import { trpc } from '../utils/trpc';
+
+function UsersList() {
+  const { data: users, isLoading } = trpc.users.getAll.useQuery();
+  const createUser = trpc.users.create.useMutation();
+
+  if (isLoading) return <div>Loading...</div>;
+
+  return (
+    <div>
+      {users?.map(user => (
+        <div key={user.id}>{user.name}</div>
+      ))}
+      <button
+        onClick={() => createUser.mutate({ 
+          email: 'test@example.com', 
+          name: 'Test User' 
+        })}
+      >
+        Create User
+      </button>
+    </div>
+  );
+}
+```
+*/ 

package/templates/web/tsconfig.json

@@ -1,27 +1,27 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedIndexedAccess": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"],
-      "react-native": ["node_modules/react-native-web"]
-    },
-    "types": ["vite/client"]
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "react-native": ["node_modules/react-native-web"]
+    },
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
 } 

package/templates/web/vite.config.ts

@@ -1,69 +1,69 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import babel from 'vite-plugin-babel'
-import path from 'path'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    babel({
-      filter: (id) => id.includes('node_modules/@idealyst/') && /\.(js|jsx|ts|tsx)$/.test(id),
-      babelConfig: {
-        presets: [
-          ['@babel/preset-typescript', {
-            isTSX: true,
-            allExtensions: true,
-          }]
-        ],
-        plugins: [
-          ['react-native-unistyles/plugin', {
-            root: 'src',
-            autoProcessPaths: ['@idealyst/components', '@idealyst/navigation', '@idealyst/theme'],
-          }],
-          ['@idealyst/components/plugin/web', { root: 'src' }]
-        ]
-      }
-    }),
-    // Then process everything else with React plugin
-    react(),
-  ],
-  resolve: {
-    alias: {
-      // Use absolute path to resolve react-native-web properly
-      'react-native': path.resolve(__dirname, 'node_modules/react-native-web'),
-      '@react-native/normalize-colors': path.resolve(__dirname, 'node_modules/@react-native/normalize-colors'),
-    },
-    // Platform-specific file resolution
-    extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.js', '.jsx'],
-    // Ensure proper resolution of package exports
-    conditions: ['browser', 'import', 'module', 'default'],
-    // Ensure workspace dependencies resolve properly
-    preserveSymlinks: false
-  },
-  define: {
-    global: 'globalThis',
-    __DEV__: JSON.stringify(true),
-  },
-  optimizeDeps: {
-    include: [
-      'react-native-web',
-      '@react-native/normalize-colors',
-      'react-native-unistyles',
-      'react-native-unistyles/web',
-      '@mdi/react',
-      '@mdi/js',
-    ],
-    exclude: [
-      'react-native-edge-to-edge',
-      'react-native-nitro-modules',
-      '@idealyst/components',
-      '@idealyst/navigation', 
-      '@idealyst/theme',
-      '@testproject/shared',
-    ],
-  },
-  server: {
-    host: '0.0.0.0',
-    port: 5173,
-  },
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import babel from 'vite-plugin-babel'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    babel({
+      filter: (id) => id.includes('node_modules/@idealyst/') && /\.(js|jsx|ts|tsx)$/.test(id),
+      babelConfig: {
+        presets: [
+          ['@babel/preset-typescript', {
+            isTSX: true,
+            allExtensions: true,
+          }]
+        ],
+        plugins: [
+          ['react-native-unistyles/plugin', {
+            root: 'src',
+            autoProcessPaths: ['@idealyst/components', '@idealyst/navigation', '@idealyst/theme'],
+          }],
+          ['@idealyst/components/plugin/web', { root: 'src' }]
+        ]
+      }
+    }),
+    // Then process everything else with React plugin
+    react(),
+  ],
+  resolve: {
+    alias: {
+      // Use absolute path to resolve react-native-web properly
+      'react-native': path.resolve(__dirname, 'node_modules/react-native-web'),
+      '@react-native/normalize-colors': path.resolve(__dirname, 'node_modules/@react-native/normalize-colors'),
+    },
+    // Platform-specific file resolution
+    extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.js', '.jsx'],
+    // Ensure proper resolution of package exports
+    conditions: ['browser', 'import', 'module', 'default'],
+    // Ensure workspace dependencies resolve properly
+    preserveSymlinks: false
+  },
+  define: {
+    global: 'globalThis',
+    __DEV__: JSON.stringify(true),
+  },
+  optimizeDeps: {
+    include: [
+      'react-native-web',
+      '@react-native/normalize-colors',
+      'react-native-unistyles',
+      'react-native-unistyles/web',
+      '@mdi/react',
+      '@mdi/js',
+    ],
+    exclude: [
+      'react-native-edge-to-edge',
+      'react-native-nitro-modules',
+      '@idealyst/components',
+      '@idealyst/navigation', 
+      '@idealyst/theme',
+      '@testproject/shared',
+    ],
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+  },
 }) 

package/templates/workspace/.yarnrc.yml

@@ -1,26 +1,26 @@
-nodeLinker: "node-modules"
-
-# Enable transparent workspaces for better workspace dependency resolution
-enableTransparentWorkspaces: true
-
-# Enable network for package downloads
-enableNetwork: true
-
-# Timeout for HTTP requests (in milliseconds)
-httpTimeout: 60000
-
-# Number of retry attempts for HTTP requests
-httpRetry: 3
-
-# Registry configuration
-npmRegistryServer: "https://registry.yarnpkg.com"
-
-# Enable progress bars
-enableProgressBars: true
-
-# Enable colors in output
-enableColors: true
-
-# Prevent hoisting to avoid React Native issues
-# This ensures React Native dependencies stay in their local node_modules
+nodeLinker: "node-modules"
+
+# Enable transparent workspaces for better workspace dependency resolution
+enableTransparentWorkspaces: true
+
+# Enable network for package downloads
+enableNetwork: true
+
+# Timeout for HTTP requests (in milliseconds)
+httpTimeout: 60000
+
+# Number of retry attempts for HTTP requests
+httpRetry: 3
+
+# Registry configuration
+npmRegistryServer: "https://registry.yarnpkg.com"
+
+# Enable progress bars
+enableProgressBars: true
+
+# Enable colors in output
+enableColors: true
+
+# Prevent hoisting to avoid React Native issues
+# This ensures React Native dependencies stay in their local node_modules
 nmHoistingLimits: workspaces 

package/templates/workspace/README.md

@@ -1,80 +1,80 @@
-# {{projectName}}
-
-{{description}}
-
-## Getting Started
-
-This workspace contains your Idealyst Framework packages and applications.
-
-### Structure
-
-```
-{{projectName}}/
-├── packages/           # Shared packages
-│   ├── theme/         # Theme configuration
-│   ├── components/    # UI components
-│   └── utils/         # Shared utilities
-├── mobile-app/        # React Native app (generated)
-├── web-app/           # React web app (generated)
-└── shared-lib/        # Shared library (generated)
-```
-
-### Development
-
-Install dependencies:
-```bash
-yarn install
-```
-
-Build all packages:
-```bash
-yarn build:all
-```
-
-Test all packages:
-```bash
-yarn test:all
-```
-
-### Adding Applications
-
-Generate a new React Native app:
-```bash
-idealyst create mobile-app --type native
-```
-
-Generate a new React web app:
-```bash
-idealyst create web-app --type web
-```
-
-Generate a new shared library:
-```bash
-idealyst create shared-lib --type shared
-```
-
-**Note:** The CLI will automatically add new projects to the workspace configuration when run from the workspace root.
-
-### Publishing
-
-Publish all packages:
-```bash
-yarn publish:all
-```
-
-### Version Management
-
-Update patch version for all packages:
-```bash
-yarn version:patch
-```
-
-Update minor version for all packages:
-```bash
-yarn version:minor
-```
-
-Update major version for all packages:
-```bash
-yarn version:major
+# {{projectName}}
+
+{{description}}
+
+## Getting Started
+
+This workspace contains your Idealyst Framework packages and applications.
+
+### Structure
+
+```
+{{projectName}}/
+├── packages/           # Shared packages
+│   ├── theme/         # Theme configuration
+│   ├── components/    # UI components
+│   └── utils/         # Shared utilities
+├── mobile-app/        # React Native app (generated)
+├── web-app/           # React web app (generated)
+└── shared-lib/        # Shared library (generated)
+```
+
+### Development
+
+Install dependencies:
+```bash
+yarn install
+```
+
+Build all packages:
+```bash
+yarn build:all
+```
+
+Test all packages:
+```bash
+yarn test:all
+```
+
+### Adding Applications
+
+Generate a new React Native app:
+```bash
+idealyst create mobile-app --type native
+```
+
+Generate a new React web app:
+```bash
+idealyst create web-app --type web
+```
+
+Generate a new shared library:
+```bash
+idealyst create shared-lib --type shared
+```
+
+**Note:** The CLI will automatically add new projects to the workspace configuration when run from the workspace root.
+
+### Publishing
+
+Publish all packages:
+```bash
+yarn publish:all
+```
+
+### Version Management
+
+Update patch version for all packages:
+```bash
+yarn version:patch
+```
+
+Update minor version for all packages:
+```bash
+yarn version:minor
+```
+
+Update major version for all packages:
+```bash
+yarn version:major
 ```