@donotdev/cli 0.0.5 → 0.0.7

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

@@ -1,75 +1,103 @@
 /**
- * @fileoverview Application configuration
- * @description Defines application metadata and feature flags
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
+ * @fileoverview Application Configuration
+ *
+ * THIS FILE IS YOUR MAIN CONFIGURATION. Update the values below.
+ *
+ * QUICK START:
+ * 1. Set APP_NAME and APP_SHORT_NAME
+ * 2. Choose your preset (see guide below)
+ * 3. Configure footer links
+ * 4. Run `bun dev` - everything else is automatic
  */
 
 import type { AppConfig } from '@donotdev/core';
 
-/**
- * Application name constant
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-export const APP_NAME = '{{appName}}';
+// ============================================================================
+// APP IDENTITY - Update these values
+// ============================================================================
 
-/**
- * Application short name constant
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
+export const APP_NAME = '{{appName}}';
 export const APP_SHORT_NAME = '{{appShortName}}';
-
-/**
- * Application description constant
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
 export const APP_DESCRIPTION = 'Built with DoNotDev Framework';
 
-/**
- * Application configuration object
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
+// ============================================================================
+// MAIN CONFIGURATION
+// ============================================================================
+
 export const appConfig: AppConfig = {
   app: {
     name: APP_NAME,
     shortName: APP_SHORT_NAME,
     description: APP_DESCRIPTION,
-    // Optional: Configure footer legal links
-    // Remove any links you don't need
+    // url: 'https://yourapp.com', // Uncomment for production
+
+    // Footer legal links - remove any you don't need
     footer: {
       legalLinks: [
         { path: '#cookie-settings', label: 'footer.legal.cookieSettings' },
         { path: '/legal/privacy', label: 'footer.legal.privacyPolicy' },
         { path: '/legal/terms', label: 'footer.legal.termsOfService' },
-        // Add more links as needed:
-        // { path: '/legal/legal-notice', label: 'footer.legal.legalNotice' },
-        // { path: '/license', label: 'License' },
+        // { path: '/legal/notice', label: 'footer.legal.legalNotice' },
       ],
     },
   },
-  preset: 'landing', // 'landing' | 'admin' | 'moolti' | 'docs' | 'blog' | 'game' | 'plain'
+
+  // ==========================================================================
+  // PRESET GUIDE - Choose your layout
+  // ==========================================================================
+  //
+  // 'landing'  → Marketing site. Full-width sections, centered content, no sidebar.
+  //              Best for: Homepage, product pages, pricing, landing pages.
+  //
+  // 'admin'    → Dashboard app. Collapsible sidebar, header with user menu.
+  //              Best for: Admin panels, CRM, internal tools, CRUD apps.
+  //
+  // 'moolti'   → Multi-panel. Left sidebar nav, optional right context sidebar.
+  //              Best for: Complex apps with nested navigation, settings panels.
+  //
+  // 'docs'     → Documentation. Left sidebar TOC, right sidebar on-page nav.
+  //              Best for: Documentation sites, knowledge bases, help centers.
+  //
+  // 'blog'     → Blog layout. Wide content area, optional category sidebar.
+  //              Best for: Blog, news, articles, content-heavy sites.
+  //
+  // 'game'     → Fullscreen. Minimal chrome, focus on content area.
+  //              Best for: Games, immersive experiences, presentations.
+  //
+  // 'plain'    → No layout. Just your pages, you handle everything.
+  //              Best for: Custom layouts, embedded widgets, special cases.
+  //
+  preset: 'landing',
+
+  // ==========================================================================
+  // FEATURES - Uncomment to enable
+  // ==========================================================================
   features: {
-    // Optional: Enable debug tools in development
-    // debug: true,
+    // debug: true, // Enable debug tools in development
   },
-  // Optional: Override auth routes
+
+  // ==========================================================================
+  // AUTH CONFIG - Uncomment to customize
+  // ==========================================================================
   // auth: {
-  //   authRoute: '/signin',
-  //   roleRoute: '/403',
-  //   tierRoute: '/pricing',
+  //   authRoute: '/signin',        // Redirect when auth required
+  //   roleRoute: '/403',           // Redirect when role insufficient
+  //   tierRoute: '/pricing',       // Redirect when subscription required
+  //   profilePath: '/profile',     // Profile page path (undefined to hide)
+  //   authMenuItems: [             // Custom menu items for logged-in users
+  //     { path: '/dashboard', label: 'Dashboard' },
+  //   ],
+  // },
+
+  // ==========================================================================
+  // QUERY CACHE - Uncomment to enable auto-refetch
+  // ==========================================================================
+  // Default: Infinite cache (cost-optimized, manual refresh)
+  // Uncomment for auto-refetch behavior:
+  // query: {
+  //   staleTime: 1000 * 60 * 5,    // 5 minutes
+  //   refetchOnWindowFocus: true,
+  //   refetchOnReconnect: true,
   // },
 };
 

package/templates/app-vite/src/globals.css.example

@@ -3,9 +3,17 @@
 
 @import './themes.css';
 
-/* Override framework's default font to use Roboto */
-:root {
-  --font-sans: 'Roboto', sans-serif;
-  --font-mono: 'Roboto Mono', monospace;
-  --font-family: var(--font-sans);
-} 
+/**
+ * Font configuration
+ * 
+ * Framework defaults to Inter (defined in @donotdev/components/styles/variables.css).
+ * Fonts are loaded via CSS @font-face rules in @donotdev/ui/assets/fonts/fonts.css
+ * and copied to public/fonts/ by AssetDiscovery during build.
+ * 
+ * To override, uncomment and customize:
+ * :root {
+ *   --font-sans: 'YourFont', sans-serif;
+ *   --font-mono: 'YourMonoFont', monospace;
+ *   --font-family: var(--font-sans);
+ * }
+ */ 

