Meiuca - Biblioteca de componentes de time

Storybook da aplicação

Introdução

Esse repositório tem o objetivo de mostrar uma biblioteca de componentes de time de uma landing page 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:

• Design Tokens
• Assets
• Biblioteca Core
• Biblioteca de Time
• Landing Page

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 a biblioteca core, e também React. Como a landing page será desenvolvida em React, podemos também usar React para desenvolver os componentes dessa biblioteca, usando como base a biblioteca core, que usa web-components.

Para a criação da biblioteca foram usados:

• React, como biblioteca de UI;
• Storybook, para apresentar e documentar os componentes e suas propriedades;
• SASS, para estilizar os componentes.

Componentes

• Card Content

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 o Storybook:

  yarn storybook

Para fazer o build da aplicação:

  yarn compile

A pasta gerada é dist.

Para fazer o build do Storybook:

  yarn build-storybook

A pasta gerada é storybook-static.

Para publicar o pacote:

  npm publish --access public