scaff-ui 0.1.2 → 0.1.4

package/README.md

@@ -1,44 +1,57 @@
 # scaff-ui
 
-Scaffold the UI. Make it yours.
+Scaffold the UI. Make it your design.
 
-`scaff-ui` is a minimalistic CLI-based frontend component generator for developers who want to speed up development without dropping pre-made, highly opinionated UI into their projects. It generates responsive, customizable implementations of common UI patterns across multiple frontend frameworks, giving developers a practical starting point they can adapt to their project's requirements
+Scaff UI is a CLI for generating minimalistic, customizable Tailwind CSS components for frontend projects.
+
+Generate ready-made UI components directly into your project, then modify the source code and make each component fit your own design.
+
+<!-- [Website](https://scaff-ui-site.jimroep.workers.dev) · [GitHub](https://github.com/carleoj/scaff-ui) -->
 
 ## Features
 
-* Generate ready-made frontend components
-* Supports HTML and React
-* Multiple variants for each component
-* Uses Tailwind CSS utility classes
-* Generates directly into `src/components`
-* No project setup or configuration required
-* No unnecessary abstractions
+- Generate ready-made frontend components
+- Supports React and HTML
+- Multiple variants for each component
+- Built with Tailwind CSS
+- Generates directly into `src/components`
+- No unnecessary abstractions
 
 ## Requirements
 
-* Node.js 20 or later
-* An existing frontend project
-* Tailwind CSS already installed and configured
+- Node.js 20+
+- An existing frontend project
+- Tailwind CSS installed and configured
 
 `scaff-ui` does not install or configure Tailwind CSS, React, Vite, or other build tools.
 
 ## Installation
 
-Install `scaff-ui` in your existing frontend project:
+### Local installation
+
+Install `scaff-ui` in your existing project:
 
 ```bash
 npm install scaff-ui
 ```
 
+### Global installation
+
+Install scaff-ui globally to use the scf command directly:
+
+```bash
+npm install -g scaff-ui
+```
+
 ## Usage
 
-Run the interactive component generator from your project's root directory:
+Run the interactive generator:
 
 ```bash
 npx scf add
 ```
 
-You will be prompted to select a framework, component, and variant:
+Select a framework, component, and variant:
 
 ```text
 ? Select Framework
@@ -49,6 +62,8 @@ You will be prompted to select a framework, component, and variant:
 ❯ Header
   Hero
   Footer
+  Text Area
+  Newsletter
 
 ? Select Variant
 ❯ Logo + Navigation Links
@@ -56,15 +71,17 @@ You will be prompted to select a framework, component, and variant:
   Navigation Links Only
 ```
 
-You can also specify a component directly:
+You can also generate a specific component directly:
 
 ```bash
 npx scf add header
 npx scf add hero
 npx scf add footer
+npx scf add text-area
+npx scf add newsletter
 ```
 
-To view available components:
+View available components:
 
 ```bash
 npx scf list
@@ -72,7 +89,7 @@ npx scf list
 
 ## Generated Files
 
-Components are generated inside your project's `src/components` directory.
+Components are generated into your project's `src/components` directory.
 
 ### React
 
@@ -100,46 +117,59 @@ src/
 
 Available variants:
 
-* Logo + Navigation Links
-* Logo + Navigation Links + CTA Button
-* Navigation Links Only
+- Logo + Navigation Links
+- Logo + Navigation Links + CTA Button
+- Navigation Links Only
 
 ### Hero
 
 Available variants:
 
-* Heading + Description + Button
-* Heading + Description + Button + Image
-* Heading + Description Only
+- Heading + Description + Button
+- Heading + Description + Button + Image
+- Heading + Description Only
 
 ### Footer
 
 Available variants:
 
-* Copyright Only
-* Copyright + Navigation Links
-* Copyright + Social Links
+- Copyright Only
+- Copyright + Navigation Links
+- Copyright + Social Links
+
+### Text Area
+
+Available variants:
+
+- Actions Inside
+- Actions Outside
+
+### Newsletter
+
+Available variants:
+
+- Basic Newsletter
 
 ## Tailwind CSS
 
 Generated components use Tailwind CSS utility classes.
 
-`scaff-ui` assumes Tailwind CSS is already installed and configured in your project.
+Scaff UI assumes Tailwind CSS is already installed and configured in your project.
 
 It does not:
 
-* Install Tailwind CSS
-* Configure Tailwind CSS
-* Install React
-* Configure Vite
-* Create a project
-* Manage build tools
+- Install Tailwind CSS
+- Configure Tailwind CSS
+- Install React
+- Configure Vite
+- Create a project
+- Manage build tools
 
-This keeps `scaff-ui` focused on generating frontend source code.
+Scaff UI focuses on generating frontend source code that you can modify freely.
 
 ## Development
 
-Clone the repository and install dependencies:
+Clone the repository:
 
 ```bash
 git clone https://github.com/carleoj/scaff-ui.git
@@ -153,13 +183,13 @@ Link the package locally:
 npm link
 ```
 
-You can then use the `scf` command while developing:
+Run the CLI:
 
 ```bash
 scf add
 ```
 
-Run tests with:
+Run tests:
 
 ```bash
 npm test

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "scaff-ui",
-  "version": "0.1.2",
-  "description": "A lightweight CLI for generating simple, ready-made frontend components.",
+  "version": "0.1.4",
+  "description": "A minimalistic CLI for generating customizable Tailwind CSS components directly into your project.",
   "type": "module",
   "bin": {
     "scf": "./bin/scf.js"
@@ -27,7 +27,7 @@
   "bugs": {
     "url": "https://github.com/carleoj/scaff-ui/issues"
   },
-  "homepage": "https://github.com/carleoj/scaff-ui#readme",
+  "homepage": "https://scaff-ui-site.jimroep.workers.dev",
   "engines": {
     "node": ">=20"
   },

package/src/commands/add.js

@@ -9,9 +9,11 @@ const FRAMEWORKS = [
 ];
 
 const COMPONENTS = [
-  { name: "Header", value: "header" },
-  { name: "Hero", value: "hero" },
-  { name: "Footer", value: "footer" },
+  { name: "Header", value: "header", frameworks: ["html", "react"] },
+  { name: "Hero", value: "hero", frameworks: ["html", "react"] },
+  { name: "Footer", value: "footer", frameworks: ["html", "react"] },
+  { name: "Text Area", value: "text-area", frameworks: ["html", "react"] },
+  { name: "Newsletter", value: "newsletter", frameworks: ["html", "react"] },
 ];
 
 const VARIANTS = {
@@ -44,6 +46,15 @@ const VARIANTS = {
     },
     { name: "Copyright + Social Links", value: "copyright-social" },
   ],
+
+  "text-area": [
+    { name: "Actions Inside", value: "actions-inside" },
+    { name: "Actions Outside", value: "actions-outside" },
+  ],
+
+  newsletter: [
+    { name: "Basic Newsletter", value: "basic-newsletter" },
+  ],
 };
 
 const requestedComponent = process.argv[3];
@@ -67,16 +78,26 @@ async function addComponent() {
     process.exit(1);
   }
 
+  const requestedDefinition = COMPONENTS.find(
+    (component) => component.value === requestedComponent,
+  );
+
   const framework = await select({
     message: "Select Framework",
-    choices: FRAMEWORKS,
+    choices: requestedDefinition
+      ? FRAMEWORKS.filter((frameworkOption) =>
+          requestedDefinition.frameworks.includes(frameworkOption.value),
+        )
+      : FRAMEWORKS,
   });
 
   const type =
     requestedComponent ??
     (await select({
       message: "Select Component",
-      choices: COMPONENTS,
+      choices: COMPONENTS.filter((component) =>
+        component.frameworks.includes(framework),
+      ),
     }));
 
   if (!VARIANTS[type]) {

package/src/commands/list.js

@@ -14,6 +14,13 @@ const components = {
     "Copyright + Navigation Links",
     "Copyright + Social Links",
   ],
+  "Text Area": [
+    "Actions Inside",
+    "Actions Outside",
+  ],
+  Newsletter: [
+    "Basic Newsletter",
+  ],
 };
 
 console.log("Available components:");

package/src/generators/component.js

@@ -10,11 +10,15 @@ const FILE_NAMES = {
     header: "header.html",
     hero: "hero.html",
     footer: "footer.html",
+    "text-area": "text-area.html",
+    newsletter: "newsletter.html",
   },
   react: {
     header: "Header.jsx",
     hero: "Hero.jsx",
     footer: "Footer.jsx",
+    "text-area": "TextArea.jsx",
+    newsletter: "Newsletter.jsx",
   },
 };
 

