@gv-tech/design-system 2.4.0 → 2.5.0

package/apps/playground-web/src/pages/native/CardDocs.tsx

@@ -0,0 +1,75 @@
+import { PropsTable } from '@/components/docs/PropsTable';
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+
+// @ts-ignore
+
+const isNative = true as boolean;
+
+// @ts-ignore
+
+const platform = 'native' as string;
+
+export function CardDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Basic Card"
+        description="A simple card with header and content."
+        code={`<Card className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content goes here.</p>
+  </CardContent>
+</Card>`}
+      />
+
+      <ComponentShowcase
+        title="Card with Footer"
+        description="Cards can include a footer for actions."
+        code={`<Card className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Create Project</CardTitle>
+    <CardDescription>Deploy your new project in one-click.</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <form>
+      <div className="grid w-full items-center gap-4">
+        <div className="flex flex-col space-y-1.5">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" placeholder="Name of your project" />
+        </div>
+      </div>
+    </form>
+  </CardContent>
+  <CardFooter className="flex justify-between">
+    <Button variant="outline">Cancel</Button>
+    <Button>Deploy</Button>
+  </CardFooter>
+</Card>`}
+      />
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <h4 className="text-lg font-medium mt-6">Card (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'className',
+              type: 'string',
+              description: isNative ? 'Tailwind (NativeWind) classes.' : 'Additional CSS classes.',
+            },
+          ]}
+        />
+
+        <p className="text-sm text-muted-foreground mt-4">
+          CardHeader, CardTitle, CardDescription, CardContent, and CardFooter also accept <code>className</code> and
+          other standard {'HTML attributes'}.
+        </p>
+      </div>
+    </>
+  );
+}

package/apps/playground-web/src/pages/native/CarouselDocs.tsx

