Uma das vantagens de usar o React é que você pode produzir componentes de interface do usuário, reutilizá-los em todo o seu aplicativo e, por termo, evitar a rotatividade de código. Ainda assim, é difícil produzir componentes de interface do usuário completamente independentes unicamente com o React. Você precisará produzir exibições que exibam esses componentes para vê-los.
É cá que entra o Storybook. Ele permite produzir e testar componentes de UI em um envolvente de tempo de realização independente e neste tutorial você aprenderá uma vez que usá-lo no React. Ao final deste post, você terá criado um componente de botão e documentado alguns de seus possíveis estados no React.
O que é livro de histórias?
O Storybook é uma instrumento de desenvolvimento que permite executar e testar seus componentes de interface do usuário sem um envolvente React completo. Isso facilita o desenvolvimento orientado a componentes porque você pode desenvolver os componentes isoladamente.
Com o Storybook, depois de produzir um componente, você pode produzir várias histórias que definem os vários estados do componente. Para um componente de botão, esses estados podem incluir o estado primordial, o estado secundário, o estado desabilitado e assim por diante.
Uma vez que o Storybook permite incluir código ao produzir as histórias, ele também pode servir uma vez que uma instrumento de documentação.
Para usar o Storybook, você precisará ter o Node instalado em sua máquina e ter um conhecimento forçoso do React.
Criando um aplicativo React
Para iniciar a usar o Storybook, você primeiro criará um projeto React e, em seguida, criará componentes e suas histórias.
Execute o seguinte comando para produzir um aplicativo React:
npx create-react-app btn-storybook
Isso irá gerar uma pasta chamada btn-storybook com todas as dependências que um aplicativo React precisa.
Em seguida, com unicamente mais algumas etapas, você pode instalar e executar o Storybook.
Instalando o livro de histórias
Navegue até a pasta btn-storybook e instale o storybook:
cd btn-storybook
npx storybook init
Uma vez que você usou create-react-app, nascente é o único comando que você precisa executar para configurar o Storybook. O Storybook instalará todas as dependências necessárias e realizará toda a formato necessária. Ele também criará algumas histórias padrão para você iniciar.
Depois que o comando supra terminar de ser executado, inicie o storybook usando o código a seguir.
npm run storybook
Isso abrirá o quadro do livro de histórias no seu navegador. Deve ser alguma coisa assim:
Criando o componente de botão
Na pasta ./src, crie uma pasta chamada Components, e nela crie outra pasta chamada Button. A pasta Button deve estar neste caminho: ./src/Components/Button.
Agora, nesta pasta, crie Button e adicione o seguinte código:
import PropTypes from "prop-types"
function Button({ label, backgroundColor = "#6B4EFF", color = "white", borderRadius="48px", border="none"}) {
const style = {
backgroundColor,
padding: "0.5rem 1rem",
color,
borderRadius,
border
}
return (
<button style={style}>
{label}
</button>
)
}
Button.propTypes = {
label: PropTypes.string,
backgroundColor: PropTypes.string,
color: PropTypes.string,
border:PropTypes.string,
borderRadius: PropTypes.string,
}
export default Button;
Nascente componente aceita algumas props React que incluem o rótulo do botão e seus estilos. Você também está usando propTypes para verificar os tipos de props passados e gerar um aviso se usar o tipo inverídico. O componente retorna um elemento de botão.
Criando as Histórias de Botão
Quando você instalou o Storybook no projeto React, ele gerou uma pasta contendo alguns exemplos de histórias, chamada histórias. Navegue até essa pasta e exclua tudo nela. Você estará criando as histórias do zero.
Você criará duas histórias representando o botão principal e o botão secundário. Cada um desses botões tem um estilo dissemelhante que o separa dos demais. Você poderá ver cada um deles no quadro do Storybook depois de produzir as histórias.
Na pasta de histórias, crie um novo registro chamado button.stories.js. É importante incluir .histórias antes de .js, pois é isso que informa ao Storybook, que é um registro de histórias.
Importe o componente Button.
import Button from "../Components/Button/Button"
Em seguida, exporte o título do componente e o próprio componente. Observe que o título é opcional.
export default {
title: "Components/Button",
component: Button,
}
A primeira história que você criará é para o botão Primitivo. Logo, crie uma novidade função chamada Primary e exporte-a.
export const Primary = () => <Button backgroundColor="#6B4EFF" label="Primary"/>
Agora, se você for ao quadro do Storybook, poderá ver o botão renderizado.
Para editar o componente renderizado ao vivo e modificar seu estado no quadro do Storybook, você usará args. Args permitem que você passe argumentos para o Storybook que, quando desfigurado, faz com que o componente seja renderizado novamente.
Para definir os argumentos da história do botão, crie um protótipo de função.
const Template = args => <Button {...args}/>
Nascente template aceita argumentos e os passa uma vez que props para o componente Button.
Agora você pode reescrever a história da Primária usando o protótipo mostrado aquém.
export const Primary = Template.bind({})Primary.args = {
backgroundColor: "#6B4EFF",
label: "Primary",
}
Se você verificar o quadro do Storybook, verá os controles na segmento subordinado. Esses controles permitem que você altere a exibição do botão. Você pode modificar a cor do projecto de fundo, a cor do texto, o rótulo, a borda e o relâmpago da borda.
Você só precisa modificar os valores dos argumentos para produzir as outras histórias. Por exemplo, para produzir um botão Secundário, use o código a seguir.
export const Secondary = Template.bind({})Secondary.args = {
backgroundColor: "#E7E7FF",
color: "#6B4EFF",
label: "Secondary",
}
No quadro do Storybook, navegue para diferentes histórias clicando nelas na barra lateral. Você verá uma vez que cada um é renderizado. Você pode continuar adicionando mais estados às histórias de botão conforme desejar. Tente somar um esboço ou uma história de esboço.
Testando componentes de IU
Nascente tutorial forneceu uma breve introdução ao uso do Storybook com componentes React UI. Você aprendeu uma vez que somar Storybook a um projeto React e uma vez que produzir uma história básica para um componente Button com args.
Você deve ter notado que, durante esse processo, você estava testando uma vez que o componente do botão era renderizado em diferentes estados. Você pode estar escrevendo mais código, mas, depois de grafar as histórias dos componentes, você minimizará quaisquer erros que possam surgir ao reutilizar componentes em seu aplicativo. Outrossim, será mais fácil rastrear o erro se ele ocorrer. Essa é a formosura do desenvolvimento orientado a componentes.