package/templates/app-vite/src/locales/dndev_en.json.example

@@ -496,6 +496,10 @@
     "copied": "Copied!",
     "copyCodeToClipboard": "Copy code to clipboard"
   },
+  "video": {
+    "clickToWatch": "Click to watch video",
+    "watchVideo": "Watch Video"
+  },
   "inspector": {
     "pageSource": "Page Source",
     "inspectPageSourceCode": "Inspect page source code"
@@ -512,5 +516,69 @@
     "goHome": "Go Home",
     "goBack": "Go Back",
     "contactSupport": "If the problem persists, please contact support."
+  },
+  "redirectOverlay": {
+    "phases": {
+      "connecting": "Connecting to secure server...",
+      "preparing": "Preparing your session...",
+      "redirecting": "Redirecting...",
+      "timeout": "Taking longer than expected..."
+    },
+    "cancel": "Cancel",
+    "doNotRefresh": "Please do not refresh or press back",
+    "default": {
+      "title": "Redirecting",
+      "message": "Please wait while we redirect you...",
+      "subtitle": "This may take a moment",
+      "ariaLabel": "Redirecting, please wait"
+    },
+    "stripe-checkout": {
+      "title": "Redirecting to Stripe",
+      "message": "Initializing secure payment...",
+      "subtitle": "This may take a moment on first load",
+      "ariaLabel": "Preparing secure checkout, please wait"
+    },
+    "stripe-portal": {
+      "title": "Redirecting to Stripe",
+      "message": "Opening billing portal...",
+      "subtitle": "Manage your subscription and invoices",
+      "ariaLabel": "Opening billing portal, please wait"
+    },
+    "oauth-google": {
+      "title": "Signing in with Google",
+      "message": "Connecting to Google...",
+      "subtitle": "You will be redirected to sign in",
+      "ariaLabel": "Signing in with Google, please wait"
+    },
+    "oauth-github": {
+      "title": "Signing in with GitHub",
+      "message": "Connecting to GitHub...",
+      "subtitle": "You will be redirected to sign in",
+      "ariaLabel": "Signing in with GitHub, please wait"
+    },
+    "oauth-apple": {
+      "title": "Signing in with Apple",
+      "message": "Connecting to Apple...",
+      "subtitle": "You will be redirected to sign in",
+      "ariaLabel": "Signing in with Apple, please wait"
+    },
+    "oauth-microsoft": {
+      "title": "Signing in with Microsoft",
+      "message": "Connecting to Microsoft...",
+      "subtitle": "You will be redirected to sign in",
+      "ariaLabel": "Signing in with Microsoft, please wait"
+    },
+    "oauth-facebook": {
+      "title": "Signing in with Facebook",
+      "message": "Connecting to Facebook...",
+      "subtitle": "You will be redirected to sign in",
+      "ariaLabel": "Signing in with Facebook, please wait"
+    },
+    "auth-email-link": {
+      "title": "Sending verification",
+      "message": "Preparing your verification link...",
+      "subtitle": "Check your email inbox",
+      "ariaLabel": "Sending verification email, please wait"
+    }
   }
 }

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

