@puzzle-ui/create 0.5.0 → 0.5.1
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.
- package/README.md +14 -192
- package/package.json +6 -1
package/README.md
CHANGED
|
@@ -1,211 +1,33 @@
|
|
|
1
1
|
# @puzzle-ui/create
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Generate a new React application with Puzzle UI and Theme configured. Choose Next.js, TanStack Start, or Basic React (React + Vite + TypeScript), then optionally add Tailwind CSS v4 or Puzzle Auth.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
**Documentation:** [https://puzzle-ui.com/docs/create](https://puzzle-ui.com/docs/create)
|
|
6
6
|
|
|
7
7
|
## Requirements
|
|
8
8
|
|
|
9
|
-
- Node.js 20.19 or later
|
|
10
|
-
- npm, Bun, pnpm, or Yarn
|
|
11
|
-
-
|
|
9
|
+
- Node.js 20.19 or later
|
|
10
|
+
- npm, Bun, pnpm, or Yarn
|
|
11
|
+
- Internet access to download the framework template and dependencies
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## Create a project
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
Run the interactive generator; it prompts for a project name, framework, Tailwind, and Puzzle Auth. The name is converted to kebab-case. The CLI does not overwrite an existing directory and has no command-line flags.
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
18
|
npx @puzzle-ui/create
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
Alternatives: `bunx @puzzle-ui/create`, `pnpm dlx @puzzle-ui/create`, or `yarn dlx @puzzle-ui/create` (Yarn 2+; Yarn Classic users can use `npx`).
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
bunx @puzzle-ui/create
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
### pnpm
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
pnpm dlx @puzzle-ui/create
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
### Yarn
|
|
34
|
-
|
|
35
|
-
```bash
|
|
36
|
-
yarn dlx @puzzle-ui/create
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
Yarn's <code>dlx</code> command requires Yarn 2 or later. With Yarn Classic, use <code>npx @puzzle-ui/create</code> instead.
|
|
40
|
-
|
|
41
|
-
The CLI detects the package manager from the execution environment and uses it for framework generation and dependency installation.
|
|
42
|
-
|
|
43
|
-
## Supported frameworks
|
|
44
|
-
|
|
45
|
-
| Framework | Description |
|
|
46
|
-
| -------------- | ---------------------------------- |
|
|
47
|
-
| Next.js | Next.js App Router with TypeScript |
|
|
48
|
-
| TanStack Start | Full-stack React application |
|
|
49
|
-
| Basic React | React, Vite, and TypeScript |
|
|
50
|
-
|
|
51
|
-
## Setup options
|
|
52
|
-
|
|
53
|
-
The interactive setup asks for:
|
|
54
|
-
|
|
55
|
-
1. **Project name** — converted to kebab-case and used as the project directory and package name.
|
|
56
|
-
2. **Framework** — Next.js, TanStack Start, or Basic React.
|
|
57
|
-
3. **Tailwind CSS** — optionally configures Tailwind CSS v4.
|
|
58
|
-
4. **Puzzle Auth** — optionally installs and configures the Puzzle authentication client and framework integration.
|
|
59
|
-
|
|
60
|
-
The CLI then:
|
|
61
|
-
|
|
62
|
-
1. Checks that the target directory does not already exist.
|
|
63
|
-
2. Generates the selected framework.
|
|
64
|
-
3. Configures framework package transpilation where required.
|
|
65
|
-
4. Configures the Puzzle theme provider.
|
|
66
|
-
5. Updates the generated package name.
|
|
67
|
-
6. Optionally configures and installs Tailwind CSS.
|
|
68
|
-
7. Optionally configures Puzzle Auth.
|
|
69
|
-
8. Installs the selected Puzzle packages.
|
|
70
|
-
|
|
71
|
-
The CLI does not overwrite an existing directory.
|
|
72
|
-
|
|
73
|
-
## Puzzle UI and Theme
|
|
74
|
-
|
|
75
|
-
The generated application includes:
|
|
76
|
-
|
|
77
|
-
- React 19 and TypeScript.
|
|
78
|
-
- A configured Puzzle <code>Theme</code> provider.
|
|
79
|
-
- A starter page using the Puzzle <code>Button</code> component.
|
|
80
|
-
- A framework-specific entry point and development configuration.
|
|
81
|
-
- Optional Tailwind CSS v4 integration.
|
|
82
|
-
|
|
83
|
-
## Puzzle Auth
|
|
84
|
-
|
|
85
|
-
When enabled, the generator installs:
|
|
86
|
-
|
|
87
|
-
- <code>@puzzle-ui/auth</code>
|
|
88
|
-
- <code>@puzzle-ui/fullstack</code>
|
|
89
|
-
- <code>@puzzle-ui/session</code>
|
|
90
|
-
|
|
91
|
-
The generated client integration includes:
|
|
92
|
-
|
|
93
|
-
- An <code>AuthProvider</code> configured with <code>/api/auth</code>.
|
|
94
|
-
- A sign-in page using <code>AuthExperience</code>.
|
|
95
|
-
- A sign-up page using <code>AuthExperience</code>.
|
|
96
|
-
- A framework-specific authentication API route for Next.js or TanStack Start.
|
|
97
|
-
- A server-only AuthServer registration boundary.
|
|
98
|
-
- A bootstrap function for application-specific server configuration.
|
|
99
|
-
|
|
100
|
-
### Important server setup
|
|
101
|
-
|
|
102
|
-
Puzzle Auth intentionally does not ship an insecure default password hasher, storage adapter, or production rate limiter.
|
|
103
|
-
|
|
104
|
-
You must configure the following application dependencies:
|
|
105
|
-
|
|
106
|
-
- A storage adapter with the atomicity and uniqueness capabilities required by Puzzle Auth.
|
|
107
|
-
- A secure password hashing provider.
|
|
108
|
-
- A shared, atomic rate limiter.
|
|
109
|
-
- A session manager.
|
|
110
|
-
- An MFA manager and secret protector.
|
|
111
|
-
- A step-up manager.
|
|
112
|
-
- Secure cookie and CSRF configuration.
|
|
113
|
-
- Trusted client IP resolution.
|
|
114
|
-
|
|
115
|
-
The generated API route returns HTTP 503 until the application registers an actual <code>AuthServer</code>.
|
|
116
|
-
|
|
117
|
-
This is intentional. The generator must never silently create an authentication endpoint that appears functional while using unsafe or incomplete security providers.
|
|
118
|
-
|
|
119
|
-
See the [Authentication setup guide](/docs/developer/authentication) for the required configuration.
|
|
120
|
-
|
|
121
|
-
### Basic React limitation
|
|
122
|
-
|
|
123
|
-
A Basic React project is a browser application. The generator adds the Auth provider and authentication screens, but does not create a server runtime or API route.
|
|
124
|
-
|
|
125
|
-
Host the authentication API in a separate server application and configure the Auth client's base path accordingly.
|
|
126
|
-
|
|
127
|
-
## Run your application
|
|
128
|
-
|
|
129
|
-
After creation, move into the generated project and start its development server.
|
|
130
|
-
|
|
131
|
-
```bash
|
|
132
|
-
cd my-awesome-app
|
|
133
|
-
npm run dev
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
Use the package manager selected during setup. For example, with Bun:
|
|
137
|
-
|
|
138
|
-
```bash
|
|
139
|
-
cd my-awesome-app
|
|
140
|
-
bun run dev
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
## Manual installation
|
|
144
|
-
|
|
145
|
-
Install the UI and theme packages:
|
|
146
|
-
|
|
147
|
-
```bash
|
|
148
|
-
npm install @puzzle-ui/ui @puzzle-ui/theme
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
Wrap your application in the theme provider:
|
|
152
|
-
|
|
153
|
-
```tsx
|
|
154
|
-
import { Theme } from "@puzzle-ui/theme";
|
|
155
|
-
import { Button } from "@puzzle-ui/ui";
|
|
156
|
-
|
|
157
|
-
const App = () => (
|
|
158
|
-
<Theme theme="system">
|
|
159
|
-
<main>
|
|
160
|
-
<h1>Welcome to Puzzle</h1>
|
|
161
|
-
<Button>Get started</Button>
|
|
162
|
-
</main>
|
|
163
|
-
</Theme>
|
|
164
|
-
);
|
|
165
|
-
|
|
166
|
-
export default App;
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
To add the authentication client and framework integrations:
|
|
170
|
-
|
|
171
|
-
```bash
|
|
172
|
-
npm install @puzzle-ui/auth @puzzle-ui/fullstack @puzzle-ui/session
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
See the [Authentication setup guide](/docs/developer/authentication) before exposing authentication routes.
|
|
176
|
-
|
|
177
|
-
## Compatibility
|
|
178
|
-
|
|
179
|
-
The generated templates target React 19.
|
|
180
|
-
|
|
181
|
-
Framework templates are generated using their official CLI tools. Their generated configuration can change as those tools evolve.
|
|
182
|
-
|
|
183
|
-
Puzzle is under active development and is not ready for production use. Review and test the generated application before using it in a real project.
|
|
184
|
-
|
|
185
|
-
## Troubleshooting
|
|
186
|
-
|
|
187
|
-
### The target directory already exists
|
|
188
|
-
|
|
189
|
-
Choose another project name or remove the existing directory yourself before running the CLI again. The CLI intentionally does not overwrite existing projects.
|
|
190
|
-
|
|
191
|
-
### A framework generator fails
|
|
192
|
-
|
|
193
|
-
The CLI invokes the official framework generator through your selected package manager. Check that the package manager is installed and that your environment can access the package registry.
|
|
194
|
-
|
|
195
|
-
### Dependency installation fails
|
|
196
|
-
|
|
197
|
-
Run the failed installation command manually from the generated project directory. Check the package manager output for registry, network, or version errors.
|
|
198
|
-
|
|
199
|
-
### Tailwind CSS is not configured
|
|
200
|
-
|
|
201
|
-
Tailwind is optional. If you skipped it, the generated application still works with Puzzle's own theme and component styling.
|
|
23
|
+
The generator installs `@puzzle-ui/ui` and `@puzzle-ui/theme`, adds a themed starter page with a Puzzle `Button`, and uses the detected package manager for framework generation and dependency installation. Tailwind is enabled by default; Puzzle Auth is optional and disabled by default.
|
|
202
24
|
|
|
203
|
-
|
|
25
|
+
When Auth is enabled, the CLI adds client auth components and, for Next.js and TanStack Start, an API route and server bootstrap. The generated bootstrap deliberately has no default security providers: configure the required storage, password hashing, rate limiting, sessions, MFA, step-up, cookies, CSRF, and trusted client IP handling before exposing the route. See the [Authentication setup guide](https://puzzle-ui.com/docs/developer/authentication).
|
|
204
26
|
|
|
205
|
-
|
|
27
|
+
See the [Create documentation](https://puzzle-ui.com/docs/create) for framework-specific generated files, Tailwind setup, and Auth requirements.
|
|
206
28
|
|
|
207
|
-
|
|
29
|
+
Puzzle is under active development and is not yet ready for production use. Review and test generated applications before using them in production.
|
|
208
30
|
|
|
209
|
-
##
|
|
31
|
+
## Package details
|
|
210
32
|
|
|
211
|
-
MIT
|
|
33
|
+
The published command is `create-puzzle`. The package is CLI-only; it does not provide an importable JavaScript API. License: MIT.
|
package/package.json
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@puzzle-ui/create",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "Create React applications with Puzzle UI.",
|
|
5
|
+
"homepage": "https://puzzle-ui.com",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/senorprogramador/puzzle.git"
|
|
9
|
+
},
|
|
5
10
|
"license": "MIT",
|
|
6
11
|
"type": "module",
|
|
7
12
|
"bin": {
|