Confluence integration with Storybook

This addon for storybook (source) enables you to add Atlassian Confluence pages to your stories.

Quickstart

Add middleware

In .storybook/middleware.js:

var buildConfluenceMiddleware = require('storybook-addon-confluence/middleware');

module.exports = buildConfluenceMiddleware('https://example.atlassian.net/wiki', 'username', 'super-secure_password');

Register add-on

In .storybook/addons.js:

import '@kadira/storybook/addons';

import 'storybook-addon-confluence/register';

Use in stories

Use <WithConfluencePage /> element in a story:

import { WithConfluencePage } from 'storybook-addon-confluence';

storiesOf('ExampleComponent', module)
  .add('Default', () => (
    <WithConfluencePage space="SPACE" title="Example component">
      <ExampleComponent />
    </WithConfluencePage>
  ));

Or use a decorator for all of the stories:

import { confluencePageDecorator } from 'storybook-addon-confluence';

storiesOf('ExampleComponent', module)
  .addDecorator(confluencePageDecorator('SPACE', 'Example component'))
  .add('Default', () => <ExampleComponent />);

Building

If you're working locally, you can use npm link with this and your consuming project to do your work. There's no transpilation or prepublish step, so changes are pretty transparent.

Code of Conduct

We are committed to fostering an open and welcoming environment. Please read our code of conduct before participating in or contributing to this project.

Contributing

We welcome contributions and collaboration on this project. Please read our contributor's guide to understand how best to work with us.

License and Authors

Daniel James logo Daniel James

This software is made available by Daniel James under the MIT license.

Thanks to @bendrucker for absoluteify, which provided a great reference for using the trumpet package to convert relative paths in HTML into absolute paths.

thzinc/storybook-addon-confluence