yup information

CodeStix · CodeStix · commit 7b7fb860304e · 2021-04-07T20:50:37.000+02:00
diff --git a/articles/Getting-started.md b/articles/Getting-started.md
@@ -107,4 +107,4 @@ Tweak the above example to your desire by...
 -   [Toggling a field using a checkbox](/docs/Toggling-a-field)
 -   [Creating a component which shows the current form values in JSON](/docs/Live-json-component)
 -   [Creating a custom input like FormInput, FormSelect ...](/docs/Custom-input)
--   **Look at the sidebar for more...**
+-   Look at the sidebar for more...
diff --git a/articles/Validation.md b/articles/Validation.md
@@ -4,7 +4,10 @@ A validator is a function that takes form values, and returns errors for these v
 
 You can use a validator by passing it to the [`useForm`](/docs/useForm) hook.
 
-Its it recommended to use a validation library, as this makes the process of validating data mush easier. This library has [built-in support for yup](/docs/yup).
+Its it recommended to use a validation library, as this makes the process of validating data mush easier. This library has drop-in functionallity for:
+
+-   [typed-object-validator](/docs/typed-object-validator): recommended, a typed-checked validation library
+-   [yup](/docs/yup): a widely used validation library
 
 ## Example
 
diff --git a/articles/typed-object-validator.md b/articles/typed-object-validator.md
@@ -0,0 +1 @@
+# typed-object-validator
diff --git a/articles/yup.md b/articles/yup.md
@@ -1,25 +1,30 @@
 # yup
 
