formik + yup

yup validation doesnt seem to show yet

package.json

@@ -10,12 +10,14 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "date-fns": "^2.19.0",
+    "formik": "^2.2.6",
     "framer-motion": "^4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-scripts": "4.0.3",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "yup": "^0.32.9"
   },
   "scripts": {
     "start": "react-scripts start",

src/common/input/ChakraInput.jsx

@@ -0,0 +1,27 @@
+import { FormErrorMessage } from '@chakra-ui/form-control';
+import { FormLabel } from '@chakra-ui/form-control';
+import { FormControl } from '@chakra-ui/form-control';
+import { Input } from '@chakra-ui/input';
+import { Field } from 'formik';
+
+export default function ChakraInput(props) {
+  const { label, name, ...rest } = props;
+  return (
+    <Field name={name}>
+      {({ field, form }) => {
+        return (
+          <FormControl>
+            <FormLabel
+              htmlFor={name}
+              isInvalid={form.errors[name] && form.touched[name]}
+            >
+              {label}
+            </FormLabel>
+            <Input id={name} {...rest} {...field} />
+            <FormErrorMessage>{form.errors[name]}</FormErrorMessage>
+          </FormControl>
+        );
+      }}
+    </Field>
+  );
+}

src/common/input/ChakraNumberInput.jsx

@@ -0,0 +1,43 @@
+import { FormErrorMessage } from '@chakra-ui/form-control';
+import { FormLabel } from '@chakra-ui/form-control';
+import { FormControl } from '@chakra-ui/form-control';
+import { NumberInputStepper } from '@chakra-ui/number-input';
+import { NumberInputField } from '@chakra-ui/number-input';
+import { NumberDecrementStepper } from '@chakra-ui/number-input';
+import { NumberIncrementStepper } from '@chakra-ui/number-input';
+import { NumberInput } from '@chakra-ui/number-input';
+import { Field } from 'formik';
+
+export default function ChakraNumberInput(props) {
+  const { label, name, ...rest } = props;
+
+  return (
+    <Field name={name}>
+      {({ field, form }) => {
+        return (
+          <FormControl>
+            <FormLabel
+              htmlFor={name}
+              isInvalid={form.errors[name] && form.touched[name]}
+            >
+              {label}
+            </FormLabel>
+            <NumberInput
+              defaultValue={field.value}
+              {...rest}
+              onChange={(val) => form.setFieldValue(field.name, val)}
+            >
+              <NumberInputField id={name} {...field} />
+              <NumberInputStepper>
+                <NumberIncrementStepper />
+                <NumberDecrementStepper />
+              </NumberInputStepper>
+            </NumberInput>
+
+            <FormErrorMessage>{form.errors[name]}</FormErrorMessage>
+          </FormControl>
+        );
+      }}
+    </Field>
+  );
+}

src/features/editors/Editor.jsx

@@ -2,7 +2,8 @@ import { Button } from '@chakra-ui/button';
 import { Heading } from '@chakra-ui/layout';
 import { SimpleGrid } from '@chakra-ui/layout';
 import { Box } from '@chakra-ui/layout';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { sampleData } from '../../app/sampleData';
 import NumberedText from '../../common/components/text/NumberedText';
 import EventForm from '../form/EventForm';
 import PreviewContainer from '../viewers/PreviewContainer';
@@ -10,8 +11,16 @@ import styles from './Editor.module.css';
 import EventList from './list/EventList';
 
 export default function Editor() {
+  const [data, setData] = useState(sampleData);
+  const [selectedData, setSelectedData] = useState(null);
   const [selectedEvent, setSelectedEvent] = useState(null);
 
+  useEffect(() => {
+    const se = data.events.filter((d) => d.id === selectedEvent);
+
+    if (se.length > 0) setSelectedData(se[0]);
+  }, [data, selectedEvent]);
+
   return (
     <SimpleGrid
       minChildWidth='120px'
@@ -22,7 +31,11 @@ export default function Editor() {
         <Heading>List Events</Heading>
         <NumberedText number={1} text={'Select Event'} />
         <div className={styles.content}>
-          <EventList selected={selectedEvent} setSelected={setSelectedEvent} />
+          <EventList
+            data={data}
+            selected={selectedEvent}
+            setSelected={setSelectedEvent}
+          />
           <div className={styles.buttons}>
             <Button colorScheme='teal'>Add Event</Button>
           </div>
@@ -33,7 +46,7 @@ export default function Editor() {
         <Heading>Event Details</Heading>
         <NumberedText number={2} text={'Click Save to send to screens'} />
         <div className={styles.content}>
-          <EventForm />
+          <EventForm data={selectedData} />
         </div>
       </Box>
 

src/features/form/EventForm.jsx

@@ -1,43 +1,88 @@
 import { Button } from '@chakra-ui/button';
-import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
+import { Formik } from 'formik';
-import { Stack } from '@chakra-ui/layout';
+import * as Yup from 'yup';
-import { Spacer } from '@chakra-ui/layout';
+import ChakraInput from '../../common/input/ChakraInput';
-import { Text } from '@chakra-ui/layout';
+import ChakraNumberInput from '../../common/input/ChakraNumberInput';
-import SingleTimeInput from '../../common/input/SingleTimeInput';
+
-import TimeInput from '../../common/input/TimeInput';
 import styles from './EventForm.module.css';
 
 export default function EventForm(props) {
+  const initialValues = props.data ?? {
+    id: '1',
+    title: 'Is the internet a fad?',
+    subtitle: 'It is',
+    presenter: 'Carlos Valente',
+    timeStart: '10:00',
+    timeEnd: '11:30',
+    timerDuration: 10,
+    message: {
+      text: 'Hurry Up!',
+      color: '#F00',
+      active: false,
+    },
+  };
+
+  const validationSchema = Yup.object({
+    title: Yup.string().required(),
+    subtitle: Yup.string(),
+    presenter: Yup.string(),
+    timerDuration: Yup.number().required().min(1).max(60),
+  });
+
+  const submitForm = (values) => {
+    console.log('form', values);
+  };
+
+  if (props.data === null || props.data === undefined) {
+    return <div>nothing selected</div>;
+  }
+
   return (
     <div>
-      <Text className={styles.label}>Event Title </Text>
+      <Formik
-      <Editable defaultValue='Event Title'>
+        initialValues={initialValues}
-        <EditablePreview />
+        validationSchema={validationSchema}
-        <EditableInput />
+        onSubmit={(values, actions) => {
-      </Editable>
+          setTimeout(() => {
+            console.log(values);
+            actions.setSubmitting(false);
+          }, 100);
+        }}
+      >
+        {(props) => (
+          <form onSubmit={props.handleSubmit}>
+            <ChakraInput name='title' label='Event Title' />
+            <ChakraInput name='subtitle' label='Event Subtitle' />
+            <ChakraInput name='presenter' label='Presenter Name' />
+            <ChakraNumberInput
+              name='timerDuration'
+              label='Timer Duration'
+              allowMouseWheel
+              min={1}
+              max={60}
+              maxW={24}
+            />
 
-      <Text className={styles.label}>Event Subtitle </Text>
+            <div className={styles.buttons}>
-      <Editable defaultValue='Event Subtitle'>
+              <Button
-        <EditablePreview />
+                variant='outline'
-        <EditableInput />
+                disabled={props.isSubmitting}
-      </Editable>
+                onClick={() => console.log('ccancel form?')}
-
+              >
-      <Text className={styles.label}>Presenter Name </Text>
+                Cancel
-      <Editable defaultValue='Presenter Name'>
+              </Button>
-        <EditablePreview />
+              <Button
-        <EditableInput />
+                colorScheme='teal'
-      </Editable>
+                isLoading={props.isSubmitting}
-
+                disabled={!props.isValid || !props.dirty || props.isSubmitting}
-      <div className={styles.timings}>
+                type='submit'
-        <TimeInput label='Scheduled Start' />
+              >
-        <TimeInput label='Scheduled End' />
+                Save
-        <SingleTimeInput label='Timer' />
+              </Button>
-      </div>
+            </div>
-
+          </form>
-      <div className={styles.buttons}>
+        )}
-        <Button variant='outline'>Cancel</Button>
+      </Formik>
-        <Button colorScheme='teal'>Save</Button>
-      </div>
     </div>
   );
 }

yarn.lock

@@ -1091,7 +1091,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.9.2":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
   integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
@@ -2393,7 +2393,7 @@
   dependencies:
     "@types/lodash" "*"
 
-"@types/lodash@*":
+"@types/lodash@*", "@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==
@@ -4601,6 +4601,11 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -5742,6 +5747,19 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formik@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.6.tgz#378a4bafe4b95caf6acf6db01f81f3fe5147559d"
+  integrity sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==
+  dependencies:
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.14"
+    lodash-es "^4.17.14"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^1.10.0"
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -6155,7 +6173,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7645,6 +7663,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.14, 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._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -8063,6 +8086,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
+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.20:
   version "3.1.20"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
@@ -9549,6 +9577,11 @@ prop-types@^15.6.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==
+
 proxy-addr@~2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
@@ -9772,6 +9805,11 @@ react-fast-compare@3.2.0:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-focus-lock@2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.5.0.tgz#12e3a3940e897c26e2c2a0408cd25ea3c99b3709"
@@ -11325,7 +11363,7 @@ tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
   integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -11392,6 +11430,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=
+
 tough-cookie@^2.3.3, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@@ -12336,3 +12379,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"