@papernote/ui 1.0.0 → 1.2.0

package/dist/utils/excelExport.d.ts

@@ -0,0 +1,143 @@
+import { WorkBook } from 'xlsx';
+/**
+ * Column definition for Excel export
+ */
+export interface ExcelColumn {
+    /** Key in the data object */
+    key: string;
+    /** Column header label */
+    label: string;
+    /** Optional formatter function */
+    format?: (value: any) => string | number | boolean;
+}
+/**
+ * Options for exporting data to Excel
+ */
+export interface ExportToExcelOptions {
+    /** Array of data objects to export */
+    data: any[];
+    /** Output filename (default: 'export.xlsx') */
+    filename?: string;
+    /** Sheet name (default: 'Sheet1') */
+    sheetName?: string;
+    /** Column definitions for custom headers and ordering */
+    columns?: ExcelColumn[];
+    /** Include headers row (default: true) */
+    includeHeaders?: boolean;
+    /** Custom workbook for multi-sheet exports */
+    workbook?: WorkBook;
+}
+/**
+ * Export data to Excel file
+ *
+ * A standalone utility for exporting any data array to Excel format.
+ * Works independently of the Spreadsheet component.
+ *
+ * **Features:**
+ * - Export arrays of objects to Excel
+ * - Custom column headers and ordering
+ * - Value formatting with custom functions
+ * - Multi-sheet support
+ * - Automatic type handling
+ *
+ * @example
+ * ```typescript
+ * // Simple export - uses object keys as headers
+ * const data = [
+ *   { id: 1, name: 'Product A', price: 29.99 },
+ *   { id: 2, name: 'Product B', price: 49.99 },
+ * ];
+ * exportToExcel({ data, filename: 'products.xlsx' });
+ *
+ * // Custom columns with formatting
+ * exportToExcel({
+ *   data: users,
+ *   filename: 'users.xlsx',
+ *   columns: [
+ *     { key: 'id', label: 'ID' },
+ *     { key: 'name', label: 'Full Name' },
+ *     { key: 'email', label: 'Email Address' },
+ *     { key: 'createdAt', label: 'Joined', format: (date) => new Date(date).toLocaleDateString() },
+ *     { key: 'isActive', label: 'Status', format: (active) => active ? 'Active' : 'Inactive' },
+ *   ],
+ * });
+ *
+ * // Multi-sheet export
+ * const wb = utils.book_new();
+ * exportToExcel({ data: products, sheetName: 'Products', workbook: wb });
+ * exportToExcel({ data: orders, sheetName: 'Orders', workbook: wb });
+ * writeFile(wb, 'multi-sheet.xlsx');
+ * ```
+ *
+ * @param options - Export configuration options
+ * @returns WorkBook if workbook option provided, otherwise void (auto-downloads)
+ */
+export declare function exportToExcel({ data, filename, sheetName, columns, includeHeaders, workbook, }: ExportToExcelOptions): WorkBook | void;
+/**
+ * Export DataTable-compatible data to Excel
+ *
+ * Helper function specifically designed for exporting DataTable data.
+ * Automatically handles common DataTable column configurations.
+ *
+ * @example
+ * ```typescript
+ * import { exportDataTableToExcel } from 'notebook-ui';
+ *
+ * const columns = [
+ *   { key: 'id', header: 'ID' },
+ *   { key: 'name', header: 'Name' },
+ *   { key: 'price', header: 'Price' },
+ * ];
+ *
+ * exportDataTableToExcel({
+ *   data: products,
+ *   columns: columns,
+ *   filename: 'products.xlsx',
+ * });
+ * ```
+ */
+export interface DataTableExportOptions {
+    /** Array of data objects */
+    data: any[];
+    /** DataTable column definitions */
+    columns: Array<{
+        key: string;
+        header: string;
+    }>;
+    /** Output filename */
+    filename?: string;
+    /** Sheet name */
+    sheetName?: string;
+}
+export declare function exportDataTableToExcel({ data, columns, filename, sheetName, }: DataTableExportOptions): void;
+/**
+ * Create a multi-sheet Excel workbook
+ *
+ * Utility for creating Excel files with multiple sheets.
+ *
+ * @example
+ * ```typescript
+ * import { createMultiSheetExcel } from 'notebook-ui';
+ *
+ * createMultiSheetExcel({
+ *   filename: 'report.xlsx',
+ *   sheets: [
+ *     { name: 'Products', data: products },
+ *     { name: 'Orders', data: orders },
+ *     { name: 'Customers', data: customers, columns: customerColumns },
+ *   ],
+ * });
+ * ```
+ */
+export interface MultiSheetExcelOptions {
+    /** Output filename */
+    filename: string;
+    /** Array of sheet configurations */
+    sheets: Array<{
+        name: string;
+        data: any[];
+        columns?: ExcelColumn[];
+    }>;
+}
+export declare function createMultiSheetExcel({ filename, sheets }: MultiSheetExcelOptions): void;
+//# sourceMappingURL=excelExport.d.ts.map

