@worknice/whiteboard 0.24.0 → 0.26.0

package/dist/controls/PageTabSet.stories.d.ts

@@ -0,0 +1,49 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ id, pages, variant }: {
+        id?: string;
+        pages: {
+            path: string;
+            label: import("react").ReactNode;
+            key: string;
+        }[];
+        variant?: "default" | "steps";
+    }) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        id: {
+            control: false;
+        };
+        pages: {
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        variant: {
+            control: "inline-radio";
+            options: string[];
+        };
+    };
+    args: {
+        pages: {
+            path: string;
+            label: string;
+            key: string;
+        }[];
+        variant: "default";
+    };
+    render: (args: {
+        id?: string;
+        pages: {
+            path: string;
+            label: import("react").ReactNode;
+            key: string;
+        }[];
+        variant?: "default" | "steps";
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const StepsVariant: Story;

package/dist/controls/PageTabSet.stories.js

@@ -0,0 +1,106 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_PlainText_js_e98763ad__ from "../presentation/PlainText.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PageTabSet_js_c94ee2ea__ from "./PageTabSet.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__PageTabSet_js_c94ee2ea__["default"],
+    argTypes: {
+        id: {
+            control: false
+        },
+        pages: {
+            table: {
+                type: {
+                    summary: "Array<{ path: string; label: ReactNode; key: string }>"
+                }
+            }
+        },
+        variant: {
+            control: "inline-radio",
+            options: [
+                "default",
+                "steps"
+            ]
+        }
+    },
+    args: {
+        pages: [
+            {
+                path: "/current-path",
+                label: "Page 1",
+                key: "page1"
+            },
+            {
+                path: "/page2",
+                label: "Page 2",
+                key: "page2"
+            },
+            {
+                path: "/page3",
+                label: "Page 3",
+                key: "page3"
+            }
+        ],
+        variant: "default"
+    },
+    render: (args)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__PageTabSet_js_c94ee2ea__["default"], {
+                    ...args
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                    style: {
+                        marginTop: "1rem",
+                        padding: "1rem",
+                        background: "#f5f5f5",
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "0.5rem"
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_PlainText_js_e98763ad__["default"], {
+                            tone: "muted",
+                            font: "small",
+                            children: "Note: Clicking links in Storybook won't navigate."
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_PlainText_js_e98763ad__["default"], {
+                            tone: "muted",
+                            font: "small",
+                            children: 'You can change the active tab using the storybook controls by setting the path to "/current-path" on the desired page object in the pages prop.'
+                        })
+                    ]
+                })
+            ]
+        })
+};
+const PageTabSet_stories_rslib_entry_ = meta;
+const Default = {
+    args: {}
+};
+const StepsVariant = {
+    args: {
+        variant: "steps",
+        pages: [
+            {
+                path: "/step1",
+                label: "Step 1",
+                key: "step1"
+            },
+            {
+                path: "/step2",
+                label: "Step 2",
+                key: "step2"
+            },
+            {
+                path: "/current-path",
+                label: "Step 3",
+                key: "step3"
+            },
+            {
+                path: "/step4",
+                label: "Step 4",
+                key: "step4"
+            }
+        ]
+    }
+};
+export { Default, StepsVariant, PageTabSet_stories_rslib_entry_ as default };

package/dist/controls/Sortable.d.ts

@@ -1,10 +1,14 @@
 import { type DragEndEvent } from "@dnd-kit/core";
