Merge pull request #9531 from atanasster/mdx-compiler-multiple-children

Addon-docs: Fix MDX stories with multiple children

addons/docs/src/blocks/Props.tsx

@@ -170,7 +170,8 @@ export const StoryTable: FC<StoryProps & { components: Record<string, Component>
       string,
       ArgsTableProps
     >;
-    const storyHasArgsWithControls = !storyArgTypes || !Object.values(storyArgTypes).find((v) => !!v?.control);
+    const storyHasArgsWithControls =
+      !storyArgTypes || !Object.values(storyArgTypes).find((v) => !!v?.control);
     if (storyHasArgsWithControls) {
       updateArgs = null;
       tabs = {};

addons/docs/src/mdx/__testfixtures__/story-multiple-children.mdx

@@ -0,0 +1,10 @@
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Multiple" />
+
+# Multiple children
+
+<Story  name="multiple children">
+   <p>Hello Child #1</p>
+   <p>Hello Child #2</p>
+</Story>

addons/docs/src/mdx/__testfixtures__/story-multiple-children.output.snapshot

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`docs-mdx-compiler-plugin story-multiple-children.mdx 1`] = `
+"/* @jsx mdx */
+import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = (name) =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <Meta title=\\"Multiple\\" mdxType=\\"Meta\\" />
+      <h1>{\`Multiple children\`}</h1>
+      <Story name=\\"multiple children\\" mdxType=\\"Story\\">
+        <p>Hello Child #1</p>
+        <p>Hello Child #2</p>
+      </Story>
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const multipleChildren = () => (
+  <>
+    <p>Hello Child #1</p>
+    <p>Hello Child #2</p>
+  </>
+);
+multipleChildren.story = {};
+multipleChildren.story.name = 'multiple children';
+multipleChildren.story.parameters = {
+  storySource: { source: '<p>Hello Child #1</p>\\\\n<p>Hello Child #2</p>' },
+};
+
+const componentMeta = { title: 'Multiple', includeStories: ['multipleChildren'] };
+
+const mdxStoryNameToKey = { 'multiple children': 'multipleChildren' };
+
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = {
+  ...(componentMeta.parameters.docs || {}),
+  page: () => (
+    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
+      <MDXContent />
+    </AddContext>
+  ),
+};
+
+export default componentMeta;
+"
+`;

addons/docs/src/mdx/mdx-compiler-plugin.js

@@ -61,37 +61,44 @@ function genStoryExport(ast, context) {
   const statements = [];
   const storyKey = getStoryKey(storyName, context.counter);
 
-  let body = ast.children.find((n) => n.type !== 'JSXText');
+  const bodyNodes = ast.children.filter((n) => n.type !== 'JSXText');
   let storyCode = null;
-
-  if (!body) {
+  let storyVal = null;
+  if (!bodyNodes.length) {
     // plain text node
     const { code } = generate(ast.children[0], {});
     storyCode = `'${code}'`;
+    storyVal = `() => (
+      ${storyCode}
+    )`;
   } else {
-    if (body.type === 'JSXExpressionContainer') {
-      // FIXME: handle fragments
-      body = body.expression;
+    const bodyParts = bodyNodes.map((bodyNode) => {
+      const body = bodyNode.type === 'JSXExpressionContainer' ? bodyNode.expression : bodyNode;
+      const { code } = generate(body, {});
+      return { code, body };
+    });
+    // if we have more than two children
+    // 1. Add line breaks
+    // 2. Enclose in <> ... </>
+    storyCode = bodyParts.map(({ code }) => code).join('\n');
+    const storyReactCode = bodyParts.length > 1 ? `<>\n${storyCode}\n</>` : storyCode;
+    // keep track if an indentifier or function call
+    // avoid breaking change for 5.3
+    switch (bodyParts.length === 1 && bodyParts[0].body.type) {
+      // We don't know what type the identifier is, but this code
+      // assumes it's a function from CSF. Let's see who complains!
+      case 'Identifier':
+        storyVal = `assertIsFn(${storyCode})`;
+        break;
+      case 'ArrowFunctionExpression':
+        storyVal = `(${storyCode})`;
+        break;
+      default:
+        storyVal = `() => (
+          ${storyReactCode}
+        )`;
+        break;
     }
-    const { code } = generate(body, {});
-    storyCode = code;
-  }
-
-  let storyVal = null;
-  switch (body && body.type) {
-    // We don't know what type the identifier is, but this code
-    // assumes it's a function from CSF. Let's see who complains!
-    case 'Identifier':
-      storyVal = `assertIsFn(${storyCode})`;
-      break;
-    case 'ArrowFunctionExpression':
-      storyVal = `(${storyCode})`;
-      break;
-    default:
-      storyVal = `() => (
-        ${storyCode}
-      )`;
-      break;
   }
 
   statements.push(`export const ${storyKey} = ${storyVal};`);

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

@@ -149,3 +149,12 @@ Flow types are not officially supported
 <Story name="docs disable" parameters={{ docs: { disable: true } }}>
   <Button>This souldn't show up in docs page</Button>
 </Story>
+
+
+## Story with multiple children
+<Preview>
+  <Story name="story multiple children">
+    <p>Hello Child #1</p>
+    <p>Hello Child #2</p>
+  </Story>
+</Preview>  

package.json

@@ -157,6 +157,7 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
     "chalk": "^4.0.0",
+    "chromatic": "^4.0.2",
     "codecov": "^3.5.0",
     "codelyzer": "^5.0.0",
     "commander": "^5.1.0",
@@ -221,7 +222,6 @@
     "shelljs": "^0.8.4",
     "shx": "^0.3.2",
     "sort-package-json": "^1.42.1",
-    "chromatic": "^4.0.2",
     "svelte": "^3.18.1",
     "svelte-jest": "^0.3.0",
     "teamcity-service-messages": "^0.1.11",