@worknice/whiteboard 0.52.1 → 0.54.0

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

@@ -0,0 +1,215 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+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 formatListDate = (isoDate)=>{
+    const d = new Date(`${isoDate}T12:00:00`);
+    return new Intl.DateTimeFormat("en-GB", {
+        day: "numeric",
+        month: "short",
+        year: "numeric"
+    }).format(d);
+};
+const reviewRows = [
+    {
+        id: "pr-1",
+        cycleName: "2026 Q1 Check-ins",
+        reviewBadging: "self",
+        reviewStatus: "assigned",
+        dueDate: "2026-03-01",
+        submittedAt: null,
+        personName: "Alex Chen",
+        personHue: "220",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(11)
+    },
+    {
+        id: "pr-2",
+        cycleName: "2026 Q1 Check-ins",
+        reviewBadging: "peer",
+        reviewStatus: "assigned",
+        dueDate: "2026-03-08",
+        submittedAt: null,
+        personName: "Jordan Lee",
+        personHue: "280",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(22)
+    },
+    {
+        id: "pr-3",
+        cycleName: "2026 Mid-year Review",
+        reviewBadging: "self",
+        reviewStatus: "assigned",
+        dueDate: "2026-06-30",
+        submittedAt: null,
+        personName: "Sam Rivera",
+        personHue: "40",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(33)
+    },
+    {
+        id: "pr-4",
+        cycleName: "2026 Q1 Check-ins",
+        reviewBadging: "self",
+        reviewStatus: "submitted",
+        dueDate: "2026-03-15",
+        submittedAt: "2026-03-10T09:00:00.000Z",
+        personName: "Riley Nguyen",
+        personHue: "160",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(11)
+    },
+    {
+        id: "pr-5",
+        cycleName: "2026 Q1 Check-ins",
+        reviewBadging: "peer",
+        reviewStatus: "submitted",
+        dueDate: "2026-03-20",
+        submittedAt: "2026-03-18T14:30:00.000Z",
+        personName: "Morgan Blake",
+        personHue: "300",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(22)
+    },
+    {
+        id: "pr-6",
+        cycleName: "2026 Mid-year Review",
+        reviewBadging: "peer",
+        reviewStatus: "submitted",
+        dueDate: "2026-07-05",
+        submittedAt: "2026-06-28T11:15:00.000Z",
+        personName: "Casey Park",
+        personHue: "100",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(33)
+    },
+    {
+        id: "pr-7",
+        cycleName: "2026 End of year",
+        reviewBadging: "self",
+        reviewStatus: "submitted",
+        dueDate: "2026-11-30",
+        submittedAt: "2026-11-24T16:45:00.000Z",
+        personName: "Taylor Brooks",
+        personHue: "20",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(11)
+    },
+    {
+        id: "pr-8",
+        cycleName: "2026 End of year",
+        reviewBadging: "peer",
+        reviewStatus: "submitted",
+        dueDate: "2026-11-30",
+        submittedAt: "2026-11-29T08:20:00.000Z",
+        personName: "Jamie Patel",
+        personHue: "200",
+        personImageUrl: (0, __WEBPACK_EXTERNAL_MODULE__shared_js_cc7b7cda__.avatarUrl)(22)
+    }
+];
+const renderDueLine = (row)=>{
+    switch(row.reviewStatus){
+        case "assigned":
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                font: "small",
+                tone: "muted",
+                children: [
+                    "Due ",
+                    formatListDate(row.dueDate)
+                ]
+            });
+        case "submitted":
+            if (!row.submittedAt) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                font: "small",
+                tone: "muted",
+                children: "Submitted"
+            });
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                font: "small",
+                tone: "muted",
+                children: [
+                    "Submitted ",
+                    formatListDate(row.submittedAt.slice(0, 10))
+                ]
+            });
+        case "incomplete":
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                font: "small",
+                tone: "muted",
+                children: [
+                    "Was due ",
+                    formatListDate(row.dueDate)
+                ]
+            });
+    }
+};
+const avatarSlot = {
+    id: "reviewee",
+    render: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PersonAvatar_js_0117b3ba__["default"], {
+            hue: r.personHue,
+            id: r.id,
+            imageUrl: r.personImageUrl,
+            name: r.personName,
+            size: "small"
+        }),
+    size: 48
+};
+const primaryField = {
+    label: "Review",
+    value: (r)=>`${r.cycleName} ${r.personName}`,
+    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.cycleName
+        })
+};
+const secondaryTypeField = {
+    render: (r)=>renderDueLine(r)
+};
+const statusFilterSlot = {
+    id: "reviewStatus",
+    label: "",
+    hiddenByDefault: true,
+    value: (r)=>r.reviewStatus,
+    globalFiltering: false,
+    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.reviewStatus
+        }),
+    filter: {
+        label: "Status",
+        options: [
+            {
+                id: "assigned",
+                label: "Assigned",
+                predicate: (r)=>"assigned" === r.reviewStatus
+            },
+            {
+                id: "submitted",
+                label: "Submitted",
+                predicate: (r)=>"submitted" === r.reviewStatus
+            },
+            {
+                id: "incomplete",
+                label: "Incomplete",
+                predicate: (r)=>"incomplete" === r.reviewStatus
+            }
+        ]
+    }
+};
+const ReviewsList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
+        data: reviewRows,
+        getRowId: (r)=>r.id,
+        fillContainerHeight: true,
+        compactBreakpoint: compactBreakpoint,
+        contentAlignment: contentAlignment,
+        enableSorting: enableSorting,
+        rowHeight: rowHeight,
+        leadingSlot: avatarSlot,
+        mainSlot: {
+            size: 380,
+            primary: primaryField,
+            secondary: secondaryTypeField
+        },
+        contentSlots: [
+            statusFilterSlot
+        ],
+        href: (r)=>`#review-${r.id}`
+    });
+const Reviews_rslib_entry_ = ReviewsList;
+export { Reviews_rslib_entry_ as default };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import Badge from "../../Badge";
+import { type CommonProps } from "./shared";
+type BadgeColor = NonNullable<ComponentProps<typeof Badge>["color"]>;
+export type SavedQuestionsRow = {
+    id: string;
+    title: string;
+    responseCount: number;
+    questionTypeLabel: string;
+    questionTypeColor: BadgeColor;
+};
+declare const SavedQuestionsList: ({ compactBreakpoint, contentAlignment, rowHeight }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default SavedQuestionsList;

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

@@ -0,0 +1,152 @@
+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 questions = [
+    {
+        id: "sq1",
+        title: "Communication",
+        responseCount: 4,
+        questionTypeLabel: "Likert scale",
+        questionTypeColor: "blue"
+    },
+    {
+        id: "sq2",
+        title: "Customer centricity",
+        responseCount: 4,
+        questionTypeLabel: "Multiple choice",
+        questionTypeColor: "purple"
+    },
+    {
+        id: "sq3",
+        title: "Development planning",
+        responseCount: 4,
+        questionTypeLabel: "Text",
+        questionTypeColor: "green"
+    },
+    {
+        id: "sq4",
+        title: "Goals for the next period",
+        responseCount: 4,
+        questionTypeLabel: "Text",
+        questionTypeColor: "green"
+    },
+    {
+        id: "sq5",
+        title: "Leadership",
+        responseCount: 4,
+        questionTypeLabel: "Likert scale",
+        questionTypeColor: "blue"
+    },
+    {
+        id: "sq6",
+        title: "Operational excellence",
+        responseCount: 4,
+        questionTypeLabel: "Multiple choice",
+        questionTypeColor: "purple"
+    },
+    {
+        id: "sq7",
+        title: "Problem solving",
+        responseCount: 4,
+        questionTypeLabel: "Likert scale",
+        questionTypeColor: "blue"
+    },
+    {
+        id: "sq8",
+        title: "Suggested areas of improvement",
+        responseCount: 4,
+        questionTypeLabel: "Text",
+        questionTypeColor: "green"
+    },
+    {
+        id: "sq9",
+        title: "Teamwork",
+        responseCount: 4,
+        questionTypeLabel: "Multiple choice",
+        questionTypeColor: "purple"
+    },
+    {
+        id: "sq10",
+        title: "Additional Comments",
+        responseCount: 3,
+        questionTypeLabel: "Text",
+        questionTypeColor: "green"
+    },
+    {
+        id: "sq11",
+        title: "Any other feedback on your on-boarding experience?",
+        responseCount: 3,
+        questionTypeLabel: "Text",
+        questionTypeColor: "green"
+    },
+    {
+        id: "sq12",
+        title: "I had the resources necessary to quickly get up to speed",
+        responseCount: 3,
+        questionTypeLabel: "Likert scale",
+        questionTypeColor: "blue"
+    }
+];
+function responsesLabel(n) {
+    return 1 === n ? "1 response" : `${n} responses`;
+}
+const rowActions = ()=>[
+        {
+            id: "more",
+            label: "Question 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 SavedQuestionsList = ({ 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: questions,
+        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__PlainText_js_acfb96d1__["default"], {
+                    font: "regular-bold",
+                    children: r.title
+                }),
+            secondary: (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: "Comment",
+                            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: responsesLabel(r.responseCount)
+                        })
+                    ]
+                })
+        },
+        trailingSlot: (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)(__WEBPACK_EXTERNAL_MODULE__Badge_js_56d6dba9__["default"], {
+                    id: `${r.id}-qtype`,
+                    color: r.questionTypeColor,
+                    children: r.questionTypeLabel
+                })
+            })
+    });
+const SavedQuestions_rslib_entry_ = SavedQuestionsList;
+export { SavedQuestions_rslib_entry_ as default };

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

