@tribepad/themis 1.0.0

package/src/elements/Modal/Modal.stories.tsx

@@ -0,0 +1,640 @@
+/**
+ * Modal Component - Storybook Stories
+ *
+ * Interactive examples and documentation for the Modal component
+ *
+ * @see PRD.md DOC-002 (Storybook Stories Requirements)
+ * @see Storybook (when running)
+ */
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { Modal } from './Modal';
+import { Button } from '../Button';
+
+const meta = {
+  title: 'Elements/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Accessible modal modal component with React Aria primitives and ShadCN styling. Supports WCAG 2.2 AAA compliance, size variants, animation options, and full keyboard navigation.',
+      },
+    },
+  },
+  argTypes: {
+    role: {
+      control: 'select',
+      options: ['modal', 'alertmodal'],
+      description: 'Modal role for accessibility',
+    },
+    defaultOpen: {
+      control: 'boolean',
+      description: 'Default open state (uncontrolled mode)',
+    },
+  },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default Modal
+ * Basic modal with header, content, and footer
+ */
+export const Default: Story = {
+  render: () => (
+    <Modal>
+      <Modal.Trigger>
+        <Button>Open Modal</Button>
+      </Modal.Trigger>
+      <Modal.Content>
+        <Modal.Header>
+          <Modal.Title>Are you absolutely sure?</Modal.Title>
+          <Modal.Description>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </Modal.Description>
+        </Modal.Header>
+        <Modal.Footer>
+          <Modal.Close>
+            <Button variant="outline">Cancel</Button>
+          </Modal.Close>
+          <Modal.Close>
+            <Button>Confirm</Button>
+          </Modal.Close>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
+  ),
+};
+
+/**
+ * Alert Modal
+ * Confirmation modal with role="alertdialog"
+ * Typically used for important decisions requiring user acknowledgment
+ */
+export const AlertModal: Story = {
+  render: () => (
+    <Modal role="alertdialog">
+      <Modal.Trigger>
+        <Button variant="destructive">Delete Account</Button>
+      </Modal.Trigger>
+      <Modal.Content>
+        <Modal.Header>
+          <Modal.Title>Delete Account</Modal.Title>
+          <Modal.Description>
+            This action is irreversible. All your data, including projects,
+            settings, and user information will be permanently deleted. Are you
+            sure you want to continue?
+          </Modal.Description>
+        </Modal.Header>
+        <Modal.Footer>
+          <Modal.Close>
+            <Button variant="outline">Cancel</Button>
+          </Modal.Close>
+          <Modal.Close>
+            <Button variant="destructive">Yes, Delete Account</Button>
+          </Modal.Close>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
+  ),
+};
+
+/**
+ * With Form
+ * Modal containing form elements
+ * Demonstrates form submission pattern within modal
+ */
+export const WithForm: Story = {
+  render: () => (
+    <Modal>
+      <Modal.Trigger>
+        <Button>Edit Profile</Button>
+      </Modal.Trigger>
+      <Modal.Content>
+        <Modal.Header>
+          <Modal.Title>Edit Profile</Modal.Title>
+          <Modal.Description>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </Modal.Description>
+        </Modal.Header>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            alert('Form submitted!');
+          }}
+        >
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <label htmlFor="name" className="text-right">
+                Name
+              </label>
+              <input
+                id="name"
+                defaultValue="Pedro Duarte"
+                className="col-span-3 px-3 py-2 rounded-md border border-[var(--border)] bg-[var(--background)]"
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <label htmlFor="username" className="text-right">
+                Username
+              </label>
+              <input
+                id="username"
+                defaultValue="@peduarte"
+                className="col-span-3 px-3 py-2 rounded-md border border-[var(--border)] bg-[var(--background)]"
+              />
+            </div>
+          </div>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="outline">Cancel</Button>
+            </Modal.Close>
+            <Button type="submit">Save changes</Button>
+          </Modal.Footer>
+        </form>
+      </Modal.Content>
+    </Modal>
+  ),
+};
+
+/**
+ * Long Content
+ * Modal with scrolling content
+ * Tests overflow behavior and scroll handling
+ */
+export const LongContent: Story = {
+  render: () => (
+    <Modal>
+      <Modal.Trigger>
+        <Button>View Terms</Button>
+      </Modal.Trigger>
+      <Modal.Content>
+        <Modal.Header>
+          <Modal.Title>Terms of Service</Modal.Title>
+          <Modal.Description>
+            Please read and accept our terms of service to continue.
+          </Modal.Description>
+        </Modal.Header>
+        <div className="max-h-[400px] overflow-y-auto pr-4">
+          <div className="space-y-4">
+            <h3 className="font-semibold">1. Acceptance of Terms</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              By accessing and using this service, you accept and agree to be
+              bound by the terms and provision of this agreement. If you do not
+              agree to abide by the above, please do not use this service.
+            </p>
+            <h3 className="font-semibold">2. Use License</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              Permission is granted to temporarily download one copy of the
+              materials (information or software) on our service for personal,
+              non-commercial transitory viewing only. This is the grant of a
+              license, not a transfer of title.
+            </p>
+            <h3 className="font-semibold">3. Disclaimer</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              The materials on our service are provided on an &apos;as is&apos;
+              basis. We make no warranties, expressed or implied, and hereby
+              disclaim and negate all other warranties including, without
+              limitation, implied warranties or conditions of merchantability,
+              fitness for a particular purpose, or non-infringement of
+              intellectual property or other violation of rights.
+            </p>
+            <h3 className="font-semibold">4. Limitations</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              In no event shall we or our suppliers be liable for any damages
+              (including, without limitation, damages for loss of data or
+              profit, or due to business interruption) arising out of the use
+              or inability to use the materials on our service, even if we or
+              our authorized representative has been notified orally or in
+              writing of the possibility of such damage.
+            </p>
+            <h3 className="font-semibold">5. Accuracy of Materials</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              The materials appearing on our service could include technical,
+              typographical, or photographic errors. We do not warrant that any
+              of the materials on our service are accurate, complete or current.
+              We may make changes to the materials contained on our service at
+              any time without notice.
+            </p>
+            <h3 className="font-semibold">6. Links</h3>
+            <p className="text-sm text-[var(--muted-foreground)]">
+              We have not reviewed all of the sites linked to our service and
+              are not responsible for the contents of any such linked site. The
+              inclusion of any link does not imply endorsement by us of the
+              site. Use of any such linked website is at the user&apos;s own
+              risk.
+            </p>
+          </div>
+        </div>
+        <Modal.Footer>
+          <Modal.Close>
+            <Button variant="outline">Decline</Button>
+          </Modal.Close>
+          <Modal.Close>
+            <Button>Accept</Button>
+          </Modal.Close>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
+  ),
+};
+
+/**
+ * Custom Footer
+ * Modal with custom footer layout
+ * Demonstrates flexible footer button arrangements
+ */
+export const CustomFooter: Story = {
+  render: () => (
+    <Modal>
+      <Modal.Trigger>
+        <Button>Open Modal</Button>
+      </Modal.Trigger>
+      <Modal.Content>
+        <Modal.Header>
+          <Modal.Title>Custom Footer Layout</Modal.Title>
+          <Modal.Description>
+            This modal demonstrates a custom footer with three buttons and
+            different button arrangements.
+          </Modal.Description>
+        </Modal.Header>
+        <Modal.Footer className="sm:justify-between">
+          <Modal.Close>
+            <Button variant="ghost">Skip</Button>
+          </Modal.Close>
+          <div className="flex gap-2">
+            <Modal.Close>
+              <Button variant="outline">Back</Button>
+            </Modal.Close>
+            <Modal.Close>
+              <Button>Continue</Button>
+            </Modal.Close>
+          </div>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
+  ),
+};
+
+/**
+ * No Description
+ * Modal without description text
+ * Shows minimal modal with only title
+ */
+export const NoDescription: Story = {
+  render: () => (
+    <Modal>
+      <Modal.Trigger>
+        <Button>Open Modal</Button>
+      </Modal.Trigger>
+      <Modal.Content>
+        <Modal.Header>
+          <Modal.Title>Quick Confirmation</Modal.Title>
+        </Modal.Header>
+        <div className="py-4">
+          <p className="text-sm">
+            Are you sure you want to proceed with this action?
+          </p>
+        </div>
+        <Modal.Footer>
+          <Modal.Close>
+            <Button variant="outline">Cancel</Button>
+          </Modal.Close>
+          <Modal.Close>
+            <Button>Confirm</Button>
+          </Modal.Close>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
+  ),
+};
+
+/**
+ * Not Dismissable
+ * Modal that requires explicit action
+ * Backdrop click and Escape key disabled
+ */
+export const NotDismissable: Story = {
+  render: () => (
+    <Modal>
+      <Modal.Trigger>
+        <Button>Open Modal</Button>
+      </Modal.Trigger>
+      <Modal.Content
+        isDismissable={false}
+        isKeyboardDismissDisabled={true}
+        showClose={false}
+      >
+        <Modal.Header>
+          <Modal.Title>Important Action Required</Modal.Title>
+          <Modal.Description>
+            This modal cannot be dismissed by clicking outside or pressing
+            Escape. You must select one of the options below.
+          </Modal.Description>
+        </Modal.Header>
+        <div className="py-4">
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Please review the terms and conditions before proceeding.
+          </p>
+        </div>
+        <Modal.Footer>
+          <Modal.Close>
+            <Button variant="outline">Decline</Button>
+          </Modal.Close>
+          <Modal.Close>
+            <Button>Accept</Button>
+          </Modal.Close>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal>
+  ),
+};
+
+/**
+ * Controlled Mode
+ * Modal with external state control
+ * Demonstrates programmatic open/close
+ */
+export const ControlledMode: Story = {
+  render: () => {
+    function ControlledModal() {
+      const [isOpen, setIsOpen] = useState(false);
+
+      return (
+        <div className="space-y-4">
+          <div className="flex gap-2">
+            <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Close Modal
+            </Button>
+          </div>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Modal is currently: {isOpen ? 'Open' : 'Closed'}
+          </p>
+          <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
+            <Modal.Trigger>
+              <Button>Toggle Modal</Button>
+            </Modal.Trigger>
+            <Modal.Content>
+              <Modal.Header>
+                <Modal.Title>Controlled Modal</Modal.Title>
+                <Modal.Description>
+                  This modal is controlled via external state. You can open or
+                  close it using the buttons above.
+                </Modal.Description>
+              </Modal.Header>
+              <Modal.Footer>
+                <Modal.Close>
+                  <Button variant="outline">Close</Button>
+                </Modal.Close>
+              </Modal.Footer>
+            </Modal.Content>
+          </Modal>
+        </div>
+      );
+    }
+
+    return <ControlledModal />;
+  },
+};
+
+/**
+ * All Themes
+ * Modal displayed in all 4 theme modes
+ * Light, Dark, High Contrast, Colorblind
+ */
+export const AllThemes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-[var(--muted-foreground)]">
+        This modal adapts to all theme modes using semantic CSS tokens. The
+        Modal component automatically inherits theme variables from the
+        ThemeProvider context.
+      </p>
+      <Modal>
+        <Modal.Trigger>
+          <Button>Open Modal</Button>
+        </Modal.Trigger>
+        <Modal.Content>
+          <Modal.Header>
+            <Modal.Title>Theme-Aware Modal</Modal.Title>
+            <Modal.Description>
+              This modal uses semantic tokens that automatically adapt to
+              light, dark, high contrast, and colorblind themes.
+            </Modal.Description>
+          </Modal.Header>
+          <div className="space-y-4 py-4">
+            <div className="rounded-md bg-[var(--muted)] p-4">
+              <p className="text-sm">
+                Background: <code>var(--background)</code>
+              </p>
+              <p className="text-sm">
+                Foreground: <code>var(--foreground)</code>
+              </p>
+              <p className="text-sm">
+                Border: <code>var(--border)</code>
+              </p>
+            </div>
+          </div>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="outline">Close</Button>
+            </Modal.Close>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+    </div>
+  ),
+};
+
+/**
+ * Size Variants
+ * Showcases all size options
+ * sm (300px), md (425px), lg (600px), xl (800px), full
+ */
+export const SizeVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Modal>
+        <Modal.Trigger>
+          <Button size="sm">Small (sm)</Button>
+        </Modal.Trigger>
+        <Modal.Content size="sm">
+          <Modal.Header>
+            <Modal.Title>Small Modal</Modal.Title>
+            <Modal.Description>max-w-sm (300px)</Modal.Description>
+          </Modal.Header>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="outline">Close</Button>
+            </Modal.Close>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+
+      <Modal>
+        <Modal.Trigger>
+          <Button size="sm">Medium (md)</Button>
+        </Modal.Trigger>
+        <Modal.Content size="md">
+          <Modal.Header>
+            <Modal.Title>Medium Modal</Modal.Title>
+            <Modal.Description>
+              max-w-md (425px) - Default size
+            </Modal.Description>
+          </Modal.Header>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="outline">Close</Button>
+            </Modal.Close>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+
+      <Modal>
+        <Modal.Trigger>
+          <Button size="sm">Large (lg)</Button>
+        </Modal.Trigger>
+        <Modal.Content size="lg">
+          <Modal.Header>
+            <Modal.Title>Large Modal</Modal.Title>
+            <Modal.Description>max-w-lg (600px)</Modal.Description>
+          </Modal.Header>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="outline">Close</Button>
+            </Modal.Close>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+
+      <Modal>
+        <Modal.Trigger>
+          <Button size="sm">Extra Large (xl)</Button>
+        </Modal.Trigger>
+        <Modal.Content size="xl">
+          <Modal.Header>
+            <Modal.Title>Extra Large Modal</Modal.Title>
+            <Modal.Description>max-w-2xl (800px)</Modal.Description>
+          </Modal.Header>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="outline">Close</Button>
+            </Modal.Close>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+
+      <Modal>
+        <Modal.Trigger>
+          <Button size="sm">Full Screen</Button>
+        </Modal.Trigger>
+        <Modal.Content size="full">
+          <Modal.Header>
+            <Modal.Title>Full Screen Modal</Modal.Title>
+            <Modal.Description>
+              max-w-full min-h-screen - Takes up entire viewport
+            </Modal.Description>
+          </Modal.Header>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="outline">Close</Button>
+            </Modal.Close>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+    </div>
+  ),
+};
+
+/**
+ * Animation Variants
+ * Showcases all animation options
+ * fade-zoom (default), fade, slide, none
+ */
+export const AnimationVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Modal>
+        <Modal.Trigger>
+          <Button size="sm">Fade + Zoom</Button>
+        </Modal.Trigger>
+        <Modal.Content animation="fade-zoom">
+          <Modal.Header>
+            <Modal.Title>Fade + Zoom Animation</Modal.Title>
+            <Modal.Description>
+              Default animation with fade in and scale effect
+            </Modal.Description>
+          </Modal.Header>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="outline">Close</Button>
+            </Modal.Close>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+
+      <Modal>
+        <Modal.Trigger>
+          <Button size="sm">Fade Only</Button>
+        </Modal.Trigger>
+        <Modal.Content animation="fade">
+          <Modal.Header>
+            <Modal.Title>Fade Animation</Modal.Title>
+            <Modal.Description>
+              Simple fade in without scale effect
+            </Modal.Description>
+          </Modal.Header>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="outline">Close</Button>
+            </Modal.Close>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+
+      <Modal>
+        <Modal.Trigger>
+          <Button size="sm">Slide Up</Button>
+        </Modal.Trigger>
+        <Modal.Content animation="slide">
+          <Modal.Header>
+            <Modal.Title>Slide Animation</Modal.Title>
+            <Modal.Description>
+              Slides up from bottom with fade effect
+            </Modal.Description>
+          </Modal.Header>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="outline">Close</Button>
+            </Modal.Close>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+
+      <Modal>
+        <Modal.Trigger>
+          <Button size="sm">No Animation</Button>
+        </Modal.Trigger>
+        <Modal.Content animation="none">
+          <Modal.Header>
+            <Modal.Title>No Animation</Modal.Title>
+            <Modal.Description>
+              Instant appearance without any animation
+            </Modal.Description>
+          </Modal.Header>
+          <Modal.Footer>
+            <Modal.Close>
+              <Button variant="outline">Close</Button>
+            </Modal.Close>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal>
+    </div>
+  ),
+};