@idealyst/cli 1.0.46 → 1.0.48

package/templates/shared/src/trpc/client.ts

@@ -0,0 +1,39 @@
+import { createTRPCReact } from '@trpc/react-query';
+import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
+import type { AppRouter } from '@{{workspaceScope}}/api';
+
+// Create the tRPC React hooks with full type safety
+export const trpc = createTRPCReact<AppRouter>();
+
+// Configuration for tRPC client
+export interface TRPCClientConfig {
+  apiUrl: string;
+  headers?: () => Record<string, string>;
+}
+
+// Create tRPC client factory
+export function createTRPCClient(config: TRPCClientConfig) {
+  return trpc.createClient({
+    links: [
+      httpBatchLink({
+        url: config.apiUrl,
+        headers: config.headers,
+      }),
+    ],
+  });
+}
+
+// Create a vanilla client (for use outside of React components)
+export function createVanillaTRPCClient(config: TRPCClientConfig) {
+  return createTRPCProxyClient<AppRouter>({
+    links: [
+      httpBatchLink({
+        url: config.apiUrl,
+        headers: config.headers,
+      }),
+    ],
+  });
+}
+
+// Export types
+export type { AppRouter } from '@{{workspaceScope}}/api';

package/templates/shared/tsconfig.json

@@ -2,8 +2,8 @@
   "compilerOptions": {
     "target": "ES2020",
     "module": "ESNext",
+    "moduleResolution": "bundler",
     "lib": ["ES2020"],
-    "moduleResolution": "node",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,

package/templates/web/README.md

@@ -4,7 +4,7 @@
 
 ## Getting Started
 
-This is a React web application built with the Idealyst Framework and Vite.
+This is a React web application built with the Idealyst Framework and Vite, with full-stack capabilities including database and API integration.
 
 ### Prerequisites
 
@@ -18,15 +18,53 @@ Install dependencies:
 yarn install
 ```
 
+### Database Setup
+
+If your project includes a database, set it up:
+
+```bash
+# Navigate to the database package
+cd packages/database
+
+# Install dependencies
+yarn install
+
+# Generate Prisma client
+yarn prisma:generate
+
+# Run database migrations
+yarn prisma:migrate
+
+# Seed the database with sample data
+yarn prisma:seed
+```
+
+### API Setup
+
+If your project includes an API, start the API server:
+
+```bash
+# Navigate to the API package
+cd packages/api
+
+# Install dependencies
+yarn install
+
+# Start the API server (usually on port 3000)
+yarn dev
+```
+
 ### Development
 
-Start the development server:
+Start the web development server:
 ```bash
 yarn dev
 ```
 
 The app will be available at `http://localhost:3000`
 
+If you have both database and API packages, make sure to start them first before starting the web app for full functionality.
+
 ### Building for Production
 
 Build the app:
@@ -43,24 +81,41 @@ yarn preview
 
 ```
 {{projectName}}/
+├── packages/
+│   ├── database/      # Database schema and migrations (if included)
+│   ├── api/          # tRPC API server (if included)
+│   ├── shared/       # Shared components and utilities
+│   └── web/          # React web application
 ├── src/
-│   ├── App.tsx        # Main app component
-│   └── main.tsx       # App entry point
-├── index.html         # HTML template
-├── vite.config.ts     # Vite configuration
-└── tsconfig.json      # TypeScript configuration
+│   ├── App.tsx       # Main app component
+│   ├── main.tsx      # App entry point
+│   ├── components/   # React components
+│   └── utils/        # Utility functions and tRPC client
+├── index.html        # HTML template
+├── vite.config.ts    # Vite configuration
+└── tsconfig.json     # TypeScript configuration
 ```
 
 ### Features
 
+- **Full-Stack Type Safety**: End-to-end TypeScript from database to frontend
+- **tRPC Integration**: Type-safe API calls with automatic TypeScript inference
+- **Database Integration**: Prisma ORM with SQLite for development
 - **Idealyst Components**: Cross-platform UI components
 - **Idealyst Navigation**: Consistent navigation system
 - **Idealyst Theme**: Unified theming across platforms
 - **React 19.1**: Latest React version
 - **Vite**: Fast build tool and dev server
-- **TypeScript**: Full type safety
 - **React Native Web**: Use React Native components on the web
 
+### API Demo
+
+If your project includes the API demo, you can access it at `/test-demo` to see:
+- Real-time database queries
+- CRUD operations (Create, Read, Update, Delete)
+- Type-safe tRPC integration
+- Form handling with validation
+
 ### Development
 
 The app uses the Idealyst Framework for consistent UI and navigation that works across web and mobile platforms.
@@ -86,5 +141,7 @@ const styles = createStyleSheet({
 ### Learn More
 
 - [Idealyst Framework Documentation](https://github.com/your-username/idealyst-framework)
+- [tRPC Documentation](https://trpc.io/)
+- [Prisma Documentation](https://prisma.io/)
 - [React Documentation](https://react.dev/)
 - [Vite Documentation](https://vitejs.dev/) 

package/templates/web/package.json

@@ -20,9 +20,9 @@
     "@mdi/react": "^1.6.1",
     "@react-native/normalize-colors": "^0.80.1",
     "@tanstack/react-query": "^5.83.0",
-    "@trpc/client": "^11.4.3",
-    "@trpc/react-query": "^11.4.3",
-    "@trpc/server": "^11.4.3",
+    "@trpc/client": "^11.5.1",
+    "@trpc/react-query": "^11.5.1",
+    "@trpc/server": "^11.5.1",
     "@types/react-router-dom": "^5.3.3",
     "compression": "^1.7.4",
     "express": "^4.18.2",

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

@@ -1,12 +1,16 @@
 import React from 'react';
+import { App } from '@{{workspaceScope}}/shared';
 
-// Import shared components
-import { HelloWorld } from '@{{workspaceScope}}/shared';
-
-function App() {
+// Main App component using shared App wrapper
+function AppWithTrpcAndShared() {
   return (
-    <HelloWorld name="{{projectName}} Developer" platform="web" projectName="{{projectName}}" />
+    <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"]
 

package/templates/workspace/docker/nginx/prod.conf

@@ -76,8 +76,8 @@ http {
     # Upstream servers with load balancing
     upstream api_backend {
         least_conn;
-        server {{PROJECT_NAME}}-api-1:3001 max_fails=3 fail_timeout=30s weight=1;
-        server {{PROJECT_NAME}}-api-2:3001 max_fails=3 fail_timeout=30s weight=1;
+        server {{PROJECT_NAME}}-api-1:3000 max_fails=3 fail_timeout=30s weight=1;
+        server {{PROJECT_NAME}}-api-2:3000 max_fails=3 fail_timeout=30s weight=1;
         keepalive 32;
     }
 

package/templates/workspace/docker/nginx.conf

@@ -42,7 +42,7 @@ http {
 
     # Upstream servers
     upstream api_backend {
-        server api:3001 max_fails=3 fail_timeout=30s;
+        server api:3000 max_fails=3 fail_timeout=30s;
     }
 
     upstream web_backend {

package/templates/workspace/docker/prometheus/prometheus.yml

@@ -15,7 +15,7 @@ scrape_configs:
   # API service
   - job_name: 'api'
     static_configs:
-      - targets: ['api:3001']
+      - targets: ['api:3000']
     metrics_path: '/metrics'
     scrape_interval: 30s
 

package/templates/workspace/docker-compose.yml

@@ -47,11 +47,11 @@ services:
     container_name: ${PROJECT_NAME:-idealyst}-api
     environment:
       NODE_ENV: ${NODE_ENV:-production}
-      PORT: 3001
+      PORT: 3000
       DATABASE_URL: postgresql://${POSTGRES_USER:-postgres}:${POSTGRES_PASSWORD:-postgres}@postgres:5432/${POSTGRES_DB:-idealyst_db}
       REDIS_URL: redis://redis:6379
     ports:
-      - "${API_PORT:-3001}:3001"
+      - "${API_PORT:-3000}:3000"
     depends_on:
       postgres:
         condition: service_healthy
@@ -61,7 +61,7 @@ services:
       - ./uploads:/app/uploads
     restart: unless-stopped
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3001/health"]
+      test: ["CMD", "curl", "-f", "http://localhost:3000/health"]
       interval: 30s
       timeout: 10s
       retries: 5
@@ -98,8 +98,7 @@ services:
     environment:
       NODE_ENV: development
     ports:
-      - "3000:3000"   # Web dev server
-      - "3001:3001"   # API dev server
+      - "3000:3000"   # API dev server
       - "5173:5173"   # Vite dev server
       - "8080:8080"   # Additional dev server
       - "19006:19006" # Expo dev tools

package/templates/workspace/tsconfig.json

@@ -3,7 +3,6 @@
     "target": "ES2020",
     "lib": ["ES2020"],
     "module": "commonjs",
-    "moduleResolution": "node",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,