create-renoun 1.0.0 → 1.2.0

package/dist/index.mjs

@@ -1,52 +1,14 @@
 #!/usr/bin/env node
+import { installPackage } from '@antfu/install-pkg';
+import { log, text, isCancel, confirm, spinner, intro, select, outro, cancel } from '@clack/prompts';
 import { readFileSync, existsSync, mkdirSync, writeFileSync, rmdirSync, createWriteStream } from 'node:fs';
 import __node_cjsPath, { resolve, basename, join } from 'node:path';
-import chalk from 'chalk';
+import color from 'picocolors';
+import terminalLink from 'terminal-link';
 import { Readable } from 'node:stream';
 import { pipeline } from 'node:stream/promises';
 import { homedir } from 'node:os';
-import process$1, { stdin, stdout } from 'node:process';
-import { createInterface } from 'node:readline/promises';
 import __node_cjsUrl from 'node:url';
-import { emitKeypressEvents, moveCursor, clearLine } from 'node:readline';
-
-class Log {
-    static{
-        this.base = 'renoun: ';
-    }
-    static{
-        this.offset = Log.base.replace(/./g, ' ');
-    }
-    static info(message) {
-        const finalMessage = chalk.rgb(205, 237, 255).bold(Log.base) + message;
-        console.log(finalMessage.replace(/\n/g, `\n${Log.offset}`));
-    }
-    static error(message) {
-        const finalMessage = chalk.rgb(237, 35, 0).bold(Log.base) + chalk.rgb(225, 205, 205)(message);
-        console.error(finalMessage.replace(/\n/g, `\n${Log.offset}`));
-    }
-    static success(message) {
-        const finalMessage = chalk.rgb(0, 204, 102).bold(Log.base) + message;
-        console.log(finalMessage.replace(/\n/g, `\n${Log.offset}`));
-    }
-    static warning(message) {
-        console.warn(chalk.rgb(255, 153, 51).bold(Log.base) + chalk.rgb(225, 200, 190)(message));
-    }
-}
-async function askQuestion(question) {
-    const readline = createInterface({
-        input: stdin,
-        output: stdout,
-        terminal: true
-    });
-    const answer = await readline.question(`${chalk.rgb(205, 237, 255).bold(Log.base)}${question}`);
-    readline.close();
-    return answer;
-}
-async function askYesNo(question, { defaultYes = true, description } = {}) {
-    const answer = await askQuestion(`${question} [${defaultYes ? 'Y/n' : 'y/N'}] ${description ? chalk.dim(description) : ''}`);
-    return answer === '' ? defaultYes : answer.toLowerCase().startsWith('y');
-}
 
 const __filename$1 = __node_cjsUrl.fileURLToPath(import.meta.url);
 const __dirname$1 = __node_cjsPath.dirname(__filename$1);
