From 4c548717618c424f40ede632cb3a8c0f2b515352 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Fri, 18 Oct 2019 11:23:03 +0800
Subject: [PATCH] MDX: Handle `<Story>` name starting with number

---
 .../__snapshots__/mdx-compiler-plugin.test.js.snap | 14 +++++++++++++-
 .../src/mdx/__testfixtures__/story-definitions.mdx |  4 ++++
 addons/docs/src/mdx/mdx-compiler-plugin.js         |  4 ++++
 3 files changed, 21 insertions(+), 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
index 9644bb08c6a8..76cfd8a74090 100644
--- 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
index 74dc5db7a0d2..b50bb0df7e2c 100644
--- 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
index e21ef8fdd581..1e0fa1dfbc41 100644
--- 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;
 };