@idealyst/cli 1.0.45 → 1.0.48

package/templates/native/src/utils/trpc.ts

@@ -1,127 +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 for authentication
-      // headers() {
-      //   return {
-      //     authorization: getAuthToken(),
-      //   };
-      // },
-    }),
-  ],
-});
-
-/*
-Usage Examples for React Native:
-
-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 React from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { httpBatchLink } from '@trpc/client';
-import { trpc } from './src/utils/trpc';
-
-const queryClient = new QueryClient();
-
-const trpcClient = trpc.createClient({
-  links: [
-    httpBatchLink({
-      url: 'http://localhost:3000/trpc', // Use your computer's IP for device testing
-      // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
-    }),
-  ],
-});
-
-function App() {
-  return (
-    <trpc.Provider client={trpcClient} queryClient={queryClient}>
-      <QueryClientProvider client={queryClient}>
-       // Your app components
-      </QueryClientProvider>
-    </trpc.Provider>
-  );
-}
-
-export default App;
-```
-
-4. Use tRPC in your React Native components:
-
-```tsx
-import React from 'react';
-import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
-import { trpc } from '../utils/trpc';
-
-function UsersList() {
-  const { data: users, isLoading, refetch } = trpc.users.getAll.useQuery();
-  const createUser = trpc.users.create.useMutation({
-    onSuccess: () => {
-      refetch(); // Refresh the list after creating
-    },
-  });
-
-  if (isLoading) {
-    return (
-      <View>
-        <Text>Loading...</Text>
-      </View>
-    );
-  }
-
-  return (
-    <ScrollView>
-      {users?.map(user => (
-        <View key={user.id}>
-          <Text>{user.name}</Text>
-          <Text>{user.email}</Text>
-        </View>
-      ))}
-      <TouchableOpacity
-        onPress={() => createUser.mutate({ 
-          email: 'test@example.com', 
-          name: 'Test User' 
-        })}
-      >
-        <Text>Create User</Text>
-      </TouchableOpacity>
-    </ScrollView>
-  );
-}
-```
-
-5. For device testing, make sure to:
-   - Use your computer's IP address instead of localhost
-   - Ensure your API server is accessible from the device
-   - Consider using ngrok for external testing
-
-6. Error handling example:
-
-```tsx
-const { data, error, isLoading } = trpc.users.getAll.useQuery();
-
-if (error) {
-  return <Text>Error: {error.message}</Text>;
-}
-```
-*/ 
+// Import tRPC client utilities from shared package
+export { 
+  trpc, 
+  createTRPCClient, 
+  createVanillaTRPCClient 
+} from '@{{workspaceScope}}/shared';
+export type { TRPCClientConfig, AppRouter } from '@{{workspaceScope}}/shared'; 

package/templates/native/tsconfig.json

@@ -7,12 +7,10 @@
     "isolatedModules": true,
     "jsx": "react-native",
     "lib": ["es2017"],
-    "moduleResolution": "node",
     "noEmit": true,
     "strict": true,
     "target": "esnext",
     "skipLibCheck": true,
