@idealyst/cli 1.2.29 → 1.2.31

package/dist/templates/core/shared/src/navigation/AppRouter.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Icon } from '@idealyst/components';
+import type { NavigatorParam, TabBarScreenOptions } from '@idealyst/navigation';
+
+// Screens
+import { HomeScreen } from '../screens/HomeScreen';
+import { ExploreScreen } from '../screens/ExploreScreen';
+import { ProfileScreen } from '../screens/ProfileScreen';
+import { SettingsScreen } from '../screens/SettingsScreen';
+
+// Custom Layouts
+import { AppTabLayout, AppStackLayout } from '../layouts/AppLayout';
+
+/**
+ * Tab Navigator - Contains 3 main tabs: Home, Explore, Profile
+ */
+const MainTabNavigator: NavigatorParam = {
+  path: '',
+  type: 'navigator',
+  layout: 'tab',
+  layoutComponent: AppTabLayout,
+  routes: [
+    {
+      path: '',
+      type: 'screen',
+      component: HomeScreen,
+      options: {
+        title: 'Home',
+        tabBarLabel: 'Home',
+        tabBarIcon: ({ focused, color, size }) => (
+          <Icon
+            name={focused ? 'home' : 'home-outline'}
+            color={color}
+            size={size}
+          />
+        ),
+      } as TabBarScreenOptions,
+    },
+    {
+      path: 'explore',
+      type: 'screen',
+      component: ExploreScreen,
+      options: {
+        title: 'Explore',
+        tabBarLabel: 'Explore',
+        tabBarIcon: ({ focused, color, size }) => (
+          <Icon
+            name={focused ? 'compass' : 'compass-outline'}
+            color={color}
+            size={size}
+          />
+        ),
+      } as TabBarScreenOptions,
+    },
+    {
+      path: 'profile',
+      type: 'screen',
+      component: ProfileScreen,
+      options: {
+        title: 'Profile',
+        tabBarLabel: 'Profile',
+        tabBarIcon: ({ focused, color, size }) => (
+          <Icon
+            name={focused ? 'account' : 'account-outline'}
+            color={color}
+            size={size}
+          />
+        ),
+      } as TabBarScreenOptions,
+    },
+  ],
+};
+
+/**
+ * Root Stack Navigator - Wraps tabs and adds Settings screen
+ * Structure:
+ * - Stack (root)
+ *   - Tab Navigator (main tabs)
+ *     - Home
+ *     - Explore
+ *     - Profile
+ *   - Settings (modal-style screen on top of tabs)
+ */
+export const AppRouter: NavigatorParam = {
+  path: '/',
+  type: 'navigator',
+  layout: 'stack',
+  layoutComponent: AppStackLayout,
+  routes: [
+    MainTabNavigator,
+    {
+      path: 'settings',
+      type: 'screen',
+      component: SettingsScreen,
+      options: {
+        title: 'Settings',
+        headerShown: true,
+      },
+    },
+  ],
+};
+
+export default AppRouter;

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

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

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

