Addon-docs: Story parameter for disabling docs (#8313)

Addon-docs: Story parameter for disabling docs

addons/docs/docs/recipes.md

@@ -9,6 +9,7 @@
 - [Mixing storiesOf with CSF/MDX](#mixing-storiesof-with-csfmdx)
 - [Migrating from notes/info addons](#migrating-from-notesinfo-addons)
 - [Exporting documentation](#exporting-documentation)
+- [Disabling docs stories](#disabling-docs-stories)
 - [More resources](#more-resources)
 
 ## Component Story Format (CSF) with DocsPage
@@ -128,6 +129,29 @@ To address this, we’ve added a CLI flag to export just the docs. This flag is
 yarn build-storybook --docs
 ```
 
+## Disabling docs stories
+
+There are two cases where a user might wish to exclude stories from their documentation pages:
+
+### DocsPage
+
+User defines stories in CSF and renders docs using DocsPage, but wishes to exclude some fo the stories from the DocsPage to reduce noise on the page.
+
+```js
+export const foo = () => <Button>foo</Button>;
+foo.story = { parameters: { docs: { disable: true } } };
+```
+
+### MDX Stories
+
+User writes documentation & stories side-by-side in a single MDX file, and wants those stories to show up in the canvas but not in the docs themselves. They want something similar to the recipe "CSF stories with MDX docs" but want to do everything in MDX:
+
+```js
+<Story name="foo" parameters={{ docs: { disable: true }} >
+  <Button>foo</Button>
+</Story>
+```
+
 ## More resources
 
 Want to learn more? Here are some more articles on Storybook Docs:

addons/docs/src/blocks/DocsPage.tsx

@@ -113,7 +113,9 @@ export const DocsPage: React.FunctionComponent<DocsPageProps> = ({
       const propsTableProps = propsSlot(context);
 
       const { selectedKind, storyStore } = context;
-      const componentStories = storyStore.getStoriesForKind(selectedKind);
+      const componentStories = storyStore
+        .getStoriesForKind(selectedKind)
+        .filter((s: any) => !(s.parameters && s.parameters.docs && s.parameters.docs.disable));
       const primary = primarySlot(componentStories, context);
       const stories = storiesSlot(componentStories, context);
 

addons/docs/src/blocks/Story.tsx

@@ -40,7 +40,7 @@ const inferInlineStories = (framework: string): boolean => {
 
 export const getStoryProps = (
   props: StoryProps,
-  { id: currentId, storyStore, parameters, mdxStoryNameToId }: DocsContextProps
+  { id: currentId, storyStore, parameters, mdxStoryNameToId }: DocsContextProps | null
 ): PureStoryProps => {
   const { id } = props as StoryRefProps;
   const { name } = props as StoryDefProps;
@@ -49,11 +49,15 @@ export const getStoryProps = (
 
   const { height, inline } = props;
   const data = storyStore.fromId(previewId);
-  const { framework = null } = parameters || {};
+  const { framework = null } = (data && data.parameters) || {};
 
   // prefer props, then global options, then framework-inferred values
-  const { inlineStories = inferInlineStories(framework), iframeHeight = undefined } =
-    (parameters && parameters.docs) || {};
+  const docsParam = (data && data.parameters && data.parameters.docs) || {};
+  const { inlineStories = inferInlineStories(framework), iframeHeight = undefined } = docsParam;
+
+  if (docsParam.disable) {
+    return null;
+  }
   return {
     inline: typeof inline === 'boolean' ? inline : inlineStories,
     id: previewId,
@@ -67,6 +71,9 @@ const StoryContainer: React.FunctionComponent<StoryProps> = props => (
   <DocsContext.Consumer>
     {context => {
       const storyProps = getStoryProps(props, context);
+      if (!storyProps) {
+        return null;
+      }
       return (
         <div id={storyBlockIdFromId(storyProps.id)}>
           <MDXProvider components={resetComponents}>

examples/official-storybook/stories/addon-docs/addon-docs.stories.js

@@ -45,3 +45,10 @@ jsxOverride.story = {
     docs: { page: () => <div>Hello docs</div> },
   },
 };
+
+export const docsDisable = () => <div>This story shouldn't show up in DocsPage</div>;
+docsDisable.story = {
+  parameters: {
+    docs: { disable: true },
+  },
+};

examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx

@@ -121,3 +121,9 @@ export const nonStory2 = () => <Button>Not a story</Button>; // another one
 Flow types are not officially supported
 
 <Props of={FlowTypeButton} />
+
+## Docs Disable
+
+<Story name="docs disable" parameters={{ docs: { disable: true } }}>
+  <Button>This souldn't show up in docs page</Button>
+</Story>