@donotdev/cli 0.0.18 → 0.0.20

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

@@ -1,79 +1,358 @@
+'use client';
 // apps/demo/src/pages/HomePage.tsx
 
-import { useMemo } from 'react';
-import { useNavigate, useOutletContext } from 'react-router-dom';
+import {
+  Zap,
+  Shield,
+  Rocket,
+  UserPlus,
+  Settings,
+  Play,
+  Quote,
+} from 'lucide-react';
 
 import {
   Badge,
+  BADGE_VARIANT,
+  Button,
+  BUTTON_VARIANT,
+  CallToAction,
   Card,
-  Grid,
+  CARD_VARIANT,
+  Carousel,
+  HeroSection,
+  Marquee,
+  Roadmap,
   Section,
+  SplitReveal,
   Stack,
+  Text,
 } from '@donotdev/components';
+import { useTranslation } from '@donotdev/core';
+import { FeatureCard, PageContainer } from '@donotdev/ui';
 
-import {
-  COMPONENT_CONFIGS,
-  getCSSFamilies,
-} from './components/componentConfig';
-import type { CSSFamily } from './components/ComponentsData';
+import type { RoadmapStep } from '@donotdev/components';
 
-type LayoutContext = {
-  selectedTab: CSSFamily | 'all';
-  searchQuery: string;
-};
+// -- Fake testimonials for Marquee showcase --
+const testimonials = [
+  {
+    name: 'Sarah K.',
+    role: 'CTO @ Fintech',
+    text: 'Shipped our MVP in 3 weeks. CRUD, auth, billing — all wired.',
+  },
+  {
+    name: 'Marco R.',
+    role: 'Solo Founder',
+    text: 'I replaced 6 libraries with one framework. No regrets.',
+  },
+  {
+    name: 'Priya N.',
+    role: 'Lead Dev',
+    text: 'The type safety alone saved us from 2 production bugs on day one.',
+  },
+  {
+    name: 'James L.',
+    role: 'Agency Owner',
+    text: 'We spin up client projects in hours now, not weeks.',
+  },
+  {
+    name: 'Yuki T.',
+    role: 'Indie Hacker',
+    text: 'Dark mode, RTL, i18n — all free. I just write features.',
+  },
+  {
+    name: 'Elena M.',
+    role: 'Staff Engineer',
+    text: 'Best DX I have seen in a React meta-framework. Period.',
+  },
+  {
+    name: 'David C.',
+    role: 'Freelancer',
+    text: 'Entity definitions + auto CRUD cut my project setup time by 80%.',
+  },
+  {
+    name: 'Lisa W.',
+    role: 'Tech Lead',
+    text: 'Finally a framework where the components actually respect the theme system.',
+  },
+  {
+    name: 'Tom H.',
+    role: 'Product Engineer',
+    text: 'Billing integration took 20 minutes. Stripe webhooks just work.',
+  },
+  {
+    name: 'Aisha B.',
+    role: 'Startup CTO',
+    text: 'We went from zero to production in 2 weeks. Not a joke.',
+  },
+];
 
