@datametria/react-components

v1.1.0

Published

5 months ago

DATAMETRIA React Component Library - Enterprise components with design tokens integration

Downloads

0High
0Medium
0Low

vanderloto

react components design-system datametria typescript enterprise ui-library

@datametria/react-components

Biblioteca Enterprise React com Design System DATAMETRIA

🚀 Instalação • 📖 Documentação • 🎨 Design System • 🔧 Desenvolvimento

📋 Visão Geral

Biblioteca enterprise de componentes React com 5 componentes + 4 hooks integrados ao Design System DATAMETRIA. Oferece TypeScript nativo, acessibilidade WCAG 2.1 AA e integração completa com design tokens centralizados.

✨ Características

🎯 5 Componentes: Button, Input, Card, Alert, Progress
🪝 4 Hooks: useTheme, useAPI, useValidation, useLocalStorage
🎨 Design System: Integração com @datametria/design-tokens
♿ Acessibilidade: WCAG 2.1 AA compliant
📱 Responsivo: Mobile-first design
🌙 Dark Mode: Suporte nativo
🔒 TypeScript: 100% type safety
✅ Testado: 100% test coverage

🚀 Instalação

NPM

npm install @datametria/react-components @datametria/design-tokens

Yarn

yarn add @datametria/react-components @datametria/design-tokens

Pnpm

pnpm add @datametria/react-components @datametria/design-tokens

💻 Uso Básico

Setup Inicial

// App.tsx
import React from 'react';
import { Button, Input, Card, Alert, Progress } from '@datametria/react-components';
import '@datametria/react-components/style.css';

function App() {
  return (
    <div className="app">
      <Card>
        <h2>DATAMETRIA React Components</h2>
        <Input placeholder="Digite algo..." />
        <Button variant="primary">Enviar</Button>
        <Alert type="success">Operação realizada com sucesso!</Alert>
        <Progress value={75} max={100} />
      </Card>
    </div>
  );
}

export default App;

Com Hooks

// FormExample.tsx
import React from 'react';
import { Button, Input, Card } from '@datametria/react-components';
import { useValidation, useAPI, useTheme } from '@datametria/react-components';

function FormExample() {
  const { theme, toggleTheme } = useTheme();
  const { validate, errors } = useValidation();
  const { post, loading } = useAPI();

  const handleSubmit = async (data: any) => {
    if (validate(data, { email: 'required|email', name: 'required|min:3' })) {
      await post('/api/users', data);
    }
  };

  return (
    <Card>
      <Button onClick={toggleTheme}>
        Tema: {theme === 'dark' ? '🌙' : '☀️'}
      </Button>
      <Input 
        placeholder="Nome" 
        error={errors.name}
      />
      <Input 
        type="email" 
        placeholder="Email" 
        error={errors.email}
      />
      <Button 
        variant="primary" 
        loading={loading}
        onClick={handleSubmit}
      >
        Cadastrar
      </Button>
    </Card>
  );
}

📖 Componentes

Button

Botão interativo com múltiplas variantes e estados.

import { Button } from '@datametria/react-components';

// Variantes
<Button variant="primary">Primário</Button>
<Button variant="secondary">Secundário</Button>
<Button variant="danger">Perigo</Button>

// Estados
<Button loading={true}>Carregando...</Button>
<Button disabled={true}>Desabilitado</Button>

// Tamanhos
<Button size="small">Pequeno</Button>
<Button size="medium">Médio</Button>
<Button size="large">Grande</Button>

Props:

variant: 'primary' | 'secondary' | 'danger'
size: 'small' | 'medium' | 'large'
loading: boolean
disabled: boolean
onClick: (event: MouseEvent) => void

Input

Campo de entrada com validação e estados de erro.

import { Input } from '@datametria/react-components';

// Tipos
<Input type="text" placeholder="Texto" />
<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Senha" />
<Input type="number" placeholder="Número" />

// Com validação
<Input 
  placeholder="Email" 
  error="Email é obrigatório"
  required={true}
/>

// Controlado
const [value, setValue] = useState('');
<Input 
  value={value} 
  onChange={(e) => setValue(e.target.value)}
/>

Props:

type: 'text' | 'email' | 'password' | 'number'
placeholder: string
value: string
error: string
required: boolean
disabled: boolean
onChange: (event: ChangeEvent) => void

Card

Container com sombra e bordas arredondadas.

