fix: Bump form-state. (#1008)

Co-authored-by: Stephen Haberman <[email protected]>

.storybook/preview.tsx

@@ -49,7 +49,7 @@ const preview: Preview = {
     },
   ],
 
-  tags: ["autodocs"]
+  tags: ["autodocs"],
 };
 
 export default preview;

package.json

@@ -19,7 +19,7 @@
   },
   "scripts": {
     "start": "yarn storybook",
-    "build": "yarn copy && ttsc",
+    "build": "yarn copy && tspc",
     "build:truss": "truss",
     "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook build",
     "test": "jest --maxWorkers 4",
@@ -33,7 +33,7 @@
     "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md,mdx}\""
   },
   "dependencies": {
-    "@homebound/form-state": "^2.20.1",
+    "@homebound/form-state": "^2.25.2",
     "@internationalized/number": "^3.0.3",
     "@popperjs/core": "^2.11.6",
     "@react-aria/utils": "^3.18.0",
@@ -43,7 +43,7 @@
     "fast-deep-equal": "^3.1.3",
     "framer-motion": "^9.0.4",
     "memoize-one": "^5.2.1",
-    "mobx-utils": "^6.0.8",
+    "mobx-utils": "^6.1.0",
     "react-aria": "^3.26.0",
     "react-day-picker": "8.0.7",
     "react-popper": "^2.3.0",
@@ -74,8 +74,8 @@
     "@emotion/jest": "^11.10.5",
     "@emotion/react": "^11.10.6",
     "@homebound/eslint-config": "^1.10.2",
-    "@homebound/rtl-react-router-utils": "1.0.3",
-    "@homebound/rtl-utils": "^2.65.0",
+    "@homebound/rtl-react-router-utils": "1.2.0",
+    "@homebound/rtl-utils": "^2.66.2",
     "@homebound/truss": "^1.136.0",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",
@@ -90,14 +90,14 @@
     "@storybook/test": "^8.3.5",
     "@storybook/theming": "^8.3.5",
     "@storybook/types": "^8.3.5",
-    "@testing-library/jest-dom": "^6.1.2",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.0.1",
     "@tsconfig/recommended": "^1.0.2",
     "@types/dompurify": "^2.2.3",
     "@types/jest": "^29.4.0",
-    "@types/react": "^18.0.28",
+    "@types/react": "^18.3.11",
     "@types/react-beautiful-dnd": "^13.1.3",
-    "@types/react-dom": "^18.0.11",
+    "@types/react-dom": "^18.3.1",
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.3.2",
     "array-move": "^4.0.0",
@@ -107,23 +107,22 @@
     "eslint-plugin-storybook": "^0.9.0",
     "husky": "^5.1.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.4.3",
+    "jest": "^29.7.0",
     "jest-chain": "^1.1.6",
-    "jest-environment-jsdom": "^29.4.3",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",
-    "mobx": "^6.10.2",
-    "mobx-react": "^9.0.1",
+    "mobx": "^6.13.5",
+    "mobx-react": "^9.1.1",
     "prettier": "^3.3.3",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "semantic-release": "^20.1.0",
     "storybook": "^8.3.5",
-    "ts-jest": "^29.0.5",
-    "ts-node": "^10.9.1",
-    "tslib": "^2.1.0",
-    "ttypescript": "^1.5.15",
-    "typescript": "^4.9.5",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
+    "ts-patch": "^3.2.1",
+    "typescript": "5.5.4",
     "typescript-transform-paths": "^3.5.1",
     "vite": "^5.4.9",
     "vite-tsconfig-paths": "^5.0.1",

src/components/Filters/Filters.stories.tsx

@@ -126,7 +126,7 @@ function TestFilterPage({ vertical = false, numberOfInlineFilters = 4 }) {
       options: safeEntries(stages),
       label: "Stage",
       // Getting odd types back from safeEntries, can be a `number | [number | Stage] | () => some iterator... soo kind of hacky here.
-      getOptionValue: (o) => (typeof o === "object" ? o[1] : Stage.StageOne),
+      getOptionValue: (o) => (typeof o === "object" ? o[1] : Stage.StageOne) as any,
       getOptionLabel: (o) => (typeof o === "object" ? (o[1] === Stage.StageOne ? "One" : "Two") : Stage.StageOne),
     });
     const status = multiFilter({

src/components/Stepper.test.tsx

@@ -2,7 +2,7 @@ import { Step, Stepper } from "src/components/Stepper";
 import { click, render } from "src/utils/rtl";
 import { zeroTo } from "src/utils/sb";
 
-describe(Stepper, () => {
+describe("Stepper", () => {
   it("renders and invokes onChange", async () => {
     const onChange = jest.fn();
     // Given the stepper with 3 steps. The first disabled and complete, the second incomplete, and the third in error state.

src/components/SuperDrawer/useSuperDrawer.test.tsx

@@ -39,7 +39,7 @@ describe("useSuperDrawer", () => {
     const canCloseDrawerCheck = jest.fn(() => true);
 
     // Given the useSuperDrawer hook
-    const hook = renderHook(useSuperDrawer, { wrapper }).result.current;
+    const hook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
     // And a opened SuperDrawer
     act(() => hook.openInDrawer({ content: "content" }));
 
@@ -55,8 +55,8 @@ describe("useSuperDrawer", () => {
 
   it("should not add canCloseDrawerCheck when SuperDrawer is closed", () => {
     // Given the useSuperDrawer hook
-    const superDrawerHook = renderHook(useSuperDrawer, { wrapper }).result.current;
-    const beamHook = renderHook(() => useBeamContext(), { wrapper }).result.current;
+    const superDrawerHook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
+    const beamHook = renderHook(() => useBeamContext(), { wrapper: wrapper as any }).result.current;
 
     // When adding a canCloseDrawerCheck
     act(() => superDrawerHook.addCanCloseDrawerCheck(() => true));
@@ -69,7 +69,7 @@ describe("useSuperDrawer", () => {
     const canCloseDrawerDetailCheck = jest.fn(() => true);
 
     // Given the useSuperDrawer hook
-    const hook = renderHook(useSuperDrawer, { wrapper }).result.current;
+    const hook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
     // And a opened SuperDrawer with a detail content
     act(() => {
       hook.openInDrawer({ content: "content" });
@@ -88,8 +88,8 @@ describe("useSuperDrawer", () => {
 
   it("should not add canCloseDrawerCheckDetail when SuperDrawer details is closed", () => {
     // Given the useSuperDrawer and beamContent hook
-    const superDrawerHook = renderHook(useSuperDrawer, { wrapper }).result.current;
-    const beamHook = renderHook(() => useBeamContext(), { wrapper }).result.current;
+    const superDrawerHook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
+    const beamHook = renderHook(() => useBeamContext(), { wrapper: wrapper as any }).result.current;
     // And a opened SuperDrawer with no detail content
     act(() => {
       superDrawerHook.openInDrawer({ content: "content" });
@@ -104,7 +104,7 @@ describe("useSuperDrawer", () => {
 
   it("should show ConfirmCloseModal when a canCloseDrawerCheck fails", async () => {
     // Given a useSuperDrawer and BeamContext hook
-    const hook = renderHook(useSuperDrawer, { wrapper }).result.current;
+    const hook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
     // And a opened SuperDrawer
     act(() => hook.openInDrawer({ content: "content" }));
 
@@ -117,7 +117,7 @@ describe("useSuperDrawer", () => {
 
   it("should show ConfirmCloseModal when a canCloseDrawerDetailCheck fails", async () => {
     // Given a useSuperDrawer and BeamContext hook
-    const hook = renderHook(useSuperDrawer, { wrapper }).result.current;
+    const hook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
     // And a opened SuperDrawer
     act(() => {
       hook.openInDrawer({ content: "content" });
@@ -135,7 +135,7 @@ describe("useSuperDrawer", () => {
     const onClose = jest.fn();
 
     // Given the useSuperDrawer hook
-    const hook = renderHook(useSuperDrawer, { wrapper }).result.current;
+    const hook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
 
     // When the drawer is opened and closed
     act(() => hook.openInDrawer({ content: "content", onClose }));
@@ -149,7 +149,7 @@ describe("useSuperDrawer", () => {
 
   it("should not throw when attempting to closeDrawer with an empty content stack", () => {
     // Given a useSuperDrawer and BeamContext hook
-    const hook = renderHook(useSuperDrawer, { wrapper }).result.current;
+    const hook = renderHook(useSuperDrawer, { wrapper: wrapper as any }).result.current;
     // And a closed SuperDrawer
     // When we call onClose
     // Then we do not expect to have an error thrown

src/components/Table/utils/RowStates.ts

@@ -93,7 +93,7 @@ export class RowStates<R extends Kinded> {
     this.header.children = [this.keptGroupRow, ...this.topRows];
 
     // Then mark any remaining as removed
-    for (const state of maybeKept) state.markRemoved();
+    for (const state of maybeKept) (state as any).markRemoved();
 
     // After the first load of real data, we detach collapse state, to respect
     // any incoming initCollapsed.

src/components/Tabs.stories.tsx

@@ -104,7 +104,7 @@ export function TabsAsLinks() {
   return <TestComponent />;
 }
 // Use `/` as the root path in order to ensure the Tab's component provides a <Route /> wrapper for matching.
-TabsAsLinks.decorators = [withRouter("/ce:2", "/")];
+TabsAsLinks.decorators = [withRouter("/ce:2")];
 
 function TestComponent() {
   const location = useLocation();

src/components/Tabs.test.tsx

@@ -110,7 +110,7 @@ describe("TabsWithContent", () => {
   it("renders tabs as links", async () => {
     const router = withRouter("/tab1");
     // Given tabs with `path` values
-    const testTabs: RouteTabWithContent<string>[] = [
+    const testTabs: RouteTabWithContent[] = [
       { name: "Tab A", path: "/tab1", href: "/tab1", render: () => <TestTabContent content="Tab 1 Content" /> },
       { name: "Tab B", path: "/tab2", href: "/tab2", render: () => <TestTabContent content="Tab 2 Content" /> },
     ];
@@ -125,9 +125,9 @@ describe("TabsWithContent", () => {
 
   it("can match tab based on multiple paths", async () => {
     // Given a route
-    const router = withRouter("/ce:1", "/:ceId");
+    const router = withRouter("/ce:1");
     // And a tab that supports multiple routes
-    const testTabs: RouteTabWithContent<string>[] = [
+    const testTabs: RouteTabWithContent[] = [
       {
         name: "Tab A",
         path: "/:ceId/line-items",
@@ -149,8 +149,8 @@ describe("TabsWithContent", () => {
 
   it("can navigate between tabs when rendered as links", async () => {
     // Given Route-able tabs, rendered at the first tab's route
-    const router = withRouter("/tab1", "/");
-    const testTabs: RouteTabWithContent<string>[] = [
+    const router = withRouter("/tab1");
+    const testTabs: RouteTabWithContent[] = [
       { name: "Tab A", path: "/tab1", href: "/tab1", render: () => <TestTabContent content="Tab 1 Content" /> },
       { name: "Tab B", path: "/tab2", href: "/tab2", render: () => <TestTabContent content="Tab 2 Content" /> },
     ];
@@ -169,8 +169,8 @@ describe("TabsWithContent", () => {
 
   it("captures path parameters within Route context", async () => {
     // Given Route-able tabs with path parameters
-    const router = withRouter("/ce:1/overview", "/");
-    const testTabs: RouteTabWithContent<string>[] = [
+    const router = withRouter("/ce:1/overview");
+    const testTabs: RouteTabWithContent[] = [
       { name: "Tab A", path: "/:ceId/overview", href: "/ce:1/overview", render: () => <TestRouteTab /> },
       {
         name: "Tab B",
@@ -192,13 +192,13 @@ describe("TabsWithContent", () => {
 
   it("renders a disabled route tab as a div", async () => {
     // Give a disabled tab (must include two non-disabled tabs to have tab-list show).
-    const testTabs: RouteTabWithContent<string>[] = [
+    const testTabs: RouteTabWithContent[] = [
       { name: "Tab A", path: "/a", href: "/a", render: () => <TestRouteTab /> },
       { name: "Tab B", path: "/b", href: "/b", render: () => <TestRouteTab /> },
       { name: "Tab C", path: "/c", href: "/c", render: () => <TestRouteTab />, disabled: true },
     ];
 
-    const r = await render(<TabsWithContent tabs={testTabs} />, withRouter("/a", ""));
+    const r = await render(<TabsWithContent tabs={testTabs} />, withRouter("/a"));
 
     // Then the disabled tab should be rendered as a div
     expect(r.tabs_tabC.tagName).toBe("DIV");

src/components/index.ts

@@ -21,7 +21,7 @@ export * from "./CssReset";
 export * from "./DnDGrid";
 export * from "./Filters";
 export * from "./Grid";
-export { HbLoadingSpinner, HbSpinnerProvider, HB_QUIPS_FLAVOR, HB_QUIPS_MISSION } from "./HbLoadingSpinner";
+export { HB_QUIPS_FLAVOR, HB_QUIPS_MISSION, HbLoadingSpinner, HbSpinnerProvider } from "./HbLoadingSpinner";
 export * from "./HelperText";
 export * from "./Icon";
 export * from "./IconButton";

src/forms/BoundSelectAndTextField.stories.tsx

@@ -10,7 +10,7 @@ export default {
 } as Meta;
 
 export function Example() {
-  const formState = useFormState({ config, init: { type: ScheduleTypes.Task } });
+  const formState = useFormState({ config, init: { input: { type: ScheduleTypes.Task } } });
   const types = [
     { id: ScheduleTypes.Task, name: "Task" },
     { id: ScheduleTypes.Milestone, name: "Milestone" },

src/forms/BoundTreeSelectField.test.tsx

@@ -6,7 +6,7 @@ import { NestedOption } from "src/inputs";
 import { HasIdAndName } from "src/types";
 import { blur, click, focus, render } from "src/utils/rtl";
 
-describe(BoundTreeSelectField, () => {
+describe("BoundTreeSelectField", () => {
   it("shows the current value and label", async () => {
     const author = createObjectState(formConfig, { favoriteGenres: ["g:4"] });
     const r = await render(<BoundTreeSelectField field={author.favoriteGenres} options={genres} />);

src/forms/FormStateApp.tsx

@@ -48,7 +48,7 @@ export function FormStateApp() {
 
   const formState = useFormState({
     config: formConfig,
-    init: queryResponse,
+    init: { input: queryResponse },
     addRules(state) {
       state.lastName.rules.push(() => {
         return state.firstName.value === state.lastName.value ? "Last name cannot equal first name" : undefined;

src/forms/SuperDrawerApp.stories.tsx

@@ -46,7 +46,7 @@ export function SuperDrawerApp() {
 const initFormValue: AuthorInput = {};
 function SuperDrawerForm() {
   const { closeDrawer, addCanCloseDrawerCheck } = useSuperDrawer();
-  const formState = useFormState({ config: formConfig, init: initFormValue });
+  const formState = useFormState({ config: formConfig, init: { input: initFormValue } });
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => addCanCloseDrawerCheck(() => !formState.dirty), []);

src/inputs/DateFields/utils.ts

@@ -1,4 +1,4 @@
-import { format as dateFnsFormat, isDate, parse as dateFnsParse } from "date-fns";
+import { format as dateFnsFormat, parse as dateFnsParse, isDate } from "date-fns";
 import { DateRange } from "src/types";
 
 export type DateFieldModeTuple = readonly ["range", DateRange] | readonly ["single", Date];

src/inputs/NumberField.tsx

@@ -121,7 +121,7 @@ export function NumberField(props: NumberFieldProps) {
                   ? { style: "unit", unit: "day", unitDisplay: "long" as const, maximumFractionDigits: 0 }
                   : {};
 
-    return { ...defaultFormatOptions, ...typeFormat };
+    return { ...defaultFormatOptions, ...typeFormat } as any;
   }, [type, numberFormatOptions, defaultFormatOptions, numFractionDigits]);
   const numberParser = useMemo(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);
 

src/utils/rtl.tsx

@@ -1,19 +1,19 @@
 import { newLocation as _newLocation, withRouter as _withRouter } from "@homebound/rtl-react-router-utils";
 import {
-  allowAndWaitForAsyncBehavior,
   blur as _blur,
   change as _change,
   click as _click,
   clickAndWait as _clickAndWait,
   focus as _focus,
   getOptions as _getOptions,
   input as _input,
-  render as rtlRender,
-  RenderResult,
   select as _select,
   type as _type,
   typeAndWait as _typeAndWait,
   wait as _wait,
+  allowAndWaitForAsyncBehavior,
+  RenderResult,
+  render as rtlRender,
   Wrapper,
 } from "@homebound/rtl-utils";
 import { prettyDOM } from "@testing-library/react";
@@ -26,14 +26,15 @@ export {
   _click as click,
   _clickAndWait as clickAndWait,
   _focus as focus,
-  _getOptions as rtlUtilGetOptions,
   _input as input,
+  _newLocation as newLocation,
+  _getOptions as rtlUtilGetOptions,
   _select as rtlUtilSelect,
   _type as type,
   _typeAndWait as typeAndWait,
   _wait as wait,
+  _withRouter as withRouter,
 };
-export { _newLocation as newLocation, _withRouter as withRouter };
 
 interface RenderOpts {
   at?: { url: string; route?: string };
@@ -64,7 +65,7 @@ export function render(
     wrappers = [
       ...otherWrappers,
       ...(!omitBeamContext ? [withBeamRTL] : []),
-      ...(at ? [_withRouter(at.url, at.route)] : [_withRouter()]),
+      ...(at ? [_withRouter(at.url)] : [_withRouter()]),
     ];
   } else {
     wrappers = [withBeamRTL];

src/utils/sb.tsx

@@ -4,8 +4,8 @@ import { BeamProvider } from "src/components";
 import { Css, Properties } from "src/Css";
 import { withRouter as rtlWithRouter } from "src/utils/rtl";
 
-export function withRouter(url?: string, path?: string): Decorator {
-  return (Story: () => JSX.Element) => rtlWithRouter(url, path).wrap(<Story />);
+export function withRouter(url?: string): Decorator {
+  return (Story: () => JSX.Element) => rtlWithRouter(url).wrap(<Story />);
 }
 
 /* Models our currently used parameters. */