@gv-tech/design-system 1.1.0 → 2.0.0

package/src/components/docs/Sidebar.tsx

@@ -1,18 +1,8 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { cn } from '@/lib/utils';
-import {
-  ChevronDown,
-  ChevronRight,
-  FormInput,
-  Home,
-  Layers,
-  LayoutGrid,
-  MessageSquare,
-  Navigation,
-  Sparkles,
-  Table2,
-} from 'lucide-react';
+import { FormInput, Home, Layers, LayoutGrid, MessageSquare, Navigation, Sparkles, Table2 } from 'lucide-react';
 import * as React from 'react';
 import { version } from '../../../package.json';
 
@@ -51,6 +41,7 @@ const categoryConfig: Record<ComponentCategory, { label: string; icon: React.Rea
 export const navItems: NavItem[] = [
   // Getting Started
   { id: 'getting-started', label: 'Introduction', category: 'getting-started' },
+  { id: 'color-tokens', label: 'Color Tokens', category: 'getting-started' },
   { id: 'installation', label: 'Installation', category: 'getting-started' },
 
   // Layout
@@ -102,6 +93,7 @@ export const navItems: NavItem[] = [
   { id: 'dropdown-menu', label: 'Dropdown Menu', category: 'overlay' },
   { id: 'context-menu', label: 'Context Menu', category: 'overlay' },
   { id: 'command', label: 'Command', category: 'overlay' },
+  { id: 'search', label: 'Search', category: 'overlay' },
   { id: 'sheet', label: 'Sheet', category: 'overlay' },
   { id: 'drawer', label: 'Drawer', category: 'overlay' },
 
@@ -111,77 +103,71 @@ export const navItems: NavItem[] = [
   { id: 'carousel', label: 'Carousel', category: 'advanced' },
   { id: 'toggle', label: 'Toggle', category: 'advanced' },
   { id: 'toggle-group', label: 'Toggle Group', category: 'advanced' },
+  { id: 'theme-toggle', label: 'Theme Toggle', category: 'advanced' },
 ];
 
 export function Sidebar({ activeItem, onItemSelect }: SidebarProps) {
-  const [expandedCategories, setExpandedCategories] = React.useState<Set<ComponentCategory>>(
-    new Set(['getting-started', 'forms']),
-  );
-
-  const toggleCategory = (category: ComponentCategory) => {
-    setExpandedCategories((prev) => {
-      const next = new Set(prev);
-      if (next.has(category)) {
-        next.delete(category);
-      } else {
-        next.add(category);
-      }
-      return next;
-    });
-  };
-
   const categories = Object.keys(categoryConfig) as ComponentCategory[];
+  const [expandedCategories, setExpandedCategories] = React.useState<string[]>(['getting-started', 'forms']);
+
+  // Ensure the category of the active item is expanded
+  React.useEffect(() => {
+    const activeNavItem = navItems.find((item) => item.id === activeItem);
+    if (activeNavItem && !expandedCategories.includes(activeNavItem.category)) {
+      setExpandedCategories((prev) => [...prev, activeNavItem.category]);
+    }
+  }, [activeItem, expandedCategories]);
 
   return (
-    <div className="w-64 border-r bg-muted/30 flex flex-col h-full">
+    <div className="w-64 border-r bg-muted/50 flex flex-col h-full">
       <div className="p-4 border-b">
         <h2 className="font-semibold text-lg">GV Design System</h2>
         <p className="text-xs text-muted-foreground">v{version}</p>
       </div>
       <ScrollArea className="flex-1">
         <nav className="p-2">
-          {categories.map((category) => {
-            const config = categoryConfig[category];
-            const items = navItems.filter((item) => item.category === category);
-            const isExpanded = expandedCategories.has(category);
-
-            if (items.length === 0) return null;
-
-            return (
-              <div key={category} className="mb-1">
-                <button
-                  onClick={() => toggleCategory(category)}
-                  className="w-full flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-md hover:bg-accent/50 transition-colors"
-                >
-                  {config.icon}
-                  <span className="flex-1 text-left">{config.label}</span>
-                  {isExpanded ? (
-                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
-                  ) : (
-                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                  )}
-                </button>
-                {isExpanded && (
-                  <div className="ml-4 mt-1 space-y-0.5">
-                    {items.map((item) => (
-                      <Button
-                        key={item.id}
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => onItemSelect(item.id)}
-                        className={cn(
-                          'w-full justify-start h-8 px-2 font-normal',
-                          activeItem === item.id && 'bg-accent text-accent-foreground',
-                        )}
-                      >
-                        {item.label}
-                      </Button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            );
-          })}
+          <Accordion
+            type="multiple"
+            value={expandedCategories}
+            onValueChange={setExpandedCategories}
+            className="w-full space-y-1"
+          >
+            {categories.map((category) => {
+              const config = categoryConfig[category];
+              const items = navItems.filter((item) => item.category === category);
+
+              if (items.length === 0) return null;
+
+              return (
+                <AccordionItem key={category} value={category} className="border-none">
+                  <AccordionTrigger className="flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-md hover:bg-accent/50 transition-colors hover:no-underline [&>svg]:h-4 [&>svg]:w-4">
+                    <div className="flex items-center gap-2 flex-1">
+                      {config.icon}
+                      <span className="text-left">{config.label}</span>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent className="pb-1">
+                    <div className="ml-4 mt-1 space-y-0.5 border-l pl-2">
+                      {items.map((item) => (
+                        <Button
+                          key={item.id}
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => onItemSelect(item.id)}
+                          className={cn(
+                            'w-full justify-start h-8 px-2 font-normal',
+                            activeItem === item.id && 'bg-accent text-accent-foreground',
+                          )}
+                        >
+                          {item.label}
+                        </Button>
+                      ))}
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              );
+            })}
+          </Accordion>
         </nav>
       </ScrollArea>
     </div>

package/src/components/docs/index.ts

@@ -1,5 +1,6 @@
 export { CodeBlock } from './CodeBlock';
 export { ComponentSection, ComponentShowcase } from './ComponentShowcase';
 export { Footer } from './Footer';
+export { PropsTable, type PropDefinition } from './PropsTable';
 export { Sidebar, navItems, type ComponentCategory, type NavItem } from './Sidebar';
 export { ThemeToggle } from './ThemeToggle';

package/src/components/ui/accordion.test.tsx

@@ -0,0 +1,86 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
+
+describe('Accordion', () => {
+  it('renders correctly', () => {
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Trigger 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    expect(screen.getByText('Trigger 1')).toBeInTheDocument();
+    // Content should not be visible initially
+    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+  });
+
+  it('expands when clicked', async () => {
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Trigger 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    const trigger = screen.getByText('Trigger 1');
+    await userEvent.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByText('Content 1')).toBeVisible();
+    });
+  });
+
+  it('collapses when clicked again', async () => {
+    render(
+      <Accordion type="single" collapsible defaultValue="item-1">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Trigger 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    // Initial state open
+    expect(screen.getByText('Content 1')).toBeVisible();
+
+    const trigger = screen.getByText('Trigger 1');
+    await userEvent.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    });
+  });
+
+  it('handles single mode correctly', async () => {
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Trigger 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Trigger 2</AccordionTrigger>
+          <AccordionContent>Content 2</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    // Click item 1
+    await userEvent.click(screen.getByText('Trigger 1'));
+    await waitFor(() => expect(screen.getByText('Content 1')).toBeVisible());
+
+    // Click item 2
+    await userEvent.click(screen.getByText('Trigger 2'));
+    await waitFor(() => expect(screen.getByText('Content 2')).toBeVisible());
+
+    // Item 1 should be closed
+    await waitFor(() => expect(screen.queryByText('Content 1')).not.toBeInTheDocument());
+  });
+});

package/src/components/ui/alert-dialog.test.tsx

@@ -0,0 +1,89 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './alert-dialog';
+
+describe('AlertDialog', () => {
+  it('renders correctly', async () => {
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Open</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>,
+    );
+
+    expect(screen.getByText('Open')).toBeInTheDocument();
+    expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByText('Open'));
+
+    await waitFor(() => {
+      expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+      expect(screen.getByText('Are you sure?')).toBeInTheDocument();
+      expect(screen.getByText('This action cannot be undone.')).toBeInTheDocument();
+    });
+  });
+
+  it('closes when cancel is clicked', async () => {
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Open</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>,
+    );
+
+    await userEvent.click(screen.getByText('Open'));
+    await waitFor(() => expect(screen.getByRole('alertdialog')).toBeInTheDocument());
+
+    await userEvent.click(screen.getByText('Cancel'));
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
+  });
+
+  it('closes when action is clicked', async () => {
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Open</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>,
+    );
+
+    await userEvent.click(screen.getByText('Open'));
+    await waitFor(() => expect(screen.getByRole('alertdialog')).toBeInTheDocument());
+
+    await userEvent.click(screen.getByText('Continue'));
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
+  });
+});

