@idealyst/cli 1.0.40 → 1.0.43

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

@@ -0,0 +1,278 @@
+// Date and time utilities
+export const formatDate = (date: Date | string): string => {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  return d.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+};
+
+export const formatDateTime = (date: Date | string): string => {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  return d.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+};
+
+export const formatRelativeTime = (date: Date | string): string => {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - d.getTime()) / 1000);
+  
+  if (diffInSeconds < 60) return 'just now';
+  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} minutes ago`;
+  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hours ago`;
+  if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 86400)} days ago`;
+  return formatDate(d);
+};
+
+// String utilities
+export const truncateText = (text: string, maxLength: number): string => {
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength).trim() + '...';
+};
+
+export const capitalizeFirst = (text: string): string => {
+  if (!text) return text;
+  return text.charAt(0).toUpperCase() + text.slice(1);
+};
+
+export const slugify = (text: string): string => {
+  return text
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, '') // Remove special chars
+    .replace(/[\s_-]+/g, '-') // Replace spaces and underscores with hyphens
+    .replace(/^-+|-+$/g, ''); // Remove leading/trailing hyphens
+};
+
+// Array utilities
+export const paginate = <T>(array: T[], page: number, pageSize: number) => {
+  const startIndex = (page - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  
+  return {
+    items: array.slice(startIndex, endIndex),
+    total: array.length,
+    page,
+    pageSize,
+    hasMore: endIndex < array.length,
+    totalPages: Math.ceil(array.length / pageSize)
+  };
+};
+
+export const sortBy = <T>(array: T[], key: keyof T, order: 'asc' | 'desc' = 'asc'): T[] => {
+  return [...array].sort((a, b) => {
+    const aVal = a[key];
+    const bVal = b[key];
+    
+    if (aVal < bVal) return order === 'asc' ? -1 : 1;
+    if (aVal > bVal) return order === 'asc' ? 1 : -1;
+    return 0;
+  });
+};
+
+// Object utilities
+export const pick = <T extends object, K extends keyof T>(
+  obj: T,
+  keys: K[]
+): Pick<T, K> => {
+  const result = {} as Pick<T, K>;
+  keys.forEach(key => {
+    if (key in obj) {
+      result[key] = obj[key];
+    }
+  });
+  return result;
+};
+
+export const omit = <T extends object, K extends keyof T>(
+  obj: T,
+  keys: K[]
+): Omit<T, K> => {
+  const result = { ...obj };
+  keys.forEach(key => {
+    delete result[key];
+  });
+  return result as Omit<T, K>;
+};
+
+// Validation utilities
+export const isValidEmail = (email: string): boolean => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+
+export const isValidUrl = (url: string): boolean => {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+// Local storage utilities (with fallbacks for environments without localStorage)
+export const storage = {
+  get: (key: string): string | null => {
+    try {
+      if (typeof localStorage !== 'undefined') {
+        return localStorage.getItem(key);
+      }
+    } catch (error) {
+      console.warn('localStorage not available:', error);
+    }
+    return null;
+  },
+  
+  set: (key: string, value: string): void => {
+    try {
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem(key, value);
+      }
+    } catch (error) {
+      console.warn('localStorage not available:', error);
+    }
+  },
+  
+  remove: (key: string): void => {
+    try {
+      if (typeof localStorage !== 'undefined') {
+        localStorage.removeItem(key);
+      }
+    } catch (error) {
+      console.warn('localStorage not available:', error);
+    }
+  },
+  
+  getObject: <T>(key: string): T | null => {
+    const value = storage.get(key);
+    if (value) {
+      try {
+        return JSON.parse(value);
+      } catch (error) {
+        console.warn('Failed to parse stored object:', error);
+      }
+    }
+    return null;
+  },
+  
+  setObject: <T>(key: string, value: T): void => {
+    try {
+      storage.set(key, JSON.stringify(value));
+    } catch (error) {
+      console.warn('Failed to stringify object for storage:', error);
+    }
+  }
+};
+
+// Debounce utility for search and input handling
+export const debounce = <T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): ((...args: Parameters<T>) => void) => {
+  let timeoutId: NodeJS.Timeout;
+  
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func(...args), delay);
+  };
+};
+
+// Theme utilities
+export const getSystemTheme = (): 'light' | 'dark' => {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return 'light';
+};
+
+// Error handling utilities
+export const getErrorMessage = (error: unknown): string => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  if (typeof error === 'string') {
+    return error;
+  }
+  return 'An unexpected error occurred';
+};
+
+// Platform detection utilities
+export const isWeb = (): boolean => {
+  return typeof window !== 'undefined';
+};
+
+export const isMobile = (): boolean => {
+  return typeof navigator !== 'undefined' && /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+};
+
+// Constants for demo data
+export const DEMO_USERS = [
+  {
+    id: '1',
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    avatar: 'https://via.placeholder.com/150/4CAF50/white?text=AJ',
+    bio: 'Full-stack developer passionate about React and TypeScript',
+    location: 'San Francisco, CA',
+    website: 'https://alice-dev.com'
+  },
+  {
+    id: '2', 
+    name: 'Bob Smith',
+    email: 'bob@example.com',
+    avatar: 'https://via.placeholder.com/150/2196F3/white?text=BS',
+    bio: 'UI/UX designer and frontend enthusiast',
+    location: 'New York, NY',
+    website: 'https://bobdesigns.co'
+  },
+  {
+    id: '3',
+    name: 'Carol Williams', 
+    email: 'carol@example.com',
+    avatar: 'https://via.placeholder.com/150/FF9800/white?text=CW',
+    bio: 'Product manager with a love for user research',
+    location: 'Austin, TX'
+  }
+];
+
+export const DEMO_POSTS = [
+  {
+    id: '1',
+    title: 'Getting Started with React Native',
+    content: 'React Native is a powerful framework for building cross-platform mobile applications...',
+    excerpt: 'Learn the basics of React Native development',
+    authorId: '1',
+    tags: ['react-native', 'mobile', 'javascript'],
+    published: true,
+    views: 234,
+    likes: 15
+  },
+  {
+    id: '2',
+    title: 'Design Systems in Modern Web Development',
+    content: 'A design system is a complete set of standards intended to manage design at scale...',
+    excerpt: 'Building consistent user interfaces across applications',
+    authorId: '2', 
+    tags: ['design-systems', 'ui-ux', 'frontend'],
+    published: true,
+    views: 189,
+    likes: 23
+  },
+  {
+    id: '3',
+    title: 'User Research Best Practices',
+    content: 'Understanding your users is crucial for building successful products...',
+    excerpt: 'How to conduct effective user research',
+    authorId: '3',
+    tags: ['user-research', 'product-management', 'ux'],
+    published: true,
+    views: 156,
+    likes: 31
+  }
+];

package/templates/web/package.json

@@ -30,7 +30,7 @@
     "react-dom": "^19.1.0",
     "react-native": "^0.80.1",
     "react-native-edge-to-edge": "^1.6.2",
-    "react-native-nitro-modules": "0.26.3",
+    "react-native-nitro-modules": "0.28.0",
     "react-native-unistyles": "^3.0.10",
     "react-native-web": "^0.20.0",
     "react-router": "^7.6.3",

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!"