nextworks 0.1.0-alpha.1 → 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.
- package/README.md +61 -2
- package/dist/cli_manifests/auth_manifest.json +7 -1
- package/dist/cli_manifests/blocks_manifest.json +7 -6
- package/dist/cli_manifests/data_manifest.json +4 -2
- package/dist/cli_manifests/forms_manifest.json +6 -3
- package/dist/commands/blocks.d.ts +1 -0
- package/dist/commands/blocks.d.ts.map +1 -1
- package/dist/commands/blocks.js +77 -10
- package/dist/commands/blocks.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/kits/auth-core/{README.md → .nextworks/docs/AUTH_CORE_README.md} +11 -0
- package/dist/kits/auth-core/.nextworks/docs/AUTH_QUICKSTART.md +244 -0
- package/dist/kits/auth-core/LICENSE +21 -0
- package/dist/kits/auth-core/app/(protected)/admin/posts/page.tsx +29 -0
- package/dist/kits/auth-core/app/(protected)/admin/users/page.tsx +29 -0
- package/dist/kits/auth-core/app/api/users/[id]/route.ts +127 -0
- package/dist/kits/auth-core/components/ui/button.tsx +84 -17
- package/dist/kits/auth-core/components/ui/input.tsx +5 -3
- package/dist/kits/auth-core/components/ui/label.tsx +10 -4
- package/dist/kits/auth-core/lib/prisma.ts +10 -0
- package/dist/kits/blocks/.nextworks/docs/BLOCKS_QUICKSTART.md +193 -0
- package/dist/kits/blocks/{README.md → .nextworks/docs/BLOCKS_README.md} +12 -0
- package/dist/kits/blocks/.nextworks/docs/THEME_GUIDE.md +223 -0
- package/dist/kits/blocks/LICENSE +21 -0
- package/dist/kits/data/.nextworks/docs/DATA_QUICKSTART.md +112 -0
- package/dist/kits/data/{README.md → .nextworks/docs/DATA_README.md} +13 -0
- package/dist/kits/data/LICENSE +21 -0
- package/dist/kits/data/lib/prisma.ts +10 -0
- package/dist/kits/forms/.nextworks/docs/FORMS_QUICKSTART.md +85 -0
- package/dist/kits/forms/{README.md → .nextworks/docs/FORMS_README.md} +12 -0
- package/dist/kits/forms/LICENSE +21 -0
- package/package.json +4 -1
- package/dist/.gitkeep +0 -0
- package/dist/kits/blocks/components/ui/button_bck.tsx +0 -93
- package/dist/kits/blocks/lib/themes_old.ts +0 -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:
|
|
@@ -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
|
+
}
|