Improved form field hooks and remove yup

package.json

@@ -24,14 +24,12 @@
         "haunted": "^4.7.0",
         "lit-html": "^1.1.2",
         "react-media-hook": "^0.4.4",
-        "uuid": "^7.0.1",
-        "yup": "^0.28.1"
+        "uuid": "^7.0.1"
     },
     "devDependencies": {
         "@types/express": "^4.17.2",
         "@types/webpack-dev-middleware": "^3.7.0",
         "@types/webpack-hot-middleware": "^2.25.0",
-        "@types/yup": "^0.26.32",
         "@typescript-eslint/eslint-plugin": "^2.20.0",
         "@typescript-eslint/parser": "^2.20.0",
         "clean-webpack-plugin": "^3.0.0",

src/web/_defaults.scss

@@ -0,0 +1 @@
+$main-color: #8fc;

src/web/bookform.scss

@@ -1,3 +1,5 @@
+@import 'defaults';
+
 :host {
     display: block;
 }
@@ -5,20 +7,34 @@
 input, button {
     font-size: 24px;
     padding: 5px 10px;
-    border: solid 1px #ddd;
     &:focus {
         outline: none;
+    }
+}
+
+input {
+    border: solid 1px #ddd;
+    &:focus {
         border: solid 1px #aaa;
     }
+
+    &:valid {
+        background-color: scale-color($main-color, $lightness: 80%);
+    }
+
+    &.dirty:invalid {
+        background-color: scale-color(red, $lightness: 80%);
+    }
 }
 
 button {
-    background-color: #dfc;
+    border: 0;
+    background-color: $main-color;
     color: #555;
     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
 
     &:active {
-        background-color: #ceb;
+        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
     }
 
     &:disabled {

src/web/bookform.ts

@@ -1,50 +1,55 @@
 import { component, html, useState } from 'haunted';
 import { spread } from '@open-wc/lit-helpers';
 import { useMutation } from '@apollo/react-hooks';
-import * as yup from 'yup';
 
 import { useFormField } from './myhooks';
 import { AddBook, GetBooks } from './queries'
 import Css from './bookform.scss';
 
-const schema = yup.object().shape({
-    title: yup.string().required(),
-    author: yup.string().required(),
-});
-
 const BookForm = () => {
-    const [titleProps, setTitle] = useFormField("title");
-    const [authorProps, setAuthor] = useFormField("author");
+    const [titleProps, titleMeta] = useFormField("title");
+    const [authorProps, authorMeta] = useFormField("author");
     const [addBook, { loading }] = useMutation(AddBook);
 
     return html`
         <style>${Css.toString()}</style>
-        <input placeholder="book title" ...=${spread(titleProps)}>
-        <input placeholder="author name" ...=${spread(authorProps)}>
-        <button @click=${async () => {
+        <form @submit=${async (e: Event) => {
+            e.preventDefault();
             try {
-                const newBook = await schema.validate({
+                const newBook = {
                     author: authorProps[".value"],
                     title: titleProps[".value"]
-                });
+                };
 
                 await addBook({
                     variables: newBook,
                     update: (cache, { data }) => {
                         const { books }: any = cache.readQuery({ query: GetBooks });
-                        cache.writeQuery({ query: GetBooks, data: { books: [...books, data.addBook] }});
+                        cache.writeQuery({
+                            query: GetBooks,
+                            data: { books: [...books, data.addBook] }
+                        });
                     }
                 });
 
-                setTitle("");
-                setAuthor("");
+                titleMeta.reset();
+                authorMeta.reset();
             } catch(e) {
                 console.log(e);
-                if (e instanceof yup.ValidationError) {
-                    console.log("validation error");
-                }
             }
-        }} ?disabled=${loading}>Add book</button>
+        }}>
+            <input
+                required
+                class=${titleMeta.isDirty ? "dirty" : ""}
+                placeholder="book title"
+                ...=${spread(titleProps)}>
+            <input
+                required
+                class=${authorMeta.isDirty ? "dirty" : ""}
+                placeholder="author name"
+                ...=${spread(authorProps)}>
+            <button ?disabled=${loading}>+ Add book</button>
+        </form>
     `;
 }
 

src/web/booklist.scss

@@ -1,3 +1,5 @@
+@import 'defaults';
+
 :host {
     display: block;
     font-size: 24px;
@@ -5,7 +7,7 @@
 }
 
 p {
-    border-bottom: solid 1px #cdf;
+    border-bottom: solid 1px $main-color;
 
     .author {
         font-size: 20px;
@@ -14,7 +16,7 @@ p {
     }
 
     a {
-        color: #cdf;
+        color: $main-color;
         font-size: 14px;
         text-decoration: none;
     }

src/web/myapp.scss

@@ -1,3 +1,5 @@
+@import 'defaults';
+
 :host {
     font-family: Ubuntu, sans-serif;
     display: block;
@@ -13,5 +15,5 @@
 
 h1 {
     margin-top: 0;
-    background-color: #dfc;
+    background-color: $main-color;
 }

src/web/myhooks.ts

@@ -1,29 +1,47 @@
 import { useState, useCallback } from 'haunted';
 
-type FormField =  [
-    {
+type FormFieldProps = {
     name: string;
     type: "text";
     '.value': string;
-        '@change': (e: any) => void;
-    },
-    ReturnType<typeof useState>[1]
+    '@input': (e: any) => void;
+};
+
+type FormFieldMeta = {
+    setValue: ReturnType<typeof useState>[1];
+    isDirty: boolean;
+    reset: () => void;
+};
+
+type FormField =  [
+    FormFieldProps,
+    FormFieldMeta
 ];
 
 export const useFormField = (name: string, defaultValue = ""): FormField => {
     const [value, setValue] = useState(defaultValue);
+    const [dirty, setDirty] = useState(false);
     const changeHandler = useCallback((e: any) => {
         setValue(e.target.value);
-    }, [setValue]);
+        setDirty(true);
+    }, [setValue, setDirty]);
+    const reset = useCallback(() => {
+        setValue(defaultValue);
+        setDirty(false);
+    }, [setValue, setDirty, defaultValue]);
 
     return [
         {
             name,
             type: "text",
             '.value': value,
-            '@change': changeHandler
+            '@input': changeHandler
         },
-        setValue
+        {
+            setValue,
+            isDirty: dirty,
+            reset,
+        }
     ];
 };
 

yarn.lock

@@ -67,13 +67,6 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/runtime@^7.0.0":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
-  integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==
-  dependencies:
-    regenerator-runtime "^0.13.2"
-
 "@open-wc/lit-helpers@^0.3.1":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/@open-wc/lit-helpers/-/lit-helpers-0.3.1.tgz#4416ce56b64db49fed6f324dc337145343b7c69e"
@@ -391,11 +384,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/yup@^0.26.32":
-  version "0.26.32"
-  resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.26.32.tgz#bd356fb405f3d641eff963854edf7ad854a8e829"
-  integrity sha512-55WFAq8lNYXdRzSP1cenMFFXtPRe7PWsqn5y9ibqKHOQZ/cSLErkcnB1LE89M7W2TSXVDFtx+T7eFePkGoB+xw==
-
 "@types/zen-observable@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.8.0.tgz#8b63ab7f1aa5321248aad5ac890a485656dcea4d"
@@ -2758,11 +2746,6 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-fn-name@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-2.0.1.tgz#5214d7537a4d06a4a301c0cc262feb84188002e7"
-  integrity sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=
-
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -3934,17 +3917,12 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
-lodash-es@^4.17.11:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
-  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
-
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@~4.17.12:
+lodash@^4.0.0, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@~4.17.12:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -4964,11 +4942,6 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-property-expr@^1.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-1.5.1.tgz#22e8706894a0c8e28d58735804f6ba3a3673314f"
-  integrity sha512-CGuc0VUTGthpJXL36ydB6jnbyOf/rAHFvmVrJlH+Rg0DqqLFQGAP6hIaxD/G0OAmBJPhXDHuEJigrp0e0wFV6g==
-
 proxy-addr@~2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
@@ -5199,11 +5172,6 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.2:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
-  integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
-
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
@@ -5977,11 +5945,6 @@ symbol-observable@^1.0.2, symbol-observable@^1.0.4:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
-synchronous-promise@^2.0.6:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.10.tgz#e64c6fd3afd25f423963353043f4a68ebd397fd8"
-  integrity sha512-6PC+JRGmNjiG3kJ56ZMNWDPL8hjyghF5cMXIFOKg+NiwwEZZIvxTWd0pinWKyD227odg9ygF8xVhhz7gb8Uq7A==
-
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@@ -6121,11 +6084,6 @@ toposort@^1.0.0:
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
   integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
 
-toposort@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
-  integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
-
 touch@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"
@@ -6736,19 +6694,6 @@ yargs@^7.0.0:
     y18n "^3.2.1"
     yargs-parser "^5.0.0"
 
-yup@^0.28.1:
-  version "0.28.1"
-  resolved "https://registry.yarnpkg.com/yup/-/yup-0.28.1.tgz#60c0725be7057ed7a9ae61561333809332a63d47"
-  integrity sha512-xSHMZA7UyecSG/CCTDCtnYZMjBrYDR/C7hu0fMsZ6UcS/ngko4qCVFbw+CAmNtHlbItKkvQ3YXITODeTj/dUkw==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    fn-name "~2.0.1"
-    lodash "^4.17.11"
-    lodash-es "^4.17.11"
-    property-expr "^1.5.0"
-    synchronous-promise "^2.0.6"
-    toposort "^2.0.2"
-
 zen-observable-ts@^0.8.20:
   version "0.8.20"
   resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-0.8.20.tgz#44091e335d3fcbc97f6497e63e7f57d5b516b163"