-import { type ReactNode } from "react";
+import { type ReactElement } from "react";
+import type { SortableItemProps } from "./SortableItem";
 type Props = {
-    items: Array<{
+    /**
+     * An array of items to display in the sortable list. Should use SortableItem component.
+     */
+    items: {
         id: string;
-        value: ReactNode;
-    } | null>;
+        value: ReactElement<SortableItemProps>;
+    }[];
     onDragEnd: (e: DragEndEvent) => void;
 };
 declare const Sortable: ({ items, onDragEnd }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/Sortable.stories.d.ts

@@ -0,0 +1,32 @@
+import type { DragEndEvent } from "@dnd-kit/core";
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ items, onDragEnd }: {
+        items: {
+            id: string;
+            value: import("react").ReactElement<import("./SortableItem").SortableItemProps>;
+        }[];
+        onDragEnd: (e: DragEndEvent) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+    subcomponents: {
+        SortableItem: ({ id, children, actions }: import("./SortableItem").SortableItemProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    args: {
+        onDragEnd: import("storybook/test").Mock<(...args: any[]) => any>;
+        items: {
+            id: string;
+            value: import("react/jsx-runtime").JSX.Element;
+        }[];
+    };
+    render: (args: {
+        items: {
+            id: string;
+            value: import("react").ReactElement<import("./SortableItem").SortableItemProps>;
+        }[];
+        onDragEnd: (e: DragEndEvent) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithActions: Story;

package/dist/controls/Sortable.stories.js

@@ -0,0 +1,106 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__ from "@dnd-kit/sortable";
+import * as __WEBPACK_EXTERNAL_MODULE_storybook_internal_preview_api_1bb4c151__ from "storybook/internal/preview-api";
+import * as __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__ from "storybook/test";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__ from "../presentation/Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Button_js_17bdd71d__ from "./Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Sortable_js_022e9a14__ from "./Sortable.js";
+import * as __WEBPACK_EXTERNAL_MODULE__SortableItem_js_266c58d3__ from "./SortableItem.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__Sortable_js_022e9a14__["default"],
+    subcomponents: {
+        SortableItem: __WEBPACK_EXTERNAL_MODULE__SortableItem_js_266c58d3__["default"]
+    },
+    args: {
+        onDragEnd: (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.fn)(),
+        items: [
+            {
+                id: "1",
+                value: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SortableItem_js_266c58d3__["default"], {
+                    id: "1",
+                    children: "Item 1"
+                })
+            },
+            {
+                id: "2",
+                value: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SortableItem_js_266c58d3__["default"], {
+                    id: "2",
+                    children: "Item 2"
+                })
+            },
+            {
+                id: "3",
+                value: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SortableItem_js_266c58d3__["default"], {
+                    id: "3",
+                    children: "Item 3"
+                })
+            }
+        ]
+    },
+    render: (args)=>{
+        const [{ items, onDragEnd }, updateArgs] = (0, __WEBPACK_EXTERNAL_MODULE_storybook_internal_preview_api_1bb4c151__.useArgs)();
+        const onDragEndCallback = (event)=>{
+            const { active, over } = event;
+            if (over && active.id !== over.id) updateArgs({
+                items: (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.arrayMove)(items, items.findIndex((item)=>item.id === active.id), items.findIndex((item)=>item.id === over.id))
+            });
+            onDragEnd(event);
+        };
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Sortable_js_022e9a14__["default"], {
+            ...args,
+            onDragEnd: onDragEndCallback,
+            items: items
+        });
+    }
+};
+const Sortable_stories_rslib_entry_ = meta;
+const Default = {};
+const WithActions = {
+    args: {
+        items: [
+            {
+                id: "1",
+                value: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SortableItem_js_266c58d3__["default"], {
+                    id: "1",
+                    actions: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Button_js_17bdd71d__["default"], {
+                        type: "secondary",
+                        onClick: (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.fn)(),
+                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                            symbol: "Close"
+                        })
+                    }),
+                    children: "Item 1"
+                })
+            },
+            {
+                id: "2",
+                value: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SortableItem_js_266c58d3__["default"], {
+                    id: "2",
+                    actions: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Button_js_17bdd71d__["default"], {
+                        type: "secondary",
+                        onClick: (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.fn)(),
+                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                            symbol: "Close"
+                        })
+                    }),
+                    children: "Item 2"
+                })
+            },
+            {
+                id: "3",
+                value: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SortableItem_js_266c58d3__["default"], {
+                    id: "3",
+                    actions: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Button_js_17bdd71d__["default"], {
+                        type: "secondary",
+                        onClick: (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.fn)(),
+                        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                            symbol: "Close"
+                        })
+                    }),
+                    children: "Item 3"
+                })
+            }
+        ]
+    }
+};
+export { Default, WithActions, Sortable_stories_rslib_entry_ as default };

package/dist/controls/SortableItem.d.ts

@@ -6,3 +6,4 @@ type Props = {
 };
 declare const SortableItem: ({ id, children, actions }: Props) => import("react/jsx-runtime").JSX.Element;
 export default SortableItem;
+export type { Props as SortableItemProps };

package/dist/controls/TabSet.stories.d.ts