-export default function HomePage() {
-  const navigate = useNavigate();
-  const {
-    selectedTab,
-    searchQuery,
-  } = useOutletContext<LayoutContext>();
+// -- Carousel items: showcase different component types --
+const showcaseItems = [
+  {
+    title: 'Reveal Animations',
+    description:
+      'Staggered, directional entrance animations with viewport detection.',
+    variant: CARD_VARIANT.ACCENT,
+    icon: Zap,
+  },
+  {
+    title: 'Smart Forms',
+    description:
+      'Conditional fields, draft validation, multi-step wizards — all from entity definitions.',
+    variant: CARD_VARIANT.DEFAULT,
+    icon: Settings,
+  },
+  {
+    title: 'Carousel & Marquee',
+    description:
+      'Autoplay, swipe, infinite loop, momentum physics. This very section.',
+    variant: CARD_VARIANT.DEFAULT,
+    icon: Play,
+  },
+  {
+    title: 'Theme System',
+    description:
+      '5 themes with full design token coverage. Switch live, no flash.',
+    variant: CARD_VARIANT.DEFAULT,
+    icon: Shield,
+  },
+  {
+    title: 'StackedCards & Bento',
+    description:
+      'Scroll-reveal stacked layouts and asymmetric grids for landing pages.',
+    variant: CARD_VARIANT.DEFAULT,
+    icon: Rocket,
+  },
+];
 
-  const componentsInTab = useMemo(() => {
-    return COMPONENT_CONFIGS.filter((config) => {
-      if (selectedTab !== 'all' && config.cssFamily !== selectedTab)
-        return false;
+export default function HomePage() {
+  const { t } = useTranslation('dndev');
 
-      const matchesSearch =
-        searchQuery === '' ||
-        config.name.toLowerCase().includes(searchQuery.toLowerCase());
+  // -- Feature cards (rich content for FeatureCard) --
+  const featureCards = [
+    {
+      icon: Zap,
+      title: t('templates.home.features.feature1.title'),
+      subtitle: 'Entity-first architecture',
+      content: [
+        'Define once with defineEntity()',
+        'Auto-generated CRUD operations',
+        'Type-safe forms and validation',
+      ],
+    },
+    {
+      icon: Shield,
+      title: t('templates.home.features.feature2.title'),
+      subtitle: 'Security built in, not bolted on',
+      content: [
+        'Role-based access control',
+        'PII encryption at rest',
+        'Rate limiting and anomaly detection',
+      ],
+    },
+    {
+      icon: Rocket,
+      title: t('templates.home.features.feature3.title'),
+      subtitle: 'Ship fast, stay consistent',
+      content: [
+        '5 themes with design tokens',
+        '30+ production components',
+        'Lazy-loaded advanced components',
+      ],
+    },
+  ];
 
-      return matchesSearch;
-    }).sort((a, b) => a.name.localeCompare(b.name));
-  }, [selectedTab, searchQuery]);
+  // -- Roadmap steps --
+  const steps: RoadmapStep[] = [
+    {
+      phase: t('templates.home.howItWorks.step1.title'),
+      icon: UserPlus,
+      title: t('templates.home.howItWorks.step1.title'),
+      subtitle: t('templates.home.howItWorks.step1.description'),
+    },
+    {
+      phase: t('templates.home.howItWorks.step2.title'),
+      icon: Settings,
+      title: t('templates.home.howItWorks.step2.title'),
+      subtitle: t('templates.home.howItWorks.step2.description'),
+    },
+    {
+      phase: t('templates.home.howItWorks.step3.title'),
+      icon: Play,
+      title: t('templates.home.howItWorks.step3.title'),
+      subtitle: t('templates.home.howItWorks.step3.description'),
+    },
+  ];
 
-  const cssFamilies = getCSSFamilies();
+  // -- SplitReveal stat cards --
+  const statCards = [
+    {
+      title: '12+ Components',
+      description: 'Atomic, advanced, and layout components ready to compose',
+    },
+    { title: '4 Essences', description: 'SaaS - Brutalist - Luxury - Retro' },
+    {
+      title: '100% Typed',
+      description: 'Full TypeScript coverage with strict mode',
+    },
+    {
+      title: 'Design System',
+      description:
+        'Full Design System with tokens and components when you can personalize anything',
+    },
+  ];
 
   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>
+    <PageContainer>
+      {/* 1. Hero — clean, no buttons */}
+      <HeroSection
+        badge={t('templates.home.hero.badge')}
+        title={t('templates.home.hero.title')}
+        subtitle={t('templates.home.hero.subtitle')}
+      />
+
+      {/* 2. Features — above the fold, FeatureCard with rich content */}
+      <Section
+        title={t('templates.home.features.title')}
+        gridCols={[1, 1, 3, 3]}
+        collapsible
+        defaultOpen
+      >
+        {featureCards.map((f, i) => (
+          <FeatureCard
+            key={f.title}
+            variant={CARD_VARIANT.GLASS}
+            icon={f.icon}
+            title={f.title}
+            subtitle={f.subtitle}
+            content={f.content}
+          />
+        ))}
+      </Section>
+
+      {/* 3. SplitReveal — slow, deliberate entrance */}
+      <Section title="Framework at a Glance" tone="muted">
+        <SplitReveal
+          left={
+            <Stack gap="medium">
+              <Badge variant={BADGE_VARIANT.ACCENT}>Why DoNotDev?</Badge>
+              <Text level="h2">Built for Real Products</Text>
+              <Text level="body" variant="muted">
+                Production-grade CRUD, auth, billing, and UI — all type-safe,
+                theme-aware, and ready to ship. Stop rebuilding the same
+                plumbing.
+              </Text>
+            </Stack>
+          }
+          right={statCards}
+          useStatCards
+          stagger={400}
+          duration={1000}
+          distance={12}
+        />
+      </Section>
+
+      {/* 4. Roadmap — ghost tone */}
+      <Section title={t('templates.home.howItWorks.title')} tone="ghost">
+        <Roadmap steps={steps} />
+      </Section>
+
+      {/* 5. Testimonials Marquee — muted tone, showcases Marquee component */}
+      <Section title="What Developers Say" tone="muted">
+        <Badge
+          variant={BADGE_VARIANT.MUTED}
+          style={{ marginBottom: 'var(--gap-md)', display: 'inline-block' }}
+        >
+          Fictional testimonials — this is a demo showcase
+        </Badge>
+        <Marquee
+          items={testimonials}
+          renderItem={(_item) => {
+            const t = _item as (typeof testimonials)[number];
+            return (
+              <Card style={{ minWidth: 280, maxWidth: 320 }}>
+                <Stack gap="tight" style={{ padding: 'var(--gap-md)' }}>
+                  <Quote
+                    style={{
+                      width: 'var(--icon-sm)',
+                      height: 'var(--icon-sm)',
+                      color: 'var(--muted-foreground)',
+                      opacity: 0.5,
+                    }}
+                  />
+                  <Text level="small" italic>
+                    &ldquo;{t.text}&rdquo;
+                  </Text>
+                  <Stack gap="none">
+                    <Text level="small" weight="semibold">
+                      {t.name}
+                    </Text>
+                    <Text level="caption" variant="muted">
+                      {t.role}
+                    </Text>
+                  </Stack>
+                </Stack>
+              </Card>
+            );
+          }}
+          speed={300}
+          pauseOnHover
+          gap="medium"
+          behavior="infinite"
+          ariaLabel="Developer testimonials"
+        />
+      </Section>
+
+      {/* 6. Component Showcase Carousel — ghost tone */}
+      <Section title="Component Showcase" tone="ghost">
+        <Badge
+          variant={BADGE_VARIANT.MUTED}
+          style={{ marginBottom: 'var(--gap-md)', display: 'inline-block' }}
+        >
+          Swipe or use arrows — this Carousel is a framework component
+        </Badge>
+        <Carousel
+          gap="medium"
+          items={showcaseItems}
+          renderItem={(_item, _index, isActive) => {
+            const item = _item as (typeof showcaseItems)[number];
+            return (
+              <Card
+                variant={item.variant}
+                icon={item.icon}
+                title={item.title}
+                content={item.description}
+                style={{
+                  opacity: isActive ? 1 : 0.6,
+                  transition: 'opacity var(--dur-normal)',
+                }}
+              />
+            );
+          }}
+          slidesToShow={[1, 2, 3, 4]}
+          showArrows
+          infinite
+          aria-label="Component showcase carousel"
+        />
+      </Section>
+
+      {/* 7. CTA — accent tone */}
+      <CallToAction
+        tone="accent"
+        title={t('templates.home.cta.title')}
+        subtitle={t('templates.home.cta.subtitle')}
+        primaryAction={
+          <Button variant={BUTTON_VARIANT.PRIMARY}>
+            {t('templates.home.cta.primaryAction')}
+          </Button>
+        }
+        secondaryAction={
+          <Button variant={BUTTON_VARIANT.OUTLINE}>
+            {t('templates.home.cta.secondaryAction')}
+          </Button>
+        }
+      />
+    </PageContainer>
   );
-}
+}

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

