mitre-form-component 0.0.1 → 0.0.2

package/src/components/Form/index.tsx

@@ -1,215 +0,0 @@
-'use client';
-
-import React, { useState } from "react";
-import { useError } from "../hooks/useError";
-import { useForm, SubmitHandler } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
-
-import { 
-    FormContainer, 
-    HeaderContainer, 
-    ButtonContainer, 
-    Form, 
-    Title, 
-    Text 
-} from "./styles";
-import FontLoader, { GlobalStyles } from "../styles/global";
-
-import { Input } from "../Input";
-import { Button } from "../Button";
-import { Alert } from "../Alert";
-
-export interface MitreFormComponentProps {
-  productId: string;
-  apiUrl: string;
-  apiToken: string;
-  utm_source: string;
-  utm_medium: string;
-  utm_campaign: string;
-  utm_term: string;
-  showHeader?: boolean;
-  colorPrimary?: string;
-  textColor?: string;
-}
-
-const schema = yup.object().shape({
-  name: yup.string().required("Nome é obrigatório"),
-  email: yup.string().required("Email é obrigatório").email("Email inválido"),
-  phone: yup.string().required("Telefone é obrigatório")
-  .test(
-    'min-digits',
-    'Número de telefone inválido!',
-    (value) => {
-      const digitsOnly = value?.replace(/\D/g, '') || '';
-      //TODO melhorar essa lógica com algum regex
-      return digitsOnly.length >= 8
-    })
-});
-
-const MitreFormComponent = React.forwardRef<HTMLDivElement, MitreFormComponentProps>(({
-  productId,
-  apiUrl,
-  apiToken,
-  utm_source,
-  utm_medium,
-  utm_campaign,
-  utm_term,
-  showHeader =  true,
-  colorPrimary = "#F6C76B",
-  textColor = "#2F2F2F",
-}, ref) => {
-  const [loading, setIsLoading] = useState(false);
-  const { error, handleError, clearError } = useError();
-  const [successMessage, setSuccessMessage] = useState('');
-
-  const { register, handleSubmit, formState: { errors }, reset, watch } = useForm({
-    resolver: yupResolver(schema),
-  });
-
-  const phoneValue = watch("phone");
-
-  const sendMessage: SubmitHandler<{ name: string; email: string; phone: string; }> = async (data) => {
-    const { name, email, phone } = data;
-    const message = "Gostaria de mais informações sobre o produto";
-
-    try {
-      setIsLoading(true);
-
-      if (!productId || !utm_source || !utm_medium || !utm_campaign || !utm_term || !apiToken) {
-        throw new Error("Parâmetros obrigatórios não informados");
-      }
-
-      const response = await fetch(`${apiUrl}/leads`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Basic ${apiToken}`,
-        },
-        body: JSON.stringify({
-          name,
-          email,
-          phone,
-          message,
-          productId,
-          utm_source,
-          utm_medium,
-          utm_campaign,
-          utm_term,
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error("Falha ao enviar a mensagem!");
-      }
-
-      setSuccessMessage("Mensagem enviada com sucesso!");
-      reset();
-    } catch (err) {
-      handleError(err);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-      <>
-        <FontLoader />
-        <GlobalStyles />
-
-        {error && (
-          <Alert 
-            type="error" 
-            dismissible
-            onDismiss={clearError}
-            autoDismiss={5000}
-          >
-            {error!.message}
-          </Alert>
-        )}
-
-        {successMessage && (
-          <Alert 
-            type="success"
-            dismissible
-            onDismiss={() => setSuccessMessage('')}
-            autoDismiss={5000}
-          >
-            {successMessage}
-          </Alert>
-        )}
-
-        <FormContainer ref={ref} >
-          {showHeader && 
-            <HeaderContainer>
-              <Title $textColor={textColor}>Atendimento por mensagem</Title>
-
-              <Text $textColor={textColor}>Informe seus dados e retornaremos a mensagem.</Text>
-            </HeaderContainer>
-          }
-
-          <Form $textColor={textColor} onSubmit={handleSubmit(sendMessage)} noValidate>
-            <Input
-              id="name"
-              label="Nome *"
-              placeholder="Digite seu nome"
-              {...register("name")}
-              borderColor={colorPrimary}
-              textColor={textColor}
-              error={errors.name?.message}
-              autoComplete="name"
-              required
-            />
-
-            <Input
-              id="email"
-              label="Email *"
-              type="email"
-              placeholder="exemplo@email.com"
-              {...register("email")}
-              borderColor={colorPrimary}
-              textColor={textColor}
-              error={errors.email?.message}
-              autoComplete="email"
-              required
-            />
-
-            <Input
-              id="phone"
-              label="Telefone *"
-              placeholder="(11) 00000-0000"
-              mask="phone"
-              {...register("phone")}
-              borderColor={colorPrimary}
-              textColor={textColor}
-              error={errors.phone?.message}
-              required
-              value={phoneValue}
-            />
-
-            <h6>* Campos de preenchimento obrigatório.</h6>
-
-            <ButtonContainer>
-              <Button bgColor={colorPrimary} color={textColor} type="submit" isSubmitting={loading}>
-                Enviar mensagem
-              </Button>
-            </ButtonContainer>
-
-            <p>A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contatá-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa{ ' '}
-            <a
-              href="https://www.mitrerealty.com.br/politica-de-privacidade"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Política de Privacidade
-            </a>. Ao clicar em {'"'}enviar{'"'}, você concorda em permitir que a Mitre Realty, armazene e processe os dados pessoais fornecidos por você para finalidade informada</p>
-
-          </Form>
-        </FormContainer>
-      </>
-  );
-});
-
-MitreFormComponent.displayName = "MitreFormComponent";
-
-export default MitreFormComponent;

package/src/components/Form/styles.ts

@@ -1,99 +0,0 @@
-import { flex, opacityEffect } from "../styles/utils";
-import styled from "styled-components";
-
-export const FormContainer = styled.div`
-  ${flex("column")}
-  align-items: stretch;
-  justify-content: flex-start;
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  /* Hide scrollbars for WebKit browsers */
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Hide scrollbars for Firefox */
-  scrollbar-width: none;
-
-  box-sizing: border-box;
-`;
-
-export const HeaderContainer = styled.div`
-  margin-bottom: 1rem;
-`;
-
-export const ButtonContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  margin-top: 0.75rem;
-`;
-
-export const Form = styled.form<{ $textColor: string }>`
-  label {
-    font-weight: 700;
-  }
-
-  input {
-    background: white;
-    margin-bottom: 0.75rem;
-  }
-
-  p {
-    font-family: "Montserrat", sans-serif;
-    font-style: italic;
-    font-weight: 200;
-    font-size: 0.8rem;
-    color: ${(props) => props.$textColor || "var(--black)"};
-    text-align: start;
-  }
-
-  a {
-    font-family: "Montserrat", sans-serif;
-    font-style: italic;
-    font-weight: 200;
-    font-size: 0.8rem;
-    color: ${(props) => props.$textColor || "var(--black)"};
-  }
-
-  h6 {
-    text-align: start;
-    margin-left: 10px;
-    color: ${(props) => props.$textColor || "var(--black)"};
-  }
-
-  & > div {
-    margin-bottom: 10px;,
-  }
-
-  button {
-    ${opacityEffect}
-    color: var(--black);
-    font-weight: 600;
-    border: none;
-    border-radius: 8px;
-    width: 60%;
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
-`;
-
-export const Title = styled.h2<{ $textColor: string }>`
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 24px;
-  letter-spacing: 0em;
-  color: ${(props) => props.$textColor || "var(--black)"};
-`;
-
-export const Text = styled.p<{ $textColor: string }>`
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 23px;
-  letter-spacing: 0em;
-  margin-top: 10px;
-  color: ${(props) => props.$textColor || "var(--black)"};
-`;

package/src/components/Input/index.tsx

@@ -1,132 +0,0 @@
-import {
-  FormEvent,
-  forwardRef,
-  ForwardRefRenderFunction,
-  InputHTMLAttributes,
-  useCallback,
-  useRef,
-} from "react";
-import { FieldError } from "react-hook-form";
-import { cep, cpf, currency, date } from "./masks";
-
-import 'react-phone-input-2/lib/style.css'
-
-import {
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Input as FormInput,
-  FormPhoneInput
-} from "./styles";
-
-type InputType =
-  | "text"
-  | "email"
-  | "password"
-  | "number"
-  | "tel"
-  | "url"
-  | "date"
-  | "time"
-  | "datetime-local";
-
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  id: string;
-  label?: string;
-  error?: string | FieldError;
-  showErrorMessage?: boolean;
-  borderColor: string;
-  textColor?: string;
-
-  mask?: "cep" | "currency" | "cpf" | "phone" | "date";
-  type?: InputType;
-}
-
-const InputBase: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
-  { id, label, error, showErrorMessage = true, borderColor, textColor, mask = "", type = "text", ...rest },
-  ref
-) => {
-  const phoneInputRef = useRef<{ input: HTMLInputElement }>(null);
-  const { onChange, name } = rest;
-
-  const handleKeyUp = useCallback(
-    (e: FormEvent<HTMLInputElement>) => {
-      if (mask === "cep") cep(e);
-      if (mask === "currency") currency(e);
-      if (mask === "cpf") cpf(e);
-      if (mask === "date") date(e);
-    },
-    [mask]
-  );
-
-  const handlePhoneChange = useCallback((value: string) => {
-    onChange?.({ target: { value, name } } as React.ChangeEvent<HTMLInputElement>);
-
-    if (phoneInputRef.current?.input) {
-      phoneInputRef.current.input.value = value;
-    }
-  }, [onChange, name]);
-
-  return (
-    <FormControl isInvalid={!!error}>
-      {!!label && <FormLabel htmlFor={id} $textColor={textColor}>{label}</FormLabel>}
-
-      {!mask ? (
-        <FormInput
-          id={id}
-          ref={ref}
-          type={type} 
-          $bordercolor={borderColor}
-          aria-invalid={!!error && showErrorMessage ? "true" : "false"}
-          autoComplete={rest.autoComplete || "on"}
-          {...rest}
-        />
-      ) : mask === 'phone' ? (
-        <FormPhoneInput
-          country={"br"}
-          $bordercolor={borderColor}
-          placeholder={rest.placeholder}
-          aria-invalid={!!error && showErrorMessage ? "true" : "false"}
-          isInvalid={!!error}
-          onChange={handlePhoneChange}
-          masks={{
-            br: "(..) .....-....",}}
-          inputProps={{
-            id,
-            name: 'phone',
-            required: true,
-            autoFocus: true,
-            autoComplete: "tel",
-            ref: phoneInputRef,
-          }}
-          //TODO no futuro enviar com o ddi, só retirar o disableCountryCode e disableCountryGuess
-          dropdownStyle={{
-            color: textColor,
-          }}
-          disableCountryGuess={true}
-          disableCountryCode={true}
-          value={rest.value as string} 
-        />
-      ) : (
-        <FormInput
-          id={id}
-          ref={ref}
-          type={type} 
-          $bordercolor={borderColor}
-          aria-invalid={!!error && showErrorMessage ? "true" : "false"}
-          onKeyUp={handleKeyUp}
-          autoComplete={rest.autoComplete || "on"}
-          {...rest}
-        />
-      )}
-
-      {!!error && showErrorMessage && (
-        <FormErrorMessage data-testid="error-message">
-          {typeof error === 'string' ? error : error.message}
-        </FormErrorMessage>
-      )}
-    </FormControl>
-  );
-};
-
-export const Input = forwardRef(InputBase);

package/src/components/Input/masks.ts

@@ -1,52 +0,0 @@
-import { FormEvent } from "react";
-
-export function cep(e: FormEvent<HTMLInputElement>) {
-  e.currentTarget.maxLength = 9;
-  let value = e.currentTarget.value;
-  value = value.replace(/\D/g, "");
-  value = value.replace(/^(\d{5})(\d)/, "$1-$2");
-  e.currentTarget.value = value;
-  return e;
-}
-
-export function currency(e: FormEvent<HTMLInputElement>) {
-  let value = e.currentTarget.value;
-  value = value.replace(/\D/g, "");
-  value = value.replace(/(\d)(\d{2})$/, "$1,$2");
-  value = value.replace(/(?=(\d{3})+(\D))\B/g, ".");
-
-  e.currentTarget.value = value;
-  return e;
-}
-
-export function cpf(e: FormEvent<HTMLInputElement>) {
-  e.currentTarget.maxLength = 14;
-  let value = e.currentTarget.value;
-  if (!value.match(/^(\d{3}).(\d{3}).(\d{3})-(\d{2})$/)) {
-    value = value.replace(/\D/g, "");
-    value = value.replace(/(\d{3})(\d)/, "$1.$2");
-    value = value.replace(/(\d{3})(\d)/, "$1.$2");
-    value = value.replace(/(\d{3})(\d{2})$/, "$1-$2");
-
-    e.currentTarget.value = value;
-  }
-  return e;
-}
-
-export function date(e: FormEvent<HTMLInputElement>) {
-  let value = e.currentTarget.value;
-  value = value.replace(/\D/g, "");
-  value = value.replace(/(\d{2})(\d)/, "$1/$2");
-  value = value.replace(/(\d{2})(\d)/, "$1/$2");
-  e.currentTarget.value = value;
-  return e;
-}
-
-export function phone(e: FormEvent<HTMLInputElement>) {
-  let value = e.currentTarget.value;
-  value = value.replace(/\D/g, "");
-  value = value.replace(/(\d{2})(\d)/, "$1/$2");
-  value = value.replace(/(\d{2})(\d)/, "$1/$2");
-  e.currentTarget.value = value;
-  return e;
-}

package/src/components/Input/styles.ts

@@ -1,201 +0,0 @@
-import styled, { css } from "styled-components";
-import { InputHTMLAttributes } from "react";
-
-import PhoneInput from "react-phone-input-2";
-
-type InputProps = {
-  isInvalid?: boolean;
-  bordercolor?: string;
-};
-
-export const FormLabel = styled.label<InputProps & { $textColor?: string }>`
-  font-family: "Montserrat", sans-serif;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1rem;
-  color: ${(props) =>
-    props.isInvalid ? "var(--red)" : props.$textColor || "var(--black)"};
-  display: block;
-  margin-bottom: 0.5rem;
-  text-align: left;
-`;
-
-export const Input = styled.input<
-  InputHTMLAttributes<HTMLInputElement> & { $bordercolor?: string }
->`
-  font-family: "Montserrat", sans-serif;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  background: var(--gray-500);
-  color: var(--black);
-  padding: 0.5rem;
-  border-radius: 0.125rem;
-  border: 1px solid transparent;
-  display: block;
-  height: 3.125rem;
-  width: 100%;
-
-  &:focus {
-    border-radius: 0.125rem;
-    border: 2px solid ${(props) => props.$bordercolor || "var(--yellow-500)"};
-    outline: none;
-  }
-
-  &::placeholder {
-    font-size: 1rem;
-    line-height: 1.5rem;
-    color: #b6b6b6;
-    font-weight: 800;
-  }
-
-  /* Autofill styles */
-  &:-webkit-autofill {
-    background: var(--gray-500) !important;
-    color: var(--black) !important;
-    -webkit-text-fill-color: var(--black) !important;
-    transition: background-color 5000s ease-in-out 0s; /* Prevent flashing */
-  }
-
-  &:-webkit-autofill::first-line {
-    font-family: "Montserrat", sans-serif;
-    font-size: 1rem;
-    font-weight: 500;
-  }
-`;
-
-export const FormPhoneInput = styled(PhoneInput)<
-  InputProps & { $bordercolor?: string; $textColor?: string }
->`
-  .form-control {
-    background: white;
-    color: ${(props) =>
-      props.isInvalid ? "var(--red)" : props.$textColor || "var(--black)"};
-    padding: 0.5rem;
-    border-radius: 0.125rem;
-    border: 1px solid transparent;
-    height: 3.125rem;
-    width: 100%;
-    padding-left: 4rem;
-    font-family: "Montserrat", sans-serif;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    text &:focus,
-    &:focus-within {
-      border-radius: 0.125rem;
-      border: 2px solid
-        ${(props) =>
-          !props.isValid
-            ? "var(--red)"
-            : props.$bordercolor || "var(--yellow-500)"};
-    }
-
-    &::placeholder {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      color: #b6b6b6;
-      font-weight: 800;
-    }
-
-    /* Autofill styles */
-    &:-webkit-autofill {
-      background: var(--gray-500) !important;
-      color: var(--black) !important;
-      -webkit-text-fill-color: var(--black) !important;
-      transition: background-color 5000s ease-in-out 0s; /* Prevent flashing */
-    }
-
-    &:-webkit-autofill::first-line {
-      font-family: "Montserrat", sans-serif;
-      font-size: 1rem;
-      font-weight: 500;
-    }
-  }
-
-  &:focus-within {
-    .form-control {
-      border: 2px solid
-        ${(props) =>
-          props.isInvalid
-            ? "var(--red)"
-            : props.$bordercolor || "var(--yellow-500)"};
-    }
-  }
-
-  .flag-dropdown {
-    background: white;
-    border: none;
-    padding: 0.5rem;
-    margin: 0.25rem;
-    cursor: pointer;
-
-    &:focus-within {
-      outline: none;
-    }
-  }
-`;
-
-export const FormErrorMessage = styled.small`
-  font-size: 0.75rem;
-  line-height: 1.125rem;
-  color: var(--red);
-  margin-top: 0.25rem;
-  display: block;
-`;
-
-export const FormControl = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["isInvalid", "$bordercolor"].includes(prop),
-})<{ isInvalid?: boolean; $bordercolor?: string }>`
-  ${FormLabel} {
-    ${(props) =>
-      props.isInvalid &&
-      css`
-        color: var(--red);
-      `};
-  }
-
-  ${Input} {
-    ${(props) =>
-      props.isInvalid &&
-      css`
-        border: 1px solid var(--red);
-
-        &:not(:focus)::placeholder {
-          color: var(--red);
-          font-weight: 600;
-        }
-      `};
-
-    &:focus {
-      ${(props) =>
-        props.isInvalid &&
-        css`
-          border: 1px solid var(--red);
-        `};
-    }
-  }
-
-  ${FormPhoneInput} {
-    ${(props) =>
-      props.isInvalid &&
-      css`
-        border: 1px solid var(--red);
-
-        &:not(:focus)::placeholder {
-          color: var(--red);
-          font-weight: 600;
-        }
-      `};
-
-    &:focus {
-      ${(props) =>
-        props.isInvalid &&
-        css`
-          border: 1px solid var(--red);
-        `};
-    }
-  }
-`;

package/src/components/hooks/useError.ts

@@ -1,15 +0,0 @@
-import { useState } from "react";
-
-export function useError() {
-  const [error, setError] = useState<Error | null>(null);
-
-  const handleError = (err: unknown) => {
-    const errorObj = err instanceof Error ? err : new Error(String(err));
-    setError(errorObj);
-    console.error(errorObj);
-  };
-
-  const clearError = () => setError(null);
-
-  return { error, handleError, clearError };
-}