feat: add new version show

src/actions/list-action.ts

@@ -32,7 +32,7 @@ export async function listAction(options: ListActionOptions) {
     }
 
     /** ======================== Output the components ======================== */
-    outputComponents(components);
+    current ? outputComponents(components) : outputComponents(components, 'list');
   } catch (error) {
     Logger.prefix('error', `Error occurred while listing the components: ${error}`);
   }

src/constants/component.ts

@@ -320,12 +320,14 @@ export const nextUIComponents = [
   }
 ];
 
-export const orderNextUIComponentKeys = ['package', 'version', 'status', 'docs'];
+export const orderNextUIComponentKeys = ['package', 'version', 'status', 'docs'] as const;
 
 export const colorNextUIComponentKeys = ['package', 'version', 'status'];
 
 export type NextUIComponentStatus = 'stable' | 'updated' | 'newPost';
 
-export type NextUIComponents = (Omit<(typeof nextUIComponents)[0], 'status'> & {
+type NextUIComponent = (typeof nextUIComponents)[0];
+
+export type NextUIComponents = (Omit<NextUIComponent, 'status'> & {
   status: NextUIComponentStatus;
 })[];

src/helpers/output-info.ts

@@ -1,3 +1,5 @@
+import type { CommandName } from './type';
+
 import chalk from 'chalk';
 
 import {
@@ -24,9 +26,14 @@ const padEnd = `${space}${rounded.v}${space}`;
 /**
  * Output the components information e.g. status, description, version, etc.
  * @param components
+ * @param commandName
  * @param warnError
  */
-export function outputComponents(components: NextUIComponents, warnError = true) {
+export function outputComponents(
+  components: NextUIComponents,
+  commandName?: CommandName,
+  warnError = true
+) {
   if (!components.length) {
     if (warnError) {
       Logger.prefix('warn', 'No installed NextUI components found');
@@ -49,7 +56,9 @@ export function outputComponents(components: NextUIComponents, warnError = true)
       // Align the length of the version
       componentKeyLengthMap[key] = Math.max(
         componentKeyLengthMap[key],
-        key === 'version' ? 'version'.length : String(component[key]).length
+        key === 'version'
+          ? Math.max(String(component[key]).length, 'version'.length)
+          : String(component[key]).length
       );
     }
   }
@@ -60,6 +69,22 @@ export function outputComponents(components: NextUIComponents, warnError = true)
     for (const key of orderNextUIComponentKeys) {
       let value = component[key].padEnd(componentKeyLengthMap[key]);
 
+      /** ======================== Replace version to new version ======================== */
+      if (commandName !== 'list' && key === 'version') {
+        // Filter list command cause it will list all the latest components
+        const currentVersion = value.match(/([\d.]+)\snew:/)?.[1];
+        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('latest', chalk.magentaBright.underline('latest'));
+        } else if (newVersion) {
+          value = value.replace(newVersion, chalk.magentaBright.underline(newVersion));
+        }
+      }
+
+      /** ======================== Change the color according to different status ======================== */
       if (component.status === 'stable' && colorNextUIComponentKeys.includes(key)) {
         value = chalk.greenBright(value);
       } else if (component.status === 'newPost') {

src/helpers/package.ts

@@ -22,8 +22,18 @@ export async function getPackageInfo(packagePath: string) {
   const allDependencies = { ...devDependencies, ...dependencies };
   const dependenciesKeys = new Set(Object.keys(allDependencies));
 
-  const currentComponents = nextUIComponents.filter((component) =>
-    dependenciesKeys.has(component.package)
+  const currentComponents = (nextUIComponents as unknown as NextUIComponents).filter(
+    (component) => {
+      if (dependenciesKeys.has(component.package)) {
+        const currentVersion = allDependencies[component.package];
+
+        component.version = `${currentVersion} new: ${component.version}`;
+
+        return true;
+      }
+
+      return false;
+    }
   ) as NextUIComponents;
 
   return {

src/helpers/type.ts

@@ -7,3 +7,9 @@ export type PascalCase<T extends string> = T extends `${infer F}-${infer R}`
   : Capitalize<T>;
 
 export type SAFE_ANY = any;
+
+export type AppendKeyValue<T extends SAFE_ANY, K extends keyof any, V extends SAFE_ANY> = {
+  [P in keyof T | K]: P extends keyof T ? T[P] : P extends K ? V : never;
+};
+
+export type CommandName = 'init' | 'list' | 'env' | 'upgrade' | 'remove' | 'add';