ui-thing 0.1.56 → 0.2.1

package/src/templates/prettier.ts

@@ -1,16 +1,14 @@
-export const PRETTIER_CONFIG = `{
-  "arrowParens": "always",
-  "endOfLine": "lf",
-  "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
-  "printWidth": 100,
-  "semi": true,
-  "singleQuote": false,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "useTabs": false,
-  "vueIndentScriptAndStyle": true,
-  "tailwindFunctions": ["tv"],
-  "importOrder": ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "<TYPES>", "", "^[.]"]
-}
-
-`;
+export const PRETTIER_CONFIG = {
+  arrowParens: "always",
+  endOfLine: "lf",
+  plugins: ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+  printWidth: 100,
+  semi: true,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "es5",
+  useTabs: false,
+  vueIndentScriptAndStyle: true,
+  tailwindFunctions: ["tv"],
+  importOrder: ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "<TYPES>", "", "^[.]"],
+};

package/src/templates/shortcuts.ts

@@ -1,15 +1,95 @@
-export const DEFINE_SHORTCUT = `/* eslint-disable @typescript-eslint/no-unsafe-function-type */
-import { logicAnd, logicNot } from "@vueuse/math";
-import type { ComputedRef, WatchSource } from "vue";
+export const DEFINE_SHORTCUT = `import {
+  createSharedComposable,
+  useActiveElement,
+  useDebounceFn,
+  useEventListener,
+} from "@vueuse/core";
+import type { MaybeRef } from "vue";
+
+type KbdKeysSpecificMap = {
+  meta: string;
+  alt: string;
+  ctrl: string;
+};
+
+export const kbdKeysMap = {
+  meta: "",
+  ctrl: "",
+  alt: "",
+  win: "⊞",
+  command: "⌘",
+  shift: "⇧",
+  control: "⌃",
+  option: "⌥",
+  enter: "↵",
+  delete: "⌦",
+  backspace: "⌫",
+  escape: "⎋",
+  tab: "⇥",
+  capslock: "⇪",
+  arrowup: "↑",
+  arrowright: "→",
+  arrowdown: "↓",
+  arrowleft: "←",
+  pageup: "⇞",
+  pagedown: "⇟",
+  home: "↖",
+  end: "↘",
+};
+
+export type KbdKey = keyof typeof kbdKeysMap;
+export type KbdKeySpecific = keyof KbdKeysSpecificMap;
+
+const _useKbd = () => {
+  const macOS = computed(
+    () =>
+      import.meta.client &&
+      navigator &&
+      navigator.userAgent &&
+      navigator.userAgent.match(/Macintosh;/)
+  );
+
+  const kbdKeysSpecificMap = reactive({
+    meta: " ",
+    alt: " ",
+    ctrl: " ",
+  });
+
+  onMounted(() => {
+    kbdKeysSpecificMap.meta = macOS.value ? kbdKeysMap.command : "Ctrl";
+    kbdKeysSpecificMap.ctrl = macOS.value ? kbdKeysMap.control : "Ctrl";
+    kbdKeysSpecificMap.alt = macOS.value ? kbdKeysMap.option : "Alt";
+  });
+
+  function getKbdKey(value?: KbdKey | string) {
+    if (!value) {
+      return;
+    }
+
+    if (["meta", "alt", "ctrl"].includes(value)) {
+      return kbdKeysSpecificMap[value as KbdKeySpecific];
+    }
+
+    return kbdKeysMap[value as KbdKey] || value.toUpperCase();
+  }
+
+  return {
+    macOS,
+    getKbdKey,
+  };
+};
+
+export const useKbd = /* @__PURE__ */ createSharedComposable(_useKbd);
+
+type Handler = (e?: any) => void;
 
 export interface ShortcutConfig {
-  handler: Function;
+  handler: Handler;
   usingInput?: string | boolean;
-  whenever?: WatchSource<boolean>[];
 }
 
 export interface ShortcutsConfig {
-  [key: string]: ShortcutConfig | Function;
+  [key: string]: ShortcutConfig | Handler | false | null | undefined;
 }
 
 export interface ShortcutsOptions {
@@ -17,8 +97,8 @@ export interface ShortcutsOptions {
 }
 
 interface Shortcut {
-  handler: Function;
-  condition: ComputedRef<boolean>;
+  handler: Handler;
+  enabled: boolean;
   chained: boolean;
   // KeyboardEvent attributes
   key: string;
@@ -30,24 +110,61 @@ interface Shortcut {
   // keyCode?: number
 }
 
-export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptions = {}) => {
-  const { macOS, usingInput } = useShortcuts();
+const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
+const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
+// keyboard keys which can be combined with Shift modifier (in addition to alphabet keys)
+const shiftableKeys = [
+  "arrowleft",
+  "arrowright",
+  "arrowup",
+  "arrowright",
+  "tab",
+  "escape",
+  "enter",
+  "backspace",
+];
+
+export function extractShortcuts(items: any[] | any[][]) {
+  const shortcuts: Record<string, Handler> = {};
+
+  function traverse(items: any[]) {
+    items.forEach((item) => {
+      if (item.kbds?.length && (item.onSelect || item.onClick)) {
+        const shortcutKey = item.kbds.join("_");
+        shortcuts[shortcutKey] = item.onSelect || item.onClick;
+      }
+      if (item.children) {
+        traverse(item.children.flat());
+      }
+      if (item.items) {
+        traverse(item.items.flat());
+      }
+    });
+  }
+
+  traverse(items.flat());
 
-  let shortcuts: Shortcut[] = [];
+  return shortcuts;
+}
 
-  const chainedInputs = ref<any[]>([]);
+export function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options: ShortcutsOptions = {}) {
+  const chainedInputs = ref<string[]>([]);
   const clearChainedInput = () => {
     chainedInputs.value.splice(0, chainedInputs.value.length);
   };
   const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
 
+  const { macOS } = useKbd();
+  const activeElement = useActiveElement();
+
   const onKeyDown = (e: KeyboardEvent) => {
     // Input autocomplete triggers a keydown event
     if (!e.key) {
       return;
     }
 
-    const alphabeticalKey = /^[a-z]{1}$/i.test(e.key);
+    const alphabetKey = /^[a-z]{1}$/i.test(e.key);
+    const shiftableKey = shiftableKeys.includes(e.key.toLowerCase());
 
     let chainedKey;
     chainedInputs.value.push(e.key);
@@ -55,14 +172,14 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
     if (chainedInputs.value.length >= 2) {
       chainedKey = chainedInputs.value.slice(-2).join("-");
 
-      for (const shortcut of shortcuts.filter((s) => s.chained)) {
+      for (const shortcut of shortcuts.value.filter((s) => s.chained)) {
         if (shortcut.key !== chainedKey) {
           continue;
         }
 
-        if (shortcut.condition.value) {
+        if (shortcut.enabled) {
           e.preventDefault();
-          shortcut.handler();
+          shortcut.handler(e);
         }
         clearChainedInput();
         return;
@@ -70,7 +187,7 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
     }
 
     // try matching a standard shortcut
-    for (const shortcut of shortcuts.filter((s) => !s.chained)) {
+    for (const shortcut of shortcuts.value.filter((s) => !s.chained)) {
       if (e.key.toLowerCase() !== shortcut.key) {
         continue;
       }
@@ -80,17 +197,17 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
       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) {
+      // shift modifier is only checked in combination with alphabet keys and some extra keys
+      // (shift with special characters would change the key)
+      if ((alphabetKey || shiftableKey) && e.shiftKey !== shortcut.shiftKey) {
         continue;
       }
       // alt modifier changes the combined key anyways
       // if (e.altKey !== shortcut.altKey) { continue }
 
-      if (shortcut.condition.value) {
+      if (shortcut.enabled) {
         e.preventDefault();
-        shortcut.handler();
+        shortcut.handler(e);
       }
       clearChainedInput();
       return;
@@ -99,124 +216,106 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
     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;
+  const usingInput = computed(() => {
+    const tagName = activeElement.value?.tagName;
+    const contentEditable = activeElement.value?.contentEditable;
 
-      // Convert Meta to Ctrl for non-MacOS
-      if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
-        shortcut.metaKey = false;
-        shortcut.ctrlKey = true;
-      }
+    const usingInput = !!(
+      tagName === "INPUT" ||
+      tagName === "TEXTAREA" ||
+      contentEditable === "true" ||
+      contentEditable === "plaintext-only"
+    );
 
-      // Retrieve handler function
-      if (typeof shortcutConfig === "function") {
-        shortcut.handler = shortcutConfig;
-      } else if (typeof shortcutConfig === "object") {
-        shortcut = { ...shortcut, handler: shortcutConfig.handler };
-      }
+    if (usingInput) {
+      return ((activeElement.value as any)?.name as string) || true;
+    }
 
-      if (!shortcut.handler) {
-        console.trace("[Shortcut] Invalid value");
-        return null;
-      }
+    return false;
+  });
 
-      // 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 || [])
-      );
+  // Map config to full detailed shortcuts
+  const shortcuts = computed<Shortcut[]>(() => {
+    return Object.entries(toValue(config))
+      .map(([key, shortcutConfig]) => {
+        if (!shortcutConfig) {
+          return null;
+        }
 
-      return shortcut as Shortcut;
-    })
-    .filter(Boolean) as Shortcut[];
+        // Parse key and modifiers
+        let shortcut: Partial<Shortcut>;
 
-  useEventListener("keydown", onKeyDown);
-};
+        if (
+          key.includes("-") &&
+          key !== "-" &&
+          !key.includes("_") &&
+          !key.match(chainedShortcutRegex)?.length
+        ) {
+          console.trace(\`[Shortcut] Invalid key: "\${key}"\`);
+        }
 
-`;
+        if (key.includes("_") && key !== "_" && !key.match(combinedShortcutRegex)?.length) {
+          console.trace(\`[Shortcut] Invalid key: "\${key}"\`);
+        }
 
-export const USE_SHORTCUTS = `export const _useShortcuts = () => {
-  const macOS = computed(
-    () =>
-      import.meta.client &&
-      navigator &&
-      navigator.userAgent &&
-      navigator.userAgent.match(/Macintosh;/)
-  );
+        const chained = key.includes("-") && key !== "-" && !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", "command", "ctrl", "shift", "alt", "option"].includes(k))
+              .join("_"),
+            metaKey: keySplit.includes("meta") || keySplit.includes("command"),
+            ctrlKey: keySplit.includes("ctrl"),
+            shiftKey: keySplit.includes("shift"),
+            altKey: keySplit.includes("alt") || keySplit.includes("option"),
+          };
+        }
+        shortcut.chained = chained;
 
-  const metaSymbol = ref(" ");
+        // Convert Meta to Ctrl for non-MacOS
+        if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
+          shortcut.metaKey = false;
+          shortcut.ctrlKey = true;
+        }
 
-  const activeElement = useActiveElement();
-  const usingInput = computed(() => {
-    const usingInput = !!(
-      activeElement.value?.tagName === "INPUT" ||
-      activeElement.value?.tagName === "TEXTAREA" ||
-      activeElement.value?.contentEditable === "true"
-    );
+        // Retrieve handler function
+        if (typeof shortcutConfig === "function") {
+          shortcut.handler = shortcutConfig;
+        } else if (typeof shortcutConfig === "object") {
+          shortcut = { ...shortcut, handler: shortcutConfig.handler };
+        }
 
-    if (usingInput) {
-      return ((activeElement.value as any)?.name as string) || true;
-    }
+        if (!shortcut.handler) {
+          console.trace("[Shortcut] Invalid value");
+          return null;
+        }
 
-    return false;
-  });
+        let enabled = true;
+        if (!(shortcutConfig as ShortcutConfig).usingInput) {
+          enabled = !usingInput.value;
+        } else if (typeof (shortcutConfig as ShortcutConfig).usingInput === "string") {
+          enabled = usingInput.value === (shortcutConfig as ShortcutConfig).usingInput;
+        }
+        shortcut.enabled = enabled;
 
-  onMounted(() => {
-    metaSymbol.value = macOS.value ? "⌘" : "Ctrl";
+        return shortcut;
+      })
+      .filter(Boolean) as Shortcut[];
   });
 
-  return {
-    macOS,
-    metaSymbol,
-    activeElement,
-    usingInput,
-  };
-};
-
-export const useShortcuts = createSharedComposable(_useShortcuts);
+  return useEventListener("keydown", onKeyDown);
+}
 
 `;

package/src/templates/tw-helper.ts

@@ -0,0 +1,8 @@
+/**
+ * Helper function used to get auto complete suggestions for Tailwind CSS classes.
+ */
+export const TW_HELPER = `/**
+ * Utility function to return Tailwind CSS classes.
+ */
+export const tw = <T extends TemplateStringsArray | string>(tailwindClasses: T) => tailwindClasses;
+`;

package/src/templates/vs-code.ts

@@ -0,0 +1,24 @@
+/**
+ * VS Code extensions recommendations for Tailwind CSS development.
+ */
+export const VS_CODE_RECOMMENDATIONS = {
+  recommendations: [
+    "vue.volar",
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode",
+    "antfu.iconify",
+    "formulahendry.auto-close-tag",
+    "formulahendry.auto-rename-tag",
+  ],
+};
+
+/**
+ * VS Code settings for Tailwind CSS development.
+ */
+export const VS_CODE_SETTINGS = {
+  "editor.formatOnSave": true,
+  "editor.quickSuggestions": { strings: "on" },
+  "files.associations": { "*.css": "tailwindcss" },
+  "tailwindCSS.classFunctions": ["tw", "clsx", "tw\\.[a-z-]+"],
+  "tailwindCSS.experimental.classRegex": [["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*)[\"'`]"]],
+};

package/src/types.ts

@@ -1,18 +1,89 @@
+/**
+ * Represents the UI Thing configuration options.
+ */
 export type UIConfig = {
+  /**
+   * The Nuxt version being used
+   *
+   * @default 4
+   *
+   * @deprecated This is now auto detected based on package.json.
+   */
   nuxtVersion?: number;
+  /**
+   * The theme to use
+   *
+   * @default "zinc"
+   */
   theme: string;
+  /**
+   * Path to the Tailwind CSS file
+   */
   tailwindCSSLocation: string;
-  tailwindConfigLocation: string;
+  /**
+   * Path to the components directory
+   */
   componentsLocation: string;
+  /**
+   * Path to the composables directory
+   */
   composablesLocation: string;
+  /**
+   * Path to the plugins directory
+   */
   pluginsLocation?: string;
+  /**
+   * Path to the utils directory
+   */
   utilsLocation: string;
+  /**
+   * Whether to overwrite existing files
+   */
   force: boolean;
+  /**
+   * Whether to use the default filename when adding components.
+   *
+   * @default true
+   */
   useDefaultFilename: boolean;
+  /**
+   * The default package manager to use for installing dependencies.
+   */
   packageManager: string;
 };
 
-export type InitOptions = { force?: boolean; yes?: boolean; nuxtVersion?: number };
+/**
+ * CLI options passed to the `init` command.
+ */
+export type InitOptions = {
+  /**
+   * Whether to overwrite existing configuration files.
+   *
+   * @default false
+   */
+  force?: boolean;
+  /**
+   * Whether to skip prompts and use default values.
+   *
+   * @default false
+   */
+  yes?: boolean;
+  /**
+   * The Nuxt version to use.
+   *
+   * @default 4
+   */
+  nuxtVersion?: number;
+};
+
+export type AddCommand = {
+  /**
+   * Whether to add all components.
+   *
+   * @default false
+   */
+  all?: boolean;
+};
 
 export type Component = {
   name: string;
@@ -30,7 +101,7 @@ export type Component = {
   overrides?: Record<string, any>;
 };
 
-export type Composable = {
+type Composable = {
   fileName: string;
   dirPath: string;
   fileContent: string;

package/src/utils/addPrettierConfig.ts

@@ -6,21 +6,64 @@ import prompts from "prompts";
 
 import { PRETTIER_CONFIG } from "../templates/prettier";
 
+/**
+ * Adds or merges a Prettier configuration into the project.
+ *
+ * - If `.prettierrc` doesn't exist, creates it with `PRETTIER_CONFIG`.
+ * - If it exists, merges keys instead of overwriting, unless user chooses overwrite.
+ *
+ * @param cwd - The working directory of the project.
+ * @param format - Whether to run `prettier --write .` after adding/merging.
+ */
 export const addPrettierConfig = async (cwd = process.cwd(), format: boolean = true) => {
   const prettierLocation = join(cwd, ".prettierrc");
+  let finalConfig = PRETTIER_CONFIG;
+
   if (fse.existsSync(prettierLocation)) {
+    // Read existing config
+    const existingRaw = await fse.readFile(prettierLocation, "utf-8");
+    let existingConfig: Record<string, any> = {};
+
+    try {
+      existingConfig = JSON.parse(existingRaw);
+    } catch {
+      console.warn("⚠️ Existing .prettierrc is not valid JSON — will prompt for overwrite.");
+    }
+
     const res = await prompts({
-      name: "overwrite",
-      type: "confirm",
-      message: "A prettier config file already exists. Overwrite?",
-      initial: true,
+      name: "merge",
+      type: "select",
+      message: "A prettier config file already exists. What would you like to do?",
+      choices: [
+        { title: "Merge configs", value: "merge" },
+        { title: "Overwrite with new config", value: "overwrite" },
+        { title: "Cancel", value: "cancel" },
+      ],
+      initial: 0,
     });
-    if (!res.overwrite) return false;
+
+    if (res.merge === "merge") {
+      // Merge existing config with PRETTIER_CONFIG
+      finalConfig = {
+        ...existingConfig,
+        ...PRETTIER_CONFIG,
+      };
+    } else if (res.merge === "overwrite") {
+      finalConfig = PRETTIER_CONFIG;
+    } else {
+      return false; // Cancelled
+    }
   }
-  await fse.writeFile(prettierLocation, PRETTIER_CONFIG, "utf-8");
+
+  // Save merged or new config
+  await fse.writeFile(prettierLocation, JSON.stringify(finalConfig, null, 2), "utf-8");
+
   if (!format) return true;
+
+  // Format project files
   const spinner = ora("Formatting files with prettier...").start();
   await $`npx prettier --write .`;
   spinner.succeed("Files formatted with prettier");
+
   return true;
 };