🫧 @instivo-ds

Com o objetivo de uniformizar a identidade visual da Instivo e acelerar o tempo de desenvolvimento dos projetos, foi criado este monorepo, que contempla os seguintes pacotes:

• 📦 @instivo-ds/react - Pacote contendo os componentes de ui para projetos React
• 🎨 @instivo-ds/tokens - Pacote contendo os tokens que servem de base ao Design System
• 🛠️ @instivo-ds/eslint-config - Pacote contendo configuração de acordo com o style guide da Instivo
• ⚒️ @instivo-ds/ts-config - Pacote operacional, que oferece configuração ao TypeScript

Mas por quê utilizar a biblioteca de componentes?

🦾 Todos os componentes são integralmente escritos em TypeScript

🧪 Todos os componentes são testados dentro do seu escopo

💫 Todos os componentes base, foram confeccionados à partir de componentes HTML nativos

♿ Todos os componentes dentro do su escopo utilizam as feature de A11Y necessárias, podendo receber atributos complementares dentro do escopo de utilização, conforme o guia de padrões da W3.

Como instalar e utilizar

📦 Para utilizar a biblioteca de componentes numa aplicação React

1. Instale a biblioteca:

$  npm i @instivo-ds/react

2. Faça um extensão dos estilos, no arquivo que envolva toda sua aplicação:

// Em aplicações que utilizam Next.js@13 seria o arquivo `layout.tsx`
// Em aplicações que utilizam Vite seria o arquivo `main.tsx`

import "@instivo-ds/react/dist/output.css"

3. Você já pode uilizar os componentes, conforme o exemplo à seguir:

import { UiTypography } from "@instivo-ds/react"

export function App() {
  return <UiTypography>Sample</UiTypography>
}

:globe_with_meridians: Você pode encontrar uma lista completa dos componentes e como utilizar na nossa documentação