@papernote/ui 1.3.1 → 1.6.0

package/src/components/Modal.stories.tsx

@@ -96,6 +96,21 @@ const [isOpen, setIsOpen] = useState(false);
         defaultValue: { summary: 'true' },
       },
     },
+    scrollable: {
+      control: 'boolean',
+      description: 'Enable automatic scrolling for content that exceeds viewport height. Applies max-height: calc(100vh - 200px) and overflow-y: auto.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    maxHeight: {
+      control: 'text',
+      description: 'Maximum height of the modal content area (e.g., "70vh", "500px"). Enables overflow-y: auto when set.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
   },
 } satisfies Meta<typeof Modal>;
 
@@ -348,3 +363,376 @@ export const TextSelectionTest: Story = {
     );
   },
 };
+
+// Mobile-optimized stories
+export const MobileSlideUp: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'On mobile devices, slide-up animation feels natural like a native bottom sheet, ideal for mobile modals.',
+      },
+    },
+  },
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Mobile Modal</Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Mobile Modal"
+          animation="slide-up"
+          size="lg"
+        >
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <p>This modal slides up from the bottom, which feels natural on mobile devices.</p>
+            <Input
+              label="Email"
+              type="email"
+              inputMode="email"
+              enterKeyHint="next"
+              size="lg"
+              placeholder="you@example.com"
+            />
+          </div>
+          <ModalFooter>
+            <Button variant="ghost" onClick={() => setIsOpen(false)}>Cancel</Button>
+            <Button variant="primary" onClick={() => setIsOpen(false)}>Save</Button>
+          </ModalFooter>
+        </Modal>
+      </>
+    );
+  },
+};
+
+export const MobileFormModal: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Mobile form modal with touch-friendly inputs (size="lg") and appropriate keyboard hints.',
+      },
+    },
+  },
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Add Contact</Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Add New Contact"
+          animation="slide-up"
+          size="lg"
+        >
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <Input
+              label="Full Name"
+              size="lg"
+              enterKeyHint="next"
+              placeholder="John Smith"
+              required
+            />
+            <Input
+              label="Phone Number"
+              type="tel"
+              inputMode="tel"
+              enterKeyHint="next"
+              size="lg"
+              placeholder="(555) 123-4567"
+            />
+            <Input
+              label="Email"
+              type="email"
+              inputMode="email"
+              enterKeyHint="done"
+              size="lg"
+              placeholder="john@example.com"
+            />
+          </div>
+          <ModalFooter>
+            <Button variant="ghost" size="lg" onClick={() => setIsOpen(false)}>Cancel</Button>
+            <Button variant="primary" size="lg" onClick={() => setIsOpen(false)}>Save Contact</Button>
+          </ModalFooter>
+        </Modal>
+      </>
+    );
+  },
+};
+
+export const MobileConfirmation: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Small confirmation modal on mobile with scale animation and touch-friendly buttons.',
+      },
+    },
+  },
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button variant="danger" onClick={() => setIsOpen(true)}>Delete Item</Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Delete Item?"
+          animation="scale"
+          size="sm"
+        >
+          <p style={{ marginBottom: '1rem' }}>
+            Are you sure you want to delete this item? This action cannot be undone.
+          </p>
+          <ModalFooter>
+            <Button variant="ghost" size="lg" onClick={() => setIsOpen(false)}>Cancel</Button>
+            <Button variant="danger" size="lg" onClick={() => setIsOpen(false)}>Delete</Button>
+          </ModalFooter>
+        </Modal>
+      </>
+    );
+  },
+};
+
+export const MobileFullScreen: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Full-screen modal on mobile for complex content that needs maximum space.',
+      },
+    },
+  },
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>View Details</Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Product Details"
+          animation="slide-up"
+          size="full"
+        >
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <div style={{ backgroundColor: '#f5f5f4', padding: '3rem', borderRadius: '0.5rem', textAlign: 'center' }}>
+              [Product Image]
+            </div>
+            <h3 style={{ fontSize: '1.25rem', fontWeight: 600 }}>Product Name</h3>
+            <p style={{ color: '#666' }}>$99.99</p>
+            <p>
+              This is a detailed product description that takes advantage of the full-screen
+              modal on mobile devices to show comprehensive information.
+            </p>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+              <h4 style={{ fontWeight: 600 }}>Features:</h4>
+              <ul style={{ marginLeft: '1.5rem' }}>
+                <li>Feature 1</li>
+                <li>Feature 2</li>
+                <li>Feature 3</li>
+              </ul>
+            </div>
+          </div>
+          <ModalFooter>
+            <Button variant="ghost" size="lg" onClick={() => setIsOpen(false)}>Close</Button>
+            <Button variant="primary" size="lg" onClick={() => setIsOpen(false)}>Add to Cart</Button>
+          </ModalFooter>
+        </Modal>
+      </>
+    );
+  },
+};
+
+// Scrollable content stories
+export const Scrollable: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Modal with `scrollable` prop enables automatic overflow handling for long content. The content area gets a max-height of `calc(100vh - 200px)` and becomes scrollable.',
+      },
+    },
+  },
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Scrollable Modal</Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Terms and Conditions"
+          scrollable
+          size="lg"
+        >
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <h4 style={{ fontWeight: 600 }}>1. Introduction</h4>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor 
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <h4 style={{ fontWeight: 600 }}>2. User Responsibilities</h4>
+            <p>
+              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
+              fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
+              culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <h4 style={{ fontWeight: 600 }}>3. Privacy Policy</h4>
+            <p>
+              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
+              doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
+              veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+            </p>
+            <h4 style={{ fontWeight: 600 }}>4. Data Collection</h4>
+            <p>
+              Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed 
+              quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+            </p>
+            <h4 style={{ fontWeight: 600 }}>5. Service Terms</h4>
+            <p>
+              Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 
+              adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et 
+              dolore magnam aliquam quaerat voluptatem.
+            </p>
+            <h4 style={{ fontWeight: 600 }}>6. Liability</h4>
+            <p>
+              Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 
+              laboriosam, nisi ut aliquid ex ea commodi consequatur.
+            </p>
+            <h4 style={{ fontWeight: 600 }}>7. Termination</h4>
+            <p>
+              Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil 
+              molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
+            </p>
+            <h4 style={{ fontWeight: 600 }}>8. Amendments</h4>
+            <p>
+              At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 
+              praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias 
+              excepturi sint occaecati cupiditate non provident.
+            </p>
+          </div>
+          <ModalFooter>
+            <Button variant="ghost" onClick={() => setIsOpen(false)}>Decline</Button>
+            <Button variant="primary" onClick={() => setIsOpen(false)}>Accept</Button>
+          </ModalFooter>
+        </Modal>
+      </>
+    );
+  },
+};
+
+export const CustomMaxHeight: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Modal with custom `maxHeight` prop for precise control over content area height. Useful when you want a specific height constraint rather than the default scrollable behavior.',
+      },
+    },
+  },
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Modal (maxHeight: 300px)</Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Document Preview"
+          maxHeight="300px"
+          size="lg"
+        >
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <p>This modal has a fixed maximum height of 300px for the content area.</p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor 
+              incididunt ut labore et dolore magna aliqua.
+            </p>
+            <p>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
+              aliquip ex ea commodo consequat.
+            </p>
+            <p>
+              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
+              eu fugiat nulla pariatur.
+            </p>
+            <p>
+              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
+              deserunt mollit anim id est laborum.
+            </p>
+            <p>
+              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
+              doloremque laudantium.
+            </p>
+          </div>
+          <ModalFooter>
+            <Button variant="ghost" onClick={() => setIsOpen(false)}>Close</Button>
+            <Button variant="primary" onClick={() => setIsOpen(false)}>Download</Button>
+          </ModalFooter>
+        </Modal>
+      </>
+    );
+  },
+};
+
+export const ScrollableWithViewportHeight: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Modal with `maxHeight="70vh"` - a common pattern for modals that should take up most of the viewport but leave some breathing room.',
+      },
+    },
+  },
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const items = Array.from({ length: 50 }, (_, i) => ({
+      id: i + 1,
+      name: `Item ${i + 1}`,
+      description: `Description for item ${i + 1}`,
+    }));
+    
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Data Table Modal (70vh)</Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Select Items"
+          maxHeight="70vh"
+          size="xl"
+        >
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+            <p style={{ color: '#666', marginBottom: '0.5rem' }}>
+              Select items from the list below. The content area is limited to 70% of viewport height.
+            </p>
+            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+              <thead>
+                <tr style={{ borderBottom: '2px solid #e5e5e4' }}>
+                  <th style={{ textAlign: 'left', padding: '0.75rem 0.5rem', fontWeight: 600 }}>ID</th>
+                  <th style={{ textAlign: 'left', padding: '0.75rem 0.5rem', fontWeight: 600 }}>Name</th>
+                  <th style={{ textAlign: 'left', padding: '0.75rem 0.5rem', fontWeight: 600 }}>Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                {items.map((item) => (
+                  <tr key={item.id} style={{ borderBottom: '1px solid #e5e5e4' }}>
+                    <td style={{ padding: '0.5rem' }}>{item.id}</td>
+                    <td style={{ padding: '0.5rem' }}>{item.name}</td>
+                    <td style={{ padding: '0.5rem' }}>{item.description}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <ModalFooter>
+            <Button variant="ghost" onClick={() => setIsOpen(false)}>Cancel</Button>
+            <Button variant="primary" onClick={() => setIsOpen(false)}>Select</Button>
+          </ModalFooter>
+        </Modal>
+      </>
+    );
+  },
+};

