Update all deps

.github/workflows/push.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Test
         run: pnpm test
       - name: Coveralls
-        uses: coverallsapp/github-action@master
+        uses: coverallsapp/github-action@v2
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
       - name: Build docs

docs/src/App.tsx

@@ -1,73 +1,76 @@
-import React, { useCallback, useState } from 'react';
-import { Link, Route, Routes, useLocation } from 'react-router-dom';
-import { Main } from './Main';
-import { FirstSample } from './samples/first/FirstSample';
-import { ValidationSample } from './samples/validation-types/ValidationSample';
-import { AsyncValidationSample } from './samples/async/AsyncValidationSample';
-import { Arrow } from './icons/Arrow';
-import { useChangeEffect } from './hooks/useChangeEffect';
-import { PasswordRepeatForm } from './samples/password-repeat/PasswordRepeatForm';
+import React, { useCallback, useState } from "react";
+import { Link, Route, Routes, useLocation } from "react-router-dom";
+import { useChangeEffect } from "./hooks/useChangeEffect";
+import { Arrow } from "./icons/Arrow";
+import { Main } from "./Main";
+import { AsyncValidationSample } from "./samples/async/AsyncValidationSample";
+import { FirstSample } from "./samples/first/FirstSample";
+import { PasswordRepeatForm } from "./samples/password-repeat/PasswordRepeatForm";
+import { ValidationSample } from "./samples/validation-types/ValidationSample";
 
 type Sample = { pathname: string; label: string };
 const Samples: Sample[] = [
-    { pathname: '/', label: 'First sample' },
-    { pathname: '/validation/types', label: 'Validation types' },
-    { pathname: '/validation/async', label: 'Async validation' },
-    { pathname: '/validation/passwordRepeat', label: 'Password repetition' },
+  { pathname: "/", label: "First sample" },
+  { pathname: "/validation/types", label: "Validation types" },
+  { pathname: "/validation/async", label: "Async validation" },
+  { pathname: "/validation/passwordRepeat", label: "Password repetition" },
 ];
 
 export type SidebarProps = { open?: boolean; toggle: () => void };
 
 export const Sidebar: React.FC<SidebarProps> = ({ open, toggle }) => {
-    const location = useLocation();
+  const location = useLocation();
 
-    useChangeEffect(() => {
-        toggle();
-    }, [location.pathname, toggle]);
+  useChangeEffect(() => {
+    toggle();
+  }, [location.pathname, toggle]);
 
-    let sideBarFadeClass = undefined;
-    if (open !== undefined) {
-        sideBarFadeClass = open ? 'fade-in' : 'fade-out';
-    }
-    return (
-        <nav className={sideBarFadeClass}>
-            <header>
-                <strong>Navigation</strong>
-                <div onClick={toggle}>
-                    <Arrow direction="LEFT" />
-                </div>
-            </header>
-            <ul>
-                {Samples.map(({ pathname, label }: Sample) => {
-                    const activeClass = location.pathname === pathname ? ' active' : '';
-                    return (
-                        <li key={pathname}>
-                            <Link className={'nav-link' + activeClass} to={pathname}>
-                                {label}
-                            </Link>
-                        </li>
-                    );
-                })}
-            </ul>
-        </nav>
-    );
+  let sideBarFadeClass = undefined;
+  if (open !== undefined) {
+    sideBarFadeClass = open ? "fade-in" : "fade-out";
+  }
+  return (
+    <nav className={sideBarFadeClass}>
+      <header>
+        <strong>Navigation</strong>
+        <div onClick={toggle}>
+          <Arrow direction="LEFT" />
+        </div>
+      </header>
+      <ul>
+        {Samples.map(({ pathname, label }: Sample) => {
+          const activeClass = location.pathname === pathname ? " active" : "";
+          return (
+            <li key={pathname}>
+              <Link className={"nav-link" + activeClass} to={pathname}>
+                {label}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
 };
 
 export const App: React.FC = () => {
-    const [sideBarOpen, setSidebarOpen] = useState<boolean | undefined>();
-    const toggleSideBar = useCallback(() => setSidebarOpen((s) => !s), []);
+  const [sideBarOpen, setSidebarOpen] = useState<boolean | undefined>();
+  const toggleSideBar = useCallback(() => setSidebarOpen((s) => !s), []);
 
-    return (
-        <div className="app">
-            <Sidebar open={sideBarOpen} toggle={toggleSideBar} />
-            <Main toggleSideBar={toggleSideBar}>
-                <Routes>
-                    <Route path="/validation/types" element={<ValidationSample />} />
-                    <Route path="/validation/async" element={<AsyncValidationSample />} />
-                    <Route path="/validation/passwordRepeat" element={<PasswordRepeatForm />} />
-                    <Route path="*" element={<FirstSample />} />
-                </Routes>
-            </Main>
-        </div>
-    );
+  return (
+    <div className="app">
+      <Sidebar open={sideBarOpen} toggle={toggleSideBar} />
+      <Main toggleSideBar={toggleSideBar}>
+        <Routes>
+          <Route path="/validation/types" element={<ValidationSample />} />
+          <Route path="/validation/async" element={<AsyncValidationSample />} />
+          <Route
+            path="/validation/passwordRepeat"
+            element={<PasswordRepeatForm />}
+          />
+          <Route path="*" element={<FirstSample />} />
+        </Routes>
+      </Main>
+    </div>
+  );
 };

docs/src/Main.tsx

@@ -1,19 +1,29 @@
-import React from 'react';
+import React from "react";
 
-type FormContainerProps = { children: React.ReactNode; toggleSideBar: () => void };
+type FormContainerProps = {
+  children: React.ReactNode;
+  toggleSideBar: () => void;
+};
 
-export const Main: React.FC<FormContainerProps> = ({ children, toggleSideBar }) => (
-    <main>
-        <header>
-            <img
-                src={`${import.meta.env.BASE_URL}images/menu.svg`}
-                className="sidebar-toggle"
-                alt="menu"
-                onClick={toggleSideBar}
-            />
-            <img src={`${import.meta.env.BASE_URL}images/form-logo.svg`} className="logo" alt="logo" />
-            <h1>Welcome to morfi</h1>
-        </header>
-        <div className={'content'}>{children}</div>
-    </main>
+export const Main: React.FC<FormContainerProps> = ({
+  children,
+  toggleSideBar,
+}) => (
+  <main>
+    <header>
+      <img
+        src={`${import.meta.env.BASE_URL}images/menu.svg`}
+        className="sidebar-toggle"
+        alt="menu"
+        onClick={toggleSideBar}
+      />
+      <img
+        src={`${import.meta.env.BASE_URL}images/form-logo.svg`}
+        className="logo"
+        alt="logo"
+      />
+      <h1>Welcome to morfi</h1>
+    </header>
+    <div className={"content"}>{children}</div>
+  </main>
 );

docs/src/fields/Basic.tsx

@@ -1,51 +1,60 @@
-import React from 'react';
-import type { ErrorMessage } from 'morfi';
-import messages from '../../messages.json';
-import { Spinner } from '../icons/Spinner';
+import React from "react";
+import type { ErrorMessage } from "morfi";
+import messages from "../../messages.json";
+import { Spinner } from "../icons/Spinner";
 
 export const __ = (msgOrID: ErrorMessage): string => {
-    const id = typeof msgOrID === 'string' ? msgOrID : msgOrID.id;
-    const values = typeof msgOrID === 'string' ? undefined : msgOrID.values;
-    let result = (messages as Record<string, undefined | string>)[id];
-    if (result && values) {
-        result = Object.keys(values).reduce(
-            (red: string, key: string) => red.replace(`{${key}}`, String(values[key])),
-            result
-        );
-    }
-    return result!;
+  const id = typeof msgOrID === "string" ? msgOrID : msgOrID.id;
+  const values = typeof msgOrID === "string" ? undefined : msgOrID.values;
+  let result = (messages as Record<string, undefined | string>)[id];
+  if (result && values) {
+    result = Object.keys(values).reduce(
+      (red: string, key: string) =>
+        red.replace(`{${key}}`, String(values[key])),
+      result,
+    );
+  }
+  return result!;
 };
 
-export const Label = ({ label, required = false }: { label: string; required?: boolean }) => (
-    <label className="control-label">{label + (required ? ' *' : '')}</label>
-);
+export const Label = ({
+  label,
+  required = false,
+}: {
+  label: string;
+  required?: boolean;
+}) => <label className="control-label">{label + (required ? " *" : "")}</label>;
 
 export const DisplayError = ({ error }: { error: ErrorMessage }) => (
-    <span className="invalid-feedback">{__(error)}</span>
+  <span className="invalid-feedback">{__(error)}</span>
 );
 
 export const onActionWrap =
-    (cb?: (arg: any) => void, preventDefault = true): React.EventHandler<any> =>
-    (event) => {
-        if (preventDefault) {
-            event.preventDefault();
-        }
-        if (cb) {
-            cb(event.target.value);
-        }
-    };
+  (cb?: (arg: any) => void, preventDefault = true): React.EventHandler<any> =>
+  (event) => {
+    if (preventDefault) {
+      event.preventDefault();
+    }
+    if (cb) {
+      cb(event.target.value);
+    }
+  };
 
 type ButtonProps = {
-    children: React.ReactNode;
-    loading?: boolean;
-    disabled?: boolean;
-    type?: 'submit' | 'button';
-    onClick?: () => void;
+  children: React.ReactNode;
+  loading?: boolean;
+  disabled?: boolean;
+  type?: "submit" | "button";
+  onClick?: () => void;
 };
 
-export const Button: React.FC<ButtonProps> = ({ children, loading, ...rest }) => (
-    <button {...rest}>
-        {loading && <Spinner />}
-        {children}
-    </button>
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  loading,
+  ...rest
+}) => (
+  <button {...rest}>
+    {loading && <Spinner />}
+    {children}
+  </button>
 );