Overview

Não excluí codigo da implementação passada, todo o código que eu criei para o formulário está dentro do diretório src/SIGNUP para facilitar o review, quando a PR for aprovada, eu posso mover os arquivos para seus devidos lugares, e dar merge.

Feat: Agora a escolha de ser mentor ou mentorado e o formulário de signup ficam na mesma página /register.

Feat: Criei um contexto provendo qual step o usuário está (0-1-2) no momento, poderia ter usado o próprio contexto do React Hook Form mas não me pareceu semântico.

No component/page RegisterPage, eu renderizei o grupo de inputs de cada etapa do formulario com base no formCurrentStep que vem do contexto que citei acima.

<div className="mb-3">
  {formCurrentStep === 0 && <Personal />}
  {formCurrentStep === 1 && (
    <Location
      cityFactory={City}
      countryFactory={Country}
      skillsFactory={Skills}
      stateFactory={State}
    />
  )}
  {formCurrentStep === 2 && <Professional />}
</div>

Por conta dos elementos estarem sendos montados e remontados, eu tive que instanciar as factories de cada input fora do componente do step, e passar ele como props (Componente <Location /> por exemplo) caso contrário seus states e dependências ficariam sendo resetadas ao navegar pelos steps, por estarem sendo remontados.

Validação

Para fazer a validação de cada step, eu fiz eles de forma manual através da função trigger() do useForm.

Eu criei um objeto armazenando arrays com os campos que estão sendos validados em cada step.
Para validar os campos do step atual, eu iterei sobre o array do step atual, dando trigger em cada campo.

export const validationPerStep: Record<number, (keyof IFormValues)[]> = {
  0: [
    "firstName",
    "lastName",
    "email",
    "password",
    "repeatPassword",
    "isTermsAccepted",
  ],
  1: ["country", "state", "city", "birthDate", "skills"],
  2: ["linkedin", "github", "description"],
};

// ...

const handleActionButton = async () => {
  const allStepValidations = validationPerStep[formCurrentStep].map(field =>
    trigger(field)
  );
  const allStepValidationsResult = await Promise.all(allStepValidations);
  const allValidationsPassed = allStepValidationsResult.every(Boolean);
  if (allValidationsPassed)
    return setFormCurrentStep(currentStep => currentStep + 1);
};

Quando usuário não está no último step, renderiza botão Próximo que chama essa função handleActionButton
Quando usuário está no último step, renderiza botão Enviar que é do type "submit" e ativa o submit do form.

Checar

O resultado desse submit está sendo logado no console atualmente, para facilitar o review, ao aprovar a PR, vou integrar ele com a API.

Checar validações, se aprovado, vou passar para o time de UX, criar os textos de validação e placeholder de forma mais trabalhada.

Na página RegisterPage, eu coloquei um elemento a mais, de escolher entre mentor e mentorado, que permanece durante todo fluxo de signup, você pode encontrar buscando pelo elemento TextToggle.

Em alguns elementos precisei colocar cores no style em vez da classe por causa da sobreposição do CSS.

Todas as validações dos campos estão em: src/SIGNUP_SRC/forms/signup/validations.

Notas

Como eu custumo criar meus componentes, as classes, estilos e atributos mecânicos do componente, ficam dentro do componente, e as classes, estilos e atributos de estilização são passados na hora de usar o elemento, fica mais fácil de dar manutenção, todo a estilização fica no mesmo arquivo.

Feat: Eu abstraí a lógica de cada input mais complexo, e joguei dentro do seu factory, onde você passa as dependências necessárias, e ele retorna os métodos e propriedades que serão úteis para compor o formulário.

Você pode checar isso que eu falei na página RegisterPage onde eu instancio as factories do input Country, State, City e Skills.

// src/components/_Layout/RegisterPage.tsx
const Country = useCountriesFactory(methods);
const State = useStatesFactory(methods, geoStatesOptions);
const City = useCitiesFactory(methods, geoCitiesOptions);
const Skills = useSkillsFactory(methods);

Dessa forma consigo abstrair blocos de códigos repetidos e que deixariam o corpo do componente muito verboso, e crio uma interface mais fácil de se trabalhar, debugar, e extender.

// src/SIGNUP_SRC/steps/Location.tsx
<Controller
  name="country"
  control={control}
  render={({ field }) => (
    <Input.Select
      id={Country.inputId}
      field={field}
      isLoading={Country.isLoading}
      options={Country.options ?? null}
      noOptionsMessage="Nenhum país encontrado."
      placeholder="Selecione um país"
      defaultValue="Brasil"
      tabIndex={20}
    />
  )}
/>
// ...

No arquivo SIGNUP_SRC/types/units/useGeo.ts ta a tipagem de todos os métodos genéricos, e podem ser importados para compor o retorno de uma factory.

// SIGNUP_SRC/steps/factories/useStatesFactory/types.ts
import {
  InputId,
  Errors,
  SelectOptions,
  GetFieldController,
} from "SIGNUP_SRC/types/units/useGeo";

export type StatesFactoryMethods = Pretify<
  InputId & Errors & SelectOptions & GetFieldController & CustomMethods
>;

type CustomMethods = {
  userAlreadyChooseState: boolean;
};

Propostas

• Diretório para providers personalizados a nível rota em vez de toda aplicação. Ex: src/providers/signup/register/index.tsx.

• Diretório para forms, toda vez que tiver um form, colocar todos os arquivos relacionados apenas desse form, nesse diretório src/forms/NOME_DO_FORMULARIO/*.
  Ex: SIGNUP_SRC/forms/signup/*