@homebound/form-state 2.18.1 → 2.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/form-state",
-  "version": "2.18.1",
+  "version": "2.20.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -13,11 +13,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "ttsc",
-    "build:storybook": "build-storybook",
+    "build": "tspc",
+    "build:storybook": "storybook build",
     "test": "jest",
     "lint": "eslint . --cache --fix --ext .js,.ts,.tsx",
-    "storybook": "start-storybook -p 9000",
+    "storybook": "storybook dev -p 9000",
     "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md}\"",
     "semantic-release": "semantic-release"
   },
@@ -32,30 +32,32 @@
   "dependencies": {
     "fast-deep-equal": "^3.1.3",
     "is-plain-object": "^5.0.0",
-    "mobx": "^6.3.2",
-    "mobx-react": "^7.2.0"
+    "mobx": "^6.10.2",
+    "mobx-react": "^9.0.1"
   },
   "peerDependencies": {
     "react": ">=16"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",
-    "@homebound/rtl-utils": "^2.59.2",
-    "@semantic-release/exec": "^5.0.0",
-    "@semantic-release/git": "^9.0.0",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/react": "^6.2.9",
-    "@testing-library/dom": "^8.11.3",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@tsconfig/recommended": "^1.0.1",
-    "@types/jest": "^26.0.20",
-    "@types/react": "^16.14.5",
-    "@types/react-dom": "^16.9.11",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
+    "@homebound/rtl-utils": "2.65.0",
+    "@semantic-release/exec": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addons": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@tsconfig/recommended": "^1.0.2",
+    "@types/jest": "^29.5.4",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "babel-eslint": "^10.1.0",
@@ -69,21 +71,24 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^3.0.9",
-    "jest": "^27.0.2",
-    "lint-staged": "^10.1.2",
-    "mobx": "^6.3.2",
-    "mobx-react": "^7.2.0",
-    "prettier": "^2.2.1",
-    "prettier-plugin-organize-imports": "^1.1.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "semantic-release": "^17.4.0",
-    "ts-jest": "^27.0.1",
-    "ts-node": "^9.1.1",
-    "tslib": "^2.1.0",
-    "ttypescript": "^1.5.12",
-    "typescript": "^4.3.2",
-    "typescript-transform-paths": "^2.0.1"
-  }
+    "husky": "^3.1.0",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
+    "lint-staged": "^14.0.1",
+    "mobx": "^6.10.2",
+    "mobx-react": "^9.0.1",
+    "prettier": "2.8.8",
+    "prettier-plugin-organize-imports": "^3.2.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "semantic-release": "^21.1.1",
+    "storybook": "^7.4.0",
+    "ts-jest": "^29.1.1",
+    "ts-node": "^10.9.1",
+    "ts-patch": "^3.0.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "typescript-transform-paths": "^3.4.6"
+  },
+  "packageManager": "yarn@3.6.3"
 }

package/dist/AutoSaveStatus/AutoSaveStatusProvider.d.ts

@@ -1,24 +0,0 @@
-import React, { PropsWithChildren } from "react";
-export declare enum AutoSaveStatus {
-    IDLE = "idle",
-    SAVING = "saving",
-    DONE = "done",
-    ERROR = "error"
-}
-export interface AutoSaveStatusContextType {
-    status: AutoSaveStatus;
-    /** Resets status to IDLE, particularly useful if "Error" or "Done" is stale */
-    resetStatus: VoidFunction;
-    errors: unknown[];
-    /** Notifies AutoSaveContext that a request is in-flight */
-    triggerAutoSave: VoidFunction;
-    /** Notifies AutoSaveContext that a request has settled, optionally taking an error */
-    resolveAutoSave: (error?: unknown) => void;
-}
-export declare const AutoSaveStatusContext: React.Context<AutoSaveStatusContextType>;
-declare type AutoSaveStatusProviderProps = PropsWithChildren<{
-    /** After a successful save, reset Status back to `Idle` after this many milliseconds */
-    resetToIdleTimeout?: number;
-}>;
-export declare function AutoSaveStatusProvider({ children, resetToIdleTimeout }: AutoSaveStatusProviderProps): JSX.Element;
-export {};

package/dist/AutoSaveStatus/AutoSaveStatusProvider.js

