linkedunion-design-kit 1.9.2 → 1.9.4

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

@@ -0,0 +1,652 @@
+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 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 (<Table {...args}>
+      <TableCaption>Example users table</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>Jane Cooper</TableCell>
+          <TableCell>jane.cooper@example.com</TableCell>
+          <TableCell>Admin</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>John Doe</TableCell>
+          <TableCell>john.doe@example.com</TableCell>
+          <TableCell>Member</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>);
+};
+export var Default = Template.bind({});
+export var TableSizes = function () { return (<div className="flex flex-col space-y-2">
+    {Object.keys(tableSize).map(function (size) { return (<Table key={size} size={size}>
+        <TableCaption>{"Table Size: ".concat(size)}</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Role</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Jane Cooper</TableCell>
+            <TableCell>jane.cooper@example.com</TableCell>
+            <TableCell>Admin</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>John Doe</TableCell>
+            <TableCell>john.doe@example.com</TableCell>
+            <TableCell>Member</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>); })}
+  </div>); };
+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 (<Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>
+            <div className="flex items-center gap-2">
+              <Checkbox checked={allChecked} onCheckedChange={toggleAll} aria-checked={allChecked} size="sm"/>
+              Name
+            </div>
+          </TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(function (user) {
+            var isChecked = selected.has(user.id);
+            return (<TableRow key={user.id}>
+              <TableCell>
+                <div className="flex items-center gap-2">
+                  <Checkbox checked={isChecked} onCheckedChange={function (c) { return toggleOne(user.id, c); }} size="sm"/>
+                  {user.name}
+                </div>
+              </TableCell>
+              <TableCell>{user.email}</TableCell>
+              <TableCell>{user.role}</TableCell>
+            </TableRow>);
+        })}
+      </TableBody>
+    </Table>);
+};
+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 (<Table size="md">
+      <TableHeader>
+        <TableRow>
+          <TableHead>
+            <div className="flex items-center gap-2">
+              <Checkbox checked={allChecked} onCheckedChange={toggleAll} aria-checked={allChecked} size="md"/>
+              Name
+            </div>
+          </TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(function (user) {
+            var isChecked = selected.has(user.id);
+            return (<TableRow key={user.id}>
+              <TableCell>
+                <div className="flex items-center gap-2">
+                  <Checkbox checked={isChecked} onCheckedChange={function (c) { return toggleOne(user.id, c); }} size="md"/>
+                  {user.name}
+                </div>
+              </TableCell>
+              <TableCell>{user.email}</TableCell>
+              <TableCell>{user.role}</TableCell>
+            </TableRow>);
+        })}
+      </TableBody>
+    </Table>);
+};
+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 (<Table size="lg">
+      <TableHeader>
+        <TableRow>
+          <TableHead>
+            <div className="flex items-center gap-2">
+              <Checkbox checked={allChecked} onCheckedChange={toggleAll} aria-checked={allChecked} size="lg"/>
+              Name
+            </div>
+          </TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(function (user) {
+            var isChecked = selected.has(user.id);
+            return (<TableRow key={user.id}>
+              <TableCell>
+                <div className="flex items-center gap-2">
+                  <Checkbox checked={isChecked} onCheckedChange={function (c) { return toggleOne(user.id, c); }} size="lg"/>
+                  {user.name}
+                </div>
+              </TableCell>
+              <TableCell>{user.email}</TableCell>
+              <TableCell>{user.role}</TableCell>
+            </TableRow>);
+        })}
+      </TableBody>
+    </Table>);
+};
+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 (<Table size="sm">
+      <TableCaption>Sortable table - Click on Name or Role</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>
+            <div className="flex items-center gap-2">
+              Name
+              <IconButton aria-label="Toggle sort by Name" onClick={function () { return handleSort("name"); }} size="sm" variant="ghost" icon="sort" color="gray"/>
+            </div>
+          </TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>
+            <div className="flex items-center gap-2">
+              Role
+              <IconButton aria-label="Toggle sort by Role" onClick={function () { return handleSort("role"); }} size="sm" variant="ghost" icon="sort" color="gray"/>
+            </div>
+          </TableHead>
+          <TableHead>Join Date</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {sorted.map(function (user) { return (<TableRow key={user.id}>
+            <TableCell>{user.name}</TableCell>
+            <TableCell>{user.email}</TableCell>
+            <TableCell>{user.role}</TableCell>
+            <TableCell>{user.joinDate}</TableCell>
+          </TableRow>); })}
+      </TableBody>
+    </Table>);
+};
+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 (<Table size="sm">
+      <TableCaption>Tasks with Status Badges</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Task</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(function (user) { return (<TableRow key={user.id}>
+            <TableCell>{user.task}</TableCell>
+            <TableCell>
+              <Badge color={user.status === "Completed" ? "light-green" : "light-blue"} size="sm" endIcon="check">
+                {user.status}
+              </Badge>
+            </TableCell>
+            <TableCell>{user.role}</TableCell>
+          </TableRow>); })}
+      </TableBody>
+    </Table>);
+};
+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 (<Table size="sm">
+      <TableCaption>Table with Dropdown Actions</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+          <TableHead>Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(function (user) { return (<TableRow key={user.id}>
+            <TableCell>{user.name}</TableCell>
+            <TableCell>{user.email}</TableCell>
+            <TableCell>{user.role}</TableCell>
+            <TableCell>
+              <div className="w-48">
+                <Combobox size="sm" placeholder="Actions" options={["Edit", "Share", "Delete"]} isSearch={false} isMulti={false} onSelect={function (v) { return console.log("selected", v); }}/>
+              </div>
+            </TableCell>
+          </TableRow>); })}
+      </TableBody>
+    </Table>);
+};
+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 (<div className="w-full">
+      <Table className="w-full" columnMinWidth={columnMinWidth} columns={headerColumns} hasActionColumn={true}>
+        <TableCaption>Table with Action Buttons</TableCaption>
+        <TableHeader>
+          <TableRow data={{}}>
+            {headerColumns.map(function (col) { return (<TableHead key={col.key}>{col.header}</TableHead>); })}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {users.map(function (user) {
+            var userWithActions = __assign(__assign({}, user), { actions: (<div className="flex space-x-2">
+                  <IconButton onClick={function () { return alert("Editing ".concat(user.name)); }} color="light-green" icon="pen" size="sm"/>
+                  <IconButton onClick={function () { return alert("Deleting ".concat(user.name)); }} color="light-red" icon="trash" size="sm"/>
+                  <IconButton onClick={function () { return alert("Downloading ".concat(user.name)); }} color="light-blue" icon="download" size="sm"/>
+                </div>) });
+            return (<TableRow key={user.id} data={userWithActions}>
+                {headerColumns.map(function (col) { return (<TableCell key={col.key}>
+                    {col.key === "actions"
+                        ? userWithActions.actions
+                        : userWithActions[col.key]}
+                  </TableCell>); })}
+              </TableRow>);
+        })}
+        </TableBody>
+      </Table>
+    </div>);
+};
+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 (<Table>
+      <TableCaption>Table with Avatars</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead></TableHead>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(function (user) { return (<TableRow key={user.id}>
+            <TableCell>
+              <Avatar size="sm">
+                <AvatarImage alt="Avatar" src={user.image}/>
+                <AvatarFallback>AB</AvatarFallback>
+              </Avatar>
+            </TableCell>
+            <TableCell>{user.name}</TableCell>
+            <TableCell>{user.email}</TableCell>
+            <TableCell>{user.role}</TableCell>
+          </TableRow>); })}
+      </TableBody>
+    </Table>);
+};
+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 (<Table className="w-full" columnMinWidth={columnMinWidth} columns={columns}>
+      <TableHeader>
+        <TableRow>
+          {columns.map(function (col) { return (<TableHead key={col.key}>{col.header}</TableHead>); })}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map(function (row, rowIndex) { return (<TableRow key={rowIndex} data={row}>
+            {columns.map(function (col) { return (<TableCell key={col.key}>
+                {row[col.key]}
+              </TableCell>); })}
+          </TableRow>); })}
+      </TableBody>
+    </Table>);
+};