package/src/components/ui/alert.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Alert, AlertDescription, AlertTitle } from './alert';
+
+describe('Alert', () => {
+  it('renders correctly', () => {
+    render(
+      <Alert>
+        <AlertTitle>Heads up!</AlertTitle>
+        <AlertDescription>You can add components to your app using the cli.</AlertDescription>
+      </Alert>,
+    );
+
+    const alert = screen.getByRole('alert');
+    expect(alert).toBeInTheDocument();
+    expect(screen.getByText('Heads up!')).toBeInTheDocument();
+    expect(screen.getByText('You can add components to your app using the cli.')).toBeInTheDocument();
+  });
+
+  it('renders destructive variant', () => {
+    render(
+      <Alert variant="destructive">
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>Your session has expired.</AlertDescription>
+      </Alert>,
+    );
+
+    const alert = screen.getByRole('alert');
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveClass('border-destructive/50');
+    expect(alert).toHaveClass('text-destructive');
+  });
+});

package/src/components/ui/aspect-ratio.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { AspectRatio } from './aspect-ratio';
+
+describe('AspectRatio', () => {
+  it('renders correctly', () => {
+    const { container } = render(
+      <AspectRatio ratio={16 / 9}>
+        <img src="test.jpg" alt="test" />
+      </AspectRatio>,
+    );
+
+    const img = screen.getByRole('img');
+    expect(img).toBeInTheDocument();
+
+    // Radix AspectRatio renders a wrapper with padding-bottom based on ratio
+    // We can check if the wrapper style is applied
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveStyle({ paddingBottom: expect.stringMatching(/%$/) });
+  });
+
+  it('renders with custom ratio', () => {
+    const { container } = render(
+      <AspectRatio ratio={1 / 1}>
+        <div>Square</div>
+      </AspectRatio>,
+    );
+
+    expect(screen.getByText('Square')).toBeInTheDocument();
+    const wrapper = container.firstChild;
+    // 1/1 ratio should be 100% padding-bottom
+    expect(wrapper).toHaveStyle({ paddingBottom: '100%' });
+  });
+});

