@worknice/whiteboard 0.23.3 → 0.25.0

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

@@ -0,0 +1,52 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ children, disabled, icon, id, onClick, size, title, type, tooltip, }: ({
+        disabled?: boolean;
+        id?: string;
+        onClick?: (event: React.MouseEvent) => void;
+        size?: "normal" | "small";
+        title?: string;
+        type?: "submit" | "primary" | "secondary" | "danger";
+        tooltip?: import("react").ReactNode | null;
+    } & ({
+        children: import("react").ReactNode;
+        icon?: import("react").ReactNode;
+    } | {
+        children?: import("react").ReactNode;
+        icon: import("react").ReactNode;
+    })) & {
+        onClick: (event: React.MouseEvent) => void | Promise<void>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        id: {
+            control: false;
+        };
+        title: {
+            control: false;
+        };
+        children: {
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        icon: import("storybook/internal/csf").InputType;
+    };
+    args: {
+        disabled: false;
+        id: string;
+        onClick: import("storybook/test").Mock<(...args: any[]) => any>;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Normal: Story;
+export declare const Primary: Story;
+export declare const Disabled: Story;
+export declare const Small: Story;
+export declare const WithIcon: Story;
+export declare const WithTooltip: Story;
+export declare const Loading: Story;
+export declare const Submit: Story;

package/dist/controls/Action.stories.js

@@ -0,0 +1,93 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+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__utils_storybook_js_3cc1ba9c__ from "../utils/storybook.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Action_js_1d67bb71__ from "./Action.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__Action_js_1d67bb71__["default"],
+    argTypes: {
+        id: {
+            control: false
+        },
+        title: {
+            control: false
+        },
+        children: {
+            table: {
+                type: {
+                    summary: "ReactNode"
+                }
+            }
+        },
+        icon: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_3cc1ba9c__.iconStoryControl)()
+    },
+    args: {
+        disabled: false,
+        id: "action-1",
+        onClick: (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.fn)(),
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+            children: "Click me!"
+        })
+    }
+};
+const Action_stories_rslib_entry_ = meta;
+const Normal = {
+    args: {}
+};
+const Primary = {
+    args: {
+        id: "primary-action",
+        type: "primary"
+    }
+};
+const Disabled = {
+    args: {
+        id: "disabled-action",
+        disabled: true
+    }
+};
+const Small = {
+    args: {
+        id: "small-action",
+        size: "small"
+    }
+};
+const WithIcon = {
+    args: {
+        id: "with-icon-action",
+        children: "Edit",
+        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+            symbol: "Edit"
+        })
+    }
+};
+const WithTooltip = {
+    args: {
+        id: "with-tooltip-action",
+        tooltip: "This is a tooltip"
+    }
+};
+const Loading = {
+    args: {
+        id: "loading-action",
+        children: "Loading",
+        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+            animate: true,
+            symbol: "Loading"
+        })
+    }
+};
+const Submit = {
+    args: {
+        id: "submit-action",
+        type: "submit",
+        children: "Submit"
+    },
+    play: async ({ args, canvas, userEvent })=>{
+        await userEvent.click(canvas.getByRole("button", {
+            name: "Submit"
+        }));
+        await (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.expect)(args.onClick).toHaveBeenCalled();
+    }
+};
+export { Disabled, Loading, Normal, Primary, Small, Submit, WithIcon, WithTooltip, Action_stories_rslib_entry_ as default };

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

@@ -29,27 +29,13 @@ declare const meta: {
                 };
             };
         };
-        icon: {
-            control: "inline-radio";
-            options: string[];
-            mapping: {
-                None: null;
-                Edit: import("react/jsx-runtime").JSX.Element;
-                Plus: import("react/jsx-runtime").JSX.Element;
-                Loading: import("react/jsx-runtime").JSX.Element;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-            };
-        };
+        icon: import("storybook/internal/csf").InputType;
     };
     args: {
         id: string;
         type: "primary";
         onClick: import("storybook/test").Mock<(...args: any[]) => any>;
-        children: string;
+        children: import("react/jsx-runtime").JSX.Element;
         size: "normal";
         disabled: false;
         tooltip: string;

package/dist/controls/Button.stories.js

@@ -1,6 +1,7 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 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__utils_storybook_js_3cc1ba9c__ from "../utils/storybook.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Button_js_17bdd71d__ from "./Button.js";
 const meta = {
     component: __WEBPACK_EXTERNAL_MODULE__Button_js_17bdd71d__["default"],
@@ -18,39 +19,15 @@ const meta = {
                 }
             }
         },
