@donotdev/cli 0.0.18 → 0.0.20
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/dependencies-matrix.json +42 -55
- package/dist/bin/commands/bump.js +5 -2
- package/dist/bin/commands/coach.js +8177 -0
- package/dist/bin/commands/create-app.js +6 -6
- package/dist/bin/commands/create-project.js +23 -9
- package/dist/bin/commands/deploy.js +99 -59
- package/dist/bin/commands/doctor.js +243 -698
- package/dist/bin/commands/emu.js +2 -2
- package/dist/bin/commands/format.js +4 -1
- package/dist/bin/commands/get-demo.js +8351 -0
- package/dist/bin/commands/make-admin.js +773 -152
- package/dist/bin/commands/setup.js +524 -1713
- package/dist/bin/commands/staging.js +17870 -0
- package/dist/bin/commands/sync-secrets.js +2 -11
- package/dist/bin/commands/type-check.js +7738 -1712
- package/dist/bin/dndev.js +868 -199
- package/dist/bin/donotdev.js +868 -199
- package/dist/index.js +127 -67
- package/package.json +1 -1
- package/templates/app-demo/index.html.example +147 -10
- package/templates/app-demo/public/apple-touch-icon.png.example +0 -0
- package/templates/app-demo/public/favicon.svg.example +1 -0
- package/templates/app-demo/public/icon-192x192.png.example +0 -0
- package/templates/app-demo/public/icon-512x512.png.example +0 -0
- package/templates/app-demo/src/App.tsx.example +7 -11
- package/templates/app-demo/src/config/app.ts.example +13 -48
- package/templates/app-demo/src/entities/booking.ts.example +75 -0
- package/templates/app-demo/src/entities/onboarding.ts.example +160 -0
- package/templates/app-demo/src/entities/product.ts.example +50 -0
- package/templates/app-demo/src/entities/quote.ts.example +70 -0
- package/templates/app-demo/src/globals.css.example +5 -1
- package/templates/app-demo/src/main.tsx.example +13 -7
- package/templates/app-demo/src/pages/ChangelogPage.tsx.example +41 -0
- package/templates/app-demo/src/pages/ConditionalFormPage.tsx.example +88 -0
- package/templates/app-demo/src/pages/DashboardPage.tsx.example +17 -0
- package/templates/app-demo/src/pages/HomePage.tsx.example +339 -60
- package/templates/app-demo/src/pages/OnboardingPage.tsx.example +47 -0
- package/templates/app-demo/src/pages/PricingPage.tsx.example +41 -0
- package/templates/app-demo/src/pages/ProductsPage.tsx.example +19 -0
- package/templates/app-demo/src/pages/ProfilePage.tsx.example +18 -0
- package/templates/app-demo/src/pages/SettingsPage.tsx.example +17 -0
- package/templates/app-demo/src/pages/ShowcaseDetailPage.tsx.example +118 -0
- package/templates/app-demo/src/pages/ShowcasePage.tsx.example +93 -0
- package/templates/app-demo/src/pages/components/ComponentRenderer.tsx.example +147 -51
- package/templates/app-demo/src/pages/components/ComponentsData.tsx.example +103 -21
- package/templates/app-demo/src/pages/components/componentConfig.ts.example +139 -59
- package/templates/app-demo/src/pages/legal/LegalPage.tsx.example +25 -0
- package/templates/app-demo/src/pages/legal/PrivacyPage.tsx.example +23 -0
- package/templates/app-demo/src/pages/legal/TermsPage.tsx.example +23 -0
- package/templates/app-demo/src/themes.css.example +289 -77
- package/templates/app-demo/stats.html.example +4949 -0
- package/templates/app-demo/tsconfig.json.example +1 -1
- package/templates/app-demo/vite.config.ts.example +23 -48
- package/templates/app-expo/README.md.example +1 -1
- package/templates/app-expo/app/index.tsx.example +1 -1
- package/templates/app-next/src/locales/home_en.json.example +6 -6
- package/templates/app-vite/src/locales/home_en.json.example +6 -6
- package/templates/app-vite/src/pages/HomePage.tsx.example +8 -10
- package/templates/overlay-firebase/env.fragment.example +1 -1
- package/templates/overlay-firebase/env.fragment.expo.example +1 -1
- package/templates/overlay-firebase/env.fragment.nextjs.example +1 -1
- package/templates/overlay-supabase/env.fragment.example +1 -1
- package/templates/overlay-supabase/env.fragment.expo.example +1 -1
- package/templates/overlay-supabase/env.fragment.nextjs.example +1 -1
- package/templates/overlay-vercel/env.fragment.example +1 -1
- package/templates/overlay-vercel/env.fragment.nextjs.example +1 -1
- package/templates/root-consumer/AI.md.example +4 -3
- package/templates/root-consumer/guides/dndev/AGENT_START_HERE.md.example +21 -6
- package/templates/root-consumer/guides/dndev/COMPONENTS_ADV.md.example +16 -179
- package/templates/root-consumer/guides/dndev/ENV_SETUP.md.example +19 -21
- package/templates/root-consumer/guides/dndev/GOTCHAS.md.example +14 -3
- package/templates/root-consumer/guides/dndev/INDEX.md.example +2 -2
- package/templates/root-consumer/guides/dndev/SETUP_APP_CONFIG.md.example +3 -3
- package/templates/root-consumer/guides/dndev/SETUP_BLOG.md.example +19 -2
- package/templates/root-consumer/guides/dndev/SETUP_CRUD.md.example +35 -1
- package/templates/root-consumer/guides/dndev/SETUP_FIREBASE.md.example +17 -12
- package/templates/root-consumer/guides/dndev/SETUP_LAYOUTS.md.example +32 -0
- package/templates/root-consumer/guides/dndev/SETUP_OAUTH_PROVIDERS.md.example +1 -1
- package/templates/root-consumer/guides/dndev/SETUP_PAGES.md.example +19 -15
- package/templates/root-consumer/guides/dndev/SETUP_STRIPE.md.example +2 -2
- package/templates/root-consumer/guides/dndev/SETUP_SUPABASE.md.example +17 -12
- package/templates/root-consumer/guides/dndev/SETUP_VERCEL.md.example +37 -16
- package/templates/root-consumer/guides/dndev/USE_ROUTING.md.example +18 -18
- package/templates/root-consumer/guides/dndev/advanced/COOKIE_REFERENCE.md.example +252 -252
- package/templates/root-consumer/guides/dndev/advanced/VERSION_CONTROL.md.example +174 -174
- package/templates/root-consumer/guides/dndev/essences_reference.css.example +119 -2
- package/templates/root-consumer/guides/wai-way/blueprints/1_scaffold.md.example +14 -0
- package/templates/root-consumer/guides/wai-way/blueprints/2_entities.md.example +6 -0
- package/templates/root-consumer/guides/wai-way/blueprints/3_compose.md.example +14 -0
- package/templates/root-consumer/guides/wai-way/entity_patterns.md.example +4 -5
- package/templates/root-consumer/guides/wai-way/page_patterns.md.example +2 -2
- package/dist/bin/commands/agent-setup.d.ts +0 -6
- package/dist/bin/commands/agent-setup.d.ts.map +0 -1
- package/dist/bin/commands/agent-setup.js.map +0 -1
- package/dist/bin/commands/build.d.ts +0 -11
- package/dist/bin/commands/build.d.ts.map +0 -1
- package/dist/bin/commands/build.js.map +0 -1
- package/dist/bin/commands/bump.d.ts +0 -11
- package/dist/bin/commands/bump.d.ts.map +0 -1
- package/dist/bin/commands/bump.js.map +0 -1
- package/dist/bin/commands/cacheout.d.ts +0 -11
- package/dist/bin/commands/cacheout.d.ts.map +0 -1
- package/dist/bin/commands/cacheout.js.map +0 -1
- package/dist/bin/commands/create-app.d.ts +0 -11
- package/dist/bin/commands/create-app.d.ts.map +0 -1
- package/dist/bin/commands/create-app.js.map +0 -1
- package/dist/bin/commands/create-project.d.ts +0 -11
- package/dist/bin/commands/create-project.d.ts.map +0 -1
- package/dist/bin/commands/create-project.js.map +0 -1
- package/dist/bin/commands/deploy.d.ts +0 -11
- package/dist/bin/commands/deploy.d.ts.map +0 -1
- package/dist/bin/commands/deploy.js.map +0 -1
- package/dist/bin/commands/dev.d.ts +0 -11
- package/dist/bin/commands/dev.d.ts.map +0 -1
- package/dist/bin/commands/dev.js.map +0 -1
- package/dist/bin/commands/doctor.d.ts +0 -6
- package/dist/bin/commands/doctor.d.ts.map +0 -1
- package/dist/bin/commands/doctor.js.map +0 -1
- package/dist/bin/commands/emu.d.ts +0 -11
- package/dist/bin/commands/emu.d.ts.map +0 -1
- package/dist/bin/commands/emu.js.map +0 -1
- package/dist/bin/commands/format.d.ts +0 -11
- package/dist/bin/commands/format.d.ts.map +0 -1
- package/dist/bin/commands/format.js.map +0 -1
- package/dist/bin/commands/make-admin.d.ts +0 -11
- package/dist/bin/commands/make-admin.d.ts.map +0 -1
- package/dist/bin/commands/make-admin.js.map +0 -1
- package/dist/bin/commands/preview.d.ts +0 -11
- package/dist/bin/commands/preview.d.ts.map +0 -1
- package/dist/bin/commands/preview.js.map +0 -1
- package/dist/bin/commands/setup.d.ts +0 -6
- package/dist/bin/commands/setup.d.ts.map +0 -1
- package/dist/bin/commands/setup.js.map +0 -1
- package/dist/bin/commands/sync-secrets.d.ts +0 -11
- package/dist/bin/commands/sync-secrets.d.ts.map +0 -1
- package/dist/bin/commands/sync-secrets.js.map +0 -1
- package/dist/bin/commands/type-check.d.ts +0 -14
- package/dist/bin/commands/type-check.d.ts.map +0 -1
- package/dist/bin/commands/type-check.js.map +0 -1
- package/dist/bin/commands/wai.d.ts +0 -11
- package/dist/bin/commands/wai.d.ts.map +0 -1
- package/dist/bin/commands/wai.js.map +0 -1
- package/dist/index.d.ts +0 -8
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
- package/templates/app-demo/src/components/ThemeToggle.tsx.example +0 -48
- package/templates/app-demo/src/pages/DetailPage.tsx.example +0 -103
- package/templates/app-demo/src/pages/FullPage.tsx.example +0 -142
- package/templates/app-demo/src/pages/components/DemoLayout.tsx.example +0 -266
- package/templates/app-demo/src/pages/components/LayoutRoute.tsx.example +0 -20
|
@@ -1,53 +1,28 @@
|
|
|
1
1
|
// apps/demo/vite.config.ts
|
|
2
|
-
import react from '@vitejs/plugin-react';
|
|
3
|
-
import { defineConfig } from 'vite';
|
|
4
|
-
import tsconfigPaths from 'vite-tsconfig-paths';
|
|
5
|
-
import autoprefixer from 'autoprefixer';
|
|
6
|
-
// @ts-expect-error - postcss-import doesn't have type definitions
|
|
7
|
-
import postcssImport from 'postcss-import';
|
|
8
|
-
import postcssNesting from 'postcss-nesting';
|
|
9
|
-
import { resolve as pathResolve } from 'node:path';
|
|
10
|
-
import { createRequire } from 'node:module';
|
|
11
2
|
|
|
12
|
-
|
|
3
|
+
/**
|
|
4
|
+
* @fileoverview Vite build configuration for the demo app
|
|
5
|
+
* @description Configures Vite build tool with application settings, development server, HMR, and file watching options for the demo application.
|
|
6
|
+
* @version 0.0.1
|
|
7
|
+
* @since 0.0.1
|
|
8
|
+
* @author AMBROISE PARK Consulting
|
|
9
|
+
*/
|
|
13
10
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
if (!id.startsWith('.')) {
|
|
30
|
-
try {
|
|
31
|
-
return require.resolve(id, { paths: [basedir] });
|
|
32
|
-
} catch {
|
|
33
|
-
// Fallback to relative resolution
|
|
34
|
-
return pathResolve(basedir, id);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
// Relative imports
|
|
38
|
-
return pathResolve(basedir, id);
|
|
39
|
-
},
|
|
40
|
-
}),
|
|
41
|
-
postcssNesting,
|
|
42
|
-
autoprefixer,
|
|
43
|
-
],
|
|
11
|
+
import { defineViteConfig } from '@donotdev/core/vite';
|
|
12
|
+
|
|
13
|
+
import { appConfig } from './src/config/app';
|
|
14
|
+
|
|
15
|
+
// Features and SEO are now in app.ts (runtime config)
|
|
16
|
+
// Only build-time configs (routes, themes, i18n, assets) go here
|
|
17
|
+
export default defineViteConfig({
|
|
18
|
+
appConfig,
|
|
19
|
+
server: {
|
|
20
|
+
port: 3003,
|
|
21
|
+
https: false,
|
|
22
|
+
|
|
23
|
+
// HMR Configuration - Enabled for debugging
|
|
24
|
+
hmr: {
|
|
25
|
+
overlay: true, // Show error overlay in browser
|
|
44
26
|
},
|
|
45
27
|
},
|
|
46
|
-
|
|
47
|
-
include: ['react', 'react-dom', 'react/jsx-runtime'],
|
|
48
|
-
},
|
|
49
|
-
resolve: {
|
|
50
|
-
dedupe: ['react', 'react-dom'],
|
|
51
|
-
preserveSymlinks: false,
|
|
52
|
-
},
|
|
53
|
-
});
|
|
28
|
+
});
|
|
@@ -8,7 +8,7 @@ Mobile app built with DoNotDev Framework and Expo.
|
|
|
8
8
|
|
|
9
9
|
- Node.js 20+ and Bun 1.3+
|
|
10
10
|
- Expo Go app on your phone (for development)
|
|
11
|
-
-
|
|
11
|
+
- Provider configured (run `dndev coach` then `dndev setup`)
|
|
12
12
|
|
|
13
13
|
### Development
|
|
14
14
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
{
|
|
2
|
-
"hero": {
|
|
3
|
-
"title": "Welcome to DnDev",
|
|
4
|
-
"subtitle": "Your app is ready. Explore the framework patterns below."
|
|
5
|
-
}
|
|
6
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"hero": {
|
|
3
|
+
"title": "Welcome to DnDev",
|
|
4
|
+
"subtitle": "Your app is ready. Explore the framework patterns below."
|
|
5
|
+
}
|
|
6
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
{
|
|
2
|
-
"hero": {
|
|
3
|
-
"title": "Welcome to DnDev",
|
|
4
|
-
"subtitle": "Your app is ready. Explore the framework patterns below."
|
|
5
|
-
}
|
|
6
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"hero": {
|
|
3
|
+
"title": "Welcome to DnDev",
|
|
4
|
+
"subtitle": "Your app is ready. Explore the framework patterns below."
|
|
5
|
+
}
|
|
6
|
+
}
|
|
@@ -51,17 +51,15 @@ export default function HomePage() {
|
|
|
51
51
|
/>
|
|
52
52
|
|
|
53
53
|
<Card
|
|
54
|
-
title="2.
|
|
54
|
+
title="2. Provider Setup"
|
|
55
55
|
content={[
|
|
56
|
-
'Run: dndev
|
|
57
|
-
'This
|
|
58
|
-
' -
|
|
59
|
-
' -
|
|
60
|
-
'
|
|
61
|
-
'
|
|
62
|
-
'
|
|
63
|
-
' - Download service account key',
|
|
64
|
-
' - Enable Auth + Firestore in Firebase Console',
|
|
56
|
+
'Run: dndev coach',
|
|
57
|
+
'This shows what to configure:',
|
|
58
|
+
' - Which dashboard to visit',
|
|
59
|
+
' - What to copy and where to paste it',
|
|
60
|
+
'Fill in your .env values, then run:',
|
|
61
|
+
' dndev setup',
|
|
62
|
+
'Setup validates, automates, and health-checks.',
|
|
65
63
|
]}
|
|
66
64
|
/>
|
|
67
65
|
</Grid>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
# Firebase Configuration
|
|
4
4
|
# =============================================================================
|
|
5
5
|
# Get these values from your Firebase project settings
|
|
6
|
-
# Run `dndev
|
|
6
|
+
# Run `dndev coach` to see where to get these, then `dndev setup` to validate
|
|
7
7
|
VITE_FIREBASE_API_KEY=
|
|
8
8
|
VITE_FIREBASE_PROJECT_ID=
|
|
9
9
|
# Copy from Firebase Console. Framework uses APP_URL hostname in production automatically.
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
# Firebase Configuration
|
|
4
4
|
# =============================================================================
|
|
5
5
|
# Get these values from your Firebase project settings
|
|
6
|
-
# Run `dndev
|
|
6
|
+
# Run `dndev coach` to see where to get these, then `dndev setup` to validate
|
|
7
7
|
EXPO_PUBLIC_FIREBASE_API_KEY=
|
|
8
8
|
EXPO_PUBLIC_FIREBASE_PROJECT_ID=
|
|
9
9
|
# Copy from Firebase Console. Framework uses APP_URL hostname in production automatically.
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
# Firebase Configuration
|
|
4
4
|
# =============================================================================
|
|
5
5
|
# Get these values from your Firebase project settings
|
|
6
|
-
# Run `dndev
|
|
6
|
+
# Run `dndev coach` to see where to get these, then `dndev setup` to validate
|
|
7
7
|
NEXT_PUBLIC_FIREBASE_API_KEY=
|
|
8
8
|
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
|
|
9
9
|
# Copy from Firebase Console. Framework uses APP_URL hostname in production automatically.
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
# - Project URL: the https://xxx.supabase.co URL
|
|
7
7
|
# - Public key: "Publishable key" (sb_publishable_...) or legacy "anon key" (eyJ...)
|
|
8
8
|
#
|
|
9
|
-
# Then run: dndev setup
|
|
9
|
+
# Then run: dndev setup
|
|
10
10
|
# =============================================================================
|
|
11
11
|
VITE_SUPABASE_URL=
|
|
12
12
|
VITE_SUPABASE_PUBLIC_KEY=
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
# - Project URL: the https://xxx.supabase.co URL
|
|
7
7
|
# - Public key: "Publishable key" (sb_publishable_...) or legacy "anon key" (eyJ...)
|
|
8
8
|
#
|
|
9
|
-
# Then run: dndev setup
|
|
9
|
+
# Then run: dndev setup
|
|
10
10
|
# =============================================================================
|
|
11
11
|
EXPO_PUBLIC_SUPABASE_URL=
|
|
12
12
|
EXPO_PUBLIC_SUPABASE_PUBLIC_KEY=
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
# - Project URL: the https://xxx.supabase.co URL
|
|
7
7
|
# - Public key: "Publishable key" (sb_publishable_...) or legacy "anon key" (eyJ...)
|
|
8
8
|
#
|
|
9
|
-
# Then run: dndev setup
|
|
9
|
+
# Then run: dndev setup
|
|
10
10
|
# =============================================================================
|
|
11
11
|
NEXT_PUBLIC_SUPABASE_URL=
|
|
12
12
|
NEXT_PUBLIC_SUPABASE_PUBLIC_KEY=
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
# Firebase Configuration (data layer for Vercel-hosted app)
|
|
4
4
|
# =============================================================================
|
|
5
5
|
# Get these values from your Firebase project settings
|
|
6
|
-
# Run `dndev
|
|
6
|
+
# Run `dndev coach` to see where to get these, then `dndev setup` to validate
|
|
7
7
|
VITE_FIREBASE_API_KEY=
|
|
8
8
|
VITE_FIREBASE_PROJECT_ID=
|
|
9
9
|
# Copy from Firebase Console. Framework uses APP_URL hostname in production automatically.
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
# Firebase Configuration (data layer for Vercel-hosted app)
|
|
4
4
|
# =============================================================================
|
|
5
5
|
# Get these values from your Firebase project settings
|
|
6
|
-
# Run `dndev
|
|
6
|
+
# Run `dndev coach` to see where to get these, then `dndev setup` to validate
|
|
7
7
|
NEXT_PUBLIC_FIREBASE_API_KEY=
|
|
8
8
|
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
|
|
9
9
|
# Copy from Firebase Console. Framework uses APP_URL hostname in production automatically.
|
|
@@ -51,7 +51,7 @@ Skipping these steps means the work is untracked, unvalidated, and unacceptable.
|
|
|
51
51
|
|
|
52
52
|
## CLI Commands
|
|
53
53
|
|
|
54
|
-
`dndev` is
|
|
54
|
+
`dndev` is installed globally via `bun install -g` (no sudo needed) and also as a local devDependency. Run it directly — or use `bun run dev` / `bunx dndev` as fallback.
|
|
55
55
|
|
|
56
56
|
| Command | What it does |
|
|
57
57
|
|---------|-------------|
|
|
@@ -65,8 +65,8 @@ Skipping these steps means the work is untracked, unvalidated, and unacceptable.
|
|
|
65
65
|
| `dndev format` | Format code with Prettier |
|
|
66
66
|
| `dndev deploy` | Deploy to production |
|
|
67
67
|
| `dndev staging` | Deploy to staging/UAT |
|
|
68
|
-
| `dndev
|
|
69
|
-
| `dndev setup
|
|
68
|
+
| `dndev coach` | Show what to configure before running setup |
|
|
69
|
+
| `dndev setup` | Validate .env, automate provider setup, health check |
|
|
70
70
|
| `dndev doctor` | Check project health (providers, .env) |
|
|
71
71
|
| `dndev bump` | Update @donotdev packages to latest |
|
|
72
72
|
| `dndev cacheout` | Clear build caches |
|
|
@@ -101,3 +101,4 @@ Key tools: `start_phase` · `complete_phase` · `approve_phase` · `lookup_symbo
|
|
|
101
101
|
## Security Gate
|
|
102
102
|
|
|
103
103
|
Before production: run `dndev doctor` and `/grill`. See `get_guide("SOC2")` for details.
|
|
104
|
+
Golden path: `dndev coach` → fill .env → `dndev setup` → `dndev doctor`.
|
|
@@ -16,11 +16,10 @@
|
|
|
16
16
|
1. **P0 — Prerequisites**
|
|
17
17
|
- **Runtime:** **Node.js 24** (nodejs.org) and **Bun 1.3+** (bun.sh). Both required.
|
|
18
18
|
- **IDE:** Any IDE (Cursor, VS Code, Windsurf, etc.). Need help? Use the collapsible “Need help setting up?” on the Get Started page.
|
|
19
|
-
2. **
|
|
20
|
-
- `
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
- Start your IDE in that repo, open the terminal: `cd my-app` → `bun install`
|
|
19
|
+
2. **Create your project’s monorepo**
|
|
20
|
+
- `bunx create-donotdev my-app`
|
|
21
|
+
3. **Open the repo in your IDE**
|
|
22
|
+
- Start your IDE in that repo. Dependencies are already installed.
|
|
24
23
|
4. **Enable MCP, then read AI.md and follow the flow**
|
|
25
24
|
- Talk with your agent; ask it to load the MCP (Cursor: Ctrl+Shift+P → “MCP Server” → enable “donotdev”; other IDEs: see “How to enable MCP” collapsible on the Get Started page).
|
|
26
25
|
- Then have the agent read the root **`AI.md`** and this file (**`guides/dndev/AGENT_START_HERE.md`**). Follow the phases.
|
|
@@ -29,6 +28,22 @@
|
|
|
29
28
|
|
|
30
29
|
---
|
|
31
30
|
|
|
31
|
+
## Demo App — Canonical Reference
|
|
32
|
+
|
|
33
|
+
**Before building anything, look at the demo app:** `packages/cli/templates/app-demo/`
|
|
34
|
+
|
|
35
|
+
It demonstrates the correct way to use the framework:
|
|
36
|
+
- Per-route layout switching via `PageMeta.preset` (landing → admin → docs)
|
|
37
|
+
- SaaS pages as thin template wrappers (~5 lines each)
|
|
38
|
+
- Component showcase with filterable grid and detail pages
|
|
39
|
+
- Entity definition with `defineEntity()`
|
|
40
|
+
- Zero custom CSS in page files
|
|
41
|
+
- Auth-guarded routes alongside public routes
|
|
42
|
+
|
|
43
|
+
**Copy from the demo app, then customize.** Don't invent patterns — the demo app IS the pattern.
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
32
47
|
## First Thing to Call: list_features()
|
|
33
48
|
|
|
34
49
|
Call **`list_features()`** before designing or coding. It lists all framework packages with a one-line summary from each README (templates, core, ui, auth, billing, etc.). Use it so you don't reinvent what the framework already provides (blog, CRUD, billing, legal pages, etc.).
|
|
@@ -81,7 +96,7 @@ Check that the user has completed environment setup:
|
|
|
81
96
|
2. Service account key exists? (`service-account-key.json` in app root)
|
|
82
97
|
3. Emulators work? (`dndev emu start` runs without errors)
|
|
83
98
|
|
|
84
|
-
If not, coach them: "Run `dndev
|
|
99
|
+
If not, coach them: "Run `dndev coach` to see what to configure, fill in the .env values, then run `dndev setup`." See [SETUP_FIREBASE.md](./SETUP_FIREBASE.md) or [SETUP_SUPABASE.md](./SETUP_SUPABASE.md).
|
|
85
100
|
|
|
86
101
|
---
|
|
87
102
|
|
|
@@ -1,16 +1,9 @@
|
|
|
1
|
-
# Advanced Components (@donotdev/
|
|
1
|
+
# Advanced Components (@donotdev/components)
|
|
2
2
|
|
|
3
|
-
High-level, opinionated, and marketing-focused UI components
|
|
3
|
+
High-level, opinionated, and marketing-focused UI components from `@donotdev/components`.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
**IMPORTANT:** You must import the styles in your `globals.css` file:
|
|
8
|
-
|
|
9
|
-
```css
|
|
10
|
-
@import '@donotdev/adv-comps/styles';
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
Without this import, components will not have their required CSS styles.
|
|
5
|
+
All advanced components are included in `@donotdev/components` — no additional package needed.
|
|
6
|
+
Styles are automatically included via `@donotdev/components/styles`.
|
|
14
7
|
|
|
15
8
|
## Components
|
|
16
9
|
|
|
@@ -19,7 +12,7 @@ Without this import, components will not have their required CSS styles.
|
|
|
19
12
|
Cinematic 3D text crawl component with lazy loading.
|
|
20
13
|
|
|
21
14
|
```tsx
|
|
22
|
-
import { Crawl } from '@donotdev/
|
|
15
|
+
import { Crawl } from '@donotdev/components';
|
|
23
16
|
|
|
24
17
|
<Crawl
|
|
25
18
|
intro?: ReactNode | string
|
|
@@ -39,7 +32,7 @@ import { Crawl } from '@donotdev/adv-comps';
|
|
|
39
32
|
Production-grade marquee with accessibility, reduced motion support, and smart behavior detection.
|
|
40
33
|
|
|
41
34
|
```tsx
|
|
42
|
-
import { Marquee } from '@donotdev/
|
|
35
|
+
import { Marquee } from '@donotdev/components';
|
|
43
36
|
|
|
44
37
|
<Marquee<T>
|
|
45
38
|
items: T[]
|
|
@@ -63,8 +56,8 @@ import { Marquee } from '@donotdev/adv-comps';
|
|
|
63
56
|
Timeline component with horizontal (desktop) / vertical (mobile) layout. Features animated progress line, glowing nodes, and lift-on-hover cards.
|
|
64
57
|
|
|
65
58
|
```tsx
|
|
66
|
-
import { Roadmap } from '@donotdev/
|
|
67
|
-
import type { RoadmapStep } from '@donotdev/
|
|
59
|
+
import { Roadmap } from '@donotdev/components';
|
|
60
|
+
import type { RoadmapStep } from '@donotdev/components';
|
|
68
61
|
|
|
69
62
|
<Roadmap
|
|
70
63
|
steps: RoadmapStep[]
|
|
@@ -88,8 +81,8 @@ interface RoadmapStep {
|
|
|
88
81
|
Simple scroll-reveal stacked cards. Active card shows full content, stacked cards show only bottom edge with number.
|
|
89
82
|
|
|
90
83
|
```tsx
|
|
91
|
-
import { StackedCards } from '@donotdev/
|
|
92
|
-
import type { StackedCardData } from '@donotdev/
|
|
84
|
+
import { StackedCards } from '@donotdev/components';
|
|
85
|
+
import type { StackedCardData } from '@donotdev/components';
|
|
93
86
|
|
|
94
87
|
<StackedCards
|
|
95
88
|
items: StackedCardData[]
|
|
@@ -111,7 +104,7 @@ interface StackedCardData extends ComponentData {
|
|
|
111
104
|
Reveal component for staggered animations. Features viewport-based visibility detection, directional animations, and customizable stagger delays.
|
|
112
105
|
|
|
113
106
|
```tsx
|
|
114
|
-
import { Reveal } from '@donotdev/
|
|
107
|
+
import { Reveal } from '@donotdev/components';
|
|
115
108
|
|
|
116
109
|
<Reveal
|
|
117
110
|
items: string[] | ReactNode[]
|
|
@@ -131,54 +124,13 @@ import { Reveal } from '@donotdev/adv-comps';
|
|
|
131
124
|
/>
|
|
132
125
|
```
|
|
133
126
|
|
|
134
|
-
### InspectorGadget
|
|
135
|
-
|
|
136
|
-
Floating code inspector component. Displays a floating button with Code icon and label that opens a dialog showing the page's source code.
|
|
137
|
-
|
|
138
|
-
```tsx
|
|
139
|
-
import { InspectorGadget } from '@donotdev/adv-comps';
|
|
140
|
-
|
|
141
|
-
<InspectorGadget
|
|
142
|
-
data?: string // Source code string
|
|
143
|
-
sourcePath?: string // Path to source file (import with ?raw) - overrides data if provided
|
|
144
|
-
sourceCode?: string // Source code loaded from file
|
|
145
|
-
language?: string // Code language for syntax highlighting @default 'tsx'
|
|
146
|
-
title?: string // Dialog title @default 'Page Source'
|
|
147
|
-
className?: string
|
|
148
|
-
/>
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
### Breathing Components
|
|
152
|
-
|
|
153
|
-
Breathing exercise components for meditation and wellness apps.
|
|
154
|
-
|
|
155
|
-
```tsx
|
|
156
|
-
import { LungsAnimation, BreathingExerciseLayout } from '@donotdev/adv-comps';
|
|
157
|
-
import type { BreathingExerciseDnDevLayoutProps } from '@donotdev/adv-comps';
|
|
158
|
-
|
|
159
|
-
<BreathingExerciseLayout
|
|
160
|
-
status?: ReactNode
|
|
161
|
-
animation: ReactNode
|
|
162
|
-
instructions: ReactNode
|
|
163
|
-
debug?: boolean
|
|
164
|
-
onSkip?: () => void
|
|
165
|
-
statusValue?: string
|
|
166
|
-
onRestart?: () => void
|
|
167
|
-
onResume?: () => void
|
|
168
|
-
isPaused?: boolean
|
|
169
|
-
isComplete?: boolean
|
|
170
|
-
/>
|
|
171
|
-
|
|
172
|
-
<LungsAnimation ... />
|
|
173
|
-
```
|
|
174
|
-
|
|
175
127
|
### Carousel
|
|
176
128
|
|
|
177
129
|
Premium carousel component with lazy loading built-in. Features true infinite circular loop, hardware-accelerated animations, swipe/touch gestures, and autoplay with pause-on-hover.
|
|
178
130
|
|
|
179
131
|
```tsx
|
|
180
|
-
import { Carousel } from '@donotdev/
|
|
181
|
-
import type { CarouselProps, CarouselRef } from '@donotdev/
|
|
132
|
+
import { Carousel } from '@donotdev/components';
|
|
133
|
+
import type { CarouselProps, CarouselRef } from '@donotdev/components';
|
|
182
134
|
|
|
183
135
|
<Carousel<T>
|
|
184
136
|
items: T[]
|
|
@@ -196,100 +148,13 @@ import type { CarouselProps, CarouselRef } from '@donotdev/adv-comps';
|
|
|
196
148
|
/>
|
|
197
149
|
```
|
|
198
150
|
|
|
199
|
-
### ComparisonGrid
|
|
200
|
-
|
|
201
|
-
Comparison grid component for displaying feature comparisons. Provides lazy-loaded content with skeleton loading states.
|
|
202
|
-
|
|
203
|
-
```tsx
|
|
204
|
-
import { ComparisonGrid } from '@donotdev/adv-comps';
|
|
205
|
-
import type { ComparisonItem } from '@donotdev/adv-comps';
|
|
206
|
-
|
|
207
|
-
<ComparisonGrid
|
|
208
|
-
title?: string
|
|
209
|
-
items: ComparisonItem[]
|
|
210
|
-
gridCols?: 1 | 2 | 3 | 4 // @default 2
|
|
211
|
-
className?: string
|
|
212
|
-
ariaLabel?: string
|
|
213
|
-
/>
|
|
214
|
-
|
|
215
|
-
// ComparisonItem interface:
|
|
216
|
-
interface ComparisonItem {
|
|
217
|
-
useCase: string
|
|
218
|
-
bestFit: string
|
|
219
|
-
dndev: string
|
|
220
|
-
reason: string
|
|
221
|
-
}
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
### CongratulationsCard
|
|
225
|
-
|
|
226
|
-
Card component for displaying congratulatory messages. Features customizable icon and text with centered layout.
|
|
227
|
-
|
|
228
|
-
```tsx
|
|
229
|
-
import { CongratulationsCard } from '@donotdev/adv-comps';
|
|
230
|
-
|
|
231
|
-
<CongratulationsCard
|
|
232
|
-
text: string
|
|
233
|
-
icon?: ReactNode // @default '🎉'
|
|
234
|
-
className?: string
|
|
235
|
-
/>
|
|
236
|
-
```
|
|
237
|
-
|
|
238
|
-
### GuideModal
|
|
239
|
-
|
|
240
|
-
Modal component for displaying guides and tutorials. Provides step-by-step guide display with navigation, progress tracking, and completion handling.
|
|
241
|
-
|
|
242
|
-
```tsx
|
|
243
|
-
import { GuideModal } from '@donotdev/adv-comps';
|
|
244
|
-
import type { GuideModalProps, GuideTemplate } from '@donotdev/adv-comps';
|
|
245
|
-
|
|
246
|
-
<GuideModal
|
|
247
|
-
open: boolean
|
|
248
|
-
onOpenChange: (open: boolean) => void
|
|
249
|
-
guide: GuideTemplate
|
|
250
|
-
icon?: LucideIcon
|
|
251
|
-
/>
|
|
252
|
-
|
|
253
|
-
// GuideTemplate interface:
|
|
254
|
-
interface GuideTemplate {
|
|
255
|
-
title: string
|
|
256
|
-
subtitle: string
|
|
257
|
-
quickStart?: {
|
|
258
|
-
title: string
|
|
259
|
-
code: string
|
|
260
|
-
description: string
|
|
261
|
-
}
|
|
262
|
-
steps?: GuideStep[]
|
|
263
|
-
features?: string[]
|
|
264
|
-
templates?: Array<{
|
|
265
|
-
name: string
|
|
266
|
-
description: string
|
|
267
|
-
}>
|
|
268
|
-
actions?: Array<{
|
|
269
|
-
label: string
|
|
270
|
-
href: string
|
|
271
|
-
variant?: 'default' | 'outline'
|
|
272
|
-
icon?: LucideIcon
|
|
273
|
-
}>
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
// GuideStep interface:
|
|
277
|
-
interface GuideStep {
|
|
278
|
-
icon: LucideIcon
|
|
279
|
-
title: string
|
|
280
|
-
description: string
|
|
281
|
-
code?: string
|
|
282
|
-
details?: string
|
|
283
|
-
}
|
|
284
|
-
```
|
|
285
|
-
|
|
286
151
|
### SplitReveal
|
|
287
152
|
|
|
288
153
|
Split reveal component for displaying content in two columns. Features left column content and right column stat cards or custom content with reveal animations.
|
|
289
154
|
|
|
290
155
|
```tsx
|
|
291
|
-
import { SplitReveal } from '@donotdev/
|
|
292
|
-
import type { StatCardData } from '@donotdev/
|
|
156
|
+
import { SplitReveal } from '@donotdev/components';
|
|
157
|
+
import type { StatCardData } from '@donotdev/components';
|
|
293
158
|
|
|
294
159
|
<SplitReveal
|
|
295
160
|
left: ReactNode
|
|
@@ -307,34 +172,6 @@ interface StatCardData {
|
|
|
307
172
|
}
|
|
308
173
|
```
|
|
309
174
|
|
|
310
|
-
### StartChallengeForm
|
|
311
|
-
|
|
312
|
-
Generic form layout component for input + CTA button patterns.
|
|
313
|
-
|
|
314
|
-
```tsx
|
|
315
|
-
import { StartChallengeForm } from '@donotdev/adv-comps';
|
|
316
|
-
|
|
317
|
-
<StartChallengeForm
|
|
318
|
-
input={{
|
|
319
|
-
value: string
|
|
320
|
-
onChange: (value: string) => void
|
|
321
|
-
placeholder?: string
|
|
322
|
-
label?: string
|
|
323
|
-
maxLength?: number
|
|
324
|
-
className?: string
|
|
325
|
-
}}
|
|
326
|
-
button={{
|
|
327
|
-
label: string
|
|
328
|
-
onClick: () => void
|
|
329
|
-
icon?: ComponentType<{ className?: string }>
|
|
330
|
-
variant?: ButtonVariant
|
|
331
|
-
className?: string
|
|
332
|
-
}}
|
|
333
|
-
size?: 'sm' | 'md' | 'lg'
|
|
334
|
-
className?: string
|
|
335
|
-
/>
|
|
336
|
-
```
|
|
337
|
-
|
|
338
175
|
## Notes
|
|
339
176
|
|
|
340
177
|
- All components are lazy-loaded by default for optimal performance
|
|
@@ -346,7 +183,7 @@ import { StartChallengeForm } from '@donotdev/adv-comps';
|
|
|
346
183
|
|
|
347
184
|
FAQ section component for displaying frequently asked questions using accordion. Reads FAQ items from i18n JSON files.
|
|
348
185
|
|
|
349
|
-
**Note:** This component is from `@donotdev/core`, not `@donotdev/
|
|
186
|
+
**Note:** This component is from `@donotdev/core`, not `@donotdev/components`. It requires i18n setup with translation files.
|
|
350
187
|
|
|
351
188
|
```tsx
|
|
352
189
|
import { FAQSection, useTranslation } from '@donotdev/core';
|
|
@@ -10,12 +10,13 @@ If you haven’t run `dndev init` yet, see [AGENT_START_HERE.md](./AGENT_START_H
|
|
|
10
10
|
|
|
11
11
|
```
|
|
12
12
|
bun install → install dependencies
|
|
13
|
-
dndev dev
|
|
14
|
-
dndev
|
|
15
|
-
|
|
16
|
-
dndev setup
|
|
17
|
-
dndev
|
|
18
|
-
dndev
|
|
13
|
+
dndev dev → start app, read the homepage setup guide
|
|
14
|
+
dndev coach → see what to configure (numbered checklist)
|
|
15
|
+
(fill in .env values from dashboard)
|
|
16
|
+
dndev setup → validate .env, automate provider config
|
|
17
|
+
dndev doctor → health check
|
|
18
|
+
dndev emu start → test locally with emulators (Firebase)
|
|
19
|
+
dndev deploy → deploy to production
|
|
19
20
|
```
|
|
20
21
|
|
|
21
22
|
---
|
|
@@ -49,31 +50,27 @@ git push -u origin main
|
|
|
49
50
|
|
|
50
51
|
## Step 3: Backend Setup
|
|
51
52
|
|
|
52
|
-
###
|
|
53
|
+
### 1. See what to configure
|
|
53
54
|
|
|
54
55
|
```bash
|
|
55
|
-
dndev
|
|
56
|
+
dndev coach
|
|
56
57
|
```
|
|
57
58
|
|
|
58
|
-
|
|
59
|
+
Prints a numbered checklist: which dashboard to visit, what to copy, where to paste it. No automation, no prompts.
|
|
59
60
|
|
|
60
|
-
|
|
61
|
-
1. Download service account key -> save as `service-account-key.json`
|
|
62
|
-
2. Enable Auth + Firestore in Firebase Console
|
|
61
|
+
### 2. Fill in .env values
|
|
63
62
|
|
|
64
|
-
|
|
63
|
+
Follow the coach checklist. Paste credentials from your provider dashboards into the appropriate `.env` files.
|
|
65
64
|
|
|
66
|
-
###
|
|
65
|
+
### 3. Run setup
|
|
67
66
|
|
|
68
67
|
```bash
|
|
69
|
-
dndev setup
|
|
68
|
+
dndev setup
|
|
70
69
|
```
|
|
71
70
|
|
|
72
|
-
|
|
71
|
+
Validates all required env vars are present, runs provider automation (CLI linking, migrations, etc.), and runs an inline health check. If values are missing, it tells you which ones and points you back to `dndev coach`.
|
|
73
72
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
See [SETUP_SUPABASE.md](./SETUP_SUPABASE.md) for full details (tables, RLS, `dndev generate sql`). See [Secrets Philosophy](#secrets-philosophy) for how we handle secret keys.
|
|
73
|
+
See [SETUP_FIREBASE.md](./SETUP_FIREBASE.md) or [SETUP_SUPABASE.md](./SETUP_SUPABASE.md) for full details. See [Secrets Philosophy](#secrets-philosophy) for how we handle secret keys.
|
|
77
74
|
|
|
78
75
|
---
|
|
79
76
|
|
|
@@ -188,8 +185,9 @@ my-project/
|
|
|
188
185
|
|---------|-------------|
|
|
189
186
|
| `dndev dev` | Start dev server |
|
|
190
187
|
| `dndev emu start` | Start Firebase emulators |
|
|
191
|
-
| `dndev
|
|
192
|
-
| `dndev setup
|
|
188
|
+
| `dndev coach` | Show what to configure (numbered checklist) |
|
|
189
|
+
| `dndev setup` | Validate .env, automate provider config, health check |
|
|
190
|
+
| `dndev doctor` | Check project health (providers, .env) |
|
|
193
191
|
| `dndev deploy` | **Firebase:** hosting + functions + rules. **Supabase:** deploys frontend to [Vercel](https://vercel.com) (via scaffolded vercel.json) and Edge Functions to Supabase. Set `VITE_SUPABASE_*` in Vercel project env. |
|
|
194
192
|
| `dndev staging` | Deploy to staging environment |
|
|
195
193
|
| `dndev sync-secrets` | Push functions/.env to runtime (Firebase/Vercel) |
|