diff --git a/package.json b/package.json index 3b0f995..5fac831 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "postinstall": "husky install" }, "dependencies": { + "@hookform/resolvers": "^3.1.1", + "@tailwindcss/forms": "^0.5.3", "graphql": "16.6.0", "graphql-request": "6.1.0", "gray-matter": "^4.0.3", @@ -20,8 +22,10 @@ "next-seo": "6.0.0", "react": "18.2.0", "react-dom": "18.2.0", + "react-hook-form": "^7.45.2", "react-markdown": "^8.0.7", "tailwind-merge": "1.12.0", + "yup": "^1.2.0", "zod": "^3.21.4" }, "devDependencies": { diff --git a/public/joinUs/confetti.png b/public/joinUs/confetti.png new file mode 100644 index 0000000..517a37f Binary files /dev/null and b/public/joinUs/confetti.png differ diff --git a/public/joinUs/confetti.svg b/public/joinUs/confetti.svg new file mode 100644 index 0000000..031ac59 --- /dev/null +++ b/public/joinUs/confetti.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/joinUs/dialog.png b/public/joinUs/dialog.png new file mode 100644 index 0000000..6185569 Binary files /dev/null and b/public/joinUs/dialog.png differ diff --git a/public/joinUs/dialog.svg b/public/joinUs/dialog.svg new file mode 100644 index 0000000..b756de8 --- /dev/null +++ b/public/joinUs/dialog.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/joinUs/eye.png b/public/joinUs/eye.png new file mode 100644 index 0000000..6ecdd3a Binary files /dev/null and b/public/joinUs/eye.png differ diff --git a/public/joinUs/eye.svg b/public/joinUs/eye.svg new file mode 100644 index 0000000..5ed332c --- /dev/null +++ b/public/joinUs/eye.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/joinUs/file.png b/public/joinUs/file.png new file mode 100644 index 0000000..4131eff Binary files /dev/null and b/public/joinUs/file.png differ diff --git a/public/joinUs/file.svg b/public/joinUs/file.svg new file mode 100644 index 0000000..1646d20 --- /dev/null +++ b/public/joinUs/file.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/joinUs/handArrow1.svg b/public/joinUs/handArrow1.svg new file mode 100644 index 0000000..18b2c27 --- /dev/null +++ b/public/joinUs/handArrow1.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/joinUs/handArrow2.svg b/public/joinUs/handArrow2.svg new file mode 100644 index 0000000..1ea1b27 --- /dev/null +++ b/public/joinUs/handArrow2.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/joinUs/handArrow3.svg b/public/joinUs/handArrow3.svg new file mode 100644 index 0000000..1a62fbc --- /dev/null +++ b/public/joinUs/handArrow3.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/joinUs/thic.svg b/public/joinUs/thic.svg new file mode 100644 index 0000000..0f47f7f --- /dev/null +++ b/public/joinUs/thic.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/joinUs/vector.svg b/public/joinUs/vector.svg new file mode 100644 index 0000000..e37d1d5 --- /dev/null +++ b/public/joinUs/vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/joinUs/zespol.png b/public/joinUs/zespol.png new file mode 100644 index 0000000..0e39591 Binary files /dev/null and b/public/joinUs/zespol.png differ diff --git a/public/joinUs/zespol.svg b/public/joinUs/zespol.svg new file mode 100644 index 0000000..d96a7f9 --- /dev/null +++ b/public/joinUs/zespol.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/form-green-check.svg b/src/assets/form-green-check.svg new file mode 100644 index 0000000..2918612 --- /dev/null +++ b/src/assets/form-green-check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/form-red-cross-error.svg b/src/assets/form-red-cross-error.svg new file mode 100644 index 0000000..6b6a838 --- /dev/null +++ b/src/assets/form-red-cross-error.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/koperta.svg b/src/assets/koperta.svg new file mode 100644 index 0000000..f0df46c --- /dev/null +++ b/src/assets/koperta.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/pinezka.svg b/src/assets/pinezka.svg new file mode 100644 index 0000000..3aaf506 --- /dev/null +++ b/src/assets/pinezka.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/FieldStateIndicator/FieldStateIndicator.tsx b/src/components/FieldStateIndicator/FieldStateIndicator.tsx new file mode 100644 index 0000000..84fb7ee --- /dev/null +++ b/src/components/FieldStateIndicator/FieldStateIndicator.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { FieldError } from 'react-hook-form'; + +import GreenCheck from '@/assets/form-green-check.svg'; +import RedCross from '@/assets/form-red-cross-error.svg'; + +export function FieldStateIndicator({ + error, + dirty, + className +}: { + error: FieldError; + dirty?: boolean; + className?: string; +}) { + if (dirty === undefined && !error) + return ; + return dirty && !error ? ( + + ) : ( + + ); +} diff --git a/src/components/FieldStateIndicator/index.ts b/src/components/FieldStateIndicator/index.ts new file mode 100644 index 0000000..f6e5474 --- /dev/null +++ b/src/components/FieldStateIndicator/index.ts @@ -0,0 +1 @@ +export { FieldStateIndicator } from './FieldStateIndicator'; diff --git a/src/components/FormCheckbox/FormCheckbox.tsx b/src/components/FormCheckbox/FormCheckbox.tsx new file mode 100644 index 0000000..4a07459 --- /dev/null +++ b/src/components/FormCheckbox/FormCheckbox.tsx @@ -0,0 +1,30 @@ +import { FieldErrors, UseFormRegister } from 'react-hook-form'; + +import { Inputs } from '../FormJoin/FormJoin'; + +type InputProps = { + register: UseFormRegister; + errors: FieldErrors; + htmlFor: keyof Pick; + content: string; +}; + +export function FormCheckbox({ + register, + errors, + htmlFor, + content +}: InputProps) { + return ( +
+ + {content} +
+ ); +} diff --git a/src/components/FormCheckbox/index.ts b/src/components/FormCheckbox/index.ts new file mode 100644 index 0000000..57f96e3 --- /dev/null +++ b/src/components/FormCheckbox/index.ts @@ -0,0 +1 @@ +export { FormCheckbox } from './FormCheckbox'; diff --git a/src/components/FormEmail/FormEmail.tsx b/src/components/FormEmail/FormEmail.tsx new file mode 100644 index 0000000..7ee096a --- /dev/null +++ b/src/components/FormEmail/FormEmail.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { type FieldError, FieldErrors, UseFormRegister } from 'react-hook-form'; + +import { FieldStateIndicator } from '@/components/FieldStateIndicator/FieldStateIndicator'; +import { Inputs } from '@/components/FormJoin/FormJoin'; + +type InputProps = { + errors: FieldErrors; + register: UseFormRegister; + content: string; + dirty?: boolean; +}; + +const emailFormat = new RegExp(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g); + +export function FormEmail({ register, errors, content, dirty }: InputProps) { + return ( +
+ +
+ + +
+ {errors['email'] ? ( + + {errors.email.message?.toString()} + + ) : ( + {'error place'} + )} +
+ ); +} diff --git a/src/components/FormEmail/index.ts b/src/components/FormEmail/index.ts new file mode 100644 index 0000000..b1065e6 --- /dev/null +++ b/src/components/FormEmail/index.ts @@ -0,0 +1 @@ +export { FormEmail } from './FormEmail'; diff --git a/src/components/FormJoin/FormJoin.tsx b/src/components/FormJoin/FormJoin.tsx new file mode 100644 index 0000000..d8318d5 --- /dev/null +++ b/src/components/FormJoin/FormJoin.tsx @@ -0,0 +1,132 @@ +import React, { useState } from 'react'; +import { useForm } from 'react-hook-form'; + +import Koperta from '@/assets/koperta.svg'; +import Pinezka from '@/assets/pinezka.svg'; +import { FormCheckbox } from '@/components/FormCheckbox'; +import { FormEmail } from '@/components/FormEmail'; +import { FormSelect } from '@/components/FormSelect'; +import { FormTextarea } from '@/components/FormTextarea'; +import { FormUsername } from '@/components/FormUsername'; + +export type Inputs = { + name: string; + email: string; + department: string; + message: string; + privacyPolicy: boolean; + rodo: boolean; +}; + +export function FormJoin() { + const { + register, + handleSubmit, + formState: { errors, dirtyFields } + } = useForm({ mode: 'onChange' }); + + const onSubmit = (data: Inputs) => { + console.log(data); + }; + + return ( +
+
+ + + + +
+ + +
+
+ +
+
+ +
+ ); +} diff --git a/src/components/FormJoin/index.ts b/src/components/FormJoin/index.ts new file mode 100644 index 0000000..313704d --- /dev/null +++ b/src/components/FormJoin/index.ts @@ -0,0 +1 @@ +export { FormJoin } from './FormJoin'; diff --git a/src/components/FormSelect/FormSelect.tsx b/src/components/FormSelect/FormSelect.tsx new file mode 100644 index 0000000..6ad1b27 --- /dev/null +++ b/src/components/FormSelect/FormSelect.tsx @@ -0,0 +1,36 @@ +import { FieldErrors, UseFormRegister } from 'react-hook-form'; + +import RedCross from '@/assets/form-red-cross-error.svg'; + +import { Inputs } from '../FormJoin/FormJoin'; + +type InputProps = { + errors: FieldErrors; + register: UseFormRegister; + htmlFor: any; + content: string; +}; + +export function FormSelect({ register, errors, htmlFor, content }: InputProps) { + return ( + <> + +
+ + +
+ {'error place'} + + ); +} diff --git a/src/components/FormSelect/index.ts b/src/components/FormSelect/index.ts new file mode 100644 index 0000000..8d15174 --- /dev/null +++ b/src/components/FormSelect/index.ts @@ -0,0 +1 @@ +export { FormSelect } from './FormSelect'; diff --git a/src/components/FormTextarea/FormTextarea.tsx b/src/components/FormTextarea/FormTextarea.tsx new file mode 100644 index 0000000..306e09d --- /dev/null +++ b/src/components/FormTextarea/FormTextarea.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { FieldError, FieldErrors, UseFormRegister } from 'react-hook-form'; + +import { FieldStateIndicator } from '@/components/FieldStateIndicator/FieldStateIndicator'; + +import { Inputs } from '../FormJoin/FormJoin'; + +type InputProps = { + errors: FieldErrors; + register: UseFormRegister; + htmlFor: any; + content: string; + placeholder: string; + dirty?: boolean; +}; + +export function FormTextarea({ + register, + errors, + htmlFor, + content, + placeholder, + dirty +}: InputProps) { + return ( +
+ +
+