@@ -0,0 +1,113 @@
+import { PropsTable } from '@/components/docs/PropsTable';
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+
+// @ts-ignore
+
+const isNative = true as boolean;
+
+// @ts-ignore
+
+const platform = 'native' as string;
+
+export function CarouselDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A basic carousel with numbered cards."
+        code={`<Carousel className="w-full max-w-xs">
+  <CarouselContent>
+    {Array.from({ length: 5 }).map((_, index) => (
+      <CarouselItem key={index}>
+        <div className="p-1">
+          <Card>
+            <CardContent className="flex aspect-square items-center justify-center p-6">
+              <span className="text-4xl font-semibold">{index + 1}</span>
+            </CardContent>
+          </Card>
+        </div>
+      </CarouselItem>
+    ))}
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>`}
+      />
+
+      <ComponentShowcase
+        title="Partial Visible Items"
+        description="A carousel showing partial items using basis classes."
+        code={`<Carousel className="w-full max-w-sm" opts={{ align: "start" }}>
+  <CarouselContent>
+    {Array.from({ length: 5 }).map((_, index) => (
+      <CarouselItem key={index} className="basis-1/3">
+        <div className="p-1">
+          <Card>
+            <CardContent className="flex aspect-square items-center justify-center p-6">
+              <span className="text-2xl font-semibold">{index + 1}</span>
+            </CardContent>
+          </Card>
+        </div>
+      </CarouselItem>
+    ))}
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>`}
+      />
+
+      <ComponentShowcase
+        title="Orientation"
+        description="A vertically oriented carousel."
+        code={`<Carousel orientation="vertical" className="w-full max-w-xs" opts={{ align: "start" }}>
+  <CarouselContent className="-mt-1 h-[200px]">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <CarouselItem key={index} className="pt-1 md:basis-1/2">
+        <div className="p-1">
+          <Card>
+            <CardContent className="flex items-center justify-center p-6">
+              <span className="text-3xl font-semibold">{index + 1}</span>
+            </CardContent>
+          </Card>
+        </div>
+      </CarouselItem>
+    ))}
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>`}
+      />
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <h4 className="text-lg font-medium mt-6">Carousel (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'opts',
+              type: 'CarouselOptions',
+              description: 'Options passed to the Embla Carousel instance.',
+            },
+            {
+              name: 'plugins',
+              type: 'CarouselPlugin',
+              description: 'Plugins passed to the Embla Carousel instance.',
+            },
+            {
+              name: 'orientation',
+              type: '"horizontal" | "vertical"',
+              defaultValue: '"horizontal"',
+              description: 'The orientation of the carousel.',
+            },
+            {
+              name: 'setApi',
+              type: '(api: CarouselApi) => void',
+              description: 'Callback to get the Embla Carousel API instance.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

package/apps/playground-web/src/pages/native/ChartDocs.tsx

@@ -0,0 +1,115 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+// @ts-ignore
+
+const isNative = true as boolean;
+
+// @ts-ignore
+
+const platform = 'native' as string;
+
+export function ChartDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Bar Chart"
+        description="A simple bar chart."
+        code={`<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+  <BarChart accessibilityLayer data={chartData}>
+    <CartesianGrid vertical={false} />
+    <XAxis
+      dataKey="month"
+      tickLine={false}
+      tickMargin={10}
+      axisLine={false}
+      tickFormatter={(value) => value.slice(0, 3)}
+    />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+  </BarChart>
+</ChartContainer>`}
+      />
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Chart component is a wrapper around{' '}
+          <a href="https://recharts.org/" className="underline" target="_blank" rel="noreferrer">
+            Recharts
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">ChartContainer</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'config',
+              type: 'ChartConfig',
+              required: true,
+              description: 'The configuration for the chart themes and labels.',
+            },
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional class names to apply.',
+            },
+            {
+              name: 'children',
+              type: 'ReactNode',
+              description: 'The Recharts component to render.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">ChartTooltip</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'content',
+              type: 'ReactNode',
+              description: 'The content to render in the tooltip.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">ChartTooltipContent</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'hideLabel',
+              type: 'boolean',
+              description: 'Whether to hide the label in the tooltip.',
+            },
+            {
+              name: 'hideIndicator',
+              type: 'boolean',
+              description: 'Whether to hide the indicator in the tooltip.',
+            },
+            {
+              name: 'indicator',
+              type: '"line" | "dot" | "dashed"',
+              defaultValue: '"dot"',
+              description: 'The style of the indicator.',
+            },
+            {
+              name: 'nameKey',
+              type: 'string',
+              description: 'The key to use for the name in the tooltip.',
+            },
+            {
+              name: 'labelKey',
+              type: 'string',
+              description: 'The key to use for the label in the tooltip.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

package/apps/playground-web/src/pages/native/CheckboxDocs.tsx

@@ -0,0 +1,38 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+// @ts-ignore
+
+const isNative = true as boolean;
+
+// @ts-ignore
+
+const platform = 'native' as string;
+
+export function CheckboxDocs() {
+  return (
+    <>
+      <ComponentShowcase title="Default" description="A basic checkbox." code={`<Checkbox id="terms" />`} />
+
+      <ComponentShowcase
+        title="With Label"
+        description="A checkbox with a label."
+        code={`<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">Accept terms and conditions</Label>
+</div>`}
+      />
+
+      <ComponentShowcase
+        title="Disabled"
+        description="A disabled checkbox."
+        code={`<div className="flex items-center space-x-2">
+  <Checkbox id="terms-disabled" disabled />
+  <Label htmlFor="terms-disabled">Accept terms and conditions</Label>
+</div>`}
+      />
+    </>
+  );
+}

package/apps/playground-web/src/pages/native/CollapsibleDocs.tsx

@@ -0,0 +1,89 @@
+import { PropsTable } from '@/components/docs/PropsTable';
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+
+// @ts-ignore
+
+const isNative = true as boolean;
+
+// @ts-ignore
+
+const platform = 'native' as string;
+
+export function CollapsibleDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A collapsible panel with animation."
+        code={`
+
+<Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
+  <div className="flex items-center justify-between space-x-4 px-4">
+    <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
+    <CollapsibleTrigger asChild>
+      <Button variant="ghost" size="sm" className="w-9 p-0">
+        <ChevronsUpDown className="h-4 w-4" />
+      </Button>
+    </CollapsibleTrigger>
+  </div>
+  <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
+  <CollapsibleContent className="space-y-2">
+    <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
+    <div className="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
+  </CollapsibleContent>
+</Collapsible>`}
+      />
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Collapsible component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/collapsible"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Collapsible
+          </a>
+          .
+        </p>
+        <PropsTable
+          props={[
+            {
+              name: 'open',
+              type: 'boolean',
+              description: 'The controlled open state of the collapsible.',
+            },
+            {
+              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: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with the collapsible.',
+            },
+          ]}
+        />
+        <h4 className="text-lg font-medium mt-6">CollapsibleContent</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'forceMount',
+              type: 'boolean',
+              description: 'Used to force mounting when more control is needed.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

package/apps/playground-web/src/pages/native/CommandDocs.tsx

@@ -0,0 +1,170 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+// @ts-ignore
+
+const isNative = true as boolean;
+
+// @ts-ignore
+
+const platform = 'native' as string;
+
+export function CommandDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A command palette with search and groups."
+        code={`<Command className="rounded-lg border shadow-md md:min-w-[450px]">
+  <CommandInput placeholder="Type a command or search..." />
+  <CommandList>
+    <CommandEmpty>No results found.</CommandEmpty>
+    <CommandGroup heading="Suggestions">
+      <CommandItem>
+        <Calendar className="mr-2 h-4 w-4" />
+        <span>Calendar</span>
+      </CommandItem>
+      <CommandItem>
+        <Smile className="mr-2 h-4 w-4" />
+        <span>Search Emoji</span>
+      </CommandItem>
+      <CommandItem>
+        <Calculator className="mr-2 h-4 w-4" />
+        <span>Calculator</span>
+      </CommandItem>
+    </CommandGroup>
+    <CommandSeparator />
+    <CommandGroup heading="Settings">
+      <CommandItem>
+        <User className="mr-2 h-4 w-4" />
+        <span>Profile</span>
+        <CommandShortcut>⌘P</CommandShortcut>
+      </CommandItem>
+      <CommandItem>
+        <CreditCard className="mr-2 h-4 w-4" />
+        <span>Billing</span>
+        <CommandShortcut>⌘B</CommandShortcut>
+      </CommandItem>
+      <CommandItem>
+        <Settings className="mr-2 h-4 w-4" />
+        <span>Settings</span>
+        <CommandShortcut>⌘S</CommandShortcut>
+      </CommandItem>
+    </CommandGroup>
+  </CommandList>
+</Command>`}
+      />
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Command component is built on top of{' '}
+          <a href="https://cmdk.paco.me/" className="underline" target="_blank" rel="noreferrer">
+            cmdk
+          </a>
+          .
+        </p>
+        <h4 className="text-lg font-medium mt-6">Command (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'label',
+              type: 'string',
+              description: 'Accessible label for the command menu.',
+            },
+            {
+              name: 'shouldFilter',
+              type: 'boolean',
+              defaultValue: 'true',
+              description: 'Whether to filter items based on input.',
+            },
+            {
+              name: 'filter',
+              type: '(value: string, search: string) => number',
+              description: 'Custom filter function.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'Controlled value of the selected item.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string) => void',
+              description: 'Event handler called when value changes.',
+            },
+            {
+              name: 'loop',
+              type: 'boolean',
+              description: 'Whether to loop selection when navigating with keys.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">CommandInput</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'placeholder',
+              type: 'string',
+              description: 'Placeholder text for the input.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'Controlled value of the input.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string) => void',
+              description: 'Event handler called when input value changes.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">CommandList</h4>
+        <p className="text-sm text-muted-foreground">Contains items and groups.</p>
+
+        <h4 className="text-lg font-medium mt-6">CommandItem</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'Whether the item is disabled.',
+            },
+            {
+              name: 'onSelect',
+              type: '(value: string) => void',
+              description: 'Event handler called when the item is selected.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'Unique value for the item. Defaults to text content if not provided.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">CommandGroup</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'heading',
+              type: 'ReactNode',
+              description: 'Heading for the group.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'Unique value for the group.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}