Ticto

Biblioteca de formulários customizável e validada para React.

Instalação

  1. Crie ou edite o arquivo .npmrc na raiz do seu projeto:

    @tictobrasil:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken="SEU_GITHUB_TOKEN"

  2. Faça login no registry do GitHub (necessário apenas uma vez):

    npm login --registry=https://npm.pkg.github.com
# Username: seu-usuario-github
# Password: seu-token-github (precisa ter permissão packages:read)

    Como gerar seu Token do GitHub

    1. Acesse suas configurações no GitHub

    - Entre em github.com/settings/tokens

    - Faça login se necessário

    2. Gere um novo token

    - Clique em "Generate new token"

    - Selecione "Generate new token (classic)"

    3. Configure o token
    • Dê um nome descritivo no campo "Note"
    • Em "Expiration", escolha a duração do token
    • Selecione os seguintes escopos:
      • repo (todos os subitens)
      • workflow
      • write:packages
      • delete:packages
    4. Finalize e copie o token
    • Clique em "Generate token" no final da página
    • IMPORTANTE: Copie o token gerado imediatamente
    • Guarde em local seguro - você não poderá vê-lo novamente

    ⚠️ Nunca compartilhe seu token ou o exponha publicamente!

    Acesso Restrito

    Para ter acesso ao pacote, você precisa fazer parte do time de Marketing no GitHub da Ticto.

    Entre em contato com seu líder técnico para solicitar acesso.

  3. Instale o pacote:

    npm install @tictobrasil/ticto-forms
# ou
yarn add @tictobrasil/ticto-forms

Uso Básico

import { Form } from '@tictobrasil/ticto-forms';

function App() {
  return (
    <Form
      config={{
        baseFields: {
          name: true,
          email: true,
          phone: true,
          document: true,
        },
        apiConfig: {
          submitUrl: 'https://webforms.ticto.com.br/api/forms/submit'
        }
      }}
      onSuccess={() => console.log('Sucesso!')}
      onError={(errors) => console.log('Erro:', errors)}
    />
  );
}

Configuração

Campos Base

{
  baseFields: {
    name?: boolean;    // Nome completo
    email?: boolean;   // E-mail
    phone?: boolean;   // Telefone com máscara
    document?: boolean; // CPF/CNPJ com validação
  }
}

Integrações HighLevel

{
  integrations: {
    highlevel: {
      enabled: boolean;
      customFields?: {
        faturamento?: {
          id: string;    // ID do campo
          field: string; // Nome do campo
        }
      }
    }
  }
}

Estilização de Inputs

{
  styles: {
    form: {
      container: "space-y-4 font-tomato text-sm"
    },
    input: {
      field: "block w-full rounded-full border border-transparent bg-[#F2F2F2] px-6 py-4 text-black outline-none transition-all placeholder:text-[#6D6D6D] focus:border-[#FF2689] focus:bg-white",
      error: "text-xs text-red-500"
    },
    select: {
      field: "block w-full rounded-full border border-transparent bg-[#F2F2F2] bg-arrow-select px-6 py-4 text-[#6D6D6D] outline-none transition-all focus:border-[#FF2689] focus:bg-white",
      error: "text-xs text-red-500"
    },
    button: {
      container: "actived-type !mt-6 w-full rounded-full py-4 font-tomato text-sm font-bold transition-shadow duration-300 hover:shadow-[0px_7px_34px_0px_#EC2C9F]"
    }
  }
},

Validações

  • Nome: Mínimo 2 caracteres
  • Email: Formato válido de email
  • Telefone: Formato (99) 99999-9999
  • CPF/CNPJ: Validação de dígitos verificadores
  • Faturamento: Seleção obrigatória quando habilitado

Segurança

  • Validação no cliente e servidor
  • Proteção contra spam via reCAPTCHA
  • Sanitização de dados