@powerhousedao/document-engineering 1.38.0 → 1.40.0

package/dist/src/table/examples/custom-cell-editors/custom-cell-editors.stories.js

@@ -0,0 +1,332 @@
+import CustomCellEditorsExample from './custom-cell-editors.js';
+const meta = {
+    title: 'Data Display/Object Set Table/Examples/Custom Cell Editors',
+    component: CustomCellEditorsExample,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        chromatic: { disableSnapshot: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                format: true,
+                code: `
+import { useMemo, useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { 
+  cn, 
+  ObjectSetTable, 
+  buildStringCellEditor,
+  type CellContext, 
+  type ColumnDef, 
+  type ObjectSetTableConfig 
+} from "@powerhousedao/document-engineering";
+
+// Mock data type for this example
+interface MockedPerson {
+  id: string;
+  firstName: string;
+  email: string;
+  walletAddress: string;
+  payment: number;
+  status: 'active' | 'inactive';
+  isActive: boolean;
+  address: {
+    addressLine1: string;
+    addressLine2: string;
+    city: string;
+    state: string;
+    zip: string;
+  };
+}
+
+const CustomTextInputEditor = ({
+  value,
+  onChange,
+  context,
+  placeholder,
+  maxLength,
+}: {
+  value: unknown
+  onChange: (newValue: unknown) => void
+  context: CellContext<MockedPerson>
+  placeholder?: string
+  maxLength?: number
+}) => {
+  const { register } = useFormContext()
+  const inputValue = typeof value === 'string' ? value : (value?.toString() ?? '')
+
+  return (
+    <input
+      {...register(context.column.field, {
+        value: inputValue,
+        onChange,
+        validate: (value) => {
+          if (typeof value === 'string' && value.length > 10) {
+            return 'Custom validation: Value must be less than 10 characters'
+          }
+          return true
+        },
+      })}
+      type="text"
+      placeholder={placeholder}
+      maxLength={maxLength}
+      autoFocus
+      className={cn(
+        'w-full px-2 py-1 text-sm border border-gray-300 rounded-md',
+        'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
+        'bg-white text-gray-900 placeholder-gray-500'
+      )}
+    />
+  )
+}
+
+const CustomEmailInputEditor = ({
+  value,
+  onChange,
+  context,
+}: {
+  value: unknown
+  onChange: (newValue: unknown) => void
+  context: CellContext<MockedPerson>
+}) => {
+  const { register } = useFormContext()
+  const emailValue = typeof value === 'string' ? value : (value?.toString() ?? '')
+
+  return (
+    <input
+      {...register(context.column.field, {
+        value: emailValue,
+        onChange,
+        pattern: {
+          value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i,
+          message: 'Invalid email address',
+        },
+      })}
+      type="email"
+      placeholder="Enter email address..."
+      autoFocus
+      className={cn(
+        'w-full px-2 py-1 text-sm border border-gray-300 rounded-md',
+        'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
+        'bg-white text-gray-900 placeholder-gray-500',
+        'invalid:border-red-500 invalid:ring-red-500'
+      )}
+    />
+  )
+}
+
+// Editors can be created using the CellEditor signature directly, but creating builders 
+// gives you the flexibility to reuse them with different parameters.
+const buildCustomHTMLInputEditor = (placeholder?: string, maxLength?: number) => {
+  const editor = (value: unknown, onChange: (newValue: unknown) => void, context: CellContext<MockedPerson>) => {
+    return (
+      <CustomTextInputEditor
+        value={value}
+        onChange={onChange}
+        context={context}
+        placeholder={placeholder}
+        maxLength={maxLength}
+      />
+    )
+  }
+  editor.displayName = 'CustomHTMLInputEditor'
+  return editor
+}
+
+const buildCustomEmailEditor = () => {
+  const editor = (value: unknown, onChange: (newValue: unknown) => void, context: CellContext<MockedPerson>) => {
+    return <CustomEmailInputEditor value={value} onChange={onChange} context={context} />
+  }
+  editor.displayName = 'CustomEmailEditor'
+  return editor
+}
+
+const CustomCellEditorsExample = () => {
+  const [data, setData] = useState<MockedPerson[]>([
+    {
+      id: '1',
+      firstName: 'John',
+      email: 'john@example.com',
+      walletAddress: '0x1234567890abcdef',
+      payment: 1500,
+      status: 'active',
+      isActive: true,
+      address: {
+        addressLine1: '123 Main St',
+        addressLine2: '',
+        city: 'San Francisco',
+        state: 'CA',
+        zip: '94102',
+      },
+    },
+    {
+      id: '2',
+      firstName: 'Jane',
+      email: 'jane@example.com',
+      walletAddress: '0xabcdef1234567890',
+      payment: 2500,
+      status: 'active',
+      isActive: true,
+      address: {
+        addressLine1: '456 Oak Ave',
+        addressLine2: 'Apt 2B',
+        city: 'Los Angeles',
+        state: 'CA',
+        zip: '90210',
+      },
+    },
+  ])
+
+  const columns = useMemo<Array<ColumnDef<MockedPerson>>>(
+    () => [
+      {
+        field: 'firstName',
+        title: 'First Name',
+        editable: true,
+        width: 160,
+        onSave: (value: unknown, context: CellContext<MockedPerson>) => {
+          if (typeof value === 'string' && value.trim().length > 0) {
+            setData((prevData) => {
+              const newData = [...prevData]
+              newData[context.rowIndex].firstName = value.trim()
+              return newData
+            })
+            return true
+          }
+          return false
+        },
+        // Using custom HTML input editor with validation
+        renderCellEditor: buildCustomHTMLInputEditor('Enter first name...', 50),
+      },
+      {
+        field: 'email',
+        title: 'Email',
+        editable: true,
+        width: 200,
+        type: 'email',
+        onSave: (value: unknown, context: CellContext<MockedPerson>) => {
+          if (typeof value === 'string' && /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)) {
+            setData((prevData) => {
+              const newData = [...prevData]
+              newData[context.rowIndex].email = value
+              return newData
+            })
+            return true
+          }
+          return false
+        },
+        // Using custom email input with react-hook-form validation
+        renderCellEditor: buildCustomEmailEditor(),
+      },
+      {
+        field: 'walletAddress',
+        title: 'Wallet Address',
+        editable: true,
+        width: 200,
+        onSave: (value: unknown, context: CellContext<MockedPerson>) => {
+          if (typeof value === 'string' && value.trim().length > 0) {
+            setData((prevData) => {
+              const newData = [...prevData]
+              newData[context.rowIndex].walletAddress = value.trim()
+              return newData
+            })
+            return true
+          }
+          return false
+        },
+        // Using built-in scalar editor for comparison
+        renderCellEditor: buildStringCellEditor({
+          placeholder: 'Enter wallet address...',
+          className: 'font-mono text-xs',
+        }),
+      },
+      {
+        field: 'payment',
+        title: 'Payment',
+        width: 120,
+        type: 'number',
+        editable: true,
+        align: 'right',
+        onSave: (value: unknown, context: CellContext<MockedPerson>) => {
+          const numValue = Number(value)
+          if (!isNaN(numValue) && numValue >= 0) {
+            setData((prevData) => {
+              const newData = [...prevData]
+              newData[context.rowIndex].payment = numValue
+              return newData
+            })
+            return true
+          }
+          return false
+        },
+        renderCell: (value?: number) => {
+          return value !== undefined ? <span className="font-mono">$\{value.toLocaleString()}</span> : null
+        },
+        // Using built-in editor for simplicity
+        renderCellEditor: buildStringCellEditor({
+          placeholder: 'Enter amount...',
+          className: 'text-right font-mono',
+        }),
+      },
+    ],
+    []
+  )
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <h3 className="font-semibold text-blue-900 mb-2">Custom Cell Editors Example</h3>
+        <p className="text-blue-800 text-sm">
+          This example demonstrates custom cell editors using HTML inputs with react-hook-form's register()
+          function. Compare the custom HTML inputs (First Name, Email) with the built-in scalar editor (Wallet Address).
+        </p>
+      </div>
+      <ObjectSetTable<MockedPerson>
+        columns={columns}
+        data={data}
+        minRowCount={5}
+        maxRowCount={10}
+        onDelete={(rows) => {
+          setData((prevData) => {
+            const newData = [...prevData]
+            const filteredData = newData.filter((row) => !rows.some((person) => person.id === row.id))
+            return filteredData
+          })
+        }}
+        onAdd={(data) => {
+          const newPerson: MockedPerson = {
+            id: crypto.randomUUID(),
+            firstName: '',
+            status: 'inactive',
+            payment: 0,
+            isActive: false,
+            walletAddress: '',
+            email: '',
+            address: {
+              addressLine1: '',
+              addressLine2: '',
+              city: '',
+              state: '',
+              zip: '',
+            },
+            ...data,
+          }
+          setData((prevData) => [...prevData, newPerson])
+        }}
+      />
+    </div>
+  )
+}
+
+export default CustomCellEditorsExample
+`,
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+//# sourceMappingURL=custom-cell-editors.stories.js.map

package/dist/src/table/examples/custom-cell-editors/custom-cell-editors.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-cell-editors.stories.js","sourceRoot":"","sources":["../../../../../src/table/examples/custom-cell-editors/custom-cell-editors.stories.tsx"],"names":[],"mappings":"AACA,OAAO,wBAAwB,MAAM,0BAA0B,CAAA;AAE/D,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,4DAA4D;IACnE,SAAS,EAAE,wBAAwB;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,SAAS,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE;QACpC,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,MAAM,EAAE,IAAI;gBACZ,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsTb;aACM;SACF;KACF;CAC8C,CAAA;AAEjD,eAAe,IAAI,CAAA;AAGnB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAA"}

package/dist/src/table/examples/custom-rendering/custom-rendering.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: Omit<import("../../index.js").ObjectSetTableConfig<import("../../table/mock-data.js").MockedPerson>, "columns" | "data">) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+        docs: {
+            source: {
+                language: string;
+                format: boolean;
+                code: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=custom-rendering.stories.d.ts.map

package/dist/src/table/examples/custom-rendering/custom-rendering.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-rendering.stories.d.ts","sourceRoot":"","sources":["../../../../../src/table/examples/custom-rendering/custom-rendering.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAyGqC,CAAA;AAE/C,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA"}

package/dist/src/table/examples/custom-rendering/custom-rendering.stories.js

@@ -0,0 +1,112 @@
+import CustomRenderingExample from './custom-rendering.js';
+const meta = {
+    title: 'Data Display/Object Set Table/Examples/Custom Rendering',
+    component: CustomRenderingExample,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        chromatic: { disableSnapshot: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                format: true,
+                code: `
+import { useMemo } from "react";
+import { cn } from "../../../../../scalars/index.js";
+import { mockData, type MockedPerson } from "../../mock-data.js";
+import { ObjectSetTable } from "../../object-set-table.js";
+import { ColumnDef } from "../../types.js";
+import { Icon } from "../../../icon/icon.js";
+
+const CustomRenderingExample = () => {
+  const columns = useMemo<ColumnDef<MockedPerson>[]>(
+    () => [
+        {
+          field: "firstName",
+          title: "User",
+          renderCell: (value: string, context) => (
+            <div className="flex items-center gap-2">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-blue-800 font-semibold text-xs">
+                {value.charAt(0).toUpperCase()}
+              </div>
+              <span className="font-medium">{value}</span>
+            </div>
+          ),
+        },
+        {
+          field: "status",
+          renderCell: (value: "active" | "inactive") => (
+            <div className="flex items-center gap-2">
+              <div
+                className={cn(
+                  "h-2 w-2 rounded-full",
+                  value === "active" ? "bg-green-500" : "bg-red-500"
+                )}
+              />
+              <span
+                className={cn(
+                  "font-medium",
+                  value === "active" ? "text-green-700" : "text-red-700"
+                )}
+              >
+                {value.charAt(0).toUpperCase() + value.slice(1)}
+              </span>
+            </div>
+          ),
+        },
+        {
+          field: "payment",
+          type: "number",
+          renderCell: (value: number) => (
+            <div className="flex items-center justify-end">
+              <span className="font-semibold text-gray-900">
+                \${value.toLocaleString()}
+              </span>
+              {value > 1000000 ? (
+                <Icon name="ArrowUp" size={16} className="ml-1 text-green-500" />
+              ) : (
+                <Icon
+                  name="ArrowUp"
+                  size={16}
+                  className="ml-1 text-red-500 rotate-180"
+                />
+              )}
+            </div>
+          ),
+        },
+        {
+          field: "isActive",
+          title: "Active",
+          renderCell: (value: boolean) => (
+            <div className="flex justify-center">
+              {value ? (
+                <Icon name="CheckCircle" size={20} className="text-green-500" />
+              ) : (
+                <Icon name="CrossCircle" size={20} className="text-red-500" />
+              )}
+            </div>
+          ),
+        },
+      ],
+    []
+  );
+
+  return (
+    <ObjectSetTable<MockedPerson>
+      columns={columns}
+      data={mockData.slice(0, 6)}
+    />
+  );
+};
+
+export default CustomRenderingExample;
+        `,
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+//# sourceMappingURL=custom-rendering.stories.js.map

package/dist/src/table/examples/custom-rendering/custom-rendering.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-rendering.stories.js","sourceRoot":"","sources":["../../../../../src/table/examples/custom-rendering/custom-rendering.stories.tsx"],"names":[],"mappings":"AACA,OAAO,sBAAsB,MAAM,uBAAuB,CAAA;AAE1D,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,yDAAyD;IAChE,SAAS,EAAE,sBAAsB;IACjC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,SAAS,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE;QACpC,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,MAAM,EAAE,IAAI;gBACZ,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA0FL;aACF;SACF;KACF;CAC4C,CAAA;AAE/C,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAA"}

package/dist/src/table/examples/events/events.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=events.stories.d.ts.map

package/dist/src/table/examples/events/events.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.stories.d.ts","sourceRoot":"","sources":["../../../../../src/table/examples/events/events.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,QAAA,MAAM,IAAI;;;;;;;;;;CAQ4B,CAAA;AAEtC,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA"}

package/dist/src/table/examples/events/events.stories.js

@@ -0,0 +1,15 @@
+import { EventsExample } from './events.js';
+const meta = {
+    title: 'Data Display/Object Set Table/Examples/Events',
+    component: EventsExample,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+        chromatic: { disableSnapshot: true },
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+//# sourceMappingURL=events.stories.js.map

package/dist/src/table/examples/events/events.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.stories.js","sourceRoot":"","sources":["../../../../../src/table/examples/events/events.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE3C,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,+CAA+C;IACtD,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;QAChB,SAAS,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE;KACrC;CACmC,CAAA;AAEtC,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAA"}

package/dist/src/table/examples/row-reordering/row-reordering.stories.d.ts

@@ -0,0 +1,37 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: Omit<import("../../index.js").ObjectSetTableConfig<import("../../table/mock-data.js").MockedPerson>, "columns" | "data">) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+        docs: {
+            source: {
+                language: string;
+                format: boolean;
+                code: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * A simple demonstration of row reordering functionality using drag and drop.
+ * Drag any row to a new position to reorder the data. The changes persist in the component state.
+ */
+export declare const Default: Story;
+/**
+ * Row reordering with row numbers disabled.
+ * This example shows how reordering works without row number indicators.
+ */
+export declare const WithoutRowNumbers: Story;
+/**
+ * Row reordering with selection disabled.
+ * Users can still reorder rows even when row selection is disabled.
+ */
+export declare const WithoutSelection: Story;
+//# sourceMappingURL=row-reordering.stories.d.ts.map

package/dist/src/table/examples/row-reordering/row-reordering.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-reordering.stories.d.ts","sourceRoot":"","sources":["../../../../../src/table/examples/row-reordering/row-reordering.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAkHmC,CAAA;AAE7C,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAI/B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAA"}