Skip to content

Commit

Permalink
MDX: Handle <Story> name starting with number
Browse files Browse the repository at this point in the history
  • Loading branch information
shilman committed Oct 18, 2019
1 parent 11697a8 commit 4c54871
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand All @@ -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 || {};
Expand Down
4 changes: 4 additions & 0 deletions addons/docs/src/mdx/__testfixtures__/story-definitions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
4 changes: 4 additions & 0 deletions addons/docs/src/mdx/mdx-compiler-plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

Expand Down

0 comments on commit 4c54871

Please sign in to comment.