@@ -1,91 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutoSaveStatusProvider = exports.AutoSaveStatusContext = exports.AutoSaveStatus = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-var AutoSaveStatus;
-(function (AutoSaveStatus) {
-    AutoSaveStatus["IDLE"] = "idle";
-    AutoSaveStatus["SAVING"] = "saving";
-    AutoSaveStatus["DONE"] = "done";
-    AutoSaveStatus["ERROR"] = "error";
-})(AutoSaveStatus = exports.AutoSaveStatus || (exports.AutoSaveStatus = {}));
-exports.AutoSaveStatusContext = react_1.default.createContext({
-    status: AutoSaveStatus.IDLE,
-    resetStatus() { },
-    errors: [],
-    triggerAutoSave() { },
-    resolveAutoSave() { },
-});
-function AutoSaveStatusProvider({ children, resetToIdleTimeout = 6000 }) {
-    const [status, setStatus] = react_1.useState(AutoSaveStatus.IDLE);
-    const [errors, setErrors] = react_1.useState([]);
-    const [inFlight, setInFlight] = react_1.useState(0);
-    const resetToIdleTimeoutRef = react_1.useRef(null);
-    /** Handles setting Status */
-    react_1.useEffect(() => {
-        if (inFlight > 0)
-            return setStatus(AutoSaveStatus.SAVING);
-        if (status === AutoSaveStatus.IDLE)
-            return;
-        if (errors.length)
-            return setStatus(AutoSaveStatus.ERROR);
-        return setStatus(AutoSaveStatus.DONE);
-    }, [errors.length, inFlight, status]);
-    const triggerAutoSave = react_1.useCallback(() => {
-        setInFlight((c) => c + 1);
-        setErrors([]);
-    }, []);
-    const resolveAutoSave = react_1.useCallback((error) => {
-        setInFlight((c) => Math.max(0, c - 1));
-        if (error)
-            setErrors((errs) => errs.concat(error));
-    }, []);
-    const resetStatus = react_1.useCallback(() => {
-        setStatus(AutoSaveStatus.IDLE);
-        setErrors([]);
-    }, []);
-    /** Resets AutoSaveStatus from "Done" to "Idle" after a timeout, if one is provided */
-    react_1.useEffect(() => {
-        if (resetToIdleTimeout === undefined)
-            return;
-        // Specifically avoid auto-reset if Errors are present
-        if (status !== AutoSaveStatus.DONE)
-            return;
-        // Only run the latest Timeout
-        if (resetToIdleTimeoutRef.current)
-            clearTimeout(resetToIdleTimeoutRef.current);
-        resetToIdleTimeoutRef.current = window.setTimeout(() => {
-            resetStatus();
-            resetToIdleTimeoutRef.current = null;
-        }, resetToIdleTimeout);
-    }, [resetStatus, resetToIdleTimeout, status]);
-    const value = react_1.useMemo(() => ({ status, resetStatus, errors, triggerAutoSave, resolveAutoSave }), [
-        errors,
-        resetStatus,
-        resolveAutoSave,
-        status,
-        triggerAutoSave,
-    ]);
-    return jsx_runtime_1.jsx(exports.AutoSaveStatusContext.Provider, Object.assign({ value: value }, { children: children }), void 0);
-}
-exports.AutoSaveStatusProvider = AutoSaveStatusProvider;

package/dist/AutoSaveStatus/index.d.ts

@@ -1,2 +0,0 @@
-export { AutoSaveStatus, AutoSaveStatusContext, AutoSaveStatusProvider } from "./AutoSaveStatusProvider";
-export { useAutoSaveStatus } from "./useAutoSaveStatus";

package/dist/AutoSaveStatus/index.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAutoSaveStatus = exports.AutoSaveStatusProvider = exports.AutoSaveStatusContext = exports.AutoSaveStatus = void 0;
-var AutoSaveStatusProvider_1 = require("./AutoSaveStatusProvider");
-Object.defineProperty(exports, "AutoSaveStatus", { enumerable: true, get: function () { return AutoSaveStatusProvider_1.AutoSaveStatus; } });
-Object.defineProperty(exports, "AutoSaveStatusContext", { enumerable: true, get: function () { return AutoSaveStatusProvider_1.AutoSaveStatusContext; } });
-Object.defineProperty(exports, "AutoSaveStatusProvider", { enumerable: true, get: function () { return AutoSaveStatusProvider_1.AutoSaveStatusProvider; } });
-var useAutoSaveStatus_1 = require("./useAutoSaveStatus");
-Object.defineProperty(exports, "useAutoSaveStatus", { enumerable: true, get: function () { return useAutoSaveStatus_1.useAutoSaveStatus; } });

package/dist/AutoSaveStatus/useAutoSaveStatus.d.ts

@@ -1 +0,0 @@
-export declare function useAutoSaveStatus(): import("./AutoSaveStatusProvider").AutoSaveStatusContextType;

