@papernote/ui 1.5.0 → 1.7.0

package/src/components/FormulaAutocomplete.tsx

@@ -0,0 +1,417 @@
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  FORMULA_DEFINITIONS,
+  searchFormulas,
+  getFormula,
+  FORMULA_CATEGORIES,
+  FormulaDefinition,
+  FormulaCategory,
+} from '../utils/formulaDefinitions';
+
+export interface FormulaAutocompleteProps {
+  /** Current input value */
+  value: string;
+  /** Callback when value changes */
+  onChange: (value: string) => void;
+  /** Callback when editing is complete */
+  onComplete: () => void;
+  /** Callback to cancel editing */
+  onCancel: () => void;
+  /** Position for the dropdown */
+  anchorRect: DOMRect | null;
+  /** Auto focus the input */
+  autoFocus?: boolean;
+  /** Custom class name */
+  className?: string;
+}
+
+interface FormulaHint {
+  formula: FormulaDefinition;
+  currentParamIndex: number;
+}
+
+/**
+ * FormulaAutocomplete - Input with formula intellisense
+ *
+ * Features:
+ * - Autocomplete dropdown when typing after '='
+ * - Function signature hints while typing parameters
+ * - Category-based browsing
+ * - Keyboard navigation
+ */
+const FormulaAutocomplete: React.FC<FormulaAutocompleteProps> = ({
+  value,
+  onChange,
+  onComplete,
+  onCancel,
+  anchorRect,
+  autoFocus = true,
+  className = '',
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [showHint, setShowHint] = useState(false);
+  const [hint, setHint] = useState<FormulaHint | null>(null);
+  const [activeCategory, setActiveCategory] = useState<FormulaCategory | null>(null);
+
+  // Parse the current formula context
+  const formulaContext = useMemo(() => {
+    if (!value.startsWith('=')) {
+      return { isFormula: false, query: '', inFunction: false, functionName: '', paramIndex: 0 };
+    }
+
+    const formulaText = value.substring(1);
+
+    // Check if we're typing a function name (before opening paren)
+    const functionMatch = formulaText.match(/^([A-Z]+)$/i);
+    if (functionMatch) {
+      return {
+        isFormula: true,
+        query: functionMatch[1].toUpperCase(),
+        inFunction: false,
+        functionName: '',
+        paramIndex: 0,
+      };
+    }
+
+    // Check if we're inside a function (after opening paren)
+    const insideFunctionMatch = formulaText.match(/^([A-Z]+)\((.*)$/i);
+    if (insideFunctionMatch) {
+      const functionName = insideFunctionMatch[1].toUpperCase();
+      const params = insideFunctionMatch[2];
+
+      // Count commas to determine parameter index (accounting for nested parens)
+      let paramIndex = 0;
+      let parenDepth = 0;
+      for (const char of params) {
+        if (char === '(') parenDepth++;
+        else if (char === ')') parenDepth--;
+        else if (char === ',' && parenDepth === 0) paramIndex++;
+      }
+
+      return {
+        isFormula: true,
+        query: '',
+        inFunction: true,
+        functionName,
+        paramIndex,
+      };
+    }
+
+    // Just '=' or other expression
+    return {
+      isFormula: true,
+      query: formulaText.toUpperCase(),
+      inFunction: false,
+      functionName: '',
+      paramIndex: 0,
+    };
+  }, [value]);
+
+  // Get matching formulas for dropdown
+  const matchingFormulas = useMemo(() => {
+    if (!formulaContext.isFormula || formulaContext.inFunction) return [];
+
+    if (activeCategory) {
+      const categoryFormulas = FORMULA_DEFINITIONS.filter(f => f.category === activeCategory);
+      if (formulaContext.query) {
+        return categoryFormulas.filter(f => f.name.startsWith(formulaContext.query));
+      }
+      return categoryFormulas;
+    }
+
+    if (formulaContext.query) {
+      return searchFormulas(formulaContext.query);
+    }
+
+    // Show all formulas grouped by first letter when just '='
+    return FORMULA_DEFINITIONS.slice(0, 20); // Show first 20 as default
+  }, [formulaContext, activeCategory]);
+
+  // Update hint when inside a function
+  useEffect(() => {
+    if (formulaContext.inFunction && formulaContext.functionName) {
+      const formula = getFormula(formulaContext.functionName);
+      if (formula) {
+        setHint({
+          formula,
+          currentParamIndex: formulaContext.paramIndex,
+        });
+        setShowHint(true);
+        setShowDropdown(false);
+      } else {
+        setShowHint(false);
+        setHint(null);
+      }
+    } else if (formulaContext.isFormula && !formulaContext.inFunction) {
+      setShowDropdown(true);
+      setShowHint(false);
+      setHint(null);
+    } else {
+      setShowDropdown(false);
+      setShowHint(false);
+      setHint(null);
+    }
+  }, [formulaContext]);
+
+  // Reset selected index when matches change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [matchingFormulas.length]);
+
+  // Auto-focus
+  useEffect(() => {
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [autoFocus]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (dropdownRef.current && showDropdown) {
+      const selectedItem = dropdownRef.current.querySelector(`[data-index="${selectedIndex}"]`);
+      if (selectedItem) {
+        selectedItem.scrollIntoView({ block: 'nearest' });
+      }
+    }
+  }, [selectedIndex, showDropdown]);
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (showDropdown && matchingFormulas.length > 0) {
+        switch (e.key) {
+          case 'ArrowDown':
+            e.preventDefault();
+            setSelectedIndex((prev) => Math.min(prev + 1, matchingFormulas.length - 1));
+            break;
+          case 'ArrowUp':
+            e.preventDefault();
+            setSelectedIndex((prev) => Math.max(prev - 1, 0));
+            break;
+          case 'Tab':
+          case 'Enter':
+            e.preventDefault();
+            insertFormula(matchingFormulas[selectedIndex]);
+            break;
+          case 'Escape':
+            e.preventDefault();
+            if (showDropdown) {
+              setShowDropdown(false);
+            } else {
+              onCancel();
+            }
+            break;
+        }
+      } else {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          onComplete();
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          onCancel();
+        }
+      }
+    },
+    [showDropdown, matchingFormulas, selectedIndex, onComplete, onCancel]
+  );
+
+  // Insert selected formula
+  const insertFormula = useCallback(
+    (formula: FormulaDefinition) => {
+      // Replace the current query with the formula name and open paren
+      const newValue = `=${formula.name}(`;
+      onChange(newValue);
+      setShowDropdown(false);
+      inputRef.current?.focus();
+    },
+    [onChange]
+  );
+
+  // Calculate dropdown position
+  const dropdownPosition = useMemo(() => {
+    if (!anchorRect) return { top: 0, left: 0 };
+    return {
+      top: anchorRect.bottom + 2,
+      left: anchorRect.left,
+    };
+  }, [anchorRect]);
+
+  // Prevent blur when clicking inside dropdown
+  const handleDropdownMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault(); // Prevents input from losing focus
+  }, []);
+
+  // Render parameter hint
+  const renderHint = () => {
+    if (!showHint || !hint) return null;
+
+    return createPortal(
+      <div
+        className="fixed z-[9999] bg-white border border-stone-200 rounded-lg shadow-lg p-3 max-w-md"
+        style={{
+          top: dropdownPosition.top,
+          left: dropdownPosition.left,
+        }}
+        onMouseDown={handleDropdownMouseDown}
+      >
+        {/* Function name and syntax */}
+        <div className="font-mono text-sm mb-2">
+          <span className="text-primary-600 font-semibold">{hint.formula.name}</span>
+          <span className="text-ink-500">(</span>
+          {hint.formula.parameters.map((param, idx) => (
+            <span key={param.name}>
+              {idx > 0 && <span className="text-ink-500">, </span>}
+              <span
+                className={`${
+                  idx === hint.currentParamIndex
+                    ? 'bg-primary-100 text-primary-700 px-1 rounded font-semibold'
+                    : param.optional
+                    ? 'text-ink-400'
+                    : 'text-ink-600'
+                }`}
+              >
+                {param.optional ? `[${param.name}]` : param.name}
+              </span>
+            </span>
+          ))}
+          <span className="text-ink-500">)</span>
+        </div>
+
+        {/* Description */}
+        <div className="text-xs text-ink-600 mb-2">{hint.formula.description}</div>
+
+        {/* Current parameter description */}
+        {hint.formula.parameters[hint.currentParamIndex] && (
+          <div className="text-xs bg-paper-50 p-2 rounded border border-stone-100">
+            <span className="font-semibold text-primary-600">
+              {hint.formula.parameters[hint.currentParamIndex].name}:
+            </span>{' '}
+            <span className="text-ink-600">
+              {hint.formula.parameters[hint.currentParamIndex].description}
+            </span>
+          </div>
+        )}
+      </div>,
+      document.body
+    );
+  };
+
+  // Render autocomplete dropdown
+  const renderDropdown = () => {
+    if (!showDropdown || matchingFormulas.length === 0) return null;
+
+    return createPortal(
+      <div
+        ref={dropdownRef}
+        className="fixed z-[9999] bg-white border border-stone-200 rounded-lg shadow-lg overflow-hidden"
+        style={{
+          top: dropdownPosition.top,
+          left: dropdownPosition.left,
+          minWidth: 320,
+          maxWidth: 450,
+          maxHeight: 300,
+        }}
+        onMouseDown={handleDropdownMouseDown}
+      >
+        {/* Category tabs */}
+        <div className="flex flex-wrap gap-1 p-2 border-b border-stone-100 bg-paper-50">
+          <button
+            className={`px-2 py-1 text-xs rounded ${
+              activeCategory === null
+                ? 'bg-primary-500 text-white'
+                : 'bg-white text-ink-600 hover:bg-stone-100'
+            }`}
+            onClick={() => {
+              setActiveCategory(null);
+              inputRef.current?.focus();
+            }}
+          >
+            All
+          </button>
+          {FORMULA_CATEGORIES.map((cat) => (
+            <button
+              key={cat}
+              className={`px-2 py-1 text-xs rounded ${
+                activeCategory === cat
+                  ? 'bg-primary-500 text-white'
+                  : 'bg-white text-ink-600 hover:bg-stone-100'
+              }`}
+              onClick={() => {
+                setActiveCategory(cat);
+                inputRef.current?.focus();
+              }}
+            >
+              {cat}
+            </button>
+          ))}
+        </div>
+
+        {/* Formula list */}
+        <div className="overflow-y-auto" style={{ maxHeight: 220 }}>
+          {matchingFormulas.map((formula, index) => (
+            <div
+              key={formula.name}
+              data-index={index}
+              className={`px-3 py-2 cursor-pointer border-b border-stone-50 ${
+                index === selectedIndex ? 'bg-primary-50' : 'hover:bg-paper-50'
+              }`}
+              onClick={() => insertFormula(formula)}
+              onMouseEnter={() => setSelectedIndex(index)}
+            >
+              <div className="flex items-center gap-2">
+                <span className="font-mono font-semibold text-primary-600 text-sm">
+                  {formula.name}
+                </span>
+                <span className="text-xs text-ink-400 bg-stone-100 px-1.5 py-0.5 rounded">
+                  {formula.category}
+                </span>
+              </div>
+              <div className="text-xs text-ink-500 mt-0.5 truncate">{formula.description}</div>
+              <div className="font-mono text-xs text-ink-400 mt-0.5">{formula.syntax}</div>
+            </div>
+          ))}
+        </div>
+
+        {/* Footer hint */}
+        <div className="px-3 py-1.5 bg-paper-50 border-t border-stone-100 text-xs text-ink-400">
+          <span className="font-medium">↑↓</span> navigate
+          <span className="mx-2">·</span>
+          <span className="font-medium">Tab/Enter</span> insert
+          <span className="mx-2">·</span>
+          <span className="font-medium">Esc</span> close
+        </div>
+      </div>,
+      document.body
+    );
+  };
+
+  return (
+    <>
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={() => {
+          // Delay to allow click on dropdown
+          setTimeout(() => {
+            setShowDropdown(false);
+            setShowHint(false);
+          }, 150);
+        }}
+        className={`w-full h-full border-none outline-none bg-transparent font-mono text-sm ${className}`}
+        style={{ margin: '-4px', padding: '4px' }}
+      />
+      {renderDropdown()}
+      {renderHint()}
+    </>
+  );
+};
+
+export default FormulaAutocomplete;

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>;
 
@@ -531,3 +546,193 @@ export const MobileFullScreen: Story = {
     );
   },
 };
+
+// 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

@@ -12,6 +12,10 @@ 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 */
@@ -48,6 +52,30 @@ const sizeClasses = {
  * </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 
@@ -81,6 +109,8 @@ export default function Modal({
   size = 'md',
   showCloseButton = true,
   animation = 'scale',
+  scrollable = false,
+  maxHeight,
   mobileMode = 'auto',
   mobileHeight = 'lg',
   mobileShowHandle = true,
@@ -200,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>
   );