@idealyst/cli 1.0.41 → 1.0.43

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

@@ -0,0 +1,304 @@
+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 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() {
+  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>
+  );
+}
+
+export default App;

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

@@ -1,5 +1,5 @@
 {
-  "name": "Idealyst Development",
+  "name": "{{projectName}} Development",
   "dockerComposeFile": "docker-compose.yml",
   "service": "app",
   "workspaceFolder": "/workspace",
@@ -12,7 +12,8 @@
     8080,  // Additional dev server
     19006, // Expo dev tools
     5432,  // PostgreSQL
-    6379   // Redis
+    6379,   // Redis
+    3333    // Figma MCP server
   ],
 
   // Port attributes
@@ -44,6 +45,10 @@
     "6379": {
       "label": "Redis Cache",
       "onAutoForward": "silent"
+    },
+    "3333": {
+      "label": "Figma MCP Server",
+      "onAutoForward": "openBrowser"
     }
   },
 

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

@@ -42,6 +42,20 @@ services:
       - redis
     command: sleep infinity
 
+  # Figma MCP Server
+  figma-mcp:
+    image: node:18-alpine
+    working_dir: /app
+    environment:
+      - FIGMA_ACCESS_TOKEN=${FIGMA_ACCESS_TOKEN:-}
+    ports:
+      - "3333:3333"
+    volumes:
+      - ./figma-mcp.sh:/app/figma-mcp.sh:ro
+      - figma_mcp_data:/app/node_modules
+    command: ["sh", "/app/figma-mcp.sh"]
+
 volumes:
   postgres_data:
   redis_data:
+  figma_mcp_data:

package/templates/workspace/.devcontainer/figma-mcp.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+set -e
+
+echo "Starting Figma MCP Server..."
+
+# Check if FIGMA_ACCESS_TOKEN is provided
+if [ -z "$FIGMA_ACCESS_TOKEN" ]; then
+    echo "❌ No FIGMA_ACCESS_TOKEN provided"
+    echo "💡 Add your token to .devcontainer/.env to enable Figma integration"
+    echo "   Example: echo 'FIGMA_ACCESS_TOKEN=fig_your_token_here' > .devcontainer/.env"
+    echo ""
+    echo "🔄 Keeping container alive (waiting for token)..."
+    sleep infinity
+    exit 0
+fi
+
+echo "✅ Figma token found, installing figma-developer-mcp..."
+
+# Install figma-developer-mcp if not already installed
+if ! command -v figma-developer-mcp &> /dev/null; then
+    npm install -g figma-developer-mcp
+    echo "📦 figma-developer-mcp installed successfully"
+else
+    echo "📦 figma-developer-mcp already installed"
+fi
+
+echo "🚀 Starting Figma MCP server on port 3333..."
+echo "🎨 Figma designs will be available to AI tools like Claude"
+
+# Start the MCP server with the correct environment variable
+export FIGMA_API_KEY="$FIGMA_ACCESS_TOKEN"
+exec npx figma-developer-mcp --port 3333

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

@@ -60,5 +60,8 @@ if [ -d "packages" ]; then
     done
 fi
 
+echo "Add Figma MCP to Claude Code"
+claude mcp add -t sse figma-mcp http://figma-mcp:3333/sse
+
 echo "✅ Development environment is ready!"
 echo "🎉 You can now start developing your Idealyst application!"

package/templates/workspace/setup.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+
+# Idealyst Framework Workspace Setup Script
+# This script sets up the development environment for your workspace
+
+echo "🏗️ Setting up Idealyst Framework workspace..."
+
+# Install dependencies
+echo "📦 Installing dependencies..."
+yarn install
+
+# Build all packages
+echo "🔨 Building packages..."
+yarn build:packages
+
+# Set up git hooks (if using husky)
+if [ -f "package.json" ] && grep -q "husky" package.json; then
+  echo "🪝 Setting up git hooks..."
+  yarn prepare
+fi
+
+echo "✅ Workspace setup complete!"
+echo ""
+echo "🚀 Quick start:"
+echo "  • Run 'yarn dev' to start development mode"
+echo "  • Run 'yarn build' to build all packages"
+echo "  • Run 'yarn test' to run tests"
+echo "  • Use 'idealyst create <type> <name>' to add new projects"
+echo ""
+echo "📚 Check README.md and DOCKER.md for more information."

