@donotdev/cli 0.0.3

package/templates/app-demo/src/pages/components/ComponentsData.tsx.example

@@ -0,0 +1,152 @@
+// apps/demo/src/pages/components/ComponentsData.tsx
+// Single source of truth for example prop values
+
+import { Rocket, Check, X, AlertCircle } from 'lucide-react';
+import { Button, Collapsible, Text, Badge } from '@donotdev/components';
+
+export const PROP_VALUES = {
+  title: 'Title',
+  subtitle: 'Subtitle',
+  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+  shortLabel: 'Lorem ipsum short',
+  collapsibleContent: (
+    <div className="dndev-p-md dndev-surface dndev-mt-sm">
+      <Text variant="muted" className="dndev-mb-sm">Advanced Configuration Details:</Text>
+      <Text>• Cache policy: 3600s</Text>
+      <Text>• Retries: 3</Text>
+      <Text>• Timeout: 5000ms</Text>
+    </div>
+  ),
+  label: 'Label',
+  placeholder: 'Placeholder',
+  tooltip: 'Tooltip',
+  icon: Rocket,
+  trigger: 'Trigger: Open component',
+  button: 'Button',
+  confirmLabel: 'Confirm',
+  cancelLabel: 'Cancel',
+  primaryAction: <Button icon={Rocket}>Primary</Button>,
+  secondaryAction: <Button variant="outline" icon={Rocket}>Secondary</Button>,
+  items: [
+    { label: 'Item 1', value: '1', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+    { label: 'Item 2', value: '2', content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.' },
+    { label: 'Item 3', value: '3', content: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error.' },
+  ],
+  accordionItems: [
+    { value: 'item-1', trigger: 'Trigger: Accordion Item 1', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' },
+    { value: 'item-2', trigger: 'Trigger: Accordion Item 2', content: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' },
+    { value: 'item-3', trigger: 'Trigger: Accordion Item 3', content: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.' },
+  ],
+  tabsItems: [
+    { value: 'tab1', label: 'Tab 1', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.' },
+    { value: 'tab2', label: 'Tab 2', content: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.' },
+  ],
+  commandGroups: [
+    {
+      heading: 'Navigation',
+      items: [
+        { label: 'Home', description: 'Go to home', onSelect: () => {} },
+        { label: 'Components', description: 'Open components page', onSelect: () => {} },
+        { label: 'Settings', description: 'Open settings', onSelect: () => {} },
+      ],
+    },
+  ],
+  listItems: [
+    { icon: <Check className="dndev-size-md" />, content: 'Feature enabled with icon support' },
+    { icon: <Check className="dndev-size-md" />, content: <Text>Custom ReactNode content with <Badge>Badge</Badge></Text> },
+    { icon: <AlertCircle className="dndev-size-md" />, content: 'Warning item with different icon' },
+    { content: 'Simple text item without icon' },
+  ],
+  navigationItems: [
+    { label: 'Home', path: '#' },
+    { label: 'Products', path: '#' },
+    { label: 'Docs', path: '#' },
+  ],
+  descriptionListItems: [
+    { label: 'Status', value: <Badge variant="success">Active</Badge> },
+    { label: 'Plan', value: <Badge variant="primary">Pro</Badge> },
+    { label: 'Email', value: 'user@example.com' },
+    { label: 'Last Login', value: <Text variant="muted">2 hours ago</Text> },
+  ],
+  demoItems: ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo'],
+  selectOptions: [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+  ],
+  comboboxOptions: [
+    { value: 'tenant1', label: 'Tenant Alpha', description: 'Primary tenant account' },
+    { value: 'tenant2', label: 'Tenant Beta', description: 'Secondary tenant account' },
+    { value: 'tenant3', label: 'Tenant Gamma', description: 'Test tenant account' },
+    { value: 'owner1', label: 'John Smith', description: 'Owner - Marketing' },
+    { value: 'owner2', label: 'Jane Doe', description: 'Owner - Engineering' },
+    { value: 'owner3', label: 'Bob Johnson', description: 'Owner - Sales' },
+  ],
+  radioGroupItems: [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+  ],
+  toggleGroupItems: [
+    { value: 'left', label: 'Left' },
+    { value: 'center', label: 'Center' },
+    { value: 'right', label: 'Right' },
+  ],
+  avatarSrc: '/logo.png',
+  avatarFallback: 'DN',
+  footer: (
+    <div className="dndev-command-footer">
+      <div className="dndev-command-footer-shortcuts">
+        <div className="dndev-command-footer-shortcut">
+          <kbd className="dndev-command-footer-key">↑</kbd>
+          <kbd className="dndev-command-footer-key">↓</kbd>
+          <span>Navigate</span>
+        </div>
+        <div className="dndev-command-footer-shortcut">
+          <kbd className="dndev-command-footer-key">↵</kbd>
+          <span>Select</span>
+        </div>
+        <div className="dndev-command-footer-shortcut">
+          <kbd className="dndev-command-footer-key">Esc</kbd>
+          <span>Close</span>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export type CSSFamily = 'surface' | 'floating' | 'interactive' | 'layout' | 'input' | 'other';
+
+export type PropType =
+  | 'title'
+  | 'subtitle'
+  | 'description'
+  | 'content'
+  | 'collapsibleContent'
+  | 'label'
+  | 'placeholder'
+  | 'tooltip'
+  | 'icon'
+  | 'trigger'
+  | 'button'
+  | 'confirmLabel'
+  | 'cancelLabel'
+  | 'primaryAction'
+  | 'secondaryAction'
+  | 'items'
+  | 'accordionItems'
+  | 'tabsItems'
+  | 'commandGroups'
+  | 'listItems'
+  | 'navigationItems'
+  | 'descriptionListItems'
+  | 'demoItems'
+  | 'selectOptions'
+  | 'comboboxOptions'
+  | 'radioGroupItems'
+  | 'toggleGroupItems'
+  | 'footer'
+  | 'avatarSrc'
+  | 'avatarFallback';
+

package/templates/app-demo/src/pages/components/DemoLayout.tsx.example

@@ -0,0 +1,266 @@
+// apps/demo/src/pages/components/DemoLayout.tsx
+
+import { useState, useEffect } from 'react';
+import type { ChangeEvent } from 'react';
+import { useLocation, useNavigate, Outlet } from 'react-router-dom';
+import { ArrowLeft, ExternalLink, Menu } from 'lucide-react';
+
+import {
+  Button,
+  Input,
+  Stack,
+  Tabs,
+  Text,
+  Sheet,
+  Grid,
+  GridArea,
+} from '@donotdev/components';
+import type { TextProps } from '@donotdev/components';
+
+import { getCSSFamilies } from './componentConfig';
+import type { CSSFamily } from './ComponentsData';
+import { ThemeToggle } from '../../components/ThemeToggle';
+
+function useMediaQuery(query: string) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) setMatches(media.matches);
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+  return matches;
+}
+
+interface DemoLayoutProps {
+  selectedTab: CSSFamily | 'all';
+  onTabChange: (tab: CSSFamily | 'all') => void;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+}
+
+export function DemoLayout({
+  selectedTab,
+  onTabChange,
+  searchQuery,
+  onSearchChange,
+}: DemoLayoutProps) {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const isDesktop = useMediaQuery('(min-width: 1024px)');
+
+  const handleBack = () => {
+    if (location.pathname === '/full') {
+      navigate('/');
+    } else if (location.pathname.startsWith('/component/')) {
+      navigate('/');
+    } else if (selectedTab !== 'all') {
+      onTabChange('all');
+    }
+  };
+
+  const showBackButton =
+    location.pathname === '/full' ||
+    location.pathname.startsWith('/component/') ||
+    selectedTab !== 'all';
+
+  const SidebarContent = (
+    <Stack gap="large" className="dndev-h-full">
+      <Stack gap="tight">
+        <Text as="h1">
+          DoNotDev
+        </Text>
+        <Text variant="muted">Components Showcase</Text>
+      </Stack>
+
+      <Stack gap="large" className="dndev-flex-1 dndev-min-h-0 dndev-overflow-y-auto">
+        <Input
+          placeholder="Filter components..."
+          value={searchQuery}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
+        />
+
+        <Tabs
+          items={getCSSFamilies().map((family) => ({
+            value: family.id,
+            label: family.label,
+            className: 'dndev-w-full',
+            content: null,
+          }))}
+          value={selectedTab}
+          onValueChange={(value) => {
+            onTabChange(value as CSSFamily | 'all');
+            setIsMobileMenuOpen(false);
+            if (location.pathname !== '/') {
+              navigate('/');
+            }
+          }}
+          cols={1}
+          gap="tight"
+        />
+      </Stack>
+
+      <Stack gap="medium">
+        <Button
+          variant="primary"
+          fullWidth
+          icon={ExternalLink}
+          iconEnd
+          onClick={() =>
+            window.open(
+              'https://donotdev.com/purchase',
+              '_blank',
+              'noopener,noreferrer'
+            )
+          }
+        >
+          Get Full Framework
+        </Button>
+        <Button
+          variant="outline"
+          icon={ExternalLink}
+          iconEnd
+          fullWidth
+          onClick={() =>
+            window.open('https://donotdev.com', '_blank', 'noopener,noreferrer')
+          }
+        >
+          Check it more online
+        </Button>
+      </Stack>
+    </Stack>
+  );
+
+  function lowerCase(label: string): "body" | "code" | "small" | "heading" | "default" | "muted" | "primary" | "secondary" | undefined {
+    throw new Error('Function not implemented.');
+  }
+
+  return (
+    <Grid
+      className="dndev-h-screen dndev-w-full dndev-overflow-hidden"
+      templateColumns={isDesktop ? '280px 1fr' : '1fr'}
+      areas={isDesktop ? 'sidebar main' : 'main'}
+      gap="none"
+    >
+      {isDesktop && (
+        <GridArea
+          name="sidebar"
+          style={{
+            padding: 'var(--gap-sm) var(--gap-md)',
+            overflowY: 'auto',
+            background: 'var(--background)',
+            borderRadius: 0,
+            borderInlineEnd: 'var(--border-hairline) solid var(--border)',
+          }}
+        >
+          {SidebarContent}
+        </GridArea>
+      )}
+
+      <GridArea name="main" className="dndev-h-full dndev-overflow-hidden">
+        <Stack className="dndev-h-full" gap="none">
+          {/* Header */}
+          <Grid
+            templateColumns="1fr auto 1fr"
+            align="center"
+            style={{
+              padding: 'var(--gap-sm) var(--gap-md)',
+              background: 'var(--background)',
+              flexShrink: 0,
+              borderRadius: 0,
+              borderBottom: 'var(--border-hairline) solid var(--border)',
+            }}
+          >
+            <Stack direction="row" gap="medium" align="center" justify="start">
+              <Button
+                variant="ghost"
+                icon={ArrowLeft}
+                onClick={showBackButton ? handleBack : undefined}
+                disabled={!showBackButton}
+                className={!showBackButton ? 'dndev-opacity-0' : ''}
+                aria-hidden={!showBackButton}
+              >
+                Back
+              </Button>
+            </Stack>
+
+            <Stack align="center" gap="tight">
+              <Text variant="muted" level="body">
+                We use a high contrast theme to demonstrate component usage. Update themes.css to customize.
+              </Text>
+              <Grid cols={4} gap="tight">
+                {[
+                  { label: 'Foreground', color: 'var(--foreground)', border: true },
+                  { label: 'Primary', color: 'var(--primary)' },
+                  { label: 'Secondary', color: 'var(--secondary)' },
+                  { label: 'Accent', color: 'var(--accent)' },
+                ].map((item) => (
+                  <Stack
+                    key={item.label}
+                    direction="row"
+                    gap="tight"
+                    align="center"
+                  >
+                    <span
+                      style={{
+                        width: '20px',
+                        height: '20px',
+                        background: item.color
+                      }}
+                    />
+                    <Text
+                      level="small"
+                      style={{ color: item.color }}
+                    >
+                      {item.label}
+                    </Text>
+                  </Stack>
+                ))}
+              </Grid>
+            </Stack>
+
+            {/* Right side: Theme Toggle + Mobile Menu */}
+            <Stack direction="row" gap="medium" justify="end" align="center">
+              <ThemeToggle />
+              {!isDesktop && (
+                <Sheet
+                  open={isMobileMenuOpen}
+                  onOpenChange={setIsMobileMenuOpen}
+                  side="left"
+                  trigger={
+                    <Button
+                      variant="ghost"
+                      display="compact"
+                      aria-label="Open menu"
+                      icon={Menu}
+                    />
+                  }
+                  title="Components"
+                >
+                  {SidebarContent}
+                </Sheet>
+              )}
+            </Stack>
+          </Grid>
+
+          {/* Content */}
+          <div
+            className="dndev-flex-1 dndev-overflow-y-auto dndev-w-full"
+            style={{ padding: 'var(--gap-md)' }}
+          >
+            <Outlet
+              context={{
+                selectedTab,
+                setSelectedTab: onTabChange,
+                searchQuery,
+                setSearchQuery: onSearchChange,
+              }}
+            />
+          </div>
+        </Stack>
+      </GridArea>
+    </Grid>
+  );
+}

package/templates/app-demo/src/pages/components/LayoutRoute.tsx.example

@@ -0,0 +1,20 @@
+// apps/demo/src/pages/components/LayoutRoute.tsx
+
+import { useState } from 'react';
+
+import { DemoLayout } from './DemoLayout';
+import type { CSSFamily } from './ComponentsData';
+
+export function LayoutRoute() {
+  const [selectedTab, setSelectedTab] = useState<CSSFamily | 'all'>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  return (
+    <DemoLayout
+      selectedTab={selectedTab}
+      onTabChange={setSelectedTab}
+      searchQuery={searchQuery}
+      onSearchChange={setSearchQuery}
+    />
+  );
+}