@worknice/whiteboard 0.52.1 → 0.54.0

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

@@ -0,0 +1,519 @@
+"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__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";
+const MissingAvatar = ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        style: {
+            background: "var(--color-grey-t10)",
+            border: "1px solid var(--color-grey-t08)",
+            borderRadius: "50%",
+            height: 48,
+            padding: "10px 15px",
+            marginRight: "var(--size-n4)",
+            width: 48
+        },
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
+            symbol: "Profile",
+            size: "large",
+            tone: "muted"
+        })
+    });
+const positions = [
+    {
+        id: "pos-1",
+        title: "CEO",
+        positionCode: "P00001",
+        directReports: 4,
+        department: "Executive",
+        assignee: {
+            name: "Janice Martin",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(1)
+        },
+        manager: null
+    },
+    {
+        id: "pos-2",
+        title: "CFO",
+        positionCode: "P00002",
+        directReports: 2,
+        department: "Finance",
+        assignee: {
+            name: "Daisy Smith",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(2)
+        },
+        manager: {
+            name: "Janice Martin",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(1)
+        }
+    },
+    {
+        id: "pos-3",
+        title: "CMO",
+        positionCode: "P00003",
+        directReports: 3,
+        department: "Marketing",
+        assignee: {
+            name: "Candice Berry",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(3)
+        },
+        manager: {
+            name: "Janice Martin",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(1)
+        }
+    },
+    {
+        id: "pos-4",
+        title: "COO",
+        positionCode: "P00004",
+        directReports: 5,
+        department: "Operations",
+        assignee: {
+            name: "Andy Samson",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(4)
+        },
+        manager: {
+            name: "Janice Martin",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(1)
+        }
+    },
+    {
+        id: "pos-5",
+        title: "VP of Engineering",
+        positionCode: "P00005",
+        directReports: 6,
+        department: "Engineering",
+        assignee: "vacant",
+        manager: {
+            name: "Janice Martin",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(1)
+        }
+    },
+    {
+        id: "pos-6",
+        title: "Head of Product",
+        positionCode: "P00012",
+        directReports: 4,
+        department: "Product",
+        assignee: {
+            name: "Fiona Gallagher",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(5)
+        },
+        manager: {
+            name: "Janice Martin",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(1)
+        }
+    },
+    {
+        id: "pos-7",
+        title: "Head of Design",
+        positionCode: "P00020",
+        directReports: 2,
+        department: "Design",
+        assignee: {
+            name: "Jasmine Kaur",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(6)
+        },
+        manager: {
+            name: "Janice Martin",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(1)
+        }
+    },
+    {
+        id: "pos-8",
+        title: "HR Business Partner",
+        positionCode: "P00045",
+        directReports: 1,
+        department: "People & Culture",
+        assignee: {
+            name: "Hannah Abbott",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(7)
+        },
+        manager: {
+            name: "Daisy Smith",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(2)
+        }
+    },
+    {
+        id: "pos-9",
+        title: "Group Financial Controller",
+        positionCode: "P00070",
+        directReports: 3,
+        department: "Finance",
+        assignee: {
+            name: "Badai Khan",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(9)
+        },
+        manager: {
+            name: "Daisy Smith",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(2)
+        }
+    },
+    {
+        id: "pos-10",
+        title: "Accounts Assistant",
+        positionCode: "P00088",
+        directReports: 0,
+        department: "Finance",
+        assignee: {
+            name: "Henry Jones",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(8)
+        },
+        manager: {
+            name: "Badai Khan",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(9)
+        }
+    },
+    {
+        id: "pos-11",
+        title: "Payroll Lead",
+        positionCode: "P00079",
+        directReports: 2,
+        department: "Finance",
+        assignee: {
+            name: "Priya Nair",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(10)
+        },
+        manager: {
+            name: "Daisy Smith",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(2)
+        }
+    },
+    {
+        id: "pos-12",
+        title: "Site Operations Lead",
+        positionCode: "P00102",
+        directReports: 8,
+        department: "Operations",
+        assignee: {
+            name: "Ian MacLeod",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(11)
+        },
+        manager: {
+            name: "Andy Samson",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(4)
+        }
+    },
+    {
+        id: "pos-13",
+        title: "Regional Sales Director",
+        positionCode: "P00120",
+        directReports: 0,
+        department: "Sales",
+        assignee: "vacant",
+        manager: {
+            name: "Candice Berry",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(3)
+        }
+    },
+    {
+        id: "pos-14",
+        title: "IT Service Manager",
+        positionCode: "P00056",
+        directReports: 4,
+        department: "Technology",
+        assignee: {
+            name: "Evan Baker",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(12)
+        },
+        manager: "vacant"
+    },
+    {
+        id: "pos-15",
+        title: "Cracker Baker",
+        positionCode: "P00201",
+        directReports: 0,
+        department: "Production",
+        assignee: "vacant",
+        manager: "vacant"
+    },
+    {
+        id: "pos-16",
+        title: "Cracker Crafter",
+        positionCode: "P00202",
+        directReports: 0,
+        department: "Production",
+        assignee: {
+            name: "Janet Siddens",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(13)
+        },
+        manager: "vacant"
+    },
+    {
+        id: "pos-17",
+        title: "Cracker Macker",
+        positionCode: "P00203",
+        directReports: 0,
+        department: "Production",
+        assignee: {
+            name: "Rowe Innes",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(14)
+        },
+        manager: {
+            name: "Lena Voss",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(15)
+        }
+    },
+    {
+        id: "pos-18",
+        title: "Cracker Maker",
+        positionCode: "P00204",
+        directReports: 1,
+        department: "Production",
+        assignee: {
+            name: "Greg Evans",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(16)
+        },
+        manager: {
+            name: "Marcus Dale",
+            imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(17)
+        }
+    }
+];
+const uniqueDepartments = positions.map((r)=>r.department).filter((d, i, arr)=>arr.indexOf(d) === i).sort((a, b)=>a.localeCompare(b));
+const uniqueManagerFilterNames = (()=>{
+    const seen = new Set();
+    for (const r of positions)if (r.manager && "vacant" !== r.manager) seen.add(r.manager.name);
+    return [
+        ...seen
+    ].sort((a, b)=>a.localeCompare(b));
+})();
+const slotLinkStyle = {
+    alignItems: "center",
+    color: "inherit",
+    display: "inline-flex",
+    gap: "var(--size-n2)",
+    minWidth: 0,
+    position: "relative",
+    textDecoration: "none",
+    zIndex: 2
+};
+const PositionsList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>{
+    const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_b4604910__["default"])();
+    const renderAssignee = (r)=>{
+        if ("vacant" === r.assignee) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
+            href: `#assignee-${r.id}`,
+            onClick: (e)=>e.stopPropagation(),
+            style: slotLinkStyle,
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+                align: "center",
+                spacing: "n2",
+                tagName: "div",
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(MissingAvatar, {}),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                        font: "small",
+                        tone: "muted",
+                        children: "Vacant"
+                    })
+                ]
+            })
+        });
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
+            href: `#assignee-${r.id}`,
+            onClick: (e)=>e.stopPropagation(),
+            style: slotLinkStyle,
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+                align: "center",
+                spacing: "n2",
+                tagName: "div",
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PersonAvatar_js_0117b3ba__["default"], {
+                        id: `${r.id}-assign`,
+                        name: r.assignee.name,
+                        imageUrl: r.assignee.imageUrl,
+                        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.assignee.name
+                    })
+                ]
+            })
+        });
+    };
+    const renderManager = (r)=>{
+        if (null === r.manager) return "—";
+        if ("vacant" === r.manager) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
+            href: `#manager-${r.id}`,
+            onClick: (e)=>e.stopPropagation(),
+            style: slotLinkStyle,
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(MissingAvatar, {})
+        });
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
+            href: `#manager-${r.id}`,
+            onClick: (e)=>e.stopPropagation(),
+            style: {
+                ...slotLinkStyle,
+                zIndex: 2
+            },
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PersonAvatar_js_0117b3ba__["default"], {
+                id: `${r.id}-mgr`,
+                name: r.manager.name,
+                imageUrl: r.manager.imageUrl,
+                size: "small",
+                hue: "200"
+            })
+        });
+    };
+    const titleField = {
+        label: "Position",
+        value: (r)=>`${r.title} ${r.department}`,
+        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
+            })
+    };
+    const subtitleField = {
+        label: "Code / function / reports",
+        value: (r)=>`${r.positionCode} ${r.department} ${r.directReports} direct reports`,
+        globalFiltering: true,
+        filter: {
+            isMulti: true,
+            label: "Department / function",
+            options: uniqueDepartments.map((d)=>({
+                    id: d,
+                    label: d,
+                    predicate: (r)=>r.department === d
+                }))
+        },
+        render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+                align: "center",
+                spacing: "n2",
+                tagName: "div",
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                        font: "small",
+                        tone: "muted",
+                        children: [
+                            "# ",
+                            r.positionCode
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                        font: "small",
+                        tone: "muted",
+                        children: "|"
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                        font: "small",
+                        tone: "muted",
+                        children: r.department
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                        font: "small",
+                        tone: "muted",
+                        children: "|"
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+                        align: "center",
+                        spacing: "n1",
+                        tagName: "div",
+                        children: [
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
+                                symbol: "People",
+                                size: "small",
+                                tone: "muted"
+                            }),
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                                font: "small",
+                                tone: "muted",
+                                children: [
+                                    r.directReports,
+                                    " ",
+                                    1 === r.directReports ? "direct report" : "direct reports"
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+    };
+    const assignedSlot = {
+        id: "assigned",
+        label: "Assigned",
+        value: (r)=>"vacant" === r.assignee ? "Vacant" : r.assignee.name,
+        render: (r)=>renderAssignee(r),
+        align: "start",
+        size: 200,
+        columnWidthMode: "fixed",
+        compactSize: 160,
+        globalFiltering: true,
+        filter: {
+            isMulti: true,
+            label: "Position filled",
+            options: [
+                {
+                    id: "assign-filled",
+                    label: "Filled",
+                    predicate: (r)=>"vacant" !== r.assignee
+                },
+                {
+                    id: "assign-vacant",
+                    label: "Vacant",
+                    predicate: (r)=>"vacant" === r.assignee
+                }
+            ]
+        }
+    };
+    const managerSlot = {
+        id: "reportsTo",
+        label: "Reports to",
+        value: (r)=>{
+            if (null === r.manager) return "";
+            if ("vacant" === r.manager) return "Vacant";
+            return r.manager.name;
+        },
+        globalFiltering: true,
+        render: (r)=>renderManager(r),
+        align: "center",
+        size: 60,
+        filter: {
+            isMulti: true,
+            label: "Reports to",
+            options: [
+                {
+                    id: "manager-top",
+                    label: "Top of org (no manager)",
+                    predicate: (r)=>null === r.manager
+                },
+                {
+                    id: "manager-vacant",
+                    label: "Vacant manager role",
+                    predicate: (r)=>"vacant" === r.manager
+                },
+                ...uniqueManagerFilterNames.map((name)=>({
+                        id: `manager-${name}`,
+                        label: name,
+                        predicate: (r)=>null !== r.manager && "vacant" !== r.manager && r.manager.name === name
+                    }))
+            ]
+        }
+    };
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
+        data: positions,
+        compactBreakpoint: compactBreakpoint,
+        contentAlignment: contentAlignment,
+        enableSorting: enableSorting,
+        fillContainerHeight: true,
+        getRowId: (r)=>r.id,
+        rowHeight: rowHeight,
+        mainSlot: {
+            size: 330,
+            primary: titleField,
+            secondary: subtitleField
+        },
+        contentSlots: [
+            assignedSlot
+        ],
+        trailingSlot: managerSlot
+    });
+};
+const Positions_rslib_entry_ = PositionsList;
+export { Positions_rslib_entry_ as default };

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

@@ -0,0 +1,19 @@
+import { type CommonProps } from "./shared";
+export type ReviewsRow = {
+    id: string;
+    cycleName: string;
+    reviewBadging: "self" | "peer";
+    reviewStatus: "assigned" | "submitted" | "incomplete";
+    dueDate: string;
+    submittedAt: string | null;
+    personName: string;
+    personHue: string;
+    personImageUrl: string;
+};
+/**
+ * Demonstrates toolbar search plus a single single-select filter as an inline menu
+ * (see `RichList` / `MenuButton`), with performance-style rows: avatar, cycle title, type badge,
+ * due / submitted copy on the trailing edge.
+ */
+declare const ReviewsList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default ReviewsList;