ui-thing 0.0.10 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "CLI used to add Nuxt 3 components to a project",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -40,6 +40,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "axios": "^1.6.2",
     "boxen": "^7.1.1",
     "build": "^0.1.4",
     "c12": "^1.5.1",

package/src/commands/add.ts

@@ -5,15 +5,17 @@ import kleur from "kleur";
 import _ from "lodash";
 import prompts from "prompts";
 
-import allComponents from "../comp";
+import { Component } from "../types";
 import { compareUIConfig } from "../utils/compareUIConfig";
 import { addModuleToConfig, getNuxtConfig, getUIConfig, updateConfig } from "../utils/config";
+import { fetchComponents } from "../utils/fetchComponents";
 import { fileExists } from "../utils/fileExists";
 import { installPackages } from "../utils/installPackages";
 import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
 import { promptUserForComponents } from "../utils/promptForComponents";
 import { writeFile } from "../utils/writeFile";
 
+let allComponents: Component[] = [];
 const currentDirectory = process.cwd();
 
 const findComponent = (name: string) => {
@@ -41,6 +43,8 @@ export const add = new Command()
       consola.info("Config file not set. Exiting...");
       process.exit(0);
     }
+    // get components from API
+    allComponents = await fetchComponents();
 
     let componentNames = components;
     // if no components are passed, prompt the user to select components
@@ -65,7 +69,7 @@ export const add = new Command()
     }
 
     // store the components that are found
-    let found: typeof allComponents = [];
+    let found: Component[] = [];
     componentNames.forEach((c) => {
       if (findComponent(c)) {
         found.push(findComponent(c)!);

package/src/types.ts

@@ -22,6 +22,7 @@ export type Component = {
   files: Composable[];
   utils: Composable[];
   composables: Composable[];
+  plugins: Composable[];
   components?: string[];
   askValidator?: boolean;
 };

package/src/utils/fetchComponents.ts

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+import { Component } from "../types";
+
+export const fetchComponents = async () => {
+  const { data } = await axios.get<Component[]>("https://ui-thing.behonbaker.com/api/components");
+  return data;
+};

package/src/utils/promptForComponents.ts

@@ -1,13 +1,19 @@
+import ora from "ora";
 import prompts from "prompts";
 
-import allComponents from "../comp";
+import { Component } from "../types";
+import { fetchComponents } from "./fetchComponents";
 
 export const promptUserForComponents = async (): Promise<string[]> => {
+  // get comps from API
+  const compsSpinner = ora("Fetching components...").start();
+  const allComponents = await fetchComponents();
+  compsSpinner.succeed("Fetched components");
   const { components } = await prompts({
     type: "autocompleteMultiselect",
     name: "components",
     message: "Select the components you want to add",
-    choices: allComponents.map((c) => ({ title: c.name, value: c.value })),
+    choices: allComponents.map((c: Component) => ({ title: c.name, value: c.value })),
     onRender(kleur) {
       // @ts-ignore
       this.msg = kleur.bgCyan(" Choose components ") + "  Select the components you want to add";