Storybook for GlimmerJs

Storybook for GlimmerJs is a UI development environment for your GlimmerJS App. With it, you can visualize different states of your UI components and develop them interactively.

Storybook runs outside of your app. So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

Getting Started

Automatic setup (tbd)

Manual setup

If you want to set up Storybook manually for your Glimmerjs project, this is the guide for you.

Step 1: Add dependencies

Add @glimmerx/storybook

Add glimmerx/storybook to your project. To do that, run:

yarn add @glimmerx/storybook --save-dev

Add peer dependencies

If these are not already present in the host glimmer app include @glimmerx/core, @glimmerx/component packages in your dependencies as well.

yarn add @glimmerx/core @glimmerx/component

Step 2: Add an npm script

Then add the following NPM scripts to your package.json in order to start or build the storybook app.

{
    "scripts": {
        "storybook": "start-storybook",
        "build-storybook": "build-storybook"
    }
}

Step 3: Create the config file

For a basic Storybook configuration, the only thing you need to do is tell Storybook where to find stories.

To do that, create a file at .storybook/main.js with the following content:

module.exports = {
  stories: ['../src/**/*.stories.@(js|ts)']
}

That will load all the stories underneath your ../src directory that match the pattern *.stories.js. We recommend co-locating your stories with your source files, but you can place them wherever you choose.

Step 4: Write your stories

Now create a ../stories/index.js file, and write your first story like this:

import OtherComponent from './OtherComponent';
import { hbs } from '@glimmerx/component';

// default export determines how stories show up
export default {
  title: ' Example OtherComponent stories using CSF',
  component: OtherComponent,
  argTypes: {
    bgcolor: { control: 'color' },
    count: { control: 'number' },
  },
};

// Story template that can be reused for creating and exporting stories
const Template = (args: Record<string, number | string>) => {
  return {
    componentClass: OtherComponent,
    renderOptions: {
      args: {
        ...args,
      },
    },
  };
};

// Creating and exporing basic story
export const Basic = Template.bind({});
Basic.args = {
  count: 100,
};

// Export an inline story in CSF format
export const inLineBasic = (args) => hbs`<OtherComponent @count={{args.count}} @bgcolor={{args.bgcolor}} }}/>`;
inLineBasic.args = {
  ...Basic.args,
  bgcolor: 'lightblue',
};

Each story is a single state of your component. In the above case, there is a story using the SampleComponent.

Finally: Run your Storybook

Now everything is ready. Run your storybook with:

yarn storybook

Storybook should start, on a random open port in dev-mode.

Now you can develop your components and write stories and see the changes in Storybook immediately since it uses Webpack’s hot module reloading.

For more information visit: storybook.js.org

Storybook also comes with a lot of addons and a great API to customize as you wish. You can also build a static version of your storybook and deploy it anywhere you want.