@@ -0,0 +1,43 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: <T extends string>({ active, id, items, onChange }: {
+        active: T;
+        id?: string;
+        items: ({
+            content: import("react").ReactNode;
+            key: T;
+        } | null)[];
+        onChange: (key: T) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        id: {
+            control: false;
+        };
+        active: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+    };
+    args: {
+        active: string;
+        items: {
+            content: string;
+            key: string;
+        }[];
+        onChange: import("storybook/test").Mock<(...args: any[]) => any>;
+    };
+    render: (args: {
+        active: string;
+        id?: string;
+        items: ({
+            content: import("react").ReactNode;
+            key: string;
+        } | null)[];
+        onChange: (key: string) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithRichContent: Story;

package/dist/controls/TabSet.stories.js

@@ -0,0 +1,109 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_storybook_preview_api_98c434a5__ from "storybook/preview-api";
+import * as __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__ from "storybook/test";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_Badge_js_d3f5e18a__ from "../presentation/Badge.js";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_HStack_js_10bfc552__ from "../presentation/HStack.js";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_PlainText_js_e98763ad__ from "../presentation/PlainText.js";
+import * as __WEBPACK_EXTERNAL_MODULE__TabSet_js_d051a74a__ from "./TabSet.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__TabSet_js_d051a74a__["default"],
+    argTypes: {
+        id: {
+            control: false
+        },
+        active: {
+            control: "select",
+            options: [
+                "tab1",
+                "tab2",
+                "tab3"
+            ],
+            description: "The key of the currently active tab"
+        }
+    },
+    args: {
+        active: "tab1",
+        items: [
+            {
+                content: "Tab 1",
+                key: "tab1"
+            },
+            {
+                content: "Tab 2",
+                key: "tab2"
+            },
+            {
+                content: "Tab 3",
+                key: "tab3"
+            }
+        ],
+        onChange: (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.fn)()
+    },
+    render: (args)=>{
+        const [{ active, onChange }, updateArgs] = (0, __WEBPACK_EXTERNAL_MODULE_storybook_preview_api_98c434a5__.useArgs)();
+        const handleChange = (key)=>{
+            updateArgs({
+                active: key
+            });
+            onChange(key);
+        };
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__TabSet_js_d051a74a__["default"], {
+            ...args,
+            active: active,
+            onChange: handleChange
+        });
+    }
+};
+const TabSet_stories_rslib_entry_ = meta;
+const Default = {};
+const WithRichContent = {
+    args: {
+        active: "tab2",
+        items: [
+            {
+                content: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__presentation_HStack_js_10bfc552__["default"], {
+                    spacing: "n2",
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_PlainText_js_e98763ad__["default"], {
+                            children: "Tab 1"
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Badge_js_d3f5e18a__["default"], {
+                            children: "3"
+                        })
+                    ]
+                }),
+                key: "tab1"
+            },
+            {
+                content: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__presentation_HStack_js_10bfc552__["default"], {
+                    spacing: "n2",
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_PlainText_js_e98763ad__["default"], {
+                            children: "Tab 2"
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Badge_js_d3f5e18a__["default"], {
+                            color: "red",
+                            children: "20"
+                        })
+                    ]
+                }),
+                key: "tab2"
+            },
+            {
+                content: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__presentation_HStack_js_10bfc552__["default"], {
+                    spacing: "n2",
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_PlainText_js_e98763ad__["default"], {
+                            children: "Tab 3"
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Badge_js_d3f5e18a__["default"], {
+                            children: "0"
+                        })
+                    ]
+                }),
+                key: "tab3"
+            }
+        ]
+    }
+};
+export { Default, WithRichContent, TabSet_stories_rslib_entry_ as default };

package/dist/controls/TabSetLink.d.ts

@@ -8,5 +8,8 @@ type Props<T extends string> = {
         prefix?: ReactNode;
     }>;
 };
+/**
+ * Controlled component that renders a set of links. For uncontrolled use (pathname based), see PageTabSet.
+ */
 declare const TabSetLink: <T extends string>({ activeHref, id, items }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default TabSetLink;

package/dist/controls/TabSetLink.stories.d.ts

@@ -0,0 +1,44 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: <T extends string>({ activeHref, id, items }: {
+        activeHref: T;
+        id?: string;
+        items: Array<{
+            label: import("react").ReactNode;
+            href: string;
+            prefix?: import("react").ReactNode;
+        }>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        id: {
+            control: false;
+        };
+        activeHref: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+    };
+    args: {
+        activeHref: string;
+        items: {
+            label: string;
+            href: string;
+        }[];
+    };
+    render: (args: {
+        activeHref: string;
+        id?: string;
+        items: Array<{
+            label: import("react").ReactNode;
+            href: string;
+            prefix?: import("react").ReactNode;
+        }>;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithPrefix: Story;
+export declare const WithRichContent: Story;
+export declare const WithPrefixAndRichContent: Story;