GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-01 05:05:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

MDX: Handle <Story> name starting with number

Browse Source
This commit is contained in:
Michael Shilman 2019-10-18 11:23:03 +08:00
parent 11697a8d9d
commit 4c54871761
3 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap
View File

@ -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 || {};

4
addons/docs/src/mdx/__testfixtures__/story-definitions.mdx
View File

@ -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
addons/docs/src/mdx/mdx-compiler-plugin.js
View File

@ -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;
};