@@ -0,0 +1,152 @@
+/**
+ * @fileoverview Example CRUD Form Page (Create/Edit)
+ *
+ * COPY THIS FILE and rename (e.g., ProductPage.tsx, CustomerPage.tsx)
+ *
+ * HOW IT WORKS:
+ * 1. Route: /products/:id (edit) or /products/new (create)
+ * 2. EntityFormRenderer generates form from entity fields
+ * 3. useCrud provides get/add/update operations
+ * 4. Optimistic updates - navigation is instant, sync happens in background
+ */
+
+import { useEffect, useState } from 'react';
+
+import { Section, Button, Alert } from '@donotdev/components';
+import { EntityFormRenderer, useCrud } from '@donotdev/crud';
+import { useTranslation } from '@donotdev/core';
+import type { PageMeta } from '@donotdev/core';
+import { PageContainer, Link, useNavigate } from '@donotdev/ui';
+
+// Import your entity from root-level entities folder
+// import { productEntity } from 'entities/Product';
+
+// Placeholder - replace with your entity import
+const productEntity = null as any;
+
+// Helper to get route param - replace with your routing solution
+const useParam = (name: string) => {
+  // For react-router: const { id } = useParams();
+  // For TanStack Router: const { id } = Route.useParams();
+  return 'new'; // Placeholder
+};
+
+// ============================================================================
+// PAGE METADATA
+// ============================================================================
+
+export const NAMESPACE = 'product';
+
+export const meta: PageMeta = {
+  namespace: NAMESPACE,
+  route: '/products/:id',
+  auth: { required: true, role: 'admin' },
+  hideFromMenu: true, // Don't show in navigation (accessed via list page)
+};
+
+// ============================================================================
+// PAGE COMPONENT
+// ============================================================================
+
+export default function ProductPage() {
+  const { t } = useTranslation(NAMESPACE);
+  const id = useParam('id');
+  const navigate = useNavigate();
+  const isNew = id === 'new';
+
+  // useCrud provides CRUD operations with optimistic updates
+  // backend: 'functions' uses Cloud Functions, 'firestore' uses direct Firestore
+  const { get, add, update, error } = useCrud(productEntity, { backend: 'functions' });
+  const [formData, setFormData] = useState<any>(null);
+
+  // ==========================================================================
+  // FETCH EXISTING DATA (edit mode only)
+  // ==========================================================================
+  useEffect(() => {
+    if (!isNew && id) {
+      get(id).then((data) => {
+        if (data) setFormData(data);
+      });
+    }
+  }, [id, isNew, get]);
+
+  // ==========================================================================
+  // FORM SUBMISSION - Optimistic Update Pattern
+  // ==========================================================================
+  const handleSubmit = async (data: any) => {
+    // OPTIMISTIC UPDATE: Fire and forget!
+    // We don't await the backend. We navigate immediately.
+    // CrudStore handles background sync and optimistic cache update.
+
+    if (isNew) {
+      add(data); // No await - fires in background
+    } else if (id) {
+      update(id, data); // No await - fires in background
+    }
+
+    // Instant navigation - feels incredibly fast
+    navigate('/products');
+  };
+
+  // ==========================================================================
+  // ERROR STATE
+  // ==========================================================================
+  if (!isNew && error) {
+    return (
+      <PageContainer>
+        <Section title={t('error')}>
+          <Alert variant="error" description={t('failedToLoadData')} />
+          <Link path="/products">
+            <Button variant="outline">{t('backToList')}</Button>
+          </Link>
+        </Section>
+      </PageContainer>
+    );
+  }
+
+  // ==========================================================================
+  // RENDER FORM
+  // ==========================================================================
+  return (
+    <PageContainer>
+      <Section
+        gridCols={[1, 1, 2, 2]} // Responsive: 1 col mobile, 2 cols desktop
+        title={isNew ? t('addNew') : t('edit')}
+      >
+        {isNew ? (
+          // CREATE MODE
+          <EntityFormRenderer
+            entity={productEntity}
+            operation="create"
+            onSubmit={handleSubmit}
+            defaultValues={{ status: 'draft' }} // Initial values for new items
+            submitText={t('create')}
+          />
+        ) : (
+          // EDIT MODE
+          <EntityFormRenderer
+            entity={productEntity}
+            operation="edit"
+            onSubmit={handleSubmit}
+            defaultValues={formData} // Loaded data
+            submitText={t('update')}
+          />
+        )}
+      </Section>
+    </PageContainer>
+  );
+}
+
+// ============================================================================
+// i18n KEYS NEEDED (add to locales/product_en.json)
+// ============================================================================
+//
+// {
+//   "addNew": "Add New Product",
+//   "edit": "Edit Product",
+//   "create": "Create Product",
+//   "update": "Update Product",
+//   "error": "Error",
+//   "failedToLoadData": "Failed to load product data",
+//   "backToList": "Back to Products"
+// }

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

