@donotdev/cli 0.0.3 → 0.0.4

package/templates/app-next/src/themes.css.example

@@ -2,178 +2,130 @@
 
 /* ===========================
    APP-WIDE SETTINGS
-   These apply to all themes - spacing, radius, shadows, routing animations
+   Spacing, radius, shadows, animations - apply to all themes
    =========================== */
 :root {
-  /* ===========================
-     ROUTING ANIMATIONS
-     Customize page transition animations
-     Pure CSS - zero JS overhead. Respects prefers-reduced-motion.
-     Override in themes.css: --routing-animation: slide; to change animation type
-     =========================== */
-  /* Single animation type (fade, slide, or none to disable) - app-wide */
-  /* --routing-animation: fade; */  /* fade | slide | none */
-  /* --routing-default-duration: var(--dur-normal); */  /* Animation duration */
-
-  /* Breakpoint-specific durations (all inherit from --routing-default-duration) */
-  /* --routing-mobile-duration: var(--routing-default-duration); */
-  /* --routing-tablet-duration: var(--routing-default-duration); */
-  /* --routing-desktop-duration: var(--routing-default-duration); */
-  /* --routing-wide-duration: var(--routing-default-duration); */
-  
-  /* Examples: */
-  /* --routing-animation: slide; */  /* Use slide animation */
-  /* --routing-animation: none; */  /* Disable animations */
-  /* --routing-default-duration: 200ms; */  /* Faster animations */
-
-  /* ===========================
-     SPACING OVERRIDES
-     Customize spacing scale
-     =========================== */
-  /* --gap-sm: 0.5rem; */        /* 8px - tight spacing */
-  /* --gap-md: 1rem; */          /* 16px - medium spacing (default) */
-  /* --gap-lg: 2rem; */          /* 32px - large spacing */
-
-  /* ===========================
-     BORDER RADIUS OVERRIDES
-     Customize component corners
-     =========================== */
-  /* --radius-interactive: var(--radius-none); */ /* Buttons, links (default: square) */
-  /* --radius-surface: var(--radius-md); */ /* Cards, dialogs (default: 8px round) */
-  /* --radius-floating: var(--radius-none); */ /* Dropdowns, popovers (default: square) */
-
-  /* ===========================
-     SHADOW OVERRIDES
-     Customize elevation
-     =========================== */
-  /* --shadow-sm: ...; */        /* Small shadows */
-  /* --shadow-md: ...; */        /* Medium shadows (default) */
-  /* --shadow-xl: ...; */        /* Large shadows */
+  /* Routing animations (fade | slide | none) */
+  /* --routing-animation: fade; */
+  /* --routing-default-duration: var(--dur-normal); */
+
+  /* Spacing scale */
+  /* --gap-sm: 0.5rem; */
+  /* --gap-md: 1rem; */
+  /* --gap-lg: 2rem; */
+
+  /* Border radius */
+  /* --radius-interactive: var(--radius-none); */
+  /* --radius-surface: var(--radius-md); */
+  /* --radius-floating: var(--radius-none); */
 }
 
 /* ===========================
-   LIGHT THEME (High Contrast Light)
-   Background: White
-   Foreground: Black
+   LIGHT THEME
+   Zinc-based neutral palette
    =========================== */
 :root.light {
   --theme-icon: 'Sun';
   --theme-label: 'Light';
   --theme-is-dark: 0;
 
-  /* ===========================
-     1. USER SETS - 5 BRAND COLORS
-     =========================== */
-  --foreground: #000000;
+  /* Core colors */
   --background: #ffffff;
-  --primary: #00bcd4; /* Cyan */
-  --secondary: #047857; /* Emerald-700 - WCAG AA compliant (5.48:1 with white) */
-  --accent: #ff9800; /* Orange */
-
-  /* ===========================
-     2. FRAMEWORK DEFAULTS - STATUS COLORS
-     (Override if needed)
-     =========================== */
-  --success: #047857; /* Emerald-700 - WCAG AA compliant (5.48:1 with white) */
-  --warning: #f59e0b;
-  --destructive: #dc2626;
+  --foreground: #09090b;
+
+  /* Surfaces */
+  --card: #ffffff;
+  --card-foreground: #09090b;
+  --popover: #ffffff;
+  --popover-foreground: #09090b;
 
-  /* ===========================
-     3. AUTO-COMPUTED - SURFACES
-     (Plain sight computation for easy overriding)
-     =========================== */
-  --muted: color-mix(in oklab, var(--foreground) 5%, var(--background));
-  --muted-foreground: color-mix(in oklab, var(--foreground) 75%, transparent);
-  --border: color-mix(in oklab, var(--foreground) 15%, var(--background));
-  --input: var(--muted);
+  /* Muted (zinc-100 / zinc-500) */
+  --muted: #f4f4f5;
+  --muted-foreground: #71717a;
+
+  /* Border & input (zinc-200) */
+  --border: #e4e4e7;
+  --input: #e4e4e7;
   --ring: var(--primary);
 
-      --card: var(--background);
-  --card-foreground: var(--foreground);
-  --popover: var(--card);
-  --popover-foreground: var(--card-foreground);
-  --surface-1: var(--card);
-
-  /* ===========================
-     4. AUTO-COMPUTED - TEXT ON BRAND COLORS
-     (Mapped to foreground/background for consistency)
-     =========================== */
-  --primary-foreground: var(--foreground);
-  --secondary-foreground: var(--background);
-  --accent-foreground: var(--foreground);
-  
-  --success-foreground: var(--background);
-  --warning-foreground: var(--foreground);
-  --destructive-foreground: var(--background);
+  /* Brand colors - customize these */
+  --primary: #0284c7;
+  --primary-foreground: #ffffff;
+
+  --secondary: #f4f4f5;
+  --secondary-foreground: #18181b;
+
+  --accent: #ea580c;
+  --accent-foreground: #ffffff;
+
+  /* Status colors */
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: #16a34a;
+  --success-foreground: #ffffff;
+  --warning: #f59e0b;
+  --warning-foreground: #09090b;
 }
 
 /* ===========================
-   DARK THEME (High Contrast Dark)
-   Background: Black
-   Foreground: White
+   DARK THEME
+   Zinc-based dark palette
    =========================== */
 :root.dark {
   --theme-icon: 'Moon';
   --theme-label: 'Dark';
   --theme-is-dark: 1;
 
-  /* ===========================
-     1. USER SETS - 5 BRAND COLORS
-     =========================== */
-  --foreground: #ffffff;
-  --background: #000000;
-  --primary: #00bcd4; /* Cyan */
-  --secondary: #047857; /* Emerald-700 - WCAG AA compliant (5.48:1 with white) */
-  --accent: #ff9800; /* Orange */
-
-  /* ===========================
-     2. FRAMEWORK DEFAULTS - STATUS COLORS
-     =========================== */
-  --success: #047857; /* Emerald-700 - WCAG AA compliant (5.48:1 with white) */
-  --warning: #f59e0b;
-  --destructive: #dc2626; /* Red-600 - WCAG AA compliant (4.83:1 with white) */
-
-  /* ===========================
-     3. AUTO-COMPUTED - SURFACES
-     =========================== */
-  --muted: color-mix(in oklab, var(--foreground) 10%, var(--background));
-  --muted-foreground: color-mix(in oklab, var(--foreground) 75%, transparent);
-  --border: color-mix(in oklab, var(--foreground) 15%, var(--background));
-  --input: var(--muted);
+  /* Core colors */
+  --background: #09090b;
+  --foreground: #fafafa;
+
+  /* Surfaces */
+  --card: #09090b;
+  --card-foreground: #fafafa;
+  --popover: #18181b;
+  --popover-foreground: #fafafa;
+
+  /* Muted (zinc-800 / zinc-400) */
+  --muted: #27272a;
+  --muted-foreground: #a1a1aa;
+
+  /* Border & input (zinc-800) */
+  --border: #27272a;
+  --input: #27272a;
   --ring: var(--primary);
 
-      --card: var(--background);
-  --card-foreground: var(--foreground);
-  --popover: var(--card);
-  --popover-foreground: var(--card-foreground);
-  --surface-1: var(--card);
-
-  /* ===========================
-     4. AUTO-COMPUTED - TEXT ON BRAND COLORS
-     =========================== */
-  --primary-foreground: var(--background);
-  --secondary-foreground: var(--foreground);
-  --accent-foreground: var(--background);
-
-  --success-foreground: var(--foreground);
-  --warning-foreground: var(--background);
-  --destructive-foreground: var(--foreground);
+  /* Brand colors - customize these */
+  --primary: #0ea5e9;
+  --primary-foreground: #ffffff;
+
+  --secondary: #27272a;
+  --secondary-foreground: #fafafa;
+
+  --accent: #f97316;
+  --accent-foreground: #ffffff;
+
+  /* Status colors */
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: #16a34a;
+  --success-foreground: #ffffff;
+  --warning: #f59e0b;
+  --warning-foreground: #09090b;
 }
 
