@donotdev/cli 0.0.18 → 0.0.19

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

@@ -1,142 +0,0 @@
-// apps/demo/src/pages/FullPage.tsx
-
-import { Rocket, ExternalLink } from 'lucide-react';
-
-import {
-    Button,
-    CallToAction,
-    Card,
-    Code,
-    Grid,
-    GridArea,
-    HeroSection,
-    Section,
-    Stack,
-    Text,
-} from '@donotdev/components';
-
-export default function FullPage() {
-    return (
-        <>
-            <HeroSection
-                title="Fullwidht hero section with gradient text"
-                subtitle="This page displays the Sections, Grid, GridArea, Stack and CallToAction layout components that are meant to wrap the other compoennts."
-                badge="This is HeroSection Component"
-            />
-
-            <Section
-                title="Grid + GridArea Components"
-                subtitle="CSS Grid layout with named areas. GridArea components map to grid template areas. Full-width container."
-            >
-                <Card variant="muted" title="Grid Layout Example">
-                    <Code language="tsx" showLineNumbers={false}>
-{`<Grid
-  areas={\`"header header header"
-  "main main sidebar"
-  "footer footer footer"\`}
-  cols="1fr 3fr 1fr"
-  gap="none"
->
-  {/* Children */}
-</Grid>`}
-                    </Code>
-                </Card>
-                <Grid
-                    areas={`"header header header"
-"main main sidebar"
-"footer footer footer"`}
-                    cols="1fr 3fr 1fr"
-                    gap="none"
-                >
-                    <GridArea as="header" name="header">
-                        <Section tone="muted" title="Header Area">
-                            <Text variant="muted">Header content (as="header")</Text>
-                        </Section>
-                    </GridArea>
-                    <GridArea as="section" name="main">
-                        <Section title="Main Content Area">
-                            <Text variant="muted">Main content (as="section")</Text>
-                        </Section>
-                    </GridArea>
-                    <GridArea as="aside" name="sidebar">
-                        <Section tone="muted" title="Sidebar Area">
-                            <Text variant="muted">Sidebar content (as="aside")</Text>
-                        </Section>
-                    </GridArea>
-                    <GridArea as="footer" name="footer">
-                        <Section tone="muted" title="Footer Area">
-                            <Text variant="muted">Footer content (as="footer")</Text>
-                        </Section>
-                    </GridArea>
-                </Grid>
-            </Section>
-
-            <Section
-                title="Stack Component"
-                subtitle="Flexbox layout component. Full-width container."
-            >
-                <Card variant="muted" title="Stack Layout Example">
-                    <Text variant="muted">
-                        Stack creates flex containers. Use direction="row" for horizontal,
-                        default is vertical. Gap controls spacing between items.
-                    </Text>
-                </Card>
-                <Stack>
-                    <Card variant="muted" title="Stack Item 1">
-                        <Text variant="muted">Vertical stack with</Text>
-                    </Card>
-                    <Card variant="muted" title="Stack Item 2">
-                        <Text variant="muted">Items stack vertically by default</Text>
-                    </Card>
-                    <Stack direction="row">
-                        <Card variant="muted" title="Row Item 1">
-                            <Text variant="muted">Horizontal stack</Text>
-                        </Card>
-                        <Card variant="muted" title="Row Item 2">
-                            <Text variant="muted">direction="row"</Text>
-                        </Card>
-                    </Stack>
-                </Stack>
-            </Section>
-
-            <CallToAction
-                title="CallToAction Component"
-                subtitle="Full-width CTA section with gradient background. Constrained by --content-width, centered. Use for conversion sections."
-                primaryAction={
-                    <Button
-                        variant="primary"
-                        fullWidth
-                        icon={ExternalLink}
-                        iconEnd
-                        tooltip="https://donotdev.com/purchase"
-                        onClick={() =>
-                            window.open(
-                                'https://donotdev.com/purchase',
-                                '_blank',
-                                'noopener,noreferrer'
-                            )
-                        }
-                    >
-                        Get Full Framework
-                    </Button>
-                }
-                secondaryAction={
-
-                    <Button
-                        variant="outline"
-                        icon={ExternalLink}
-                        iconEnd
-                        fullWidth
-                        onClick={() =>
-                            window.open('https://donotdev.com', '_blank', 'noopener,noreferrer')
-                        }
-                        tooltip="https://donotdev.com"
-                    >
-                        Check it more online
-                    </Button>
-                }
-                />
-        </>
-    );
-}
-

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

@@ -1,266 +0,0 @@
-// 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 isLaptop = 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>
-        <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"
-      cols={isLaptop ? '280px 1fr' : '1fr'}
-      areas={isLaptop ? 'sidebar main' : 'main'}
-      gap="none"
-    >
-      {isLaptop && (
-        <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
-            cols="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" 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" justify="end" align="center">
-              <ThemeToggle />
-              {!isLaptop && (
-                <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

@@ -1,20 +0,0 @@
-// 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}
-    />
-  );
-}