@@ -1,163 +1,110 @@
-// apps/{{appName}}/src/pages/HomePage.tsx
-
 /**
- * @fileoverview Home page component
- * @description Scaffold landing page demonstrating DoNotDev framework patterns
- * @version 0.0.4
- * @since 0.0.1
+ * @fileoverview Home Page
+ *
+ * THIS FILE IS YOUR STARTING POINT. Modify the content below.
+ *
+ * HOW PAGES WORK:
+ * 1. Name files *Page.tsx in src/pages/ → auto-discovered as routes
+ * 2. Export `meta` for navigation, auth, icons
+ * 3. Export default function → your page component
+ * 4. Use PageContainer as wrapper → handles layout, scrolling
  */
 
 import { Home } from 'lucide-react';
 
-import {
-  Button,
-  CallToAction,
-  Card,
-  Grid,
-  GridArea,
-  HeroSection,
-  RadioGroup,
-  Section,
-  Stack,
-  Text,
-} from '@donotdev/components';
-import {
-  useLayout,
-  useTranslation,
-  type LayoutPreset,
-  type PageMeta,
-} from '@donotdev/core';
+import { Button, HeroSection, Section, Card, Grid, Stack } from '@donotdev/components';
+import type { PageMeta } from '@donotdev/core';
 import { PageContainer, Link } from '@donotdev/ui';
 
-const LAYOUT_PRESETS: LayoutPreset[] = [
-  'admin',
-  'docs',
-  'landing',
-  'moolti',
-  'blog',
-  'game',
-];
-
+// ============================================================================
+// PAGE METADATA - Controls routing, navigation, and access
+// ============================================================================
+//
+// namespace    → i18n namespace for translations (matches locales/home_en.json)
+// icon         → Navigation icon (from lucide-react)
+// nav          → Show in navigation (default: true, set false to hide)
+// navGroup     → Navigation group: 'main' | 'admin' | 'footer' (default: 'main')
+// route        → Custom route path (default: derived from filename)
+// auth         → Access control:
+//                - undefined → public (anyone can view)
+//                - true → requires login
+//                - 'admin' → requires admin role
+//                - { required: true, role: 'admin' } → full syntax
+// tier         → Subscription tier required: 'pro' | 'enterprise'
+// hideFromMenu → Show in routing but hide from navigation menu
+//
 export const NAMESPACE = 'home';
 
 export const meta: PageMeta = {
   namespace: NAMESPACE,
   icon: <Home />,
+  // nav: true,                    // Uncomment to hide from navigation
+  // navGroup: 'main',             // 'main' | 'admin' | 'footer'
+  // route: '/',                   // Custom route (default: / for HomePage)
+  // auth: true,                   // Uncomment to require login
+  // auth: 'admin',                // Uncomment to require admin role
+  // auth: { required: true, role: 'admin' }, // Full syntax
+  // tier: 'pro',                  // Uncomment to require subscription
+  // hideFromMenu: true,           // Uncomment to hide from menu but keep route
 };
 