@@ -0,0 +1,240 @@
+import React, { useState } from 'react';
+import {
+  Screen,
+  View,
+  Text,
+  Card,
+  Button,
+  Icon,
+  TextInput,
+  Select,
+  Switch,
+  Slider,
+  Progress,
+  Alert,
+  Divider,
+  List,
+  ListItem,
+} from '@idealyst/components';
+
+const selectOptions = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3' },
+];
+
+export const ExploreScreen: React.FC = () => {
+  const [inputValue, setInputValue] = useState('');
+  const [selectValue, setSelectValue] = useState('1');
+  const [switchValue, setSwitchValue] = useState(false);
+  const [sliderValue, setSliderValue] = useState(50);
+  const [progressValue, setProgressValue] = useState(65);
+
+  return (
+    <Screen background="primary" padding="lg" scrollable>
+      <View gap="xl">
+        {/* Header */}
+        <View gap="sm">
+          <Text typography="h3">Component Explorer</Text>
+          <Text color="secondary">Interactive demos of Idealyst components</Text>
+        </View>
+
+        {/* Buttons Section */}
+        <View gap="md">
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Icon name="gesture-tap-button" size={24} intent="primary" />
+            <Text typography="subtitle1">Buttons</Text>
+          </View>
+          <Card type="outlined" padding="md" gap="md">
+            <Text typography="caption" color="secondary">
+              Buttons with different intents and types
+            </Text>
+            <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+              <Button intent="primary" size="sm">
+                Primary
+              </Button>
+              <Button intent="success" size="sm">
+                Success
+              </Button>
+              <Button intent="danger" size="sm">
+                Danger
+              </Button>
+              <Button intent="warning" size="sm">
+                Warning
+              </Button>
+            </View>
+            <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+              <Button type="outlined" intent="primary" size="sm">
+                Outlined
+              </Button>
+              <Button type="text" intent="primary" size="sm">
+                Ghost
+              </Button>
+              <Button type="outlined" intent="primary" size="sm">
+                Soft
+              </Button>
+            </View>
+            <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+              <Button
+                intent="primary"
+                size="sm"
+                leftIcon={<Icon name="plus" size={16} textColor='inverse' />}
+              >
+                With Icon
+              </Button>
+              <Button intent="neutral" size="sm" disabled>
+                Disabled
+              </Button>
+            </View>
+          </Card>
+        </View>
+
+        {/* Form Controls Section */}
+        <View gap="md">
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Icon name="form-textbox" size={24} intent="primary" />
+            <Text typography="subtitle1">Form Controls</Text>
+          </View>
+          <Card type="outlined" padding="md" gap="md">
+            <TextInput
+              placeholder="Enter some text..."
+              value={inputValue}
+              onChangeText={setInputValue}
+              leftIcon={<Icon name="magnify" size={20} />}
+            />
+
+            <Select
+              label="Select"
+              value={selectValue}
+              onChange={setSelectValue}
+              options={selectOptions}
+            />
+
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingVertical: 8,
+              }}
+            >
+              <View>
+                <Text weight="medium">Enable Feature</Text>
+                <Text typography="caption" color="secondary">
+                  Toggle this setting on or off
+                </Text>
+              </View>
+              <Switch
+                checked={switchValue}
+                onChange={setSwitchValue}
+                intent="primary"
+              />
+            </View>
+
+            <View gap="xs">
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <Text weight="medium">Volume</Text>
+                <Text color="secondary">{sliderValue}%</Text>
+              </View>
+              <Slider
+                value={sliderValue}
+                onChange={setSliderValue}
+                min={0}
+                max={100}
+                intent="primary"
+              />
+            </View>
+          </Card>
+        </View>
+
+        {/* Feedback Section */}
+        <View gap="md">
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Icon name="message-alert-outline" size={24} intent="primary" />
+            <Text typography="subtitle1">Feedback</Text>
+          </View>
+          <Card type="outlined" padding="md" gap="md">
+            <Alert intent="info" title="Info Alert">
+              This is an informational message for the user.
+            </Alert>
+            <Alert intent="success" title="Success!">
+              Your changes have been saved successfully.
+            </Alert>
+            <Alert intent="warning" title="Warning">
+              Please review your input before continuing.
+            </Alert>
+
+            <Divider />
+
+            <View gap="xs">
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <Text weight="medium">Upload Progress</Text>
+                <Text color="secondary">{progressValue}%</Text>
+              </View>
+              <Progress value={progressValue} intent="primary" />
+            </View>
+
+            <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+              <Button
+                size="sm"
+                type="outlined"
+                onPress={() => setProgressValue(Math.max(0, progressValue - 10))}
+              >
+                -10%
+              </Button>
+              <Button
+                size="sm"
+                type="outlined"
+                onPress={() => setProgressValue(Math.min(100, progressValue + 10))}
+              >
+                +10%
+              </Button>
+              <Button size="sm" intent="success" onPress={() => setProgressValue(100)}>
+                Complete
+              </Button>
+            </View>
+          </Card>
+        </View>
+
+        {/* List Section */}
+        <View gap="md">
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Icon name="format-list-bulleted" size={24} intent="primary" />
+            <Text typography="subtitle1">Lists</Text>
+          </View>
+          <Card type="outlined" padding="md">
+            <List>
+              <ListItem
+                label="Notifications"
+                leading={<Icon name="bell-outline" size={24} />}
+                trailing={<Icon name="chevron-right" size={20} />}
+              />
+              <ListItem
+                label="Privacy"
+                leading={<Icon name="shield-outline" size={24} />}
+                trailing={<Icon name="chevron-right" size={20} />}
+              />
+              <ListItem
+                label="Storage"
+                leading={<Icon name="folder-outline" size={24} />}
+                trailing={<Icon name="chevron-right" size={20} />}
+              />
+            </List>
+          </Card>
+        </View>
+      </View>
+    </Screen>
+  );
+};
+
+export default ExploreScreen;

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