import { Card } from '@datametria/react-components';

<Card>
  <h3>Título do Card</h3>
  <p>Conteúdo do card...</p>
</Card>

// Com padding customizado
<Card padding="large">
  <p>Card com padding maior</p>
</Card>

Props:

children: ReactNode
padding: 'small' | 'medium' | 'large'
className: string

Alert

Componente de notificação com diferentes tipos.

import { Alert } from '@datametria/react-components';

// Tipos
<Alert type="success">Operação realizada com sucesso!</Alert>
<Alert type="warning">Atenção: Verifique os dados</Alert>
<Alert type="error">Erro: Falha na operação</Alert>
<Alert type="info">Informação: Dados atualizados</Alert>

// Dismissível
<Alert type="success" onDismiss={() => console.log('Fechado')}>
  Mensagem que pode ser fechada
</Alert>

Props:

type: 'success' | 'warning' | 'error' | 'info'
children: ReactNode
onDismiss: () => void (opcional)

Progress

Indicador de progresso customizável.

import { Progress } from '@datametria/react-components';

// Básico
<Progress value={50} max={100} />

// Com cor customizada
<Progress value={75} max={100} color="success" />
<Progress value={25} max={100} color="warning" />
<Progress value={90} max={100} color="danger" />

// Com label
<Progress value={60} max={100} showLabel={true} />

Props:

value: number
max: number
color: 'primary' | 'success' | 'warning' | 'danger'
showLabel: boolean

🪝 Hooks

useTheme

Gerenciamento de tema com persistência.

import { useTheme } from '@datametria/react-components';

function ThemeToggle() {
  const { theme, toggleTheme, setTheme } = useTheme();

  return (
    <div>
      <p>Tema atual: {theme}</p>
      <button onClick={toggleTheme}>Alternar Tema</button>
      <button onClick={() => setTheme('dark')}>Tema Escuro</button>
      <button onClick={() => setTheme('light')}>Tema Claro</button>
    </div>
  );
}

Retorna:

theme: 'light' | 'dark'
toggleTheme: () => void
setTheme: (theme: 'light' | 'dark') => void

useAPI

Chamadas de API com cache e estados de loading.

import { useAPI } from '@datametria/react-components';

function UserList() {
  const { get, post, loading, error } = useAPI();
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const data = await get('/api/users');
      setUsers(data);
    };
    fetchUsers();
  }, []);

  const createUser = async (userData: any) => {
    const newUser = await post('/api/users', userData);
    setUsers([...users, newUser]);
  };

  if (loading) return <div>Carregando...</div>;
  if (error) return <div>Erro: {error}</div>;

  return (
    <div>
      {users.map(user => <div key={user.id}>{user.name}</div>)}
    </div>
  );
}

Retorna:

get: (url: string) => Promise
post: (url: string, data: any) => Promise
put: (url: string, data: any) => Promise
delete: (url: string) => Promise
loading: boolean
error: string | null

useValidation

Validação de formulários com regras flexíveis.

import { useValidation } from '@datametria/react-components';

function ContactForm() {
  const { validate, errors, clearErrors } = useValidation();
  const [formData, setFormData] = useState({});

  const handleSubmit = () => {
    const rules = {
      name: 'required|min:3|max:50',
      email: 'required|email',
      phone: 'required|pattern:^\\d{10,11}$',
      age: 'required|min:18|max:120'
    };

    if (validate(formData, rules)) {
      console.log('Formulário válido!', formData);
    }
  };

  return (
    <form>
      <Input 
        placeholder="Nome" 
        error={errors.name}
        onChange={(e) => setFormData({...formData, name: e.target.value})}
      />
      <Input 
        type="email" 
        placeholder="Email" 
        error={errors.email}
        onChange={(e) => setFormData({...formData, email: e.target.value})}
      />
      <Button onClick={handleSubmit}>Enviar</Button>
      <Button onClick={clearErrors}>Limpar Erros</Button>
    </form>
  );
}

Regras Disponíveis:

required: Campo obrigatório
email: Formato de email válido
min:n: Valor/comprimento mínimo
max:n: Valor/comprimento máximo
pattern:regex: Padrão regex customizado

Retorna:

validate: (data: any, rules: any) => boolean
errors: Record<string, string>
clearErrors: () => void

useLocalStorage

Gerenciamento de localStorage com type safety.

