@component-controls/storybook v3.15.0

Table of contents

• Shocase sites
• Overview
  • Storybook addon panels
• Custom documentation pages
  • Hide storybookjs Canvas
  • Create custom Canvas page
  • Configure '@component-controls/storybook' to load out custom page only
• List of components
  • ComponentSource
  • Description
  • Meta
  • Playground
  • PropsTable
  • Stories
  • Story
  • StoryConfig
  • StorySource
  • Subtitle
  • Title
  • BlockContextProvider
  • ControlsProvider
  • ThemeProvider
  • PageContextContainer
  • DocsContainer
  • AddonPanel
  • PropsTablePanel
  • StoryConfigPanel
  • StorySourcePanel

Shocase sites

• Storybook 6 without addon-docs
• Storybook 6

Overview

Storybook plugin for documenting your projects with component controls

• Full replacement for the storybook addon-docs
• Works with storybook-5 and storybook-6

Limitations

• Initial version is only for react apps. More frameworks are on the roadmap.
• Only handles the ESM(CSF) and MDX stories format. The storiesOf API is not supported and there are currently no plans to support it.

Getting started with storybook

Storybook addon panels

The component-controls block components have been designed from the ground up to be able to be placed either on documentation pages or in addon tabs.

You can turn on and off the available panels:

  {
    name: '@component-controls/storybook',
    options: {
      controlsPanel: true,
      propsPanel: true,
      storySourcePanel: true,
    }
  }  

Custom documentation pages

component-controls installs a default Page with some standard documentation boocks, however you can replace the deafult page and add new pages.

Here is an example that will completely hide the storybook Canvas tab and replace it with our custom documentation page

Hide storybookjs Canvas

.storybook/manager.js

import { addons } from '@storybook/addons';
addons.setConfig({
  previewTabs: {
    canvas: {
      //hide storybooks Canvas tab
      hidden: true,
    },
    'CUSTOM_PAGE_ADDON/canvas': {
      //place our custom Canvas page first in order of tabs
      index: 0,
    },

  },
});

Create custom Canvas page

.storybook/canvas-page.tsx

import React from 'react';
import { CanvasPage } from '@component-controls/pages';
import { DocsContainer } from '@component-controls/storybook';

export default {
  key: 'canvas',
  title: 'Canvas',
  render: ({ active }: { active: boolean }) => (
    <DocsContainer active={active}>
      <CanvasPage />
    </DocsContainer>
  ),
};

Configure '@component-controls/storybook' to load out custom page only

.storybook/main.tsx

module.exports = {
  addons: [
    '@storybook/addon-docs',
    {
      name: '@component-controls/storybook',
      options: {
        pages: [require.resolve('./canvas-page.tsx')],
      }
    },
  ],
};

List of components

ComponentSource

ComponentSource source code

properties

Description

Description source code

properties

Meta

empty component for storybook addon-docs compatibility

Meta source code

Playground

Playground source code

properties

PropsTable

PropsTable source code

properties

Stories

Stories source code

properties

Story

Story source code

properties

StoryConfig

StoryConfig source code

properties

StorySource

StorySource source code

properties

Subtitle

Subtitle source code

properties

Title

Title source code

properties

BlockContextProvider

BlockContextProvider source code

properties

ControlsProvider

ControlsProvider source code

ThemeProvider

ThemeProvider source code

PageContextContainer

PageContextContainer source code

DocsContainer

DocsContainer source code

properties

AddonPanel

AddonPanel source code

properties

PropsTablePanel

PropsTablePanel source code

properties

StoryConfigPanel

StoryConfigPanel source code

properties

StorySourcePanel

StorySourcePanel source code

properties