@a2v2ai/uikit 0.0.3 → 0.0.5

package/AlertDialog/AlertDialog.stories.tsx

@@ -1,665 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Button } from "../Button/Button"
-import { Input } from "../Input/Input"
-import { Typography } from "../Typography/Typography"
-import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogBody,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from "./AlertDialog"
-
-const meta: Meta<typeof AlertDialogContent> = {
-  title: "Components/AlertDialog",
-  component: AlertDialogContent,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    type: {
-      control: "select",
-      options: ["desktop", "mobile"],
-      description: "The size type of the alert dialog (desktop or mobile)",
-    },
-    scrollable: {
-      control: "boolean",
-      description: "Whether the alert dialog content is scrollable",
-    },
-    showCloseButton: {
-      control: "boolean",
-      description: "Whether to show the close button",
-    },
-    closeButtonVariant: {
-      control: "select",
-      options: ["default", "icon-button"],
-      description: "The style variant of the close button",
-    },
-    loading: {
-      control: "boolean",
-      description: "Show a loading spinner overlay on the alert dialog",
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof AlertDialogContent>
-
-export const Default: Story = {
-  render: (args) => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button>Open Alert Dialog</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent {...args}>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Alert Dialog Title</AlertDialogTitle>
-        </AlertDialogHeader>
-        <AlertDialogBody>
-          <AlertDialogDescription>
-            This is a description of the alert dialog content. You can add any content here.
-          </AlertDialogDescription>
-        </AlertDialogBody>
-        <AlertDialogFooter>
-          <AlertDialogCancel asChild>
-            <Button variant="outline">Cancel</Button>
-          </AlertDialogCancel>
-          <AlertDialogAction asChild>
-            <Button>Confirm</Button>
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-  args: {
-    type: "desktop",
-    scrollable: false,
-    showCloseButton: true,
-    closeButtonVariant: "default",
-  },
-}
-
-export const Mobile: Story = {
-  render: (args) => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button>Open Mobile Alert Dialog</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent {...args}>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Mobile Alert Dialog</AlertDialogTitle>
-        </AlertDialogHeader>
-        <AlertDialogBody>
-          <AlertDialogDescription>
-            This is a mobile-sized alert dialog with narrower width.
-          </AlertDialogDescription>
-        </AlertDialogBody>
-        <AlertDialogFooter>
-          <AlertDialogCancel asChild>
-            <Button variant="outline">Cancel</Button>
-          </AlertDialogCancel>
-          <AlertDialogAction asChild>
-            <Button>Confirm</Button>
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-  args: {
-    type: "mobile",
-    showCloseButton: true,
-  },
-}
-
-export const Scrollable: Story = {
-  render: (args) => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button>Open Scrollable Alert Dialog</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent {...args}>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Scrollable Content</AlertDialogTitle>
-        </AlertDialogHeader>
-        <AlertDialogBody className="max-h-[300px] overflow-y-auto">
-          <div className="space-y-4">
-            {Array.from({ length: 20 }).map((_, i) => (
-              <p key={i} className="text-sm text-grey-600">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Paragraph {i + 1}.
-              </p>
-            ))}
-          </div>
-        </AlertDialogBody>
-        <AlertDialogFooter>
-          <AlertDialogCancel asChild>
-            <Button variant="outline">Cancel</Button>
-          </AlertDialogCancel>
-          <AlertDialogAction asChild>
-            <Button>Confirm</Button>
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-  args: {
-    type: "desktop",
-    scrollable: true,
-  },
-}
-
-export const WithForm: Story = {
-  render: (args) => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button>Upgrade Subscription</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent {...args}>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Alert Dialog title</AlertDialogTitle>
-        </AlertDialogHeader>
-        <AlertDialogBody>
-          <Typography variant="h4" className="mb-2">Upgrade your subscription</Typography>
-          <Typography variant="body2" color="grey-500" className="mb-6">
-            You have run out of credits. To continue using the platform, please upgrade your subscription.
-          </Typography>
-          <div className="space-y-4">
-            <div>
-              <Typography variant="caption" color="grey-600" className="mb-1.5 block uppercase tracking-wider">Card number</Typography>
-              <Input placeholder="1234 1234 1234 1234" />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <Typography variant="caption" color="grey-600" className="mb-1.5 block uppercase tracking-wider">Expiry</Typography>
-                <Input placeholder="MM/YY" />
-              </div>
-              <div>
-                <Typography variant="caption" color="grey-600" className="mb-1.5 block uppercase tracking-wider">CVC</Typography>
-                <Input placeholder="CVC" />
-              </div>
-            </div>
-          </div>
-        </AlertDialogBody>
-        <AlertDialogFooter>
-          <AlertDialogCancel asChild>
-            <Button variant="outline">Cancel</Button>
-          </AlertDialogCancel>
-          <AlertDialogAction asChild>
-            <Button>Confirm</Button>
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-  args: {
-    type: "desktop",
-    showCloseButton: true,
-  },
-}
-
-export const IconButtonClose: Story = {
-  render: (args) => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button>Open with Icon Button Close</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent {...args}>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Icon Button Close</AlertDialogTitle>
-        </AlertDialogHeader>
-        <AlertDialogBody>
-          <AlertDialogDescription>
-            This alert dialog uses an icon button style for the close button.
-          </AlertDialogDescription>
-        </AlertDialogBody>
-        <AlertDialogFooter>
-          <AlertDialogCancel asChild>
-            <Button variant="outline">Cancel</Button>
-          </AlertDialogCancel>
-          <AlertDialogAction asChild>
-            <Button>Confirm</Button>
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-  args: {
-    type: "desktop",
-    showCloseButton: true,
-    closeButtonVariant: "icon-button",
-  },
-}
-
-export const CloseOnly: Story = {
-  render: (args) => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button>Open Close Only Alert Dialog</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent {...args}>
-        <AlertDialogBody className="pt-8">
-          <AlertDialogDescription>
-            This alert dialog has only a close button in the header, no title.
-          </AlertDialogDescription>
-        </AlertDialogBody>
-        <AlertDialogFooter>
-          <AlertDialogCancel asChild>
-            <Button variant="outline">Cancel</Button>
-          </AlertDialogCancel>
-          <AlertDialogAction asChild>
-            <Button>Confirm</Button>
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-  args: {
-    type: "desktop",
-    showCloseButton: true,
-  },
-}
-
-// Footer Variants
-export const FooterButtonsRight: Story = {
-  render: (args) => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button>2 Buttons Right</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent {...args}>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Footer: 2 Buttons Right</AlertDialogTitle>
-        </AlertDialogHeader>
-        <AlertDialogBody>
-          <AlertDialogDescription>
-            Footer with two buttons aligned to the right.
-          </AlertDialogDescription>
-        </AlertDialogBody>
-        <AlertDialogFooter type="buttons-right">
-          <AlertDialogCancel asChild>
-            <Button variant="outline">Label</Button>
-          </AlertDialogCancel>
-          <AlertDialogAction asChild>
-            <Button>Label</Button>
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-  args: {
-    type: "desktop",
-    showCloseButton: true,
-  },
-}
-
-export const FooterFullWidth: Story = {
-  render: (args) => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button>2 Full-width Buttons</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent {...args}>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Footer: 2 Full-width</AlertDialogTitle>
-        </AlertDialogHeader>
-        <AlertDialogBody>
-          <AlertDialogDescription>
-            Footer with two full-width buttons.
-          </AlertDialogDescription>
-        </AlertDialogBody>
-        <AlertDialogFooter type="full-width">
-          <AlertDialogCancel asChild>
-            <Button variant="outline">Label</Button>
-          </AlertDialogCancel>
-          <AlertDialogAction asChild>
-            <Button>Label</Button>
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-  args: {
-    type: "desktop",
-    showCloseButton: true,
-  },
-}
-
-export const FooterSingleFullWidth: Story = {
-  render: (args) => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button>Single Full-width Button</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent {...args}>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Footer: Single Full-width</AlertDialogTitle>
-        </AlertDialogHeader>
-        <AlertDialogBody>
-          <AlertDialogDescription>
-            Footer with a single full-width button.
-          </AlertDialogDescription>
-        </AlertDialogBody>
-        <AlertDialogFooter type="single-full-width">
-          <AlertDialogAction asChild>
-            <Button>Label</Button>
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-  args: {
-    type: "desktop",
-    showCloseButton: true,
-  },
-}
-
-// Loading State
-export const Loading: Story = {
-  render: (args) => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button>Open Loading Alert Dialog</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent {...args}>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Processing...</AlertDialogTitle>
-        </AlertDialogHeader>
-        <AlertDialogBody>
-          <AlertDialogDescription>
-            Please wait while we process your request.
-          </AlertDialogDescription>
-        </AlertDialogBody>
-        <AlertDialogFooter>
-          <AlertDialogCancel asChild>
-            <Button variant="outline" disabled>Cancel</Button>
-          </AlertDialogCancel>
-          <AlertDialogAction asChild>
-            <Button disabled>Confirm</Button>
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
-  args: {
-    type: "desktop",
-    loading: true,
-  },
-}
-
-// All Variants Story
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ overflowX: "auto" }}>
-      <div style={{ minWidth: "fit-content" }}>
-        <div className="space-y-8">
-          {/* AlertDialog Types */}
-          <div>
-            <Typography variant="h4" className="mb-4">Alert Dialog Types</Typography>
-            <div className="flex gap-4 flex-wrap">
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline">Desktop</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent type="desktop">
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Desktop Alert Dialog</AlertDialogTitle>
-                  </AlertDialogHeader>
-                  <AlertDialogBody>
-                    <AlertDialogDescription>This is a desktop-sized alert dialog (max-width: 640px).</AlertDialogDescription>
-                  </AlertDialogBody>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel asChild>
-                      <Button variant="outline">Cancel</Button>
-                    </AlertDialogCancel>
-                    <AlertDialogAction asChild>
-                      <Button>Confirm</Button>
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline">Desktop Scrollable</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent type="desktop" scrollable>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Desktop Scrollable</AlertDialogTitle>
-                  </AlertDialogHeader>
-                  <AlertDialogBody className="max-h-[200px] overflow-y-auto">
-                    {Array.from({ length: 10 }).map((_, i) => (
-                      <p key={i} className="text-sm text-grey-600 mb-2">
-                        Lorem ipsum dolor sit amet. Paragraph {i + 1}.
-                      </p>
-                    ))}
-                  </AlertDialogBody>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel asChild>
-                      <Button variant="outline">Cancel</Button>
-                    </AlertDialogCancel>
-                    <AlertDialogAction asChild>
-                      <Button>Confirm</Button>
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline">Mobile</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent type="mobile">
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Mobile Alert Dialog</AlertDialogTitle>
-                  </AlertDialogHeader>
-                  <AlertDialogBody>
-                    <AlertDialogDescription>This is a mobile-sized alert dialog (max-width: 320px).</AlertDialogDescription>
-                  </AlertDialogBody>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel asChild>
-                      <Button variant="outline">Cancel</Button>
-                    </AlertDialogCancel>
-                    <AlertDialogAction asChild>
-                      <Button>Confirm</Button>
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline">Mobile Scrollable</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent type="mobile" scrollable>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Mobile Scrollable</AlertDialogTitle>
-                  </AlertDialogHeader>
-                  <AlertDialogBody className="max-h-[200px] overflow-y-auto">
-                    {Array.from({ length: 10 }).map((_, i) => (
-                      <p key={i} className="text-sm text-grey-600 mb-2">
-                        Lorem ipsum. Paragraph {i + 1}.
-                      </p>
-                    ))}
-                  </AlertDialogBody>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel asChild>
-                      <Button variant="outline">Cancel</Button>
-                    </AlertDialogCancel>
-                    <AlertDialogAction asChild>
-                      <Button>Confirm</Button>
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            </div>
-          </div>
-
-          {/* Header Types */}
-          <div>
-            <Typography variant="h4" className="mb-4">Header Types</Typography>
-            <div className="flex gap-4 flex-wrap">
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline">With Title</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent type="desktop">
-                  <AlertDialogHeader type="header">
-                    <AlertDialogTitle>Title</AlertDialogTitle>
-                  </AlertDialogHeader>
-                  <AlertDialogBody>
-                    <AlertDialogDescription>Header with title and close button.</AlertDialogDescription>
-                  </AlertDialogBody>
-                  <AlertDialogFooter>
-                    <AlertDialogAction asChild>
-                      <Button>Confirm</Button>
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline">Close Only</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent type="desktop">
-                  <AlertDialogBody className="pt-8">
-                    <AlertDialogDescription>Header with only close button, no title.</AlertDialogDescription>
-                  </AlertDialogBody>
-                  <AlertDialogFooter>
-                    <AlertDialogAction asChild>
-                      <Button>Confirm</Button>
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline">Icon Button Close</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent type="desktop" closeButtonVariant="icon-button">
-                  <AlertDialogHeader type="header">
-                    <AlertDialogTitle>Title</AlertDialogTitle>
-                  </AlertDialogHeader>
-                  <AlertDialogBody>
-                    <AlertDialogDescription>Header with icon button style close.</AlertDialogDescription>
-                  </AlertDialogBody>
-                  <AlertDialogFooter>
-                    <AlertDialogAction asChild>
-                      <Button>Confirm</Button>
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            </div>
-          </div>
-
-          {/* Footer Types */}
-          <div>
-            <Typography variant="h4" className="mb-4">Footer Types</Typography>
-            <div className="flex gap-4 flex-wrap">
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline">2 Buttons Right</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent type="desktop">
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>2 Buttons Right</AlertDialogTitle>
-                  </AlertDialogHeader>
-                  <AlertDialogBody>
-                    <AlertDialogDescription>Footer with two buttons aligned right.</AlertDialogDescription>
-                  </AlertDialogBody>
-                  <AlertDialogFooter type="buttons-right">
-                    <AlertDialogCancel asChild>
-                      <Button variant="outline">Label</Button>
-                    </AlertDialogCancel>
-                    <AlertDialogAction asChild>
-                      <Button>Label</Button>
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline">2 Full-width</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent type="desktop">
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>2 Full-width Buttons</AlertDialogTitle>
-                  </AlertDialogHeader>
-                  <AlertDialogBody>
-                    <AlertDialogDescription>Footer with two full-width buttons.</AlertDialogDescription>
-                  </AlertDialogBody>
-                  <AlertDialogFooter type="full-width">
-                    <AlertDialogCancel asChild>
-                      <Button variant="outline">Label</Button>
-                    </AlertDialogCancel>
-                    <AlertDialogAction asChild>
-                      <Button>Label</Button>
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline">Single Full-width</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent type="desktop">
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Single Full-width</AlertDialogTitle>
-                  </AlertDialogHeader>
-                  <AlertDialogBody>
-                    <AlertDialogDescription>Footer with single full-width button.</AlertDialogDescription>
-                  </AlertDialogBody>
-                  <AlertDialogFooter type="single-full-width">
-                    <AlertDialogAction asChild>
-                      <Button>Label</Button>
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            </div>
-          </div>
-
-          {/* Special States */}
-          <div>
-            <Typography variant="h4" className="mb-4">Special States</Typography>
-            <div className="flex gap-4 flex-wrap">
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button variant="outline">Loading State</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent type="desktop" loading>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Processing...</AlertDialogTitle>
-                  </AlertDialogHeader>
-                  <AlertDialogBody>
-                    <AlertDialogDescription>Please wait while we process your request.</AlertDialogDescription>
-                  </AlertDialogBody>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel asChild>
-                      <Button variant="outline" disabled>Cancel</Button>
-                    </AlertDialogCancel>
-                    <AlertDialogAction asChild>
-                      <Button disabled>Confirm</Button>
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    layout: "padded",
-  },
-}