@donotdev/cli 0.0.6 → 0.0.8

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAE5B;;;;;GAKG;AAEH,qFAAqF;AACrF,OAAO,EACL,SAAS,EACT,aAAa,EACb,MAAM,EACN,IAAI,EACJ,GAAG,EACH,KAAK,EACL,OAAO,EACP,GAAG,EACH,QAAQ,EACR,WAAW,EACX,MAAM,GACP,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAE5B;;;;;GAKG;AAEH,qFAAqF;AACrF,OAAO,EACL,SAAS,EACT,aAAa,EACb,MAAM,EACN,GAAG,EACH,KAAK,EACL,OAAO,EACP,GAAG,EACH,QAAQ,EACR,WAAW,EACX,MAAM,GACP,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/cli",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Command-line interface for DoNotDev Framework",
   "type": "module",
   "private": false,

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

@@ -53,4 +53,16 @@ export const appConfig: AppConfig = {
     // Optional: Enable debug tools in development
     // debug: true,
   },
+  // Optional: Override query cache defaults
+  // Framework defaults (infinite cache - cost-optimized):
+  // - staleTime: Infinity (data never becomes stale)
+  // - refetchOnWindowFocus: false (no auto-refetch on focus)
+  // - refetchOnReconnect: false (no auto-refetch on reconnect)
+  // This minimizes API costs and is ideal for single-admin apps with manual refresh buttons.
+  // Uncomment below to enable auto-refetch behavior:
+  // query: {
+  //   staleTime: 1000 * 60 * 5,  // 5 minutes - data becomes stale after 5 minutes
+  //   refetchOnWindowFocus: true, // Automatically refetch when window regains focus
+  //   refetchOnReconnect: true,   // Automatically refetch when network reconnects
+  // },
 };

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

@@ -1,75 +1,102 @@
 /**
- * @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: 'docs', // '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: 'docs',
+
+  // ==========================================================================
+  // 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/index.html.example

@@ -16,6 +16,9 @@
   <!-- ✅ PWA: Manifest link (if exists) -->
   <link rel="manifest" href="/manifest.json" />
   
+  <!-- ✅ PERFORMANCE: Load fonts early to avoid preload warnings -->
+  <link rel="stylesheet" href="/fonts/fonts.css" />
+  
   <!-- ✅ PERFORMANCE: Preconnect to external domains (OAuth providers) -->
   <!-- GitHub OAuth -->
   <link rel="preconnect" href="https://github.com">
@@ -30,16 +33,17 @@
   <title>Loading...</title>
   <meta name="description" content="Modern web application powered by DoNotDev" />
   
-  <!-- ✅ PERFORMANCE: Critical font preloads (loads before CSS) -->
-  <!-- Only preload fonts with font-display: swap (not optional) -->
-  <!-- Example: <link rel="preload" href="/fonts/YourFont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> -->
 
   <!-- ✅ PERFORMANCE: Critical CSS inlined here by build -->
   <style>
     /* Critical above-the-fold styles */
+    html, body {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
     body { 
-      margin: 0; 
-      font-family: var(--font-family, ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, Monaco, 'Liberation Mono', monospace);
+      font-family: 'Inter', var(--font-family, ui-sans-serif, system-ui, -apple-system, sans-serif);
       line-height: 1.5;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
@@ -55,54 +59,85 @@
     /* Critical shell loader styles - pure CSS, instant render */
     #shell-loader { 
       position: fixed; 
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      inset: 0;
+      background: #000000; 
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 9999;
       opacity: 1;
       transition: opacity 0.3s ease-out;
+      will-change: opacity;
+      /* Isolate from framework CSS */
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
     }
     #shell-loader.shell-loader--fading {
       opacity: 0;
+      pointer-events: none;
     }
     .shell-loader__content {
       text-align: center;
       color: white;
-      font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, Monaco, 'Liberation Mono', monospace !important;
-      font-size: 2.4em;
-      font-weight: 500;
-      line-height: 1.8;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+      width: 100%;
+      max-width: 500px;
+      /* Prevent layout shifts from framework CSS */
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      line-height: 1.2;
     }
     .shell-loader__brand {
       display: block;
+      font-size: clamp(3rem, 10vw, 5rem); 
+      font-weight: 800;
+      letter-spacing: -0.05em;
+      margin: 0 0 1rem 0;
+      padding: 0;
+      box-sizing: border-box;
     }
+    /* ECG Waveform Animation - stroke-dasharray (performant, cross-browser, standard SVG technique) */
     .shell-loader__dots {
-      display: inline-flex;
-      align-items: center;
-      gap: 12px;
-    }
-    .shell-loader__dots span {
-      display: inline-block;
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background: white;
-      animation: blink 1.4s infinite;
+      display: block;
+      width: 300px;
+      height: 60px;
+      margin: 0 auto;
+      padding: 0;
+      box-sizing: border-box;
     }
-    .shell-loader__dots span:nth-child(1) { animation-delay: 0s; }
-    .shell-loader__dots span:nth-child(2) { animation-delay: 0.2s; }
-    .shell-loader__dots span:nth-child(3) { animation-delay: 0.4s; }
-    .shell-loader__content > :last-child {
+    .shell-loader__dots svg {
+      width: 100%;
+      height: 100%;
       display: block;
     }
-    @keyframes blink {
-      0%, 80%, 100% { opacity: 0.3; }
-      40% { opacity: 1; }
+    .shell-loader__dots path {
+      stroke: #667eea;
+      stroke-width: 3;
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-dasharray: 400;
+      stroke-dashoffset: 400;
+      animation: ecg-draw 2s linear infinite;
+    }
+    @keyframes ecg-draw {
+      0% { 
+        stroke-dashoffset: 400;
+        opacity: 0;
+      }
+      10% { 
+        opacity: 1;
+      }
+      70% { 
+        stroke-dashoffset: 0;
+        opacity: 1;
+      }
+      90%, 100% { 
+        stroke-dashoffset: 0;
+        opacity: 0;
+      }
     }
   </style>
 </head>
@@ -113,11 +148,10 @@
     <div class="shell-loader__content">
       <span class="shell-loader__brand">DoNotDev</span>
       <span class="shell-loader__dots">
-        <span></span>
-        <span></span>
-        <span></span>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 60" preserveAspectRatio="xMidYMid meet">
+          <path d="M0,30 L100,30 L110,20 L120,30 L130,30 L140,5 L150,55 L160,30 L175,30 L190,20 L205,30 L300,30" />
+        </svg>
       </span>
-      <span>is loading</span>
     </div>
   </div>
   
@@ -127,4 +161,4 @@
   <!-- ✅ PERFORMANCE: Module script with proper attributes -->
   <script type="module" src="/src/main.tsx"></script>
 </body>
-</html>
+</html>

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/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"
+// }