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

Jump to bottom

Addon-docs: Add docsContainer parameter #7814

Merged
merged 4 commits into from
Aug 20, 2019
Merged

Addon-docs: Add docsContainer parameter #7814

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eab479e
Addon-docs: Add docsContainer parameter
shilman Aug 20, 2019
17ed323
Addon-docs: Fix MDX on CSF and add test case to offical-storybook
shilman Aug 20, 2019
31141c9
Fix linting issues
shilman Aug 20, 2019
f3af278
Official-storybook: Add DocsContainer as story decorator
shilman Aug 20, 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
7 changes: 2 additions & 5 deletions addons/docs/src/blocks/DocsContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { DocsContextProps, DocsContext } from './DocsContext';

interface DocsContainerProps {
context: DocsContextProps;
content: React.ElementType<any>;
}

interface CodeOrSourceProps {
Expand Down Expand Up @@ -43,7 +42,7 @@ const defaultComponents = {

export const DocsContainer: React.FunctionComponent<DocsContainerProps> = ({
context,
content: MDXContent,
children,
}) => {
const parameters = (context && context.parameters) || {};
const options = parameters.options || {};
Expand All @@ -55,9 +54,7 @@ export const DocsContainer: React.FunctionComponent<DocsContainerProps> = ({
<ThemeProvider theme={theme}>
<MDXProvider components={components}>
<DocsWrapper>
<DocsContent>
<MDXContent components={components} />
</DocsContent>
<DocsContent>{children}</DocsContent>
</DocsWrapper>
</MDXProvider>
</ThemeProvider>
Expand Down
46 changes: 7 additions & 39 deletions addons/docs/src/blocks/DocsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,13 +95,13 @@ const DocsStory: React.FunctionComponent<DocsStoryProps> = ({
</>
);

const DocsPage: React.FunctionComponent<DocsPageProps> = ({
titleSlot,
subtitleSlot,
descriptionSlot,
primarySlot,
propsSlot,
storiesSlot,
export const DocsPage: React.FunctionComponent<DocsPageProps> = ({
titleSlot = defaultTitleSlot,
subtitleSlot = defaultSubtitleSlot,
descriptionSlot = defaultDescriptionSlot,
primarySlot = defaultPrimarySlot,
propsSlot = defaultPropsSlot,
storiesSlot = defaultStoriesSlot,
}) => (
<DocsContext.Consumer>
{context => {
Expand Down Expand Up @@ -130,35 +130,3 @@ const DocsPage: React.FunctionComponent<DocsPageProps> = ({
}}
</DocsContext.Consumer>
);

interface DocsPageWrapperProps {
context: DocsContextProps;
titleSlot?: StringSlot;
subtitleSlot?: StringSlot;
descriptionSlot?: StringSlot;
primarySlot?: StorySlot;
propsSlot?: PropsSlot;
storiesSlot?: StoriesSlot;
}

const DocsPageWrapper: React.FunctionComponent<DocsPageWrapperProps> = ({
context,
titleSlot = defaultTitleSlot,
subtitleSlot = defaultSubtitleSlot,
descriptionSlot = defaultDescriptionSlot,
primarySlot = defaultPrimarySlot,
propsSlot = defaultPropsSlot,
storiesSlot = defaultStoriesSlot,
}) => (
/* eslint-disable react/destructuring-assignment */
<DocsContainer
context={{ ...context, mdxKind: context.selectedKind }}
content={() => (
<DocsPage
{...{ titleSlot, subtitleSlot, descriptionSlot, primarySlot, propsSlot, storiesSlot }}
/>
)}
/>
);

export { DocsPageWrapper as DocsPage };
3 changes: 2 additions & 1 deletion addons/docs/src/frameworks/angular/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/* eslint-disable import/no-extraneous-dependencies */
import { addParameters } from '@storybook/angular';
import { DocsPage } from '@storybook/addon-docs/blocks';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

addParameters({
docsContainer: DocsContainer,
docs: DocsPage,
});
3 changes: 2 additions & 1 deletion addons/docs/src/frameworks/html/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/* eslint-disable import/no-extraneous-dependencies */
import { addParameters } from '@storybook/html';
import { DocsPage } from '@storybook/addon-docs/blocks';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

addParameters({
docsContainer: DocsContainer,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still feel like we should have one parameter for docs and nest things under it :/

docs: DocsPage,
});
3 changes: 2 additions & 1 deletion addons/docs/src/frameworks/react/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/* eslint-disable import/no-extraneous-dependencies */
import { addParameters } from '@storybook/react';
import { DocsPage } from '@storybook/addon-docs/blocks';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

addParameters({
docsContainer: DocsContainer,
docs: DocsPage,
});
3 changes: 2 additions & 1 deletion addons/docs/src/frameworks/vue/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/* eslint-disable import/no-extraneous-dependencies */
import { addParameters } from '@storybook/vue';
import { DocsPage } from '@storybook/addon-docs/blocks';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

addParameters({
docsContainer: DocsContainer,
docs: DocsPage,
});
120 changes: 60 additions & 60 deletions 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 @@ -72,12 +72,12 @@ const componentMeta = {
includeStories: ['one'],
};

const mdxKind = componentMeta.title || componentMeta.displayName;
const WrappedMDXContent = ({ context }) => (
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
);
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = WrappedMDXContent;
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;

export default componentMeta;
"
Expand Down Expand Up @@ -125,12 +125,12 @@ storybookDocsOnly.story = { parameters: { docsOnly: true } };

const componentMeta = { title: 'docs-only', includeStories: ['storybookDocsOnly'] };

const mdxKind = componentMeta.title || componentMeta.displayName;
const WrappedMDXContent = ({ context }) => (
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
);
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = WrappedMDXContent;
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;

export default componentMeta;
"
Expand Down Expand Up @@ -186,12 +186,12 @@ helloStory.story.parameters = { mdxSource: '<Button>Hello button</Button>' };

const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };

const mdxKind = componentMeta.title || componentMeta.displayName;
const WrappedMDXContent = ({ context }) => (
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
);
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = WrappedMDXContent;
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;

export default componentMeta;
"
Expand Down Expand Up @@ -268,12 +268,12 @@ const componentMeta = {
includeStories: ['componentNotes', 'storyNotes'],
};

const mdxKind = componentMeta.title || componentMeta.displayName;
const WrappedMDXContent = ({ context }) => (
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
);
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = WrappedMDXContent;
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;

export default componentMeta;
"
Expand Down Expand Up @@ -344,12 +344,12 @@ const componentMeta = {
includeStories: ['helloButton', 'two'],
};

const mdxKind = componentMeta.title || componentMeta.displayName;
const WrappedMDXContent = ({ context }) => (
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
);
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = WrappedMDXContent;
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;

export default componentMeta;
"
Expand Down Expand Up @@ -386,12 +386,12 @@ MDXContent.isMDXComponent = true;

const componentMeta = { includeStories: [] };

const mdxKind = componentMeta.title || componentMeta.displayName;
const WrappedMDXContent = ({ context }) => (
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
);
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = WrappedMDXContent;
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;

export default componentMeta;
"
Expand Down Expand Up @@ -435,12 +435,12 @@ text.story.parameters = { mdxSource: \\"'Plain text'\\" };

const componentMeta = { title: 'Text', includeStories: ['text'] };

const mdxKind = componentMeta.title || componentMeta.displayName;
const WrappedMDXContent = ({ context }) => (
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
);
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = WrappedMDXContent;
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;

export default componentMeta;
"
Expand Down Expand Up @@ -501,12 +501,12 @@ wPunctuation.story.parameters = { mdxSource: '<Button>with punctuation</Button>'

const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory', 'wPunctuation'] };

const mdxKind = componentMeta.title || componentMeta.displayName;
const WrappedMDXContent = ({ context }) => (
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
);
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = WrappedMDXContent;
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;

export default componentMeta;
"
Expand Down Expand Up @@ -560,12 +560,12 @@ story0.story.parameters = {

const componentMeta = { includeStories: ['story0'] };

const mdxKind = componentMeta.title || componentMeta.displayName;
const WrappedMDXContent = ({ context }) => (
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
);
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = WrappedMDXContent;
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;

export default componentMeta;
"
Expand Down Expand Up @@ -631,12 +631,12 @@ toStorybook.story.parameters = {

const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] };

const mdxKind = componentMeta.title || componentMeta.displayName;
const WrappedMDXContent = ({ context }) => (
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
);
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = WrappedMDXContent;
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;

export default componentMeta;
"
Expand Down Expand Up @@ -673,12 +673,12 @@ MDXContent.isMDXComponent = true;

const componentMeta = { includeStories: [] };

const mdxKind = componentMeta.title || componentMeta.displayName;
const WrappedMDXContent = ({ context }) => (
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
);
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = WrappedMDXContent;
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;

export default componentMeta;
"
Expand Down Expand Up @@ -716,12 +716,12 @@ MDXContent.isMDXComponent = true;

const componentMeta = { includeStories: [] };

const mdxKind = componentMeta.title || componentMeta.displayName;
const WrappedMDXContent = ({ context }) => (
<DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
);
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = WrappedMDXContent;
componentMeta.parameters.docsContainer = ({ context, children }) => (
<DocsContainer context={{ ...context, mdxKind }}>{children}</DocsContainer>
);
componentMeta.parameters.docs = MDXContent;

export default componentMeta;
"
Expand Down
6 changes: 3 additions & 3 deletions 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 @@ -163,10 +163,10 @@ function getExports(node, counter) {
// insert `mdxKind` into the context so that we can know what "kind" we're rendering into
// when we render <Story name="xxx">...</Story>, since this MDX can be attached to any `selectedKind`!
const wrapperJs = `
const mdxKind = componentMeta.title || componentMeta.displayName;
const WrappedMDXContent = ({ context }) => <DocsContainer context={{...context, mdxKind}} content={MDXContent} />;
const mdxKind = componentMeta.title;
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = WrappedMDXContent;
componentMeta.parameters.docsContainer = ({ context, children }) => <DocsContainer context={{...context, mdxKind}}>{children}</DocsContainer>;
componentMeta.parameters.docs = MDXContent;
`.trim();

function stringifyMeta(meta) {
Expand Down
9 changes: 7 additions & 2 deletions lib/core/src/client/preview/start.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,9 +217,14 @@ export default function start(render, { decorateStory } = {}) {
// Given a cleaned up state, render the appropriate view mode
switch (viewMode) {
case 'docs': {
const StoryDocs = (parameters && parameters.docs) || NoDocs;
const DocsContainer =
// eslint-disable-next-line react/prop-types
(parameters && parameters.docsContainer) || (({ children }) => <>{children}</>);
const Docs = (parameters && parameters.docs) || NoDocs;
ReactDOM.render(
<StoryDocs context={renderContext} />,
<DocsContainer context={renderContext}>
<Docs />
</DocsContainer>,
document.getElementById('docs-root')
);
break;
Expand Down