nextworks 0.1.0-alpha.0 → 0.1.0-alpha.10

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 (37) hide show
  1. package/README.md +61 -2
  2. package/dist/cli_manifests/auth_manifest.json +7 -1
  3. package/dist/cli_manifests/blocks_manifest.json +7 -6
  4. package/dist/cli_manifests/data_manifest.json +4 -2
  5. package/dist/cli_manifests/forms_manifest.json +6 -3
  6. package/dist/commands/blocks.d.ts +1 -0
  7. package/dist/commands/blocks.d.ts.map +1 -1
  8. package/dist/commands/blocks.js +82 -10
  9. package/dist/commands/blocks.js.map +1 -1
  10. package/dist/index.js +2 -2
  11. package/dist/index.js.map +1 -1
  12. package/dist/kits/auth-core/{README.md → .nextworks/docs/AUTH_CORE_README.md} +35 -0
  13. package/dist/kits/auth-core/.nextworks/docs/AUTH_QUICKSTART.md +244 -0
  14. package/dist/kits/auth-core/LICENSE +21 -0
  15. package/dist/kits/auth-core/app/(protected)/admin/posts/page.tsx +29 -0
  16. package/dist/kits/auth-core/app/(protected)/admin/users/page.tsx +29 -0
  17. package/dist/kits/auth-core/app/api/users/[id]/route.ts +127 -0
  18. package/dist/kits/auth-core/components/ui/button.tsx +84 -17
  19. package/dist/kits/auth-core/components/ui/input.tsx +5 -3
  20. package/dist/kits/auth-core/components/ui/label.tsx +10 -4
  21. package/dist/kits/auth-core/lib/prisma.ts +10 -0
  22. package/dist/kits/blocks/.nextworks/docs/BLOCKS_QUICKSTART.md +193 -0
  23. package/dist/kits/blocks/{README.md → .nextworks/docs/BLOCKS_README.md} +12 -0
  24. package/dist/kits/blocks/.nextworks/docs/THEME_GUIDE.md +223 -0
  25. package/dist/kits/blocks/LICENSE +21 -0
  26. package/dist/kits/data/.nextworks/docs/DATA_QUICKSTART.md +112 -0
  27. package/dist/kits/data/{README.md → .nextworks/docs/DATA_README.md} +37 -0
  28. package/dist/kits/data/LICENSE +21 -0
  29. package/dist/kits/data/lib/prisma.ts +10 -0
  30. package/dist/kits/forms/.nextworks/docs/FORMS_QUICKSTART.md +85 -0
  31. package/dist/kits/forms/{README.md → .nextworks/docs/FORMS_README.md} +12 -0
  32. package/dist/kits/forms/LICENSE +21 -0
  33. package/package.json +4 -1
  34. package/dist/.gitkeep +0 -0
  35. package/dist/kits/blocks/components/ui/button_bck.tsx +0 -93
  36. package/dist/kits/blocks/lib/themes_old.ts +0 -37
  37. package/dist/kits/blocks/notes/THEMING_CONVERSION_SUMMARY.md +0 -14
