@donotdev/cli 0.0.18 → 0.0.19

package/templates/app-demo/src/main.tsx.example

@@ -1,11 +1,24 @@
 // apps/demo/src/main.tsx
 
+/**
+ * @fileoverview Demo application entry point
+ * @description Main entry point for the DoNotDev framework demo application
+ *
+ * Initializes React with StrictMode for development safety.
+ * Shell loader management is handled by BaseStoresInitializer for optimal timing.
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+
 import './globals.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
 import { App } from './App';
 
+// Ensure the root element exists
 const rootElement = document.getElementById('root');
 if (!rootElement) {
   throw new Error(
@@ -13,13 +26,6 @@ if (!rootElement) {
   );
 }
 
-// Remove shell loader (fade out then remove)
-const shellLoader = document.getElementById('shell-loader');
-if (shellLoader) {
-  shellLoader.classList.add('shell-loader--fading');
-  window.setTimeout(() => shellLoader.remove(), 300);
-}
-
 ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
     <App />

package/templates/app-demo/src/pages/ChangelogPage.tsx.example

@@ -0,0 +1,14 @@
+import { History } from 'lucide-react';
+
+import { WhatsNewTemplate } from '@donotdev/templates';
+
+import type { PageMeta } from '@donotdev/core';
+
+export const meta: PageMeta = {
+  icon: <History />,
+  preset: 'docs',
+};
+
+export default function ChangelogPage() {
+  return <WhatsNewTemplate />;
+}

package/templates/app-demo/src/pages/DashboardPage.tsx.example

@@ -0,0 +1,15 @@
+import { LayoutDashboard } from 'lucide-react';
+
+import { DashboardTemplate } from '@donotdev/templates';
+
+import type { PageMeta } from '@donotdev/core';
+
+export const meta: PageMeta = {
+  icon: <LayoutDashboard />,
+  auth: true,
+  preset: 'admin',
+};
+
+export default function DashboardPage() {
+  return <DashboardTemplate />;
+}

package/templates/app-demo/src/pages/HomePage.tsx.example

@@ -1,79 +1,5 @@
-// apps/demo/src/pages/HomePage.tsx
-
-import { useMemo } from 'react';
-import { useNavigate, useOutletContext } from 'react-router-dom';
-
-import {
-  Badge,
-  Card,
-  Grid,
-  Section,
-  Stack,
-} from '@donotdev/components';
-
-import {
-  COMPONENT_CONFIGS,
-  getCSSFamilies,
-} from './components/componentConfig';
-import type { CSSFamily } from './components/ComponentsData';
-
-type LayoutContext = {
-  selectedTab: CSSFamily | 'all';
-  searchQuery: string;
-};
+import { HomeTemplate } from '@donotdev/templates';
 
 export default function HomePage() {
-  const navigate = useNavigate();
-  const {
-    selectedTab,
-    searchQuery,
-  } = useOutletContext<LayoutContext>();
-
-  const componentsInTab = useMemo(() => {
-    return COMPONENT_CONFIGS.filter((config) => {
-      if (selectedTab !== 'all' && config.cssFamily !== selectedTab)
-        return false;
-
-      const matchesSearch =
-        searchQuery === '' ||
-        config.name.toLowerCase().includes(searchQuery.toLowerCase());
-
-      return matchesSearch;
-    }).sort((a, b) => a.name.localeCompare(b.name));
-  }, [selectedTab, searchQuery]);
-
-  const cssFamilies = getCSSFamilies();
-
-  return (
-    <Section
-      title={
-        cssFamilies.find((f) => f.id === selectedTab)?.label ||
-        'Components'
-      }
-      subtitle={`${componentsInTab.length} components`}
-    >
-      <Grid cols="auto-fit" minColWidth="240px">
-        {componentsInTab.map((config) => {
-          const isFullPageComponent = config.cssFamily === 'layout';
-          return (
-            <Card
-              key={config.id}
-              title={config.name}
-              onClick={() =>
-                isFullPageComponent
-                  ? navigate('/full')
-                  : navigate(`/component/${config.id}`)
-              }
-            >
-              <Stack direction="row" justify="end">
-                <Badge variant="secondary">
-                  {cssFamilies.find((f) => f.id === config.cssFamily)?.label || config.cssFamily}
-                </Badge>
-              </Stack>
-            </Card>
-          );
-        })}
-      </Grid>
-    </Section>
-  );
-}
+  return <HomeTemplate />;
+}

package/templates/app-demo/src/pages/PricingPage.tsx.example

@@ -0,0 +1,14 @@
+import { CreditCard } from 'lucide-react';
+
+import { SubscriptionTemplate } from '@donotdev/templates';
+
+import type { PageMeta } from '@donotdev/core';
+
+export const meta: PageMeta = {
+  icon: <CreditCard />,
+  hideFromMenu: true,
+};
+
+export default function PricingPage() {
+  return <SubscriptionTemplate />;
+}

package/templates/app-demo/src/pages/ProductsPage.tsx.example

@@ -0,0 +1,17 @@
+import { Package } from 'lucide-react';
+
+import { ProductCardListTemplate } from '@donotdev/templates';
+
+import { productEntity } from '../entities/product';
+
+import type { PageMeta } from '@donotdev/core';
+
+export const meta: PageMeta = {
+  icon: <Package />,
+  auth: true,
+  preset: 'admin',
+};
+
+export default function ProductsPage() {
+  return <ProductCardListTemplate entity={productEntity} />;
+}

package/templates/app-demo/src/pages/ProfilePage.tsx.example

@@ -0,0 +1,16 @@
+import { User } from 'lucide-react';
+
+import { ProfileTemplate } from '@donotdev/templates';
+
+import type { PageMeta } from '@donotdev/core';
+
+export const meta: PageMeta = {
+  icon: <User />,
+  auth: true,
+  preset: 'admin',
+  hideFromMenu: true,
+};
+
+export default function ProfilePage() {
+  return <ProfileTemplate billingPath="/pricing" />;
+}

package/templates/app-demo/src/pages/SettingsPage.tsx.example

@@ -0,0 +1,15 @@
+import { Settings } from 'lucide-react';
+
+import { SettingsTemplate } from '@donotdev/templates';
+
+import type { PageMeta } from '@donotdev/core';
+
+export const meta: PageMeta = {
+  icon: <Settings />,
+  auth: true,
+  preset: 'admin',
+};
+
+export default function SettingsPage() {
+  return <SettingsTemplate />;
+}

package/templates/app-demo/src/pages/ShowcaseDetailPage.tsx.example

@@ -0,0 +1,112 @@
+import { useMemo } from 'react';
+import { useParams, Navigate } from 'react-router-dom';
+
+import {
+  Badge,
+  Grid,
+  Stack,
+  Text,
+} from '@donotdev/components';
+import { PageContainer } from '@donotdev/ui';
+
+import {
+  COMPONENT_CONFIGS,
+  getCSSFamilies,
+} from './components/componentConfig';
+import { ComponentRenderer } from './components/ComponentRenderer';
+
+import type { PageMeta } from '@donotdev/core';
+import type { ComponentConfig } from './components/componentConfig';
+
+export const meta: PageMeta = {
+  route: { params: ['id'] },
+  hideFromMenu: true,
+  preset: 'admin',
+};
+
+export default function ShowcaseDetailPage() {
+  const { id } = useParams<{ id: string }>();
+
+  const config = useMemo(() => {
+    return COMPONENT_CONFIGS.find((c) => c.id === id);
+  }, [id]);
+
+  const cssFamilies = getCSSFamilies();
+
+  if (!config) {
+    return <Navigate to="/showcase" replace />;
+  }
+
+  const generateVariants = (
+    config: ComponentConfig
+  ): Array<Record<string, any>> => {
+    const variants: Array<Record<string, any>> = [{}];
+
+    const dimensions = ['variant', 'size', 'tone', 'type', 'side', 'mode'] as const;
+
+    dimensions.forEach((dim) => {
+      const values = config.variants[dim];
+      if (values?.length) {
+        const newVariants: Array<Record<string, any>> = [];
+        variants.forEach((base) => {
+          values.forEach((value) => {
+            newVariants.push({ ...base, [dim]: value });
+          });
+        });
+        variants.length = 0;
+        variants.push(...newVariants);
+      }
+    });
+
+    return variants.length > 0 ? variants : [{}];
+  };
+
+  const allVariants = generateVariants(config);
+
+  return (
+    <PageContainer>
+      <Stack gap="large" align="center">
+        <Stack gap="tight" align="center">
+          <Text level="h2">{config.name}</Text>
+          <Badge variant="outline">
+            {cssFamilies.find((f) => f.id === config.cssFamily)?.label ||
+              config.cssFamily}
+          </Badge>
+        </Stack>
+
+        <Grid cols="auto-fit" minColWidth="320px" gap="large">
+          {allVariants.map((variantProps, idx) => {
+            const variantLabels = Object.entries(variantProps)
+              .filter(([_, v]) => v)
+              .map(([k, v]) => `${k}: ${v}`);
+
+            return (
+              <Stack key={idx} align="center">
+                {variantLabels.length > 0 && (
+                  <Stack
+                    direction="row"
+                    gap="tight"
+                    wrap="wrap"
+                    justify="center"
+                  >
+                    {variantLabels.map((label) => (
+                      <Badge key={label} variant="secondary">
+                        {label}
+                      </Badge>
+                    ))}
+                  </Stack>
+                )}
+                <Stack align="center" justify="center">
+                  <ComponentRenderer
+                    config={config}
+                    variantProps={variantProps}
+                  />
+                </Stack>
+              </Stack>
+            );
+          })}
+        </Grid>
+      </Stack>
+    </PageContainer>
+  );
+}

package/templates/app-demo/src/pages/ShowcasePage.tsx.example

@@ -0,0 +1,91 @@
+import { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Component } from 'lucide-react';
+
+import {
+  Badge,
+  Card,
+  Grid,
+  Input,
+  Section,
+  Stack,
+  Tabs,
+} from '@donotdev/components';
+
+import {
+  COMPONENT_CONFIGS,
+  getCSSFamilies,
+} from './components/componentConfig';
+
+import type { PageMeta } from '@donotdev/core';
+import type { CSSFamily } from './components/ComponentsData';
+
+export const meta: PageMeta = {
+  icon: <Component />,
+  preset: 'admin',
+};
+
+export default function ShowcasePage() {
+  const navigate = useNavigate();
+  const [selectedTab, setSelectedTab] = useState<CSSFamily | 'all'>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const componentsInTab = useMemo(() => {
+    return COMPONENT_CONFIGS.filter((config) => {
+      if (selectedTab !== 'all' && config.cssFamily !== selectedTab)
+        return false;
+      return (
+        searchQuery === '' ||
+        config.name.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }).sort((a, b) => a.name.localeCompare(b.name));
+  }, [selectedTab, searchQuery]);
+
+  const cssFamilies = getCSSFamilies();
+
+  return (
+    <Stack gap="large">
+      <Stack direction="row" gap="medium" align="end" wrap="wrap">
+        <Input
+          placeholder="Filter components..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+      </Stack>
+
+      <Tabs
+        items={cssFamilies.map((family) => ({
+          value: family.id,
+          label: family.label,
+          content: null,
+        }))}
+        value={selectedTab}
+        onValueChange={(value) => setSelectedTab(value as CSSFamily | 'all')}
+      />
+
+      <Section
+        title={
+          cssFamilies.find((f) => f.id === selectedTab)?.label || 'Components'
+        }
+      >
+        <Grid cols={[1, 2, 3, 4]} gap="medium">
+          {componentsInTab.map((config) => (
+            <Card
+              key={config.id}
+              title={config.name}
+              clickable
+              onClick={() => navigate(`/showcase/${config.id}`)}
+            >
+              <Stack direction="row" justify="end">
+                <Badge variant="secondary">
+                  {cssFamilies.find((f) => f.id === config.cssFamily)?.label ||
+                    config.cssFamily}
+                </Badge>
+              </Stack>
+            </Card>
+          ))}
+        </Grid>
+      </Section>
+    </Stack>
+  );
+}

package/templates/app-demo/src/pages/legal/LegalPage.tsx.example

@@ -0,0 +1,14 @@
+import { Scale } from 'lucide-react';
+
+import { LegalNoticeTemplate } from '@donotdev/templates';
+
+import type { PageMeta } from '@donotdev/core';
+
+export const meta: PageMeta = {
+  icon: <Scale />,
+  hideFromMenu: true,
+};
+
+export default function LegalPage() {
+  return <LegalNoticeTemplate />;
+}

package/templates/app-demo/src/pages/legal/PrivacyPage.tsx.example

@@ -0,0 +1,14 @@
+import { Shield } from 'lucide-react';
+
+import { PrivacyPolicyTemplate } from '@donotdev/templates';
+
+import type { PageMeta } from '@donotdev/core';
+
+export const meta: PageMeta = {
+  icon: <Shield />,
+  hideFromMenu: true,
+};
+
+export default function PrivacyPage() {
+  return <PrivacyPolicyTemplate />;
+}

package/templates/app-demo/src/pages/legal/TermsPage.tsx.example

@@ -0,0 +1,14 @@
+import { FileText } from 'lucide-react';
+
+import { TermsOfServiceTemplate } from '@donotdev/templates';
+
+import type { PageMeta } from '@donotdev/core';
+
+export const meta: PageMeta = {
+  icon: <FileText />,
+  hideFromMenu: true,
+};
+
+export default function TermsPage() {
+  return <TermsOfServiceTemplate />;
+}

package/templates/app-demo/tsconfig.json.example

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.vite.json",
   "compilerOptions": {
     "baseUrl": ".",
     "types": ["node", "vite/client"]

package/templates/app-demo/vite.config.ts.example

@@ -1,53 +1,28 @@
 // apps/demo/vite.config.ts
-import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
-import autoprefixer from 'autoprefixer';
-// @ts-expect-error - postcss-import doesn't have type definitions
-import postcssImport from 'postcss-import';
-import postcssNesting from 'postcss-nesting';
-import { resolve as pathResolve } from 'node:path';
-import { createRequire } from 'node:module';
 
-const require = createRequire(import.meta.url);
+/**
+ * @fileoverview Vite build configuration for the demo app
+ * @description Configures Vite build tool with application settings, development server, HMR, and file watching options for the demo application.
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
 
-export default defineConfig({
-  plugins: [
-    react({
-      jsxRuntime: 'automatic',
-    }),
-    tsconfigPaths({
-      ignoreConfigErrors: true,
-    }),
-  ],
-  css: {
-    postcss: {
-      plugins: [
-        postcssImport({
-          resolve: (id: string, basedir: string) => {
-            // Handle package imports like '@donotdev/components/styles'
-            if (!id.startsWith('.')) {
-              try {
-                return require.resolve(id, { paths: [basedir] });
-              } catch {
-                // Fallback to relative resolution
-                return pathResolve(basedir, id);
-              }
-            }
-            // Relative imports
-            return pathResolve(basedir, id);
-          },
-        }),
-        postcssNesting,
-        autoprefixer,
-      ],
+import { defineViteConfig } from '@donotdev/core/vite';
+
+import { appConfig } from './src/config/app';
+
+// Features and SEO are now in app.ts (runtime config)
+// Only build-time configs (routes, themes, i18n, assets) go here
+export default defineViteConfig({
+  appConfig,
+  server: {
+    port: 3003,
+    https: false,
+
+    // HMR Configuration - Enabled for debugging
+    hmr: {
+      overlay: true, // Show error overlay in browser
     },
   },
-  optimizeDeps: {
-    include: ['react', 'react-dom', 'react/jsx-runtime'],
-  },
-  resolve: {
-    dedupe: ['react', 'react-dom'],
-    preserveSymlinks: false,
-  },
-});
+});

package/templates/app-expo/README.md.example

@@ -8,7 +8,7 @@ Mobile app built with DoNotDev Framework and Expo.
 
 - Node.js 20+ and Bun 1.3+
 - Expo Go app on your phone (for development)
-- Firebase project (run `dndev setup firebase`)
+- Provider configured (run `dndev coach` then `dndev setup`)
 
 ### Development
 

package/templates/app-expo/app/index.tsx.example

@@ -33,7 +33,7 @@ export default function HomePage() {
             <View>
               <Text level="h3">1. Backend Setup</Text>
               <Text level="small">
-                Run: dndev setup
+                Run: dndev coach → fill .env → dndev setup
               </Text>
             </View>
             

package/templates/app-vite/src/pages/HomePage.tsx.example

@@ -51,17 +51,15 @@ export default function HomePage() {
           />
 
           <Card
-            title="2. Firebase Setup"
+            title="2. Provider Setup"
             content={[
-              'Run: dndev setup firebase',
-              'This will:',
-              '  - Create or select a Firebase project',
-              '  - Create a web app if needed',
-              '  - Write Firebase config to your .env automatically',
-              '  - Update .firebaserc with your project ID',
-              'Then follow the prompts for the 2 manual steps:',
-              '  - Download service account key',
-              '  - Enable Auth + Firestore in Firebase Console',
+              'Run: dndev coach',
+              'This shows what to configure:',
+              '  - Which dashboard to visit',
+              '  - What to copy and where to paste it',
+              'Fill in your .env values, then run:',
+              '  dndev setup',
+              'Setup validates, automates, and health-checks.',
             ]}
           />
         </Grid>

package/templates/overlay-firebase/env.fragment.example

@@ -3,7 +3,7 @@
 # Firebase Configuration
 # =============================================================================
 # Get these values from your Firebase project settings
-# Run `dndev setup firebase` to auto-populate, or copy from Firebase Console
+# Run `dndev coach` to see where to get these, then `dndev setup` to validate
 VITE_FIREBASE_API_KEY=
 VITE_FIREBASE_PROJECT_ID=
 # Copy from Firebase Console. Framework uses APP_URL hostname in production automatically.

package/templates/overlay-firebase/env.fragment.expo.example

@@ -3,7 +3,7 @@
 # Firebase Configuration
 # =============================================================================
 # Get these values from your Firebase project settings
-# Run `dndev setup firebase` to auto-populate, or copy from Firebase Console
+# Run `dndev coach` to see where to get these, then `dndev setup` to validate
 EXPO_PUBLIC_FIREBASE_API_KEY=
 EXPO_PUBLIC_FIREBASE_PROJECT_ID=
 # Copy from Firebase Console. Framework uses APP_URL hostname in production automatically.

package/templates/overlay-firebase/env.fragment.nextjs.example

@@ -3,7 +3,7 @@
 # Firebase Configuration
 # =============================================================================
 # Get these values from your Firebase project settings
-# Run `dndev setup firebase` to auto-populate, or copy from Firebase Console
+# Run `dndev coach` to see where to get these, then `dndev setup` to validate
 NEXT_PUBLIC_FIREBASE_API_KEY=
 NEXT_PUBLIC_FIREBASE_PROJECT_ID=
 # Copy from Firebase Console. Framework uses APP_URL hostname in production automatically.

package/templates/overlay-supabase/env.fragment.example

@@ -6,7 +6,7 @@
 #   - Project URL: the https://xxx.supabase.co URL
 #   - Public key:  "Publishable key" (sb_publishable_...) or legacy "anon key" (eyJ...)
 #
-# Then run: dndev setup supabase
+# Then run: dndev setup
 # =============================================================================
 VITE_SUPABASE_URL=
 VITE_SUPABASE_PUBLIC_KEY=

package/templates/overlay-supabase/env.fragment.expo.example

@@ -6,7 +6,7 @@
 #   - Project URL: the https://xxx.supabase.co URL
 #   - Public key:  "Publishable key" (sb_publishable_...) or legacy "anon key" (eyJ...)
 #
-# Then run: dndev setup supabase
+# Then run: dndev setup
 # =============================================================================
 EXPO_PUBLIC_SUPABASE_URL=
 EXPO_PUBLIC_SUPABASE_PUBLIC_KEY=

package/templates/overlay-supabase/env.fragment.nextjs.example

@@ -6,7 +6,7 @@
 #   - Project URL: the https://xxx.supabase.co URL
 #   - Public key:  "Publishable key" (sb_publishable_...) or legacy "anon key" (eyJ...)
 #
-# Then run: dndev setup supabase
+# Then run: dndev setup
 # =============================================================================
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_PUBLIC_KEY=