Projeto criado utilizando o framework Vite na semana Ignite Lab Design System da Rocketseat.
- Storybook para criação da documentação dos componentes da aplicação.
- Figma para criação do design system da aplicação.
- 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.
Este comando irá instalar tudo que é necessário para que o tailwindcss funcione.
yarn add -D tailwindcss postcss autoprefixer
Este comando irá instalar tudo que é necessário para que o storybook funcione.
npx sb init --builder @storybook/builder-vite
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)
.
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,
},
};
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();
})
}
}
- PostCSS Language Support Syntax highlighting for modern and experimental CSS in VSCode
- Tailwind CSS IntelliSense Intelligent Tailwind CSS tooling for VS Code
- Transform é uma ferramenta online que converte um código SVG em um componente React.