linkedunion-design-kit 1.9.2 → 1.9.4

package/dist/src/components/Table/Table.stories.js

@@ -0,0 +1,408 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useMemo } from "react";
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, } from "./Table";
+import { tableSize } from ".";
+import { Checkbox } from "../Checkbox/checkbox";
+import { Badge } from "../Badge/Badge";
+import Combobox from "../Dropdown/Combobox/Combobox";
+import { IconButton } from "../Button/IconButton/IconButton";
+import { Avatar, AvatarFallback, AvatarImage } from "../Avatar/Avatar/Avatar";
+export default {
+    title: "Components/Table",
+    component: Table,
+    argTypes: {
+        size: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(tableSize),
+            description: "The size of the table. This controls the height and text size of the cells.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "sm" },
+            },
+        },
+    },
+};
+var Template = function (args) {
+    return (_jsxs(Table, __assign({}, args, { children: [_jsx(TableCaption, { children: "Example users table" }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" })] }) }), _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: "Jane Cooper" }), _jsx(TableCell, { children: "jane.cooper@example.com" }), _jsx(TableCell, { children: "Admin" })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "John Doe" }), _jsx(TableCell, { children: "john.doe@example.com" }), _jsx(TableCell, { children: "Member" })] })] })] })));
+};
+export var Default = Template.bind({});
+export var TableSizes = function () { return (_jsx("div", { className: "flex flex-col space-y-2", children: Object.keys(tableSize).map(function (size) { return (_jsxs(Table, { size: size, children: [_jsx(TableCaption, { children: "Table Size: ".concat(size) }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" })] }) }), _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: "Jane Cooper" }), _jsx(TableCell, { children: "jane.cooper@example.com" }), _jsx(TableCell, { children: "Admin" })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: "John Doe" }), _jsx(TableCell, { children: "john.doe@example.com" }), _jsx(TableCell, { children: "Member" })] })] })] }, size)); }) })); };
+export var CheckBoxInSmallTable = function () {
+    var users = [
+        {
+            id: 1,
+            name: "Jane Cooper",
+            email: "jane.cooper@example.com",
+            role: "Admin",
+        },
+        {
+            id: 2,
+            name: "John Doe",
+            email: "john.doe@example.com",
+            role: "Member",
+        },
+    ];
+    var _a = useState(new Set()), selected = _a[0], setSelected = _a[1];
+    var allChecked = selected.size === users.length && users.length > 0;
+    var toggleAll = function (checked) {
+        if (checked) {
+            setSelected(new Set(users.map(function (u) { return u.id; })));
+        }
+        else {
+            setSelected(new Set());
+        }
+    };
+    var toggleOne = function (id, checked) {
+        setSelected(function (prev) {
+            var next = new Set(prev);
+            if (checked) {
+                next.add(id);
+            }
+            else {
+                next.delete(id);
+            }
+            return next;
+        });
+    };
+    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: allChecked, onCheckedChange: toggleAll, "aria-checked": allChecked, size: "sm" }), "Name"] }) }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" })] }) }), _jsx(TableBody, { children: users.map(function (user) {
+                    var isChecked = selected.has(user.id);
+                    return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: isChecked, onCheckedChange: function (c) { return toggleOne(user.id, c); }, size: "sm" }), user.name] }) }), _jsx(TableCell, { children: user.email }), _jsx(TableCell, { children: user.role })] }, user.id));
+                }) })] }));
+};
+export var CheckBoxInMediumTable = function () {
+    var users = [
+        {
+            id: 1,
+            name: "Jane Cooper",
+            email: "jane.cooper@example.com",
+            role: "Admin",
+        },
+        {
+            id: 2,
+            name: "John Doe",
+            email: "john.doe@example.com",
+            role: "Member",
+        },
+    ];
+    var _a = useState(new Set()), selected = _a[0], setSelected = _a[1];
+    var allChecked = selected.size === users.length && users.length > 0;
+    var toggleAll = function (checked) {
+        if (checked) {
+            setSelected(new Set(users.map(function (u) { return u.id; })));
+        }
+        else {
+            setSelected(new Set());
+        }
+    };
+    var toggleOne = function (id, checked) {
+        setSelected(function (prev) {
+            var next = new Set(prev);
+            if (checked) {
+                next.add(id);
+            }
+            else {
+                next.delete(id);
+            }
+            return next;
+        });
+    };
+    return (_jsxs(Table, { size: "md", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: allChecked, onCheckedChange: toggleAll, "aria-checked": allChecked, size: "md" }), "Name"] }) }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" })] }) }), _jsx(TableBody, { children: users.map(function (user) {
+                    var isChecked = selected.has(user.id);
+                    return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: isChecked, onCheckedChange: function (c) { return toggleOne(user.id, c); }, size: "md" }), user.name] }) }), _jsx(TableCell, { children: user.email }), _jsx(TableCell, { children: user.role })] }, user.id));
+                }) })] }));
+};
+export var CheckBoxInLargeTable = function () {
+    var users = [
+        {
+            id: 1,
+            name: "Jane Cooper",
+            email: "jane.cooper@example.com",
+            role: "Admin",
+        },
+        {
+            id: 2,
+            name: "John Doe",
+            email: "john.doe@example.com",
+            role: "Member",
+        },
+    ];
+    var _a = useState(new Set()), selected = _a[0], setSelected = _a[1];
+    var allChecked = selected.size === users.length && users.length > 0;
+    var toggleAll = function (checked) {
+        if (checked) {
+            setSelected(new Set(users.map(function (u) { return u.id; })));
+        }
+        else {
+            setSelected(new Set());
+        }
+    };
+    var toggleOne = function (id, checked) {
+        setSelected(function (prev) {
+            var next = new Set(prev);
+            if (checked) {
+                next.add(id);
+            }
+            else {
+                next.delete(id);
+            }
+            return next;
+        });
+    };
+    return (_jsxs(Table, { size: "lg", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: allChecked, onCheckedChange: toggleAll, "aria-checked": allChecked, size: "lg" }), "Name"] }) }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" })] }) }), _jsx(TableBody, { children: users.map(function (user) {
+                    var isChecked = selected.has(user.id);
+                    return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: isChecked, onCheckedChange: function (c) { return toggleOne(user.id, c); }, size: "lg" }), user.name] }) }), _jsx(TableCell, { children: user.email }), _jsx(TableCell, { children: user.role })] }, user.id));
+                }) })] }));
+};
+export var SortingTable = function () {
+    var users = useMemo(function () { return [
+        {
+            id: 1,
+            name: "Jane Cooper",
+            email: "jane.cooper@example.com",
+            role: "Admin",
+            joinDate: "2023-01-15",
+        },
+        {
+            id: 2,
+            name: "John Doe",
+            email: "john.doe@example.com",
+            role: "Member",
+            joinDate: "2023-03-22",
+        },
+        {
+            id: 3,
+            name: "Alice Smith",
+            email: "alice.smith@example.com",
+            role: "Admin",
+            joinDate: "2023-02-10",
+        },
+        {
+            id: 4,
+            name: "Bob Johnson",
+            email: "bob.johnson@example.com",
+            role: "User",
+            joinDate: "2023-04-05",
+        },
+        {
+            id: 5,
+            name: "Charlie Brown",
+            email: "charlie.brown@example.com",
+            role: "Member",
+            joinDate: "2023-01-30",
+        },
+    ]; }, []);
+    var _a = React.useState(undefined), sortKey = _a[0], setSortKey = _a[1];
+    var _b = React.useState(undefined), direction = _b[0], setDirection = _b[1];
+    var handleSort = function (key) {
+        if (sortKey === key) {
+            // Toggle direction if same column is clicked again
+            setDirection(direction === "asc" ? "desc" : "asc");
+        }
+        else {
+            // Set a new column and default to ascending
+            setSortKey(key);
+            setDirection("asc");
+        }
+    };
+    var sorted = useMemo(function () {
+        if (!sortKey || !direction)
+            return users;
+        return __spreadArray([], users, true).sort(function (a, b) {
+            var aVal = a[sortKey];
+            var bVal = b[sortKey];
+            if (aVal < bVal)
+                return direction === "asc" ? -1 : 1;
+            if (aVal > bVal)
+                return direction === "asc" ? 1 : -1;
+            return 0;
+        });
+    }, [sortKey, direction, users]);
+    return (_jsxs(Table, { size: "sm", children: [_jsx(TableCaption, { children: "Sortable table - Click on Name or Role" }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsxs("div", { className: "flex items-center gap-2", children: ["Name", _jsx(IconButton, { "aria-label": "Toggle sort by Name", onClick: function () { return handleSort("name"); }, size: "sm", variant: "ghost", icon: "sort", color: "gray" })] }) }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: _jsxs("div", { className: "flex items-center gap-2", children: ["Role", _jsx(IconButton, { "aria-label": "Toggle sort by Role", onClick: function () { return handleSort("role"); }, size: "sm", variant: "ghost", icon: "sort", color: "gray" })] }) }), _jsx(TableHead, { children: "Join Date" })] }) }), _jsx(TableBody, { children: sorted.map(function (user) { return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: user.name }), _jsx(TableCell, { children: user.email }), _jsx(TableCell, { children: user.role }), _jsx(TableCell, { children: user.joinDate })] }, user.id)); }) })] }));
+};
+export var BadgesInTable = function () {
+    var users = [
+        {
+            id: 1,
+            task: "Design new homepage",
+            status: "In Progress",
+            role: "Admin",
+        },
+        {
+            id: 2,
+            task: "Implement user authentication",
+            status: "Completed",
+            role: "Member",
+        },
+    ];
+    return (_jsxs(Table, { size: "sm", children: [_jsx(TableCaption, { children: "Tasks with Status Badges" }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Task" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Role" })] }) }), _jsx(TableBody, { children: users.map(function (user) { return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: user.task }), _jsx(TableCell, { children: _jsx(Badge, { color: user.status === "Completed" ? "light-green" : "light-blue", size: "sm", endIcon: "check", children: user.status }) }), _jsx(TableCell, { children: user.role })] }, user.id)); }) })] }));
+};
+BadgesInTable.parameters = {
+    docs: {
+        description: {
+            story: "Badges in table displays a table of tasks with their current status represented by badges. The badges are color-coded to indicate the status of each task. For large table, use large badge. For medium table, use medium badge. For small table, use small badge.",
+        },
+    },
+};
+export var DropdownInTable = function () {
+    var users = [
+        {
+            id: 1,
+            name: "Jane Cooper",
+            email: "jane.cooper@example.com",
+            role: "Admin",
+            joinDate: "2023-01-15",
+        },
+        {
+            id: 2,
+            name: "John Doe",
+            email: "john.doe@example.com",
+            role: "Member",
+            joinDate: "2023-03-22",
+        },
+        {
+            id: 3,
+            name: "Alice Smith",
+            email: "alice.smith@example.com",
+            role: "Admin",
+            joinDate: "2023-02-10",
+        },
+    ];
+    return (_jsxs(Table, { size: "sm", children: [_jsx(TableCaption, { children: "Table with Dropdown Actions" }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" }), _jsx(TableHead, { children: "Actions" })] }) }), _jsx(TableBody, { children: users.map(function (user) { return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: user.name }), _jsx(TableCell, { children: user.email }), _jsx(TableCell, { children: user.role }), _jsx(TableCell, { children: _jsx("div", { className: "w-48", children: _jsx(Combobox, { size: "sm", placeholder: "Actions", options: ["Edit", "Share", "Delete"], isSearch: false, isMulti: false, onSelect: function (v) { return console.log("selected", v); } }) }) })] }, user.id)); }) })] }));
+};
+DropdownInTable.parameters = {
+    docs: {
+        description: {
+            story: "Dropdown in table displays a table of users with a dropdown menu for actions. The dropdown menu allows users to select an action to perform on each user. For large table, use large dropdown. For medium table, use medium dropdown. For small table, use small dropdown.",
+        },
+    },
+};
+export var ActionButtonInTable = function () {
+    var columnMinWidth = 150;
+    // Only include data columns in responsive calculation, NOT actions
+    var columns = [
+        { key: "name", header: "Name" },
+        { key: "email", header: "Email" },
+        { key: "role", header: "Role" },
+        { key: "joinDate", header: "Join Date" },
+    ];
+    // Create header columns that include actions for proper slicing
+    var headerColumns = __spreadArray(__spreadArray([], columns, true), [{ key: "actions", header: "Actions" }], false);
+    var users = [
+        {
+            id: 1,
+            name: "Jane Cooper",
+            email: "jane.cooper@example.com",
+            role: "Admin",
+            joinDate: "2023-01-15",
+        },
+        {
+            id: 2,
+            name: "John Doe",
+            email: "john.doe@example.com",
+            role: "Member",
+            joinDate: "2023-03-22",
+        },
+    ];
+    return (_jsx("div", { className: "w-full", children: _jsxs(Table, { className: "w-full", columnMinWidth: columnMinWidth, columns: headerColumns, hasActionColumn: true, children: [_jsx(TableCaption, { children: "Table with Action Buttons" }), _jsx(TableHeader, { children: _jsx(TableRow, { data: {}, children: headerColumns.map(function (col) { return (_jsx(TableHead, { children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: users.map(function (user) {
+                        var userWithActions = __assign(__assign({}, user), { actions: (_jsxs("div", { className: "flex space-x-2", children: [_jsx(IconButton, { onClick: function () { return alert("Editing ".concat(user.name)); }, color: "light-green", icon: "pen", size: "sm" }), _jsx(IconButton, { onClick: function () { return alert("Deleting ".concat(user.name)); }, color: "light-red", icon: "trash", size: "sm" }), _jsx(IconButton, { onClick: function () { return alert("Downloading ".concat(user.name)); }, color: "light-blue", icon: "download", size: "sm" })] })) });
+                        return (_jsx(TableRow, { data: userWithActions, children: headerColumns.map(function (col) { return (_jsx(TableCell, { children: col.key === "actions"
+                                    ? userWithActions.actions
+                                    : userWithActions[col.key] }, col.key)); }) }, user.id));
+                    }) })] }) }));
+};
+ActionButtonInTable.parameters = {
+    docs: {
+        description: {
+            story: "Action buttons in table display a table of users with action buttons for each user. The action buttons allow users to perform actions such as editing, deleting, and downloading user information. For large table, use large icon buttons. For medium table, use medium icon buttons. For small table, use small icon buttons.",
+        },
+    },
+};
+export var AvatarInTable = function () {
+    var users = [
+        {
+            id: 1,
+            name: "Jane Cooper",
+            email: "jane.cooper@example.com",
+            role: "Admin",
+            joinDate: "2023-01-15",
+            image: "/images/avatar.png",
+        },
+        {
+            id: 2,
+            name: "John Doe",
+            email: "john.doe@example.com",
+            role: "Member",
+            image: "/images/avatar.png",
+            joinDate: "2023-03-22",
+        },
+    ];
+    return (_jsxs(Table, { children: [_jsx(TableCaption, { children: "Table with Avatars" }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, {}), _jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" })] }) }), _jsx(TableBody, { children: users.map(function (user) { return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs(Avatar, { size: "sm", children: [_jsx(AvatarImage, { alt: "Avatar", src: user.image }), _jsx(AvatarFallback, { children: "AB" })] }) }), _jsx(TableCell, { children: user.name }), _jsx(TableCell, { children: user.email }), _jsx(TableCell, { children: user.role })] }, user.id)); }) })] }));
+};
+export var ResponsiveTable = function () {
+    var columnMinWidth = 120;
+    var columns = [
+        { key: "id", header: "ID" },
+        { key: "name", header: "Name" },
+        { key: "email", header: "Email" },
+        { key: "role", header: "Role" },
+        { key: "status", header: "Status" },
+        { key: "created", header: "Created At" },
+        { key: "updated", header: "Updated At" },
+        { key: "data", header: "Data" },
+    ];
+    var data = [
+        {
+            id: 1,
+            name: "Jane Cooper",
+            email: "jane.cooper@example.com",
+            role: "Admin",
+            status: "Active",
+            created: "2023-09-20",
+            updated: "2023-09-22",
+            data: "Some data",
+        },
+        {
+            id: 2,
+            name: "John Doe",
+            email: "john.doe@example.com",
+            role: "User",
+            status: "Pending",
+            created: "2023-08-15",
+            updated: "2023-08-20",
+            data: "Some data",
+        },
+        {
+            id: 3,
+            name: "Alice Smith",
+            email: "alice.smith@example.com",
+            role: "Manager",
+            status: "Inactive",
+            created: "2023-07-10",
+            updated: "2023-07-18",
+            data: "Some data",
+        },
+    ];
+    return (_jsxs(Table, { className: "w-full", columnMinWidth: columnMinWidth, columns: columns, children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map(function (col) { return (_jsx(TableHead, { children: col.header }, col.key)); }) }) }), _jsx(TableBody, { children: data.map(function (row, rowIndex) { return (_jsx(TableRow, { data: row, children: columns.map(function (col) { return (_jsx(TableCell, { children: row[col.key] }, col.key)); }) }, rowIndex)); }) })] }));
+};