From d4fd41a426933e7e13b9501b9d64c260fe9e95e7 Mon Sep 17 00:00:00 2001 From: winches <329487092@qq.com> Date: Tue, 23 Apr 2024 21:08:10 +0800 Subject: [PATCH] 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 --------- Co-authored-by: Junior Garcia --- src/actions/init-action.ts | 19 +++++++++-- src/helpers/output-info.ts | 67 +++++++++++++++++++++++++------------- src/prompts/index.ts | 6 ++-- 3 files changed, 64 insertions(+), 28 deletions(-) diff --git a/src/actions/init-action.ts b/src/actions/init-action.ts index dad2f97..ef6a42b 100644 --- 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['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 index 3c46d29..448c1cd 100644 --- 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 index a2a270a..44cee8a 100644 --- 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 );