-    "resolveJsonModule": true,
     "baseUrl": "./",
     "paths": {
       "@/*": ["./src/*"]

package/templates/shared/README.md

@@ -4,7 +4,7 @@
 
 ## Getting Started
 
-This is a shared library built with the Idealyst Framework that can be used across React Native and React web applications.
+This is a shared component library built with the Idealyst Framework that can be used across React Native and React web applications. It exports source TypeScript files directly for seamless integration in monorepo setups.
 
 ### Prerequisites
 
@@ -20,14 +20,40 @@ yarn install
 
 ### Development
 
-Build the library:
+Run tests:
 ```bash
-yarn build
+yarn test
 ```
 
-Watch for changes during development:
+Type checking:
 ```bash
-yarn dev
+yarn type-check
+```
+
+## Usage
+
+Import the HelloWorld component in your React or React Native app:
+
+```typescript
+import { HelloWorld } from '@{{workspaceName}}/shared';
+
+function App() {
+  return <HelloWorld name="Developer" />;
+}
+```
+
+## Component
+
+### HelloWorld
+
+A simple welcome component that works on both web and mobile platforms.
+
+**Props:**
+- `name?: string` - Name to display in the greeting (defaults to "World")
+
+**Example:**
+```typescript
+<HelloWorld name="Alice" />
 ```
 
 ### Project Structure

package/templates/shared/__tests__/shared.test.ts

@@ -1,10 +1,22 @@
-import { add_stuff } from '../src/index';
+import { HelloWorld } from '../src/index';
 
 describe('Shared Library', () => {
-  it('should export add_stuff', () => {
-    expect(add_stuff).toBeDefined();
-    expect(typeof add_stuff).toBe('string');
-    expect(add_stuff).toBe('here');
+  it('should export HelloWorld component', () => {
+    expect(HelloWorld).toBeDefined();
+    expect(typeof HelloWorld).toBe('function');
+  });
+});
+
+describe('HelloWorld Component', () => {
+  it('should be a React component', () => {
+    expect(HelloWorld).toBeDefined();
+    expect(typeof HelloWorld).toBe('function');
+  });
+
+  it('should accept props', () => {
+    // Test that the component function exists and can be called
+    // Note: Full component testing would require a React testing environment
+    expect(() => HelloWorld({ name: 'Test' })).not.toThrow();
   });
 });
 

package/templates/shared/package.json

@@ -2,45 +2,29 @@
   "name": "{{packageName}}",
   "version": "{{version}}",
   "description": "{{description}}",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./types": {
-      "import": "./dist/types/index.js",
-      "require": "./dist/types/index.js", 
-      "types": "./dist/types/index.d.ts"
-    },
-    "./components": {
-      "import": "./dist/components/index.js",
-      "require": "./dist/components/index.js",
-      "types": "./dist/components/index.d.ts"
-    },
-    "./utils": {
-      "import": "./dist/utils/index.js",
-      "require": "./dist/utils/index.js",
-      "types": "./dist/utils/index.d.ts"
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
     }
   },
   "scripts": {
-    "build": "tsc",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "type-check": "tsc --noEmit"
   },
-  "dependencies": {
-    "zod": "^3.22.4"
-  },
   "peerDependencies": {
     "@idealyst/components": "^1.0.21",
-    "@idealyst/navigation": "^1.0.21",
     "@idealyst/theme": "^1.0.21",
+    "@tanstack/react-query": "^5.83.0",
+    "@trpc/client": "^11.5.1",
+    "@trpc/react-query": "^11.5.1",
+    "@trpc/server": "^11.5.1",
     "react": "^19.1.0",
     "react-native": "^0.80.1"
   },
@@ -51,18 +35,18 @@
   },
   "devDependencies": {
     "@idealyst/components": "^1.0.21",
-    "@idealyst/navigation": "^1.0.21",
     "@idealyst/theme": "^1.0.21",
+    "@tanstack/react-query": "^5.83.0",
+    "@trpc/client": "^11.5.1",
+    "@trpc/react-query": "^11.5.1",
+    "@trpc/server": "^11.5.1",
     "@types/jest": "^29.5.12",
     "@types/react": "^19.1.0",
     "jest": "^29.7.0",
-    "react": "^19.1.0",
-    "react-native": "^0.80.1",
     "ts-jest": "^29.1.2",
     "typescript": "^5.0.0"
   },
   "files": [
-    "dist",
     "src"
   ],
   "keywords": [

package/templates/shared/src/components/App.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { trpc, createTRPCClient } from '../trpc/client';
+import { HelloWorld } from './HelloWorld';
+
+interface AppProps {
+  apiUrl?: string;
+  queryClient?: QueryClient;
+  headers?: () => Record<string, string>;
+  // HelloWorld component props
+  name?: string;
+  platform?: "web" | "mobile";
+  projectName?: string;
+}
+
+// Default query client instance
+const defaultQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      cacheTime: 1000 * 60 * 10, // 10 minutes
+    },
+  },
+});
+
+/**
+ * Unified App component that sets up tRPC and React Query providers
+ * and includes the HelloWorld component directly
+ */
+export const App: React.FC<AppProps> = ({ 
+  apiUrl = 'http://localhost:3000/trpc',
+  queryClient = defaultQueryClient,
+  headers,
+  name,
+  platform = "web",
+  projectName
+}) => {
+  // Create tRPC client with the provided configuration
+  const trpcClient = createTRPCClient({
+    apiUrl,
+    headers,
+  });
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <HelloWorld 
+          name={name}
+          platform={platform}
+          projectName={projectName}
+        />
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+};
+
+export default App;

