kynjal-cli 2.0.6

package/dist/templates/start-convex/theme/colors.ts

@@ -0,0 +1,184 @@
+import { Platform } from 'react-native';
+
+export const Fonts = Platform.select({
+  ios: {
+    /** iOS `UIFontDescriptorSystemDesignDefault` */
+    sans: 'system-ui',
+    /** iOS `UIFontDescriptorSystemDesignSerif` */
+    serif: 'ui-serif',
+    /** iOS `UIFontDescriptorSystemDesignRounded` */
+    rounded: 'ui-rounded',
+    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
+    mono: 'ui-monospace',
+  },
+  default: {
+    sans: 'normal',
+    serif: 'serif',
+    rounded: 'normal',
+    mono: 'monospace',
+  },
+  web: {
+    sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    serif: "Georgia, 'Times New Roman', serif",
+    rounded:
+      "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
+    mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+  },
+});
+
+export const lightColors = {
+  // Base colors
+  background: '#FFFFFF',
+  foreground: '#000000',
+
+  // Card colors
+  card: '#F2F2F7',
+  cardForeground: '#000000',
+
+  // Popover colors
+  popover: '#F2F2F7',
+  popoverForeground: '#000000',
+
+  // Primary colors
+  primary: '#18181b',
+  primaryForeground: '#FFFFFF',
+
+  // Secondary colors
+  secondary: '#F2F2F7',
+  secondaryForeground: '#18181b',
+
+  // Muted colors
+  muted: '#78788033',
+  mutedForeground: '#71717a',
+
+  // Accent colors
+  accent: '#F2F2F7',
+  accentForeground: '#18181b',
+
+  // Destructive colors
+  destructive: '#ef4444',
+  destructiveForeground: '#FFFFFF',
+
+  // Border and input
+  border: '#C6C6C8',
+  input: '#e4e4e7',
+  ring: '#a1a1aa',
+
+  // Text colors
+  text: '#000000',
+  textMuted: '#71717a',
+
+  // Legacy support for existing components
+  tint: '#18181b',
+  icon: '#71717a',
+  tabIconDefault: '#71717a',
+  tabIconSelected: '#18181b',
+
+  // Default buttons, links, Send button, selected tabs
+  blue: '#007AFF',
+
+  // Success states, FaceTime buttons, completed tasks
+  green: '#34C759',
+
+  // Delete buttons, error states, critical alerts
+  red: '#FF3B30',
+
+  // VoiceOver highlights, warning states
+  orange: '#FF9500',
+
+  // Notes app accent, Reminders highlights
+  yellow: '#FFCC00',
+
+  // Pink accent color for various UI elements
+  pink: '#FF2D92',
+
+  // Purple accent for creative apps and features
+  purple: '#AF52DE',
+
+  // Teal accent for communication features
+  teal: '#5AC8FA',
+
+  // Indigo accent for system features
+  indigo: '#5856D6',
+};
+
+export const darkColors = {
+  // Base colors
+  background: '#000000',
+  foreground: '#FFFFFF',
+
+  // Card colors
+  card: '#1C1C1E',
+  cardForeground: '#FFFFFF',
+
+  // Popover colors
+  popover: '#18181b',
+  popoverForeground: '#FFFFFF',
+
+  // Primary colors
+  primary: '#e4e4e7',
+  primaryForeground: '#18181b',
+
+  // Secondary colors
+  secondary: '#1C1C1E',
+  secondaryForeground: '#FFFFFF',
+
+  // Muted colors
+  muted: '#78788033',
+  mutedForeground: '#a1a1aa',
+
+  // Accent colors
+  accent: '#1C1C1E',
+  accentForeground: '#FFFFFF',
+
+  // Destructive colors
+  destructive: '#dc2626',
+  destructiveForeground: '#FFFFFF',
+
+  // Border and input - using alpha values for better blending
+  border: '#38383A',
+  input: 'rgba(255, 255, 255, 0.15)',
+  ring: '#71717a',
+
+  // Text colors
+  text: '#FFFFFF',
+  textMuted: '#a1a1aa',
+
+  // Legacy support for existing components
+  tint: '#FFFFFF',
+  icon: '#a1a1aa',
+  tabIconDefault: '#a1a1aa',
+  tabIconSelected: '#FFFFFF',
+
+  // Default buttons, links, Send button, selected tabs
+  blue: '#0A84FF',
+
+  // Success states, FaceTime buttons, completed tasks
+  green: '#30D158',
+
+  // Delete buttons, error states, critical alerts
+  red: '#FF453A',
+
+  // VoiceOver highlights, warning states
+  orange: '#FF9F0A',
+
+  // Notes app accent, Reminders highlights
+  yellow: '#FFD60A',
+
+  // Pink accent color for various UI elements
+  pink: '#FF375F',
+
+  // Purple accent for creative apps and features
+  purple: '#BF5AF2',
+
+  // Teal accent for communication features
+  teal: '#64D2FF',
+
+  // Indigo accent for system features
+  indigo: '#5E5CE6',
+};
+
+export const Colors = {
+  light: lightColors,
+  dark: darkColors,
+};