package/src/components/ui/avatar.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Avatar, AvatarFallback, AvatarImage } from './avatar';
+
+describe('Avatar', () => {
+  it('renders correctly', () => {
+    render(
+      <Avatar>
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>,
+    );
+
+    // In JSDOM, image loading might not happen immediately or at all without mocking.
+    // However, the elements should be in the DOM.
+    // Radix conditionally renders Image or Fallback.
+    // By default, it might render Image and hide Fallback, or vice versa depending on loading.
+
+    // Let's check that the root is present
+    const avatar = screen.getByText('CN')?.parentElement || screen.getByRole('img').parentElement;
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('renders fallback when image is missing', () => {
+    render(
+      <Avatar>
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>,
+    );
+
+    expect(screen.getByText('CN')).toBeInTheDocument();
+  });
+});

package/src/components/ui/badge.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Badge } from './badge';
+
+describe('Badge', () => {
+  it('renders correctly', () => {
+    render(<Badge>Test Badge</Badge>);
+    expect(screen.getByText('Test Badge')).toBeInTheDocument();
+  });
+
+  it('renders variants', () => {
+    const { rerender, getByText } = render(<Badge variant="default">Default</Badge>);
+    expect(getByText('Default')).toHaveClass('bg-primary');
+
+    rerender(<Badge variant="secondary">Secondary</Badge>);
+    expect(getByText('Secondary')).toHaveClass('bg-secondary');
+
+    rerender(<Badge variant="destructive">Destructive</Badge>);
+    expect(getByText('Destructive')).toHaveClass('bg-destructive');
+
+    rerender(<Badge variant="outline">Outline</Badge>);
+    expect(getByText('Outline')).toHaveClass('text-foreground');
+  });
+});

package/src/components/ui/breadcrumb.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from './breadcrumb';
+
+describe('Breadcrumb', () => {
+  it('renders correctly', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Page</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    );
+
+    const nav = screen.getByRole('navigation');
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveAttribute('aria-label', 'breadcrumb');
+
+    const links = screen.getAllByRole('link');
+    expect(links).toHaveLength(2); // Link and Page (span role="link")
+    expect(links[0]).toHaveAttribute('href', '/');
+    expect(links[1]).toHaveTextContent('Page');
+  });
+
+  it('renders custom separator', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink>Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator>/</BreadcrumbSeparator>
+          <BreadcrumbItem>
+            <BreadcrumbPage>Page</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    );
+
+    expect(screen.getByText('/')).toBeInTheDocument();
+  });
+});

