@idealyst/cli 1.0.52 → 1.0.53

package/dist/templates/web/src/navigation/AppRouter.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { RouteParam } from '@idealyst/navigation';
+import { Screen, Text, View, Icon } from '@idealyst/components';
+
+// Simple API test component for web-only projects  
+const ApiTest = () => {
+  const [result, setResult] = React.useState<string>('Click to test API');
+  
+  const testApi = async () => {
+    try {
+      setResult('Testing...');
+      // Simple fetch test - replace with actual API endpoint
+      const response = await fetch('/api/test');
+      if (response.ok) {
+        setResult('✅ API connection successful!');
+      } else {
+        setResult('❌ API connection failed');
+      }
+    } catch (error) {
+      setResult('❌ API connection failed');
+    }
+  };
+
+  return (
+    <View spacing="sm">
+      <Text size="small">{result}</Text>
+      <button onClick={testApi} style={{ padding: '8px 16px', marginTop: '8px' }}>
+        Test API
+      </button>
+    </View>
+  );
+};
+
+const HomeScreen = () => (
+  <Screen>
+    <View spacing="lg">
+      <Text size="xlarge" weight="bold">Home</Text>
+      <Text size="medium">Welcome to your {{projectName}} app!</Text>
+      <View spacing="md" style={{ marginTop: 24 }}>
+        <Text size="small">
+          This app uses tab navigation. Navigate between tabs using the top bar or menu.
+        </Text>
+      </View>
+      
+      {/* API Testing Component */}
+      <View spacing="md" style={{ marginTop: 32 }}>
+        <Text size="medium" weight="semibold">API Test</Text>
+        <ApiTest />
+      </View>
+    </View>
+  </Screen>
+);
+
+const ProfileScreen = () => (
+  <Screen>
+    <View spacing="lg">
+      <Text size="xlarge" weight="bold">Profile</Text>
+      <Text size="medium">User profile and account settings</Text>
+      <View spacing="md" style={{ marginTop: 24 }}>
+        <Text size="small">
+          Manage your account details and preferences here.
+        </Text>
+      </View>
+    </View>
+  </Screen>
+);
+
+const SettingsScreen = () => (
+  <Screen>
+    <View spacing="lg">
+      <Text size="xlarge" weight="bold">Settings</Text>
+      <Text size="medium">App configuration and preferences</Text>
+      <View spacing="md" style={{ marginTop: 24 }}>
+        <Text size="small">
+          Customize your app experience with various settings and options.
+        </Text>
+      </View>
+    </View>
+  </Screen>
+);
+
+const AppRouter: RouteParam = {
+  path: "/",
+  component: HomeScreen,
+  layout: {
+    type: "tab",
+  },
+  screenOptions: {
+    title: 'Home',
+    tabBarLabel: 'Home',
+    tabBarIcon: ({ focused, size }) => (
+      <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
+    ),
+  },
+  routes: [
+    { 
+      path: "profile", 
+      component: ProfileScreen,
+      screenOptions: {
+        title: 'Profile',
+        tabBarLabel: 'Profile',
+        tabBarIcon: ({ focused, size }) => (
+          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
+        ),
+      },
+    },
+    { 
+      path: "settings", 
+      component: SettingsScreen,
+      screenOptions: {
+        title: 'Settings',
+        tabBarLabel: 'Settings', 
+        tabBarIcon: ({ focused, size }) => (
+          <Icon name="cog" color={focused ? 'blue' : 'gray'} size={size || 24} />
+        ),
+      },
+    },
+  ],
+};
+
+export default AppRouter;