-  /* ===========================
+/* ===========================
    CUSTOM THEMES
-     =========================== */
+   Add your brand themes below
+   =========================== */
 
-/* Add your custom themes here */
 /* Example:
-.brand {
+:root.brand {
   --theme-icon: 'Zap';
   --theme-label: 'Brand';
-  --background: #your-brand-background;
-  --foreground: #your-brand-foreground;
-  --primary: #your-brand-primary;
-  --secondary: #your-brand-secondary;
-  --accent: #your-brand-accent;
-  ... other variables ...
+  --theme-is-dark: 0;
+  --background: #your-color;
+  --foreground: #your-color;
+  ...
 }
 */

package/templates/app-vite/src/App.tsx.example

@@ -1,7 +1,7 @@
 /**
  * @fileoverview Main application component
  * @description Root application component with configuration-driven architecture
- * @version 0.0.1
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -20,7 +20,7 @@ import { appConfig } from './config/app';
  *
  * Note: HomePage.tsx in src/pages/ is automatically used for the root route "/"
  *
- * @version 0.0.1
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */

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

@@ -0,0 +1,6 @@
+{
+  "hero": {
+    "title": "Welcome to DnDev",
+    "subtitle": "Your app is ready. Explore the framework patterns below."
+  }
+}

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

@@ -2,21 +2,162 @@
 
 /**
  * @fileoverview Home page component
- * @description Main landing page for the application
- * @version 0.0.1
+ * @description Scaffold landing page demonstrating DoNotDev framework patterns
+ * @version 0.0.4
  * @since 0.0.1
- * @author AMBROISE PARK Consulting
  */
 
