@worknice/whiteboard 0.52.0 → 0.53.0

package/dist/presentation/RichList/stories/Paperwork.js

@@ -0,0 +1,446 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_b4604910__ from "../../../utils/useNextContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__ from "../../Badge.js";
+import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__ from "../../HStack.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__ from "../../Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PersonAvatar_js_0117b3ba__ from "../../PersonAvatar.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__ from "../../PlainText.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
+import * as __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__ from "./shared.js";
+import * as __WEBPACK_EXTERNAL_MODULE__shared_bulkActionStubs_js_0d607dd0__ from "./shared/bulkActionStubs.js";
+const LEADING_CERTIFICATE = "AssignmentCertificate";
+const LEADING_DOCUMENT = "AssignmentDocument";
+const rows = [
+    {
+        id: "p1",
+        title: "First Aid Certificate",
+        leadingIcon: LEADING_CERTIFICATE,
+        statusBadge: {
+            id: "b",
+            text: "Expired",
+            color: "red"
+        },
+        statusLine: "Expired 18 days ago",
+        statusTone: "danger",
+        assigneeName: "Daisy Smith",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(2)
+    },
+    {
+        id: "p2",
+        title: "Superannuation",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Expired",
+            color: "red"
+        },
+        statusLine: "Expired 5 days ago",
+        statusTone: "danger",
+        assigneeName: "Evan Baker",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(12)
+    },
+    {
+        id: "p3",
+        title: "Police Check",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Missing",
+            color: "red"
+        },
+        statusLine: "Missing 9 days ago",
+        statusTone: "danger",
+        assigneeName: "Candice Berry",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(3)
+    },
+    {
+        id: "p4",
+        title: "Payroll Form",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Missing",
+            color: "red"
+        },
+        statusLine: "Missing 3 days ago",
+        statusTone: "danger",
+        assigneeName: "Olivia Ng",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(34)
+    },
+    {
+        id: "p5",
+        title: "Working With Children Check",
+        leadingIcon: LEADING_CERTIFICATE,
+        statusBadge: {
+            id: "b",
+            text: "Expiring soon",
+            color: "orange"
+        },
+        statusLine: "Expires in 14 days",
+        statusTone: "warning",
+        assigneeName: "Badai Khan",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(5)
+    },
+    {
+        id: "p6",
+        title: "Emergency Contact",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Expiring soon",
+            color: "orange"
+        },
+        statusLine: "Expires in 2 months",
+        statusTone: "warning",
+        assigneeName: "Henry Jones",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(8)
+    },
+    {
+        id: "p7",
+        title: "Bank Details",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Submitted",
+            color: "blue"
+        },
+        statusLine: "Submitted 2 days ago",
+        statusTone: "muted",
+        assigneeName: "Daniel Turner",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(9)
+    },
+    {
+        id: "p8",
+        title: "Tax File Number Declaration",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Assigned",
+            color: "yellow"
+        },
+        statusLine: "Due in 5 days",
+        statusTone: "warning",
+        assigneeName: "Sarah Cruden",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(35)
+    },
+    {
+        id: "p9",
+        title: "Equipment Acknowledgement",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Draft",
+            color: "grey"
+        },
+        statusLine: "Created 1 day ago",
+        statusTone: "muted",
+        assigneeName: "Andy Samson",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(4)
+    },
+    {
+        id: "p10",
+        title: "Code of Conduct",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Assigned",
+            color: "yellow"
+        },
+        statusLine: "Due in 2 days",
+        statusTone: "warning",
+        assigneeName: "Marcus Chen",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(36)
+    },
+    {
+        id: "p11",
+        title: "RSA Certificate",
+        leadingIcon: LEADING_CERTIFICATE,
+        statusBadge: {
+            id: "b",
+            text: "Submitted",
+            color: "blue"
+        },
+        statusLine: "Submitted 1 hour ago",
+        statusTone: "muted",
+        assigneeName: "Janice Martin",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(1)
+    },
+    {
+        id: "p12",
+        title: "Forklift License",
+        leadingIcon: LEADING_CERTIFICATE,
+        statusBadge: {
+            id: "b",
+            text: "Draft",
+            color: "grey"
+        },
+        statusLine: "Created 4 days ago",
+        statusTone: "muted",
+        assigneeName: "Ian MacLeod",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(11)
+    },
+    {
+        id: "p13",
+        title: "IT Policy Acknowledgement",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Missing",
+            color: "red"
+        },
+        statusLine: "Missing 1 day ago",
+        statusTone: "danger",
+        assigneeName: "Jessica Smith",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(37)
+    },
+    {
+        id: "p14",
+        title: "Uniform Request",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Submitted",
+            color: "blue"
+        },
+        statusLine: "Submitted 12 hours ago",
+        statusTone: "muted",
+        assigneeName: "David Ross",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(38)
+    },
+    {
+        id: "p15",
+        title: "Performance Review",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Expiring soon",
+            color: "orange"
+        },
+        statusLine: "Expires in 5 days",
+        statusTone: "warning",
+        assigneeName: "Daisy Smith",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(2)
+    }
+];
+const statusBadgeOptions = [
+    {
+        text: "Expired",
+        id: "st-expired"
+    },
+    {
+        text: "Missing",
+        id: "st-missing"
+    },
+    {
+        text: "Expiring soon",
+        id: "st-expiring"
+    },
+    {
+        text: "Submitted",
+        id: "st-submitted"
+    },
+    {
+        text: "Assigned",
+        id: "st-assigned"
+    },
+    {
+        text: "Draft",
+        id: "st-draft"
+    }
+];
+const uniqueAssigneeNames = [
+    ...new Set(rows.map((r)=>r.assigneeName))
+].sort((a, b)=>a.localeCompare(b));
+const assigneeLinkStyle = {
+    alignItems: "center",
+    color: "inherit",
+    display: "inline-flex",
+    gap: "var(--size-n2)",
+    minWidth: 0,
+    position: "relative",
+    textDecoration: "none",
+    zIndex: 2
+};
+function statusLineIconForRow(statusTone) {
+    return "muted" === statusTone ? "Calendar" : "Warning";
+}
+const PaperworkList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>{
+    const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_b4604910__["default"])();
+    const titleField = {
+        label: "Document",
+        value: (r)=>r.title,
+        globalFiltering: true,
+        render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                font: "regular-bold",
+                children: r.title
+            }),
+        suffixOnWide: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__["default"], {
+                id: `${r.id}-${r.statusBadge.id}`,
+                color: r.statusBadge.color,
+                children: r.statusBadge.text
+            })
+    };
+    const leadingSlot = {
+        id: "type",
+        label: "Type",
+        render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                style: {
+                    alignItems: "center",
+                    backgroundColor: "var(--color-grey-t09)",
+                    borderRadius: "var(--size-n2)",
+                    display: "flex",
+                    justifyContent: "center",
+                    padding: "var(--size-n2)"
+                },
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
+                    symbol: r.leadingIcon,
+                    size: "default"
+                })
+            }),
+        size: 32
+    };
+    const statusSlot = {
+        id: "statusLine",
+        label: "Status / timeline",
+        canToggleVisibility: true,
+        value: (r)=>r.statusLine,
+        globalFiltering: true,
+        filter: {
+            isMulti: true,
+            label: "Document status",
+            options: statusBadgeOptions.map(({ id, text })=>({
+                    id,
+                    label: text,
+                    predicate: (r)=>r.statusBadge.text === text
+                }))
+        },
+        render: (r)=>{
+            const lineIcon = statusLineIconForRow(r.statusTone);
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+                spacing: "n2",
+                align: "center",
+                tagName: "div",
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
+                        symbol: lineIcon,
+                        size: "Warning" === lineIcon ? "default" : "small",
+                        tone: r.statusTone
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                        font: "danger" === r.statusTone ? "small-bold" : "small",
+                        tone: r.statusTone,
+                        children: r.statusLine
+                    })
+                ]
+            });
+        },
+        layoutVisibility: "whenWide",
+        align: "start",
+        size: 200,
+        compactSize: 140
+    };
+    const compactStatusField = {
+        layoutVisibility: "whenCompact",
+        globalFiltering: false,
+        csvExport: false,
+        render: (r)=>{
+            const lineIcon = statusLineIconForRow(r.statusTone);
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+                spacing: "n3",
+                align: "center",
+                tagName: "span",
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
+                        symbol: lineIcon,
+                        size: "small",
+                        tone: r.statusTone
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                        font: "danger" === r.statusTone ? "small-bold" : "small",
+                        tone: r.statusTone,
+                        children: r.statusLine
+                    })
+                ]
+            });
+        }
+    };
+    const assigneeSlot = {
+        id: "assignee",
+        label: "Person",
+        value: (r)=>r.assigneeName,
+        globalFiltering: true,
+        filter: {
+            isMulti: true,
+            label: "Person",
+            options: uniqueAssigneeNames.map((name)=>({
+                    id: `person-${name}`,
+                    label: name,
+                    predicate: (r)=>r.assigneeName === name
+                }))
+        },
+        render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
+                href: `#assignee-${r.id}`,
+                onClick: (e)=>e.stopPropagation(),
+                style: assigneeLinkStyle,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+                    spacing: "n2",
+                    align: "center",
+                    tagName: "div",
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PersonAvatar_js_0117b3ba__["default"], {
+                            id: `${r.id}-ap`,
+                            name: r.assigneeName,
+                            imageUrl: r.assigneeImageUrl,
+                            size: "small",
+                            hue: "200"
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                            font: "small",
+                            children: r.assigneeName
+                        })
+                    ]
+                })
+            }),
+        layoutVisibility: "whenWide",
+        align: "start",
+        size: 180,
+        compactSize: 80
+    };
+    const compactStatusBadgeSlot = {
+        id: "compactStatusBadge",
+        layoutVisibility: "whenCompact",
+        render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__["default"], {
+                id: `${r.id}-${r.statusBadge.id}-compact`,
+                color: r.statusBadge.color,
+                children: r.statusBadge.text
+            }),
+        align: "end"
+    };
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
+        bulkActions: (0, __WEBPACK_EXTERNAL_MODULE__shared_bulkActionStubs_js_0d607dd0__.richListStoryPrimaryBulkActions)(),
+        secondaryBulkActions: (0, __WEBPACK_EXTERNAL_MODULE__shared_bulkActionStubs_js_0d607dd0__.richListStorySecondaryBulkActions)(),
+        compactBreakpoint: compactBreakpoint,
+        contentAlignment: contentAlignment,
+        contentSlots: [
+            statusSlot
+        ],
+        data: rows,
+        enableSorting: enableSorting,
+        fillContainerHeight: true,
+        getRowId: (r)=>r.id,
+        leadingSlot: leadingSlot,
+        trailingSlot: [
+            assigneeSlot,
+            compactStatusBadgeSlot
+        ],
+        rowHeight: rowHeight,
+        mainSlot: {
+            size: 360,
+            primary: titleField,
+            secondary: compactStatusField
+        }
+    });
+};
+const Paperwork_rslib_entry_ = PaperworkList;
+export { Paperwork_rslib_entry_ as default };

package/dist/presentation/RichList/stories/PaperworkApprovals.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import Badge from "../../Badge";
+import Icon from "../../Icon";
+import { type CommonProps } from "./shared";
+type NameBadgeColor = NonNullable<ComponentProps<typeof Badge>["color"]>;
+type IconSymbol = ComponentProps<typeof Icon>["symbol"];
+export type PaperworkApprovalsRow = {
+    id: string;
+    title: string;
+    leadingIcon: IconSymbol;
+    statusBadge: {
+        id: string;
+        text: string;
+        color: NameBadgeColor;
+    };
+    statusLine: string;
+    assigneeName: string;
+    assigneeImageUrl: string | null;
+    secondaryName: string;
+    secondaryImageUrl: string | null;
+};
+declare const PaperworkApprovalsList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default PaperworkApprovalsList;