Dependencies updated

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
       files: ["**/*.test.ts"],
       rules: {
         "sonarjs/no-duplicate-string": "off",
+        "@typescript-eslint/no-unsafe-argument": "off",
         "@typescript-eslint/no-unsafe-assignment": "off",
         "@typescript-eslint/no-unsafe-member-access": "off",
         "@typescript-eslint/no-unsafe-return": "off",

lerna.json

@@ -2,8 +2,6 @@
   "version": "999.0.0",
   "npmClient": "yarn",
   "packages": [
-    "demo",
-    "examples/*",
     "packages/*",
     "stories"
   ],

package.json

@@ -29,37 +29,39 @@
     "setversion": "lerna version -y --no-push --no-git-tag-version",
     "publish:storybook": "yarn --cwd stories run publish",
     "publish:docs": "typedoc packages --out dist/docs --hideGenerator --exclude '**/node_modules' --ignoreCompilerErrors",
-    "publish": "rimraf dist && yarn run publish:storybook && yarn run publish:docs",
+    "publish": "rimraf dist && yarn run publish:storybook",
     "cleanbuild": "lerna run clean && lerna run build",
     "build": "lerna run build",
     "test": "jest",
     "storybook": "yarn --cwd stories start",
     "lint": "eslint \"./{packages,examples}/**/*.{ts,tsx}\" --cache",
     "validate": "yarn run lint && yarn run cleanbuild && yarn run test && yarn run publish",
     "lernaupdate": "lernaupdate",
-    "deps:outdated": "yarn outdated & lerna exec --stream --no-bail -- \"copy package.json package.bak && findstr /v \"@frui.ts/\" package.bak > package.json & yarn install & npx yarn-deduplicate yarn.lock & yarn outdated & move /Y package.bak package.json\""
+    "deps:outdated": "yarn outdated & lerna exec --stream --no-bail -- \"copy package.json package.bak && findstr /v \"@frui.ts/\" package.bak > package.json & yarn install & npx yarn-deduplicate yarn.lock & yarn outdated & move /Y package.bak package.json\"",
+    "clean-lock": "lerna exec lerna exec \"npx yarn-deduplicate yarn.lock\""
   },
   "devDependencies": {
-    "@emanprague/eslint-config": "^2.1.0",
-    "@types/jest": "^26.0.19",
-    "@types/prettier": "^2.1.5",
-    "@types/rimraf": "^3.0.0",
-    "core-js": "^3.11.1",
+    "@emanprague/eslint-config": "^2.4.0",
+    "@types/jest": "^27.0.2",
+    "@types/node": "^16.11.6",
+    "@types/prettier": "^2.4.1",
+    "@types/rimraf": "^3.0.2",
+    "core-js": "^3.19.0",
     "eslint": "^7.15.0",
     "install-peers-cli": "^2.2.0",
-    "jest": "26.6.0",
-    "jest-mock-extended": "^1.0.10",
-    "lerna": "^3.22.1",
-    "lerna-update-wizard": "^0.17.8",
-    "prettier": "^2.2.1",
+    "jest": "27.3.1",
+    "jest-mock-extended": "^2.0.4",
+    "lerna": "^4.0.0",
+    "lerna-update-wizard": "^1.1.0",
+    "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
-    "ts-jest": "^26.4.4",
-    "ts-node": "^9.1.1",
-    "typedoc": "^0.19.2",
-    "typescript": "^4.1.3"
+    "ts-jest": "^27.0.7",
+    "ts-node": "^10.4.0",
+    "typedoc": "^0.22.7",
+    "typescript": "^4.4.4"
   },
   "peerDependencies": {
     "mobx": "^4.15.7",
-    "react": "^16.13.0"
+    "react": "^17.0.2"
   }
 }

packages/apiclient/__tests__/restRequestBuilder.test.ts

@@ -1,5 +1,6 @@
 import { mock } from "jest-mock-extended";
