@skutally/ui-library 0.1.0

package/bin/cli.js

@@ -0,0 +1,272 @@
+#!/usr/bin/env node
+
+import { readFileSync, existsSync, mkdirSync, copyFileSync } from "node:fs"
+import { resolve, join, dirname, basename } from "node:path"
+import { fileURLToPath } from "node:url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const PKG_ROOT = resolve(__dirname, "..")
+
+// ─── Colors (no dependencies) ────────────────────────────────────────────────
+const c = {
+  reset: "\x1b[0m",
+  bold:  "\x1b[1m",
+  dim:   "\x1b[2m",
+  green: "\x1b[32m",
+  cyan:  "\x1b[36m",
+  yellow:"\x1b[33m",
+  red:   "\x1b[31m",
+  gray:  "\x1b[90m",
+}
+
+function success(msg) { console.log(`${c.green}✔${c.reset} ${msg}`) }
+function info(msg)    { console.log(`${c.cyan}ℹ${c.reset} ${msg}`) }
+function warn(msg)    { console.log(`${c.yellow}⚠${c.reset} ${msg}`) }
+function error(msg)   { console.error(`${c.red}✘${c.reset} ${msg}`); process.exit(1) }
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function loadRegistry() {
+  const registryPath = join(PKG_ROOT, "registry", "registry.json")
+  return JSON.parse(readFileSync(registryPath, "utf-8"))
+}
+
+function loadConfig() {
+  const configPath = resolve(process.cwd(), "components.json")
+  if (!existsSync(configPath)) {
+    error("components.json not found. Run `ui-library init` first.")
+  }
+  return JSON.parse(readFileSync(configPath, "utf-8"))
+}
+
+function ensureDir(dir) {
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true })
+}
+
+function copyFile(src, dest) {
+  ensureDir(dirname(dest))
+  copyFileSync(src, dest)
+}
+
+// ─── Commands ────────────────────────────────────────────────────────────────
+
+function cmdInit() {
+  const cwd = process.cwd()
+  const configDest = join(cwd, "components.json")
+
+  if (existsSync(configDest)) {
+    warn("components.json already exists. Skipping.")
+  } else {
+    copyFile(join(PKG_ROOT, "templates", "components.json"), configDest)
+    success("Created components.json")
+  }
+
+  // Copy base CSS (Tailwind v4 — all config lives in CSS)
+  const cssDest = join(cwd, "src", "base.css")
+  if (!existsSync(cssDest)) {
+    copyFile(join(PKG_ROOT, "src", "base.css"), cssDest)
+    success("Created src/base.css (Tailwind v4 — @theme + CSS variables)")
+  }
+
+  console.log()
+  info("Project initialized with Tailwind CSS v4!")
+  console.log()
+  console.log(`  ${c.dim}Build CSS:${c.reset}  npx @tailwindcss/cli -i src/base.css -o dist/output.css --watch`)
+  console.log()
+  console.log(`  ${c.dim}Add components:${c.reset}`)
+  console.log(`  ${c.bold}npx ui-library add button${c.reset}`)
+  console.log(`  ${c.bold}npx ui-library add modal accordion${c.reset}`)
+  console.log()
+}
+
+function cmdAdd(componentNames) {
+  if (componentNames.length === 0) {
+    error("Please specify at least one component. Example: ui-library add button")
+  }
+
+  const registry = loadRegistry()
+  const config = loadConfig()
+  const cwd = process.cwd()
+  const controllersDir = resolve(cwd, config.aliases.controllers)
+  const componentsDir = resolve(cwd, config.aliases.components)
+
+  // Resolve all dependencies
+  const toInstall = new Set()
+
+  function resolveDeps(name) {
+    if (toInstall.has(name)) return
+    const comp = registry.components[name]
+    if (!comp) {
+      warn(`Component "${name}" not found in registry. Skipping.`)
+      return
+    }
+    for (const dep of comp.dependencies) {
+      resolveDeps(dep)
+    }
+    toInstall.add(name)
+  }
+
+  for (const name of componentNames) {
+    resolveDeps(name)
+  }
+
+  // Install each component
+  let installed = 0
+  for (const name of toInstall) {
+    const comp = registry.components[name]
+    const files = comp.files
+
+    // Copy controller JS (if exists)
+    if (files.controller) {
+      const src = join(PKG_ROOT, files.controller)
+      const dest = join(controllersDir, basename(files.controller))
+      if (existsSync(dest)) {
+        warn(`${config.aliases.controllers}/${basename(files.controller)} already exists. Skipping.`)
+      } else {
+        copyFile(src, dest)
+        success(`Added ${c.bold}${config.aliases.controllers}/${basename(files.controller)}${c.reset}`)
+      }
+    }
+
+    // Copy HTML template
+    if (files.template) {
+      const src = join(PKG_ROOT, files.template)
+      const dest = join(componentsDir, basename(files.template))
+      if (existsSync(dest)) {
+        warn(`${config.aliases.components}/${basename(files.template)} already exists. Skipping.`)
+      } else {
+        copyFile(src, dest)
+        success(`Added ${c.bold}${config.aliases.components}/${basename(files.template)}${c.reset}`)
+      }
+    }
+
+    installed++
+  }
+
+  if (installed > 0) {
+    console.log()
+    info(`Installed ${installed} component${installed > 1 ? "s" : ""}.`)
+
+    // Show registration hint
+    const controllers = [...toInstall]
+      .map(n => registry.components[n])
+      .filter(comp => comp.files.controller)
+
+    if (controllers.length > 0) {
+      console.log()
+      console.log(`${c.dim}Register the controller(s) in your application:${c.reset}`)
+      console.log()
+      for (const comp of controllers) {
+        const name = comp.name
+        const pascalName = name.charAt(0).toUpperCase() + name.slice(1)
+        console.log(`  ${c.gray}import ${pascalName}Controller from "./${config.aliases.controllers}/${name}.js"${c.reset}`)
+        console.log(`  ${c.gray}application.register("${name}", ${pascalName}Controller)${c.reset}`)
+        console.log()
+      }
+    }
+  }
+}
+
+function cmdList() {
+  const registry = loadRegistry()
+  const components = Object.values(registry.components)
+
+  console.log()
+  console.log(`${c.bold}Available components (${components.length}):${c.reset}`)
+  console.log()
+
+  const maxName = Math.max(...components.map(c => c.name.length))
+
+  for (const comp of components) {
+    const hasCtrl = comp.files.controller ? `${c.cyan}JS${c.reset}` : `${c.dim}--${c.reset}`
+    const deps = comp.dependencies.length > 0
+      ? `${c.dim}deps: ${comp.dependencies.join(", ")}${c.reset}`
+      : ""
+    console.log(`  ${c.green}${comp.name.padEnd(maxName + 2)}${c.reset} ${hasCtrl}  ${comp.description} ${deps}`)
+  }
+
+  console.log()
+  console.log(`${c.dim}Usage: ui-library add <component> [component...]${c.reset}`)
+  console.log()
+}
+
+function cmdDiff(componentNames) {
+  if (componentNames.length === 0) {
+    error("Please specify at least one component. Example: ui-library diff button")
+  }
+
+  const registry = loadRegistry()
+  const config = loadConfig()
+  const cwd = process.cwd()
+  const controllersDir = resolve(cwd, config.aliases.controllers)
+
+  for (const name of componentNames) {
+    const comp = registry.components[name]
+    if (!comp) {
+      warn(`Component "${name}" not found in registry.`)
+      continue
+    }
+    if (!comp.files.controller) {
+      info(`${name} has no controller file.`)
+      continue
+    }
+
+    const localPath = join(controllersDir, basename(comp.files.controller))
+    const registryPath = join(PKG_ROOT, comp.files.controller)
+
+    if (!existsSync(localPath)) {
+      info(`${name}: not installed locally.`)
+      continue
+    }
+
+    const local = readFileSync(localPath, "utf-8")
+    const remote = readFileSync(registryPath, "utf-8")
+
+    if (local === remote) {
+      success(`${name}: no differences.`)
+    } else {
+      warn(`${name}: local version differs from registry.`)
+    }
+  }
+}
+
+// ─── CLI Router ──────────────────────────────────────────────────────────────
+
+const [,, command, ...args] = process.argv
+
+switch (command) {
+  case "init":
+    cmdInit()
+    break
+  case "add":
+    cmdAdd(args)
+    break
+  case "list":
+    cmdList()
+    break
+  case "diff":
+    cmdDiff(args)
+    break
+  case "help":
+  case "--help":
+  case "-h":
+  case undefined:
+    console.log(`
+${c.bold}ui-library${c.reset} — shadcn-style UI components for Stimulus + Tailwind
+
+${c.bold}Usage:${c.reset}
+  ui-library init                   Initialize project (creates components.json, base CSS, tailwind config)
+  ui-library add <name> [name...]   Add component(s) to your project
+  ui-library list                   List all available components
+  ui-library diff <name>            Check if a local component differs from the registry
+
+${c.bold}Examples:${c.reset}
+  ui-library init
+  ui-library add button modal accordion
+  ui-library list
+`)
+    break
+  default:
+    error(`Unknown command: "${command}". Run ui-library --help for usage.`)
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@skutally/ui-library",
+  "version": "0.1.0",
+  "description": "A shadcn-style UI component library for HTML, Tailwind CSS & Stimulus.js. Copy-paste components into your project.",
+  "type": "module",
+  "bin": {
+    "ui-library": "./bin/cli.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "bin",
+    "src",
+    "registry",
+    "templates"
+  ],
+  "keywords": [
+    "ui",
+    "components",
+    "tailwindcss",
+    "stimulus",
+    "shadcn"
+  ],
+  "scripts": {
+    "dev": "npx @tailwindcss/cli -i src/base.css -o dist/output.css --watch",
+    "build": "npx @tailwindcss/cli -i src/base.css -o dist/output.css --minify",
+    "serve": "npx serve .",
+    "start": "npm run build && npx serve ."
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.2.2",
+    "tailwindcss": "^4.2.2"
+  }
+}

