feat: init command add guide (#36)

* feat: init command add guide * feat: optimize output box * feat: optimize output param * feat: update typo Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
nextui-org · Apr 23, 2024 · d4fd41a · d4fd41a
1 parent be1cb39
commit d4fd41a
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 28 deletions.
diff --git a/src/actions/init-action.ts b/src/actions/init-action.ts
@@ -5,6 +5,7 @@ import {oraPromise} from 'ora';
 
 import {downloadTemplate} from '@helpers/fetch';
 import {Logger} from '@helpers/logger';
+import {outputBox} from '@helpers/output-info';
 
 import {ROOT} from '../../src/constants/path';
 import {
@@ -22,6 +23,11 @@ export interface InitActionOptions {
   package?: 'npm' | 'yarn' | 'pnpm';
 }
 
+const templatesMap: Record<Required<InitActionOptions>['template'], string> = {
+  app: APP_NAME,
+  pages: PAGES_NAME
+};
+
 export async function initAction(projectName: string, options: InitActionOptions) {
   let {package: packageName, template} = options;
 
@@ -61,9 +67,9 @@ export async function initAction(projectName: string, options: InitActionOptions
   }
 
   if (!projectName) {
-    const templateTitle = template === 'app' ? APP_NAME : PAGES_NAME;
+    const templateTitle = templatesMap[template!];
 
-    projectName = await getText('Enter the project name', templateTitle);
+    projectName = await getText('New project name: ', templateTitle);
   }
 
   /** ======================== Generate template ======================== */
@@ -75,6 +81,15 @@ export async function initAction(projectName: string, options: InitActionOptions
     projectName && renameTemplate(PAGES_DIR, projectName);
   }
 
+  /** ======================== Add guide ======================== */
+  Logger.newLine();
+  outputBox({
+    align: 'left',
+    padding: 1,
+    text: `cd ${chalk.cyanBright(projectName)}\n${chalk.cyanBright('npm')} install`,
+    title: 'Next steps'
+  });
+
   process.exit(0);
 }
 

diff --git a/src/helpers/output-info.ts b/src/helpers/output-info.ts
@@ -178,8 +178,10 @@ export function outputInfo() {
  * @param title
  * @param borderStyle
  * @param padding
+ * @param align
  */
 export function outputBox({
+  align = 'center',
   borderStyle = 'round',
   center = false,
   color,
@@ -195,6 +197,7 @@ export function outputBox({
   title?: string;
   borderStyle?: keyof typeof boxRound;
   padding?: number;
+  align?: 'left' | 'center' | 'right';
 }) {
   const rounded = boxRound[borderStyle];
   const mergedRounded = color
@@ -226,22 +229,30 @@ export function outputBox({
   // Update the titleHeaderLength
   titleHeaderLength = maxLength - titleLength;
 
-  const boxHeaderContent = title
-    ? `${rounded.horizontal
-        .padEnd(Math.floor(titleHeaderLength / 2) - 1, rounded.horizontal)
-        .replaceAll(rounded.horizontal, mergedRounded.horizontal)} ${title} ${rounded.horizontal
-        .padEnd(Math.ceil(titleHeaderLength / 2) - 1, rounded.horizontal)
-        .replaceAll(rounded.horizontal, mergedRounded.horizontal)}`
-    : rounded.horizontal
-        .padEnd(maxLength, rounded.horizontal)
-        .replaceAll(rounded.horizontal, mergedRounded.horizontal);
+  const boxHeaderContent = (() => {
+    if (title) {
+      if (align === 'center') {
+        const spaceFir = Math.floor(titleHeaderLength / 2) - 1;
+        const spaceSec = Math.ceil(titleHeaderLength / 2) - 1;
+
+        const padFir = spaceFir > 0 ? mergedRounded.horizontal.repeat(spaceFir) : '';
+        const padSec = spaceSec > 0 ? mergedRounded.horizontal.repeat(spaceSec) : '';
+
+        return `${padFir} ${title} ${padSec}`;
+      } else if (align === 'left') {
+        return ` ${title} ${mergedRounded.horizontal.repeat(titleHeaderLength - 2)}`;
+      } else {
+        return `${mergedRounded.horizontal.repeat(titleHeaderLength - 2)} ${title} `;
+      }
+    }
+
+    return mergedRounded.horizontal.repeat(maxLength);
+  })();
 
   const boxHeader = mergedRounded.topLeft + boxHeaderContent + mergedRounded.topRight;
   const boxFooter =
     mergedRounded.bottomLeft +
-    rounded.horizontal
-      .padEnd(maxLength, rounded.horizontal)
-      .replaceAll(rounded.horizontal, mergedRounded.horizontal) +
+    mergedRounded.horizontal.repeat(maxLength) +
     mergedRounded.bottomRight;
 
   let boxContent = contentArr.reduce((acc, cur) => {
@@ -259,17 +270,27 @@ export function outputBox({
     // Over 2 cause one vertical line == 2 spaces
     // paddingLength = Math.floor(Math.max(paddingLength, spaceFir, spaceSec) / 2);
 
-    mergedPadding
-      ? acc.push(
-          `${mergedRounded.vertical}${spaceLength ? `${padFir}${cur}${padSec}` : cur}${
-            mergedRounded.vertical
-          }`
-        )
-      : acc.push(
-          `${mergedRounded.vertical}${spaceLength > 0 ? `${cur}${pad}` : cur}${
-            mergedRounded.vertical
-          }`
-        );
+    if (center) {
+      acc.push(
+        `${mergedRounded.vertical}${spaceLength ? `${padFir}${cur}${padSec}` : cur}${
+          mergedRounded.vertical
+        }`
+      );
+    } else if (padding) {
+      const endLen = spaceLength - paddingLength * 2;
+
+      acc.push(
+        `${mergedRounded.vertical}${' '.repeat(paddingLength * 2)}${cur}${' '.repeat(endLen)}${
+          mergedRounded.vertical
+        }`
+      );
+    } else {
+      acc.push(
+        `${mergedRounded.vertical}${spaceLength > 0 ? `${cur}${pad}` : cur}${
+          mergedRounded.vertical
+        }`
+      );
+    }
 
     return acc;
   }, [] as string[]);

diff --git a/src/prompts/index.ts b/src/prompts/index.ts
@@ -10,13 +10,13 @@ const defaultPromptOptions: prompts.Options = {
   }
 };
 
-export async function getText(message: string, initial: string) {
+export async function getText(message: string, initial?: string) {
   const result = await prompts(
     {
-      initial,
       message,
       name: 'value',
-      type: 'text'
+      type: 'text',
+      ...(initial ? {initial} : {})
     },
     defaultPromptOptions
   );