-import { appendUrl, IApiConnector, RestRequestBuilder } from "../src";
+import type { IApiConnector } from "../src";
+import { appendUrl, RestRequestBuilder } from "../src";
 
 describe("appendUrl", () => {
   it("returns original url", () => {

packages/apiclient/src/fetchApiConnector.ts

@@ -1,6 +1,6 @@
 import { bind } from "@frui.ts/helpers";
 import FetchError from "./fetchError";
-import { IApiConnector } from "./types";
+import type { IApiConnector } from "./types";
 
 const jsonContentType = "application/json";
 export type Middleware = (response: Response) => Response | PromiseLike<Response>;
@@ -12,7 +12,7 @@ export function appendJsonHeader(params?: RequestInit): RequestInit {
   return {
     ...params,
     headers: {
-      ...(params || {}).headers,
+      ...(params ?? {}).headers,
       "Content-Type": jsonContentType,
     },
   };

packages/apiclient/src/restRequestBuilder.ts

@@ -1,5 +1,6 @@
-import { stringify, StringifyOptions } from "query-string";
-import { IApiConnector } from "./types";
+import type { StringifiableRecord, StringifyOptions } from "query-string";
+import { stringify } from "query-string";
+import type { IApiConnector } from "./types";
 
 const cleanupRegex = /\/+$/g; // removes trailing slash
 
@@ -11,7 +12,7 @@ export function appendAcceptHeader(params: RequestInit | undefined, acceptConten
   return {
     ...params,
     headers: {
-      ...(params || {}).headers,
+      ...(params ?? {}).headers,
       Accept: acceptContentType,
     },
   };
@@ -60,13 +61,13 @@ export class RestRequestBuilder {
     return this;
   }
 
-  get<T>(queryParams?: any): Promise<T> {
+  get<T>(queryParams?: StringifiableRecord): Promise<T> {
     const requestUrl = this.appendQuery(this.urlValue, queryParams);
     const params = appendAcceptHeader(this.params, ContentTypes.json);
     return this.apiConnector.get(requestUrl, params).then(x => x.json() as Promise<T>);
   }
 
-  getRaw(queryParams?: any) {
+  getRaw(queryParams?: StringifiableRecord) {
     const requestUrl = this.appendQuery(this.urlValue, queryParams);
     return this.apiConnector.get(requestUrl, this.params);
   }
@@ -121,11 +122,11 @@ export class RestRequestBuilder {
     return this;
   }
 
-  getQueryString(query: any, queryStringOptions?: StringifyOptions) {
+  getQueryString(query: StringifiableRecord, queryStringOptions?: StringifyOptions) {
     return stringify(query, queryStringOptions ?? this.queryStringOptions ?? RestRequestBuilder.DefaultQueryStringOptions);
   }
 
-  appendQuery(url: string, query?: any, queryStringOptions?: StringifyOptions) {
+  appendQuery(url: string, query?: StringifiableRecord, queryStringOptions?: StringifyOptions) {
     if (!query) {
       return url;
     }

packages/bootstrap/package.json

@@ -35,18 +35,21 @@
     "build": "tsc"
   },
   "devDependencies": {
-    "@types/react": "^16.14.2"
+    "@types/react": "^17.0.33"
   },
   "dependencies": {
     "@frui.ts/helpers": "^999.0.0",
     "@frui.ts/validation": "^999.0.0",
     "@frui.ts/views": "^999.0.0",
-    "bootstrap": "^4.5.3",
+    "bootstrap": "^4.6.1",
     "mobx-react-lite": "^2.2.2",
-    "react-bootstrap": "^1.4.0"
+    "react-bootstrap": "^1.6.4"
   },
   "peerDependencies": {
     "mobx": "^4.0.0 || ^5.0.0",
-    "react": "^16.13.0"
+    "react": "^17.0.2"
+  },
+  "resolutions": {
+    "**/@types/react": "^17.0.33"
   }
 }

packages/bootstrap/src/controls/check.tsx

@@ -1,8 +1,10 @@
-import { BindingTarget, bound } from "@frui.ts/helpers";
-import { IBindingProps } from "@frui.ts/views";
+import type { BindingTarget } from "@frui.ts/helpers";
+import { bound } from "@frui.ts/helpers";
+import type { IBindingProps } from "@frui.ts/views";
 import React from "react";
-import { Form, FormCheckProps } from "react-bootstrap";
-import { CommonInputProps } from "./commonInputProps";
+import type { FormCheckProps } from "react-bootstrap";
+import { Form } from "react-bootstrap";
+import type { CommonInputProps } from "./commonInputProps";
 import { ValidationControlBase } from "./validationControlBase";
 
 export interface CheckProps extends FormCheckProps, CommonInputProps {
@@ -24,7 +26,7 @@ export class Check<TTarget extends BindingTarget> extends ValidationControlBase<
     // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
     const id = `${this.props.property}-${value}`;
 
-    const threeStateProps = threeState && { ref: (el: HTMLInputElement) => el && (el.indeterminate = this.value === null) };
+    const threeStateProps = threeState && { ref: (el?: HTMLInputElement) => el && (el.indeterminate = this.value === null) };
 
     return (
       <Form.Check

packages/bootstrap/src/controls/collectionCheck.tsx

@@ -1,10 +1,13 @@
-import { BindingProperty, BindingTarget, isSet } from "@frui.ts/helpers";
-import { getValue, IBindingProps, omitBindingProps } from "@frui.ts/views";
+import type { BindingProperty, BindingTarget } from "@frui.ts/helpers";
+import { isSet } from "@frui.ts/helpers";
+import type { IBindingProps } from "@frui.ts/views";
+import { getValue, omitBindingProps } from "@frui.ts/views";
 import { action, isArrayLike } from "mobx";
 import { observer } from "mobx-react-lite";
 import React from "react";
-import { Form, FormCheckProps } from "react-bootstrap";
-import { CommonInputProps } from "./commonInputProps";
+import type { FormCheckProps } from "react-bootstrap";
+import { Form } from "react-bootstrap";
+import type { CommonInputProps } from "./commonInputProps";
 
 type SetOrArrayInnerType<TTarget, TProperty extends keyof TTarget> = TTarget[TProperty] extends Set<infer TSetValue> | undefined
   ? TSetValue
@@ -13,7 +16,7 @@ type SetOrArrayInnerType<TTarget, TProperty extends keyof TTarget> = TTarget[TPr
   : never;
 
 export interface CollectionCheckProps<TTarget extends BindingTarget, TProperty extends BindingProperty<TTarget>>
-  extends Omit<FormCheckProps, "property">,
+  extends Omit<FormCheckProps, "property" | "value">,
     CommonInputProps,
     IBindingProps<TTarget, TProperty> {
   value: TProperty extends keyof TTarget ? SetOrArrayInnerType<TTarget, TProperty> : any;
@@ -22,9 +25,10 @@ export interface CollectionCheckProps<TTarget extends BindingTarget, TProperty e
 function useCollection<TTarget extends BindingTarget, TProperty extends BindingProperty<TTarget>>(
   props: CollectionCheckProps<TTarget, TProperty>
 ): [boolean, () => void] {
-  const collection = getValue(props.target, props.property) as unknown;
+  const { target, property } = props;
+  const collection = getValue(target, property) as unknown;
 
-  if (!collection) {
+  if (!collection || !target || !property) {
     throw new Error("The target value must be an array or a Set");
   }
 
@@ -38,7 +42,8 @@ function useCollection<TTarget extends BindingTarget, TProperty extends BindingP
       } else {
         collection.add(key);
       }
-      props.onValueChanged?.(key as any, props.property as TProperty, props.target as TTarget);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      props.onValueChanged?.(key as any, property, target);
     };
     return [checked, action(toggle)];
   } else if (isArrayLike(collection)) {
@@ -50,7 +55,8 @@ function useCollection<TTarget extends BindingTarget, TProperty extends BindingP
       } else {
         collection.push(key);
       }
-      props.onValueChanged?.(key as any, props.property as TProperty, props.target as TTarget);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      props.onValueChanged?.(key as any, property, target);
     };
     return [checked, action(toggle)];
   } else {

packages/bootstrap/src/controls/dropdownSelect.tsx

@@ -1,9 +1,11 @@
-import { BindingProperty, BindingTarget } from "@frui.ts/helpers";
-import { IBindingProps, useBinding } from "@frui.ts/views";
+import type { BindingProperty, BindingTarget } from "@frui.ts/helpers";
+import type { IBindingProps } from "@frui.ts/views";
+import { useBinding } from "@frui.ts/views";
 import { observer } from "mobx-react-lite";
 import React from "react";
-import { ButtonProps as ButtonBootstrapProps, Dropdown as DropdownBootstrap } from "react-bootstrap";
-import { DropdownToggleProps as DropdownToggleBootstrapProps } from "react-bootstrap/DropdownToggle";
+import type { ButtonProps as ButtonBootstrapProps } from "react-bootstrap";
+import { Dropdown as DropdownBootstrap } from "react-bootstrap";
+import type { DropdownToggleProps as DropdownToggleBootstrapProps } from "react-bootstrap/DropdownToggle";
 import { Select } from "./select";
 
 interface DropdownBaseProps {
@@ -36,13 +38,13 @@ function DropdownSelectImpl<TTarget extends BindingTarget, TProperty extends Bin
   props: DropdownSelectProps<TTarget, TProperty, TItem>
 ) {
   const { mode, items, keyProperty, textProperty, onChanged } = props;
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const [value, setValue] = useBinding(props);
 
   const selectedItem = mode === "item" ? (value as TItem) : items.find(x => propertyValue(x, keyProperty) === value);
   const title = propertyValue(selectedItem, textProperty) as string;
 
   const onClickHandler = (item: TItem) => () => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     setValue(mode === "item" ? item : propertyValue(item, keyProperty));
     onChanged?.(item);
   };

packages/bootstrap/src/controls/input.tsx

@@ -1,6 +1,8 @@
-import { BindingTarget, bound } from "@frui.ts/helpers";
+import type { BindingTarget } from "@frui.ts/helpers";
+import { bound } from "@frui.ts/helpers";
 import React from "react";
-import { Form, FormControlProps } from "react-bootstrap";
+import type { FormControlProps } from "react-bootstrap";
+import { Form } from "react-bootstrap";
 import { ValidationControlBase } from "./validationControlBase";
 
 export interface InputProps {

packages/bootstrap/src/controls/select.tsx

@@ -1,6 +1,8 @@
-import { BindingTarget, bound } from "@frui.ts/helpers";
+import type { BindingTarget } from "@frui.ts/helpers";
+import { bound } from "@frui.ts/helpers";
 import React from "react";
-import { Form, FormControlProps } from "react-bootstrap";
+import type { FormControlProps } from "react-bootstrap";
+import { Form } from "react-bootstrap";
 import { ValidationControlBase } from "./validationControlBase";
 
 export interface SelectProps<TItem> {
@@ -33,17 +35,8 @@ export class Select<TTarget extends BindingTarget, TItem> extends ValidationCont
 
   @bound
   protected renderInner() {
-    const {
-      noValidation,
-      errorMessage,
-      items,
-      keyProperty,
-      textProperty,
-      mode,
-      allowEmpty,
-      emptyText,
-      ...otherProps
-    } = this.inheritedProps;
+    const { noValidation, errorMessage, items, keyProperty, textProperty, mode, allowEmpty, emptyText, ...otherProps } =
+      this.inheritedProps;
     const validationError = this.getValidationError();
 
     const options = items.map(x => (

packages/bootstrap/src/controls/validationControlBase.tsx

@@ -1,9 +1,10 @@
-import { BindingTarget, PropertyName } from "@frui.ts/helpers";
+import type { BindingTarget, PropertyName } from "@frui.ts/helpers";
 import { getValidationMessage } from "@frui.ts/validation";
-import { BindingComponent, ExcludeBindingProps, IBindingProps } from "@frui.ts/views";
+import type { ExcludeBindingProps, IBindingProps } from "@frui.ts/views";
+import { BindingComponent } from "@frui.ts/views";
 import { Observer } from "mobx-react-lite";
 import React from "react";
-import { CommonInputProps } from "./commonInputProps";
+import type { CommonInputProps } from "./commonInputProps";
 
 type TProps<TTarget, TOtherProps> = ExcludeBindingProps<CommonInputProps & TOtherProps> & IBindingProps<TTarget>;
 
@@ -35,7 +36,7 @@ export abstract class ValidationControlBase<TTarget extends BindingTarget, TOthe
       return errorMessage;
     }
 
-    const target = this.props.target as TTarget;
+    const target = this.props.target as TTarget | undefined;
     const property = this.props.property as PropertyName<TTarget>;
 
     if (target && property) {

packages/bootstrap/src/controls/validationError.tsx

@@ -1,4 +1,5 @@
-import { BindingTarget, bound } from "@frui.ts/helpers";
+import type { BindingTarget } from "@frui.ts/helpers";
+import { bound } from "@frui.ts/helpers";
 import React from "react";
 import { ValidationControlBase } from "./validationControlBase";