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:

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:

<!-- 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:

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:

@import '@ms-designsystem/core/dist/scss/core.scss';

Importação modular:

// 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:

   git clone <url-do-repositorio>
   cd ms-ds-core

2. Instale as dependências:

   npm install

3. Inicie o servidor de desenvolvimento:

   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