@@ -0,0 +1,193 @@
1
+ # Blocks Quickstart
2
+
3
+ This document explains the Blocks kit: prebuilt UI sections, templates and core UI primitives included in this repository. The Blocks kit is intended to be a non-invasive copyable kit (shadCN-style) you can install into any Next.js App Router + TypeScript + Tailwind project.
4
+
5
+ > **Alpha note**
6
+ > Other kits (Auth Core, Forms, Data) are currently tested and supported on top of a default Blocks install. For the smoothest experience, install Blocks first in your app before adding other kits.
7
+
8
+ > If you are using the `nextworks` CLI in your own app, you can install this Blocks kit by running:
9
+ >
10
+ > ```bash
11
+ > npx nextworks add blocks --sections --templates
12
+ > ```
13
+ >
14
+ > This installs **core UI primitives, sections, and page templates**, so the example templates work out of the box. The CLI will copy files into your project under `components/`, `app/templates/`, `lib/`, and `public/` as described below.
15
+ >
16
+ > Advanced:
17
+ >
18
+ > - `npx nextworks add blocks --ui-only` → install core UI primitives only (no sections/templates).
19
+ > - `npx nextworks add blocks --sections` → install core + sections only.
20
+ > - `npx nextworks add blocks --templates` → install core + templates only.
21
+ > - `npx nextworks add blocks --sections --templates` → install core + sections + templates.
22
+
23
+ What’s included
24
+
25
+ - Page templates (composed from sections):
26
+ - app/templates/productlaunch
27
+ - app/templates/saasdashboard
28
+ - app/templates/digitalagency
29
+ - Reusable UI sections: components/sections/\* (Navbar, Hero, Features, Pricing, Testimonials, FAQ, Contact, Footer, etc.)
30
+ - Core UI primitives: components/ui/\* (Button, Input, Card, Select, Checkbox, Switch, Theme toggle/selector, Form primitives)
31
+ - Theme helpers and presets: components/PresetThemeVars in each template and lib/themes.ts
32
+ - Global styles: app/globals.css and optional theme variables in each template's PresetThemeVars file
33
+ - Sample placeholder assets: public/placeholders/\*
34
+
35
+ Where to look
36
+
37
+ - Templates:
38
+ - app/templates/productlaunch/page.tsx (productlaunch template)
39
+ - app/templates/saasdashboard/page.tsx (saasdashboard template)
40
+ - app/templates/digitalagency/page.tsx (digital agency template)
41
+ - Sections:
42
+ - components/sections/\*.tsx
43
+ - UI primitives and form building blocks:
44
+ - components/ui/button.tsx
45
+ - components/ui/input.tsx
46
+ - components/ui/label.tsx
47
+ - components/ui/card.tsx
48
+ - components/ui/textarea.tsx
49
+ - components/ui/select.tsx
50
+ - components/ui/checkbox.tsx
51
+ - components/ui/switch.tsx
52
+ - components/ui/form/\* (Form, FormField, FormItem, FormControl, FormLabel, FormMessage, FormDescription)
53
+ - Theme and providers:
54
+ - components/theme-provider.tsx
55
+ - components/enhanced-theme-provider.tsx
56
+ - lib/themes.ts
57
+
58
+ Minimal steps to render a template locally
59
+
60
+ 1. Install dependencies and run the dev server:
61
+
62
+ npm install
63
+ npm run dev
64
+
65
+ 2. Open the productlaunch template in your browser:
66
+
67
+ http://localhost:3000/templates/productlaunch
68
+
69
+ 3. The templates use global styles (app/globals.css). No environment variables are required for Blocks-only usage.
70
+
71
+ How to adopt / override template pieces
72
+
73
+ - Slots & component overrides
74
+ - Each template composes small sections from components/sections/\*.tsx. To override a section, copy the desired section file into your project (or replace the import) and update props or classNames.
75
+ - Example: to override the Navbar, copy components/sections/Navbar.tsx into your app and update the markup or styles. The template imports Navbar from the components directory.
76
+
77
+ - Styling and utility classes
78
+ - Tailwind is used across components. Prefer adding or modifying Tailwind utility classes on the exported component or pass className props (many components accept className).
79
+
80
+ - Theme variables and PresetThemeVars
81
+ - Each template has a PresetThemeVars component/file (e.g., app/templates/productlaunch/PresetThemeVars.tsx) that injects CSS variables for theme presets.
82
+ - To change default palette or add presets, edit the template PresetThemeVars and lib/themes.ts.
83
+ - Theme providers are implemented in components/theme-provider.tsx and components/enhanced-theme-provider.tsx — wrap your app with these if you extract blocks into another project.
84
+
85
+ Import examples
86
+
87
+ - Import a primitive in your code:
88
+
89
+ import Button from "@/components/ui/button";
90
+ import { Form, FormField } from "@/components/ui/form/form"; // path depends on your project alias
91
+
92
+ - Use a section in a page:
93
+
94
+ import Navbar from "@/components/sections/Navbar";
95
+
96
+ export default function Page() {
97
+ return (
98
+ <>
99
+ <Navbar />
100
+ <main>{/_ ... _/}</main>
101
+ </>
102
+ );
103
+ }
104
+
105
+ Public assets and placeholders
106
+
107
+ - The templates reference placeholder images in public/placeholders/. If you copy templates to another project, copy the referenced assets (public/placeholders/gallery/\*) or replace with your own images.
108
+
109
+ Simple Blocks kit manifest (for internal CLI packaging)
110
+
111
+ > This section is for maintainers of the `nextworks` CLI. You don’t need this if you’re just installing Blocks into your own app.
112
+
113
+ Use this manifest to drive a CLI copy step: it enumerates the primary files that make up the Blocks kit. Adjust paths if your CLI uses a different base.
114
+
115
+ - Suggested internal path: cli/kits/blocks/manifest.json
116
+
117
+ Contents:
118
+
119
+ {
120
+ "name": "blocks",
121
+ "description": "Frontend UI sections, templates and core UI primitives",
122
+ "files": [
123
+ "components/sections/About.tsx",
124
+ "components/sections/Contact.tsx",
125
+ "components/sections/CTA.tsx",
126
+ "components/sections/FAQ.tsx",
127
+ "components/sections/Features.tsx",
128
+ "components/sections/Footer.tsx",
129
+ "components/sections/HeroMotion.tsx",
130
+ "components/sections/HeroOverlay.tsx",
131
+ "components/sections/HeroSplit.tsx",
132
+ "components/sections/Navbar.tsx",
133
+ "components/sections/Newsletter.tsx",
134
+ "components/sections/PortfolioSimple.tsx",
135
+ "components/sections/Pricing.tsx",
136
+ "components/sections/ProcessTimeline.tsx",
137
+ "components/sections/ServicesGrid.tsx",
138
+ "components/sections/Team.tsx",
139
+ "components/sections/Testimonials.tsx",
140
+ "components/sections/TrustBadges.tsx",
141
+ "components/ui/button.tsx",
142
+ "components/ui/card.tsx",
143
+ "components/ui/checkbox.tsx",
144
+ "components/ui/cta-button.tsx",
145
+ "components/ui/dropdown-menu.tsx",
146
+ "components/ui/feature-card.tsx",
147
+ "components/ui/input.tsx",
148
+ "components/ui/label.tsx",
149
+ "components/ui/pricing-card.tsx",
150
+ "components/ui/skeleton.tsx",
151
+ "components/ui/switch.tsx",
152
+ "components/ui/table.tsx",
153
+ "components/ui/textarea.tsx",
154
+ "components/ui/theme-selector.tsx",
155
+ "components/ui/theme-toggle.tsx",
156
+ "components/ui/toaster.tsx",
157
+ "components/ui/form/form.tsx",
158
+ "components/ui/form/form-field.tsx",
159
+ "components/ui/form/form-item.tsx",
160
+ "components/ui/form/form-control.tsx",
161
+ "components/ui/form/form-description.tsx",
162
+ "components/ui/form/form-label.tsx",
163
+ "components/ui/form/form-message.tsx",
164
+ "components/enhanced-theme-provider.tsx",
165
+ "components/theme-provider.tsx",
166
+ "lib/themes.ts",
167
+ "app/globals.css",
168
+ "app/templates/productlaunch/page.tsx",
169
+ "app/templates/productlaunch/PresetThemeVars.tsx",
170
+ "app/templates/productlaunch/README.md",
171
+ "app/templates/saasdashboard/page.tsx",
172
+ "app/templates/saasdashboard/PresetThemeVars.tsx",
173
+ "app/templates/saasdashboard/README.md",
174
+ "app/templates/digitalagency/page.tsx",
175
+ "app/templates/digitalagency/PresetThemeVars.tsx",
176
+ "app/templates/digitalagency/README.md",
177
+ "public/placeholders/gallery/hero-pexels-broken-9945014.avif"
178
+ ]
179
+ }
180
+
181
+ Notes & recommendations
182
+
183
+ - Blocks are self-contained and do not require Prisma or NextAuth. If your user only needs Blocks, the CLI should copy these files and add a brief README instructing the user to import the theme provider in app/layout.tsx and ensure app/globals.css is present.
184
+ - Consider adding an examples folder demonstrating how to swap PresetThemeVars and override a section component.
185
+
186
+ ---
187
+
188
+ If you'd like, I can:
189
+
190
+ - Create the CLI manifest file at cli/kits/blocks/manifest.json using the JSON above, or
191
+ - Create a short example that demonstrates overriding Navbar and changing PresetThemeVars.
192
+
193
+ Tell me which of the above to create next.
@@ -9,6 +9,18 @@ What the kit includes
9
9
  - Theme and provider utilities (theme-provider, enhanced-theme-provider, lib/themes)