-**typed-react-form** has built-in support for [yup](https://github.com/jquense/yup). This is a validation library which makes it mush easier to validate data.
+To validate your form using [yup](https://www.npmjs.com/package/yup), do the following:
 
-Use the `yupValidator(yupSchema, options?)` helper function to create a validator function for your yup schema.
+First, install [typed-react-form-yup](https://www.npmjs.com/package/typed-react-form-yup)
+
+```
+npm install typed-react-form-yup
+```
+
+Then use the `yupValidator(yupSchema, options?)` helper function to create a validator function for your yup schema, which you can then pass to the `useForm` hook.
 
 ## Parameters
 
 #### `yupSchema` **(required)**
 
 The yup validation schema that will validate the form values.
 
----
-
 #### `options` **(optional)**
 
 Yup validation options.
 
 ## Usage example
 
 ```tsx
-import { useForm, yupValidator, FormError, FormInput, AnyListener } from "typed-react-form";
+import { useForm, FormError, FormInput, AnyListener } from "typed-react-form";
+import { yupValidator } from "typed-react-form-yup";
 import * as yup from "yup";
 
 interface LoginRequest {
@@ -32,15 +37,15 @@ const LoginRequestSchema = yup.object({
     password: yup.string().required("Please enter a password").min(5, "Password must be longer"),
 });
 
-function FormExample() {
-    const form = useForm<LoginRequest>({ email: "", password: "" }, yupValidator(LoginRequestSchema)); // Use the yup validator
+export function YupFormExample() {
+    const form = useForm<LoginRequest>({ email: "", password: "" }, yupValidator(LoginRequestSchema), true);
+
+    function submit() {
+        console.log("submit", form.values);
+    }
+
     return (
-        <form
-            onSubmit={(ev) => {
-                ev.preventDefault();
-                console.log("submit", form.values);
-            }}
-        >
+        <form onSubmit={form.handleSubmit(submit)}>
             <FormInput form={form} name="email" type="email" />
             <FormError form={form} name="email" />
             <FormInput form={form} name="password" type="password" />
diff --git a/components/SideBar.tsx b/components/SideBar.tsx
@@ -27,7 +27,8 @@ const CATEGORIES = [
         category: "Validation",
         items: [
             { name: "Validation", url: "/docs/Validation" },
-            { name: "yup", url: "/docs/yup" },
+            { name: "Using yup", url: "/docs/yup" },
+            { name: "Using typed-object-validator", url: "/docs/typed-object-validator" },
         ],
     },
     {
diff --git a/package.json b/package.json
@@ -18,13 +18,17 @@
     "react-markdown": "^5.0.3",
     "react-syntax-highlighter": "^15.4.3",
     "styled-components": "^5.2.1",
-    "typed-react-form": "^1.2.11"
+    "typed-object-validator": "^1.0.2",
+    "typed-react-form": "^1.3.0",
+    "typed-react-form-yup": "^1.0.2",
+    "yup": "^0.32.9"
   },
   "devDependencies": {
     "@types/node": "^14.14.34",
     "@types/react": "^17.0.3",
     "@types/react-syntax-highlighter": "^13.5.0",
     "@types/styled-components": "^5.1.8",
+    "@types/yup": "^0.29.11",
     "typescript": "^4.2.3"
   }
 }
diff --git a/pages/docs/test.tsx b/pages/docs/test.tsx
@@ -10,6 +10,7 @@ import {
     ErrorMap,
     FormError,
 } from "typed-react-form";
+import tv from "typed-object-validator";
 
 function MyForm() {
     const form = useForm({ email: "" });
@@ -207,6 +208,39 @@ function ValidationExample() {
     );
 }
 
+// import { useForm, FormError, FormInput, AnyListener } from "typed-react-form";
+import * as yup from "yup";
+import { yupValidator } from "typed-react-form-yup";
+
+interface LoginRequest {
+    email: string;
+    password: string;
+}
+
+const LoginRequestSchema = yup.object({
+    email: yup.string().required("Please enter an email").email("Please enter a valid email address."),
+    password: yup.string().required("Please enter a password").min(5, "Password must be longer"),
+});
+
+export function YupFormExample() {
+    const form = useForm<LoginRequest>({ email: "", password: "" }, yupValidator(LoginRequestSchema), true);
+
+    function submit() {
+        console.log("submit", form.values);
+    }
+
+    return (
+        <form onSubmit={form.handleSubmit(submit)}>
+            <FormInput form={form} name="email" type="email" />
+            <FormError form={form} name="email" />
+            <FormInput form={form} name="password" type="password" />
+            <FormError form={form} name="password" />
+            {/* Listen for any change on the form, and disable the submit button when there is an error */}
+            <AnyListener form={form} render={(form) => <button disabled={form.error}>Submit</button>} />
+        </form>
+    );
+}
+
 export default function Testing() {
     return (
         <>
@@ -221,6 +255,8 @@ export default function Testing() {
             <FormJsonExample />
             <hr />
             <ValidationExample />
+            <hr />
+            <YupFormExample />
         </>
     );
 }
diff --git a/yarn.lock b/yarn.lock
@@ -88,7 +88,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.3.1":
+"@babel/runtime@^7.10.5", "@babel/runtime@^7.3.1":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
   integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
@@ -271,6 +271,11 @@
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
+"@types/lodash@^4.14.165":
+  version "4.14.168"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
+  integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
+
 "@types/mdast@^3.0.0", "@types/mdast@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.3.tgz#2d7d671b1cd1ea3deb306ea75036c2a0407d2deb"
@@ -323,6 +328,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
 
+"@types/yup@^0.29.11":
+  version "0.29.11"
+  resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.29.11.tgz#d654a112973f5e004bf8438122bd7e56a8e5cd7e"
+  integrity sha512-9cwk3c87qQKZrT251EDoibiYRILjCmxBvvcb4meofCmx1vdnNcR9gyildy5vOHASpOKMsn42CugxUvcwK5eu1g==
+
 anser@1.4.9:
   version "1.4.9"
   resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.9.tgz#1f85423a5dcf8da4631a341665ff675b96845760"
@@ -1248,6 +1258,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
@@ -1258,7 +1273,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.19:
+lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.19, lodash@^4.17.20:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -1363,6 +1378,11 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+nanoclone@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
+  integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
+
 nanoid@^3.1.16:
   version "3.1.21"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.21.tgz#25bfee7340ac4185866fbfb2c9006d299da1be7f"
@@ -1633,6 +1653,11 @@ prop-types@15.7.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+property-expr@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.4.tgz#37b925478e58965031bb612ec5b3260f8241e910"
+  integrity sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg==
+
 property-information@^5.0.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
@@ -2079,6 +2104,11 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
+
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -2106,10 +2136,20 @@ type-fest@^0.7.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.7.1.tgz#8dda65feaf03ed78f0a3f9678f1869147f7c5c48"
   integrity sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==
 
-typed-react-form@^1.2.11:
-  version "1.2.11"
-  resolved "https://registry.yarnpkg.com/typed-react-form/-/typed-react-form-1.2.11.tgz#bf0ad996df8d2344193dfb323d1087cd5a3e2bd7"
-  integrity sha512-yxDt4KsHC4tVTbeshtuwLFiFE1k/BnHL8m0pMpbTKnifA/G98Dl82ui1UxzgZSgOYNYhnFdGxJXE9SmN+dttfA==
+typed-object-validator@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-object-validator/-/typed-object-validator-1.0.2.tgz#19ae734eedeca91a06f1535445ed8188509ba149"
+  integrity sha512-6A9qDfEViI7lB41LjAGsO7MvupvQJg6Yu1V8DWwEjfWhDuZZCD145UfZLMWM3Ani6a53jE2LbjLhn8FCXjejfg==
+
+typed-react-form-yup@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-react-form-yup/-/typed-react-form-yup-1.0.2.tgz#74eecb70fe5561318ef59fb69baf67aa693069b9"
+  integrity sha512-8fLmfVf2C1qP8pXP+8T9noXiHoSDiKn1jGzHDWjCjHHA42a0K56DVkZ6Km2l58l8t3zjsQlgdrt/vvVJKi0K2Q==
+
+typed-react-form@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/typed-react-form/-/typed-react-form-1.3.0.tgz#82f1ea14464f7598f5b1afc22066d7724a0fd916"
+  integrity sha512-/kAZbJ3BUmGFHYr/GrD41c6iQ1kTSXFuQjZ70Tm0LmHxq4u1FGT1tqREmHq12D4lkwfvM/p1KtGFbpSeyzp7dg==
 
 typescript@^4.2.3:
   version "4.2.3"
@@ -2255,3 +2295,16 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+yup@^0.32.9:
+  version "0.32.9"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.9.tgz#9367bec6b1b0e39211ecbca598702e106019d872"
+  integrity sha512-Ci1qN+i2H0XpY7syDQ0k5zKQ/DoxO0LzPg8PAR/X4Mpj6DqaeCoIYEEjDJwhArh3Fa7GWbQQVDZKeXYlSH4JMg==
+  dependencies:
+    "@babel/runtime" "^7.10.5"
+    "@types/lodash" "^4.14.165"
+    lodash "^4.17.20"
+    lodash-es "^4.17.15"
+    nanoclone "^0.2.1"
+    property-expr "^2.0.4"
+    toposort "^2.0.2"
