scaff-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 CARL JIMROE MACASPAC PAÑO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# scaff-js
+
+A lightweight CLI for generating simple, ready-made frontend components.
+
+Scaff provides common web structure patterns such as headers, heroes, and footers using Tailwind CSS. Generated code is intentionally simple, editable, and easy to adapt.
+
+Scaff does not create projects or manage project configuration.
+
+## Installation
+
+Install Scaff in your existing frontend project:
+
+```bash
+npm install scaff-js
+```

package/bin/scf.js

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+
+const command = process.argv[2];
+
+switch (command) {
+  case "add":
+    await import("../src/commands/add.js");
+    break;
+
+  case "list":
+    await import("../src/commands/list.js");
+    break;
+
+  default:
+    console.log("Scaff.js");
+    console.log("Ready-made Tailwind frontend components.");
+    console.log("");
+    console.log("Usage:");
+    console.log("  scf add");
+    console.log("  scf add header");
+    console.log("  scf list");
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "scaff-ui",
+  "version": "0.1.0",
+  "description": "A lightweight CLI for generating simple, ready-made frontend components.",
+  "bin": {
+    "scf": "./bin/scf.js"
+  },
+  "scripts": {
+    "test": "node --test"
+  },
+  "keywords": [
+    "cli",
+    "frontend",
+    "ui",
+    "components",
+    "tailwind",
+    "html",
+    "react"
+  ],
+  "author": "Carl Eoj",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/carleoj/scaff-js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/carleoj/scaff-js/issues"
+  },
+  "homepage": "https://github.com/carleoj/scaff-js#readme",
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "@inquirer/prompts": "^8.7.1"
+  }
+}

package/src/commands/add.js