package/dist/templates/web/src/navigation/AppRouterWithTrpc.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { RouteParam } from '@idealyst/navigation';
+import { Screen, Text, View, Icon, Button } from '@idealyst/components';
+import { trpc } from '../utils/trpc';
+
+const HomeScreen = () => {
+  // Example tRPC usage
+  const [name, setName] = React.useState('{{projectName}}');
+  const { data, isLoading, error, refetch } = trpc.hello.useQuery({ name });
+
+  return (
+    <Screen>
+      <View spacing="lg">
+        <Text size="xlarge" weight="bold">Home</Text>
+        <Text size="medium">Welcome to your {{projectName}} app!</Text>
+        <View spacing="md" style={{ marginTop: 24 }}>
+          <Text size="small">
+            This app uses tab navigation with tRPC integration. Navigate between tabs using the top bar or menu.
+          </Text>
+          
+          {/* tRPC API Test */}
+          <View spacing="sm" style={{ marginTop: 20 }}>
+            <Text size="medium" weight="semibold">API Test (tRPC):</Text>
+            <View spacing="xs">
+              <input 
+                type="text" 
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Enter your name"
+                style={{ padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
+              />
+              <Button variant="outlined" onPress={() => refetch()} size="small">
+                Test tRPC API
+              </Button>
+            </View>
+            
+            {/* Results */}
+            <View style={{ marginTop: 12 }}>
+              {isLoading && <Text size="small">Loading...</Text>}
+              {error && <Text size="small" color="error">Error: {error.message}</Text>}
+              {data && <Text size="small">✅ {data.greeting}</Text>}
+            </View>
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+};
+
+const ProfileScreen = () => (
+  <Screen>
+    <View spacing="lg">
+      <Text size="xlarge" weight="bold">Profile</Text>
+      <Text size="medium">User profile and account settings</Text>
+      <View spacing="md" style={{ marginTop: 24 }}>
+        <Text size="small">
+          Manage your account details and preferences here.
+        </Text>
+      </View>
+    </View>
+  </Screen>
+);
+
+const SettingsScreen = () => (
+  <Screen>
+    <View spacing="lg">
+      <Text size="xlarge" weight="bold">Settings</Text>
+      <Text size="medium">App configuration and preferences</Text>
+      <View spacing="md" style={{ marginTop: 24 }}>
+        <Text size="small">
+          Customize your app experience with various settings and options.
+        </Text>
+      </View>
+    </View>
+  </Screen>
+);
+
+const AppRouterWithTrpc: RouteParam = {
+  path: "/",
+  component: HomeScreen,
+  layout: {
+    type: "tab",
+  },
+  screenOptions: {
+    title: 'Home',
+    tabBarLabel: 'Home',
+    tabBarIcon: ({ focused, size }) => (
+      <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
+    ),
+  },
+  routes: [
+    { 
+      path: "profile", 
+      component: ProfileScreen,
+      screenOptions: {
+        title: 'Profile',
+        tabBarLabel: 'Profile',
+        tabBarIcon: ({ focused, size }) => (
+          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
+        ),
+      },
+    },
+    { 
+      path: "settings", 
+      component: SettingsScreen,
+      screenOptions: {
+        title: 'Settings',
+        tabBarLabel: 'Settings', 
+        tabBarIcon: ({ focused, size }) => (
+          <Icon name="cog" color={focused ? 'blue' : 'gray'} size={size || 24} />
+        ),
+      },
+    },
+  ],
+};
+
+export default AppRouterWithTrpc;

package/dist/templates/web/vite.config.ts

@@ -7,7 +7,7 @@ import path from 'path'
 export default defineConfig({
   plugins: [
     babel({
-      filter: (id) => id.includes('node_modules/@idealyst/') && /\.(js|jsx|ts|tsx)$/.test(id),
+      filter: (id) => id.includes("node_modules/@idealyst/"),
       babelConfig: {
         presets: [
           ['@babel/preset-typescript', {
@@ -59,8 +59,16 @@ export default defineConfig({
       '@idealyst/components',
       '@idealyst/navigation', 
       '@idealyst/theme',
-      '@testproject/shared',
+      '@{{workspaceScope}}/shared',
     ],
+    esbuildOptions: {
+      loader: {
+        '.tsx': 'tsx',
+        '.ts': 'ts',
+        '.jsx': 'jsx',
+        '.js': 'jsx' // Important: treat .js files as JSX for React Native compatibility
+      }
+    }
   },
   server: {
     host: '0.0.0.0',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/cli",
-  "version": "1.0.52",
+  "version": "1.0.53",
   "description": "CLI tool for generating Idealyst Framework projects",
   "main": "dist/index.js",
   "bin": {

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+import { NavigatorProvider } from '@idealyst/navigation';
+import { trpc } from './utils/trpc';
+import { AppRouter } from '@{{workspaceScope}}/shared';
+
+// 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() {
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <NavigatorProvider route={AppRouter} />
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}
+
+export default App;

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { httpBatchLink } from '@trpc/client';
-import { Screen, Text, View } from '@idealyst/components';
+import { NavigatorProvider } from '@idealyst/navigation';
 import { trpc } from './utils/trpc';
+import AppRouter from './navigation/AppRouter';
 
 // Create tRPC client
 const queryClient = new QueryClient();
@@ -23,34 +24,10 @@ const trpcClient = trpc.createClient({
 });
 
 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>
+        <NavigatorProvider route={AppRouter} />
       </QueryClientProvider>
     </trpc.Provider>
   );

package/templates/native/src/App.tsx

@@ -1,16 +1,11 @@
 import React from 'react';
-import { App } from '@{{workspaceScope}}/shared';
+import { NavigatorProvider } from '@idealyst/navigation';
+import AppRouter from './navigation/AppRouter';
 
-// Main App component using shared App wrapper
-function AppWithShared() {
+function App() {
   return (
-    <App 
-      apiUrl="http://localhost:3000/trpc"
-      name="{{projectName}} Developer"
-      platform="mobile"
-      projectName="{{projectName}}"
-    />
+    <NavigatorProvider route={AppRouter} />
   );
 }
 
-export default AppWithShared;
+export default App;

package/templates/native/src/navigation/AppRouter.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { RouteParam } from '@idealyst/navigation';
+import { Screen, Text, View, Icon, Button } from '@idealyst/components';
+
+// Simple API test component for native-only projects
+const ApiTest = () => {
+  const [result, setResult] = React.useState<string>('Tap to test API');
+  
+  const testApi = async () => {
+    try {
+      setResult('Testing...');
+      // Simple fetch test - replace with actual API endpoint  
+      const response = await fetch('http://localhost:3000/api/test');
+      if (response.ok) {
+        setResult('✅ API connection successful!');
+      } else {
+        setResult('❌ API connection failed');
+      }
+    } catch (error) {
+      setResult('❌ API connection failed');
+    }
+  };
+
+  return (
+    <View spacing="sm">
+      <Text size="small">{result}</Text>
+      <Button variant="outlined" onPress={testApi} size="small">
+        Test API
+      </Button>
+    </View>
+  );
+};
+
+const HomeScreen = () => (
+  <Screen>
+    <View spacing="lg">
+      <Text size="xlarge" weight="bold">Home</Text>
+      <Text size="medium">Welcome to {{appName}}!</Text>
+      <View spacing="md" style={{ marginTop: 24 }}>
+        <Text size="small">
+          This app uses tab navigation. Navigate between tabs using the bottom bar.
+        </Text>
+      </View>
+      
+      {/* API Testing Component */}
+      <View spacing="md" style={{ marginTop: 32 }}>
+        <Text size="medium" weight="semibold">API Test</Text>
+        <ApiTest />
+      </View>
+    </View>
+  </Screen>
+);
+
+const ProfileScreen = () => (
+  <Screen>
+    <View spacing="lg">
+      <Text size="xlarge" weight="bold">Profile</Text>
+      <Text size="medium">User profile and account settings</Text>
+      <View spacing="md" style={{ marginTop: 24 }}>
+        <Text size="small">
+          Manage your account details and preferences here.
+        </Text>
+      </View>
+    </View>
+  </Screen>
+);
+
+const SettingsScreen = () => (
+  <Screen>
+    <View spacing="lg">
+      <Text size="xlarge" weight="bold">Settings</Text>
+      <Text size="medium">App configuration and preferences</Text>
+      <View spacing="md" style={{ marginTop: 24 }}>
+        <Text size="small">
+          Customize your app experience with various settings and options.
+        </Text>
+      </View>
+    </View>
+  </Screen>
+);
+
+const AppRouter: RouteParam = {
+  path: "/",
+  component: HomeScreen,
+  layout: {
+    type: "tab",
+  },
+  screenOptions: {
+    title: 'Home',
+    tabBarLabel: 'Home',
+    tabBarIcon: ({ focused, size }) => (
+      <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
+    ),
+  },
+  routes: [
+    { 
+      path: "profile", 
+      component: ProfileScreen,
+      screenOptions: {
+        title: 'Profile',
+        tabBarLabel: 'Profile',
+        tabBarIcon: ({ focused, size }) => (
+          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
+        ),
+      },
+    },
+    { 
+      path: "settings", 
+      component: SettingsScreen,
+      screenOptions: {
+        title: 'Settings',
+        tabBarLabel: 'Settings', 
+        tabBarIcon: ({ focused, size }) => (
+          <Icon name="cog" color={focused ? 'blue' : 'gray'} size={size || 24} />
+        ),
+      },
+    },
+  ],
+};
+
+export default AppRouter;

package/templates/shared/src/index.ts

@@ -1,6 +1,9 @@
 // Export the unified App component
 export { App } from './components';
 
+// Export navigation router
+export { default as AppRouter } from './navigation/AppRouter';
+
 // Export tRPC client utilities
 export { trpc, createTRPCClient, createVanillaTRPCClient } from './trpc/client';
 export type { TRPCClientConfig, AppRouter } from './trpc/client';

package/templates/shared/src/navigation/AppRouter.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { RouteParam } from '@idealyst/navigation';
+import { Screen, Text, View, Icon } from '@idealyst/components';
+import { HelloWorld } from '../components/HelloWorld';
+
+const HomeScreen = () => (
+  <Screen>
+    <View spacing="lg">
+      <Text size="xlarge" weight="bold">Home</Text>
+      <Text size="medium">Welcome to your {{projectName}} app!</Text>
+      <View spacing="md" style={{ marginTop: 24 }}>
+        <Text size="small">
+          This app uses tab navigation. Navigate between tabs using the bottom bar on mobile or the top tabs on web.
+        </Text>
+      </View>
+      
+      {/* API Testing Component */}
+      <View spacing="md" style={{ marginTop: 32 }}>
+        <Text size="medium" weight="semibold">API Test</Text>
+        <HelloWorld name="{{projectName}}" />
+      </View>
+    </View>
+  </Screen>
+);
+
+const ProfileScreen = () => (
+  <Screen>
+    <View spacing="lg">
+      <Text size="xlarge" weight="bold">Profile</Text>
+      <Text size="medium">User profile and account settings</Text>
+      <View spacing="md" style={{ marginTop: 24 }}>
+        <Text size="small">
+          Manage your account details and preferences here.
+        </Text>
+      </View>
+    </View>
+  </Screen>
+);
+
+const SettingsScreen = () => (
+  <Screen>
+    <View spacing="lg">
+      <Text size="xlarge" weight="bold">Settings</Text>
+      <Text size="medium">App configuration and preferences</Text>
+      <View spacing="md" style={{ marginTop: 24 }}>
+        <Text size="small">
+          Customize your app experience with various settings and options.
+        </Text>
+      </View>
+    </View>
+  </Screen>
+);
+
+const AppRouter: RouteParam = {
+  path: "/",
+  component: HomeScreen,
+  layout: {
+    type: "tab",
+  },
+  screenOptions: {
+    title: 'Home',
+    tabBarLabel: 'Home',
+    tabBarIcon: ({ focused, size }) => (
+      <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
+    ),
+  },
+  routes: [
+    { 
+      path: "profile", 
+      component: ProfileScreen,
+      screenOptions: {
+        title: 'Profile',
+        tabBarLabel: 'Profile',
+        tabBarIcon: ({ focused, size }) => (
+          <Icon name="account" color={focused ? 'blue' : 'gray'} size={size || 24} />
+        ),
+      },
+    },
+    { 
+      path: "settings", 
+      component: SettingsScreen,
+      screenOptions: {
+        title: 'Settings',
+        tabBarLabel: 'Settings', 
+        tabBarIcon: ({ focused, size }) => (
+          <Icon name="cog" color={focused ? 'blue' : 'gray'} size={size || 24} />
+        ),
+      },
+    },
+  ],
+};
+
+export default AppRouter;

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

@@ -1,16 +1,38 @@
 import React from 'react';
-import { App } from '@{{workspaceScope}}/shared';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+import { BrowserRouter } from 'react-router-dom';
+import { NavigatorProvider } from '@idealyst/navigation';
+import { trpc } from './utils/trpc';
+import { AppRouter } from '@{{workspaceScope}}/shared';
 
-// Main App component using shared App wrapper
-function AppWithTrpcAndShared() {
+// 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 App() {
   return (
-    <App 
-      apiUrl="http://localhost:3000/trpc"
-      name="{{projectName}} Developer"
-      platform="web"
-      projectName="{{projectName}}"
-    />
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <NavigatorProvider route={AppRouter} />
+        </BrowserRouter>
+      </QueryClientProvider>
+    </trpc.Provider>
   );
 }
 
-export default AppWithTrpcAndShared;
+export default App;