package/dist/templates/start-convex/theme/globals.ts

@@ -0,0 +1,4 @@
+export const HEIGHT = 48;
+export const FONT_SIZE = 17;
+export const BORDER_RADIUS = 26;
+export const CORNERS = 999;

package/dist/templates/start-convex/theme/theme-provider.tsx

@@ -0,0 +1,59 @@
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider as RNThemeProvider,
+} from '@react-navigation/native';
+import { Colors } from '@/theme/colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const ThemeProvider = ({ children }: Props) => {
+  const colorScheme = useColorScheme();
+
+  // Create custom themes that use your Colors
+  const customLightTheme = {
+    ...DefaultTheme,
+    colors: {
+      ...DefaultTheme.colors,
+      primary: Colors.light.primary,
+      background: Colors.light.background,
+      card: Colors.light.card,
+      text: Colors.light.text,
+      border: Colors.light.border,
+      notification: Colors.light.red,
+
+      tint: Colors.light.background,
+      icon: '#9BA1A6',
+      tabIconDefault: '#9BA1A6',
+      tabIconSelected: Colors.light.background,
+    },
+  };
+
+  const customDarkTheme = {
+    ...DarkTheme,
+    colors: {
+      ...DarkTheme.colors,
+      primary: Colors.dark.primary,
+      background: Colors.dark.background,
+      card: Colors.dark.card,
+      text: Colors.dark.text,
+      border: Colors.dark.border,
+      notification: Colors.dark.red,
+      tint: Colors.dark.background,
+      tabIconSelected: Colors.dark.background,
+      icon: '#9BA1A6',
+      tabIconDefault: '#9BA1A6',
+    },
+  };
+
+  return (
+    <RNThemeProvider
+      value={colorScheme === 'dark' ? customDarkTheme : customLightTheme}
+    >
+      {children}
+    </RNThemeProvider>
+  );
+};

package/dist/templates/start-convex/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ]
+}

package/dist/templates/theme/colors.ts