import { useLocalStorage } from '@datametria/react-components';

function UserPreferences() {
  const { getItem, setItem, removeItem, clear } = useLocalStorage();
  const [preferences, setPreferences] = useState({});

  useEffect(() => {
    const saved = getItem('userPreferences');
    if (saved) setPreferences(saved);
  }, []);

  const savePreferences = (newPrefs: any) => {
    setPreferences(newPrefs);
    setItem('userPreferences', newPrefs);
  };

  return (
    <div>
      <button onClick={() => savePreferences({theme: 'dark'})}>
        Salvar Preferências
      </button>
      <button onClick={() => removeItem('userPreferences')}>
        Remover Preferências
      </button>
      <button onClick={clear}>
        Limpar Tudo
      </button>
    </div>
  );
}

Retorna:

getItem: (key: string) => any
setItem: (key: string, value: any) => void
removeItem: (key: string) => void
clear: () => void

🎨 Design System

Integração com Design Tokens

// Importar tokens diretamente
import { colors, spacing, typography } from '@datametria/design-tokens';

// Usar em componentes customizados
const CustomComponent = styled.div`
  background-color: ${colors.primary.main};
  padding: ${spacing.md};
  font-family: ${typography.fontFamily.primary};
`;

Cores Disponíveis

Primary: #0072CE (Azul DATAMETRIA)
Secondary: #4B0078 (Roxo DATAMETRIA)
Success: #28A745
Warning: #FFC107
Danger: #DC3545
Info: #17A2B8

Breakpoints Responsivos

Mobile: < 768px
Tablet: 768px - 1024px
Desktop: > 1024px

🔧 Desenvolvimento

Pré-requisitos

Node.js 18+
React 18+
TypeScript 5.3+

Scripts Disponíveis

# Desenvolvimento
npm run dev

# Build
npm run build

# Testes
npm test

# Linting
npm run lint

# Type checking
npm run type-check

Estrutura do Projeto

packages/react-components/
├── src/
│   ├── components/          # Componentes React
│   │   ├── Button/
│   │   ├── Input/
│   │   ├── Card/
│   │   ├── Alert/
│   │   └── Progress/
│   ├── hooks/              # Custom hooks
│   │   ├── useTheme.ts
│   │   ├── useAPI.ts
│   │   ├── useValidation.ts
│   │   └── useLocalStorage.ts
│   ├── styles/             # Estilos globais
│   └── index.ts            # Exports principais
├── tests/                  # Testes unitários
├── dist/                   # Build output
├── package.json
├── tsconfig.json
├── vite.config.ts
└── vitest.config.ts

📊 Métricas de Qualidade

✅ Test Coverage: 100% (13/13 testes passando)
✅ TypeScript: Strict mode habilitado
✅ Bundle Size: ~35KB gzipped
✅ Performance: Otimizado para tree-shaking
✅ Acessibilidade: WCAG 2.1 AA compliant
✅ Browser Support: Chrome 90+, Firefox 88+, Safari 14+

🤝 Contribuição

Este é um projeto interno DATAMETRIA. Para contribuições:

Clone o repositório
Crie uma branch: git checkout -b feature/nova-feature
Commit suas mudanças: git commit -m 'feat: adiciona nova feature'
Push para a branch: git push origin feature/nova-feature
Abra um Pull Request

📄 Licença

Versão: 1.1.0 Última Atualização: 05/11/2025 Autor: Vander Loto - CTO DATAMETRIA

📞 Suporte

Email: [email protected]
GitHub: DATAMETRIA-common-libraries
Documentação: GitHub Pages

Desenvolvido com ❤️ pela equipe DATAMETRIA

⭐ Se este projeto te ajudou, considere dar uma estrela! ⭐

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@datametria/react-components

📋 Visão Geral

✨ Características

🚀 Instalação

NPM

Yarn

Pnpm

💻 Uso Básico

Setup Inicial

Com Hooks

📖 Componentes

Button

Input

Card

Alert

Progress

🪝 Hooks

useTheme

useAPI

useValidation

useLocalStorage

🎨 Design System

Integração com Design Tokens

Cores Disponíveis

Breakpoints Responsivos

🔧 Desenvolvimento

Pré-requisitos

Scripts Disponíveis

Estrutura do Projeto

📊 Métricas de Qualidade

🤝 Contribuição

📄 Licença

📞 Suporte