Form dev1

registration-form/eslint.config.js

@@ -33,6 +33,7 @@ export default [
         'warn',
         { allowConstantExport: true },
       ],
+      'react/prop-types': 0,
     },
   },
 ]

registration-form/package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.2",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

registration-form/src/App.jsx

@@ -1,16 +1,34 @@
-import { useState } from 'react'
-import './App.css'
+import style from "./App.module.css";
+import { useState } from "react";
+import { FormMain } from "./components/FormMain/FormMain";
+import { FormResume } from "./components/FormResume/FormResume";
 
 function App() {
+	const [isFormSubmitted, setIsFormSubmitted] = useState(false);
+	const [formData, setFormData] = useState(null);
 
-  return (
-    <>
-      <div>
-       Registration form
-      </div>
-
-    </>
-  )
+	return (
+		<>
+			{!isFormSubmitted ? (
+				<>
+					<h1 className={style.title}>
+						Formularz zgłoszeniowy na kurs programowania
+					</h1>
+					<div className={style.container}>
+						<FormMain
+							setIsFormSubmitted={setIsFormSubmitted}
+							setFormData={setFormData}
+						/>
+					</div>
+				</>
+			) : (
+				<>
+					<h1 className={style.title}>Dane z formularza</h1>
+					<FormResume formData={formData} />
+				</>
+			)}
+		</>
+	);
 }
 
-export default App
+export default App;

registration-form/src/App.module.css

@@ -0,0 +1,23 @@
+.container {
+  /* display: inline-block; */
+  outline: 1px solid black;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+  width: 50vw; 
+}
+
+.title {
+  color: white;
+  min-width: 800px;
+  text-align: center;
+  font-size: 2rem;
+  font-weight: 700;
+  padding: 1rem;
+}
+
+

registration-form/src/components/FormButton/FormButton.jsx

@@ -0,0 +1,10 @@
+import style from "./FormButton.module.css";
+
+export function FormButton({ type, children, onClick}) {
+
+	return (
+		<button type={type} onClick={onClick} className={style.button} >
+			{children}
+		</button>
+	);
+}

registration-form/src/components/FormButton/FormButton.module.css

@@ -0,0 +1,15 @@
+.button {
+  color: var(--color-main);
+  background-color: transparent;
+  border: 1px solid currentColor;
+  border-radius: 5px;
+  padding: 2px 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+  width: 99%;
+}
+
+.button:hover {
+  color: white;
+  background-color: var(--color-main);
+}

registration-form/src/components/FormExperience/FormExperience.jsx

@@ -0,0 +1,71 @@
+import { useFieldArray } from "react-hook-form";
+import style from "./FormExperience.module.css"
+
+export function FormExperience({
+	control,
+	register,
+	setValue,
+	errors,
+	classError
+}) {
+	const skills = ["JavaScript", "Python", "Java", "other"];
+	const level = [1, 2, 3, 4, 5];
+
+	const { fields, append, remove } = useFieldArray({
+		control,
+		name: "experience",
+	});
+
+	return (
+		<div className={style.exp}>
+			<button className={style.expButton}
+				type="button"
+				onClick={(e) => {
+					e.preventDefault();
+					append({
+						skills: "JavaScript",
+						level: "1",
+					});
+				}}>
+				Dodaj doświadczenie
+			</button>
+			{errors.experience && <p className={classError}>{errors.experience.message}</p>}
+
+			{fields.map((field, index) => {
+				setValue(`experience.${index}.id`, field.id);
+				return (
+					<div className={style.exp} key={index}>
+						<select
+							className={style.expSelect}
+							{...register(`experience.${index}.skills`)}
+							id={`skills-${index}`}>
+							{skills.map((item) => (
+								<option className={style.expSelect} key={item} value={item}>
+									{item}
+								</option>
+							))}
+						</select>
+						<select
+							className={style.expSelect}
+							{...register(`experience.${index}.level`)}
+							id={`level-${index}`}>
+							{level.map((item) => (
+								<option key={item} value={item}>
+									{item}
+								</option>
+							))}
+						</select>
+						<button
+							className={style.expButtonDelete}
+							onClick={(e) => {
+								e.preventDefault();
+								remove(index);
+							}}>
+							Usuń
+						</button>
+					</div>
+				);
+			})}
+		</div>
+	);
+}

registration-form/src/components/FormExperience/FormExperience.module.css

@@ -0,0 +1,37 @@
+.exp {
+  color: var(--color-main);
+  padding: 5px 2px;
+}
+
+button {
+  cursor: pointer;
+}
+
+.expButton {
+  background-color: forestgreen;
+  color: white;
+  width: 99%;
+  min-height: 20px;
+  padding: 2px 10px;
+  border-radius: 6px;
+
+}
+
+.expSelect {
+  color: var(--color-main);
+  border-radius: 6px;
+  border: 0.5px solid;
+  width: 33%;
+  text-align: center;
+
+}
+
+.expButtonDelete {
+  background-color: crimson;
+  color: white;
+  min-height: 25px;
+  width: 33%;
+  border-radius: 6px;
+  border: none;
+
+}

registration-form/src/components/FormInput/FormInput.jsx

@@ -0,0 +1,17 @@
+export function FormInput({ register, type, name, placeholder, error, className, classError }) {
+
+  return (
+		<>
+			<input
+        id={name}
+        name={name}
+				{...register(name)}
+				type={type}
+				placeholder={placeholder}
+				className={className}
+
+			/>
+			{error && <p className={classError}>{error.message}</p>}
+		</>
+	);
+}