ui-thing 0.0.9 → 0.0.11

package/package.json

@@ -1,17 +1,19 @@
 {
   "name": "ui-thing",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "CLI used to add Nuxt 3 components to a project",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "repository": {
-    "url": "https://github.com/BayBreezy/ui-thing-cli"
+    "url": "git+https://github.com/BayBreezy/ui-thing-cli.git"
   },
   "publishConfig": {
     "access": "public"
   },
-  "bin": "./dist/index.js",
+  "bin": {
+    "ui-thing": "dist/index.js"
+  },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
@@ -38,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/commands/init.ts

@@ -57,7 +57,7 @@ export const init = new Command()
         type: true,
       });
     }
-    // Wriet changes to nuxt config
+    // Write changes to nuxt config
     await updateConfig(cfg.nuxtConfig, "nuxt.config.ts");
     // instal deps
     await installPackages(uiConfig.packageManager, INIT_DEPS, INIT_DEV_DEPS);

package/src/commands/shortcuts.ts

@@ -0,0 +1,42 @@
+import { Command } from "commander";
+import prompts from "prompts";
+
+import { addShortcutFiles } from "../utils/addShortcutFiles";
+import { addModuleToConfig, getNuxtConfig, updateConfig } from "../utils/config";
+import { installPackages } from "../utils/installPackages";
+import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
+
+export const addShortcuts = new Command()
+  .command("shortcuts")
+  .name("shortcuts")
+  .description("Add the defineShortcuts & useShortcuts composables to your project.")
+  .action(async () => {
+    await addShortcutFiles();
+
+    // Get nuxt config
+    const cfg = await getNuxtConfig();
+    addModuleToConfig(cfg.nuxtConfig, ["@vueuse/nuxt"]);
+    // Write changes to nuxt config
+    await updateConfig(cfg.nuxtConfig, "nuxt.config.ts");
+
+    const { pkgManager } = await prompts({
+      name: "pkgManager",
+      type: "select",
+      message: "Which package manager are you using?",
+      choices: [
+        { title: "npm", value: "npm" },
+        { title: "yarn", value: "yarn" },
+        { title: "pnpm", value: "pnpm" },
+        { title: "bun", value: "bun" },
+      ],
+    });
+    if (!pkgManager) return process.exit(0);
+
+    // install prettier dep
+    await installPackages(pkgManager, undefined, ["@vueuse/math", "@vueuse/nuxt"]);
+    printFancyBoxMessage(
+      "All Done!",
+      { title: "Shortcuts Added" },
+      `Check the composables folder for the defineShortcuts & useShortcuts composables.`
+    );
+  });

package/src/index.ts

@@ -4,6 +4,7 @@ import { Command } from "commander";
 import { add } from "./commands/add";
 import { init } from "./commands/init";
 import { addPrettier } from "./commands/prettier";
+import { addShortcuts } from "./commands/shortcuts";
 import { theme } from "./commands/theme";
 import { printFancyBoxMessage } from "./utils/printFancyBoxMessage";
 
@@ -25,6 +26,7 @@ program
   .addCommand(init)
   .addCommand(add)
   .addCommand(theme)
+  .addCommand(addShortcuts)
   .addCommand(addPrettier);
 
 program.parse(process.argv);

package/src/templates/shortcuts.ts

