@papernote/ui 1.0.0 → 1.1.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,128 +1,152 @@
-import React, { useState } from 'react';
-
-export interface Tab {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-  content: React.ReactNode;
-  disabled?: boolean;
-}
-
-export interface TabsProps {
-  tabs: Tab[];
-  defaultTab?: string;
-  variant?: 'underline' | 'pill';
-  /** Orientation of tabs (default: 'horizontal') */
-  orientation?: 'horizontal' | 'vertical';
-  /** Size of tabs (default: 'md') */
-  size?: 'sm' | 'md' | 'lg';
-  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);
-
-  const handleTabChange = (tabId: string) => {
-    setActiveTab(tabId);
-    onChange?.(tabId);
-  };
-
-  // Size-specific classes
-  const sizeClasses = {
-    sm: {
-      padding: 'px-3 py-1.5',
-      text: 'text-xs',
-      icon: 'h-3.5 w-3.5',
-      gap: orientation === 'vertical' ? 'gap-1.5' : 'gap-4',
-      minWidth: orientation === 'vertical' ? 'min-w-[150px]' : '',
-      spacing: orientation === 'vertical' ? 'mt-4' : 'mt-4',
-    },
-    md: {
-      padding: 'px-4 py-2.5',
-      text: 'text-sm',
-      icon: 'h-4 w-4',
-      gap: orientation === 'vertical' ? 'gap-2' : 'gap-6',
-      minWidth: orientation === 'vertical' ? 'min-w-[200px]' : '',
-      spacing: orientation === 'vertical' ? 'mt-6' : 'mt-6',
-    },
-    lg: {
-      padding: 'px-5 py-3',
-      text: 'text-base',
-      icon: 'h-5 w-5',
-      gap: orientation === 'vertical' ? 'gap-3' : 'gap-8',
-      minWidth: orientation === 'vertical' ? 'min-w-[250px]' : '',
-      spacing: orientation === 'vertical' ? 'mt-8' : 'mt-8',
-    },
-  };
-
-  return (
-    <div className={`w-full ${orientation === 'vertical' ? `flex ${sizeClasses[size].gap}` : ''}`}>
-      {/* Tab Headers */}
-      <div
-        className={`
-          flex ${orientation === 'vertical' ? 'flex-col' : ''}
-          ${variant === 'underline'
-            ? orientation === 'vertical'
-              ? `border-r border-paper-200 ${sizeClasses[size].gap} pr-6`
-              : `border-b border-paper-200 ${sizeClasses[size].gap}`
-            : `${sizeClasses[size].gap} p-1 bg-paper-50 rounded-lg`
-          }
-          ${sizeClasses[size].minWidth}
-        `}
-        role="tablist"
-      >
-        {tabs.map((tab) => {
-          const isActive = activeTab === tab.id;
-
-          return (
-            <button
-              key={tab.id}
-              role="tab"
-              aria-selected={isActive}
-              aria-controls={`panel-${tab.id}`}
-              disabled={tab.disabled}
-              onClick={() => !tab.disabled && handleTabChange(tab.id)}
-              className={`
-                flex items-center gap-2 ${sizeClasses[size].padding} ${sizeClasses[size].text} font-medium transition-all duration-200
-                ${orientation === 'vertical' ? 'w-full justify-start' : ''}
-                ${
-                  variant === 'underline'
-                    ? isActive
-                      ? orientation === 'vertical'
-                        ? 'text-accent-900 border-r-2 border-accent-500 -mr-[1px]'
-                        : 'text-accent-900 border-b-2 border-accent-500 -mb-[1px]'
-                      : orientation === 'vertical'
-                      ? 'text-ink-600 hover:text-ink-900 border-r-2 border-transparent'
-                      : 'text-ink-600 hover:text-ink-900 border-b-2 border-transparent'
-                    : isActive
-                    ? 'bg-white text-accent-900 rounded-md shadow-xs'
-                    : 'text-ink-600 hover:text-ink-900 hover:bg-white/50 rounded-md'
-                }
-                ${tab.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
-              `}
-            >
-              {tab.icon && <span className={`flex-shrink-0 ${sizeClasses[size].icon}`}>{tab.icon}</span>}
-              <span>{tab.label}</span>
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Tab Content */}
-      <div className={`${orientation === 'vertical' ? 'flex-1' : sizeClasses[size].spacing}`}>
-        {tabs.map((tab) => (
-          <div
-            key={tab.id}
-            id={`panel-${tab.id}`}
-            role="tabpanel"
-            aria-labelledby={tab.id}
-            hidden={activeTab !== tab.id}
-            className={activeTab === tab.id ? 'animate-fade-in' : ''}
-          >
-            {activeTab === tab.id && tab.content}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
+import React, { useState, useEffect } from 'react';
+
+export interface Tab {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  content: React.ReactNode;
+  disabled?: boolean;
+}
+
+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, 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) => {
+    if (!isControlled) {
+      setInternalActiveTab(tabId);
+    }
+    onChange?.(tabId);
+  };
+
+  // Size-specific classes
+  const sizeClasses = {
+    sm: {
+      padding: 'px-3 py-1.5',
+      text: 'text-xs',
+      icon: 'h-3.5 w-3.5',
+      gap: orientation === 'vertical' ? 'gap-1.5' : 'gap-4',
+      minWidth: orientation === 'vertical' ? 'min-w-[150px]' : '',
+      spacing: orientation === 'vertical' ? 'mt-4' : 'mt-4',
+    },
+    md: {
+      padding: 'px-4 py-2.5',
+      text: 'text-sm',
+      icon: 'h-4 w-4',
+      gap: orientation === 'vertical' ? 'gap-2' : 'gap-6',
+      minWidth: orientation === 'vertical' ? 'min-w-[200px]' : '',
+      spacing: orientation === 'vertical' ? 'mt-6' : 'mt-6',
+    },
+    lg: {
+      padding: 'px-5 py-3',
+      text: 'text-base',
+      icon: 'h-5 w-5',
+      gap: orientation === 'vertical' ? 'gap-3' : 'gap-8',
+      minWidth: orientation === 'vertical' ? 'min-w-[250px]' : '',
+      spacing: orientation === 'vertical' ? 'mt-8' : 'mt-8',
+    },
+  };
+
+  return (
+    <div className={`w-full ${orientation === 'vertical' ? `flex ${sizeClasses[size].gap}` : ''}`}>
+      {/* Tab Headers */}
+      <div
+        className={`
+          flex ${orientation === 'vertical' ? 'flex-col' : ''}
+          ${variant === 'underline'
+            ? orientation === 'vertical'
+              ? `border-r border-paper-200 ${sizeClasses[size].gap} pr-6`
+              : `border-b border-paper-200 ${sizeClasses[size].gap}`
+            : `${sizeClasses[size].gap} p-1 bg-paper-50 rounded-lg`
+          }
+          ${sizeClasses[size].minWidth}
+        `}
+        role="tablist"
+      >
+        {tabs.map((tab) => {
+          const isActive = activeTab === tab.id;
+
+          return (
+            <button
+              key={tab.id}
+              role="tab"
+              aria-selected={isActive}
+              aria-controls={`panel-${tab.id}`}
+              disabled={tab.disabled}
+              onClick={() => !tab.disabled && handleTabChange(tab.id)}
+              className={`
+                flex items-center gap-2 ${sizeClasses[size].padding} ${sizeClasses[size].text} font-medium transition-all duration-200
+                ${orientation === 'vertical' ? 'w-full justify-start' : ''}
+                ${
+                  variant === 'underline'
+                    ? isActive
+                      ? orientation === 'vertical'
+                        ? 'text-accent-900 border-r-2 border-accent-500 -mr-[1px]'
+                        : 'text-accent-900 border-b-2 border-accent-500 -mb-[1px]'
+                      : orientation === 'vertical'
+                      ? 'text-ink-600 hover:text-ink-900 border-r-2 border-transparent'
+                      : 'text-ink-600 hover:text-ink-900 border-b-2 border-transparent'
+                    : isActive
+                    ? 'bg-white text-accent-900 rounded-md shadow-xs'
+                    : 'text-ink-600 hover:text-ink-900 hover:bg-white/50 rounded-md'
+                }
+                ${tab.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
+              `}
+            >
+              {tab.icon && <span className={`flex-shrink-0 ${sizeClasses[size].icon}`}>{tab.icon}</span>}
+              <span>{tab.label}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Tab Content */}
+      <div className={`${orientation === 'vertical' ? 'flex-1' : sizeClasses[size].spacing}`}>
+        {tabs.map((tab) => (
+          <div
+            key={tab.id}
+            id={`panel-${tab.id}`}
+            role="tabpanel"
+            aria-labelledby={tab.id}
+            hidden={activeTab !== tab.id}
+            className={activeTab === tab.id ? 'animate-fade-in' : ''}
+          >
+            {activeTab === tab.id && tab.content}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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,

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;
@@ -427,8 +430,6 @@
 
 .table-stable tbody tr td {
   vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 /* Smooth loading overlay */

package/src/utils/sqlToNaturalLanguage.ts

@@ -415,7 +415,7 @@ function parseCondition(condition: string, friendlyNames: FriendlyNameConfig): s
 function extractFieldName(condition: string, friendlyNames: FriendlyNameConfig): string {
   condition = condition.trim();
 
-  let match = condition.match(/^(?:["']?\w+["']?\.)?["']?(\w+)["']?/);
+  const match = condition.match(/^(?:["']?\w+["']?\.)?["']?(\w+)["']?/);
 
   if (match && match[1]) {
     const fieldName = match[1];