@storybook/addon-docs 6.5.7-alpha.0 → 7.0.0-alpha.1
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/blocks.d.ts +1 -1
- package/dist/cjs/blocks/ArgsTable.js +1 -1
- package/dist/cjs/blocks/Primary.js +1 -1
- package/dist/cjs/blocks/Stories.js +1 -1
- package/dist/cjs/blocks/mdx.js +1 -1
- package/dist/cjs/blocks/useStory.js +18 -4
- package/dist/cjs/preset.js +137 -33
- package/dist/cjs/preview.js +22 -6
- package/dist/esm/blocks/Anchor.js +7 -10
- package/dist/esm/blocks/ArgsTable.js +133 -182
- package/dist/esm/blocks/Canvas.js +34 -46
- package/dist/esm/blocks/Description.js +39 -45
- package/dist/esm/blocks/DocsContainer.js +36 -44
- package/dist/esm/blocks/DocsContext.js +1 -1
- package/dist/esm/blocks/DocsPage.js +3 -5
- package/dist/esm/blocks/DocsStory.js +18 -27
- package/dist/esm/blocks/Heading.js +5 -7
- package/dist/esm/blocks/Meta.js +9 -13
- package/dist/esm/blocks/Preview.js +5 -10
- package/dist/esm/blocks/Primary.js +10 -16
- package/dist/esm/blocks/Props.js +5 -10
- package/dist/esm/blocks/Source.js +64 -70
- package/dist/esm/blocks/SourceContainer.js +17 -50
- package/dist/esm/blocks/Stories.js +15 -27
- package/dist/esm/blocks/Story.js +58 -99
- package/dist/esm/blocks/Subheading.js +5 -7
- package/dist/esm/blocks/Subtitle.js +12 -12
- package/dist/esm/blocks/Title.js +10 -11
- package/dist/esm/blocks/Wrapper.js +7 -8
- package/dist/esm/blocks/enhanceSource.js +32 -56
- package/dist/esm/blocks/mdx.js +85 -89
- package/dist/esm/blocks/types.js +2 -2
- package/dist/esm/blocks/useStory.js +16 -73
- package/dist/esm/blocks/utils.js +4 -18
- package/dist/esm/manager.js +9 -14
- package/dist/esm/preset.js +114 -179
- package/dist/esm/preview.js +3 -61
- package/dist/esm/shared.js +5 -5
- package/dist/{ts3.9 → types}/blocks/Anchor.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/ArgsTable.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Canvas.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Description.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/DocsContainer.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/DocsContext.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/DocsPage.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/DocsStory.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Heading.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Meta.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Preview.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Primary.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Props.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Source.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/SourceContainer.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Stories.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Story.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Subheading.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Subtitle.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Title.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/Wrapper.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/enhanceSource.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/index.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/mdx.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/types.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/useStory.d.ts +0 -0
- package/dist/{ts3.9 → types}/blocks/utils.d.ts +0 -0
- package/dist/{ts3.9 → types}/index.d.ts +0 -0
- package/dist/{ts3.9 → types}/manager.d.ts +0 -0
- package/dist/{ts3.9 → types}/preset.d.ts +2 -1
- package/dist/{ts3.9 → types}/preview.d.ts +0 -0
- package/dist/{ts3.9 → types}/shared.d.ts +0 -0
- package/package.json +16 -24
- package/dist/modern/blocks/Anchor.js +0 -8
- package/dist/modern/blocks/ArgsTable.js +0 -292
- package/dist/modern/blocks/Canvas.js +0 -83
- package/dist/modern/blocks/Description.js +0 -107
- package/dist/modern/blocks/DocsContainer.js +0 -98
- package/dist/modern/blocks/DocsContext.js +0 -16
- package/dist/modern/blocks/DocsPage.js +0 -11
- package/dist/modern/blocks/DocsStory.js +0 -48
- package/dist/modern/blocks/Heading.js +0 -17
- package/dist/modern/blocks/Meta.js +0 -31
- package/dist/modern/blocks/Preview.js +0 -9
- package/dist/modern/blocks/Primary.js +0 -23
- package/dist/modern/blocks/Props.js +0 -14
- package/dist/modern/blocks/Source.js +0 -154
- package/dist/modern/blocks/SourceContainer.js +0 -44
- package/dist/modern/blocks/Stories.js +0 -34
- package/dist/modern/blocks/Story.js +0 -168
- package/dist/modern/blocks/Subheading.js +0 -17
- package/dist/modern/blocks/Subtitle.js +0 -23
- package/dist/modern/blocks/Title.js +0 -24
- package/dist/modern/blocks/Wrapper.js +0 -8
- package/dist/modern/blocks/enhanceSource.js +0 -89
- package/dist/modern/blocks/index.js +0 -24
- package/dist/modern/blocks/mdx.js +0 -204
- package/dist/modern/blocks/types.js +0 -2
- package/dist/modern/blocks/useStory.js +0 -28
- package/dist/modern/blocks/utils.js +0 -29
- package/dist/modern/index.js +0 -1
- package/dist/modern/manager.js +0 -16
- package/dist/modern/preset.js +0 -130
- package/dist/modern/preview.js +0 -6
- package/dist/modern/shared.js +0 -11
- package/dist/ts3.4/blocks/Anchor.d.ts +0 -6
- package/dist/ts3.4/blocks/ArgsTable.d.ts +0 -33
- package/dist/ts3.4/blocks/Canvas.d.ts +0 -9
- package/dist/ts3.4/blocks/Description.d.ts +0 -20
- package/dist/ts3.4/blocks/DocsContainer.d.ts +0 -7
- package/dist/ts3.4/blocks/DocsContext.d.ts +0 -5
- package/dist/ts3.4/blocks/DocsPage.d.ts +0 -2
- package/dist/ts3.4/blocks/DocsStory.d.ts +0 -3
- package/dist/ts3.4/blocks/Heading.d.ts +0 -6
- package/dist/ts3.4/blocks/Meta.d.ts +0 -9
- package/dist/ts3.4/blocks/Preview.d.ts +0 -3
- package/dist/ts3.4/blocks/Primary.d.ts +0 -6
- package/dist/ts3.4/blocks/Props.d.ts +0 -3
- package/dist/ts3.4/blocks/Source.d.ts +0 -38
- package/dist/ts3.4/blocks/SourceContainer.d.ts +0 -14
- package/dist/ts3.4/blocks/Stories.d.ts +0 -7
- package/dist/ts3.4/blocks/Story.d.ts +0 -28
- package/dist/ts3.4/blocks/Subheading.d.ts +0 -3
- package/dist/ts3.4/blocks/Subtitle.d.ts +0 -6
- package/dist/ts3.4/blocks/Title.d.ts +0 -8
- package/dist/ts3.4/blocks/Wrapper.d.ts +0 -2
- package/dist/ts3.4/blocks/enhanceSource.d.ts +0 -3
- package/dist/ts3.4/blocks/index.d.ts +0 -24
- package/dist/ts3.4/blocks/mdx.d.ts +0 -20
- package/dist/ts3.4/blocks/types.d.ts +0 -13
- package/dist/ts3.4/blocks/useStory.d.ts +0 -5
- package/dist/ts3.4/blocks/utils.d.ts +0 -3
- package/dist/ts3.4/index.d.ts +0 -1
- package/dist/ts3.4/manager.d.ts +0 -1
- package/dist/ts3.4/preset.d.ts +0 -11
- package/dist/ts3.4/preview.d.ts +0 -6
- package/dist/ts3.4/shared.d.ts +0 -24
package/dist/esm/blocks/Title.js
CHANGED
|
@@ -1,19 +1,18 @@
|
|
|
1
|
-
import "core-js/modules/es.regexp.exec.js";
|
|
2
|
-
import "core-js/modules/es.string.split.js";
|
|
3
|
-
import "core-js/modules/es.string.trim.js";
|
|
4
1
|
import React, { useContext } from 'react';
|
|
5
2
|
import { Title as PureTitle } from '@storybook/components';
|
|
6
3
|
import { DocsContext } from './DocsContext';
|
|
7
|
-
|
|
8
|
-
export
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
const STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/;
|
|
5
|
+
export const extractTitle = ({
|
|
6
|
+
title
|
|
7
|
+
}) => {
|
|
8
|
+
const groups = title.trim().split(STORY_KIND_PATH_SEPARATOR);
|
|
11
9
|
return groups && groups[groups.length - 1] || title;
|
|
12
10
|
};
|
|
13
|
-
export
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
export const Title = ({
|
|
12
|
+
children
|
|
13
|
+
}) => {
|
|
14
|
+
const context = useContext(DocsContext);
|
|
15
|
+
let text = children;
|
|
17
16
|
|
|
18
17
|
if (!text) {
|
|
19
18
|
text = extractTitle(context);
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
2
|
+
export const Wrapper = ({
|
|
3
|
+
children
|
|
4
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
5
|
+
style: {
|
|
6
|
+
fontFamily: 'sans-serif'
|
|
7
|
+
}
|
|
8
|
+
}, children);
|
|
@@ -1,30 +1,3 @@
|
|
|
1
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
2
|
-
|
|
3
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
|
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
-
|
|
7
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
8
|
-
|
|
9
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
10
|
-
|
|
11
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
12
|
-
|
|
13
|
-
import "core-js/modules/es.array.join.js";
|
|
14
|
-
import "core-js/modules/es.array.concat.js";
|
|
15
|
-
import "core-js/modules/es.array.slice.js";
|
|
16
|
-
import "core-js/modules/es.regexp.exec.js";
|
|
17
|
-
import "core-js/modules/es.string.replace.js";
|
|
18
|
-
import "core-js/modules/es.string.split.js";
|
|
19
|
-
import "core-js/modules/es.symbol.js";
|
|
20
|
-
import "core-js/modules/es.symbol.description.js";
|
|
21
|
-
import "core-js/modules/es.object.to-string.js";
|
|
22
|
-
import "core-js/modules/es.symbol.iterator.js";
|
|
23
|
-
import "core-js/modules/es.array.iterator.js";
|
|
24
|
-
import "core-js/modules/es.string.iterator.js";
|
|
25
|
-
import "core-js/modules/web.dom-collections.iterator.js";
|
|
26
|
-
import "core-js/modules/es.array.from.js";
|
|
27
|
-
import "core-js/modules/es.function.name.js";
|
|
28
1
|
import { combineParameters } from '@storybook/store'; // ============================================================
|
|
29
2
|
// START @storybook/source-loader/extract-source
|
|
30
3
|
//
|
|
@@ -37,22 +10,24 @@ import { combineParameters } from '@storybook/store'; // =======================
|
|
|
37
10
|
* given a location, extract the text from the full source
|
|
38
11
|
*/
|
|
39
12
|
function extractSource(location, lines) {
|
|
40
|
-
|
|
41
|
-
|
|
13
|
+
const {
|
|
14
|
+
startBody: start,
|
|
15
|
+
endBody: end
|
|
16
|
+
} = location;
|
|
42
17
|
|
|
43
18
|
if (start.line === end.line && lines[start.line - 1] !== undefined) {
|
|
44
19
|
return lines[start.line - 1].substring(start.col, end.col);
|
|
45
20
|
} // NOTE: storysource locations are 1-based not 0-based!
|
|
46
21
|
|
|
47
22
|
|
|
48
|
-
|
|
49
|
-
|
|
23
|
+
const startLine = lines[start.line - 1];
|
|
24
|
+
const endLine = lines[end.line - 1];
|
|
50
25
|
|
|
51
26
|
if (startLine === undefined || endLine === undefined) {
|
|
52
27
|
return null;
|
|
53
28
|
}
|
|
54
29
|
|
|
55
|
-
return [startLine.substring(start.col)
|
|
30
|
+
return [startLine.substring(start.col), ...lines.slice(start.line, end.line - 1), endLine.substring(0, end.col)].join('\n');
|
|
56
31
|
} // ============================================================
|
|
57
32
|
// END @storybook/source-loader/extract-source
|
|
58
33
|
// ============================================================
|
|
@@ -62,49 +37,50 @@ function extractSource(location, lines) {
|
|
|
62
37
|
* Replaces full story id name like: story-kind--story-name -> story-name
|
|
63
38
|
* @param id
|
|
64
39
|
*/
|
|
65
|
-
|
|
66
|
-
return id.replace(/^.*?--/, '');
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
var extract = function extract(targetId, _ref) {
|
|
70
|
-
var source = _ref.source,
|
|
71
|
-
locationsMap = _ref.locationsMap;
|
|
40
|
+
const storyIdToSanitizedStoryName = id => id.replace(/^.*?--/, '');
|
|
72
41
|
|
|
42
|
+
const extract = (targetId, {
|
|
43
|
+
source,
|
|
44
|
+
locationsMap
|
|
45
|
+
}) => {
|
|
73
46
|
if (!locationsMap) {
|
|
74
47
|
return source;
|
|
75
48
|
}
|
|
76
49
|
|
|
77
|
-
|
|
78
|
-
|
|
50
|
+
const sanitizedStoryName = storyIdToSanitizedStoryName(targetId);
|
|
51
|
+
const location = locationsMap[sanitizedStoryName];
|
|
79
52
|
|
|
80
53
|
if (!location) {
|
|
81
54
|
return source;
|
|
82
55
|
}
|
|
83
56
|
|
|
84
|
-
|
|
57
|
+
const lines = source.split('\n');
|
|
85
58
|
return extractSource(location, lines);
|
|
86
59
|
};
|
|
87
60
|
|
|
88
|
-
export
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
61
|
+
export const enhanceSource = story => {
|
|
62
|
+
const {
|
|
63
|
+
id,
|
|
64
|
+
parameters
|
|
65
|
+
} = story;
|
|
66
|
+
const {
|
|
67
|
+
storySource,
|
|
68
|
+
docs = {}
|
|
69
|
+
} = parameters;
|
|
70
|
+
const {
|
|
71
|
+
transformSource
|
|
72
|
+
} = docs; // no input or user has manually overridden the output
|
|
73
|
+
|
|
74
|
+
if (!storySource?.source || docs.source?.code) {
|
|
99
75
|
return null;
|
|
100
76
|
}
|
|
101
77
|
|
|
102
|
-
|
|
103
|
-
|
|
78
|
+
const input = extract(id, storySource);
|
|
79
|
+
const code = transformSource ? transformSource(input, story) : input;
|
|
104
80
|
return {
|
|
105
81
|
docs: combineParameters(docs, {
|
|
106
82
|
source: {
|
|
107
|
-
code
|
|
83
|
+
code
|
|
108
84
|
}
|
|
109
85
|
})
|
|
110
86
|
};
|
package/dist/esm/blocks/mdx.js
CHANGED
|
@@ -1,23 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
_excluded4 = ["as", "id", "children"],
|
|
7
|
-
_excluded5 = ["as", "id", "children"];
|
|
1
|
+
const _excluded = ["children"],
|
|
2
|
+
_excluded2 = ["className", "children"],
|
|
3
|
+
_excluded3 = ["href", "target", "children"],
|
|
4
|
+
_excluded4 = ["as", "id", "children"],
|
|
5
|
+
_excluded5 = ["as", "id", "children"];
|
|
8
6
|
|
|
9
|
-
function
|
|
10
|
-
|
|
11
|
-
function _extends() { _extends = Object.assign || 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); }
|
|
12
|
-
|
|
13
|
-
import "core-js/modules/es.object.assign.js";
|
|
14
|
-
import "core-js/modules/es.regexp.exec.js";
|
|
15
|
-
import "core-js/modules/es.string.match.js";
|
|
16
|
-
import "core-js/modules/es.string.split.js";
|
|
17
|
-
import "core-js/modules/es.string.starts-with.js";
|
|
18
|
-
import "core-js/modules/es.object.to-string.js";
|
|
19
|
-
|
|
20
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
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); }
|
|
21
8
|
|
|
22
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; }
|
|
23
10
|
|
|
@@ -28,29 +15,35 @@ import { Source, Code, components } from '@storybook/components';
|
|
|
28
15
|
import global from 'global';
|
|
29
16
|
import { styled } from '@storybook/theming';
|
|
30
17
|
import { DocsContext } from './DocsContext';
|
|
31
|
-
|
|
18
|
+
const {
|
|
19
|
+
document
|
|
20
|
+
} = global; // Hacky utility for asserting identifiers in MDX Story elements
|
|
32
21
|
|
|
33
|
-
export
|
|
22
|
+
export const assertIsFn = val => {
|
|
34
23
|
if (typeof val !== 'function') {
|
|
35
|
-
throw new Error(
|
|
24
|
+
throw new Error(`Expected story function, got: ${val}`);
|
|
36
25
|
}
|
|
37
26
|
|
|
38
27
|
return val;
|
|
39
28
|
}; // Hacky utility for adding mdxStoryToId to the default context
|
|
40
29
|
|
|
41
|
-
export
|
|
42
|
-
|
|
43
|
-
|
|
30
|
+
export const AddContext = props => {
|
|
31
|
+
const {
|
|
32
|
+
children
|
|
33
|
+
} = props,
|
|
34
|
+
rest = _objectWithoutPropertiesLoose(props, _excluded);
|
|
44
35
|
|
|
45
|
-
|
|
36
|
+
const parentContext = React.useContext(DocsContext);
|
|
46
37
|
return /*#__PURE__*/React.createElement(DocsContext.Provider, {
|
|
47
38
|
value: Object.assign({}, parentContext, rest)
|
|
48
39
|
}, children);
|
|
49
40
|
};
|
|
50
|
-
export
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
41
|
+
export const CodeOrSourceMdx = _ref => {
|
|
42
|
+
let {
|
|
43
|
+
className,
|
|
44
|
+
children
|
|
45
|
+
} = _ref,
|
|
46
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded2);
|
|
54
47
|
|
|
55
48
|
// markdown-to-jsx does not add className to inline code
|
|
56
49
|
if (typeof className !== 'string' && (typeof children !== 'string' || !children.match(/[\n\r]/g))) {
|
|
@@ -58,7 +51,7 @@ export var CodeOrSourceMdx = function CodeOrSourceMdx(_ref) {
|
|
|
58
51
|
} // className: "lang-jsx"
|
|
59
52
|
|
|
60
53
|
|
|
61
|
-
|
|
54
|
+
const language = className && className.split('-');
|
|
62
55
|
return /*#__PURE__*/React.createElement(Source, _extends({
|
|
63
56
|
language: language && language[1] || 'plaintext',
|
|
64
57
|
format: false,
|
|
@@ -71,30 +64,31 @@ function navigate(url) {
|
|
|
71
64
|
} // @ts-ignore
|
|
72
65
|
|
|
73
66
|
|
|
74
|
-
|
|
67
|
+
const A = components.a;
|
|
75
68
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
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);
|
|
85
78
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
}
|
|
79
|
+
if (element) {
|
|
80
|
+
navigate(hash);
|
|
89
81
|
}
|
|
90
|
-
}
|
|
91
|
-
};
|
|
82
|
+
}
|
|
83
|
+
}, children);
|
|
92
84
|
|
|
93
|
-
export
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
85
|
+
export const AnchorMdx = props => {
|
|
86
|
+
const {
|
|
87
|
+
href,
|
|
88
|
+
target,
|
|
89
|
+
children
|
|
90
|
+
} = props,
|
|
91
|
+
rest = _objectWithoutPropertiesLoose(props, _excluded3);
|
|
98
92
|
|
|
99
93
|
if (href) {
|
|
100
94
|
// Enable scrolling for in-page anchors.
|
|
@@ -108,7 +102,7 @@ export var AnchorMdx = function AnchorMdx(props) {
|
|
|
108
102
|
if (target !== '_blank' && !href.startsWith('https://')) {
|
|
109
103
|
return /*#__PURE__*/React.createElement(A, _extends({
|
|
110
104
|
href: href,
|
|
111
|
-
onClick:
|
|
105
|
+
onClick: event => {
|
|
112
106
|
event.preventDefault(); // use the A element's href, which has been modified for
|
|
113
107
|
// local paths without a `?path=` query param prefix
|
|
114
108
|
|
|
@@ -122,36 +116,37 @@ export var AnchorMdx = function AnchorMdx(props) {
|
|
|
122
116
|
|
|
123
117
|
return /*#__PURE__*/React.createElement(A, props);
|
|
124
118
|
};
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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])({
|
|
128
123
|
'& svg': {
|
|
129
124
|
visibility: 'hidden'
|
|
130
125
|
},
|
|
131
126
|
'&:hover svg': {
|
|
132
127
|
visibility: 'visible'
|
|
133
128
|
}
|
|
134
|
-
})
|
|
135
|
-
}, {});
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
rest =
|
|
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);
|
|
151
146
|
|
|
152
147
|
// @ts-ignore
|
|
153
|
-
|
|
154
|
-
|
|
148
|
+
const OcticonHeader = OcticonHeaders[as];
|
|
149
|
+
const hash = `#${id}`;
|
|
155
150
|
return /*#__PURE__*/React.createElement(OcticonHeader, _extends({
|
|
156
151
|
id: id
|
|
157
152
|
}, rest), /*#__PURE__*/React.createElement(OcticonAnchor, {
|
|
@@ -159,8 +154,8 @@ var HeaderWithOcticonAnchor = function HeaderWithOcticonAnchor(_ref3) {
|
|
|
159
154
|
href: hash,
|
|
160
155
|
tabIndex: -1,
|
|
161
156
|
target: "_self",
|
|
162
|
-
onClick:
|
|
163
|
-
|
|
157
|
+
onClick: event => {
|
|
158
|
+
const element = document.getElementById(id);
|
|
164
159
|
|
|
165
160
|
if (element) {
|
|
166
161
|
navigate(hash);
|
|
@@ -179,11 +174,13 @@ var HeaderWithOcticonAnchor = function HeaderWithOcticonAnchor(_ref3) {
|
|
|
179
174
|
}))), children);
|
|
180
175
|
};
|
|
181
176
|
|
|
182
|
-
export
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
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.
|
|
187
184
|
|
|
188
185
|
|
|
189
186
|
if (id) {
|
|
@@ -194,14 +191,13 @@ export var HeaderMdx = function HeaderMdx(props) {
|
|
|
194
191
|
} // @ts-ignore
|
|
195
192
|
|
|
196
193
|
|
|
197
|
-
|
|
194
|
+
const Header = components[as]; // Make sure it still work if "remark-slug" plugin is not present.
|
|
198
195
|
|
|
199
196
|
return /*#__PURE__*/React.createElement(Header, props);
|
|
200
197
|
};
|
|
201
|
-
export
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
}, {});
|
|
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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
1
|
+
export const CURRENT_SELECTION = '.';
|
|
2
|
+
export const PRIMARY_STORY = '^';
|
|
@@ -1,84 +1,27 @@
|
|
|
1
|
-
import "regenerator-runtime/runtime.js";
|
|
2
|
-
|
|
3
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
-
|
|
5
|
-
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
6
|
-
|
|
7
|
-
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
8
|
-
|
|
9
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
10
|
-
|
|
11
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
12
|
-
|
|
13
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
14
|
-
|
|
15
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
16
|
-
|
|
17
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
18
|
-
|
|
19
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
20
|
-
|
|
21
|
-
import "core-js/modules/es.object.to-string.js";
|
|
22
|
-
import "core-js/modules/es.array.iterator.js";
|
|
23
|
-
import "core-js/modules/es.promise.js";
|
|
24
|
-
import "core-js/modules/es.string.iterator.js";
|
|
25
|
-
import "core-js/modules/web.dom-collections.iterator.js";
|
|
26
|
-
import "core-js/modules/es.array.map.js";
|
|
27
|
-
import "core-js/modules/es.object.assign.js";
|
|
28
|
-
import "core-js/modules/es.symbol.js";
|
|
29
|
-
import "core-js/modules/es.symbol.description.js";
|
|
30
|
-
import "core-js/modules/es.symbol.iterator.js";
|
|
31
|
-
import "core-js/modules/es.array.slice.js";
|
|
32
|
-
import "core-js/modules/es.function.name.js";
|
|
33
|
-
import "core-js/modules/es.array.from.js";
|
|
34
|
-
import "core-js/modules/es.regexp.exec.js";
|
|
35
1
|
import { useState, useEffect } from 'react';
|
|
36
2
|
export function useStory(storyId, context) {
|
|
37
|
-
|
|
3
|
+
const stories = useStories([storyId], context);
|
|
38
4
|
return stories && stories[0];
|
|
39
5
|
}
|
|
40
6
|
export function useStories(storyIds, context) {
|
|
41
|
-
|
|
7
|
+
const initialStoriesById = context.componentStories().reduce((acc, story) => {
|
|
42
8
|
acc[story.id] = story;
|
|
43
9
|
return acc;
|
|
44
10
|
}, {});
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
switch (_context.prev = _context.next) {
|
|
58
|
-
case 0:
|
|
59
|
-
_context.next = 2;
|
|
60
|
-
return context.loadStory(storyId);
|
|
61
|
-
|
|
62
|
-
case 2:
|
|
63
|
-
story = _context.sent;
|
|
64
|
-
setStories(function (current) {
|
|
65
|
-
return current[storyId] === story ? current : Object.assign({}, current, _defineProperty({}, storyId, story));
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
case 4:
|
|
69
|
-
case "end":
|
|
70
|
-
return _context.stop();
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
}, _callee);
|
|
11
|
+
const [storiesById, setStories] = useState(initialStoriesById);
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
Promise.all(storyIds.map(async storyId => {
|
|
14
|
+
// loadStory will be called every single time useStory is called
|
|
15
|
+
// because useEffect does not use storyIds as an input. This is because
|
|
16
|
+
// HMR can change the story even when the storyId hasn't changed. However, it
|
|
17
|
+
// will be a no-op once the story has loaded. Furthermore, the `story` will
|
|
18
|
+
// have an exact equality when the story hasn't changed, so it won't trigger
|
|
19
|
+
// any unnecessary re-renders
|
|
20
|
+
const story = await context.loadStory(storyId);
|
|
21
|
+
setStories(current => current[storyId] === story ? current : Object.assign({}, current, {
|
|
22
|
+
[storyId]: story
|
|
74
23
|
}));
|
|
75
|
-
|
|
76
|
-
return function (_x) {
|
|
77
|
-
return _ref.apply(this, arguments);
|
|
78
|
-
};
|
|
79
|
-
}()));
|
|
80
|
-
});
|
|
81
|
-
return storyIds.map(function (storyId) {
|
|
82
|
-
return storiesById[storyId];
|
|
24
|
+
}));
|
|
83
25
|
});
|
|
26
|
+
return storyIds.map(storyId => storiesById[storyId]);
|
|
84
27
|
}
|
package/dist/esm/blocks/utils.js
CHANGED
|
@@ -1,20 +1,7 @@
|
|
|
1
|
-
import "core-js/modules/es.array.join.js";
|
|
2
|
-
import "core-js/modules/es.array.map.js";
|
|
3
|
-
import "core-js/modules/es.regexp.exec.js";
|
|
4
|
-
import "core-js/modules/es.string.split.js";
|
|
5
|
-
import "core-js/modules/es.array.slice.js";
|
|
6
|
-
import "core-js/modules/es.array.includes.js";
|
|
7
|
-
import "core-js/modules/es.string.includes.js";
|
|
8
|
-
import "core-js/modules/es.function.name.js";
|
|
9
|
-
|
|
10
1
|
/* eslint-disable no-underscore-dangle */
|
|
11
|
-
|
|
12
|
-
return str.split('-').map(function (part) {
|
|
13
|
-
return part.charAt(0).toUpperCase() + part.slice(1);
|
|
14
|
-
}).join('');
|
|
15
|
-
};
|
|
2
|
+
const titleCase = str => str.split('-').map(part => part.charAt(0).toUpperCase() + part.slice(1)).join('');
|
|
16
3
|
|
|
17
|
-
export
|
|
4
|
+
export const getComponentName = component => {
|
|
18
5
|
if (!component) {
|
|
19
6
|
return undefined;
|
|
20
7
|
}
|
|
@@ -33,11 +20,10 @@ export var getComponentName = function getComponentName(component) {
|
|
|
33
20
|
|
|
34
21
|
return component.name;
|
|
35
22
|
};
|
|
36
|
-
export function scrollToElement(element) {
|
|
37
|
-
var block = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'start';
|
|
23
|
+
export function scrollToElement(element, block = 'start') {
|
|
38
24
|
element.scrollIntoView({
|
|
39
25
|
behavior: 'smooth',
|
|
40
|
-
block
|
|
26
|
+
block,
|
|
41
27
|
inline: 'nearest'
|
|
42
28
|
});
|
|
43
29
|
}
|
package/dist/esm/manager.js
CHANGED
|
@@ -1,21 +1,16 @@
|
|
|
1
|
-
import "core-js/modules/es.array.concat.js";
|
|
2
1
|
import { addons, types } from '@storybook/addons';
|
|
3
2
|
import { ADDON_ID, PANEL_ID } from './shared';
|
|
4
|
-
addons.register(ADDON_ID,
|
|
3
|
+
addons.register(ADDON_ID, () => {
|
|
5
4
|
addons.add(PANEL_ID, {
|
|
6
5
|
type: types.TAB,
|
|
7
6
|
title: 'Docs',
|
|
8
|
-
route:
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
},
|
|
17
|
-
render: function render() {
|
|
18
|
-
return null;
|
|
19
|
-
}
|
|
7
|
+
route: ({
|
|
8
|
+
storyId,
|
|
9
|
+
refId
|
|
10
|
+
}) => refId ? `/docs/${refId}_${storyId}` : `/docs/${storyId}`,
|
|
11
|
+
match: ({
|
|
12
|
+
viewMode
|
|
13
|
+
}) => viewMode === 'docs',
|
|
14
|
+
render: () => null
|
|
20
15
|
});
|
|
21
16
|
});
|