Made Design System - React Component Library

Uma biblioteca de componentes React moderna e acessível construída com Radix UI, Tailwind CSS e TypeScript.

📦 Instalação

npm install made-ds-front-react
# ou
yarn add made-ds-front-react
# ou
pnpm add made-ds-front-react

🚀 Configuração

1. Instalar dependências necessárias

A biblioteca requer estas peer dependencies:

npm install react react-dom tailwindcss

2. Configurar Tailwind CSS

Adicione os caminhos dos componentes ao seu tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/made-ds-front-react/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Importar estilos

Você tem duas opções para importar os estilos:

Opção 1: Importar automaticamente com os componentes

import { Button } from "made-ds-front-react"; // Estilos incluídos automaticamente

Opção 2: Importar estilos separadamente

import "made-ds-front-react/styles"; // Importa apenas os estilos
import { Button } from "made-ds-front-react";

Opção 3: Importar CSS diretamente

@import "made-ds-front-react/styles.css";

📖 Uso

Importação de Componentes

import { Button, Input, Card, Dialog } from "made-ds-front-react";

function App() {
  return (
    <div>
      <Button variant="default" size="lg">
        Clique aqui
      </Button>

      <Input placeholder="Digite algo..." />

      <Card>
        <CardHeader>
          <CardTitle>Título do Card</CardTitle>
          <CardDescription>Descrição do card</CardDescription>
        </CardHeader>
        <CardContent>Conteúdo do card</CardContent>
      </Card>
    </div>
  );
}

Componentes Disponíveis

Layout & Navegação

• Accordion - Componente de acordeão expansível
• Card - Container de conteúdo com estilização
• Separator - Divisor visual
• Sheet - Painel lateral deslizante
• Sidebar - Barra lateral de navegação
• Tabs - Navegação por abas

Formulários & Entrada

• Button - Botão com múltiplas variantes
• Input - Campo de entrada de texto
• Checkbox - Caixa de seleção
• Switch - Interruptor on/off
• Select - Menu suspenso de seleção
• MultiSelect - Seleção múltipla
• AutoComplete - Campo com auto-completar
• FileInput - Upload de arquivos
• InputOTP - Entrada de código OTP
• DatePicker - Seletor de data
• MonthPicker - Seletor de mês
• Calendar - Calendário

Exibição de Dados

• Table - Tabelas de dados
• Badge - Etiquetas e tags
• Avatar - Imagem de perfil
• Skeleton - Placeholder de carregamento
• Pagination - Paginação de dados

Feedback & Navegação

• Dialog - Modal/Diálogo
• AlertDialog - Diálogo de confirmação
• Alert - Alertas e notificações
• Tooltip - Dicas contextuais
• Popover - Pop-up contextual
• Command - Interface de comando
• DropdownMenu - Menu suspenso
• Toaster - Notificações toast

Navegação & Layout

• Carousel - Carrossel de conteúdo
• Stepper - Indicador de progresso em etapas

Exemplos de Uso Avançado

Formulário Completo

import {
  Button,
  Input,
  Select,
  Checkbox,
  Card,
  Label,
} from "made-ds-front-react";

function ContactForm() {
  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader>
        <CardTitle>Contato</CardTitle>
        <CardDescription>Preencha o formulário abaixo</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <Label htmlFor="name">Nome</Label>
          <Input id="name" placeholder="Seu nome" />
        </div>

        <div>
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="[email protected]" />
        </div>

        <div>
          <Label htmlFor="country">País</Label>
          <Select>
            <SelectTrigger>
              <SelectValue placeholder="Selecione um país" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="br">Brasil</SelectItem>
              <SelectItem value="us">Estados Unidos</SelectItem>
              <SelectItem value="ca">Canadá</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="flex items-center space-x-2">
          <Checkbox id="terms" />
          <Label htmlFor="terms">Aceito os termos de serviço</Label>
        </div>

        <Button className="w-full">Enviar</Button>
      </CardContent>
    </Card>
  );
}

Dialog com Confirmação

import {
  Button,
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "made-ds-front-react";

function DeleteConfirmation() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Deletar Item</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Confirmar Exclusão</AlertDialogTitle>
          <AlertDialogDescription>
            Esta ação não pode ser desfeita. O item será excluído
            permanentemente.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancelar</AlertDialogCancel>
          <AlertDialogAction>Confirmar</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

🎨 Customização

Variantes de Componentes

A maioria dos componentes suporta diferentes variantes:

// Button variants
<Button variant="default">Padrão</Button>
<Button variant="destructive">Destrutivo</Button>
<Button variant="outline">Contorno</Button>
<Button variant="secondary">Secundário</Button>
<Button variant="ghost">Fantasma</Button>
<Button variant="link">Link</Button>

// Button sizes
<Button size="sm">Pequeno</Button>
<Button size="default">Padrão</Button>
<Button size="lg">Grande</Button>
<Button size="icon">Ícone</Button>

Usando Classes Customizadas

Todos os componentes aceitam a prop className para personalização:

<Button className="bg-purple-500 hover:bg-purple-600 text-white">
  Botão Customizado
</Button>

Utilizando a função cn()

A biblioteca exporta a função utilitária cn para combinar classes:

import { cn } from "made-ds-front-react";

function MyComponent({ className, ...props }) {
  return (
    <div
      className={cn("base-classes", "conditional-classes", className)}
      {...props}
    />
  );
}

🛠️ Desenvolvimento

Requisitos

• Node.js 18+
• React 18+
• TypeScript 5+

Scripts

# Desenvolver com storybook
npm run storybook

# Build da biblioteca
npm run build:lib

# Build da aplicação
npm run build

# Linting
npm run lint

📝 Licença

MIT

🤝 Contribuição

Contribuições são bem-vindas! Por favor, abra uma issue ou pull request no repositório.

📚 Documentação

Para documentação completa e exemplos interativos, visite nosso Storybook.

Made Design System - Construído com ❤️ usando Radix UI, Tailwind CSS e TypeScript.