diff --git a/src/components/ui/Alert.stories.tsx b/src/components/ui/Alert.stories.tsx index c8df6b2..438524e 100644 --- a/src/components/ui/Alert.stories.tsx +++ b/src/components/ui/Alert.stories.tsx @@ -1,5 +1,29 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { Alert, AlertTitle, AlertDescription } from "./alert"; +import React from "react"; +import { + AlertTriangle, + CheckCircle, + Info as InfoIcon, + X, + XCircle, +} from "lucide-react"; +import { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert"; +import { Button } from "./button"; + +const VARIANT_ICONS = { + default: InfoIcon, + destructive: XCircle, + success: CheckCircle, + warning: AlertTriangle, + info: InfoIcon, +} as const; + +type AlertVariant = keyof typeof VARIANT_ICONS; + +function AlertIcon({ variant }: { variant: AlertVariant }) { + const Icon = VARIANT_ICONS[variant] ?? InfoIcon; + return ; +} const meta = { title: "UI/Alert", @@ -19,8 +43,9 @@ export default meta; type Story = StoryObj; export const Default: Story = { - render: () => ( - + args: { variant: "default" }, + render: (args) => ( + Title Description text goes here. @@ -28,8 +53,9 @@ export const Default: Story = { }; export const Destructive: Story = { - render: () => ( - + args: { variant: "destructive" }, + render: (args) => ( + Error Something went wrong. @@ -37,21 +63,19 @@ export const Destructive: Story = { }; export const Success: Story = { - args: { - variant: "default" - }, - - render: () => ( - + args: { variant: "success" }, + render: (args) => ( + Success Your changes have been saved. - ) + ), }; export const Warning: Story = { - render: () => ( - + args: { variant: "warning" }, + render: (args) => ( + Warning Please review before continuing. @@ -59,10 +83,90 @@ export const Warning: Story = { }; export const Info: Story = { - render: () => ( - + args: { variant: "info" }, + render: (args) => ( + Info New update available. ), }; + +const defaultVariant: AlertVariant = "default"; + +export const WithDescription: Story = { + args: { variant: defaultVariant }, + render: (args) => ( + + + Hold on I need at least a few minutes! + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. + + + + + + ), +}; + +export const WithoutDescription: Story = { + args: { variant: defaultVariant }, + render: (args) => ( + + + Hold on I need at least a few minutes! + + + + + ), +}; + +export const WithButtons: Story = { + args: { variant: defaultVariant }, + render: (args) => ( + +
+ + Hold on I need at least a few minutes! +
+ + +
+
+ + + + + ), +}; + +export const WithDescriptionAndButtons: Story = { + args: { variant: defaultVariant }, + render: (args) => ( + + + Hold on I need at least a few minutes! + + This process may take a few minutes to complete. See the{" "} + documentation for more details. + +
+ + +
+ + + + + ), +}; diff --git a/src/components/ui/Modal.stories.tsx b/src/components/ui/Modal.stories.tsx index a01a1a7..a907ae3 100644 --- a/src/components/ui/Modal.stories.tsx +++ b/src/components/ui/Modal.stories.tsx @@ -1,13 +1,34 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { useState } from "react"; +import React, { useState } from "react"; import { Modal, ModalHeader, ModalTitle, - ModalDescription, ModalFooter, Button, + Input, + LabeledSwitch, + Field, + FieldLabel, + FieldDescription, + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuItem, } from "./index"; +import { ChevronDownIcon } from "lucide-react"; + +const ZONE_NAME_HELPER = "Give a meaningful name for your reference"; + +const COUNTRIES = [ + "Bangladesh", + "United States", + "United Kingdom", + "Canada", + "Australia", + "Germany", + "France", +] as const; function ModalDemo() { const [open, setOpen] = useState(false); @@ -17,11 +38,12 @@ function ModalDemo() { setOpen(false)}> Modal Title - Description text here.
Modal content.
- + @@ -29,11 +51,68 @@ function ModalDemo() { ); } +function CreateShippingZoneDemo() { + const [open, setOpen] = useState(false); + const [restOfWorld, setRestOfWorld] = useState(false); + + return ( + <> + + setOpen(false)} size="default"> + + Create Shipping Zone + +
+ + Zone Name + + {ZONE_NAME_HELPER} + + + setRestOfWorld(checked)} + /> + + + Countries + + + + + + {COUNTRIES.map((country) => ( + {country} + ))} + + + {ZONE_NAME_HELPER} + +
+ + + + + + + ); +} + const meta = { title: "UI/Modal", component: Modal, parameters: { layout: "centered" }, tags: ["autodocs"], + args: { open: false, onClose: () => {} }, } satisfies Meta; export default meta; @@ -41,3 +120,7 @@ export default meta; type Story = StoryObj; export const Default: Story = { render: () => }; + +export const CreateShippingZone: Story = { + render: () => , +}; diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx index 3d4a72a..2e17ca1 100644 --- a/src/components/ui/alert.tsx +++ b/src/components/ui/alert.tsx @@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const alertVariants = cva( - "grid gap-2.5 rounded-lg border px-5 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", + "grid gap-2.5 rounded-lg border p-5 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", { variants: { variant: { diff --git a/src/components/ui/modal.tsx b/src/components/ui/modal.tsx index d55ddd9..be9c95e 100644 --- a/src/components/ui/modal.tsx +++ b/src/components/ui/modal.tsx @@ -80,8 +80,9 @@ const ModalHeader = forwardRef( ({ className, ...props }, ref) => (
( ({ className, ...props }, ref) => (