package/templates/workspace/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020"],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": [
+    "packages/*/src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.test.ts",
+    "**/*.spec.ts"
+  ],
+  "references": [
+    {
+      "path": "./packages/*"
+    }
+  ]
+}

package/dist/templates/database/__tests__/database.test.ts

@@ -1,14 +0,0 @@
-import { describe, it, expect } from '@jest/globals';
-import { db } from '../src';
-
-describe('Database', () => {
-  it('should export database client', () => {
-    expect(db).toBeDefined();
-  });
-
-  it('should connect to database', async () => {
-    // This is a basic connection test
-    // Add your own model-specific tests here
-    expect(db.$connect).toBeDefined();
-  });
-});

package/dist/templates/database/jest.config.js

@@ -1,19 +0,0 @@
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'node',
-  collectCoverageFrom: [
-    'src/**/*.{ts,tsx}',
-    '!src/**/*.d.ts',
-  ],
-  testMatch: [
-    '**/__tests__/**/*.test.{ts,tsx}',
-  ],
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
-  transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest',
-  },
-  moduleNameMapping: {
-    '^@/(.*)$': '<rootDir>/src/$1',
-  },
-};

package/dist/templates/database/jest.setup.js

@@ -1,11 +0,0 @@
-// Global test setup
-import { beforeEach, afterEach } from '@jest/globals';
-
-// Mock environment variables for testing
-process.env.NODE_ENV = 'test';
-process.env.DATABASE_URL = 'file:./test.db';
-
-// Clean up after each test
-afterEach(async () => {
-  // Add any cleanup logic here
-});

package/dist/templates/database/prisma/schema.prisma

@@ -1,21 +0,0 @@
-// This is your Prisma schema file,
-// learn more about it in the docs: https://pris.ly/d/prisma-schema
-
-generator client {
-  provider = "prisma-client-js"
-}
-
-datasource db {
-  provider = "sqlite"
-  url      = env("DATABASE_URL")
-}
-
-// Add your models here
-// Example:
-// model User {
-//   id        String   @id @default(cuid())
-//   email     String   @unique
-//   name      String?
-//   createdAt DateTime @default(now())
-//   updatedAt DateTime @updatedAt
-// }

package/dist/templates/database/src/client.ts

@@ -1,18 +0,0 @@
-import { PrismaClient } from '@prisma/client';
-
-declare global {
-  // Prevent multiple instances of Prisma Client in development
-  var __globalPrisma: PrismaClient | undefined;
-}
-
-const prisma =
-  globalThis.__globalPrisma ??
-  new PrismaClient({
-    log: ['query', 'error', 'warn'],
-  });
-
-if (process.env.NODE_ENV !== 'production') {
-  globalThis.__globalPrisma = prisma;
-}
-
-export default prisma;

package/dist/templates/database/src/schemas.ts

@@ -1,26 +0,0 @@
-import { z } from 'zod';
-
-// Add your Zod schemas here to match your Prisma models
-// Example:
-// export const UserSchema = z.object({
-//   id: z.string().cuid(),
-//   email: z.string().email(),
-//   name: z.string().optional(),
-//   createdAt: z.date(),
-//   updatedAt: z.date(),
-// });
-
-// export const CreateUserSchema = UserSchema.omit({
-//   id: true,
-//   createdAt: true,
-//   updatedAt: true,
-// });
-
-// export const UpdateUserSchema = CreateUserSchema.partial();
-
-// Export all your schemas
-export const schemas = {
-  // user: UserSchema,
-  // createUser: CreateUserSchema,
-  // updateUser: UpdateUserSchema,
-} as const;