@@ -0,0 +1,205 @@
+const lightColors = {
+  // Base colors
+  background: '#FFFFFF',
+  foreground: '#000000',
+
+  // Card colors
+  card: '#F2F2F7',
+  cardForeground: '#000000',
+
+  // Popover colors
+  popover: '#F2F2F7',
+  popoverForeground: '#000000',
+
+  // Primary colors
+  primary: '#18181b',
+  primaryForeground: '#FFFFFF',
+
+  // Secondary colors
+  secondary: '#F2F2F7',
+  secondaryForeground: '#18181b',
+
+  // Muted colors
+  muted: '#78788033',
+  mutedForeground: '#71717a',
+
+  // Accent colors
+  accent: '#F2F2F7',
+  accentForeground: '#18181b',
+
+  // Destructive colors
+  destructive: '#ef4444',
+  destructiveForeground: '#FFFFFF',
+
+  // Border and input
+  border: '#C6C6C8',
+  input: '#e4e4e7',
+  ring: '#a1a1aa',
+
+  // Text colors
+  text: '#000000',
+  textMuted: '#71717a',
+
+  // Legacy support for existing components
+  tint: '#18181b',
+  icon: '#71717a',
+  tabIconDefault: '#71717a',
+  tabIconSelected: '#18181b',
+
+  // Default buttons, links, Send button, selected tabs
+  blue: '#007AFF',
+
+  // Success states, FaceTime buttons, completed tasks
+  green: '#34C759',
+
+  // Delete buttons, error states, critical alerts
+  red: '#FF3B30',
+
+  // VoiceOver highlights, warning states
+  orange: '#FF9500',
+
+  // Notes app accent, Reminders highlights
+  yellow: '#FFCC00',
+
+  // Pink accent color for various UI elements
+  pink: '#FF2D92',
+
+  // Purple accent for creative apps and features
+  purple: '#AF52DE',
+
+  // Teal accent for communication features
+  teal: '#5AC8FA',
+
+  // Indigo accent for system features
+  indigo: '#5856D6',
+};
+
+const darkColors = {
+  // Base colors
+  background: '#000000',
+  foreground: '#FFFFFF',
+
+  // Card colors
+  card: '#1C1C1E',
+  cardForeground: '#FFFFFF',
+
+  // Popover colors
+  popover: '#18181b',
+  popoverForeground: '#FFFFFF',
+
+  // Primary colors
+  primary: '#e4e4e7',
+  primaryForeground: '#18181b',
+
+  // Secondary colors
+  secondary: '#1C1C1E',
+  secondaryForeground: '#FFFFFF',
+
+  // Muted colors
+  muted: '#78788033',
+  mutedForeground: '#a1a1aa',
+
+  // Accent colors
+  accent: '#1C1C1E',
+  accentForeground: '#FFFFFF',
+
+  // Destructive colors
+  destructive: '#dc2626',
+  destructiveForeground: '#FFFFFF',
+
+  // Border and input - using alpha values for better blending
+  border: '#38383A',
+  input: 'rgba(255, 255, 255, 0.15)',
+  ring: '#71717a',
+
+  // Text colors
+  text: '#FFFFFF',
+  textMuted: '#a1a1aa',
+
+  // Legacy support for existing components
+  tint: '#FFFFFF',
+  icon: '#a1a1aa',
+  tabIconDefault: '#a1a1aa',
+  tabIconSelected: '#FFFFFF',
+
+  // Default buttons, links, Send button, selected tabs
+  blue: '#0A84FF',
+
+  // Success states, FaceTime buttons, completed tasks
+  green: '#30D158',
+
+  // Delete buttons, error states, critical alerts
+  red: '#FF453A',
+
+  // VoiceOver highlights, warning states
+  orange: '#FF9F0A',
+
+  // Notes app accent, Reminders highlights
+  yellow: '#FFD60A',
+
+  // Pink accent color for various UI elements
+  pink: '#FF375F',
+
+  // Purple accent for creative apps and features
+  purple: '#BF5AF2',
+
+  // Teal accent for communication features
+  teal: '#64D2FF',
+
+  // Indigo accent for system features
+  indigo: '#5E5CE6',
+};
+
+export const Colors = {
+  light: lightColors,
+  dark: darkColors,
+};
+
+// Export individual color schemes for easier access
+export { darkColors, lightColors };
+
+// Utility type for color keys
+export type ColorKeys = keyof typeof lightColors;
+
+// Helper function to get color with opacity (useful for React Native)
+export const withOpacity = (color: string, opacity: number) => {
+  // Handle rgba colors
+  if (color.startsWith('rgba')) {
+    return color;
+  }
+
+  // Handle hex colors
+  if (color.startsWith('#')) {
+    const hex = color.replace('#', '');
+    const r = parseInt(hex.substr(0, 2), 16);
+    const g = parseInt(hex.substr(2, 2), 16);
+    const b = parseInt(hex.substr(4, 2), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+
+  return color;
+};
+
+// Semantic color mappings for common UI patterns
+export const semanticColors = {
+  light: {
+    success: '#22c55e',
+    successForeground: '#ffffff',
+    warning: '#f59e0b',
+    warningForeground: '#ffffff',
+    info: '#3b82f6',
+    infoForeground: '#ffffff',
+    error: '#ef4444',
+    errorForeground: '#ffffff',
+  },
+  dark: {
+    success: '#16a34a',
+    successForeground: '#ffffff',
+    warning: '#d97706',
+    warningForeground: '#ffffff',
+    info: '#2563eb',
+    infoForeground: '#ffffff',
+    error: '#dc2626',
+    errorForeground: '#ffffff',
+  },
+};

package/dist/templates/theme/globals.ts

@@ -0,0 +1,4 @@
+export const HEIGHT = 48;
+export const FONT_SIZE = 17;
+export const BORDER_RADIUS = 26;
+export const CORNERS = 999;

package/dist/templates/theme/theme-provider.tsx

@@ -0,0 +1,52 @@
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider as RNThemeProvider,
+} from '@react-navigation/native';
+import 'react-native-reanimated';
+
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { Colors } from '@/theme/colors';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const ThemeProvider = ({ children }: Props) => {
+  const colorScheme = useColorScheme();
+
+  // Create custom themes that use your Colors
+  const customLightTheme = {
+    ...DefaultTheme,
+    colors: {
+      ...DefaultTheme.colors,
+      primary: Colors.light.primary,
+      background: Colors.light.background,
+      card: Colors.light.card,
+      text: Colors.light.text,
+      border: Colors.light.border,
+      notification: Colors.light.red,
+    },
+  };
+
+  const customDarkTheme = {
+    ...DarkTheme,
+    colors: {
+      ...DarkTheme.colors,
+      primary: Colors.dark.primary,
+      background: Colors.dark.background,
+      card: Colors.dark.card,
+      text: Colors.dark.text,
+      border: Colors.dark.border,
+      notification: Colors.dark.red,
+    },
+  };
+
+  return (
+    <RNThemeProvider
+      value={colorScheme === 'dark' ? customDarkTheme : customLightTheme}
+    >
+      {children}
+    </RNThemeProvider>
+  );
+};

package/dist/utils/dependencies.d.ts

@@ -0,0 +1,7 @@
+import { PackageManager } from './package-manager.js';
+export declare function installPackageDependencies(dependencies: string[], targetPath: string, packageManager: PackageManager): Promise<void>;
+export declare function checkExistingDependencies(dependencies: string[], targetPath: string): string[];
+export declare function getDependencyInfo(dependencies: string[], targetPath: string): {
+    missing: string[];
+    existing: string[];
+};

package/dist/utils/dependencies.js

@@ -0,0 +1,109 @@
+// src/utils/dependencies.ts
+import { execSync } from 'child_process';
+import ora from 'ora';
+import { logger } from './logger.js';
+import path from 'path';
+import fs from 'fs-extra';
+export async function installPackageDependencies(dependencies, targetPath, packageManager) {
+    if (dependencies.length === 0)
+        return;
+    // Convert string dependencies to ComponentDependency objects
+    const componentDeps = dependencies.map((dep) => {
+        if (dep.includes('@')) {
+            const [name, version] = dep.split('@');
+            return { name, version };
+        }
+        return { name: dep, version: 'latest' };
+    });
+    if (componentDeps.length > 0) {
+        await installDeps(componentDeps, targetPath, packageManager, false);
+    }
+}
+async function installDeps(dependencies, targetPath, packageManager, isDev) {
+    const depType = isDev ? 'dev dependencies' : 'dependencies';
+    const spinner = ora(`Installing ${depType}...`).start();
+    try {
+        const packages = dependencies.map((dep) => {
+            return dep.version === 'latest' ? dep.name : `${dep.name}@${dep.version}`;
+        });
+        const installCmd = getPackageInstallCommand(packageManager, packages, isDev);
+        logger.debug(`Running: ${installCmd}`);
+        execSync(installCmd, {
+            cwd: targetPath,
+            stdio: 'pipe',
+            timeout: 300000,
+        });
+        spinner.succeed(`${depType} installed successfully!`);
+    }
+    catch (error) {
+        spinner.fail(`Failed to install ${depType}`);
+        logger.error('Installation error:', error);
+        throw error;
+    }
+}
+function getPackageInstallCommand(packageManager, packages, isDev) {
+    const packagesStr = packages.join(' ');
+    switch (packageManager) {
+        case 'yarn':
+            return isDev ? `yarn add -D ${packagesStr}` : `yarn add ${packagesStr}`;
+        case 'pnpm':
+            return isDev ? `pnpm add -D ${packagesStr}` : `pnpm add ${packagesStr}`;
+        case 'bun':
+            return isDev ? `bun add -D ${packagesStr}` : `bun add ${packagesStr}`;
+        default:
+            return isDev
+                ? `npm install -D ${packagesStr}`
+                : `npm install ${packagesStr}`;
+    }
+}
+export function checkExistingDependencies(dependencies, targetPath) {
+    try {
+        const packageJsonPath = path.join(targetPath, 'package.json');
+        if (!fs.existsSync(packageJsonPath)) {
+            return dependencies;
+        }
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+        const existing = new Set([
+            ...Object.keys(packageJson.dependencies || {}),
+            ...Object.keys(packageJson.devDependencies || {}),
+        ]);
+        return dependencies.filter((dep) => {
+            // Handle dependencies with version specifiers
+            const depName = dep.includes('@') ? dep.split('@')[0] : dep;
+            return !existing.has(depName);
+        });
+    }
+    catch (error) {
+        logger.warn('Failed to check existing dependencies:', error);
+        return dependencies; // If can't read package.json, install all
+    }
+}
+export function getDependencyInfo(dependencies, targetPath) {
+    try {
+        const packageJsonPath = path.join(targetPath, 'package.json');
+        if (!fs.existsSync(packageJsonPath)) {
+            return { missing: dependencies, existing: [] };
+        }
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+        const existing = new Set([
+            ...Object.keys(packageJson.dependencies || {}),
+            ...Object.keys(packageJson.devDependencies || {}),
+        ]);
+        const missing = [];
+        const existingDeps = [];
+        dependencies.forEach((dep) => {
+            const depName = dep.includes('@') ? dep.split('@')[0] : dep;
+            if (existing.has(depName)) {
+                existingDeps.push(dep);
+            }
+            else {
+                missing.push(dep);
+            }
+        });
+        return { missing, existing: existingDeps };
+    }
+    catch (error) {
+        logger.warn('Failed to get dependency info:', error);
+        return { missing: dependencies, existing: [] };
+    }
+}

package/dist/utils/filesystem.d.ts

@@ -0,0 +1,6 @@
+export declare function copyTemplate(templatePath: string, targetPath: string): Promise<void>;
+export declare function writeFile(filePath: string, content: string): Promise<void>;
+export declare function readFile(filePath: string): Promise<string>;
+export declare function fileExists(filePath: string): Promise<boolean>;
+export declare function createDirectory(dirPath: string): Promise<void>;
+export declare function replaceInFile(filePath: string, replacements: Record<string, string>): Promise<void>;