package/registry/registry.json

@@ -0,0 +1,207 @@
+{
+  "components": {
+    "accordion": {
+      "name": "accordion",
+      "description": "A vertically stacked set of interactive headings that each reveal a section of content.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/accordion.js",
+        "template": "components/accordion.html"
+      }
+    },
+    "alert": {
+      "name": "alert",
+      "description": "Displays a callout for important information with variant styles (info, success, warning, danger).",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/alert.js",
+        "template": "components/alert.html"
+      }
+    },
+    "avatar": {
+      "name": "avatar",
+      "description": "An image element with a fallback for representing the user.",
+      "dependencies": [],
+      "files": {
+        "template": "components/avatar.html"
+      }
+    },
+    "badge": {
+      "name": "badge",
+      "description": "Displays a small status descriptor with variant styles.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/badge.js",
+        "template": "components/badge.html"
+      }
+    },
+    "breadcrumb": {
+      "name": "breadcrumb",
+      "description": "Displays the path to the current page using a hierarchy of links.",
+      "dependencies": [],
+      "files": {
+        "template": "components/breadcrumb.html"
+      }
+    },
+    "button": {
+      "name": "button",
+      "description": "A clickable button with multiple variants and sizes.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/button.js",
+        "template": "components/button.html"
+      }
+    },
+    "card": {
+      "name": "card",
+      "description": "A container with a border and shadow used to group content.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/card.js",
+        "template": "components/card.html"
+      }
+    },
+    "checkbox": {
+      "name": "checkbox",
+      "description": "A control that allows the user to toggle between checked and not checked.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/checkbox.js",
+        "template": "components/checkbox.html"
+      }
+    },
+    "dropdown": {
+      "name": "dropdown",
+      "description": "A menu that appears on trigger click with a list of actions.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/dropdown.js",
+        "template": "components/dropdown.html"
+      }
+    },
+    "input": {
+      "name": "input",
+      "description": "A text input field with variant styles and icon support.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/input.js",
+        "template": "components/input.html"
+      }
+    },
+    "modal": {
+      "name": "modal",
+      "description": "A dialog overlay that requires user interaction before returning to the page.",
+      "dependencies": ["button"],
+      "files": {
+        "controller": "src/controllers/modal.js",
+        "template": "components/modal.html"
+      }
+    },
+    "popover": {
+      "name": "popover",
+      "description": "A floating panel anchored to a trigger element.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/popover.js",
+        "template": "components/popover.html"
+      }
+    },
+    "progress": {
+      "name": "progress",
+      "description": "A horizontal bar indicating progress or completion percentage.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/progress.js",
+        "template": "components/progress.html"
+      }
+    },
+    "radio": {
+      "name": "radio",
+      "description": "A set of mutually exclusive options presented as a group.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/radio.js",
+        "template": "components/radio.html"
+      }
+    },
+    "separator": {
+      "name": "separator",
+      "description": "A visual divider between sections of content.",
+      "dependencies": [],
+      "files": {
+        "template": "components/separator.html"
+      }
+    },
+    "sheet": {
+      "name": "sheet",
+      "description": "A panel that slides in from any edge of the screen.",
+      "dependencies": ["button"],
+      "files": {
+        "controller": "src/controllers/sheet.js",
+        "template": "components/sheet.html"
+      }
+    },
+    "skeleton": {
+      "name": "skeleton",
+      "description": "A placeholder animation shown while content is loading.",
+      "dependencies": [],
+      "files": {
+        "template": "components/skeleton.html"
+      }
+    },
+    "slider": {
+      "name": "slider",
+      "description": "A draggable input for selecting a numeric value within a range.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/slider.js",
+        "template": "components/slider.html"
+      }
+    },
+    "table": {
+      "name": "table",
+      "description": "A data table with sortable column headers.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/table.js",
+        "template": "components/table.html"
+      }
+    },
+    "tabs": {
+      "name": "tabs",
+      "description": "A set of layered sections of content that display one panel at a time.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/tabs.js",
+        "template": "components/tabs.html"
+      }
+    },
+    "toast": {
+      "name": "toast",
+      "description": "A temporary notification that appears at the edge of the screen.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/toast.js",
+        "template": "components/toast.html"
+      }
+    },
+    "toggle": {
+      "name": "toggle",
+      "description": "A switch control that toggles between on and off states.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/toggle.js",
+        "template": "components/toggle.html"
+      }
+    },
+    "tooltip": {
+      "name": "tooltip",
+      "description": "A small popup that shows additional information on hover.",
+      "dependencies": [],
+      "files": {
+        "controller": "src/controllers/tooltip.js",
+        "template": "components/tooltip.html"
+      }
+    }
+  }
+}

