-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
/
Story.tsx
83 lines (69 loc) · 2.27 KB
/
Story.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import React, { FunctionComponent, ReactNode, ElementType, useEffect } from 'react';
import { MDXProvider } from '@mdx-js/react';
import { resetComponents } from '@storybook/components';
import { DOCS_TARGETTED_RENDER, DOCS_TARGETTED_DESTROY } from '@storybook/core-events';
import { toId, storyNameFromExport } from '@storybook/csf';
import { Args, BaseAnnotations, addons } from '@storybook/addons';
import { CURRENT_SELECTION } from './types';
import { DocsContext, DocsContextProps } from './DocsContext';
export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`;
type CommonProps = BaseAnnotations<Args, any> & {
height?: string;
inline?: boolean;
};
type StoryDefProps = {
name: string;
children: ReactNode;
};
type StoryRefProps = {
id?: string;
};
type StoryImportProps = {
name: string;
story: ElementType;
};
export type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps;
export const lookupStoryId = (
storyName: string,
{ mdxStoryNameToKey, mdxComponentMeta }: DocsContextProps
) =>
toId(
mdxComponentMeta.id || mdxComponentMeta.title,
storyNameFromExport(mdxStoryNameToKey[storyName])
);
const Placeholder: FunctionComponent<any> = ({ id, name }) => {
const channel = addons.getChannel();
const identifier = storyBlockIdFromId(id);
useEffect(() => {
channel.emit(DOCS_TARGETTED_RENDER, { identifier, id, name });
return () => {
channel.emit(DOCS_TARGETTED_DESTROY, { identifier, id, name });
// TODO this does nothing, should it do something though?
};
});
return (
<div id={identifier} data-name={name}>
<span data-is-loadering-indicator="true">loading story...</span>
</div>
);
};
const Story: FunctionComponent<StoryProps> = (props) => (
<DocsContext.Consumer>
{(context) => {
const { id } = props as StoryRefProps;
const { name } = props as StoryDefProps;
const inputId = id === CURRENT_SELECTION ? context.id : id;
const previewId = inputId || lookupStoryId(name, context);
return (
<MDXProvider components={resetComponents}>
<Placeholder id={previewId} name={name} />
</MDXProvider>
);
}}
</DocsContext.Consumer>
);
Story.defaultProps = {
children: null,
name: null,
};
export { Story };