10
10
  - app/globals.css and placeholder assets used by templates
11
11
 
12
+ Install behavior
13
+
14
+ > **Alpha note**
15
+ > Other kits (Auth Core, Forms, Data) are currently tested and supported on top of a Blocks install that includes sections and templates. For the smoothest experience, run `npx nextworks add blocks --sections --templates` before adding additional kits.
16
+
17
+ - For a full UI kit, run `npx nextworks add blocks --sections --templates` to install **core UI primitives, sections, and templates** so the example templates work out of the box.
18
+ - You can pass flags to control what gets installed:
19
+ - `npx nextworks add blocks --ui-only` → core UI primitives only (no sections/templates).
20
+ - `npx nextworks add blocks --sections` → core + sections only.
21
+ - `npx nextworks add blocks --templates` → core + templates only.
22
+ - `npx nextworks add blocks --sections --templates` → same as the default (core + sections + templates).
23
+
12
24
  Files included are defined in `cli/cli_manifests/blocks_manifest.json` in the Nextworks repository. When updating this kit inside the repo, keep that manifest and this kit folder in sync.
13
25
 
14
26
  Post-install notes
@@ -0,0 +1,223 @@
1
+ # Theme System Guide
2
+
3
+ This file is shipped with the Nextworks Blocks kit and lives under `.nextworks/docs/THEME_GUIDE.md` in your project.
4
+
5
+ The content below is the canonical theme guide for projects using Nextworks Blocks.
6
+
7
+ ---
8
+
9
+ ## Overview
10
+
11
+ This project now includes a comprehensive theming system that allows you to easily switch between different color schemes and have all components automatically adapt.
12
+
13
+ ## How to Use
14
+
15
+ ### 1. Basic Setup
16
+
17
+ Your app is already configured with the enhanced theme provider in `app/layout.tsx`. The default theme is set to "monochrome".
18
+
19
+ ### 2. Available Themes
20
+
21
+ - **Monochrome** - Clean black and white theme
22
+ - **Blue** - Professional blue color scheme
23
+ - **Green** - Fresh green color scheme
24
+ - **Purple** - Modern purple color scheme
25
+ - **Orange** - Vibrant orange color scheme
26
+ - **Default** - Standard shadCN theme
27
+
28
+ ### 3. Using Theme-Aware Components
29
+
30
+ #### Navbar2 Component
31
+
32
+ ```tsx
33
+ import { Navbar2 } from "@/components/sections/Navbar2";
34
+
35
+ <Navbar2
36
+ brand="My App"
37
+ brandNode={<YourLogoComponent />}
38
+ menuItems={[
39
+ { label: "Home", href: "/" },
40
+ { label: "About", href: "/about" },
41
+ ]}
42
+ ctaButton={{ label: "Get Started", href: "/signup" }}
43
+ showThemeSelector={true}
44
+ />;
45
+ ```
46
+
47
+ #### Theme Selector
48
+
49
+ The `ThemeSelector` component is automatically included in Navbar2 and allows users to:
50
+
51
+ - Switch between theme variants (monochrome, blue, green, etc.)
52
+ - Toggle between light/dark modes
53
+ - Use system preference
54
+
55
+ ### 4. Converting Existing Components
56
+
57
+ To make your existing components theme-aware, replace hardcoded colors with semantic classes:
58
+
59
+ #### Before (Hardcoded Colors):
60
+
61
+ ```tsx
62
+ className = "bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-white";
63
+ ```
64
+
65
+ #### After (Theme-Aware):
66
+
67
+ ```tsx
68
+ className = "bg-background text-foreground";
69
+ ```
70
+
71
+ #### Common Replacements:
72
+
73
+ - `text-gray-800 dark:text-white` → `text-foreground`
74
+ - `bg-gray-50 dark:bg-gray-800` → `bg-background`
75
+ - `border-gray-200 dark:border-gray-700` → `border-border`
76
+ - `hover:bg-gray-100 dark:hover:bg-gray-700` → `hover:bg-accent`
77
+ - `text-blue-600 dark:text-blue-500` → `text-primary`
78
+
79
+ ### 5. Semantic Color Classes
80
+
81
+ Use these semantic classes for consistent theming:
82
+
83
+ - `text-primary` - Primary brand color
84
+ - `text-secondary` - Secondary text color
85
+ - `text-muted-foreground` - Muted text color
86
+ - `bg-background` - Main background color
87
+ - `bg-card` - Card background color
88
+ - `bg-accent` - Accent background color
89
+ - `border-border` - Border color
90
+ - `ring-ring` - Focus ring color
91
+
92
+ ### 6. Creating Custom Themes
93
+
94
+ To create a custom theme, modify `lib/themes.ts`:
95
+
96
+ ```ts
97
+ export const themes: Record<ThemeVariant, ThemeConfig> = {
98
+ // ... existing themes
99
+ myCustomTheme: {
100
+ name: "My Custom Theme",
101
+ colors: {
102
+ primary: "oklch(0.5 0.2 120)", // Custom green
103
+ primaryForeground: "oklch(0.98 0 0)",
104
+ // ... other colors
105
+ },
106
+ },
107
+ };
108
+ ```
109
+
110
+ ### 7. Example Usage
111
+
112
+ See the templates under `app/templates/*` and `lib/themes.ts` for concrete examples of how themes are wired up.
113
+
114
+ ## Benefits
115
+
116
+ 1. **Consistent Design**: All components automatically use the same color scheme
117
+ 2. **Easy Customization**: Change the entire app's look by switching themes
118
+ 3. **Accessibility**: Proper contrast ratios maintained across all themes
119
+ 4. **Developer Experience**: No need to manually style each component
120
+ 5. **User Choice**: Users can choose their preferred theme and light/dark mode
121
+
122
+ ---
123
+
124
+ ## Mixing tokens and local overrides
125
+
126
+ Sometimes you want the speed and consistency of the Color Theme (tokens), but still make template-specific tweaks. This project supports three patterns:
127
+
128
+ - Token-first: use semantic classes/variants everywhere (default behavior)
129
+ - Hybrid: keep tokens for most things and override specific slots/elements
130
+ - Full control: bypass tokens with unstyled primitives and fully custom classes
131
+
132
+ ### 1) Prefer additive overrides first
133
+
134
+ - Keep variant/size from tokens and add className for small tweaks.
135
+ - Use component slot props for targeted overrides rather than global changes.
136
+
137
+ Example: override only mobile link hover background in the shared Navbar from a preset, leaving everything else token-based.
138
+
139
+ ```tsx
140
+ // app/templates/productlaunch/components/Navbar.tsx
141
+ mobileLinks: {
142
+ className: "hover:bg-purple-50 dark:hover:bg-purple-900/20",
143
+ },
144
+ ```
145
+
146
+ ### 2) Override focus ring colors locally
147
+
148
+ Links in Navbar apply a token focus ring (`focus:ring-ring`). You can override it per preset by placing your ring utilities in `links.className` (these are merged last):
149
+
150
+ ```tsx
151
+ // app/templates/productlaunch/components/Navbar.tsx
152
+ links: {
153
+ className:
154
+ "text-sm font-medium font-inter text-gray-800 dark:text-white hover:text-purple-700 dark:hover:text-purple-500 " +
155
+ "focus:ring-purple-500 dark:focus:ring-purple-400",
156
+ },
157
+ ```
158
+
159
+ ### 3) ThemeToggle with local styling
160
+
161
+ `ThemeToggle` accepts `buttonProps` that forward to the internal `Button`. For small tweaks, keep token variants and just add classes. For full control, use `unstyled: true` to bypass tokens:
162
+
163
+ ```tsx
164
+ // app/templates/productlaunch/components/Navbar.tsx
165
+ themeToggle: {
166
+ buttonProps: {
167
+ unstyled: true,
168
+ className:
169
+ "size-9 p-0 flex items-center justify-center rounded-md border border-gray-200 " +
170
+ "bg-white text-gray-700 hover:bg-purple-50 hover:text-purple-700 " +
171
+ "dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-purple-900/20 " +
172
+ "transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400",
173
+ },
174
+ moonClassName: "text-gray-700 dark:text-gray-100",
175
+ sunClassName: "text-gray-700 dark:text-gray-100",
176
+ },
177
+ ```
178
+
179
+ ### 4) Unstyled escape hatch for primitives
180
+
181
+ Shared primitives like `Button` support an `unstyled` prop to bypass tokenized CVA classes and allow complete consumer control:
182
+
183
+ ```tsx
184
+ // components/ui/button.tsx
185
+ <Button unstyled className="rounded-md bg-purple-600 px-3 py-2 text-white ...">
186
+ Click me
187
+ </Button>
188
+ ```
189
+
190
+ Use this when a section must not be influenced by the global Color Theme.
191
+
192
+ ### 5) Navbar accent via CSS variables (recommended for presets)
193
+
194
+ Set a small set of CSS variables on the Navbar root in your preset, and internal elements (ThemeToggle, mobile links, focus rings) will read them automatically with fallbacks to tokens.
195
+
196
+ Suggested variables:
197
+
198
+ - `--navbar-accent`: icon/text accent color
199
+ - `--navbar-hover-bg`: hover background color for toggle and mobile links
200
+ - `--navbar-toggle-bg`: default background for the theme toggle button
201
+ - `--navbar-ring`: focus ring color
202
+ - `--navbar-border`: border color for theme toggle and similar controls
203
+
204
+ Example in a preset:
205
+
206
+ ```tsx
207
+ // app/templates/productlaunch/components/Navbar.tsx
208
+ nav: {
209
+ className:
210
+ "bg-white dark:bg-gray-900 text-gray-800 dark:text-white border-b border-gray-200 dark:border-gray-800 " +
211
+ "[--navbar-accent:theme(colors.purple.600)] dark:[--navbar-accent:theme(colors.purple.400)] " +
212
+ "[--navbar-hover-bg:theme(colors.purple.50)] dark:[--navbar-hover-bg:color-mix(in oklab,oklch(0.17 0.05 324) 20%, transparent)] " +
213
+ "[--navbar-ring:theme(colors.purple.500)] dark:[--navbar-ring:theme(colors.purple.400)]",
214
+ },
215
+ ```
216
+
217
+ After setting these, you generally don’t need to pass `themeToggle` overrides; the toggle and links will align to your preset accent automatically.
218
+
219
+ Notes:
220
+
221
+ - Consumer `className` is merged last, so your overrides win when conflicts exist.
222
+ - Always include `dark:` variants when you override hover/focus to maintain dark mode parity.
223
+ - Scope overrides narrowly (slots/elements) to avoid surprising global changes.
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Jakob Bro Liebe Hansen
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1,112 @@
1
+ # nextworks — Data kit quickstart
2
+
3
+ This document explains how to use the Data (crud) kit in the nextworks starter project.
4
+
5
+ Prerequisites
6
+
7
+ - A running PostgreSQL database and `DATABASE_URL` set in `.env`.
8
+ - Auth kit installed and configured (NextAuth + Prisma). The Data kit relies on NextAuth session for access control.
9
+ - In the monorepo, this is already wired up.
10
+ - In your own app via the CLI, the recommended alpha setup is to install Blocks (with sections + templates) + Auth Core + Forms first, then Data:
11
+
12
+ ```bash
13
+ npx nextworks add blocks --sections --templates
14
+ npx nextworks add auth-core
15
+ npx nextworks add forms
16
+ npx nextworks add data
17
+ ```
18
+
19
+ then follow the Prisma and `.env` steps below.
20
+
21
+ - Forms kit (optional but recommended) for form primitives.
22
+
23
+ Setup
24
+
25
+ 1. Install dependencies and generate Prisma client:
26
+
27
+ npm install
28
+ npx prisma generate
29
+
30
+ 2. Run migrations (creates User/Post tables):
31
+
32
+ Make sure you have merged the Auth + Data models into your `prisma/schema.prisma` before running migrations.
33
+
34
+ npx prisma migrate dev
35
+
36
+ 3. Seed a demo admin user and posts locally (optional):
37
+
38
+ # Set env vars or use defaults
39
+
40
+ SEED_ADMIN_EMAIL=admin@example.com SEED_ADMIN_PASSWORD=password123 node ./scripts/seed-demo.mjs
41
+
42
+ 4. Run the dev server:
43
+
44
+ npm run dev
45
+
46
+ Usage & testing
47
+
48
+ - Sign in at /auth/login using the seeded admin credentials (admin@example.com / password123).
49
+ - Visit /admin/posts to create/edit/delete posts. The UI supports pagination, search (title contains), and sort by createdAt.
50
+ - Visit /admin/users to view users (admin-only).
51
+
52
+ Notes
53
+
54
+ - Server-side RBAC: all modifying APIs (POST/PUT/DELETE) require a valid session, and user-level checks ensure only authors or admins can modify posts. The users list API requires admin access.
55
+ - Published flag: posts have a `published` boolean in Prisma. The admin UI exposes the published checkbox when creating or editing posts.
56
+
57
+ Troubleshooting
58
+
59
+ - If users list returns 403, ensure your signed-in user has role = 'admin'. You can promote a user with Prisma Studio or by running:
60
+
61
+ npx prisma db executeRaw "UPDATE \"User\" SET role = 'admin' WHERE email = 'admin@example.com';"
62
+
63
+ - If migrations fail, try:
64
+
65
+ npx prisma migrate reset
66
+
67
+ Files & kit manifest
68
+
69
+ If you plan to package a Data kit, here are the primary files, API routes and components used by the Data example flows. This manifest is intended to help packaging and documentation — adjust paths if you extract the kit into another project.
70
+
71
+ Files
72
+
73
+ - app/api/posts/route.ts
74
+ - app/api/posts/[id]/route.ts
75
+ - app/api/users/route.ts
76
+ - app/api/users/[id]/route.ts
77
+ - app/api/users/check-unique/route.ts
78
+ - app/api/users/check-email/route.ts
79
+ - app/api/seed-demo/route.ts
80
+ - app/api/signup/route.ts
81
+ - components/admin/admin-header.tsx
82
+ - components/admin/posts-manager.tsx
83
+ - components/admin/users-manager.tsx
84
+ - app/(protected)/admin/users/page.tsx
85
+ - app/(protected)/admin/posts/page.tsx
86
+ - app/examples/demo/create-post-form.tsx
87
+ - app/examples/demo/page.tsx
88
+ - lib/prisma.ts
89
+ - lib/server/result.ts
90
+ - lib/utils.ts
91
+ - lib/validation/forms.ts
92
+ - scripts/seed-demo.mjs
93
+
94
+ API routes (list)
95
+
96
+ - /api/posts (GET/POST) -> app/api/posts/route.ts
97
+ - /api/posts/:id (GET/PUT/DELETE) -> app/api/posts/[id]/route.ts
98
+ - /api/users (GET/POST) -> app/api/users/route.ts
99
+ - /api/users/:id (GET/PUT/DELETE) -> app/api/users/[id]/route.ts
100
+ - /api/users/check-unique -> app/api/users/check-unique/route.ts
101
+ - /api/users/check-email -> app/api/users/check-email/route.ts
102
+ - /api/seed-demo -> app/api/seed-demo/route.ts
103
+ - /api/signup -> app/api/signup/route.ts
104
+
105
+ Notes
106
+
107
+ - The Data kit relies on NextAuth sessions for access control — see lib/auth-helpers.ts and lib/auth.ts for server-side helpers and RBAC checks.
108
+ - The API routes return ApiResult envelope objects (see lib/server/result.ts) and the client uses lib/forms/map-errors.ts to map server validation errors into react-hook-form where appropriate.
109
+
110
+ Feedback
111
+
112
+ - File issues in the repo; note that CLI packaging for the Data kit is not yet implemented — this quickstart is for the repository as-is.
@@ -8,6 +8,19 @@ npx nextworks add data
8
8
 
