wip: commit test (#28)

* wip: commit test

* wip: registration form, wrapper cards

---------

Co-authored-by: Zuzka Stavjaňová <[email protected]>

next.config.js

@@ -22,6 +22,10 @@ const nextConfig = {
         source: "/registrace",
         destination: "/registration",
       },
+      {
+        source: "/registrace/vitej",
+        destination: "/registration/welcome",
+      }
       {
         source: "/profil",
         destination: "/profile",

src/app/components-preview/page.tsx

@@ -262,7 +262,7 @@ export default function ComponentsPreview() {
 
       <StepperMenu steps={steps} />
       <Carousel testimonials={testimonials} variant="with-image" />
-      <ImageUploader />
+      <ImageUploader name="upload-image" />
       <Footer />
       <NavbarMobile />
     </div>

src/app/registration/common/AgeForm.tsx

@@ -0,0 +1,68 @@
+import Content from "library/atoms/Content";
+import React from "react";
+import { useFormData } from "./FormProvider";
+import { useForm } from "react-hook-form";
+import { FormProps } from "./types";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import DateInput from "library/atoms/DateInput";
+import Button from "library/atoms/Button";
+
+const formSchema = z.object({
+  date: z.date(),
+});
+
+export type FormValues = z.infer<typeof formSchema>;
+
+export const AgeForm: React.FC<FormProps> = ({ currentStep, nextFormStep, prevFormStep }) => {
+  const { setFormValues } = useFormData();
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      date: new Date(),
+    },
+  });
+
+  const onSubmit = (values: any) => {
+    setFormValues(values);
+    nextFormStep();
+  };
+
+  return (
+    <Content title="Kdy ses narodil/a?">
+      <div>Tvé datum narození nikde zveřejňovat nebudeme.</div>
+      <div className="mt-4 mb-6">Ostatní uživatelé uvidí pouze tvůj věk.</div>
+
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <DateInput
+          isStartDateHidden
+          placeholderText="Den. Měsíc. Rok."
+          register={form.register("date")}
+          control={form.control}
+        />
+        <div>
+          {currentStep < 6 && (
+            <div className="flex gap-4 mt-4">
+              {currentStep > 1 ? (
+                <Button buttonText="Back" className="w-full" color="secondary" type="button" onClick={prevFormStep} />
+              ) : (
+                <>
+                  <Button
+                    buttonText="Zrušit"
+                    className="w-full"
+                    color="secondary"
+                    type="button"
+                    onClick={() => console.log("zrusit")}
+                  />
+                </>
+              )}
+
+              <Button buttonText="Next" className="w-full" color="primary" type="submit" />
+            </div>
+          )}
+        </div>
+      </form>
+    </Content>
+  );
+};

src/app/registration/common/ExpectationForm.tsx

@@ -0,0 +1,67 @@
+import Content from "library/atoms/Content";
+import React from "react";
+import { useFormData } from "./FormProvider";
+import { useForm } from "react-hook-form";
+import { FormProps } from "./types";
+import RadioBigButtonGroup from "library/atoms/RadioBigButtonGroup";
+import Button from "library/atoms/Button";
+
+const options = [
+  {
+    id: "10",
+    optionName: "Chci být na seznamce",
+    optionValue: "dating",
+    optionDescription:
+      "Pokud hledáš životní lásku nebo ti chybí vztah, začni se seznamovat. Zpřístupníme ti LoveReport 💖 a uvidíš, jak se k sobě s dalšími uživateli hodíte.",
+  },
+  {
+    id: "11",
+    optionName: "Stačí mi pouze komunita",
+    optionValue: "community",
+    optionDescription:
+      "Pokud hledáš pouze přátele nebo tě zajímají informace od odborníků, komunita je to správné místo pro tebe.",
+  },
+];
+
+export const ExpectationForm: React.FC<FormProps> = ({ currentStep, nextFormStep, prevFormStep }) => {
+  const { setFormValues } = useFormData();
+
+  const form = useForm<any>();
+
+  const onSubmit = (values: any) => {
+    setFormValues(values);
+    nextFormStep();
+  };
+
+  return (
+    <Content title="Pověz nám, co na Mingly hledáš">
+      <div>Co od Mingly očekáváš?</div>
+      <div>Svou volbu můžeš kdykoliv upravit, pokud změníš názor.</div>
+
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <RadioBigButtonGroup name="expectation" options={options} register={form.register("expectation")} />
+        <div>
+          {currentStep < 6 && (
+            <div className="flex gap-4 mt-4">
+              {currentStep > 1 ? (
+                <Button buttonText="Back" className="w-full" color="secondary" type="button" onClick={prevFormStep} />
+              ) : (
+                <>
+                  <Button
+                    buttonText="Zrušit"
+                    className="w-full"
+                    color="secondary"
+                    type="button"
+                    onClick={() => console.log("zrusit")}
+                  />
+                </>
+              )}
+
+              <Button buttonText="Next" className="w-full" color="primary" type="submit" />
+            </div>
+          )}
+        </div>
+      </form>
+    </Content>
+  );
+};

