@gv-tech/design-system 2.5.0 → 2.5.2

package/apps/playground-web/src/pages/web/NavigationMenuDocs.tsx

@@ -1,263 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  cn,
-  navigationMenuTriggerStyle,
-} from '@gv-tech/ui-web';
-import React from 'react';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-const ListItem = React.forwardRef<React.ElementRef<'a'>, React.ComponentPropsWithoutRef<'a'>>(
-  ({ className, title, children, ...props }, ref) => {
-    return (
-      <li>
-        <NavigationMenuLink asChild>
-          <a
-            ref={ref}
-            className={cn(
-              'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-              className,
-            )}
-            {...props}
-          >
-            <div className="text-sm font-medium leading-none">{title}</div>
-            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
-          </a>
-        </NavigationMenuLink>
-      </li>
-    );
-  },
-);
-ListItem.displayName = 'ListItem';
-
-export function NavigationMenuDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A standard navigation menu."
-        code={`<NavigationMenu>
-  <NavigationMenuList>
-    <NavigationMenuItem>
-      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-          <li className="row-span-3">
-            <NavigationMenuLink asChild>
-              <a
-                className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
-                href="/"
-              >
-                <div className="mb-2 mt-4 text-lg font-medium">
-                  shadcn/ui
-                </div>
-                <p className="text-sm leading-tight text-muted-foreground">
-                  Beautifully designed components built with Radix UI and
-                  Tailwind CSS.
-                </p>
-              </a>
-            </NavigationMenuLink>
-          </li>
-          <ListItem href="/docs" title="Introduction">
-            Re-usable components built using Radix UI and Tailwind CSS.
-          </ListItem>
-          <ListItem href="/docs/installation" title="Installation">
-            How to install dependencies and structure your app.
-          </ListItem>
-          <ListItem href="/docs/primitives/typography" title="Typography">
-            Styles for headings, paragraphs, lists...etc
-          </ListItem>
-        </ul>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-    <NavigationMenuItem>
-      <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-          <ListItem title="Alert Dialog" href="/docs/primitives/alert-dialog">
-            A modal dialog that interrupts the user with important content.
-          </ListItem>
-          <ListItem title="Hover Card" href="/docs/primitives/hover-card">
-            For sighted users to preview content available behind a link.
-          </ListItem>
-          <ListItem title="Progress" href="/docs/primitives/progress">
-            Displays an indicator showing the completion progress of a task.
-          </ListItem>
-          <ListItem title="Scroll-area" href="/docs/primitives/scroll-area">
-            Visually or semantically separates content.
-          </ListItem>
-          <ListItem title="Tabs" href="/docs/primitives/tabs">
-            A set of layered sections of content—known as tab panels.
-          </ListItem>
-          <ListItem title="Tooltip" href="/docs/primitives/tooltip">
-            A popup that displays information related to an element.
-          </ListItem>
-        </ul>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-    <NavigationMenuItem>
-      <a href="/docs" legacyBehavior passHref>
-        <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-          Documentation
-        </NavigationMenuLink>
-      </a>
-    </NavigationMenuItem>
-  </NavigationMenuList>
-</NavigationMenu>`}
-      >
-        <NavigationMenu>
-          <NavigationMenuList>
-            <NavigationMenuItem>
-              <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-              <NavigationMenuContent>
-                <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-                  <li className="row-span-3">
-                    <NavigationMenuLink asChild>
-                      <a
-                        className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
-                        href="/"
-                      >
-                        <div className="mb-2 mt-4 text-lg font-medium">shadcn/ui</div>
-                        <p className="text-sm leading-tight text-muted-foreground">
-                          Beautifully designed components built with Radix UI and Tailwind CSS.
-                        </p>
-                      </a>
-                    </NavigationMenuLink>
-                  </li>
-                  <ListItem href="/docs" title="Introduction">
-                    Re-usable components built using Radix UI and Tailwind CSS.
-                  </ListItem>
-                  <ListItem href="/docs/installation" title="Installation">
-                    How to install dependencies and structure your app.
-                  </ListItem>
-                  <ListItem href="/docs/primitives/typography" title="Typography">
-                    Styles for headings, paragraphs, lists...etc
-                  </ListItem>
-                </ul>
-              </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-              <NavigationMenuContent>
-                <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-                  <ListItem title="Alert Dialog" href="/docs/primitives/alert-dialog">
-                    A modal dialog that interrupts the user with important content.
-                  </ListItem>
-                  <ListItem title="Hover Card" href="/docs/primitives/hover-card">
-                    For sighted users to preview content available behind a link.
-                  </ListItem>
-                  <ListItem title="Progress" href="/docs/primitives/progress">
-                    Displays an indicator showing the completion progress of a task.
-                  </ListItem>
-                  <ListItem title="Scroll-area" href="/docs/primitives/scroll-area">
-                    Visually or semantically separates content.
-                  </ListItem>
-                  <ListItem title="Tabs" href="/docs/primitives/tabs">
-                    A set of layered sections of content—known as tab panels.
-                  </ListItem>
-                  <ListItem title="Tooltip" href="/docs/primitives/tooltip">
-                    A popup that displays information related to an element.
-                  </ListItem>
-                </ul>
-              </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <NavigationMenuLink className={navigationMenuTriggerStyle()} href="/docs">
-                Documentation
-              </NavigationMenuLink>
-            </NavigationMenuItem>
-          </NavigationMenuList>
-        </NavigationMenu>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Navigation Menu component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/navigation-menu"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Navigation Menu
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">NavigationMenu (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'defaultValue',
-              type: 'string',
-              description: 'The value of the menu item that should be active when initially rendered.',
-            },
-            {
-              name: 'value',
-              type: 'string',
-              description: 'The controlled value of the active menu item.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: string) => void',
-              description: 'Event handler called when the value changes.',
-            },
-            {
-              name: 'delayDuration',
-              type: 'number',
-              defaultValue: '200',
-              description: 'The duration from when the mouse enters the trigger until the content opens.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">NavigationMenuContent</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.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">NavigationMenuLink</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'active',
-              type: 'boolean',
-              description: 'Used to identify the link as the currently active page.',
-            },
-            {
-              name: 'onSelect',
-              type: '(event: Event) => void',
-              description: 'Event handler called when the link is selected.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

package/apps/playground-web/src/pages/web/PaginationDocs.tsx

@@ -1,102 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from '@gv-tech/ui-web';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function PaginationDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A standard pagination."
-        code={`<Pagination>
-  <PaginationContent>
-    <PaginationItem>
-      <PaginationPrevious href="#" />
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="#">1</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="#" isActive>
-        2
-      </PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="#">3</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationEllipsis />
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationNext href="#" />
-    </PaginationItem>
-  </PaginationContent>
-</Pagination>`}
-      >
-        <Pagination>
-          <PaginationContent>
-            <PaginationItem>
-              <PaginationPrevious href="#" />
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href="#">1</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href="#" isActive>
-                2
-              </PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href="#">3</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationEllipsis />
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationNext href="#" />
-            </PaginationItem>
-          </PaginationContent>
-        </Pagination>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">The Pagination component is built using standard HTML elements.</p>
-
-        <h4 className="text-lg font-medium mt-6">PaginationLink</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'isActive',
-              type: 'boolean',
-              description: 'Whether the link is active.',
-            },
-            {
-              name: 'size',
-              type: '"default" | "sm" | "icon"',
-              defaultValue: '"icon"',
-              description: 'The size of the button.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

package/apps/playground-web/src/pages/web/PopoverDocs.tsx

@@ -1,189 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Button, Input, Label, Popover, PopoverContent, PopoverTrigger } from '@gv-tech/ui-web';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function PopoverDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default popover."
-        code={`<Popover>
-  <PopoverTrigger asChild>
-    <Button variant="outline">Open popover</Button>
-  </PopoverTrigger>
-  <PopoverContent className="w-80">
-    <div className="grid gap-4">
-      <div className="space-y-2">
-        <h4 className="font-medium leading-none">Dimensions</h4>
-        <p className="text-sm text-muted-foreground">
-          Set the dimensions for the layer.
-        </p>
-      </div>
-      <div className="grid gap-2">
-        <div className="grid grid-cols-3 items-center gap-4">
-          <Label htmlFor="width">Width</Label>
-          <Input
-            id="width"
-            defaultValue="100%"
-            className="col-span-2 h-8"
-          />
-        </div>
-        <div className="grid grid-cols-3 items-center gap-4">
-          <Label htmlFor="maxWidth">Max. width</Label>
-          <Input
-            id="maxWidth"
-            defaultValue="300px"
-            className="col-span-2 h-8"
-          />
-        </div>
-        <div className="grid grid-cols-3 items-center gap-4">
-          <Label htmlFor="height">Height</Label>
-          <Input
-            id="height"
-            defaultValue="25px"
-            className="col-span-2 h-8"
-          />
-        </div>
-        <div className="grid grid-cols-3 items-center gap-4">
-          <Label htmlFor="maxHeight">Max. height</Label>
-          <Input
-            id="maxHeight"
-            defaultValue="none"
-            className="col-span-2 h-8"
-          />
-        </div>
-      </div>
-    </div>
-  </PopoverContent>
-</Popover>`}
-      >
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant="outline">Open popover</Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-80">
-            <div className="grid gap-4">
-              <div className="space-y-2">
-                <h4 className="font-medium leading-none">Dimensions</h4>
-                <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
-              </div>
-              <div className="grid gap-2">
-                <div className="grid grid-cols-3 items-center gap-4">
-                  <Label htmlFor="width">Width</Label>
-                  <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
-                </div>
-                <div className="grid grid-cols-3 items-center gap-4">
-                  <Label htmlFor="maxWidth">Max. width</Label>
-                  <Input id="maxWidth" defaultValue="300px" className="col-span-2 h-8" />
-                </div>
-                <div className="grid grid-cols-3 items-center gap-4">
-                  <Label htmlFor="height">Height</Label>
-                  <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
-                </div>
-                <div className="grid grid-cols-3 items-center gap-4">
-                  <Label htmlFor="maxHeight">Max. height</Label>
-                  <Input id="maxHeight" defaultValue="none" className="col-span-2 h-8" />
-                </div>
-              </div>
-            </div>
-          </PopoverContent>
-        </Popover>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Popover component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/popover"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Popover
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Popover (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'defaultOpen',
-              type: 'boolean',
-              description: 'The open state of the popover when it is initially rendered.',
-            },
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the popover.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              description: 'Event handler called when the open state changes.',
-            },
-            {
-              name: 'modal',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'The modality of the popover.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">PopoverContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'onOpenAutoFocus',
-              type: '(event: Event) => void',
-              description: 'Event handler called when focus moves into the component after opening.',
-            },
-            {
-              name: 'onCloseAutoFocus',
-              type: '(event: Event) => void',
-              description: 'Event handler called when focus moves to the trigger after closing.',
-            },
-            {
-              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: 'onFocusOutside',
-              type: '(event: FocusOutsideEvent) => void',
-              description: 'Event handler called when focus moves outside the bounds of the component.',
-            },
-            {
-              name: 'onInteractOutside',
-              type: '(event: PointerDownOutsideEvent | FocusOutsideEvent) => void',
-              description:
-                'Event handler called when an interaction (pointer or focus) happens outside the bounds of the component.',
-            },
-            {
-              name: 'forceMount',
-              type: 'boolean',
-              description: 'Used to force mounting when more control is needed.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

package/apps/playground-web/src/pages/web/ProgressDocs.tsx

@@ -1,70 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Progress } from '@gv-tech/ui-web';
-import { useEffect, useState } from 'react';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function ProgressDocs() {
-  const [progress, setProgress] = useState(13);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setProgress(66), 500);
-    return () => clearTimeout(timer);
-  }, []);
-
-  return (
-    <>
-      <ComponentShowcase title="Default" description="A default progress bar." code={`<Progress value={33} />`}>
-        <Progress value={progress} className="w-[60%]" />
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Progress component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/progress"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Progress
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Progress (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'value',
-              type: 'number | null',
-              description: 'The progress value.',
-            },
-            {
-              name: 'max',
-              type: 'number',
-              defaultValue: '100',
-              description: 'The maximum progress value.',
-            },
-            {
-              name: 'getValueLabel',
-              type: '(value: number, max: number) => string',
-              defaultValue: '"${value}%"',
-              description:
-                'A function to get the accessible label text representing the current value in a human-readable format.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}