@idealyst/cli 1.2.30 → 1.2.31

package/dist/templates/core/shared/src/screens/ProfileScreen.tsx

@@ -0,0 +1,222 @@
+import React from 'react';
+import {
+  Screen,
+  View,
+  Text,
+  Card,
+  Button,
+  Icon,
+  Avatar,
+  Badge,
+  Divider,
+  List,
+  ListItem,
+} from '@idealyst/components';
+import { useNavigator } from '@idealyst/navigation';
+
+export const ProfileScreen: React.FC = () => {
+  const { navigate } = useNavigator();
+
+  return (
+    <Screen background="primary" padding="lg" scrollable>
+      <View gap="lg">
+        {/* Profile Header */}
+        <Card type="elevated" padding="lg">
+          <View style={{ alignItems: 'center', gap: 16 }}>
+            <View style={{ position: 'relative' }}>
+              <Avatar
+                size="xl"
+                src={{ uri: 'https://i.pravatar.cc/150?img=68' }}
+                fallback="JD"
+              />
+            </View>
+
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                <Text typography="h4">Jane Doe</Text>
+                <Badge intent="primary" size="sm">
+                  Verified
+                </Badge>
+              </View>
+              <Text color="secondary">@janedoe</Text>
+              <Text typography="caption" color="secondary" style={{ textAlign: 'center' }}>
+                Senior Developer at Idealyst. Building cross-platform apps with
+                React Native.
+              </Text>
+            </View>
+
+            <View style={{ flexDirection: 'row', gap: 12 }}>
+              <Button
+                style={{ flex: 1 }}
+                intent="primary"
+                leftIcon={'pencil-outline'}
+              >
+                Edit Profile
+              </Button>
+              <Button
+                style={{ flex: 1 }}
+                type="outlined"
+                intent="neutral"
+                leftIcon={'share-outline'}
+              >
+                Share
+              </Button>
+            </View>
+          </View>
+
+          <Divider />
+
+          {/* Stats */}
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-around',
+              paddingVertical: 16,
+            }}
+          >
+            <View style={{ alignItems: 'center' }}>
+              <Text typography="h4">1.2k</Text>
+              <Text typography="caption" color="secondary">
+                Followers
+              </Text>
+            </View>
+            <View style={{ alignItems: 'center' }}>
+              <Text typography="h4">856</Text>
+              <Text typography="caption" color="secondary">
+                Following
+              </Text>
+            </View>
+            <View style={{ alignItems: 'center' }}>
+              <Text typography="h4">42</Text>
+              <Text typography="caption" color="secondary">
+                Projects
+              </Text>
+            </View>
+          </View>
+        </Card>
+
+        {/* Achievements */}
+        <View gap="md">
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
+          >
+            <Text typography="subtitle1">Achievements</Text>
+            <Text typography="caption" color="primary">
+              View All
+            </Text>
+          </View>
+          <View style={{ flexDirection: 'row', gap: 12 }}>
+            <Card
+              type="outlined"
+              padding="md"
+              style={{ flex: 1, alignItems: 'center' }}
+            >
+              <View
+                style={{
+                  width: 48,
+                  height: 48,
+                  borderRadius: 24,
+                  backgroundColor: '#fef3c7',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon name="trophy" size={24} color="#f59e0b" />
+              </View>
+              <Text typography="caption" weight="medium">
+                Top Contributor
+              </Text>
+            </Card>
+            <Card
+              type="outlined"
+              padding="md"
+              style={{ flex: 1, alignItems: 'center' }}
+            >
+              <View
+                style={{
+                  width: 48,
+                  height: 48,
+                  borderRadius: 24,
+                  backgroundColor: '#dbeafe',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon name="star" size={24} color="#3b82f6" />
+              </View>
+              <Text typography="caption" weight="medium">
+                Rising Star
+              </Text>
+            </Card>
+            <Card
+              type="outlined"
+              padding="md"
+              style={{ flex: 1, alignItems: 'center' }}
+            >
+              <View
+                style={{
+                  width: 48,
+                  height: 48,
+                  borderRadius: 24,
+                  backgroundColor: '#dcfce7',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon name="rocket-launch" size={24} color="#22c55e" />
+              </View>
+              <Text typography="caption" weight="medium">
+                Early Adopter
+              </Text>
+            </Card>
+          </View>
+        </View>
+
+        {/* Menu */}
+        <View gap="md">
+          <Text typography="subtitle1">Account</Text>
+          <Card type="outlined">
+            <List>
+              <ListItem
+                label="Settings"
+                leading={<Icon name="cog-outline" size={24} />}
+                trailing={<Icon name="chevron-right" size={20} />}
+                onPress={() => navigate({ path: '/settings' })}
+              />
+              <ListItem
+                label="Notifications"
+                leading={<Icon name="bell-outline" size={24} />}
+                trailing={<Icon name="chevron-right" size={20} />}
+              />
+              <ListItem
+                label="Privacy & Security"
+                leading={<Icon name="shield-check-outline" size={24} />}
+                trailing={<Icon name="chevron-right" size={20} />}
+              />
+              <ListItem
+                label="Help & Support"
+                leading={<Icon name="help-circle-outline" size={24} />}
+                trailing={<Icon name="chevron-right" size={20} />}
+              />
+            </List>
+          </Card>
+        </View>
+
+        {/* Logout */}
+        <Button
+          type="outlined"
+          intent="danger"
+          leftIcon={'logout'}
+        >
+          Log Out
+        </Button>
+      </View>
+    </Screen>
+  );
+};
+
+export default ProfileScreen;

package/dist/templates/core/shared/src/screens/SettingsScreen.tsx

@@ -0,0 +1,218 @@
+import React, { useState } from 'react';
+import {
+  Screen,
+  View,
+  Text,
+  Card,
+  Button,
+  Icon,
+  Switch,
+  Divider,
+  List,
+  ListItem,
+} from '@idealyst/components';
+import { useNavigator } from '@idealyst/navigation';
+import { UnistylesRuntime } from 'react-native-unistyles';
+
+export const SettingsScreen: React.FC = () => {
+  const { goBack, canGoBack } = useNavigator();
+  const [theme, setTheme] = useState(UnistylesRuntime.themeName || 'light');
+  const isDarkMode = theme === 'dark';
+
+  const handleThemeToggle = () => {
+    const newTheme = isDarkMode ? 'light' : 'dark';
+    setTheme(newTheme);
+    UnistylesRuntime.setTheme(newTheme);
+  };
+
+  const selectTheme = (theme: 'light' | 'dark') => {
+    setTheme(theme);
+    UnistylesRuntime.setTheme(theme);
+  };
+
+  return (
+    <Screen background="primary" padding="lg" scrollable>
+      <View gap="lg">
+        {/* Header with back button */}
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+          {canGoBack() && (
+            <Button
+              type="text"
+              size="sm"
+              onPress={() => goBack()}
+              leftIcon={<Icon name="arrow-left" size={20} />}
+            >
+              Back
+            </Button>
+          )}
+          <Text typography="h3">Settings</Text>
+        </View>
+
+        {/* Appearance Section */}
+        <View gap="md">
+          <Text typography="subtitle1" color="secondary">
+            APPEARANCE
+          </Text>
+
+          <Card type="outlined">
+            {/* Dark Mode Toggle */}
+            <View
+              padding="md"
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}
+            >
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, flex: 1 }}>
+                <View
+                  radius="md"
+                  style={{
+                    width: 40,
+                    height: 40,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: isDarkMode ? '#312e81' : '#fef3c7',
+                  }}
+                >
+                  <Icon
+                    name={isDarkMode ? 'moon-waning-crescent' : 'white-balance-sunny'}
+                    size={22}
+                    color={isDarkMode ? '#a5b4fc' : '#f59e0b'}
+                  />
+                </View>
+                <View style={{ flex: 1 }}>
+                  <Text weight="medium">Dark Mode</Text>
+                  <Text typography="caption" color="secondary">
+                    {isDarkMode ? 'Currently using dark theme' : 'Currently using light theme'}
+                  </Text>
+                </View>
+              </View>
+              <Switch checked={isDarkMode} onChange={handleThemeToggle} intent="primary" />
+            </View>
+
+            <Divider />
+
+            {/* Theme Preview Cards */}
+            <View padding="md" style={{ flexDirection: 'row', gap: 12 }}>
+              {/* Light Theme */}
+              <Card
+                type="outlined"
+                clickable
+                onPress={() => selectTheme('light')}
+                intent={theme === 'light' ? 'primary' : 'neutral'}
+                style={{ flex: 1, padding: 0, overflow: 'hidden' }}
+              >
+                <View style={{ padding: 12, gap: 8, backgroundColor: '#ffffff' }}>
+                  <View style={{ height: 8, borderRadius: 4, backgroundColor: '#e5e5e5' }} />
+                  <View
+                    style={{ height: 8, borderRadius: 4, backgroundColor: '#e5e5e5', width: '80%' }}
+                  />
+                  <View
+                    style={{ height: 8, borderRadius: 4, backgroundColor: '#3b82f6', width: '60%' }}
+                  />
+                </View>
+                <View background="secondary" padding="sm" style={{ alignItems: 'center' }}>
+                  <Text typography="caption" weight="medium">
+                    Light
+                  </Text>
+                </View>
+              </Card>
+
+              {/* Dark Theme */}
+              <Card
+                type="outlined"
+                clickable
+                onPress={() => selectTheme('dark')}
+                intent={theme === 'dark' ? 'primary' : 'neutral'}
+                style={{ flex: 1, padding: 0, overflow: 'hidden' }}
+              >
+                <View style={{ padding: 12, gap: 8, backgroundColor: '#1a1a1a' }}>
+                  <View style={{ height: 8, borderRadius: 4, backgroundColor: '#333333' }} />
+                  <View
+                    style={{ height: 8, borderRadius: 4, backgroundColor: '#333333', width: '80%' }}
+                  />
+                  <View
+                    style={{ height: 8, borderRadius: 4, backgroundColor: '#3b82f6', width: '60%' }}
+                  />
+                </View>
+                <View background="secondary" padding="sm" style={{ alignItems: 'center' }}>
+                  <Text typography="caption" weight="medium">
+                    Dark
+                  </Text>
+                </View>
+              </Card>
+            </View>
+          </Card>
+        </View>
+
+        {/* Preferences Section */}
+        <View gap="md">
+          <Text typography="subtitle1" color="secondary">
+            PREFERENCES
+          </Text>
+
+          <Card type="outlined">
+            <List>
+              <ListItem
+                label="Notifications"
+                leading={<Icon name="bell-outline" size={24} />}
+                trailing={<Icon name="chevron-right" size={20} />}
+              />
+              <ListItem
+                label="Language"
+                leading={<Icon name="translate" size={24} />}
+                trailing={<Icon name="chevron-right" size={20} />}
+              />
+              <ListItem
+                label="Accessibility"
+                leading={<Icon name="human" size={24} />}
+                trailing={<Icon name="chevron-right" size={20} />}
+              />
+            </List>
+          </Card>
+        </View>
+
+        {/* About Section */}
+        <View gap="md">
+          <Text typography="subtitle1" color="secondary">
+            ABOUT
+          </Text>
+
+          <Card type="outlined">
+            <List>
+              <ListItem
+                label="Privacy Policy"
+                leading={<Icon name="shield-check-outline" size={24} />}
+                trailing={<Icon name="open-in-new" size={20} />}
+              />
+              <ListItem
+                label="Terms of Service"
+                leading={<Icon name="file-document-outline" size={24} />}
+                trailing={<Icon name="open-in-new" size={20} />}
+              />
+              <ListItem
+                label="Licenses"
+                leading={<Icon name="license" size={24} />}
+                trailing={<Icon name="chevron-right" size={20} />}
+              />
+            </List>
+          </Card>
+        </View>
+
+        {/* Version Info */}
+        <View style={{ alignItems: 'center', paddingVertical: 24, gap: 4 }}>
+          <Icon name="application-outline" size={32} textColor='primary' />
+          <Text typography="caption" color="secondary">
+            {{appDisplayName}}
+          </Text>
+          <Text typography="caption" color="secondary">
+            Version {{version}} | Theme: {theme}
+          </Text>
+        </View>
+      </View>
+    </Screen>
+  );
+};
+
+export default SettingsScreen;

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

@@ -0,0 +1,4 @@
+export { HomeScreen } from './HomeScreen';
+export { ExploreScreen } from './ExploreScreen';
+export { ProfileScreen } from './ProfileScreen';
+export { SettingsScreen } from './SettingsScreen';

package/dist/templates/core/shared/src/styles.ts

@@ -0,0 +1,45 @@
+import { lightTheme, darkTheme, fromTheme } from '@idealyst/theme';
+import { StyleSheet } from 'react-native-unistyles';
+
+// Build themes using fromTheme() for proper babel plugin analysis
+export const customLightTheme = fromTheme(lightTheme).build();
+
+// Define AppTheme type based on customLightTheme (dark theme should conform)
+type AppTheme = typeof customLightTheme
+
+export const customDarkTheme: AppTheme = fromTheme(darkTheme).build();
+
+// Register theme in Idealyst Theme Registry for type safety
+declare module '@idealyst/theme' {
+  interface CustomThemeRegistry {
+    theme: AppTheme;
+  }
+}
+
+// Extend UnistylesThemes type declaration
+declare module 'react-native-unistyles' {
+  export interface UnistylesThemes {
+    light: AppTheme;
+    dark: AppTheme;
+  }
+}
+
+// Configure Unistyles with standard Idealyst themes
+StyleSheet.configure({
+  themes: {
+    light: customLightTheme,
+    dark: customDarkTheme,
+  },
+  settings: {
+    initialTheme: 'light',
+  },
+});
+
+// Export theme names for easy reference
+export const availableThemes = ['light', 'dark'] as const;
+export type AvailableTheme = (typeof availableThemes)[number];
+
+// Helper function to toggle theme
+export function toggleTheme(currentTheme: string): AvailableTheme {
+  return currentTheme === 'light' ? 'dark' : 'light';
+}

package/dist/templates/core/web/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{appDisplayName}}</title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html, body, #root {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/dist/templates/core/web/public/vite.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="100" height="100" rx="20" fill="url(#grad)"/>
+  <text x="50" y="65" font-family="Arial, sans-serif" font-size="45" font-weight="bold" fill="white" text-anchor="middle">I</text>
+</svg>

