@idealyst/cli 1.0.32 → 1.0.34

package/dist/templates/web/src/App-with-trpc.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { trpc } from './utils/trpc';
+import { Screen, Text, View } from '@idealyst/components';
+
+// Create tRPC client
+const queryClient = new QueryClient();
+
+const trpcClient = trpc.createClient({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000/trpc', // Update this to match your API URL
+      // Optional: Add headers for authentication
+      // headers() {
+      //   return {
+      //     authorization: getAuthToken(),
+      //   };
+      // },
+    }),
+  ],
+});
+
+function HomePage() {
+  // Example tRPC usage
+  const { data, isLoading, error } = trpc.hello.useQuery({ name: 'World' });
+
+  return (
+    <Screen>
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <Text variant="h1">Welcome to {{projectName}}!</Text>
+        <Text variant="body">
+          This is a React Web app built with the Idealyst Framework
+        </Text>
+        
+        {/* tRPC Example */}
+        <View style={{ marginTop: 20 }}>
+          <Text variant="h3">tRPC Example:</Text>
+          {isLoading && <Text>Loading...</Text>}
+          {error && <Text>Error: {error.message}</Text>}
+          {data && <Text>{data.greeting}</Text>}
+        </View>
+        
+        <Text variant="caption" style={{ marginTop: 20 }}>
+          Edit src/App.tsx to get started
+        </Text>
+      </View>
+    </Screen>
+  );
+}
+
+function App() {
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+          </Routes>
+        </BrowserRouter>
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}
+
+export default App; 

package/dist/templates/web/src/App.tsx

@@ -0,0 +1,15 @@
+import { BrowserRouter } from 'react-router-dom';
+import { ExampleStackRouter, } from '@idealyst/navigation/examples';
+import { NavigatorProvider } from '@idealyst/navigation';
+
+function App() {
+  return (
+    <div className="App">
+      <BrowserRouter>
+        <NavigatorProvider route={ExampleStackRouter} />
+      </BrowserRouter>
+    </div>
+  );  
+}
+
+export default App; 

package/dist/templates/web/src/main.tsx

@@ -0,0 +1,25 @@
+import '@idealyst/navigation/examples/unistyles';
+
+import * as React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+
+// Hydrate the app if it's SSR, otherwise render normally
+const container = document.getElementById('root')!;
+
+if (container.hasChildNodes()) {
+  // If the container has child nodes, it means we're hydrating SSR content
+  ReactDOM.hydrateRoot(container, 
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+  );
+} else {
+  // Otherwise, render normally (for development)
+  const root = ReactDOM.createRoot(container);
+  root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+  );
+} 

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

