From a9dba793ba4029f23d7af36fbb69815f12888398 Mon Sep 17 00:00:00 2001
From: Sapayth Hossain <sapayth@users.noreply.github.com>
Date: Mon, 9 Feb 2026 20:31:19 +0600
Subject: [PATCH 1/3] enhance: storybook modal

---
 src/components/ui/Modal.stories.tsx | 91 +++++++++++++++++++++++++++--
 src/components/ui/modal.tsx         |  6 +-
 src/styles.css                      | 16 +++++
 3 files changed, 107 insertions(+), 6 deletions(-)

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() {
       <Modal open={open} onClose={() => setOpen(false)}>
         <ModalHeader>
           <ModalTitle>Modal Title</ModalTitle>
-          <ModalDescription>Description text here.</ModalDescription>
         </ModalHeader>
         <div className="p-6">Modal content.</div>
         <ModalFooter>
-          <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
           <Button onClick={() => setOpen(false)}>Save</Button>
         </ModalFooter>
       </Modal>
@@ -29,11 +51,68 @@ function ModalDemo() {
   );
 }
 
+function CreateShippingZoneDemo() {
+  const [open, setOpen] = useState(false);
+  const [restOfWorld, setRestOfWorld] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Create Shipping Zone</Button>
+      <Modal open={open} onClose={() => setOpen(false)} size="default">
+        <ModalHeader>
+          <ModalTitle>Create Shipping Zone</ModalTitle>
+        </ModalHeader>
+        <div className="flex flex-col gap-6 px-8 py-6">
+          <Field>
+            <FieldLabel>Zone Name</FieldLabel>
+            <Input placeholder="Type" />
+            <FieldDescription>{ZONE_NAME_HELPER}</FieldDescription>
+          </Field>
+
+          <LabeledSwitch
+            label="Rest of the world"
+            checked={restOfWorld}
+            onCheckedChange={(checked) => setRestOfWorld(checked)}
+          />
+
+          <Field>
+            <FieldLabel>Countries</FieldLabel>
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <Button
+                  variant="outline"
+                  className="h-9 w-full justify-between font-normal"
+                >
+                  Bangladesh, United States
+                  <ChevronDownIcon className="size-4 opacity-50" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-[var(--anchor-width)]">
+                {COUNTRIES.map((country) => (
+                  <DropdownMenuItem key={country}>{country}</DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <FieldDescription>{ZONE_NAME_HELPER}</FieldDescription>
+          </Field>
+        </div>
+        <ModalFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button onClick={() => setOpen(false)}>Create</Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+}
+
 const meta = {
   title: "UI/Modal",
   component: Modal,
   parameters: { layout: "centered" },
   tags: ["autodocs"],
+  args: { open: false, onClose: () => {} },
 } satisfies Meta<typeof Modal>;
 
 export default meta;
@@ -41,3 +120,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = { render: () => <ModalDemo /> };
+
+export const CreateShippingZone: Story = {
+  render: () => <CreateShippingZoneDemo />,
+};
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<HTMLDivElement, ModalHeaderProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
+      data-slot="modal-header"
       className={cn(
-        "flex flex-col space-y-1.5 text-center sm:text-left border-b border-border py-4 px-8",
+        "flex flex-col space-y-1.5 text-center sm:text-left border-b py-4 px-8",
         className,
       )}
       {...props}
@@ -147,8 +148,9 @@ const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
+      data-slot="modal-footer"
       className={cn(
-        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 border-t border-border py-5 px-8",
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 border-t py-5 px-8",
         className,
       )}
       {...props}
diff --git a/src/styles.css b/src/styles.css
index 579f6d9..d3bbbd0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -242,6 +242,22 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+/* ============================================
+   Modal Header (overrides reset border-color)
+   ============================================ */
+
+.pui-root [data-slot="modal-header"] {
+    border-bottom: 1px solid #E9E9E9;
+}
+
+/* ============================================
+   Modal Footer (overrides reset border-color)
+   ============================================ */
+
+.pui-root [data-slot="modal-footer"] {
+    border-top: 1px solid #E9E9E9;
+}
+
 /* ============================================
    Component Base Styles
    ============================================ */

From d3e034d608f6e1b0a8c0d7253f9888d34b01e65c Mon Sep 17 00:00:00 2001
From: Sapayth Hossain <sapayth@users.noreply.github.com>
Date: Mon, 9 Feb 2026 21:31:50 +0600
Subject: [PATCH 2/3] enhance: alert component for storybook

---
 src/components/ui/Alert.stories.tsx | 136 ++++++++++++++++++++++++----
 1 file changed, 120 insertions(+), 16 deletions(-)

diff --git a/src/components/ui/Alert.stories.tsx b/src/components/ui/Alert.stories.tsx
index c8df6b2..5574269 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 <Icon />;
+}
 
 const meta = {
   title: "UI/Alert",
@@ -19,8 +43,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: () => (
-    <Alert variant="default">
+  args: { variant: "default" },
+  render: (args) => (
+    <Alert variant={args.variant}>
       <AlertTitle>Title</AlertTitle>
       <AlertDescription>Description text goes here.</AlertDescription>
     </Alert>
@@ -28,8 +53,9 @@ export const Default: Story = {
 };
 
 export const Destructive: Story = {
-  render: () => (
-    <Alert variant="destructive">
+  args: { variant: "destructive" },
+  render: (args) => (
+    <Alert variant={args.variant}>
       <AlertTitle>Error</AlertTitle>
       <AlertDescription>Something went wrong.</AlertDescription>
     </Alert>
@@ -37,21 +63,19 @@ export const Destructive: Story = {
 };
 
 export const Success: Story = {
-  args: {
-    variant: "default"
-  },
-
-  render: () => (
-    <Alert variant="success">
+  args: { variant: "success" },
+  render: (args) => (
+    <Alert variant={args.variant}>
       <AlertTitle>Success</AlertTitle>
       <AlertDescription>Your changes have been saved.</AlertDescription>
     </Alert>
-  )
+  ),
 };
 
 export const Warning: Story = {
-  render: () => (
-    <Alert variant="warning">
+  args: { variant: "warning" },
+  render: (args) => (
+    <Alert variant={args.variant}>
       <AlertTitle>Warning</AlertTitle>
       <AlertDescription>Please review before continuing.</AlertDescription>
     </Alert>
@@ -59,10 +83,90 @@ export const Warning: Story = {
 };
 
 export const Info: Story = {
-  render: () => (
-    <Alert variant="info">
+  args: { variant: "info" },
+  render: (args) => (
+    <Alert variant={args.variant}>
       <AlertTitle>Info</AlertTitle>
       <AlertDescription>New update available.</AlertDescription>
     </Alert>
   ),
 };
+
+const defaultVariant: AlertVariant = "default";
+
+export const WithDescription: Story = {
+  args: { variant: defaultVariant },
+  render: (args) => (
+    <Alert variant={args.variant}>
+      <AlertIcon variant={args.variant ?? defaultVariant} />
+      <AlertTitle>Hold on I need at least a few minutes!</AlertTitle>
+      <AlertDescription>
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      </AlertDescription>
+      <AlertAction>
+        <Button variant="ghost" size="icon-sm" aria-label="Dismiss">
+          <X />
+        </Button>
+      </AlertAction>
+    </Alert>
+  ),
+};
+
+export const WithoutDescription: Story = {
+  args: { variant: defaultVariant },
+  render: (args) => (
+    <Alert variant={args.variant}>
+      <AlertIcon variant={args.variant ?? defaultVariant} />
+      <AlertTitle>Hold on I need at least a few minutes!</AlertTitle>
+      <AlertAction>
+        <Button variant="ghost" size="icon-sm" aria-label="Dismiss">
+          <X />
+        </Button>
+      </AlertAction>
+    </Alert>
+  ),
+};
+
+export const WithButtons: Story = {
+  args: { variant: defaultVariant },
+  render: (args) => (
+    <Alert variant={args.variant}>
+      <AlertIcon variant={args.variant ?? defaultVariant} />
+      <div className="flex items-center justify-between gap-4 col-start-2">
+        <AlertTitle>Hold on I need at least a few minutes!</AlertTitle>
+        <div className="flex gap-2">
+          <Button variant="default">Primary</Button>
+          <Button variant="outline">Button</Button>
+        </div>
+      </div>
+      <AlertAction>
+        <Button variant="ghost" size="icon-sm" aria-label="Dismiss">
+          <X />
+        </Button>
+      </AlertAction>
+    </Alert>
+  ),
+};
+
+export const WithDescriptionAndButtons: Story = {
+  args: { variant: defaultVariant },
+  render: (args) => (
+    <Alert variant={args.variant}>
+      <AlertIcon variant={args.variant ?? defaultVariant} />
+      <AlertTitle>Hold on I need at least a few minutes!</AlertTitle>
+      <AlertDescription>
+        This process may take a few minutes to complete. See the{" "}
+        <a href="#">documentation</a> for more details.
+      </AlertDescription>
+      <div className="flex gap-2 pt-1 col-start-2">
+        <Button variant="default">Primary</Button>
+        <Button variant="outline">Button</Button>
+      </div>
+      <AlertAction>
+        <Button variant="ghost" size="icon-sm" aria-label="Dismiss">
+          <X />
+        </Button>
+      </AlertAction>
+    </Alert>
+  ),
+};

From 8bc5777341d517292b9f369f93d19960b1104c8d Mon Sep 17 00:00:00 2001
From: Sapayth Hossain <sapayth@users.noreply.github.com>
Date: Mon, 9 Feb 2026 21:41:45 +0600
Subject: [PATCH 3/3] css fixes

---
 src/components/ui/Alert.stories.tsx | 2 +-
 src/components/ui/alert.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/Alert.stories.tsx b/src/components/ui/Alert.stories.tsx
index 5574269..438524e 100644
--- a/src/components/ui/Alert.stories.tsx
+++ b/src/components/ui/Alert.stories.tsx
@@ -131,8 +131,8 @@ export const WithButtons: Story = {
   args: { variant: defaultVariant },
   render: (args) => (
     <Alert variant={args.variant}>
-      <AlertIcon variant={args.variant ?? defaultVariant} />
       <div className="flex items-center justify-between gap-4 col-start-2">
+        <AlertIcon variant={args.variant ?? defaultVariant} />
         <AlertTitle>Hold on I need at least a few minutes!</AlertTitle>
         <div className="flex gap-2">
           <Button variant="default">Primary</Button>
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: {