@worknice/whiteboard 0.22.6 → 0.23.1

package/dist/Storybook.js

@@ -0,0 +1,50 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+function _createMdxContent(props) {
+    const _components = {
+        a: "a",
+        h1: "h1",
+        h2: "h2",
+        p: "p",
+        ...props.components
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+        children: [
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(_components.h1, {
+                children: "Storybook"
+            }),
+            "\n",
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(_components.p, {
+                children: "Welcome to the Worknice storybook!"
+            }),
+            "\n",
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(_components.p, {
+                children: [
+                    "This is a collection of stories for the Worknice components and UI/UX. The main source of components is the ",
+                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(_components.a, {
+                        href: "https://github.com/worknice/whiteboard",
+                        children: "worknice/whiteboard"
+                    }),
+                    " package."
+                ]
+            }),
+            "\n",
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(_components.h2, {
+                children: "Stories"
+            }),
+            "\n",
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(_components.p, {
+                children: "The folder structure for stories matches the component package/app where the component is located."
+            })
+        ]
+    });
+}
+function MDXContent(props = {}) {
+    const { wrapper: MDXLayout } = props.components || {};
+    return MDXLayout ? (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(MDXLayout, {
+        ...props,
+        children: (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(_createMdxContent, {
+            ...props
+        })
+    }) : _createMdxContent(props);
+}
+export { MDXContent as default };

package/dist/controls/Button.d.ts

@@ -4,6 +4,7 @@ type Props = {
     id?: string;
     onClick?: (event: React.MouseEvent) => void;
     size?: "normal" | "small";
+    /** @deprecated Use tooltip instead. */
     title?: string;
     /**
      * A "submit" type will behave as a submit button in a form, while "primary"
@@ -16,7 +17,11 @@ type Props = {
     icon?: ReactNode;
 } | {
     children?: ReactNode;
+    /** The icon to render, use an instance of the Icon component */
     icon: ReactNode;
 });
+/**
+ * Main button component, using onClick to trigger the action. For links, use ButtonLink.
+ */
 declare const Button: ({ children, disabled, icon, id, onClick, size, type, title, tooltip, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Button;

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

@@ -0,0 +1,67 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ children, disabled, icon, id, onClick, size, type, title, 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;
+    })) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        id: {
+            control: false;
+        };
+        title: {
+            control: false;
+        };
+        children: {
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        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;
+                };
+            };
+        };
+    };
+    args: {
+        id: string;
+        type: "primary";
+        onClick: import("storybook/test").Mock<(...args: any[]) => any>;
+        children: string;
+        size: "normal";
+        disabled: false;
+        tooltip: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: 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/Button.stories.js

@@ -0,0 +1,121 @@
+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__Button_js_17bdd71d__ from "./Button.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__Button_js_17bdd71d__["default"],
+    argTypes: {
+        id: {
+            control: false
+        },
+        title: {
+            control: false
+        },
+        children: {
+            table: {
+                type: {
+                    summary: "ReactNode"
+                }
+            }
+        },
+        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"
+                }
+            }
+        }
+    },
+    args: {
+        id: "default-button",
+        type: "primary",
+        onClick: (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.fn)(),
+        children: "Click Me!",
+        size: "normal",
+        disabled: false,
+        tooltip: "This is a tooltip"
+    }
+};
+const Button_stories_rslib_entry_ = meta;
+const Primary = {
+    args: {
+        id: "primary-button"
+    }
+};
+const Secondary = {
+    args: {
+        id: "secondary-button",
+        type: "secondary"
+    }
+};
+const Disabled = {
+    args: {
+        id: "disabled-button",
+        disabled: true
+    }
+};
+const Small = {
+    args: {
+        id: "small-button",
+        size: "small"
+    }
+};
+const WithIcon = {
+    args: {
+        id: "with-icon-button",
+        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-button",
+        tooltip: "This is a tooltip"
+    }
+};
+const Loading = {
+    args: {
+        id: "loading-button",
+        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-button",
+        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, Primary, Secondary, Small, Submit, WithIcon, WithTooltip, Button_stories_rslib_entry_ as default };

package/dist/fields/CheckboxSetField.d.ts

@@ -11,8 +11,11 @@ type Props<Option> = {
     labelFont?: LabelFontOption;
     onChange: Dispatch<Option>;
     options: Array<Option>;
+    /** Function to infer an id from an option. */
     optionToId: (option: Option) => string;
+    /** Function to infer a label from an option. */
     optionToLabel: (option: Option) => ReactNode;
+    /** Function to infer if an option is disabled */
     optionToDisabled?: (option: Option) => boolean;
     required?: boolean;
     values: Array<Option>;

package/dist/fields/CheckboxSetField.stories.d.ts

@@ -0,0 +1,62 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: <Option>({ autoFocus, description, errors, id, includeValueInTracking, label, labelFont, onChange, options, optionToId, optionToLabel, optionToDisabled, required, values, direction, }: {
+        autoFocus?: boolean;
+        description?: import("react").ReactNode;
+        errors?: Array<import("../forms/_types").ValidationError>;
+        id: string;
+        includeValueInTracking?: boolean;
+        label: import("react").ReactNode;
+        labelFont?: import("../utils/field").LabelFontOption;
+        onChange: import("react").Dispatch<Option>;
+        options: Option[];
+        optionToId: (option: Option) => string;
+        optionToLabel: (option: Option) => import("react").ReactNode;
+        optionToDisabled?: ((option: Option) => boolean) | undefined;
+        required?: boolean;
+        values: Option[];
+        direction?: "row" | "column";
+    }) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        id: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    args: {
+        label: string;
+        description: string;
+        direction: "column";
+        errors: never[];
+        labelFont: "label";
+        required: false;
+        options: string[];
+        optionToId: (option: string) => string;
+        optionToLabel: (option: string) => string;
+        onChange: import("storybook/test").Mock<(...args: any[]) => any>;
+        values: never[];
+    };
+    render: (args: {
+        autoFocus?: boolean;
+        description?: import("react").ReactNode;
+        errors?: Array<import("../forms/_types").ValidationError>;
+        id: string;
+        includeValueInTracking?: boolean;
+        label: import("react").ReactNode;
+        labelFont?: import("../utils/field").LabelFontOption;
+        onChange: import("react").Dispatch<string>;
+        options: string[];
+        optionToId: (option: string) => string;
+        optionToLabel: (option: string) => import("react").ReactNode;
+        optionToDisabled?: ((option: string) => boolean) | undefined;
+        required?: boolean;
+        values: string[];
+        direction?: "row" | "column";
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Normal: Story;
+export declare const WithErrors: Story;
+export declare const WithDisabledOption: Story;

package/dist/fields/CheckboxSetField.stories.js

@@ -0,0 +1,85 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+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__CheckboxSetField_js_221d12c5__ from "./CheckboxSetField.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__CheckboxSetField_js_221d12c5__["default"],
+    argTypes: {
+        id: {
+            table: {
+                disable: true
+            }
+        }
+    },
+    args: {
+        label: "Checkbox Set",
+        description: "Select some options",
+        direction: "column",
+        errors: [],
+        labelFont: "label",
+        required: false,
+        options: [
+            "Option 1",
+            "Option 2",
+            "Option 3"
+        ],
+        optionToId: (option)=>option,
+        optionToLabel: (option)=>option,
+        onChange: (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.fn)(),
+        values: []
+    },
+    render: (args)=>{
+        const [{ values, onChange }, updateArgs] = (0, __WEBPACK_EXTERNAL_MODULE_storybook_internal_preview_api_1bb4c151__.useArgs)();
+        const onCheckboxChange = (option)=>{
+            const newValues = values.includes(option) ? values.filter((val)=>val !== option) : [
+                ...values,
+                option
+            ];
+            updateArgs({
+                values: newValues
+            });
+            onChange(option);
+        };
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__CheckboxSetField_js_221d12c5__["default"], {
+            ...args,
+            values: values,
+            onChange: onCheckboxChange
+        });
+    }
+};
+const CheckboxSetField_stories_rslib_entry_ = meta;
+const Normal = {
+    args: {
+        id: "normalCheckboxSetField"
+    },
+    play: async ({ args, canvas, userEvent })=>{
+        await userEvent.click(await canvas.findByLabelText("Option 1"));
+        await (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.expect)(await canvas.findByLabelText("Option 1")).toBeChecked();
+        await (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.expect)(args.onChange).toHaveBeenCalledWith("Option 1");
+        await userEvent.click(await canvas.findByLabelText("Option 1"));
+    }
+};
+const WithErrors = {
+    args: {
+        id: "withErrorsCheckboxSetField",
+        errors: [
+            {
+                id: "error1",
+                message: "Please select an option",
+                field: "option"
+            }
+        ]
+    }
+};
+const WithDisabledOption = {
+    args: {
+        id: "withDisabledOptionsCheckboxSetField",
+        options: [
+            "Option 1",
+            "Option 2",
+            "Option 3"
+        ],
+        optionToDisabled: (option)=>"Option 2" === option
+    }
+};
+export { Normal, WithDisabledOption, WithErrors, CheckboxSetField_stories_rslib_entry_ as default };

package/dist/fields/ColorPickerField.stories.d.ts

@@ -0,0 +1,49 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ autoFocus, description, disabled, errors, id, label, labelFont, onChange, required, value, }: {
+        autoFocus?: boolean;
+        description?: import("react").ReactNode;
+        disabled?: boolean;
+        errors?: Array<import("../forms/_types").ValidationError>;
+        id: string;
+        label: import("react").ReactNode;
+        labelFont?: import("../utils/field").LabelFontOption;
+        onChange: (value: string) => void;
+        placeholder?: string;
+        required?: boolean;
+        value: string | null;
+    }) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        id: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    args: {
+        label: string;
+        value: string;
+        onChange: import("storybook/test").Mock<(...args: any[]) => any>;
+        description: string;
+        labelFont: "label";
+        required: false;
+        disabled: false;
+    };
+    render: (args: {
+        autoFocus?: boolean;
+        description?: import("react").ReactNode;
+        disabled?: boolean;
+        errors?: Array<import("../forms/_types").ValidationError>;
+        id: string;
+        label: import("react").ReactNode;
+        labelFont?: import("../utils/field").LabelFontOption;
+        onChange: (value: string) => void;
+        placeholder?: string;
+        required?: boolean;
+        value: string | null;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Normal: Story;
+export declare const WithErrors: Story;

package/dist/fields/ColorPickerField.stories.js

@@ -0,0 +1,56 @@
+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__ColorPickerField_js_e131d60a__ from "./ColorPickerField.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__ColorPickerField_js_e131d60a__["default"],
+    argTypes: {
+        id: {
+            table: {
+                disable: true
+            }
+        }
+    },
+    args: {
+        label: "Color",
+        value: "#90116e",
+        onChange: (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.fn)(),
+        description: "Select a color",
+        labelFont: "label",
+        required: false,
+        disabled: false
+    },
+    render: (args)=>{
+        const [{ value, onChange }, updateArgs] = (0, __WEBPACK_EXTERNAL_MODULE_storybook_preview_api_98c434a5__.useArgs)();
+        const onColorChange = (color)=>{
+            updateArgs({
+                value: color
+            });
+            onChange(color);
+        };
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__ColorPickerField_js_e131d60a__["default"], {
+            ...args,
+            value: value,
+            onChange: onColorChange
+        });
+    }
+};
+const ColorPickerField_stories_rslib_entry_ = meta;
+const Normal = {
+    args: {
+        id: "normalColorPickerField"
+    }
+};
+const WithErrors = {
+    args: {
+        id: "withErrorsColorPickerField",
+        errors: [
+            {
+                id: "error1",
+                message: "Please select a color",
+                field: "color"
+            }
+        ]
+    }
+};
+export { Normal, WithErrors, ColorPickerField_stories_rslib_entry_ as default };

package/dist/fields/OrgLogoField.stories.d.ts

@@ -0,0 +1,44 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ id, label, description, value, onChange, errors, logoUrl, required, }: {
+        id?: string;
+        label?: import("react").ReactNode;
+        description?: import("react").ReactNode;
+        value: File | null | undefined;
+        onChange: import("react").Dispatch<File | null | undefined>;
+        errors?: Array<import("../forms/_types").ValidationError>;
+        logoUrl?: string | null;
+        required?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        id: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    args: {
+        value: undefined;
+        logoUrl: string;
+        onChange: import("storybook/test").Mock<(...args: any[]) => any>;
+        errors: never[];
+        required: false;
+    };
+    render: (args: {
+        id?: string;
+        label?: import("react").ReactNode;
+        description?: import("react").ReactNode;
+        value: File | null | undefined;
+        onChange: import("react").Dispatch<File | null | undefined>;
+        errors?: Array<import("../forms/_types").ValidationError>;
+        logoUrl?: string | null;
+        required?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithExistingLogo: Story;
+export declare const WithSelectedFile: Story;
+export declare const WithErrors: Story;
+export declare const Required: Story;
+export declare const NoExistingLogo: Story;

package/dist/fields/OrgLogoField.stories.js

@@ -0,0 +1,79 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+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__OrgLogoField_js_246d57f5__ from "./OrgLogoField.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__OrgLogoField_js_246d57f5__["default"],
+    argTypes: {
+        id: {
+            table: {
+                disable: true
+            }
+        }
+    },
+    args: {
+        value: void 0,
+        logoUrl: "/worknice-logo.png",
+        onChange: (0, __WEBPACK_EXTERNAL_MODULE_storybook_test_a99c99ea__.fn)(),
+        errors: [],
+        required: false
+    },
+    render: (args)=>{
+        const [{ value, onChange }, updateArgs] = (0, __WEBPACK_EXTERNAL_MODULE_storybook_internal_preview_api_1bb4c151__.useArgs)();
+        const onFileChange = (file)=>{
+            console.log("file", file);
+            updateArgs({
+                value: file
+            });
+            onChange(file);
+        };
+        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__OrgLogoField_js_246d57f5__["default"], {
+            ...args,
+            value: value,
+            onChange: onFileChange
+        });
+    }
+};
+const OrgLogoField_stories_rslib_entry_ = meta;
+const WithExistingLogo = {
+    args: {
+        id: "normalOrgLogoField"
+    }
+};
+const WithSelectedFile = {
+    args: {
+        id: "withSelectedFileOrgLogoField",
+        logoUrl: null,
+        value: new File([
+            "content"
+        ], "logo.png", {
+            type: "image/png"
+        })
+    }
+};
+const WithErrors = {
+    args: {
+        id: "withErrorsOrgLogoField",
+        errors: [
+            {
+                id: "error1",
+                message: "Please upload a valid image file",
+                field: "logo"
+            }
+        ]
+    }
+};
+const Required = {
+    args: {
+        id: "requiredOrgLogoField",
+        required: true
+    }
+};
+const NoExistingLogo = {
+    args: {
+        id: "noExistingLogoOrgLogoField",
+        logoUrl: null,
+        value: void 0
+    }
+};
+export { NoExistingLogo, Required, WithErrors, WithExistingLogo, WithSelectedFile, OrgLogoField_stories_rslib_entry_ as default };