@gv-tech/design-system 1.1.0 → 2.0.0

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

@@ -0,0 +1,85 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useForm } from 'react-hook-form';
+import { describe, expect, it } from 'vitest';
+import { z } from 'zod';
+import { Button } from './button';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from './form';
+import { Input } from './input';
+
+const formSchema = z.object({
+  username: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+});
+
+function TestForm({ onSubmit }: { onSubmit: (values: z.infer<typeof formSchema>) => void }) {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: '',
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+              <FormDescription>This is your public display name.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  );
+}
+
+describe('Form', () => {
+  it('renders form fields correctly', () => {
+    render(<TestForm onSubmit={() => {}} />);
+
+    expect(screen.getByLabelText('Username')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('shadcn')).toBeInTheDocument();
+    expect(screen.getByText('This is your public display name.')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
+  });
+
+  it('validates input and displays error message', async () => {
+    const user = userEvent.setup();
+    render(<TestForm onSubmit={() => {}} />);
+
+    const submitButton = screen.getByRole('button', { name: 'Submit' });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Username must be at least 2 characters.')).toBeVisible();
+    });
+  });
+
+  it('submits valid data', async () => {
+    const user = userEvent.setup();
+    const { vi } = await import('vitest');
+    const mockSubmit = vi.fn();
+
+    render(<TestForm onSubmit={mockSubmit} />);
+
+    const input = screen.getByLabelText('Username');
+    await user.type(input, 'johndoe');
+    await user.click(screen.getByRole('button', { name: 'Submit' }));
+
+    await waitFor(() => {
+      expect(mockSubmit).toHaveBeenCalledWith({ username: 'johndoe' }, expect.anything());
+    });
+  });
+});

