@donotdev/cli 0.0.18 → 0.0.20

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

@@ -1,46 +1,23 @@
+// apps/demo/src/config/app.ts
 /**
  * @fileoverview Application configuration
- * @description Defines application metadata and feature flags
- * @version 0.0.1
+ * @description Defines application metadata, layout preset, and feature flags
+ * @version 0.1.0
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
 
 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}}';
+export const APP_NAME = 'DoNotDev';
+export const APP_SHORT_NAME = 'DoNotDev';
+export const APP_DESCRIPTION = 'DoNotDev SaaS Template';
 
 /**
- * Application short name constant
+ * Application configuration
  *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-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 = 'DoNotDev Components Demo';
-
-/**
- * Application configuration object
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
+ * - preset: 'landing' is the app default. Pages can override via PageMeta.preset.
+ * - auth: Configure auth routes and menu items.
  */
 export const appConfig: AppConfig = {
   app: {
@@ -48,21 +25,9 @@ export const appConfig: AppConfig = {
     shortName: APP_SHORT_NAME,
     description: APP_DESCRIPTION,
   },
-  preset: 'landing', // 'landing' | 'admin' | 'moolti' | 'docs' | 'blog' | 'game' | 'plain'
-  features: {
-    // Optional: Enable debug tools in development
-    // debug: true,
+  preset: 'landing',
+  auth: {
+    authRoute: '/pricing',
+    profilePath: '/profile',
   },
-  // 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-demo/src/entities/booking.ts.example

@@ -0,0 +1,75 @@
+// apps/demo/src/entities/booking.ts
+
+import { defineEntity, when } from '@donotdev/core';
+
+/**
+ * Booking entity — demonstrates complex conditional logic.
+ *
+ * - groupSize: visible only for group bookings
+ * - companyName: visible only for corporate bookings
+ * - invoiceAddress: visible for corporate OR group with 10+ people
+ */
+export const bookingEntity = defineEntity({
+  name: 'Booking',
+  collection: 'bookings',
+  fields: {
+    bookingType: {
+      name: 'bookingType',
+      type: 'select',
+      label: 'Booking Type',
+      visibility: 'user',
+      validation: {
+        required: true,
+        options: [
+          { value: 'individual', label: 'Individual' },
+          { value: 'group', label: 'Group (5+)' },
+          { value: 'corporate', label: 'Corporate' },
+        ],
+      },
+    },
+    groupSize: {
+      name: 'groupSize',
+      type: 'number',
+      label: 'Number of People',
+      visibility: 'user',
+      conditions: {
+        visible: when('bookingType').equals('group'),
+        required: when('bookingType').equals('group'),
+      },
+    },
+    companyName: {
+      name: 'companyName',
+      type: 'text',
+      label: 'Company Name',
+      visibility: 'user',
+      conditions: {
+        visible: when('bookingType').equals('corporate'),
+        required: when('bookingType').equals('corporate'),
+      },
+    },
+    invoiceAddress: {
+      name: 'invoiceAddress',
+      type: 'address',
+      label: 'Invoice Address',
+      visibility: 'user',
+      conditions: {
+        visible: when('bookingType')
+          .equals('corporate')
+          .or(when('groupSize').greaterThan(10)),
+      },
+    },
+    date: {
+      name: 'date',
+      type: 'date',
+      label: 'Booking Date',
+      visibility: 'user',
+      validation: { required: true },
+    },
+    notes: {
+      name: 'notes',
+      type: 'textarea',
+      label: 'Special Requests',
+      visibility: 'user',
+    },
+  },
+});

package/templates/app-demo/src/entities/onboarding.ts.example

@@ -0,0 +1,160 @@
+// apps/demo/src/entities/onboarding.ts
+
+import { defineEntity, when } from '@donotdev/core';
+import { defineWorkflow } from '@donotdev/crud';
+
+/**
+ * Entities for the Customer Onboarding workflow demo.
+ * Each entity represents one step in the wizard.
+ */
+
+export const companyEntity = defineEntity({
+  name: 'Company',
+  collection: 'companies',
+  fields: {
+    name: {
+      name: 'name',
+      type: 'text',
+      label: 'Company Name',
+      visibility: 'user',
+      validation: { required: true, minLength: 2 },
+    },
+    industry: {
+      name: 'industry',
+      type: 'select',
+      label: 'Industry',
+      visibility: 'user',
+      validation: {
+        required: true,
+        options: [
+          { value: 'tech', label: 'Technology' },
+          { value: 'finance', label: 'Finance' },
+          { value: 'healthcare', label: 'Healthcare' },
+          { value: 'retail', label: 'Retail' },
+          { value: 'other', label: 'Other' },
+        ],
+      },
+    },
+    size: {
+      name: 'size',
+      type: 'number',
+      label: 'Number of Employees',
+      visibility: 'user',
+      validation: { required: true, min: 1 },
+    },
+    website: {
+      name: 'website',
+      type: 'url',
+      label: 'Website',
+      visibility: 'user',
+    },
+  },
+});
+
+export const contactEntity = defineEntity({
+  name: 'Contact',
+  collection: 'contacts',
+  fields: {
+    firstName: {
+      name: 'firstName',
+      type: 'text',
+      label: 'First Name',
+      visibility: 'user',
+      validation: { required: true },
+    },
+    lastName: {
+      name: 'lastName',
+      type: 'text',
+      label: 'Last Name',
+      visibility: 'user',
+      validation: { required: true },
+    },
+    email: {
+      name: 'email',
+      type: 'email',
+      label: 'Email',
+      visibility: 'user',
+      validation: { required: true },
+    },
+    phone: {
+      name: 'phone',
+      type: 'tel',
+      label: 'Phone',
+      visibility: 'user',
+    },
+  },
+});
+
+export const preferencesEntity = defineEntity({
+  name: 'Preferences',
+  collection: 'preferences',
+  fields: {
+    language: {
+      name: 'language',
+      type: 'select',
+      label: 'Language',
+      visibility: 'user',
+      validation: {
+        options: [
+          { value: 'en', label: 'English' },
+          { value: 'fr', label: 'French' },
+          { value: 'de', label: 'German' },
+          { value: 'es', label: 'Spanish' },
+        ],
+      },
+    },
+    notifications: {
+      name: 'notifications',
+      type: 'switch',
+      label: 'Enable Email Notifications',
+      visibility: 'user',
+    },
+  },
+});
+
+/**
+ * Customer Onboarding Workflow
+ *
+ * 4 steps:
+ * 1. Company Info (required)
+ * 2. Primary Contact (required)
+ * 3. Preferences (skippable)
+ * 4. Billing — only shown if company size > 10
+ */
+export const onboardingWorkflow = defineWorkflow({
+  id: 'customer-onboarding',
+  name: 'Customer Onboarding',
+  persist: true,
+
+  steps: [
+    {
+      id: 'company',
+      title: 'Company Info',
+      entity: companyEntity,
+      fields: ['name', 'industry', 'size', 'website'],
+    },
+    {
+      id: 'contact',
+      title: 'Primary Contact',
+      entity: contactEntity,
+      fields: ['firstName', 'lastName', 'email', 'phone'],
+    },
+    {
+      id: 'preferences',
+      title: 'Preferences',
+      entity: preferencesEntity,
+      fields: ['language', 'notifications'],
+      allowSkip: true,
+    },
+    {
+      id: 'billing',
+      title: 'Billing',
+      description: 'Required for companies with more than 10 employees',
+      entity: companyEntity,
+      fields: ['website'], // placeholder — real app would have billing entity
+      conditions: {
+        visible: when('size').greaterThan(10),
+      },
+    },
+  ],
+});

package/templates/app-demo/src/entities/product.ts.example

@@ -0,0 +1,50 @@
+// apps/demo/src/entities/product.ts
+
+import { defineEntity } from '@donotdev/core';
+
+export const productEntity = defineEntity({
+  name: 'Product',
+  collection: 'products',
+  fields: {
+    name: {
+      name: 'name',
+      label: 'Name',
+      type: 'text',
+      visibility: 'user',
+      validation: { required: true, minLength: 3 },
+    },
+    description: {
+      name: 'description',
+      label: 'Description',
+      type: 'textarea',
+      visibility: 'user',
+    },
+    price: {
+      name: 'price',
+      label: 'Price',
+      type: 'number',
+      visibility: 'user',
+      validation: { required: true, min: 0 },
+    },
+    category: {
+      name: 'category',
+      label: 'Category',
+      type: 'select',
+      visibility: 'user',
+      validation: {
+        options: [
+          { value: 'electronics', label: 'Electronics' },
+          { value: 'clothing', label: 'Clothing' },
+          { value: 'food', label: 'Food & Drink' },
+          { value: 'other', label: 'Other' },
+        ],
+      },
+    },
+    image: {
+      name: 'image',
+      label: 'Image',
+      type: 'image',
+      visibility: 'user',
+    },
+  },
+});

package/templates/app-demo/src/entities/quote.ts.example

@@ -0,0 +1,70 @@
+// apps/demo/src/entities/quote.ts
+
+import { defineEntity, when } from '@donotdev/core';
+
+/**
+ * Insurance Quote entity — demonstrates conditional field visibility.
+ *
+ * - licensePlate: only visible when productType === 'car'
+ * - propertyAddress: only visible when productType === 'home'
+ * - estimatedValue: visible for car OR home (not health)
+ * - notes: disabled until productType is selected
+ */
+export const quoteEntity = defineEntity({
+  name: 'Quote',
+  collection: 'quotes',
+  fields: {
+    productType: {
+      name: 'productType',
+      type: 'select',
+      label: 'Product',
+      visibility: 'user',
+      validation: {
+        required: true,
+        options: [
+          { value: 'health', label: 'Health Insurance' },
+          { value: 'car', label: 'Car Insurance' },
+          { value: 'home', label: 'Home Insurance' },
+        ],
+      },
+    },
+    licensePlate: {
+      name: 'licensePlate',
+      type: 'text',
+      label: 'License Plate',
+      visibility: 'user',
+      conditions: {
+        visible: when('productType').equals('car'),
+        required: when('productType').equals('car'),
+      },
+    },
+    propertyAddress: {
+      name: 'propertyAddress',
+      type: 'address',
+      label: 'Property Address',
+      visibility: 'user',
+      conditions: {
+        visible: when('productType').equals('home'),
+        required: when('productType').equals('home'),
+      },
+    },
+    estimatedValue: {
+      name: 'estimatedValue',
+      type: 'number',
+      label: 'Estimated Value',
+      visibility: 'user',
+      conditions: {
+        visible: when('productType').in(['car', 'home']),
+      },
+    },
+    notes: {
+      name: 'notes',
+      type: 'textarea',
+      label: 'Additional Notes',
+      visibility: 'user',
+      conditions: {
+        disabled: when('productType').notExists(),
+      },
+    },
+  },
+});

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

@@ -1,4 +1,8 @@
 /* apps/demo/src/globals.css */
 
-@import '@donotdev/components/styles';
+/* 1. Group all imports at the top. */
+@import '@donotdev/ui/dndev.css';
 @import './themes.css';
+
+/* 2. App-specific overrides — DO NOT set --font-family here,
+   it would clobber theme overrides (dark/terminal set it to mono) */

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,41 @@
+// apps/demo/src/pages/ChangelogPage.tsx
+
+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
+      changelog={[
+        {
+          version: '1.0.0',
+          date: '2026-01-15',
+          type: 'major',
+          title: 'Initial Release',
+          description: 'First public release of the demo app.',
+          changes: [
+            {
+              type: 'added',
+              items: [
+                'Condition builder with when() API',
+                'Multi-step workflow engine',
+              ],
+            },
+            {
+              type: 'changed',
+              items: ['Entity form renderer supports dynamic fields'],
+            },
+          ],
+        },
+      ]}
+    />
+  );
+}

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

@@ -0,0 +1,88 @@
+// apps/demo/src/pages/ConditionalFormPage.tsx
+
+import { SlidersHorizontal } from 'lucide-react';
+
+import { Card, Tabs } from '@donotdev/components';
+import { EntityFormRenderer } from '@donotdev/ui';
+
+import { quoteEntity } from '../entities/quote';
+import { bookingEntity } from '../entities/booking';
+
+import type { PageMeta } from '@donotdev/core';
+
+export const meta: PageMeta = {
+  icon: <SlidersHorizontal />,
+  title: 'Conditional Forms',
+  preset: 'admin',
+};
+
+/**
+ * Conditional Forms Demo — shows field visibility driven by `when()` conditions.
+ *
+ * Two examples:
+ * 1. Insurance Quote — fields appear/disappear based on product type
+ * 2. Booking — complex conditions with .or() combinator
+ */
+export default function ConditionalFormPage() {
+  return (
+    <div style={{ maxWidth: 640, margin: '0 auto' }}>
+      <Card
+        title="Conditional Forms"
+        content="Fields appear, hide, or become required based on other field values. Powered by when() condition builder."
+      >
+        <Tabs
+          items={[
+            {
+              value: 'quote',
+              label: 'Insurance Quote',
+              content: (
+                <Card
+                  title="Insurance Quote"
+                  content='Select a product type to see conditional fields appear. "Car" shows license plate, "Home" shows address, both show estimated value.'
+                >
+                  <EntityFormRenderer
+                    entity={quoteEntity}
+                    operation="create"
+                    onSubmit={async (data) => {
+                      alert(
+                        `Quote submitted: ${JSON.stringify(data, null, 2)}`
+                      );
+                    }}
+                    submitText="Get Quote"
+                    cancelText={null}
+                    warnOnUnsavedChanges={false}
+                    hideVisibilityInfo
+                  />
+                </Card>
+              ),
+            },
+            {
+              value: 'booking',
+              label: 'Booking',
+              content: (
+                <Card
+                  title="Booking Form"
+                  content='"Group" shows group size, "Corporate" shows company name. Invoice address appears for corporate OR groups with 10+ people.'
+                >
+                  <EntityFormRenderer
+                    entity={bookingEntity}
+                    operation="create"
+                    onSubmit={async (data) => {
+                      alert(
+                        `Booking submitted: ${JSON.stringify(data, null, 2)}`
+                      );
+                    }}
+                    submitText="Book Now"
+                    cancelText={null}
+                    warnOnUnsavedChanges={false}
+                    hideVisibilityInfo
+                  />
+                </Card>
+              ),
+            },
+          ]}
+        />
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+// apps/demo/src/pages/DashboardPage.tsx
+
+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 />;
+}