@@ -0,0 +1,93 @@
+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>
+  );
+}
+```
+*/ 

package/dist/templates/web/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "react-native": ["node_modules/react-native-web"]
+    },
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+} 

package/dist/templates/web/vite.config.ts

@@ -0,0 +1,69 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import babel from 'vite-plugin-babel'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    babel({
+      filter: (id) => id.includes('node_modules/@idealyst/') && /\.(js|jsx|ts|tsx)$/.test(id),
+      babelConfig: {
+        presets: [
+          ['@babel/preset-typescript', {
+            isTSX: true,
+            allExtensions: true,
+          }]
+        ],
+        plugins: [
+          ['react-native-unistyles/plugin', {
+            root: 'src',
+            autoProcessPaths: ['@idealyst/components', '@idealyst/navigation', '@idealyst/theme'],
+          }],
+          ['@idealyst/components/plugin/web', { root: 'src' }]
+        ]
+      }
+    }),
+    // Then process everything else with React plugin
+    react(),
+  ],
+  resolve: {
+    alias: {
+      // Use absolute path to resolve react-native-web properly
+      'react-native': path.resolve(__dirname, 'node_modules/react-native-web'),
+      '@react-native/normalize-colors': path.resolve(__dirname, 'node_modules/@react-native/normalize-colors'),
+    },
+    // Platform-specific file resolution
+    extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.js', '.jsx'],
+    // Ensure proper resolution of package exports
+    conditions: ['browser', 'import', 'module', 'default'],
+    // Ensure workspace dependencies resolve properly
+    preserveSymlinks: false
+  },
+  define: {
+    global: 'globalThis',
+    __DEV__: JSON.stringify(true),
+  },
+  optimizeDeps: {
+    include: [
+      'react-native-web',
+      '@react-native/normalize-colors',
+      'react-native-unistyles',
+      'react-native-unistyles/web',
+      '@mdi/react',
+      '@mdi/js',
+    ],
+    exclude: [
+      'react-native-edge-to-edge',
+      'react-native-nitro-modules',
+      '@idealyst/components',
+      '@idealyst/navigation', 
+      '@idealyst/theme',
+      '@testproject/shared',
+    ],
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+  },
+}) 

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

@@ -0,0 +1,140 @@
+{
+  "name": "Idealyst Development Environment",
+  "dockerComposeFile": ["./docker-compose.yml"],
+  "service": "dev",
+  "workspaceFolder": "/app",
+  "shutdownAction": "stopCompose",
+
+  // VS Code configuration
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "terminal.integrated.shell.linux": "/bin/bash",
+        "typescript.preferences.includePackageJsonAutoImports": "auto",
+        "editor.formatOnSave": true,
+        "editor.codeActionsOnSave": {
+          "source.fixAll.eslint": "explicit",
+          "source.organizeImports": "explicit"
+        },
+        "files.watcherExclude": {
+          "**/node_modules/**": true,
+          "**/.git/**": true,
+          "**/dist/**": true,
+          "**/coverage/**": true
+        },
+        "search.exclude": {
+          "**/node_modules": true,
+          "**/dist": true,
+          "**/coverage": true,
+          "**/.yarn": true
+        },
+        "typescript.preferences.importModuleSpecifier": "relative",
+        "jest.jestCommandLine": "yarn test",
+        "jest.autoRun": "off"
+      },
+
+      // Extensions to install
+      "extensions": [
+        "ms-vscode.vscode-typescript-next",
+        "bradlc.vscode-tailwindcss",
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint",
+        "ms-vscode.vscode-json",
+        "ms-vscode.test-adapter-converter",
+        "orta.vscode-jest",
+        "ms-vscode.vscode-npm-script",
+        "christian-kohler.path-intellisense",
+        "formulahendry.auto-rename-tag",
+        "bradlc.vscode-tailwindcss",
+        "ms-vscode.vscode-docker",
+        "ms-azuretools.vscode-docker",
+        "redhat.vscode-yaml",
+        "ms-vscode.vscode-markdown",
+        "yzhang.markdown-all-in-one",
+        "davidanson.vscode-markdownlint",
+        "ms-vscode.vscode-git-graph",
+        "eamodio.gitlens",
+        "github.vscode-pull-request-github",
+        "github.copilot",
+        "github.copilot-chat",
+        "ms-vscode.vscode-react-native",
+        "msjsdiag.vscode-react-native"
+      ]
+    }
+  },
+
+  // Development container features
+  "features": {
+    "ghcr.io/devcontainers/features/git:1": {
+      "ppa": true,
+      "version": "latest"
+    },
+    "ghcr.io/devcontainers/features/github-cli:1": {
+      "version": "latest"
+    },
+    "ghcr.io/devcontainers/features/common-utils:2": {
+      "installZsh": true,
+      "configureZshAsDefaultShell": true,
+      "installOhMyZsh": true,
+      "username": "devuser",
+      "userUid": 1001,
+      "userGid": 1001
+    }
+  },
+
+  // Port forwarding for development servers
+  "forwardPorts": [
+    3000,  // Web dev server
+    3001,  // API server
+    5173,  // Vite dev server
+    8080,  // Additional dev server
+    19006, // Expo dev tools
+    5432,  // PostgreSQL
+    6379   // Redis
+  ],
+
+  "portsAttributes": {
+    "3000": {
+      "label": "Web App",
+      "onAutoForward": "openBrowser"
+    },
+    "3001": {
+      "label": "API Server",
+      "onAutoForward": "silent"
+    },
+    "5173": {
+      "label": "Vite Dev Server",
+      "onAutoForward": "openBrowser"
+    },
+    "19006": {
+      "label": "Expo Dev Tools",
+      "onAutoForward": "openBrowser"
+    },
+    "5432": {
+      "label": "PostgreSQL",
+      "onAutoForward": "silent"
+    },
+    "6379": {
+      "label": "Redis",
+      "onAutoForward": "silent"
+    }
+  },
+
+  // Post-create commands
+  "postCreateCommand": "bash .devcontainer/post-create.sh",
+
+  // Development user
+  "remoteUser": "devuser",
+
+  // Environment variables
+  "remoteEnv": {
+    "NODE_ENV": "development",
+    "DATABASE_URL": "postgresql://postgres:postgres@postgres:5432/idealyst_db",
+    "REDIS_URL": "redis://redis:6379"
+  },
+
+  // Mount the workspace with proper permissions
+  "mounts": [
+    "source=${localWorkspaceFolder},target=/app,type=bind,consistency=cached"
+  ]
+}

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

@@ -0,0 +1,74 @@
+services:
+  # PostgreSQL Database
+  postgres:
+    image: postgres:15-alpine
+    container_name: ${PROJECT_NAME:-truday}-postgres
+    environment:
+      POSTGRES_DB: ${POSTGRES_DB:-idealyst_db}
+      POSTGRES_USER: ${POSTGRES_USER:-postgres}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-postgres}
+    ports:
+      - "${POSTGRES_PORT:-5432}:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+      - ../docker/postgres/init.sql:/docker-entrypoint-initdb.d/init.sql
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-postgres}"]
+      interval: 30s
+      timeout: 10s
+      retries: 5
+    networks:
+      - idealyst-network
+
+  # Redis Cache
+  redis:
+    image: redis:7-alpine
+    container_name: ${PROJECT_NAME:-truday}-redis
+    ports:
+      - "${REDIS_PORT:-6379}:6379"
+    volumes:
+      - redis_data:/data
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 30s
+      timeout: 10s
+      retries: 5
+    networks:
+      - idealyst-network
+
+  # Development Service (for devcontainer)
+  dev:
+    build:
+      context: ..
+      dockerfile: Dockerfile
+      target: dev
+    container_name: ${PROJECT_NAME:-truday}-dev
+    environment:
+      NODE_ENV: development
+    ports:
+      - "3000:3000"   # Web dev server
+      - "3001:3001"   # API dev server
+      - "5173:5173"   # Vite dev server
+      - "8080:8080"   # Additional dev server
+      - "19006:19006" # Expo dev tools
+    volumes:
+      - ..:/app
+      - /app/node_modules
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+    networks:
+      - idealyst-network
+    tty: true
+    stdin_open: true
+
+volumes:
+  postgres_data:
+  redis_data:
+
+networks:
+  idealyst-network:
+    driver: bridge

package/dist/templates/workspace/.devcontainer/post-create.sh

@@ -0,0 +1,89 @@
+#!/bin/bash
+
+# Post-create script for Idealyst dev container
+echo "🚀 Setting up Idealyst development environment..."
+
+# Set proper permissions
+sudo chown -R devuser:devuser /app
+
+# Make scripts executable
+chmod +x /app/scripts/*.sh
+
+# Install dependencies if not already installed
+if [ ! -d "/app/node_modules" ]; then
+    echo "📦 Installing dependencies..."
+    yarn install
+fi
+
+# Set up git configuration (if not already set)
+if [ -z "$(git config --global user.name)" ]; then
+    echo "⚙️ Please configure git:"
+    echo "  git config --global user.name \"Your Name\""
+    echo "  git config --global user.email \"your.email@example.com\""
+fi
+
+# Create environment file if it doesn't exist
+if [ ! -f "/app/.env" ]; then
+    echo "📝 Creating .env file..."
+    cat > /app/.env << EOF
+# Database Configuration
+DATABASE_URL=postgresql://postgres:postgres@postgres:5432/idealyst_db
+POSTGRES_DB=idealyst_db
+POSTGRES_USER=postgres
+POSTGRES_PASSWORD=postgres
+
+# Redis Configuration
+REDIS_URL=redis://redis:6379
+
+# API Configuration
+API_PORT=3001
+JWT_SECRET=your-jwt-secret-here
+
+# Web Configuration
+WEB_PORT=3000
+
+# Development Configuration
+NODE_ENV=development
+LOG_LEVEL=debug
+
+# Project Configuration
+PROJECT_NAME={{packageName}}
+EOF
+fi
+
+# Wait for database to be ready
+echo "⏳ Waiting for database to be ready..."
+until pg_isready -h postgres -p 5432 -U postgres; do
+    echo "Database is unavailable - sleeping"
+    sleep 1
+done
+
+echo "✅ Database is ready!"
+
+# Run database migrations if they exist
+if [ -d "/app/packages" ]; then
+    echo "🗄️ Setting up database..."
+    
+    # Check if any package has prisma
+    for package_dir in /app/packages/*/; do
+        if [ -f "${package_dir}prisma/schema.prisma" ]; then
+            echo "Running Prisma setup for $(basename "$package_dir")..."
+            cd "$package_dir"
+            npx prisma generate
+            npx prisma db push
+            cd /app
+        fi
+    done
+fi
+
+# Set up git hooks if husky is present
+if [ -f "/app/package.json" ] && grep -q "husky" /app/package.json; then
+    echo "🐕 Setting up git hooks..."
+    yarn husky install
+fi
+
+# Create helpful aliases
+echo "⚡ Setting up helpful aliases..."
+cat >> ~/.bashrc << EOF
+
+source ~/.bashrc