@papernote/ui 1.3.1 → 1.6.0

package/src/components/MobileLayout.stories.tsx

@@ -0,0 +1,338 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MobileLayout from './MobileLayout';
+import { Home, CheckSquare, Settings, Users, Calendar, Bell, Search, Plus, User } from 'lucide-react';
+import Card, { CardHeader, CardTitle, CardContent } from './Card';
+import Text from './Text';
+import Stack from './Stack';
+import Button from './Button';
+import Badge from './Badge';
+
+const meta: Meta<typeof MobileLayout> = {
+  title: 'Layout/MobileLayout',
+  component: MobileLayout,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+Auto-responsive layout that switches between desktop and mobile patterns:
+
+- **Desktop (≥1024px)**: Standard sidebar layout with gutter and page navigation
+- **Mobile/Tablet (<1024px)**: Mobile header with drawer navigation and bottom tab bar
+
+Key features:
+- Automatic viewport detection
+- Drawer navigation on mobile
+- Bottom navigation bar
+- Safe area support for notched devices
+- Force mobile/desktop mode for testing
+        `,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: '100vh', overflow: 'hidden' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof MobileLayout>;
+
+const sampleSidebarItems = [
+  { id: 'home', label: 'Dashboard', icon: <Home className="h-5 w-5" />, href: '/' },
+  { id: 'tasks', label: 'Tasks', icon: <CheckSquare className="h-5 w-5" />, href: '/tasks', badge: 5 },
+  { id: 'calendar', label: 'Calendar', icon: <Calendar className="h-5 w-5" />, href: '/calendar' },
+  { id: 'users', label: 'Users', icon: <Users className="h-5 w-5" />, href: '/users' },
+  { id: 'settings', label: 'Settings', icon: <Settings className="h-5 w-5" />, href: '/settings' },
+];
+
+const DemoContent = () => (
+  <Stack spacing="md" className="p-4">
+    <Card>
+      <CardHeader>
+        <CardTitle>Welcome to MobileLayout</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Text>
+          This layout automatically adapts to your screen size. On desktop, you'll see 
+          the standard sidebar layout. On mobile, you'll see a hamburger menu, drawer 
+          navigation, and bottom tab bar.
+        </Text>
+      </CardContent>
+    </Card>
+    
+    <Card>
+      <CardHeader>
+        <CardTitle>Try Resizing</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Text>
+          Resize your browser window or use Storybook's viewport controls to see the 
+          layout switch between desktop and mobile modes.
+        </Text>
+      </CardContent>
+    </Card>
+    
+    <Card>
+      <CardHeader>
+        <CardTitle>Sample Data Card</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Stack spacing="sm">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <div key={i} className="flex justify-between items-center p-2 bg-paper-50 rounded">
+              <Text>Item {i}</Text>
+              <Badge variant="primary">Active</Badge>
+            </div>
+          ))}
+        </Stack>
+      </CardContent>
+    </Card>
+  </Stack>
+);
+
+const SimpleHeader = () => (
+  <div className="flex items-center gap-2 px-4 py-3">
+    <div className="w-8 h-8 rounded bg-accent-500 flex items-center justify-center text-white font-bold">
+      N
+    </div>
+    <Text weight="semibold">Notebook</Text>
+  </div>
+);
+
+const SimpleUserProfile = () => (
+  <div className="flex items-center gap-2 px-4 py-3 border-t border-paper-200">
+    <div className="w-8 h-8 rounded-full bg-paper-300 flex items-center justify-center">
+      <User className="h-4 w-4 text-ink-500" />
+    </div>
+    <div className="flex-1 min-w-0">
+      <Text size="sm" weight="medium" className="truncate">John Doe</Text>
+      <Text size="xs" color="muted" className="truncate">john@example.com</Text>
+    </div>
+  </div>
+);
+
+/**
+ * Default layout - automatically switches between desktop and mobile based on viewport.
+ */
+export const Default: Story = {
+  args: {
+    sidebarItems: sampleSidebarItems,
+    currentPath: '/',
+    title: 'Dashboard',
+    header: <SimpleHeader />,
+    userProfile: <SimpleUserProfile />,
+  },
+  render: (args) => (
+    <MobileLayout {...args}>
+      <DemoContent />
+    </MobileLayout>
+  ),
+};
+
+/**
+ * Force mobile layout regardless of viewport size - useful for testing.
+ */
+export const ForceMobile: Story = {
+  args: {
+    sidebarItems: sampleSidebarItems,
+    currentPath: '/',
+    title: 'Mobile Preview',
+    subtitle: 'Forced mobile layout',
+    header: <SimpleHeader />,
+    userProfile: <SimpleUserProfile />,
+    forceMobile: true,
+    headerRightAction: (
+      <Button variant="ghost" size="sm" iconOnly>
+        <Bell className="h-5 w-5" />
+      </Button>
+    ),
+  },
+  render: (args) => (
+    <MobileLayout {...args}>
+      <DemoContent />
+    </MobileLayout>
+  ),
+};
+
+/**
+ * Force desktop layout regardless of viewport size - useful for testing.
+ */
+export const ForceDesktop: Story = {
+  args: {
+    sidebarItems: sampleSidebarItems,
+    currentPath: '/',
+    title: 'Desktop Preview',
+    header: <SimpleHeader />,
+    userProfile: <SimpleUserProfile />,
+    forceDesktop: true,
+  },
+  render: (args) => (
+    <MobileLayout {...args}>
+      <DemoContent />
+    </MobileLayout>
+  ),
+};
+
+/**
+ * Mobile layout with custom bottom navigation items - useful when you want
+ * different items in the bottom nav than in the drawer.
+ */
+export const CustomBottomNav: Story = {
+  args: {
+    sidebarItems: sampleSidebarItems,
+    currentPath: '/',
+    title: 'My App',
+    forceMobile: true,
+    bottomNavItems: [
+      { id: 'home', label: 'Home', icon: <Home className="h-5 w-5" />, href: '/' },
+      { id: 'search', label: 'Search', icon: <Search className="h-5 w-5" />, href: '/search' },
+      { id: 'add', label: 'Add', icon: <Plus className="h-5 w-5" />, onClick: () => alert('Add clicked!') },
+      { id: 'notifications', label: 'Alerts', icon: <Bell className="h-5 w-5" />, href: '/notifications', badge: 3 },
+      { id: 'profile', label: 'Profile', icon: <User className="h-5 w-5" />, href: '/profile' },
+    ],
+    activeBottomNavId: 'home',
+  },
+  render: (args) => (
+    <MobileLayout {...args}>
+      <DemoContent />
+    </MobileLayout>
+  ),
+};
+
+/**
+ * Mobile layout without bottom navigation - useful for single-purpose screens.
+ */
+export const NoBottomNav: Story = {
+  args: {
+    sidebarItems: sampleSidebarItems,
+    currentPath: '/',
+    title: 'Detail View',
+    forceMobile: true,
+    hideBottomNav: true,
+    headerRightAction: (
+      <Button variant="primary" size="sm">
+        Save
+      </Button>
+    ),
+  },
+  render: (args) => (
+    <MobileLayout {...args}>
+      <DemoContent />
+    </MobileLayout>
+  ),
+};
+
+/**
+ * Mobile layout with primary variant header - uses accent color background.
+ */
+export const PrimaryHeader: Story = {
+  args: {
+    sidebarItems: sampleSidebarItems,
+    currentPath: '/',
+    title: 'Notebook App',
+    subtitle: 'Your daily companion',
+    forceMobile: true,
+    headerVariant: 'primary',
+    headerRightAction: (
+      <Button variant="ghost" size="sm" iconOnly className="text-white hover:bg-white/10">
+        <Bell className="h-5 w-5" />
+      </Button>
+    ),
+  },
+  render: (args) => (
+    <MobileLayout {...args}>
+      <DemoContent />
+    </MobileLayout>
+  ),
+};
+
+/**
+ * Desktop layout with page sections for gutter navigation.
+ */
+export const WithSections: Story = {
+  args: {
+    sidebarItems: sampleSidebarItems,
+    currentPath: '/',
+    title: 'With Sections',
+    header: <SimpleHeader />,
+    userProfile: <SimpleUserProfile />,
+    forceDesktop: true,
+    sections: [
+      { id: 'overview', label: 'Overview' },
+      { id: 'stats', label: 'Statistics' },
+      { id: 'activity', label: 'Activity' },
+    ],
+  },
+  render: (args) => (
+    <MobileLayout {...args}>
+      <div className="p-4 space-y-8">
+        <section id="overview">
+          <Card>
+            <CardHeader>
+              <CardTitle>Overview</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Text>Overview section content goes here.</Text>
+            </CardContent>
+          </Card>
+        </section>
+        
+        <section id="stats">
+          <Card>
+            <CardHeader>
+              <CardTitle>Statistics</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Text>Statistics section content goes here.</Text>
+            </CardContent>
+          </Card>
+        </section>
+        
+        <section id="activity">
+          <Card>
+            <CardHeader>
+              <CardTitle>Activity</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Text>Activity section content goes here.</Text>
+            </CardContent>
+          </Card>
+        </section>
+      </div>
+    </MobileLayout>
+  ),
+};
+
+/**
+ * Mobile layout without header - useful for full-screen content.
+ */
+export const NoHeader: Story = {
+  args: {
+    sidebarItems: sampleSidebarItems,
+    currentPath: '/',
+    forceMobile: true,
+    hideMobileHeader: true,
+  },
+  render: (args) => (
+    <MobileLayout {...args}>
+      <div className="p-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Full Screen Content</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Text>
+              This layout has no mobile header, giving you full control over the 
+              screen. The drawer can still be accessed programmatically.
+            </Text>
+          </CardContent>
+        </Card>
+      </div>
+    </MobileLayout>
+  ),
+};

package/src/components/MobileLayout.tsx

@@ -0,0 +1,313 @@
+// MobileLayout - Auto-responsive layout that switches between desktop and mobile patterns
+// Desktop: Standard sidebar layout
+// Mobile: Drawer navigation + bottom navigation bar + mobile header
+
+import React, { useState, useCallback, useEffect } from 'react';
+import { useIsMobile, useIsTablet } from '../hooks/useResponsive';
+import Sidebar, { SidebarItem } from './Sidebar';
+import MobileHeader, { MobileHeaderProps } from './MobileHeader';
+import BottomNavigation, { BottomNavItem, BottomNavigationSpacer } from './BottomNavigation';
+import { PageNavigation } from './PageNavigation';
+
+export interface Section {
+  /** Unique identifier for the section */
+  id: string;
+  /** Display label for the section in navigation */
+  label: string;
+}
+
+export interface MobileLayoutProps {
+  /** Main page content */
+  children: React.ReactNode;
+  
+  // Desktop sidebar props
+  /** Sidebar navigation items (required for both desktop sidebar and mobile drawer) */
+  sidebarItems: SidebarItem[];
+  /** Current active path for highlighting */
+  currentPath?: string;
+  /** Handler for navigation clicks */
+  onNavigate?: (href: string) => void;
+  /** Header component for sidebar (logo, branding, etc.) */
+  header?: React.ReactNode;
+  /** User profile button for sidebar footer */
+  userProfile?: React.ReactNode;
+  /** Additional sidebar content */
+  sidebarFooter?: React.ReactNode;
+  
+  // Mobile header props
+  /** Title displayed in mobile header (required for mobile layout) */
+  title: string;
+  /** Subtitle displayed in mobile header */
+  subtitle?: string;
+  /** Right action for mobile header */
+  headerRightAction?: React.ReactNode;
+  /** Custom left action for mobile header (overrides menu button) */
+  headerLeftAction?: React.ReactNode;
+  /** Mobile header variant */
+  headerVariant?: MobileHeaderProps['variant'];
+  
+  // Bottom navigation props
+  /** Bottom navigation items for mobile (if not provided, uses sidebarItems) */
+  bottomNavItems?: BottomNavItem[];
+  /** Active bottom nav item ID */
+  activeBottomNavId?: string;
+  /** Show labels on bottom nav */
+  showBottomNavLabels?: boolean;
+  
+  // Layout options
+  /** Optional status bar component displayed at the bottom (desktop only) */
+  statusBar?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+  /** Page sections for navigation dots in desktop gutter */
+  sections?: Section[];
+  /** Force mobile layout even on desktop */
+  forceMobile?: boolean;
+  /** Force desktop layout even on mobile */
+  forceDesktop?: boolean;
+  /** Hide bottom navigation on mobile */
+  hideBottomNav?: boolean;
+  /** Hide mobile header */
+  hideMobileHeader?: boolean;
+  /** Use safe area insets for notched devices */
+  safeArea?: boolean;
+}
+
+/**
+ * MobileLayout - Auto-responsive layout that switches between desktop and mobile patterns
+ *
+ * This component automatically detects the viewport size and renders the appropriate layout:
+ * - **Desktop** (≥1024px): Standard Layout with sidebar, gutter, and scrollable content
+ * - **Mobile/Tablet** (<1024px): Mobile header, drawer navigation, bottom tab bar
+ *
+ * The mobile layout features:
+ * - Sticky header with hamburger menu to open drawer
+ * - Sidebar rendered as a slide-in drawer
+ * - Bottom navigation bar for primary navigation
+ * - Safe area support for notched devices
+ *
+ * @example Basic usage
+ * ```tsx
+ * <MobileLayout
+ *   sidebarItems={[
+ *     { id: 'home', label: 'Home', icon: <Home />, href: '/' },
+ *     { id: 'tasks', label: 'Tasks', icon: <CheckSquare />, href: '/tasks' },
+ *     { id: 'settings', label: 'Settings', icon: <Settings />, href: '/settings' }
+ *   ]}
+ *   currentPath={location.pathname}
+ *   onNavigate={(href) => navigate(href)}
+ *   title="My App"
+ *   header={<Logo />}
+ *   userProfile={<UserProfileButton user={user} />}
+ * >
+ *   <Page>
+ *     <h1>Dashboard</h1>
+ *   </Page>
+ * </MobileLayout>
+ * ```
+ *
+ * @example With custom bottom nav items
+ * ```tsx
+ * <MobileLayout
+ *   sidebarItems={fullNavItems}
+ *   bottomNavItems={[
+ *     { id: 'home', label: 'Home', icon: <Home />, href: '/' },
+ *     { id: 'search', label: 'Search', icon: <Search />, href: '/search' },
+ *     { id: 'profile', label: 'Profile', icon: <User />, href: '/profile' }
+ *   ]}
+ *   currentPath={location.pathname}
+ *   title="My App"
+ * >
+ *   {children}
+ * </MobileLayout>
+ * ```
+ *
+ * @example Force mobile layout for testing
+ * ```tsx
+ * <MobileLayout
+ *   sidebarItems={items}
+ *   title="Mobile Preview"
+ *   forceMobile
+ * >
+ *   {children}
+ * </MobileLayout>
+ * ```
+ */
+export const MobileLayout: React.FC<MobileLayoutProps> = ({
+  children,
+  sidebarItems,
+  currentPath,
+  onNavigate,
+  header,
+  userProfile,
+  sidebarFooter,
+  title,
+  subtitle,
+  headerRightAction,
+  headerLeftAction,
+  headerVariant = 'solid',
+  bottomNavItems,
+  activeBottomNavId,
+  showBottomNavLabels = true,
+  statusBar,
+  className = '',
+  sections,
+  forceMobile = false,
+  forceDesktop = false,
+  hideBottomNav = false,
+  hideMobileHeader = false,
+  safeArea = true,
+}) => {
+  const isMobileViewport = useIsMobile();
+  const isTabletViewport = useIsTablet();
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  // Determine if we should use mobile layout
+  const useMobileLayout = forceDesktop 
+    ? false 
+    : forceMobile || isMobileViewport || isTabletViewport;
+
+  // Open/close drawer
+  const openDrawer = useCallback(() => setDrawerOpen(true), []);
+  const closeDrawer = useCallback(() => setDrawerOpen(false), []);
+
+  // Handle navigation from drawer - close drawer after navigation
+  const handleDrawerNavigate = useCallback((href: string) => {
+    closeDrawer();
+    onNavigate?.(href);
+  }, [closeDrawer, onNavigate]);
+
+  // Handle bottom nav navigation - matches BottomNavigation's onNavigate signature
+  const handleBottomNavNavigate = useCallback((id: string, href?: string) => {
+    if (href) {
+      onNavigate?.(href);
+    }
+    // Also check if there's a custom onClick in the bottom nav items
+    const item = bottomNavItems?.find(i => i.id === id);
+    item?.onClick?.();
+  }, [onNavigate, bottomNavItems]);
+
+  // Convert sidebar items to bottom nav items if not provided
+  const effectiveBottomNavItems: BottomNavItem[] = bottomNavItems || sidebarItems
+    .filter(item => !item.children && item.href) // Only top-level items with href
+    .slice(0, 5) // Max 5 items for bottom nav
+    .map(item => ({
+      id: item.id,
+      label: item.label,
+      icon: item.icon,
+      href: item.href,
+      badge: typeof item.badge === 'number' ? item.badge : undefined,
+    }));
+
+  // Determine active bottom nav ID
+  const effectiveActiveBottomNavId = activeBottomNavId || 
+    effectiveBottomNavItems.find(item => item.href === currentPath)?.id;
+
+  // Close drawer on escape key
+  useEffect(() => {
+    if (!drawerOpen) return;
+    
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        closeDrawer();
+      }
+    };
+    
+    window.addEventListener('keydown', handleEscape);
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [drawerOpen, closeDrawer]);
+
+  // Desktop Layout
+  if (!useMobileLayout) {
+    return (
+      <div className={`h-screen flex flex-col bg-paper-100 ${className}`}>
+        {/* Main layout - sidebar, gutter, and content */}
+        <div className="flex flex-1 overflow-hidden relative">
+          {/* Sidebar */}
+          <Sidebar
+            items={sidebarItems}
+            currentPath={currentPath}
+            onNavigate={onNavigate}
+            header={header}
+            footer={
+              <>
+                {userProfile}
+                {sidebarFooter}
+              </>
+            }
+          />
+
+          {/* Gutter area - between sidebar and content with page navigation */}
+          <div className="w-8 h-full bg-paper-100 flex-shrink-0 relative flex items-center justify-center">
+            <PageNavigation sections={sections} />
+          </div>
+
+          {/* Main content area - scrollable */}
+          <div className="flex-1 overflow-auto">
+            {children}
+          </div>
+        </div>
+
+        {/* Status Bar - at bottom (optional) */}
+        {statusBar}
+      </div>
+    );
+  }
+
+  // Mobile Layout
+  return (
+    <div className={`min-h-screen flex flex-col bg-paper-100 ${className}`}>
+      {/* Mobile Header */}
+      {!hideMobileHeader && (
+        <MobileHeader
+          title={title}
+          subtitle={subtitle}
+          onMenuClick={headerLeftAction ? undefined : openDrawer}
+          leftAction={headerLeftAction}
+          rightAction={headerRightAction}
+          variant={headerVariant}
+          sticky
+          bordered
+          safeArea={safeArea}
+        />
+      )}
+
+      {/* Drawer Sidebar */}
+      <Sidebar
+        items={sidebarItems}
+        currentPath={currentPath}
+        onNavigate={handleDrawerNavigate}
+        header={header}
+        footer={
+          <>
+            {userProfile}
+            {sidebarFooter}
+          </>
+        }
+        mobileOpen={drawerOpen}
+        onMobileClose={closeDrawer}
+      />
+
+      {/* Main content area */}
+      <div className="flex-1 overflow-auto">
+        {children}
+      </div>
+
+      {/* Bottom Navigation */}
+      {!hideBottomNav && effectiveBottomNavItems.length > 0 && (
+        <>
+          <BottomNavigationSpacer />
+          <BottomNavigation
+            items={effectiveBottomNavItems}
+            activeId={effectiveActiveBottomNavId}
+            onNavigate={handleBottomNavNavigate}
+            showLabels={showBottomNavLabels}
+            safeArea={safeArea}
+          />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default MobileLayout;