@@ -0,0 +1,217 @@
+export const DEFINE_SHORTCUT = `import { logicAnd, logicNot } from "@vueuse/math";
+import { computed, ref } from "vue";
+import type { ComputedRef, WatchSource } from "vue";
+
+export interface ShortcutConfig {
+  handler: Function;
+  usingInput?: string | boolean;
+  whenever?: WatchSource<Boolean>[];
+}
+
+export interface ShortcutsConfig {
+  [key: string]: ShortcutConfig | Function;
+}
+
+export interface ShortcutsOptions {
+  chainDelay?: number;
+}
+
+interface Shortcut {
+  handler: Function;
+  condition: ComputedRef<Boolean>;
+  chained: boolean;
+  // KeyboardEvent attributes
+  key: string;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  shiftKey: boolean;
+  altKey: boolean;
+  // code?: string
+  // keyCode?: number
+}
+
+export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptions = {}) => {
+  const { macOS, usingInput } = useShortcuts();
+
+  let shortcuts: Shortcut[] = [];
+
+  const chainedInputs = ref<any[]>([]);
+  const clearChainedInput = () => {
+    chainedInputs.value.splice(0, chainedInputs.value.length);
+  };
+  const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    // Input autocomplete triggers a keydown event
+    if (!e.key) {
+      return;
+    }
+
+    const alphabeticalKey = /^[a-z]{1}$/i.test(e.key);
+
+    let chainedKey;
+    chainedInputs.value.push(e.key);
+    // try matching a chained shortcut
+    if (chainedInputs.value.length >= 2) {
+      chainedKey = chainedInputs.value.slice(-2).join("-");
+
+      for (const shortcut of shortcuts.filter((s) => s.chained)) {
+        if (shortcut.key !== chainedKey) {
+          continue;
+        }
+
+        if (shortcut.condition.value) {
+          e.preventDefault();
+          shortcut.handler();
+        }
+        clearChainedInput();
+        return;
+      }
+    }
+
+    // try matching a standard shortcut
+    for (const shortcut of shortcuts.filter((s) => !s.chained)) {
+      if (e.key.toLowerCase() !== shortcut.key) {
+        continue;
+      }
+      if (e.metaKey !== shortcut.metaKey) {
+        continue;
+      }
+      if (e.ctrlKey !== shortcut.ctrlKey) {
+        continue;
+      }
+      // shift modifier is only checked in combination with alphabetical keys
+      // (shift with non-alphabetical keys would change the key)
+      if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) {
+        continue;
+      }
+      // alt modifier changes the combined key anyways
+      // if (e.altKey !== shortcut.altKey) { continue }
+
+      if (shortcut.condition.value) {
+        e.preventDefault();
+        shortcut.handler();
+      }
+      clearChainedInput();
+      return;
+    }
+
+    debouncedClearChainedInput();
+  };
+
+  // Map config to full detailled shortcuts
+  shortcuts = Object.entries(config)
+    .map(([key, shortcutConfig]) => {
+      if (!shortcutConfig) {
+        return null;
+      }
+
+      // Parse key and modifiers
+      let shortcut: Partial<Shortcut>;
+
+      if (key.includes("-") && key.includes("_")) {
+        console.trace("[Shortcut] Invalid key");
+        return null;
+      }
+
+      const chained = key.includes("-");
+      if (chained) {
+        shortcut = {
+          key: key.toLowerCase(),
+          metaKey: false,
+          ctrlKey: false,
+          shiftKey: false,
+          altKey: false,
+        };
+      } else {
+        const keySplit = key
+          .toLowerCase()
+          .split("_")
+          .map((k) => k);
+        shortcut = {
+          key: keySplit.filter((k) => !["meta", "ctrl", "shift", "alt"].includes(k)).join("_"),
+          metaKey: keySplit.includes("meta"),
+          ctrlKey: keySplit.includes("ctrl"),
+          shiftKey: keySplit.includes("shift"),
+          altKey: keySplit.includes("alt"),
+        };
+      }
+      shortcut.chained = chained;
+
+      // Convert Meta to Ctrl for non-MacOS
+      if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
+        shortcut.metaKey = false;
+        shortcut.ctrlKey = true;
+      }
+
+      // Retrieve handler function
+      if (typeof shortcutConfig === "function") {
+        shortcut.handler = shortcutConfig;
+      } else if (typeof shortcutConfig === "object") {
+        shortcut = { ...shortcut, handler: shortcutConfig.handler };
+      }
+
+      if (!shortcut.handler) {
+        console.trace("[Shortcut] Invalid value");
+        return null;
+      }
+
+      // Create shortcut computed
+      const conditions: ComputedRef<Boolean>[] = [];
+      if (!(shortcutConfig as ShortcutConfig).usingInput) {
+        conditions.push(logicNot(usingInput));
+      } else if (typeof (shortcutConfig as ShortcutConfig).usingInput === "string") {
+        conditions.push(
+          computed(() => usingInput.value === (shortcutConfig as ShortcutConfig).usingInput)
+        );
+      }
+      shortcut.condition = logicAnd(
+        ...conditions,
+        ...((shortcutConfig as ShortcutConfig).whenever || [])
+      );
+
+      return shortcut as Shortcut;
+    })
+    .filter(Boolean) as Shortcut[];
+
+  useEventListener("keydown", onKeyDown);
+};
+`;
+
+export const USE_SHORTCUTS = `export const _useShortcuts = () => {
+  const macOS = computed(
+    () =>
+      process.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/)
+  );
+
+  const metaSymbol = ref(" ");
+
+  const activeElement = useActiveElement();
+  const usingInput = computed(() => {
+    const usingInput = !!(
+      activeElement.value?.tagName === "INPUT" ||
+      activeElement.value?.tagName === "TEXTAREA" ||
+      activeElement.value?.contentEditable === "true"
+    );
+
+    if (usingInput) {
+      return ((activeElement.value as any)?.name as string) || true;
+    }
+
+    return false;
+  });
+
+  onMounted(() => {
+    metaSymbol.value = macOS.value ? "⌘" : "Ctrl";
+  });
+
+  return {
+    macOS,
+    metaSymbol,
+    activeElement,
+    usingInput,
+  };
+};
+
+export const useShortcuts = createSharedComposable(_useShortcuts);
+`;

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/addShortcutFiles.ts

@@ -0,0 +1,12 @@
+import fse from "fs-extra";
+
+import { DEFINE_SHORTCUT, USE_SHORTCUTS } from "../templates/shortcuts";
+
+export const addShortcutFiles = async (cwd = process.cwd()) => {
+  // ensure that the composable folder exists
+  await fse.ensureDir(`${cwd}/composables`);
+  // write the defineShortcuts composable
+  await fse.writeFile(`${cwd}/composables/defineShortcuts.ts`, DEFINE_SHORTCUT, "utf-8");
+  // write the useShortcuts composable
+  await fse.writeFile(`${cwd}/composables/useShortcuts.ts`, USE_SHORTCUTS, "utf-8");
+};

package/src/utils/constants.ts

@@ -3,7 +3,6 @@ export const INIT_DEV_DEPS = [
   "typescript",
   "tailwindcss-animate",
   "nuxt-icon",
-  "nuxt-lodash",
   "prettier-plugin-tailwindcss",
   "prettier",
   "@nuxtjs/tailwindcss",
@@ -16,7 +15,6 @@ export const INIT_MODULES = [
   "@nuxtjs/tailwindcss",
   "@nuxtjs/color-mode",
   "@vueuse/nuxt",
-  "nuxt-lodash",
   "nuxt-icon",
 ];
 

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";