-        icon: {
-            control: "inline-radio",
-            options: [
-                "None",
-                "Edit",
-                "Plus",
-                "Loading"
-            ],
-            mapping: {
-                None: null,
-                Edit: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
-                    symbol: "Edit"
-                }),
-                Plus: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
-                    symbol: "Plus"
-                }),
-                Loading: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
-                    animate: true,
-                    symbol: "Loading"
-                })
-            },
-            table: {
-                type: {
-                    summary: "ReactNode"
-                }
-            }
-        }
+        icon: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_3cc1ba9c__.iconStoryControl)()
     },
     args: {
         id: "default-button",
         type: "primary",
         onClick: (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.fn)(),
-        children: "Click Me!",
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+            children: "Click me!"
+        }),
         size: "normal",
         disabled: false,
         tooltip: "This is a tooltip"

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

@@ -0,0 +1,31 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: (props: {
+        children: import("react").ReactNode;
+    } & ({
+        onClick: (event: React.MouseEvent) => void;
+        async?: false;
+    } | {
+        onClick: (event: React.MouseEvent) => Promise<void>;
+        async: true;
+    })) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        children: {
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        onClick: import("storybook/test").Mock<(...args: any[]) => any>;
+        children: import("react/jsx-runtime").JSX.Element;
+        async: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Normal: Story;
+export declare const Async: Story;
+export declare const WithContent: Story;

package/dist/controls/ButtonCard.stories.js

@@ -0,0 +1,77 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__ from "storybook/test";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_Avatar_js_27d78da9__ from "../presentation/Avatar.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__presentation_VStack_js_fd392b79__ from "../presentation/VStack.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ButtonCard_js_7f145c20__ from "./ButtonCard.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__ButtonCard_js_7f145c20__["default"],
+    argTypes: {
+        children: {
+            table: {
+                type: {
+                    summary: "ReactNode"
+                }
+            }
+        }
+    },
+    args: {
+        onClick: (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.fn)(),
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+            children: "Click me!"
+        }),
+        async: false
+    }
+};
+const ButtonCard_stories_rslib_entry_ = meta;
+const Normal = {
+    args: {}
+};
+const Async = {
+    args: {
+        async: true,
+        onClick: (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.fn)(async ()=>{
+            await new Promise((resolve)=>setTimeout(resolve, 2000));
+        }),
+        children: "Save Changes"
+    },
+    play: async ({ args, canvas, userEvent })=>{
+        const button = canvas.getByRole("button", {
+            name: "Save Changes"
+        });
+        await userEvent.click(button);
+        await (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.waitFor)(async ()=>{
+            await (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.expect)(args.onClick).toHaveBeenCalled();
+        }, {
+            timeout: 3000
+        });
+    }
+};
+const WithContent = {
+    args: {
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__presentation_HStack_js_10bfc552__["default"], {
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Avatar_js_27d78da9__["default"], {
+                    width: 40,
+                    height: 40
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__presentation_VStack_js_fd392b79__["default"], {
+                    spacing: "n4",
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_PlainText_js_e98763ad__["default"], {
+                            font: "regular-bold",
+                            children: "John Doe"
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_PlainText_js_e98763ad__["default"], {
+                            font: "small",
+                            tone: "muted",
+                            children: "Administrator"
+                        })
+                    ]
+                })
+            ]
+        })
+    }
+};
+export { Async, Normal, WithContent, ButtonCard_stories_rslib_entry_ as default };

package/dist/controls/ButtonLink.d.ts

