@storybook/addon-links 10.1.0-alpha.9 → 10.1.0-beta.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/dist/_browser-chunks/{chunk-D24LJQWS.js → chunk-FX5LXYO2.js} +2 -6
- package/dist/_browser-chunks/chunk-LAYPZ6CY.js +46 -0
- package/dist/_browser-chunks/{chunk-76WYWG2V.js → chunk-PZ2KFUGG.js} +4 -5
- package/dist/index.js +3 -3
- package/dist/manager.js +2 -2
- package/dist/preview.js +3 -3
- package/dist/react/index.js +17 -32
- package/package.json +3 -3
- package/dist/_browser-chunks/chunk-5NYAPMFO.js +0 -91
|
@@ -1,21 +1,17 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
2
|
var __export = (target, all) => {
|
|
4
3
|
for (var name in all)
|
|
5
|
-
__defProp(target, name, { get: all[name], enumerable:
|
|
4
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
6
5
|
};
|
|
7
6
|
|
|
8
7
|
// src/constants.ts
|
|
9
|
-
var ADDON_ID = "storybook/links"
|
|
10
|
-
var PARAM_KEY = `links`;
|
|
11
|
-
var constants_default = {
|
|
8
|
+
var ADDON_ID = "storybook/links", PARAM_KEY = "links", constants_default = {
|
|
12
9
|
NAVIGATE: `${ADDON_ID}/navigate`,
|
|
13
10
|
REQUEST: `${ADDON_ID}/request`,
|
|
14
11
|
RECEIVE: `${ADDON_ID}/receive`
|
|
15
12
|
};
|
|
16
13
|
|
|
17
14
|
export {
|
|
18
|
-
__name,
|
|
19
15
|
__export,
|
|
20
16
|
ADDON_ID,
|
|
21
17
|
PARAM_KEY,
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import {
|
|
2
|
+
PARAM_KEY
|
|
3
|
+
} from "./chunk-FX5LXYO2.js";
|
|
4
|
+
|
|
5
|
+
// src/utils.ts
|
|
6
|
+
import { SELECT_STORY, STORY_CHANGED } from "storybook/internal/core-events";
|
|
7
|
+
import { toId } from "storybook/internal/csf";
|
|
8
|
+
import { global } from "@storybook/global";
|
|
9
|
+
import { addons, makeDecorator } from "storybook/preview-api";
|
|
10
|
+
var { document, HTMLElement } = global;
|
|
11
|
+
function parseQuery(queryString) {
|
|
12
|
+
let query = {}, pairs = (queryString[0] === "?" ? queryString.substring(1) : queryString).split("&").filter(Boolean);
|
|
13
|
+
for (let i = 0; i < pairs.length; i++) {
|
|
14
|
+
let pair = pairs[i].split("=");
|
|
15
|
+
query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || "");
|
|
16
|
+
}
|
|
17
|
+
return query;
|
|
18
|
+
}
|
|
19
|
+
var navigate = (params) => addons.getChannel().emit(SELECT_STORY, params), hrefTo = (title, name) => new Promise((resolve) => {
|
|
20
|
+
let { location } = document, existingId = parseQuery(location.search).id, titleToLink = title || existingId.split("--", 2)[0], path = `/story/${toId(titleToLink, name)}`, sbPath = location.pathname.replace(/iframe\.html$/, ""), url = `${location.origin + sbPath}?${Object.entries({ path }).map((item) => `${item[0]}=${item[1]}`).join("&")}`;
|
|
21
|
+
resolve(url);
|
|
22
|
+
}), valueOrCall = (args) => (value) => typeof value == "function" ? value(...args) : value, linkTo = (idOrTitle, nameInput) => (...args) => {
|
|
23
|
+
let resolver = valueOrCall(args), title = resolver(idOrTitle), name = nameInput ? resolver(nameInput) : !1;
|
|
24
|
+
title?.match(/--/) && !name ? navigate({ storyId: title }) : name && title ? navigate({ kind: title, story: name }) : title ? navigate({ kind: title }) : name && navigate({ story: name });
|
|
25
|
+
}, linksListener = (e) => {
|
|
26
|
+
let { target } = e;
|
|
27
|
+
if (!(target instanceof HTMLElement))
|
|
28
|
+
return;
|
|
29
|
+
let element = target, { sbKind: kind, sbStory: story } = element.dataset;
|
|
30
|
+
(kind || story) && (e.preventDefault(), navigate({ kind, story }));
|
|
31
|
+
}, hasListener = !1, on = () => {
|
|
32
|
+
hasListener || (hasListener = !0, document.addEventListener("click", linksListener));
|
|
33
|
+
}, off = () => {
|
|
34
|
+
hasListener && (hasListener = !1, document.removeEventListener("click", linksListener));
|
|
35
|
+
}, withLinks = makeDecorator({
|
|
36
|
+
name: "withLinks",
|
|
37
|
+
parameterName: PARAM_KEY,
|
|
38
|
+
wrapper: (getStory, context) => (on(), addons.getChannel().once(STORY_CHANGED, off), getStory(context))
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
export {
|
|
42
|
+
navigate,
|
|
43
|
+
hrefTo,
|
|
44
|
+
linkTo,
|
|
45
|
+
withLinks
|
|
46
|
+
};
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
withLinks
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-LAYPZ6CY.js";
|
|
4
4
|
import {
|
|
5
|
-
__export
|
|
6
|
-
|
|
7
|
-
} from "./chunk-D24LJQWS.js";
|
|
5
|
+
__export
|
|
6
|
+
} from "./chunk-FX5LXYO2.js";
|
|
8
7
|
|
|
9
8
|
// src/preview.ts
|
|
10
9
|
var preview_exports = {};
|
|
@@ -14,7 +13,7 @@ __export(preview_exports, {
|
|
|
14
13
|
|
|
15
14
|
// src/index.ts
|
|
16
15
|
import { definePreviewAddon } from "storybook/internal/csf";
|
|
17
|
-
var index_default =
|
|
16
|
+
var index_default = () => definePreviewAddon(preview_exports);
|
|
18
17
|
|
|
19
18
|
// src/preview.ts
|
|
20
19
|
var decorators = [withLinks];
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
2
|
index_default
|
|
3
|
-
} from "./_browser-chunks/chunk-
|
|
3
|
+
} from "./_browser-chunks/chunk-PZ2KFUGG.js";
|
|
4
4
|
import {
|
|
5
5
|
hrefTo,
|
|
6
6
|
linkTo,
|
|
7
7
|
navigate,
|
|
8
8
|
withLinks
|
|
9
|
-
} from "./_browser-chunks/chunk-
|
|
10
|
-
import "./_browser-chunks/chunk-
|
|
9
|
+
} from "./_browser-chunks/chunk-LAYPZ6CY.js";
|
|
10
|
+
import "./_browser-chunks/chunk-FX5LXYO2.js";
|
|
11
11
|
export {
|
|
12
12
|
index_default as default,
|
|
13
13
|
hrefTo,
|
package/dist/manager.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
2
|
ADDON_ID,
|
|
3
3
|
constants_default
|
|
4
|
-
} from "./_browser-chunks/chunk-
|
|
4
|
+
} from "./_browser-chunks/chunk-FX5LXYO2.js";
|
|
5
5
|
|
|
6
6
|
// src/manager.ts
|
|
7
7
|
import { addons } from "storybook/manager-api";
|
|
8
8
|
addons.register(ADDON_ID, (api) => {
|
|
9
9
|
api.on(constants_default.REQUEST, ({ kind, name }) => {
|
|
10
|
-
|
|
10
|
+
let id = api.storyId(kind, name);
|
|
11
11
|
api.emit(constants_default.RECEIVE, id);
|
|
12
12
|
});
|
|
13
13
|
});
|
package/dist/preview.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
decorators
|
|
3
|
-
} from "./_browser-chunks/chunk-
|
|
4
|
-
import "./_browser-chunks/chunk-
|
|
5
|
-
import "./_browser-chunks/chunk-
|
|
3
|
+
} from "./_browser-chunks/chunk-PZ2KFUGG.js";
|
|
4
|
+
import "./_browser-chunks/chunk-LAYPZ6CY.js";
|
|
5
|
+
import "./_browser-chunks/chunk-FX5LXYO2.js";
|
|
6
6
|
export {
|
|
7
7
|
decorators
|
|
8
8
|
};
|
package/dist/react/index.js
CHANGED
|
@@ -1,62 +1,47 @@
|
|
|
1
1
|
import {
|
|
2
2
|
hrefTo,
|
|
3
3
|
navigate
|
|
4
|
-
} from "../_browser-chunks/chunk-
|
|
5
|
-
import
|
|
6
|
-
__name
|
|
7
|
-
} from "../_browser-chunks/chunk-D24LJQWS.js";
|
|
4
|
+
} from "../_browser-chunks/chunk-LAYPZ6CY.js";
|
|
5
|
+
import "../_browser-chunks/chunk-FX5LXYO2.js";
|
|
8
6
|
|
|
9
7
|
// src/react/components/link.tsx
|
|
10
8
|
import React, { PureComponent } from "react";
|
|
11
|
-
var LEFT_BUTTON = 0
|
|
12
|
-
var isPlainLeftClick = /* @__PURE__ */ __name((e) => e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey, "isPlainLeftClick");
|
|
13
|
-
var cancelled = /* @__PURE__ */ __name((e, cb = (_e) => {
|
|
9
|
+
var LEFT_BUTTON = 0, isPlainLeftClick = (e) => e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey, cancelled = (e, cb = (_e) => {
|
|
14
10
|
}) => {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
cb(e);
|
|
18
|
-
}
|
|
19
|
-
}, "cancelled");
|
|
20
|
-
var _LinkTo = class _LinkTo extends PureComponent {
|
|
11
|
+
isPlainLeftClick(e) && (e.preventDefault(), cb(e));
|
|
12
|
+
}, LinkTo = class extends PureComponent {
|
|
21
13
|
constructor() {
|
|
22
14
|
super(...arguments);
|
|
23
15
|
this.state = {
|
|
24
16
|
href: "/"
|
|
25
17
|
};
|
|
26
|
-
this.updateHref =
|
|
27
|
-
|
|
18
|
+
this.updateHref = async () => {
|
|
19
|
+
let { kind, title = kind, story, name = story } = this.props;
|
|
28
20
|
if (title && name) {
|
|
29
|
-
|
|
21
|
+
let href = await hrefTo(title, name);
|
|
30
22
|
this.setState({ href });
|
|
31
23
|
}
|
|
32
|
-
}
|
|
33
|
-
this.handleClick =
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
}, "handleClick");
|
|
24
|
+
};
|
|
25
|
+
this.handleClick = () => {
|
|
26
|
+
let { kind, title = kind, story, name = story } = this.props;
|
|
27
|
+
title && name && navigate({ title, name });
|
|
28
|
+
};
|
|
39
29
|
}
|
|
40
30
|
componentDidMount() {
|
|
41
31
|
this.updateHref();
|
|
42
32
|
}
|
|
43
33
|
componentDidUpdate(prevProps) {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
this.updateHref();
|
|
47
|
-
}
|
|
34
|
+
let { kind, title, story, name } = this.props;
|
|
35
|
+
(prevProps.kind !== kind || prevProps.story !== story || prevProps.title !== title || prevProps.name !== name) && this.updateHref();
|
|
48
36
|
}
|
|
49
37
|
render() {
|
|
50
|
-
|
|
51
|
-
const { href } = this.state;
|
|
38
|
+
let { kind, title = kind, story, name = story, children, ...rest } = this.props, { href } = this.state;
|
|
52
39
|
return React.createElement("a", { href, onClick: (e) => cancelled(e, this.handleClick), ...rest }, children);
|
|
53
40
|
}
|
|
54
41
|
};
|
|
55
|
-
|
|
56
|
-
_LinkTo.defaultProps = {
|
|
42
|
+
LinkTo.defaultProps = {
|
|
57
43
|
children: void 0
|
|
58
44
|
};
|
|
59
|
-
var LinkTo = _LinkTo;
|
|
60
45
|
|
|
61
46
|
// src/react/index.ts
|
|
62
47
|
var react_default = LinkTo;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-links",
|
|
3
|
-
"version": "10.1.0-
|
|
3
|
+
"version": "10.1.0-beta.1",
|
|
4
4
|
"description": "Storybook Links: Link stories together to build demos and prototypes with your UI components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
63
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
64
|
-
"storybook": "^10.1.0-
|
|
64
|
+
"storybook": "^10.1.0-beta.1"
|
|
65
65
|
},
|
|
66
66
|
"peerDependenciesMeta": {
|
|
67
67
|
"react": {
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"publishConfig": {
|
|
72
72
|
"access": "public"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae1l",
|
|
75
75
|
"storybook": {
|
|
76
76
|
"displayName": "Links",
|
|
77
77
|
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
PARAM_KEY,
|
|
3
|
-
__name
|
|
4
|
-
} from "./chunk-D24LJQWS.js";
|
|
5
|
-
|
|
6
|
-
// src/utils.ts
|
|
7
|
-
import { SELECT_STORY, STORY_CHANGED } from "storybook/internal/core-events";
|
|
8
|
-
import { toId } from "storybook/internal/csf";
|
|
9
|
-
import { global } from "@storybook/global";
|
|
10
|
-
import { addons, makeDecorator } from "storybook/preview-api";
|
|
11
|
-
var { document, HTMLElement } = global;
|
|
12
|
-
function parseQuery(queryString) {
|
|
13
|
-
const query = {};
|
|
14
|
-
const pairs = (queryString[0] === "?" ? queryString.substring(1) : queryString).split("&").filter(Boolean);
|
|
15
|
-
for (let i = 0; i < pairs.length; i++) {
|
|
16
|
-
const pair = pairs[i].split("=");
|
|
17
|
-
query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || "");
|
|
18
|
-
}
|
|
19
|
-
return query;
|
|
20
|
-
}
|
|
21
|
-
__name(parseQuery, "parseQuery");
|
|
22
|
-
var navigate = /* @__PURE__ */ __name((params) => addons.getChannel().emit(SELECT_STORY, params), "navigate");
|
|
23
|
-
var hrefTo = /* @__PURE__ */ __name((title, name) => {
|
|
24
|
-
return new Promise((resolve) => {
|
|
25
|
-
const { location } = document;
|
|
26
|
-
const query = parseQuery(location.search);
|
|
27
|
-
const existingId = query.id;
|
|
28
|
-
const titleToLink = title || existingId.split("--", 2)[0];
|
|
29
|
-
const id = toId(titleToLink, name);
|
|
30
|
-
const path = `/story/${id}`;
|
|
31
|
-
const sbPath = location.pathname.replace(/iframe\.html$/, "");
|
|
32
|
-
const url = `${location.origin + sbPath}?${Object.entries({ path }).map((item) => `${item[0]}=${item[1]}`).join("&")}`;
|
|
33
|
-
resolve(url);
|
|
34
|
-
});
|
|
35
|
-
}, "hrefTo");
|
|
36
|
-
var valueOrCall = /* @__PURE__ */ __name((args) => (value) => typeof value === "function" ? value(...args) : value, "valueOrCall");
|
|
37
|
-
var linkTo = /* @__PURE__ */ __name((idOrTitle, nameInput) => (...args) => {
|
|
38
|
-
const resolver = valueOrCall(args);
|
|
39
|
-
const title = resolver(idOrTitle);
|
|
40
|
-
const name = nameInput ? resolver(nameInput) : false;
|
|
41
|
-
if (title?.match(/--/) && !name) {
|
|
42
|
-
navigate({ storyId: title });
|
|
43
|
-
} else if (name && title) {
|
|
44
|
-
navigate({ kind: title, story: name });
|
|
45
|
-
} else if (title) {
|
|
46
|
-
navigate({ kind: title });
|
|
47
|
-
} else if (name) {
|
|
48
|
-
navigate({ story: name });
|
|
49
|
-
}
|
|
50
|
-
}, "linkTo");
|
|
51
|
-
var linksListener = /* @__PURE__ */ __name((e) => {
|
|
52
|
-
const { target } = e;
|
|
53
|
-
if (!(target instanceof HTMLElement)) {
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
const element = target;
|
|
57
|
-
const { sbKind: kind, sbStory: story } = element.dataset;
|
|
58
|
-
if (kind || story) {
|
|
59
|
-
e.preventDefault();
|
|
60
|
-
navigate({ kind, story });
|
|
61
|
-
}
|
|
62
|
-
}, "linksListener");
|
|
63
|
-
var hasListener = false;
|
|
64
|
-
var on = /* @__PURE__ */ __name(() => {
|
|
65
|
-
if (!hasListener) {
|
|
66
|
-
hasListener = true;
|
|
67
|
-
document.addEventListener("click", linksListener);
|
|
68
|
-
}
|
|
69
|
-
}, "on");
|
|
70
|
-
var off = /* @__PURE__ */ __name(() => {
|
|
71
|
-
if (hasListener) {
|
|
72
|
-
hasListener = false;
|
|
73
|
-
document.removeEventListener("click", linksListener);
|
|
74
|
-
}
|
|
75
|
-
}, "off");
|
|
76
|
-
var withLinks = makeDecorator({
|
|
77
|
-
name: "withLinks",
|
|
78
|
-
parameterName: PARAM_KEY,
|
|
79
|
-
wrapper: /* @__PURE__ */ __name((getStory, context) => {
|
|
80
|
-
on();
|
|
81
|
-
addons.getChannel().once(STORY_CHANGED, off);
|
|
82
|
-
return getStory(context);
|
|
83
|
-
}, "wrapper")
|
|
84
|
-
});
|
|
85
|
-
|
|
86
|
-
export {
|
|
87
|
-
navigate,
|
|
88
|
-
hrefTo,
|
|
89
|
-
linkTo,
|
|
90
|
-
withLinks
|
|
91
|
-
};
|