feat: Export PanelName

#143 To make hiding addon tab little easier.
storybookjs · Mar 12, 2022 · 851b486 · 851b486
1 parent 7d54079
commit 851b486
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 15 deletions.
diff --git a/packages/examples-tab/.storybook/main.js b/packages/examples-tab/.storybook/main.js
@@ -3,16 +3,17 @@ const main = require('../../examples/.storybook/main')
 module.exports = {
   stories: [
     '../../examples/stories/**/*.stories.mdx',
-    '../../examples/stories/**/*.stories.{js,jsx}'
+    '../../examples/stories/**/*.stories.{js,jsx}',
+    '../stories/**/*.stories.{js,jsx,mdx}',
   ],
   addons: [
     '@storybook/addon-docs',
     {
       name: 'storybook-addon-designs',
       options: {
-        renderTarget: 'tab'
-      }
-    }
+        renderTarget: 'tab',
+      },
+    },
   ],
   webpackFinal(_config) {
     const config = main.webpackFinal(_config)
@@ -27,13 +28,13 @@ module.exports = {
             use: [
               {
                 loader: 'babel-loader',
-                options: require('../../examples/package.json').babel
-              }
-            ]
+                options: require('../../examples/package.json').babel,
+              },
+            ],
           },
-          ...config.module.rules
-        ]
-      }
+          ...config.module.rules,
+        ],
+      },
     }
-  }
+  },
 }
diff --git a/packages/examples-tab/stories/hide-tab.stories.mdx b/packages/examples-tab/stories/hide-tab.stories.mdx
@@ -0,0 +1,52 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import { Subtitle } from '@storybook/addon-docs/blocks'
+import { LinkTo } from '@storybook/addon-links'
+import { Badge } from '@storybook/components'
+
+import { PanelName } from 'storybook-addon-designs'
+
+<Meta title="Docs/Advanced Usage/Configure Tab" />
+
+# Hide "Design" Tab
+
+<Subtitle>Tab renderer specific usage</Subtitle>
+
+You can hide `Design` tab by setting `previewTabs["STORYBOOK_ADDON_DESIGNS/panel"].hidden = true` parameter. For convenience, the addon exports the tab name as `PanelName`.
+
+```js
+// your.stories.js
+export const myStory = () => <MyComponent />
+
+myStory.parameteras = {
+  previewTabs: {
+    'STORYBOOK_ADDON_DESIGNS/panel': {
+      hidden: true,
+    },
+  },
+}
+
+// or...
+import { PanelName as DesignsAddon } from 'storybook-addon-designs'
+
+export const myStory = () => <MyComponent />
+
+myStory.parameteras = {
+  previewTabs: {
+    [DesignsAddon]: {
+      hidden: true,
+    },
+  },
+}
+```
+
+<Canvas>
+  <Story
+    name="Sample"
+    parameters={{
+      viewMode: 'docs',
+      previewTabs: { [PanelName]: { hidden: true } },
+    }}
+  >
+    <button>Button</button>
+  </Story>
+</Canvas>
diff --git a/packages/storybook-addon-designs/src/index.ts b/packages/storybook-addon-designs/src/index.ts
@@ -1,6 +1,6 @@
 import addons, { makeDecorator, StoryWrapper } from '@storybook/addons'
 
-import { Events, ParameterName } from './addon'
+import { Events, PanelName, ParameterName } from './addon'
 import { Config } from './config'
 
 const wrapper: StoryWrapper = (getStory, context, { parameters }) => {
@@ -15,7 +15,7 @@ export const withDesign = makeDecorator({
   name: 'withDesign',
   parameterName: ParameterName,
   skipIfNoParametersOrOptions: true,
-  wrapper
+  wrapper,
 })
 
 /**
@@ -28,6 +28,6 @@ if (module && module.hot && module.hot.decline) {
 }
 
 /**
- * Useful exports for third party developers
+ * Useful exports for third party developers and advanced usages
  */
-export { Config, ParameterName as PARAM_KEY }
+export { Config, ParameterName as PARAM_KEY, PanelName }