@idealyst/cli 1.0.45 → 1.0.46

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

@@ -1,265 +1,11 @@
-import React, { useState } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { httpBatchLink } from '@trpc/client';
-import { Screen, Text, View, Button, ScrollView } from '@idealyst/components';
-import { trpc } from './utils/trpc';
+import React from 'react';
 
-// Import shared components and utilities
-import {
-  UserCard,
-  PostCard,
-  LoadingSpinner,
-  ErrorMessage,
-  FeatureCard,
-  TabButton,
-  DEMO_USERS,
-  DEMO_POSTS,
-  formatRelativeTime,
-  type User,
-  type Post
-} from '{{workspaceScope}}/shared';
-
-// Create tRPC client
-const queryClient = new QueryClient();
-
-const trpcClient = trpc.createClient({
-  links: [
-    httpBatchLink({
-      url: 'http://localhost:3001/trpc', // Update this to your API URL
-      // For device testing, you might need: 'http://192.168.1.xxx:3001/trpc'
-      // Optional: Add headers for authentication
-      // headers() {
-      //   return {
-      //     authorization: getAuthToken(),
-      //   };
-      // },
-    }),
-  ],
-});
+// Import shared components
+import { HelloWorld } from '@{{workspaceScope}}/shared';
 
 function App() {
-  const [currentTab, setCurrentTab] = useState<'home' | 'users' | 'posts'>('home');
-  
-  // Example tRPC usage
-  const { data: helloData, isLoading: helloLoading, error: helloError } = trpc.hello.useQuery({ name: 'Mobile User' });
-  const { data: usersData, isLoading: usersLoading } = trpc.users.getAll.useQuery();
-  const { data: postsData, isLoading: postsLoading } = trpc.posts.getAll.useQuery();
-
-  const renderHome = () => (
-    <ScrollView style={{ flex: 1 }}>
-      <View style={{ padding: 20 }}>
-        {/* Welcome Section */}
-        <View style={{ marginBottom: 32, alignItems: 'center' }}>
-          <Text variant="h1" style={{ textAlign: 'center', marginBottom: 16 }}>
-            Welcome to {{appName}}! 📱
-          </Text>
-          <Text variant="body" style={{ textAlign: 'center', marginBottom: 16, fontSize: 18 }}>
-            A cross-platform mobile app built with React Native and the Idealyst Framework
-          </Text>
-          
-          {/* tRPC Connection Test */}
-          <View style={{ 
-            padding: 16, 
-            backgroundColor: '#e3f2fd', 
-            borderRadius: 8,
-            marginBottom: 24,
-            width: '100%'
-          }}>
-            <Text variant="h3" style={{ marginBottom: 8, textAlign: 'center' }}>🔗 API Connection</Text>
-            {helloLoading && <Text style={{ textAlign: 'center' }}>Testing connection...</Text>}
-            {helloError && <Text style={{ color: 'red', textAlign: 'center' }}>Error: {helloError.message}</Text>}
-            {helloData && <Text style={{ color: 'green', textAlign: 'center' }}>✅ {helloData.greeting}</Text>}
-          </View>
-        </View>
-
-        {/* Features Overview */}
-        <View style={{ marginBottom: 32 }}>
-          <Text variant="h2" style={{ marginBottom: 16, textAlign: 'center' }}>🏗️ What's Included</Text>
-          <FeatureCard 
-            icon="🔗"
-            title="Full Integration"
-            description="Connected to your database and API with end-to-end type safety"
-          />
-          <FeatureCard 
-            icon="📦"
-            title="Shared Components"
-            description="Cross-platform UI components that work on web and mobile"
-          />
-          <FeatureCard 
-            icon="🎨"
-            title="Idealyst Design"
-            description="Beautiful, consistent styling with the Idealyst component library"
-          />
-          <FeatureCard 
-            icon="⚡"
-            title="Real-time Updates"
-            description="tRPC provides instant synchronization with your backend"
-          />
-        </View>
-
-        {/* Quick Data Preview */}
-        <View style={{ marginBottom: 32 }}>
-          <Text variant="h2" style={{ marginBottom: 16, textAlign: 'center' }}>📊 Live Data</Text>
-          
-          {/* Users Preview */}
-          <View style={{ marginBottom: 20 }}>
-            <Text variant="h3" style={{ marginBottom: 12 }}>👥 Users ({usersLoading ? '...' : usersData?.length || DEMO_USERS.length})</Text>
-            {usersLoading ? (
-              <LoadingSpinner message="Loading users..." />
-            ) : (
-              <View>
-                {(usersData || DEMO_USERS.slice(0, 2)).map((user: User) => (
-                  <UserCard 
-                    key={user.id}
-                    user={user} 
-                    showBio={false}
-                    onPress={() => console.log('View profile:', user.name)}
-                  />
-                ))}
-              </View>
-            )}
-          </View>
-
-          {/* Posts Preview */}
-          <View style={{ marginBottom: 20 }}>
-            <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, 1)).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>
-
-        {/* Development Info */}
-        <View style={{ 
-          padding: 20, 
-          backgroundColor: '#f8f9fa', 
-          borderRadius: 8,
-          marginBottom: 24
-        }}>
-          <Text variant="h3" style={{ marginBottom: 12, textAlign: 'center' }}>🚀 Development</Text>
-          <Text variant="body" style={{ textAlign: 'center', marginBottom: 12 }}>
-            This app is part of your full-stack workspace. Make changes to see them reflected instantly!
-          </Text>
-          <Text variant="caption" style={{ textAlign: 'center', fontStyle: 'italic' }}>
-            Edit packages/mobile/src/App.tsx to customize this screen
-          </Text>
-        </View>
-      </View>
-    </ScrollView>
-  );
-
-  const renderUsers = () => {
-    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, textAlign: 'center' }}>👥 All Users ({allUsers.length})</Text>
-        <View>
-          {allUsers.map((user: User) => (
-            <UserCard 
-              key={user.id}
-              user={user} 
-              showBio={true}
-              onPress={() => console.log('View profile:', user.name)}
-            />
-          ))}
-        </View>
-      </ScrollView>
-    );
-  };
-
-  const renderPosts = () => {
-    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, textAlign: 'center' }}>📝 All 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>
-    );
-  };
-
-  const renderTabBar = () => (
-    <View style={{ 
-      flexDirection: 'row', 
-      backgroundColor: '#f8f9fa',
-      borderTopWidth: 1,
-      borderTopColor: '#e9ecef',
-      paddingVertical: 10
-    }}>
-      <TabButton
-        title="Home"
-        icon="🏠"
-        active={currentTab === 'home'}
-        onPress={() => setCurrentTab('home')}
-      />
-      <TabButton
-        title="Users"
-        icon="👥"
-        active={currentTab === 'users'}
-        onPress={() => setCurrentTab('users')}
-      />
-      <TabButton
-        title="Posts"
-        icon="📝"
-        active={currentTab === 'posts'}
-        onPress={() => setCurrentTab('posts')}
-      />
-    </View>
-  );
-
   return (
-    <trpc.Provider client={trpcClient} queryClient={queryClient}>
-      <QueryClientProvider client={queryClient}>
-        <Screen>
-          <View style={{ flex: 1 }}>
-            {currentTab === 'home' && renderHome()}
-            {currentTab === 'users' && renderUsers()}
-            {currentTab === 'posts' && renderPosts()}
-            {renderTabBar()}
-          </View>
-        </Screen>
-      </QueryClientProvider>
-    </trpc.Provider>
+    <HelloWorld name="{{projectName}} Mobile User" platform="mobile" projectName="{{projectName}}" />
   );
 }
 

