jota-design-system v0.1.10
Jota Design System
Jota Design System apresenta todo os components frontend desenvolvidos em Typescript para React para os produtos JOTA PRO.
Todos os direitos são protegidos.
Jota Design System
| Cores | Tipografia | Formulários | Componentes |
|---|---|---|---|
| Grid | Logos | Ícones |
|---|---|---|
Folder Structure
.
├── .github/workflows # Github Actions - PR & Chromatic
├── .storybook # Storybook configuration
├── public
├── src # Project folder
├─────── components # Components folder
├─────────── Button # Component Example
├────────────── Button.stories.tsx
├────────────── Button.tsx
├────────────── Button.test.tsx
├─────────── Input
├─────────── Label
├─────────── Intro.stories.mdx
├─────── static # Static Fields
├─────────── logo.svg
├─────────── theme.ts
├─────── index.tsx
├─────── setupTests.js
├── .gitignore
├── CHANGELOG.md
├── README.md
├── package-lock.json
├── package.json
└── tsconfig.jsonArquitetura
A arquitetura do design system da JOTA se concentra no desenvolvimento de componentes para o frontend construídos em Typescript para a utilização em React, de forma isolada e desacoplada uns dos outros, sem dependencia nenhuma.
Desenvolvimento
- Os componentes foram construídos através do Storybook - www.storybook.js.org;
- Estão agrupados de acordo com a utilização deles. Ex: Formulários, botões, tooltips etc;
- Os components foram validados através de testes (Jest e Enzymer) e também foi verificada toda a parte de acessibilidade;
Review & Code Review
Para a parte de revisão e segurança utilizamos o Chromatic (www.chromatic.com), plataforma para code review visual dos componentes criados através do Storybook.
O processo de desenvolvimento ocorre da seguinte forma:
- O componente deve ser criado numa branch específica
- Abre-se uma PR assim que terminar o desenvolvimento
- Github actions valida e executa todos os testes
- GitHub actions faz o deploy para o Chromatic
- Chromatic notifica os responsáveis para Code Review (visual como de código)
- Se tudo ocorrer bem fica disponível fazer o merge da branch do component para a branch dev
Testes Visuais
Chromatic auxilia no processo de identificar visualmente quais foram as alterações em determinado componente conforme a figura abaixo:
Acessibilidade
Durante o desenvolvimento é essencial acompanhar a aba "Accessibility" para ver os items necessários para a acessibilidade.
Documentação
A documentação do Design System esta disponível em https://design.jota.info
Distribuição
Os componentes do Design System estão disponívels no NPM.js no link: https://www.npmjs.com/package/jota-design-system
Para instalar os componentes através do npm:
npm i jota-design-system
Componentes em Desenvolvimento
| Componentes | Status |
|---|---|
| Label | Finish |
| Input | Developing |
| Textarea | Developing |
| Select | Pending |
| Textarea | Pending |
| Option | Pending |
| Button | Pending |
| Tooltip | Pending |
| Dialog | Pending |
| Step | Pending |
| Pagination | Pending |
| Calendar | Pending |
Figma Projects
| Componentes |
|---|
| https://www.figma.com/file/p8bzSvwuDgriv3nI0yrSeS/Componentes?node-id=76%3A4 |
| Landing Pages |
|---|
| https://www.figma.com/file/HuboQ6PHIulWQQdZrYpXTn/Landing-Pages |
Cores
Base
| $jota-b1-orange#F05841 | $jota-b2-black #000000 | $jota-b3-gray#9899A2 | $jota-b4-white#FFFFFF |
Secundária/Semântica/Produtos
| $jota-b1-orange#30B1E4 | $jota-b2-black #FED350 | $jota-b3-gray#3F9B7F | $jota-b4-white#5588FF | $jota-b4-white#CE2828 |
Neutros
| $jota-b1-orange#1F2128 | $jota-b2-black #3C3F4C | $jota-b3-gray#73757F | $jota-b4-white#D3D3D9 | $jota-b4-white#E6E8ED |
Extendida
| $jota-b1-orange#B88114 | $jota-b2-black #EAAD2A | $jota-b3-gray#FFEE93 | $jota-b4-white#FFF9C5 |
| $jota-b1-orange#7C1600 | $jota-b2-black #AF2E1D | $jota-b3-gray#FFA996 | $jota-b4-white#FFC9BD |
| $jota-b1-orange#56040D | $jota-b2-black #8B0208 | $jota-b3-gray#FB8B8C | $jota-b4-white#FCB3B3 |
| $jota-b1-orange#410E28 | $jota-b2-black #662446 | $jota-b3-gray#915172 | $jota-b4-white#DA95B8 |
| $jota-b1-orange#1A419E | $jota-b2-black #3766D2 | $jota-b3-gray#85A9FF | $jota-b4-white#C2D4FF |
| $jota-b1-orange#12699C | $jota-b2-black #0089BF | $jota-b3-gray#90D9F5 | $jota-b4-white#CFF2FF |
| $jota-b1-orange#10523E | $jota-b2-black #23735B | $jota-b3-gray#95CFBD | $jota-b4-white#BEEBDD |