@idealyst/cli 1.0.17 → 1.0.19

package/dist/index.js

@@ -7,6 +7,7 @@ import fs from 'fs-extra';
 import { spawn } from 'child_process';
 import ora from 'ora';
 import validatePackageName from 'validate-npm-package-name';
+import inquirer from 'inquirer';
 
 function validateProjectName(name) {
     const validation = validatePackageName(name);
@@ -123,20 +124,25 @@ function runCommand(command, args, options) {
         });
     });
 }
-function getTemplateData(projectName, description) {
+function getTemplateData(projectName, description, appName) {
     return {
         projectName,
         packageName: createPackageName(projectName),
         version: '1.0.0',
-        description: description || `A new Idealyst project: ${projectName}`
+        description: description || `A new Idealyst project: ${projectName}`,
+        appName
     };
 }
-async function initializeReactNativeProject(projectName, directory) {
+async function initializeReactNativeProject(projectName, directory, displayName) {
     const spinner = ora('Initializing React Native project...').start();
     try {
         // Use the correct React Native CLI command format with specific version and yarn
         const cliCommand = 'npx';
         const args = ['@react-native-community/cli@latest', 'init', projectName, '--version', '0.80.1', '--pm', 'yarn'];
+        // Add title if displayName is provided
+        if (displayName) {
+            args.push('--title', displayName);
+        }
         // Run React Native initialization in the target directory
         await runCommand(cliCommand, args, { cwd: directory });
         spinner.succeed('React Native project initialized successfully');
@@ -219,21 +225,97 @@ async function mergePackageJsonDependencies(templatePath, projectPath) {
         throw error;
     }
 }
+async function promptForProjectName() {
+    const { projectName } = await inquirer.prompt([
+        {
+            type: 'input',
+            name: 'projectName',
+            message: 'What is your project name?',
+            validate: (input) => {
+                if (!input || input.trim().length === 0) {
+                    return 'Project name is required';
+                }
+                const lowerName = input.toLowerCase();
+                if (!validateProjectName(lowerName)) {
+                    return 'Project name must be a valid npm package name (lowercase, no spaces)';
+                }
+                return true;
+            },
+            filter: (input) => input.toLowerCase().trim()
+        }
+    ]);
+    return projectName;
+}
+async function promptForProjectType() {
+    const { projectType } = await inquirer.prompt([
+        {
+            type: 'list',
+            name: 'projectType',
+            message: 'What type of project would you like to create?',
+            choices: [
+                { name: 'React Native App', value: 'native' },
+                { name: 'React Web App', value: 'web' },
+                { name: 'Shared Library', value: 'shared' }
+            ],
+            default: 'native'
+        }
+    ]);
+    return projectType;
+}
+async function promptForAppName(projectName) {
+    const { appName } = await inquirer.prompt([
+        {
+            type: 'input',
+            name: 'appName',
+            message: 'What is the display name for your app? (used for native app titles)',
+            default: projectName.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' '),
+            validate: (input) => {
+                if (!input || input.trim().length === 0) {
+                    return 'App name is required';
+                }
+                return true;
+            },
+            filter: (input) => input.trim()
+        }
+    ]);
+    return appName;
+}
+
+var utils = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  copyTemplate: copyTemplate,
+  createPackageName: createPackageName,
+  getTemplateData: getTemplateData,
+  initializeReactNativeProject: initializeReactNativeProject,
+  installDependencies: installDependencies,
+  mergePackageJsonDependencies: mergePackageJsonDependencies,
+  overlayIdealystFiles: overlayIdealystFiles,
+  processTemplateFile: processTemplateFile,
+  processTemplateFiles: processTemplateFiles,
+  promptForAppName: promptForAppName,
+  promptForProjectName: promptForProjectName,
+  promptForProjectType: promptForProjectType,
+  runCommand: runCommand,
+  updateWorkspacePackageJson: updateWorkspacePackageJson,
+  validateProjectName: validateProjectName
+});
 
 const __filename$3 = fileURLToPath(import.meta.url);
 const __dirname$3 = path.dirname(__filename$3);
 async function generateNativeProject(options) {
-    const { name, directory, skipInstall } = options;
+    const { name, directory, skipInstall, appName } = options;
     if (!validateProjectName(name)) {
         throw new Error(`Invalid project name: ${name}`);
     }
+    const displayName = appName || name.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
     console.log(chalk.blue(`📱 Creating React Native project: ${name}`));
+    console.log(chalk.gray(`   App display name: ${displayName}`));
     const projectPath = path.join(directory, name);
     const templatePath = path.join(__dirname$3, '..', 'templates', 'native');
-    const templateData = getTemplateData(name, `React Native app built with Idealyst Framework`);
+    const templateData = getTemplateData(name, `React Native app built with Idealyst Framework`, displayName);
     try {
         // Step 1: Initialize React Native project using CLI
-        await initializeReactNativeProject(name, directory);
+        await initializeReactNativeProject(name, directory, displayName);
         // Step 2: Overlay Idealyst-specific files
         await overlayIdealystFiles(templatePath, projectPath, templateData);
         // Step 3: Install dependencies (including Idealyst packages)
@@ -354,33 +436,59 @@ program
     .description('CLI tool for generating Idealyst Framework projects')
     .version('1.0.1');
 program
-    .command('create <project-name>')
+    .command('create [project-name]')
     .description('Create a new Idealyst project')
-    .option('-t, --type <type>', 'Project type: native, web, or shared', 'native')
+    .option('-t, --type <type>', 'Project type: native, web, or shared')
     .option('-d, --directory <directory>', 'Output directory', '.')
+    .option('-a, --app-name <app-name>', 'Display name for native apps (e.g., "My Awesome App")')
     .option('--skip-install', 'Skip installing dependencies')
     .action(async (projectName, options) => {
-    const validTypes = ['native', 'web', 'shared'];
-    if (!validTypes.includes(options.type)) {
-        console.error(chalk.red(`Invalid project type: ${options.type}`));
-        console.error(chalk.yellow(`Valid types are: ${validTypes.join(', ')}`));
-        process.exit(1);
-    }
     try {
+        // Prompt for project name if not provided
+        if (!projectName) {
+            projectName = await promptForProjectName();
+        }
+        else {
+            // Validate provided project name
+            const { validateProjectName } = await Promise.resolve().then(function () { return utils; });
+            if (!validateProjectName(projectName.toLowerCase())) {
+                console.error(chalk.red(`Invalid project name: ${projectName}`));
+                console.error(chalk.yellow('Project name must be a valid npm package name (lowercase, no spaces)'));
+                process.exit(1);
+            }
+            projectName = projectName.toLowerCase();
+        }
+        // Prompt for project type if not provided
+        let projectType = options.type;
+        if (!projectType) {
+            projectType = await promptForProjectType();
+        }
+        const validTypes = ['native', 'web', 'shared'];
+        if (!validTypes.includes(projectType)) {
+            console.error(chalk.red(`Invalid project type: ${projectType}`));
+            console.error(chalk.yellow(`Valid types are: ${validTypes.join(', ')}`));
+            process.exit(1);
+        }
+        // Prompt for app name if it's a native project and app name not provided
+        let appName = options.appName;
+        if (projectType === 'native' && !appName) {
+            appName = await promptForAppName(projectName);
+        }
         await generateProject({
             name: projectName,
-            type: options.type,
+            type: projectType,
             directory: options.directory,
-            skipInstall: options.skipInstall || false
+            skipInstall: options.skipInstall || false,
+            appName
         });
         console.log(chalk.green(`✨ Successfully created ${projectName}!`));
         console.log(chalk.blue(`📁 Project created in: ${options.directory}/${projectName}`));
-        if (options.type === 'native') {
+        if (projectType === 'native') {
             console.log(chalk.yellow('\n📱 Next steps for React Native:'));
             console.log(chalk.white('  cd ' + projectName));
             console.log(chalk.white('  yarn android  # or yarn ios'));
         }
-        else if (options.type === 'web') {
+        else if (projectType === 'web') {
             console.log(chalk.yellow('\n🌐 Next steps for React Web:'));
             console.log(chalk.white('  cd ' + projectName));
             console.log(chalk.white('  yarn dev'));
@@ -397,22 +505,36 @@ program
     }
 });
 program
-    .command('init')
+    .command('init [project-name]')
     .description('Initialize a new Idealyst monorepo workspace')
     .option('-d, --directory <directory>', 'Output directory', '.')
     .option('--skip-install', 'Skip installing dependencies')
-    .action(async (options) => {
+    .action(async (projectName, options) => {
     try {
+        // Prompt for project name if not provided
+        if (!projectName) {
+            projectName = await promptForProjectName();
+        }
+        else {
+            // Validate provided project name
+            const { validateProjectName } = await Promise.resolve().then(function () { return utils; });
+            if (!validateProjectName(projectName.toLowerCase())) {
+                console.error(chalk.red(`Invalid project name: ${projectName}`));
+                console.error(chalk.yellow('Project name must be a valid npm package name (lowercase, no spaces)'));
+                process.exit(1);
+            }
+            projectName = projectName.toLowerCase();
+        }
         await generateProject({
-            name: 'idealyst-workspace',
+            name: projectName,
             type: 'workspace',
             directory: options.directory,
             skipInstall: options.skipInstall || false
         });
         console.log(chalk.green('✨ Successfully initialized Idealyst workspace!'));
-        console.log(chalk.blue(`📁 Workspace created in: ${options.directory}/idealyst-workspace`));
+        console.log(chalk.blue(`📁 Workspace created in: ${options.directory}/${projectName}`));
         console.log(chalk.yellow('\n🚀 Next steps:'));
-        console.log(chalk.white('  cd idealyst-workspace'));
+        console.log(chalk.white(`  cd ${projectName}`));
         console.log(chalk.white('  idealyst create my-app --type native'));
         console.log(chalk.white('  idealyst create my-web-app --type web'));
     }

package/dist/types/generators/utils.d.ts

@@ -9,7 +9,10 @@ export declare function installDependencies(projectPath: string, skipInstall?: b
 export declare function runCommand(command: string, args: string[], options: {
     cwd: string;
 }): Promise<void>;
-export declare function getTemplateData(projectName: string, description?: string): TemplateData;
-export declare function initializeReactNativeProject(projectName: string, directory: string): Promise<void>;
+export declare function getTemplateData(projectName: string, description?: string, appName?: string): TemplateData;
+export declare function initializeReactNativeProject(projectName: string, directory: string, displayName?: string): Promise<void>;
 export declare function overlayIdealystFiles(templatePath: string, projectPath: string, data: TemplateData): Promise<void>;
 export declare function mergePackageJsonDependencies(templatePath: string, projectPath: string): Promise<void>;
+export declare function promptForProjectName(): Promise<string>;
+export declare function promptForProjectType(): Promise<string>;
+export declare function promptForAppName(projectName: string): Promise<string>;

package/dist/types/types.d.ts

@@ -4,10 +4,12 @@ export interface GenerateProjectOptions {
     type: ProjectType;
     directory: string;
     skipInstall: boolean;
+    appName?: string;
 }
 export interface TemplateData {
     projectName: string;
     packageName: string;
     version: string;
     description: string;
+    appName?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/cli",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "CLI tool for generating Idealyst Framework projects",
   "type": "module",
   "main": "dist/index.js",

package/templates/native/index.js

@@ -1,6 +1,6 @@
 import '@idealyst/theme/unistyles';
 
 import { AppRegistry } from 'react-native';
-import App from './src/App';
+import App from './App';
 
 AppRegistry.registerComponent('{{projectName}}', () => App); 

package/templates/native/metro.config.js

@@ -12,11 +12,6 @@ const config = {
     // Important for Idealyst to use .native extensions for React Native (eg: @idealyst/components/src/Button/Button.native.tsx)
     sourceExts: ['native.tsx', 'native.ts', 'tsx', 'ts', 'native.jsx', 'native.js', 'jsx', 'js', 'json'],
   },
-  watchFolders: [
-    path.resolve(__dirname, 'src'),
-    // To support live updates when developing components in other workspaces, add the folders here. Make sure
-    // path.resolve(__dirname, '../shared/'),
-  ],
   watcher: {
     // When configuring custom components with .native extensions, make sure the watcher looks for them
     additionalExts: ['native.tsx', 'native.ts', 'native.jsx', 'native.js'],

package/templates/web/src/App.tsx

@@ -1,20 +1,16 @@
-import React from 'react';
-import { View, Text, Button } from '@idealyst/components';
+import './App.css';
+import { BrowserRouter } from 'react-router-dom';
+import { ExampleStackRouter, } from '@idealyst/navigation/examples';
+import { NavigatorProvider } from '@idealyst/navigation';
 
-const App = () => {
+function App() {
   return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
-      <Text variant="h1">Welcome to {{projectName}}</Text>
-      <Text variant="body" style={{ marginTop: 20, textAlign: 'center' }}>
-        This is a React web application built with the Idealyst Framework.
-      </Text>
-      <Button 
-        title="Get Started" 
-        onPress={() => console.log('Button pressed!')}
-        style={{ marginTop: 20 }}
-      />
-    </View>
-  );
-};
+    <div className="App">
+      <BrowserRouter>
+        <NavigatorProvider route={ExampleStackRouter} />
+      </BrowserRouter>
+    </div>
+  );  
+}
 
 export default App; 

package/templates/web/src/main.tsx

@@ -1,12 +1,26 @@
-import '@idealyst/theme/unistyles';
+// Import navigation unistyles after all other imports to ensure it overrides any previous configuration
+import '@idealyst/navigation/examples/unistyles';
 
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App';
+import * as React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
 
-const root = createRoot(document.getElementById('root')!);
-root.render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-); 
+// Hydrate the app if it's SSR, otherwise render normally
+const container = document.getElementById('root')!;
+
+if (container.hasChildNodes()) {
+  // If the container has child nodes, it means we're hydrating SSR content
+  ReactDOM.hydrateRoot(container, 
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+  );
+} else {
+  // Otherwise, render normally (for development)
+  const root = ReactDOM.createRoot(container);
+  root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+  );
+} 

package/templates/web/vite.config.ts

@@ -7,9 +7,7 @@ import path from 'path'
 export default defineConfig({
   plugins: [
     babel({
-      filter: (id) => {
-        return id.includes('node_modules/@idealyst/') && /\.(js|jsx|ts|tsx)$/.test(id);
-      },
+      filter: (id) => id.includes('node_modules/@idealyst/') && /\.(js|jsx|ts|tsx)$/.test(id),
       babelConfig: {
         presets: [
           ['@babel/preset-typescript', {
@@ -20,7 +18,6 @@ export default defineConfig({
         plugins: [
           ['react-native-unistyles/plugin', {
             root: 'src',
-            debug: true,
             autoProcessPaths: ['@idealyst/components', '@idealyst/navigation', '@idealyst/theme'],
           }],
           ['@idealyst/components/plugin/web', { root: 'src' }]

package/templates/App.tsx

@@ -1,16 +0,0 @@
-import './App.css';
-import { BrowserRouter } from 'react-router-dom';
-import { ExampleStackRouter, } from '@idealyst/navigation/examples';
-import { NavigatorProvider } from '@idealyst/navigation';
-
-function App() {
-  return (
-    <div className="App">
-      <BrowserRouter>
-        <NavigatorProvider route={ExampleStackRouter} />
-      </BrowserRouter>
-    </div>
-  );  
-}
-
-export default App; 

package/templates/web/.yarnrc.yml

@@ -1,19 +0,0 @@
-nodeLinker: "node-modules"
-
-# Enable network for package downloads
-enableNetwork: true
-
-# Timeout for HTTP requests (in milliseconds)
-httpTimeout: 60000
-
-# Number of retry attempts for HTTP requests
-httpRetry: 3
-
-# Registry configuration
-npmRegistryServer: "https://registry.yarnpkg.com"
-
-# Enable progress bars
-enableProgressBars: true
-
-# Enable colors in output
-enableColors: true