@storybook/addon-links 11.0.0-alpha.0 → 11.0.0-alpha.2

package/README.md

@@ -78,7 +78,6 @@ export const third = () => <LinkTo story="index">Go back</LinkTo>;
 ## hrefTo function
 
 If you want to get an URL for a particular story, you may use `hrefTo` function. It returns a promise, which resolves to string containing a relative URL:
-
 ```js
 import { hrefTo } from '@storybook/addon-links';
 import { action } from 'storybook/actions';
@@ -94,6 +93,22 @@ export const log = () => {
 };
 ```
 
+## hrefToSync function
+
+If you want to render native links to other stories so you can middle-click or command-click to open them in a new tab, you can use the `hrefToSync` function. This returns a string containing the URL immediately:
+```js
+import { hrefToSync } from '@storybook/addon-links';
+
+export default {
+    title: 'HrefSync',
+};
+
+export const log = () => {
+    const url = hrefToSync('HrefSync', 'log');
+    return <a href={url}>Link to this story</a>;
+};
+```
+
 ## withLinks decorator
 
 `withLinks` decorator enables a declarative way of defining story links, using data attributes.

package/dist/_browser-chunks/{chunk-PZ2KFUGG.js → chunk-2NZOTHER.js}

@@ -1,6 +1,6 @@
 import {
   withLinks
-} from "./chunk-LAYPZ6CY.js";
+} from "./chunk-72HWH2ZD.js";
 import {
   __export
 } from "./chunk-FX5LXYO2.js";

package/dist/_browser-chunks/{chunk-LAYPZ6CY.js → chunk-72HWH2ZD.js}

@@ -16,10 +16,12 @@ function parseQuery(queryString) {
   }
   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) => {
+var navigate = (params) => addons.getChannel().emit(SELECT_STORY, params), generateStoryUrl = (title, name) => {
+  let { location } = document, query = parseQuery(location.search), existingId = query.id ?? query.path?.match(/^\/story\/(.+)$/)?.[1], titleToLink = title || existingId?.split("--", 2)[0] || "", path = `/story/${toId(titleToLink, name)}`, sbPath = location.pathname.replace(/iframe\.html$/, "");
+  return `${location.origin + sbPath}?${Object.entries({ path }).map((item) => `${item[0]}=${item[1]}`).join("&")}`;
+}, hrefTo = (title, name) => new Promise((resolve) => {
+  resolve(generateStoryUrl(title, name));
+}), hrefToSync = (title, name) => generateStoryUrl(title, name), 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) => {
@@ -41,6 +43,7 @@ var navigate = (params) => addons.getChannel().emit(SELECT_STORY, params), hrefT
 export {
   navigate,
   hrefTo,
+  hrefToSync,
   linkTo,
   withLinks
 };

package/dist/index.d.ts

@@ -11,11 +11,12 @@ interface ParamsCombo {
   name?: StoryName;
 }
 declare const navigate: (params: ParamsId | ParamsCombo) => void;
-declare const hrefTo: (title: ComponentTitle, name: StoryName) => Promise<string>;
+declare const hrefTo: (title: ComponentTitle | undefined, name: StoryName) => Promise<string>;
+declare const hrefToSync: (title: ComponentTitle | undefined, name: StoryName) => string;
 declare const linkTo: (idOrTitle: string | ((...args: any[]) => string), nameInput?: string | ((...args: any[]) => string)) => (...args: any[]) => void;
 declare const withLinks: (...args: any) => any;
 //#endregion
 //#region code/addons/links/.dts-emit/code/addons/links/src/index.d.ts
 declare function _default(): import("storybook/internal/csf").PreviewAddon<import("storybook/internal/csf").AddonTypes>;
 //#endregion
-export { _default as default, hrefTo, linkTo, navigate, withLinks };
+export { _default as default, hrefTo, hrefToSync, linkTo, navigate, withLinks };

package/dist/index.js

@@ -1,16 +1,18 @@
 import {
   index_default
-} from "./_browser-chunks/chunk-PZ2KFUGG.js";
+} from "./_browser-chunks/chunk-2NZOTHER.js";
 import {
   hrefTo,
+  hrefToSync,
   linkTo,
   navigate,
   withLinks
-} from "./_browser-chunks/chunk-LAYPZ6CY.js";
+} from "./_browser-chunks/chunk-72HWH2ZD.js";
 import "./_browser-chunks/chunk-FX5LXYO2.js";
 export {
   index_default as default,
   hrefTo,
+  hrefToSync,
   linkTo,
   navigate,
   withLinks

package/dist/preview.js

@@ -1,7 +1,7 @@
 import {
   decorators
-} from "./_browser-chunks/chunk-PZ2KFUGG.js";
-import "./_browser-chunks/chunk-LAYPZ6CY.js";
+} from "./_browser-chunks/chunk-2NZOTHER.js";
+import "./_browser-chunks/chunk-72HWH2ZD.js";
 import "./_browser-chunks/chunk-FX5LXYO2.js";
 export {
   decorators

package/dist/react/index.js

@@ -1,7 +1,7 @@
 import {
   hrefTo,
   navigate
-} from "../_browser-chunks/chunk-LAYPZ6CY.js";
+} from "../_browser-chunks/chunk-72HWH2ZD.js";
 import "../_browser-chunks/chunk-FX5LXYO2.js";
 
 // src/react/components/link.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "11.0.0-alpha.0",
+  "version": "11.0.0-alpha.2",
   "description": "Storybook Links: Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook",
@@ -59,9 +59,9 @@
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "storybook": "^11.0.0-alpha.0"
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "storybook": "^11.0.0-alpha.2"
   },
   "peerDependenciesMeta": {
     "@types/react": {