@papernote/ui 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",
@@ -31,8 +31,12 @@
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "prepublishOnly": "npm run build",
+    "prerelease": "bash scripts/pre-publish-check.sh",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "docs:dev": "vitepress dev docs-site",
+    "docs:build": "vitepress build docs-site",
+    "docs:preview": "vitepress preview docs-site"
   },
   "peerDependencies": {
     "lucide-react": "^0.553.0",
@@ -64,6 +68,7 @@
     "jest-environment-jsdom": "^30.2.0",
     "lucide-react": "^0.554.0",
     "postcss": "^8.4.0",
+    "postcss-import": "^16.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.6",
@@ -76,7 +81,8 @@
     "ts-jest": "^29.4.5",
     "tslib": "^2.6.0",
     "typescript": "^5.0.0",
-    "vite": "^7.2.4"
+    "vite": "^7.2.4",
+    "vitepress": "^1.6.4"
   },
   "keywords": [
     "react",
@@ -99,5 +105,9 @@
   "homepage": "https://github.com/kwhittenberger/papernote-ui#readme",
   "bugs": {
     "url": "https://github.com/kwhittenberger/papernote-ui/issues"
+  },
+  "dependencies": {
+    "react-spreadsheet": "^0.10.1",
+    "xlsx": "^0.18.5"
   }
 }

package/src/components/DataTable.stories.tsx

@@ -334,3 +334,90 @@ export const FullFeatured: Story = {
     ),
   },
 };
+
+export const WithSecondaryRows: Story = {
+  args: {
+    data: sampleUsers,
+    columns: [
+      {
+        key: 'name',
+        header: 'Name',
+        sortable: true,
+        renderSecondary: (user: User) => (
+          <span className="text-xs text-ink-500">Member since {user.joinedAt}</span>
+        ),
+      },
+      {
+        key: 'email',
+        header: 'Email',
+        sortable: true,
+        renderSecondary: (user: User) => (
+          <span className="text-xs text-ink-500">{user.role}</span>
+        ),
+      },
+      {
+        key: 'status',
+        header: 'Status',
+        render: (user: User) => (
+          <Badge variant={user.status === 'active' ? 'success' : user.status === 'inactive' ? 'error' : 'warning'}>
+            {user.status}
+          </Badge>
+        ),
+      },
+    ],
+    selectable: true,
+    actions: [
+      {
+        label: 'Edit',
+        icon: <Edit className="h-4 w-4" />,
+        onClick: (user: User) => alert(`Edit ${user.name}`),
+      },
+      {
+        label: 'View',
+        icon: <Eye className="h-4 w-4" />,
+        onClick: (user: User) => alert(`View ${user.name}`),
+      },
+    ],
+  },
+};
+
+export const FullWidthWrappingText: Story = {
+  args: {
+    data: [
+      { id: '1', name: 'ADOBE Adobe Systems SAN JOSE CA - Expense - Monthly subscription for creative cloud services' },
+      { id: '2', name: 'AMAZON PRIME Amazon.com SEATTLE WA - Entertainment - Annual membership fee' },
+      { id: '3', name: 'SPOTIFY Spotify USA NEW YORK NY - Music streaming service monthly payment' },
+      { id: '4', name: 'NETFLIX Netflix.com LOS GATOS CA - Video streaming monthly subscription' },
+      { id: '5', name: 'MICROSOFT Microsoft Corporation REDMOND WA - Office 365 business subscription annual fee' },
+    ],
+    columns: [
+      {
+        key: 'name',
+        header: 'Transaction Name',
+        flex: 1,
+      },
+    ],
+  },
+};
+
+export const FullWidthWithSecondaryRow: Story = {
+  args: {
+    data: [
+      { id: '1', name: 'ADOBE Adobe Systems SAN JOSE CA - Expense', frequency: 'Monthly', amount: '$16.52' },
+      { id: '2', name: 'AMAZON PRIME Amazon.com SEATTLE WA - Entertainment', frequency: 'Monthly', amount: '$25.00' },
+      { id: '3', name: 'SPOTIFY Spotify USA NEW YORK NY - Music streaming service', frequency: 'Monthly', amount: '$9.99' },
+      { id: '4', name: 'NETFLIX Netflix.com LOS GATOS CA - Video streaming', frequency: 'Monthly', amount: '$15.49' },
+      { id: '5', name: 'MICROSOFT Microsoft Corporation REDMOND WA - Office 365 business subscription', frequency: 'Annual', amount: '$132.14' },
+    ],
+    columns: [
+      {
+        key: 'name',
+        header: 'Name',
+        flex: 1,
+        renderSecondary: (item: any) => (
+          <span className="text-xs text-ink-500">{item.frequency} • {item.amount}</span>
+        ),
+      },
+    ],
+  },
+};

