scaff-ui 0.1.2 → 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 +39 -38
  2. package/package.json +3 -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,30 +1,31 @@
1
1
  # scaff-ui
2
2
 
3
- Scaffold the UI. Make it yours.
3
+ Scaffold the UI. Make it your design.
4
4
 
5
- `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
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)
6
8
 
7
9
  ## Features
8
10
 
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
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
16
17
 
17
18
  ## Requirements
18
19
 
19
- * Node.js 20 or later
20
- * An existing frontend project
21
- * Tailwind CSS already installed and configured
20
+ - Node.js 20+
21
+ - An existing frontend project
22
+ - Tailwind CSS installed and configured
22
23
 
23
24
  `scaff-ui` does not install or configure Tailwind CSS, React, Vite, or other build tools.
24
25
 
25
26
  ## Installation
26
27
 
27
- Install `scaff-ui` in your existing frontend project:
28
+ Install `scaff-ui` in your existing project:
28
29
 
29
30
  ```bash
30
31
  npm install scaff-ui
@@ -32,13 +33,13 @@ npm install scaff-ui
32
33
 
33
34
  ## Usage
34
35
 
35
- Run the interactive component generator from your project's root directory:
36
+ Run the interactive generator:
36
37
 
37
38
  ```bash
38
39
  npx scf add
39
40
  ```
40
41
 
41
- You will be prompted to select a framework, component, and variant:
42
+ Select a framework, component, and variant:
42
43
 
43
44
  ```text
44
45
  ? Select Framework
@@ -56,7 +57,7 @@ You will be prompted to select a framework, component, and variant:
56
57
  Navigation Links Only
57
58
  ```
58
59
 
59
- You can also specify a component directly:
60
+ You can also generate a specific component directly:
60
61
 
61
62
  ```bash
62
63
  npx scf add header
@@ -64,7 +65,7 @@ npx scf add hero
64
65
  npx scf add footer
65
66
  ```
66
67
 
67
- To view available components:
68
+ View available components:
68
69
 
69
70
  ```bash
70
71
  npx scf list
@@ -72,7 +73,7 @@ npx scf list
72
73
 
73
74
  ## Generated Files
74
75
 
75
- Components are generated inside your project's `src/components` directory.
76
+ Components are generated into your project's `src/components` directory.
76
77
 
77
78
  ### React
78
79
 
@@ -100,46 +101,46 @@ src/
100
101
 
101
102
  Available variants:
102
103
 
103
- * Logo + Navigation Links
104
- * Logo + Navigation Links + CTA Button
105
- * Navigation Links Only
104
+ - Logo + Navigation Links
105
+ - Logo + Navigation Links + CTA Button
106
+ - Navigation Links Only
106
107
 
107
108
  ### Hero
108
109
 
109
110
  Available variants:
110
111
 
111
- * Heading + Description + Button
112
- * Heading + Description + Button + Image
113
- * Heading + Description Only
112
+ - Heading + Description + Button
113
+ - Heading + Description + Button + Image
114
+ - Heading + Description Only
114
115
 
115
116
  ### Footer
116
117
 
117
118
  Available variants:
118
119
 
119
- * Copyright Only
120
- * Copyright + Navigation Links
121
- * Copyright + Social Links
120
+ - Copyright Only
121
+ - Copyright + Navigation Links
122
+ - Copyright + Social Links
122
123
 
123
124
  ## Tailwind CSS
124
125
 
125
126
  Generated components use Tailwind CSS utility classes.
126
127
 
127
- `scaff-ui` assumes Tailwind CSS is already installed and configured in your project.
128
+ Scaff UI assumes Tailwind CSS is already installed and configured in your project.
128
129
 
129
130
  It does not:
130
131
 
131
- * Install Tailwind CSS
132
- * Configure Tailwind CSS
133
- * Install React
134
- * Configure Vite
135
- * Create a project
136
- * Manage build tools
132
+ - Install Tailwind CSS
133
+ - Configure Tailwind CSS
134
+ - Install React
135
+ - Configure Vite
136
+ - Create a project
137
+ - Manage build tools
137
138
 
138
- This keeps `scaff-ui` focused on generating frontend source code.
139
+ Scaff UI focuses on generating frontend source code that you can modify freely.
139
140
 
140
141
  ## Development
141
142
 
142
- Clone the repository and install dependencies:
143
+ Clone the repository:
143
144
 
144
145
  ```bash
145
146
  git clone https://github.com/carleoj/scaff-ui.git
@@ -153,13 +154,13 @@ Link the package locally:
153
154
  npm link
154
155
  ```
155
156
 
156
- You can then use the `scf` command while developing:
157
+ Run the CLI:
157
158
 
158
159
  ```bash
159
160
  scf add
160
161
  ```
161
162
 
162
- Run tests with:
163
+ Run tests:
163
164
 
164
165
  ```bash
165
166
  npm test
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "scaff-ui",
3
- "version": "0.1.2",
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
5
  "type": "module",
6
6
  "bin": {
7
7
  "scf": "./bin/scf.js"
@@ -27,7 +27,7 @@
27
27
  "bugs": {
28
28
  "url": "https://github.com/carleoj/scaff-ui/issues"
29
29
  },
30
- "homepage": "https://github.com/carleoj/scaff-ui#readme",
30
+ "homepage": "https://scaff-ui-site.jimroep.workers.dev",
31
31
  "engines": {
32
32
  "node": ">=20"
33
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
+ }