@@ -0,0 +1,99 @@
+import { access } from "node:fs/promises";
+import path from "node:path";
+import { select } from "@inquirer/prompts";
+import { generateComponent } from "../generators/component.js";
+
+const FRAMEWORKS = [
+  { name: "HTML", value: "html" },
+  { name: "React", value: "react" },
+];
+
+const COMPONENTS = [
+  { name: "Header", value: "header" },
+  { name: "Hero", value: "hero" },
+  { name: "Footer", value: "footer" },
+];
+
+const VARIANTS = {
+  header: [
+    { name: "Logo + Navigation Links", value: "logo-navigation" },
+    {
+      name: "Logo + Navigation Links + CTA Button",
+      value: "logo-navigation-cta",
+    },
+    { name: "Navigation Links Only", value: "navigation-only" },
+  ],
+
+  hero: [
+    {
+      name: "Heading + Description + Button",
+      value: "heading-description-button",
+    },
+    {
+      name: "Heading + Description + Button + Image",
+      value: "heading-description-button-image",
+    },
+    { name: "Heading + Description Only", value: "heading-description" },
+  ],
+
+  footer: [
+    { name: "Copyright Only", value: "copyright" },
+    {
+      name: "Copyright + Navigation Links",
+      value: "copyright-navigation",
+    },
+    { name: "Copyright + Social Links", value: "copyright-social" },
+  ],
+};
+
+const requestedComponent = process.argv[3];
+
+async function isProjectRoot() {
+  const packagePath = path.join(process.cwd(), "package.json");
+
+  try {
+    await access(packagePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function addComponent() {
+  if (!(await isProjectRoot())) {
+    console.error(
+      "\nPlease run scf from the root directory of your project.\n",
+    );
+    process.exit(1);
+  }
+
+  const framework = await select({
+    message: "Select Framework",
+    choices: FRAMEWORKS,
+  });
+
+  const type =
+    requestedComponent ??
+    (await select({
+      message: "Select Component",
+      choices: COMPONENTS,
+    }));
+
+  if (!VARIANTS[type]) {
+    throw new Error(`Unknown component: ${type}`);
+  }
+
+  const variant = await select({
+    message: "Select Variant",
+    choices: VARIANTS[type],
+  });
+
+  await generateComponent({
+    framework,
+    type,
+    variant,
+    target: process.cwd(),
+  });
+}
+
+await addComponent();

package/src/commands/list.js

@@ -0,0 +1,30 @@
+const components = {
+  Header: [
+    "Logo + Navigation Links",
+    "Logo + Navigation Links + CTA Button",
+    "Navigation Links Only",
+  ],
+  Hero: [
+    "Heading + Description + Button",
+    "Heading + Description + Button + Image",
+    "Heading + Description Only",
+  ],
+  Footer: [
+    "Copyright Only",
+    "Copyright + Navigation Links",
+    "Copyright + Social Links",
+  ],
+};
+
+console.log("Available components:");
+console.log("");
+
+for (const [name, variants] of Object.entries(components)) {
+  console.log(name);
+
+  for (const variant of variants) {
+    console.log(`  - ${variant}`);
+  }
+
+  console.log("");
+}

package/src/generators/component.js

@@ -0,0 +1,65 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { startSpinner } from "../utils/spinner.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const FILE_NAMES = {
+  html: {
+    header: "header.html",
+    hero: "hero.html",
+    footer: "footer.html",
+  },
+  react: {
+    header: "Header.jsx",
+    hero: "Hero.jsx",
+    footer: "Footer.jsx",
+  },
+};
+
+function getTemplatePath(framework, type, variant) {
+  return path.join(
+    __dirname,
+    "..",
+    "templates",
+    framework,
+    type,
+    `${variant}.${framework === "react" ? "jsx" : "html"}`,
+  );
+}
+
+function getOutputPath(framework, type, target) {
+  return path.join(
+    target,
+    "src",
+    "components",
+    FILE_NAMES[framework][type],
+  );
+}
+
+export async function generateComponent({
+  framework,
+  type,
+  variant,
+  target,
+}) {
+  const templatePath = getTemplatePath(framework, type, variant);
+  const outputPath = getOutputPath(framework, type, target);
+
+  const spinner = startSpinner(`Adding ${type}...`);
+
+  try {
+    const template = await fs.readFile(templatePath, "utf8");
+
+    await fs.mkdir(path.dirname(outputPath), {
+      recursive: true,
+    });
+
+    await fs.writeFile(outputPath, template, "utf8");
+  } finally {
+    spinner();
+  }
+
+  console.log(`✓ Created ${path.relative(target, outputPath)}`);
+}

package/src/templates/html/footer/copyright-navigation.html

@@ -0,0 +1,11 @@
+<footer class="border-t border-gray-200 px-6 py-6">
+  <div class="mx-auto flex max-w-7xl items-center justify-between">
+    <p class="text-sm text-gray-500">© 2026 Your Company. All rights reserved.</p>
+
+    <nav class="flex gap-6">
+      <a href="#" class="text-sm text-gray-500 hover:text-black">About</a>
+      <a href="#" class="text-sm text-gray-500 hover:text-black">Projects</a>
+      <a href="#" class="text-sm text-gray-500 hover:text-black">Contact</a>
+    </nav>
+  </div>
+</footer>

package/src/templates/html/footer/copyright-social.html

@@ -0,0 +1,11 @@
+<footer class="border-t border-gray-200 px-6 py-6">
+  <div class="mx-auto flex max-w-7xl items-center justify-between">
+    <p class="text-sm text-gray-500">© 2026 Your Company. All rights reserved.</p>
+
+    <div class="flex gap-4">
+      <a href="#" class="text-sm text-gray-500 hover:text-black">GitHub</a>
+      <a href="#" class="text-sm text-gray-500 hover:text-black">LinkedIn</a>
+      <a href="#" class="text-sm text-gray-500 hover:text-black">X</a>
+    </div>
+  </div>
+</footer>

package/src/templates/html/footer/copyright.html

@@ -0,0 +1,5 @@
+<footer class="border-t border-gray-200 px-6 py-6">
+  <p class="text-center text-sm text-gray-500">
+    © 2026 Your Company. All rights reserved.
+  </p>
+</footer>

package/src/templates/html/header/logo-navigation-cta.html

@@ -0,0 +1,15 @@
+<header class="border-b border-gray-200">
+  <nav class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
+    <a href="/" class="text-xl font-semibold">Logo</a>
+
+    <div class="flex items-center gap-6">
+      <a href="#" class="text-sm text-gray-700 hover:text-black">Home</a>
+      <a href="#" class="text-sm text-gray-700 hover:text-black">About</a>
+      <a href="#" class="text-sm text-gray-700 hover:text-black">Projects</a>
+      <a href="#" class="text-sm text-gray-700 hover:text-black">Contact</a>
+      <a href="#" class="rounded-lg bg-black px-4 py-2 text-sm font-medium text-white">
+        Get Started
+      </a>
+    </div>
+  </nav>
+</header>

package/src/templates/html/header/logo-navigation.html

@@ -0,0 +1,12 @@
+<header class="border-b border-gray-200">
+  <nav class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
+    <a href="/" class="text-xl font-semibold">Logo</a>
+
+    <div class="flex items-center gap-6">
+      <a href="#" class="text-sm text-gray-700 hover:text-black">Home</a>
+      <a href="#" class="text-sm text-gray-700 hover:text-black">About</a>
+      <a href="#" class="text-sm text-gray-700 hover:text-black">Projects</a>
+      <a href="#" class="text-sm text-gray-700 hover:text-black">Contact</a>
+    </div>
+  </nav>
+</header>

package/src/templates/html/header/navigation-only.html

@@ -0,0 +1,8 @@
+<header class="border-b border-gray-200">
+  <nav class="mx-auto flex max-w-7xl items-center justify-center gap-6 px-6 py-4">
+    <a href="#" class="text-sm text-gray-700 hover:text-black">Home</a>
+    <a href="#" class="text-sm text-gray-700 hover:text-black">About</a>
+    <a href="#" class="text-sm text-gray-700 hover:text-black">Projects</a>
+    <a href="#" class="text-sm text-gray-700 hover:text-black">Contact</a>
+  </nav>
+</header>

package/src/templates/html/hero/heading-description-button-image.html

@@ -0,0 +1,17 @@
+<section class="px-6 py-24">
+  <div class="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-2">
+    <div>
+      <h1 class="text-5xl font-bold tracking-tight">Build something great.</h1>
+
+      <p class="mt-6 max-w-xl text-lg text-gray-600">
+        A simple description for your project goes here.
+      </p>
+
+      <a href="#" class="mt-8 inline-block rounded-lg bg-black px-6 py-3 font-medium text-white">
+        Get Started
+      </a>
+    </div>
+
+    <div class="aspect-video rounded-2xl bg-gray-100"></div>
+  </div>
+</section>

package/src/templates/html/hero/heading-description-button.html

@@ -0,0 +1,13 @@
+<section class="px-6 py-24">
+  <div class="mx-auto max-w-4xl text-center">
+    <h1 class="text-5xl font-bold tracking-tight">Build something great.</h1>
+
+    <p class="mx-auto mt-6 max-w-2xl text-lg text-gray-600">
+      A simple description for your project goes here.
+    </p>
+
+    <a href="#" class="mt-8 inline-block rounded-lg bg-black px-6 py-3 font-medium text-white">
+      Get Started
+    </a>
+  </div>
+</section>

package/src/templates/html/hero/heading-description.html

@@ -0,0 +1,9 @@
+<section class="px-6 py-24">
+  <div class="mx-auto max-w-4xl text-center">
+    <h1 class="text-5xl font-bold tracking-tight">Build something great.</h1>
+
+    <p class="mx-auto mt-6 max-w-2xl text-lg text-gray-600">
+      A simple description for your project goes here.
+    </p>
+  </div>
+</section>

package/src/templates/react/footer/copyright-navigation.jsx

@@ -0,0 +1,15 @@
+export default function Footer() {
+  return (
+    <footer className="border-t border-gray-200 px-6 py-6">
+      <div className="mx-auto flex max-w-7xl items-center justify-between">
+        <p className="text-sm text-gray-500">© 2026 Your Company. All rights reserved.</p>
+
+        <nav className="flex gap-6">
+          <a href="#" className="text-sm text-gray-500 hover:text-black">About</a>
+          <a href="#" className="text-sm text-gray-500 hover:text-black">Projects</a>
+          <a href="#" className="text-sm text-gray-500 hover:text-black">Contact</a>
+        </nav>
+      </div>
+    </footer>
+  );
+}

package/src/templates/react/footer/copyright-social.jsx

@@ -0,0 +1,15 @@
+export default function Footer() {
+  return (
+    <footer className="border-t border-gray-200 px-6 py-6">
+      <div className="mx-auto flex max-w-7xl items-center justify-between">
+        <p className="text-sm text-gray-500">© 2026 Your Company. All rights reserved.</p>
+
+        <div className="flex gap-4">
+          <a href="#" className="text-sm text-gray-500 hover:text-black">GitHub</a>
+          <a href="#" className="text-sm text-gray-500 hover:text-black">LinkedIn</a>
+          <a href="#" className="text-sm text-gray-500 hover:text-black">X</a>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/src/templates/react/footer/copyright.jsx

@@ -0,0 +1,9 @@
+export default function Footer() {
+  return (
+    <footer className="border-t border-gray-200 px-6 py-6">
+      <p className="text-center text-sm text-gray-500">
+        © 2026 Your Company. All rights reserved.
+      </p>
+    </footer>
+  );
+}

package/src/templates/react/header/logo-navigation-cta.jsx

@@ -0,0 +1,19 @@
+export default function Header() {
+  return (
+    <header className="border-b border-gray-200">
+      <nav className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
+        <a href="/" className="text-xl font-semibold">Logo</a>
+
+        <div className="flex items-center gap-6">
+          <a href="#" className="text-sm text-gray-700 hover:text-black">Home</a>
+          <a href="#" className="text-sm text-gray-700 hover:text-black">About</a>
+          <a href="#" className="text-sm text-gray-700 hover:text-black">Projects</a>
+          <a href="#" className="text-sm text-gray-700 hover:text-black">Contact</a>
+          <a href="#" className="rounded-lg bg-black px-4 py-2 text-sm font-medium text-white">
+            Get Started
+          </a>
+        </div>
+      </nav>
+    </header>
+  );
+}

package/src/templates/react/header/logo-navigation.jsx

@@ -0,0 +1,16 @@
+export default function Header() {
+  return (
+    <header className="border-b border-gray-200">
+      <nav className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
+        <a href="/" className="text-xl font-semibold">Logo</a>
+
+        <div className="flex items-center gap-6">
+          <a href="#" className="text-sm text-gray-700 hover:text-black">Home</a>
+          <a href="#" className="text-sm text-gray-700 hover:text-black">About</a>
+          <a href="#" className="text-sm text-gray-700 hover:text-black">Projects</a>
+          <a href="#" className="text-sm text-gray-700 hover:text-black">Contact</a>
+        </div>
+      </nav>
+    </header>
+  );
+}

package/src/templates/react/header/navigation-only.jsx

@@ -0,0 +1,12 @@
+export default function Header() {
+  return (
+    <header className="border-b border-gray-200">
+      <nav className="mx-auto flex max-w-7xl items-center justify-center gap-6 px-6 py-4">
+        <a href="#" className="text-sm text-gray-700 hover:text-black">Home</a>
+        <a href="#" className="text-sm text-gray-700 hover:text-black">About</a>
+        <a href="#" className="text-sm text-gray-700 hover:text-black">Projects</a>
+        <a href="#" className="text-sm text-gray-700 hover:text-black">Contact</a>
+      </nav>
+    </header>
+  );
+}

package/src/templates/react/hero/heading-description-button-image.jsx

@@ -0,0 +1,21 @@
+export default function Hero() {
+  return (
+    <section className="px-6 py-24">
+      <div className="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-2">
+        <div>
+          <h1 className="text-5xl font-bold tracking-tight">Build something great.</h1>
+
+          <p className="mt-6 max-w-xl text-lg text-gray-600">
+            A simple description for your project goes here.
+          </p>
+
+          <a href="#" className="mt-8 inline-block rounded-lg bg-black px-6 py-3 font-medium text-white">
+            Get Started
+          </a>
+        </div>
+
+        <div className="aspect-video rounded-2xl bg-gray-100"></div>
+      </div>
+    </section>
+  );
+}

package/src/templates/react/hero/heading-description-button.jsx

@@ -0,0 +1,17 @@
+export default function Hero() {
+  return (
+    <section className="px-6 py-24">
+      <div className="mx-auto max-w-4xl text-center">
+        <h1 className="text-5xl font-bold tracking-tight">Build something great.</h1>
+
+        <p className="mx-auto mt-6 max-w-2xl text-lg text-gray-600">
+          A simple description for your project goes here.
+        </p>
+
+        <a href="#" className="mt-8 inline-block rounded-lg bg-black px-6 py-3 font-medium text-white">
+          Get Started
+        </a>
+      </div>
+    </section>
+  );
+}

package/src/templates/react/hero/heading-description.jsx

@@ -0,0 +1,13 @@
+export default function Hero() {
+  return (
+    <section className="px-6 py-24">
+      <div className="mx-auto max-w-4xl text-center">
+        <h1 className="text-5xl font-bold tracking-tight">Build something great.</h1>
+
+        <p className="mx-auto mt-6 max-w-2xl text-lg text-gray-600">
+          A simple description for your project goes here.
+        </p>
+      </div>
+    </section>
+  );
+}

package/src/utils/spinner.js

@@ -0,0 +1,30 @@
+const FRAMES = [
+  "⠋",
+  "⠙",
+  "⠹",
+  "⠸",
+  "⠼",
+  "⠴",
+  "⠦",
+  "⠧",
+  "⠇",
+  "⠏",
+];
+
+export function startSpinner(message) {
+  let frame = 0;
+
+  process.stdout.write(`${FRAMES[frame]} ${message}`);
+
+  const interval = setInterval(() => {
+    frame = (frame + 1) % FRAMES.length;
+
+    process.stdout.write("\r");
+    process.stdout.write(`${FRAMES[frame]} ${message}`);
+  }, 80);
+
+  return () => {
+    clearInterval(interval);
+    process.stdout.write("\r\x1b[K");
+  };
+}