src/app/registration/common/FormCard.tsx

@@ -0,0 +1,64 @@
+import React, { ReactNode } from "react";
+import classNames from "helpers/classNames";
+import { FormProvider, useForm } from "react-hook-form";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useFormData } from "./FormProvider";
+
+type Props = {
+  children: ReactNode;
+  currentStep: number;
+  prevFormStep: () => void;
+  numberOfSteps: number;
+  nextFormStep: () => void;
+};
+
+type StepIndicatorProps = {
+  numberOfSteps: number;
+  currentStep: number;
+};
+
+export const StepIndicator = ({ numberOfSteps, currentStep }: StepIndicatorProps) => {
+  const steps = Array.from({ length: numberOfSteps }, (_, index) => {
+    const stepNumber = index + 1;
+    const isActive = stepNumber === currentStep;
+    const isComplete = stepNumber < currentStep;
+
+    return (
+      <div
+        key={index}
+        className={classNames(
+          "inline-flex rounded-full",
+          isActive
+            ? "h-6 w-6 border-[6px] bg-violet-70 border-violet-20"
+            : isComplete
+            ? "h-3 w-3 bg-violet-70"
+            : "h-3 w-3 bg-gray-20",
+        )}
+      />
+    );
+  });
+
+  return <div className="flex items-center align-middle space-x-4">{steps}</div>;
+};
+
+const formSchema = z.object({
+  name: z.string().nonempty("Jméno je povinné"),
+  lastname: z.string().nonempty("Příjmení je povinné"),
+});
+
+export type FormValues = z.infer<typeof formSchema>;
+
+export const FormCard = ({ children, currentStep, prevFormStep, numberOfSteps, nextFormStep }: Props) => {
+  return (
+    <div className="py-8">
+      <div className="text-center block">
+        <div className="text-center justify-center  flex align-middle ">
+          <StepIndicator numberOfSteps={numberOfSteps} currentStep={currentStep} />
+        </div>
+        <div className="mt-2 ">Krok {currentStep} z 6</div>
+      </div>
+      {children}
+    </div>
+  );
+};

src/app/registration/common/FormProvider.tsx

@@ -0,0 +1,25 @@
+import { useState, createContext, useContext, ReactNode } from "react";
+
+type ContextProps = {
+  setFormValues: (values: any) => void;
+  data: any;
+};
+
+export const FormContext = createContext<ContextProps>({} as ContextProps);
+
+export default function FormProvider({ children }: { children: ReactNode }) {
+  const [data, setData] = useState({});
+
+  console.log(data, "data");
+
+  const setFormValues = (values: any) => {
+    setData(prevValues => ({
+      ...prevValues,
+      ...values,
+    }));
+  };
+
+  return <FormContext.Provider value={{ data, setFormValues }}>{children}</FormContext.Provider>;
+}
+
+export const useFormData = () => useContext(FormContext);

src/app/registration/common/GenderForm.tsx

@@ -0,0 +1,76 @@
+import Content from "library/atoms/Content";
+import React from "react";
+import { useFormData } from "./FormProvider";
+import { useForm } from "react-hook-form";
+import { FormProps } from "./types";
+import RadioBigButtonGroup from "library/atoms/RadioBigButtonGroup";
+import Button from "library/atoms/Button";
+
+const options = [
+  {
+    id: "1",
+    optionName: "Žena",
+    optionValue: "woman",
+  },
+  {
+    id: "2",
+    optionName: "Muž",
+    optionValue: "man",
+  },
+  {
+    id: "3",
+    optionName: "Trans žena",
+    optionValue: "transWoman",
+  },
+  {
+    id: "4",
+    optionName: "Trans muž",
+    optionValue: "transMan",
+  },
+  {
+    id: "5",
+    optionName: "Nebinární",
+    optionValue: "nobinar",
+  },
+];
+
+export const GenderForm: React.FC<FormProps> = ({ currentStep, nextFormStep, prevFormStep }) => {
+  const { setFormValues } = useFormData();
+
+  const form = useForm<any>();
+
+  const onSubmit = (values: any) => {
+    setFormValues(values);
+    nextFormStep();
+  };
+
+  return (
+    <Content title="Jakého jsi pohlaví?">
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <RadioBigButtonGroup name="gender" options={options} register={form.register("gender")} />
+
+        <div>
+          {currentStep < 6 && (
+            <div className="flex gap-4 mt-4">
+              {currentStep > 1 ? (
+                <Button buttonText="Back" className="w-full" color="secondary" type="button" onClick={prevFormStep} />
+              ) : (
+                <>
+                  <Button
+                    buttonText="Zrušit"
+                    className="w-full"
+                    color="secondary"
+                    type="button"
+                    onClick={() => console.log("zrusit")}
+                  />
+                </>
+              )}
+
+              <Button buttonText="Next" className="w-full" color="primary" type="submit" />
+            </div>
+          )}
+        </div>
+      </form>
+    </Content>
+  );
+};