package/src/components/DataTable.tsx

@@ -502,6 +502,9 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
   const [scrollTop, setScrollTop] = useState(0);
   const tableContainerRef = useRef<HTMLDivElement>(null);
 
+  // Row hover state (for coordinating primary + secondary row highlighting)
+  const [hoveredRowKey, setHoveredRowKey] = useState<string | null>(null);
+
   // Filter columns based on hiddenColumns
   const baseVisibleColumns = columns.filter(
     col => !hiddenColumns.includes(String(col.key))
@@ -980,50 +983,83 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
       const isSelected = selectedRowsSet.has(rowKey);
       const isExpanded = expandedRowsSet.has(rowKey);
       const rowBgClass = getRowBackgroundClass(item, index);
-      const hoverClass = disableHover ? '' : 'hover:bg-paper-100';
       const borderClass = bordered ? `border-b ${borderColor}` : (!visibleColumns.some(col => !!col.renderSecondary) ? `border-b ${borderColor}` : '');
+      const hasSecondaryRow = visibleColumns.some(col => !!col.renderSecondary);
+
+      // Hover state for row pair (primary + secondary)
+      const isHovered = hoveredRowKey === rowKey;
+      const hoverClass = disableHover ? '' : (isHovered ? 'bg-paper-100' : '');
 
       return (
       <React.Fragment key={rowKey}>
         <tr
-          className={`${hoverClass} table-row-stable ${onRowDoubleClick || onRowClick || (expandedRowConfig?.edit?.triggerOnDoubleClick !== false) || (expandedRowConfig?.details?.triggerOnDoubleClick === true) ? 'cursor-pointer' : ''} ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : rowBgClass} ${borderClass}`}
+          className={`table-row-stable ${onRowDoubleClick || onRowClick || onEdit || expandedRowConfig?.edit || expandedRowConfig?.details || expandedRowConfig?.addRelated?.length || expandedRowConfig?.manageRelated?.length ? 'cursor-pointer' : ''} ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : hoverClass || rowBgClass} ${borderClass}`}
+          onMouseEnter={() => !disableHover && setHoveredRowKey(rowKey)}
+          onMouseLeave={() => !disableHover && setHoveredRowKey(null)}
           onClick={() => onRowClick?.(item)}
           onDoubleClick={() => {
-            // Check for edit mode with triggerOnDoubleClick
-            if (expandedRowConfig?.edit && expandedRowConfig.edit.triggerOnDoubleClick !== false) {
+            // Priority 1: If there's an onEdit handler (legacy), trigger it
+            if (onEdit) {
+              onEdit(item);
+            }
+            // Priority 2: If there's an expandable edit mode, trigger it
+            else if (expandedRowConfig?.edit) {
               handleExpansionWithMode(rowKey, 'edit');
             }
-            // Check for details mode with triggerOnDoubleClick
-            else if (expandedRowConfig?.details && expandedRowConfig.details.triggerOnDoubleClick === true) {
+            // Priority 3: If there's an expandable details mode, trigger it
+            else if (expandedRowConfig?.details) {
               handleExpansionWithMode(rowKey, 'details');
             }
-            // Legacy: use onRowDoubleClick handler
+            // Priority 4: If there's any addRelated mode, trigger the first one
+            else if (expandedRowConfig?.addRelated && expandedRowConfig.addRelated.length > 0) {
+              handleExpansionWithMode(rowKey, `addRelated-${expandedRowConfig.addRelated[0].key}`);
+            }
+            // Priority 5: If there's any manageRelated mode, trigger the first one
+            else if (expandedRowConfig?.manageRelated && expandedRowConfig.manageRelated.length > 0) {
+              handleExpansionWithMode(rowKey, `manageRelated-${expandedRowConfig.manageRelated[0].key}`);
+            }
+            // Priority 6: Legacy onRowDoubleClick handler
             else {
               onRowDoubleClick?.(item);
             }
           }}
           title={
-            expandedRowConfig?.edit && expandedRowConfig.edit.triggerOnDoubleClick !== false ? 'Double-click to edit inline' :
-            expandedRowConfig?.details && expandedRowConfig.details.triggerOnDoubleClick === true ? 'Double-click to view details' :
-            onRowDoubleClick ? 'Double-click to open details' : 
-            onRowClick ? 'Click to select' : 
+            onEdit ? 'Double-click to edit' :
+            expandedRowConfig?.edit ? 'Double-click to edit inline' :
+            expandedRowConfig?.details ? 'Double-click to view details' :
+            expandedRowConfig?.addRelated && expandedRowConfig.addRelated.length > 0 ? `Double-click to ${expandedRowConfig.addRelated[0].label}` :
+            expandedRowConfig?.manageRelated && expandedRowConfig.manageRelated.length > 0 ? `Double-click to ${expandedRowConfig.manageRelated[0].label}` :
+            onRowDoubleClick ? 'Double-click for details' :
+            onRowClick ? 'Click to select' :
             undefined
           }
         >
           {selectable && (
-          <td className={`sticky left-0 bg-white ${currentDensity.cell} z-10 align-middle ${bordered ? `border ${borderColor}` : ''}`}>
+          <td
+            className={`sticky left-0 z-10 ${bordered ? `border ${borderColor}` : ''}`}
+            style={{
+              backgroundColor: 'inherit',
+              verticalAlign: 'middle',
+              padding: '0.375rem 0.75rem',
+              textAlign: 'center'
+            }}
+            rowSpan={hasSecondaryRow ? 2 : 1}
+          >
             <input
               type="checkbox"
               checked={isSelected}
               onChange={() => handleRowSelect(rowKey)}
               className="w-4 h-4 text-accent-600 border-paper-300 rounded focus:ring-accent-400"
-              style={{ verticalAlign: 'middle' }}
               aria-label={`Select row ${rowKey}`}
             />
           </td>
           )}
             {((expandable || expandedRowConfig) && showExpandChevron) && (
-            <td className={`sticky left-0 bg-white px-2 ${currentDensity.cell} z-10 ${bordered ? `border ${borderColor}` : ''}`}>
+            <td
+              className={`sticky left-0 px-2 ${currentDensity.cell} z-10 ${bordered ? `border ${borderColor}` : ''}`}
+              style={{ backgroundColor: 'inherit', verticalAlign: 'middle' }}
+              rowSpan={hasSecondaryRow ? 2 : 1}
+            >
               <button
                 onClick={() => {
                   // NEW: Enhanced logic for expandedRowConfig
@@ -1059,14 +1095,14 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
               verticalAlign: 'middle'
             }}
             onClick={(e) => e.stopPropagation()}
-            rowSpan={visibleColumns.some(col => !!col.renderSecondary) ? 2 : 1}
+            rowSpan={hasSecondaryRow ? 2 : 1}
           >
             <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '28px' }}>
               <ActionMenu actions={allActions} item={item} />
             </div>
           </td>
         )}
-        {visibleColumns.map((column) => {
+        {visibleColumns.map((column, colIdx) => {
           const columnKey = String(column.key);
           const dynamicWidth = columnWidths[columnKey];
           const value = typeof column.key === 'string'
@@ -1075,10 +1111,14 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
 
           const primaryContent = column.render ? column.render(item, value) : String(value || '');
 
+          // Reduce left padding on first column when there are action buttons
+          const isFirstColumn = colIdx === 0;
+          const paddingClass = isFirstColumn && allActions.length > 0 ? 'pl-3' : '';
+
           return (
             <td
               key={`${item.id}-${columnKey}`}
-              className={`${currentDensity.cell} ${column.className || ''} ${bordered ? `border ${borderColor}` : ''}`}
+              className={`${currentDensity.cell} ${paddingClass} ${column.className || ''} ${bordered ? `border ${borderColor}` : ''}`}
               style={getColumnStyle(column, dynamicWidth)}
             >
               <div className={`${currentDensity.text} leading-tight`}>{primaryContent}</div>
@@ -1088,12 +1128,16 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
             </tr>
             
             {/* Secondary row - only render if any column has renderSecondary */}
-            {visibleColumns.some(col => !!col.renderSecondary) && (
-              <tr className={`secondary-row ${hoverClass} border-b ${borderColor}`}>
-                {selectable && <td className={`sticky left-0 bg-white ${currentDensity.cell} py-0.5 z-10 ${bordered ? `border ${borderColor}` : ''}`}></td>}
-                {((expandable || expandedRowConfig) && showExpandChevron) && <td className={`sticky left-0 bg-white px-2 py-0.5 z-10 ${bordered ? `border ${borderColor}` : ''}`}></td>}
+            {hasSecondaryRow && (
+              <tr
+                className={`secondary-row ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : hoverClass || rowBgClass} border-b ${borderColor}`}
+                onMouseEnter={() => !disableHover && setHoveredRowKey(rowKey)}
+                onMouseLeave={() => !disableHover && setHoveredRowKey(null)}
+              >
+                {/* Selectable checkbox uses rowspan from primary row, no cell needed here */}
+                {/* Expand chevron uses rowspan from primary row, no cell needed here */}
                 {/* Actions column uses rowspan from primary row, no cell needed here */}
-                {visibleColumns.map((column) => {
+                {visibleColumns.map((column, colIdx) => {
                   const columnKey = String(column.key);
                   const dynamicWidth = columnWidths[columnKey];
                   const value = typeof column.key === 'string'
@@ -1101,10 +1145,14 @@ export default function DataTable<T extends BaseDataItem = BaseDataItem>({
                     : item[column.key];
                   const secondaryContent = column.renderSecondary ? column.renderSecondary(item, value) : null;
 
+                  // Reduce left padding on first column when there are action buttons
+                  const isFirstColumn = colIdx === 0;
+                  const paddingClass = isFirstColumn && allActions.length > 0 ? 'pl-3' : '';
+
                   return (
                     <td
                       key={`${item.id}-${columnKey}-secondary`}
-                      className={`${currentDensity.cell} py-0.5 ${column.className || ''} ${bordered ? `border ${borderColor}` : ''}`}
+                      className={`${currentDensity.cell} py-0.5 ${paddingClass} ${column.className || ''} ${bordered ? `border ${borderColor}` : ''}`}
                       style={getColumnStyle(column, dynamicWidth)}
                     >
                       <div className="text-xs text-ink-500 leading-tight">

package/src/components/Spreadsheet.css

@@ -0,0 +1,216 @@
+/**
+ * Spreadsheet Component Styles
+ *
+ * Custom styling for react-spreadsheet to match notebook-ui's paper aesthetic
+ */
+
+/* Container */
+.spreadsheet-container {
+  width: 100%;
+  overflow: auto;
+  background-color: #fafaf9; /* paper-50 */
+  border-radius: 0.5rem;
+  border: 1px solid #e7e5e4; /* stone-200 */
+}
+
+/* Spreadsheet base */
+.notebook-spreadsheet {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 0.875rem;
+  color: #1c1917; /* ink-900 */
+}
+
+/* Table styling */
+.notebook-spreadsheet table {
+  border-collapse: separate;
+  border-spacing: 0;
+  background-color: #ffffff;
+  width: 100%;
+}
+
+/* Cell styling */
+.notebook-spreadsheet td {
+  border: 1px solid #e7e5e4; /* stone-200 */
+  padding: 0;
+  background-color: #ffffff;
+  transition: background-color 0.15s ease;
+}
+
+/* Cell hover */
+.notebook-spreadsheet td:hover {
+  background-color: #fafaf9; /* paper-50 */
+}
+
+/* Selected cell */
+.notebook-spreadsheet td.Spreadsheet__active-cell {
+  border: 2px solid #334155; /* primary-700 */
+  box-shadow: 0 0 0 1px #334155;
+  background-color: #ffffff;
+  z-index: 10;
+}
+
+/* Header cells (row/column labels) */
+.notebook-spreadsheet th {
+  background-color: #f5f5f4; /* stone-100 */
+  color: #57534e; /* ink-600 */
+  border: 1px solid #e7e5e4; /* stone-200 */
+  padding: 0.5rem;
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-align: center;
+  position: sticky;
+  z-index: 5;
+}
+
+/* Column headers */
+.notebook-spreadsheet thead th {
+  top: 0;
+  z-index: 10;
+}
+
+/* Row headers */
+.notebook-spreadsheet tbody th {
+  left: 0;
+  z-index: 5;
+}
+
+/* Corner header (top-left cell) */
+.notebook-spreadsheet thead th:first-child {
+  left: 0;
+  z-index: 15;
+}
+
+/* Cell input */
+.notebook-spreadsheet .Spreadsheet__data-editor {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  padding: 0.5rem;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background-color: #ffffff;
+  box-sizing: border-box;
+}
+
+.notebook-spreadsheet .Spreadsheet__data-editor:focus {
+  background-color: #ffffff;
+  border: 2px solid #334155; /* primary-700 */
+  padding: calc(0.5rem - 1px);
+}
+
+/* Cell with formula indicator */
+.notebook-spreadsheet .Spreadsheet__cell--formula {
+  font-style: italic;
+  background-color: #f0fdf4; /* success-50 */
+}
+
+/* Read-only cells */
+.notebook-spreadsheet .Spreadsheet__cell--readonly {
+  background-color: #f5f5f4; /* stone-100 */
+  color: #78716c; /* ink-500 */
+}
+
+/* Selection highlight */
+.notebook-spreadsheet .Spreadsheet__cell--selected {
+  background-color: #e0f2fe; /* primary-100 */
+}
+
+/* Cell error state */
+.notebook-spreadsheet .Spreadsheet__cell--error {
+  background-color: #fef2f2; /* error-50 */
+  color: #991b1b; /* error-800 */
+}
+
+/* Cell value display */
+.notebook-spreadsheet .Spreadsheet__value {
+  padding: 0.5rem;
+  min-height: 2rem;
+  display: flex;
+  align-items: center;
+}
+
+/* Number cells - align right */
+.notebook-spreadsheet .Spreadsheet__cell--number .Spreadsheet__value {
+  justify-content: flex-end;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Empty cells */
+.notebook-spreadsheet .Spreadsheet__cell--empty .Spreadsheet__value {
+  color: #a8a29e; /* ink-400 */
+}
+
+/* Copy/paste indicator */
+.notebook-spreadsheet .Spreadsheet__floating-rect {
+  border: 2px dashed #334155; /* primary-700 */
+  background-color: rgba(51, 65, 85, 0.1);
+  pointer-events: none;
+}
+
+/* Scrollbar styling for webkit browsers */
+.spreadsheet-container::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.spreadsheet-container::-webkit-scrollbar-track {
+  background-color: #fafaf9; /* paper-50 */
+  border-radius: 0.5rem;
+}
+
+.spreadsheet-container::-webkit-scrollbar-thumb {
+  background-color: #d6d3d1; /* stone-300 */
+  border-radius: 0.5rem;
+  border: 2px solid #fafaf9;
+}
+
+.spreadsheet-container::-webkit-scrollbar-thumb:hover {
+  background-color: #a8a29e; /* ink-400 */
+}
+
+/* Loading state */
+.spreadsheet-container.loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .notebook-spreadsheet {
+    font-size: 0.75rem;
+  }
+
+  .notebook-spreadsheet .Spreadsheet__value {
+    padding: 0.375rem;
+    min-height: 1.75rem;
+  }
+
+  .notebook-spreadsheet .Spreadsheet__data-editor {
+    padding: 0.375rem;
+  }
+
+  .notebook-spreadsheet th {
+    padding: 0.375rem;
+    font-size: 0.6875rem;
+  }
+}
+
+/* Print styles */
+@media print {
+  .spreadsheet-container {
+    border: none;
+    overflow: visible;
+  }
+
+  .notebook-spreadsheet td,
+  .notebook-spreadsheet th {
+    border-color: #000;
+  }
+
+  .notebook-spreadsheet .Spreadsheet__active-cell {
+    border: 1px solid #000;
+    box-shadow: none;
+  }
+}