scaff-ui 0.1.3 → 0.1.4

package/README.md

@@ -2,9 +2,11 @@
 
 Scaffold the UI. Make it your design.
 
-A minimalistic CLI for generating customizable Tailwind CSS components directly into your project.
+Scaff UI is a CLI for generating minimalistic, customizable Tailwind CSS components for frontend projects.
 
-[Website](https://scaff-ui-site.jimroep.workers.dev) · [GitHub](https://github.com/carleoj/scaff-ui)
+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
 
@@ -25,12 +27,22 @@ A minimalistic CLI for generating customizable Tailwind CSS components directly
 
 ## Installation
 
+### 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 generator:
@@ -50,6 +62,8 @@ Select a framework, component, and variant:
 ❯ Header
   Hero
   Footer
+  Text Area
+  Newsletter
 
 ? Select Variant
 ❯ Logo + Navigation Links
@@ -63,6 +77,8 @@ You can also generate a specific component directly:
 npx scf add header
 npx scf add hero
 npx scf add footer
+npx scf add text-area
+npx scf add newsletter
 ```
 
 View available components:
@@ -121,6 +137,19 @@ Available variants:
 - 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scaff-ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A minimalistic CLI for generating customizable Tailwind CSS components directly into your project.",
   "type": "module",
   "bin": {

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/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-outside.jsx

@@ -15,17 +15,17 @@ export default function TextArea() {
         </div>
       </label>
 
-      <div class="mt-2 flex items-center justify-end gap-2">
+      <div className="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"
+          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"
-          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"
+          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>