package/dist/utils/excelExport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"excelExport.d.ts","sourceRoot":"","sources":["../../src/utils/excelExport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,QAAQ,EAAE,MAAM,MAAM,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,6BAA6B;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CACpD;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,sCAAsC;IACtC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAwB,EACxB,SAAoB,EACpB,OAAO,EACP,cAAqB,EACrB,QAAQ,GACT,EAAE,oBAAoB,GAAG,QAAQ,GAAG,IAAI,CA0CxC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,WAAW,sBAAsB;IACrC,4BAA4B;IAC5B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,mCAAmC;IACnC,OAAO,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,OAAO,EACP,QAAwB,EACxB,SAAoB,GACrB,EAAE,sBAAsB,GAAG,IAAI,CAY/B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,sBAAsB;IACrC,sBAAsB;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,MAAM,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,GAAG,EAAE,CAAC;QACZ,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;KACzB,CAAC,CAAC;CACJ;AAED,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,sBAAsB,GAAG,IAAI,CAaxF"}

package/dist/utils/index.d.ts

@@ -2,4 +2,6 @@ export { translateSqlToNaturalLanguage } from './sqlToNaturalLanguage';
 export type { QueryDescription, FriendlyNameConfig } from './sqlToNaturalLanguage';
 export { formatStatisticValue, formatStatistics } from './statisticsFormatter';
 export type { StatisticFormat, StatisticConfig, FormattedStatistic } from './statisticsFormatter';
+export { exportToExcel, exportDataTableToExcel, createMultiSheetExcel } from './excelExport';
+export type { ExcelColumn, ExportToExcelOptions, DataTableExportOptions, MultiSheetExcelOptions } from './excelExport';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC;AACvE,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAEnF,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC/E,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC;AACvE,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAEnF,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC/E,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAElG,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAC7F,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.0.0",
+  "version": "1.2.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/AdminModal.css

