DO Hackaton Log #2

Hello devs,

My latest push on the hackaton project has been to implement Storybook and create all of the UI components on the front-end package.

Storybook

If you don't know what Storybook is, you are seriously missing out! It is a tool where you can organize all of the components of an application in 'stories'. Each story of a component is a way in which it can be used, so you can have the different variations of a button component for example. It is also a great place to work on your components since it implements hot reloading and you don't have to worry about placing your components in a dummy page to work on them.

The controls you see on the right of the page are all built automatically by inferring from typescript interfaces. The 'color' radio buttons come from color: 'primary' | 'secondary' and the toggles are all boolean props. It will even generate documentation:

If you are writing your React components with Typescript, Storybook will do all of that on its own, no extra configuration necessary.

What you do have to do is write the stories, but that is super easy, here is the stories file for my button component:

import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';

import Button, { Props as ButtonProps } from './index';

export default {
  title: 'Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
} as Meta;

const Template: Story<ButtonProps> = args => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  color: 'primary',
  children: 'Im a button!',
};

export const Disabled = Template.bind({});
Disabled.args = {
  color: 'primary',
  disabled: true,
  children: 'Im a button!',
};

export const Secondary = Template.bind({});
Secondary.args = {
  color: 'secondary',
  children: 'Im a button!',
};

export const Small = Template.bind({});
Small.args = {
  color: 'primary',
  small: true,
  children: 'Im a button!',
};

export const Loading = Template.bind({});
Loading.args = {
  color: 'primary',
  loading: true,
  children: 'Im a button!',
};

The gist of it is this: the default export of this file is an object with metadata about all of the stories relating to this component, here you can define the display name of the component, how storybook will display it on the screen and (much, much) more. Then we define a template, this is a function that will be used to render all of the stories. All we need to do then is export the stories themselves, by describing what the props for that story will be in the 'args' object.

This barely scratches the surface, some features of Storybook include the ability to replace the imports of a component with mock versions for testing, decorators, MDX pages for writing documentation and an add-on API for extending the entire thing.

Storybook is not just for React, it supports a long list of frameworks and libraries, including the big three you would expect and several more. I hope you will give it a try in the future because it has helped me quite a bit with front-end work.

UI Components

The UI components I've build so far are fairly boring stuff, buttons, inputs and spinners. If you want to check it out you can clone the repo and run these:

yarn
yarn workspace @dbug/web storybook

Have a great hackaton!