@idealyst/cli 1.0.33 → 1.0.35

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+import { Screen, Text, View } from '@idealyst/components';
+import { trpc } from './utils/trpc';
+
+// Create tRPC client
+const queryClient = new QueryClient();
+
+const trpcClient = trpc.createClient({
+  links: [
+    httpBatchLink({
+      url: '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() {
+  // Example tRPC usage
+  const { data, isLoading, error } = trpc.hello.useQuery({ name: 'React Native' });
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <Screen>
+          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
+            <Text variant="h1" style={{ textAlign: 'center', marginBottom: 20 }}>
+              Welcome to {{appName}}!
+            </Text>
+            <Text variant="body" style={{ textAlign: 'center', marginBottom: 20 }}>
+              This is a React Native app built with the Idealyst Framework
+            </Text>
+            
+            {/* tRPC Example */}
+            <View style={{ marginTop: 20, alignItems: 'center' }}>
+              <Text variant="h3" style={{ marginBottom: 10 }}>tRPC Example:</Text>
+              {isLoading && <Text>Loading...</Text>}
+              {error && <Text>Error: {error.message}</Text>}
+              {data && <Text style={{ textAlign: 'center' }}>{data.greeting}</Text>}
+            </View>
+            
+            <Text variant="caption" style={{ textAlign: 'center', marginTop: 30 }}>
+              Edit src/App.tsx to get started
+            </Text>
+          </View>
+        </Screen>
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}
+
+export default App; 

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

@@ -0,0 +1,127 @@
+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>;
+}
+```
+*/ 

package/dist/templates/native/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "extends": "@react-native/typescript-config/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "jsx": "react-native",
+    "lib": ["es2017"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "strict": true,
+    "target": "esnext",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "src/**/*",
+    "index.js"
+  ],
+  "exclude": [
+    "node_modules",
+    "android",
+    "ios"
+  ]
+} 

package/dist/templates/shared/README.md

@@ -0,0 +1,109 @@
+# {{projectName}}
+
+{{description}}
+
+## Getting Started
+
+This is a shared library built with the Idealyst Framework that can be used across React Native and React web applications.
+
+### Prerequisites
+
+- Node.js 18+
+- Yarn
+
+### Installation
+
+Install dependencies:
+```bash
+yarn install
+```
+
+### Development
+
+Build the library:
+```bash
+yarn build
+```
+
+Watch for changes during development:
+```bash
+yarn dev
+```
+
+### Project Structure
+
+```
+{{projectName}}/
+├── src/
+│   ├── components/    # Shared components
+│   ├── utils/         # Utility functions
+│   ├── types/         # TypeScript types
+│   └── index.ts       # Main export file
+├── dist/              # Built library (generated)
+├── rollup.config.js   # Build configuration
+└── tsconfig.json      # TypeScript configuration
+```
+
+### Features
+
+- **Cross-platform**: Works on both React Native and React web
+- **TypeScript**: Full type safety
+- **Tree-shakeable**: Optimized for bundle size
+- **Peer Dependencies**: Lightweight by design
+- **Idealyst Theme Integration**: Compatible with the Idealyst theming system
+
+### Usage
+
+After building, you can import and use the library in your projects:
+
+```tsx
+import { SharedComponent, toTitleCase, ComponentProps } from '{{packageName}}';
+
+// Use the shared component
+<SharedComponent 
+  title="Hello World" 
+  description="This works on both web and mobile!" 
+/>
+
+// Use utility functions
+const formatted = toTitleCase('hello world'); // "Hello World"
+```
+
+### Building for Production
+
+Build the library:
+```bash
+yarn build
+```
+
+This creates:
+- `dist/index.js` - CommonJS build
+- `dist/index.esm.js` - ES modules build
+- `dist/index.d.ts` - TypeScript declarations
+
+### Publishing
+
+Before publishing, make sure to:
+
+1. Update the version in `package.json`
+2. Build the library: `yarn build`
+3. Publish to npm: `npm publish`
+
+### Development in Monorepo
+
+If you're using this in a monorepo, you can reference it directly:
+
+```json
+{
+  "dependencies": {
+    "{{packageName}}": "workspace:*"
+  }
+}
+```
+
+### Learn More
+
+- [Idealyst Framework Documentation](https://github.com/your-username/idealyst-framework)
+- [React Native Documentation](https://reactnative.dev/)
+- [React Documentation](https://react.dev/)
+- [Rollup Documentation](https://rollupjs.org/) 

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

@@ -0,0 +1,39 @@
+import { add_stuff } 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');
+  });
+});
+
+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/dist/templates/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/dist/templates/shared/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "{{packageName}}",
+  "version": "{{version}}",
+  "description": "{{description}}",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "type-check": "tsc --noEmit"
+  },
+  "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"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
+  },
+  "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",
+    "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": [
+    "react",
+    "react-native",
+    "cross-platform",
+    "shared",
+    "library"
+  ]
+} 

package/dist/templates/shared/rollup.config.js

@@ -0,0 +1,43 @@
+const typescript = require('rollup-plugin-typescript2');
+
+module.exports = {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'cjs',
+      exports: 'named',
+      sourcemap: true,
+    },
+    {
+      file: 'dist/index.esm.js',
+      format: 'esm',
+      exports: 'named',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    typescript({
+      typescript: require('typescript'),
+      tsconfig: './tsconfig.json',
+      exclude: ['**/*.test.ts', '**/*.test.tsx', '**/*.native.ts', '**/*.native.tsx'],
+      declaration: true,
+      declarationDir: 'dist',
+      rootDir: 'src',
+      clean: true,
+    }),
+  ],
+  external: [
+    'react',
+    'react-dom',
+    'react-native',
+    'react-native-unistyles',
+    '@react-native/normalize-colors',
+    'react-native-edge-to-edge',
+    'react-native-nitro-modules',
+    '@react-native-vector-icons/common',
+    '@react-native-vector-icons/material-design-icons',
+    '@mdi/js',
+    '@mdi/react',
+  ],
+}; 

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

@@ -0,0 +1 @@
+export const add_stuff = "here";

package/dist/templates/shared/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020"],
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationDir": "./dist",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+} 

package/dist/templates/web/README.md

@@ -0,0 +1,90 @@
+# {{projectName}}
+
+{{description}}
+
+## Getting Started
+
+This is a React web application built with the Idealyst Framework and Vite.
+
+### Prerequisites
+
+- Node.js 18+
+- Yarn
+
+### Installation
+
+Install dependencies:
+```bash
+yarn install
+```
+
+### Development
+
+Start the development server:
+```bash
+yarn dev
+```
+
+The app will be available at `http://localhost:3000`
+
+### Building for Production
+
+Build the app:
+```bash
+yarn build
+```
+
+Preview the production build:
+```bash
+yarn preview
+```
+
+### Project Structure
+
+```
+{{projectName}}/
+├── src/
+│   ├── App.tsx        # Main app component
+│   └── main.tsx       # App entry point
+├── index.html         # HTML template
+├── vite.config.ts     # Vite configuration
+└── tsconfig.json      # TypeScript configuration
+```
+
+### Features
+
+- **Idealyst Components**: Cross-platform UI components
+- **Idealyst Navigation**: Consistent navigation system
+- **Idealyst Theme**: Unified theming across platforms
+- **React 19.1**: Latest React version
+- **Vite**: Fast build tool and dev server
+- **TypeScript**: Full type safety
+- **React Native Web**: Use React Native components on the web
+
+### Development
+
+The app uses the Idealyst Framework for consistent UI and navigation that works across web and mobile platforms.
+
+Edit `src/App.tsx` to start building your application.
+
+### Styling
+
+The app uses Unistyles for cross-platform styling. You can create styles that work on both web and mobile:
+
+```tsx
+import { createStyleSheet } from 'react-native-unistyles';
+
+const styles = createStyleSheet({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+```
+
+### Learn More
+
+- [Idealyst Framework Documentation](https://github.com/your-username/idealyst-framework)
+- [React Documentation](https://react.dev/)
+- [Vite Documentation](https://vitejs.dev/)