@storybook/addon-docs 6.5.9 → 7.0.0-alpha.10

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.
Files changed (163) hide show
  1. package/blocks.d.ts +1 -1
  2. package/dist/cjs/blocks/index.js +5 -359
  3. package/dist/cjs/index.js +1 -7
  4. package/dist/cjs/manager.js +9 -15
  5. package/dist/cjs/preset.js +121 -193
  6. package/dist/cjs/preview.js +9 -87
  7. package/dist/cjs/shared.js +5 -5
  8. package/dist/esm/blocks/index.js +1 -24
  9. package/dist/esm/manager.js +9 -14
  10. package/dist/esm/preset.js +114 -179
  11. package/dist/esm/preview.js +7 -61
  12. package/dist/esm/shared.js +5 -5
  13. package/dist/types/blocks/index.d.ts +1 -0
  14. package/dist/{ts3.9 → types}/index.d.ts +0 -0
  15. package/dist/{ts3.9 → types}/manager.d.ts +0 -0
  16. package/dist/{ts3.9 → types}/preset.d.ts +2 -1
  17. package/dist/types/preview.d.ts +1 -0
  18. package/dist/{ts3.9 → types}/shared.d.ts +0 -0
  19. package/package.json +18 -25
  20. package/dist/cjs/blocks/Anchor.js +0 -26
  21. package/dist/cjs/blocks/ArgsTable.js +0 -400
  22. package/dist/cjs/blocks/Canvas.js +0 -144
  23. package/dist/cjs/blocks/Description.js +0 -153
  24. package/dist/cjs/blocks/DocsContainer.js +0 -155
  25. package/dist/cjs/blocks/DocsContext.js +0 -25
  26. package/dist/cjs/blocks/DocsPage.js +0 -32
  27. package/dist/cjs/blocks/DocsStory.js +0 -78
  28. package/dist/cjs/blocks/Heading.js +0 -35
  29. package/dist/cjs/blocks/Meta.js +0 -72
  30. package/dist/cjs/blocks/Preview.js +0 -29
  31. package/dist/cjs/blocks/Primary.js +0 -67
  32. package/dist/cjs/blocks/Props.js +0 -35
  33. package/dist/cjs/blocks/Source.js +0 -197
  34. package/dist/cjs/blocks/SourceContainer.js +0 -116
  35. package/dist/cjs/blocks/Stories.js +0 -82
  36. package/dist/cjs/blocks/Story.js +0 -263
  37. package/dist/cjs/blocks/Subheading.js +0 -35
  38. package/dist/cjs/blocks/Subtitle.js +0 -59
  39. package/dist/cjs/blocks/Title.js +0 -68
  40. package/dist/cjs/blocks/Wrapper.js +0 -21
  41. package/dist/cjs/blocks/enhanceSource.js +0 -129
  42. package/dist/cjs/blocks/mdx.js +0 -245
  43. package/dist/cjs/blocks/types.js +0 -10
  44. package/dist/cjs/blocks/useStory.js +0 -108
  45. package/dist/cjs/blocks/utils.js +0 -61
  46. package/dist/esm/blocks/Anchor.js +0 -11
  47. package/dist/esm/blocks/ArgsTable.js +0 -341
  48. package/dist/esm/blocks/Canvas.js +0 -95
  49. package/dist/esm/blocks/Description.js +0 -113
  50. package/dist/esm/blocks/DocsContainer.js +0 -106
  51. package/dist/esm/blocks/DocsContext.js +0 -16
  52. package/dist/esm/blocks/DocsPage.js +0 -13
  53. package/dist/esm/blocks/DocsStory.js +0 -55
  54. package/dist/esm/blocks/Heading.js +0 -19
  55. package/dist/esm/blocks/Meta.js +0 -35
  56. package/dist/esm/blocks/Preview.js +0 -14
  57. package/dist/esm/blocks/Primary.js +0 -29
  58. package/dist/esm/blocks/Props.js +0 -19
  59. package/dist/esm/blocks/Source.js +0 -150
  60. package/dist/esm/blocks/SourceContainer.js +0 -77
  61. package/dist/esm/blocks/Stories.js +0 -42
  62. package/dist/esm/blocks/Story.js +0 -207
  63. package/dist/esm/blocks/Subheading.js +0 -19
  64. package/dist/esm/blocks/Subtitle.js +0 -23
  65. package/dist/esm/blocks/Title.js +0 -25
  66. package/dist/esm/blocks/Wrapper.js +0 -9
  67. package/dist/esm/blocks/enhanceSource.js +0 -111
  68. package/dist/esm/blocks/mdx.js +0 -207
  69. package/dist/esm/blocks/types.js +0 -2
  70. package/dist/esm/blocks/useStory.js +0 -84
  71. package/dist/esm/blocks/utils.js +0 -43
  72. package/dist/modern/blocks/Anchor.js +0 -8
  73. package/dist/modern/blocks/ArgsTable.js +0 -292
  74. package/dist/modern/blocks/Canvas.js +0 -83
  75. package/dist/modern/blocks/Description.js +0 -107
  76. package/dist/modern/blocks/DocsContainer.js +0 -98
  77. package/dist/modern/blocks/DocsContext.js +0 -16
  78. package/dist/modern/blocks/DocsPage.js +0 -11
  79. package/dist/modern/blocks/DocsStory.js +0 -48
  80. package/dist/modern/blocks/Heading.js +0 -17
  81. package/dist/modern/blocks/Meta.js +0 -31
  82. package/dist/modern/blocks/Preview.js +0 -9
  83. package/dist/modern/blocks/Primary.js +0 -23
  84. package/dist/modern/blocks/Props.js +0 -14
  85. package/dist/modern/blocks/Source.js +0 -154
  86. package/dist/modern/blocks/SourceContainer.js +0 -44
  87. package/dist/modern/blocks/Stories.js +0 -34
  88. package/dist/modern/blocks/Story.js +0 -168
  89. package/dist/modern/blocks/Subheading.js +0 -17
  90. package/dist/modern/blocks/Subtitle.js +0 -23
  91. package/dist/modern/blocks/Title.js +0 -24
  92. package/dist/modern/blocks/Wrapper.js +0 -8
  93. package/dist/modern/blocks/enhanceSource.js +0 -89
  94. package/dist/modern/blocks/index.js +0 -24
  95. package/dist/modern/blocks/mdx.js +0 -204
  96. package/dist/modern/blocks/types.js +0 -2
  97. package/dist/modern/blocks/useStory.js +0 -28
  98. package/dist/modern/blocks/utils.js +0 -29
  99. package/dist/modern/index.js +0 -1
  100. package/dist/modern/manager.js +0 -16
  101. package/dist/modern/preset.js +0 -130
  102. package/dist/modern/preview.js +0 -6
  103. package/dist/modern/shared.js +0 -11
  104. package/dist/ts3.4/blocks/Anchor.d.ts +0 -6
  105. package/dist/ts3.4/blocks/ArgsTable.d.ts +0 -33
  106. package/dist/ts3.4/blocks/Canvas.d.ts +0 -9
  107. package/dist/ts3.4/blocks/Description.d.ts +0 -20
  108. package/dist/ts3.4/blocks/DocsContainer.d.ts +0 -7
  109. package/dist/ts3.4/blocks/DocsContext.d.ts +0 -5
  110. package/dist/ts3.4/blocks/DocsPage.d.ts +0 -2
  111. package/dist/ts3.4/blocks/DocsStory.d.ts +0 -3
  112. package/dist/ts3.4/blocks/Heading.d.ts +0 -6
  113. package/dist/ts3.4/blocks/Meta.d.ts +0 -9
  114. package/dist/ts3.4/blocks/Preview.d.ts +0 -3
  115. package/dist/ts3.4/blocks/Primary.d.ts +0 -6
  116. package/dist/ts3.4/blocks/Props.d.ts +0 -3
  117. package/dist/ts3.4/blocks/Source.d.ts +0 -38
  118. package/dist/ts3.4/blocks/SourceContainer.d.ts +0 -14
  119. package/dist/ts3.4/blocks/Stories.d.ts +0 -7
  120. package/dist/ts3.4/blocks/Story.d.ts +0 -28
  121. package/dist/ts3.4/blocks/Subheading.d.ts +0 -3
  122. package/dist/ts3.4/blocks/Subtitle.d.ts +0 -6
  123. package/dist/ts3.4/blocks/Title.d.ts +0 -8
  124. package/dist/ts3.4/blocks/Wrapper.d.ts +0 -2
  125. package/dist/ts3.4/blocks/enhanceSource.d.ts +0 -3
  126. package/dist/ts3.4/blocks/index.d.ts +0 -24
  127. package/dist/ts3.4/blocks/mdx.d.ts +0 -20
  128. package/dist/ts3.4/blocks/types.d.ts +0 -13
  129. package/dist/ts3.4/blocks/useStory.d.ts +0 -5
  130. package/dist/ts3.4/blocks/utils.d.ts +0 -3
  131. package/dist/ts3.4/index.d.ts +0 -1
  132. package/dist/ts3.4/manager.d.ts +0 -1
  133. package/dist/ts3.4/preset.d.ts +0 -11
  134. package/dist/ts3.4/preview.d.ts +0 -6
  135. package/dist/ts3.4/shared.d.ts +0 -24
  136. package/dist/ts3.9/blocks/Anchor.d.ts +0 -6
  137. package/dist/ts3.9/blocks/ArgsTable.d.ts +0 -33
  138. package/dist/ts3.9/blocks/Canvas.d.ts +0 -9
  139. package/dist/ts3.9/blocks/Description.d.ts +0 -20
  140. package/dist/ts3.9/blocks/DocsContainer.d.ts +0 -7
  141. package/dist/ts3.9/blocks/DocsContext.d.ts +0 -5
  142. package/dist/ts3.9/blocks/DocsPage.d.ts +0 -2
  143. package/dist/ts3.9/blocks/DocsStory.d.ts +0 -3
  144. package/dist/ts3.9/blocks/Heading.d.ts +0 -6
  145. package/dist/ts3.9/blocks/Meta.d.ts +0 -9
  146. package/dist/ts3.9/blocks/Preview.d.ts +0 -3
  147. package/dist/ts3.9/blocks/Primary.d.ts +0 -6
  148. package/dist/ts3.9/blocks/Props.d.ts +0 -3
  149. package/dist/ts3.9/blocks/Source.d.ts +0 -38
  150. package/dist/ts3.9/blocks/SourceContainer.d.ts +0 -14
  151. package/dist/ts3.9/blocks/Stories.d.ts +0 -7
  152. package/dist/ts3.9/blocks/Story.d.ts +0 -28
  153. package/dist/ts3.9/blocks/Subheading.d.ts +0 -3
  154. package/dist/ts3.9/blocks/Subtitle.d.ts +0 -6
  155. package/dist/ts3.9/blocks/Title.d.ts +0 -8
  156. package/dist/ts3.9/blocks/Wrapper.d.ts +0 -2
  157. package/dist/ts3.9/blocks/enhanceSource.d.ts +0 -3
  158. package/dist/ts3.9/blocks/index.d.ts +0 -24
  159. package/dist/ts3.9/blocks/mdx.d.ts +0 -20
  160. package/dist/ts3.9/blocks/types.d.ts +0 -13
  161. package/dist/ts3.9/blocks/useStory.d.ts +0 -5
  162. package/dist/ts3.9/blocks/utils.d.ts +0 -3
  163. package/dist/ts3.9/preview.d.ts +0 -6
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
- import { H3 } from '@storybook/components';
3
- import { HeaderMdx } from './mdx';
4
- export const Subheading = ({
5
- children,
6
- disableAnchor
7
- }) => {
8
- if (disableAnchor || typeof children !== 'string') {
9
- return /*#__PURE__*/React.createElement(H3, null, children);
10
- }
11
-
12
- const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
13
- return /*#__PURE__*/React.createElement(HeaderMdx, {
14
- as: "h3",
15
- id: tagID
16
- }, children);
17
- };
@@ -1,23 +0,0 @@
1
- import React, { useContext } from 'react';
2
- import { Subtitle as PureSubtitle } from '@storybook/components';
3
- import { DocsContext } from './DocsContext';
4
- export const Subtitle = ({
5
- children
6
- }) => {
7
- const {
8
- id,
9
- storyById
10
- } = useContext(DocsContext);
11
- const {
12
- parameters
13
- } = storyById(id);
14
- let text = children;
15
-
16
- if (!text) {
17
- text = parameters === null || parameters === void 0 ? void 0 : parameters.componentSubtitle;
18
- }
19
-
20
- return text ? /*#__PURE__*/React.createElement(PureSubtitle, {
21
- className: "sbdocs-subtitle"
22
- }, text) : null;
23
- };
@@ -1,24 +0,0 @@
1
- import React, { useContext } from 'react';
2
- import { Title as PureTitle } from '@storybook/components';
3
- import { DocsContext } from './DocsContext';
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);
9
- return groups && groups[groups.length - 1] || title;
10
- };
11
- export const Title = ({
12
- children
13
- }) => {
14
- const context = useContext(DocsContext);
15
- let text = children;
16
-
17
- if (!text) {
18
- text = extractTitle(context);
19
- }
20
-
21
- return text ? /*#__PURE__*/React.createElement(PureTitle, {
22
- className: "sbdocs-title"
23
- }, text) : null;
24
- };
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- export const Wrapper = ({
3
- children
4
- }) => /*#__PURE__*/React.createElement("div", {
5
- style: {
6
- fontFamily: 'sans-serif'
7
- }
8
- }, children);
@@ -1,89 +0,0 @@
1
- import { combineParameters } from '@storybook/store'; // ============================================================
2
- // START @storybook/source-loader/extract-source
3
- //
4
- // This code duplicated because tree-shaking isn't working.
5
- // It's not DRY, but source-loader is on the chopping block for
6
- // the next version of addon-docs, so it's not the worst sin.
7
- // ============================================================
8
-
9
- /**
10
- * given a location, extract the text from the full source
11
- */
12
- function extractSource(location, lines) {
13
- const {
14
- startBody: start,
15
- endBody: end
16
- } = location;
17
-
18
- if (start.line === end.line && lines[start.line - 1] !== undefined) {
19
- return lines[start.line - 1].substring(start.col, end.col);
20
- } // NOTE: storysource locations are 1-based not 0-based!
21
-
22
-
23
- const startLine = lines[start.line - 1];
24
- const endLine = lines[end.line - 1];
25
-
26
- if (startLine === undefined || endLine === undefined) {
27
- return null;
28
- }
29
-
30
- return [startLine.substring(start.col), ...lines.slice(start.line, end.line - 1), endLine.substring(0, end.col)].join('\n');
31
- } // ============================================================
32
- // END @storybook/source-loader/extract-source
33
- // ============================================================
34
-
35
-
36
- /**
37
- * Replaces full story id name like: story-kind--story-name -> story-name
38
- * @param id
39
- */
40
- const storyIdToSanitizedStoryName = id => id.replace(/^.*?--/, '');
41
-
42
- const extract = (targetId, {
43
- source,
44
- locationsMap
45
- }) => {
46
- if (!locationsMap) {
47
- return source;
48
- }
49
-
50
- const sanitizedStoryName = storyIdToSanitizedStoryName(targetId);
51
- const location = locationsMap[sanitizedStoryName];
52
-
53
- if (!location) {
54
- return source;
55
- }
56
-
57
- const lines = source.split('\n');
58
- return extractSource(location, lines);
59
- };
60
-
61
- export const enhanceSource = story => {
62
- var _docs$source;
63
-
64
- const {
65
- id,
66
- parameters
67
- } = story;
68
- const {
69
- storySource,
70
- docs = {}
71
- } = parameters;
72
- const {
73
- transformSource
74
- } = docs; // no input or user has manually overridden the output
75
-
76
- if (!(storySource !== null && storySource !== void 0 && storySource.source) || (_docs$source = docs.source) !== null && _docs$source !== void 0 && _docs$source.code) {
77
- return null;
78
- }
79
-
80
- const input = extract(id, storySource);
81
- const code = transformSource ? transformSource(input, story) : input;
82
- return {
83
- docs: combineParameters(docs, {
84
- source: {
85
- code
86
- }
87
- })
88
- };
89
- };
@@ -1,24 +0,0 @@
1
- export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
2
- export * from './Anchor';
3
- export * from './ArgsTable';
4
- export * from './Canvas';
5
- export * from './Description';
6
- export * from './DocsContext';
7
- export * from './DocsPage';
8
- export * from './DocsContainer';
9
- export * from './DocsStory';
10
- export * from './Heading';
11
- export * from './Meta';
12
- export * from './Preview';
13
- export * from './Primary';
14
- export * from './Props';
15
- export * from './Source';
16
- export * from './SourceContainer';
17
- export * from './Stories';
18
- export * from './Story';
19
- export * from './Subheading';
20
- export * from './Subtitle';
21
- export * from './Title';
22
- export * from './Wrapper';
23
- export * from './types';
24
- export * from './mdx';
@@ -1,204 +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
- import "core-js/modules/es.array.reduce.js";
7
-
8
- 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); }
9
-
10
- 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; }
11
-
12
- import React from 'react';
13
- import { addons } from '@storybook/addons';
14
- import { NAVIGATE_URL } from '@storybook/core-events';
15
- import { Source, Code, components } from '@storybook/components';
16
- import global from 'global';
17
- import { styled } from '@storybook/theming';
18
- import { DocsContext } from './DocsContext';
19
- const {
20
- document
21
- } = global; // Hacky utility for asserting identifiers in MDX Story elements
22
-
23
- export const assertIsFn = val => {
24
- if (typeof val !== 'function') {
25
- throw new Error(`Expected story function, got: ${val}`);
26
- }
27
-
28
- return val;
29
- }; // Hacky utility for adding mdxStoryToId to the default context
30
-
31
- export const AddContext = props => {
32
- const {
33
- children
34
- } = props,
35
- rest = _objectWithoutPropertiesLoose(props, _excluded);
36
-
37
- const parentContext = React.useContext(DocsContext);
38
- return /*#__PURE__*/React.createElement(DocsContext.Provider, {
39
- value: Object.assign({}, parentContext, rest)
40
- }, children);
41
- };
42
- export const CodeOrSourceMdx = _ref => {
43
- let {
44
- className,
45
- children
46
- } = _ref,
47
- rest = _objectWithoutPropertiesLoose(_ref, _excluded2);
48
-
49
- // markdown-to-jsx does not add className to inline code
50
- if (typeof className !== 'string' && (typeof children !== 'string' || !children.match(/[\n\r]/g))) {
51
- return /*#__PURE__*/React.createElement(Code, null, children);
52
- } // className: "lang-jsx"
53
-
54
-
55
- const language = className && className.split('-');
56
- return /*#__PURE__*/React.createElement(Source, _extends({
57
- language: language && language[1] || 'plaintext',
58
- format: false,
59
- code: children
60
- }, rest));
61
- };
62
-
63
- function navigate(url) {
64
- addons.getChannel().emit(NAVIGATE_URL, url);
65
- } // @ts-ignore
66
-
67
-
68
- const A = components.a;
69
-
70
- const AnchorInPage = ({
71
- hash,
72
- children
73
- }) => /*#__PURE__*/React.createElement(A, {
74
- href: hash,
75
- target: "_self",
76
- onClick: event => {
77
- const id = hash.substring(1);
78
- const element = document.getElementById(id);
79
-
80
- if (element) {
81
- navigate(hash);
82
- }
83
- }
84
- }, children);
85
-
86
- export const AnchorMdx = props => {
87
- const {
88
- href,
89
- target,
90
- children
91
- } = props,
92
- rest = _objectWithoutPropertiesLoose(props, _excluded3);
93
-
94
- if (href) {
95
- // Enable scrolling for in-page anchors.
96
- if (href.startsWith('#')) {
97
- return /*#__PURE__*/React.createElement(AnchorInPage, {
98
- hash: href
99
- }, children);
100
- } // 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.
101
-
102
-
103
- if (target !== '_blank' && !href.startsWith('https://')) {
104
- return /*#__PURE__*/React.createElement(A, _extends({
105
- href: href,
106
- onClick: event => {
107
- event.preventDefault(); // use the A element's href, which has been modified for
108
- // local paths without a `?path=` query param prefix
109
-
110
- navigate(event.currentTarget.getAttribute('href'));
111
- },
112
- target: target
113
- }, rest), children);
114
- }
115
- } // External URL dont need any modification.
116
-
117
-
118
- return /*#__PURE__*/React.createElement(A, props);
119
- };
120
- const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
121
- const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce((acc, headerType) => Object.assign({}, acc, {
122
- // @ts-ignore
123
- [headerType]: styled(components[headerType])({
124
- '& svg': {
125
- visibility: 'hidden'
126
- },
127
- '&:hover svg': {
128
- visibility: 'visible'
129
- }
130
- })
131
- }), {});
132
- const OcticonAnchor = styled.a(() => ({
133
- float: 'left',
134
- paddingRight: '4px',
135
- marginLeft: '-20px',
136
- // Allow the theme's text color to override the default link color.
137
- color: 'inherit'
138
- }));
139
-
140
- const HeaderWithOcticonAnchor = _ref2 => {
141
- let {
142
- as,
143
- id,
144
- children
145
- } = _ref2,
146
- rest = _objectWithoutPropertiesLoose(_ref2, _excluded4);
147
-
148
- // @ts-ignore
149
- const OcticonHeader = OcticonHeaders[as];
150
- const hash = `#${id}`;
151
- return /*#__PURE__*/React.createElement(OcticonHeader, _extends({
152
- id: id
153
- }, rest), /*#__PURE__*/React.createElement(OcticonAnchor, {
154
- "aria-hidden": "true",
155
- href: hash,
156
- tabIndex: -1,
157
- target: "_self",
158
- onClick: event => {
159
- const element = document.getElementById(id);
160
-
161
- if (element) {
162
- navigate(hash);
163
- }
164
- }
165
- }, /*#__PURE__*/React.createElement("svg", {
166
- viewBox: "0 0 16 16",
167
- version: "1.1",
168
- width: "16",
169
- height: "16",
170
- "aria-hidden": "true",
171
- fill: "currentColor"
172
- }, /*#__PURE__*/React.createElement("path", {
173
- fillRule: "evenodd",
174
- 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"
175
- }))), children);
176
- };
177
-
178
- export const HeaderMdx = props => {
179
- const {
180
- as,
181
- id,
182
- children
183
- } = props,
184
- rest = _objectWithoutPropertiesLoose(props, _excluded5); // An id should have been added on every header by the "remark-slug" plugin.
185
-
186
-
187
- if (id) {
188
- return /*#__PURE__*/React.createElement(HeaderWithOcticonAnchor, _extends({
189
- as: as,
190
- id: id
191
- }, rest), children);
192
- } // @ts-ignore
193
-
194
-
195
- const Header = components[as]; // Make sure it still work if "remark-slug" plugin is not present.
196
-
197
- return /*#__PURE__*/React.createElement(Header, props);
198
- };
199
- export const HeadersMdx = SUPPORTED_MDX_HEADERS.reduce((acc, headerType) => Object.assign({}, acc, {
200
- // @ts-ignore
201
- [headerType]: props => /*#__PURE__*/React.createElement(HeaderMdx, _extends({
202
- as: headerType
203
- }, props))
204
- }), {});
@@ -1,2 +0,0 @@
1
- export const CURRENT_SELECTION = '.';
2
- export const PRIMARY_STORY = '^';
@@ -1,28 +0,0 @@
1
- import "core-js/modules/es.array.reduce.js";
2
- import { useState, useEffect } from 'react';
3
- export function useStory(storyId, context) {
4
- const stories = useStories([storyId], context);
5
- return stories && stories[0];
6
- }
7
- export function useStories(storyIds, context) {
8
- const initialStoriesById = context.componentStories().reduce((acc, story) => {
9
- acc[story.id] = story;
10
- return acc;
11
- }, {});
12
- const [storiesById, setStories] = useState(initialStoriesById);
13
- useEffect(() => {
14
- Promise.all(storyIds.map(async storyId => {
15
- // loadStory will be called every single time useStory is called
16
- // because useEffect does not use storyIds as an input. This is because
17
- // HMR can change the story even when the storyId hasn't changed. However, it
18
- // will be a no-op once the story has loaded. Furthermore, the `story` will
19
- // have an exact equality when the story hasn't changed, so it won't trigger
20
- // any unnecessary re-renders
21
- const story = await context.loadStory(storyId);
22
- setStories(current => current[storyId] === story ? current : Object.assign({}, current, {
23
- [storyId]: story
24
- }));
25
- }));
26
- });
27
- return storyIds.map(storyId => storiesById[storyId]);
28
- }
@@ -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
- }
@@ -1 +0,0 @@
1
- export * from './blocks';
@@ -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
- });
@@ -1,130 +0,0 @@
1
- import path from 'path';
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'; // for frameworks that are not working with react, we need to configure
6
- // the jsx to transpile mdx, for now there will be a flag for that
7
- // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
8
-
9
- function createBabelOptions({
10
- babelOptions,
11
- mdxBabelOptions,
12
- configureJSX
13
- }) {
14
- const babelPlugins = (mdxBabelOptions === null || mdxBabelOptions === void 0 ? void 0 : mdxBabelOptions.plugins) || (babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) || [];
15
- const jsxPlugin = [require.resolve('@babel/plugin-transform-react-jsx'), {
16
- pragma: 'React.createElement',
17
- pragmaFrag: 'React.Fragment'
18
- }];
19
- const plugins = configureJSX ? [...babelPlugins, jsxPlugin] : babelPlugins;
20
- return Object.assign({
21
- // don't use the root babelrc by default (users can override this in mdxBabelOptions)
22
- babelrc: false,
23
- configFile: false
24
- }, babelOptions, mdxBabelOptions, {
25
- plugins
26
- });
27
- }
28
-
29
- export async function webpack(webpackConfig = {}, options) {
30
- var _global$FEATURES, _global$FEATURES2;
31
-
32
- const resolvedBabelLoader = require.resolve('babel-loader');
33
-
34
- const {
35
- module = {}
36
- } = webpackConfig; // it will reuse babel options that are already in use in storybook
37
- // also, these babel options are chained with other presets.
38
-
39
- const {
40
- babelOptions,
41
- mdxBabelOptions,
42
- configureJSX = true,
43
- sourceLoaderOptions = {
44
- injectStoryParameters: true
45
- },
46
- transcludeMarkdown = false
47
- } = options;
48
- const mdxLoaderOptions = {
49
- skipCsf: true,
50
- remarkPlugins: [remarkSlug, remarkExternalLinks]
51
- };
52
- const mdxVersion = (_global$FEATURES = global.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.previewMdx2 ? 'MDX2' : 'MDX1';
53
- logger.info(`Addon-docs: using ${mdxVersion}`);
54
- const mdxLoader = (_global$FEATURES2 = global.FEATURES) !== null && _global$FEATURES2 !== void 0 && _global$FEATURES2.previewMdx2 ? require.resolve('@storybook/mdx2-csf/loader') : require.resolve('@storybook/mdx1-csf/loader'); // set `sourceLoaderOptions` to `null` to disable for manual configuration
55
-
56
- const sourceLoader = sourceLoaderOptions ? [{
57
- test: /\.(stories|story)\.[tj]sx?$/,
58
- loader: require.resolve('@storybook/source-loader'),
59
- options: Object.assign({}, sourceLoaderOptions, {
60
- inspectLocalDependencies: true
61
- }),
62
- enforce: 'pre'
63
- }] : [];
64
- let rules = module.rules || [];
65
-
66
- if (transcludeMarkdown) {
67
- rules = [...rules.filter(rule => {
68
- var _rule$test;
69
-
70
- return ((_rule$test = rule.test) === null || _rule$test === void 0 ? void 0 : _rule$test.toString()) !== '/\\.md$/';
71
- }), {
72
- test: /\.md$/,
73
- use: [{
74
- loader: resolvedBabelLoader,
75
- options: createBabelOptions({
76
- babelOptions,
77
- mdxBabelOptions,
78
- configureJSX
79
- })
80
- }, {
81
- loader: mdxLoader,
82
- options: mdxLoaderOptions
83
- }]
84
- }];
85
- }
86
-
87
- const result = Object.assign({}, webpackConfig, {
88
- module: Object.assign({}, module, {
89
- rules: [...rules, {
90
- test: /\.js$/,
91
- include: new RegExp(`node_modules\\${path.sep}acorn-jsx`),
92
- use: [{
93
- loader: resolvedBabelLoader,
94
- options: {
95
- presets: [[require.resolve('@babel/preset-env'), {
96
- modules: 'commonjs'
97
- }]]
98
- }
99
- }]
100
- }, {
101
- test: /(stories|story)\.mdx$/,
102
- use: [{
103
- loader: resolvedBabelLoader,
104
- options: createBabelOptions({
105
- babelOptions,
106
- mdxBabelOptions,
107
- configureJSX
108
- })
109
- }, {
110
- loader: mdxLoader
111
- }]
112
- }, {
113
- test: /\.mdx$/,
114
- exclude: /(stories|story)\.mdx$/,
115
- use: [{
116
- loader: resolvedBabelLoader,
117
- options: createBabelOptions({
118
- babelOptions,
119
- mdxBabelOptions,
120
- configureJSX
121
- })
122
- }, {
123
- loader: mdxLoader,
124
- options: mdxLoaderOptions
125
- }]
126
- }, ...sourceLoader]
127
- })
128
- });
129
- return result;
130
- }
@@ -1,6 +0,0 @@
1
- export const parameters = {
2
- docs: {
3
- getContainer: async () => (await import('./blocks')).DocsContainer,
4
- getPage: async () => (await import('./blocks')).DocsPage
5
- }
6
- };
@@ -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,6 +0,0 @@
1
- import { FC } from 'react';
2
- export declare const anchorBlockIdFromId: (storyId: string) => string;
3
- export interface AnchorProps {
4
- storyId: string;
5
- }
6
- export declare const Anchor: FC<AnchorProps>;
@@ -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>;