@latte-macchiat-io/latte-vanilla-components 0.0.185 → 0.0.187

package/src/components/Modal/stories.tsx

@@ -0,0 +1,409 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Modal } from './Modal';
+import { Button } from '../Button/Button';
+import { Section } from '../Section/Section';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Interactive Components/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+The Modal component provides an accessible, animated modal dialog with various customization options.
+
+## Features
+- Accessible (ARIA compliant, focus management)
+- Animated entrance/exit
+- Multiple sizes (small, medium, large, fullscreen)
+- Centered or top-aligned positioning
+- Backdrop click to close (optional)
+- Escape key to close (optional)
+- Close button (optional)
+- Body scroll lock when open
+- TypeScript support
+
+## Accessibility
+- Traps focus within the modal
+- Restores focus to trigger element on close
+- Supports keyboard navigation
+- ARIA attributes for screen readers
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Controls whether the modal is visible',
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'fullscreen'],
+      description: 'Size of the modal dialog',
+    },
+    centered: {
+      control: 'boolean',
+      description: 'Whether to center the modal vertically',
+    },
+    showCloseButton: {
+      control: 'boolean',
+      description: 'Whether to show the close button',
+    },
+    closeOnBackdropClick: {
+      control: 'boolean',
+      description: 'Whether clicking the backdrop closes the modal',
+    },
+    closeOnEscape: {
+      control: 'boolean',
+      description: 'Whether pressing Escape closes the modal',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+// Interactive Modal Example
+const InteractiveModal = ({ size = 'medium', centered = true, ...args }: any) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Section>
+      <Button variant="primary" onClick={() => setIsOpen(true)}>
+        Open Modal
+      </Button>
+      <Modal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        size={size}
+        centered={centered}
+        {...args}
+      >
+        <div style={{ padding: '2rem' }}>
+          <h2>Modal Title</h2>
+          <p>This is the modal content. You can put any React components here.</p>
+          <div style={{ marginTop: '2rem', display: 'flex', gap: '1rem' }}>
+            <Button variant="primary" onClick={() => setIsOpen(false)}>
+              Confirm
+            </Button>
+            <Button variant="secondary" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </Section>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <InteractiveModal {...args} />,
+  args: {
+    size: 'medium',
+    centered: true,
+    showCloseButton: true,
+    closeOnBackdropClick: true,
+    closeOnEscape: true,
+  },
+};
+
+export const Small: Story = {
+  render: (args) => <InteractiveModal {...args} size="small" />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Small modal size, perfect for confirmations and quick actions.',
+      },
+    },
+  },
+};
+
+export const Medium: Story = {
+  render: (args) => <InteractiveModal {...args} size="medium" />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Medium modal size, the default and most commonly used size.',
+      },
+    },
+  },
+};
+
+export const Large: Story = {
+  render: (args) => <InteractiveModal {...args} size="large" />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large modal size, good for forms and detailed content.',
+      },
+    },
+  },
+};
+
+export const Fullscreen: Story = {
+  render: (args) => <InteractiveModal {...args} size="fullscreen" />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Fullscreen modal that takes up the entire viewport.',
+      },
+    },
+  },
+};
+
+export const TopAligned: Story = {
+  render: (args) => <InteractiveModal {...args} centered={false} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Modal aligned to the top of the viewport instead of centered.',
+      },
+    },
+  },
+};
+
+export const NoCloseButton: Story = {
+  render: (args) => <InteractiveModal {...args} showCloseButton={false} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Modal without the close button - must be closed programmatically.',
+      },
+    },
+  },
+};
+
+export const NoBackdropClose: Story = {
+  render: (args) => <InteractiveModal {...args} closeOnBackdropClick={false} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Modal that cannot be closed by clicking the backdrop.',
+      },
+    },
+  },
+};
+
+export const ConfirmationDialog: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <Section>
+        <Button variant="destructive" onClick={() => setIsOpen(true)}>
+          Delete Item
+        </Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          size="small"
+          centered={true}
+        >
+          <div style={{ padding: '2rem', textAlign: 'center' }}>
+            <h3 style={{ color: 'var(--latte-colors-error)', marginBottom: '1rem' }}>
+              Delete Confirmation
+            </h3>
+            <p style={{ marginBottom: '2rem' }}>
+              Are you sure you want to delete this item? This action cannot be undone.
+            </p>
+            <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
+              <Button variant="destructive" onClick={() => setIsOpen(false)}>
+                Delete
+              </Button>
+              <Button variant="secondary" onClick={() => setIsOpen(false)}>
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </Modal>
+      </Section>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A real-world example of a confirmation dialog for destructive actions.',
+      },
+    },
+  },
+};
+
+export const FormModal: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <Section>
+        <Button variant="primary" onClick={() => setIsOpen(true)}>
+          Add New User
+        </Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          size="medium"
+          centered={true}
+        >
+          <div style={{ padding: '2rem' }}>
+            <h2 style={{ marginBottom: '2rem' }}>Add New User</h2>
+            <form style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+              <div>
+                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
+                  Name
+                </label>
+                <input 
+                  type="text" 
+                  style={{ 
+                    width: '100%', 
+                    padding: '0.75rem', 
+                    border: '1px solid var(--latte-colors-border)',
+                    borderRadius: 'var(--latte-radii-md)',
+                    fontSize: 'var(--latte-fontSizes-md)'
+                  }} 
+                />
+              </div>
+              <div>
+                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
+                  Email
+                </label>
+                <input 
+                  type="email" 
+                  style={{ 
+                    width: '100%', 
+                    padding: '0.75rem', 
+                    border: '1px solid var(--latte-colors-border)',
+                    borderRadius: 'var(--latte-radii-md)',
+                    fontSize: 'var(--latte-fontSizes-md)'
+                  }} 
+                />
+              </div>
+              <div>
+                <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
+                  Role
+                </label>
+                <select 
+                  style={{ 
+                    width: '100%', 
+                    padding: '0.75rem', 
+                    border: '1px solid var(--latte-colors-border)',
+                    borderRadius: 'var(--latte-radii-md)',
+                    fontSize: 'var(--latte-fontSizes-md)'
+                  }}
+                >
+                  <option>User</option>
+                  <option>Admin</option>
+                  <option>Moderator</option>
+                </select>
+              </div>
+              <div style={{ marginTop: '2rem', display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+                <Button variant="secondary" onClick={() => setIsOpen(false)}>
+                  Cancel
+                </Button>
+                <Button variant="primary" onClick={() => setIsOpen(false)}>
+                  Add User
+                </Button>
+              </div>
+            </form>
+          </div>
+        </Modal>
+      </Section>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A practical example of using a modal for form input.',
+      },
+    },
+  },
+};
+
+export const ImageGallery: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedImage, setSelectedImage] = useState(0);
+
+    const images = [
+      'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop',
+      'https://images.unsplash.com/photo-1519904981063-b0cf448d479e?w=800&h=600&fit=crop',
+      'https://images.unsplash.com/photo-1454391304352-2bf4678b1a7a?w=800&h=600&fit=crop',
+    ];
+
+    const openImage = (index: number) => {
+      setSelectedImage(index);
+      setIsOpen(true);
+    };
+
+    return (
+      <Section>
+        <h3>Click an image to view in modal:</h3>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1rem', marginTop: '1rem' }}>
+          {images.map((src, index) => (
+            <img
+              key={index}
+              src={src}
+              alt={`Gallery ${index + 1}`}
+              style={{ 
+                width: '100%', 
+                height: '150px', 
+                objectFit: 'cover', 
+                borderRadius: 'var(--latte-radii-md)',
+                cursor: 'pointer'
+              }}
+              onClick={() => openImage(index)}
+            />
+          ))}
+        </div>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          size="large"
+          centered={true}
+        >
+          <div style={{ padding: '1rem' }}>
+            <img
+              src={images[selectedImage]}
+              alt={`Gallery ${selectedImage + 1}`}
+              style={{ 
+                width: '100%', 
+                height: 'auto', 
+                borderRadius: 'var(--latte-radii-md)'
+              }}
+            />
+            <div style={{ 
+              marginTop: '1rem', 
+              display: 'flex', 
+              justifyContent: 'space-between', 
+              alignItems: 'center' 
+            }}>
+              <Button 
+                variant="ghost" 
+                onClick={() => setSelectedImage((prev) => (prev > 0 ? prev - 1 : images.length - 1))}
+              >
+                ← Previous
+              </Button>
+              <span>Image {selectedImage + 1} of {images.length}</span>
+              <Button 
+                variant="ghost" 
+                onClick={() => setSelectedImage((prev) => (prev < images.length - 1 ? prev + 1 : 0))}
+              >
+                Next →
+              </Button>
+            </div>
+          </div>
+        </Modal>
+      </Section>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'An example of using modals for image galleries with navigation.',
+      },
+    },
+  },
+};

package/src/components/Nav/stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Nav } from '../../index';
 

package/src/components/NavLegal/stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { NavLegal } from '../../index';