@@ -2,13 +2,18 @@ import { type ReactNode } from "react";
 type Props = {
     children: ReactNode;
     disabled?: boolean;
+    /** What to download, if true the href is used as the download filename.
+     *
+     * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#download
+     * */
     download?: string | boolean;
+    /** Whether the link should open in a new tab. */
     external?: boolean;
     href: string;
     icon?: ReactNode;
     iconRight?: ReactNode;
     id?: string;
-    type?: "submit" | "primary" | "secondary";
+    type?: "primary" | "secondary";
     size?: "normal" | "small";
 };
 declare const ButtonLink: ({ children, disabled, download, external, href, icon, iconRight, id, type, size, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/ButtonLink.js

@@ -20,7 +20,7 @@ const ButtonLink = ({ children, disabled, download, external, href, icon, iconRi
         ]
     }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(NextLink, {
         className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__ButtonLink_module_js_d4c014da__["default"].button, {
-            [__WEBPACK_EXTERNAL_MODULE__ButtonLink_module_js_d4c014da__["default"].primary]: "submit" === type || "primary" === type,
+            [__WEBPACK_EXTERNAL_MODULE__ButtonLink_module_js_d4c014da__["default"].primary]: "primary" === type,
             [__WEBPACK_EXTERNAL_MODULE__ButtonLink_module_js_d4c014da__["default"].small]: "small" === size,
             [__WEBPACK_EXTERNAL_MODULE__ButtonLink_module_js_d4c014da__["default"].iconOnly]: void 0 === children
         }),

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

@@ -0,0 +1,46 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ children, disabled, download, external, href, icon, iconRight, id, type, size, }: {
+        children: import("react").ReactNode;
+        disabled?: boolean;
+        download?: string | boolean;
+        external?: boolean;
+        href: string;
+        icon?: import("react").ReactNode;
+        iconRight?: import("react").ReactNode;
+        id?: string;
+        type?: "primary" | "secondary";
+        size?: "normal" | "small";
+    }) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        id: {
+            control: false;
+        };
+        children: {
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        icon: import("storybook/internal/csf").InputType;
+        iconRight: import("storybook/internal/csf").InputType;
+    };
+    args: {
+        download: false;
+        href: string;
+        children: import("react/jsx-runtime").JSX.Element;
+        disabled: false;
+        external: false;
+        id: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Normal: Story;
+export declare const Disabled: Story;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Small: Story;
+export declare const WithIcon: Story;
+export declare const WithIconRight: Story;

package/dist/controls/ButtonLink.stories.js

@@ -0,0 +1,72 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__ from "../presentation/Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_3cc1ba9c__ from "../utils/storybook.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ButtonLink_js_87472ad1__ from "./ButtonLink.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__ButtonLink_js_87472ad1__["default"],
+    argTypes: {
+        id: {
+            control: false
+        },
+        children: {
+            table: {
+                type: {
+                    summary: "ReactNode"
+                }
+            }
+        },
+        icon: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_3cc1ba9c__.iconStoryControl)(),
+        iconRight: (0, __WEBPACK_EXTERNAL_MODULE__utils_storybook_js_3cc1ba9c__.iconStoryControl)()
+    },
+    args: {
+        download: false,
+        href: "#",
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+            children: "Click me!"
+        }),
+        disabled: false,
+        external: false,
+        id: "button-link-1"
+    }
+};
+const ButtonLink_stories_rslib_entry_ = meta;
+const Normal = {
+    args: {}
+};
+const Disabled = {
+    args: {
+        disabled: true
+    }
+};
+const Primary = {
+    args: {
+        type: "primary"
+    }
+};
+const Secondary = {
+    args: {
+        type: "secondary"
+    }
+};
+const Small = {
+    args: {
+        size: "small"
+    }
+};
+const WithIcon = {
+    args: {
+        icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+            symbol: "Plus"
+        }),
+        children: "Add"
+    }
+};
+const WithIconRight = {
+    args: {
+        iconRight: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+            symbol: "Archive"
+        }),
+        children: "Archive"
+    }
+};
+export { Disabled, Normal, Primary, Secondary, Small, WithIcon, WithIconRight, ButtonLink_stories_rslib_entry_ as default };

package/dist/controls/Disclosure.d.ts

@@ -3,5 +3,9 @@ import Button from "./Button";
 type Props = ComponentProps<typeof Button> & {
     render: (onClose: () => void) => ReactNode;
 };
+/**
+ * A disclosure component that renders a component when clicked.
+ * It is intended to be used with a modal or a confirmation modal.
+ */
 declare const Disclosure: ({ render, children, disabled, icon, id, size, title, tooltip, type, }: Omit<Props, "onClick">) => import("react/jsx-runtime").JSX.Element;
 export default Disclosure;

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

@@ -0,0 +1,53 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ render, children, disabled, icon, id, size, title, tooltip, type, }: Omit<({
+        disabled?: boolean;
+        id?: string;
+        onClick?: (event: React.MouseEvent) => void;
+        size?: "normal" | "small";
+        title?: string;
+        type?: "submit" | "primary" | "secondary" | "danger";
+        tooltip?: import("react").ReactNode | null;
+    } & ({
+        children: import("react").ReactNode;
+        icon?: import("react").ReactNode;
+    } | {
+        children?: import("react").ReactNode;
+        icon: import("react").ReactNode;
+    })) & {
+        render: (onClose: () => void) => import("react").ReactNode;
+    }, "onClick">) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        id: {
+            control: false;
+        };
+        title: {
+            control: false;
+        };
+        children: {
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        icon: import("storybook/internal/csf").InputType;
+    };
+    args: {
+        id: string;
+        children: import("react/jsx-runtime").JSX.Element;
+        type: "secondary";
+        size: "normal";
+        disabled: false;
+        tooltip: string;
+        render: (onClose: () => void) => import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithSimpleModal: Story;
+export declare const WithConfirmationModal: Story;
+export declare const WithIcon: Story;
+export declare const Primary: Story;
+export declare const Small: Story;
+export declare const Disabled: Story;