package/src/components/Modal.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef, useId } from 'react';
 import { X } from 'lucide-react';
+import { useIsMobile } from '../hooks/useResponsive';
+import BottomSheet from './BottomSheet';
 
 export interface ModalProps {
   isOpen: boolean;
@@ -10,6 +12,18 @@ export interface ModalProps {
   showCloseButton?: boolean;
   /** Animation variant for modal entrance (default: 'scale') */
   animation?: 'scale' | 'slide-up' | 'slide-down' | 'fade' | 'none';
+  /** Enable automatic scrolling for content that exceeds viewport height */
+  scrollable?: boolean;
+  /** Maximum height of the modal content area (e.g., '70vh', '500px') */
+  maxHeight?: string;
+  
+  // Mobile behavior props
+  /** Mobile display mode: 'auto' uses BottomSheet on mobile, 'modal' always uses modal, 'sheet' always uses BottomSheet */
+  mobileMode?: 'auto' | 'modal' | 'sheet';
+  /** Height preset for BottomSheet on mobile (default: 'lg') */
+  mobileHeight?: 'sm' | 'md' | 'lg' | 'full';
+  /** Show drag handle on BottomSheet (default: true) */
+  mobileShowHandle?: boolean;
 }
 
 const sizeClasses = {
@@ -20,6 +34,73 @@ const sizeClasses = {
   full: 'max-w-7xl',
 };
 
+/**
+ * Modal - Adaptive dialog component
+ * 
+ * On desktop, renders as a centered modal dialog.
+ * On mobile (when mobileMode='auto'), automatically renders as a BottomSheet
+ * for better touch interaction and visibility.
+ * 
+ * @example Basic modal
+ * ```tsx
+ * <Modal isOpen={isOpen} onClose={handleClose} title="Edit User">
+ *   <form>...</form>
+ *   <ModalFooter>
+ *     <Button onClick={handleClose}>Cancel</Button>
+ *     <Button variant="primary" onClick={handleSave}>Save</Button>
+ *   </ModalFooter>
+ * </Modal>
+ * ```
+ * 
+ * @example Scrollable modal for long content
+ * ```tsx
+ * <Modal 
+ *   isOpen={isOpen} 
+ *   onClose={handleClose} 
+ *   title="Terms and Conditions"
+ *   scrollable
+ * >
+ *   {longContent}
+ * </Modal>
+ * ```
+ * 
+ * @example Modal with custom max height
+ * ```tsx
+ * <Modal 
+ *   isOpen={isOpen} 
+ *   onClose={handleClose} 
+ *   title="Document Preview"
+ *   maxHeight="70vh"
+ * >
+ *   {documentContent}
+ * </Modal>
+ * ```
+ * 
+ * @example Force modal on mobile
+ * ```tsx
+ * <Modal 
+ *   isOpen={isOpen} 
+ *   onClose={handleClose} 
+ *   title="Settings"
+ *   mobileMode="modal"
+ * >
+ *   ...
+ * </Modal>
+ * ```
+ * 
+ * @example Always use BottomSheet
+ * ```tsx
+ * <Modal 
+ *   isOpen={isOpen} 
+ *   onClose={handleClose} 
+ *   title="Select Option"
+ *   mobileMode="sheet"
+ *   mobileHeight="md"
+ * >
+ *   ...
+ * </Modal>
+ * ```
+ */
 export default function Modal({
   isOpen,
   onClose,
@@ -28,13 +109,26 @@ export default function Modal({
   size = 'md',
   showCloseButton = true,
   animation = 'scale',
+  scrollable = false,
+  maxHeight,
+  mobileMode = 'auto',
+  mobileHeight = 'lg',
+  mobileShowHandle = true,
 }: ModalProps) {
   const modalRef = useRef<HTMLDivElement>(null);
   const mouseDownOnBackdrop = useRef(false);
   const titleId = useId();
+  const isMobile = useIsMobile();
 
-  // Handle escape key
+  // Determine if we should use BottomSheet
+  const useBottomSheet = 
+    mobileMode === 'sheet' || 
+    (mobileMode === 'auto' && isMobile);
+
+  // Handle escape key (only for modal mode, BottomSheet handles its own)
   useEffect(() => {
+    if (useBottomSheet) return; // BottomSheet handles escape
+    
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape' && isOpen) {
         onClose();
@@ -50,7 +144,7 @@ export default function Modal({
       document.removeEventListener('keydown', handleEscape);
       document.body.style.overflow = 'unset';
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, onClose, useBottomSheet]);
 
   // Track if mousedown originated on the backdrop
   const handleBackdropMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -89,6 +183,23 @@ export default function Modal({
 
   if (!isOpen) return null;
 
+  // Render as BottomSheet on mobile
+  if (useBottomSheet) {
+    return (
+      <BottomSheet
+        isOpen={isOpen}
+        onClose={onClose}
+        title={title}
+        height={mobileHeight}
+        showHandle={mobileShowHandle}
+        showCloseButton={showCloseButton}
+      >
+        {children}
+      </BottomSheet>
+    );
+  }
+
+  // Render as standard modal on desktop
   return (
     <div
       className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in"
@@ -119,7 +230,14 @@ export default function Modal({
         </div>
 
         {/* Content */}
-        <div className="px-6 py-4">{children}</div>
+        <div 
+          className={`px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`}
+          style={{
+            maxHeight: maxHeight || (scrollable ? 'calc(100vh - 200px)' : undefined),
+          }}
+        >
+          {children}
+        </div>
       </div>
     </div>
   );
@@ -127,7 +245,7 @@ export default function Modal({
 
 export function ModalFooter({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-paper-200 bg-paper-50">
+    <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-paper-200 bg-paper-50 -mx-6 -mb-4 mt-4 rounded-b-xl">
       {children}
     </div>
   );