@webiny/admin-ui 6.3.0 → 6.4.0-beta.1

package/DataTable/DataTable.stories.js

@@ -1,288 +1,288 @@
-import React, { useState, useEffect } from "react";
+import react, { useEffect, useState } from "react";
 import { DataTable } from "./DataTable.js";
 import { Avatar } from "../Avatar/index.js";
 import { Text } from "../Text/index.js";
 const meta = {
-  title: "Components/DataTable",
-  component: DataTable,
-  parameters: {
-    layout: "padded"
-  }
-};
-export default meta;
-
-// Declare the data structure.
-
-// Define the columns structure for the table.
-const columns = {
-  name: {
-    header: "Title"
-  },
-  createdBy: {
-    header: "Author"
-  },
-  lastModified: {
-    header: "Last Modified"
-  },
-  status: {
-    header: "Status"
-  }
+    title: "Components/DataTable",
+    component: DataTable,
+    parameters: {
+        layout: "padded"
+    }
 };
-
-// Define the data to display.
-const data = [{
-  id: "entry-1",
-  name: "Getting Started Guide",
-  createdBy: "John Doe",
-  lastModified: "1 hour ago",
-  status: "Published"
-}, {
-  id: "entry-2",
-  name: "User Documentation",
-  createdBy: "Jane Smith",
-  lastModified: "3 days ago",
-  status: "Draft"
-}, {
-  id: "entry-3",
-  name: "API Reference",
-  createdBy: "John Doe",
-  lastModified: "1 week ago",
-  status: "Published"
-}];
-export const Default = {
-  args: {
-    data,
-    columns
-  }
+const DataTable_stories = meta;
+const DataTable_stories_columns = {
+    name: {
+        header: "Title"
+    },
+    createdBy: {
+        header: "Author"
+    },
+    lastModified: {
+        header: "Last Modified"
+    },
+    status: {
+        header: "Status"
+    }
 };
-export const Bordered = {
-  args: {
-    ...Default.args,
-    bordered: true
-  }
+const data = [
+    {
+        id: "entry-1",
+        name: "Getting Started Guide",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    },
+    {
+        id: "entry-2",
+        name: "User Documentation",
+        createdBy: "Jane Smith",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        id: "entry-3",
+        name: "API Reference",
+        createdBy: "John Doe",
+        lastModified: "1 week ago",
+        status: "Published"
+    }
+];
+const Default = {
+    args: {
+        data: data,
+        columns: DataTable_stories_columns
+    }
 };
-export const WithStickyHeader = {
-  args: {
-    ...Default.args,
-    stickyHeader: true
-  }
+const Bordered = {
+    args: {
+        ...Default.args,
+        bordered: true
+    }
 };
-export const WithSelectableRows = {
-  args: Default.args,
-  render: args => {
-    const [selectedRows, setSelectedRows] = useState([]);
-    return /*#__PURE__*/React.createElement(DataTable, Object.assign({}, args, {
-      selectedRows: selectedRows,
-      onSelectRow: rows => setSelectedRows(rows)
-    }));
-  }
+const WithStickyHeader = {
+    args: {
+        ...Default.args,
+        stickyHeader: true
+    }
 };
-export const WithLoading = {
-  args: {
-    columns
-  },
-  render: ({
-    columns
-  }) => {
-    const [loading, setLoading] = useState(true);
-    const [tableData, setTableData] = useState([]);
-    useEffect(() => {
-      const timer = setTimeout(() => {
-        setTableData(data); // your predefined data
-        setLoading(false);
-      }, 5000);
-      return () => clearTimeout(timer);
-    }, []);
-    return /*#__PURE__*/React.createElement(DataTable, {
-      columns: columns,
-      data: tableData,
-      loading: loading
-    });
-  }
+const WithSelectableRows = {
+    args: Default.args,
+    render: (args)=>{
+        const [selectedRows, setSelectedRows] = useState([]);
+        return /*#__PURE__*/ react.createElement(DataTable, {
+            ...args,
+            selectedRows: selectedRows,
+            onSelectRow: (rows)=>setSelectedRows(rows)
+        });
+    }
 };
-export const WithLongColumnContent = {
-  args: {
-    ...Default.args,
-    columns: {
-      ...columns,
-      name: {
-        ...columns.name,
-        header: "Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-      }
+const WithLoading = {
+    args: {
+        columns: DataTable_stories_columns
     },
-    data: data.map(entry => ({
-      ...entry,
-      name: `${entry.name} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`
-    }))
-  }
+    render: ({ columns })=>{
+        const [loading, setLoading] = useState(true);
+        const [tableData, setTableData] = useState([]);
+        useEffect(()=>{
+            const timer = setTimeout(()=>{
+                setTableData(data);
+                setLoading(false);
+            }, 5000);
+            return ()=>clearTimeout(timer);
+        }, []);
+        return /*#__PURE__*/ react.createElement(DataTable, {
+            columns: columns,
+            data: tableData,
+            loading: loading
+        });
+    }
 };
-export const WithCustomCellRenderer = {
-  args: {
-    ...Default.args,
-    columns: {
-      ...columns,
-      name: {
-        ...columns.name,
-        cell: entry => {
-          return /*#__PURE__*/React.createElement("div", {
-            className: "flex items-center gap-sm-extra"
-          }, /*#__PURE__*/React.createElement(Avatar, {
-            image: /*#__PURE__*/React.createElement(Avatar.Image, {
-              src: "https://github.com/webiny-bot.png",
-              alt: "@webiny"
-            }),
-            fallback: /*#__PURE__*/React.createElement(Avatar.Fallback, null, entry.name.charAt(0)),
-            size: "xl"
-          }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
-            className: "text-neutral-primary font-semibold",
-            as: "div"
-          }, entry.name), /*#__PURE__*/React.createElement(Text, {
-            size: "sm",
-            className: "text-neutral-strong",
-            as: "div"
-          }, `Last updated: ${entry.lastModified}`)));
-        }
-      }
+const WithLongColumnContent = {
+    args: {
+        ...Default.args,
+        columns: {
+            ...DataTable_stories_columns,
+            name: {
+                ...DataTable_stories_columns.name,
+                header: "Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+            }
+        },
+        data: data.map((entry)=>({
+                ...entry,
+                name: `${entry.name} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`
+            }))
     }
-  }
 };
-export const WithCustomColumnSize = {
-  args: {
-    ...Default.args,
-    columns: {
-      ...columns,
-      name: {
-        ...columns.name,
-        size: 200
-      }
+const WithCustomCellRenderer = {
+    args: {
+        ...Default.args,
+        columns: {
+            ...DataTable_stories_columns,
+            name: {
+                ...DataTable_stories_columns.name,
+                cell: (entry)=>/*#__PURE__*/ react.createElement("div", {
+                        className: "flex items-center gap-sm-extra"
+                    }, /*#__PURE__*/ react.createElement(Avatar, {
+                        image: /*#__PURE__*/ react.createElement(Avatar.Image, {
+                            src: "https://github.com/webiny-bot.png",
+                            alt: "@webiny"
+                        }),
+                        fallback: /*#__PURE__*/ react.createElement(Avatar.Fallback, null, entry.name.charAt(0)),
+                        size: "xl"
+                    }), /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Text, {
+                        className: "text-neutral-primary font-semibold",
+                        as: "div"
+                    }, entry.name), /*#__PURE__*/ react.createElement(Text, {
+                        size: "sm",
+                        className: "text-neutral-strong",
+                        as: "div"
+                    }, `Last updated: ${entry.lastModified}`)))
+            }
+        }
     }
-  }
 };
-export const WithCustomColumnClassName = {
-  args: {
-    ...Default.args,
-    columns: {
-      ...columns,
-      lastModified: {
-        ...columns.lastModified,
-        className: "bg-primary-subtle"
-      },
-      status: {
-        ...columns.status,
-        className: "text-right"
-      }
+const WithCustomColumnSize = {
+    args: {
+        ...Default.args,
+        columns: {
+            ...DataTable_stories_columns,
+            name: {
+                ...DataTable_stories_columns.name,
+                size: 200
+            }
+        }
     }
-  }
 };
-export const WithSorting = {
-  args: {
-    ...Default.args,
-    columns: {
-      ...columns,
-      name: {
-        ...columns.name,
-        enableSorting: true
-      },
-      lastModified: {
-        ...columns.lastModified,
-        enableSorting: true
-      }
-    },
-    sorting: [{
-      id: "lastModified",
-      desc: true
-    }]
-  },
-  render: ({
-    sorting: argsSorting = [],
-    ...args
-  }) => {
-    const [sorting, setSorting] = useState(argsSorting);
-    return /*#__PURE__*/React.createElement(DataTable, Object.assign({}, args, {
-      sorting: sorting,
-      onSortingChange: setSorting
-    }));
-  }
+const WithCustomColumnClassName = {
+    args: {
+        ...Default.args,
+        columns: {
+            ...DataTable_stories_columns,
+            lastModified: {
+                ...DataTable_stories_columns.lastModified,
+                className: "bg-primary-subtle"
+            },
+            status: {
+                ...DataTable_stories_columns.status,
+                className: "text-right"
+            }
+        }
+    }
 };
-
-// Add a Documentation story
-export const Documentation = {
-  args: {
-    bordered: true,
-    stickyHeader: true,
-    columns: {
-      name: {
-        header: "Title",
-        enableSorting: true
-      },
-      createdBy: {
-        header: "Author"
-      },
-      lastModified: {
-        header: "Last Modified",
-        enableSorting: true
-      },
-      status: {
-        header: "Status"
-      }
+const WithSorting = {
+    args: {
+        ...Default.args,
+        columns: {
+            ...DataTable_stories_columns,
+            name: {
+                ...DataTable_stories_columns.name,
+                enableSorting: true
+            },
+            lastModified: {
+                ...DataTable_stories_columns.lastModified,
+                enableSorting: true
+            }
+        },
+        sorting: [
+            {
+                id: "lastModified",
+                desc: true
+            }
+        ]
     },
-    data: [{
-      id: "entry-1",
-      name: "Getting Started Guide",
-      createdBy: "John Doe",
-      lastModified: "1 hour ago",
-      status: "Published"
-    }, {
-      id: "entry-2",
-      name: "User Documentation",
-      createdBy: "Jane Smith",
-      lastModified: "3 days ago",
-      status: "Draft"
-    }, {
-      id: "entry-3",
-      name: "API Reference",
-      createdBy: "John Doe",
-      lastModified: "1 week ago",
-      status: "Published"
-    }]
-  },
-  render: args => {
-    const [selectedRows, setSelectedRows] = useState([]);
-    const [sorting, setSorting] = useState([]);
-    return /*#__PURE__*/React.createElement(DataTable, Object.assign({}, args, {
-      selectedRows: selectedRows,
-      onSelectRow: rows => setSelectedRows(rows),
-      sorting: sorting,
-      onSortingChange: setSorting
-    }));
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "This example shows a DataTable with selectable rows, sorting, and a sticky header."
-      }
+    render: ({ sorting: argsSorting = [], ...args })=>{
+        const [sorting, setSorting] = useState(argsSorting);
+        return /*#__PURE__*/ react.createElement(DataTable, {
+            ...args,
+            sorting: sorting,
+            onSortingChange: setSorting
+        });
     }
-  },
-  argTypes: {
-    bordered: {
-      description: "Show or hide borders.",
-      control: "boolean",
-      defaultValue: true
+};
+const Documentation = {
+    args: {
+        bordered: true,
+        stickyHeader: true,
+        columns: {
+            name: {
+                header: "Title",
+                enableSorting: true
+            },
+            createdBy: {
+                header: "Author"
+            },
+            lastModified: {
+                header: "Last Modified",
+                enableSorting: true
+            },
+            status: {
+                header: "Status"
+            }
+        },
+        data: [
+            {
+                id: "entry-1",
+                name: "Getting Started Guide",
+                createdBy: "John Doe",
+                lastModified: "1 hour ago",
+                status: "Published"
+            },
+            {
+                id: "entry-2",
+                name: "User Documentation",
+                createdBy: "Jane Smith",
+                lastModified: "3 days ago",
+                status: "Draft"
+            },
+            {
+                id: "entry-3",
+                name: "API Reference",
+                createdBy: "John Doe",
+                lastModified: "1 week ago",
+                status: "Published"
+            }
+        ]
     },
-    stickyHeader: {
-      description: "Enable sticky header.",
-      control: "boolean",
-      defaultValue: true
+    render: (args)=>{
+        const [selectedRows, setSelectedRows] = useState([]);
+        const [sorting, setSorting] = useState([]);
+        return /*#__PURE__*/ react.createElement(DataTable, {
+            ...args,
+            selectedRows: selectedRows,
+            onSelectRow: (rows)=>setSelectedRows(rows),
+            sorting: sorting,
+            onSortingChange: setSorting
+        });
     },
-    columns: {
-      description: "Columns definition. Please refer to the code example for details.",
-      control: false
+    parameters: {
+        docs: {
+            description: {
+                story: "This example shows a DataTable with selectable rows, sorting, and a sticky header."
+            }
+        }
     },
-    data: {
-      description: "Data to display into DataTable body. Please refer to the code example for details.",
-      control: false
+    argTypes: {
+        bordered: {
+            description: "Show or hide borders.",
+            control: "boolean",
+            defaultValue: true
+        },
+        stickyHeader: {
+            description: "Enable sticky header.",
+            control: "boolean",
+            defaultValue: true
+        },
+        columns: {
+            description: "Columns definition. Please refer to the code example for details.",
+            control: false
+        },
+        data: {
+            description: "Data to display into DataTable body. Please refer to the code example for details.",
+            control: false
+        }
     }
-  }
 };
+export default DataTable_stories;
+export { Bordered, Default, Documentation, WithCustomCellRenderer, WithCustomColumnClassName, WithCustomColumnSize, WithLoading, WithLongColumnContent, WithSelectableRows, WithSorting, WithStickyHeader };
 
 //# sourceMappingURL=DataTable.stories.js.map

package/DataTable/DataTable.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","DataTable","Avatar","Text","meta","title","component","parameters","layout","columns","name","header","createdBy","lastModified","status","data","id","Default","args","Bordered","bordered","WithStickyHeader","stickyHeader","WithSelectableRows","render","selectedRows","setSelectedRows","createElement","Object","assign","onSelectRow","rows","WithLoading","loading","setLoading","tableData","setTableData","timer","setTimeout","clearTimeout","WithLongColumnContent","map","entry","WithCustomCellRenderer","cell","className","image","Image","src","alt","fallback","Fallback","charAt","size","as","WithCustomColumnSize","WithCustomColumnClassName","WithSorting","enableSorting","sorting","desc","argsSorting","setSorting","onSortingChange","Documentation","docs","description","story","argTypes","control","defaultValue"],"sources":["DataTable.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport type { DataTableColumns, DataTableDefaultData, DataTableSorting } from \"./DataTable.js\";\nimport { DataTable } from \"./DataTable.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof DataTable> = {\n    title: \"Components/DataTable\",\n    component: DataTable,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story<T extends Record<string, any> & DataTableDefaultData> = StoryObj<typeof DataTable<T>>;\n\n// Declare the data structure.\ninterface Entry {\n    id: string;\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\n// Define the columns structure for the table.\nconst columns: DataTableColumns<Entry> = {\n    name: {\n        header: \"Title\"\n    },\n    createdBy: {\n        header: \"Author\"\n    },\n    lastModified: {\n        header: \"Last Modified\"\n    },\n    status: {\n        header: \"Status\"\n    }\n};\n\n// Define the data to display.\nconst data = [\n    {\n        id: \"entry-1\",\n        name: \"Getting Started Guide\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 hour ago\",\n        status: \"Published\"\n    },\n    {\n        id: \"entry-2\",\n        name: \"User Documentation\",\n        createdBy: \"Jane Smith\",\n        lastModified: \"3 days ago\",\n        status: \"Draft\"\n    },\n    {\n        id: \"entry-3\",\n        name: \"API Reference\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 week ago\",\n        status: \"Published\"\n    }\n];\n\nexport const Default: Story<Entry> = {\n    args: {\n        data,\n        columns\n    }\n};\n\nexport const Bordered: Story<Entry> = {\n    args: {\n        ...Default.args,\n        bordered: true\n    }\n};\n\nexport const WithStickyHeader: Story<Entry> = {\n    args: {\n        ...Default.args,\n        stickyHeader: true\n    }\n};\n\nexport const WithSelectableRows: Story<Entry> = {\n    args: Default.args,\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n            />\n        );\n    }\n};\n\nexport const WithLoading: Story<Entry> = {\n    args: {\n        columns\n    },\n    render: ({ columns }) => {\n        const [loading, setLoading] = useState(true);\n        const [tableData, setTableData] = useState<Entry[]>([]);\n\n        useEffect(() => {\n            const timer = setTimeout(() => {\n                setTableData(data); // your predefined data\n                setLoading(false);\n            }, 5000);\n\n            return () => clearTimeout(timer);\n        }, []);\n\n        return <DataTable columns={columns} data={tableData} loading={loading} />;\n    }\n};\n\nexport const WithLongColumnContent: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                header: \"Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n            }\n        },\n        data: data.map(entry => ({\n            ...entry,\n            name: `${entry.name} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`\n        }))\n    }\n};\n\nexport const WithCustomCellRenderer: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                cell: (entry: Entry) => {\n                    return (\n                        <div className={\"flex items-center gap-sm-extra\"}>\n                            <Avatar\n                                image={\n                                    <Avatar.Image\n                                        src=\"https://github.com/webiny-bot.png\"\n                                        alt=\"@webiny\"\n                                    />\n                                }\n                                fallback={<Avatar.Fallback>{entry.name.charAt(0)}</Avatar.Fallback>}\n                                size={\"xl\"}\n                            />\n                            <div>\n                                <Text className={\"text-neutral-primary font-semibold\"} as={\"div\"}>\n                                    {entry.name}\n                                </Text>\n                                <Text\n                                    size={\"sm\"}\n                                    className={\"text-neutral-strong\"}\n                                    as={\"div\"}\n                                >{`Last updated: ${entry.lastModified}`}</Text>\n                            </div>\n                        </div>\n                    );\n                }\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnSize: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                size: 200\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnClassName: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            lastModified: {\n                ...columns.lastModified,\n                className: \"bg-primary-subtle\"\n            },\n            status: {\n                ...columns.status,\n                className: \"text-right\"\n            }\n        }\n    }\n};\n\nexport const WithSorting: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                enableSorting: true\n            },\n            lastModified: {\n                ...columns.lastModified,\n                enableSorting: true\n            }\n        },\n        sorting: [\n            {\n                id: \"lastModified\",\n                desc: true\n            }\n        ]\n    },\n    render: ({ sorting: argsSorting = [], ...args }) => {\n        const [sorting, setSorting] = useState<DataTableSorting>(argsSorting);\n        return <DataTable {...args} sorting={sorting} onSortingChange={setSorting} />;\n    }\n};\n\n// Add a Documentation story\nexport const Documentation: Story<Entry> = {\n    args: {\n        bordered: true,\n        stickyHeader: true,\n        columns: {\n            name: {\n                header: \"Title\",\n                enableSorting: true\n            },\n            createdBy: {\n                header: \"Author\"\n            },\n            lastModified: {\n                header: \"Last Modified\",\n                enableSorting: true\n            },\n            status: {\n                header: \"Status\"\n            }\n        },\n        data: [\n            {\n                id: \"entry-1\",\n                name: \"Getting Started Guide\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            },\n            {\n                id: \"entry-2\",\n                name: \"User Documentation\",\n                createdBy: \"Jane Smith\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                id: \"entry-3\",\n                name: \"API Reference\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 week ago\",\n                status: \"Published\"\n            }\n        ]\n    },\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n        const [sorting, setSorting] = useState<DataTableSorting>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n                sorting={sorting}\n                onSortingChange={setSorting}\n            />\n        );\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a DataTable with selectable rows, sorting, and a sticky header.\"\n            }\n        }\n    },\n    argTypes: {\n        bordered: {\n            description: \"Show or hide borders.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        stickyHeader: {\n            description: \"Enable sticky header.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        columns: {\n            description: \"Columns definition. Please refer to the code example for details.\",\n            control: false\n        },\n        data: {\n            description:\n                \"Data to display into DataTable body. Please refer to the code example for details.\",\n            control: false\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DataTable/DataTable.stories.js","sources":["../../src/DataTable/DataTable.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport type { DataTableColumns, DataTableDefaultData, DataTableSorting } from \"./DataTable.js\";\nimport { DataTable } from \"./DataTable.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof DataTable> = {\n    title: \"Components/DataTable\",\n    component: DataTable,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story<T extends Record<string, any> & DataTableDefaultData> = StoryObj<typeof DataTable<T>>;\n\n// Declare the data structure.\ninterface Entry {\n    id: string;\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\n// Define the columns structure for the table.\nconst columns: DataTableColumns<Entry> = {\n    name: {\n        header: \"Title\"\n    },\n    createdBy: {\n        header: \"Author\"\n    },\n    lastModified: {\n        header: \"Last Modified\"\n    },\n    status: {\n        header: \"Status\"\n    }\n};\n\n// Define the data to display.\nconst data = [\n    {\n        id: \"entry-1\",\n        name: \"Getting Started Guide\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 hour ago\",\n        status: \"Published\"\n    },\n    {\n        id: \"entry-2\",\n        name: \"User Documentation\",\n        createdBy: \"Jane Smith\",\n        lastModified: \"3 days ago\",\n        status: \"Draft\"\n    },\n    {\n        id: \"entry-3\",\n        name: \"API Reference\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 week ago\",\n        status: \"Published\"\n    }\n];\n\nexport const Default: Story<Entry> = {\n    args: {\n        data,\n        columns\n    }\n};\n\nexport const Bordered: Story<Entry> = {\n    args: {\n        ...Default.args,\n        bordered: true\n    }\n};\n\nexport const WithStickyHeader: Story<Entry> = {\n    args: {\n        ...Default.args,\n        stickyHeader: true\n    }\n};\n\nexport const WithSelectableRows: Story<Entry> = {\n    args: Default.args,\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n            />\n        );\n    }\n};\n\nexport const WithLoading: Story<Entry> = {\n    args: {\n        columns\n    },\n    render: ({ columns }) => {\n        const [loading, setLoading] = useState(true);\n        const [tableData, setTableData] = useState<Entry[]>([]);\n\n        useEffect(() => {\n            const timer = setTimeout(() => {\n                setTableData(data); // your predefined data\n                setLoading(false);\n            }, 5000);\n\n            return () => clearTimeout(timer);\n        }, []);\n\n        return <DataTable columns={columns} data={tableData} loading={loading} />;\n    }\n};\n\nexport const WithLongColumnContent: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                header: \"Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n            }\n        },\n        data: data.map(entry => ({\n            ...entry,\n            name: `${entry.name} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`\n        }))\n    }\n};\n\nexport const WithCustomCellRenderer: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                cell: (entry: Entry) => {\n                    return (\n                        <div className={\"flex items-center gap-sm-extra\"}>\n                            <Avatar\n                                image={\n                                    <Avatar.Image\n                                        src=\"https://github.com/webiny-bot.png\"\n                                        alt=\"@webiny\"\n                                    />\n                                }\n                                fallback={<Avatar.Fallback>{entry.name.charAt(0)}</Avatar.Fallback>}\n                                size={\"xl\"}\n                            />\n                            <div>\n                                <Text className={\"text-neutral-primary font-semibold\"} as={\"div\"}>\n                                    {entry.name}\n                                </Text>\n                                <Text\n                                    size={\"sm\"}\n                                    className={\"text-neutral-strong\"}\n                                    as={\"div\"}\n                                >{`Last updated: ${entry.lastModified}`}</Text>\n                            </div>\n                        </div>\n                    );\n                }\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnSize: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                size: 200\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnClassName: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            lastModified: {\n                ...columns.lastModified,\n                className: \"bg-primary-subtle\"\n            },\n            status: {\n                ...columns.status,\n                className: \"text-right\"\n            }\n        }\n    }\n};\n\nexport const WithSorting: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                enableSorting: true\n            },\n            lastModified: {\n                ...columns.lastModified,\n                enableSorting: true\n            }\n        },\n        sorting: [\n            {\n                id: \"lastModified\",\n                desc: true\n            }\n        ]\n    },\n    render: ({ sorting: argsSorting = [], ...args }) => {\n        const [sorting, setSorting] = useState<DataTableSorting>(argsSorting);\n        return <DataTable {...args} sorting={sorting} onSortingChange={setSorting} />;\n    }\n};\n\n// Add a Documentation story\nexport const Documentation: Story<Entry> = {\n    args: {\n        bordered: true,\n        stickyHeader: true,\n        columns: {\n            name: {\n                header: \"Title\",\n                enableSorting: true\n            },\n            createdBy: {\n                header: \"Author\"\n            },\n            lastModified: {\n                header: \"Last Modified\",\n                enableSorting: true\n            },\n            status: {\n                header: \"Status\"\n            }\n        },\n        data: [\n            {\n                id: \"entry-1\",\n                name: \"Getting Started Guide\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            },\n            {\n                id: \"entry-2\",\n                name: \"User Documentation\",\n                createdBy: \"Jane Smith\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                id: \"entry-3\",\n                name: \"API Reference\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 week ago\",\n                status: \"Published\"\n            }\n        ]\n    },\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n        const [sorting, setSorting] = useState<DataTableSorting>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n                sorting={sorting}\n                onSortingChange={setSorting}\n            />\n        );\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a DataTable with selectable rows, sorting, and a sticky header.\"\n            }\n        }\n    },\n    argTypes: {\n        bordered: {\n            description: \"Show or hide borders.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        stickyHeader: {\n            description: \"Enable sticky header.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        columns: {\n            description: \"Columns definition. Please refer to the code example for details.\",\n            control: false\n        },\n        data: {\n            description:\n                \"Data to display into DataTable body. Please refer to the code example for details.\",\n            control: false\n        }\n    }\n};\n"],"names":["meta","DataTable","columns","data","Default","Bordered","WithStickyHeader","WithSelectableRows","args","selectedRows","setSelectedRows","useState","rows","WithLoading","loading","setLoading","tableData","setTableData","useEffect","timer","setTimeout","clearTimeout","WithLongColumnContent","entry","WithCustomCellRenderer","Avatar","Text","WithCustomColumnSize","WithCustomColumnClassName","WithSorting","argsSorting","sorting","setSorting","Documentation"],"mappings":"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"}

package/DataTable/components/ColumnSorter.js

@@ -1,24 +1,18 @@
-import React from "react";
+import react from "react";
 import { cn, cva } from "../../utils.js";
 const columnSorterVariants = cva("flex items-center gap-xxs cursor-auto", {
-  variants: {
-    sortable: {
-      true: "cursor-pointer"
+    variants: {
+        sortable: {
+            true: "cursor-pointer"
+        }
     }
-  }
 });
-const ColumnSorter = ({
-  className,
-  children,
-  sortable,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: cn(columnSorterVariants({
-      sortable
-    }), className)
-  }), children);
-};
+const ColumnSorter = ({ className, children, sortable, ...props })=>/*#__PURE__*/ react.createElement("div", {
+        ...props,
+        className: cn(columnSorterVariants({
+            sortable
+        }), className)
+    }, children);
 export { ColumnSorter };
 
 //# sourceMappingURL=ColumnSorter.js.map