@papernote/ui 1.3.1 → 1.6.0

package/src/components/Sidebar.tsx

@@ -1,6 +1,7 @@
 
-import React, { useState } from 'react';
-import { ChevronDown, ChevronRight } from 'lucide-react';
+import React, { useState, useEffect, useRef } from 'react';
+import { ChevronDown, ChevronRight, X } from 'lucide-react';
+import { createPortal } from 'react-dom';
 
 export interface SidebarItem {
   id: string;
@@ -22,6 +23,14 @@ export interface SidebarProps {
   header?: React.ReactNode; // Logo or header content
   footer?: React.ReactNode; // User profile or footer content
   currentPath?: string; // Current route for auto-active detection
+  
+  // Mobile drawer props
+  /** Whether sidebar is open on mobile (drawer mode) */
+  mobileOpen?: boolean;
+  /** Callback when mobile drawer should close */
+  onMobileClose?: () => void;
+  /** Width of the sidebar (default: 256px / w-64) */
+  width?: string;
 }
 
 export interface SidebarGroupProps {
@@ -48,9 +57,9 @@ function SidebarNavItem({
   // Auto-detect if this item or any child is active based on currentPath
   const isItemActive = currentPath && item.href ? currentPath === item.href : item.active;
   const isChildActive = hasChildren && currentPath
-    ? item.children?.some(child => currentPath === child.href || currentPath?.startsWith(child.href || ''))
+    ? item.children?.some(child => child.href && (currentPath === child.href || currentPath.startsWith(child.href)))
     : false;
-  const shouldExpandByDefault = isChildActive || (hasChildren && currentPath?.startsWith(item.href || ''));
+  const shouldExpandByDefault = isChildActive || (hasChildren && item.href && currentPath?.startsWith(item.href));
 
   const [isExpanded, setIsExpanded] = useState(shouldExpandByDefault);
 
@@ -169,15 +178,147 @@ export function SidebarGroup({ title, items, onNavigate, defaultExpanded = true,
   );
 }
 
-export default function Sidebar({ items, onNavigate, className = '', header, footer, currentPath }: SidebarProps) {
-  return (
-    <div className={`flex flex-col h-full bg-white border-r border-paper-300 notebook-binding ${className}`}>
-      {/* Header (Logo) */}
-      {header && (
+/**
+ * Sidebar - Navigation sidebar with mobile drawer support
+ * 
+ * On desktop: Renders as a fixed-width sidebar
+ * On mobile: Renders as a drawer overlay when mobileOpen is true
+ * 
+ * @example Desktop usage (no mobile props)
+ * ```tsx
+ * <Sidebar
+ *   items={navItems}
+ *   header={<Logo />}
+ *   footer={<UserProfile />}
+ *   currentPath={location.pathname}
+ *   onNavigate={(href) => navigate(href)}
+ * />
+ * ```
+ * 
+ * @example With mobile drawer support
+ * ```tsx
+ * const [mobileOpen, setMobileOpen] = useState(false);
+ * 
+ * <Sidebar
+ *   items={navItems}
+ *   header={<Logo />}
+ *   mobileOpen={mobileOpen}
+ *   onMobileClose={() => setMobileOpen(false)}
+ *   onNavigate={(href) => {
+ *     navigate(href);
+ *     setMobileOpen(false); // Close drawer on navigation
+ *   }}
+ * />
+ * ```
+ */
+export default function Sidebar({ 
+  items, 
+  onNavigate, 
+  className = '', 
+  header, 
+  footer, 
+  currentPath,
+  mobileOpen,
+  onMobileClose,
+  width = 'w-64',
+}: SidebarProps) {
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [shouldRender, setShouldRender] = useState(mobileOpen);
+
+  // Handle animation states for mobile drawer
+  useEffect(() => {
+    if (mobileOpen) {
+      setShouldRender(true);
+      // Small delay to trigger animation
+      requestAnimationFrame(() => {
+        setIsAnimating(true);
+      });
+      return; // No cleanup needed when opening
+    } else {
+      setIsAnimating(false);
+      // Wait for animation to complete before unmounting
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [mobileOpen]);
+
+  // Handle escape key for mobile drawer
+  useEffect(() => {
+    if (!mobileOpen) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onMobileClose?.();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [mobileOpen, onMobileClose]);
+
+  // Lock body scroll when mobile drawer is open
+  useEffect(() => {
+    if (mobileOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [mobileOpen]);
+
+  // Handle navigation with auto-close on mobile
+  const handleNavigate = (href: string, external?: boolean) => {
+    onNavigate?.(href, external);
+    // Auto-close mobile drawer on navigation
+    if (mobileOpen) {
+      onMobileClose?.();
+    }
+  };
+
+  // Sidebar content (shared between desktop and mobile)
+  const sidebarContent = (
+    <div 
+      ref={sidebarRef}
+      className={`flex flex-col h-full bg-white border-r border-paper-300 notebook-binding ${width} ${className}`}
+    >
+      {/* Mobile close button */}
+      {mobileOpen !== undefined && (
+        <div className="flex items-center justify-between px-4 pt-4 md:hidden">
+          <div className="flex-1">
+            {header}
+          </div>
+          <button
+            onClick={onMobileClose}
+            className="
+              flex items-center justify-center
+              w-10 h-10 -mr-2
+              text-ink-500 hover:text-ink-700
+              hover:bg-paper-100 rounded-full
+              transition-colors
+            "
+            aria-label="Close sidebar"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+      )}
+
+      {/* Header (Logo) - desktop only when mobile drawer has its own */}
+      {header && mobileOpen === undefined && (
         <div className="px-6 pt-6 pb-4">
           {header}
         </div>
       )}
+      {header && mobileOpen !== undefined && (
+        <div className="px-6 pt-2 pb-4 hidden md:block">
+          {header}
+        </div>
+      )}
 
       {/* Navigation */}
       <nav className="flex-1 px-3 py-2 space-y-1 overflow-y-auto">
@@ -192,7 +333,7 @@ export default function Sidebar({ items, onNavigate, className = '', header, foo
             <SidebarNavItem
               key={item.id}
               item={item}
-              onNavigate={onNavigate}
+              onNavigate={handleNavigate}
               currentPath={currentPath}
             />
           );
@@ -207,4 +348,46 @@ export default function Sidebar({ items, onNavigate, className = '', header, foo
       )}
     </div>
   );
+
+  // If mobileOpen is not defined, render as regular sidebar (desktop mode)
+  if (mobileOpen === undefined) {
+    return sidebarContent;
+  }
+
+  // Mobile drawer mode
+  if (!shouldRender) {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 md:hidden"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Navigation menu"
+    >
+      {/* Backdrop */}
+      <div
+        className={`
+          absolute inset-0 bg-ink-900/50 backdrop-blur-sm
+          transition-opacity duration-300
+          ${isAnimating ? 'opacity-100' : 'opacity-0'}
+        `}
+        onClick={onMobileClose}
+        aria-hidden="true"
+      />
+
+      {/* Sidebar drawer */}
+      <div
+        className={`
+          absolute inset-y-0 left-0 flex max-w-full
+          transition-transform duration-300 ease-out
+          ${isAnimating ? 'translate-x-0' : '-translate-x-full'}
+        `}
+      >
+        {sidebarContent}
+      </div>
+    </div>,
+    document.body
+  );
 }

package/src/components/SwipeActions.stories.tsx

@@ -0,0 +1,327 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SwipeActions from './SwipeActions';
+import { Trash, Archive, Edit, Star, Share, Mail, MoreHorizontal } from 'lucide-react';
+import Card, { CardContent } from './Card';
+import Text from './Text';
+import Badge from './Badge';
+import Stack from './Stack';
+
+const meta: Meta<typeof SwipeActions> = {
+  title: 'Mobile/SwipeActions',
+  component: SwipeActions,
+  parameters: {
+    layout: 'padded',
+    viewport: {
+      defaultViewport: 'mobileM',
+    },
+    docs: {
+      description: {
+        component: `
+Touch-based swipe actions for mobile list items. Reveals action buttons when
+swiping left or right, similar to iOS mail/messages.
+
+Features:
+- Left and right swipe directions
+- Multiple actions per side
+- Full swipe to trigger primary action
+- Spring-back animation
+- Touch and mouse support
+- Customizable thresholds
+        `,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-md mx-auto">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof SwipeActions>;
+
+const SampleListItem = ({ title, subtitle, badge }: { title: string; subtitle: string; badge?: string }) => (
+  <div className="p-4 bg-white border-b border-paper-200">
+    <div className="flex items-start justify-between">
+      <div className="flex-1 min-w-0">
+        <Text weight="medium" className="truncate">{title}</Text>
+        <Text size="sm" color="muted" className="truncate mt-0.5">{subtitle}</Text>
+      </div>
+      {badge && (
+        <Badge variant="primary" size="sm">{badge}</Badge>
+      )}
+    </div>
+  </div>
+);
+
+/**
+ * Basic swipe left to reveal delete action
+ */
+export const DeleteAction: Story = {
+  args: {
+    leftActions: [
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: <Trash className="h-5 w-5" />,
+        color: 'error',
+        onClick: () => alert('Delete clicked!'),
+        primary: true,
+      },
+    ],
+    children: <SampleListItem title="Swipe left to delete" subtitle="Try swiping this item to the left" />,
+  },
+};
+
+/**
+ * Multiple actions on the left side
+ */
+export const MultipleLeftActions: Story = {
+  args: {
+    leftActions: [
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: <Trash className="h-5 w-5" />,
+        color: 'error',
+        onClick: () => alert('Delete clicked!'),
+        primary: true,
+      },
+      {
+        id: 'archive',
+        label: 'Archive',
+        icon: <Archive className="h-5 w-5" />,
+        color: 'warning',
+        onClick: () => alert('Archive clicked!'),
+      },
+    ],
+    children: <SampleListItem title="Multiple delete options" subtitle="Swipe left to see archive and delete" />,
+  },
+};
+
+/**
+ * Actions on both sides
+ */
+export const BothSides: Story = {
+  args: {
+    leftActions: [
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: <Trash className="h-5 w-5" />,
+        color: 'error',
+        onClick: () => alert('Delete clicked!'),
+        primary: true,
+      },
+    ],
+    rightActions: [
+      {
+        id: 'edit',
+        label: 'Edit',
+        icon: <Edit className="h-5 w-5" />,
+        color: 'primary',
+        onClick: () => alert('Edit clicked!'),
+        primary: true,
+      },
+      {
+        id: 'star',
+        label: 'Star',
+        icon: <Star className="h-5 w-5" />,
+        color: 'warning',
+        onClick: () => alert('Star clicked!'),
+      },
+    ],
+    children: <SampleListItem title="Swipe both ways" subtitle="Left for delete, right for edit/star" />,
+  },
+};
+
+/**
+ * Full swipe to trigger action
+ */
+export const FullSwipe: Story = {
+  args: {
+    leftActions: [
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: <Trash className="h-5 w-5" />,
+        color: 'error',
+        onClick: () => alert('Deleted via full swipe!'),
+        primary: true,
+      },
+    ],
+    fullSwipe: true,
+    fullSwipeThreshold: 0.4,
+    children: <SampleListItem title="Full swipe to delete" subtitle="Swipe all the way left to delete instantly" badge="Full swipe" />,
+  },
+};
+
+/**
+ * Email-style actions (like iOS Mail)
+ */
+export const EmailStyle: Story = {
+  render: () => (
+    <Stack spacing="none">
+      <SwipeActions
+        leftActions={[
+          {
+            id: 'trash',
+            label: 'Trash',
+            icon: <Trash className="h-5 w-5" />,
+            color: 'error',
+            onClick: () => alert('Trash'),
+            primary: true,
+          },
+        ]}
+        rightActions={[
+          {
+            id: 'more',
+            label: 'More',
+            icon: <MoreHorizontal className="h-5 w-5" />,
+            color: 'default',
+            onClick: () => alert('More options'),
+          },
+          {
+            id: 'star',
+            label: 'Flag',
+            icon: <Star className="h-5 w-5" />,
+            color: 'warning',
+            onClick: () => alert('Flagged'),
+          },
+        ]}
+        fullSwipe
+      >
+        <SampleListItem 
+          title="Meeting reminder" 
+          subtitle="Don't forget the team sync at 3pm..." 
+          badge="New"
+        />
+      </SwipeActions>
+      
+      <SwipeActions
+        leftActions={[
+          {
+            id: 'trash',
+            label: 'Trash',
+            icon: <Trash className="h-5 w-5" />,
+            color: 'error',
+            onClick: () => alert('Trash'),
+            primary: true,
+          },
+        ]}
+        rightActions={[
+          {
+            id: 'more',
+            label: 'More',
+            icon: <MoreHorizontal className="h-5 w-5" />,
+            color: 'default',
+            onClick: () => alert('More options'),
+          },
+          {
+            id: 'reply',
+            label: 'Reply',
+            icon: <Mail className="h-5 w-5" />,
+            color: 'primary',
+            onClick: () => alert('Reply'),
+          },
+        ]}
+        fullSwipe
+      >
+        <SampleListItem 
+          title="Weekly report" 
+          subtitle="Here's the summary of this week's progress..." 
+        />
+      </SwipeActions>
+      
+      <SwipeActions
+        leftActions={[
+          {
+            id: 'archive',
+            label: 'Archive',
+            icon: <Archive className="h-5 w-5" />,
+            color: 'success',
+            onClick: () => alert('Archived'),
+            primary: true,
+          },
+        ]}
+        rightActions={[
+          {
+            id: 'share',
+            label: 'Share',
+            icon: <Share className="h-5 w-5" />,
+            color: 'primary',
+            onClick: () => alert('Share'),
+          },
+        ]}
+        fullSwipe
+      >
+        <SampleListItem 
+          title="Project update" 
+          subtitle="The new feature has been deployed to production..." 
+        />
+      </SwipeActions>
+    </Stack>
+  ),
+};
+
+/**
+ * Disabled state
+ */
+export const Disabled: Story = {
+  args: {
+    leftActions: [
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: <Trash className="h-5 w-5" />,
+        color: 'error',
+        onClick: () => alert('Delete clicked!'),
+      },
+    ],
+    disabled: true,
+    children: <SampleListItem title="Swipe disabled" subtitle="This item cannot be swiped" />,
+  },
+};
+
+/**
+ * In a card context
+ */
+export const InCard: Story = {
+  render: () => (
+    <Card>
+      <CardContent className="p-0">
+        <SwipeActions
+          leftActions={[
+            {
+              id: 'delete',
+              label: 'Delete',
+              icon: <Trash className="h-5 w-5" />,
+              color: 'error',
+              onClick: () => alert('Delete'),
+              primary: true,
+            },
+          ]}
+          rightActions={[
+            {
+              id: 'edit',
+              label: 'Edit',
+              icon: <Edit className="h-5 w-5" />,
+              color: 'primary',
+              onClick: () => alert('Edit'),
+            },
+          ]}
+        >
+          <div className="p-4">
+            <Text weight="semibold">Card with swipe actions</Text>
+            <Text size="sm" color="muted" className="mt-1">
+              Swipe left to delete, right to edit
+            </Text>
+          </div>
+        </SwipeActions>
+      </CardContent>
+    </Card>
+  ),
+};