@gmcotta/design-system-core NPM

Meiuca - Biblioteca de componentes Core

Storybook da aplicação

Introdução

Esse repositório tem o objetivo de mostrar uma biblioteca de componentes principais para um design system, criada a partir do curso de Design Systems in Code, da Meiuca.

Ao longo do curso, desenvolvemos um design system contendo design tokens, assets (ícones), uma biblioteca de componentes core (contendo os elementos mais primitivos, como botão, input, tipografia...) e uma biblioteca de times (que usa da biblioteca core para criar seus componentes, que serão usados para um produto específico). Dentro da landing page também possuem componentes que não fazem parte do design system e é exclusivo para a página desenvolvida.

Abaixo encontram-se os links para os repositórios do design system:

Abaixo encontra-se também o link para o projeto do design system e da landing page no Figma:

Figma

Tecnologias

Os componentes foram desenvolvidos usando web-components. Como a biblioteca foi criada de maneira agnóstica a frameworks/bibliotecas, os times que irão consumi-la não terão um retrabalho de reproduzir para a tecnologia do projeto. Por exemplo, um time que usa React não precisará recriar a biblioteca para adaptar os componentes para React, e um time que usa Angular pode utilizar a biblioteca, pois os componentes em web-components não dependem do React ou do Angular para funcionar.

Para a criação da biblioteca foram usados:

Lit, para facilitar a criação dos web-components;
SASS, para estilizar os componentes;
Storybook, para apresentar e documentar os componentes e suas propriedades;
Webpack, como bundler da aplicação;
@open-wc/testing, para testar os componentes.

Componentes

Button
Card
Checkbox
Header
Icon
Input Text
Link
Radio Button
Select
Switch
Tag
Textarea
Tooltip
Typography
- Caption
- Heading
- Paragraph

Como iniciar localmente a página

Primeiramente, baixe o repositório:

  git clone git@github.com:gmcotta/meiuca-design-system-core.git <nome_da_pasta>

Entre na pasta gerada:

  cd nome_da_pasta

Instale as dependências (uso o Yarn para gerenciar os pacotes):

  yarn

Para iniciar a aplicação:

  yarn start

A página irá iniciar localmente em http://localhost:8080. O intuito da página era mais para verificar se o componente está renderizado corretamente antes de ter criado o Storybook.

Para iniciar o Storybook:

  yarn storybook

Para iniciar os testes:

  yarn test:watch

Para rodar os testes apenas uma vez:

  yarn test

Para mostrar a cobertura de código:

  yarn test:coverage

Para fazer o build da aplicação:

  yarn build

Importante: caso seja criado algum componente, adicione um objeto referente ao componente no arquivo webpack_entries.json, e depois rode o comando acima. A pasta gerada é dist.

Para fazer o build do Storybook: