@worknice/whiteboard 0.42.1 → 0.43.0

package/dist/forms/useForm.js

@@ -2,26 +2,31 @@ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE_uuid__ from "uuid";
 import * as __WEBPACK_EXTERNAL_MODULE__FormError_js_149fc952__ from "./FormError.js";
 const useForm = ({ initialValues, onSubmit, onSuccess, validators })=>{
-    const sleep = useSleep();
+    const statusTimeout = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(void 0);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>()=>clearTimeout(statusTimeout.current), []);
     const [status, setStatus] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("fresh");
     const [data, setData] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(initialValues);
     const [errors, setErrors] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)([]);
+    const transitionStatus = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((newStatus)=>{
+        clearTimeout(statusTimeout.current);
+        setStatus(newStatus);
+        if ("success" === newStatus || "errored" === newStatus) statusTimeout.current = setTimeout(()=>setStatus("modified"), 1000);
+    }, [
+        setStatus
+    ]);
     const submit = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(async (event)=>{
-        setStatus("loading");
+        transitionStatus("loading");
         event?.preventDefault();
         setErrors([]);
         const validationErrors = await Promise.all((validators ?? []).map((validator)=>validatorToValidationErrors(data, validator)));
         const flatValidationErrors = validationErrors.flat();
         if (flatValidationErrors.length > 0) {
-            await sleep(250, ()=>setStatus("modified"));
             setErrors(flatValidationErrors);
-            setStatus("errored");
-            await sleep(1000, ()=>setStatus("modified"));
+            transitionStatus("errored");
         } else try {
             const result = await onSubmit(data);
-            setStatus("success");
-            await sleep(1000, ()=>setStatus("modified"));
             if (onSuccess) await onSuccess(result);
+            transitionStatus("success");
         } catch (error) {
             if (error instanceof __WEBPACK_EXTERNAL_MODULE__FormError_js_149fc952__["default"]) setErrors(error.validationErrors);
             else error instanceof Error ? setErrors([
@@ -35,14 +40,13 @@ const useForm = ({ initialValues, onSubmit, onSuccess, validators })=>{
                     message: "Unknown error."
                 }
             ]);
-            setStatus("errored");
-            await sleep(1000, ()=>setStatus("modified"));
+            transitionStatus("errored");
         }
     }, [
         data,
         onSubmit,
         onSuccess,
-        sleep,
+        transitionStatus,
         validators
     ]);
     const fieldErrors = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>Object.fromEntries(Object.keys(initialValues).map((key)=>[
@@ -83,24 +87,6 @@ const useForm = ({ initialValues, onSubmit, onSuccess, validators })=>{
         reset
     };
 };
-const useSleep = ()=>{
-    const timeout = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(void 0);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>()=>{
-            if (timeout.current) {
-                clearTimeout(timeout.current.id);
-                if (timeout.current.finalFn) timeout.current.finalFn();
-            }
-        }, []);
-    return (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(async (ms, finalFn)=>{
-        if (timeout.current) clearTimeout(timeout.current.id);
-        await new Promise((resolve)=>{
-            timeout.current = {
-                id: setTimeout(resolve, ms),
-                finalFn
-            };
-        });
-    }, []);
-};
 const validatorToValidationErrors = async (data, validator)=>{
     if (null === validator) return [];
     if (Array.isArray(validator)) {

package/dist/presentation/ProgressBar.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    /** Progress from 0 to 1 (e.g. 0.4 for 40%) */
+    percentage: number;
+};
+/**
+ * Renders a horizontal progress bar with light green fill and rounded sides.
+ */
+declare const ProgressBar: ({ percentage }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ProgressBar;

package/dist/presentation/ProgressBar.js

@@ -0,0 +1,21 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__ProgressBar_module_js_913c4023__ from "./ProgressBar.module.js";
+const ProgressBar = ({ percentage })=>{
+    const clamped = Math.max(0, Math.min(1, percentage)) || 0;
+    const percent = 100 * clamped;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: __WEBPACK_EXTERNAL_MODULE__ProgressBar_module_js_913c4023__["default"].track,
+        role: "progressbar",
+        "aria-valuenow": percent,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            className: __WEBPACK_EXTERNAL_MODULE__ProgressBar_module_js_913c4023__["default"].fill,
+            style: {
+                width: `${percent}%`
+            }
+        })
+    });
+};
+const ProgressBar_rslib_entry_ = ProgressBar;
+export { ProgressBar_rslib_entry_ as default };

package/dist/presentation/ProgressBar.module.js

@@ -0,0 +1,6 @@
+import "./ProgressBar_module.css";
+const ProgressBar_module_rslib_entry_ = {
+    track: "track-q0A2R3",
+    fill: "fill-ureadD"
+};
+export { ProgressBar_module_rslib_entry_ as default };

package/dist/presentation/ProgressBar.stories.d.ts

@@ -0,0 +1,28 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    component: ({ percentage }: {
+        percentage: number;
+    }) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        percentage: number;
+    };
+    argTypes: {
+        percentage: {
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+    };
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/nextjs-vite").ReactRenderer, {
+        percentage: number;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const Full: Story;

package/dist/presentation/ProgressBar.stories.js

@@ -0,0 +1,44 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__ProgressBar_js_0e285d3e__ from "./ProgressBar.js";
+const meta = {
+    component: __WEBPACK_EXTERNAL_MODULE__ProgressBar_js_0e285d3e__["default"],
+    args: {
+        percentage: 0.6
+    },
+    argTypes: {
+        percentage: {
+            control: {
+                type: "range",
+                min: 0,
+                max: 1,
+                step: 0.01
+            },
+            description: "Progress from 0 to 1"
+        }
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                style: {
+                    width: 200
+                },
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Story, {})
+            })
+    ]
+};
+const ProgressBar_stories_rslib_entry_ = meta;
+const Default = {
+    args: {
+        percentage: 0.6
+    }
+};
+const Empty = {
+    args: {
+        percentage: 0
+    }
+};
+const Full = {
+    args: {
+        percentage: 1
+    }
+};
+export { Default, Empty, Full, ProgressBar_stories_rslib_entry_ as default };

package/dist/presentation/ProgressBar_module.css

@@ -0,0 +1,15 @@
+.track-q0A2R3 {
+  width: 100%;
+  height: var(--size-n1);
+  background-color: var(--color-grey-t09);
+  border-radius: var(--size-n2);
+  overflow: hidden;
+}
+
+.fill-ureadD {
+  background-color: var(--color-green-t07);
+  border-radius: var(--size-n2);
+  height: 100%;
+  transition: width .2s;
+}
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@worknice/whiteboard",
   "description": "",
-  "version": "0.42.1",
+  "version": "0.43.0",
   "license": "MIT",
   "private": false,
   "files": [
@@ -39,7 +39,7 @@
     "react-markdown": "^10.1.0",
     "utf8": "^3.0.0",
     "zod": "^4.1.13",
-    "@worknice/utils": "^0.25.1"
+    "@worknice/utils": "^0.26.0"
   },
   "devDependencies": {
     "@anolilab/semantic-release-pnpm": "^3.2.2",