@gv-tech/design-system 2.5.0 → 2.5.2

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

@@ -1,118 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Button, Input, Label } 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 InputDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default input field."
-        code={`<Input type="email" placeholder="Email" />`}
-      >
-        <div className="grid w-full max-w-sm items-center gap-1.5">
-          <Label htmlFor="email">Email</Label>
-          <Input type="email" id="email" placeholder="Email" />
-        </div>
-      </ComponentShowcase>
-
-      {
-        <ComponentShowcase
-          title="File"
-          description="A file input field."
-          code={`<div className="grid w-full max-w-sm items-center gap-1.5">
-  <Label htmlFor="picture">Picture</Label>
-  <Input id="picture" type="file" />
-</div>`}
-        >
-          <div className="grid w-full max-w-sm items-center gap-1.5">
-            <Label htmlFor="picture">Picture</Label>
-            <Input id="picture" type="file" />
-          </div>
-        </ComponentShowcase>
-      }
-
-      <ComponentShowcase
-        title="Disabled"
-        description="A disabled input field."
-        code={`<Input disabled type="email" placeholder="Email" />`}
-      >
-        <div className="grid w-full max-w-sm items-center gap-1.5">
-          <Label htmlFor="email-disabled">Email</Label>
-          <Input disabled type="email" id="email-disabled" placeholder="Email" />
-        </div>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="With Button"
-        description="An input field with a button."
-        code={`<div className="flex w-full max-w-sm items-center space-x-2">
-  <Input type="email" placeholder="Email" />
-  <Button type="submit">Subscribe</Button>
-</div>`}
-      >
-        <div className="flex w-full max-w-sm items-center space-x-2">
-          <Input type="email" placeholder="Email" />
-          <Button type="submit">Subscribe</Button>
-        </div>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">The Input component extends the standard HTML input element.</p>
-        <PropsTable
-          props={[
-            {
-              name: 'type',
-              type: 'string',
-              defaultValue: '"text"',
-              description: 'The type of input to render.',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              description: isNative ? 'Tailwind (NativeWind) classes.' : 'Additional CSS classes to apply.',
-            },
-            ...[
-              {
-                name: 'type',
-                type: 'string',
-                defaultValue: '"text"',
-                description: 'The HTML input type.',
-              },
-            ],
-            {
-              name: 'value',
-              type: 'string | number | readonly string[]',
-              description: 'The value of the input.',
-            },
-            {
-              name: 'placeholder',
-              type: 'string',
-              description: 'The placeholder text for the input.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              description: 'Whether the input is disabled.',
-            },
-            {
-              name: 'onChange',
-              type: '(event: React.ChangeEvent<HTMLInputElement>) => void',
-              description: 'Event handler called when the value changes.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,59 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Checkbox, Label } 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 LabelDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default label."
-        code={`<Label htmlFor="terms">Accept terms and conditions</Label>`}
-      >
-        <div className="flex items-center space-x-2">
-          {<Checkbox id="terms" />}
-          <Label htmlFor="terms">Accept terms and conditions</Label>
-        </div>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Label component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/label"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Label
-          </a>
-          .
-        </p>
-        <PropsTable
-          props={[
-            {
-              name: 'htmlFor',
-              type: 'string',
-              description: 'The id of the element the label is associated with.',
-            },
-            {
-              name: 'asChild',
-              type: 'boolean',
-              description: 'Change the default rendered element for the one passed as a child.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,296 +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 {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-} from '@gv-tech/ui-web';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function MenubarDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A standard menubar."
-        code={`<Menubar>
-  <MenubarMenu>
-    <MenubarTrigger>File</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>
-        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-      </MenubarItem>
-      <MenubarItem>
-        New Window <MenubarShortcut>⌘N</MenubarShortcut>
-      </MenubarItem>
-      <MenubarItem disabled>New Incognito Window</MenubarItem>
-      <MenubarSeparator />
-      <MenubarSub>
-        <MenubarSubTrigger>Share</MenubarSubTrigger>
-        <MenubarSubContent>
-          <MenubarItem>Email link</MenubarItem>
-          <MenubarItem>Messages</MenubarItem>
-          <MenubarItem>Notes</MenubarItem>
-        </MenubarSubContent>
-      </MenubarSub>
-      <MenubarSeparator />
-      <MenubarItem>
-        Print... <MenubarShortcut>⌘P</MenubarShortcut>
-      </MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-  <MenubarMenu>
-    <MenubarTrigger>Edit</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>
-        Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-      </MenubarItem>
-      <MenubarItem>
-        Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-      </MenubarItem>
-      <MenubarSeparator />
-      <MenubarSub>
-        <MenubarSubTrigger>Find</MenubarSubTrigger>
-        <MenubarSubContent>
-          <MenubarItem>Search the web</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Find...</MenubarItem>
-          <MenubarItem>Find Next</MenubarItem>
-          <MenubarItem>Find Previous</MenubarItem>
-        </MenubarSubContent>
-      </MenubarSub>
-      <MenubarSeparator />
-      <MenubarItem>Cut</MenubarItem>
-      <MenubarItem>Copy</MenubarItem>
-      <MenubarItem>Paste</MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-  <MenubarMenu>
-    <MenubarTrigger>View</MenubarTrigger>
-    <MenubarContent>
-      <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-      <MenubarCheckboxItem checked>
-        Always Show Full URLs
-      </MenubarCheckboxItem>
-      <MenubarSeparator />
-      <MenubarItem inset>
-        Reload <MenubarShortcut>⌘R</MenubarShortcut>
-      </MenubarItem>
-      <MenubarItem disabled inset>
-        Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
-      </MenubarItem>
-      <MenubarSeparator />
-      <MenubarItem inset>Toggle Fullscreen</MenubarItem>
-      <MenubarSeparator />
-      <MenubarItem inset>Hide Sidebar</MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-  <MenubarMenu>
-    <MenubarTrigger>Profiles</MenubarTrigger>
-    <MenubarContent>
-      <MenubarRadioGroup value="benoit">
-        <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-        <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-        <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-      </MenubarRadioGroup>
-      <MenubarSeparator />
-      <MenubarItem inset>Edit...</MenubarItem>
-      <MenubarSeparator />
-      <MenubarItem inset>Add Profile...</MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-</Menubar>`}
-      >
-        <Menubar>
-          <MenubarMenu>
-            <MenubarTrigger>File</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                New Window <MenubarShortcut>⌘N</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem disabled>New Incognito Window</MenubarItem>
-              <MenubarSeparator />
-              <MenubarSub>
-                <MenubarSubTrigger>Share</MenubarSubTrigger>
-                <MenubarSubContent>
-                  <MenubarItem>Email link</MenubarItem>
-                  <MenubarItem>Messages</MenubarItem>
-                  <MenubarItem>Notes</MenubarItem>
-                </MenubarSubContent>
-              </MenubarSub>
-              <MenubarSeparator />
-              <MenubarItem>
-                Print... <MenubarShortcut>⌘P</MenubarShortcut>
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-          <MenubarMenu>
-            <MenubarTrigger>Edit</MenubarTrigger>
-            <MenubarContent>
-              <MenubarItem>
-                Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-              </MenubarItem>
-              <MenubarSeparator />
-              <MenubarSub>
-                <MenubarSubTrigger>Find</MenubarSubTrigger>
-                <MenubarSubContent>
-                  <MenubarItem>Search the web</MenubarItem>
-                  <MenubarSeparator />
-                  <MenubarItem>Find...</MenubarItem>
-                  <MenubarItem>Find Next</MenubarItem>
-                  <MenubarItem>Find Previous</MenubarItem>
-                </MenubarSubContent>
-              </MenubarSub>
-              <MenubarSeparator />
-              <MenubarItem>Cut</MenubarItem>
-              <MenubarItem>Copy</MenubarItem>
-              <MenubarItem>Paste</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-          <MenubarMenu>
-            <MenubarTrigger>View</MenubarTrigger>
-            <MenubarContent>
-              <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-              <MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
-              <MenubarSeparator />
-              <MenubarItem inset>
-                Reload <MenubarShortcut>⌘R</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem disabled inset>
-                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
-              </MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem inset>Toggle Fullscreen</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem inset>Hide Sidebar</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-          <MenubarMenu>
-            <MenubarTrigger>Profiles</MenubarTrigger>
-            <MenubarContent>
-              <MenubarRadioGroup value="benoit">
-                <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-                <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-                <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-              </MenubarRadioGroup>
-              <MenubarSeparator />
-              <MenubarItem inset>Edit...</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem inset>Add Profile...</MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Menubar component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/menubar"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Menubar
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Menubar (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: 'loop',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Whether keyboard navigation should loop from last item to first, and vice versa.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">MenubarMenu</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'value',
-              type: 'string',
-              description: 'A unique value that identifies the menu.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">MenubarCheckboxItem</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">MenubarRadioGroup</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>
-    </>
-  );
-}