Launch Week Day 5: Introducing Reachability for PHP.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@storybook/addon-links

Package Overview
Dependencies
Maintainers
12
Versions
3162
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/addon-links - npm Package Compare versions

Comparing version
0.0.0-pr-34008-sha-fc2f9bf0
 to
0.0.0-pr-34009-sha-c90626e7
+8
dist/chunk-DQW2J2JG.mjs
import { STORY_CHANGED, SELECT_STORY } from 'storybook/internal/core-events';
import { toId } from 'storybook/internal/csf';
import { makeDecorator, addons } from 'storybook/internal/preview-api';
import { global } from '@storybook/global';
var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var PARAM_KEY="links";var{document,HTMLElement}=global;function parseQuery(queryString){let query={},pairs=(queryString[0]==="?"?queryString.substring(1):queryString).split("&").filter(Boolean);for(let i=0;i<pairs.length;i++){let pair=pairs[i].split("=");query[decodeURIComponent(pair[0])]=decodeURIComponent(pair[1]||"");}return query}var navigate=params=>addons.getChannel().emit(SELECT_STORY,params),hrefTo=(title,name)=>new Promise(resolve=>{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("&")}`;resolve(url);}),valueOrCall=args=>value=>typeof value=="function"?value(...args):value,linkTo=(idOrTitle,nameInput)=>(...args)=>{let resolver=valueOrCall(args),title=resolver(idOrTitle),name=nameInput?resolver(nameInput):!1;title?.match(/--/)&&!name?navigate({storyId:title}):name&&title?navigate({kind:title,story:name}):title?navigate({kind:title}):name&&navigate({story:name});},linksListener=e=>{let{target}=e;if(!(target instanceof HTMLElement))return;let element=target,{sbKind:kind,sbStory:story}=element.dataset;(kind||story)&&(e.preventDefault(),navigate({kind,story}));},hasListener=!1,on=()=>{hasListener||(hasListener=!0,document.addEventListener("click",linksListener));},off=()=>{hasListener&&(hasListener=!1,document.removeEventListener("click",linksListener));},withLinks=makeDecorator({name:"withLinks",parameterName:PARAM_KEY,wrapper:(getStory,context)=>(on(),addons.getChannel().once(STORY_CHANGED,off),getStory(context))});
export { __export, hrefTo, linkTo, navigate, withLinks };
+7
dist/index.mjs
import { __export, withLinks } from './chunk-DQW2J2JG.mjs';
export { hrefTo, linkTo, navigate, withLinks } from './chunk-DQW2J2JG.mjs';
import { definePreview } from 'storybook/internal/preview-api';
var preview_exports={};__export(preview_exports,{decorators:()=>decorators});var decorators=[withLinks];var index_default=()=>definePreview(preview_exports);
export { index_default as default };
+8
dist/preview.mjs
import { makeDecorator, addons } from 'storybook/internal/preview-api';
import { STORY_CHANGED, SELECT_STORY } from 'storybook/internal/core-events';
import 'storybook/internal/csf';
import { global } from '@storybook/global';
var PARAM_KEY="links";var{document,HTMLElement}=global;var navigate=params=>addons.getChannel().emit(SELECT_STORY,params);var linksListener=e=>{let{target}=e;if(!(target instanceof HTMLElement))return;let element=target,{sbKind:kind,sbStory:story}=element.dataset;(kind||story)&&(e.preventDefault(),navigate({kind,story}));},hasListener=!1,on=()=>{hasListener||(hasListener=!0,document.addEventListener("click",linksListener));},off=()=>{hasListener&&(hasListener=!1,document.removeEventListener("click",linksListener));},withLinks=makeDecorator({name:"withLinks",parameterName:PARAM_KEY,wrapper:(getStory,context)=>(on(),addons.getChannel().once(STORY_CHANGED,off),getStory(context))});var decorators=[withLinks];
export { decorators };
+6
dist/react/index.mjs
import { hrefTo, navigate } from '../chunk-DQW2J2JG.mjs';
import React, { PureComponent } from 'react';
var LEFT_BUTTON=0,isPlainLeftClick=e=>e.button===LEFT_BUTTON&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey,cancelled=(e,cb=_e=>{})=>{isPlainLeftClick(e)&&(e.preventDefault(),cb(e));},LinkTo=class extends PureComponent{constructor(){super(...arguments);this.state={href:"/"};this.updateHref=async()=>{let{kind,title=kind,story,name=story}=this.props;if(title&&name){let href=await hrefTo(title,name);this.setState({href});}};this.handleClick=()=>{let{kind,title=kind,story,name=story}=this.props;title&&name&&navigate({title,name});};}componentDidMount(){this.updateHref();}componentDidUpdate(prevProps){let{kind,title,story,name}=this.props;(prevProps.kind!==kind||prevProps.story!==story||prevProps.title!==title||prevProps.name!==name)&&this.updateHref();}render(){let{kind,title=kind,story,name=story,children,...rest}=this.props,{href}=this.state;return React.createElement("a",{href,onClick:e=>cancelled(e,this.handleClick),...rest},children)}};LinkTo.defaultProps={children:void 0};var react_default=LinkTo;
export { react_default as default };
+2
-2
dist/index.d.ts

@@ -1,2 +0,2 @@

import * as storybook_internal_csf from 'storybook/internal/csf';
import * as core_dist_types from 'storybook/internal/types';
import { ComponentTitle, StoryName, StoryId, StoryKind } from 'storybook/internal/types';

@@ -18,4 +18,4 @@

declare const _default: () => storybook_internal_csf.PreviewAddon<storybook_internal_csf.AddonTypes>;
declare const _default: () => core_dist_types.ProjectAnnotations<core_dist_types.Renderer>;
export { _default as default, hrefTo, linkTo, navigate, withLinks };
+16
-17
dist/index.js

@@ -1,17 +0,16 @@

import {
index_default
} from "./_browser-chunks/chunk-PZ2KFUGG.js";
import {
hrefTo,
linkTo,
navigate,
withLinks
} from "./_browser-chunks/chunk-LAYPZ6CY.js";
import "./_browser-chunks/chunk-FX5LXYO2.js";
export {
index_default as default,
hrefTo,
linkTo,
navigate,
withLinks
};
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var previewApi = require('storybook/internal/preview-api');
var coreEvents = require('storybook/internal/core-events');
var csf = require('storybook/internal/csf');
var global = require('@storybook/global');
var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var preview_exports={};__export(preview_exports,{decorators:()=>decorators});var decorators=[withLinks];var PARAM_KEY="links";var{document,HTMLElement}=global.global;function parseQuery(queryString){let query={},pairs=(queryString[0]==="?"?queryString.substring(1):queryString).split("&").filter(Boolean);for(let i=0;i<pairs.length;i++){let pair=pairs[i].split("=");query[decodeURIComponent(pair[0])]=decodeURIComponent(pair[1]||"");}return query}var navigate=params=>previewApi.addons.getChannel().emit(coreEvents.SELECT_STORY,params),hrefTo=(title,name)=>new Promise(resolve=>{let{location}=document,existingId=parseQuery(location.search).id,titleToLink=title||existingId.split("--",2)[0],path=`/story/${csf.toId(titleToLink,name)}`,sbPath=location.pathname.replace(/iframe\.html$/,""),url=`${location.origin+sbPath}?${Object.entries({path}).map(item=>`${item[0]}=${item[1]}`).join("&")}`;resolve(url);}),valueOrCall=args=>value=>typeof value=="function"?value(...args):value,linkTo=(idOrTitle,nameInput)=>(...args)=>{let resolver=valueOrCall(args),title=resolver(idOrTitle),name=nameInput?resolver(nameInput):!1;title?.match(/--/)&&!name?navigate({storyId:title}):name&&title?navigate({kind:title,story:name}):title?navigate({kind:title}):name&&navigate({story:name});},linksListener=e=>{let{target}=e;if(!(target instanceof HTMLElement))return;let element=target,{sbKind:kind,sbStory:story}=element.dataset;(kind||story)&&(e.preventDefault(),navigate({kind,story}));},hasListener=!1,on=()=>{hasListener||(hasListener=!0,document.addEventListener("click",linksListener));},off=()=>{hasListener&&(hasListener=!1,document.removeEventListener("click",linksListener));},withLinks=previewApi.makeDecorator({name:"withLinks",parameterName:PARAM_KEY,wrapper:(getStory,context)=>(on(),previewApi.addons.getChannel().once(coreEvents.STORY_CHANGED,off),getStory(context))});var index_default=()=>previewApi.definePreview(preview_exports);
exports.default = index_default;
exports.hrefTo = hrefTo;
exports.linkTo = linkTo;
exports.navigate = navigate;
exports.withLinks = withLinks;
+2
-12
dist/manager.js

@@ -1,13 +0,3 @@

import {
ADDON_ID,
constants_default
} from "./_browser-chunks/chunk-FX5LXYO2.js";
import { addons } from 'storybook/internal/manager-api';
// src/manager.ts
import { addons } from "storybook/manager-api";
addons.register(ADDON_ID, (api) => {
api.on(constants_default.REQUEST, ({ kind, name }) => {
let id = api.storyId(kind, name);
api.emit(constants_default.RECEIVE, id);
});
});
var ADDON_ID="storybook/links";var constants_default={NAVIGATE:`${ADDON_ID}/navigate`,REQUEST:`${ADDON_ID}/request`,RECEIVE:`${ADDON_ID}/receive`};addons.register(ADDON_ID,api=>{api.on(constants_default.REQUEST,({kind,name})=>{let id=api.storyId(kind,name);api.emit(constants_default.RECEIVE,id);});});
+10
-8
dist/preview.js

@@ -1,8 +0,10 @@

import {
decorators
} from "./_browser-chunks/chunk-PZ2KFUGG.js";
import "./_browser-chunks/chunk-LAYPZ6CY.js";
import "./_browser-chunks/chunk-FX5LXYO2.js";
export {
decorators
};
'use strict';
var previewApi = require('storybook/internal/preview-api');
var coreEvents = require('storybook/internal/core-events');
require('storybook/internal/csf');
var global = require('@storybook/global');
var PARAM_KEY="links";var{document,HTMLElement}=global.global;var navigate=params=>previewApi.addons.getChannel().emit(coreEvents.SELECT_STORY,params);var linksListener=e=>{let{target}=e;if(!(target instanceof HTMLElement))return;let element=target,{sbKind:kind,sbStory:story}=element.dataset;(kind||story)&&(e.preventDefault(),navigate({kind,story}));},hasListener=!1,on=()=>{hasListener||(hasListener=!0,document.addEventListener("click",linksListener));},off=()=>{hasListener&&(hasListener=!1,document.removeEventListener("click",linksListener));},withLinks=previewApi.makeDecorator({name:"withLinks",parameterName:PARAM_KEY,wrapper:(getStory,context)=>(on(),previewApi.addons.getChannel().once(coreEvents.STORY_CHANGED,off),getStory(context))});var decorators=[withLinks];
exports.decorators = decorators;
+13
-48
dist/react/index.js

@@ -1,50 +0,15 @@

import {
hrefTo,
navigate
} from "../_browser-chunks/chunk-LAYPZ6CY.js";
import "../_browser-chunks/chunk-FX5LXYO2.js";
'use strict';
// src/react/components/link.tsx
import React, { PureComponent } from "react";
var LEFT_BUTTON = 0, isPlainLeftClick = (e) => e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey, cancelled = (e, cb = (_e) => {
}) => {
isPlainLeftClick(e) && (e.preventDefault(), cb(e));
}, LinkTo = class extends PureComponent {
constructor() {
super(...arguments);
this.state = {
href: "/"
};
this.updateHref = async () => {
let { kind, title = kind, story, name = story } = this.props;
if (title && name) {
let href = await hrefTo(title, name);
this.setState({ href });
}
};
this.handleClick = () => {
let { kind, title = kind, story, name = story } = this.props;
title && name && navigate({ title, name });
};
}
componentDidMount() {
this.updateHref();
}
componentDidUpdate(prevProps) {
let { kind, title, story, name } = this.props;
(prevProps.kind !== kind || prevProps.story !== story || prevProps.title !== title || prevProps.name !== name) && this.updateHref();
}
render() {
let { kind, title = kind, story, name = story, children, ...rest } = this.props, { href } = this.state;
return React.createElement("a", { href, onClick: (e) => cancelled(e, this.handleClick), ...rest }, children);
}
};
LinkTo.defaultProps = {
children: void 0
};
var React = require('react');
var coreEvents = require('storybook/internal/core-events');
var csf = require('storybook/internal/csf');
var previewApi = require('storybook/internal/preview-api');
var global = require('@storybook/global');
// src/react/index.ts
var react_default = LinkTo;
export {
react_default as default
};
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var PARAM_KEY="links";var{document,HTMLElement}=global.global;function parseQuery(queryString){let query={},pairs=(queryString[0]==="?"?queryString.substring(1):queryString).split("&").filter(Boolean);for(let i=0;i<pairs.length;i++){let pair=pairs[i].split("=");query[decodeURIComponent(pair[0])]=decodeURIComponent(pair[1]||"");}return query}var navigate=params=>previewApi.addons.getChannel().emit(coreEvents.SELECT_STORY,params),hrefTo=(title,name)=>new Promise(resolve=>{let{location}=document,existingId=parseQuery(location.search).id,titleToLink=title||existingId.split("--",2)[0],path=`/story/${csf.toId(titleToLink,name)}`,sbPath=location.pathname.replace(/iframe\.html$/,""),url=`${location.origin+sbPath}?${Object.entries({path}).map(item=>`${item[0]}=${item[1]}`).join("&")}`;resolve(url);});var linksListener=e=>{let{target}=e;if(!(target instanceof HTMLElement))return;let element=target,{sbKind:kind,sbStory:story}=element.dataset;(kind||story)&&(e.preventDefault(),navigate({kind,story}));},hasListener=!1,on=()=>{hasListener||(hasListener=!0,document.addEventListener("click",linksListener));},off=()=>{hasListener&&(hasListener=!1,document.removeEventListener("click",linksListener));};previewApi.makeDecorator({name:"withLinks",parameterName:PARAM_KEY,wrapper:(getStory,context)=>(on(),previewApi.addons.getChannel().once(coreEvents.STORY_CHANGED,off),getStory(context))});var LEFT_BUTTON=0,isPlainLeftClick=e=>e.button===LEFT_BUTTON&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey,cancelled=(e,cb=_e=>{})=>{isPlainLeftClick(e)&&(e.preventDefault(),cb(e));},LinkTo=class extends React.PureComponent{constructor(){super(...arguments);this.state={href:"/"};this.updateHref=async()=>{let{kind,title=kind,story,name=story}=this.props;if(title&&name){let href=await hrefTo(title,name);this.setState({href});}};this.handleClick=()=>{let{kind,title=kind,story,name=story}=this.props;title&&name&&navigate({title,name});};}componentDidMount(){this.updateHref();}componentDidUpdate(prevProps){let{kind,title,story,name}=this.props;(prevProps.kind!==kind||prevProps.story!==story||prevProps.title!==title||prevProps.name!==name)&&this.updateHref();}render(){let{kind,title=kind,story,name=story,children,...rest}=this.props,{href}=this.state;return React__default.default.createElement("a",{href,onClick:e=>cancelled(e,this.handleClick),...rest},children)}};LinkTo.defaultProps={children:void 0};var react_default=LinkTo;
module.exports = react_default;
+54
-25
package.json
{
"name": "@storybook/addon-links",
"version": "0.0.0-pr-34008-sha-fc2f9bf0",
"description": "Storybook Links: Link stories together to build demos and prototypes with your UI components",
"version": "0.0.0-pr-34009-sha-c90626e7",
"description": "Link stories together to build demos and prototypes with your UI components",
"keywords": [
"storybook",
"storybook-addon",
"organize",
"links",
"navigation",
"component",
"components"
"storybook-addons",
"organize"
],

@@ -28,20 +23,36 @@ "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/links",

"license": "MIT",
"type": "module",
"exports": {
".": {
"types": "./dist/index.d.ts",
"code": "./src/index.ts",
"default": "./dist/index.js"
"import": "./dist/index.mjs",
"require": "./dist/index.js"
},
"./manager": "./dist/manager.js",
"./package.json": "./package.json",
"./react": {
"types": "./dist/react/index.d.ts",
"import": "./dist/react/index.mjs",
"require": "./dist/react/index.js"
},
"./preview": {
"types": "./dist/preview.d.ts",
"code": "./src/preview.ts",
"default": "./dist/preview.js"
"import": "./dist/preview.mjs",
"require": "./dist/preview.js"
},
"./react": {
"types": "./dist/react/index.d.ts",
"code": "./src/react/index.ts",
"default": "./dist/react/index.js"
"./manager": "./dist/manager.js",
"./register": "./dist/manager.js",
"./package.json": "./package.json"
},
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"typesVersions": {
"*": {
"*": [
"dist/index.d.ts"
],
"preview": [
"dist/preview.d.ts"
],
"react": [
"dist/react/index.d.ts"
]
}

@@ -56,11 +67,16 @@ },

],
"scripts": {
"check": "jiti ../../../scripts/prepare/check.ts",
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
},
"dependencies": {
"@storybook/global": "^5.0.0"
"@storybook/global": "^5.0.0",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"typescript": "^5.9.3"
"typescript": "^5.7.3"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"storybook": "^0.0.0-pr-34008-sha-fc2f9bf0"
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
"storybook": "^0.0.0-pr-34009-sha-c90626e7"
},

@@ -75,3 +91,16 @@ "peerDependenciesMeta": {

},
"gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae1l",
"bundler": {
"exportEntries": [
"./src/react/index.ts",
"./src/index.ts"
],
"managerEntries": [
"./src/manager.ts"
],
"previewEntries": [
"./src/preview.ts"
],
"post": "./scripts/fix-preview-api-reference.ts"
},
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
"storybook": {

@@ -78,0 +107,0 @@ "displayName": "Links",

+4
-6
README.md
# Story Links Addon
The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org?ref=readme).
The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org).
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support?ref=readme)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)

@@ -83,4 +83,4 @@ ## Getting Started

```js
import { action } from '@storybook/addon-actions';
import { hrefTo } from '@storybook/addon-links';
import { action } from 'storybook/actions';

@@ -136,3 +136,3 @@ export default {

```mdx
```js
<LinkTo

@@ -150,3 +150,1 @@ kind="Toggle"

To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/next/code/addons/links/src/react/components/RoutedLink.tsx) for reference.
Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).
-19
dist/_browser-chunks/chunk-FX5LXYO2.js
var __defProp = Object.defineProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: !0 });
};
// src/constants.ts
var ADDON_ID = "storybook/links", PARAM_KEY = "links", constants_default = {
NAVIGATE: `${ADDON_ID}/navigate`,
REQUEST: `${ADDON_ID}/request`,
RECEIVE: `${ADDON_ID}/receive`
};
export {
__export,
ADDON_ID,
PARAM_KEY,
constants_default
};
-46
dist/_browser-chunks/chunk-LAYPZ6CY.js
import {
PARAM_KEY
} from "./chunk-FX5LXYO2.js";
// src/utils.ts
import { SELECT_STORY, STORY_CHANGED } from "storybook/internal/core-events";
import { toId } from "storybook/internal/csf";
import { global } from "@storybook/global";
import { addons, makeDecorator } from "storybook/preview-api";
var { document, HTMLElement } = global;
function parseQuery(queryString) {
let query = {}, pairs = (queryString[0] === "?" ? queryString.substring(1) : queryString).split("&").filter(Boolean);
for (let i = 0; i < pairs.length; i++) {
let pair = pairs[i].split("=");
query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || "");
}
return query;
}
var navigate = (params) => addons.getChannel().emit(SELECT_STORY, params), hrefTo = (title, name) => new Promise((resolve) => {
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("&")}`;
resolve(url);
}), valueOrCall = (args) => (value) => typeof value == "function" ? value(...args) : value, linkTo = (idOrTitle, nameInput) => (...args) => {
let resolver = valueOrCall(args), title = resolver(idOrTitle), name = nameInput ? resolver(nameInput) : !1;
title?.match(/--/) && !name ? navigate({ storyId: title }) : name && title ? navigate({ kind: title, story: name }) : title ? navigate({ kind: title }) : name && navigate({ story: name });
}, linksListener = (e) => {
let { target } = e;
if (!(target instanceof HTMLElement))
return;
let element = target, { sbKind: kind, sbStory: story } = element.dataset;
(kind || story) && (e.preventDefault(), navigate({ kind, story }));
}, hasListener = !1, on = () => {
hasListener || (hasListener = !0, document.addEventListener("click", linksListener));
}, off = () => {
hasListener && (hasListener = !1, document.removeEventListener("click", linksListener));
}, withLinks = makeDecorator({
name: "withLinks",
parameterName: PARAM_KEY,
wrapper: (getStory, context) => (on(), addons.getChannel().once(STORY_CHANGED, off), getStory(context))
});
export {
navigate,
hrefTo,
linkTo,
withLinks
};
-24
dist/_browser-chunks/chunk-PZ2KFUGG.js
import {
withLinks
} from "./chunk-LAYPZ6CY.js";
import {
__export
} from "./chunk-FX5LXYO2.js";
// src/preview.ts
var preview_exports = {};
__export(preview_exports, {
decorators: () => decorators
});
// src/index.ts
import { definePreviewAddon } from "storybook/internal/csf";
var index_default = () => definePreviewAddon(preview_exports);
// src/preview.ts
var decorators = [withLinks];
export {
decorators,
index_default
};