MDX: Handle <Story> name starting with number

storybookjs · Oct 18, 2019 · 4c54871 · 4c54871
1 parent 11697a8
commit 4c54871
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap b/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap
@@ -511,6 +511,9 @@ function MDXContent({ components, ...props }) {
       <Story name=\\"w/punctuation\\" mdxType=\\"Story\\">
         <Button mdxType=\\"Button\\">with punctuation</Button>
       </Story>
+      <Story name=\\"1 fine day\\" mdxType=\\"Story\\">
+        <Button mdxType=\\"Button\\">starts with number</Button>
+      </Story>
     </MDXLayout>
   );
 }
@@ -532,12 +535,21 @@ wPunctuation.story = {};
 wPunctuation.story.name = 'w/punctuation';
 wPunctuation.story.parameters = { mdxSource: '<Button>with punctuation</Button>' };
 
-const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory', 'wPunctuation'] };
+export const _1FineDay = () => <Button>starts with number</Button>;
+_1FineDay.story = {};
+_1FineDay.story.name = '1 fine day';
+_1FineDay.story.parameters = { mdxSource: '<Button>starts with number</Button>' };
+
+const componentMeta = {
+  title: 'Button',
+  includeStories: ['one', 'helloStory', 'wPunctuation', '_1FineDay'],
+};
 
 const mdxStoryNameToId = {
   one: 'button--one',
   'hello story': 'button--hello-story',
   'w/punctuation': 'button--w-punctuation',
+  '1 fine day': 'button--1-fine-day',
 };
 
 componentMeta.parameters = componentMeta.parameters || {};

diff --git a/addons/docs/src/mdx/__testfixtures__/story-definitions.mdx b/addons/docs/src/mdx/__testfixtures__/story-definitions.mdx
@@ -16,3 +16,7 @@ import { Story, Meta } from '@storybook/addon-docs/blocks';
 <Story name="w/punctuation">
   <Button>with punctuation</Button>
 </Story>
+
+<Story name="1 fine day">
+  <Button>starts with number</Button>
+</Story>
diff --git a/addons/docs/src/mdx/mdx-compiler-plugin.js b/addons/docs/src/mdx/mdx-compiler-plugin.js
@@ -19,12 +19,16 @@ function getAttr(elt, what) {
 }
 
 const isReserved = name => RESERVED.exec(name);
+const startsWithNumber = name => /^\d/.exec(name);
 
 const sanitizeName = name => {
   let key = camelCase(name);
   if (isReserved(key)) {
     key = `${key}Story`;
   }
+  if (startsWithNumber(key)) {
+    key = `_${key}`;
+  }
   return key;
 };