@idealyst/cli 1.0.90 → 1.0.91

package/template/packages/shared/__tests__/shared.test.ts

@@ -0,0 +1,51 @@
+import { HelloWorld } from '../src/index';
+
+describe('Shared Library', () => {
+  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();
+  });
+});
+
+describe('Sample Shared Tests', () => {
+  it('should pass a basic test', () => {
+    expect(1 + 1).toBe(2);
+  });
+
+  it('should handle string operations', () => {
+    const testString = 'Hello World';
+    expect(testString).toContain('World');
+    expect(testString.length).toBe(11);
+  });
+
+  it('should work with objects', () => {
+    const testObj = { name: 'test', value: 42 };
+    expect(testObj).toHaveProperty('name');
+    expect(testObj).toHaveProperty('value', 42);
+  });
+
+  it('should handle arrays', () => {
+    const testArray = [1, 2, 3, 4, 5];
+    expect(testArray).toHaveLength(5);
+    expect(testArray).toContain(3);
+    expect(testArray.filter(x => x > 3)).toEqual([4, 5]);
+  });
+
+  it('should work with async operations', async () => {
+    const result = await Promise.resolve('async test');
+    expect(result).toBe('async test');
+  });
+});

package/template/packages/shared/jest.config.js

@@ -0,0 +1,22 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  roots: ['<rootDir>/src', '<rootDir>/__tests__'],
+  testMatch: [
+    '**/__tests__/**/*.{ts,tsx,js}',
+    '**/*.{test,spec}.{ts,tsx,js}'
+  ],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/index.ts',
+  ],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['text', 'lcov'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  testTimeout: 10000,
+};

package/template/packages/shared/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@{{workspaceScope}}/shared",
+  "version": "{{version}}",
+  "description": "{{description}}",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@idealyst/components": "^{{idealystVersion}}",
+    "@idealyst/navigation": "^{{idealystVersion}}",
+    "@idealyst/theme": "^{{idealystVersion}}",
+    "@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",
+    "@{{workspaceScope}}/api": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@idealyst/components": "^{{idealystVersion}}",
+    "@idealyst/navigation": "^{{idealystVersion}}",
+    "@idealyst/theme": "^{{idealystVersion}}",
+    "@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",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "react",
+    "react-native",
+    "cross-platform",
+    "shared",
+    "library"
+  ]
+} 

package/template/packages/shared/src/components/App.tsx

@@ -0,0 +1,46 @@
+import { NavigatorProvider } from "@idealyst/navigation";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React from "react";
+import AppRouter from "../navigation/AppRouter";
+import { createTRPCClient, trpc } from "../trpc/client";
+
+interface AppProps {
+  apiUrl?: string;
+  queryClient?: QueryClient;
+  headers?: () => Record<string, string>;
+}
+
+// Default query client instance
+const defaultQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+    },
+  },
+});
+
+/**
+ * Unified App component that sets up tRPC, React Query providers, and Navigation
+ * This component can be used by both web and mobile platforms
+ */
+export const App: React.FC<AppProps> = ({
+  apiUrl = "http://localhost:3000/trpc",
+  queryClient = defaultQueryClient,
+  headers,
+}) => {
+  // Create tRPC client with the provided configuration
+  const trpcClient = createTRPCClient({
+    apiUrl,
+    headers,
+  });
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <NavigatorProvider route={AppRouter} />
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+};
+
+export default App;

package/template/packages/shared/src/components/HelloWorld.tsx