@@ -1,49 +1,49 @@
-/* AdminModal.css - Styles for AdminModal component */
-
-.admin-modal-overlay {
-  left: 240px;
-}
-
-.admin-modal-content {
-  max-height: 90vh;
-}
-
-.admin-modal-large {
-  max-width: 1200px;
-}
-
-.admin-modal-medium {
-  max-width: 800px;
-}
-
-.admin-modal-sidebar-placeholder {
-  left: 0;
-  width: 240px;
-  z-index: -1;
-}
-
-.admin-modal-tabs {
-  gap: 2rem;
-}
-
-.admin-modal-tab-indicator {
-  height: 2px;
-}
-
-.admin-modal-tab-separator {
-  width: 1px;
-  height: 20px;
-  background-color: #d1d5db;
-  margin: 0 16px;
-}
-
-.admin-modal-form,
-.admin-modal-content-area {
-  height: 0px;
-  min-height: 0px;
-  max-height: none;
-}
-
-.admin-modal-footer {
-  gap: 0.75rem;
-}
+/* AdminModal.css - Styles for AdminModal component */
+
+.admin-modal-overlay {
+  left: 240px;
+}
+
+.admin-modal-content {
+  max-height: 90vh;
+}
+
+.admin-modal-large {
+  max-width: 1200px;
+}
+
+.admin-modal-medium {
+  max-width: 800px;
+}
+
+.admin-modal-sidebar-placeholder {
+  left: 0;
+  width: 240px;
+  z-index: -1;
+}
+
+.admin-modal-tabs {
+  gap: 2rem;
+}
+
+.admin-modal-tab-indicator {
+  height: 2px;
+}
+
+.admin-modal-tab-separator {
+  width: 1px;
+  height: 20px;
+  background-color: #d1d5db;
+  margin: 0 16px;
+}
+
+.admin-modal-form,
+.admin-modal-content-area {
+  height: 0px;
+  min-height: 0px;
+  max-height: none;
+}
+
+.admin-modal-footer {
+  gap: 0.75rem;
+}

package/src/components/CurrencyInput.stories.tsx

