@gv-tech/design-system 2.4.0 → 2.5.1

package/src/pages/components/DrawerDocs.tsx

@@ -1,274 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Button } from '@/components/ui/button';
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from '@/components/ui/drawer';
-import { Minus, Plus } from 'lucide-react';
-import * as React from 'react';
-import { Bar, BarChart, ResponsiveContainer } from 'recharts';
-
-const data = [
-  {
-    goal: 400,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 239,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 349,
-  },
-];
-
-export function DrawerDocs() {
-  const [goal, setGoal] = React.useState(350);
-
-  function onClick(adjustment: number) {
-    setGoal(Math.max(200, Math.min(400, goal + adjustment)));
-  }
-
-  return (
-    <ComponentSection title="Drawer" description="A drawer component for React.">
-      <ComponentShowcase
-        title="Default"
-        description="A responsive drawer."
-        code={`<Drawer>
-  <DrawerTrigger asChild>
-    <Button variant="outline">Open Drawer</Button>
-  </DrawerTrigger>
-  <DrawerContent>
-    <div className="mx-auto w-full max-w-sm">
-      <DrawerHeader>
-        <DrawerTitle>Move Goal</DrawerTitle>
-        <DrawerDescription>Set your daily activity goal.</DrawerDescription>
-      </DrawerHeader>
-      <div className="p-4 pb-0">
-        <div className="flex items-center justify-center space-x-2">
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-8 w-8 shrink-0 rounded-full"
-            onClick={() => onClick(-10)}
-            disabled={goal <= 200}
-          >
-            <Minus className="h-4 w-4" />
-            <span className="sr-only">Decrease</span>
-          </Button>
-          <div className="flex-1 text-center">
-            <div className="text-7xl font-bold tracking-tighter">
-              {goal}
-            </div>
-            <div className="text-[0.70rem] uppercase text-muted-foreground">
-              Calories/day
-            </div>
-          </div>
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-8 w-8 shrink-0 rounded-full"
-            onClick={() => onClick(10)}
-            disabled={goal >= 400}
-          >
-            <Plus className="h-4 w-4" />
-            <span className="sr-only">Increase</span>
-          </Button>
-        </div>
-        <div className="mt-3 h-[120px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={data}>
-              <Bar
-                dataKey="goal"
-                style={
-                  {
-                    fill: "hsl(var(--foreground))",
-                    opacity: 0.9,
-                  } as React.CSSProperties
-                }
-              />
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      </div>
-      <DrawerFooter>
-        <Button>Submit</Button>
-        <DrawerClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </div>
-  </DrawerContent>
-</Drawer>`}
-      >
-        <Drawer>
-          <DrawerTrigger asChild>
-            <Button variant="outline">Open Drawer</Button>
-          </DrawerTrigger>
-          <DrawerContent>
-            <div className="mx-auto w-full max-w-sm">
-              <DrawerHeader>
-                <DrawerTitle>Move Goal</DrawerTitle>
-                <DrawerDescription>Set your daily activity goal.</DrawerDescription>
-              </DrawerHeader>
-              <div className="p-4 pb-0">
-                <div className="flex items-center justify-center space-x-2">
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    className="h-8 w-8 shrink-0 rounded-full"
-                    onClick={() => onClick(-10)}
-                    disabled={goal <= 200}
-                  >
-                    <Minus className="h-4 w-4" />
-                    <span className="sr-only">Decrease</span>
-                  </Button>
-                  <div className="flex-1 text-center">
-                    <div className="text-7xl font-bold tracking-tighter">{goal}</div>
-                    <div className="text-[0.70rem] uppercase text-muted-foreground">Calories/day</div>
-                  </div>
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    className="h-8 w-8 shrink-0 rounded-full"
-                    onClick={() => onClick(10)}
-                    disabled={goal >= 400}
-                  >
-                    <Plus className="h-4 w-4" />
-                    <span className="sr-only">Increase</span>
-                  </Button>
-                </div>
-                <div className="mt-3 h-[120px]">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <BarChart data={data}>
-                      <Bar
-                        dataKey="goal"
-                        style={
-                          {
-                            fill: 'hsl(var(--foreground))',
-                            opacity: 0.9,
-                          } as React.CSSProperties
-                        }
-                      />
-                    </BarChart>
-                  </ResponsiveContainer>
-                </div>
-              </div>
-              <DrawerFooter>
-                <Button>Submit</Button>
-                <DrawerClose asChild>
-                  <Button variant="outline">Cancel</Button>
-                </DrawerClose>
-              </DrawerFooter>
-            </div>
-          </DrawerContent>
-        </Drawer>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Drawer component is built on top of{' '}
-          <a href="https://github.com/emilkowalski/vaul" className="underline" target="_blank" rel="noreferrer">
-            Vaul
-          </a>
-          .
-        </p>
-        <h4 className="text-lg font-medium mt-6">Drawer (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the drawer.',
-            },
-            {
-              name: 'defaultOpen',
-              type: 'boolean',
-              description: 'The default open state when uncontrolled.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              description: 'Event handler called when the open state changes.',
-            },
-            {
-              name: 'shouldScaleBackground',
-              type: 'boolean',
-              defaultValue: 'true',
-              description: 'Whether to scale the background when the drawer opens.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">DrawerTrigger</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'asChild',
-              type: 'boolean',
-              description: 'Change the default rendered element for the one passed as a child.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">DrawerContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'onEscapeKeyDown',
-              type: '(event: KeyboardEvent) => void',
-              description: 'Event handler called when the escape key is down.',
-            },
-            {
-              name: 'onPointerDownOutside',
-              type: '(event: PointerDownOutsideEvent) => void',
-              description: 'Event handler called when a pointer event occurs outside the bounds of the component.',
-            },
-            {
-              name: 'onInteractOutside',
-              type: '(event: React.FocusEvent | MouseEvent | TouchEvent) => void',
-              description:
-                'Event handler called when an interaction (pointer or focus) happens outside the bounds of the component.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/components/DropdownMenuDocs.tsx

@@ -1,313 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-  Cloud,
-  CreditCard,
-  Keyboard,
-  LifeBuoy,
-  LogOut,
-  Mail,
-  MessageSquare,
-  Plus,
-  PlusCircle,
-  Settings,
-  User,
-  UserPlus,
-  Users,
-} from 'lucide-react';
-import * as React from 'react';
-import { SiGithub } from 'react-icons/si';
-
-export function DropdownMenuDocs() {
-  const [showStatusBar, setShowStatusBar] = React.useState(true);
-  const [showActivityBar, setShowActivityBar] = React.useState(false);
-  const [showPanel, setShowPanel] = React.useState(false);
-  const [position, setPosition] = React.useState('bottom');
-
-  return (
-    <ComponentSection
-      title="Dropdown Menu"
-      description="Displays a menu to the user—such as a set of actions or functions—triggered by a button."
-    >
-      <ComponentShowcase
-        title="Default"
-        description="A simple dropdown menu."
-        code={`<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="outline">Open</Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent className="w-56">
-    <DropdownMenuLabel>My Account</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuGroup>
-      <DropdownMenuItem>
-        <User className="mr-2 h-4 w-4" />
-        <span>Profile</span>
-        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-      </DropdownMenuItem>
-      ...
-    </DropdownMenuGroup>
-    ...
-    <DropdownMenuItem>
-      <SiGithub className="mr-2 h-4 w-4" />
-      <span>GitHub</span>
-    </DropdownMenuItem>
-    ...
-  </DropdownMenuContent>
-</DropdownMenu>`}
-      >
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline">Open</Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56">
-            <DropdownMenuLabel>My Account</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <User className="mr-2 h-4 w-4" />
-                <span>Profile</span>
-                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <CreditCard className="mr-2 h-4 w-4" />
-                <span>Billing</span>
-                <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <Settings className="mr-2 h-4 w-4" />
-                <span>Settings</span>
-                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <Keyboard className="mr-2 h-4 w-4" />
-                <span>Keyboard shortcuts</span>
-                <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <Users className="mr-2 h-4 w-4" />
-                <span>Team</span>
-              </DropdownMenuItem>
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>
-                  <UserPlus className="mr-2 h-4 w-4" />
-                  <span>Invite users</span>
-                </DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent>
-                    <DropdownMenuItem>
-                      <Mail className="mr-2 h-4 w-4" />
-                      <span>Email</span>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <MessageSquare className="mr-2 h-4 w-4" />
-                      <span>Message</span>
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem>
-                      <PlusCircle className="mr-2 h-4 w-4" />
-                      <span>More...</span>
-                    </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
-              <DropdownMenuItem>
-                <Plus className="mr-2 h-4 w-4" />
-                <span>New Team</span>
-                <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-              <SiGithub className="mr-2 h-4 w-4" />
-              <span>GitHub</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <LifeBuoy className="mr-2 h-4 w-4" />
-              <span>Support</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem disabled>
-              <Cloud className="mr-2 h-4 w-4" />
-              <span>API</span>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-              <LogOut className="mr-2 h-4 w-4" />
-              <span>Log out</span>
-              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Checkboxes and Radios"
-        description="A dropdown menu with checkboxes and radio items."
-        code={`<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="outline">Open</Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent className="w-56">
-    <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuCheckboxItem
-      checked={showStatusBar}
-      onCheckedChange={setShowStatusBar}
-    >
-      Status Bar
-    </DropdownMenuCheckboxItem>
-    <DropdownMenuCheckboxItem
-      checked={showActivityBar}
-      onCheckedChange={setShowActivityBar}
-      disabled
-    >
-      Activity Bar
-    </DropdownMenuCheckboxItem>
-    <DropdownMenuCheckboxItem
-      checked={showPanel}
-      onCheckedChange={setShowPanel}
-    >
-      Panel
-    </DropdownMenuCheckboxItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-      <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-      <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-      <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
-    </DropdownMenuRadioGroup>
-  </DropdownMenuContent>
-</DropdownMenu>`}
-      >
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline">Open</Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56">
-            <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar}>
-              Status Bar
-            </DropdownMenuCheckboxItem>
-            <DropdownMenuCheckboxItem checked={showActivityBar} onCheckedChange={setShowActivityBar} disabled>
-              Activity Bar
-            </DropdownMenuCheckboxItem>
-            <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
-              Panel
-            </DropdownMenuCheckboxItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-              <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
-            </DropdownMenuRadioGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The DropdownMenu component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Dropdown Menu
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">DropdownMenu (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the dropdown menu.',
-            },
-            {
-              name: 'defaultOpen',
-              type: 'boolean',
-              description: 'The default open state when uncontrolled.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              description: 'Event handler called when the open state changes.',
-            },
-            {
-              name: 'modal',
-              type: 'boolean',
-              defaultValue: 'true',
-              description: 'The modality of the dropdown menu.',
-            },
-            {
-              name: 'dir',
-              type: '"ltr" | "rtl"',
-              description: 'The reading direction of the dropdown menu.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">DropdownMenuCheckboxItem</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'checked',
-              type: 'boolean | "indeterminate"',
-              description: 'The controlled checked state of the item.',
-            },
-            {
-              name: 'onCheckedChange',
-              type: '(checked: boolean) => void',
-              description: 'Event handler called when the checked state changes.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">DropdownMenuRadioGroup</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'value',
-              type: 'string',
-              description: 'The value of the selected item in the group.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: string) => void',
-              description: 'Event handler called when the value changes.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}