[cli] overhaul cli prompts via clack

.changeset/breezy-pigs-boil.md

@@ -0,0 +1,5 @@
+---
+'create-expo-stack': patch
+---
+
+overhaul cli prompts via clack

cli/src/commands/create-expo-stack.ts

@@ -15,6 +15,7 @@ import { DEFAULT_APP_NAME, defaultOptions } from '../constants';
 import { CliResults, availablePackages } from '../types';
 import clearStylingPackages from '../utilities/clearStylingPackages';
 import { validateProjectName } from '../utilities/validateProjectName';
+import { cancel, intro, isCancel, text } from '@clack/prompts';
 
 const navigationValidationError = `You must pass in either --react-navigation or --expo-router if you want to use the --tabs or --drawer+tabs options`;
 const projectNameValidationError = `A project with the name`;
@@ -72,18 +73,29 @@ const command: GluegunCommand = {
       }
 
       await renderTitle(toolbox);
+      intro(`Let's get started!`);
 
       // Prompt the user for the project name if it is not passed in via the command
       // - TODO: simplify this if statement to clarify what is being checked
       if (!first && (options.ignite || !(useDefault || optionsPassedIn || skipCLI || useBlankTypescript))) {
-        const askName = {
-          type: 'input',
-          name: 'name',
-          message: `What do you want to name your project? (${DEFAULT_APP_NAME})`
-        };
-        const { name } = await prompt.ask(askName);
+        const name = await text({
+          message: 'What do you want to name your project?',
+          placeholder: DEFAULT_APP_NAME
+        });
+
+        if (isCancel(name)) {
+          cancel('Cancelled... 👋');
+          return process.exit(0);
+        }
+
+        // const askName = {
+        //   type: 'input',
+        //   name: 'name',
+        //   message: `What do you want to name your project? (${DEFAULT_APP_NAME})`
+        // };
+        // const { name } = await prompt.ask(askName);
         // if name is undefined or empty string, use default name
-        cliResults.projectName = name || DEFAULT_APP_NAME;
+        cliResults.projectName = (name && name.toString()) || DEFAULT_APP_NAME;
       } else {
         // Destructure the results but set the projectName if the first param is passed in
         cliResults.projectName = first || DEFAULT_APP_NAME;
@@ -103,7 +115,6 @@ const command: GluegunCommand = {
         removeAsync,
         !(useDefault || optionsPassedIn || skipCLI || useBlankTypescript) ? prompt : null,
         cliResults.projectName,
-        success,
         cliResults.flags.overwrite
       );
     } catch (err: string | any) {

cli/src/types.ts

@@ -26,8 +26,14 @@ export const availablePackages = [
   'i18next'
 ] as const;
 
+export type AuthenticationSelect = 'supabase' | 'firebase' | undefined;
+
+export type NavigationSelect = 'react-navigation' | 'expo-router' | undefined;
+
 export type NavigationTypes = 'stack' | 'tabs' | 'drawer + tabs' | undefined;
 
+export type StylingSelect = 'nativewind' | 'restyle' | 'stylesheet' | 'tamagui' | 'unistyles';
+
 export type PackageManager = 'yarn' | 'npm' | 'pnpm' | 'bun';
 
 export type Internalization = 'i18next';

cli/src/utilities/printOutput.ts

@@ -3,6 +3,7 @@ import { Toolbox } from 'gluegun/build/types/domain/toolbox';
 import { getPackageManager, getPackageManagerRunnerX } from './getPackageManager';
 import { AvailablePackages, CliResults } from '../types';
 import { copyBaseAssets } from './copyBaseAssets';
+import { outro, spinner } from '@clack/prompts';
 
 export async function printOutput(
   cliResults: CliResults,
@@ -17,61 +18,52 @@ export async function printOutput(
   } = toolbox;
 
   const { projectName, flags } = cliResults;
+  const s = spinner();
 
   // Output the results to the user
-  info(``);
-  highlight(`Initializing your project...`);
 
+  s.start('Initializing your project...');
   await Promise.all(formattedFiles);
+  s.stop('Project initialized!');
 
-  info(``);
-  highlight(`Copying base assets...`);
+  s.start('Copying base assets...');
   await copyBaseAssets(projectName, toolbox);
+  s.stop('Base assets copied!');
 
   // check if npm option is set, otherwise set based on what the system is configure to use
   const packageManager = cliResults.flags.packageManager || getPackageManager(toolbox, cliResults);
 
   if (!options.noInstall && !flags.noInstall) {
-    info(``);
-    highlight(`Installing dependencies using ${packageManager}...`);
-    info(``);
-
+    s.start(`Installing dependencies using ${packageManager}...`);
     // install with yarn or npm i
     await system.spawn(`cd ${projectName} && ${packageManager} install --silent`, {
       shell: true,
       stdio: 'inherit'
     });
+    s.stop('Dependencies installed!');
 
-    info(``);
-    highlight(`Cleaning up your project...`);
-    info(``);
-
+    s.start(`Cleaning up your project...`);
     // format the files with prettier and eslint using installed packages.
     await system.spawn(`cd ${projectName} && ${packageManager} run format`, {
       shell: true,
       stdio: 'inherit'
     });
+    s.stop('Project files formatted!');
   } else {
     const runnerType = getPackageManagerRunnerX(toolbox, cliResults);
 
-    info(``);
-    highlight(`No installation found.`);
-    highlight(`Cleaning up your project using ${runnerType}...`);
-    info(``);
-
+    s.start(`No installation found.\nCleaning up your project using ${runnerType}...`);
     // Running prettier using global runners against the template.
     // Use --no-config to prevent using project's config (that may have plugins/dependencies)
     await system.spawn(`${runnerType} prettier "${projectName}/**/*.{json,js,jsx,ts,tsx}" --no-config --write`, {
       shell: true,
       stdio: 'inherit'
     });
+    s.stop('Project files formatted!');
   }
 
   if (!options.noGit && !flags.noGit) {
-    info(``);
-    highlight(`Initializing git...`);
-    info(``);
-
+    s.start(`Initializing git...`);
     // initialize git repo and add first commit
     await system.spawn(
       `cd ${projectName} && git init --quiet && git add . && git commit -m "Initial commit" -m "Generated by create-expo-stack 2.0.0." --quiet`,
@@ -80,11 +72,12 @@ export async function printOutput(
         stdio: 'inherit'
       }
     );
+    s.stop(`Git initialized!`);
   }
 
   //	check if packages includes package with name "supabase"
   if (cliResults.packages.some((pkg) => pkg.name === 'supabase')) {
-    success(`Success! 🎉 Now, here's what's next:`);
+    success(`\nSuccess! 🎉 Now, here's what's next:`);
     info(``);
     highlight('Head over to https://database.new to create a new Supabase project.');
     info(``);
@@ -98,7 +91,7 @@ export async function printOutput(
     success(`Once you're done, run the following to get started: `);
     info(``);
   } else if (cliResults.packages.some((pkg) => pkg.name === 'firebase')) {
-    success(`Success! 🎉 Now, here's what's next:`);
+    success(`\nSuccess! 🎉 Now, here's what's next:`);
     info(``);
     highlight('Head over to https://console.firebase.google.com/ to create a new Firebase project.');
     info(``);
@@ -113,37 +106,39 @@ export async function printOutput(
     success(`Once you're done, run the following to get started: `);
     info(``);
   } else {
-    success('Success! 🎉 Now, just run the following to get started: ');
+    success('\nSuccess! 🎉 Now, just run the following to get started: ');
     info(``);
   }
-  info(`cd ${projectName}`);
+  let step = 1;
+  highlight(`${step}. cd ${projectName}`);
   if (packageManager === 'npm') {
-    if (options.noInstall) info('npm install');
+    if (options.noInstall) highlight(`${++step}. npm install`);
     if (stylingPackage.name === 'unistyles') {
-      info('npx expo prebuild --clean');
+      highlight(`${++step}. npx expo prebuild --clean`);
     }
-    info('npm run ios');
+    highlight(`${++step}. npm run ios`);
   } else if (packageManager === 'pnpm') {
-    if (options.noInstall) info('pnpm install');
+    if (options.noInstall) highlight(`${++step}. pnpm install`);
     if (stylingPackage.name === 'unistyles') {
-      info('pnpm expo prebuild --clean');
+      highlight(`${++step}. pnpm expo prebuild --clean`);
     }
-    info('pnpm run ios');
+    highlight(`${++step}. pnpm run ios`);
   } else if (packageManager === 'bun') {
-    if (options.noInstall) info('bun install');
+    if (options.noInstall) highlight(`${++step}. bun install`);
     if (stylingPackage.name === 'unistyles') {
-      info('bun expo prebuild --clean');
+      highlight(`${++step}. bun expo prebuild --clean`);
     }
-    info('bun run ios');
+    highlight(`${++step}. bun run ios`);
   } else {
-    if (options.noInstall) info('yarn install');
+    if (options.noInstall) highlight(`${++step}. yarn install`);
     if (stylingPackage.name === 'unistyles') {
-      info('yarn expo prebuild --clean');
+      highlight(`${++step}. yarn expo prebuild --clean`);
     }
-    info('yarn ios');
+    highlight(`${++step}. yarn ios`);
   }
   info(``);
 
-  success(`If you frequently use create expo stack, please consider sponsoring the project ❤️`);
-  highlight(`https://github.com/sponsors/danstepanov`);
+  outro(
+    'If you frequently use create expo stack, please consider sponsoring the project ❤️\n- https://github.com/sponsors/danstepanov'
+  );
 }