package/templates/shared/src/components/HelloWorld.tsx

@@ -0,0 +1,307 @@
+import { Button, Card, Input, Screen, Text, View } from "@idealyst/components";
+import { useState } from "react";
+import { trpc } from "../trpc/client";
+
+interface HelloWorldProps {
+  name?: string;
+  platform?: "web" | "mobile";
+  projectName?: string;
+}
+
+export const HelloWorld = ({
+  name = "World",
+  platform = "web",
+  projectName = "Your Project",
+}: HelloWorldProps) => {
+  const [newTestName, setNewTestName] = useState("");
+  const [newTestMessage, setNewTestMessage] = useState("");
+
+  // Use tRPC hooks directly
+  const tests = trpc.test.getAll.useQuery({});
+  const createTestMutation = trpc.test.create.useMutation({
+    onSuccess: () => {
+      tests.refetch();
+      setNewTestName("");
+      setNewTestMessage("");
+    },
+  });
+  const deleteTestMutation = trpc.test.delete.useMutation({
+    onSuccess: () => {
+      tests.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 });
+  };
+
+  const platformEmoji = platform === "mobile" ? "📱" : "🌐";
+  const platformText =
+    platform === "mobile"
+      ? "Your mobile development environment is ready. This shared component works seamlessly across mobile and web platforms."
+      : "Your web development environment is ready. This shared component works seamlessly across web and mobile platforms.";
+
+  return (
+    <Screen style={{ flex: 1, padding: 20 }}>
+      <View style={{ maxWidth: 600, alignSelf: "center" }}>
+        <Text
+          size="xlarge"
+          weight="bold"
+          style={{
+            marginBottom: 16,
+            textAlign: "center",
+            color: "#1e293b",
+          }}
+        >
+          Welcome to {projectName}! {platformEmoji}
+        </Text>
+
+        <Text
+          size="large"
+          style={{
+            marginBottom: 32,
+            textAlign: "center",
+            color: "#64748b",
+            lineHeight: 24,
+            paddingHorizontal: 16,
+          }}
+        >
+          {platformText}
+        </Text>
+        {/* Framework Branding Card */}
+        <Card variant="elevated" padding="large" intent="primary">
+          <View style={{ alignItems: "center" }}>
+            <Text style={{ fontSize: 32, marginBottom: 16 }}>🚀</Text>
+            <Text
+              size="xlarge"
+              weight="bold"
+              style={{ marginBottom: 8, textAlign: "center" }}
+            >
+              Idealyst Framework
+            </Text>
+            <Text
+              size="medium"
+              style={{ marginBottom: 16, textAlign: "center" }}
+            >
+              Hello, {name}! Welcome to your cross-platform workspace.
+            </Text>
+
+            {/* Technology Tags */}
+            <View
+              style={{
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "center",
+                gap: 8,
+              }}
+            >
+              <Card
+                variant="filled"
+                padding="small"
+                style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
+              >
+                <Text size="small" weight="semibold">
+                  React
+                </Text>
+              </Card>
+              <Card
+                variant="filled"
+                padding="small"
+                style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
+              >
+                <Text size="small" weight="semibold">
+                  TypeScript
+                </Text>
+              </Card>
+              <Card
+                variant="filled"
+                padding="small"
+                style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
+              >
+                <Text size="small" weight="semibold">
+                  Cross-Platform
+                </Text>
+              </Card>
+            </View>
+          </View>
+        </Card>
+
+        {/* Quick Start Guide Card */}
+        <Card variant="outlined" padding="large" style={{ marginTop: 16 }}>
+          <Text size="large" weight="bold" style={{ marginBottom: 16 }}>
+            🎯 Quick Start Guide
+          </Text>
+
+          <View style={{ marginBottom: 16 }}>
+            <Text size="medium" weight="semibold" style={{ marginBottom: 8 }}>
+              Your Workspace Overview:
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              • <Text weight="semibold">packages/web/</Text> - React web
+              application
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              • <Text weight="semibold">packages/mobile/</Text> - React Native
+              mobile app
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              • <Text weight="semibold">packages/shared/</Text> - Cross-platform
+              components
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              • <Text weight="semibold">packages/api/</Text> - tRPC API server
+            </Text>
+          </View>
+
+          <View style={{ marginBottom: 16 }}>
+            <Text size="medium" weight="semibold" style={{ marginBottom: 8 }}>
+              Try Editing:
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              1. Edit this component in{" "}
+              <Text weight="semibold">
+                packages/shared/src/components/HelloWorld.tsx
+              </Text>
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              2. Watch changes appear in both web and mobile apps instantly!
+            </Text>
+            <Text size="small" style={{ marginBottom: 4 }}>
+              3. Run <Text weight="semibold">yarn dev</Text> to start all
+              development servers
+            </Text>
+          </View>
+
+          <Card variant="filled" intent="success" padding="medium">
+            <Text size="small" weight="semibold" style={{ marginBottom: 4 }}>
+              ✨ Framework Features:
+            </Text>
+            <Text size="small">
+              Shared components • Type safety • Hot reload • Cross-platform
+              compatibility
+            </Text>
+          </Card>
+        </Card>
+
+        {/* API Testing Section */}
+        <Card variant="outlined" padding="large" style={{ marginTop: 16 }}>
+          <Text size="large" weight="bold" style={{ marginBottom: 16 }}>
+            🚀 API Demo - Database Integration
+          </Text>
+          <Text size="medium" style={{ marginBottom: 16, color: "#64748b" }}>
+            Test your full-stack integration! This section demonstrates
+            real-time database operations.
+          </Text>
+
+          {/* Create New Test Form */}
+          <Card
+            variant="filled"
+            padding="medium"
+            style={{ marginBottom: 16, backgroundColor: "#f8fafc" }}
+          >
+            <Text size="medium" weight="semibold" style={{ marginBottom: 12 }}>
+              Create New Test Entry
+            </Text>
+
+            <View style={{ gap: 12 }}>
+              <Input
+                placeholder="Test name"
+                value={newTestName}
+                onChangeText={setNewTestName}
+              />
+              <Input
+                placeholder="Test message"
+                value={newTestMessage}
+                onChangeText={setNewTestMessage}
+              />
+              <Button
+                onPress={handleCreateTest}
+                disabled={
+                  !newTestName ||
+                  !newTestMessage ||
+                  createTestMutation.isLoading
+                }
+                style={{ alignSelf: "flex-start" }}
+              >
+                {createTestMutation.isLoading ? "Creating..." : "Create Test"}
+              </Button>
+            </View>
+          </Card>
+
+          {/* Tests List */}
+          <View>
+            <Text size="medium" weight="semibold" style={{ marginBottom: 12 }}>
+              Database Records ({tests.data?.length || 0})
+            </Text>
+
+            {tests.isLoading ? (
+              <Card variant="outlined" padding="medium">
+                <Text size="small" style={{ color: "#64748b" }}>
+                  Loading tests...
+                </Text>
+              </Card>
+            ) : tests.data?.length === 0 ? (
+              <Card variant="outlined" padding="medium">
+                <Text size="small" style={{ color: "#64748b" }}>
+                  No tests found. Create one above!
+                </Text>
+              </Card>
+            ) : (
+              <View style={{ gap: 8 }}>
+                {tests.data?.map((test: any) => (
+                  <Card key={test.id} variant="outlined" padding="medium">
+                    <View
+                      style={{
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                      }}
+                    >
+                      <View style={{ flex: 1 }}>
+                        <Text
+                          size="small"
+                          weight="semibold"
+                          style={{ marginBottom: 4 }}
+                        >
+                          {test.name}
+                        </Text>
+                        <Text
+                          size="small"
+                          style={{ color: "#64748b", marginBottom: 4 }}
+                        >
+                          {test.message}
+                        </Text>
+                        <Text size="small" style={{ color: "#10b981" }}>
+                          Status: {test.status} •{" "}
+                          {new Date(test.createdAt).toLocaleDateString()}
+                        </Text>
+                      </View>
+                      <Button
+                        variant="destructive"
+                        size="small"
+                        onPress={() => handleDeleteTest(test.id)}
+                        disabled={deleteTestMutation.isLoading}
+                      >
+                        Delete
+                      </Button>
+                    </View>
+                  </Card>
+                ))}
+              </View>
+            )}
+          </View>
+        </Card>
+      </View>
+    </Screen>
+  );
+};