Improving your React Storybook with Storybook Addons for typescript

Carrying on from the last post where we set up our react + typescript + storybook project we will now look at some of the addons that storybook offers and how to set them up for your typescript project.

If you didn’t read the 1st part then check it out here.

We will start with an addon which I commonly use; the accessibility plugin called a11y. This add on checks your components for any violations against the W3 guidelines.

Photo by Bud Helisson on Unsplash

1. Firstly we need to go through the steps as outlined on the storybook add ons github page, but for completeness I will leave them here.

npm install -D @storybook/addon-a11y

2. Inside that blank .storybook/addons.js file we wrote last time we register our addon like so:

import '@storybook/addon-a11y/register';

3. Next in our button.stories.tsx file we change the file to look like this:

import { checkA11y } from '@storybook/addon-a11y';
import { storiesOf } from '@storybook/react';
import * as React from 'react';
import Button from "./Button";
storiesOf("Button", module)
  .addDecorator(checkA11y)
  .add("with text", () => (
    <Button>Hello Button</Button>
  ))
  .add("with some emoji", () => (
    <Button styles={{ backgroundColor: 'red', color: 'darkRed', }}>😀 😎 👍 💯</Button>
  ));

4. We can also optionally include the accessibility addon globally by registering it in the .storybook/config.js file. Simply add the following lines to your config file:

import { checkA11y } from '@storybook/addon-a11y';
addDecorator(checkA11y);

When adding the a11y addon globally I ran into some problems with storybook not picking up the config file correctly. If this has happened to you and you know the solution let me know in the comment section 😁.

5. Now if we try to run the storybook using npm run storybook it should work right? Oh no!! we get an error! 😡🤬.

ERROR in [at-loader] ./src/components/Button/Button.stories.tsx:1:27 
    TS7016: Could not find a declaration file for module '@storybook/addon-a11y'. '/Users/xyz/my-app/node_modules/@storybook/addon-a11y/dist/index.js' implicitly has an 'any' type.

It turns out there is one more step that is not included in the storybook documentation and that is we need to add a definitely typed file. Fortunately for us there exists an npm library which we can use.

npm i -D @types/storybook__addon-a11y

For those following on from the last blog, you will get another error message that says:

ERROR in [at-loader] ./src/components/Button/Button.stories.tsx:12:6 
    TS2322: Type '{ children: string; style: { backgroundColor: string; color: string; }; }' is not assignable to type 'IntrinsicAttributes & IButtonProps & { children?: ReactNode; }'.
  Property 'style' does not exist on type 'IntrinsicAttributes & IButtonProps & { children?: ReactNode; }'.

This is because our Button component does not accept a style property. We can fix this by ammending our button.tsx file to the following:

import * as React from 'react';
export interface IButtonProps {
  children?: React.ReactNode,
  onClick?: (e:any) => void,
  styles?: {}
}
const styles = {
  backgroundColor: '#FFFFFF',
  border: '1px solid #eee',
  borderRadius: 3,
  cursor: 'pointer',
  fontSize: 15,
  margin: 10,
  padding: '3px 10px',
};
const Button: React.SFC<IButtonProps> = (props) => (
  <button onClick={props.onClick} style={props.styles} type="button">
    {props.children}
  </button>
);
Button.defaultProps = {
  children: null,
  onClick: () => {},
  styles
};
export default Button;

Conclusion

There are many different storybook addons which I suggest you to explore. Knobs and viewport are extremely handy in testing your components in isolation with different property values and at different screen sizes.

As always if this post helped you in any way please show your support.

PS: There currently exists a bug for this addon which results in it saying 0 passes and 0 violations. More details can be found here.