@papernote/ui 1.3.1 → 1.5.0

package/src/components/Modal.stories.tsx

@@ -348,3 +348,186 @@ 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>
+      </>
+    );
+  },
+};

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,14 @@ export interface ModalProps {
   showCloseButton?: boolean;
   /** Animation variant for modal entrance (default: 'scale') */
   animation?: 'scale' | 'slide-up' | 'slide-down' | 'fade' | 'none';
+  
+  // 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 +30,49 @@ 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 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 +81,24 @@ export default function Modal({
   size = 'md',
   showCloseButton = true,
   animation = 'scale',
+  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 +114,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 +153,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"
@@ -127,7 +208,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>
   );

package/src/components/PullToRefresh.stories.tsx

@@ -0,0 +1,321 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { RefreshCw } from 'lucide-react';
+import PullToRefresh from './PullToRefresh';
+
+const meta: Meta<typeof PullToRefresh> = {
+  title: 'Mobile/PullToRefresh',
+  component: PullToRefresh,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+    docs: {
+      description: {
+        component: 'Native-feeling pull-to-refresh gesture handler for mobile content. Only activates when scrolled to top.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PullToRefresh>;
+
+// Helper component for interactive stories
+const RefreshableList = ({ 
+  itemCount = 10, 
+  pullThreshold = 80,
+  maxPull = 120,
+  disabled = false,
+}: { 
+  itemCount?: number;
+  pullThreshold?: number;
+  maxPull?: number;
+  disabled?: boolean;
+}) => {
+  const [items, setItems] = useState(() => 
+    Array.from({ length: itemCount }, (_, i) => ({
+      id: i + 1,
+      title: `Item ${i + 1}`,
+      timestamp: new Date().toLocaleTimeString(),
+    }))
+  );
+  const [refreshCount, setRefreshCount] = useState(0);
+
+  const handleRefresh = async () => {
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    
+    setRefreshCount(prev => prev + 1);
+    setItems(prev => [
+      {
+        id: Date.now(),
+        title: `New Item (Refresh #${refreshCount + 1})`,
+        timestamp: new Date().toLocaleTimeString(),
+      },
+      ...prev,
+    ]);
+  };
+
+  return (
+    <PullToRefresh 
+      onRefresh={handleRefresh}
+      pullThreshold={pullThreshold}
+      maxPull={maxPull}
+      disabled={disabled}
+      className="h-screen"
+    >
+      <div style={{ padding: '16px', background: '#f5f5f4', minHeight: '100vh' }}>
+        <div style={{ 
+          padding: '12px 16px', 
+          background: '#fef3c7', 
+          borderRadius: '8px', 
+          marginBottom: '16px',
+          fontSize: '14px',
+        }}>
+          <strong>Pull down to refresh</strong>
+          <p style={{ color: '#666', marginTop: '4px' }}>
+            Refreshed {refreshCount} times. Items: {items.length}
+          </p>
+        </div>
+        
+        {items.map((item) => (
+          <div 
+            key={item.id} 
+            style={{ 
+              padding: '16px', 
+              margin: '8px 0', 
+              background: 'white', 
+              borderRadius: '8px',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+            }}
+          >
+            <div style={{ fontWeight: '500' }}>{item.title}</div>
+            <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
+              Added at {item.timestamp}
+            </div>
+          </div>
+        ))}
+      </div>
+    </PullToRefresh>
+  );
+};
+
+export const Default: Story = {
+  render: () => <RefreshableList />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pull down from the top to trigger a refresh. The spinner appears after pulling past the threshold.',
+      },
+    },
+  },
+};
+
+export const LowThreshold: Story = {
+  render: () => <RefreshableList pullThreshold={50} maxPull={80} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Lower threshold (50px) makes it easier to trigger refresh.',
+      },
+    },
+  },
+};
+
+export const HighThreshold: Story = {
+  render: () => <RefreshableList pullThreshold={120} maxPull={180} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Higher threshold (120px) requires more pull distance to trigger refresh.',
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  render: () => <RefreshableList disabled />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pull-to-refresh can be disabled when not needed.',
+      },
+    },
+  },
+};
+
+export const CustomIndicator: Story = {
+  render: () => {
+    const [items, setItems] = useState(
+      Array.from({ length: 5 }, (_, i) => `Item ${i + 1}`)
+    );
+
+    const handleRefresh = async () => {
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      setItems(prev => [`New Item ${Date.now()}`, ...prev]);
+    };
+
+    return (
+      <PullToRefresh
+        onRefresh={handleRefresh}
+        loadingIndicator={
+          <RefreshCw className="h-6 w-6 text-green-600 animate-spin" />
+        }
+        pullIndicator={
+          <RefreshCw className="h-6 w-6 text-gray-400" />
+        }
+        className="h-screen"
+      >
+        <div style={{ padding: '16px', background: '#f5f5f4', minHeight: '100vh' }}>
+          <div style={{ 
+            padding: '12px 16px', 
+            background: '#dcfce7', 
+            borderRadius: '8px', 
+            marginBottom: '16px',
+          }}>
+            Custom refresh indicator (green spinner)
+          </div>
+          {items.map((item, i) => (
+            <div 
+              key={i} 
+              style={{ 
+                padding: '16px', 
+                margin: '8px 0', 
+                background: 'white', 
+                borderRadius: '8px' 
+              }}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
+      </PullToRefresh>
+    );
+  },
+};
+
+export const WithLongContent: Story = {
+  render: () => <RefreshableList itemCount={30} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'With long scrollable content. Pull-to-refresh only activates when scrolled to the very top.',
+      },
+    },
+  },
+};
+
+export const EmptyState: Story = {
+  render: () => {
+    const [items, setItems] = useState<string[]>([]);
+    const [loading, setLoading] = useState(false);
+
+    const handleRefresh = async () => {
+      setLoading(true);
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      setItems(['Fetched Item 1', 'Fetched Item 2', 'Fetched Item 3']);
+      setLoading(false);
+    };
+
+    return (
+      <PullToRefresh onRefresh={handleRefresh} className="h-screen">
+        <div style={{ 
+          padding: '16px', 
+          background: '#f5f5f4', 
+          minHeight: '100vh',
+          display: 'flex',
+          flexDirection: 'column',
+        }}>
+          {items.length === 0 ? (
+            <div style={{ 
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#666',
+            }}>
+              <RefreshCw className="h-12 w-12 mb-4 text-gray-300" />
+              <p style={{ fontWeight: '500' }}>No items yet</p>
+              <p style={{ fontSize: '14px' }}>Pull down to load items</p>
+            </div>
+          ) : (
+            items.map((item, i) => (
+              <div 
+                key={i} 
+                style={{ 
+                  padding: '16px', 
+                  margin: '8px 0', 
+                  background: 'white', 
+                  borderRadius: '8px' 
+                }}
+              >
+                {item}
+              </div>
+            ))
+          )}
+        </div>
+      </PullToRefresh>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pull-to-refresh works well with empty states to load initial data.',
+      },
+    },
+  },
+};
+
+export const MobileInstructions: Story = {
+  render: () => (
+    <div style={{ padding: '24px', background: '#f5f5f4', minHeight: '100vh' }}>
+      <h2 style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '16px' }}>
+        Pull to Refresh Component
+      </h2>
+      
+      <div style={{ background: 'white', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
+        <h3 style={{ fontWeight: '600', marginBottom: '8px' }}>Usage</h3>
+        <pre style={{ 
+          background: '#f1f5f9', 
+          padding: '12px', 
+          borderRadius: '4px', 
+          fontSize: '12px',
+          overflow: 'auto',
+        }}>
+{`<PullToRefresh
+  onRefresh={async () => {
+    await fetchLatestData();
+  }}
+  pullThreshold={80}
+  maxPull={120}
+>
+  {content}
+</PullToRefresh>`}
+        </pre>
+      </div>
+
+      <div style={{ background: 'white', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
+        <h3 style={{ fontWeight: '600', marginBottom: '8px' }}>Props</h3>
+        <ul style={{ fontSize: '14px', lineHeight: '1.6' }}>
+          <li><strong>onRefresh</strong>: Async function called on refresh</li>
+          <li><strong>pullThreshold</strong>: Distance to trigger (default: 80px)</li>
+          <li><strong>maxPull</strong>: Maximum pull distance (default: 120px)</li>
+          <li><strong>disabled</strong>: Disable pull-to-refresh</li>
+          <li><strong>loadingIndicator</strong>: Custom loading spinner</li>
+          <li><strong>pullIndicator</strong>: Custom pull indicator</li>
+        </ul>
+      </div>
+
+      <div style={{ background: '#fef3c7', padding: '16px', borderRadius: '8px' }}>
+        <h3 style={{ fontWeight: '600', marginBottom: '8px' }}>Testing</h3>
+        <p style={{ fontSize: '14px' }}>
+          To test on desktop, use Chrome DevTools mobile emulation with touch simulation enabled.
+          Click and drag down from the top of the content area.
+        </p>
+      </div>
+    </div>
+  ),
+};