-import { HomeTemplate } from '@donotdev/templates';
 import { Home } from 'lucide-react';
-import type { PageMeta } from '@donotdev/core';
+
+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 { PageContainer, Link } from '@donotdev/ui';
+
+const LAYOUT_PRESETS: LayoutPreset[] = [
+  'admin',
+  'docs',
+  'landing',
+  'moolti',
+  'blog',
+  'game',
+];
+
+export const NAMESPACE = 'home';
 
 export const meta: PageMeta = {
-  title: 'Home',
+  namespace: NAMESPACE,
   icon: <Home />,
 };
 
 export default function HomePage() {
-  return <HomeTemplate />;
-}
+  const currentPreset = useLayout('layoutPreset');
+  const setLayoutPreset = useLayout('setLayoutPreset');
+  const { t } = useTranslation([NAMESPACE]);
+
+  return (
+    <PageContainer>
+      <HeroSection
+        title={t('hero.title', "Welcome to DnDev")}
+        subtitle={t('hero.subtitle', "Your app is ready. Explore the framework patterns below.")}
+        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>
+
+      {/* 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 direction="row" gap="medium">
+            <Card variant="primary" title="Item 1">
+              <Text>Horizontal</Text>
+            </Card>
+            <Card variant="accent" title="Item 2">
+              <Text>Stack</Text>
+            </Card>
+          </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>
+      </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>
+  );
+}