@idealyst/cli 1.0.41 → 1.0.44

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

@@ -0,0 +1,266 @@
+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 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(),
+      //   };
+      // },
+    }),
+  ],
+});
+
+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>
+  );
+}
+
+export default App;

package/templates/shared/package.json

@@ -2,9 +2,31 @@
   "name": "{{packageName}}",
   "version": "{{version}}",
   "description": "{{description}}",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.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"
+    }
+  },
   "scripts": {
     "build": "tsc",
     "test": "jest",
@@ -12,6 +34,9 @@
     "test:coverage": "jest --coverage",
     "type-check": "tsc --noEmit"
   },
+  "dependencies": {
+    "zod": "^3.22.4"
+  },
   "peerDependencies": {
     "@idealyst/components": "^1.0.21",
     "@idealyst/navigation": "^1.0.21",

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

@@ -0,0 +1,392 @@
+import React from 'react';
+import { View, Text, Button, Image } from '@idealyst/components';
+import type { User, Post, Comment } from '../types';
+
+interface UserCardProps {
+  user: User;
+  onPress?: () => void;
+  showBio?: boolean;
+}
+
+export const UserCard: React.FC<UserCardProps> = ({ 
+  user, 
+  onPress, 
+  showBio = false 
+}) => {
+  return (
+    <View 
+      style={{ 
+        padding: 16, 
+        borderRadius: 8, 
+        backgroundColor: 'white',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 2,
+        marginBottom: 8
+      }}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        {user.avatar && (
+          <Image
+            source={{ uri: user.avatar }}
+            style={{ 
+              width: 50, 
+              height: 50, 
+              borderRadius: 25, 
+              marginRight: 12 
+            }}
+          />
+        )}
+        <View style={{ flex: 1 }}>
+          <Text variant="h3" style={{ marginBottom: 4 }}>
+            {user.name || 'Anonymous User'}
+          </Text>
+          <Text variant="caption" style={{ color: 'gray' }}>
+            {user.email}
+          </Text>
+          {user.location && (
+            <Text variant="caption" style={{ color: 'gray', marginTop: 2 }}>
+              📍 {user.location}
+            </Text>
+          )}
+        </View>
+        {onPress && (
+          <Button 
+            title="View Profile" 
+            onPress={onPress}
+            size="small"
+          />
+        )}
+      </View>
+      
+      {showBio && user.bio && (
+        <Text variant="body" style={{ marginTop: 12, fontStyle: 'italic' }}>
+          {user.bio}
+        </Text>
+      )}
+      
+      {user.website && (
+        <Text variant="caption" style={{ marginTop: 8, color: 'blue' }}>
+          🌐 {user.website}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+interface PostCardProps {
+  post: Post;
+  author?: User;
+  onPress?: () => void;
+  onLike?: () => void;
+  showFullContent?: boolean;
+}
+
+export const PostCard: React.FC<PostCardProps> = ({ 
+  post, 
+  author,
+  onPress,
+  onLike,
+  showFullContent = false 
+}) => {
+  const content = showFullContent ? post.content : (post.excerpt || post.content.substring(0, 150) + '...');
+  
+  return (
+    <View 
+      style={{ 
+        padding: 16, 
+        borderRadius: 8, 
+        backgroundColor: 'white',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 2,
+        marginBottom: 12
+      }}
+    >
+      {/* Post Header */}
+      {author && (
+        <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 12 }}>
+          {author.avatar && (
+            <Image
+              source={{ uri: author.avatar }}
+              style={{ 
+                width: 32, 
+                height: 32, 
+                borderRadius: 16, 
+                marginRight: 8 
+              }}
+            />
+          )}
+          <View>
+            <Text variant="body" style={{ fontWeight: 'bold' }}>
+              {author.name || 'Anonymous'}
+            </Text>
+            <Text variant="caption" style={{ color: 'gray' }}>
+              {new Date(post.createdAt).toLocaleDateString()}
+            </Text>
+          </View>
+        </View>
+      )}
+      
+      {/* Post Content */}
+      <Text variant="h2" style={{ marginBottom: 8 }}>
+        {post.title}
+      </Text>
+      
+      <Text variant="body" style={{ marginBottom: 12 }}>
+        {content}
+      </Text>
+      
+      {/* Tags */}
+      {post.tags.length > 0 && (
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginBottom: 12 }}>
+          {post.tags.map((tag, index) => (
+            <View 
+              key={index}
+              style={{ 
+                backgroundColor: '#e3f2fd',
+                paddingHorizontal: 8,
+                paddingVertical: 4,
+                borderRadius: 12,
+                marginRight: 6,
+                marginBottom: 4
+              }}
+            >
+              <Text variant="caption" style={{ color: '#1976d2' }}>
+                #{tag}
+              </Text>
+            </View>
+          ))}
+        </View>
+      )}
+      
+      {/* Post Stats and Actions */}
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <Text variant="caption" style={{ color: 'gray', marginRight: 12 }}>
+            👁️ {post.views} views
+          </Text>
+          <Text variant="caption" style={{ color: 'gray' }}>
+            ❤️ {post.likes} likes
+          </Text>
+        </View>
+        
+        <View style={{ flexDirection: 'row' }}>
+          {onLike && (
+            <Button 
+              title="Like" 
+              onPress={onLike}
+              size="small"
+              variant="outline"
+              style={{ marginRight: 8 }}
+            />
+          )}
+          {onPress && (
+            <Button 
+              title="Read More" 
+              onPress={onPress}
+              size="small"
+            />
+          )}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+interface CommentCardProps {
+  comment: Comment;
+  author?: User;
+  onReply?: () => void;
+  level?: number;
+}
+
+export const CommentCard: React.FC<CommentCardProps> = ({ 
+  comment, 
+  author,
+  onReply,
+  level = 0 
+}) => {
+  const indentStyle = { 
+    marginLeft: level * 20,
+    maxWidth: level > 2 ? '90%' : '100%'
+  };
+  
+  return (
+    <View 
+      style={[
+        { 
+          padding: 12, 
+          borderRadius: 6, 
+          backgroundColor: level === 0 ? 'white' : '#f8f9fa',
+          borderLeftWidth: level > 0 ? 3 : 0,
+          borderLeftColor: '#e3f2fd',
+          marginBottom: 8
+        },
+        indentStyle
+      ]}
+    >
+      {/* Comment Header */}
+      {author && (
+        <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 8 }}>
+          {author.avatar && (
+            <Image
+              source={{ uri: author.avatar }}
+              style={{ 
+                width: 24, 
+                height: 24, 
+                borderRadius: 12, 
+                marginRight: 6 
+              }}
+            />
+          )}
+          <Text variant="body" style={{ fontWeight: 'bold', fontSize: 14 }}>
+            {author.name || 'Anonymous'}
+          </Text>
+          <Text variant="caption" style={{ color: 'gray', marginLeft: 8 }}>
+            {new Date(comment.createdAt).toLocaleDateString()}
+          </Text>
+        </View>
+      )}
+      
+      {/* Comment Content */}
+      <Text variant="body" style={{ marginBottom: 8 }}>
+        {comment.content}
+      </Text>
+      
+      {/* Comment Actions */}
+      {onReply && level < 3 && (
+        <Button 
+          title="Reply" 
+          onPress={onReply}
+          size="small"
+          variant="outline"
+        />
+      )}
+    </View>
+  );
+};
+
+interface LoadingSpinnerProps {
+  size?: 'small' | 'medium' | 'large';
+  message?: string;
+}
+
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({ 
+  size = 'medium', 
+  message 
+}) => {
+  const sizeMap = {
+    small: 20,
+    medium: 40,
+    large: 60
+  };
+  
+  return (
+    <View style={{ alignItems: 'center', justifyContent: 'center', padding: 20 }}>
+      <View 
+        style={{
+          width: sizeMap[size],
+          height: sizeMap[size],
+          borderRadius: sizeMap[size] / 2,
+          borderWidth: 3,
+          borderColor: '#e3f2fd',
+          borderTopColor: '#1976d2',
+          // Animation would be handled by the platform-specific implementation
+        }}
+      />
+      {message && (
+        <Text variant="body" style={{ marginTop: 12, textAlign: 'center' }}>
+          {message}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+interface ErrorMessageProps {
+  message: string;
+  onRetry?: () => void;
+}
+
+export const ErrorMessage: React.FC<ErrorMessageProps> = ({ message, onRetry }) => {
+  return (
+    <View 
+      style={{ 
+        padding: 16, 
+        backgroundColor: '#ffebee', 
+        borderRadius: 8, 
+        borderLeftWidth: 4,
+        borderLeftColor: '#f44336',
+        margin: 16
+      }}
+    >
+      <Text variant="body" style={{ color: '#c62828', marginBottom: onRetry ? 12 : 0 }}>
+        ⚠️ {message}
+      </Text>
+      {onRetry && (
+        <Button 
+          title="Try Again" 
+          onPress={onRetry}
+          size="small"
+          style={{ backgroundColor: '#f44336' }}
+        />
+      )}
+    </View>
+  );
+};
+
+// Feature Card Component - reusable for both web and native
+interface FeatureCardProps {
+  icon: string;
+  title: string;
+  description: string;
+}
+
+export const FeatureCard: React.FC<FeatureCardProps> = ({ icon, title, description }) => {
+  return (
+    <View style={{ 
+      padding: 16,
+      backgroundColor: 'white',
+      borderRadius: 8,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 2,
+      marginBottom: 12
+    }}>
+      <Text style={{ fontSize: 24, marginBottom: 8, textAlign: 'center' }}>{icon}</Text>
+      <Text variant="h4" style={{ marginBottom: 8, textAlign: 'center' }}>{title}</Text>
+      <Text variant="body" style={{ color: '#666', textAlign: 'center' }}>{description}</Text>
+    </View>
+  );
+};
+
+// Tab Button Component - for navigation tabs in mobile/web apps
+interface TabButtonProps {
+  title: string;
+  icon: string;
+  active: boolean;
+  onPress: () => void;
+}
+
+export const TabButton: React.FC<TabButtonProps> = ({ title, icon, active, onPress }) => {
+  return (
+    <Button
+      title={`${icon} ${title}`}
+      onPress={onPress}
+      variant={active ? 'primary' : 'outline'}
+      style={{ 
+        flex: 1, 
+        marginHorizontal: 4,
+        backgroundColor: active ? '#007bff' : 'transparent',
+        borderColor: active ? '#007bff' : '#ccc'
+      }}
+    />
+  );
+};