@papernote/ui 1.0.0 → 1.2.0

package/src/components/SpreadsheetSimple.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spreadsheet } from './Spreadsheet';
+
+const meta: Meta<typeof Spreadsheet> = {
+  title: 'Components/Spreadsheet/Simple Test',
+  component: Spreadsheet,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Simple test story for Spreadsheet component debugging.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Spreadsheet>;
+
+/**
+ * Minimal test - just render with defaults
+ */
+export const MinimalTest: Story = {
+  args: {
+    rows: 5,
+    columns: 3,
+  },
+};

package/src/components/Tabs.stories.tsx

@@ -249,3 +249,34 @@ export const Complete: Story = {
     return <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} variant="underline" />;
   },
 };
+
+export const ControlledMode: Story = {
+  render: () => {
+    const [activeTab, setActiveTab] = useState('profile');
+    return (
+      <div>
+        <div style={{ marginBottom: '1rem', display: 'flex', gap: '0.5rem' }}>
+          <button
+            onClick={() => setActiveTab('profile')}
+            style={{ padding: '0.5rem 1rem', background: activeTab === 'profile' ? '#334155' : '#f1f5f9', color: activeTab === 'profile' ? 'white' : '#334155', border: 'none', borderRadius: '0.375rem', cursor: 'pointer' }}
+          >
+            Go to Profile
+          </button>
+          <button
+            onClick={() => setActiveTab('settings')}
+            style={{ padding: '0.5rem 1rem', background: activeTab === 'settings' ? '#334155' : '#f1f5f9', color: activeTab === 'settings' ? 'white' : '#334155', border: 'none', borderRadius: '0.375rem', cursor: 'pointer' }}
+          >
+            Go to Settings
+          </button>
+          <button
+            onClick={() => setActiveTab('notifications')}
+            style={{ padding: '0.5rem 1rem', background: activeTab === 'notifications' ? '#334155' : '#f1f5f9', color: activeTab === 'notifications' ? 'white' : '#334155', border: 'none', borderRadius: '0.375rem', cursor: 'pointer' }}
+          >
+            Go to Notifications
+          </button>
+        </div>
+        <Tabs tabs={basicTabs} activeTab={activeTab} onChange={setActiveTab} />
+      </div>
+    );
+  },
+};

