@idealyst/cli 1.0.46 → 1.0.48

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

@@ -1,127 +1,7 @@
-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>;
-}
-```
-*/ 
+// Import tRPC client utilities from shared package
+export { 
+  trpc, 
+  createTRPCClient, 
+  createVanillaTRPCClient 
+} from '@{{workspaceScope}}/shared';
+export type { TRPCClientConfig, AppRouter } from '@{{workspaceScope}}/shared'; 

package/templates/native/tsconfig.json

@@ -7,12 +7,10 @@
     "isolatedModules": true,
     "jsx": "react-native",
     "lib": ["es2017"],
-    "moduleResolution": "node",
     "noEmit": true,
     "strict": true,
     "target": "esnext",
     "skipLibCheck": true,
-    "resolveJsonModule": true,
     "baseUrl": "./",
     "paths": {
       "@/*": ["./src/*"]

package/templates/shared/package.json

@@ -18,10 +18,13 @@
     "test:coverage": "jest --coverage",
     "type-check": "tsc --noEmit"
   },
-  "dependencies": {},
   "peerDependencies": {
     "@idealyst/components": "^1.0.21",
     "@idealyst/theme": "^1.0.21",
+    "@tanstack/react-query": "^5.83.0",
+    "@trpc/client": "^11.5.1",
+    "@trpc/react-query": "^11.5.1",
+    "@trpc/server": "^11.5.1",
     "react": "^19.1.0",
     "react-native": "^0.80.1"
   },
@@ -33,11 +36,13 @@
   "devDependencies": {
     "@idealyst/components": "^1.0.21",
     "@idealyst/theme": "^1.0.21",
+    "@tanstack/react-query": "^5.83.0",
+    "@trpc/client": "^11.5.1",
+    "@trpc/react-query": "^11.5.1",
+    "@trpc/server": "^11.5.1",
     "@types/jest": "^29.5.12",
     "@types/react": "^19.1.0",
     "jest": "^29.7.0",
-    "react": "^19.1.0",
-    "react-native": "^0.80.1",
     "ts-jest": "^29.1.2",
     "typescript": "^5.0.0"
   },

package/templates/shared/src/components/App.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { trpc, createTRPCClient } from '../trpc/client';
+import { HelloWorld } from './HelloWorld';
+
+interface AppProps {
+  apiUrl?: string;
+  queryClient?: QueryClient;
+  headers?: () => Record<string, string>;
+  // HelloWorld component props
+  name?: string;
+  platform?: "web" | "mobile";
+  projectName?: string;
+}
+
+// Default query client instance
+const defaultQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      cacheTime: 1000 * 60 * 10, // 10 minutes
+    },
+  },
+});
+
+/**
+ * Unified App component that sets up tRPC and React Query providers
+ * and includes the HelloWorld component directly
+ */
+export const App: React.FC<AppProps> = ({ 
+  apiUrl = 'http://localhost:3000/trpc',
+  queryClient = defaultQueryClient,
+  headers,
+  name,
+  platform = "web",
+  projectName
+}) => {
+  // Create tRPC client with the provided configuration
+  const trpcClient = createTRPCClient({
+    apiUrl,
+    headers,
+  });
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <HelloWorld 
+          name={name}
+          platform={platform}
+          projectName={projectName}
+        />
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+};
+
+export default App;

package/templates/shared/src/components/HelloWorld.tsx

@@ -1,116 +1,306 @@
-import React from 'react';
-import { View, Text, Card, Screen } from '@idealyst/components';
+import { Button, Card, Input, Screen, Text, View } from "@idealyst/components";
+import { useState } from "react";
+import { trpc } from "../trpc/client";
 
 interface HelloWorldProps {
   name?: string;
-  platform?: 'web' | 'mobile';
+  platform?: "web" | "mobile";
   projectName?: string;
 }
 
-export const HelloWorld: React.FC<HelloWorldProps> = ({ 
-  name = 'World', 
-  platform = 'web',
-  projectName = 'Your Project'
-}) => {
-  const platformEmoji = platform === 'mobile' ? '📱' : '🌐';
-  const platformText = platform === 'mobile' 
-    ? 'Your mobile development environment is ready. This shared component works seamlessly across mobile and web platforms.'
-    : 'Your web development environment is ready. This shared component works seamlessly across web and mobile platforms.';
+export const HelloWorld = ({
+  name = "World",
+  platform = "web",
+  projectName = "Your Project",
+}: HelloWorldProps) => {
+  const [newTestName, setNewTestName] = useState("");
+  const [newTestMessage, setNewTestMessage] = useState("");
+
+  // Use tRPC hooks directly
+  const tests = trpc.test.getAll.useQuery({});
+  const createTestMutation = trpc.test.create.useMutation({
+    onSuccess: () => {
+      tests.refetch();
+      setNewTestName("");
+      setNewTestMessage("");
+    },
+  });
+  const deleteTestMutation = trpc.test.delete.useMutation({
+    onSuccess: () => {
+      tests.refetch();
+    },
+  });
+
+  const handleCreateTest = async () => {
+    if (!newTestName || !newTestMessage) return;
+
+    await createTestMutation.mutateAsync({
+      name: newTestName,
+      message: newTestMessage,
+      status: "active",
+    });
+  };
+
+  const handleDeleteTest = async (id: string) => {
+    await deleteTestMutation.mutateAsync({ id });
+  };
+
+  const platformEmoji = platform === "mobile" ? "📱" : "🌐";
+  const platformText =
+    platform === "mobile"
+      ? "Your mobile development environment is ready. This shared component works seamlessly across mobile and web platforms."
+      : "Your web development environment is ready. This shared component works seamlessly across web and mobile platforms.";
 
   return (
     <Screen style={{ flex: 1, padding: 20 }}>
-        <View style={{ maxWidth: 600, alignSelf: 'center' }}>
-            <Text size="xlarge" weight="bold" style={{ 
-            marginBottom: 16, 
-            textAlign: 'center',
-            color: '#1e293b'
-        }}>
-            Welcome to {projectName}! {platformEmoji}
+      <View style={{ maxWidth: 600, alignSelf: "center" }}>
+        <Text
+          size="xlarge"
+          weight="bold"
+          style={{
+            marginBottom: 16,
+            textAlign: "center",
+            color: "#1e293b",
+          }}
+        >
+          Welcome to {projectName}! {platformEmoji}
         </Text>
-        
-        <Text size="large" style={{ 
-            marginBottom: 32, 
-            textAlign: 'center',
-            color: '#64748b',
+
+        <Text
+          size="large"
+          style={{
+            marginBottom: 32,
+            textAlign: "center",
+            color: "#64748b",
             lineHeight: 24,
-            paddingHorizontal: 16
-        }}>
-            {platformText}
+            paddingHorizontal: 16,
+          }}
+        >
+          {platformText}
         </Text>
         {/* Framework Branding Card */}
         <Card variant="elevated" padding="large" intent="primary">
-          <View style={{ alignItems: 'center' }}>
+          <View style={{ alignItems: "center" }}>
             <Text style={{ fontSize: 32, marginBottom: 16 }}>🚀</Text>
-            <Text size="xlarge" weight="bold" style={{ marginBottom: 8, textAlign: 'center' }}>
+            <Text
+              size="xlarge"
+              weight="bold"
+              style={{ marginBottom: 8, textAlign: "center" }}
+            >
               Idealyst Framework
             </Text>
-            <Text size="medium" style={{ marginBottom: 16, textAlign: 'center' }}>
+            <Text
+              size="medium"
+              style={{ marginBottom: 16, textAlign: "center" }}
+            >
               Hello, {name}! Welcome to your cross-platform workspace.
             </Text>
-          
-          {/* Technology Tags */}
-          <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', gap: 8 }}>
-            <Card variant="filled" padding="small" style={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}>
-              <Text size="small" weight="semibold">React</Text>
-            </Card>
-            <Card variant="filled" padding="small" style={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}>
-              <Text size="small" weight="semibold">TypeScript</Text>
-            </Card>
-            <Card variant="filled" padding="small" style={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}>
-              <Text size="small" weight="semibold">Cross-Platform</Text>
-            </Card>
-          </View>
-        </View>
-      </Card>
 
-      {/* Quick Start Guide Card */}
-      <Card variant="outlined" padding="large" style={{ marginTop: 16 }}>
-        <Text size="large" weight="bold" style={{ marginBottom: 16 }}>
-          🎯 Quick Start Guide
-        </Text>
+            {/* Technology Tags */}
+            <View
+              style={{
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "center",
+                gap: 8,
+              }}
+            >
+              <Card
+                variant="filled"
+                padding="small"
+                style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
+              >
+                <Text size="small" weight="semibold">
+                  React
+                </Text>
+              </Card>
+              <Card
+                variant="filled"
+                padding="small"
+                style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
+              >
+                <Text size="small" weight="semibold">
+                  TypeScript
+                </Text>
+              </Card>
+              <Card
+                variant="filled"
+                padding="small"
+                style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
+              >
+                <Text size="small" weight="semibold">
+                  Cross-Platform
+                </Text>
+              </Card>
+            </View>
+          </View>
+        </Card>
 
-        <View style={{ marginBottom: 16 }}>
-          <Text size="medium" weight="semibold" style={{ marginBottom: 8 }}>
-            Your Workspace Overview:
-          </Text>
-          <Text size="small" style={{ marginBottom: 4 }}>
-            • <Text weight="semibold">packages/web/</Text> - React web application
+        {/* Quick Start Guide Card */}
+        <Card variant="outlined" padding="large" style={{ marginTop: 16 }}>
+          <Text size="large" weight="bold" style={{ marginBottom: 16 }}>
+            🎯 Quick Start Guide
           </Text>
-          <Text size="small" style={{ marginBottom: 4 }}>
-            • <Text weight="semibold">packages/mobile/</Text> - React Native mobile app
-          </Text>
-          <Text size="small" style={{ marginBottom: 4 }}>
-            • <Text weight="semibold">packages/shared/</Text> - Cross-platform components
-          </Text>
-          <Text size="small" style={{ marginBottom: 4 }}>
-            • <Text weight="semibold">packages/api/</Text> - tRPC API server
-          </Text>
-        </View>
 
-        <View style={{ marginBottom: 16 }}>
-          <Text size="medium" weight="semibold" style={{ marginBottom: 8 }}>
-            Try Editing:
-          </Text>
-          <Text size="small" style={{ marginBottom: 4 }}>
-            1. Edit this component in <Text weight="semibold">packages/shared/src/components/HelloWorld.tsx</Text>
-          </Text>
-          <Text size="small" style={{ marginBottom: 4 }}>
-            2. Watch changes appear in both web and mobile apps instantly!
-          </Text>
-          <Text size="small" style={{ marginBottom: 4 }}>
-            3. Run <Text weight="semibold">yarn dev</Text> to start all development servers
-          </Text>
-        </View>
+          <View style={{ marginBottom: 16 }}>
+            <Text size="medium" weight="semibold" style={{ marginBottom: 8 }}>
+              Your Workspace Overview:
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              • <Text weight="semibold">packages/web/</Text> - React web
+              application
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              • <Text weight="semibold">packages/mobile/</Text> - React Native
+              mobile app
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              • <Text weight="semibold">packages/shared/</Text> - Cross-platform
+              components
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              • <Text weight="semibold">packages/api/</Text> - tRPC API server
+            </Text>
+          </View>
+
+          <View style={{ marginBottom: 16 }}>
+            <Text size="medium" weight="semibold" style={{ marginBottom: 8 }}>
+              Try Editing:
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              1. Edit this component in{" "}
+              <Text weight="semibold">
+                packages/shared/src/components/HelloWorld.tsx
+              </Text>
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              2. Watch changes appear in both web and mobile apps instantly!
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              3. Run <Text weight="semibold">yarn dev</Text> to start all
+              development servers
+            </Text>
+          </View>
+
+          <Card variant="filled" intent="success" padding="medium">
+            <Text size="small" weight="semibold" style={{ marginBottom: 4 }}>
+              ✨ Framework Features:
+            </Text>
+            <Text size="small">
+              Shared components • Type safety • Hot reload • Cross-platform
+              compatibility
+            </Text>
+          </Card>
+        </Card>
 
-        <Card variant="filled" intent="success" padding="medium">
-          <Text size="small" weight="semibold" style={{ marginBottom: 4 }}>
-            ✨ Framework Features:
+        {/* API Testing Section */}
+        <Card variant="outlined" padding="large" style={{ marginTop: 16 }}>
+          <Text size="large" weight="bold" style={{ marginBottom: 16 }}>
+            🚀 API Demo - Database Integration
           </Text>
-          <Text size="small">
-            Shared components • Type safety • Hot reload • Cross-platform compatibility
+          <Text size="medium" style={{ marginBottom: 16, color: "#64748b" }}>
+            Test your full-stack integration! This section demonstrates
+            real-time database operations.
           </Text>
+
+          {/* Create New Test Form */}
+          <Card
+            variant="filled"
+            padding="medium"
+            style={{ marginBottom: 16, backgroundColor: "#f8fafc" }}
+          >
+            <Text size="medium" weight="semibold" style={{ marginBottom: 12 }}>
+              Create New Test Entry
+            </Text>
+
+            <View style={{ gap: 12 }}>
+              <Input
+                placeholder="Test name"
+                value={newTestName}
+                onChangeText={setNewTestName}
+              />
+              <Input
+                placeholder="Test message"
+                value={newTestMessage}
+                onChangeText={setNewTestMessage}
+              />
+              <Button
+                onPress={handleCreateTest}
+                disabled={
+                  !newTestName ||
+                  !newTestMessage ||
+                  createTestMutation.isLoading
+                }
+                style={{ alignSelf: "flex-start" }}
+              >
+                {createTestMutation.isLoading ? "Creating..." : "Create Test"}
+              </Button>
+            </View>
+          </Card>
+
+          {/* Tests List */}
+          <View>
+            <Text size="medium" weight="semibold" style={{ marginBottom: 12 }}>
+              Database Records ({tests.data?.length || 0})
+            </Text>
+
+            {tests.isLoading ? (
+              <Card variant="outlined" padding="medium">
+                <Text size="small" style={{ color: "#64748b" }}>
+                  Loading tests...
+                </Text>
+              </Card>
+            ) : tests.data?.length === 0 ? (
+              <Card variant="outlined" padding="medium">
+                <Text size="small" style={{ color: "#64748b" }}>
+                  No tests found. Create one above!
+                </Text>
+              </Card>
+            ) : (
+              <View style={{ gap: 8 }}>
+                {tests.data?.map((test: any) => (
+                  <Card key={test.id} variant="outlined" padding="medium">
+                    <View
+                      style={{
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                      }}
+                    >
+                      <View style={{ flex: 1 }}>
+                        <Text
+                          size="small"
+                          weight="semibold"
+                          style={{ marginBottom: 4 }}
+                        >
+                          {test.name}
+                        </Text>
+                        <Text
+                          size="small"
+                          style={{ color: "#64748b", marginBottom: 4 }}
+                        >
+                          {test.message}
+                        </Text>
+                        <Text size="small" style={{ color: "#10b981" }}>
+                          Status: {test.status} •{" "}
+                          {new Date(test.createdAt).toLocaleDateString()}
+                        </Text>
+                      </View>
+                      <Button
+                        variant="destructive"
+                        size="small"
+                        onPress={() => handleDeleteTest(test.id)}
+                        disabled={deleteTestMutation.isLoading}
+                      >
+                        Delete
+                      </Button>
+                    </View>
+                  </Card>
+                ))}
+              </View>
+            )}
+          </View>
         </Card>
-      </Card>
       </View>
     </Screen>
   );

package/templates/shared/src/components/index.ts

@@ -1 +1 @@
-export { HelloWorld } from './HelloWorld';
+export { App } from './App';

package/templates/shared/src/index.ts

@@ -1,5 +1,9 @@
-// Export the HelloWorld component
-export { HelloWorld } from './components';
+// Export the unified App component
+export { App } from './components';
+
+// Export tRPC client utilities
+export { trpc, createTRPCClient, createVanillaTRPCClient } from './trpc/client';
+export type { TRPCClientConfig, AppRouter } from './trpc/client';
 
 // Simple type for the HelloWorld component props
 export interface HelloWorldProps {