Softo Goal Design System

Um Design System moderno e acessível construído com React, TypeScript e Tailwind CSS para o projeto Goal.

🚀 Tecnologias

• React 18
• TypeScript
• Tailwind CSS
• Vite
• Radix UI
• Storybook

📦 Instalação

pnpm install softo-design-system

🎨 Componentes

O Design System inclui uma variedade de componentes acessíveis e personalizáveis:

• Botões (Primary, Secondary, Destructive, Neutral)
• Checkbox
• Dialog
• Dropdown Menu
• Label
• Popover
• Progress
• Radio Group
• Select
• Switch
• Tabs
• Toast
• Tooltip

🎯 Uso

import { Button } from "softo-design-system";

function App() {
  return <Button variant="primary">Clique aqui</Button>;
}

🎨 Sistema de Cores

O Design System utiliza uma paleta de cores consistente e acessível:

• Primária: Tons de laranja (#FF6600)
• Secundária: Tons de azul (#18537A)
• Neutra: Tons de cinza
• Semântica: Sucesso, Erro, Aviso, Info

🛠️ Desenvolvimento

# Instalar dependências
pnpm install

# Iniciar ambiente de desenvolvimento
pnpm run dev

# Construir o pacote
pnpm run build

# Publicar nova versão
pnpm run design-system:deploy

📦 Publicando uma Nova Versão

Para publicar uma nova versão do Design System, siga estes passos:

1. Login no npm

   # Login no npm
   npm login
   # ou se estiver usando pnpm
   pnpm login

2. Verificar se está logado

   npm whoami
   # ou
   pnpm whoami

3. Publicar o pacote

   # O comando design-system:deploy já faz isso automaticamente
   pnpm run design-system:deploy

   Este comando irá:

   • Incrementar a versão do pacote (patch)
   • Construir o projeto
   • Publicar no npm

4. Verificar a publicação

   # Verificar a versão atual no npm
   pnpm view softo-design-system version

💡 Dica: Se precisar publicar uma versão específica, você pode usar:

npm version [major|minor|patch]
pnpm publish

🤝 Contribuindo

1. Faça um fork do projeto
2. Crie uma branch para sua feature (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