From 0983fc1746cea5553d3587e9af5750abca8dda48 Mon Sep 17 00:00:00 2001 From: Aman Varshney Date: Fri, 14 Feb 2025 11:54:20 +0530 Subject: [PATCH] feat(cli): display pre-selected flags before prompts --- .changeset/sour-trees-boil.md | 5 + apps/cli/src/helpers/create-project.ts | 4 +- apps/cli/src/index.ts | 145 +++++++++++++++---------- 3 files changed, 97 insertions(+), 57 deletions(-) create mode 100644 .changeset/sour-trees-boil.md diff --git a/.changeset/sour-trees-boil.md b/.changeset/sour-trees-boil.md new file mode 100644 index 0000000..294085a --- /dev/null +++ b/.changeset/sour-trees-boil.md @@ -0,0 +1,5 @@ +--- +"create-better-t-stack": minor +--- + +feat(cli): display pre-selected flags before prompts diff --git a/apps/cli/src/helpers/create-project.ts b/apps/cli/src/helpers/create-project.ts index e874241..bab412e 100644 --- a/apps/cli/src/helpers/create-project.ts +++ b/apps/cli/src/helpers/create-project.ts @@ -64,10 +64,10 @@ export async function createProject(options: ProjectConfig) { if (shouldInstallDeps) { s.start(`šŸ“¦ Installing dependencies using ${options.packageManager}...`); try { - await $({ + const { stdout } = await $({ cwd: projectDir, - stdio: "inherit", })`${options.packageManager} install`; + log.step(stdout); s.stop("āœ… Dependencies installed successfully"); } catch (error) { s.stop("Failed to install dependencies"); diff --git a/apps/cli/src/index.ts b/apps/cli/src/index.ts index 2aa4f89..962e07a 100644 --- a/apps/cli/src/index.ts +++ b/apps/cli/src/index.ts @@ -40,6 +40,7 @@ async function gatherConfig( const result = await group( { projectName: async () => { + if (flags.projectName) return flags.projectName; let isValid = false; let projectName: string | symbol = ""; let defaultName = DEFAULT_CONFIG.projectName; @@ -83,8 +84,9 @@ async function gatherConfig( return projectName as string; }, database: () => - !flags.database - ? select({ + flags.database !== undefined + ? Promise.resolve(flags.database) + : select({ message: "šŸ’¾ Which database would you like to use?", options: [ { @@ -98,18 +100,19 @@ async function gatherConfig( hint: "Traditional relational database", }, ], - }) - : Promise.resolve(flags.database), + }), auth: () => - flags.auth === undefined - ? confirm({ + flags.auth !== undefined + ? Promise.resolve(flags.auth) + : confirm({ message: "šŸ” Would you like to add authentication with Better-Auth?", - }) - : Promise.resolve(flags.auth), + initialValue: DEFAULT_CONFIG.auth, + }), features: () => - !flags.features - ? multiselect({ + flags.features !== undefined + ? Promise.resolve(flags.features) + : multiselect({ message: "āœØ Which features would you like to add?", options: [ { @@ -128,16 +131,18 @@ async function gatherConfig( hint: "Search engine optimization configuration", }, ], - }) - : Promise.resolve(flags.features), + }), git: () => - flags.git !== false - ? confirm({ + flags.git !== undefined + ? Promise.resolve(flags.git) + : confirm({ message: "šŸ—ƒļø Initialize a new git repository?", - initialValue: true, - }) - : Promise.resolve(false), + initialValue: DEFAULT_CONFIG.git, + }), packageManager: async () => { + if (flags.packageManager !== undefined) { + return flags.packageManager; + } const detectedPackageManager = getUserPkgManager(); const useDetected = await confirm({ @@ -179,15 +184,52 @@ async function gatherConfig( ); return { - projectName: result.projectName ?? "", - database: result.database ?? "libsql", - auth: result.auth ?? true, - features: result.features ?? [], - git: result.git ?? true, - packageManager: result.packageManager ?? "npm", + projectName: result.projectName ?? DEFAULT_CONFIG.projectName, + database: result.database ?? DEFAULT_CONFIG.database, + auth: result.auth ?? DEFAULT_CONFIG.auth, + features: result.features ?? DEFAULT_CONFIG.features, + git: result.git ?? DEFAULT_CONFIG.git, + packageManager: result.packageManager ?? DEFAULT_CONFIG.packageManager, }; } +function displayConfig(config: Partial) { + const configDisplay = []; + + if (config.projectName) { + configDisplay.push( + `${chalk.blue("šŸ“ Project Name: ")}${chalk.green(config.projectName)}`, + ); + } + if (config.database) { + configDisplay.push( + `${chalk.blue("šŸ’¾ Database: ")}${chalk.yellow(config.database)}`, + ); + } + if (config.auth !== undefined) { + configDisplay.push( + `${chalk.blue("šŸ” Authentication: ")}${chalk.cyan(config.auth)}`, + ); + } + if (config.features?.length) { + configDisplay.push( + `${chalk.blue("āœØ Features: ")}${config.features.map((f) => chalk.magenta(f)).join(", ")}`, + ); + } + if (config.git !== undefined) { + configDisplay.push( + `${chalk.blue("šŸ—ƒļø Git Init: ")}${chalk.cyan(config.git)}`, + ); + } + if (config.packageManager) { + configDisplay.push( + `${chalk.blue("šŸ“¦ Package Manager: ")}${chalk.yellow(config.packageManager)}`, + ); + } + + return configDisplay.join("\n"); +} + async function main() { const s = spinner(); try { @@ -217,18 +259,30 @@ async function main() { const projectDirectory = program.args[0]; const flagConfig: Partial = { - projectName: projectDirectory, - database: options.database as ProjectDatabase, - auth: options.auth, - packageManager: options.packageManager as PackageManager, - git: options.git ?? true, - features: [ - ...(options.docker ? ["docker"] : []), - ...(options.githubActions ? ["github-actions"] : []), - ...(options.seo ? ["SEO"] : []), - ] as ProjectFeature[], + projectName: projectDirectory || undefined, + database: options.database as ProjectDatabase | undefined, + auth: "auth" in options ? options.auth : undefined, + packageManager: options.packageManager as PackageManager | undefined, + git: "git" in options ? options.git : undefined, + features: + options.docker || options.githubActions || options.seo + ? ([ + ...(options.docker ? ["docker"] : []), + ...(options.githubActions ? ["github-actions"] : []), + ...(options.seo ? ["SEO"] : []), + ] as ProjectFeature[]) + : undefined, }; + if ( + !options.yes && + Object.values(flagConfig).some((v) => v !== undefined) + ) { + log.message(chalk.bold("\nšŸŽÆ Using these pre-selected options:")); + log.message(displayConfig(flagConfig)); + log.message(""); + } + const config = options.yes ? { ...DEFAULT_CONFIG, @@ -248,28 +302,9 @@ async function main() { : await gatherConfig(flagConfig); if (options.yes) { - s.start("Using default configuration"); - const colorizedConfig = { - projectName: chalk.green(config.projectName), - database: chalk.yellow(config.database), - auth: chalk.cyan(config.auth), - features: config.features.map((feature) => chalk.magenta(feature)), - git: chalk.cyan(config.git), - }; - - log.message( - `${chalk.blue("šŸ“ Project Name: ")}${ - colorizedConfig.projectName - }\n${chalk.blue("šŸ’¾ Database: ")}${colorizedConfig.database}\n${chalk.blue( - "šŸ” Authentication: ", - )}${colorizedConfig.auth}\n${chalk.blue("āœØ Features: ")}${ - colorizedConfig.features.length - ? colorizedConfig.features.join(", ") - : chalk.gray("none") - }\n${chalk.blue("šŸ—ƒļø Git Init: ")}${colorizedConfig.git}\n`, - ); - - s.stop("Configuration loaded"); + log.message(chalk.bold("\nšŸŽÆ Using these default options:")); + log.message(displayConfig(config)); + log.message(""); } await createProject(config);