package/dist/templates/core/web/src/App.tsx

@@ -0,0 +1,12 @@
+import { App } from '@{{workspaceScope}}/shared';
+import { BrowserRouter } from 'react-router-dom';
+
+function WebApp() {
+  return (
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  );
+}
+
+export default WebApp;

package/dist/templates/core/web/src/main.tsx

@@ -0,0 +1,16 @@
+// Initialize unistyles BEFORE anything else
+// import '@{{workspaceScope}}/shared/styles';
+
+import * as React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+// Render the app
+const container = document.getElementById('root')!;
+const root = ReactDOM.createRoot(container);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/dist/templates/core/workspace/gitignore.template

@@ -0,0 +1,78 @@
+# AI/Tool configs
+.claude/
+.serena/
+.playwright/
+
+# Dependencies
+node_modules/
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Build outputs
+dist/
+build/
+.cache/
+*.tsbuildinfo
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Testing
+coverage/
+.jest/
+
+# Mobile
+ios/Pods/
+android/.gradle/
+android/app/build/
+*.keystore
+*.jks
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Misc
+*.tmp
+*.bak
+
+# Turborepo
+.turbo/
+
+# Linting
+.eslintcache
+
+# SSL
+*.pem
+
+# Deployment
+.vercel/
+.netlify/
+
+# Expo
+.expo/
+.expo-shared/
+
+# Metro
+.metro-health-check*
+
+# Watchman
+.watchman-*

