@papernote/ui 1.3.1 → 1.6.0

package/src/components/FloatingActionButton.tsx

@@ -0,0 +1,301 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Plus, X } from 'lucide-react';
+import { createPortal } from 'react-dom';
+
+/**
+ * Action item for FAB menu
+ */
+export interface FABAction {
+  /** Unique identifier */
+  id: string;
+  /** Icon for the action */
+  icon: React.ReactNode;
+  /** Label text (shown on hover/long-press) */
+  label: string;
+  /** Click handler */
+  onClick: () => void;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+/**
+ * FloatingActionButton component props
+ */
+export interface FloatingActionButtonProps {
+  /** Primary action when FAB is clicked (without menu) */
+  onClick?: () => void;
+  /** Icon for the FAB - defaults to Plus */
+  icon?: React.ReactNode;
+  /** Secondary actions shown in menu */
+  actions?: FABAction[];
+  /** Position on screen */
+  position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
+  /** Color variant */
+  variant?: 'primary' | 'secondary' | 'accent';
+  /** Size */
+  size?: 'md' | 'lg';
+  /** Accessible label */
+  label?: string;
+  /** Extended FAB with text label */
+  extended?: boolean;
+  /** Text for extended FAB */
+  extendedLabel?: string;
+  /** Hide FAB (useful for scroll-based show/hide) */
+  hidden?: boolean;
+  /** Custom offset from edge (in pixels) */
+  offset?: { x?: number; y?: number };
+  /** Additional class names */
+  className?: string;
+}
+
+const positionClasses = {
+  'bottom-right': 'right-4 bottom-4',
+  'bottom-left': 'left-4 bottom-4',
+  'bottom-center': 'left-1/2 -translate-x-1/2 bottom-4',
+};
+
+const variantClasses = {
+  primary: 'bg-accent-600 hover:bg-accent-700 text-white shadow-lg',
+  secondary: 'bg-white hover:bg-paper-50 text-ink-700 shadow-lg border border-paper-200',
+  accent: 'bg-accent-500 hover:bg-accent-600 text-white shadow-lg',
+};
+
+const sizeClasses = {
+  md: 'w-14 h-14',
+  lg: 'w-16 h-16',
+};
+
+const iconSizeClasses = {
+  md: 'h-6 w-6',
+  lg: 'h-7 w-7',
+};
+
+/**
+ * FloatingActionButton - Material Design style FAB for mobile
+ * 
+ * A prominent button for the primary action on a screen.
+ * Supports single action or expandable menu with multiple actions.
+ * 
+ * @example Simple FAB
+ * ```tsx
+ * <FloatingActionButton
+ *   onClick={() => openCreateModal()}
+ *   label="Create new item"
+ * />
+ * ```
+ * 
+ * @example FAB with action menu
+ * ```tsx
+ * <FloatingActionButton
+ *   actions={[
+ *     { id: 'photo', icon: <Camera />, label: 'Take Photo', onClick: takePhoto },
+ *     { id: 'upload', icon: <Upload />, label: 'Upload File', onClick: uploadFile },
+ *     { id: 'note', icon: <FileText />, label: 'Create Note', onClick: createNote },
+ *   ]}
+ * />
+ * ```
+ * 
+ * @example Extended FAB
+ * ```tsx
+ * <FloatingActionButton
+ *   extended
+ *   extendedLabel="New Task"
+ *   icon={<Plus />}
+ *   onClick={createTask}
+ * />
+ * ```
+ */
+export default function FloatingActionButton({
+  onClick,
+  icon,
+  actions,
+  position = 'bottom-right',
+  variant = 'primary',
+  size = 'md',
+  label = 'Action button',
+  extended = false,
+  extendedLabel,
+  hidden = false,
+  offset,
+  className = '',
+}: FloatingActionButtonProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const fabRef = useRef<HTMLButtonElement>(null);
+  const hasMenu = actions && actions.length > 0;
+
+  // Close menu on escape
+  useEffect(() => {
+    if (!isMenuOpen) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsMenuOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isMenuOpen]);
+
+  // Close menu on click outside
+  useEffect(() => {
+    if (!isMenuOpen) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (fabRef.current && !fabRef.current.contains(e.target as Node)) {
+        setIsMenuOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isMenuOpen]);
+
+  const handleClick = () => {
+    if (hasMenu) {
+      setIsMenuOpen(!isMenuOpen);
+    } else if (onClick) {
+      onClick();
+    }
+  };
+
+  const handleActionClick = (action: FABAction) => {
+    if (!action.disabled) {
+      action.onClick();
+      setIsMenuOpen(false);
+    }
+  };
+
+  // Custom offset styles
+  const offsetStyle = offset ? {
+    ...(offset.x !== undefined && position.includes('right') ? { right: `${offset.x}px` } : {}),
+    ...(offset.x !== undefined && position.includes('left') ? { left: `${offset.x}px` } : {}),
+    ...(offset.y !== undefined ? { bottom: `${offset.y}px` } : {}),
+  } : {};
+
+  const fabContent = (
+    <div
+      className={`
+        fixed z-40 transition-all duration-300
+        ${positionClasses[position]}
+        ${hidden ? 'translate-y-20 opacity-0 pointer-events-none' : 'translate-y-0 opacity-100'}
+        ${className}
+      `}
+      style={{
+        ...offsetStyle,
+        paddingBottom: 'env(safe-area-inset-bottom)',
+      }}
+    >
+      {/* Action Menu */}
+      {hasMenu && isMenuOpen && (
+        <div className="absolute bottom-full mb-3 flex flex-col-reverse gap-3 items-center">
+          {actions.map((action, index) => (
+            <div
+              key={action.id}
+              className="flex items-center gap-3 animate-fade-in"
+              style={{ animationDelay: `${index * 50}ms` }}
+            >
+              {/* Label */}
+              <span className="bg-ink-900/80 text-white text-sm px-3 py-1.5 rounded-lg whitespace-nowrap">
+                {action.label}
+              </span>
+              
+              {/* Mini FAB */}
+              <button
+                onClick={() => handleActionClick(action)}
+                disabled={action.disabled}
+                className={`
+                  w-12 h-12 rounded-full flex items-center justify-center
+                  transition-all duration-200
+                  ${action.disabled
+                    ? 'bg-paper-200 text-ink-400 cursor-not-allowed'
+                    : 'bg-white text-ink-700 shadow-lg hover:bg-paper-50 active:scale-95'
+                  }
+                `}
+                aria-label={action.label}
+              >
+                {action.icon}
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Backdrop for menu */}
+      {hasMenu && isMenuOpen && (
+        <div
+          className="fixed inset-0 bg-black/20 -z-10 animate-fade-in"
+          onClick={() => setIsMenuOpen(false)}
+        />
+      )}
+
+      {/* Main FAB */}
+      <button
+        ref={fabRef}
+        onClick={handleClick}
+        className={`
+          ${extended ? 'px-6 rounded-full' : 'rounded-full'}
+          ${extended ? 'h-14' : sizeClasses[size]}
+          ${variantClasses[variant]}
+          flex items-center justify-center gap-2
+          transition-all duration-200
+          active:scale-95
+          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400
+        `}
+        aria-label={label}
+        aria-expanded={hasMenu ? isMenuOpen : undefined}
+        aria-haspopup={hasMenu ? 'menu' : undefined}
+      >
+        {hasMenu && isMenuOpen ? (
+          <X className={iconSizeClasses[size]} />
+        ) : (
+          icon || <Plus className={iconSizeClasses[size]} />
+        )}
+        {extended && extendedLabel && (
+          <span className="font-medium">{extendedLabel}</span>
+        )}
+      </button>
+    </div>
+  );
+
+  // Render via portal to ensure proper stacking
+  return createPortal(fabContent, document.body);
+}
+
+/**
+ * Hook for scroll-based FAB visibility
+ * 
+ * @example
+ * ```tsx
+ * const { hidden, scrollDirection } = useFABScroll();
+ * <FloatingActionButton hidden={hidden} />
+ * ```
+ */
+export function useFABScroll(threshold = 10): { hidden: boolean; scrollDirection: 'up' | 'down' | null } {
+  const [hidden, setHidden] = useState(false);
+  const [scrollDirection, setScrollDirection] = useState<'up' | 'down' | null>(null);
+  const lastScrollY = useRef(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      const diff = currentScrollY - lastScrollY.current;
+
+      if (Math.abs(diff) > threshold) {
+        if (diff > 0) {
+          setHidden(true);
+          setScrollDirection('down');
+        } else {
+          setHidden(false);
+          setScrollDirection('up');
+        }
+        lastScrollY.current = currentScrollY;
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [threshold]);
+
+  return { hidden, scrollDirection };
+}

package/src/components/Grid.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Grid } from './Grid';
 import Box from './Box';
 import Text from './Text';
-import Card from './Card';
+import Card, { CardHeader, CardTitle, CardContent } from './Card';
 
 const meta = {
   title: 'Layout/Grid',
@@ -251,28 +251,28 @@ export const WithCards: Story = {
   render: () => (
     <Grid columns={1} md={2} lg={3} gap="md">
       <Card>
-        <Card.Header>
-          <Card.Title>Card 1</Card.Title>
-        </Card.Header>
-        <Card.Content>
+        <CardHeader>
+          <CardTitle>Card 1</CardTitle>
+        </CardHeader>
+        <CardContent>
           <Text color="secondary">Content for the first card.</Text>
-        </Card.Content>
+        </CardContent>
       </Card>
       <Card>
-        <Card.Header>
-          <Card.Title>Card 2</Card.Title>
-        </Card.Header>
-        <Card.Content>
+        <CardHeader>
+          <CardTitle>Card 2</CardTitle>
+        </CardHeader>
+        <CardContent>
           <Text color="secondary">Content for the second card.</Text>
-        </Card.Content>
+        </CardContent>
       </Card>
       <Card>
-        <Card.Header>
-          <Card.Title>Card 3</Card.Title>
-        </Card.Header>
-        <Card.Content>
+        <CardHeader>
+          <CardTitle>Card 3</CardTitle>
+        </CardHeader>
+        <CardContent>
           <Text color="secondary">Content for the third card.</Text>
-        </Card.Content>
+        </CardContent>
       </Card>
     </Grid>
   ),

package/src/components/Input.stories.tsx

@@ -367,3 +367,217 @@ export const LoginForm: Story = {
     );
   },
 };
+
+// Mobile-optimized stories
+export const MobileLargeTouch: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Large size (lg) input provides 44px minimum touch target for mobile devices, meeting Apple HIG guidelines.',
+      },
+    },
+  },
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        label="Mobile-Friendly Input"
+        size="lg"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder="44px touch target"
+        helperText="Large size for easy touch interaction"
+      />
+    );
+  },
+};
+
+export const MobilePhoneInput: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Phone input with inputMode="tel" shows numeric keyboard on mobile devices.',
+      },
+    },
+  },
+  render: () => {
+    const [phone, setPhone] = useState('');
+    return (
+      <Input
+        label="Phone Number"
+        type="tel"
+        inputMode="tel"
+        enterKeyHint="done"
+        size="lg"
+        value={phone}
+        onChange={(e) => setPhone(e.target.value)}
+        placeholder="(555) 123-4567"
+        helperText="Shows numeric keyboard on mobile"
+      />
+    );
+  },
+};
+
+export const MobileEmailInput: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Email input with inputMode="email" shows email-optimized keyboard with @ and .com buttons.',
+      },
+    },
+  },
+  render: () => {
+    const [email, setEmail] = useState('');
+    return (
+      <Input
+        label="Email Address"
+        type="email"
+        inputMode="email"
+        enterKeyHint="next"
+        size="lg"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        prefixIcon={<Mail className="h-5 w-5" />}
+        placeholder="you@example.com"
+        helperText="Shows email keyboard with @ button"
+      />
+    );
+  },
+};
+
+export const MobileSearchInput: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Search input with inputMode="search" and enterKeyHint="search" shows search-optimized keyboard.',
+      },
+    },
+  },
+  render: () => {
+    const [search, setSearch] = useState('');
+    return (
+      <Input
+        label="Search"
+        type="search"
+        inputMode="search"
+        enterKeyHint="search"
+        size="lg"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        prefixIcon={<Search className="h-5 w-5" />}
+        placeholder="Search products..."
+        clearable
+        onClear={() => setSearch('')}
+        helperText="Shows search keyboard with Search button"
+      />
+    );
+  },
+};
+
+export const MobileNumericInput: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Numeric input with inputMode="decimal" shows decimal number keyboard for currency/amounts.',
+      },
+    },
+  },
+  render: () => {
+    const [amount, setAmount] = useState('');
+    return (
+      <Input
+        label="Amount"
+        type="text"
+        inputMode="decimal"
+        enterKeyHint="done"
+        size="lg"
+        value={amount}
+        onChange={(e) => setAmount(e.target.value)}
+        prefix="$"
+        placeholder="0.00"
+        helperText="Shows decimal keyboard on mobile"
+      />
+    );
+  },
+};
+
+export const MobileLoginForm: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'Complete mobile login form with appropriate keyboard types and enter key hints for smooth form flow.',
+      },
+    },
+  },
+  render: () => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', padding: '1rem' }}>
+        <h2 style={{ fontSize: '1.25rem', fontWeight: 600, marginBottom: '0.5rem' }}>Sign In</h2>
+        <Input
+          label="Email"
+          type="email"
+          inputMode="email"
+          enterKeyHint="next"
+          size="lg"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          prefixIcon={<Mail className="h-5 w-5" />}
+          placeholder="you@example.com"
+          required
+        />
+        <Input
+          label="Password"
+          type="password"
+          enterKeyHint="done"
+          size="lg"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          prefixIcon={<Lock className="h-5 w-5" />}
+          placeholder="Enter password"
+          showPasswordToggle
+          required
+        />
+        <p style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.5rem' }}>
+          Tap inputs to see mobile keyboard optimizations
+        </p>
+      </div>
+    );
+  },
+};
+
+export const MobileURLInput: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs: {
+      description: {
+        story: 'URL input with inputMode="url" shows URL-optimized keyboard with / and .com buttons.',
+      },
+    },
+  },
+  render: () => {
+    const [url, setUrl] = useState('');
+    return (
+      <Input
+        label="Website URL"
+        type="url"
+        inputMode="url"
+        enterKeyHint="go"
+        size="lg"
+        value={url}
+        onChange={(e) => setUrl(e.target.value)}
+        prefix="https://"
+        placeholder="example.com"
+        helperText="Shows URL keyboard with / and .com"
+      />
+    );
+  },
+};