npm - @donotdev/cli - Versions diffs - 0.0.17 → 0.0.19 - Mend

@donotdev/cli 0.0.17 → 0.0.19

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.

Files changed (183) hide show

package/templates/app-demo/index.html.example CHANGED Viewed

@@ -1,24 +1,161 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <!-- Meta tags -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>DoNotDev Components Demo</title>
-  <!-- ✅ PERFORMANCE: Critical font preloads (loads before CSS) -->
-  <link rel="preload" href="/fonts/Inter-latin.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <title>DoNotDev Demo</title>
+  <!-- Fonts: Inter, Space Grotesk, Playfair, Roboto from @donotdev/ui/dndev.css (bundled). -->
+  <!-- ✅ CRITICAL CSS: ECG waveform loader -->
   <style>
-    body {
-      margin: 0;
-      font-family: var(--font-family, system-ui, sans-serif);
+    /* Critical above-the-fold styles */
+    html, body {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      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;
+      background: #ffffff;
+      color: #000000;
+    }
+    @media (prefers-color-scheme: dark) {
+      body {
+        background: #000000;
+        color: #ffffff;
+      }
+    }
+    /* Critical shell loader styles - pure CSS, instant render */
+    #shell-loader {
+      position: fixed;
+      inset: 0;
       background: #000000;
-      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+      opacity: 1;
+      transition: opacity 0.3s ease-out;
+      will-change: opacity;
+      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: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+      width: 100%;
+      max-width: 500px;
+      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 */
+    .shell-loader__dots {
+      display: block;
+      width: 300px;
+      height: 60px;
+      margin: 0 auto;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    .shell-loader__dots svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    .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>
+  <!-- ✅ THEME DETECTION: Force dark on first visit, remember user choice -->
+  <script>
+    (function () {
+      'use strict';
+      function getInitialTheme() {
+        try {
+          var saved = localStorage.getItem('dndev-theme');
+          if (saved) {
+            return saved;
+          }
+          return 'dark';
+        } catch (e) {
+          return 'dark';
+        }
+      }
+      var theme = getInitialTheme();
+      document.documentElement.className = theme;
+    })();
+  </script>
 </head>
 <body>
+  <!-- ✅ SHELL LOADER: Branded loading experience before React loads -->
+  <div id="shell-loader">
+    <div class="shell-loader__content">
+      <span class="shell-loader__brand">DoNotDev</span>
+      <span class="shell-loader__dots">
+        <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>
+    </div>
+  </div>
+  <!-- React mounts here -->
   <div id="root"></div>
   <script type="module" src="/src/main.tsx"></script>
 </body>
-</html>
+</html>

package/templates/app-demo/src/App.tsx.example CHANGED Viewed

@@ -1,14 +1,15 @@
+// apps/demo/src/App.tsx
 /**
- * @fileoverview Main application component
- * @description Root application component with configuration-driven architecture
- * @version 0.0.4
+ * @fileoverview Main application component for the demo app
+ * @description Root component that configures the application with Vite providers and layout.
+ * @version 0.0.5
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
 import { ViteAppProviders } from '@donotdev/ui/vite';
-import './config/providers';
 import { appConfig } from './config/app';
 /**
@@ -20,17 +21,10 @@ import { appConfig } from './config/app';
  *
  * Note: HomePage.tsx in src/pages/ is automatically used for the root route "/"
  *
- * @version 0.0.4
+ * @version 0.0.5
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
 export function App() {
-  return (
-    <ViteAppProviders
-      config={appConfig}
-      layout={{
-        breadcrumbs: 'smart', // 'smart' | 'always' | 'never'
-      }}
-    />
-  );
+  return <ViteAppProviders config={appConfig} layout={{ breadcrumbs: 'smart' }} />;
 }

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

@@ -1,46 +1,22 @@
 /**
  * @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 +24,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/product.ts.example ADDED Viewed

@@ -0,0 +1,38 @@
+import { defineEntity } from '@donotdev/core';
+export const productEntity = defineEntity({
+  name: 'Product',
+  collection: 'products',
+  fields: {
+    name: {
+      type: 'text',
+      visibility: 'user',
+      validation: { required: true, minLength: 3 },
+    },
+    description: {
+      type: 'textarea',
+      visibility: 'user',
+    },
+    price: {
+      type: 'number',
+      visibility: 'user',
+      validation: { required: true, min: 0 },
+    },
+    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: {
+      type: 'image',
+      visibility: 'user',
+    },
+  },
+});

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

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>
+  );
+}