@clickcannabis/ui-components

Design System da Click Cannabis - Uma biblioteca moderna de componentes React reutilizáveis construída com as melhores práticas.

🎯 Características

• 🚀 React 19 + TypeScript para máxima segurança de tipos
• 🎨 Tailwind CSS v4 para estilização moderna e performática
• 🛠️ shadcn/ui como base dos componentes
• ♿ Acessibilidade com Radix UI
• 🎭 Storybook para documentação interativa
• 📦 Tree-shaking pronto para produção
• 🎯 class-variance-authority (cva) para variants tipadas

📦 Instalação

npm install @clickcannabis/ui-components

Dependências necessárias

npm install react react-dom

Configuração do Tailwind CSS

Adicione ao seu tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@clickcannabis/ui-components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

🚀 Uso Básico

import { Button, Badge, Avatar } from "@clickcannabis/ui-components";
import "@clickcannabis/ui-components/styles";

function App() {
  return (
    <div>
      <Button variant="default" size="medium">
        Click me!
      </Button>

      <Badge variant="secondary">New Feature</Badge>

      <Avatar>
        <AvatarImage src="/avatar.jpg" alt="User" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
    </div>
  );
}

📖 Documentação

Acesse nossa documentação interativa completa no Storybook para explorar todos os componentes, suas variantes, propriedades e exemplos de uso:

🔗 Links da Documentação

• 📚 Documentação Principal: click-cannabis.github.io/design-system-click
• 🧩 Componentes: Explorar todos os componentes
• 🎨 Design Tokens: Ver tokens de design

🌟 O que você encontrará na documentação:

• Exemplos interativos de todos os componentes
• Props e APIs detalhadas
• Variantes e estados de cada componente
• Códigos de exemplo prontos para copiar
• Guidelines de acessibilidade
• Tokens de design e padrões visuais

🧩 Componentes Disponíveis

Formulários

• Button - Botões com múltiplas variantes
• Input - Campos de entrada
• Label - Rótulos acessíveis
• Checkbox - Caixas de seleção
• Radio - Botões de opção
• Select - Seletores dropdown

Layout

• Avatar - Avatares de usuário
• Badge - Badges e tags
• Tabs - Navegação em abas
• Table - Tabelas de dados
• BottomSheet - Folhas modais

Interação

• AlertDialog - Diálogos de confirmação
• DropdownMenu - Menus suspensos
• Progress - Barras de progresso
• Dropzone - Upload de arquivos

Dados

• DataTable - Tabelas avançadas com ordenação/filtros

💡 Dica: Visite nossa documentação interativa para ver todos os componentes em ação!

🛠️ Desenvolvimento

Requisitos

• Node.js 20+
• npm 9+

Setup local

# Clone o repositório
git clone https://github.com/Click-Cannabis/design-system-click.git
cd design-system-click

# Instale dependências
npm install

# Inicie o Storybook
npm run storybook

Scripts disponíveis

# Desenvolvimento
npm run dev              # Inicia servidor de desenvolvimento
npm run storybook        # Inicia Storybook

# Build
npm run build:lib        # Build da biblioteca
npm run build-storybook  # Build do Storybook

# Qualidade
npm run lint             # Executa ESLint
npm run type-check       # Verifica tipos TypeScript

# Publicação
npm run release          # Build + publicação no NPM

🏗️ Estrutura do Projeto

src/
├── components/
│   └── ui/
│       ├── button/
│       │   ├── index.tsx           # Componente
│       │   ├── button-variants.ts  # Variants com CVA
│       │   └── button.stories.tsx  # Storybook Stories
│       └── ...
├── lib/
│   └── utils.ts          # Utilitários (cn, etc.)
└── index.ts              # Exports principais

🎨 Sistema de Design

Tokens de Design

// Cores principais
const colors = {
  primary: "hsl(210 40% 98%)",
  secondary: "hsl(210 40% 96%)",
  // ...
};

// Tamanhos
const sizes = {
  xs: "0.75rem",
  sm: "0.875rem",
  md: "1rem",
  // ...
};

Variants com CVA

Todos os componentes usam class-variance-authority para variants tipadas:

const buttonVariants = cva("inline-flex items-center justify-center", {
  variants: {
    variant: {
      default: "bg-primary text-primary-foreground",
      secondary: "bg-secondary text-secondary-foreground",
    },
    size: {
      sm: "h-8 px-3 text-xs",
      md: "h-9 px-4 text-sm",
      lg: "h-10 px-6 text-base",
    },
  },
});

🤝 Contribuindo

1. Fork o projeto
2. Crie sua feature branch (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

Adicionando novos componentes

1. Crie diretório em src/components/ui/[component]/
2. Implemente:
   • index.tsx - Componente principal
   • [component]-variants.ts - Variants com CVA
   • [component].stories.tsx - Stories do Storybook
3. Adicione exports em src/index.ts
4. Documente no Storybook

📝 Changelog

Veja CHANGELOG.md para histórico detalhado de mudanças.

📄 Licença

Este projeto está sob a licença MIT. Veja LICENSE para detalhes.

🔗 Links Úteis

• 📚 Documentação: click-cannabis.github.io/design-system-click
• 🧩 Componentes: Explorar Componentes
• 📦 NPM: @clickcannabis/ui-components
• 🐛 Issues: GitHub Issues
• 💬 Discussões: GitHub Discussions
• 🚀 Releases: GitHub Releases

Feito com ❤️ pela equipe Click Cannabis