@storybook/addon-docs 7.0.0-alpha.7 → 7.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -77
- package/angular/index.js +1 -1
- package/dist/DocsRenderer-FLOC7YSC.mjs +1 -0
- package/dist/chunk-HXSBEJGO.mjs +1 -0
- package/dist/chunk-MA2MUXQN.mjs +1 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +1 -0
- package/dist/index.mjs +1 -0
- package/dist/preset.d.ts +5 -0
- package/dist/preset.js +7 -0
- package/dist/preset.mjs +7 -0
- package/dist/preview.d.ts +3 -0
- package/dist/preview.js +1 -0
- package/dist/preview.mjs +1 -0
- package/dist/shims/mdx-react-shim.d.ts +1 -0
- package/dist/shims/mdx-react-shim.js +1 -0
- package/dist/shims/mdx-react-shim.mjs +1 -0
- package/jest-transform-mdx.js +4 -3
- package/jest.config.js +7 -0
- package/package.json +80 -46
- package/preset.js +1 -1
- package/preview.js +2 -1
- package/web-components/README.md +1 -0
- package/LICENSE +0 -21
- package/blocks.d.ts +0 -2
- package/blocks.js +0 -14
- package/dist/cjs/blocks/Anchor.js +0 -23
- package/dist/cjs/blocks/ArgsTable.js +0 -329
- package/dist/cjs/blocks/Canvas.js +0 -119
- package/dist/cjs/blocks/Description.js +0 -126
- package/dist/cjs/blocks/DocsContainer.js +0 -134
- package/dist/cjs/blocks/DocsContext.js +0 -25
- package/dist/cjs/blocks/DocsPage.js +0 -30
- package/dist/cjs/blocks/DocsRenderer.js +0 -48
- package/dist/cjs/blocks/DocsStory.js +0 -66
- package/dist/cjs/blocks/ExternalDocsContainer.js +0 -64
- package/dist/cjs/blocks/ExternalPreview.js +0 -99
- package/dist/cjs/blocks/Heading.js +0 -31
- package/dist/cjs/blocks/Meta.js +0 -64
- package/dist/cjs/blocks/Preview.js +0 -23
- package/dist/cjs/blocks/Primary.js +0 -39
- package/dist/cjs/blocks/Props.js +0 -29
- package/dist/cjs/blocks/Source.js +0 -175
- package/dist/cjs/blocks/SourceContainer.js +0 -67
- package/dist/cjs/blocks/Stories.js +0 -47
- package/dist/cjs/blocks/Story.js +0 -152
- package/dist/cjs/blocks/Subheading.js +0 -31
- package/dist/cjs/blocks/Subtitle.js +0 -39
- package/dist/cjs/blocks/Title.js +0 -44
- package/dist/cjs/blocks/Wrapper.js +0 -20
- package/dist/cjs/blocks/enhanceSource.js +0 -90
- package/dist/cjs/blocks/index.js +0 -394
- package/dist/cjs/blocks/mdx.js +0 -234
- package/dist/cjs/blocks/types.js +0 -10
- package/dist/cjs/blocks/useStory.js +0 -44
- package/dist/cjs/blocks/utils.js +0 -40
- package/dist/cjs/index.js +0 -18
- package/dist/cjs/manager.js +0 -20
- package/dist/cjs/preset.js +0 -154
- package/dist/cjs/preview.js +0 -22
- package/dist/cjs/shared.js +0 -22
- package/dist/esm/blocks/Anchor.js +0 -8
- package/dist/esm/blocks/ArgsTable.js +0 -292
- package/dist/esm/blocks/Canvas.js +0 -93
- package/dist/esm/blocks/Description.js +0 -107
- package/dist/esm/blocks/DocsContainer.js +0 -105
- package/dist/esm/blocks/DocsContext.js +0 -16
- package/dist/esm/blocks/DocsPage.js +0 -11
- package/dist/esm/blocks/DocsRenderer.js +0 -32
- package/dist/esm/blocks/DocsStory.js +0 -46
- package/dist/esm/blocks/ExternalDocsContainer.js +0 -48
- package/dist/esm/blocks/ExternalPreview.js +0 -89
- package/dist/esm/blocks/Heading.js +0 -17
- package/dist/esm/blocks/Meta.js +0 -45
- package/dist/esm/blocks/Preview.js +0 -9
- package/dist/esm/blocks/Primary.js +0 -23
- package/dist/esm/blocks/Props.js +0 -14
- package/dist/esm/blocks/Source.js +0 -150
- package/dist/esm/blocks/SourceContainer.js +0 -44
- package/dist/esm/blocks/Stories.js +0 -30
- package/dist/esm/blocks/Story.js +0 -123
- package/dist/esm/blocks/Subheading.js +0 -17
- package/dist/esm/blocks/Subtitle.js +0 -23
- package/dist/esm/blocks/Title.js +0 -24
- package/dist/esm/blocks/Wrapper.js +0 -8
- package/dist/esm/blocks/enhanceSource.js +0 -87
- package/dist/esm/blocks/index.js +0 -27
- package/dist/esm/blocks/mdx.js +0 -203
- package/dist/esm/blocks/types.js +0 -2
- package/dist/esm/blocks/useStory.js +0 -34
- package/dist/esm/blocks/utils.js +0 -29
- package/dist/esm/index.js +0 -1
- package/dist/esm/manager.js +0 -16
- package/dist/esm/preset.js +0 -132
- package/dist/esm/preview.js +0 -10
- package/dist/esm/shared.js +0 -11
- package/dist/types/blocks/Anchor.d.ts +0 -6
- package/dist/types/blocks/ArgsTable.d.ts +0 -33
- package/dist/types/blocks/Canvas.d.ts +0 -9
- package/dist/types/blocks/Description.d.ts +0 -20
- package/dist/types/blocks/DocsContainer.d.ts +0 -7
- package/dist/types/blocks/DocsContext.d.ts +0 -5
- package/dist/types/blocks/DocsPage.d.ts +0 -2
- package/dist/types/blocks/DocsRenderer.d.ts +0 -7
- package/dist/types/blocks/DocsStory.d.ts +0 -3
- package/dist/types/blocks/ExternalDocsContainer.d.ts +0 -4
- package/dist/types/blocks/ExternalPreview.d.ts +0 -19
- package/dist/types/blocks/Heading.d.ts +0 -6
- package/dist/types/blocks/Meta.d.ts +0 -12
- package/dist/types/blocks/Preview.d.ts +0 -3
- package/dist/types/blocks/Primary.d.ts +0 -6
- package/dist/types/blocks/Props.d.ts +0 -3
- package/dist/types/blocks/Source.d.ts +0 -38
- package/dist/types/blocks/SourceContainer.d.ts +0 -14
- package/dist/types/blocks/Stories.d.ts +0 -7
- package/dist/types/blocks/Story.d.ts +0 -30
- package/dist/types/blocks/Subheading.d.ts +0 -3
- package/dist/types/blocks/Subtitle.d.ts +0 -6
- package/dist/types/blocks/Title.d.ts +0 -8
- package/dist/types/blocks/Wrapper.d.ts +0 -2
- package/dist/types/blocks/enhanceSource.d.ts +0 -3
- package/dist/types/blocks/index.d.ts +0 -26
- package/dist/types/blocks/mdx.d.ts +0 -20
- package/dist/types/blocks/types.d.ts +0 -13
- package/dist/types/blocks/useStory.d.ts +0 -5
- package/dist/types/blocks/utils.d.ts +0 -3
- package/dist/types/index.d.ts +0 -1
- package/dist/types/manager.d.ts +0 -1
- package/dist/types/preset.d.ts +0 -12
- package/dist/types/preview.d.ts +0 -5
- package/dist/types/shared.d.ts +0 -24
- package/manager.js +0 -1
- package/mdx-compiler-plugin.js +0 -1
- package/register.js +0 -6
package/dist/esm/blocks/mdx.js
DELETED
|
@@ -1,203 +0,0 @@
|
|
|
1
|
-
const _excluded = ["children"],
|
|
2
|
-
_excluded2 = ["className", "children"],
|
|
3
|
-
_excluded3 = ["href", "target", "children"],
|
|
4
|
-
_excluded4 = ["as", "id", "children"],
|
|
5
|
-
_excluded5 = ["as", "id", "children"];
|
|
6
|
-
|
|
7
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
8
|
-
|
|
9
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
10
|
-
|
|
11
|
-
import React from 'react';
|
|
12
|
-
import { addons } from '@storybook/addons';
|
|
13
|
-
import { NAVIGATE_URL } from '@storybook/core-events';
|
|
14
|
-
import { Source, Code, components } from '@storybook/components';
|
|
15
|
-
import global from 'global';
|
|
16
|
-
import { styled } from '@storybook/theming';
|
|
17
|
-
import { DocsContext } from './DocsContext';
|
|
18
|
-
const {
|
|
19
|
-
document
|
|
20
|
-
} = global; // Hacky utility for asserting identifiers in MDX Story elements
|
|
21
|
-
|
|
22
|
-
export const assertIsFn = val => {
|
|
23
|
-
if (typeof val !== 'function') {
|
|
24
|
-
throw new Error(`Expected story function, got: ${val}`);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
return val;
|
|
28
|
-
}; // Hacky utility for adding mdxStoryToId to the default context
|
|
29
|
-
|
|
30
|
-
export const AddContext = props => {
|
|
31
|
-
const {
|
|
32
|
-
children
|
|
33
|
-
} = props,
|
|
34
|
-
rest = _objectWithoutPropertiesLoose(props, _excluded);
|
|
35
|
-
|
|
36
|
-
const parentContext = React.useContext(DocsContext);
|
|
37
|
-
return /*#__PURE__*/React.createElement(DocsContext.Provider, {
|
|
38
|
-
value: Object.assign({}, parentContext, rest)
|
|
39
|
-
}, children);
|
|
40
|
-
};
|
|
41
|
-
export const CodeOrSourceMdx = _ref => {
|
|
42
|
-
let {
|
|
43
|
-
className,
|
|
44
|
-
children
|
|
45
|
-
} = _ref,
|
|
46
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded2);
|
|
47
|
-
|
|
48
|
-
// markdown-to-jsx does not add className to inline code
|
|
49
|
-
if (typeof className !== 'string' && (typeof children !== 'string' || !children.match(/[\n\r]/g))) {
|
|
50
|
-
return /*#__PURE__*/React.createElement(Code, null, children);
|
|
51
|
-
} // className: "lang-jsx"
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
const language = className && className.split('-');
|
|
55
|
-
return /*#__PURE__*/React.createElement(Source, _extends({
|
|
56
|
-
language: language && language[1] || 'plaintext',
|
|
57
|
-
format: false,
|
|
58
|
-
code: children
|
|
59
|
-
}, rest));
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
function navigate(url) {
|
|
63
|
-
addons.getChannel().emit(NAVIGATE_URL, url);
|
|
64
|
-
} // @ts-ignore
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const A = components.a;
|
|
68
|
-
|
|
69
|
-
const AnchorInPage = ({
|
|
70
|
-
hash,
|
|
71
|
-
children
|
|
72
|
-
}) => /*#__PURE__*/React.createElement(A, {
|
|
73
|
-
href: hash,
|
|
74
|
-
target: "_self",
|
|
75
|
-
onClick: event => {
|
|
76
|
-
const id = hash.substring(1);
|
|
77
|
-
const element = document.getElementById(id);
|
|
78
|
-
|
|
79
|
-
if (element) {
|
|
80
|
-
navigate(hash);
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}, children);
|
|
84
|
-
|
|
85
|
-
export const AnchorMdx = props => {
|
|
86
|
-
const {
|
|
87
|
-
href,
|
|
88
|
-
target,
|
|
89
|
-
children
|
|
90
|
-
} = props,
|
|
91
|
-
rest = _objectWithoutPropertiesLoose(props, _excluded3);
|
|
92
|
-
|
|
93
|
-
if (href) {
|
|
94
|
-
// Enable scrolling for in-page anchors.
|
|
95
|
-
if (href.startsWith('#')) {
|
|
96
|
-
return /*#__PURE__*/React.createElement(AnchorInPage, {
|
|
97
|
-
hash: href
|
|
98
|
-
}, children);
|
|
99
|
-
} // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe.
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
if (target !== '_blank' && !href.startsWith('https://')) {
|
|
103
|
-
return /*#__PURE__*/React.createElement(A, _extends({
|
|
104
|
-
href: href,
|
|
105
|
-
onClick: event => {
|
|
106
|
-
event.preventDefault(); // use the A element's href, which has been modified for
|
|
107
|
-
// local paths without a `?path=` query param prefix
|
|
108
|
-
|
|
109
|
-
navigate(event.currentTarget.getAttribute('href'));
|
|
110
|
-
},
|
|
111
|
-
target: target
|
|
112
|
-
}, rest), children);
|
|
113
|
-
}
|
|
114
|
-
} // External URL dont need any modification.
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
return /*#__PURE__*/React.createElement(A, props);
|
|
118
|
-
};
|
|
119
|
-
const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
120
|
-
const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce((acc, headerType) => Object.assign({}, acc, {
|
|
121
|
-
// @ts-ignore
|
|
122
|
-
[headerType]: styled(components[headerType])({
|
|
123
|
-
'& svg': {
|
|
124
|
-
visibility: 'hidden'
|
|
125
|
-
},
|
|
126
|
-
'&:hover svg': {
|
|
127
|
-
visibility: 'visible'
|
|
128
|
-
}
|
|
129
|
-
})
|
|
130
|
-
}), {});
|
|
131
|
-
const OcticonAnchor = styled.a(() => ({
|
|
132
|
-
float: 'left',
|
|
133
|
-
paddingRight: '4px',
|
|
134
|
-
marginLeft: '-20px',
|
|
135
|
-
// Allow the theme's text color to override the default link color.
|
|
136
|
-
color: 'inherit'
|
|
137
|
-
}));
|
|
138
|
-
|
|
139
|
-
const HeaderWithOcticonAnchor = _ref2 => {
|
|
140
|
-
let {
|
|
141
|
-
as,
|
|
142
|
-
id,
|
|
143
|
-
children
|
|
144
|
-
} = _ref2,
|
|
145
|
-
rest = _objectWithoutPropertiesLoose(_ref2, _excluded4);
|
|
146
|
-
|
|
147
|
-
// @ts-ignore
|
|
148
|
-
const OcticonHeader = OcticonHeaders[as];
|
|
149
|
-
const hash = `#${id}`;
|
|
150
|
-
return /*#__PURE__*/React.createElement(OcticonHeader, _extends({
|
|
151
|
-
id: id
|
|
152
|
-
}, rest), /*#__PURE__*/React.createElement(OcticonAnchor, {
|
|
153
|
-
"aria-hidden": "true",
|
|
154
|
-
href: hash,
|
|
155
|
-
tabIndex: -1,
|
|
156
|
-
target: "_self",
|
|
157
|
-
onClick: event => {
|
|
158
|
-
const element = document.getElementById(id);
|
|
159
|
-
|
|
160
|
-
if (element) {
|
|
161
|
-
navigate(hash);
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}, /*#__PURE__*/React.createElement("svg", {
|
|
165
|
-
viewBox: "0 0 16 16",
|
|
166
|
-
version: "1.1",
|
|
167
|
-
width: "16",
|
|
168
|
-
height: "16",
|
|
169
|
-
"aria-hidden": "true",
|
|
170
|
-
fill: "currentColor"
|
|
171
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
172
|
-
fillRule: "evenodd",
|
|
173
|
-
d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
|
|
174
|
-
}))), children);
|
|
175
|
-
};
|
|
176
|
-
|
|
177
|
-
export const HeaderMdx = props => {
|
|
178
|
-
const {
|
|
179
|
-
as,
|
|
180
|
-
id,
|
|
181
|
-
children
|
|
182
|
-
} = props,
|
|
183
|
-
rest = _objectWithoutPropertiesLoose(props, _excluded5); // An id should have been added on every header by the "remark-slug" plugin.
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
if (id) {
|
|
187
|
-
return /*#__PURE__*/React.createElement(HeaderWithOcticonAnchor, _extends({
|
|
188
|
-
as: as,
|
|
189
|
-
id: id
|
|
190
|
-
}, rest), children);
|
|
191
|
-
} // @ts-ignore
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
const Header = components[as]; // Make sure it still work if "remark-slug" plugin is not present.
|
|
195
|
-
|
|
196
|
-
return /*#__PURE__*/React.createElement(Header, props);
|
|
197
|
-
};
|
|
198
|
-
export const HeadersMdx = SUPPORTED_MDX_HEADERS.reduce((acc, headerType) => Object.assign({}, acc, {
|
|
199
|
-
// @ts-ignore
|
|
200
|
-
[headerType]: props => /*#__PURE__*/React.createElement(HeaderMdx, _extends({
|
|
201
|
-
as: headerType
|
|
202
|
-
}, props))
|
|
203
|
-
}), {});
|
package/dist/esm/blocks/types.js
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect } from 'react';
|
|
2
|
-
export function useStory(storyId, context) {
|
|
3
|
-
const stories = useStories([storyId], context);
|
|
4
|
-
return stories && stories[0];
|
|
5
|
-
}
|
|
6
|
-
export function useStories(storyIds, context) {
|
|
7
|
-
// Legacy docs pages can reference any story by id. Those stories will need to be
|
|
8
|
-
// asyncronously loaded; we use the state for this
|
|
9
|
-
const [storiesById, setStories] = useState({});
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
Promise.all(storyIds.map(async storyId => {
|
|
12
|
-
// loadStory will be called every single time useStory is called
|
|
13
|
-
// because useEffect does not use storyIds as an input. This is because
|
|
14
|
-
// HMR can change the story even when the storyId hasn't changed. However, it
|
|
15
|
-
// will be a no-op once the story has loaded. Furthermore, the `story` will
|
|
16
|
-
// have an exact equality when the story hasn't changed, so it won't trigger
|
|
17
|
-
// any unnecessary re-renders
|
|
18
|
-
const story = await context.loadStory(storyId);
|
|
19
|
-
setStories(current => current[storyId] === story ? current : Object.assign({}, current, {
|
|
20
|
-
[storyId]: story
|
|
21
|
-
}));
|
|
22
|
-
}));
|
|
23
|
-
});
|
|
24
|
-
return storyIds.map(storyId => {
|
|
25
|
-
if (storiesById[storyId]) return storiesById[storyId];
|
|
26
|
-
|
|
27
|
-
try {
|
|
28
|
-
// If we are allowed to load this story id synchonously, this will work
|
|
29
|
-
return context.storyById(storyId);
|
|
30
|
-
} catch (err) {
|
|
31
|
-
return null;
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
}
|
package/dist/esm/blocks/utils.js
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
/* eslint-disable no-underscore-dangle */
|
|
2
|
-
const titleCase = str => str.split('-').map(part => part.charAt(0).toUpperCase() + part.slice(1)).join('');
|
|
3
|
-
|
|
4
|
-
export const getComponentName = component => {
|
|
5
|
-
if (!component) {
|
|
6
|
-
return undefined;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
if (typeof component === 'string') {
|
|
10
|
-
if (component.includes('-')) {
|
|
11
|
-
return titleCase(component);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
return component;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
if (component.__docgenInfo && component.__docgenInfo.displayName) {
|
|
18
|
-
return component.__docgenInfo.displayName;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
return component.name;
|
|
22
|
-
};
|
|
23
|
-
export function scrollToElement(element, block = 'start') {
|
|
24
|
-
element.scrollIntoView({
|
|
25
|
-
behavior: 'smooth',
|
|
26
|
-
block,
|
|
27
|
-
inline: 'nearest'
|
|
28
|
-
});
|
|
29
|
-
}
|
package/dist/esm/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './blocks';
|
package/dist/esm/manager.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { addons, types } from '@storybook/addons';
|
|
2
|
-
import { ADDON_ID, PANEL_ID } from './shared';
|
|
3
|
-
addons.register(ADDON_ID, () => {
|
|
4
|
-
addons.add(PANEL_ID, {
|
|
5
|
-
type: types.TAB,
|
|
6
|
-
title: 'Docs',
|
|
7
|
-
route: ({
|
|
8
|
-
storyId,
|
|
9
|
-
refId
|
|
10
|
-
}) => refId ? `/docs/${refId}_${storyId}` : `/docs/${storyId}`,
|
|
11
|
-
match: ({
|
|
12
|
-
viewMode
|
|
13
|
-
}) => viewMode === 'docs',
|
|
14
|
-
render: () => null
|
|
15
|
-
});
|
|
16
|
-
});
|
package/dist/esm/preset.js
DELETED
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import fs from 'fs-extra';
|
|
2
|
-
import remarkSlug from 'remark-slug';
|
|
3
|
-
import remarkExternalLinks from 'remark-external-links';
|
|
4
|
-
import global from 'global';
|
|
5
|
-
import { logger } from '@storybook/node-logger';
|
|
6
|
-
import { loadCsf } from '@storybook/csf-tools'; // for frameworks that are not working with react, we need to configure
|
|
7
|
-
// the jsx to transpile mdx, for now there will be a flag for that
|
|
8
|
-
// for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
|
|
9
|
-
|
|
10
|
-
function createBabelOptions({
|
|
11
|
-
babelOptions,
|
|
12
|
-
mdxBabelOptions,
|
|
13
|
-
configureJSX
|
|
14
|
-
}) {
|
|
15
|
-
const babelPlugins = mdxBabelOptions?.plugins || babelOptions?.plugins || [];
|
|
16
|
-
const jsxPlugin = [require.resolve('@babel/plugin-transform-react-jsx'), {
|
|
17
|
-
pragma: 'React.createElement',
|
|
18
|
-
pragmaFrag: 'React.Fragment'
|
|
19
|
-
}];
|
|
20
|
-
const plugins = configureJSX ? [...babelPlugins, jsxPlugin] : babelPlugins;
|
|
21
|
-
return Object.assign({
|
|
22
|
-
// don't use the root babelrc by default (users can override this in mdxBabelOptions)
|
|
23
|
-
babelrc: false,
|
|
24
|
-
configFile: false
|
|
25
|
-
}, babelOptions, mdxBabelOptions, {
|
|
26
|
-
plugins
|
|
27
|
-
});
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export async function webpack(webpackConfig = {}, options) {
|
|
31
|
-
const resolvedBabelLoader = require.resolve('babel-loader');
|
|
32
|
-
|
|
33
|
-
const {
|
|
34
|
-
module = {}
|
|
35
|
-
} = webpackConfig; // it will reuse babel options that are already in use in storybook
|
|
36
|
-
// also, these babel options are chained with other presets.
|
|
37
|
-
|
|
38
|
-
const {
|
|
39
|
-
babelOptions,
|
|
40
|
-
mdxBabelOptions,
|
|
41
|
-
configureJSX = true,
|
|
42
|
-
sourceLoaderOptions = {
|
|
43
|
-
injectStoryParameters: true
|
|
44
|
-
},
|
|
45
|
-
transcludeMarkdown = false
|
|
46
|
-
} = options;
|
|
47
|
-
const mdxLoaderOptions = {
|
|
48
|
-
skipCsf: true,
|
|
49
|
-
remarkPlugins: [remarkSlug, remarkExternalLinks]
|
|
50
|
-
};
|
|
51
|
-
const mdxVersion = global.FEATURES?.previewMdx2 ? 'MDX2' : 'MDX1';
|
|
52
|
-
logger.info(`Addon-docs: using ${mdxVersion}`);
|
|
53
|
-
const mdxLoader = global.FEATURES?.previewMdx2 ? require.resolve('@storybook/mdx2-csf/loader') : require.resolve('@storybook/mdx1-csf/loader'); // set `sourceLoaderOptions` to `null` to disable for manual configuration
|
|
54
|
-
|
|
55
|
-
const sourceLoader = sourceLoaderOptions ? [{
|
|
56
|
-
test: /\.(stories|story)\.[tj]sx?$/,
|
|
57
|
-
loader: require.resolve('@storybook/source-loader'),
|
|
58
|
-
options: Object.assign({}, sourceLoaderOptions, {
|
|
59
|
-
inspectLocalDependencies: true
|
|
60
|
-
}),
|
|
61
|
-
enforce: 'pre'
|
|
62
|
-
}] : [];
|
|
63
|
-
let rules = module.rules || [];
|
|
64
|
-
|
|
65
|
-
if (transcludeMarkdown) {
|
|
66
|
-
rules = [...rules.filter(rule => rule.test?.toString() !== '/\\.md$/'), {
|
|
67
|
-
test: /\.md$/,
|
|
68
|
-
use: [{
|
|
69
|
-
loader: resolvedBabelLoader,
|
|
70
|
-
options: createBabelOptions({
|
|
71
|
-
babelOptions,
|
|
72
|
-
mdxBabelOptions,
|
|
73
|
-
configureJSX
|
|
74
|
-
})
|
|
75
|
-
}, {
|
|
76
|
-
loader: mdxLoader,
|
|
77
|
-
options: mdxLoaderOptions
|
|
78
|
-
}]
|
|
79
|
-
}];
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
const result = Object.assign({}, webpackConfig, {
|
|
83
|
-
module: Object.assign({}, module, {
|
|
84
|
-
rules: [...rules, {
|
|
85
|
-
test: /(stories|story)\.mdx$/,
|
|
86
|
-
use: [{
|
|
87
|
-
loader: resolvedBabelLoader,
|
|
88
|
-
options: createBabelOptions({
|
|
89
|
-
babelOptions,
|
|
90
|
-
mdxBabelOptions,
|
|
91
|
-
configureJSX
|
|
92
|
-
})
|
|
93
|
-
}, {
|
|
94
|
-
loader: mdxLoader
|
|
95
|
-
}]
|
|
96
|
-
}, {
|
|
97
|
-
test: /\.mdx$/,
|
|
98
|
-
exclude: /(stories|story)\.mdx$/,
|
|
99
|
-
use: [{
|
|
100
|
-
loader: resolvedBabelLoader,
|
|
101
|
-
options: createBabelOptions({
|
|
102
|
-
babelOptions,
|
|
103
|
-
mdxBabelOptions,
|
|
104
|
-
configureJSX
|
|
105
|
-
})
|
|
106
|
-
}, {
|
|
107
|
-
loader: mdxLoader,
|
|
108
|
-
options: mdxLoaderOptions
|
|
109
|
-
}]
|
|
110
|
-
}, ...sourceLoader]
|
|
111
|
-
})
|
|
112
|
-
});
|
|
113
|
-
return result;
|
|
114
|
-
}
|
|
115
|
-
export const storyIndexers = async indexers => {
|
|
116
|
-
const mdxIndexer = async (fileName, opts) => {
|
|
117
|
-
let code = (await fs.readFile(fileName, 'utf-8')).toString(); // @ts-ignore
|
|
118
|
-
|
|
119
|
-
const {
|
|
120
|
-
compile
|
|
121
|
-
} = global.FEATURES?.previewMdx2 ? await import('@storybook/mdx2-csf') : await import('@storybook/mdx1-csf');
|
|
122
|
-
code = await compile(code, {});
|
|
123
|
-
return loadCsf(code, Object.assign({}, opts, {
|
|
124
|
-
fileName
|
|
125
|
-
})).parse();
|
|
126
|
-
};
|
|
127
|
-
|
|
128
|
-
return [{
|
|
129
|
-
test: /(stories|story)\.mdx$/,
|
|
130
|
-
indexer: mdxIndexer
|
|
131
|
-
}, ...(indexers || [])];
|
|
132
|
-
};
|
package/dist/esm/preview.js
DELETED
package/dist/esm/shared.js
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export const ADDON_ID = 'storybook/docs';
|
|
2
|
-
export const PANEL_ID = `${ADDON_ID}/panel`;
|
|
3
|
-
export const PARAM_KEY = `docs`;
|
|
4
|
-
export const SNIPPET_RENDERED = `${ADDON_ID}/snippet-rendered`;
|
|
5
|
-
export let SourceType;
|
|
6
|
-
|
|
7
|
-
(function (SourceType) {
|
|
8
|
-
SourceType["AUTO"] = "auto";
|
|
9
|
-
SourceType["CODE"] = "code";
|
|
10
|
-
SourceType["DYNAMIC"] = "dynamic";
|
|
11
|
-
})(SourceType || (SourceType = {}));
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { SortType } from '@storybook/components';
|
|
3
|
-
import { PropDescriptor } from '@storybook/store';
|
|
4
|
-
import { StrictArgTypes } from '@storybook/csf';
|
|
5
|
-
import { DocsContextProps } from './DocsContext';
|
|
6
|
-
import { Component } from './types';
|
|
7
|
-
interface BaseProps {
|
|
8
|
-
include?: PropDescriptor;
|
|
9
|
-
exclude?: PropDescriptor;
|
|
10
|
-
sort?: SortType;
|
|
11
|
-
}
|
|
12
|
-
declare type OfProps = BaseProps & {
|
|
13
|
-
of: '.' | '^' | Component;
|
|
14
|
-
};
|
|
15
|
-
declare type ComponentsProps = BaseProps & {
|
|
16
|
-
components: {
|
|
17
|
-
[label: string]: Component;
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
declare type StoryProps = BaseProps & {
|
|
21
|
-
story: '.' | '^' | string;
|
|
22
|
-
showComponent?: boolean;
|
|
23
|
-
};
|
|
24
|
-
declare type ArgsTableProps = BaseProps | OfProps | ComponentsProps | StoryProps;
|
|
25
|
-
export declare const extractComponentArgTypes: (component: Component, { id, storyById }: DocsContextProps, include?: PropDescriptor, exclude?: PropDescriptor) => StrictArgTypes;
|
|
26
|
-
export declare const getComponent: (props: ArgsTableProps, { id, storyById }: DocsContextProps) => Component;
|
|
27
|
-
export declare const StoryTable: FC<StoryProps & {
|
|
28
|
-
component: Component;
|
|
29
|
-
subcomponents: Record<string, Component>;
|
|
30
|
-
}>;
|
|
31
|
-
export declare const ComponentsTable: FC<ComponentsProps>;
|
|
32
|
-
export declare const ArgsTable: FC<ArgsTableProps>;
|
|
33
|
-
export {};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { PreviewProps as PurePreviewProps } from '@storybook/components';
|
|
3
|
-
import { SourceState } from './Source';
|
|
4
|
-
export { SourceState };
|
|
5
|
-
declare type CanvasProps = PurePreviewProps & {
|
|
6
|
-
withSource?: SourceState;
|
|
7
|
-
mdxSource?: string;
|
|
8
|
-
};
|
|
9
|
-
export declare const Canvas: FC<CanvasProps>;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { FunctionComponent } from 'react';
|
|
2
|
-
import { DescriptionProps as PureDescriptionProps } from '@storybook/components';
|
|
3
|
-
import { DocsContextProps } from './DocsContext';
|
|
4
|
-
import { Component } from './types';
|
|
5
|
-
export declare enum DescriptionType {
|
|
6
|
-
INFO = "info",
|
|
7
|
-
NOTES = "notes",
|
|
8
|
-
DOCGEN = "docgen",
|
|
9
|
-
LEGACY_5_2 = "legacy-5.2",
|
|
10
|
-
AUTO = "auto"
|
|
11
|
-
}
|
|
12
|
-
interface DescriptionProps {
|
|
13
|
-
of?: '.' | Component;
|
|
14
|
-
type?: DescriptionType;
|
|
15
|
-
markdown?: string;
|
|
16
|
-
children?: string;
|
|
17
|
-
}
|
|
18
|
-
export declare const getDescriptionProps: ({ of, type, markdown, children }: DescriptionProps, { id, storyById }: DocsContextProps<any>) => PureDescriptionProps;
|
|
19
|
-
declare const DescriptionContainer: FunctionComponent<DescriptionProps>;
|
|
20
|
-
export { DescriptionContainer as Description };
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { FunctionComponent } from 'react';
|
|
2
|
-
import { AnyFramework } from '@storybook/csf';
|
|
3
|
-
import { DocsContextProps } from './DocsContext';
|
|
4
|
-
export interface DocsContainerProps<TFramework extends AnyFramework = AnyFramework> {
|
|
5
|
-
context: DocsContextProps<TFramework>;
|
|
6
|
-
}
|
|
7
|
-
export declare const DocsContainer: FunctionComponent<DocsContainerProps>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { AnyFramework } from '@storybook/csf';
|
|
2
|
-
import { DocsRenderFunction } from '@storybook/preview-web';
|
|
3
|
-
export declare class DocsRenderer<TFramework extends AnyFramework> {
|
|
4
|
-
render: DocsRenderFunction<TFramework>;
|
|
5
|
-
unmount: (element: HTMLElement) => void;
|
|
6
|
-
constructor();
|
|
7
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { Preview } from '@storybook/preview-web';
|
|
2
|
-
import { ModuleExports, ModuleExport } from '@storybook/store';
|
|
3
|
-
import { AnyFramework, StoryId, ProjectAnnotations } from '@storybook/csf';
|
|
4
|
-
declare type StoryExport = ModuleExport;
|
|
5
|
-
declare type MetaExport = ModuleExports;
|
|
6
|
-
export declare class ExternalPreview<TFramework extends AnyFramework> extends Preview<TFramework> {
|
|
7
|
-
projectAnnotations: ProjectAnnotations;
|
|
8
|
-
private initialized;
|
|
9
|
-
private importPaths;
|
|
10
|
-
private titles;
|
|
11
|
-
storyIds: Map<any, string>;
|
|
12
|
-
private storyIndex;
|
|
13
|
-
private moduleExportsByImportPath;
|
|
14
|
-
constructor(projectAnnotations: ProjectAnnotations);
|
|
15
|
-
storyIdByModuleExport(storyExport: StoryExport, meta: MetaExport): string;
|
|
16
|
-
addStoryFromExports(storyExport: StoryExport, meta: MetaExport): Promise<void>;
|
|
17
|
-
storyById(storyId: StoryId): import("@storybook/store").Story<TFramework>;
|
|
18
|
-
}
|
|
19
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { BaseAnnotations } from '@storybook/csf';
|
|
3
|
-
import type { ModuleExports } from '@storybook/store';
|
|
4
|
-
declare type MetaProps = BaseAnnotations & {
|
|
5
|
-
of?: ModuleExports;
|
|
6
|
-
};
|
|
7
|
-
/**
|
|
8
|
-
* This component is used to declare component metadata in docs
|
|
9
|
-
* and gets transformed into a default export underneath the hood.
|
|
10
|
-
*/
|
|
11
|
-
export declare const Meta: FC<MetaProps>;
|
|
12
|
-
export {};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { ComponentProps, FC } from 'react';
|
|
2
|
-
import { Source as PureSource } from '@storybook/components';
|
|
3
|
-
import { DocsContextProps } from './DocsContext';
|
|
4
|
-
import { SourceContextProps } from './SourceContainer';
|
|
5
|
-
export declare enum SourceState {
|
|
6
|
-
OPEN = "open",
|
|
7
|
-
CLOSED = "closed",
|
|
8
|
-
NONE = "none"
|
|
9
|
-
}
|
|
10
|
-
interface CommonProps {
|
|
11
|
-
language?: string;
|
|
12
|
-
dark?: boolean;
|
|
13
|
-
format?: PureSourceProps['format'];
|
|
14
|
-
code?: string;
|
|
15
|
-
}
|
|
16
|
-
declare type SingleSourceProps = {
|
|
17
|
-
id: string;
|
|
18
|
-
} & CommonProps;
|
|
19
|
-
declare type MultiSourceProps = {
|
|
20
|
-
ids: string[];
|
|
21
|
-
} & CommonProps;
|
|
22
|
-
declare type CodeProps = {
|
|
23
|
-
code: string;
|
|
24
|
-
} & CommonProps;
|
|
25
|
-
declare type NoneProps = CommonProps;
|
|
26
|
-
declare type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | NoneProps;
|
|
27
|
-
declare type SourceStateProps = {
|
|
28
|
-
state: SourceState;
|
|
29
|
-
};
|
|
30
|
-
declare type PureSourceProps = ComponentProps<typeof PureSource>;
|
|
31
|
-
export declare const getSourceProps: (props: SourceProps, docsContext: DocsContextProps<any>, sourceContext: SourceContextProps) => PureSourceProps & SourceStateProps;
|
|
32
|
-
/**
|
|
33
|
-
* Story source doc block renders source code if provided,
|
|
34
|
-
* or the source for a story if `storyId` is provided, or
|
|
35
|
-
* the source for the current story if nothing is provided.
|
|
36
|
-
*/
|
|
37
|
-
export declare const Source: FC<PureSourceProps>;
|
|
38
|
-
export {};
|