@worknice/whiteboard 0.52.0 → 0.53.0

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

@@ -0,0 +1,342 @@
+"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_DOCUMENT = "AssignmentDocument";
+const LEADING_FORM = "AssignmentQuestionnaire";
+const LEADING_ID_STYLE = "Profile";
+const rows = [
+    {
+        id: "pa1",
+        title: "Employment Contract – Salary",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Requested",
+            color: "blue"
+        },
+        statusLine: "Requested 13 Nov, 2025",
+        assigneeName: "Daniel Turner",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(9),
+        secondaryName: "Evan Baker",
+        secondaryImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(12)
+    },
+    {
+        id: "pa2",
+        title: "Homepage Creative",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Requested",
+            color: "blue"
+        },
+        statusLine: "Requested 10 Jan, 2026",
+        assigneeName: "Janice Martin",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(1),
+        secondaryName: "Candice Berry",
+        secondaryImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(3)
+    },
+    {
+        id: "pa3",
+        title: "Employment Contract",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Draft",
+            color: "grey"
+        },
+        statusLine: "Last edited 2 days ago",
+        assigneeName: "Evan Baker",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(12),
+        secondaryName: "Daisy Smith",
+        secondaryImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(2)
+    },
+    {
+        id: "pa4",
+        title: "Employment Contract",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Approved",
+            color: "green"
+        },
+        statusLine: "Approved 30 Jan, 2023",
+        assigneeName: "Badai Khan",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(5),
+        secondaryName: "Andy Samson",
+        secondaryImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(4)
+    },
+    {
+        id: "pa5",
+        title: "Bank Account Change",
+        leadingIcon: LEADING_FORM,
+        statusBadge: {
+            id: "b",
+            text: "Requested",
+            color: "blue"
+        },
+        statusLine: "Requested 1 Feb, 2026",
+        assigneeName: "Olivia Ng",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(34),
+        secondaryName: "Sarah Cruden",
+        secondaryImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(35)
+    },
+    {
+        id: "pa6",
+        title: "Code of Conduct",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Requested",
+            color: "blue"
+        },
+        statusLine: "Requested 3 Feb, 2026",
+        assigneeName: "James Washington",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(22),
+        secondaryName: "Hannah Abbott",
+        secondaryImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(7)
+    },
+    {
+        id: "pa7",
+        title: "Code of Conduct",
+        leadingIcon: LEADING_DOCUMENT,
+        statusBadge: {
+            id: "b",
+            text: "Draft",
+            color: "grey"
+        },
+        statusLine: "Draft · saved today",
+        assigneeName: "Marcus Chen",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(36),
+        secondaryName: "Janice Martin",
+        secondaryImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(1)
+    },
+    {
+        id: "pa8",
+        title: "Construction White/Blue Card",
+        leadingIcon: LEADING_ID_STYLE,
+        statusBadge: {
+            id: "b",
+            text: "Approved",
+            color: "green"
+        },
+        statusLine: "Approved 28 Mar, 2024",
+        assigneeName: "Ian MacLeod",
+        assigneeImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(11),
+        secondaryName: "Fiona Gallagher",
+        secondaryImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(13)
+    }
+];
+const statusBadgeOptions = [
+    {
+        text: "Requested",
+        id: "st-requested"
+    },
+    {
+        text: "Draft",
+        id: "st-draft"
+    },
+    {
+        text: "Approved",
+        id: "st-approved"
+    }
+];
+const uniqueAssigneeNames = [
+    ...new Set(rows.map((r)=>r.assigneeName))
+].sort((a, b)=>a.localeCompare(b));
+const uniqueSecondaryNames = [
+    ...new Set(rows.map((r)=>r.secondaryName))
+].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
+};
+const PaperworkApprovalsList = ({ 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)=>/*#__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: "Leave",
+                        size: "small",
+                        tone: "muted"
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                        font: "small",
+                        tone: "muted",
+                        children: r.statusLine
+                    })
+                ]
+            }),
+        align: "start",
+        size: 200,
+        compactSize: 130
+    };
+    const assigneeSlot = {
+        id: "assignee",
+        label: "Person",
+        canToggleVisibility: true,
+        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
+                        })
+                    ]
+                })
+            }),
+        align: "start",
+        size: 180,
+        compactSize: 80
+    };
+    const secondarySlot = {
+        id: "secondary",
+        label: "Approver",
+        value: (r)=>r.secondaryName,
+        globalFiltering: true,
+        filter: {
+            isMulti: true,
+            label: "Approver",
+            options: uniqueSecondaryNames.map((name)=>({
+                    id: `appr-${name}`,
+                    label: name,
+                    predicate: (r)=>r.secondaryName === name
+                }))
+        },
+        render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                style: {
+                    display: "flex",
+                    justifyContent: "flex-end"
+                },
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
+                    href: `#approver-${r.id}`,
+                    onClick: (e)=>e.stopPropagation(),
+                    style: {
+                        ...assigneeLinkStyle,
+                        justifyContent: "flex-end"
+                    },
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PersonAvatar_js_0117b3ba__["default"], {
+                        id: `${r.id}-secondary`,
+                        name: r.secondaryName,
+                        imageUrl: r.secondaryImageUrl,
+                        size: "small",
+                        hue: "200"
+                    })
+                })
+            }),
+        align: "end",
+        size: 48,
+        compactSize: 48
+    };
+    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,
+            assigneeSlot
+        ],
+        data: rows,
+        enableSorting: enableSorting,
+        fillContainerHeight: true,
+        getRowId: (r)=>r.id,
+        leadingSlot: leadingSlot,
+        rowHeight: rowHeight,
+        mainSlot: {
+            size: 300,
+            primary: titleField
+        },
+        trailingSlot: secondarySlot
+    });
+};
+const PaperworkApprovals_rslib_entry_ = PaperworkApprovalsList;
+export { PaperworkApprovals_rslib_entry_ as default };

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import Badge from "../../Badge";
+import { type CommonProps } from "./shared";
+type BadgeNameColor = NonNullable<ComponentProps<typeof Badge>["color"]>;
+export type PeopleListRow = {
+    id: string;
+    name: string;
+    imageUrl: string | null;
+    position: string;
+    department: string;
+    badgeNames: Array<{
+        id: string;
+        text: string;
+        color: BadgeNameColor;
+    }>;
+    tags: string[];
+};
+declare const PeopleList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default PeopleList;