@papernote/ui 1.1.0 → 1.2.0

package/src/components/SpreadsheetSimple.stories.tsx

@@ -1,27 +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,
-  },
-};
+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.tsx

@@ -1,152 +1,152 @@
-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>
-  );
-}
+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/index.ts

@@ -309,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';
@@ -409,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

@@ -172,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;