@papernote/ui 1.6.0 → 1.7.0

package/dist/styles.css

@@ -2122,6 +2122,10 @@ input:checked + .slider:before{
   min-width: 8rem;
 }
 
+.min-w-48{
+  min-width: 12rem;
+}
+
 .min-w-5{
   min-width: 1.25rem;
 }
@@ -2246,6 +2250,14 @@ input:checked + .slider:before{
   border-collapse: collapse;
 }
 
+.origin-bottom{
+  transform-origin: bottom;
+}
+
+.origin-top{
+  transform-origin: top;
+}
+
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3198,11 +3210,21 @@ input:checked + .slider:before{
   border-color: rgb(226 232 240 / 0.8);
 }
 
+.border-stone-100{
+  --tw-border-opacity: 1;
+  border-color: rgb(245 245 244 / var(--tw-border-opacity, 1));
+}
+
 .border-stone-200{
   --tw-border-opacity: 1;
   border-color: rgb(231 229 228 / var(--tw-border-opacity, 1));
 }
 
+.border-stone-50{
+  --tw-border-opacity: 1;
+  border-color: rgb(250 250 249 / var(--tw-border-opacity, 1));
+}
+
 .border-success-200{
   --tw-border-opacity: 1;
   border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
@@ -3480,6 +3502,16 @@ input:checked + .slider:before{
   background-color: rgb(248 250 252 / 0.8);
 }
 
+.bg-stone-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
+}
+
+.bg-stone-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1));
+}
+
 .bg-success-100{
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
@@ -4470,6 +4502,10 @@ input:checked + .slider:before{
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.ring-inset{
+  --tw-ring-inset: inset;
+}
+
 .ring-accent-300{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(212 210 200 / var(--tw-ring-opacity, 1));
@@ -4505,6 +4541,11 @@ input:checked + .slider:before{
   --tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity, 1));
 }
 
+.ring-primary-500{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1));
+}
+
 .ring-success-300{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity, 1));
@@ -5119,6 +5160,16 @@ input:checked + .slider:before{
   background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-stone-100:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-stone-200:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(231 229 228 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-success-200:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));

package/dist/utils/formulaDefinitions.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Formula definitions for DataGrid intellisense
+ * Based on fast-formula-parser supported functions
+ */
+export interface FormulaParameter {
+    name: string;
+    description: string;
+    optional?: boolean;
+}
+export interface FormulaDefinition {
+    name: string;
+    category: FormulaCategory;
+    description: string;
+    syntax: string;
+    parameters: FormulaParameter[];
+    example?: string;
+}
+export type FormulaCategory = 'Math' | 'Statistical' | 'Lookup' | 'Text' | 'Logical' | 'Date' | 'Information' | 'Financial';
+export declare const FORMULA_DEFINITIONS: FormulaDefinition[];
+export declare const FORMULA_NAMES: string[];
+export declare const getFormulasByCategory: (category: FormulaCategory) => FormulaDefinition[];
+export declare const searchFormulas: (query: string) => FormulaDefinition[];
+export declare const getFormula: (name: string) => FormulaDefinition | undefined;
+export declare const FORMULA_CATEGORIES: FormulaCategory[];
+//# sourceMappingURL=formulaDefinitions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"formulaDefinitions.d.ts","sourceRoot":"","sources":["../../src/utils/formulaDefinitions.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,aAAa,GACb,QAAQ,GACR,MAAM,GACN,SAAS,GACT,MAAM,GACN,aAAa,GACb,WAAW,CAAC;AAEhB,eAAO,MAAM,mBAAmB,EAAE,iBAAiB,EAgpClD,CAAC;AAGF,eAAO,MAAM,aAAa,UAAyC,CAAC;AAGpE,eAAO,MAAM,qBAAqB,GAAI,UAAU,eAAe,KAAG,iBAAiB,EACvB,CAAC;AAG7D,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,iBAAiB,EAG/D,CAAC;AAGF,eAAO,MAAM,UAAU,GAAI,MAAM,MAAM,KAAG,iBAAiB,GAAG,SACE,CAAC;AAGjE,eAAO,MAAM,kBAAkB,EAAE,eAAe,EAS/C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",