9
9
  and is packaged with its own kit dependencies metadata.
10
10
 
11
+ > **Alpha note**
12
+ >
13
+ > In this early alpha, the Data kit is tested and supported on top of **Blocks** (with sections + templates), **Auth Core**, and **Forms**. For the smoothest experience, run:
14
+ >
15
+ > ```bash
16
+ > npx nextworks add blocks --sections --templates
17
+ > npx nextworks add auth-core
18
+ > npx nextworks add forms
19
+ > npx nextworks add data
20
+ > ```
21
+ >
22
+ > Using Data without Blocks/Auth/Forms may work but is not yet a supported path and can require manual Prisma/schema and UI tweaks.
23
+
11
24
  What the kit includes
12
25
 
13
26
  - API routes:
@@ -35,6 +48,30 @@ What the kit includes
35
48
  - Seed script: scripts/seed-demo.mjs
36
49
  - Kit metadata: package-deps.json (declares @prisma/client and zod; prisma is a devDependency)
37
50
 
51
+ Database requirements
52
+
53
+ - The data kit is designed and tested with **PostgreSQL**, using a Postgres database hosted on [Neon](https://neon.tech/) during development.
54
+ - Any Prisma‑supported provider _may_ work, but **Postgres is the recommended and currently tested path**.
55
+
56
+ Quick start with Postgres (recommended):
57
+
58
+ 1. Create a Postgres database (for example on Neon).
59
+ 2. Copy the connection string into your `.env` as:
60
+
61
+ ```bash
62
+ DATABASE_URL="postgres://..."
63
+ ```
64
+
65
+ 3. Merge the Data/Auth Prisma models into your project's `prisma/schema.prisma` (see `prisma/auth-models.prisma` referenced by the manifest).
66
+ 4. Run:
67
+
68
+ ```bash
69
+ npx prisma generate
70
+ npx prisma migrate dev -n init_data
71
+ ```
72
+
73
+ If you choose a different database provider, update the `provider` field in your Prisma schema and carefully review indexes/constraints before running migrations.
74
+
38
75
  Notes and important behavior
39
76
 
40
77
  - Kit dependencies:
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Jakob Bro Liebe Hansen
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -13,3 +13,13 @@ export const prisma =
13
13
  });
14
14
 
15
15
  if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
16
+
17
+ if (process.env.NODE_ENV === "development" && process.platform === "win32") {
18
+ // Dev-only hint for Windows users hitting Prisma + Turbopack symlink issues
19
+ // (e.g. "create symlink to ../../../../node_modules/@prisma/client" with os error 1314).
20
+ // This is intentionally a console.warn so it surfaces clearly but only in dev.
21
+ // See docs/DATA_QUICKSTART.md for full details.
22
+ console.warn(
23
+ "[nextworks][data] On Windows with Next 16+ and Prisma, enable Windows Developer Mode or run your dev server from an elevated terminal to avoid Prisma symlink errors (os error 1314). See DATA_QUICKSTART.md for details."
24
+ );
25
+ }