@storybook/addon-docs 7.0.0-alpha.5 → 7.0.0-alpha.8
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/dist/cjs/blocks/index.js +4 -352
- package/dist/cjs/preset.js +5 -13
- package/dist/cjs/preview.js +6 -2
- package/dist/esm/blocks/index.js +1 -24
- package/dist/esm/preview.js +6 -2
- package/dist/types/blocks/index.d.ts +1 -24
- package/dist/types/preview.d.ts +1 -6
- package/package.json +16 -15
- package/dist/cjs/blocks/Anchor.js +0 -23
- package/dist/cjs/blocks/ArgsTable.js +0 -329
- package/dist/cjs/blocks/Canvas.js +0 -109
- package/dist/cjs/blocks/Description.js +0 -126
- package/dist/cjs/blocks/DocsContainer.js +0 -127
- package/dist/cjs/blocks/DocsContext.js +0 -25
- package/dist/cjs/blocks/DocsPage.js +0 -30
- package/dist/cjs/blocks/DocsStory.js +0 -68
- package/dist/cjs/blocks/Heading.js +0 -31
- package/dist/cjs/blocks/Meta.js +0 -50
- 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 -179
- package/dist/cjs/blocks/SourceContainer.js +0 -67
- package/dist/cjs/blocks/Stories.js +0 -51
- package/dist/cjs/blocks/Story.js +0 -143
- 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 -92
- package/dist/cjs/blocks/mdx.js +0 -234
- package/dist/cjs/blocks/types.js +0 -10
- package/dist/cjs/blocks/useStory.js +0 -37
- package/dist/cjs/blocks/utils.js +0 -40
- package/dist/esm/blocks/Anchor.js +0 -8
- package/dist/esm/blocks/ArgsTable.js +0 -292
- package/dist/esm/blocks/Canvas.js +0 -83
- package/dist/esm/blocks/Description.js +0 -107
- package/dist/esm/blocks/DocsContainer.js +0 -98
- package/dist/esm/blocks/DocsContext.js +0 -16
- package/dist/esm/blocks/DocsPage.js +0 -11
- package/dist/esm/blocks/DocsStory.js +0 -46
- package/dist/esm/blocks/Heading.js +0 -17
- package/dist/esm/blocks/Meta.js +0 -31
- 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 -144
- package/dist/esm/blocks/SourceContainer.js +0 -44
- package/dist/esm/blocks/Stories.js +0 -30
- package/dist/esm/blocks/Story.js +0 -114
- 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/mdx.js +0 -203
- package/dist/esm/blocks/types.js +0 -2
- package/dist/esm/blocks/useStory.js +0 -27
- package/dist/esm/blocks/utils.js +0 -29
- 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/DocsStory.d.ts +0 -3
- package/dist/types/blocks/Heading.d.ts +0 -6
- package/dist/types/blocks/Meta.d.ts +0 -9
- 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 -28
- 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/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/cjs/blocks/Story.js
DELETED
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.storyBlockIdFromId = exports.lookupStoryId = exports.getStoryProps = exports.getStoryId = exports.Story = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
|
-
var _react2 = require("@mdx-js/react");
|
|
11
|
-
|
|
12
|
-
var _components = require("@storybook/components");
|
|
13
|
-
|
|
14
|
-
var _csf = require("@storybook/csf");
|
|
15
|
-
|
|
16
|
-
var _types = require("./types");
|
|
17
|
-
|
|
18
|
-
var _DocsContext = require("./DocsContext");
|
|
19
|
-
|
|
20
|
-
var _useStory = require("./useStory");
|
|
21
|
-
|
|
22
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
|
-
|
|
24
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
-
|
|
26
|
-
const storyBlockIdFromId = storyId => `story--${storyId}`;
|
|
27
|
-
|
|
28
|
-
exports.storyBlockIdFromId = storyBlockIdFromId;
|
|
29
|
-
|
|
30
|
-
const lookupStoryId = (storyName, {
|
|
31
|
-
mdxStoryNameToKey,
|
|
32
|
-
mdxComponentAnnotations
|
|
33
|
-
}) => (0, _csf.toId)(mdxComponentAnnotations.id || mdxComponentAnnotations.title, (0, _csf.storyNameFromExport)(mdxStoryNameToKey[storyName]));
|
|
34
|
-
|
|
35
|
-
exports.lookupStoryId = lookupStoryId;
|
|
36
|
-
|
|
37
|
-
const getStoryId = (props, context) => {
|
|
38
|
-
const {
|
|
39
|
-
id
|
|
40
|
-
} = props;
|
|
41
|
-
const {
|
|
42
|
-
name
|
|
43
|
-
} = props;
|
|
44
|
-
const inputId = id === _types.CURRENT_SELECTION ? context.id : id;
|
|
45
|
-
return inputId || lookupStoryId(name, context);
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
exports.getStoryId = getStoryId;
|
|
49
|
-
|
|
50
|
-
const getStoryProps = ({
|
|
51
|
-
height,
|
|
52
|
-
inline
|
|
53
|
-
}, story) => {
|
|
54
|
-
const {
|
|
55
|
-
name: storyName,
|
|
56
|
-
parameters
|
|
57
|
-
} = story;
|
|
58
|
-
const {
|
|
59
|
-
docs = {}
|
|
60
|
-
} = parameters;
|
|
61
|
-
|
|
62
|
-
if (docs.disable) {
|
|
63
|
-
return null;
|
|
64
|
-
} // prefer block props, then story parameters defined by the framework-specific settings and optionally overridden by users
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const {
|
|
68
|
-
inlineStories = false,
|
|
69
|
-
iframeHeight = 100
|
|
70
|
-
} = docs;
|
|
71
|
-
const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
|
|
72
|
-
return Object.assign({
|
|
73
|
-
inline: storyIsInline,
|
|
74
|
-
id: story.id,
|
|
75
|
-
height: height || (storyIsInline ? undefined : iframeHeight),
|
|
76
|
-
title: storyName
|
|
77
|
-
}, storyIsInline && {
|
|
78
|
-
parameters
|
|
79
|
-
});
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
exports.getStoryProps = getStoryProps;
|
|
83
|
-
|
|
84
|
-
const Story = props => {
|
|
85
|
-
const context = (0, _react.useContext)(_DocsContext.DocsContext);
|
|
86
|
-
const storyRef = (0, _react.useRef)();
|
|
87
|
-
const storyId = getStoryId(props, context);
|
|
88
|
-
const story = (0, _useStory.useStory)(storyId, context);
|
|
89
|
-
const [showLoader, setShowLoader] = (0, _react.useState)(true);
|
|
90
|
-
(0, _react.useEffect)(() => {
|
|
91
|
-
let cleanup;
|
|
92
|
-
|
|
93
|
-
if (story && storyRef.current) {
|
|
94
|
-
const element = storyRef.current;
|
|
95
|
-
cleanup = context.renderStoryToElement(story, element);
|
|
96
|
-
setShowLoader(false);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
return () => cleanup && cleanup();
|
|
100
|
-
}, [story]);
|
|
101
|
-
|
|
102
|
-
if (!story) {
|
|
103
|
-
return /*#__PURE__*/_react.default.createElement(_components.StorySkeleton, null);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
const storyProps = getStoryProps(props, story);
|
|
107
|
-
|
|
108
|
-
if (!storyProps) {
|
|
109
|
-
return null;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
if (storyProps.inline) {
|
|
113
|
-
// We do this so React doesn't complain when we replace the span in a secondary render
|
|
114
|
-
const htmlContents = `<span></span>`; // FIXME: height/style/etc. lifted from PureStory
|
|
115
|
-
|
|
116
|
-
const {
|
|
117
|
-
height
|
|
118
|
-
} = storyProps;
|
|
119
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
120
|
-
id: storyBlockIdFromId(story.id)
|
|
121
|
-
}, /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
|
|
122
|
-
components: _components.resetComponents
|
|
123
|
-
}, height ? /*#__PURE__*/_react.default.createElement("style", null, `#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`) : null, showLoader && /*#__PURE__*/_react.default.createElement(_components.StorySkeleton, null), /*#__PURE__*/_react.default.createElement("div", {
|
|
124
|
-
ref: storyRef,
|
|
125
|
-
"data-name": story.name,
|
|
126
|
-
dangerouslySetInnerHTML: {
|
|
127
|
-
__html: htmlContents
|
|
128
|
-
}
|
|
129
|
-
})));
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
133
|
-
id: storyBlockIdFromId(story.id)
|
|
134
|
-
}, /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
|
|
135
|
-
components: _components.resetComponents
|
|
136
|
-
}, /*#__PURE__*/_react.default.createElement(_components.Story, storyProps)));
|
|
137
|
-
};
|
|
138
|
-
|
|
139
|
-
exports.Story = Story;
|
|
140
|
-
Story.defaultProps = {
|
|
141
|
-
children: null,
|
|
142
|
-
name: null
|
|
143
|
-
};
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Subheading = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
|
-
var _components = require("@storybook/components");
|
|
11
|
-
|
|
12
|
-
var _mdx = require("./mdx");
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
const Subheading = ({
|
|
17
|
-
children,
|
|
18
|
-
disableAnchor
|
|
19
|
-
}) => {
|
|
20
|
-
if (disableAnchor || typeof children !== 'string') {
|
|
21
|
-
return /*#__PURE__*/_react.default.createElement(_components.H3, null, children);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
|
|
25
|
-
return /*#__PURE__*/_react.default.createElement(_mdx.HeaderMdx, {
|
|
26
|
-
as: "h3",
|
|
27
|
-
id: tagID
|
|
28
|
-
}, children);
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
exports.Subheading = Subheading;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Subtitle = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
|
-
var _components = require("@storybook/components");
|
|
11
|
-
|
|
12
|
-
var _DocsContext = require("./DocsContext");
|
|
13
|
-
|
|
14
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
-
|
|
16
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
-
|
|
18
|
-
const Subtitle = ({
|
|
19
|
-
children
|
|
20
|
-
}) => {
|
|
21
|
-
const {
|
|
22
|
-
id,
|
|
23
|
-
storyById
|
|
24
|
-
} = (0, _react.useContext)(_DocsContext.DocsContext);
|
|
25
|
-
const {
|
|
26
|
-
parameters
|
|
27
|
-
} = storyById(id);
|
|
28
|
-
let text = children;
|
|
29
|
-
|
|
30
|
-
if (!text) {
|
|
31
|
-
text = parameters === null || parameters === void 0 ? void 0 : parameters.componentSubtitle;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
return text ? /*#__PURE__*/_react.default.createElement(_components.Subtitle, {
|
|
35
|
-
className: "sbdocs-subtitle"
|
|
36
|
-
}, text) : null;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
exports.Subtitle = Subtitle;
|
package/dist/cjs/blocks/Title.js
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.extractTitle = exports.Title = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
|
-
var _components = require("@storybook/components");
|
|
11
|
-
|
|
12
|
-
var _DocsContext = require("./DocsContext");
|
|
13
|
-
|
|
14
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
-
|
|
16
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
-
|
|
18
|
-
const STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/;
|
|
19
|
-
|
|
20
|
-
const extractTitle = ({
|
|
21
|
-
title
|
|
22
|
-
}) => {
|
|
23
|
-
const groups = title.trim().split(STORY_KIND_PATH_SEPARATOR);
|
|
24
|
-
return groups && groups[groups.length - 1] || title;
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
exports.extractTitle = extractTitle;
|
|
28
|
-
|
|
29
|
-
const Title = ({
|
|
30
|
-
children
|
|
31
|
-
}) => {
|
|
32
|
-
const context = (0, _react.useContext)(_DocsContext.DocsContext);
|
|
33
|
-
let text = children;
|
|
34
|
-
|
|
35
|
-
if (!text) {
|
|
36
|
-
text = extractTitle(context);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
return text ? /*#__PURE__*/_react.default.createElement(_components.Title, {
|
|
40
|
-
className: "sbdocs-title"
|
|
41
|
-
}, text) : null;
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
exports.Title = Title;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Wrapper = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
|
-
const Wrapper = ({
|
|
13
|
-
children
|
|
14
|
-
}) => /*#__PURE__*/_react.default.createElement("div", {
|
|
15
|
-
style: {
|
|
16
|
-
fontFamily: 'sans-serif'
|
|
17
|
-
}
|
|
18
|
-
}, children);
|
|
19
|
-
|
|
20
|
-
exports.Wrapper = Wrapper;
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.enhanceSource = void 0;
|
|
7
|
-
|
|
8
|
-
var _store = require("@storybook/store");
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* given a location, extract the text from the full source
|
|
12
|
-
*/
|
|
13
|
-
function extractSource(location, lines) {
|
|
14
|
-
const {
|
|
15
|
-
startBody: start,
|
|
16
|
-
endBody: end
|
|
17
|
-
} = location;
|
|
18
|
-
|
|
19
|
-
if (start.line === end.line && lines[start.line - 1] !== undefined) {
|
|
20
|
-
return lines[start.line - 1].substring(start.col, end.col);
|
|
21
|
-
} // NOTE: storysource locations are 1-based not 0-based!
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
const startLine = lines[start.line - 1];
|
|
25
|
-
const endLine = lines[end.line - 1];
|
|
26
|
-
|
|
27
|
-
if (startLine === undefined || endLine === undefined) {
|
|
28
|
-
return null;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
return [startLine.substring(start.col), ...lines.slice(start.line, end.line - 1), endLine.substring(0, end.col)].join('\n');
|
|
32
|
-
} // ============================================================
|
|
33
|
-
// END @storybook/source-loader/extract-source
|
|
34
|
-
// ============================================================
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* Replaces full story id name like: story-kind--story-name -> story-name
|
|
39
|
-
* @param id
|
|
40
|
-
*/
|
|
41
|
-
const storyIdToSanitizedStoryName = id => id.replace(/^.*?--/, '');
|
|
42
|
-
|
|
43
|
-
const extract = (targetId, {
|
|
44
|
-
source,
|
|
45
|
-
locationsMap
|
|
46
|
-
}) => {
|
|
47
|
-
if (!locationsMap) {
|
|
48
|
-
return source;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
const sanitizedStoryName = storyIdToSanitizedStoryName(targetId);
|
|
52
|
-
const location = locationsMap[sanitizedStoryName];
|
|
53
|
-
|
|
54
|
-
if (!location) {
|
|
55
|
-
return source;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
const lines = source.split('\n');
|
|
59
|
-
return extractSource(location, lines);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
const enhanceSource = story => {
|
|
63
|
-
var _docs$source;
|
|
64
|
-
|
|
65
|
-
const {
|
|
66
|
-
id,
|
|
67
|
-
parameters
|
|
68
|
-
} = story;
|
|
69
|
-
const {
|
|
70
|
-
storySource,
|
|
71
|
-
docs = {}
|
|
72
|
-
} = parameters;
|
|
73
|
-
const {
|
|
74
|
-
transformSource
|
|
75
|
-
} = docs; // no input or user has manually overridden the output
|
|
76
|
-
|
|
77
|
-
if (!(storySource !== null && storySource !== void 0 && storySource.source) || (_docs$source = docs.source) !== null && _docs$source !== void 0 && _docs$source.code) {
|
|
78
|
-
return null;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
const input = extract(id, storySource);
|
|
82
|
-
const code = transformSource ? transformSource(input, story) : input;
|
|
83
|
-
return {
|
|
84
|
-
docs: (0, _store.combineParameters)(docs, {
|
|
85
|
-
source: {
|
|
86
|
-
code
|
|
87
|
-
}
|
|
88
|
-
})
|
|
89
|
-
};
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
exports.enhanceSource = enhanceSource;
|
package/dist/cjs/blocks/mdx.js
DELETED
|
@@ -1,234 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.assertIsFn = exports.HeadersMdx = exports.HeaderMdx = exports.CodeOrSourceMdx = exports.AnchorMdx = exports.AddContext = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
|
-
var _addons = require("@storybook/addons");
|
|
11
|
-
|
|
12
|
-
var _coreEvents = require("@storybook/core-events");
|
|
13
|
-
|
|
14
|
-
var _components = require("@storybook/components");
|
|
15
|
-
|
|
16
|
-
var _global = _interopRequireDefault(require("global"));
|
|
17
|
-
|
|
18
|
-
var _theming = require("@storybook/theming");
|
|
19
|
-
|
|
20
|
-
var _DocsContext = require("./DocsContext");
|
|
21
|
-
|
|
22
|
-
const _excluded = ["children"],
|
|
23
|
-
_excluded2 = ["className", "children"],
|
|
24
|
-
_excluded3 = ["href", "target", "children"],
|
|
25
|
-
_excluded4 = ["as", "id", "children"],
|
|
26
|
-
_excluded5 = ["as", "id", "children"];
|
|
27
|
-
|
|
28
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
|
-
|
|
30
|
-
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); }
|
|
31
|
-
|
|
32
|
-
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; }
|
|
33
|
-
|
|
34
|
-
const {
|
|
35
|
-
document
|
|
36
|
-
} = _global.default; // Hacky utility for asserting identifiers in MDX Story elements
|
|
37
|
-
|
|
38
|
-
const assertIsFn = val => {
|
|
39
|
-
if (typeof val !== 'function') {
|
|
40
|
-
throw new Error(`Expected story function, got: ${val}`);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
return val;
|
|
44
|
-
}; // Hacky utility for adding mdxStoryToId to the default context
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
exports.assertIsFn = assertIsFn;
|
|
48
|
-
|
|
49
|
-
const AddContext = props => {
|
|
50
|
-
const {
|
|
51
|
-
children
|
|
52
|
-
} = props,
|
|
53
|
-
rest = _objectWithoutPropertiesLoose(props, _excluded);
|
|
54
|
-
|
|
55
|
-
const parentContext = _react.default.useContext(_DocsContext.DocsContext);
|
|
56
|
-
|
|
57
|
-
return /*#__PURE__*/_react.default.createElement(_DocsContext.DocsContext.Provider, {
|
|
58
|
-
value: Object.assign({}, parentContext, rest)
|
|
59
|
-
}, children);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
exports.AddContext = AddContext;
|
|
63
|
-
|
|
64
|
-
const CodeOrSourceMdx = _ref => {
|
|
65
|
-
let {
|
|
66
|
-
className,
|
|
67
|
-
children
|
|
68
|
-
} = _ref,
|
|
69
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded2);
|
|
70
|
-
|
|
71
|
-
// markdown-to-jsx does not add className to inline code
|
|
72
|
-
if (typeof className !== 'string' && (typeof children !== 'string' || !children.match(/[\n\r]/g))) {
|
|
73
|
-
return /*#__PURE__*/_react.default.createElement(_components.Code, null, children);
|
|
74
|
-
} // className: "lang-jsx"
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
const language = className && className.split('-');
|
|
78
|
-
return /*#__PURE__*/_react.default.createElement(_components.Source, _extends({
|
|
79
|
-
language: language && language[1] || 'plaintext',
|
|
80
|
-
format: false,
|
|
81
|
-
code: children
|
|
82
|
-
}, rest));
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
exports.CodeOrSourceMdx = CodeOrSourceMdx;
|
|
86
|
-
|
|
87
|
-
function navigate(url) {
|
|
88
|
-
_addons.addons.getChannel().emit(_coreEvents.NAVIGATE_URL, url);
|
|
89
|
-
} // @ts-ignore
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
const A = _components.components.a;
|
|
93
|
-
|
|
94
|
-
const AnchorInPage = ({
|
|
95
|
-
hash,
|
|
96
|
-
children
|
|
97
|
-
}) => /*#__PURE__*/_react.default.createElement(A, {
|
|
98
|
-
href: hash,
|
|
99
|
-
target: "_self",
|
|
100
|
-
onClick: event => {
|
|
101
|
-
const id = hash.substring(1);
|
|
102
|
-
const element = document.getElementById(id);
|
|
103
|
-
|
|
104
|
-
if (element) {
|
|
105
|
-
navigate(hash);
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
}, children);
|
|
109
|
-
|
|
110
|
-
const AnchorMdx = props => {
|
|
111
|
-
const {
|
|
112
|
-
href,
|
|
113
|
-
target,
|
|
114
|
-
children
|
|
115
|
-
} = props,
|
|
116
|
-
rest = _objectWithoutPropertiesLoose(props, _excluded3);
|
|
117
|
-
|
|
118
|
-
if (href) {
|
|
119
|
-
// Enable scrolling for in-page anchors.
|
|
120
|
-
if (href.startsWith('#')) {
|
|
121
|
-
return /*#__PURE__*/_react.default.createElement(AnchorInPage, {
|
|
122
|
-
hash: href
|
|
123
|
-
}, children);
|
|
124
|
-
} // 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.
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
if (target !== '_blank' && !href.startsWith('https://')) {
|
|
128
|
-
return /*#__PURE__*/_react.default.createElement(A, _extends({
|
|
129
|
-
href: href,
|
|
130
|
-
onClick: event => {
|
|
131
|
-
event.preventDefault(); // use the A element's href, which has been modified for
|
|
132
|
-
// local paths without a `?path=` query param prefix
|
|
133
|
-
|
|
134
|
-
navigate(event.currentTarget.getAttribute('href'));
|
|
135
|
-
},
|
|
136
|
-
target: target
|
|
137
|
-
}, rest), children);
|
|
138
|
-
}
|
|
139
|
-
} // External URL dont need any modification.
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
return /*#__PURE__*/_react.default.createElement(A, props);
|
|
143
|
-
};
|
|
144
|
-
|
|
145
|
-
exports.AnchorMdx = AnchorMdx;
|
|
146
|
-
const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
147
|
-
const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce((acc, headerType) => Object.assign({}, acc, {
|
|
148
|
-
// @ts-ignore
|
|
149
|
-
[headerType]: (0, _theming.styled)(_components.components[headerType])({
|
|
150
|
-
'& svg': {
|
|
151
|
-
visibility: 'hidden'
|
|
152
|
-
},
|
|
153
|
-
'&:hover svg': {
|
|
154
|
-
visibility: 'visible'
|
|
155
|
-
}
|
|
156
|
-
})
|
|
157
|
-
}), {});
|
|
158
|
-
|
|
159
|
-
const OcticonAnchor = _theming.styled.a(() => ({
|
|
160
|
-
float: 'left',
|
|
161
|
-
paddingRight: '4px',
|
|
162
|
-
marginLeft: '-20px',
|
|
163
|
-
// Allow the theme's text color to override the default link color.
|
|
164
|
-
color: 'inherit'
|
|
165
|
-
}));
|
|
166
|
-
|
|
167
|
-
const HeaderWithOcticonAnchor = _ref2 => {
|
|
168
|
-
let {
|
|
169
|
-
as,
|
|
170
|
-
id,
|
|
171
|
-
children
|
|
172
|
-
} = _ref2,
|
|
173
|
-
rest = _objectWithoutPropertiesLoose(_ref2, _excluded4);
|
|
174
|
-
|
|
175
|
-
// @ts-ignore
|
|
176
|
-
const OcticonHeader = OcticonHeaders[as];
|
|
177
|
-
const hash = `#${id}`;
|
|
178
|
-
return /*#__PURE__*/_react.default.createElement(OcticonHeader, _extends({
|
|
179
|
-
id: id
|
|
180
|
-
}, rest), /*#__PURE__*/_react.default.createElement(OcticonAnchor, {
|
|
181
|
-
"aria-hidden": "true",
|
|
182
|
-
href: hash,
|
|
183
|
-
tabIndex: -1,
|
|
184
|
-
target: "_self",
|
|
185
|
-
onClick: event => {
|
|
186
|
-
const element = document.getElementById(id);
|
|
187
|
-
|
|
188
|
-
if (element) {
|
|
189
|
-
navigate(hash);
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
}, /*#__PURE__*/_react.default.createElement("svg", {
|
|
193
|
-
viewBox: "0 0 16 16",
|
|
194
|
-
version: "1.1",
|
|
195
|
-
width: "16",
|
|
196
|
-
height: "16",
|
|
197
|
-
"aria-hidden": "true",
|
|
198
|
-
fill: "currentColor"
|
|
199
|
-
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
200
|
-
fillRule: "evenodd",
|
|
201
|
-
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"
|
|
202
|
-
}))), children);
|
|
203
|
-
};
|
|
204
|
-
|
|
205
|
-
const HeaderMdx = props => {
|
|
206
|
-
const {
|
|
207
|
-
as,
|
|
208
|
-
id,
|
|
209
|
-
children
|
|
210
|
-
} = props,
|
|
211
|
-
rest = _objectWithoutPropertiesLoose(props, _excluded5); // An id should have been added on every header by the "remark-slug" plugin.
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
if (id) {
|
|
215
|
-
return /*#__PURE__*/_react.default.createElement(HeaderWithOcticonAnchor, _extends({
|
|
216
|
-
as: as,
|
|
217
|
-
id: id
|
|
218
|
-
}, rest), children);
|
|
219
|
-
} // @ts-ignore
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
const Header = _components.components[as]; // Make sure it still work if "remark-slug" plugin is not present.
|
|
223
|
-
|
|
224
|
-
return /*#__PURE__*/_react.default.createElement(Header, props);
|
|
225
|
-
};
|
|
226
|
-
|
|
227
|
-
exports.HeaderMdx = HeaderMdx;
|
|
228
|
-
const HeadersMdx = SUPPORTED_MDX_HEADERS.reduce((acc, headerType) => Object.assign({}, acc, {
|
|
229
|
-
// @ts-ignore
|
|
230
|
-
[headerType]: props => /*#__PURE__*/_react.default.createElement(HeaderMdx, _extends({
|
|
231
|
-
as: headerType
|
|
232
|
-
}, props))
|
|
233
|
-
}), {});
|
|
234
|
-
exports.HeadersMdx = HeadersMdx;
|
package/dist/cjs/blocks/types.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.PRIMARY_STORY = exports.CURRENT_SELECTION = void 0;
|
|
7
|
-
const CURRENT_SELECTION = '.';
|
|
8
|
-
exports.CURRENT_SELECTION = CURRENT_SELECTION;
|
|
9
|
-
const PRIMARY_STORY = '^';
|
|
10
|
-
exports.PRIMARY_STORY = PRIMARY_STORY;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useStories = useStories;
|
|
7
|
-
exports.useStory = useStory;
|
|
8
|
-
|
|
9
|
-
var _react = require("react");
|
|
10
|
-
|
|
11
|
-
function useStory(storyId, context) {
|
|
12
|
-
const stories = useStories([storyId], context);
|
|
13
|
-
return stories && stories[0];
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
function useStories(storyIds, context) {
|
|
17
|
-
const initialStoriesById = context.componentStories().reduce((acc, story) => {
|
|
18
|
-
acc[story.id] = story;
|
|
19
|
-
return acc;
|
|
20
|
-
}, {});
|
|
21
|
-
const [storiesById, setStories] = (0, _react.useState)(initialStoriesById);
|
|
22
|
-
(0, _react.useEffect)(() => {
|
|
23
|
-
Promise.all(storyIds.map(async storyId => {
|
|
24
|
-
// loadStory will be called every single time useStory is called
|
|
25
|
-
// because useEffect does not use storyIds as an input. This is because
|
|
26
|
-
// HMR can change the story even when the storyId hasn't changed. However, it
|
|
27
|
-
// will be a no-op once the story has loaded. Furthermore, the `story` will
|
|
28
|
-
// have an exact equality when the story hasn't changed, so it won't trigger
|
|
29
|
-
// any unnecessary re-renders
|
|
30
|
-
const story = await context.loadStory(storyId);
|
|
31
|
-
setStories(current => current[storyId] === story ? current : Object.assign({}, current, {
|
|
32
|
-
[storyId]: story
|
|
33
|
-
}));
|
|
34
|
-
}));
|
|
35
|
-
});
|
|
36
|
-
return storyIds.map(storyId => storiesById[storyId]);
|
|
37
|
-
}
|
package/dist/cjs/blocks/utils.js
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getComponentName = void 0;
|
|
7
|
-
exports.scrollToElement = scrollToElement;
|
|
8
|
-
|
|
9
|
-
/* eslint-disable no-underscore-dangle */
|
|
10
|
-
const titleCase = str => str.split('-').map(part => part.charAt(0).toUpperCase() + part.slice(1)).join('');
|
|
11
|
-
|
|
12
|
-
const getComponentName = component => {
|
|
13
|
-
if (!component) {
|
|
14
|
-
return undefined;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
if (typeof component === 'string') {
|
|
18
|
-
if (component.includes('-')) {
|
|
19
|
-
return titleCase(component);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
return component;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
if (component.__docgenInfo && component.__docgenInfo.displayName) {
|
|
26
|
-
return component.__docgenInfo.displayName;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
return component.name;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
exports.getComponentName = getComponentName;
|
|
33
|
-
|
|
34
|
-
function scrollToElement(element, block = 'start') {
|
|
35
|
-
element.scrollIntoView({
|
|
36
|
-
behavior: 'smooth',
|
|
37
|
-
block,
|
|
38
|
-
inline: 'nearest'
|
|
39
|
-
});
|
|
40
|
-
}
|