@auto-engineer/generate-react-client 1.21.0 → 1.23.0

package/dist/starter/src/components/ui/DesignSystem-Overview.stories.tsx

@@ -0,0 +1,738 @@
+'use client';
+
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from '@/components/ui/Avatar';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import { ButtonGroup } from '@/components/ui/ButtonGroup';
+import { Checkbox } from '@/components/ui/Checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/DropdownMenu';
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/Empty';
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from '@/components/ui/Field';
+import { Input } from '@/components/ui/Input';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from '@/components/ui/InputGroup';
+import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/Item';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/RadioGroup';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/Select';
+import { Slider } from '@/components/ui/Slider';
+import { Spinner } from '@/components/ui/Spinner';
+import { Switch } from '@/components/ui/Switch';
+import { Textarea } from '@/components/ui/Textarea';
+import {
+  ArchiveIcon,
+  ArrowLeftIcon,
+  ArrowUpIcon,
+  BadgeCheckIcon,
+  CalendarPlusIcon,
+  ChevronRightIcon,
+  ClockIcon,
+  InfoIcon,
+  ListFilterIcon,
+  MailCheckIcon,
+  MoreHorizontalIcon,
+  PlusIcon,
+  SearchIcon,
+  TagIcon,
+  Trash2Icon,
+} from 'lucide-react';
+
+function PaymentMethodDemo() {
+  return (
+    <div className="w-full max-w-sm">
+      <form>
+        <FieldGroup>
+          <FieldSet>
+            <FieldLegend>Payment Method</FieldLegend>
+            <FieldDescription>All transactions are secure and encrypted</FieldDescription>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="card-name">Name on Card</FieldLabel>
+                <Input id="card-name" placeholder="John Doe" />
+              </Field>
+              <div className="grid grid-cols-3 gap-4">
+                <Field className="col-span-2">
+                  <FieldLabel htmlFor="card-number">Card Number</FieldLabel>
+                  <Input id="card-number" placeholder="1234 5678 9012 3456" />
+                  <FieldDescription>Enter your 16-digit number.</FieldDescription>
+                </Field>
+                <Field className="col-span-1">
+                  <FieldLabel htmlFor="cvv">CVV</FieldLabel>
+                  <Input id="cvv" placeholder="123" />
+                </Field>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <Field>
+                  <FieldLabel htmlFor="exp-month">Month</FieldLabel>
+                  <Select defaultValue="">
+                    <SelectTrigger id="exp-month">
+                      <SelectValue placeholder="MM" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        {['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'].map((month) => (
+                          <SelectItem key={month} value={month}>
+                            {month}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="exp-year">Year</FieldLabel>
+                  <Select defaultValue="">
+                    <SelectTrigger id="exp-year">
+                      <SelectValue placeholder="YYYY" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        {[2024, 2025, 2026, 2027, 2028, 2029].map((year) => (
+                          <SelectItem key={year} value={String(year)}>
+                            {year}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+              </div>
+            </FieldGroup>
+          </FieldSet>
+          <FieldSeparator />
+          <FieldSet>
+            <FieldLegend>Billing Address</FieldLegend>
+            <FieldDescription>The billing address associated with your payment method</FieldDescription>
+            <FieldGroup>
+              <Field orientation="horizontal">
+                <Checkbox id="same-as-shipping" defaultChecked />
+                <FieldLabel htmlFor="same-as-shipping" className="font-normal">
+                  Same as shipping address
+                </FieldLabel>
+              </Field>
+            </FieldGroup>
+          </FieldSet>
+          <FieldSeparator />
+          <FieldSet>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="comments">Comments</FieldLabel>
+                <Textarea id="comments" placeholder="Add any additional comments" />
+              </Field>
+            </FieldGroup>
+          </FieldSet>
+          <Field orientation="horizontal">
+            <Button type="submit">Submit</Button>
+            <Button variant="outline" type="button">
+              Cancel
+            </Button>
+          </Field>
+        </FieldGroup>
+      </form>
+    </div>
+  );
+}
+
+function EmptyAvatarGroupDemo() {
+  return (
+    <Empty className="flex-none py-4">
+      <EmptyHeader>
+        <EmptyMedia>
+          <AvatarGroup className="grayscale">
+            <Avatar>
+              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+              <AvatarFallback>CN</AvatarFallback>
+            </Avatar>
+            <Avatar>
+              <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
+              <AvatarFallback>LR</AvatarFallback>
+            </Avatar>
+            <Avatar>
+              <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+              <AvatarFallback>ER</AvatarFallback>
+            </Avatar>
+          </AvatarGroup>
+        </EmptyMedia>
+        <EmptyTitle>No Team Members</EmptyTitle>
+        <EmptyDescription>Invite your team to collaborate on this project.</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button size="sm">
+          <PlusIcon className="mr-2 size-4" />
+          Invite Members
+        </Button>
+      </EmptyContent>
+    </Empty>
+  );
+}
+
+function SpinnerBadgeDemo() {
+  return (
+    <div className="flex items-center gap-2">
+      <Badge>
+        <Spinner className="mr-1" />
+        Syncing
+      </Badge>
+      <Badge variant="secondary">
+        <Spinner className="mr-1" />
+        Updating
+      </Badge>
+      <Badge variant="outline">
+        <Spinner className="mr-1" />
+        Loading
+      </Badge>
+    </div>
+  );
+}
+
+function ButtonGroupDemo() {
+  const [label, setLabel] = React.useState('personal');
+
+  return (
+    <ButtonGroup>
+      <ButtonGroup className="hidden sm:flex">
+        <Button variant="outline" size="sm" aria-label="Go Back">
+          <ArrowLeftIcon className="size-4" />
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="sm">
+          Archive
+        </Button>
+        <Button variant="outline" size="sm">
+          Report
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="sm">
+          Snooze
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" aria-label="More Options">
+              <MoreHorizontalIcon className="size-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <MailCheckIcon className="mr-2 size-4" />
+                Mark as Read
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <ArchiveIcon className="mr-2 size-4" />
+                Archive
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <ClockIcon className="mr-2 size-4" />
+                Snooze
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CalendarPlusIcon className="mr-2 size-4" />
+                Add to Calendar
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <ListFilterIcon className="mr-2 size-4" />
+                Add to List
+              </DropdownMenuItem>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  <TagIcon className="mr-2 size-4" />
+                  Label As...
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuRadioGroup value={label} onValueChange={setLabel}>
+                    <DropdownMenuRadioItem value="personal">Personal</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="work">Work</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="other">Other</DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem className="text-destructive">
+                <Trash2Icon className="mr-2 size-4" />
+                Trash
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </ButtonGroup>
+    </ButtonGroup>
+  );
+}
+
+function FieldSliderDemo() {
+  const [value, setValue] = React.useState([200, 800]);
+  return (
+    <div className="w-full max-w-xs">
+      <Field>
+        <FieldTitle>Price Range</FieldTitle>
+        <FieldDescription>
+          Set your budget range ($<span className="font-medium tabular-nums">{value[0]}</span> -{' '}
+          <span className="font-medium tabular-nums">{value[1]}</span>).
+        </FieldDescription>
+        <Slider value={value} onValueChange={setValue} max={1000} min={0} step={10} className="mt-2 w-full" />
+      </Field>
+    </div>
+  );
+}
+
+function InputGroupDemo() {
+  return (
+    <div className="grid w-full max-w-xs gap-6">
+      <InputGroup>
+        <InputGroupInput placeholder="Search..." />
+        <InputGroupAddon>
+          <SearchIcon className="size-4" />
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupInput placeholder="example.com" className="!pl-1" />
+        <InputGroupAddon>
+          <InputGroupText>https://</InputGroupText>
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton className="rounded-full" size="sm" aria-label="Info">
+            <InfoIcon className="size-4" />
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupTextarea placeholder="Ask, Search or Chat..." />
+        <InputGroupAddon align="block-end">
+          <InputGroupButton variant="outline" className="rounded-full" size="sm" aria-label="Add">
+            <PlusIcon className="size-4" />
+          </InputGroupButton>
+          <InputGroupText className="ml-auto">52% used</InputGroupText>
+          <InputGroupButton variant="default" className="rounded-full" size="sm">
+            <ArrowUpIcon className="size-4" />
+            <span className="sr-only">Send</span>
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+}
+
+function ItemDemo() {
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-6">
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Two-factor authentication</ItemTitle>
+          <ItemDescription>Verify via email or phone number.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Enable</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="sm" asChild>
+        <a href="/profile">
+          <ItemMedia>
+            <BadgeCheckIcon className="size-5" />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Your profile has been verified.</ItemTitle>
+          </ItemContent>
+          <ItemActions>
+            <ChevronRightIcon className="size-4" />
+          </ItemActions>
+        </a>
+      </Item>
+    </div>
+  );
+}
+
+function AppearanceSettingsDemo() {
+  const [gpuCount, setGpuCount] = React.useState(8);
+
+  return (
+    <FieldSet>
+      <FieldGroup>
+        <FieldSet>
+          <FieldLegend>Compute Environment</FieldLegend>
+          <FieldDescription>Select the compute environment for your cluster.</FieldDescription>
+          <RadioGroup defaultValue="kubernetes">
+            <FieldLabel htmlFor="kubernetes">
+              <Field orientation="horizontal">
+                <FieldContent>
+                  <FieldTitle>Kubernetes</FieldTitle>
+                  <FieldDescription>Run GPU workloads on a K8s configured cluster. This is the default.</FieldDescription>
+                </FieldContent>
+                <RadioGroupItem value="kubernetes" id="kubernetes" aria-label="Kubernetes" />
+              </Field>
+            </FieldLabel>
+            <FieldLabel htmlFor="vm">
+              <Field orientation="horizontal">
+                <FieldContent>
+                  <FieldTitle>Virtual Machine</FieldTitle>
+                  <FieldDescription>Access a VM configured cluster to run workloads. (Coming soon)</FieldDescription>
+                </FieldContent>
+                <RadioGroupItem value="vm" id="vm" aria-label="Virtual Machine" />
+              </Field>
+            </FieldLabel>
+          </RadioGroup>
+        </FieldSet>
+        <FieldSeparator />
+        <Field orientation="horizontal">
+          <FieldContent>
+            <FieldLabel htmlFor="number-of-gpus">Number of GPUs</FieldLabel>
+            <FieldDescription>You can add more later.</FieldDescription>
+          </FieldContent>
+          <div className="flex items-center rounded-md border">
+            <Button
+              variant="ghost"
+              size="sm"
+              type="button"
+              aria-label="Decrement"
+              className="h-9 w-10 rounded-none border-r"
+              onClick={() => setGpuCount(Math.max(1, gpuCount - 1))}
+            >
+              -
+            </Button>
+            <span className="flex h-9 w-14 items-center justify-center font-mono text-sm">{gpuCount}</span>
+            <Button
+              variant="ghost"
+              size="sm"
+              type="button"
+              aria-label="Increment"
+              className="h-9 w-10 rounded-none border-l"
+              onClick={() => setGpuCount(Math.min(99, gpuCount + 1))}
+            >
+              +
+            </Button>
+          </div>
+        </Field>
+        <FieldSeparator />
+        <Field orientation="horizontal">
+          <FieldContent>
+            <FieldLabel htmlFor="tinting">Wallpaper Tinting</FieldLabel>
+            <FieldDescription>Allow the wallpaper to be tinted.</FieldDescription>
+          </FieldContent>
+          <Switch id="tinting" defaultChecked />
+        </Field>
+      </FieldGroup>
+    </FieldSet>
+  );
+}
+
+function SpinnerEmptyDemo() {
+  return (
+    <Empty className="w-full max-w-xs py-4">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <Spinner />
+        </EmptyMedia>
+        <EmptyTitle>Processing your request</EmptyTitle>
+        <EmptyDescription>Please wait while we process your request. Do not refresh the page.</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button variant="outline" size="sm">
+          Cancel
+        </Button>
+      </EmptyContent>
+    </Empty>
+  );
+}
+
+function FieldCheckboxDemo() {
+  return (
+    <FieldLabel htmlFor="checkbox-demo">
+      <Field orientation="horizontal">
+        <Checkbox id="checkbox-demo" defaultChecked />
+        <FieldLabel htmlFor="checkbox-demo" className="font-normal">
+          I agree to the terms and conditions
+        </FieldLabel>
+      </Field>
+    </FieldLabel>
+  );
+}
+
+function Tile({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={`rounded-xl border bg-card p-6 ${className ?? ''}`}>
+      {children}
+    </div>
+  );
+}
+
+function NotionPromptDemo() {
+  return (
+    <div className="w-full">
+      <InputGroup>
+        <InputGroupAddon>
+          <Button variant="outline" size="sm" className="h-7 gap-1 px-2 text-xs">
+            <PlusIcon className="size-3" />
+            Add context
+          </Button>
+        </InputGroupAddon>
+        <InputGroupInput placeholder="Ask, search, or make anything..." />
+      </InputGroup>
+    </div>
+  );
+}
+
+function SourceSelectorDemo() {
+  return (
+    <div className="flex items-center gap-2">
+      <Button variant="ghost" size="sm" className="h-8 gap-1.5">
+        <span className="size-4 rounded border" />
+        Auto
+      </Button>
+      <Button variant="ghost" size="sm" className="h-8 gap-1.5">
+        <span className="size-4 rounded-full border" />
+        All Sources
+      </Button>
+      <Button variant="default" size="sm" className="ml-auto size-8 rounded-full p-0">
+        <ArrowUpIcon className="size-4" />
+      </Button>
+    </div>
+  );
+}
+
+function UrlBookmarkDemo() {
+  return (
+    <InputGroup>
+      <InputGroupAddon>
+        <InfoIcon className="size-4" />
+      </InputGroupAddon>
+      <InputGroupInput placeholder="https://" className="!pl-0" />
+      <InputGroupAddon align="inline-end">
+        <Button variant="ghost" size="sm" className="size-6 p-0">
+          <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+          </svg>
+        </Button>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+}
+
+function PaginationDemo() {
+  return (
+    <div className="flex items-center gap-2">
+      <ButtonGroup>
+        <Button variant="outline" size="sm" className="size-8 p-0">1</Button>
+        <Button variant="outline" size="sm" className="size-8 p-0">2</Button>
+        <Button variant="outline" size="sm" className="size-8 p-0">3</Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="sm" className="size-8 p-0">
+          <ArrowLeftIcon className="size-4" />
+        </Button>
+        <Button variant="outline" size="sm" className="size-8 p-0">
+          <ChevronRightIcon className="size-4" />
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+}
+
+function CopilotDropdownDemo() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-1.5">
+          <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+            <rect x="3" y="3" width="18" height="18" rx="2" />
+            <path d="M3 9h18" />
+          </svg>
+          Copilot
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem>Option 1</DropdownMenuItem>
+        <DropdownMenuItem>Option 2</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function SurveyOptionsDemo() {
+  return (
+    <Field className="max-w-xs">
+      <FieldTitle>How did you hear about us?</FieldTitle>
+      <FieldDescription>Select the option that best describes how you...</FieldDescription>
+      <div className="mt-3 flex flex-wrap gap-2">
+        <Button variant="outline" size="sm" className="gap-1.5">
+          <Checkbox className="size-4" defaultChecked />
+          Social Media
+        </Button>
+        <Button variant="outline" size="sm">Search Engine</Button>
+        <Button variant="outline" size="sm">Referral</Button>
+        <Button variant="outline" size="sm">Other</Button>
+      </div>
+    </Field>
+  );
+}
+
+function DesignSystemOverview() {
+  return (
+    <div className="mx-auto max-w-7xl p-6">
+      <div className="flex flex-col gap-4 sm:flex-row">
+        {/* Column 1 - wider for Payment Method */}
+        <div className="flex w-full flex-col gap-4 sm:w-auto sm:min-w-[320px] xl:min-w-[340px]">
+          <Tile>
+            <PaymentMethodDemo />
+          </Tile>
+        </div>
+
+        {/* Column 2 */}
+        <div className="flex flex-1 flex-col gap-4">
+          <Tile>
+            <EmptyAvatarGroupDemo />
+          </Tile>
+          <Tile>
+            <SpinnerBadgeDemo />
+          </Tile>
+          <Tile>
+            <NotionPromptDemo />
+          </Tile>
+          <Tile>
+            <InputGroupDemo />
+          </Tile>
+          <Tile>
+            <FieldSliderDemo />
+          </Tile>
+        </div>
+
+        {/* Column 3 */}
+        <div className="hidden flex-1 flex-col gap-4 lg:flex">
+          <Tile>
+            <UrlBookmarkDemo />
+          </Tile>
+          <Tile>
+            <ItemDemo />
+          </Tile>
+          <Tile>
+            <SourceSelectorDemo />
+          </Tile>
+          <Tile>
+            <AppearanceSettingsDemo />
+          </Tile>
+        </div>
+
+        {/* Column 4 */}
+        <div className="hidden flex-1 flex-col gap-4 xl:flex">
+          <Tile>
+            <ButtonGroupDemo />
+          </Tile>
+          <Tile>
+            <FieldCheckboxDemo />
+          </Tile>
+          <Tile>
+            <PaginationDemo />
+          </Tile>
+          <Tile>
+            <CopilotDropdownDemo />
+          </Tile>
+          <Tile>
+            <SurveyOptionsDemo />
+          </Tile>
+          <Tile>
+            <SpinnerEmptyDemo />
+          </Tile>
+        </div>
+      </div>
+
+      {/* Overflow for column 3 on small/medium screens */}
+      <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:hidden">
+        <Tile>
+          <UrlBookmarkDemo />
+        </Tile>
+        <Tile>
+          <ItemDemo />
+        </Tile>
+        <Tile>
+          <SourceSelectorDemo />
+        </Tile>
+        <Tile>
+          <AppearanceSettingsDemo />
+        </Tile>
+      </div>
+
+      {/* Overflow for column 4 on medium/large screens */}
+      <div className="mt-4 grid grid-cols-2 gap-4 lg:grid-cols-3 xl:hidden">
+        <Tile>
+          <ButtonGroupDemo />
+        </Tile>
+        <Tile>
+          <FieldCheckboxDemo />
+        </Tile>
+        <Tile>
+          <PaginationDemo />
+        </Tile>
+        <Tile>
+          <CopilotDropdownDemo />
+        </Tile>
+        <Tile>
+          <SurveyOptionsDemo />
+        </Tile>
+        <Tile>
+          <SpinnerEmptyDemo />
+        </Tile>
+      </div>
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: 'Design System/Overview',
+  component: DesignSystemOverview,
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => <DesignSystemOverview />,
+};