@@ -73,7 +35,7 @@ if (!existsSync(cacheDirectory)) {
         return data.latest;
     } catch (error) {
         if (error instanceof Error) {
-            Log.error(`Error fetching package version: ${error}`);
+            log.error(`Error fetching package version: ${error}`);
         }
         clearTimeout(timeoutId);
         return packageJson$1.version;
@@ -118,56 +80,90 @@ function shouldRefreshCache() {
  */ async function fetchExample(exampleSlug, message = '') {
     let workingDirectory = process.cwd();
     const directoryPath = `examples/${exampleSlug}`;
-    const directoryName = chalk.bold(basename(directoryPath));
+    const directoryName = color.bold(basename(directoryPath));
     const postMessage = ` Press enter to proceed or specify a different directory: `;
-    const userBaseDirectory = await askQuestion(message ? `${message}${postMessage}` : `Download the ${chalk.bold(directoryName)} example to ${chalk.bold(join(workingDirectory, exampleSlug))}}?${postMessage}`);
+    const userBaseDirectory = await text({
+        message: message ? `${message}${postMessage}` : `Download the ${directoryName} example to ${color.bold(join(workingDirectory, exampleSlug))}?${postMessage}`,
+        placeholder: exampleSlug
+    });
+    if (isCancel(userBaseDirectory)) {
+        throw new Error('Example download cancelled.');
+    }
     if (userBaseDirectory) {
         workingDirectory = join(workingDirectory, userBaseDirectory);
     } else {
         workingDirectory = join(workingDirectory, exampleSlug);
     }
     if (existsSync(workingDirectory)) {
-        const isYes = await askYesNo(`The directory ${chalk.bold(workingDirectory)} already exists. Do you want to overwrite it?`, {
-            defaultYes: false
+        const isYes = await confirm({
+            message: `The directory ${color.bold(workingDirectory)} already exists. Do you want to overwrite it?`,
+            initialValue: false
         });
+        if (isCancel(isYes)) {
+            log.warn('Overwrite confirmation cancelled.');
+            throw new Error('User cancelled the overwrite.');
+        }
         if (isYes) {
-            rmdirSync(workingDirectory, {
-                recursive: true
-            });
-            mkdirSync(workingDirectory, {
-                recursive: true
-            });
+            try {
+                rmdirSync(workingDirectory, {
+                    recursive: true
+                });
+                mkdirSync(workingDirectory, {
+                    recursive: true
+                });
+                log.info(`Overwritten the directory ${color.bold(workingDirectory)}.`);
+            } catch (error) {
+                if (error instanceof Error) {
+                    throw new Error(`Failed to overwrite directory ${workingDirectory}: ${error.message}`);
+                }
+            }
         } else {
-            Log.info(`Skipping download of ${directoryName} example to ${chalk.bold(workingDirectory)}.`);
-            return;
+            log.info(`Skipping download of ${directoryName} example to ${color.bold(workingDirectory)}.`);
+            return false;
         }
     } else {
         mkdirSync(workingDirectory, {
             recursive: true
         });
     }
-    Log.info(`Downloading ${directoryName} example to ${chalk.bold(workingDirectory)}.`);
-    await fetchGitHubDirectory({
-        owner: 'souporserious',
-        repo: 'renoun',
-        branch: 'main',
-        basePath: '.',
-        directoryPath,
-        workingDirectory
-    });
+    log.info(`Downloading ${directoryName} example to ${color.bold(workingDirectory)}.`);
+    const loader = spinner();
+    loader.start('Fetching example files...');
+    try {
+        await fetchGitHubDirectory({
+            owner: 'souporserious',
+            repo: 'renoun',
+            branch: 'main',
+            basePath: '.',
+            directoryPath,
+            workingDirectory
+        });
+        loader.stop('Example files fetched successfully.');
+    } catch (error) {
+        log.error('Failed to fetch example files.');
+        throw error;
+    }
     const { detectPackageManager } = await import('@antfu/install-pkg');
-    const packageManager = await detectPackageManager(process.cwd());
-    await reformatPackageJson(workingDirectory);
+    const packageManager = await detectPackageManager(workingDirectory);
+    try {
+        await reformatPackageJson(workingDirectory);
+        loader.start('Reformatting package.json...');
+        loader.stop('package.json reformatted successfully.');
+    } catch (error) {
+        log.error('Failed to reformat package.json.');
+        throw error;
+    }
     writeFileSync(join(workingDirectory, '.gitignore'), '.next\nnode_modules\nout', 'utf-8');
-    const introInstallInstructions = workingDirectory === process.cwd() ? `Run` : `Change to the ${chalk.bold(userBaseDirectory ?? directoryName)} directory and run`;
-    Log.success(`Example ${chalk.bold(directoryName)} fetched and configured successfully! ${introInstallInstructions} ${chalk.bold(`${packageManager ?? 'npm'} install`)} to install the dependencies and get started.`);
+    const introInstallInstructions = workingDirectory === process.cwd() ? `Run ${color.bold(`${packageManager ?? 'npm'} install`)} to install the dependencies and get started.` : `Change to the ${color.bold(directoryName)} directory and run ${color.bold(`${packageManager ?? 'npm'} install`)} to install the dependencies and get started.`;
+    log.success(`Example ${color.bold(directoryName)} fetched and configured successfully! ${introInstallInstructions}`);
+    return true;
 }
 /** Fetches the contents of a directory in a GitHub repository and downloads them to the local file system. */ async function fetchGitHubDirectory({ owner, repo, branch, directoryPath, workingDirectory, basePath }) {
     const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${directoryPath}?ref=${branch}`;
     const response = await fetch(apiUrl);
-    const directoryName = chalk.bold(basename(directoryPath));
+    const directoryName = color.bold(basename(directoryPath));
     if (!response.ok) {
-        throw new Error(`Failed to fetch ${chalk.red(directoryName)} at ${apiUrl}: ${response.statusText}`);
+        throw new Error(`Failed to fetch ${directoryName} from ${apiUrl}: ${response.statusText}`);
     }
     const items = await response.json();
     for (let item of items){
@@ -253,79 +249,6 @@ const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
     return isVersionLessThan(packageJson.version, currentVersion);
 }
 
-async function pickExample({ options }) {
-    const readline = createInterface({
-        input: process$1.stdin,
-        output: process$1.stdout,
-        terminal: true
-    });
-    emitKeypressEvents(process$1.stdin);
-    if (process$1.stdin.isTTY) {
-        process$1.stdin.setRawMode(true);
-    }
-    let selectedIndex = 0;
-    let lastRenderLineCount = 0;
-    function render() {
-        // Move the cursor back up to where we last printed, then clear those lines
-        for(let index = 0; index < lastRenderLineCount; index++){
-            moveCursor(process$1.stdout, 0, -1);
-            clearLine(process$1.stdout, 0);
-        }
-        const lines = [];
-        lines.push(chalk.bold('\nSelect an example below to clone and get started:\n'));
-        for(let index = 0; index < options.length; index++){
-            if (index === selectedIndex) {
-                lines.push(chalk.cyan(`> ${options[index]}`));
-            } else {
-                lines.push(`  ${options[index]}`);
-            }
-        }
-        lines.push(chalk.dim('\nUse ↑ / ↓ to move, Enter to select, Ctrl+C to exit.'));
-        const output = lines.join('\n');
-        process$1.stdout.write(output + '\n');
-        const newlineCount = (output.match(/\n/g) || []).length;
-        lastRenderLineCount = newlineCount + 1;
-    }
-    render();
-    return new Promise((resolve, reject)=>{
-        function onKeyPress(_string, key) {
-            if (!key) return;
-            switch(key.name){
-                case 'up':
-                    selectedIndex = (selectedIndex - 1 + options.length) % options.length;
-                    render();
-                    break;
-                case 'down':
-                    selectedIndex = (selectedIndex + 1) % options.length;
-                    render();
-                    break;
-                case 'return':
-                    cleanup();
-                    resolve(options[selectedIndex]);
-                    break;
-                default:
-                    if (key.ctrl && key.name === 'c') {
-                        cleanup();
-                        reject(new Error('User aborted'));
-                    }
-            }
-        }
-        function cleanup() {
-            if (process$1.stdin.isTTY) {
-                process$1.stdin.setRawMode(false);
-            }
-            process$1.stdin.off('keypress', onKeyPress);
-            readline.close();
-            // Clear the picker on exit
-            for(let index = 0; index < lastRenderLineCount; index++){
-                moveCursor(process$1.stdout, 0, -1);
-                clearLine(process$1.stdout, 0);
-            }
-        }
-        process$1.stdin.on('keypress', onKeyPress);
-    });
-}
-
 const states = {
   INITIAL_STATE: 'initialState',
   CHECK_OUTDATED: 'checkOutdated',
@@ -343,8 +266,8 @@ async function start() {
   const context = { message: '' };
   let currentState = states.INITIAL_STATE;
 
-  console.log(
-    `Welcome to ${chalk.bold(chalk.yellow('renoun'))}!\nThe Documentation Toolkit for React`
+  intro(
+    `${color.bgYellowBright(color.bold(color.black('renoun')))} The Documentation Toolkit for React`
   );
 
   while (
@@ -364,11 +287,8 @@ async function start() {
          */
         case states.CHECK_OUTDATED: {
           if (await isPackageOutdated('create-renoun')) {
-            const installCommand = chalk.bold('npm create renoun@latest');
-            Log.warning(
-              `A new version of ${chalk.bold(
-                'create-renoun'
-              )} is available. Please use the latest version by running ${installCommand}.`
+            log.warn(
+              `A new version of ${color.bold('create-renoun')} is available. Please use the latest version by running ${color.bold('npm create renoun@latest')}.`
             );
           }
           currentState = states.CHECK_EXAMPLE;
@@ -411,21 +331,37 @@ async function start() {
          * - After fetching, go directly to SUCCESS_STATE.
          */
         case states.PICK_EXAMPLE: {
-          const terminalLink = (await import('terminal-link')).default;
-          const example = await pickExample({
-            options: ['blog', 'design-system'],
+          const example = await select({
+            message: 'Choose an example below to get started:',
+            options: [
+              { value: 'blog', label: 'Blog' },
+              { value: 'design-system', label: 'Design System' },
+            ],
           });
+
+          if (isCancel(example)) {
+            context.message = 'Example selection cancelled.';
+            currentState = states.WARNING_STATE;
+            break
+          }
+
           const exampleLink = terminalLink(
             example,
             `https://github.com/souporserious/renoun/tree/main/examples/${example}`
           );
-          await fetchExample(
+          const fetched = await fetchExample(
             example,
-            `Download the ${exampleLink} example to ${chalk.bold(
-              join(process.cwd(), example)
-            )}?`
+            `Download the ${color.underline(
+              exampleLink
+            )} example to ${color.bold(join(process.cwd(), example))}?`
           );
-          currentState = states.SUCCESS_STATE;
+
+          if (fetched) {
+            currentState = states.SUCCESS_STATE;
+          } else {
+            context.message = `Example download exited. Please download an example or install renoun manually to continue.`;
+            currentState = states.WARNING_STATE;
+          }
           break
         }
 
@@ -435,14 +371,20 @@ async function start() {
          */
         case states.CHECK_RENOUN_INSTALLED: {
           if (!checkRenounInstalled()) {
-            const isYes = await askYesNo(
-              `The ${chalk.bold('renoun')} package is not installed. Would you like to install it now?`
-            );
+            const isYes = await confirm({
+              message: `The ${color.bold('renoun')} package is not installed. Would you like to install it now?`,
+            });
+
+            if (isCancel(isYes)) {
+              context.message = `Installation cancelled. Please install renoun manually.`;
+              currentState = states.WARNING_STATE;
+              break
+            }
 
             if (isYes) {
               currentState = states.INSTALL_RENOUN;
             } else {
-              context.message = `Please install the ${chalk.bold('renoun')} package before continuing.`;
+              context.message = `Please install the ${color.bold('renoun')} package before continuing.`;
               currentState = states.WARNING_STATE;
             }
           } else {
@@ -471,11 +413,11 @@ async function start() {
   }
 
   if (currentState === states.SUCCESS_STATE) {
-    Log.success('renoun configured successfully!');
+    outro('renoun configured successfully!');
   } else if (currentState === states.WARNING_STATE) {
-    Log.warning(context.message);
+    log.warn(context.message);
   } else {
-    Log.error(context.message);
+    cancel(context.message);
     process.exit(1);
   }
 }
@@ -497,15 +439,16 @@ function checkRenounInstalled() {
  * Install renoun using @antfu/install-pkg
  */
 async function installRenoun() {
-  const { installPackage } = await import('@antfu/install-pkg');
-  Log.info(`Installing ${chalk.bold('renoun')}...`);
+  const loader = spinner();
+
+  loader.start(`Installing ${color.bold('renoun')}...`);
 
   try {
     await installPackage(['renoun']);
-    Log.success('renoun package installed successfully!');
+    loader.stop(`${color.bold('renoun')} installed successfully!`);
   } catch (error) {
     if (error instanceof Error) {
-      throw new Error(`Installing renoun failed: ${error.message}`)
+      throw new Error(`Failed to install renoun: ${error.message}`)
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-renoun",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "author": "Travis Arnold",
   "license": "AGPL-3.0-or-later",
   "repository": {
@@ -16,12 +16,13 @@
   ],
   "bin": "./dist/index.mjs",
   "devDependencies": {
-    "bunchee": "^6.3.2"
+    "bunchee": "^6.5.0"
   },
   "dependencies": {
     "@antfu/install-pkg": "^1.0.0",
-    "chalk": "^5.4.1",
-    "terminal-link": "^3.0.0"
+    "@clack/prompts": "^0.10.0",
+    "picocolors": "^1.1.1",
+    "terminal-link": "^4.0.0"
   },
   "scripts": {
     "build": "bunchee",