diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index 318a41d..02cdd97 100644 --- a/.github/workflows/CI.yml +++ b/.github/workflows/CI.yml @@ -12,7 +12,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: - node-version: '16' + node-version: '18.13' - run: yarn install - name: Run eslint with reviewdog uses: reviewdog/action-eslint@v1.14.0 diff --git a/package.json b/package.json index 2b2dcca..d5ed88b 100644 --- a/package.json +++ b/package.json @@ -15,11 +15,14 @@ "@chakra-ui/react": "^2.8.2", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@hookform/resolvers": "^3.3.2", + "framer-motion": "^10.16.9", + "yup": "^1.3.2", "axios": "^1.6.3", "firebase": "^10.7.0", - "framer-motion": "^10.16.5", "lint-staged": "^14.0.1", "react": "^18.2.0", + "react-hook-form": "^7.45.4", "react-html-email": "^3.0.0", "react-cookie": "^6.1.1", "react-dom": "^18.2.0", diff --git a/src/components/CreateEventForm/CreateEventForm.jsx b/src/components/CreateEventForm/CreateEventForm.jsx new file mode 100644 index 0000000..c3ba57a --- /dev/null +++ b/src/components/CreateEventForm/CreateEventForm.jsx @@ -0,0 +1,129 @@ +/* eslint-disable react/jsx-props-no-spreading */ +import { + Box, + FormLabel, + Input, + Select, + FormControl, + FormErrorMessage, + Button, + Textarea, +} from '@chakra-ui/react'; +import { yupResolver } from '@hookform/resolvers/yup'; +import { useForm } from 'react-hook-form'; +import * as yup from 'yup'; + +const schema = yup.object({ + id: yup.string().required('ID required').max(10, "ID exceeds 10 character limit"), + host: yup.string().required('Host required').max(50, "Host exceeds 50 character limit"), + title: yup.string().required('Title required').max(50, "Title exceeds 50 character limit"), + event_type: yup.string().required('Email required'), + subject: yup.string().required('Subject required'), + description: yup.string().required('Description required').max(50, "Description exceeds 50 character limit"), + year: yup.string().required('Year required'), +}); + + +const CreateEventForm = () => { + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: yupResolver(schema), + }); + + + return ( + +
console.log(data))}> + + + + {/* ID */} + + + Id + + {errors.id && errors.id.message} + + + + {/* HOST */} + + + Host +