@idealyst/cli 1.0.45 → 1.0.48

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

@@ -1,304 +1,16 @@
-import React, { useState } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { httpBatchLink } from '@trpc/client';
-import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
-import { trpc } from './utils/trpc';
-import { Screen, Text, View, Button, ScrollView } from '@idealyst/components';
+import React from 'react';
+import { App } from '@{{workspaceScope}}/shared';
 
-// Import shared components and utilities
-import {
-  UserCard,
-  PostCard,
-  LoadingSpinner,
-  ErrorMessage,
-  FeatureCard,
-  DEMO_USERS,
-  DEMO_POSTS,
-  formatRelativeTime,
-  type User,
-  type Post,
-  type PostWithAuthor
-} from '{{workspaceScope}}/shared';
-
-// Create tRPC client
-const queryClient = new QueryClient();
-
-const trpcClient = trpc.createClient({
-  links: [
-    httpBatchLink({
-      url: 'http://localhost:3001/trpc', // Updated to match API port
-      // Optional: Add headers for authentication
-      // headers() {
-      //   return {
-      //     authorization: getAuthToken(),
-      //   };
-      // },
-    }),
-  ],
-});
-
-// Navigation Component
-function Navigation() {
-  return (
-    <View style={{ 
-      flexDirection: 'row', 
-      padding: 16, 
-      backgroundColor: '#f8f9fa',
-      borderBottomWidth: 1,
-      borderBottomColor: '#e9ecef'
-    }}>
-      <Text variant="h2" style={{ marginRight: 24 }}>{{projectName}}</Text>
-      <View style={{ flexDirection: 'row', gap: 16 }}>
-        <Link to="/" style={{ textDecoration: 'none' }}>
-          <Text style={{ color: '#007bff' }}>Home</Text>
-        </Link>
-        <Link to="/users" style={{ textDecoration: 'none' }}>
-          <Text style={{ color: '#007bff' }}>Users</Text>
-        </Link>
-        <Link to="/posts" style={{ textDecoration: 'none' }}>
-          <Text style={{ color: '#007bff' }}>Posts</Text>
-        </Link>
-      </View>
-    </View>
-  );
-}
-
-// Home Page Component
-function HomePage() {
-  // Example tRPC usage
-  const { data: helloData, isLoading: helloLoading, error: helloError } = trpc.hello.useQuery({ name: 'Web User' });
-  const { data: usersData, isLoading: usersLoading } = trpc.users.getAll.useQuery();
-  const { data: postsData, isLoading: postsLoading } = trpc.posts.getAll.useQuery();
-
-  return (
-    <ScrollView style={{ flex: 1 }}>
-      <View style={{ padding: 20 }}>
-        {/* Welcome Section */}
-        <View style={{ marginBottom: 32, textAlign: 'center' }}>
-          <Text variant="h1" style={{ marginBottom: 16 }}>
-            Welcome to {{projectName}}! 🚀
-          </Text>
-          <Text variant="body" style={{ marginBottom: 16, fontSize: 18 }}>
-            A full-stack application built with the Idealyst Framework
-          </Text>
-          
-          {/* tRPC Connection Test */}
-          <View style={{ 
-            padding: 16, 
-            backgroundColor: '#e3f2fd', 
-            borderRadius: 8,
-            marginBottom: 24
-          }}>
-            <Text variant="h3" style={{ marginBottom: 8 }}>🔗 API Connection:</Text>
-            {helloLoading && <Text>Testing connection...</Text>}
-            {helloError && <Text style={{ color: 'red' }}>Error: {helloError.message}</Text>}
-            {helloData && <Text style={{ color: 'green' }}>✅ {helloData.greeting}</Text>}
-          </View>
-        </View>
-
-        {/* Features Overview */}
-        <View style={{ marginBottom: 32 }}>
-          <Text variant="h2" style={{ marginBottom: 16 }}>🏗️ Architecture Overview</Text>
-          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
-            <FeatureCard 
-              icon="🗄️"
-              title="Database Layer"
-              description="Prisma ORM with SQLite, user management, posts, and comments"
-            />
-            <FeatureCard 
-              icon="🚀"
-              title="API Server"
-              description="tRPC API with type-safe endpoints and real-time capabilities"
-            />
-            <FeatureCard 
-              icon="🌐"
-              title="Web Application"
-              description="React web app with Idealyst components and responsive design"
-            />
-            <FeatureCard 
-              icon="📱"
-              title="Mobile App"
-              description="React Native app with shared components and unified styling"
-            />
-            <FeatureCard 
-              icon="📦"
-              title="Shared Library"
-              description="Cross-platform components, utilities, and type definitions"
-            />
-            <FeatureCard 
-              icon="🔗"
-              title="Full Integration"
-              description="End-to-end type safety and unified development workflow"
-            />
-          </View>
-        </View>
-
-        {/* Live Data Preview */}
-        <View style={{ marginBottom: 32 }}>
-          <Text variant="h2" style={{ marginBottom: 16 }}>📊 Live Data Preview</Text>
-          
-          {/* Users Section */}
-          <View style={{ marginBottom: 24 }}>
-            <Text variant="h3" style={{ marginBottom: 12 }}>👥 Users ({usersLoading ? '...' : usersData?.length || DEMO_USERS.length})</Text>
-            {usersLoading ? (
-              <LoadingSpinner message="Loading users..." />
-            ) : (
-              <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
-                {(usersData || DEMO_USERS.slice(0, 3)).map((user: User) => (
-                  <View key={user.id} style={{ width: '300px' }}>
-                    <UserCard 
-                      user={user} 
-                      showBio={false}
-                      onPress={() => console.log('View profile:', user.name)}
-                    />
-                  </View>
-                ))}
-              </View>
-            )}
-          </View>
-
-          {/* Posts Section */}
-          <View style={{ marginBottom: 24 }}>
-            <Text variant="h3" style={{ marginBottom: 12 }}>📝 Recent Posts ({postsLoading ? '...' : postsData?.length || DEMO_POSTS.length})</Text>
-            {postsLoading ? (
-              <LoadingSpinner message="Loading posts..." />
-            ) : (
-              <View>
-                {(postsData || DEMO_POSTS.slice(0, 2)).map((post: Post) => {
-                  const author = DEMO_USERS.find(u => u.id === post.authorId);
-                  return (
-                    <PostCard 
-                      key={post.id}
-                      post={post}
-                      author={author}
-                      onPress={() => console.log('Read post:', post.title)}
-                      onLike={() => console.log('Like post:', post.title)}
-                    />
-                  );
-                })}
-              </View>
-            )}
-          </View>
-        </View>
-
-        {/* Quick Start Section */}
-        <View style={{ 
-          padding: 20, 
-          backgroundColor: '#f8f9fa', 
-          borderRadius: 8,
-          marginBottom: 24
-        }}>
-          <Text variant="h2" style={{ marginBottom: 16 }}>🚀 Quick Start</Text>
-          <Text variant="body" style={{ marginBottom: 12 }}>
-            Your full-stack workspace is ready! Here's what you can do:
-          </Text>
-          <View style={{ marginLeft: 16 }}>
-            <Text style={{ marginBottom: 4 }}>• 🗄️ Add your models in <code>packages/database/schema.prisma</code></Text>
-            <Text style={{ marginBottom: 4 }}>• 🚀 Create API endpoints in <code>packages/api/src/routers/</code></Text>
-            <Text style={{ marginBottom: 4 }}>• 📦 Build shared components in <code>packages/shared/src/</code></Text>
-            <Text style={{ marginBottom: 4 }}>• 🌐 Customize this web app in <code>packages/web/src/</code></Text>
-            <Text style={{ marginBottom: 4 }}>• 📱 Update the mobile app in <code>packages/mobile/src/</code></Text>
-          </View>
-        </View>
-
-        {/* Development Commands */}
-        <View style={{ 
-          padding: 20, 
-          backgroundColor: '#e8f5e8', 
-          borderRadius: 8,
-          marginBottom: 24
-        }}>
-          <Text variant="h3" style={{ marginBottom: 12 }}>💻 Development Commands</Text>
-          <View style={{ fontFamily: 'monospace', fontSize: 14 }}>
-            <Text style={{ marginBottom: 4 }}>yarn dev          # Start all servers</Text>
-            <Text style={{ marginBottom: 4 }}>yarn web:dev      # Start web app only</Text>
-            <Text style={{ marginBottom: 4 }}>yarn mobile:start # Start mobile bundler</Text>
-            <Text style={{ marginBottom: 4 }}>yarn api:dev      # Start API server only</Text>
-            <Text style={{ marginBottom: 4 }}>yarn db:push      # Update database schema</Text>
-            <Text style={{ marginBottom: 4 }}>yarn db:studio    # Open database admin</Text>
-          </View>
-        </View>
-      </View>
-    </ScrollView>
-  );
-}
-
-// Users Page Component  
-function UsersPage() {
-  const { data: users, isLoading, error } = trpc.users.getAll.useQuery();
-
-  if (isLoading) return <LoadingSpinner message="Loading users..." />;
-  if (error) return <ErrorMessage message={error.message} />;
-
-  const allUsers = users || DEMO_USERS;
-
-  return (
-    <ScrollView style={{ flex: 1, padding: 20 }}>
-      <Text variant="h1" style={{ marginBottom: 20 }}>👥 Users ({allUsers.length})</Text>
-      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
-        {allUsers.map((user: User) => (
-          <View key={user.id} style={{ width: '400px' }}>
-            <UserCard 
-              user={user} 
-              showBio={true}
-              onPress={() => console.log('View profile:', user.name)}
-            />
-          </View>
-        ))}
-      </View>
-    </ScrollView>
-  );
-}
-
-// Posts Page Component
-function PostsPage() {
-  const { data: posts, isLoading, error } = trpc.posts.getAll.useQuery();
-
-  if (isLoading) return <LoadingSpinner message="Loading posts..." />;
-  if (error) return <ErrorMessage message={error.message} />;
-
-  const allPosts = posts || DEMO_POSTS;
-
-  return (
-    <ScrollView style={{ flex: 1, padding: 20 }}>
-      <Text variant="h1" style={{ marginBottom: 20 }}>📝 Posts ({allPosts.length})</Text>
-      <View>
-        {allPosts.map((post: Post) => {
-          const author = DEMO_USERS.find(u => u.id === post.authorId);
-          return (
-            <PostCard 
-              key={post.id}
-              post={post}
-              author={author}
-              showFullContent={false}
-              onPress={() => console.log('Read post:', post.title)}
-              onLike={() => console.log('Like post:', post.title)}
-            />
-          );
-        })}
-      </View>
-    </ScrollView>
-  );
-}
-
-// Main App Component
-function App() {
+// Main App component using shared App wrapper
+function AppWithTrpcAndShared() {
   return (
-    <trpc.Provider client={trpcClient} queryClient={queryClient}>
-      <QueryClientProvider client={queryClient}>
-        <BrowserRouter>
-          <Screen>
-            <Navigation />
-            <Routes>
-              <Route path="/" element={<HomePage />} />
-              <Route path="/users" element={<UsersPage />} />
-              <Route path="/posts" element={<PostsPage />} />
-            </Routes>
-          </Screen>
-        </BrowserRouter>
-      </QueryClientProvider>
-    </trpc.Provider>
+    <App 
+      apiUrl="http://localhost:3000/trpc"
+      name="{{projectName}} Developer"
+      platform="web"
+      projectName="{{projectName}}"
+    />
   );
 }
 
-export default App;
+export default AppWithTrpcAndShared;

package/templates/web/src/components/TestDemo.tsx

@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import { View, Text, Card, Button, Input } from '@idealyst/components';
+import { trpc } from '../utils/trpc';
+
+export const TestDemo: React.FC = () => {
+  const [newTestName, setNewTestName] = useState('');
+  const [newTestMessage, setNewTestMessage] = useState('');
+
+  // tRPC queries and mutations
+  const { data: tests, isLoading, refetch } = trpc.test.getAll.useQuery();
+  const createTestMutation = trpc.test.create.useMutation({
+    onSuccess: () => {
+      refetch();
+      setNewTestName('');
+      setNewTestMessage('');
+    },
+  });
+  const deleteTestMutation = trpc.test.delete.useMutation({
+    onSuccess: () => {
+      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 });
+  };
+
+  if (isLoading) {
+    return (
+      <Card variant="outlined" padding="large">
+        <Text size="medium">Loading tests...</Text>
+      </Card>
+    );
+  }
+
+  return (
+    <View style={{ gap: 16 }}>
+      {/* Header */}
+      <Card variant="elevated" padding="large" intent="primary">
+        <View style={{ alignItems: 'center' }}>
+          <Text style={{ fontSize: 24, marginBottom: 8 }}>🧪</Text>
+          <Text size="large" weight="bold" style={{ marginBottom: 8, textAlign: 'center' }}>
+            tRPC + Database Test
+          </Text>
+          <Text size="medium" style={{ textAlign: 'center' }}>
+            This demonstrates end-to-end type-safe API calls from the web app to the database.
+          </Text>
+        </View>
+      </Card>
+
+      {/* Create Test Form */}
+      <Card variant="outlined" padding="large">
+        <Text size="medium" weight="bold" style={{ marginBottom: 16 }}>
+          Create New Test
+        </Text>
+        
+        <View style={{ gap: 12 }}>
+          <Input
+            label="Test Name"
+            value={newTestName}
+            onChangeText={setNewTestName}
+            placeholder="Enter test name"
+          />
+          <Input
+            label="Test Message"
+            value={newTestMessage}
+            onChangeText={setNewTestMessage}
+            placeholder="Enter test message"
+            multiline
+          />
+          <Button
+            variant="contained"
+            intent="primary"
+            onPress={handleCreateTest}
+            disabled={!newTestName || !newTestMessage || createTestMutation.isPending}
+          >
+            {createTestMutation.isPending ? 'Creating...' : 'Create Test'}
+          </Button>
+        </View>
+      </Card>
+
+      {/* Test Results */}
+      <Card variant="outlined" padding="large">
+        <Text size="medium" weight="bold" style={{ marginBottom: 16 }}>
+          Test Entries ({tests?.count || 0})
+        </Text>
+        
+        {tests?.data && tests.data.length > 0 ? (
+          <View style={{ gap: 12 }}>
+            {tests.data.map((test) => (
+              <Card key={test.id} variant="filled" padding="medium">
+                <View style={{ 
+                  flexDirection: 'row', 
+                  justifyContent: 'space-between', 
+                  alignItems: 'flex-start',
+                  gap: 12
+                }}>
+                  <View style={{ flex: 1 }}>
+                    <Text size="medium" weight="semibold" style={{ marginBottom: 4 }}>
+                      {test.name}
+                    </Text>
+                    <Text size="small" style={{ marginBottom: 8, opacity: 0.8 }}>
+                      {test.message}
+                    </Text>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                      <Card 
+                        variant="filled" 
+                        padding="small" 
+                        intent={test.status === 'active' ? 'success' : 'neutral'}
+                      >
+                        <Text size="small" weight="semibold">
+                          {test.status}
+                        </Text>
+                      </Card>
+                      <Text size="small" style={{ opacity: 0.6 }}>
+                        {new Date(test.createdAt).toLocaleDateString()}
+                      </Text>
+                    </View>
+                  </View>
+                  <Button
+                    variant="outlined"
+                    intent="error"
+                    size="small"
+                    onPress={() => handleDeleteTest(test.id)}
+                    disabled={deleteTestMutation.isPending}
+                  >
+                    Delete
+                  </Button>
+                </View>
+              </Card>
+            ))}
+          </View>
+        ) : (
+          <Card variant="filled" padding="medium" style={{ opacity: 0.6 }}>
+            <Text size="small" style={{ textAlign: 'center' }}>
+              No tests found. Create one above to get started!
+            </Text>
+          </Card>
+        )}
+      </Card>
+
+      {/* Type Safety Info */}
+      <Card variant="filled" intent="success" padding="medium">
+        <Text size="small" weight="semibold" style={{ marginBottom: 4 }}>
+          ✨ Type Safety Features:
+        </Text>
+        <Text size="small">
+          • Full TypeScript types from database to frontend • tRPC ensures API type safety • 
+          Prisma provides database schema validation • Real-time type checking across the stack
+        </Text>
+      </Card>
+    </View>
+  );
+};

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

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

package/templates/web/tsconfig.json

@@ -4,7 +4,6 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-    "moduleResolution": "node",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",

package/templates/workspace/.devcontainer/devcontainer.json

@@ -6,10 +6,9 @@
 
   // Forward ports
   "forwardPorts": [
-    3000,  // Web dev server
-    3001,  // API server
+    3000,  // Api server
     5173,  // Vite dev server
-    8080,  // Additional dev server
+    8081,  // Metro Bundler
     19006, // Expo dev tools
     5432,  // PostgreSQL
     6379,   // Redis
@@ -19,10 +18,6 @@
   // Port attributes
   "portsAttributes": {
     "3000": {
-      "label": "Web App",
-      "onAutoForward": "openBrowser"
-    },
-    "3001": {
       "label": "API Server",
       "onAutoForward": "notify"
     },
@@ -30,8 +25,8 @@
       "label": "Vite Dev Server",
       "onAutoForward": "openBrowser"
     },
-    "8080": {
-      "label": "Additional Dev Server",
+    "8081": {
+      "label": "Metro Bundler",
       "onAutoForward": "notify"
     },
     "19006": {

package/templates/workspace/.devcontainer/docker-compose.yml

@@ -30,9 +30,8 @@ services:
       REDIS_URL: redis://redis:6379
     ports:
       - "3000:3000"
-      - "3001:3001"
       - "5173:5173"
-      - "8080:8080"
+      - "8081:8081"
       - "19006:19006"
     volumes:
       - ..:/workspace

package/templates/workspace/.devcontainer/setup.sh

@@ -20,7 +20,7 @@ POSTGRES_PASSWORD=postgres
 REDIS_URL=redis://redis:6379
 
 # API Configuration
-API_PORT=3001
+API_PORT=3000
 JWT_SECRET=your-jwt-secret-here
 
 # Web Configuration

package/templates/workspace/.env.example

@@ -15,7 +15,7 @@ POSTGRES_PORT=5432
 REDIS_PORT=6379
 
 # API Configuration
-API_PORT=3001
+API_PORT=3000
 JWT_SECRET=your-jwt-secret-change-this-in-production
 
 # Web Configuration

package/templates/workspace/Dockerfile

@@ -45,13 +45,13 @@ COPY --from=builder /app/node_modules ./node_modules
 COPY --from=builder /app/package.json ./
 
 USER apiuser
-EXPOSE 3001
+EXPOSE 3000
 ENV NODE_ENV=production
-ENV PORT=3001
+ENV PORT=3000
 
 # Health check for API
 HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
-  CMD node -e "require('http').get('http://localhost:3001/health', (res) => { process.exit(res.statusCode === 200 ? 0 : 1) })"
+  CMD node -e "require('http').get('http://localhost:3000/health', (res) => { process.exit(res.statusCode === 200 ? 0 : 1) })"
 
 CMD ["node", "packages/api/dist/server.js"]
 
@@ -98,7 +98,7 @@ COPY --chown=devuser:devuser packages/web/package.json ./packages/web/
 # Install dependencies including dev dependencies
 RUN yarn install
 
-EXPOSE 3000 3001 5173 8080 19006
+EXPOSE 3000 5173 1 19006
 
 CMD ["tail", "-f", "/dev/null"]