Storybook

Volto provides integration with Storybook, which is used to document and demonstrate various UI component. You can check the current deployed version of the Storybook at the Plone 6 (dev) documentation website

To run Volto's Storybook, with a clone of Volto you can run:

yarn storybook

The generated Volto project scaffold also provides integration with Volto addons, so any stories contained in addons are discovered an properly published.

A Volto storybook story would look like this:

import { injectIntl } from 'react-intl';
import React from 'react';
import { BreadcrumbsComponent } from './Breadcrumbs';
import Wrapper from '@plone/volto/storybook';

export const Breadcrumb = injectIntl(({ children, ...args }) => {
  return (
    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
      <div className="ui segment form attached" style={{ width: '400px' }}>
        <BreadcrumbsComponent
          pathname=""
          items={[
            {
              '@id': 'https://volto.kitconcept.com/api/Members',
              title: 'Users',
            },
          ]}
          getBreadcrumbs={() => {}}
          {...args}
        />
      </div>
    </Wrapper>
  );
});

Notice the <Wrapper> component, which provides a minimal Volto "environment context" that to ensure that the deeply-integrated Volto components can function.