@@ -0,0 +1,9 @@
+import { type CommonProps } from "./shared";
+export type TablesRow = {
+    id: string;
+    title: string;
+    description: string;
+    columnCount: number;
+};
+declare const TablesList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default TablesList;

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

@@ -0,0 +1,85 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+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 tables = [
+    {
+        id: "t1",
+        title: "Emergency contact information",
+        description: "A table capturing employee emergency contact details",
+        columnCount: 5
+    },
+    {
+        id: "t2",
+        title: "Employment details",
+        description: "A structured overview of each employee's role and reporting line.",
+        columnCount: 8
+    },
+    {
+        id: "t3",
+        title: "Compensation overview",
+        description: "A real-time view of compensation data synced from your payroll system",
+        columnCount: 7
+    },
+    {
+        id: "t4",
+        title: "Payroll report",
+        description: "A centralised view of employee payroll-related information.",
+        columnCount: 6
+    },
+    {
+        id: "t5",
+        title: "Current onboarders",
+        description: "Track employees who are currently onboarding",
+        columnCount: 4
+    },
+    {
+        id: "t6",
+        title: "Probation tracker",
+        description: "All employees currently under probation",
+        columnCount: 5
+    }
+];
+const TablesList = ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__RichList_js_64f3f04c__["default"], {
+        data: tables,
+        fillContainerHeight: true,
+        compactBreakpoint: compactBreakpoint,
+        contentAlignment: contentAlignment,
+        enableSorting: enableSorting,
+        getRowId: (r)=>r.id,
+        href: ()=>"#",
+        rowHeight: rowHeight,
+        mainSlot: {
+            primary: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                    font: "regular-bold",
+                    children: r.title
+                }),
+            secondary: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PlainText_js_acfb96d1__["default"], {
+                    font: "small",
+                    tone: "muted",
+                    children: r.description
+                })
+        },
+        trailingSlot: (r)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_d2f77bae__["default"], {
+                align: "center",
+                spacing: "n2",
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_b85e52f7__["default"], {
+                        symbol: "Columns",
+                        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.columnCount,
+                            " columns"
+                        ]
+                    })
+                ]
+            })
+    });
+const Tables_rslib_entry_ = TablesList;
+export { Tables_rslib_entry_ as default };

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

@@ -0,0 +1,16 @@
+import { type CommonProps } from "./shared";
+type DueStyle = "soon" | "overdue" | "later";
+export type TasksRow = {
+    id: string;
+    title: string;
+    /** Row 11: Draft badge on the title. */
+    isDraft: boolean;
+    dueText: string;
+    dueStyle: DueStyle;
+    assigneeName: string;
+    assigneeImageUrl: string;
+    /** Far-right “secondary” person. */
+    secondaryImageUrl: string;
+};
+declare const TasksList: ({ compactBreakpoint, contentAlignment, enableSorting, rowHeight, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
+export default TasksList;