Generic Form Components

Uma biblioteca de componentes de formulário genéricos e reutilizáveis para React com TypeScript.

Características

• 🏗️ Componentes modulares: Input, TextArea, Select, Button
• 📝 Sistema de formulário: Gerenciamento automático de estado
• ✅ Validação integrada: Suporte a regras de validação customizadas
• 🎨 Estilização flexível: Classes CSS padrão compatíveis com Tailwind CSS
• 🔗 Componentes conectados: FormInput, FormTextArea, FormSelect, SubmitButton
• 📦 TypeScript: Tipagem completa para melhor experiência de desenvolvimento

Instalação

# Usando yarn (recomendado)
yarn add generic-form-components

# Ou usando npm
npm install generic-form-components

Uso Básico

Importar componentes

import { 
  Form, 
  FormInput, 
  FormTextArea, 
  FormSelect, 
  SubmitButton 
} from 'generic-form-components';

Exemplo de formulário

import React from 'react';
import { 
  Form, 
  FormInput, 
  FormTextArea, 
  FormSelect, 
  SubmitButton,
  SelectOption 
} from 'generic-form-components';

const MyForm = () => {
  const options: SelectOption[] = [
    { value: 'option1', label: 'Opção 1' },
    { value: 'option2', label: 'Opção 2' }
  ];

  const validationRules = {
    name: (value: string) => {
      if (!value.trim()) return 'Nome é obrigatório';
      return undefined;
    }
  };

  const handleSubmit = (data: any) => {
    console.log('Dados:', data);
  };

  return (
    <Form
      initialValues={{ name: '', email: '', country: '' }}
      validationRules={validationRules}
      onSubmit={handleSubmit}
    >
      <FormInput
        name="name"
        label="Nome"
        placeholder="Digite seu nome"
        required
      />
      
      <FormInput
        name="email"
        type="email"
        label="Email"
        placeholder="[email protected]"
      />
      
      <FormSelect
        name="country"
        label="País"
        placeholder="Selecione"
        options={options}
      />
      
      <FormTextArea
        name="message"
        label="Mensagem"
        rows={4}
      />
      
      <SubmitButton>
        Enviar
      </SubmitButton>
    </Form>
  );
};

Componentes Disponíveis

Form

Componente principal que gerencia o estado do formulário.

<Form
  onSubmit={(data) => void}           // Função obrigatória
  initialValues?: FormData            // Valores iniciais
  validationRules?: ValidationRules   // Regras de validação
  className?: string                  // Classes CSS adicionais
>
  {children}
</Form>

FormInput

Input conectado ao contexto do formulário.

<FormInput
  name="campo"                       // Nome obrigatório
  type?: "text" | "email" | "password"
  label?: string                     // Rótulo do campo
  placeholder?: string               // Texto placeholder
  required?: boolean                 // Campo obrigatório
  disabled?: boolean                 // Campo desabilitado
/>

FormTextArea

TextArea conectado ao contexto do formulário.

<FormTextArea
  name="campo"
  label?: string
  placeholder?: string
  rows?: number                      // Número de linhas (padrão: 3)
  resize?: "none" | "both"           // Controle de redimensionamento
  required?: boolean
  disabled?: boolean
/>

FormSelect

Select conectado ao contexto do formulário.

<FormSelect
  name="campo"
  label?: string
  placeholder?: string               // Opção padrão
  options: SelectOption[]            // Array de opções obrigatório
  required?: boolean
  disabled?: boolean
/>

SubmitButton

Botão de envio com indicação de loading automático.

<SubmitButton
  variant?: "primary" | "secondary" | "danger" | "success"
  size?: "small" | "medium" | "large"
  className?: string
>
  Texto do botão
</SubmitButton>

Tipos

interface SelectOption {
  value: string | number;
  label: string;
}

interface ValidationRules {
  [fieldName: string]: (value: any) => string | unsigned;
}

interface FormData {
  [key: string]: any;
}

Validação

A validação é baseada em funções que recebem o valor do campo e retornam uma string de erro ou undefined:

const validationRules = {
  email: (value: string) => {
    if (!value.trim()) return 'Email é obrigatório';
    if (!/\S+@\S+\.\S+/.test(value)) return 'Email inválido';
    return undefined; // Sem erro
  },
  
  age: (value: number) => {
    if (!value) return 'Idade é obrigatória';
    if (value < 18) return 'Deve ser maior de 18 anos';
    return undefined;
  }
};

Estilização

Os componentes usam classes Tailwind CSS por padrão. Você pode customizar através da prop className ou sobrescrever os estilos CSS.

Build e Development

# Instalar dependências
yarn install

# Build da biblioteca
yarn build

# Modo desenvolvimento (watch mode)
yarn dev

# Limpar diretório build
yarn clean

Licença

MIT