Showroom

Storybook patterns overwhelm most customer. To provide only the patterns the customer needs Wingsuit (>=1.2) adds a showroom feature.

To configure the structure of Wingsuit adds a alterStory and alterPattern hook. Open apps/storybook/preview.js:

Here a sample for a Drupal Layout Builder centric project.

configure(
  module,
  [
    require.context('./patterns', true, /\.stories(\.jsx|\.js|\.mdx)$/),
    require.context('wspatterns', true, /\.stories(\.jsx|\.js|\.mdx)$/),
  ],
  require.context('./config', false, /\.json|\.ya?ml$/),
  require.context('wspatterns', true, /\.twig$/),
  namespaces,
  renderImpl,
  {
    alterStory: (story) => {
      if (process.env.STORYBOOK_DOCS === 'true') {
        const docsStories = {
          Welcome: 'Welcome',
        };
        if (docsStories[story.title]) {
          return { ...story, ...{ title: docsStories[story.title] } };
        }
        return null;
      }
      return story;
    },
    alterPattern: (pattern) => {
      if (process.env.STORYBOOK_DOCS === 'true') {
        const docsPages = {
          section: 'Section',
          section_slider: 'Section',
          hero: 'Blocks',
          card: 'Blocks',
          rich_text: 'Blocks',
          button_group: 'Blocks',
          avatar: 'Blocks',
        };
        if (docsPages[pattern.getId()]) {
          pattern.setNamespace(docsPages[pattern.getId()]);
          return pattern;
        }
        return null;
      }
      return pattern;
    },
  }

Start storybook in showroom mode

Run either

yarn ws build --docs

or execute

yarn ws dev --docs

to start storybook in dev mode.