package/dist/templates/core/workspace/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@{{workspaceScope}}/{{projectName}}",
+  "version": "{{version}}",
+  "private": true,
+  "packageManager": "yarn@4.1.0",
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "dev": "yarn workspace @{{workspaceScope}}/web dev",
+    "build": "yarn workspace @{{workspaceScope}}/web build",
+    "preview": "yarn workspace @{{workspaceScope}}/web preview",
+    "start:mobile": "yarn workspace @{{workspaceScope}}/mobile start",
+    "android": "yarn workspace @{{workspaceScope}}/mobile android",
+    "ios": "yarn workspace @{{workspaceScope}}/mobile ios"
+  },
+  "devDependencies": {
+    "concurrently": "^9.0.0",
+    "jest": "^29.7.0",
+    "@types/jest": "^29.5.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.0.0"
+  }
+}

package/dist/templates/core/workspace/react-native.config.js

@@ -0,0 +1,19 @@
+/**
+ * React Native configuration for monorepo setup
+ *
+ * This file tells the React Native CLI where to find the mobile project
+ * and its dependencies in a Yarn workspace monorepo structure.
+ */
+module.exports = {
+  project: {
+    android: {
+      sourceDir: './packages/mobile/android',
+      appName: 'app',
+      packageName: '{{androidPackageName}}',
+    },
+    ios: {
+      sourceDir: './packages/mobile/ios',
+    },
+  },
+  // Dependencies are auto-detected from node_modules
+};