package/src/templates/html/newsletter/basic-newsletter.html

@@ -0,0 +1,30 @@
+<section class="mx-auto w-full max-w-xl rounded-2xl border border-gray-200 bg-zinc-50 p-8 text-center sm:p-10">
+  <h2 class="text-3xl font-bold tracking-tight text-gray-950">
+    Stay in the loop
+  </h2>
+
+  <p class="mx-auto mt-4 max-w-lg text-lg leading-7 text-gray-700">
+    Subscribe to our newsletter for updates, new releases, and useful resources.
+  </p>
+
+  <form class="mt-8">
+    <label for="email" class="sr-only">Email address</label>
+
+    <input
+      id="email"
+      type="email"
+      placeholder="Enter your email"
+      class="w-full rounded-lg border border-gray-300 bg-white px-5 py-4 text-base text-gray-950 outline-none transition focus:border-gray-950 focus:ring-1 focus:ring-gray-950"
+      required
+    />
+
+    <button
+      type="submit"
+      class="mt-3 w-full rounded-lg bg-zinc-600 px-5 py-4 text-base font-semibold text-white transition hover:bg-zinc-700"
+    >
+      Subscribe
+    </button>
+  </form>
+
+  <p class="mt-6 text-sm text-gray-600">No spam. Unsubscribe anytime.</p>
+</section>