package/src/components/ui/button.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { Button } from './button';
+
+describe('Button', () => {
+  it('renders correctly', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+  });
+
+  it('handles click events', async () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+
+    await userEvent.click(screen.getByRole('button', { name: /click me/i }));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('can be disabled', () => {
+    render(<Button disabled>Click me</Button>);
+    expect(screen.getByRole('button', { name: /click me/i })).toBeDisabled();
+  });
+
+  it('supports asChild prop', () => {
+    render(
+      <Button asChild>
+        <a href="/test">Link Button</a>
+      </Button>,
+    );
+
+    const link = screen.getByRole('link', { name: /link button/i });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/test');
+  });
+
+  describe('Variants', () => {
+    const variants = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'] as const;
+
+    variants.forEach((variant) => {
+      it(`renders ${variant} variant`, () => {
+        render(<Button variant={variant}>{variant}</Button>);
+        const button = screen.getByRole('button', { name: variant });
+        expect(button).toBeInTheDocument();
+        // We could check for specific classes here, but that might make tests too brittle
+        // checking the role and content presence is a good baseline
+      });
+    });
+  });
+
+  describe('Sizes', () => {
+    const sizes = ['default', 'sm', 'lg', 'icon'] as const;
+
+    sizes.forEach((size) => {
+      it(`renders ${size} size`, () => {
+        render(<Button size={size}>{size}</Button>);
+        const button = screen.getByRole('button', { name: size });
+        expect(button).toBeInTheDocument();
+      });
+    });
+  });
+});

package/src/components/ui/calendar.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Calendar } from './calendar';
+
+describe('Calendar', () => {
+  it('renders correctly', () => {
+    // Mock date to consistent rendering
+    const date = new Date(2023, 0, 1); // Jan 1, 2023
+
+    render(<Calendar mode="single" selected={date} month={date} />);
+
+    expect(screen.getByText('January 2023')).toBeInTheDocument();
+    const days = screen.getAllByText('1');
+    expect(days.length).toBeGreaterThan(0);
+    expect(screen.getByText('Su')).toBeInTheDocument(); // Sunday header
+  });
+
+  it('renders with class name', () => {
+    const { container } = render(<Calendar className="test-class" />);
+    // DayPicker renders a div with the class
+    expect(container.firstChild).toHaveClass('test-class');
+  });
+});