search

jemluz / ds-ignite-call

https://jemluz.github.io/ds-ignite-call/
1 stars 0 forks source link

Melhorias no StoryBook #4

Open jemluz opened 3 months ago

jemluz commented 3 months ago

Display names dos componentes

Repare no nome do componente button Styled.Button image

Ao adicionar a linha

Button.displayName = 'Button'

conseguimos customizar o nome da tag image

image

jemluz commented 3 months ago

Logs de ações nos componentes

Podemos utilizar a propriedade argTypes para configurar logs que serão exibidos ao disparar um evento. image

Na aba actions do storybook do componente irá exibir os logs a partir da ação de click que foi configurada no argTypes image

jemluz commented 3 months ago

Controles nos componentes

Note como na aba controles, temos controle até demais. Eu posso apagar a palavra secondary e colocar "banana" por exemplo. A interface vai aceitar mas nada irá mudar.

image

Então é interessante restringirmos os controles para que eles correspondam exatamente às possibilidades disponíveis de configuração de um componente.

Para isso podemos usar a propriedade argTypes para especificar que tipo de controle cada propriedade do componente terá. image

image

jemluz commented 3 months ago

Addon de acessibilidade

Podemos adicionar um addon de acessibilidade para validar nossos componentes. Ele é o https://storybook.js.org/addons/@storybook/addon-a11y

Instalamos ele com npm install @storybook/addon-a11y

Uma vez instalado no nosso projeto, adicionamos ele no arquivo main do storybook. image

Ele vai exibir uma aba "acessibilidade" com um diagnóstico de como está a acessibilidade do compoente. image