@@ -0,0 +1,290 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import CurrencyInput from './CurrencyInput';
+
+const meta = {
+  title: 'Forms/CurrencyInput',
+  component: CurrencyInput,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+Specialized input component for monetary values with automatic currency formatting.
+
+## Features
+- **Auto-formatting**: Formats currency with proper symbols and thousands separators
+- **Smart parsing**: Handles user input gracefully, removing invalid characters
+- **Multiple currencies**: Supports any currency code (USD, EUR, GBP, etc.)
+- **Localization**: Respects locale for number formatting
+- **Validation**: Built-in min/max value constraints
+- **Negative values**: Optional support for negative amounts
+- **Precision control**: Configurable decimal places
+
+## Usage
+
+\`\`\`tsx
+import { CurrencyInput } from 'notebook-ui';
+
+const [price, setPrice] = useState<number | null>(1234.56);
+
+<CurrencyInput
+  label="Price"
+  value={price}
+  onChange={setPrice}
+  currency="USD"
+  precision={2}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'number',
+      description: 'Numeric value (unformatted)',
+      table: {
+        type: { summary: 'number | string' },
+      },
+    },
+    onChange: {
+      description: 'Callback when value changes (receives numeric value)',
+      table: {
+        type: { summary: '(value: number | null) => void' },
+      },
+    },
+    currency: {
+      control: 'text',
+      description: 'Currency code (ISO 4217)',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'USD' },
+      },
+    },
+    locale: {
+      control: 'text',
+      description: 'Locale for formatting',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'en-US' },
+      },
+    },
+    precision: {
+      control: 'number',
+      description: 'Number of decimal places',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '2' },
+      },
+    },
+    allowNegative: {
+      control: 'boolean',
+      description: 'Allow negative values',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    min: {
+      control: 'number',
+      description: 'Minimum allowed value',
+      table: {
+        type: { summary: 'number' },
+      },
+    },
+    max: {
+      control: 'number',
+      description: 'Maximum allowed value',
+      table: {
+        type: { summary: 'number' },
+      },
+    },
+  },
+} satisfies Meta<typeof CurrencyInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState<number | null>(1234.56);
+    return (
+      <div style={{ width: '300px' }}>
+        <CurrencyInput
+          label="Price"
+          value={value}
+          onChange={setValue}
+          helperText="Enter the product price"
+        />
+        <div style={{ marginTop: '1rem', fontSize: '0.875rem', color: '#64748b' }}>
+          Current value: {value !== null ? `$${value.toFixed(2)}` : 'null'}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const WithValidation: Story = {
+  render: () => {
+    const [value, setValue] = useState<number | null>(150);
+    const max = 100;
+    const hasError = value !== null && value > max;
+
+    return (
+      <div style={{ width: '300px' }}>
+        <CurrencyInput
+          label="Budget"
+          value={value}
+          onChange={setValue}
+          max={max}
+          validationState={hasError ? 'error' : value !== null && value > 0 ? 'success' : null}
+          validationMessage={hasError ? `Exceeds maximum budget of $${max}` : value !== null && value > 0 ? 'Within budget' : ''}
+        />
+      </div>
+    );
+  },
+};
+
+export const DifferentCurrencies: Story = {
+  render: () => {
+    const [usd, setUsd] = useState<number | null>(1234.56);
+    const [eur, setEur] = useState<number | null>(1234.56);
+    const [gbp, setGbp] = useState<number | null>(1234.56);
+    const [jpy, setJpy] = useState<number | null>(123456);
+
+    return (
+      <div style={{ width: '300px', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <CurrencyInput
+          label="US Dollars"
+          value={usd}
+          onChange={setUsd}
+          currency="USD"
+          locale="en-US"
+        />
+        <CurrencyInput
+          label="Euros"
+          value={eur}
+          onChange={setEur}
+          currency="EUR"
+          locale="de-DE"
+        />
+        <CurrencyInput
+          label="British Pounds"
+          value={gbp}
+          onChange={setGbp}
+          currency="GBP"
+          locale="en-GB"
+        />
+        <CurrencyInput
+          label="Japanese Yen"
+          value={jpy}
+          onChange={setJpy}
+          currency="JPY"
+          locale="ja-JP"
+          precision={0}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithNegativeValues: Story = {
+  render: () => {
+    const [value, setValue] = useState<number | null>(-500.75);
+    return (
+      <div style={{ width: '300px' }}>
+        <CurrencyInput
+          label="Profit/Loss"
+          value={value}
+          onChange={setValue}
+          allowNegative
+          helperText="Negative values allowed for losses"
+        />
+        <div style={{ marginTop: '1rem', fontSize: '0.875rem', color: '#64748b' }}>
+          Current value: {value !== null ? `$${value.toFixed(2)}` : 'null'}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const WithMinMax: Story = {
+  render: () => {
+    const [value, setValue] = useState<number | null>(50);
+    const min = 10;
+    const max = 100;
+
+    return (
+      <div style={{ width: '300px' }}>
+        <CurrencyInput
+          label="Amount"
+          value={value}
+          onChange={setValue}
+          min={min}
+          max={max}
+          helperText={`Min: $${min}, Max: $${max}`}
+        />
+        <div style={{ marginTop: '1rem', fontSize: '0.875rem', color: '#64748b' }}>
+          Current value: {value !== null ? `$${value.toFixed(2)}` : 'null'}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Required: Story = {
+  render: () => {
+    const [value, setValue] = useState<number | null>(null);
+    const hasError = value === null;
+
+    return (
+      <div style={{ width: '300px' }}>
+        <CurrencyInput
+          label="Donation Amount"
+          value={value}
+          onChange={setValue}
+          required
+          validationState={hasError ? 'error' : 'success'}
+          validationMessage={hasError ? 'Amount is required' : 'Thank you!'}
+        />
+      </div>
+    );
+  },
+};
+
+export const Clearable: Story = {
+  render: () => {
+    const [value, setValue] = useState<number | null>(1234.56);
+    return (
+      <div style={{ width: '300px' }}>
+        <CurrencyInput
+          label="Price"
+          value={value}
+          onChange={setValue}
+          clearable
+          onClear={() => setValue(null)}
+          helperText="Click X to clear the value"
+        />
+        <div style={{ marginTop: '1rem', fontSize: '0.875rem', color: '#64748b' }}>
+          Current value: {value !== null ? `$${value.toFixed(2)}` : 'null'}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div style={{ width: '300px' }}>
+      <CurrencyInput
+        label="Price"
+        value={1234.56}
+        onChange={() => {}}
+        disabled
+        helperText="This field is disabled"
+      />
+    </div>
+  ),
+};