@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.
Files changed (2) hide show
  1. package/README.md +14 -192
  2. package/package.json +6 -1
package/README.md CHANGED
@@ -1,211 +1,33 @@
1
1
  # @puzzle-ui/create
2
2
 
3
- Create a new React application with Puzzle UI installed and configured.
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
- The CLI scaffolds a React application, configures the Puzzle theme, optionally configures Tailwind CSS, and can add the Puzzle authentication client and framework integration.
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
- - An internet connection to download framework templates and dependencies.
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
- ## Quick start
13
+ ## Create a project
14
14
 
15
- ### npm
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
- ### Bun
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
- ```bash
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
- ### Authentication returns HTTP 503
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
- The generated server bootstrap is intentionally incomplete. Configure your storage adapter, password hasher, rate limiter, session manager, MFA manager, step-up manager, cookies, CSRF policy, and trusted client IP resolver.
27
+ See the [Create documentation](https://puzzle-ui.com/docs/create) for framework-specific generated files, Tailwind setup, and Auth requirements.
206
28
 
207
- Register the resulting <code>AuthServer</code> with <code>configureAuthServer</code> from the generated server-only module.
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
- ## License
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.0",
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": {