@idealyst/cli 1.0.52 → 1.0.54

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

@@ -1,16 +1,33 @@
 import React from 'react';
-import { App } from '@{{workspaceScope}}/shared';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import { NavigatorProvider } from '@idealyst/navigation';
+import { trpc, createTRPCClient } from './utils/trpc';
+import { AppRouter } from '@{{workspaceScope}}/shared';
 
-// Main App component using shared App wrapper
-function AppWithTrpcAndShared() {
+// Create tRPC client using shared factory
+const queryClient = new QueryClient();
+
+const trpcClient = createTRPCClient({
+  apiUrl: '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;

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

@@ -1,63 +1,29 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { httpBatchLink } from '@trpc/client';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { trpc } from './utils/trpc';
-import { Screen, Text, View } from '@idealyst/components';
+import { BrowserRouter } from 'react-router-dom';
+import { NavigatorProvider } from '@idealyst/navigation';
+import { trpc, createTRPCClient } from './utils/trpc';
+import AppRouterWithTrpc from './navigation/AppRouterWithTrpc';
 
-// Create tRPC client
+// Create tRPC client using shared factory
 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(),
-      //   };
-      // },
-    }),
-  ],
+const trpcClient = createTRPCClient({
+  apiUrl: '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>
+          <NavigatorProvider route={AppRouterWithTrpc} />
         </BrowserRouter>
       </QueryClientProvider>
     </trpc.Provider>

package/templates/web/src/App.tsx

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

package/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/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/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',