@idealyst/cli 1.0.90 → 1.0.92

package/template/packages/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="lg">
+        <Text size="md">Loading tests...</Text>
+      </Card>
+    );
+  }
+
+  return (
+    <View style={{ gap: 16 }}>
+      {/* Header */}
+      <Card variant="elevated" padding="lg" intent="primary">
+        <View style={{ alignItems: 'center' }}>
+          <Text style={{ fontSize: 24, marginBottom: 8 }}>🧪</Text>
+          <Text size="lg" weight="bold" style={{ marginBottom: 8, textAlign: 'center' }}>
+            tRPC + Database Test
+          </Text>
+          <Text size="md" 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="lg">
+        <Text size="md" 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="lg">
+        <Text size="md" 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="md">
+                <View style={{ 
+                  flexDirection: 'row', 
+                  justifyContent: 'space-between', 
+                  alignItems: 'flex-start',
+                  gap: 12
+                }}>
+                  <View style={{ flex: 1 }}>
+                    <Text size="md" weight="semibold" style={{ marginBottom: 4 }}>
+                      {test.name}
+                    </Text>
+                    <Text size="sm" style={{ marginBottom: 8, opacity: 0.8 }}>
+                      {test.message}
+                    </Text>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                      <Card 
+                        variant="filled" 
+                        padding="sm" 
+                        intent={test.status === 'active' ? 'success' : 'neutral'}
+                      >
+                        <Text size="sm" weight="semibold">
+                          {test.status}
+                        </Text>
+                      </Card>
+                      <Text size="sm" style={{ opacity: 0.6 }}>
+                        {new Date(test.createdAt).toLocaleDateString()}
+                      </Text>
+                    </View>
+                  </View>
+                  <Button
+                    variant="outlined"
+                    intent="error"
+                    size="sm"
+                    onPress={() => handleDeleteTest(test.id)}
+                    disabled={deleteTestMutation.isPending}
+                  >
+                    Delete
+                  </Button>
+                </View>
+              </Card>
+            ))}
+          </View>
+        ) : (
+          <Card variant="filled" padding="md" style={{ opacity: 0.6 }}>
+            <Text size="sm" style={{ textAlign: 'center' }}>
+              No tests found. Create one above to get started!
+            </Text>
+          </Card>
+        )}
+      </Card>
+
+      {/* Type Safety Info */}
+      <Card variant="filled" intent="success" padding="md">
+        <Text size="sm" weight="semibold" style={{ marginBottom: 4 }}>
+          ✨ Type Safety Features:
+        </Text>
+        <Text size="sm">
+          • 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/template/packages/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/template/packages/web/src/utils/trpc.ts

@@ -0,0 +1,7 @@
+// Import tRPC client utilities from shared package
+export { 
+  trpc, 
+  createTRPCClient, 
+  createVanillaTRPCClient 
+} from '@{{workspaceScope}}/shared';
+export type { TRPCClientConfig, AppRouter } from '@{{workspaceScope}}/shared'; 

package/template/packages/web/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "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/template/packages/web/vite.config.ts

@@ -0,0 +1,98 @@
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { defineConfig } from "vite";
+import babel from "vite-plugin-babel";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    babel({
+      filter: (id) =>
+        id.includes("node_modules/@idealyst/") ||
+        (id.includes("/packages/") &&
+          !id.includes("/packages/web/") &&
+          /\.(tsx?|jsx?)$/.test(id)),
+      babelConfig: {
+        presets: [
+          ["@babel/preset-react", { runtime: "automatic" }],
+          [
+            "@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-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",
+      "@test/shared",
+    ],
+    esbuildOptions: {
+      loader: {
+        ".tsx": "tsx",
+        ".ts": "ts",
+        ".jsx": "jsx",
+        ".js": "jsx", // Important: treat .js files as JSX for React Native compatibility
+      },
+      alias: {
+        "react-native": path.resolve(__dirname, "node_modules/react-native-web"),
+        "@react-native/normalize-colors": path.resolve(__dirname, "../../node_modules/@react-native/normalize-colors"),
+      },
+    },
+  },
+  server: {
+    host: "0.0.0.0",
+    port: 5173,
+  },
+});

package/template/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/template/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020"],
+    "module": "commonjs",
+    "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/template/packages/mobile/src/App-with-trpc.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
-
-// Create tRPC client using shared factory
-const queryClient = new QueryClient();
-
-const trpcClient = createTRPCClient({
-  apiUrl: 'http://localhost:3000/trpc', // Update this to your API URL
-  // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
-  // Optional: Add headers for authentication
-  // headers() {
-  //   return {
-  //     authorization: getAuthToken(),
-  //   };
-  // },
-});
-
-function App() {
-  return (
-    <trpc.Provider client={trpcClient} queryClient={queryClient}>
-      <QueryClientProvider client={queryClient}>
-        <NavigatorProvider route={AppRouter} />
-      </QueryClientProvider>
-    </trpc.Provider>
-  );
-}
-
-export default App; 

package/dist/template/packages/web/src/App-with-trpc.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { BrowserRouter } from 'react-router-dom';
-import { NavigatorProvider } from '@idealyst/navigation';
-import { trpc, createTRPCClient, AppRouter } from '{{workspaceScope}}/shared';
-
-// Create tRPC client using shared factory
-const queryClient = new QueryClient();
-
-const trpcClient = createTRPCClient({
-  apiUrl: 'http://localhost:3000/trpc', // Update this to match your API URL
-  // Optional: Add headers for authentication
-  // headers() {
-  //   return {
-  //     authorization: getAuthToken(),
-  //   };
-  // },
-});
-
-function App() {
-  return (
-    <trpc.Provider client={trpcClient} queryClient={queryClient}>
-      <QueryClientProvider client={queryClient}>
-        <BrowserRouter>
-          <NavigatorProvider route={AppRouter} />
-        </BrowserRouter>
-      </QueryClientProvider>
-    </trpc.Provider>
-  );
-}
-
-export default App;