@worknice/whiteboard 0.52.1 → 0.53.0

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

@@ -0,0 +1,391 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+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__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 people = [
+    {
+        id: "p1",
+        name: "Andy Samson",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(12),
+        position: "COO",
+        department: "Head Office",
+        badgeNames: [
+            {
+                id: "b1",
+                text: "Birthday in 4 days 🎂",
+                color: "blue"
+            }
+        ],
+        tags: [
+            "Fire warden",
+            "Project sushi"
+        ]
+    },
+    {
+        id: "p2",
+        name: "Badai Khan",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(5),
+        position: "Accounts Payable",
+        department: "Remote",
+        badgeNames: [
+            {
+                id: "b1",
+                text: "Onboarding🧑‍💻",
+                color: "orange"
+            }
+        ],
+        tags: [
+            "Probation"
+        ]
+    },
+    {
+        id: "p3",
+        name: "Caity Dewer",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(7),
+        position: "Located",
+        department: "Factory",
+        badgeNames: [
+            {
+                id: "b1",
+                text: "Starts in 4 days 🎒",
+                color: "orange"
+            }
+        ],
+        tags: [
+            "Intern"
+        ]
+    },
+    {
+        id: "p4",
+        name: "Candice Berry",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(3),
+        position: "CMO",
+        department: "Head Office",
+        badgeNames: [
+            {
+                id: "b1",
+                text: "Non compliant❗️",
+                color: "red"
+            }
+        ],
+        tags: [
+            "Probation",
+            "Project sushi"
+        ]
+    },
+    {
+        id: "p5",
+        name: "Daisy Smith",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(1),
+        position: "CFO",
+        department: "Head Office",
+        badgeNames: [],
+        tags: [
+            "Probation"
+        ]
+    },
+    {
+        id: "p6",
+        name: "Daniel Turner",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(9),
+        position: "Accounts Receivable",
+        department: "Head Office",
+        badgeNames: [
+            {
+                id: "b1",
+                text: "3rd anniversary in 3 days 🎉",
+                color: "yellow"
+            }
+        ],
+        tags: [
+            "Fire warden"
+        ]
+    },
+    {
+        id: "p7",
+        name: "Ernie White",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(22),
+        position: "Truck Driver",
+        department: "Head Office",
+        badgeNames: [
+            {
+                id: "b1",
+                text: "New hire 👋",
+                color: "orange"
+            },
+            {
+                id: "b2",
+                text: "At Risk⚠️",
+                color: "yellow"
+            }
+        ],
+        tags: [
+            "Probation"
+        ]
+    },
+    {
+        id: "p8",
+        name: "Evan Baker",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(2),
+        position: "Digital Brand Marketer",
+        department: "Head Office",
+        badgeNames: [],
+        tags: [
+            "Probation",
+            "Project sushi"
+        ]
+    },
+    {
+        id: "p9",
+        name: "Fiona Gallagher",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(23),
+        position: "Product Manager",
+        department: "Remote",
+        badgeNames: [],
+        tags: [
+            "First aid"
+        ]
+    },
+    {
+        id: "p10",
+        name: "George Lin",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(24),
+        position: "Software Engineer",
+        department: "Head Office",
+        badgeNames: [
+            {
+                id: "b1",
+                text: "Onboarding🧑‍💻",
+                color: "orange"
+            }
+        ],
+        tags: [
+            "Probation"
+        ]
+    },
+    {
+        id: "p11",
+        name: "Hannah Abbott",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(8),
+        position: "HR Specialist",
+        department: "Head Office",
+        badgeNames: [
+            {
+                id: "b1",
+                text: "At Risk⚠️",
+                color: "yellow"
+            }
+        ],
+        tags: [
+            "Fire warden",
+            "First aid"
+        ]
+    },
+    {
+        id: "p12",
+        name: "Ian MacLeod",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(11),
+        position: "Operations Manager",
+        department: "Factory",
+        badgeNames: [
+            {
+                id: "b1",
+                text: "10th anniversary today 🎉",
+                color: "yellow"
+            }
+        ],
+        tags: []
+    },
+    {
+        id: "p13",
+        name: "Jasmine Kaur",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(25),
+        position: "UX Designer",
+        department: "Remote",
+        badgeNames: [],
+        tags: [
+            "Project sushi"
+        ]
+    },
+    {
+        id: "p14",
+        name: "Kevin O'Connor",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(15),
+        position: "Sales Representative",
+        department: "Remote",
+        badgeNames: [
+            {
+                id: "b1",
+                text: "Onboarding🧑‍💻",
+                color: "orange"
+            },
+            {
+                id: "b2",
+                text: "Non compliant❗️",
+                color: "red"
+            }
+        ],
+        tags: [
+            "Probation"
+        ]
+    },
+    {
+        id: "p15",
+        name: "Liam Neeson",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(26),
+        position: "Customer Support",
+        department: "Head Office",
+        badgeNames: [
+            {
+                id: "b1",
+                text: "New hire 👋",
+                color: "orange"
+            }
+        ],
+        tags: [
+            "Intern"
+        ]
+    },
+    {
+        id: "p16",
+        name: "Mia Wong",
+        imageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(27),
+        position: "Marketing Associate",
+        department: "Head Office",
+        badgeNames: [],
+        tags: [
+            "Probation"
+        ]
+    }
+];
+const PeopleList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>{
+    const titleField = {
+        label: "Name",
+        value: (r)=>r.name,
+        globalFiltering: true,
+        csvExport: true,
+        render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                font: "h6",
+                children: r.name
+            }),
+        suffixOnWide: (r)=>r.badgeNames.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+                spacing: "n2",
+                align: "center",
+                children: r.badgeNames.map((b)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__["default"], {
+                        id: `${r.id}-${b.id}`,
+                        color: b.color,
+                        children: b.text
+                    }, b.id))
+            }) : null
+    };
+    const subtitleField = {
+        label: "Position",
+        value: (r)=>r.position,
+        globalFiltering: true,
+        csvExport: true,
+        render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                font: "small",
+                tone: "muted",
+                children: r.position && r.department ? `${r.position} in ${r.department}` : r.position
+            })
+    };
+    const avatarSlot = {
+        id: "av",
+        render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PersonAvatar_js_0117b3ba__["default"], {
+                id: r.id,
+                name: r.name,
+                imageUrl: r.imageUrl,
+                size: "small",
+                hue: "200"
+            }),
+        size: 48
+    };
+    const contentSlots = [
+        {
+            id: "empId",
+            label: "Employee ID",
+            hiddenByDefault: true,
+            value: (r)=>r.id,
+            render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                    font: "small",
+                    children: r.id
+                }),
+            size: 20,
+            csvExport: true,
+            globalFiltering: true
+        },
+        {
+            id: "dept",
+            label: "Department",
+            hiddenByDefault: true,
+            value: (r)=>r.department,
+            render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                    font: "small",
+                    children: r.department
+                }),
+            csvExport: true,
+            globalFiltering: true,
+            filter: {
+                label: "Department",
+                isMulti: true,
+                options: people.flatMap((r)=>r.department).filter((d, i, arr)=>arr.indexOf(d) === i).map((d)=>({
+                        id: d,
+                        label: d,
+                        predicate: (r)=>r.department === d
+                    }))
+            }
+        }
+    ];
+    const trailingSlot = {
+        id: "tags",
+        label: "Tags",
+        value: (r)=>r.tags.join(" "),
+        render: (r)=>r.tags.map((t)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    style: {
+                        padding: "4px"
+                    },
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__["default"], {
+                        color: "grey",
+                        children: t
+                    }, t)
+                }, t)),
+        align: "end",
+        size: 200,
+        compactSize: 90,
+        globalFiltering: true,
+        csvExport: true,
+        filter: {
+            label: "Tags",
+            isMulti: true,
+            options: people.flatMap((r)=>r.tags).filter((t, i, arr)=>arr.indexOf(t) === i).map((t)=>({
+                    id: t,
+                    label: t,
+                    predicate: (r)=>r.tags.includes(t)
+                }))
+        }
+    };
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
+        data: people,
+        getRowId: (r)=>r.id,
+        fillContainerHeight: true,
+        compactBreakpoint: compactBreakpoint,
+        contentAlignment: contentAlignment,
+        enableSorting: enableSorting,
+        rowHeight: rowHeight,
+        href: ()=>"#",
+        csvFilename: "people-directory.csv",
+        leadingSlot: avatarSlot,
+        mainSlot: {
+            size: 320,
+            primary: titleField,
+            secondary: subtitleField
+        },
+        contentSlots: contentSlots,
+        trailingSlot: trailingSlot
+    });
+};
+const PeopleList_rslib_entry_ = PeopleList;
+export { PeopleList_rslib_entry_ as default };

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

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+import Badge from "../../Badge";
+import { type CommonProps } from "./shared";
+type BadgeColor = NonNullable<ComponentProps<typeof Badge>["color"]>;
+export type PeopleTagsRow = {
+    id: string;
+    label: string;
+    tagColor: BadgeColor;
+    /** `null` when the row has no sub-line. */
+    description: string | null;
+    peopleCount: number;
+};
+declare const PeopleTagsList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default PeopleTagsList;

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

