Projeto criado utilizando o framework Vite na semana Ignite Lab Design System da Rocketseat.

Tecnologias utilizadas

• Storybook para criação da documentação dos componentes da aplicação.
• Figma para criação do design system da aplicação.

Bibliotecas utilizadas para desenvolvimento

• TailwindCSS para estilização CSS através de classes prontas e/ou personalizáveis.
• PostCSS é um ecossistema de plugins personalizados e ferramentas.
• Autoprefixer para adicionar prefixos de regras CSS no navegador utilizado.
• clsx é um utilitário para construção de classes condicionais substituindo os valores do classname do html.
• Phosphor Icons é uma biblioteca com mais de 1000 opções de ícones para serem usados.
• Radix UI é uma biblioteca de componentes sem estilização e com foco em acessibilidade.

Comando para instalação das dependências [TailwindCSS]

Este comando irá instalar tudo que é necessário para que o tailwindcss funcione.

  yarn add -D tailwindcss postcss autoprefixer

Comando para instalação das dependências [Storybook]

Este comando irá instalar tudo que é necessário para que o storybook funcione.

  npx sb init --builder @storybook/builder-vite

Configurações do Tailwindcss

  yarn tailwindcss init -p

Este comando irá gerar um arquivo tailwind.config.js na raiz do projeto com o seguinte trecho de código:

1   /** @type {import('tailwindcss').Config} */
2   module.exports = {
3   content: [],
6   theme: {
7     extend: {},
8   },
9     plugins: [],
10  }
11

Adicione o trecho de código da linha 3 no arquivo de configuração.

1  /** @type {import('tailwindcss').Config} */
2   module.exports = {
3   content: ['./src/**/*.tsx'],
6     // restante do código...
7    }

Fazendo isto o tailwindcss passa a entender que você irá apenas estilizar os arquivos que estiverem neste diretório (linha 3) e desse tipo de arquivo (.tsx).

Testes automatizados com storybook

Com Storybook é possível realizar testes automatizados de componentes utilizando o addon interactions em junção com o Jest.

Instale as dependências como dependências de desenvolvimento

yarn add -D @storybook/addon-interactions @storybook/jest @storybook/testing-library

Adicione o seguinte addon em .storybook/main.js

module.exports = {
  addons: ['@storybook/addon-interactions'],
};

Adicione a seguinte feature em .storybook/main.js

module.exports = {
  features: {
    interactionsDebugger: true,
  },
};

Mock para testes automatizados utilizando MSW

Addon para simular chamadas api localmente no browser utilizando MSW e o addon msw-storybook.

Instale as dependências como dependências de desenvolvimento

yarn add msw msw-storybook-addon -D

Adicione as seguintes configurações em .storybook/preview.js``

import { initialize, mswDecorator } from 'msw-storybook-addon';

// Initialize MSW
initialize();

// Provide the MSW addon decorator globally
export const decorators = [mswDecorator];

Exemplo de teste com storybook e msw:

import { Meta, StoryObj } from '@storybook/react'
import { within, userEvent, waitFor } from '@storybook/testing-library'
import { expect } from '@storybook/jest'
import { rest } from 'msw';
import { SignIn } from './SignIn'

export default {
  title: 'Pages/SignIn',
  component: SignIn,
  args: {},
  argTypes: {},
  parameters: {
    //Mock
    msw: {
      handlers: [
        rest.post('/sessions', (req, res, ctx) => {
          return res(ctx.json({
            message: 'Login realizado!'
          }))
        })
      ]
    }
  }
} as Meta

export const Default: StoryObj = {
  //Storybook test
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    userEvent.type(canvas.getByPlaceholderText('Digite seu e-mail'), 'johndoe@example.com');
    userEvent.type(canvas.getByPlaceholderText('******'), '12345678');

    userEvent.click(canvas.getByRole('button'));
    
    await waitFor(() => {
      expect(canvas.getByText('Login realizado!')).toBeInTheDocument();
    })
  }
}

Recomendação de extensões para intellisense e highlighting

• PostCSS Language Support Syntax highlighting for modern and experimental CSS in VSCode
• Tailwind CSS IntelliSense Intelligent Tailwind CSS tooling for VS Code

Extras

• Transform é uma ferramenta online que converte um código SVG em um componente React.