package/dist/AutoSaveStatus/useAutoSaveStatus.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAutoSaveStatus = void 0;
-const react_1 = require("react");
-const AutoSaveStatusProvider_1 = require("./AutoSaveStatusProvider");
-function useAutoSaveStatus() {
-    return react_1.useContext(AutoSaveStatusProvider_1.AutoSaveStatusContext);
-}
-exports.useAutoSaveStatus = useAutoSaveStatus;

package/dist/AutoSaveStatus/useAutoSaveStatus.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/AutoSaveStatus/useAutoSaveStatus.test.js

@@ -1,152 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_hooks_1 = require("@testing-library/react-hooks");
-const AutoSaveStatusProvider_1 = require("./AutoSaveStatusProvider");
-const useAutoSaveStatus_1 = require("./useAutoSaveStatus");
-describe(useAutoSaveStatus_1.useAutoSaveStatus, () => {
-    /** The internal setTimeout running after tests is spamming the console, so cancel them all here */
-    afterEach(() => {
-        jest.clearAllTimers();
-    });
-    it("renders without a provider", () => {
-        const { result } = react_hooks_1.renderHook(() => useAutoSaveStatus_1.useAutoSaveStatus());
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.IDLE);
-    });
-    it("renders with a provider", () => {
-        const { result } = react_hooks_1.renderHook(() => useAutoSaveStatus_1.useAutoSaveStatus(), {
-            wrapper: ({ children }) => jsx_runtime_1.jsx(AutoSaveStatusProvider_1.AutoSaveStatusProvider, { children: children }, void 0),
-        });
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.IDLE);
-    });
-    it("indicates when something is in-flight", () => {
-        const { result } = react_hooks_1.renderHook(() => useAutoSaveStatus_1.useAutoSaveStatus(), {
-            wrapper: ({ children }) => jsx_runtime_1.jsx(AutoSaveStatusProvider_1.AutoSaveStatusProvider, { children: children }, void 0),
-        });
-        react_hooks_1.act(() => result.current.triggerAutoSave());
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.SAVING);
-    });
-    it("indicates when a request has settled", () => {
-        const { result } = react_hooks_1.renderHook(() => useAutoSaveStatus_1.useAutoSaveStatus(), {
-            wrapper: ({ children }) => jsx_runtime_1.jsx(AutoSaveStatusProvider_1.AutoSaveStatusProvider, { children: children }, void 0),
-        });
-        react_hooks_1.act(() => result.current.triggerAutoSave());
-        react_hooks_1.act(() => result.current.resolveAutoSave());
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.DONE);
-    });
-    it("indicates when an error happened", () => {
-        const { result } = react_hooks_1.renderHook(() => useAutoSaveStatus_1.useAutoSaveStatus(), {
-            wrapper: ({ children }) => jsx_runtime_1.jsx(AutoSaveStatusProvider_1.AutoSaveStatusProvider, { children: children }, void 0),
-        });
-        react_hooks_1.act(() => result.current.triggerAutoSave());
-        react_hooks_1.act(() => result.current.resolveAutoSave(new Error("Some error")));
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.ERROR);
-        expect(result.current.errors.length).toBe(1);
-    });
-    it("resets status to Idle when told to", () => {
-        const { result } = react_hooks_1.renderHook(() => useAutoSaveStatus_1.useAutoSaveStatus(), {
-            wrapper: ({ children }) => jsx_runtime_1.jsx(AutoSaveStatusProvider_1.AutoSaveStatusProvider, { children: children }, void 0),
-        });
-        react_hooks_1.act(() => result.current.triggerAutoSave());
-        react_hooks_1.act(() => result.current.resolveAutoSave());
-        react_hooks_1.act(() => result.current.resetStatus());
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.IDLE);
-    });
-    it("status goes through the full lifecycle when passed a reset timeout", async () => {
-        // Given a timeout has been passed to `useAutoSave()`
-        const { result } = react_hooks_1.renderHook(() => useAutoSaveStatus_1.useAutoSaveStatus(), {
-            wrapper: ({ children }) => jsx_runtime_1.jsx(AutoSaveStatusProvider_1.AutoSaveStatusProvider, Object.assign({ resetToIdleTimeout: 1000 }, { children: children }), void 0),
-        });
-        // When we trigger a save
-        react_hooks_1.act(() => result.current.triggerAutoSave());
-        // Then status is Saving
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.SAVING);
-        // And when we trigger a resolution
-        react_hooks_1.act(() => result.current.resolveAutoSave());
-        // Then status is Done
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.DONE);
-        // But when the timer runs out
-        react_hooks_1.act(() => {
-            jest.runOnlyPendingTimers();
-        });
-        // Then the status is reset to Idle
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.IDLE);
-    });
-    it("clears errors on reset status", () => {
-        const { result } = react_hooks_1.renderHook(() => useAutoSaveStatus_1.useAutoSaveStatus(), {
-            wrapper: ({ children }) => jsx_runtime_1.jsx(AutoSaveStatusProvider_1.AutoSaveStatusProvider, { children: children }, void 0),
-        });
-        react_hooks_1.act(() => result.current.triggerAutoSave());
-        react_hooks_1.act(() => result.current.resolveAutoSave(new Error("some error")));
-        expect(result.current.errors.length).toBe(1);
-        react_hooks_1.act(() => result.current.resetStatus());
-        expect(result.current.errors.length).toBe(0);
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.IDLE);
-    });
-    it("does not automatically invoke reset timeout if there are errors", () => {
-        // Given a timeout has been passed to `useAutoSave()`
-        const { result } = react_hooks_1.renderHook(() => useAutoSaveStatus_1.useAutoSaveStatus(), {
-            wrapper: ({ children }) => jsx_runtime_1.jsx(AutoSaveStatusProvider_1.AutoSaveStatusProvider, { children: children }, void 0),
-        });
-        react_hooks_1.act(() => result.current.triggerAutoSave());
-        react_hooks_1.act(() => result.current.resolveAutoSave(new Error("Some error")));
-        react_hooks_1.act(() => {
-            jest.runOnlyPendingTimers();
-        });
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.ERROR);
-        expect(result.current.errors.length).toBe(1);
-    });
-    it("does allow manual resetting even if there are errors", () => {
-        // Given a timeout has been passed to `useAutoSave()`
-        const { result } = react_hooks_1.renderHook(() => useAutoSaveStatus_1.useAutoSaveStatus(), {
-            wrapper: ({ children }) => jsx_runtime_1.jsx(AutoSaveStatusProvider_1.AutoSaveStatusProvider, { children: children }, void 0),
-        });
-        react_hooks_1.act(() => result.current.triggerAutoSave());
-        react_hooks_1.act(() => result.current.resolveAutoSave(new Error("Some error")));
-        react_hooks_1.act(() => {
-            jest.runOnlyPendingTimers();
-        });
-        react_hooks_1.act(() => result.current.resetStatus());
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.IDLE);
-        expect(result.current.errors.length).toBe(0);
-    });
-    it("handles multiple in-flight requests", () => {
-        const { result } = react_hooks_1.renderHook(() => useAutoSaveStatus_1.useAutoSaveStatus(), {
-            wrapper: ({ children }) => jsx_runtime_1.jsx(AutoSaveStatusProvider_1.AutoSaveStatusProvider, { children: children }, void 0),
-        });
-        // When we trigger 2 AutoSaves and only resolve 1
-        react_hooks_1.act(() => result.current.triggerAutoSave());
-        react_hooks_1.act(() => result.current.triggerAutoSave());
-        react_hooks_1.act(() => result.current.resolveAutoSave());
-        // We expect something to still be in-flight
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.SAVING);
-        // And when we resolve the final one
-        react_hooks_1.act(() => result.current.resolveAutoSave());
-        // We expect it to finally settle
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.DONE);
-    });
-    it("clears errors when a new save is triggered", () => {
-        const { result } = react_hooks_1.renderHook(() => useAutoSaveStatus_1.useAutoSaveStatus(), {
-            wrapper: ({ children }) => jsx_runtime_1.jsx(AutoSaveStatusProvider_1.AutoSaveStatusProvider, { children: children }, void 0),
-        });
-        react_hooks_1.act(() => result.current.triggerAutoSave());
-        react_hooks_1.act(() => result.current.resolveAutoSave(new Error("some error")));
-        react_hooks_1.act(() => result.current.triggerAutoSave());
-        expect(result.current.errors.length).toBe(0);
-    });
-    it("handles calling resolve too much", () => {
-        const { result } = react_hooks_1.renderHook(() => useAutoSaveStatus_1.useAutoSaveStatus(), {
-            wrapper: ({ children }) => jsx_runtime_1.jsx(AutoSaveStatusProvider_1.AutoSaveStatusProvider, { children: children }, void 0),
-        });
-        // When save hasn't been invoked yet
-        react_hooks_1.act(() => result.current.resolveAutoSave());
-        // Then we effectively didn't run
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.IDLE);
-        // And when 1 save has triggered, and we resolve too much
-        react_hooks_1.act(() => result.current.triggerAutoSave());
-        react_hooks_1.act(() => result.current.resolveAutoSave());
-        react_hooks_1.act(() => result.current.resolveAutoSave());
-        // Then we expect it to be happily "Done"
-        expect(result.current.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.DONE);
-    });
-});