O Storybook é uma utensílio poderosa para edificar componentes de interface do usuário isoladamente. Ele ajuda você a fabricar e testar componentes sem executar todo o aplicativo.


Se você já usou o Storybook com Next.js, notará que precisa configurá-lo para mourejar com CSS e imagens corretamente. O processo pode ser frustrante, mas esses passos simples ajudarão a furar o caminho.


Comece configurando o projeto Next.js

Se você ainda não tiver um projeto Next.js configurado, siga o guia solene de conceitos básicos do Next.js para fabricar um novo projeto.

Inicializar livro de histórias

Execute o seguinte comando no terminal para inicializar o Storybook.

npx sb init 

Nascente comando detecta o projeto em que você está trabalhando, instala todos os pacotes necessários e cria histórias de exemplo.

Configurar CSS

A primeira coisa que você precisa fazer é incluir o registro CSS global em preview.js.

Configurar estilos globais

Os estilos globais se aplicam a todo o aplicativo. Para empregar esses estilos em histórias, você pode importar o registro para histórias individuais e isso funcionaria. No entanto, você acabaria reescrevendo a instrução de importação em muitas histórias ou até mesmo esquecendo.

Uma solução melhor é importar os estilos globais no registro .livro de histórias/preview.js file, um registro que contém todas as configurações compartilhadas do Storybook.

Na secção superior de .storybook/preview.js, inclua a seguinte instrução de importação.

import "../styles/globals.css";

Configurar Sass para Storybook no Next.js

Por padrão, o Storybook não vem com suporte pronto para uso para a linguagem de extensão Sass. Você precisa estender a feitio do webpack instalando style-loader, css-loader e sass-loader.

npm i -D style-loader css-loader sass-loader

Cá está o que esses pacotes fazem:

  • style-loader injeta CSS no DOM.
  • css-loader interpreta @import e URL() porquê import/require e os resolve.
  • sass-loader carrega SCSS em CSS.

Para configurar esses pacotes, adicione o seguinte código em .storybook/main.js:

const path = require('path');

module.exports = {
webpackFinal: async (config) => {
config.module.rules.push(
{
test: /.s(a|c)ss$/,
include: path.resolve(__dirname, '../'),
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
auto: true,
localIdentName: '[name]__[local]--[hash:base64:5]',
},
},
},
'sass-loader'
],
},
);
return config;
}
}

Depois disso, Sass deve estar disponível no Storybook.

Aplique o Prop não otimizado às imagens Next.js

Next.js tem muitos recursos de otimização. Uma delas é a otimização de imagem através do componente de imagem que faz com que as imagens carreguem mais rápido e se adaptem à tela. No entanto, é difícil trabalhar com o Storybook, pois o Storybook é executado isoladamente do envolvente Next.js. É melhor desotimizar imagens em histórias.

Para principiar, você precisa servir o diretório público no Storybook para indicar onde as imagens estão localizadas. Você pode fazer isso no planta de scripts npm no pacote.json registro ou em .storybook/main.js.

Dentro pacote.jsonatualize os scripts do Storybook para servir o diretório público.

"scripts": {
"storybook": "start-storybook -p 6006 -s ./public",
"build-storybook": "build-storybook -s public"
}

Alternativamente, modifique ./storybook/main.js para incluir o diretório estático que, neste caso, é a pasta pública.

module.exports = {
"staticDirs": [ "../public" ],
}

Depois de servir o diretório público, aplique a prop não otimizada às imagens Next.js usadas nas histórias.

Em .storybook/main.js, adicione o seguinte código:

import * as NextImage from "next/image";
const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, "default", {
configurable: true,
value: (props) => (
<OriginalNextImage
{...props}
unoptimized
/>
),
});

Nascente código usa a prop não otimizada em qualquer lugar em que o componente de imagem é usado.

Usando o Storybook no Next.js

O Storybook é uma daquelas ferramentas que você acha tediosas demais para usar, mas quando você começa a usá-las, percebe o que estava perdendo. Com o Storybook, você pode fabricar e testar diferentes componentes sem executar todo o seu aplicativo. Portanto, torna os componentes de construção desde o início simples.

Se você estiver usando o Next.js, certifique-se de configurar o CSS e desotimizar as imagens antes de principiar.

Leave a Reply

Your email address will not be published. Required fields are marked *