npm package: @ms-designsystem/core
Description: Design System Core - Biblioteca de componentes CSS para projetos web
Author: SETDIG MS
Latest version: 1.0.12

# MS Design System Core

Biblioteca de componentes e estilos fundamentais para o ecossistema de aplicações da SETDIG MS. Este projeto fornece a base visual (CSS/SCSS), tokens de design e componentes reutilizáveis agnósticos de framework para garantir consistência e agilidade no desenvolvimento.

## 📋 Visão Geral

O **MS Design System Core** foi desenvolvido para centralizar a identidade visual e os padrões de interface. Ele não depende de frameworks JavaScript (como React, Vue ou Angular) para a estilização básica, o que permite sua utilização em qualquer projeto web, desde páginas estáticas simples até aplicações complexas.

### Principais Recursos
- **Tokens de Design**: Variáveis CSS para cores, tipografia, espaçamento, sombras, etc.
- **Componentes Modulares**: Botões, Inputs, Cards, Modais, etc., construídos com SCSS.
- **Tipografia**: Integração com a fonte Avenir Next LT Pro.
- **Ícones**: Suporte nativo ao Material Icons.
- **Responsividade**: Grid system e utilitários responsivos.
- **Tema Escuro**: Suporte nativo via variáveis CSS.

## 🚀 Começando

### Pré-requisitos
- Node.js (versão 18 ou superior recomendada)
- NPM ou Yarn

### Instalação

Para utilizar o Design System em seu projeto:

```bash
npm install @ms-designsystem/core
# ou
yarn add @ms-designsystem/core
```

## 🛠️ Como Usar

Existem duas formas principais de utilizar a biblioteca:

### 1. Uso Simples (CSS Compilado)
Ideal para projetos que precisam apenas dos estilos prontos para uso. Importe o CSS minificado no seu arquivo HTML ou arquivo de entrada CSS/JS.

**No HTML:**
```html
<!-- Via node_modules -->
<link rel="stylesheet" href="node_modules/@ms-designsystem/core/dist/core.min.css">

<!-- Ou via CDN (exemplo) -->
<link rel="stylesheet" href="https://unpkg.com/@ms-designsystem/core@latest/dist/core.min.css">
```

**No JavaScript/Bundler:**
```javascript
import '@ms-designsystem/core/dist/core.min.css';
```

### 2. Uso Avançado (SCSS)
Ideal para projetos que desejam customizar variáveis ou importar apenas partes específicas do sistema.

**Importação total:**
```scss
@import '@ms-designsystem/core/dist/scss/core.scss';
```

**Importação modular:**
```scss
// 1. Importe primeiro as variáveis e mixins (Obrigatório para mixins funcionarem)
@import '@ms-designsystem/core/dist/scss/util/_variables.scss';
@import '@ms-designsystem/core/dist/scss/util/_mixins.scss';

// 2. Importe apenas os componentes desejados
@import '@ms-designsystem/core/dist/scss/components/_button.scss';
@import '@ms-designsystem/core/dist/scss/components/_card.scss';
```

## 💻 Desenvolvimento Local

Se você deseja contribuir ou modificar o core do Design System:

1. **Clone o repositório:**
   ```bash
   git clone <url-do-repositorio>
   cd ms-ds-core
   ```

2. **Instale as dependências:**
   ```bash
   npm install
   ```

3. **Inicie o servidor de desenvolvimento:**
   ```bash
   npm start
   ```
   Isso iniciará o Vite e abrirá a página de demonstração em `http://localhost:9000/src/index.html`.
   
   **Páginas úteis no desenvolvimento:**
   - `http://localhost:9000/src/index.html` - Showcase de todos os componentes.
   - `http://localhost:9000/src/cases/dashboard.html` - Exemplo de Dashboard.
   - `http://localhost:9000/src/cases/template.html` - Exemplo de Template.

### Scripts Disponíveis

- `npm start`: Inicia o servidor de desenvolvimento com Hot Module Replacement.
- `npm run build`: Gera os arquivos de distribuição na pasta `dist/` (CSS minificado e cópia dos SCSS).
- `npm run lint`: Executa a verificação de código (ESLint e Stylelint).
- `npm run docs:build`: Gera a documentação técnica do Sass e JS.

## 📂 Estrutura do Projeto

- `src/`: Código fonte.
  - `components/`: Estilos (SCSS) e scripts específicos de cada componente.
  - `util/`: Tokens de design (cores, tipografia, grid) e mixins.
  - `assets/`: Fontes, ícones e imagens.
  - `cases/`: Exemplos de páginas completas (Dashboards, Templates).
- `dist/`: Arquivos compilados prontos para produção (gerados após build).
- `doc/`: Documentação detalhada de tokens e diretrizes de design.

## 🧩 Componentes Disponíveis

Alert, Badge, Button, Card, Checkbox, Chip, Icon, Input, Menu, Modal, Radio, Segment Button, Select, Switch, Tab, Table, Tag, Toggle, Tooltip, Topbar.

---
Desenvolvido por **SETDIG MS**