fix: output component lose alignment (#54)

nextui-org · Apr 25, 2024 · b84f009 · b84f009
1 parent 10a6f56
commit b84f009
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 20 deletions.
diff --git a/src/helpers/output-info.ts b/src/helpers/output-info.ts
@@ -11,10 +11,10 @@ import {
 } from 'src/constants/component';
 
 import {Logger} from './logger';
-import {PasCalCase} from './utils';
+import {PasCalCase, fillAnsiLength, strip} from './utils';
 
 // eslint-disable-next-line no-control-regex
-const colorMatchRegex = /\u001b\[[\d;]+m/g;
+export const colorMatchRegex = /\u001b\[[\d;]+m/g;
 
 const rounded = boxRound.round;
 const space = '   ';
@@ -46,10 +46,11 @@ export function outputComponents({
     return;
   }
 
-  const componentKeyLengthMap: Record<keyof NextUIComponent, number> = {
+  const componentKeyLengthMap: Record<keyof NextUIComponent | 'originVersion', number> = {
     description: 0,
     docs: 0,
     name: 0,
+    originVersion: 0,
     package: 0,
     status: 0,
     style: 0,
@@ -58,21 +59,37 @@ export function outputComponents({
 
   for (const component of components) {
     for (const key in component) {
-      // Align the length of the version
-      componentKeyLengthMap[key] = Math.max(
-        componentKeyLengthMap[key],
-        key === 'version'
-          ? Math.max(String(component[key]).length, 'version'.length)
-          : String(component[key]).length
-      );
+      const str = String(component[key]);
+
+      if (key === 'version') {
+        const newVersion = str.match(/new:\s([\d.]+)/)?.[1];
+        const currentVersion = str.match(/([\d.]+)\snew:/)?.[1];
+
+        const value = strip(generateComponentOutputVersion(currentVersion!, newVersion!));
+
+        // Align the length of the version
+        componentKeyLengthMap[key] = Math.max(
+          componentKeyLengthMap[key],
+          Math.max(value.length, 'version'.length)
+        );
+        // Record origin version length
+        componentKeyLengthMap.originVersion = Math.max(
+          componentKeyLengthMap.originVersion,
+          currentVersion!.length
+        );
+
+        continue;
+      }
+
+      componentKeyLengthMap[key] = Math.max(componentKeyLengthMap[key], str.length);
     }
   }
 
   let transformComponentsOutput = components.reduce((acc, component) => {
     let outputData = padStart;
 
     for (const key of orderNextUIComponentKeys) {
-      let value = component[key].padEnd(componentKeyLengthMap[key]);
+      let value = fillAnsiLength(component[key], componentKeyLengthMap[key]);
 
       /** ======================== Replace version to new version ======================== */
       if (commandName !== 'list' && key === 'version') {
@@ -81,17 +98,18 @@ export function outputComponents({
         const newVersion = value.match(/new:\s([\d.]+)/)?.[1];
 
         if (currentVersion === newVersion) {
-          value = value.replace(/\snew:\s([\d.]+)/, '');
-          value = `${value} 🚀latest`.padEnd(componentKeyLengthMap[key]);
+          value = value.replace(/\snew:\s[\d.]+(\s+)?/, '');
+          value = fillAnsiLength(
+            `${fillAnsiLength(value, componentKeyLengthMap.originVersion)} 🚀latest`,
+            componentKeyLengthMap[key]
+          );
           value = value.replace('latest', chalk.magentaBright.underline('latest'));
         } else if (newVersion) {
-          value = `${chalk.white(`${currentVersion} ->`)} ${chalk.yellowBright(
-            `${newVersion} (new)`
-          )}`;
-
-          componentKeyLengthMap[key] = Math.max(
-            // eslint-disable-next-line no-control-regex
-            value.replace(/(\u001b\[\d+m)/g, '').length,
+          value = fillAnsiLength(
+            generateComponentOutputVersion(
+              fillAnsiLength(currentVersion!, componentKeyLengthMap.originVersion),
+              newVersion
+            ),
             componentKeyLengthMap[key]
           );
         }
@@ -311,3 +329,7 @@ export function outputBox({
 
   return boxContent.join('\n');
 }
+
+function generateComponentOutputVersion(currentVersion: string, newVersion: string) {
+  return `${chalk.white(`${currentVersion} ->`)} ${chalk.yellowBright(`${newVersion} (new)`)}`;
+}
diff --git a/src/helpers/utils.ts b/src/helpers/utils.ts
@@ -7,6 +7,7 @@ import fg, {type Options} from 'fast-glob';
 import {ROOT} from 'src/constants/path';
 
 import {Logger} from './logger';
+import {colorMatchRegex} from './output-info';
 
 export function getCommandDescAndLog(log: string, desc: string) {
   Logger.gradient(log);
@@ -152,3 +153,22 @@ export function getPackageManagerInfo<T extends Agent = Agent>(packageManager: T
 
   return packageManagerInfo[packageManager] as (typeof packageManagerInfo)[T];
 }
+
+/**
+ * @example transformPeerVersion('>=1.0.0') // '1.0.0'
+ * @param version
+ */
+export function transformPeerVersion(version: string) {
+  return version.replace(/\^|~|>=|<=|>|</g, '');
+}
+
+export function fillAnsiLength(str: string, length: number) {
+  const stripStr = str.replace(colorMatchRegex, '');
+  const fillSpace = length - stripStr.length > 0 ? ' '.repeat(length - stripStr.length) : '';
+
+  return `${str}${fillSpace}`;
+}
+
+export function strip(str: string) {
+  return str.replace(colorMatchRegex, '');
+}