package/src/components/ui/hover-card.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
+
+describe('HoverCard', () => {
+  it('renders trigger correctly', () => {
+    render(
+      <HoverCard>
+        <HoverCardTrigger>Hover me</HoverCardTrigger>
+        <HoverCardContent>Content</HoverCardContent>
+      </HoverCard>,
+    );
+
+    expect(screen.getByText('Hover me')).toBeInTheDocument();
+  });
+
+  it('shows content on hover', async () => {
+    const user = userEvent.setup();
+    render(
+      <HoverCard openDelay={0} closeDelay={0}>
+        <HoverCardTrigger>Hover me</HoverCardTrigger>
+        <HoverCardContent>Content</HoverCardContent>
+      </HoverCard>,
+    );
+
+    const trigger = screen.getByText('Hover me');
+
+    // Initial state
+    expect(screen.queryByText('Content')).not.toBeInTheDocument();
+
+    // Hover
+    await user.hover(trigger);
+
+    // Should be visible
+    await waitFor(() => {
+      expect(screen.getByText('Content')).toBeVisible();
+    });
+
+    // Unhover
+    await user.unhover(trigger);
+
+    // Should be hidden
+    await waitFor(() => {
+      expect(screen.queryByText('Content')).not.toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+import { describe, expect, it } from 'vitest';
+import { Input } from './input';
+
+describe('Input', () => {
+  it('renders correctly', () => {
+    render(<Input placeholder="Enter text" />);
+    expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
+  });
+
+  it('accepts user input', async () => {
+    const user = userEvent.setup();
+    render(<Input placeholder="Enter text" />);
+
+    const input = screen.getByPlaceholderText('Enter text');
+    await user.type(input, 'Hello World');
+
+    expect(input).toHaveValue('Hello World');
+  });
+
+  it('handles disabled state', () => {
+    render(<Input disabled placeholder="Disabled" />);
+    expect(screen.getByPlaceholderText('Disabled')).toBeDisabled();
+  });
+
+  it('forwards ref', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    render(<Input ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  });
+});

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

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Label } from './label';
+
+describe('Label', () => {
+  it('renders correctly', () => {
+    render(<Label>Test Label</Label>);
+    expect(screen.getByText('Test Label')).toBeInTheDocument();
+  });
+
+  it('renders within the DOM', () => {
+    const { container } = render(<Label>Test Label</Label>);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('supports htmlFor attribute', () => {
+    render(
+      <>
+        <Label htmlFor="test-input">Test Input</Label>
+        <input id="test-input" />
+      </>,
+    );
+
+    const label = screen.getByText('Test Input');
+    expect(label).toHaveAttribute('for', 'test-input');
+  });
+});

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

@@ -0,0 +1,92 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarTrigger,
+} from './menubar';
+
+describe('Menubar', () => {
+  it('renders trigger correctly', () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New Tab</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>,
+    );
+
+    expect(screen.getByText('File')).toBeInTheDocument();
+  });
+
+  it('opens menu on click', async () => {
+    const user = userEvent.setup();
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New Tab</MenubarItem>
+            <MenubarItem>New Window</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>,
+    );
+
+    await user.click(screen.getByText('File'));
+
+    expect(screen.getByText('New Tab')).toBeVisible();
+    expect(screen.getByText('New Window')).toBeVisible();
+  });
+
+  it('handles checkbox items', async () => {
+    const user = userEvent.setup();
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem checked>Show Sidebar</MenubarCheckboxItem>
+            <MenubarCheckboxItem checked={false}>Show Status Bar</MenubarCheckboxItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>,
+    );
+
+    await user.click(screen.getByText('View'));
+
+    expect(screen.getByRole('menuitemcheckbox', { name: 'Show Sidebar' })).toBeChecked();
+    expect(screen.getByRole('menuitemcheckbox', { name: 'Show Status Bar' })).not.toBeChecked();
+  });
+
+  it('handles radio items', async () => {
+    const user = userEvent.setup();
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>Profiles</MenubarTrigger>
+          <MenubarContent>
+            <MenubarRadioGroup value="andy">
+              <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+              <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            </MenubarRadioGroup>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>,
+    );
+
+    await user.click(screen.getByText('Profiles'));
+
+    expect(screen.getByRole('menuitemradio', { name: 'Andy' })).toBeChecked();
+    expect(screen.getByRole('menuitemradio', { name: 'Benoit' })).not.toBeChecked();
+  });
+});

package/src/components/ui/navigation-menu.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from './navigation-menu';
+
+describe('NavigationMenu', () => {
+  it('renders trigger correctly', () => {
+    render(
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <NavigationMenuLink>Link One</NavigationMenuLink>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>,
+    );
+
+    expect(screen.getByText('Item One')).toBeInTheDocument();
+  });
+
+  it('shows content on click (or hover depending on implementation)', async () => {
+    // Radix Navigation Menu usually works on hover for desktop, click for touch/mobile.
+    // In JSDOM, we can simulate clicks.
+    const user = userEvent.setup();
+    render(
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <NavigationMenuLink>Link One</NavigationMenuLink>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>,
+    );
+
+    const trigger = screen.getByText('Item One');
+    await user.click(trigger);
+
+    expect(screen.getByText('Link One')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from './pagination';
+
+describe('Pagination', () => {
+  it('renders correctly', () => {
+    render(
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#">1</PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext href="#" />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>,
+    );
+
+    expect(screen.getByRole('navigation', { name: 'pagination' })).toBeInTheDocument();
+    expect(screen.getByText('Previous')).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('Next')).toBeInTheDocument();
+    expect(screen.getByText('More pages')).toBeInTheDocument();
+  });
+
+  it('marks active page correctly', () => {
+    render(
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationLink href="#" isActive>
+              1
+            </PaginationLink>
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>,
+    );
+
+    const link = screen.getByText('1').closest('a');
+    expect(link).toHaveAttribute('aria-current', 'page');
+  });
+});

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

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+describe('Popover', () => {
+  it('renders trigger correctly', () => {
+    render(
+      <Popover>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent>Content</PopoverContent>
+      </Popover>,
+    );
+
+    expect(screen.getByText('Open')).toBeInTheDocument();
+  });
+
+  it('opens content on click', async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent>Content</PopoverContent>
+      </Popover>,
+    );
+
+    await user.click(screen.getByText('Open'));
+
+    expect(screen.getByText('Content')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Progress } from './progress';
+
+describe('Progress', () => {
+  it('renders correctly', () => {
+    render(<Progress value={50} aria-label="progress-bar" />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '50');
+  });
+
+  it('renders correctly with no value', () => {
+    render(<Progress aria-label="progress-bar" />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    // When value is undefined, Radix UI might behave in specific ways, typically indeterminate or 0.
+    // Our wrapper: transform: `translateX(-${100 - (value || 0)}%)` -> -100%
+  });
+});

package/src/components/ui/progress.tsx

@@ -10,6 +10,7 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
+    value={value}
     {...props}
   >
     <ProgressPrimitive.Indicator

package/src/components/ui/radio-group.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { RadioGroup, RadioGroupItem } from './radio-group';
+
+describe('RadioGroup', () => {
+  it('renders correctly', () => {
+    render(
+      <RadioGroup defaultValue="option-one">
+        <RadioGroupItem value="option-one" id="option-one" aria-label="Option One" />
+        <RadioGroupItem value="option-two" id="option-two" aria-label="Option Two" />
+      </RadioGroup>,
+    );
+
+    expect(screen.getByRole('radio', { name: /Option One/i })).toBeInTheDocument();
+    // Radix RadioGroup renders standard inputs visually hidden.
+    // Testing library query by role 'radio' should find them.
+    // However, since we didn't provide labels, we might need to rely on 'checked' state or IDs.
+
+    const radio1 = screen.getByRole('radio', { checked: true });
+    expect(radio1).toBeInTheDocument();
+    expect(radio1).toHaveValue('option-one');
+  });
+
+  it('changes value on click', async () => {
+    const user = userEvent.setup();
+    render(
+      <RadioGroup defaultValue="option-one">
+        <RadioGroupItem value="option-one" />
+        <RadioGroupItem value="option-two" data-testid="radio-two" />
+      </RadioGroup>,
+    );
+
+    const radio2 = screen.getByTestId('radio-two');
+    await user.click(radio2);
+
+    expect(radio2).toBeChecked();
+  });
+});

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

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './resizable';
+
+describe('Resizable', () => {
+  it('renders correctly', () => {
+    // Basic render test
+    render(
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel defaultSize={50}>
+          <div>One</div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>
+          <div>Two</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    expect(screen.getByText('One')).toBeInTheDocument();
+    expect(screen.getByText('Two')).toBeInTheDocument();
+  });
+});

package/src/components/ui/scroll-area.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { ScrollArea, ScrollBar } from './scroll-area';
+
+describe('ScrollArea', () => {
+  it('renders correctly', () => {
+    render(
+      <ScrollArea className="h-[200px] w-[350px]">
+        <div>Content</div>
+        <ScrollBar />
+      </ScrollArea>,
+    );
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,75 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Search, SearchTrigger } from './search';
+
+// Mock CommandDialog since it uses Radix Dialog which might need a portal
+vi.mock('@/components/ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: React.ReactNode; open: boolean }) => (open ? <div>{children}</div> : null),
+  DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DialogPortal: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  DialogOverlay: () => null,
+}));
+
+describe('Search', () => {
+  it('renders search trigger', () => {
+    render(<SearchTrigger />);
+    expect(screen.getByText('Search docs...')).toBeInTheDocument();
+  });
+
+  it('opens search dialog when trigger is clicked (controlled)', () => {
+    const onOpenChange = vi.fn();
+    render(
+      <Search open={false} onOpenChange={onOpenChange}>
+        <CommandInput placeholder="Search..." />
+      </Search>,
+    );
+
+    // The dialog should be closed initially
+    expect(screen.queryByPlaceholderText('Search...')).not.toBeInTheDocument();
+  });
+
+  it('responds to keyboard shortcuts', () => {
+    render(
+      <Search>
+        <CommandInput placeholder="Search..." />
+        <CommandList>
+          <CommandItem>Result 1</CommandItem>
+        </CommandList>
+      </Search>,
+    );
+
+    // Simulate Cmd+K
+    fireEvent.keyDown(document, { key: 'k', metaKey: true });
+
+    // Check if dialog content is visible
+    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+  });
+
+  it('filters results correctly', () => {
+    render(
+      <Search open={true}>
+        <CommandInput placeholder="Search..." />
+        <CommandList>
+          <CommandEmpty>No results.</CommandEmpty>
+          <CommandGroup heading="Components">
+            <SearchItem>Button</SearchItem>
+            <SearchItem>Input</SearchItem>
+          </CommandGroup>
+        </CommandList>
+      </Search>,
+    );
+
+    const input = screen.getByPlaceholderText('Search...');
+    fireEvent.change(input, { target: { value: 'But' } });
+
+    expect(screen.getByText('Button')).toBeInTheDocument();
+    // cmdk removes non-matching items from the DOM
+    expect(screen.queryByText('Input')).not.toBeInTheDocument();
+  });
+});
+
+// Helper component for testing
+function SearchItem({ children }: { children: React.ReactNode }) {
+  return <CommandItem>{children}</CommandItem>;
+}