package/src/base.css

@@ -0,0 +1,82 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: "Inter", "system-ui", "-apple-system", "sans-serif";
+  --font-mono: "JetBrains Mono", "Fira Code", "monospace";
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --radius: 0.5rem;
+  }
+
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}

package/src/controllers/accordion.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["item", "body", "icon"]
+
+  connect() {
+    this.openIndex = -1
+  }
+
+  toggle(e) {
+    const button = e.currentTarget
+    const item = button.closest("[data-accordion-item]")
+    const body = item.querySelector("[data-accordion-target='body']")
+    const icon = item.querySelector("[data-accordion-target='icon']")
+    const isOpen = !body.classList.contains("hidden")
+
+    // Close all
+    this.element.querySelectorAll("[data-accordion-target='body']").forEach(b => b.classList.add("hidden"))
+    this.element.querySelectorAll("[data-accordion-target='icon']").forEach(i => i.style.transform = "")
+
+    // Open clicked if was closed
+    if (!isOpen) {
+      body.classList.remove("hidden")
+      if (icon) icon.style.transform = "rotate(180deg)"
+    }
+  }
+}

package/src/controllers/alert.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    variant: { type: String, default: "info" },
+    dismissible: { type: Boolean, default: true },
+  }
+
+  connect() {
+    this.applyVariant()
+    if (this.dismissibleValue) this.addCloseButton()
+  }
+
+  applyVariant() {
+    const base = "relative flex items-start gap-3 px-4 py-3 rounded-lg border text-sm transition-all [&>svg]:shrink-0 [&>svg]:mt-0.5"
+    const map = {
+      info:    "bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-200",
+      success: "bg-emerald-50 border-emerald-200 text-emerald-800 dark:bg-emerald-950 dark:border-emerald-900 dark:text-emerald-200",
+      warning: "bg-amber-50 border-amber-200 text-amber-800 dark:bg-amber-950 dark:border-amber-900 dark:text-amber-200",
+      danger:  "bg-red-50 border-red-200 text-red-800 dark:bg-red-950 dark:border-red-900 dark:text-red-200",
+    }
+    this.element.className = `${base} ${map[this.variantValue] ?? map.info}`
+  }
+
+  addCloseButton() {
+    if (this.element.querySelector("[data-alert-close]")) return
+    const btn = document.createElement("button")
+    btn.setAttribute("data-alert-close", "")
+    btn.className = "absolute top-3 right-3 text-lg leading-none opacity-40 hover:opacity-80 cursor-pointer"
+    btn.textContent = "\u2715"
+    btn.addEventListener("click", () => this.dismiss())
+    this.element.appendChild(btn)
+  }
+
+  dismiss() {
+    this.element.classList.add("opacity-0", "-translate-y-1")
+    setTimeout(() => this.element.remove(), 200)
+  }
+}