package/dist/src/components/Table/index.d.ts

@@ -0,0 +1,20 @@
+export declare const tableSize: {
+    readonly lg: "h-20 text-lg";
+    readonly md: "h-16 text-base";
+    readonly sm: "h-14 text-sm";
+};
+export declare const tableBodySize: {
+    readonly lg: "h-20 text-lg font-normal px-4 py-3";
+    readonly md: "h-16 text-base font-normal px-4 py-3";
+    readonly sm: "h-14 py-2 px-3 text-sm font-normal";
+};
+export declare const tableFooterSize: {
+    readonly lg: "h-20 text-lg font-semibold px-4 py-0";
+    readonly md: "h-16 text-base font-normal px-4 py-0";
+    readonly sm: "h-14 py-2 px-3 text-sm font-normal px-3 py-0";
+};
+export declare const collapsibleIconSize: {
+    readonly lg: "lg";
+    readonly md: "md";
+    readonly sm: "sm";
+};

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

@@ -0,0 +1,20 @@
+export var tableSize = {
+    lg: "h-20 text-lg",
+    md: "h-16 text-base",
+    sm: "h-14 text-sm",
+};
+export var tableBodySize = {
+    lg: "h-20 text-lg font-normal px-4 py-3",
+    md: "h-16 text-base font-normal px-4 py-3",
+    sm: "h-14 py-2 px-3 text-sm font-normal",
+};
+export var tableFooterSize = {
+    lg: "h-20 text-lg font-semibold px-4 py-0",
+    md: "h-16 text-base font-normal px-4 py-0",
+    sm: "h-14 py-2 px-3 text-sm font-normal px-3 py-0",
+};
+export var collapsibleIconSize = {
+    lg: "lg",
+    md: "md",
+    sm: "sm",
+};