@fabio.caffarello/react-design-system 1.7.0 → 1.8.0

package/src/docs/ComponentComposition.mdx

@@ -0,0 +1,381 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Design System/Component Composition" />
+
+# Component Composition Guide
+
+Este guia explica como compor componentes do React Design System para criar interfaces complexas e reutilizáveis.
+
+## Princípios de Composição
+
+### 1. Atomic Design Hierarchy
+
+Sempre respeite a hierarquia do Atomic Design:
+
+```
+Atoms → Molecules → Organisms → Pages
+```
+
+### 2. Composição sobre Configuração
+
+Prefira compor componentes simples em vez de criar componentes super configuráveis:
+
+```tsx
+// ✅ Correto: Compor
+function UserCard({ user }) {
+  return (
+    <Card padding="large">
+      <Avatar src={user.avatar} />
+      <Text>{user.name}</Text>
+      <Button>View Profile</Button>
+    </Card>
+  );
+}
+
+// ❌ Evitar: Super configurável
+function UserCard({ user, showAvatar, showName, showButton, ... }) {
+  // Muitas props condicionais
+}
+```
+
+## Padrões de Composição
+
+### Padrão 1: Container + Content
+
+```tsx
+import { Card, Text, Button } from '@fabio.caffarello/react-design-system';
+
+function ProductCard({ product }) {
+  return (
+    <Card padding="large" variant="hover">
+      <img src={product.image} alt={product.name} />
+      <Text variant="heading">{product.name}</Text>
+      <Text>{product.description}</Text>
+      <Button variant="primary">Add to Cart</Button>
+    </Card>
+  );
+}
+```
+
+### Padrão 2: Form Composition
+
+```tsx
+import { Form, Input, Label, Button, Card } from '@fabio.caffarello/react-design-system';
+
+function LoginForm() {
+  return (
+    <Card padding="large">
+      <Form onSubmit={handleSubmit}>
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" type="email" required />
+        
+        <Label htmlFor="password">Password</Label>
+        <Input id="password" type="password" required />
+        
+        <Button type="submit" variant="primary">Login</Button>
+      </Form>
+    </Card>
+  );
+}
+```
+
+### Padrão 3: List Composition
+
+```tsx
+import { Card, Text, Button, Separator } from '@fabio.caffarello/react-design-system';
+
+function UserList({ users }) {
+  return (
+    <div>
+      {users.map((user, index) => (
+        <div key={user.id}>
+          <Card padding="medium">
+            <Text>{user.name}</Text>
+            <Text variant="caption">{user.email}</Text>
+            <Button size="small">View</Button>
+          </Card>
+          {index < users.length - 1 && <Separator />}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Padrão 4: Layout Composition
+
+```tsx
+import { Card, Separator } from '@fabio.caffarello/react-design-system';
+
+function DashboardLayout({ header, sidebar, content, footer }) {
+  return (
+    <div className="flex h-screen">
+      <aside className="w-64">
+        {sidebar}
+      </aside>
+      <main className="flex-1 flex flex-col">
+        <header className="p-4">
+          {header}
+        </header>
+        <Separator />
+        <div className="flex-1 p-4 overflow-auto">
+          {content}
+        </div>
+        <Separator />
+        <footer className="p-4">
+          {footer}
+        </footer>
+      </main>
+    </div>
+  );
+}
+```
+
+## Composição Avançada
+
+### Wrapper Components
+
+Crie wrappers que combinam múltiplos componentes:
+
+```tsx
+import { Card, Input, Label, ErrorMessage } from '@fabio.caffarello/react-design-system';
+
+interface FormFieldProps {
+  label: string;
+  error?: string;
+  children: React.ReactNode;
+}
+
+function FormField({ label, error, children }: FormFieldProps) {
+  return (
+    <div>
+      <Label>{label}</Label>
+      {children}
+      {error && <ErrorMessage>{error}</ErrorMessage>}
+    </div>
+  );
+}
+
+// Uso
+<FormField label="Email" error={errors.email}>
+  <Input type="email" />
+</FormField>
+```
+
+### Compound Components
+
+Use compound components para componentes relacionados:
+
+```tsx
+import { Card, Text, Button } from '@fabio.caffarello/react-design-system';
+
+interface ModalProps {
+  children: React.ReactNode;
+}
+
+function Modal({ children }: ModalProps) {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+      <Card padding="large" className="max-w-md w-full">
+        {children}
+      </Card>
+    </div>
+  );
+}
+
+Modal.Header = function ModalHeader({ children }) {
+  return <Text variant="heading">{children}</Text>;
+};
+
+Modal.Body = function ModalBody({ children }) {
+  return <div>{children}</div>;
+};
+
+Modal.Footer = function ModalFooter({ children }) {
+  return <div className="flex justify-end gap-2">{children}</div>;
+};
+
+// Uso
+<Modal>
+  <Modal.Header>Confirm Action</Modal.Header>
+  <Modal.Body>Are you sure?</Modal.Body>
+  <Modal.Footer>
+    <Button variant="secondary">Cancel</Button>
+    <Button variant="primary">Confirm</Button>
+  </Modal.Footer>
+</Modal>
+```
+
+## Composição com Hooks
+
+### Custom Hooks para Composição
+
+```tsx
+import { useState } from 'react';
+import { Input, Button, Card } from '@fabio.caffarello/react-design-system';
+
+function useFormField(initialValue = '') {
+  const [value, setValue] = useState(initialValue);
+  const [error, setError] = useState<string | undefined>();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+    setError(undefined);
+  };
+
+  return { value, error, handleChange, setError };
+}
+
+function LoginForm() {
+  const email = useFormField();
+  const password = useFormField();
+
+  return (
+    <Card padding="large">
+      <Input
+        type="email"
+        value={email.value}
+        onChange={email.handleChange}
+        error={email.error}
+      />
+      <Input
+        type="password"
+        value={password.value}
+        onChange={password.handleChange}
+        error={password.error}
+      />
+      <Button>Login</Button>
+    </Card>
+  );
+}
+```
+
+## Composição de Organisms
+
+### Usando Organisms Existentes
+
+```tsx
+import { Table, DataGrid, Stepper } from '@fabio.caffarello/react-design-system';
+
+function DataManagementPage() {
+  return (
+    <div>
+      <Stepper
+        steps={['Upload', 'Review', 'Confirm']}
+        currentStep={0}
+      />
+      <DataGrid
+        data={data}
+        columns={columns}
+        onExport={handleExport}
+      />
+    </div>
+  );
+}
+```
+
+## Melhores Práticas
+
+### 1. Mantenha Componentes Pequenos
+
+```tsx
+// ✅ Correto: Componente focado
+function UserAvatar({ user }) {
+  return <Avatar src={user.avatar} alt={user.name} />;
+}
+
+// ❌ Evitar: Componente fazendo muitas coisas
+function UserCardWithEverything({ user, showStats, showActions, ... }) {
+  // Muito código
+}
+```
+
+### 2. Use Props para Variação
+
+```tsx
+// ✅ Correto: Props para variar comportamento
+function Button({ variant, size, children, ...props }) {
+  // Usa Button do design system com props
+  return <Button variant={variant} size={size} {...props}>{children}</Button>;
+}
+
+// ❌ Evitar: Múltiplos componentes para variações
+function PrimaryButton() { }
+function SecondaryButton() { }
+function SmallButton() { }
+```
+
+### 3. Compose, Don't Modify
+
+```tsx
+// ✅ Correto: Compor componentes
+function CustomCard({ children }) {
+  return (
+    <Card padding="large" variant="hover">
+      {children}
+    </Card>
+  );
+}
+
+// ❌ Incorreto: Modificar componentes diretamente
+// Não modifique os componentes do design system
+```
+
+## Exemplos Completos
+
+### Exemplo: Dashboard Completo
+
+```tsx
+import {
+  Card,
+  Button,
+  Input,
+  Table,
+  Text,
+  Separator,
+} from '@fabio.caffarello/react-design-system';
+
+function Dashboard() {
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div className="flex justify-between items-center">
+        <Text variant="heading">Dashboard</Text>
+        <Button variant="primary">New Item</Button>
+      </div>
+
+      <Separator />
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-3 gap-4">
+        <Card padding="medium">
+          <Text variant="caption">Total Users</Text>
+          <Text variant="heading">1,234</Text>
+        </Card>
+        <Card padding="medium">
+          <Text variant="caption">Active Now</Text>
+          <Text variant="heading">567</Text>
+        </Card>
+        <Card padding="medium">
+          <Text variant="caption">Revenue</Text>
+          <Text variant="heading">$12,345</Text>
+        </Card>
+      </div>
+
+      {/* Data Table */}
+      <Card padding="large">
+        <Table
+          data={data}
+          columns={columns}
+        />
+      </Card>
+    </div>
+  );
+}
+```
+
+## Recursos Adicionais
+
+- [Best Practices](./Design%20System/Best%20Practices)
+- [Getting Started](./Design%20System/Getting%20Started)
+- [Component Status](./Design%20System/Component%20Status)

package/src/docs/ComponentStatus.mdx

@@ -0,0 +1,177 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { ComponentStatusTable } from './components/ComponentStatusTable';
+
+<Meta title="Design System/Component Status" />
+
+# Component Status Matrix
+
+Esta página mostra o status de todos os componentes do design system, incluindo estabilidade, acessibilidade e cobertura de testes.
+
+## Legenda
+
+<div style={{ display: 'flex', gap: '24px', marginBottom: '32px', flexWrap: 'wrap' }}>
+  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+    <span style={{ fontSize: '20px' }}>✅</span>
+    <strong>Stable</strong>: Componente estável e pronto para produção
+  </div>
+  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+    <span style={{ fontSize: '20px' }}>🟡</span>
+    <strong>Beta</strong>: Componente em beta, pode ter mudanças
+  </div>
+  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+    <span style={{ fontSize: '20px' }}>🔴</span>
+    <strong>Deprecated</strong>: Componente descontinuado, não use em novos projetos
+  </div>
+  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+    <span style={{ fontSize: '20px' }}>⚠️</span>
+    <strong>Experimental</strong>: Componente experimental, use com cautela
+  </div>
+</div>
+
+## Atoms
+
+<ComponentStatusTable
+  components={[
+    { name: 'Accordion', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Avatar', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Badge', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'BoxWrapper', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Button', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Checkbox', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Collapsible', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'ErrorMessage', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Info', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Input', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Label', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'NavLink', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Popover', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Progress', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Radio', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Select', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Separator', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'SidebarItem', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Skeleton', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Slider', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Spinner', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Switch', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Text', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Textarea', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Tooltip', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+  ]}
+/>
+
+## Molecules
+
+<ComponentStatusTable
+  components={[
+    { name: 'Breadcrumb', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Card', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'DatePicker', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Dropdown', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'EmptyState', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'FileUpload', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Form', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'InputWithLabel', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'NavbarGroup', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Pagination', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Rating', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'SearchInput', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'SidebarGroup', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'SidebarHeader', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'TableActions', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'TableFilters', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'TablePagination', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Tabs', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'TimePicker', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'ColorPicker', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+  ]}
+/>
+
+## Organisms
+
+<ComponentStatusTable
+  components={[
+    { name: 'CommandPalette', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'DataGrid', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Dialog', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Modal', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Sidebar', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Stepper', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Table', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Timeline', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+    { name: 'Toast', status: 'Stable', accessibility: 'WCAG 2.1 AA', tests: '>80%', docs: true },
+  ]}
+/>
+
+## Estatísticas Gerais
+
+<div style={{
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+  gap: '16px',
+  marginTop: '32px',
+  marginBottom: '32px'
+}}>
+  <div style={{
+    padding: '16px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '8px',
+    backgroundColor: '#f9fafb'
+  }}>
+    <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1f2937' }}>58</div>
+    <div style={{ fontSize: '14px', color: '#6b7280', marginTop: '4px' }}>Total de Componentes</div>
+  </div>
+  <div style={{
+    padding: '16px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '8px',
+    backgroundColor: '#f9fafb'
+  }}>
+    <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#10b981' }}>58</div>
+    <div style={{ fontSize: '14px', color: '#6b7280', marginTop: '4px' }}>Componentes Estáveis</div>
+  </div>
+  <div style={{
+    padding: '16px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '8px',
+    backgroundColor: '#f9fafb'
+  }}>
+    <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#10b981' }}>>80%</div>
+    <div style={{ fontSize: '14px', color: '#6b7280', marginTop: '4px' }}>Cobertura de Testes</div>
+  </div>
+  <div style={{
+    padding: '16px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '8px',
+    backgroundColor: '#f9fafb'
+  }}>
+    <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#10b981' }}>100%</div>
+    <div style={{ fontSize: '14px', color: '#6b7280', marginTop: '4px' }}>WCAG 2.1 AA</div>
+  </div>
+</div>
+
+## Roadmap
+
+### Próximos Componentes
+- [ ] Calendar
+- [ ] TreeView
+- [ ] Carousel
+- [ ] Drawer
+- [ ] Menu
+
+### Melhorias Planejadas
+- [ ] Melhorias de performance em componentes grandes
+- [ ] Suporte a RTL (Right-to-Left)
+- [ ] Mais variantes de temas
+- [ ] Componentes de data visualization
+
+## Notas
+
+- Todos os componentes seguem os padrões de Atomic Design
+- Todos os componentes são totalmente tipados com TypeScript
+- Todos os componentes têm documentação no Storybook
+- Todos os componentes têm testes automatizados
+
+## Reportar Problemas
+
+Se encontrar problemas com algum componente, por favor abra uma issue no [GitHub](https://github.com/fabiocaffarello/react-design-system/issues).

package/src/docs/DesignSystem.mdx

@@ -0,0 +1,121 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Design System/Overview" />
+
+# React Design System
+
+Bem-vindo ao React Design System! Este é um sistema de design moderno, escalável e flexível construído com React, TypeScript e Vite.
+
+## Visão Geral
+
+O React Design System fornece uma base sólida para construir componentes de UI consistentes, acessíveis e reutilizáveis em múltiplos projetos frontend.
+
+### Características Principais
+
+- **Atomic Design**: Organizado em Atoms, Molecules e Organisms para máxima reutilização
+- **Type-Safe**: Totalmente tipado com TypeScript
+- **Acessível**: WCAG 2.1 AA compliant
+- **Testado**: >80% de cobertura de testes
+- **Documentado**: Storybook com exemplos interativos
+- **Performático**: Otimizado com code splitting e React.memo
+- **Temático**: Sistema de temas avançado com suporte a múltiplos temas
+
+## Estrutura
+
+### Atoms
+Componentes básicos e indivisíveis que formam a base do sistema.
+
+**Exemplos**: Button, Input, Text, Badge, Avatar, Spinner
+
+### Molecules
+Combinações de atoms que formam componentes mais complexos.
+
+**Exemplos**: InputWithLabel, Card, SearchInput, Rating, FileUpload
+
+### Organisms
+Componentes complexos que combinam molecules e atoms.
+
+**Exemplos**: Table, DataGrid, Stepper, Timeline, CommandPalette
+
+## Design Tokens
+
+O sistema utiliza design tokens para garantir consistência:
+
+- **Cores**: Sistema semântico com suporte a light/dark themes
+- **Espaçamento**: Baseado em unidades de 4px
+- **Tipografia**: Escala tipográfica consistente
+- **Sombras**: Sistema de elevação
+- **Raio**: Bordas arredondadas padronizadas
+- **Animações**: Durações e easing functions consistentes
+
+Veja a [documentação completa de tokens](./Design%20System/Tokens).
+
+## Temas
+
+O sistema suporta temas avançados:
+
+- **Temas Built-in**: Light e Dark
+- **Temas Customizados**: Crie seus próprios temas
+- **CSS Variables**: Geração automática de variáveis CSS
+- **Theme Inheritance**: Herde de temas base
+- **Múltiplos Temas**: Use vários temas simultaneamente
+
+Veja a [documentação de temas](./Design%20System/Themes).
+
+## Instalação
+
+```bash
+npm install @fabio.caffarello/react-design-system
+```
+
+## Uso Básico
+
+```tsx
+import { Button, Input, Card } from '@fabio.caffarello/react-design-system';
+import { AdvancedThemeProvider } from '@fabio.caffarello/react-design-system';
+
+function App() {
+  return (
+    <AdvancedThemeProvider defaultTheme="light">
+      <Card padding="large">
+        <Input placeholder="Enter your name" />
+        <Button variant="primary">Submit</Button>
+      </Card>
+    </AdvancedThemeProvider>
+  );
+}
+```
+
+## Recursos
+
+### Acessibilidade
+- WCAG 2.1 AA compliant
+- Navegação por teclado completa
+- Suporte a screen readers
+- ARIA attributes apropriados
+
+### Performance
+- Code splitting por categoria
+- React.memo em componentes otimizados
+- Tree shaking automático
+- Bundle size otimizado
+
+### Testes
+- >80% de cobertura de testes
+- Testes de acessibilidade automatizados
+- Testes de regressão visual no Storybook
+
+## Próximos Passos
+
+1. Explore os [componentes disponíveis](./Design%20System/Components)
+2. Veja a [matriz de status dos componentes](./Design%20System/Component%20Status)
+3. Leia o [guia de getting started](./Design%20System/Getting%20Started)
+4. Consulte as [melhores práticas](./Design%20System/Best%20Practices)
+
+## Contribuindo
+
+Contribuições são bem-vindas! Veja nosso [guia de contribuição](https://github.com/fabiocaffarello/react-design-system/blob/main/CONTRIBUTING.md).
+
+## Licença
+
+MIT License - veja o arquivo LICENSE para detalhes.