@bigbinary/neeto-molecules 4.0.85 → 4.0.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "4.0.85",
+  "version": "4.0.87",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",
@@ -65,6 +65,7 @@
     "@bigbinary/neeto-time-zones": "0.5.5",
     "@bigbinary/neetoui": "8.2.13",
     "@dnd-kit/core": "^6.2.0",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@eslint/compat": "^1.2.8",
     "@eslint/eslintrc": "^3.3.1",
@@ -229,6 +230,7 @@
     "@bigbinary/neeto-time-zones": "0.5.5",
     "@bigbinary/neetoui": "8.2.13",
     "@dnd-kit/core": "^6.2.0",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@fullcalendar/core": "^6.1.8",
     "@fullcalendar/daygrid": "^6.1.8",

package/types/DndTable.d.ts

@@ -0,0 +1,168 @@
+interface DndTableProps<RowData = any> {
+  /**
+   * The data for the rows of the table.
+   */
+  rowData: RowData[];
+  /**
+   * The data for the columns of the table.
+   */
+  columnData: any[];
+  /**
+   * The index of the column to display the overlay for.
+   */
+  overlayColumnIndex?: number;
+  /**
+   * A function that determines if a row is droppable based on checks on the data.
+   */
+  isRowDroppable?: (data: RowData) => boolean;
+  /**
+   * A function that is called when a row is dropped.
+   */
+  onDrop: (active: RowData, over: RowData) => void;
+  [key: string]: any;
+}
+interface UseDndTableProps<RowData = any> {
+  rowData: RowData[];
+  onUpdate: (active: RowData, over: RowData) => void;
+}
+declare const useDndTable: (props: UseDndTableProps<RowData>) => {
+  rowData: RowData[];
+  onDrop: (active: RowData, over: RowData) => void;
+};
+/**
+ *
+ * The DndTable component is a drag-and-drop enabled table that allows users to
+ *
+ * reorder rows by dragging and dropping them. It provides visual feedback during
+ *
+ * drag operations and supports custom overlay rendering.
+ *
+ * The main table component with drag-and-drop functionality built on top of the
+ *
+ * neetoui Table component.
+ *
+ * A custom hook that provides state management and error handling for
+ *
+ * drag-and-drop operations. It automatically handles optimistic updates and
+ *
+ * rollback on errors.
+ *
+ * @example 
+ *
+ * import DndTable, { useDndTable } from "@bigbinary/neeto-molecules/DndTable";
+ * 
+ * const MyComponent = () => {
+ *   const [data, setData] = useState([
+ *     { id: 1, name: "John Doe", email: "john.doe@example.com" },
+ *     { id: 2, name: "Jane Doe", email: "jane.doe@example.com" },
+ *     { id: 3, name: "Alice Smith", email: "alice.smith@example.com" },
+ *     { id: 4, name: "Bob Johnson", email: "bob.johnson@example.com" },
+ *     { id: 5, name: "Carol Williams", email: "carol.williams@example.com" },
+ *     { id: 6, name: "David Brown", email: "david.brown@example.com" },
+ *     { id: 7, name: "Emma Davis", email: "emma.davis@example.com" },
+ *     { id: 8, name: "Frank Miller", email: "frank.miller@example.com" },
+ *     { id: 9, name: "Grace Wilson", email: "grace.wilson@example.com" },
+ *     { id: 10, name: "Henry Moore", email: "henry.moore@example.com" },
+ *     { id: 11, name: "Ivy Taylor", email: "ivy.taylor@example.com" },
+ *     { id: 12, name: "Jack Anderson", email: "jack.anderson@example.com" },
+ *     { id: 13, name: "Kate Thomas", email: "kate.thomas@example.com" },
+ *     { id: 14, name: "Liam Jackson", email: "liam.jackson@example.com" },
+ *     { id: 15, name: "Maya White", email: "maya.white@example.com" },
+ *     { id: 16, name: "Noah Harris", email: "noah.harris@example.com" },
+ *     { id: 17, name: "Olivia Martin", email: "olivia.martin@example.com" },
+ *     { id: 18, name: "Paul Thompson", email: "paul.thompson@example.com" },
+ *     { id: 19, name: "Quinn Garcia", email: "quinn.garcia@example.com" },
+ *     { id: 20, name: "Rachel Martinez", email: "rachel.martinez@example.com" },
+ *     { id: 21, name: "Sam Robinson", email: "sam.robinson@example.com" },
+ *     { id: 22, name: "Tina Clark", email: "tina.clark@example.com" },
+ *     { id: 23, name: "Uma Rodriguez", email: "uma.rodriguez@example.com" },
+ *     { id: 24, name: "Victor Lewis", email: "victor.lewis@example.com" },
+ *     { id: 25, name: "Wendy Lee", email: "wendy.lee@example.com" },
+ *     { id: 26, name: "Xavier Walker", email: "xavier.walker@example.com" },
+ *     { id: 27, name: "Yara Hall", email: "yara.hall@example.com" },
+ *     { id: 28, name: "Zoe Allen", email: "zoe.allen@example.com" },
+ *     { id: 29, name: "Aaron Young", email: "aaron.young@example.com" },
+ *     { id: 30, name: "Bella King", email: "bella.king@example.com" },
+ *   ]);
+ * 
+ *   const { rowData, onDrop } = useDndTable({
+ *     rowData: data,
+ *     onUpdate: async (active, over) => {
+ *       // Make API call to update order, the item is automatically removed from the local state by the hook.
+ *       await updateRowOrder(active.id, over.id);
+ *     },
+ *   });
+ * 
+ *   const columnData = [
+ *     { key: "name", dataIndex: "name", title: "Name" },
+ *     { key: "email", dataIndex: "email", title: "Email" },
+ *   ];
+ * 
+ *   return (
+ *     <DndTable
+ *       rowData={rowData}
+ *       columnData={columnData}
+ *       onDrop={onDrop}
+ *       isRowDroppable={row => row.status !== "archived"}
+ *     />
+ *   );
+ * };
+ * @endexample
+ * You can customize the drag overlay by providing a render function in your
+ *
+ * column configuration:
+ *
+ * @example 
+ *
+ * const columnData = [
+ *   {
+ *     key: "name",
+ *     dataIndex: "name",
+ *     title: "Name",
+ *     render: (value, record) => (
+ *       <div className="flex items-center">
+ *         <Avatar name={record.name} />
+ *         <span className="ml-2">{value}</span>
+ *       </div>
+ *     ),
+ *   },
+ *   { key: "email", dataIndex: "email", title: "Email" },
+ * ];
+ * 
+ * <DndTable
+ *   rowData={rowData}
+ *   columnData={columnData}
+ *   overlayColumnIndex={0} // Use the first column for overlay
+ *   onDrop={onDrop}
+ * />;
+ * @endexample
+ * You can make certain rows non-droppable based on their data:
+ *
+ * @example 
+ *
+ * <DndTable
+ *   rowData={rowData}
+ *   columnData={columnData}
+ *   onDrop={onDrop}
+ *   isRowDroppable={row => {
+ *     // Only allow dropping if row is not locked
+ *     return !row.isLocked;
+ *   }}
+ * />
+ * @endexample
+ * The useDndTable hook automatically handles errors and shows toast
+ *
+ * notifications:
+ *
+ * @example 
+ *
+ * const { rowData, onDrop } = useDndTable({
+ *   rowData: data,
+ *   onUpdate: (active, over) => api.updateOrder(active.id, over.id);
+ *   // Note: Changes to local state are automatically rolled back by the hook on error.
+ * });
+ * @endexample
+*/
+declare const DndTable: <RowData = any>(props: DndTableProps<RowData>) => JSX.Element | null;
+
+export { DndTable as default, useDndTable };