@@ -0,0 +1,304 @@
+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="xl"
+          weight="bold"
+          style={{
+            marginBottom: 16,
+            textAlign: "center",
+            color: "#1e293b",
+          }}
+        >
+          Welcome to {projectName}! {platformEmoji}
+        </Text>
+
+        <Text
+          size="lg"
+          style={{
+            marginBottom: 32,
+            textAlign: "center",
+            color: "#64748b",
+            lineHeight: 24,
+            paddingHorizontal: 16,
+          }}
+        >
+          {platformText}
+        </Text>
+        {/* Framework Branding Card */}
+        <Card type="elevated" padding="lg" intent="primary">
+          <View style={{ alignItems: "center" }}>
+            <Text style={{ fontSize: 32, marginBottom: 16 }}>🚀</Text>
+            <Text
+              size="xl"
+              weight="bold"
+              style={{ marginBottom: 8, textAlign: "center" }}
+            >
+              Idealyst Framework
+            </Text>
+            <Text size="md" 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
+                type="filled"
+                padding="sm"
+                style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
+              >
+                <Text size="sm" weight="semibold">
+                  React
+                </Text>
+              </Card>
+              <Card
+                type="filled"
+                padding="sm"
+                style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
+              >
+                <Text size="sm" weight="semibold">
+                  TypeScript
+                </Text>
+              </Card>
+              <Card
+                type="filled"
+                padding="sm"
+                style={{ backgroundColor: "rgba(255, 255, 255, 0.2)" }}
+              >
+                <Text size="sm" weight="semibold">
+                  Cross-Platform
+                </Text>
+              </Card>
+            </View>
+          </View>
+        </Card>
+
+        {/* Quick Start Guide Card */}
+        <Card type="outlined" padding="lg" style={{ marginTop: 16 }}>
+          <Text size="lg" weight="bold" style={{ marginBottom: 16 }}>
+            🎯 Quick Start Guide
+          </Text>
+
+          <View style={{ marginBottom: 16 }}>
+            <Text size="md" weight="semibold" style={{ marginBottom: 8 }}>
+              Your Workspace Overview:
+            </Text>
+            <Text size="sm" style={{ marginBottom: 4 }}>
+              • <Text weight="semibold">packages/web/</Text> - React web
+              application
+            </Text>
+            <Text size="sm" style={{ marginBottom: 4 }}>
+              • <Text weight="semibold">packages/mobile/</Text> - React Native
+              mobile app
+            </Text>
+            <Text size="sm" style={{ marginBottom: 4 }}>
+              • <Text weight="semibold">packages/shared/</Text> - Cross-platform
+              components
+            </Text>
+            <Text size="sm" style={{ marginBottom: 4 }}>
+              • <Text weight="semibold">packages/api/</Text> - tRPC API server
+            </Text>
+          </View>
+
+          <View style={{ marginBottom: 16 }}>
+            <Text size="md" weight="semibold" style={{ marginBottom: 8 }}>
+              Try Editing:
+            </Text>
+            <Text size="sm" style={{ marginBottom: 4 }}>
+              1. Edit this component in{" "}
+              <Text weight="semibold">
+                packages/shared/src/components/HelloWorld.tsx
+              </Text>
+            </Text>
+            <Text size="sm" style={{ marginBottom: 4 }}>
+              2. Watch changes appear in both web and mobile apps instantly!
+            </Text>
+            <Text size="sm" style={{ marginBottom: 4 }}>
+              3. Run <Text weight="semibold">yarn dev</Text> to start all
+              development servers
+            </Text>
+          </View>
+
+          <Card type="filled" intent="success" padding="md">
+            <Text size="sm" weight="semibold" style={{ marginBottom: 4 }}>
+              ✨ Framework Features:
+            </Text>
+            <Text size="sm">
+              Shared components • Type safety • Hot reload • Cross-platform
+              compatibility
+            </Text>
+          </Card>
+        </Card>
+
+        {/* API Testing Section */}
+        <Card type="outlined" padding="lg" style={{ marginTop: 16 }}>
+          <Text size="lg" weight="bold" style={{ marginBottom: 16 }}>
+            🚀 API Demo - Database Integration
+          </Text>
+          <Text size="md" style={{ marginBottom: 16, color: "#64748b" }}>
+            Test your full-stack integration! This section demonstrates
+            real-time database operations.
+          </Text>
+
+          {/* Create New Test Form */}
+          <Card
+            type="filled"
+            padding="md"
+            style={{ marginBottom: 16, backgroundColor: "#f8fafc" }}
+          >
+            <Text size="md" 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.isPending
+                }
+                style={{ alignSelf: "flex-start" }}
+              >
+                {createTestMutation.isPending ? "Creating..." : "Create Test"}
+              </Button>
+            </View>
+          </Card>
+
+          {/* Tests List */}
+          <View>
+            <Text size="md" weight="semibold" style={{ marginBottom: 12 }}>
+              Database Records ({tests.data?.length || 0})
+            </Text>
+
+            {tests.isPending ? (
+              <Card type="outlined" padding="md">
+                <Text size="sm" style={{ color: "#64748b" }}>
+                  Loading tests...
+                </Text>
+              </Card>
+            ) : tests.data?.length === 0 ? (
+              <Card type="outlined" padding="md">
+                <Text size="sm" style={{ color: "#64748b" }}>
+                  No tests found. Create one above!
+                </Text>
+              </Card>
+            ) : (
+              <View style={{ gap: 8 }}>
+                {tests.data?.map((test: any) => (
+                  <Card key={test.id} type="outlined" padding="md">
+                    <View
+                      style={{
+                        flexDirection: "row",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                      }}
+                    >
+                      <View style={{ flex: 1 }}>
+                        <Text
+                          size="sm"
+                          weight="semibold"
+                          style={{ marginBottom: 4 }}
+                        >
+                          {test.name}
+                        </Text>
+                        <Text
+                          size="sm"
+                          style={{ color: "#64748b", marginBottom: 4 }}
+                        >
+                          {test.message}
+                        </Text>
+                        <Text size="sm" style={{ color: "#10b981" }}>
+                          Status: {test.status} •{" "}
+                          {new Date(test.createdAt).toLocaleDateString()}
+                        </Text>
+                      </View>
+                      <Button
+                        intent="error"
+                        size="sm"
+                        onPress={() => handleDeleteTest(test.id)}
+                        disabled={deleteTestMutation.isPending}
+                      >
+                        Delete
+                      </Button>
+                    </View>
+                  </Card>
+                ))}
+              </View>
+            )}
+          </View>
+        </Card>
+      </View>
+    </Screen>
+  );
+};

package/template/packages/shared/src/components/index.ts

@@ -0,0 +1 @@
+export { App } from './App';

package/template/packages/shared/src/index.ts

@@ -0,0 +1,14 @@
+// Export the unified App component
+export { App } from './components';
+
+// Export navigation router
+export { default as AppRouter } from './navigation/AppRouter';
+
+// Export tRPC client utilities
+export { trpc, createTRPCClient, createVanillaTRPCClient } from './trpc/client';
+export type { TRPCClientConfig, AppRouter } from './trpc/client';
+
+// Simple type for the HelloWorld component props
+export interface HelloWorldProps {
+  name?: string;
+}