input.tsx

input.tsx

import React, { ReactNode } from 'react';
import classNames from 'classnames';
import { useController, useForm } from 'react-hook-form';

export type InputProps = {
  type?: string;
  fullWidth?: boolean;
  isInvalid?: boolean;
  isEmpty?: boolean;
  error?: any;
  className?: string;
  icon?: ReactNode;
} & React.InputHTMLAttributes<HTMLInputElement>;

export const Input = ({
  type = 'text',
  isInvalid,
  isEmpty,
  fullWidth,
  className,
  icon,
  error,
  ...rest
}: InputProps) => {
  const { control } = useForm();
  const {
    field: { onChange, onBlur, name, value, ref },
    fieldState: { invalid, isTouched, isDirty },
    formState: { touchedFields, dirtyFields },
  } = useController({
    name,
    control,
    rules: { required: true },
    defaultValue: '',
  });

  const inputClasses = classNames(
    'w-full border rounded-md focus:ring-0 focus:outline-none py-3 px-3',
    {
      'border-lena2021-corail-dark focus:border-lena2021-corail-dark text-lena2021-corail-dark':
        isInvalid,
      'border-lena-lightgray2 focus:border-lena-gray': !isInvalid,
      'border-lena2021-corail-dark focus:border-lena2021-corail-dark': isEmpty,
      'pr-8': type === 'password' || isInvalid,
      'pl-10': icon,
      'bg-lena-gray-light-2 cursor-not-allowed': rest.disabled,
    }
  );

  return (
    <div className="w-full flex">
      <div
        className={classNames(
          `relative md:flex-grow md:flex justify-center items-center`,
          fullWidth ? 'w-full' : 'lg:max-w-58p md:max-w69p lg:w-58p md:w-69p'
        )}
      >
        {icon && (
          <div className="absolute inset-y-0 left-4 flex items-center justify-center">
            {icon}
          </div>
        )}

        <input
          ref={ref}
          onChange={onChange}
          onBlur={onBlur}
          value={value}
          name={name}
          {...rest}
          className={inputClasses}
        />

        <div className="absolute inset-y-0 flex items-center justify-center">
          {/* {isInvalid && (
            // <InvalidIcon
            //   height={12}
            //   width={12}
            //   className="fill-current text-lena2021-corail-dark"
            // />
          )} */}
        </div>
      </div>
    </div>
  );
};

export default Input;

RegisterToEvent.tsx

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import * as Yup from 'yup';
import { SectionTitle, Input, Button } from '@calypso/ui';
import { yupResolver } from '@hookform/resolvers/yup';

const RegisterToEvent = () => {
  const validationSchema = Yup.object().shape({
    firstName: Yup.string().required('Prénom obligatoire'),
    lastName: Yup.string().required('Nom obligatoire'),
    email: Yup.string().required('E-mail obligatoire').email('E-mail invalide'),
    company: Yup.string().required('Structure obligatoire'),
  });

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm({
    resolver: yupResolver(validationSchema),
  });

  const [participants, setParticipants] = useState<unknown[]>([]);

  return (
    <div className="mt-8">
      <SectionTitle title="Participants à l'événement" />

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div className="border shadow-lg p-4 text-lena-blue-dark rounded-md border-transparent border-lena-gray border-opacity-30">
          <div className="flex justify-between  mb-2 text-lena2021-blue-dark">
            <h1 className="font-bold text-md">
              Participant {participants.length + 1}
            </h1>
            <div>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </div>
          </div>

          <form
            onSubmit={handleSubmit((data: unknown) => {
              setParticipants((prevState) => [...prevState, data]);

              reset();
            })}
          >
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-2">
              <div>
                <Input

                  type="text"
                  {...register('firstName')}
                  placeholder="Prénom"
                  //isInvalid={errors['firstName']?.message}
                />
                {errors['firstName'] && (
                  <div className=" text-red-400 text-sm">
                    {errors['firstName']?.message}
                  </div>
                )}
              </div>

              <div>
                <Input
                  {...register('lastName')}
                  type="text"
                  placeholder="Nom"

                  // isInvalid={errors['lastName']?.message}
                />
                {errors['lastName'] && (
                  <div className=" text-red-400 text-sm">
                    {errors['lastName']?.message}
                  </div>
                )}
              </div>
            </div>

            <Input
              {...register('company')}
              type="text"
              placeholder="Structure"
              // isInvalid={errors['company']?.message}
            />
            {errors['company'] && (
              <div className=" text-red-400 text-sm">
                {errors['company']?.message}
              </div>
            )}

            <div className="mb-2 text-lena2021-blue-dark mt-4">
              <h1 className="font-bold text-md">Adresse mail</h1>
            </div>
            <Input
              {...register('email')}
              type="email"
              placeholder="nom.prenom@domaine.fr"
              // isInvalid={errors['email']?.message}
            />
            {errors['email'] && (
              <div className=" text-red-400 text-sm">
                {errors['email']?.message}
              </div>
            )}

            <Button>Ajouter le participant</Button>
          </form>
        </div>

        {/* <div className="flex border cursor-pointer hover:shadow-lg p-4 text-lena-blue-dark rounded-md border-transparent border-lena-gray border-opacity-30">
          <div className="w-full self-center">
            <div className="flex justify-center mb-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="45"
                height="45"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
              </svg>
            </div>

            <SectionTitle title="Ajouter un participant" />
          </div>
        </div> */}
      </div>
    </div>
  );
};

export default RegisterToEvent;