@gv-tech/design-system 2.3.0 → 2.5.0

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

@@ -0,0 +1,129 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { Button } from '@gv-tech/ui-web';
+import { ChevronRight, Loader2, Mail } from 'lucide-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 ButtonDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Variants"
+        description="The button comes in 6 different variants."
+        code={`<Button variant="default">Default</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="destructive">Destructive</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="link">Link</Button>`}
+      >
+        <Button variant="default">Default</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="destructive">Destructive</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="link">Link</Button>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Sizes"
+        description="Buttons come in default, small, large, and icon sizes."
+        code={`<Button size="default">Default</Button>
+<Button size="sm">Small</Button>
+<Button size="lg">Large</Button>
+<Button size="icon"><ChevronRight className="h-4 w-4" /></Button>`}
+      >
+        <Button size="default">Default</Button>
+        <Button size="sm">Small</Button>
+        <Button size="lg">Large</Button>
+        <Button size="icon">
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="With Icon"
+        description="You can add icons to buttons for additional context."
+        code={`<Button>
+  <Mail className="mr-2 h-4 w-4" /> Login with Email
+</Button>`}
+      >
+        <Button>
+          <Mail className="mr-2 h-4 w-4" /> Login with Email
+        </Button>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Loading State"
+        description="Use the disabled attribute with a spinner for loading states."
+        code={`<Button disabled>
+  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+  Please wait
+</Button>`}
+      >
+        <Button disabled>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          Please wait
+        </Button>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Disabled"
+        description="Buttons can be disabled to prevent interaction."
+        code={`<Button disabled>Disabled</Button>`}
+      >
+        <Button disabled>Disabled</Button>
+      </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <PropsTable
+          props={[
+            {
+              name: 'variant',
+              type: '"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"',
+              defaultValue: '"default"',
+              description: 'The visual style of the button.',
+            },
+            {
+              name: 'size',
+              type: '"default" | "sm" | "lg" | "icon"',
+              defaultValue: '"default"',
+              description: 'The size of the button.',
+            },
+            {
+              name: 'asChild',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'Whether to render as a child component (delegation).',
+            },
+            {
+              name: 'onClick',
+              type: 'MouseEventHandler',
+              description: 'Web click event handler.',
+            },
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional CSS classes to apply.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'Whether the button is disabled.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,78 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { Calendar } from '@gv-tech/ui-web';
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
+import * as React from 'react';
+
+// @ts-ignore
+
+const isNative = false as boolean;
+
+// @ts-ignore
+
+const platform = 'web' as string;
+
+export function CalendarDocs() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date());
+
+  return (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A basic calendar for date selection."
+        code={`const [date, setDate] = React.useState<Date | undefined>(new Date());
+
+<Calendar
+  mode="single"
+  selected={date}
+  onSelect={setDate}
+  className="rounded-md border"
+/>`}
+      >
+        <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
+      </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Calendar component is built on top of{' '}
+          <a href="https://react-day-picker.js.org/" className="underline" target="_blank" rel="noreferrer">
+            React Day Picker
+          </a>
+          .
+        </p>
+        <PropsTable
+          props={[
+            {
+              name: 'mode',
+              type: '"single" | "multiple" | "range" | "default"',
+              defaultValue: '"default"',
+              description: 'The selection mode of the calendar.',
+            },
+            {
+              name: 'selected',
+              type: 'Date | Date[] | DateRange | undefined',
+              description: 'The selected date(s).',
+            },
+            {
+              name: 'onSelect',
+              type: '(date: any) => void',
+              description: 'Event handler called when a date is selected.',
+            },
+            {
+              name: 'showOutsideDays',
+              type: 'boolean',
+              defaultValue: 'true',
+              description: 'Whether to show days from the previous and next months.',
+            },
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional CSS classes to apply.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,115 @@
+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 {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+} from '@gv-tech/ui-web';
+
+// @ts-ignore
+
+const isNative = false as boolean;
+
+// @ts-ignore
+
+const platform = 'web' 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>`}
+      >
+        <Card className="w-[350px]">
+          <CardHeader>
+            <CardTitle>Card Title</CardTitle>
+            <CardDescription>Card Description</CardDescription>
+          </CardHeader>
+          <CardContent>Card Content goes here.</CardContent>
+        </Card>
+      </ComponentShowcase>
+
+      <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>`}
+      >
+        <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>
+      </ComponentShowcase>
+
+      <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/web/CarouselDocs.tsx

@@ -0,0 +1,176 @@
+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 {
+  Card,
+  CardContent,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@gv-tech/ui-web';
+
+// @ts-ignore
+
+const isNative = false as boolean;
+
+// @ts-ignore
+
+const platform = 'web' 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>`}
+      >
+        <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>
+
+      <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>`}
+      >
+        <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>
+
+      <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>`}
+      >
+        <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>
+      </ComponentShowcase>
+
+      <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/web/ChartDocs.tsx

@@ -0,0 +1,151 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@gv-tech/ui-web';
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
+/* 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;
+
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: '#2563eb',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: '#60a5fa',
+  },
+};
+
+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>`}
+      >
+        <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>
+      </ComponentShowcase>
+
+      <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>
+    </>
+  );
+}