@@ -0,0 +1,106 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+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__PlainText_js_acfb96d1__ from "../../PlainText.js";
+import * as __WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__ from "../RichList.js";
+const tags = [
+    {
+        id: "pt1",
+        label: "Chill Level 1",
+        tagColor: "blue",
+        description: "This means",
+        peopleCount: 0
+    },
+    {
+        id: "pt2",
+        label: "Project sushi",
+        tagColor: "teal",
+        description: "Part of the special project sushi team",
+        peopleCount: 5
+    },
+    {
+        id: "pt3",
+        label: "Probation",
+        tagColor: "yellow",
+        description: "Currently on probation",
+        peopleCount: 9
+    },
+    {
+        id: "pt4",
+        label: "Project Saphire",
+        tagColor: "orange",
+        description: null,
+        peopleCount: 2
+    },
+    {
+        id: "pt5",
+        label: "Fire warden",
+        tagColor: "red",
+        description: "Allocated to be a fire warden for their location",
+        peopleCount: 2
+    },
+    {
+        id: "pt6",
+        label: "Intern",
+        tagColor: "green",
+        description: "Currently doing an internship",
+        peopleCount: 2
+    }
+];
+function peopleLabel(n) {
+    return 1 === n ? "1 person" : `${n} people`;
+}
+const rowActions = ()=>[
+        {
+            id: "more",
+            label: "Tag actions",
+            icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
+                symbol: "Edit"
+            }),
+            alwaysVisible: false,
+            onClick: ()=>void 0
+        }
+    ];
+const PeopleTagsList = ({ compactBreakpoint, contentAlignment, rowHeight })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
+        compactBreakpoint: compactBreakpoint,
+        contentAlignment: contentAlignment,
+        data: tags,
+        enableSorting: false,
+        fillContainerHeight: true,
+        getRowId: (r)=>r.id,
+        rowActions: rowActions,
+        rowHeight: rowHeight,
+        mainSlot: {
+            primary: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__["default"], {
+                    id: `${r.id}-tag`,
+                    color: r.tagColor,
+                    children: r.label
+                }),
+            secondary: (r)=>r.description ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                    font: "small",
+                    tone: "muted",
+                    children: r.description
+                }) : null
+        },
+        trailingSlot: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+                spacing: "n2",
+                align: "center",
+                justify: "end",
+                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__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                        font: "small",
+                        tone: "muted",
+                        children: peopleLabel(r.peopleCount)
+                    })
+                ]
+            })
+    });
+const PeopleTags_rslib_entry_ = PeopleTagsList;
+export { PeopleTags_rslib_entry_ as default };

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

@@ -0,0 +1,22 @@
+import { type CommonProps } from "./shared";
+type PersonRef = {
+    name: string;
+    imageUrl: string | null;
+};
+export type PositionsRow = {
+    id: string;
+    title: string;
+    positionCode: string;
+    directReports: number;
+    /** Function or business area (for display and filters). */
+    department: string;
+    /** Filled role or **vacant**. */
+    assignee: PersonRef | "vacant";
+    /**
+     * **null** — top of org (no “reports to”); **vacant** — open manager slot; otherwise
+     * the person (or placeholder) in that org role.
+     */
+    manager: PersonRef | "vacant" | null;
+};
+declare const PositionsList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default PositionsList;