package/src/components/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 export interface Tab {
   id: string;
@@ -10,20 +10,44 @@ export interface Tab {
 
 export interface TabsProps {
   tabs: Tab[];
+  /** Controlled mode: Currently active tab ID */
+  activeTab?: string;
+  /** Uncontrolled mode: Initial tab ID (ignored if activeTab is provided) */
   defaultTab?: string;
   variant?: 'underline' | 'pill';
   /** Orientation of tabs (default: 'horizontal') */
   orientation?: 'horizontal' | 'vertical';
   /** Size of tabs (default: 'md') */
   size?: 'sm' | 'md' | 'lg';
+  /** Called when tab changes (required for controlled mode) */
   onChange?: (tabId: string) => void;
 }
 
-export default function Tabs({ tabs, defaultTab, variant = 'underline', orientation = 'horizontal', size = 'md', onChange }: TabsProps) {
-  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);
+export default function Tabs({ tabs, activeTab: controlledActiveTab, defaultTab, variant = 'underline', orientation = 'horizontal', size = 'md', onChange }: TabsProps) {
+  const [internalActiveTab, setInternalActiveTab] = useState(defaultTab || tabs[0]?.id);
+
+  // Controlled mode: use activeTab prop, Uncontrolled mode: use internal state
+  const isControlled = controlledActiveTab !== undefined;
+  const activeTab = isControlled ? controlledActiveTab : internalActiveTab;
+
+  // Ensure the activeTab exists in the current tabs array
+  // This handles the case where tabs array reference changes at the same time as activeTab
+  useEffect(() => {
+    const tabExists = tabs.some(tab => tab.id === activeTab);
+    if (!tabExists && tabs.length > 0) {
+      // If the activeTab doesn't exist in the new tabs array, use the first tab
+      if (isControlled) {
+        onChange?.(tabs[0].id);
+      } else {
+        setInternalActiveTab(tabs[0].id);
+      }
+    }
+  }, [tabs, activeTab, isControlled, onChange]);
 
   const handleTabChange = (tabId: string) => {
-    setActiveTab(tabId);
+    if (!isControlled) {
+      setInternalActiveTab(tabId);
+    }
     onChange?.(tabId);
   };
 

package/src/components/TimePicker.tsx

@@ -142,7 +142,7 @@ const TimePicker = forwardRef<TimePickerHandle, TimePickerProps>(({
 
   // Format TimeValue to string
   function formatTimeValue(tv: TimeValue, is12Hour: boolean, includeSeconds: boolean): string {
-    let hours = tv.hours;
+    const hours = tv.hours;
 
     if (is12Hour) {
       const formatted = `${hours.toString().padStart(2, '0')}:${tv.minutes.toString().padStart(2, '0')}${includeSeconds ? ':' + tv.seconds.toString().padStart(2, '0') : ''} ${tv.period}`;

package/src/components/Toast.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
 
 export type ToastType = 'success' | 'error' | 'warning' | 'info';
@@ -40,20 +40,20 @@ export default function Toast({ id, type, title, message, duration = 5000, onClo
   const [isExiting, setIsExiting] = useState(false);
   const styles = toastStyles[type];
 
+  const handleClose = useCallback(() => {
+    setIsExiting(true);
+    setTimeout(() => {
+      onClose(id);
+    }, 300); // Match animation duration
+  }, [id, onClose]);
+
   useEffect(() => {
     const timer = setTimeout(() => {
       handleClose();
     }, duration);
 
     return () => clearTimeout(timer);
-  }, [duration]);
-
-  const handleClose = () => {
-    setIsExiting(true);
-    setTimeout(() => {
-      onClose(id);
-    }, 300); // Match animation duration
-  };
+  }, [duration, handleClose]);
 
   return (
     <div

package/src/components/__tests__/Input.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Input from '../Input';
 
@@ -19,8 +19,8 @@ describe('Input', () => {
     expect(handleChange).toHaveBeenCalled();
   });
 
-  it('shows error message', () => {
-    render(<Input label="Email" error="Invalid email" />);
+  it('shows validation message', () => {
+    render(<Input label="Email" validationState="error" validationMessage="Invalid email" />);
     expect(screen.getByText('Invalid email')).toBeInTheDocument();
   });
 
@@ -40,7 +40,7 @@ describe('Input', () => {
   });
 
   it('is read-only when readOnly prop is true', () => {
-    render(<Input label="Email" readOnly value="test@example.com" />);
+    render(<Input label="Email" readOnly value="test@example.com" onChange={() => {}} />);
     const input = screen.getByLabelText('Email') as HTMLInputElement;
     expect(input.readOnly).toBe(true);
   });
@@ -55,39 +55,25 @@ describe('Input', () => {
     expect(screen.getByText('.com')).toBeInTheDocument();
   });
 
-  it('applies different sizes', () => {
-    const { rerender } = render(<Input label="Email" size="sm" />);
-    let input = screen.getByLabelText('Email');
-    expect(input).toHaveClass('text-sm');
-
-    rerender(<Input label="Email" size="lg" />);
-    input = screen.getByLabelText('Email');
-    expect(input).toHaveClass('text-lg');
-  });
-
   it('handles clear button click', async () => {
     const user = userEvent.setup();
     const handleClear = jest.fn();
+    const handleChange = jest.fn();
 
-    render(<Input label="Search" clearable onClear={handleClear} value="test" />);
+    render(<Input label="Search" clearable onClear={handleClear} value="test" onChange={handleChange} />);
 
-    // Find and click clear button (would need to verify selector)
-    const clearButton = screen.getByLabelText('Clear');
+    // Find clear button by aria-label
+    const clearButton = screen.getByLabelText('Clear input');
     await user.click(clearButton);
 
     expect(handleClear).toHaveBeenCalled();
   });
 
-  it('shows loading state', () => {
-    render(<Input label="Email" loading />);
-    // Loading indicator should be rendered
-    expect(screen.getByLabelText('Email')).toBeInTheDocument();
-  });
-
-  it('applies error styling when error is present', () => {
-    render(<Input label="Email" error="Invalid" />);
+  it('applies error styling when validation state is error', () => {
+    render(<Input label="Email" validationState="error" validationMessage="Invalid" />);
     const input = screen.getByLabelText('Email');
-    expect(input).toHaveClass('border-error-500');
+    // Check for error border class
+    expect(input).toHaveClass('border-error-400');
   });
 
   it('supports different input types', () => {
@@ -99,4 +85,14 @@ describe('Input', () => {
     input = screen.getByLabelText('Password') as HTMLInputElement;
     expect(input.type).toBe('password');
   });
+
+  it('shows character count when enabled', () => {
+    render(<Input label="Bio" showCount maxLength={100} value="Hello" onChange={() => {}} />);
+    expect(screen.getByText(/5/)).toBeInTheDocument();
+  });
+
+  it('shows password toggle button for password input', () => {
+    render(<Input label="Password" type="password" showPasswordToggle />);
+    expect(screen.getByLabelText('Show password')).toBeInTheDocument();
+  });
 });

package/src/components/index.ts

@@ -283,13 +283,17 @@ export type { NotificationIndicatorProps } from './NotificationIndicator';
 
 // Data Table
 export { default as DataTable } from './DataTable';
-export type { 
-  DataTableColumn, 
+export type {
+  DataTableColumn,
   DataTableAction,
   ExpandedRowConfig,
   ExpansionMode
 } from './DataTable';
 
+// Spreadsheet
+export { Spreadsheet, SpreadsheetReport } from './Spreadsheet';
+export type { SpreadsheetProps, SpreadsheetCell, Matrix, CellBase } from './Spreadsheet';
+
 export { default as ExpandedRowEditForm } from './ExpandedRowEditForm';
 export type {
   ExpandedRowEditFormProps,
@@ -305,6 +309,8 @@ export type {
 // Display Components
 export { default as CurrencyDisplay } from './CurrencyDisplay';
 export type { CurrencyDisplayProps } from './CurrencyDisplay';
+export { default as CurrencyInput } from './CurrencyInput';
+export type { CurrencyInputProps } from './CurrencyInput';
 
 export { default as DateDisplay } from './DateDisplay';
 export type { DateDisplayProps } from './DateDisplay';
@@ -405,6 +411,9 @@ export {
 } from '../utils/tableEnhancements';
 export type { ColumnResize, ColumnOrder } from '../utils/tableEnhancements';
 
+export { exportToExcel, exportDataTableToExcel, createMultiSheetExcel } from '../utils/excelExport';
+export type { ExcelColumn, ExportToExcelOptions, DataTableExportOptions, MultiSheetExcelOptions } from '../utils/excelExport';
+
 // Hooks
 export { useColumnResize, useColumnReorder } from '../hooks/useTableEnhancements';
 export type { UseColumnResizeOptions, UseColumnReorderOptions } from '../hooks/useTableEnhancements';

package/src/styles/index.css

@@ -1,5 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
+/* Component styles */
+@import '../components/Spreadsheet.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -169,16 +172,53 @@
     @apply text-error-600;
   }
 
-  /* Notebook Page Container - Creates bounded page effect */
+  /* Notebook Page Container - Creates bounded page effect
+     NOTE: This class is deprecated - Page component now handles responsive layout via props
+     Keeping for backward compatibility only */
   .notebook-page {
     @apply bg-white bg-subtle-grain rounded-sm shadow-lg border-l-4 border-paper-300;
     max-width: 1400px;
-    margin: 1rem auto 1rem 1rem; /* Top margin, auto right for anchoring, bottom margin, small left margin */
-    padding: 3rem 4rem 3rem 5rem; /* Extra left padding for binding margin */
-    min-height: calc(100vh - 12rem);
+    /* Responsive margins - fixed left/top, responsive right/bottom */
+    margin-top: 1rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    /* Responsive padding - fixed left/top, responsive right/bottom */
+    padding-top: 3rem;
+    padding-left: 5rem; /* Extra left padding for binding margin */
+    padding-right: 1rem;
+    padding-bottom: 1rem;
+    min-height: calc(100vh - 2rem);
     position: relative;
   }
 
+  /* Responsive padding/margin increases on larger screens */
+  @media (min-width: 640px) {
+    .notebook-page {
+      margin-right: 1.5rem;
+      margin-bottom: 2rem;
+      padding-right: 2rem;
+      padding-bottom: 2rem;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .notebook-page {
+      margin-right: 2rem;
+      margin-bottom: 2rem;
+      padding-right: 3rem;
+      padding-bottom: 3rem;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .notebook-page {
+      margin-right: auto; /* Center on large screens */
+      padding-right: 4rem;
+      padding-bottom: 4rem;
+    }
+  }
+
   /* Notebook binding effect on sidebar */
   .notebook-binding {
     position: relative;
@@ -427,8 +467,6 @@
 
 .table-stable tbody tr td {
   vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 /* Smooth loading overlay */