@@ -0,0 +1,151 @@
+import React from 'react';
+import {
+  Screen,
+  View,
+  Text,
+  Card,
+  Button,
+  Icon,
+  Badge,
+  Chip,
+} from '@idealyst/components';
+import { useNavigator } from '@idealyst/navigation';
+
+export const HomeScreen: React.FC = () => {
+  const { navigate } = useNavigator();
+
+  return (
+    <Screen background="primary" padding="lg" scrollable>
+      <View gap="lg">
+        {/* Header */}
+        <View gap="sm">
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Text typography="h3">Welcome back</Text>
+            <Badge intent="success" size="sm">
+              Pro
+            </Badge>
+          </View>
+          <Text color="secondary">Explore the Idealyst component library</Text>
+        </View>
+
+        {/* Stats */}
+        <View style={{ flexDirection: 'row', gap: 12 }}>
+          <Card type="elevated" padding="md" style={{ flex: 1, alignItems: 'center' }}>
+            <Icon name="widgets-outline" size={28} intent="primary" />
+            <Text typography="h4">37+</Text>
+            <Text typography="caption" color="secondary">
+              Components
+            </Text>
+          </Card>
+          <Card type="elevated" padding="md" style={{ flex: 1, alignItems: 'center' }}>
+            <Icon name="palette-outline" size={28} intent="success" />
+            <Text typography="h4">2</Text>
+            <Text typography="caption" color="secondary">
+              Themes
+            </Text>
+          </Card>
+          <Card type="elevated" padding="md" style={{ flex: 1, alignItems: 'center' }}>
+            <Icon name="cellphone-link" size={28} intent="warning" />
+            <Text typography="h4">3</Text>
+            <Text typography="caption" color="secondary">
+              Platforms
+            </Text>
+          </Card>
+        </View>
+
+        {/* Quick Actions */}
+        <View gap="md">
+          <Text typography="subtitle1">Quick Actions</Text>
+          <View style={{ flexDirection: 'row', gap: 12 }}>
+            <Button
+              style={{ flex: 1 }}
+              intent="primary"
+              // Use direct icon name (retains theme colors)
+              leftIcon={'compass-outline'}
+              onPress={() => navigate({ path: '/explore' })}
+            >
+              Explore
+            </Button>
+            <Button
+              style={{ flex: 1 }}
+              type="outlined"
+              intent="neutral"
+              // or specify your own Icon component
+              leftIcon={<Icon name="cog-outline" size={18} color='orange' />}
+              onPress={() => navigate({ path: '/settings' })}
+            >
+              Settings
+            </Button>
+          </View>
+        </View>
+
+        {/* Feature Highlights */}
+        <View gap="md">
+          <Text typography="subtitle1">Highlights</Text>
+
+          <Card type="outlined" padding="md" clickable>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+              <View
+                background="secondary"
+                radius="md"
+                style={{
+                  width: 48,
+                  height: 48,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon name="theme-light-dark" size={24} intent="primary" />
+              </View>
+              <View style={{ flex: 1 }}>
+                <Text weight="semibold">Dark Mode Support</Text>
+                <Text typography="caption" color="secondary">
+                  Seamlessly switch between light and dark themes
+                </Text>
+              </View>
+              <Icon name="chevron-right" size={24} textColor="secondary" />
+            </View>
+          </Card>
+
+          <Card type="outlined" padding="md" clickable>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+              <View
+                background="secondary"
+                radius="md"
+                style={{
+                  width: 48,
+                  height: 48,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon name="navigation-outline" size={24} intent="primary" />
+              </View>
+              <View style={{ flex: 1 }}>
+                <Text weight="semibold">Nested Navigation</Text>
+                <Text typography="caption" color="secondary">
+                  Stack and Tab navigators working together
+                </Text>
+              </View>
+              <Icon name="chevron-right" size={24} textColor="secondary" />
+            </View>
+          </Card>
+        </View>
+
+        {/* Tags */}
+        <View gap="sm">
+          <Text typography="subtitle1">Technologies</Text>
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+            <Chip intent="primary" label='React 19' />
+            <Chip intent="success" label='React Native' />
+            <Chip intent="warning" label='Unistyles' />
+            <Chip intent="info" label='TypeScript' />
+            <Chip intent="neutral" label='Cross-Platform' />
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+};
+
+export default HomeScreen;