package/src/components/DataGrid.stories.tsx

@@ -0,0 +1,356 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DataGrid, DataGridCell, DataGridColumn } from './DataGrid';
+
+const meta: Meta<typeof DataGrid> = {
+  title: 'Components/DataGrid',
+  component: DataGrid,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `
+DataGrid is an Excel-like spreadsheet component with formula support and intellisense.
+
+## Features
+- **280+ Excel formulas** via fast-formula-parser (MIT licensed)
+- **Formula Intellisense** - Autocomplete with function signatures and parameter hints
+- **Sorting & Filtering** - Click column headers
+- **Frozen rows/columns** - Keep headers visible while scrolling
+- **Cell editing** - Double-click to edit
+- **Keyboard navigation** - Arrow keys, Enter, Escape, Tab
+- **Zebra striping** - Alternating row colors
+- **CSV Export** - Export data to CSV
+
+## Formula Intellisense
+When editing a cell with \`formulas={true}\`:
+1. Type \`=\` to see all available formulas
+2. Start typing a function name to filter (e.g., \`=SUM\`, \`=VL\`)
+3. Use category tabs to browse (Math, Lookup, Text, Logical, Date, etc.)
+4. Arrow keys navigate, Tab/Enter inserts the function
+5. After inserting, see parameter hints showing what each argument means
+
+## Supported Formulas
+**Math:** SUM, AVERAGE, MIN, MAX, COUNT, ROUND, ABS, SQRT, PRODUCT, MOD...
+**Lookup:** VLOOKUP, HLOOKUP, INDEX, MATCH, CHOOSE, OFFSET, INDIRECT...
+**Text:** CONCATENATE, LEFT, RIGHT, MID, LEN, UPPER, LOWER, TRIM...
+**Logical:** IF, IFS, AND, OR, NOT, IFERROR, SWITCH...
+**Date:** TODAY, NOW, DATE, YEAR, MONTH, DAY, DATEDIF, NETWORKDAYS...
+**Statistical:** COUNTIF, SUMIF, AVERAGEIF, MEDIAN, STDEV, RANK...
+**Financial:** PMT, PV, FV, NPV, IRR, RATE...
+
+## Frozen Rows
+- \`'none'\` - No frozen rows
+- \`'first'\` - Freeze first row (common for headers)
+- \`'selected'\` - Freeze the currently selected row
+- \`number\` - Freeze specific number of rows
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+
+// Sample data
+const basicColumns: DataGridColumn[] = [
+  { key: 'name', header: 'Name', width: 150, sortable: true, filterable: true },
+  { key: 'age', header: 'Age', width: 80, type: 'number', sortable: true, align: 'right' },
+  { key: 'city', header: 'City', width: 150, sortable: true, filterable: true },
+  { key: 'country', header: 'Country', width: 120, sortable: true },
+];
+
+const basicData: DataGridCell[][] = [
+  [{ value: 'John Smith' }, { value: 32 }, { value: 'New York' }, { value: 'USA' }],
+  [{ value: 'Jane Doe' }, { value: 28 }, { value: 'Los Angeles' }, { value: 'USA' }],
+  [{ value: 'Bob Johnson' }, { value: 45 }, { value: 'Chicago' }, { value: 'USA' }],
+  [{ value: 'Alice Brown' }, { value: 36 }, { value: 'Houston' }, { value: 'USA' }],
+  [{ value: 'Charlie Wilson' }, { value: 29 }, { value: 'Phoenix' }, { value: 'USA' }],
+  [{ value: 'Diana Miller' }, { value: 41 }, { value: 'Philadelphia' }, { value: 'USA' }],
+  [{ value: 'Edward Davis' }, { value: 33 }, { value: 'San Antonio' }, { value: 'USA' }],
+  [{ value: 'Fiona Garcia' }, { value: 27 }, { value: 'San Diego' }, { value: 'USA' }],
+];
+
+const salesColumns: DataGridColumn[] = [
+  { key: 'product', header: 'Product', width: 150 },
+  { key: 'q1', header: 'Q1', width: 100, type: 'number', align: 'right' },
+  { key: 'q2', header: 'Q2', width: 100, type: 'number', align: 'right' },
+  { key: 'q3', header: 'Q3', width: 100, type: 'number', align: 'right' },
+  { key: 'q4', header: 'Q4', width: 100, type: 'number', align: 'right' },
+  { key: 'total', header: 'Total', width: 120, type: 'number', align: 'right' },
+];
+
+const salesData: DataGridCell[][] = [
+  [
+    { value: 'Widget A' },
+    { value: 1200 },
+    { value: 1350 },
+    { value: 1100 },
+    { value: 1500 },
+    { value: 0, formula: '=SUM(B1:E1)' },
+  ],
+  [
+    { value: 'Widget B' },
+    { value: 800 },
+    { value: 950 },
+    { value: 1200 },
+    { value: 1100 },
+    { value: 0, formula: '=SUM(B2:E2)' },
+  ],
+  [
+    { value: 'Widget C' },
+    { value: 2100 },
+    { value: 1800 },
+    { value: 2200 },
+    { value: 2400 },
+    { value: 0, formula: '=SUM(B3:E3)' },
+  ],
+  [
+    { value: 'Widget D' },
+    { value: 650 },
+    { value: 720 },
+    { value: 680 },
+    { value: 750 },
+    { value: 0, formula: '=SUM(B4:E4)' },
+  ],
+  [
+    { value: 'Total', readOnly: true },
+    { value: 0, formula: '=SUM(B1:B4)' },
+    { value: 0, formula: '=SUM(C1:C4)' },
+    { value: 0, formula: '=SUM(D1:D4)' },
+    { value: 0, formula: '=SUM(E1:E4)' },
+    { value: 0, formula: '=SUM(F1:F4)' },
+  ],
+];
+
+const flightLogColumns: DataGridColumn[] = [
+  { key: 'date', header: 'Date', width: 100, sortable: true },
+  { key: 'aircraft', header: 'Aircraft', width: 120, sortable: true, filterable: true },
+  { key: 'registration', header: 'Registration', width: 100 },
+  { key: 'departure', header: 'Departure', width: 90 },
+  { key: 'arrival', header: 'Arrival', width: 90 },
+  { key: 'flightTime', header: 'Flight Time', width: 100, type: 'number', align: 'right' },
+  { key: 'passengers', header: 'Passengers', width: 100, type: 'number', align: 'right' },
+  { key: 'pilot', header: 'Pilot', width: 120, sortable: true, filterable: true },
+];
+
+const flightLogData: DataGridCell[][] = [
+  [{ value: '2024-01-15' }, { value: 'Cessna 172' }, { value: 'N12345' }, { value: 'KJFK' }, { value: 'KBOS' }, { value: 2.5 }, { value: 3 }, { value: 'John Smith' }],
+  [{ value: '2024-01-16' }, { value: 'Piper PA-28' }, { value: 'N67890' }, { value: 'KBOS' }, { value: 'KPHL' }, { value: 1.8 }, { value: 2 }, { value: 'Jane Doe' }],
+  [{ value: '2024-01-17' }, { value: 'Cessna 182' }, { value: 'N11111' }, { value: 'KPHL' }, { value: 'KDCA' }, { value: 1.2 }, { value: 4 }, { value: 'Bob Johnson' }],
+  [{ value: '2024-01-18' }, { value: 'Beechcraft Baron' }, { value: 'N22222' }, { value: 'KDCA' }, { value: 'KATL' }, { value: 2.1 }, { value: 5 }, { value: 'Alice Brown' }],
+  [{ value: '2024-01-19' }, { value: 'Cessna 172' }, { value: 'N12345' }, { value: 'KATL' }, { value: 'KMIA' }, { value: 2.8 }, { value: 3 }, { value: 'John Smith' }],
+  [{ value: '2024-01-20' }, { value: 'Piper PA-28' }, { value: 'N67890' }, { value: 'KMIA' }, { value: 'KTPA' }, { value: 0.9 }, { value: 2 }, { value: 'Charlie Wilson' }],
+  [{ value: '2024-01-21' }, { value: 'Cessna 182' }, { value: 'N11111' }, { value: 'KTPA' }, { value: 'KJAX' }, { value: 1.1 }, { value: 4 }, { value: 'Diana Miller' }],
+  [{ value: '2024-01-22' }, { value: 'Beechcraft Baron' }, { value: 'N22222' }, { value: 'KJAX' }, { value: 'KCLT' }, { value: 1.7 }, { value: 5 }, { value: 'Edward Davis' }],
+  [{ value: '2024-01-23' }, { value: 'Cessna 172' }, { value: 'N12345' }, { value: 'KCLT' }, { value: 'KRDU' }, { value: 0.8 }, { value: 3 }, { value: 'Fiona Garcia' }],
+  [{ value: '2024-01-24' }, { value: 'Piper PA-28' }, { value: 'N67890' }, { value: 'KRDU' }, { value: 'KRIC' }, { value: 0.6 }, { value: 2 }, { value: 'John Smith' }],
+];
+
+/**
+ * Basic grid with sorting and filtering
+ */
+export const Basic: Story = {
+  args: {
+    data: basicData,
+    columns: basicColumns,
+    rowHeaders: true,
+    height: 350,
+  },
+};
+
+/**
+ * With Excel formulas - demonstrates SUM and cell references
+ *
+ * **Formula Intellisense:**
+ * - Double-click any cell and type `=` to see formula autocomplete
+ * - Use arrow keys to navigate, Tab/Enter to insert
+ * - Browse by category (Math, Lookup, Text, etc.)
+ * - See parameter hints as you type
+ *
+ * Try typing `=SUM(`, `=VLOOKUP(`, `=IF(` etc.
+ */
+export const WithFormulas: Story = {
+  args: {
+    data: salesData,
+    columns: salesColumns,
+    formulas: true,
+    rowHeaders: true,
+    height: 300,
+    showToolbar: true,
+    title: 'Quarterly Sales Report',
+  },
+};
+
+/**
+ * Frozen first row - header stays visible while scrolling
+ */
+export const FrozenFirstRow: Story = {
+  args: {
+    data: flightLogData,
+    columns: flightLogColumns,
+    frozenRows: 'first',
+    rowHeaders: true,
+    zebraStripes: true,
+    height: 300,
+    showToolbar: true,
+    title: 'Flight Log',
+    showFreezeRowToggle: true,
+  },
+};
+
+/**
+ * Frozen columns - first column stays visible while scrolling horizontally
+ */
+export const FrozenColumns: Story = {
+  args: {
+    data: flightLogData,
+    columns: flightLogColumns,
+    frozenColumns: 2,
+    rowHeaders: true,
+    zebraStripes: true,
+    height: 300,
+  },
+};
+
+/**
+ * Read-only data viewer with zebra stripes
+ */
+export const ReadOnlyViewer: Story = {
+  args: {
+    data: flightLogData,
+    columns: flightLogColumns,
+    readOnly: true,
+    zebraStripes: true,
+    rowHeaders: true,
+    height: 350,
+    showToolbar: true,
+    title: 'Flight Log Viewer',
+    enableExport: true,
+    exportFileName: 'flight-log.csv',
+  },
+};
+
+/**
+ * With toolbar - export and save functionality
+ */
+export const WithToolbar: Story = {
+  args: {
+    data: salesData,
+    columns: salesColumns,
+    formulas: true,
+    showToolbar: true,
+    title: 'Sales Dashboard',
+    enableExport: true,
+    enableSave: true,
+    showFreezeRowToggle: true,
+    onSave: async (data) => {
+      console.log('Saving data:', data);
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    },
+    height: 250,
+  },
+};
+
+/**
+ * Compact density - more data in less space
+ */
+export const CompactDensity: Story = {
+  args: {
+    data: flightLogData,
+    columns: flightLogColumns,
+    density: 'compact',
+    zebraStripes: true,
+    rowHeaders: true,
+    height: 300,
+  },
+};
+
+/**
+ * Comfortable density - more space between rows
+ */
+export const ComfortableDensity: Story = {
+  args: {
+    data: basicData,
+    columns: basicColumns,
+    density: 'comfortable',
+    zebraStripes: true,
+    rowHeaders: true,
+    height: 400,
+  },
+};
+
+/**
+ * Editable grid - double-click to edit cells
+ */
+export const Editable: Story = {
+  args: {
+    data: [
+      [{ value: 'Task 1' }, { value: 'In Progress' }, { value: 'High' }, { value: '2024-02-01' }],
+      [{ value: 'Task 2' }, { value: 'Done' }, { value: 'Medium' }, { value: '2024-01-28' }],
+      [{ value: 'Task 3' }, { value: 'Pending' }, { value: 'Low' }, { value: '2024-02-05' }],
+      [{ value: '' }, { value: '' }, { value: '' }, { value: '' }],
+      [{ value: '' }, { value: '' }, { value: '' }, { value: '' }],
+    ],
+    columns: [
+      { key: 'task', header: 'Task', width: 200 },
+      { key: 'status', header: 'Status', width: 120 },
+      { key: 'priority', header: 'Priority', width: 100 },
+      { key: 'dueDate', header: 'Due Date', width: 120 },
+    ],
+    rowHeaders: true,
+    height: 250,
+    onChange: (data, row, col) => {
+      console.log(`Cell changed at row ${row}, col ${col}:`, data[row][col]);
+    },
+  },
+};
+
+/**
+ * Full featured example - all features enabled
+ */
+export const FullFeatured: Story = {
+  args: {
+    data: salesData,
+    columns: salesColumns,
+    formulas: true,
+    frozenRows: 'first',
+    frozenColumns: 1,
+    zebraStripes: true,
+    rowHeaders: true,
+    showToolbar: true,
+    title: 'Full Featured DataGrid',
+    enableExport: true,
+    enableSave: true,
+    showFreezeRowToggle: true,
+    onSave: async (data) => {
+      console.log('Saving:', data);
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    },
+    height: 300,
+  },
+};
+
+/**
+ * Currency formatting example
+ */
+export const CurrencyFormatting: Story = {
+  args: {
+    data: [
+      [{ value: 'Product A' }, { value: 1234.56 }, { value: 100 }, { value: 0, formula: '=B1*C1' }],
+      [{ value: 'Product B' }, { value: 789.99 }, { value: 50 }, { value: 0, formula: '=B2*C2' }],
+      [{ value: 'Product C' }, { value: 2345.00 }, { value: 75 }, { value: 0, formula: '=B3*C3' }],
+      [{ value: 'Total' }, { value: 0, formula: '=SUM(B1:B3)' }, { value: 0, formula: '=SUM(C1:C3)' }, { value: 0, formula: '=SUM(D1:D3)' }],
+    ],
+    columns: [
+      { key: 'product', header: 'Product', width: 150 },
+      { key: 'price', header: 'Price', width: 120, type: 'currency', align: 'right' },
+      { key: 'qty', header: 'Quantity', width: 100, type: 'number', align: 'right' },
+      { key: 'total', header: 'Total', width: 150, type: 'currency', align: 'right' },
+    ],
+    formulas: true,
+    rowHeaders: true,
+    height: 220,
+  },
+};