Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MDX: Handle <Story> name starting with number #8469

Merged
merged 2 commits into from
Oct 18, 2019
Merged

MDX: Handle <Story> name starting with number #8469

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4c54871
MDX: Handle `<Story>` name starting with number
shilman Oct 18, 2019
766f013
Update mdx-compiler-plugin.js
shilman Oct 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap
View file
Open in desktop
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
View file
Open in desktop
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>
5 changes: 4 additions & 1 deletion addons/docs/src/mdx/mdx-compiler-plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,13 @@ 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)) {
if (startsWithNumber(key)) {
shilman marked this conversation as resolved.
Show resolved Hide resolved
key = `_${key}`;
} else if (isReserved(key)) {
key = `${key}Story`;
}
return key;
Expand Down