v-uixy 1.0.0

package/README.md

@@ -0,0 +1,20 @@
+# v-uixy [![npm version](https://img.shields.io/npm/v/v-uixy.svg)](https://www.npmjs.com/package/v-uixy)
+
+Crafted with TypeScript, Tailwind CSS, and v-motion, this library offers a comprehensive suite of reusable components and animations. Streamline development, enhance user experiences, and unleash creativity with the flexible and responsive toolkit.
+
+[![Nuxt](https://img.shields.io/badge/Nuxt-002E3B?logo=nuxt&logoColor=#00DC82)](#)
+[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff)](#)
+[![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-%2338B2AC.svg?logo=tailwind-css&logoColor=white)](#)
+[![Vue.js](https://img.shields.io/badge/Vue.js-4FC08D?logo=vuedotjs&logoColor=fff)](#)
+
+## Quick setup
+
+```
+npx v-uixy
+```
+
+That is all. Have fun using it!
+
+## Demo
+
+You can try the components yourself [here](https://v-uixy.alanhaber.me).

package/bin/v-uixy.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+
+import { Command } from "commander";
+import add from "../commands/add.js";
+import remove from "../commands/remove.js";
+import list from "../commands/list.js";
+import init from "../commands/init.js";
+
+const program = new Command();
+
+program
+  .name("v-uixy")
+  .description("A UI components CLI for Nuxt + Tailwind")
+  .version("0.1.0");
+
+program.command("add <component>").description("Add a component").action(add);
+
+program
+  .command("remove <component>")
+  .description("Remove a component")
+  .action(remove);
+
+program.command("list").description("List available components").action(list);
+
+program
+  .command("init")
+  .description("Initialize v-uixy in your project")
+  .action(init);
+
+program.parse(process.argv);

package/commands/add.js

@@ -0,0 +1,189 @@
+import fs from "fs-extra";
+import path from "path";
+import chalk from "chalk";
+import { execa } from "execa";
+
+const projectRoot = process.cwd();
+const templatesRoot = path.resolve(
+  path.dirname(new URL(import.meta.url).pathname),
+  "../templates"
+);
+
+const componentsDir = path.join(projectRoot, "components/ui");
+const composablesDir = path.join(projectRoot, "composables");
+const componentIndexPath = path.join(componentsDir, "index.ts");
+const composablesIndexPath = path.join(composablesDir, "index.ts");
+const registryPath = path.join(templatesRoot, "components.json");
+
+async function loadRegistry() {
+  const exists = await fs.pathExists(registryPath);
+  if (!exists) {
+    console.error(chalk.red("❌ Missing components.json"));
+    process.exit(1);
+  }
+
+  const data = await fs.readJson(registryPath);
+  return data.components || [];
+}
+
+function parseRelated(raw) {
+  if (Array.isArray(raw))
+    return raw.flatMap((r) => r.split(",").map((s) => s.trim()));
+  if (typeof raw === "string") return raw.split(",").map((s) => s.trim());
+  return [];
+}
+
+async function resolveDeps(name, registry, resolved = new Set()) {
+  if (resolved.has(name)) return;
+
+  const def = registry.find((c) => c.name === name);
+  if (!def) {
+    console.error(chalk.red(`❌ Component "${name}" not found in registry.`));
+    return;
+  }
+
+  resolved.add(name);
+
+  for (const related of parseRelated(def["related-components"])) {
+    await resolveDeps(related, registry, resolved);
+  }
+}
+
+async function copyComponent(name) {
+  const src = path.join(templatesRoot, `components/${name}`);
+  const dest = path.join(componentsDir, name);
+
+  if (!(await fs.pathExists(src))) {
+    console.log(chalk.yellow(`⚠️  No template found for component "${name}"`));
+    return;
+  }
+
+  await fs.copy(src, dest, { overwrite: true });
+  console.log(chalk.green(`✔ Copied ${name} to components/ui/${name}`));
+}
+
+async function copyComposable(name) {
+  const src = path.join(templatesRoot, `composables/${name}.ts`);
+  const dest = path.join(composablesDir, `${name}.ts`);
+
+  if (!(await fs.pathExists(src))) {
+    console.log(chalk.yellow(`⚠️  No template found for composable "${name}"`));
+    return;
+  }
+
+  await fs.ensureDir(composablesDir);
+  await fs.copy(src, dest, { overwrite: true });
+  console.log(chalk.green(`✔ Copied composable: ${name}.ts`));
+
+  await updateComposablesIndex(name);
+}
+
+async function getExistingIndexComponents() {
+  if (!(await fs.pathExists(componentIndexPath))) return [];
+
+  const content = await fs.readFile(componentIndexPath, "utf8");
+  const names = [];
+  for (const line of content.split("\n")) {
+    const m = line.match(/^\s*export \* from \"\.\/([^\"]+)\";\s*$/);
+    if (m && m[1]) names.push(m[1].trim());
+  }
+  return names;
+}
+
+async function updateIndex(newComponents) {
+  await fs.ensureFile(componentIndexPath);
+
+  const existing = await getExistingIndexComponents();
+  const existingSet = new Set(existing);
+
+  // Preserve existing order; append new components in the order provided
+  const merged = [...existing];
+  for (const name of newComponents) {
+    if (!existingSet.has(name)) {
+      merged.push(name);
+      existingSet.add(name);
+    }
+  }
+
+  const lines = merged.map((name) => `export * from "./${name}";`);
+  await fs.writeFile(componentIndexPath, lines.join("\n") + "\n");
+  console.log(chalk.green(`🔗 Updated components/ui/index.ts`));
+}
+
+async function updateComposablesIndex(name) {
+  const line = `export * from "./${name}";`;
+  await fs.ensureFile(composablesIndexPath);
+  const content = await fs.readFile(composablesIndexPath, "utf8");
+  const lines = content.split("\n").map((line) => line.trim());
+
+  if (!lines.includes(line)) {
+    await fs.appendFile(composablesIndexPath, line + "\n");
+    console.log(`🔗 Linked composable "${name}" in composables/index.ts`);
+  } else {
+    console.log(`ℹ️  Composable "${name}" already linked`);
+  }
+}
+
+async function installPackages(componentNames, registry) {
+  const packages = new Set();
+
+  for (const name of componentNames) {
+    const def = registry.find((c) => c.name === name);
+    if (def?.packages?.length) {
+      def.packages.forEach((pkg) => packages.add(pkg));
+    }
+  }
+
+  if (packages.size === 0) return;
+
+  const packageJsonPath = path.join(projectRoot, "package.json");
+  const packageJson = await fs.readJson(packageJsonPath);
+  const existingDeps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies,
+  };
+
+  const toInstall = [...packages].filter((pkg) => !existingDeps[pkg]);
+
+  if (toInstall.length === 0) {
+    console.log(chalk.gray("✅ All required packages are already installed."));
+    return;
+  }
+
+  console.log(
+    chalk.blue(`📦 Installing new packages: ${toInstall.join(", ")}`)
+  );
+
+  try {
+    await execa("npm", ["install", ...toInstall], { stdio: "inherit" });
+    console.log(chalk.green("✔ Packages installed"));
+  } catch (err) {
+    console.error(chalk.red("✖ Failed to install packages"));
+  }
+}
+
+export default async function add(componentName) {
+  const registry = await loadRegistry();
+  let componentsToAdd = new Set();
+
+  if (componentName.toLowerCase() === "all") {
+    componentsToAdd = new Set(registry.map((c) => c.name));
+  } else {
+    await resolveDeps(componentName, registry, componentsToAdd);
+  }
+
+  const copied = [];
+
+  for (const name of componentsToAdd) {
+    await copyComponent(name);
+    copied.push(name);
+
+    const def = registry.find((c) => c.name === name);
+    for (const composable of def?.composables || []) {
+      await copyComposable(composable);
+    }
+  }
+
+  await updateIndex(copied);
+  await installPackages(componentsToAdd, registry);
+}

package/commands/init.js

@@ -0,0 +1,113 @@
+import fs from "fs-extra";
+import path from "path";
+import inquirer from "inquirer";
+import chalk from "chalk";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+import { execa } from "execa";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const root = process.cwd();
+
+const templateRoot = path.resolve(__dirname, "../templates");
+
+const filesToCopy = [
+  "components.json",
+  "scripts/generateIconTypes.script.js",
+  "assets/css/main.css",
+  "tailwind.config.ts",
+  "nuxt.config.ts",
+  "tsconfig.json",
+  "types/styles.d.ts",
+  "types/icons.ts",
+  "utils/styles.ts",
+  "utils/twMerge.ts",
+];
+
+const dirsToCopy = ["assets/icons"];
+
+async function installPackages() {
+  const packages = [
+    "tailwindcss",
+    "postcss",
+    "autoprefixer",
+    "vite-svg-loader",
+    "tailwind-merge",
+    "@tailwindcss/vite",
+  ];
+
+  console.log(chalk.blue("\n📦 Installing dependencies..."));
+  try {
+    await execa("npm", ["install", "-D", ...packages], { stdio: "inherit" });
+    console.log(chalk.green("✔ Dependencies installed successfully!"));
+  } catch (err) {
+    console.log(chalk.red("✖ Failed to install packages"));
+    console.error(err);
+  }
+}
+
+export default async function init(options = {}) {
+  console.log(chalk.cyan("🧩 Initializing v-uixy..."));
+
+  for (const relPath of filesToCopy) {
+    const src = path.join(templateRoot, relPath);
+    const dest = path.join(root, relPath);
+
+    const exists = await fs.pathExists(dest);
+    if (exists) {
+      const { overwrite } = await inquirer.prompt([
+        {
+          type: "confirm",
+          name: "overwrite",
+          message: `${chalk.yellow(relPath)} already exists. Overwrite?`,
+          default: false,
+        },
+      ]);
+
+      if (!overwrite) {
+        console.log(chalk.gray(`→ Skipped ${relPath}`));
+        continue;
+      }
+    }
+
+    await fs.ensureDir(path.dirname(dest));
+    await fs.copy(src, dest);
+    console.log(chalk.green(`✔ Created ${relPath}`));
+  }
+
+  for (const relPath of dirsToCopy) {
+    const src = path.join(templateRoot, relPath);
+    const dest = path.join(root, relPath);
+
+    const exists = await fs.pathExists(dest);
+    if (exists) {
+      const { overwrite } = await inquirer.prompt([
+        {
+          type: "confirm",
+          name: "overwrite",
+          message: `${chalk.yellow(
+            relPath
+          )} already exists. Overwrite entire directory?`,
+          default: false,
+        },
+      ]);
+
+      if (!overwrite) {
+        console.log(chalk.gray(`→ Skipped ${relPath}`));
+        continue;
+      }
+
+      await fs.remove(dest);
+    }
+
+    await fs.copy(src, dest);
+    console.log(chalk.green(`✔ Copied directory ${relPath}`));
+  }
+
+  if (!options.withoutPackages) {
+    await installPackages();
+  }
+
+  console.log(chalk.green("\n🎉 v-uixy initialized successfully!\n"));
+}

package/commands/list.js

@@ -0,0 +1,48 @@
+import fs from "fs-extra";
+import path from "path";
+import chalk from "chalk";
+
+const projectRoot = process.cwd();
+const componentsDir = path.join(projectRoot, "components/ui");
+const templatesRoot = path.resolve(
+  path.dirname(new URL(import.meta.url).pathname),
+  "../templates"
+);
+
+async function loadRegistry() {
+  const registryPath = path.join(templatesRoot, "components.json");
+
+  const exists = await fs.pathExists(registryPath);
+  if (!exists) {
+    console.error(chalk.red("❌ Missing components.json inside templates."));
+    process.exit(1);
+  }
+
+  const data = await fs.readJson(registryPath);
+  return data.components || [];
+}
+
+async function listComponents() {
+  const registry = await loadRegistry();
+  const results = [];
+
+  for (const { name } of registry) {
+    const componentPath = path.join(componentsDir, name);
+    const isInstalled = await fs.pathExists(componentPath);
+
+    results.push({
+      name,
+      status: isInstalled
+        ? chalk.green("✔ installed")
+        : chalk.gray("✖ not installed"),
+    });
+  }
+
+  console.log(chalk.cyan("\n📦 Available Components:\n"));
+  for (const c of results) {
+    console.log(`${chalk.bold(c.name.padEnd(15))} ${c.status}`);
+  }
+  console.log();
+}
+
+export default listComponents;

package/commands/remove.js

@@ -0,0 +1,69 @@
+import fs from "fs-extra";
+import path from "path";
+import chalk from "chalk";
+import inquirer from "inquirer";
+
+const projectRoot = process.cwd();
+const templatesRoot = path.resolve(
+  path.dirname(new URL(import.meta.url).pathname),
+  "../templates"
+);
+const componentsDir = path.join(projectRoot, "components/ui");
+const componentIndexPath = path.join(componentsDir, "index.ts");
+
+async function loadRegistry() {
+  const registryPath = path.join(templatesRoot, "components.json");
+  const exists = await fs.pathExists(registryPath);
+  if (!exists) {
+    console.error(chalk.red("❌ Missing components.json inside templates."));
+    process.exit(1);
+  }
+
+  const data = await fs.readJson(registryPath);
+  return data.components || [];
+}
+
+async function removeIndexExport(name) {
+  const line = `export * from "./${name}";`;
+  if (!(await fs.pathExists(componentIndexPath))) return;
+
+  const content = await fs.readFile(componentIndexPath, "utf8");
+  const newContent = content
+    .split("\n")
+    .filter((l) => l.trim() !== line)
+    .join("\n");
+
+  await fs.writeFile(componentIndexPath, newContent);
+  console.log(`🧹 Removed export from index.ts for "${name}"`);
+}
+
+async function removeComponent(name) {
+  const pathToRemove = path.join(componentsDir, name);
+  const exists = await fs.pathExists(pathToRemove);
+
+  if (!exists) {
+    console.log(chalk.yellow(`⚠️  Component "${name}" does not exist.`));
+    return;
+  }
+
+  const { confirm } = await inquirer.prompt([
+    {
+      type: "confirm",
+      name: "confirm",
+      message: `Remove component "${name}"?`,
+      default: false,
+    },
+  ]);
+
+  if (!confirm) return;
+
+  await fs.remove(pathToRemove);
+  await removeIndexExport(name);
+  console.log(chalk.green(`🗑️  Removed component "${name}"`));
+}
+
+export default async function remove(componentName) {
+  const registry = await loadRegistry();
+
+  await removeComponent(componentName);
+}

package/configs/components.json

@@ -0,0 +1,3 @@
+{
+  "components": [{}]
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "v-uixy",
+  "version": "1.0.0",
+  "private": false,
+  "author": {
+    "name": "Alan Haber",
+    "email": "contact@alanhaber.me"
+  },
+  "type": "module",
+  "description": "Add UI components to your project.",
+  "bin": {
+    "v-uixy": "bin/v-uixy.js"
+  },
+  "keywords": [
+    "cli",
+    "ui",
+    "components",
+    "scaffold",
+    "generator",
+    "nuxt",
+    "vue",
+    "typescript",
+    "v-motion",
+    "tailwindcss"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "files": [
+    "bin/",
+    "commands/**/*.js",
+    "configs/**/*.json",
+    "templates/**",
+    "README.md"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/haberalan/v-uixy.git"
+  },
+  "dependencies": {
+    "chalk": "^5.4.1",
+    "commander": "^14.0.0",
+    "execa": "^9.5.3",
+    "fs-extra": "^11.3.0",
+    "inquirer": "^12.6.3"
+  }
+}

package/templates/assets/css/main.css

@@ -0,0 +1,174 @@
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: "Inter", sans-serif;
+  --font-mono: "IBM Plex Mono", monospace;
+
+  --font-weight-200: 200;
+  --font-weight-300: 300;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --font-weight-800: 800;
+
+  --text-display-2xl: 56px;
+  --text-display-2xl-line-height: 60px;
+  --text-display-xl: 48px;
+  --text-display-xl-line-height: 56px;
+  --text-display-lg: 42px;
+  --text-display-lg-line-height: 52px;
+  --text-display-md: 36px;
+  --text-display-md-line-height: 44px;
+  --text-display-sm: 32px;
+  --text-display-sm-line-height: 40px;
+  --text-3xl: 28px;
+  --text-3xl-line-height: 42px;
+  --text-2xl: 24px;
+  --text-2xl-line-height: 32px;
+  --text-xl: 21px;
+  --text-xl-line-height: 32px;
+  --text-lg: 18px;
+  --text-lg-line-height: 24px;
+  --text-md: 16px;
+  --text-md-line-height: 24px;
+  --text-sm: 14px;
+  --text-sm-line-height: 18px;
+  --text-xs: 12px;
+  --text-xs-line-height: 16px;
+  --text-button-lg: 16px;
+  --text-button-lg-line-height: 24px;
+  --text-button-md: 14px;
+  --text-button-md-line-height: 24px;
+  --text-button-sm: 12px;
+  --text-button-sm-line-height: 24px;
+
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-11: 44px;
+  --spacing-12: 48px;
+  --spacing-13: 52px;
+  --spacing-14: 56px;
+  --spacing-15: 60px;
+  --spacing-16: 64px;
+  --spacing-auto: auto;
+
+  --radius-none: 0px;
+  --radius-0: 0px;
+  --radius-1: 4px;
+  --radius-2: 8px;
+  --radius-3: 12px;
+  --radius-4: 16px;
+  --radius-5: 20px;
+  --radius-6: 24px;
+  --radius-7: 28px;
+  --radius-8: 32px;
+  --radius-9: 36px;
+  --radius-10: 40px;
+  --radius-11: 44px;
+  --radius-12: 48px;
+  --radius-13: 52px;
+  --radius-14: 56px;
+  --radius-15: 60px;
+  --radius-16: 64px;
+  --radius-full: 9999px;
+
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-white: #ffffff;
+  --color-black: #0a0908;
+
+  --color-gray-100: #fafafa;
+  --color-gray-200: #f5f5f5;
+  --color-gray-300: #e5e5e5;
+  --color-gray-400: #d6d6d6;
+  --color-gray-500: #a3a3a3;
+  --color-gray-600: #737373;
+  --color-gray-700: #434343;
+  --color-gray-800: #2a2a2a;
+  --color-gray-900: #212529;
+  --color-gray-1000: #0f0f0f;
+
+  --color-error-100: #fff0f3;
+  --color-error-200: #ffccd5;
+  --color-error-300: #ffb3c1;
+  --color-error-400: #ff8fa3;
+  --color-error-500: #ff758f;
+  --color-error-600: #ff4d6d;
+  --color-error-700: #c9184a;
+  --color-error-800: #a4133c;
+  --color-error-900: #800f2f;
+  --color-error-1000: #590d22;
+
+  --transition-property-spacing: margin, padding;
+}
+
+@layer base {
+  body {
+    @apply font-sans;
+  }
+
+  footer {
+    @apply mt-auto;
+  }
+
+  *:focus-visible {
+    @apply outline-2 outline-offset-1 outline-gray-300;
+  }
+
+  *::selection {
+    @apply bg-error-200 dark:bg-error-500/50;
+  }
+
+  .dark {
+    @apply bg-black text-gray-100;
+  }
+
+  .light {
+    @apply bg-gray-100 text-black;
+  }
+}
+
+@layer utilities {
+  .scrollbar::-webkit-scrollbar {
+    @apply h-2 w-2 bg-transparent;
+  }
+  .scrollbar::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+  .scrollbar::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-gray-300 dark:bg-gray-900;
+  }
+
+  .scrollbar::-webkit-scrollbar-corner {
+    @apply bg-transparent;
+  }
+
+  .slider::-webkit-slider-thumb {
+    @apply relative z-10 h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-solid border-black bg-gray-100 dark:border-gray-100 dark:bg-black;
+  }
+
+  .slider:disabled::-webkit-slider-thumb {
+    @apply cursor-default border-gray-500 dark:border-gray-500;
+  }
+
+  .disable-transitions * {
+    transition: none !important;
+  }
+}
+
+@utility container {
+  @apply mx-auto px-4;
+}

package/templates/assets/icons/4g.svg

@@ -0,0 +1,3 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M5 7H3v6h5v4h2V7H8v4H5V7zm16 0h-9v10h9v-6h-4v2h2v2h-5V9h7V7z" fill="currentColor"/>
+</svg>