package/src/templates/html/text-area/actions-inside.html

@@ -0,0 +1,29 @@
+<div class="mx-auto max-w-sm">
+  <label for="Notes">
+    <span class="text-sm font-medium text-gray-700">Notes</span>
+
+    <div class="relative mt-0.5 overflow-hidden rounded border border-gray-300 shadow-sm focus-within:ring focus-within:ring-blue-600">
+      <textarea
+        id="Notes"
+        class="w-full resize-none border-none outline-none focus:ring-0 sm:text-sm"
+        rows="4"
+      ></textarea>
+
+      <div class="flex items-center justify-end gap-2 p-1.5">
+        <button
+          type="button"
+          class="rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900"
+        >
+          Clear
+        </button>
+
+        <button
+          type="button"
+          class="rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  </label>
+</div>

package/src/templates/html/text-area/actions-outside.html

@@ -0,0 +1,29 @@
+<div class="mx-auto max-w-sm">
+  <label for="Notes">
+    <span class="text-sm font-medium text-gray-700">Notes</span>
+
+    <div class="relative mt-0.5 overflow-hidden rounded border border-gray-300 shadow-sm focus-within:ring focus-within:ring-blue-600">
+      <textarea
+        id="Notes"
+        class="w-full resize-none border-none outline-none focus:ring-0 sm:text-sm"
+        rows="4"
+      ></textarea>
+    </div>
+  </label>
+
+  <div class="mt-2 flex items-center justify-end gap-2">
+    <button
+      type="button"
+      class="rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900"
+    >
+      Clear
+    </button>
+
+    <button
+      type="button"
+      class="rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100"
+    >
+      Save
+    </button>
+  </div>
+</div>

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

@@ -2,14 +2,27 @@ 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>
+        <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">
+          <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>

package/src/templates/react/newsletter/basic-newsletter.jsx

@@ -0,0 +1,39 @@
+export default function Newsletter() {
+  return (
+    <section className="mx-auto w-full max-w-xl rounded-2xl border border-gray-200 bg-zinc-50 p-8 text-center sm:p-10">
+      <h2 className="text-3xl font-bold tracking-tight text-gray-950">
+        Stay in the loop
+      </h2>
+
+      <p className="mx-auto mt-4 max-w-lg text-lg leading-7 text-gray-700">
+        Subscribe to our newsletter for updates, new releases, and useful
+        resources.
+      </p>
+
+      <form className="mt-8">
+        <label htmlFor="email" className="sr-only">
+          Email address
+        </label>
+
+        <input
+          id="email"
+          type="email"
+          placeholder="Enter your email"
+          className="w-full rounded-lg border border-gray-300 bg-white px-5 py-4 text-base text-gray-950 outline-none transition focus:border-gray-950 focus:ring-1 focus:ring-gray-950"
+          required
+        />
+
+        <button
+          type="submit"
+          className="mt-3 w-full rounded-lg bg-zinc-600 px-5 py-4 text-base font-semibold text-white transition hover:bg-zinc-700"
+        >
+          Subscribe
+        </button>
+      </form>
+
+      <p className="mt-6 text-sm text-gray-600">
+        No spam. Unsubscribe anytime.
+      </p>
+    </section>
+  );
+}

package/src/templates/react/text-area/actions-inside.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+export default function TextArea() {
+  return (
+    <div className="mx-auto max-w-sm">
+      <label htmlFor="Notes">
+        <span className="text-sm font-medium text-gray-700">Notes</span>
+
+        <div className="relative mt-0.5 overflow-hidden rounded border border-gray-300 shadow-sm focus-within:ring focus-within:ring-blue-600">
+          <textarea
+            id="Notes"
+            className="w-full resize-none border-none outline-none focus:ring-0 sm:text-sm"
+            rows="4"
+          />
+
+          <div className="flex items-center justify-end gap-2 p-1.5">
+            <button
+              type="button"
+              className="rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900"
+            >
+              Clear
+            </button>
+
+            <button
+              type="button"
+              className="rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100"
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      </label>
+    </div>
+  );
+}

package/src/templates/react/text-area/actions-outside.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+export default function TextArea() {
+  return (
+    <div className="mx-auto max-w-sm">
+      <label htmlFor="Notes">
+        <span className="text-sm font-medium text-gray-700">Notes</span>
+
+        <div className="relative mt-0.5 overflow-hidden rounded border border-gray-300 shadow-sm focus-within:ring focus-within:ring-blue-600">
+          <textarea
+            id="Notes"
+            className="w-full resize-none border-none outline-none focus:ring-0 sm:text-sm"
+            rows="4"
+          />
+        </div>
+      </label>
+
+      <div className="mt-2 flex items-center justify-end gap-2">
+        <button
+          type="button"
+          className="rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900"
+        >
+          Clear
+        </button>
+
+        <button
+          type="button"
+          className="rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  );
+}