-export default function HomePage() {
-  const currentPreset = useLayout('layoutPreset');
-  const setLayoutPreset = useLayout('setLayoutPreset');
-  const { t } = useTranslation([NAMESPACE]);
+// ============================================================================
+// PAGE COMPONENT
+// ============================================================================
 
+export default function HomePage() {
   return (
     <PageContainer>
+      {/* Hero Section - Full-width banner with title and subtitle */}
       <HeroSection
-        title={t('hero.title', "Welcome to DnDev")}
-        subtitle={t('hero.subtitle', "Your app is ready. Explore the framework patterns below.")}
+        title="Welcome to Your App"
+        subtitle="Built with DoNotDev Framework. Edit this page in src/pages/HomePage.tsx"
         variant="primary"
       />
 
-      {/* Layout Switcher */}
-      <Section title="Try Our Layouts" tone="muted" align="center">
-        <Text>
-          Pick a layout and see it change live. Set your preferred layout in
-          config/app.ts
-        </Text>
-        <RadioGroup
-          value={currentPreset || 'landing'}
-          onValueChange={(value) => setLayoutPreset(value as LayoutPreset)}
-          gridCols={3}
-          items={LAYOUT_PRESETS.map((preset) => ({
-            value: preset,
-            label: preset.charAt(0).toUpperCase() + preset.slice(1),
-          }))}
-        />
+      {/* Section - Content block with optional title */}
+      <Section title="Getting Started">
+        <Grid cols={[1, 1, 2, 3]} gap="medium">
+          <Card title="1. Configure" content="Edit src/config/app.ts to set your app name and preset." />
+          <Card title="2. Create Pages" content="Add *Page.tsx files in src/pages/ - they auto-route." />
+          <Card title="3. Add Content" content="Use components from @donotdev/components." />
+        </Grid>
       </Section>
 
-      {/* Components Showcase */}
-      <Section title="Components Showcase">
-        {/* Stack Example */}
-        <Card title="Stack Component">
-          <Text variant="muted">
-            Stack creates flex containers. Default vertical, use direction="row"
-            for horizontal.
-          </Text>
+      {/* Stack - Flexible container for buttons, inline items */}
+      <Section title="Layout Components">
+        <Stack direction="row" gap="medium" wrap>
+          <Button variant="primary">Primary Button</Button>
+          <Button variant="outline">Outline Button</Button>
+          <Button variant="ghost">Ghost Button</Button>
+        </Stack>
+      </Section>
+
+      {/* Call to Action */}
+      <Section tone="muted" align="center">
+        <Stack gap="medium" align="center">
+          <h2>Ready to Build?</h2>
+          <p>Check out the guides folder for setup instructions.</p>
           <Stack direction="row" gap="medium">
-            <Card variant="primary" title="Item 1">
-              <Text>Horizontal</Text>
-            </Card>
-            <Card variant="accent" title="Item 2">
-              <Text>Stack</Text>
-            </Card>
+            <Button
+              variant="primary"
+              render={({ children, ...props }) => (
+                <Link path="https://donotdev.com" {...props}>{children}</Link>
+              )}
+            >
+              Documentation
+            </Button>
+            <Button
+              variant="outline"
+              render={({ children, ...props }) => (
+                <Link path="https://discord.gg/donotdev" {...props}>{children}</Link>
+              )}
+            >
+              Join Discord
+            </Button>
           </Stack>
-        </Card>
-
-        {/* Grid + GridArea Example */}
-        <Card title="Grid + GridArea Components">
-          <Text variant="muted">
-            Grid with named areas for complex layouts.
-          </Text>
-          <Grid
-            areas={`"header header"
-"sidebar main"
-"footer footer"`}
-            templateColumns="1fr 2fr"
-            gap="tight"
-          >
-            <GridArea name="header">
-              <Card variant="glass">
-                <Text>Header Header</Text>
-              </Card>
-            </GridArea>
-            <GridArea name="main">
-              <Card variant="glass">
-                <Text>Main  2fr</Text>
-              </Card>
-            </GridArea>
-            <GridArea name="sidebar">
-              <Card variant="glass">
-                <Text>Sidebar  1fr</Text>
-              </Card>
-            </GridArea>
-            <GridArea name="footer">
-              <Card variant="glass">
-                <Text>Footer Footer</Text>
-              </Card>
-            </GridArea>
-          </Grid>
-        </Card>
+        </Stack>
       </Section>
-
-      {/* CallToAction */}
-      <CallToAction
-        title="Ready to Build?"
-        subtitle="Check out the guides folder for setup instructions."
-        primaryAction={
-          <Button
-            variant="primary"
-            render={({ children, ...props }) => (
-              <Link path="https://donotdev.com" {...props}>
-                {children}
-              </Link>
-            )}
-          >
-            Learn More
-          </Button>
-        }
-        secondaryAction={
-          <Button
-            variant="outline"
-            render={({ children, ...props }) => (
-              <Link path="https://discord.gg/fbeYWDak" {...props}>
-                {children}
-              </Link>
-            )}
-          >
-            Join Discord
-          </Button>
-        }
-      />
     </PageContainer>
   );
 }