@papernote/ui 1.3.1 → 1.6.0

package/src/components/ConfirmDialog.tsx

@@ -4,10 +4,12 @@
  *
  * Replaces window.confirm() with a styled, accessible modal dialog.
  * Supports different variants (danger, warning, info) and customizable buttons.
+ * 
+ * On mobile, automatically renders as a BottomSheet for better touch interaction.
  */
 
 import React from 'react';
-import Modal, { ModalFooter } from './Modal';
+import Modal, { ModalFooter, ModalProps } from './Modal';
 import { AlertTriangle, Info, Trash2 } from 'lucide-react';
 
 export interface ConfirmDialogProps {
@@ -21,6 +23,10 @@ export interface ConfirmDialogProps {
   variant?: 'danger' | 'warning' | 'info';
   icon?: React.ReactNode;
   isLoading?: boolean;
+  /** Mobile display mode (inherited from Modal) */
+  mobileMode?: ModalProps['mobileMode'];
+  /** Height preset for BottomSheet on mobile */
+  mobileHeight?: ModalProps['mobileHeight'];
 }
 
 const variantStyles = {
@@ -44,6 +50,41 @@ const variantStyles = {
   },
 };
 
+/**
+ * ConfirmDialog - Confirmation dialog with mobile support
+ * 
+ * @example Basic usage
+ * ```tsx
+ * <ConfirmDialog
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   onConfirm={handleDelete}
+ *   title="Delete Item"
+ *   message="Are you sure you want to delete this item? This action cannot be undone."
+ *   variant="danger"
+ * />
+ * ```
+ * 
+ * @example With useConfirmDialog hook
+ * ```tsx
+ * const confirmDialog = useConfirmDialog();
+ * 
+ * const handleDelete = () => {
+ *   confirmDialog.show({
+ *     title: 'Delete Item',
+ *     message: 'Are you sure?',
+ *     onConfirm: async () => await deleteItem(),
+ *   });
+ * };
+ * 
+ * return (
+ *   <>
+ *     <button onClick={handleDelete}>Delete</button>
+ *     <ConfirmDialog {...confirmDialog.props} />
+ *   </>
+ * );
+ * ```
+ */
 export default function ConfirmDialog({
   isOpen,
   onClose,
@@ -55,6 +96,8 @@ export default function ConfirmDialog({
   variant = 'danger',
   icon,
   isLoading = false,
+  mobileMode = 'auto',
+  mobileHeight = 'sm',
 }: ConfirmDialogProps) {
   const variantStyle = variantStyles[variant];
   const IconComponent = icon || variantStyle.icon;
@@ -65,7 +108,16 @@ export default function ConfirmDialog({
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} title={typeof title === 'string' ? title : String(title)} size="sm" showCloseButton={false}>
+    <Modal 
+      isOpen={isOpen} 
+      onClose={onClose} 
+      title={typeof title === 'string' ? title : String(title)} 
+      size="sm" 
+      showCloseButton={false}
+      mobileMode={mobileMode}
+      mobileHeight={mobileHeight}
+      mobileShowHandle={false}
+    >
       <div className="flex items-start gap-4">
         {/* Icon */}
         <div className={`flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full ${variantStyle.iconBg}`}>
@@ -89,14 +141,14 @@ export default function ConfirmDialog({
         <button
           onClick={onClose}
           disabled={isLoading}
-          className="px-4 py-2 text-sm font-medium text-ink-700 bg-white border border-paper-300 rounded-lg hover:bg-paper-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          className="px-4 py-2 text-sm font-medium text-ink-700 bg-white border border-paper-300 rounded-lg hover:bg-paper-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors min-h-touch-sm"
         >
           {typeof cancelLabel === 'string' ? cancelLabel : String(cancelLabel)}
         </button>
         <button
           onClick={handleConfirm}
           disabled={isLoading}
-          className={`px-4 py-2 text-sm font-medium text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${variantStyle.button}`}
+          className={`px-4 py-2 text-sm font-medium text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors min-h-touch-sm ${variantStyle.button}`}
         >
           {isLoading ? (
             <span className="flex items-center gap-2">

package/src/components/DataTable.tsx

@@ -5,6 +5,8 @@ import { ChevronDown, ChevronRight, MoreVertical, Edit, Trash } from 'lucide-rea
 import Menu, { MenuItem } from './Menu';
 import Pagination from './Pagination';
 import Select from './Select';
+import DataTableCardView, { CardViewConfig } from './DataTableCardView';
+import { useIsMobile } from '../hooks/useResponsive';
 
 /**
  * Base data item interface - all data items must have an id
@@ -247,6 +249,16 @@ interface DataTableProps<T extends BaseDataItem = BaseDataItem> {
   onPageSizeChange?: (pageSize: number) => void;
   /** Show page size selector (default: true when paginated) */
   showPageSizeSelector?: boolean;
+
+  // Mobile view props
+  /** Mobile view mode: 'auto' (detect viewport), 'card' (always cards), 'table' (always table) */
+  mobileView?: 'auto' | 'card' | 'table';
+  /** Configuration for card view layout */
+  cardConfig?: CardViewConfig<T>;
+  /** Gap between cards in card view */
+  cardGap?: 'sm' | 'md' | 'lg';
+  /** Custom class name for cards */
+  cardClassName?: string;
 }
 
 /**
@@ -517,7 +529,14 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
   pageSizeOptions = [10, 25, 50, 100],
   onPageSizeChange,
   showPageSizeSelector = true,
+  // Mobile view props
+  mobileView = 'auto',
+  cardConfig,
+  cardGap = 'md',
+  cardClassName,
 }: DataTableProps<T>) {
+  // Mobile detection for auto mode
+  const isMobileViewport = useIsMobile();
   // Column resizing state
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
   const [resizingColumn, setResizingColumn] = useState<string | null>(null);
@@ -1536,11 +1555,51 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
     );
   };
 
+  // Determine if we should show card view
+  const shouldShowCardView = 
+    mobileView === 'card' || 
+    (mobileView === 'auto' && isMobileViewport);
+
+  // Card view content
+  const cardViewContent = shouldShowCardView ? (
+    <DataTableCardView
+      data={data}
+      columns={visibleColumns}
+      cardConfig={cardConfig}
+      loading={loading}
+      loadingRows={loadingRows}
+      emptyMessage={emptyMessage}
+      onCardClick={onRowClick}
+      onCardLongPress={(item, event) => {
+        if (enableContextMenu && allActions.length > 0) {
+          event.preventDefault();
+          const clientX = 'touches' in event ? event.touches[0].clientX : (event as React.MouseEvent).clientX;
+          const clientY = 'touches' in event ? event.touches[0].clientY : (event as React.MouseEvent).clientY;
+          setContextMenuState({
+            isOpen: true,
+            position: { x: clientX, y: clientY },
+            item,
+          });
+        }
+      }}
+      selectable={selectable}
+      selectedRows={selectedRowsSet}
+      onSelectionChange={onRowSelect ? (rows) => onRowSelect(rows) : undefined}
+      keyExtractor={getRowKey}
+      actions={allActions}
+      onEdit={onEdit}
+      onDelete={onDelete}
+      className={className}
+      cardClassName={cardClassName}
+      gap={cardGap}
+    />
+  ) : null;
+
   // Render with context menu
   return (
     <>
       {renderPaginationControls()}
-      {finalContent}
+      {shouldShowCardView ? cardViewContent : finalContent}
       {contextMenuState.isOpen && contextMenuState.item && (
         <Menu
           items={convertActionsToMenuItems(contextMenuState.item)}

package/src/components/DataTableCardView.stories.tsx

@@ -0,0 +1,307 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import DataTableCardView from './DataTableCardView';
+import { DataTableColumn } from './DataTable';
+import Badge from './Badge';
+import { Edit, Trash, Eye, Mail } from 'lucide-react';
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  department: string;
+  role: string;
+  status: 'active' | 'inactive' | 'pending';
+  avatar?: string;
+  joinDate: string;
+}
+
+const sampleUsers: User[] = [
+  {
+    id: '1',
+    name: 'John Smith',
+    email: 'john.smith@example.com',
+    department: 'Engineering',
+    role: 'Senior Developer',
+    status: 'active',
+    joinDate: '2023-01-15',
+  },
+  {
+    id: '2',
+    name: 'Sarah Johnson',
+    email: 'sarah.j@example.com',
+    department: 'Design',
+    role: 'UX Designer',
+    status: 'active',
+    joinDate: '2023-03-22',
+  },
+  {
+    id: '3',
+    name: 'Mike Wilson',
+    email: 'mike.w@example.com',
+    department: 'Marketing',
+    role: 'Marketing Manager',
+    status: 'pending',
+    joinDate: '2024-01-10',
+  },
+  {
+    id: '4',
+    name: 'Emily Davis',
+    email: 'emily.d@example.com',
+    department: 'Engineering',
+    role: 'DevOps Engineer',
+    status: 'inactive',
+    joinDate: '2022-06-05',
+  },
+  {
+    id: '5',
+    name: 'Alex Chen',
+    email: 'alex.c@example.com',
+    department: 'Product',
+    role: 'Product Manager',
+    status: 'active',
+    joinDate: '2023-09-01',
+  },
+];
+
+const columns: DataTableColumn<User>[] = [
+  { key: 'name', header: 'Name' },
+  { key: 'email', header: 'Email' },
+  { key: 'department', header: 'Department' },
+  { key: 'role', header: 'Role' },
+  {
+    key: 'status',
+    header: 'Status',
+    render: (item) => {
+      const variants = {
+        active: 'success',
+        inactive: 'default',
+        pending: 'warning',
+      } as const;
+      return (
+        <Badge variant={variants[item.status]} size="sm">
+          {item.status.charAt(0).toUpperCase() + item.status.slice(1)}
+        </Badge>
+      );
+    },
+  },
+  { key: 'joinDate', header: 'Join Date' },
+];
+
+const meta: Meta<typeof DataTableCardView> = {
+  title: 'Data Display/DataTableCardView',
+  component: DataTableCardView,
+  parameters: {
+    layout: 'padded',
+    viewport: {
+      defaultViewport: 'mobileM',
+    },
+    docs: {
+      description: {
+        component: `
+Mobile-friendly card view for data tables. Renders each row as a touchable card
+with configurable title, subtitle, metadata fields, and status badge.
+
+Features:
+- Touch-optimized with active states
+- Configurable card layout
+- Selection mode support
+- Loading skeletons
+- Column render function reuse
+- Long-press for context actions
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DataTableCardView<User>>;
+
+/**
+ * Default card view with basic configuration
+ */
+export const Default: Story = {
+  args: {
+    data: sampleUsers,
+    columns,
+    cardConfig: {
+      titleKey: 'name',
+      subtitleKey: 'email',
+      metadataKeys: ['department', 'role'],
+      badgeKey: 'status',
+    },
+    onCardClick: (user) => alert(`Clicked: ${user.name}`),
+  },
+};
+
+/**
+ * Card view with avatar/initials display
+ */
+export const WithAvatar: Story = {
+  args: {
+    data: sampleUsers,
+    columns,
+    cardConfig: {
+      titleKey: 'name',
+      subtitleKey: 'role',
+      metadataKeys: ['email', 'department'],
+      badgeKey: 'status',
+      avatarKey: 'name', // Will show initials since no avatar URL
+    },
+    onCardClick: (user) => alert(`Clicked: ${user.name}`),
+  },
+};
+
+/**
+ * Card view with chevron indicator for navigation
+ */
+export const WithChevron: Story = {
+  args: {
+    data: sampleUsers,
+    columns,
+    cardConfig: {
+      titleKey: 'name',
+      subtitleKey: 'email',
+      metadataKeys: ['department'],
+      badgeKey: 'status',
+      showChevron: true,
+    },
+    onCardClick: (user) => alert(`Navigate to: ${user.name}`),
+  },
+};
+
+/**
+ * Card view with selection enabled
+ */
+export const WithSelection: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Set<string>>(new Set(['1', '3']));
+    
+    return (
+      <div className="space-y-4">
+        <div className="text-sm text-ink-600">
+          Selected: {selected.size} items
+        </div>
+        <DataTableCardView
+          data={sampleUsers}
+          columns={columns}
+          cardConfig={{
+            titleKey: 'name',
+            subtitleKey: 'email',
+            metadataKeys: ['department', 'role'],
+            badgeKey: 'status',
+          }}
+          selectable
+          selectedRows={selected}
+          onSelectionChange={(rows) => setSelected(new Set(rows))}
+        />
+      </div>
+    );
+  },
+};
+
+/**
+ * Card view with action menu
+ */
+export const WithActions: Story = {
+  args: {
+    data: sampleUsers,
+    columns,
+    cardConfig: {
+      titleKey: 'name',
+      subtitleKey: 'email',
+      metadataKeys: ['department'],
+      badgeKey: 'status',
+    },
+    onEdit: (user) => alert(`Edit: ${user.name}`),
+    onDelete: (user) => alert(`Delete: ${user.name}`),
+    actions: [
+      {
+        label: 'View Profile',
+        icon: <Eye className="h-4 w-4" />,
+        onClick: (user) => alert(`View: ${user.name}`),
+      },
+      {
+        label: 'Send Email',
+        icon: <Mail className="h-4 w-4" />,
+        onClick: (user) => alert(`Email: ${user.email}`),
+      },
+    ],
+    onCardLongPress: (user, event) => {
+      // In a real app, this would open an action menu
+      console.log('Long press on:', user.name, event);
+    },
+  },
+};
+
+/**
+ * Loading state with skeleton cards
+ */
+export const Loading: Story = {
+  args: {
+    data: [],
+    columns,
+    loading: true,
+    loadingRows: 5,
+  },
+};
+
+/**
+ * Empty state
+ */
+export const Empty: Story = {
+  args: {
+    data: [],
+    columns,
+    emptyMessage: 'No users found. Try adjusting your filters.',
+  },
+};
+
+/**
+ * Compact gap spacing
+ */
+export const CompactGap: Story = {
+  args: {
+    data: sampleUsers,
+    columns,
+    cardConfig: {
+      titleKey: 'name',
+      subtitleKey: 'email',
+      badgeKey: 'status',
+    },
+    gap: 'sm',
+  },
+};
+
+/**
+ * Large gap spacing
+ */
+export const LargeGap: Story = {
+  args: {
+    data: sampleUsers,
+    columns,
+    cardConfig: {
+      titleKey: 'name',
+      subtitleKey: 'email',
+      metadataKeys: ['department', 'role', 'joinDate'],
+      badgeKey: 'status',
+    },
+    gap: 'lg',
+  },
+};
+
+/**
+ * Minimal card (title only)
+ */
+export const MinimalCard: Story = {
+  args: {
+    data: sampleUsers,
+    columns,
+    cardConfig: {
+      titleKey: 'name',
+      showChevron: true,
+    },
+    onCardClick: (user) => alert(`Clicked: ${user.name}`),
+  },
+};