@bumped-inc/storybook-utils v0.0.1-0

@bumped-inc/storybook-utils

Storybook utilities and preset for Bumped React DOM projects

Setting up the preset

Within your .storybook/main.js file, it will probably look similar to this:

var path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.(js|jsx|ts|tsx|mdx)'],
  presets: ['@bumped-inc/storybook-utils/preset']
};

Utilities

addParameters

addParameters is a type-safe replacement for the addParameters function available from @storybook/react.

ConcurrentRoot and withConcurrentRoot

Within Storybook, if you want to optionally support react@experimental, which opts into Concurrent mode, The story must be properly mounted within a concurrent render root.

Globally, within your .storybook/preview.js file (or a file referenced by it),

addDecorator(withConcurrentRoot());

This should be the very last decorator if you can help it.

createStory

When defining stories within a .stories.tsx file, it is recommended to use Component Story Format. Sadly, this is not type-safe by default, but a simple helper, createStory, makes it that way.

export const example = createStory(
  () => <MyComponent {...props} />,
  {
    parameters: {
      custom: 'wow',
    },
  },
)

createStoryGroup

When defining a stories within a .stories.tsx file, the default export defines the group of stories that are exported from the file.

This could be done with an object literal, but createStoryGroup provides a type-safe mechanism.

export default createStoryGroup({
  parameters: {
    custom: 'wow',
  },
});