fix: buggy rendering in component add command due to lots of items (#159)

* Use JSON5 for parsing tsconfig

* fix: buggy rendering in component add command due to lots of items

---------

Co-authored-by: Stefan E-K <[email protected]>

Author: iAverages

.changeset/tidy-ways-learn.md

@@ -0,0 +1,5 @@
+---
+"solidui-cli": patch
+---
+
+fix buggy rendering in component add command due to lots of items

packages/cli/package.json

@@ -46,13 +46,14 @@
     "@babel/core": "^7.25.2",
     "@babel/parser": "^7.25.6",
     "@babel/plugin-transform-typescript": "^7.25.2",
-    "@clack/prompts": "^0.7.0",
+    "@clack/prompts": "^0.9.0",
     "chalk": "^5.3.0",
-    "commander": "^12.1.0",
-    "execa": "^9.4.0",
-    "recast": "^0.23.9",
-    "ts-morph": "^18.0.0",
-    "tsconfig-paths": "^4.2.0"
+    "commander": "^11.0.0",
+    "detect-package-manager": "^3.0.1",
+    "json5": "^2.2.3",
+    "prompts": "^2.4.2",
+    "recast": "^0.23.4",
+    "ts-morph": "^20.0.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",

packages/cli/src/commands/add.ts

@@ -51,9 +51,10 @@ export const add = new Command()
         const prompts = await p.group(
           {
             components: () =>
-              p.multiselect<{ label: string; value: string }[], string>({
+              p.multiselect<string>({
                 message: `Which ${highlight("components")} would you like to add?`,
-                options: registryIndex.map((v) => ({ label: v.name, value: v.name }))
+                options: registryIndex.map((v) => ({ label: v.name, value: v.name })),
+                maxItems: 10
               })
           },
           {