feat: storyconfig as addon panel

examples/storybook-6/.storybook/main.js

@@ -30,6 +30,7 @@ module.exports = {
       options: {
         propsPanel: true,
         storySourcePanel: true,
+        storyConfigPanel: true,
       }
     }  
   ],

integrations/storybook/rollup.config.js

@@ -8,6 +8,7 @@ export default config({
     './src/register-controls-panel.tsx',
     './src/register-props-panel.tsx',
     './src/register-storysource-panel.tsx',
+    './src/register-storyconfig-panel.tsx',
     './src//docs-page/full-page.tsx',
     './src//docs-page/testing-page.tsx',
   ],

integrations/storybook/src/blocks/StoryConfig.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import {
+  StoryConfig as BaseStoryConfig,
+  StoryConfigProps,
+} from '@component-controls/blocks';
+import { ControlsProvider } from '../context/ControlsProvider';
+
+export const StorySource: FC<StoryConfigProps> = props => {
+  return (
+    <ControlsProvider>
+      <BaseStoryConfig {...props} />
+    </ControlsProvider>
+  );
+};

integrations/storybook/src/panel/StoryConfigPanel.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StoryConfig } from '@component-controls/blocks';
+import { AddonPanel, AddonPanelProps } from './AddonPanel';
+
+export const StoryConfigPanel: React.FC<AddonPanelProps> = props => (
+  <AddonPanel {...props}>
+    <StoryConfig id="." />
+  </AddonPanel>
+);

integrations/storybook/src/panel/constants.ts

@@ -1,3 +1,4 @@
 export const CONTROLS_PANEL_ID = 'controls/panels/controls';
 export const STORYSOURCE_PANEL_ID = 'controls/panels/storysource';
 export const PROPS_PANEL_ID = 'controls/panels/props';
+export const STORYCONFIG_PANEL_ID = 'controls/panels/storyconfig';

integrations/storybook/src/preset.ts

@@ -32,6 +32,7 @@ module.exports = {
       controlsPanel = false,
       propsPanel = false,
       storySourcePanel = false,
+      storyConfigPanel = false,
     } = options;
     if (controlsPanel) {
       result.push(require.resolve('./register-controls-panel'));
@@ -42,6 +43,10 @@ module.exports = {
     if (storySourcePanel) {
       result.push(require.resolve('./register-storysource-panel'));
     }
+    if (storyConfigPanel) {
+      result.push(require.resolve('./register-storyconfig-panel'));
+    }
+
     return result;
   },
   webpackFinal: (config: any = {}, options: PresetOptions = {}) => {

integrations/storybook/src/register-storyconfig-panel.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable react/display-name */
+import * as React from 'react';
+import addons from '@storybook/addons';
+import { StoryConfigPanel } from './panel/StoryConfigPanel';
+import { STORYCONFIG_PANEL_ID } from './panel/constants';
+
+addons.register(STORYCONFIG_PANEL_ID, api => {
+  addons.addPanel(`${STORYCONFIG_PANEL_ID}_panel`, {
+    title: 'Story config',
+    render: ({ active, key }) => (
+      <StoryConfigPanel key={key} active={active} api={api} />
+    ),
+  });
+});

integrations/storybook/src/types.ts

@@ -16,6 +16,10 @@ export interface PresetOptions {
    * whether to display the StorySource block as an addon panel in storybook
    */
   storySourcePanel?: boolean;
+  /**
+   * whether to display the StoryConfig block as an addon panel in storybook
+   */
+  storyConfigPanel?: boolean;
 
   /**
    * additional custom documentation pages