scaff-ui 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +171 -170
  2. package/package.json +4 -3
  3. package/src/templates/react/header/logo-navigation-cta.jsx +19 -6
  4. package/src/templates/react/text-area/actions-inside.jsx +35 -0
  5. package/src/templates/react/text-area/actions-outside.jsx +35 -0
package/README.md CHANGED
@@ -1,170 +1,171 @@
1
- # scaff-ui
2
-
3
- A lightweight CLI for generating simple, ready-made frontend components.
4
-
5
- `scaff-ui` provides common frontend structures such as headers, heroes, and footers using Tailwind CSS. Generated components are intentionally simple, editable, and easy to adapt to your project.
6
-
7
- ## Features
8
-
9
- * Generate ready-made frontend components
10
- * Supports HTML and React
11
- * Multiple variants for each component
12
- * Uses Tailwind CSS utility classes
13
- * Generates directly into `src/components`
14
- * No project setup or configuration required
15
- * No unnecessary abstractions
16
-
17
- ## Requirements
18
-
19
- * Node.js 20 or later
20
- * An existing frontend project
21
- * Tailwind CSS already installed and configured
22
-
23
- `scaff-ui` does not install or configure Tailwind CSS, React, Vite, or other build tools.
24
-
25
- ## Installation
26
-
27
- Install `scaff-ui` in your existing frontend project:
28
-
29
- ```bash
30
- npm install scaff-ui
31
- ```
32
-
33
- ## Usage
34
-
35
- Run the interactive component generator from your project's root directory:
36
-
37
- ```bash
38
- npx scf add
39
- ```
40
-
41
- You will be prompted to select a framework, component, and variant:
42
-
43
- ```text
44
- ? Select Framework
45
- ❯ HTML
46
- React
47
-
48
- ? Select Component
49
- ❯ Header
50
- Hero
51
- Footer
52
-
53
- ? Select Variant
54
- ❯ Logo + Navigation Links
55
- Logo + Navigation Links + CTA Button
56
- Navigation Links Only
57
- ```
58
-
59
- You can also specify a component directly:
60
-
61
- ```bash
62
- npx scf add header
63
- npx scf add hero
64
- npx scf add footer
65
- ```
66
-
67
- To view available components:
68
-
69
- ```bash
70
- npx scf list
71
- ```
72
-
73
- ## Generated Files
74
-
75
- Components are generated inside your project's `src/components` directory.
76
-
77
- ### React
78
-
79
- ```text
80
- src/
81
- └── components/
82
- ├── Header.jsx
83
- ├── Hero.jsx
84
- └── Footer.jsx
85
- ```
86
-
87
- ### HTML
88
-
89
- ```text
90
- src/
91
- └── components/
92
- ├── header.html
93
- ├── hero.html
94
- └── footer.html
95
- ```
96
-
97
- ## Components
98
-
99
- ### Header
100
-
101
- Available variants:
102
-
103
- * Logo + Navigation Links
104
- * Logo + Navigation Links + CTA Button
105
- * Navigation Links Only
106
-
107
- ### Hero
108
-
109
- Available variants:
110
-
111
- * Heading + Description + Button
112
- * Heading + Description + Button + Image
113
- * Heading + Description Only
114
-
115
- ### Footer
116
-
117
- Available variants:
118
-
119
- * Copyright Only
120
- * Copyright + Navigation Links
121
- * Copyright + Social Links
122
-
123
- ## Tailwind CSS
124
-
125
- Generated components use Tailwind CSS utility classes.
126
-
127
- `scaff-ui` assumes Tailwind CSS is already installed and configured in your project.
128
-
129
- It does not:
130
-
131
- * Install Tailwind CSS
132
- * Configure Tailwind CSS
133
- * Install React
134
- * Configure Vite
135
- * Create a project
136
- * Manage build tools
137
-
138
- This keeps `scaff-ui` focused on generating frontend source code.
139
-
140
- ## Development
141
-
142
- Clone the repository and install dependencies:
143
-
144
- ```bash
145
- git clone https://github.com/carleoj/scaff-ui.git
146
- cd scaff-ui
147
- npm install
148
- ```
149
-
150
- Link the package locally:
151
-
152
- ```bash
153
- npm link
154
- ```
155
-
156
- You can then use the `scf` command while developing:
157
-
158
- ```bash
159
- scf add
160
- ```
161
-
162
- Run tests with:
163
-
164
- ```bash
165
- npm test
166
- ```
167
-
168
- ## License
169
-
170
- MIT
1
+ # scaff-ui
2
+
3
+ Scaffold the UI. Make it your design.
4
+
5
+ A minimalistic CLI for generating customizable Tailwind CSS components directly into your project.
6
+
7
+ [Website](https://scaff-ui-site.jimroep.workers.dev) · [GitHub](https://github.com/carleoj/scaff-ui)
8
+
9
+ ## Features
10
+
11
+ - Generate ready-made frontend components
12
+ - Supports React and HTML
13
+ - Multiple variants for each component
14
+ - Built with Tailwind CSS
15
+ - Generates directly into `src/components`
16
+ - No unnecessary abstractions
17
+
18
+ ## Requirements
19
+
20
+ - Node.js 20+
21
+ - An existing frontend project
22
+ - Tailwind CSS installed and configured
23
+
24
+ `scaff-ui` does not install or configure Tailwind CSS, React, Vite, or other build tools.
25
+
26
+ ## Installation
27
+
28
+ Install `scaff-ui` in your existing project:
29
+
30
+ ```bash
31
+ npm install scaff-ui
32
+ ```
33
+
34
+ ## Usage
35
+
36
+ Run the interactive generator:
37
+
38
+ ```bash
39
+ npx scf add
40
+ ```
41
+
42
+ Select a framework, component, and variant:
43
+
44
+ ```text
45
+ ? Select Framework
46
+ ❯ HTML
47
+ React
48
+
49
+ ? Select Component
50
+ ❯ Header
51
+ Hero
52
+ Footer
53
+
54
+ ? Select Variant
55
+ ❯ Logo + Navigation Links
56
+ Logo + Navigation Links + CTA Button
57
+ Navigation Links Only
58
+ ```
59
+
60
+ You can also generate a specific component directly:
61
+
62
+ ```bash
63
+ npx scf add header
64
+ npx scf add hero
65
+ npx scf add footer
66
+ ```
67
+
68
+ View available components:
69
+
70
+ ```bash
71
+ npx scf list
72
+ ```
73
+
74
+ ## Generated Files
75
+
76
+ Components are generated into your project's `src/components` directory.
77
+
78
+ ### React
79
+
80
+ ```text
81
+ src/
82
+ └── components/
83
+ ├── Header.jsx
84
+ ├── Hero.jsx
85
+ └── Footer.jsx
86
+ ```
87
+
88
+ ### HTML
89
+
90
+ ```text
91
+ src/
92
+ └── components/
93
+ ├── header.html
94
+ ├── hero.html
95
+ └── footer.html
96
+ ```
97
+
98
+ ## Components
99
+
100
+ ### Header
101
+
102
+ Available variants:
103
+
104
+ - Logo + Navigation Links
105
+ - Logo + Navigation Links + CTA Button
106
+ - Navigation Links Only
107
+
108
+ ### Hero
109
+
110
+ Available variants:
111
+
112
+ - Heading + Description + Button
113
+ - Heading + Description + Button + Image
114
+ - Heading + Description Only
115
+
116
+ ### Footer
117
+
118
+ Available variants:
119
+
120
+ - Copyright Only
121
+ - Copyright + Navigation Links
122
+ - Copyright + Social Links
123
+
124
+ ## Tailwind CSS
125
+
126
+ Generated components use Tailwind CSS utility classes.
127
+
128
+ Scaff UI assumes Tailwind CSS is already installed and configured in your project.
129
+
130
+ It does not:
131
+
132
+ - Install Tailwind CSS
133
+ - Configure Tailwind CSS
134
+ - Install React
135
+ - Configure Vite
136
+ - Create a project
137
+ - Manage build tools
138
+
139
+ Scaff UI focuses on generating frontend source code that you can modify freely.
140
+
141
+ ## Development
142
+
143
+ Clone the repository:
144
+
145
+ ```bash
146
+ git clone https://github.com/carleoj/scaff-ui.git
147
+ cd scaff-ui
148
+ npm install
149
+ ```
150
+
151
+ Link the package locally:
152
+
153
+ ```bash
154
+ npm link
155
+ ```
156
+
157
+ Run the CLI:
158
+
159
+ ```bash
160
+ scf add
161
+ ```
162
+
163
+ Run tests:
164
+
165
+ ```bash
166
+ npm test
167
+ ```
168
+
169
+ ## License
170
+
171
+ MIT
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "scaff-ui",
3
- "version": "0.1.1",
4
- "description": "A lightweight CLI for generating simple, ready-made frontend components.",
3
+ "version": "0.1.3",
4
+ "description": "A minimalistic CLI for generating customizable Tailwind CSS components directly into your project.",
5
+ "type": "module",
5
6
  "bin": {
6
7
  "scf": "./bin/scf.js"
7
8
  },
@@ -26,7 +27,7 @@
26
27
  "bugs": {
27
28
  "url": "https://github.com/carleoj/scaff-ui/issues"
28
29
  },
29
- "homepage": "https://github.com/carleoj/scaff-ui#readme",
30
+ "homepage": "https://scaff-ui-site.jimroep.workers.dev",
30
31
  "engines": {
31
32
  "node": ">=20"
32
33
  },
package/src/templates/react/header/logo-navigation-cta.jsx CHANGED
@@ -2,14 +2,27 @@ export default function Header() {
2
2
  return (
3
3
  <header className="border-b border-gray-200">
4
4
  <nav className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
5
- <a href="/" className="text-xl font-semibold">Logo</a>
5
+ <a href="/" className="text-xl font-semibold">
6
+ Logo
7
+ </a>
6
8
 
7
9
  <div className="flex items-center gap-6">
8
- <a href="#" className="text-sm text-gray-700 hover:text-black">Home</a>
9
- <a href="#" className="text-sm text-gray-700 hover:text-black">About</a>
10
- <a href="#" className="text-sm text-gray-700 hover:text-black">Projects</a>
11
- <a href="#" className="text-sm text-gray-700 hover:text-black">Contact</a>
12
- <a href="#" className="rounded-lg bg-black px-4 py-2 text-sm font-medium text-white">
10
+ <a href="#" className="text-sm text-gray-700 hover:text-black">
11
+ Home
12
+ </a>
13
+ <a href="#" className="text-sm text-gray-700 hover:text-black">
14
+ About
15
+ </a>
16
+ <a href="#" className="text-sm text-gray-700 hover:text-black">
17
+ Projects
18
+ </a>
19
+ <a href="#" className="text-sm text-gray-700 hover:text-black">
20
+ Contact
21
+ </a>
22
+ <a
23
+ href="#"
24
+ className="rounded-lg bg-black px-4 py-2 text-sm font-medium text-white"
25
+ >
13
26
  Get Started
14
27
  </a>
15
28
  </div>
package/src/templates/react/text-area/actions-inside.jsx ADDED
@@ -0,0 +1,35 @@
1
+ import React from "react";
2
+
3
+ export default function TextArea() {
4
+ return (
5
+ <div className="mx-auto max-w-sm">
6
+ <label htmlFor="Notes">
7
+ <span className="text-sm font-medium text-gray-700">Notes</span>
8
+
9
+ <div className="relative mt-0.5 overflow-hidden rounded border border-gray-300 shadow-sm focus-within:ring focus-within:ring-blue-600">
10
+ <textarea
11
+ id="Notes"
12
+ className="w-full resize-none border-none outline-none focus:ring-0 sm:text-sm"
13
+ rows="4"
14
+ />
15
+
16
+ <div className="flex items-center justify-end gap-2 p-1.5">
17
+ <button
18
+ type="button"
19
+ className="rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900"
20
+ >
21
+ Clear
22
+ </button>
23
+
24
+ <button
25
+ type="button"
26
+ 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"
27
+ >
28
+ Save
29
+ </button>
30
+ </div>
31
+ </div>
32
+ </label>
33
+ </div>
34
+ );
35
+ }
package/src/templates/react/text-area/actions-outside.jsx ADDED
@@ -0,0 +1,35 @@
1
+ import React from "react";
2
+
3
+ export default function TextArea() {
4
+ return (
5
+ <div className="mx-auto max-w-sm">
6
+ <label htmlFor="Notes">
7
+ <span className="text-sm font-medium text-gray-700">Notes</span>
8
+
9
+ <div className="relative mt-0.5 overflow-hidden rounded border border-gray-300 shadow-sm focus-within:ring focus-within:ring-blue-600">
10
+ <textarea
11
+ id="Notes"
12
+ className="w-full resize-none border-none outline-none focus:ring-0 sm:text-sm"
13
+ rows="4"
14
+ />
15
+ </div>
16
+ </label>
17
+
18
+ <div class="mt-2 flex items-center justify-end gap-2">
19
+ <button
20
+ type="button"
21
+ class="rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900"
22
+ >
23
+ Clear
24
+ </button>
25
+
26
+ <button
27
+ type="button"
28
+ 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"
29
+ >
30
+ Save
31
+ </button>
32
+ </div>
33
+ </div>
34
+ );
35
+ }