package/dist/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/dist/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/dist/templates/shared/package.json

@@ -2,44 +2,25 @@
   "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"
-  },
+  "dependencies": {},
   "peerDependencies": {
     "@idealyst/components": "^1.0.21",
-    "@idealyst/navigation": "^1.0.21",
     "@idealyst/theme": "^1.0.21",
     "react": "^19.1.0",
     "react-native": "^0.80.1"
@@ -51,7 +32,6 @@
   },
   "devDependencies": {
     "@idealyst/components": "^1.0.21",
-    "@idealyst/navigation": "^1.0.21",
     "@idealyst/theme": "^1.0.21",
     "@types/jest": "^29.5.12",
     "@types/react": "^19.1.0",
@@ -62,7 +42,6 @@
     "typescript": "^5.0.0"
   },
   "files": [
-    "dist",
     "src"
   ],
   "keywords": [

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { View, Text, Card, Screen } from '@idealyst/components';
+
+interface HelloWorldProps {
+  name?: string;
+  platform?: 'web' | 'mobile';
+  projectName?: string;
+}
+
+export const HelloWorld: React.FC<HelloWorldProps> = ({ 
+  name = 'World', 
+  platform = 'web',
+  projectName = 'Your Project'
+}) => {
+  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>
+      </View>
+    </Screen>
+  );
+};