Write Stories

Bojagi stories work the same way storybooks stories work. In fact, if you are using Storybook we can read and understand it's stories out of the box in most cases (using some Storybook plugins might break them for us in some cases, please contact us in that case).

By default we also support TypeScript stories (when you have configured TypeScript in your webpack config). For other languages you need to change the storyPath option in the config file accordingly.

NOTE: if you have a different path configured in your storybook/main.js, you need to adjust this value in the Bojagi configs as well.

Write your stories

1. Create your first Component:

Create a component file src/Box.jsx.

import React from 'react';

export default function Box(props) {
  return (
    <div style={{backgroundColor: props.color, padding: '2rem'}}>
      {props.children}
    </div>
  );
}

2. Create the Stories for that Component

Create a story file src/Box.bojagi.js

import React from 'react';
import Box from './Box';

export const yellow = () => <Box color="yellow">I am a yellow Box!</Box>;

export const green = () => <Box color="green">I am so green!</Box>;

And you are done!

When running yarn bojagi deploy the next time, your different stories will show up in the webapp!

Decorators

Sometimes your components need some context (for example themes, routing, etc) or you need some custom layout around your components.

Bojagi decorators work like storybook decorators.

A decorator is a function component that receives the story function as first argument and returns a react element.

Create a global decorator

Create a .bojagi/decorator.js file (you can change the location in the bojagi config). Expose the decorator function as default export.

In the example below you see a decorator in action:

// .bojagi/decorator.js
import React from 'react';
import { MemoryRouter } from 'react-router';
import { ThemeProvider } from 'styled-components';

import theme from '../src/theme';

const withDecorator = story => (
  <MemoryRouter>
    <ThemeProvider theme={theme}>{story()}</ThemeProvider>
  </MemoryRouter>
);

export default withDecorator;

Create a story decorator

If you want to use a special decorators for specific stories, you can do that in the story files.

There are two options:

1. Define decorator functions for all stories of a file
2. Define decorator functions for a single story

Both ways work exaclty like decorators in Storybook, so if you already know how to do that, you know how to do that with Bojagi. The decorator functions work the same way as the global decorators.

Decorators for all stories of a file

For this you need to expose an object as default export. This object needs to have a decorators array as a property:

export default {
  decorators: [myCustomDecorator, myOtherDecorator],
};

Decorators for a single story

Decorators for a single story need to be defined as a property of the story itself like below:

export const MyCoolStory = () => <MyComponent some="prop" />;
MyCoolStory.decorators = [myCustomDecorator, myOtherDecorator];

Planned features:

• support default export properties like title and components like Storybook does