@@ -0,0 +1,47 @@
+// apps/demo/src/pages/OnboardingPage.tsx
+
+import { UserPlus } from 'lucide-react';
+
+import { EntityWorkflow } from '@donotdev/ui';
+
+import { onboardingWorkflow } from '../entities/onboarding';
+
+import type { PageMeta } from '@donotdev/core';
+
+export const meta: PageMeta = {
+  icon: <UserPlus />,
+  title: 'Onboarding Wizard',
+  preset: 'admin',
+};
+
+/**
+ * Onboarding Wizard Demo — shows multi-step workflow with:
+ * - Step navigation via Stepper
+ * - Per-step entity forms
+ * - Skippable steps (Preferences)
+ * - Conditional steps (Billing only if company size > 10)
+ * - Auto-persistence to localStorage
+ */
+export default function OnboardingPage() {
+  return (
+    <div style={{ maxWidth: 640, margin: '0 auto' }}>
+      <h1>Customer Onboarding</h1>
+      <p
+        style={{
+          color: 'var(--foreground-muted)',
+          marginBottom: 'var(--gap-lg)',
+        }}
+      >
+        Multi-step workflow with conditional steps and auto-save. Try setting
+        company size &gt; 10 to see the Billing step appear.
+      </p>
+
+      <EntityWorkflow
+        workflow={onboardingWorkflow}
+        onComplete={async (data) => {
+          alert(`Onboarding complete!\n\n${JSON.stringify(data, null, 2)}`);
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,41 @@
+// apps/demo/src/pages/PricingPage.tsx
+
+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
+      namespace="demo"
+      plans={[
+        {
+          id: 'free',
+          name: 'Free',
+          price: '0€',
+          currency: 'eur',
+          priceId: 'price_free',
+          interval: 'month',
+          features: ['1 project', 'Community support'],
+        },
+        {
+          id: 'pro',
+          name: 'Pro',
+          price: '29€',
+          currency: 'eur',
+          priceId: 'price_pro',
+          interval: 'month',
+          popular: true,
+          features: ['Unlimited projects', 'Priority support', 'Custom domain'],
+        },
+      ]}
+    />
+  );
+}

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

@@ -0,0 +1,19 @@
+// apps/demo/src/pages/ProductsPage.tsx
+
+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

@@ -0,0 +1,18 @@
+// apps/demo/src/pages/ProfilePage.tsx
+
+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

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

@@ -0,0 +1,118 @@
+// apps/demo/src/pages/ShowcaseDetailPage.tsx
+
+import { useEffect, useMemo } from 'react';
+
+import { Badge, Grid, Stack, Text } from '@donotdev/components';
+import { PageContainer, useNavigate, useParams } 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: '/showcase/:id',
+  hideFromMenu: true,
+  preset: 'admin',
+};
+
+export default function ShowcaseDetailPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const config = useMemo(() => {
+    return COMPONENT_CONFIGS.find((c) => c.id === id);
+  }, [id]);
+
+  const cssFamilies = getCSSFamilies();
+
+  useEffect(() => {
+    if (!config) navigate('/showcase');
+  }, [config, navigate]);
+
+  if (!config) return null;
+
+  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={[1, 1, 2, 3]} 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>
+  );
+}