storybook-addon-dependency-previews 0.5.4-beta.2 → 0.5.4
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/components/ComponentSourceLink.cjs +13 -5
- package/dist/components/ComponentSourceLink.cjs.map +1 -1
- package/dist/components/ComponentSourceLink.mjs +13 -5
- package/dist/components/ComponentSourceLink.mjs.map +1 -1
- package/dist/components/TooltipTrigger.cjs +0 -1
- package/dist/components/TooltipTrigger.cjs.map +1 -1
- package/dist/components/TooltipTrigger.mjs +0 -1
- package/dist/components/TooltipTrigger.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -18,20 +18,28 @@ function ComponentSourceLink({ storyInfo, ariaDescribedBy }) {
|
|
|
18
18
|
return /* @__PURE__ */ react.default.createElement("span", null, relativePath);
|
|
19
19
|
}
|
|
20
20
|
const href = (sourceRootUrl.endsWith("/") ? sourceRootUrl : sourceRootUrl + "/") + encodeURI(relativePath);
|
|
21
|
+
const isVsCodeUrl = href.startsWith("vscode://");
|
|
21
22
|
function onClick(event) {
|
|
22
|
-
if (!
|
|
23
|
+
if (!isVsCodeUrl) return;
|
|
24
|
+
if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
23
27
|
event.preventDefault();
|
|
24
|
-
|
|
25
|
-
|
|
28
|
+
try {
|
|
29
|
+
const topWindow = window.top ?? window;
|
|
30
|
+
topWindow.location.href = href;
|
|
31
|
+
} catch {
|
|
32
|
+
window.location.href = href;
|
|
33
|
+
}
|
|
26
34
|
}
|
|
27
35
|
return /* @__PURE__ */ react.default.createElement(require_TooltipTrigger.TooltipTrigger, {
|
|
28
36
|
TriggerElem: "a",
|
|
29
37
|
className: src_components_ComponentSourceLink_module_css.default.ComponentSourceLink,
|
|
30
38
|
href,
|
|
31
39
|
onClick,
|
|
32
|
-
newWindow:
|
|
40
|
+
newWindow: !isVsCodeUrl,
|
|
33
41
|
"aria-describedby": ariaDescribedBy,
|
|
34
|
-
tooltipText: `View source (opens in ${
|
|
42
|
+
tooltipText: `View source (opens in ${isVsCodeUrl ? "VS Code" : "new tab"})`,
|
|
35
43
|
dangerouslySetInnerHTML: { __html: relativePath.replaceAll("/", "/<wbr/>") }
|
|
36
44
|
});
|
|
37
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentSourceLink.cjs","names":["useStoryParams","TooltipTrigger","s"],"sources":["../../src/components/ComponentSourceLink.tsx"],"sourcesContent":["import React from 'react'\nimport type { StoryInfo } from '../types'\n\nimport s from './ComponentSourceLink.module.css'\nimport { TooltipTrigger } from './TooltipTrigger'\nimport { useStoryParams } from '../hooks/useStoryParams'\n\ninterface Props {\n\tstoryInfo: StoryInfo\n\tariaDescribedBy?: string\n}\nexport function ComponentSourceLink({ storyInfo, ariaDescribedBy }: Props) {\n\tconst storyParameters = useStoryParams()\n\n\tconst isLocalHost =\n\t\twindow?.location.hostname === 'localhost' ||\n\t\twindow?.location.hostname === '127.0.0.1'\n\n\tconst vsCodeRootUrl = getVsCodeRootUrl(\n\t\tstoryParameters.dependencyPreviews.projectRootPath,\n\t)\n\tconst gitRootUrl = storyParameters.dependencyPreviews.sourceRootUrl\n\n\tconst sourceRootUrl = isLocalHost ? vsCodeRootUrl : gitRootUrl\n\n\t// Normalize: force POSIX slashes and strip leading ./ or /\n\tconst relativePath = storyInfo.componentPath\n\t\t.replace(/\\\\/g, '/')\n\t\t.replace(/^\\.?\\/+/, '')\n\n\tif (!sourceRootUrl) {\n\t\treturn <span>{relativePath}</span>\n\t}\n\tconst href =\n\t\t(sourceRootUrl.endsWith('/') ? sourceRootUrl : sourceRootUrl + '/') +\n\t\tencodeURI(relativePath)\n\n\tfunction onClick(event: React.MouseEvent) {\n\t\t// vscode:// navigation from a sandboxed iframe via target=\"_blank\" is\n\t\t// silently blocked by Chromium. Route it through the top window so the\n\t\t// protocol handler fires reliably and VS Code actually launches.\n\t\tif (!
|
|
1
|
+
{"version":3,"file":"ComponentSourceLink.cjs","names":["useStoryParams","TooltipTrigger","s"],"sources":["../../src/components/ComponentSourceLink.tsx"],"sourcesContent":["import React from 'react'\nimport type { StoryInfo } from '../types'\n\nimport s from './ComponentSourceLink.module.css'\nimport { TooltipTrigger } from './TooltipTrigger'\nimport { useStoryParams } from '../hooks/useStoryParams'\n\ninterface Props {\n\tstoryInfo: StoryInfo\n\tariaDescribedBy?: string\n}\nexport function ComponentSourceLink({ storyInfo, ariaDescribedBy }: Props) {\n\tconst storyParameters = useStoryParams()\n\n\tconst isLocalHost =\n\t\twindow?.location.hostname === 'localhost' ||\n\t\twindow?.location.hostname === '127.0.0.1'\n\n\tconst vsCodeRootUrl = getVsCodeRootUrl(\n\t\tstoryParameters.dependencyPreviews.projectRootPath,\n\t)\n\tconst gitRootUrl = storyParameters.dependencyPreviews.sourceRootUrl\n\n\tconst sourceRootUrl = isLocalHost ? vsCodeRootUrl : gitRootUrl\n\n\t// Normalize: force POSIX slashes and strip leading ./ or /\n\tconst relativePath = storyInfo.componentPath\n\t\t.replace(/\\\\/g, '/')\n\t\t.replace(/^\\.?\\/+/, '')\n\n\tif (!sourceRootUrl) {\n\t\treturn <span>{relativePath}</span>\n\t}\n\tconst href =\n\t\t(sourceRootUrl.endsWith('/') ? sourceRootUrl : sourceRootUrl + '/') +\n\t\tencodeURI(relativePath)\n\n\tconst isVsCodeUrl = href.startsWith('vscode://')\n\n\tfunction onClick(event: React.MouseEvent) {\n\t\t// vscode:// navigation from a sandboxed iframe via target=\"_blank\" is\n\t\t// silently blocked by Chromium. Route it through the top window so the\n\t\t// protocol handler fires reliably and VS Code actually launches. Only\n\t\t// intercept unmodified primary clicks so Ctrl/Cmd/Shift/Alt + click and\n\t\t// middle-click keep their native semantics. Anchors natively dispatch a\n\t\t// click event for Enter activation, so keyboard activation flows through\n\t\t// this same path.\n\t\tif (!isVsCodeUrl) return\n\t\tif (\n\t\t\tevent.button !== 0 ||\n\t\t\tevent.metaKey ||\n\t\t\tevent.ctrlKey ||\n\t\t\tevent.shiftKey ||\n\t\t\tevent.altKey\n\t\t) {\n\t\t\treturn\n\t\t}\n\t\tevent.preventDefault()\n\t\ttry {\n\t\t\tconst topWindow = window.top ?? window\n\t\t\ttopWindow.location.href = href\n\t\t} catch {\n\t\t\twindow.location.href = href\n\t\t}\n\t}\n\n\treturn (\n\t\t<TooltipTrigger\n\t\t\tTriggerElem=\"a\"\n\t\t\tclassName={s.ComponentSourceLink}\n\t\t\thref={href}\n\t\t\tonClick={onClick}\n\t\t\tnewWindow={!isVsCodeUrl}\n\t\t\taria-describedby={ariaDescribedBy}\n\t\t\ttooltipText={`View source (opens in ${\n\t\t\t\tisVsCodeUrl ? 'VS Code' : 'new tab'\n\t\t\t})`}\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t// allow line breaks on slashes\n\t\t\t\t__html: relativePath.replaceAll('/', '/<wbr/>'),\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction getVsCodeRootUrl(projectRootPath: string) {\n\tlet newProjectRootPath = projectRootPath\n\n\t// Remove Vite's /@fs/ prefix if present\n\tnewProjectRootPath = projectRootPath.replace(/^\\/@fs\\//, '/')\n\n\t// Fix Windows path: remove leading slash from /C:/Users/... -> C:/Users/...\n\tif (newProjectRootPath.match(/^\\/[A-Za-z]:\\//)) {\n\t\tnewProjectRootPath = newProjectRootPath.slice(1)\n\t}\n\n\t// Ensure forward slashes for VS Code (works on all platforms)\n\tnewProjectRootPath = newProjectRootPath.replace(/\\\\/g, '/')\n\n\treturn `vscode://file/${newProjectRootPath}`\n}\n"],"mappings":";;;;;;;;;AAWA,SAAgB,oBAAoB,EAAE,WAAW,mBAA0B;CAC1E,MAAM,kBAAkBA,uCAAgB;CAExC,MAAM,cACL,QAAQ,SAAS,aAAa,eAC9B,QAAQ,SAAS,aAAa;CAE/B,MAAM,gBAAgB,iBACrB,gBAAgB,mBAAmB,gBACnC;CACD,MAAM,aAAa,gBAAgB,mBAAmB;CAEtD,MAAM,gBAAgB,cAAc,gBAAgB;CAGpD,MAAM,eAAe,UAAU,cAC7B,QAAQ,OAAO,IAAI,CACnB,QAAQ,WAAW,GAAG;AAExB,KAAI,CAAC,eAAe;AACnB,SAAO,4CAAC,cAAM,aAAoB;;CAEnC,MAAM,QACJ,cAAc,SAAS,IAAI,GAAG,gBAAgB,gBAAgB,OAC/D,UAAU,aAAa;CAExB,MAAM,cAAc,KAAK,WAAW,YAAY;CAEhD,SAAS,QAAQ,OAAyB;AAQzC,MAAI,CAAC,YAAa;AAClB,MACC,MAAM,WAAW,KACjB,MAAM,WACN,MAAM,WACN,MAAM,YACN,MAAM,QACL;AACD;;AAED,QAAM,gBAAgB;AACtB,MAAI;GACH,MAAM,YAAY,OAAO,OAAO;AAChC,aAAU,SAAS,OAAO;UACnB;AACP,UAAO,SAAS,OAAO;;;AAIzB,QACC,4CAACC;EACA,aAAY;EACZ,WAAWC,sDAAE;EACP;EACG;EACT,WAAW,CAAC;EACZ,oBAAkB;EAClB,aAAa,yBACZ,cAAc,YAAY,UAC1B;EACD,yBAAyB,EAExB,QAAQ,aAAa,WAAW,KAAK,UAAU,EAC/C;GACA;;AAIJ,SAAS,iBAAiB,iBAAyB;CAClD,IAAI,qBAAqB;AAGzB,sBAAqB,gBAAgB,QAAQ,YAAY,IAAI;AAG7D,KAAI,mBAAmB,MAAM,iBAAiB,EAAE;AAC/C,uBAAqB,mBAAmB,MAAM,EAAE;;AAIjD,sBAAqB,mBAAmB,QAAQ,OAAO,IAAI;AAE3D,QAAO,iBAAiB"}
|
|
@@ -15,20 +15,28 @@ function ComponentSourceLink({ storyInfo, ariaDescribedBy }) {
|
|
|
15
15
|
return /* @__PURE__ */ React.createElement("span", null, relativePath);
|
|
16
16
|
}
|
|
17
17
|
const href = (sourceRootUrl.endsWith("/") ? sourceRootUrl : sourceRootUrl + "/") + encodeURI(relativePath);
|
|
18
|
+
const isVsCodeUrl = href.startsWith("vscode://");
|
|
18
19
|
function onClick(event) {
|
|
19
|
-
if (!
|
|
20
|
+
if (!isVsCodeUrl) return;
|
|
21
|
+
if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
20
24
|
event.preventDefault();
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
try {
|
|
26
|
+
const topWindow = window.top ?? window;
|
|
27
|
+
topWindow.location.href = href;
|
|
28
|
+
} catch {
|
|
29
|
+
window.location.href = href;
|
|
30
|
+
}
|
|
23
31
|
}
|
|
24
32
|
return /* @__PURE__ */ React.createElement(TooltipTrigger, {
|
|
25
33
|
TriggerElem: "a",
|
|
26
34
|
className: s.ComponentSourceLink,
|
|
27
35
|
href,
|
|
28
36
|
onClick,
|
|
29
|
-
newWindow:
|
|
37
|
+
newWindow: !isVsCodeUrl,
|
|
30
38
|
"aria-describedby": ariaDescribedBy,
|
|
31
|
-
tooltipText: `View source (opens in ${
|
|
39
|
+
tooltipText: `View source (opens in ${isVsCodeUrl ? "VS Code" : "new tab"})`,
|
|
32
40
|
dangerouslySetInnerHTML: { __html: relativePath.replaceAll("/", "/<wbr/>") }
|
|
33
41
|
});
|
|
34
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentSourceLink.mjs","names":[],"sources":["../../src/components/ComponentSourceLink.tsx"],"sourcesContent":["import React from 'react'\nimport type { StoryInfo } from '../types'\n\nimport s from './ComponentSourceLink.module.css'\nimport { TooltipTrigger } from './TooltipTrigger'\nimport { useStoryParams } from '../hooks/useStoryParams'\n\ninterface Props {\n\tstoryInfo: StoryInfo\n\tariaDescribedBy?: string\n}\nexport function ComponentSourceLink({ storyInfo, ariaDescribedBy }: Props) {\n\tconst storyParameters = useStoryParams()\n\n\tconst isLocalHost =\n\t\twindow?.location.hostname === 'localhost' ||\n\t\twindow?.location.hostname === '127.0.0.1'\n\n\tconst vsCodeRootUrl = getVsCodeRootUrl(\n\t\tstoryParameters.dependencyPreviews.projectRootPath,\n\t)\n\tconst gitRootUrl = storyParameters.dependencyPreviews.sourceRootUrl\n\n\tconst sourceRootUrl = isLocalHost ? vsCodeRootUrl : gitRootUrl\n\n\t// Normalize: force POSIX slashes and strip leading ./ or /\n\tconst relativePath = storyInfo.componentPath\n\t\t.replace(/\\\\/g, '/')\n\t\t.replace(/^\\.?\\/+/, '')\n\n\tif (!sourceRootUrl) {\n\t\treturn <span>{relativePath}</span>\n\t}\n\tconst href =\n\t\t(sourceRootUrl.endsWith('/') ? sourceRootUrl : sourceRootUrl + '/') +\n\t\tencodeURI(relativePath)\n\n\tfunction onClick(event: React.MouseEvent) {\n\t\t// vscode:// navigation from a sandboxed iframe via target=\"_blank\" is\n\t\t// silently blocked by Chromium. Route it through the top window so the\n\t\t// protocol handler fires reliably and VS Code actually launches.\n\t\tif (!
|
|
1
|
+
{"version":3,"file":"ComponentSourceLink.mjs","names":[],"sources":["../../src/components/ComponentSourceLink.tsx"],"sourcesContent":["import React from 'react'\nimport type { StoryInfo } from '../types'\n\nimport s from './ComponentSourceLink.module.css'\nimport { TooltipTrigger } from './TooltipTrigger'\nimport { useStoryParams } from '../hooks/useStoryParams'\n\ninterface Props {\n\tstoryInfo: StoryInfo\n\tariaDescribedBy?: string\n}\nexport function ComponentSourceLink({ storyInfo, ariaDescribedBy }: Props) {\n\tconst storyParameters = useStoryParams()\n\n\tconst isLocalHost =\n\t\twindow?.location.hostname === 'localhost' ||\n\t\twindow?.location.hostname === '127.0.0.1'\n\n\tconst vsCodeRootUrl = getVsCodeRootUrl(\n\t\tstoryParameters.dependencyPreviews.projectRootPath,\n\t)\n\tconst gitRootUrl = storyParameters.dependencyPreviews.sourceRootUrl\n\n\tconst sourceRootUrl = isLocalHost ? vsCodeRootUrl : gitRootUrl\n\n\t// Normalize: force POSIX slashes and strip leading ./ or /\n\tconst relativePath = storyInfo.componentPath\n\t\t.replace(/\\\\/g, '/')\n\t\t.replace(/^\\.?\\/+/, '')\n\n\tif (!sourceRootUrl) {\n\t\treturn <span>{relativePath}</span>\n\t}\n\tconst href =\n\t\t(sourceRootUrl.endsWith('/') ? sourceRootUrl : sourceRootUrl + '/') +\n\t\tencodeURI(relativePath)\n\n\tconst isVsCodeUrl = href.startsWith('vscode://')\n\n\tfunction onClick(event: React.MouseEvent) {\n\t\t// vscode:// navigation from a sandboxed iframe via target=\"_blank\" is\n\t\t// silently blocked by Chromium. Route it through the top window so the\n\t\t// protocol handler fires reliably and VS Code actually launches. Only\n\t\t// intercept unmodified primary clicks so Ctrl/Cmd/Shift/Alt + click and\n\t\t// middle-click keep their native semantics. Anchors natively dispatch a\n\t\t// click event for Enter activation, so keyboard activation flows through\n\t\t// this same path.\n\t\tif (!isVsCodeUrl) return\n\t\tif (\n\t\t\tevent.button !== 0 ||\n\t\t\tevent.metaKey ||\n\t\t\tevent.ctrlKey ||\n\t\t\tevent.shiftKey ||\n\t\t\tevent.altKey\n\t\t) {\n\t\t\treturn\n\t\t}\n\t\tevent.preventDefault()\n\t\ttry {\n\t\t\tconst topWindow = window.top ?? window\n\t\t\ttopWindow.location.href = href\n\t\t} catch {\n\t\t\twindow.location.href = href\n\t\t}\n\t}\n\n\treturn (\n\t\t<TooltipTrigger\n\t\t\tTriggerElem=\"a\"\n\t\t\tclassName={s.ComponentSourceLink}\n\t\t\thref={href}\n\t\t\tonClick={onClick}\n\t\t\tnewWindow={!isVsCodeUrl}\n\t\t\taria-describedby={ariaDescribedBy}\n\t\t\ttooltipText={`View source (opens in ${\n\t\t\t\tisVsCodeUrl ? 'VS Code' : 'new tab'\n\t\t\t})`}\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t// allow line breaks on slashes\n\t\t\t\t__html: relativePath.replaceAll('/', '/<wbr/>'),\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction getVsCodeRootUrl(projectRootPath: string) {\n\tlet newProjectRootPath = projectRootPath\n\n\t// Remove Vite's /@fs/ prefix if present\n\tnewProjectRootPath = projectRootPath.replace(/^\\/@fs\\//, '/')\n\n\t// Fix Windows path: remove leading slash from /C:/Users/... -> C:/Users/...\n\tif (newProjectRootPath.match(/^\\/[A-Za-z]:\\//)) {\n\t\tnewProjectRootPath = newProjectRootPath.slice(1)\n\t}\n\n\t// Ensure forward slashes for VS Code (works on all platforms)\n\tnewProjectRootPath = newProjectRootPath.replace(/\\\\/g, '/')\n\n\treturn `vscode://file/${newProjectRootPath}`\n}\n"],"mappings":";;;;;;AAWA,SAAgB,oBAAoB,EAAE,WAAW,mBAA0B;CAC1E,MAAM,kBAAkB,gBAAgB;CAExC,MAAM,cACL,QAAQ,SAAS,aAAa,eAC9B,QAAQ,SAAS,aAAa;CAE/B,MAAM,gBAAgB,iBACrB,gBAAgB,mBAAmB,gBACnC;CACD,MAAM,aAAa,gBAAgB,mBAAmB;CAEtD,MAAM,gBAAgB,cAAc,gBAAgB;CAGpD,MAAM,eAAe,UAAU,cAC7B,QAAQ,OAAO,IAAI,CACnB,QAAQ,WAAW,GAAG;AAExB,KAAI,CAAC,eAAe;AACnB,SAAO,oCAAC,cAAM,aAAoB;;CAEnC,MAAM,QACJ,cAAc,SAAS,IAAI,GAAG,gBAAgB,gBAAgB,OAC/D,UAAU,aAAa;CAExB,MAAM,cAAc,KAAK,WAAW,YAAY;CAEhD,SAAS,QAAQ,OAAyB;AAQzC,MAAI,CAAC,YAAa;AAClB,MACC,MAAM,WAAW,KACjB,MAAM,WACN,MAAM,WACN,MAAM,YACN,MAAM,QACL;AACD;;AAED,QAAM,gBAAgB;AACtB,MAAI;GACH,MAAM,YAAY,OAAO,OAAO;AAChC,aAAU,SAAS,OAAO;UACnB;AACP,UAAO,SAAS,OAAO;;;AAIzB,QACC,oCAAC;EACA,aAAY;EACZ,WAAW,EAAE;EACP;EACG;EACT,WAAW,CAAC;EACZ,oBAAkB;EAClB,aAAa,yBACZ,cAAc,YAAY,UAC1B;EACD,yBAAyB,EAExB,QAAQ,aAAa,WAAW,KAAK,UAAU,EAC/C;GACA;;AAIJ,SAAS,iBAAiB,iBAAyB;CAClD,IAAI,qBAAqB;AAGzB,sBAAqB,gBAAgB,QAAQ,YAAY,IAAI;AAG7D,KAAI,mBAAmB,MAAM,iBAAiB,EAAE;AAC/C,uBAAqB,mBAAmB,MAAM,EAAE;;AAIjD,sBAAqB,mBAAmB,QAAQ,OAAO,IAAI;AAE3D,QAAO,iBAAiB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipTrigger.cjs","names":["s","ExternalLinkIcon"],"sources":["../../src/components/TooltipTrigger.tsx"],"sourcesContent":["import React, {\n\tuseEffect,\n\tuseId,\n\tuseState,\n\ttype AnchorHTMLAttributes,\n\ttype ReactNode,\n} from 'react'\n\nimport s from './TooltipTrigger.module.css'\nimport { ExternalLinkIcon } from './icons/ExternalLinkIcon'\n\ninterface Props {\n\tTriggerElem: 'a' | 'button'\n\tonClick?: (event: React.MouseEvent) => void\n\thref?: string\n\tchildren?: ReactNode\n\tclassName?: string\n\ttooltipText?: string\n\tnewWindow?: boolean\n\ttooltipPosition?: TooltipPosition\n\tdangerouslySetInnerHTML?: AnchorHTMLAttributes<HTMLAnchorElement>['dangerouslySetInnerHTML']\n}\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right'\n\nexport function TooltipTrigger({\n\tTriggerElem,\n\tonClick,\n\tchildren,\n\tclassName,\n\ttooltipText,\n\thref,\n\tnewWindow,\n\tdangerouslySetInnerHTML,\n\ttooltipPosition = 'top',\n}: Props) {\n\tconst [isForcedShut, setIsForcedShut] = useState(false)\n\tconst [isHovered, setIsHovered] = useState(false)\n\tconst [isFocused, setIsFocused] = useState(false)\n\tconst tooltipId = useId()\n\n\tuseEffect(() => {\n\t\tfunction handler(e: KeyboardEvent) {\n\t\t\tif (e.key === 'Escape' && (isHovered || isFocused)) {\n\t\t\t\te.stopPropagation()\n\t\t\t\tsetIsForcedShut(true)\n\t\t\t}\n\t\t}\n\t\tdocument.addEventListener('keyup', handler)\n\t\treturn () => document.removeEventListener('keyup', handler)\n\t}, [isHovered, isFocused])\n\n\tfunction onBlur() {\n\t\tsetIsForcedShut(false)\n\t\tsetIsFocused(false)\n\t}\n\tfunction onFocus() {\n\t\tsetIsFocused(true)\n\t}\n\tfunction onMouseEnter() {\n\t\tsetIsForcedShut(false)\n\t\tsetIsHovered(true)\n\t}\n\tfunction onMouseLeave() {\n\t\tsetIsHovered(false)\n\t\tif (isFocused) {\n\t\t\tsetIsForcedShut(true)\n\t\t}\n\t}\n\n\tfunction onKeyUp(e: React.KeyboardEvent) {\n\t\tif (!onClick) return\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tonClick?.(e as any)\n\t\t}\n\t}\n\n\treturn (\n\t\t<span className={s.wrapper}>\n\t\t\t{TriggerElem === 'button' && (\n\t\t\t\t<button\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tonKeyUp={onKeyUp}\n\t\t\t\t\tonMouseEnter={onMouseEnter}\n\t\t\t\t\tonMouseLeave={onMouseLeave}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\taria-describedby={tooltipId}\n\t\t\t\t\tclassName={[className, s.TriggerElem].join(' ')}\n\t\t\t\t\tdangerouslySetInnerHTML={dangerouslySetInnerHTML}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</button>\n\t\t\t)}\n\t\t\t{TriggerElem === 'a' && (\n\t\t\t\t<a\n\t\t\t\t\thref={href}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\
|
|
1
|
+
{"version":3,"file":"TooltipTrigger.cjs","names":["s","ExternalLinkIcon"],"sources":["../../src/components/TooltipTrigger.tsx"],"sourcesContent":["import React, {\n\tuseEffect,\n\tuseId,\n\tuseState,\n\ttype AnchorHTMLAttributes,\n\ttype ReactNode,\n} from 'react'\n\nimport s from './TooltipTrigger.module.css'\nimport { ExternalLinkIcon } from './icons/ExternalLinkIcon'\n\ninterface Props {\n\tTriggerElem: 'a' | 'button'\n\tonClick?: (event: React.MouseEvent) => void\n\thref?: string\n\tchildren?: ReactNode\n\tclassName?: string\n\ttooltipText?: string\n\tnewWindow?: boolean\n\ttooltipPosition?: TooltipPosition\n\tdangerouslySetInnerHTML?: AnchorHTMLAttributes<HTMLAnchorElement>['dangerouslySetInnerHTML']\n}\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right'\n\nexport function TooltipTrigger({\n\tTriggerElem,\n\tonClick,\n\tchildren,\n\tclassName,\n\ttooltipText,\n\thref,\n\tnewWindow,\n\tdangerouslySetInnerHTML,\n\ttooltipPosition = 'top',\n}: Props) {\n\tconst [isForcedShut, setIsForcedShut] = useState(false)\n\tconst [isHovered, setIsHovered] = useState(false)\n\tconst [isFocused, setIsFocused] = useState(false)\n\tconst tooltipId = useId()\n\n\tuseEffect(() => {\n\t\tfunction handler(e: KeyboardEvent) {\n\t\t\tif (e.key === 'Escape' && (isHovered || isFocused)) {\n\t\t\t\te.stopPropagation()\n\t\t\t\tsetIsForcedShut(true)\n\t\t\t}\n\t\t}\n\t\tdocument.addEventListener('keyup', handler)\n\t\treturn () => document.removeEventListener('keyup', handler)\n\t}, [isHovered, isFocused])\n\n\tfunction onBlur() {\n\t\tsetIsForcedShut(false)\n\t\tsetIsFocused(false)\n\t}\n\tfunction onFocus() {\n\t\tsetIsFocused(true)\n\t}\n\tfunction onMouseEnter() {\n\t\tsetIsForcedShut(false)\n\t\tsetIsHovered(true)\n\t}\n\tfunction onMouseLeave() {\n\t\tsetIsHovered(false)\n\t\tif (isFocused) {\n\t\t\tsetIsForcedShut(true)\n\t\t}\n\t}\n\n\tfunction onKeyUp(e: React.KeyboardEvent) {\n\t\tif (!onClick) return\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tonClick?.(e as any)\n\t\t}\n\t}\n\n\treturn (\n\t\t<span className={s.wrapper}>\n\t\t\t{TriggerElem === 'button' && (\n\t\t\t\t<button\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tonKeyUp={onKeyUp}\n\t\t\t\t\tonMouseEnter={onMouseEnter}\n\t\t\t\t\tonMouseLeave={onMouseLeave}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\taria-describedby={tooltipId}\n\t\t\t\t\tclassName={[className, s.TriggerElem].join(' ')}\n\t\t\t\t\tdangerouslySetInnerHTML={dangerouslySetInnerHTML}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</button>\n\t\t\t)}\n\t\t\t{TriggerElem === 'a' && (\n\t\t\t\t<a\n\t\t\t\t\thref={href}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tonMouseEnter={onMouseEnter}\n\t\t\t\t\tonMouseLeave={onMouseLeave}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\taria-describedby={tooltipId}\n\t\t\t\t\tclassName={[className, s.TriggerElem].join(' ')}\n\t\t\t\t\ttarget={newWindow ? '_blank' : undefined}\n\t\t\t\t\trel={newWindow ? 'noreferrer' : undefined}\n\t\t\t\t>\n\t\t\t\t\t<span style={{ whiteSpace: 'nowrap' }}>\n\t\t\t\t\t\t{dangerouslySetInnerHTML ? (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{ whiteSpace: 'initial' }}\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={dangerouslySetInnerHTML}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span style={{ whiteSpace: 'initial' }}>{children}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{newWindow && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t<ExternalLinkIcon className={s.externalLinkIcon} />\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t</a>\n\t\t\t)}\n\n\t\t\t<span\n\t\t\t\tid={tooltipId}\n\t\t\t\tclassName={s.tooltip}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tdata-force-closed={isForcedShut}\n\t\t\t\tdata-tooltip-position={tooltipPosition}\n\t\t\t>\n\t\t\t\t{tooltipText}\n\t\t\t</span>\n\t\t</span>\n\t)\n}\n"],"mappings":";;;;;;;;AAyBA,SAAgB,eAAe,EAC9B,aACA,SACA,UACA,WACA,aACA,MACA,WACA,yBACA,kBAAkB,SACT;CACT,MAAM,CAAC,cAAc,uCAA4B,MAAM;CACvD,MAAM,CAAC,WAAW,oCAAyB,MAAM;CACjD,MAAM,CAAC,WAAW,oCAAyB,MAAM;CACjD,MAAM,8BAAmB;AAEzB,4BAAgB;EACf,SAAS,QAAQ,GAAkB;AAClC,OAAI,EAAE,QAAQ,aAAa,aAAa,YAAY;AACnD,MAAE,iBAAiB;AACnB,oBAAgB,KAAK;;;AAGvB,WAAS,iBAAiB,SAAS,QAAQ;AAC3C,eAAa,SAAS,oBAAoB,SAAS,QAAQ;IACzD,CAAC,WAAW,UAAU,CAAC;CAE1B,SAAS,SAAS;AACjB,kBAAgB,MAAM;AACtB,eAAa,MAAM;;CAEpB,SAAS,UAAU;AAClB,eAAa,KAAK;;CAEnB,SAAS,eAAe;AACvB,kBAAgB,MAAM;AACtB,eAAa,KAAK;;CAEnB,SAAS,eAAe;AACvB,eAAa,MAAM;AACnB,MAAI,WAAW;AACd,mBAAgB,KAAK;;;CAIvB,SAAS,QAAQ,GAAwB;AACxC,MAAI,CAAC,QAAS;AACd,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACvC,KAAE,gBAAgB;AAClB,aAAU,EAAS;;;AAIrB,QACC,4CAAC,UAAK,WAAWA,iDAAE,WACjB,gBAAgB,YAChB,4CAAC;EACS;EACA;EACK;EACA;EACL;EACD;EACR,oBAAkB;EAClB,WAAW,CAAC,WAAWA,iDAAE,YAAY,CAAC,KAAK,IAAI;EACtB;IAExB,SACO,EAET,gBAAgB,OAChB,4CAAC;EACM;EACG;EACK;EACA;EACL;EACD;EACR,oBAAkB;EAClB,WAAW,CAAC,WAAWA,iDAAE,YAAY,CAAC,KAAK,IAAI;EAC/C,QAAQ,YAAY,WAAW;EAC/B,KAAK,YAAY,eAAe;IAEhC,4CAAC,UAAK,OAAO,EAAE,YAAY,UAAU,IACnC,0BACA,4CAAC;EACA,OAAO,EAAE,YAAY,WAAW;EACP;GACxB,GAEF,4CAAC,UAAK,OAAO,EAAE,YAAY,WAAW,IAAG,SAAgB,EAEzD,aACA,0EAAE,QAED,4CAACC,6CAAiB,WAAWD,iDAAE,mBAAoB,CACjD,CAEE,CACJ,EAGL,4CAAC;EACA,IAAI;EACJ,WAAWA,iDAAE;EACb,eAAY;EACZ,qBAAmB;EACnB,yBAAuB;IAEtB,YACK,CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipTrigger.mjs","names":[],"sources":["../../src/components/TooltipTrigger.tsx"],"sourcesContent":["import React, {\n\tuseEffect,\n\tuseId,\n\tuseState,\n\ttype AnchorHTMLAttributes,\n\ttype ReactNode,\n} from 'react'\n\nimport s from './TooltipTrigger.module.css'\nimport { ExternalLinkIcon } from './icons/ExternalLinkIcon'\n\ninterface Props {\n\tTriggerElem: 'a' | 'button'\n\tonClick?: (event: React.MouseEvent) => void\n\thref?: string\n\tchildren?: ReactNode\n\tclassName?: string\n\ttooltipText?: string\n\tnewWindow?: boolean\n\ttooltipPosition?: TooltipPosition\n\tdangerouslySetInnerHTML?: AnchorHTMLAttributes<HTMLAnchorElement>['dangerouslySetInnerHTML']\n}\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right'\n\nexport function TooltipTrigger({\n\tTriggerElem,\n\tonClick,\n\tchildren,\n\tclassName,\n\ttooltipText,\n\thref,\n\tnewWindow,\n\tdangerouslySetInnerHTML,\n\ttooltipPosition = 'top',\n}: Props) {\n\tconst [isForcedShut, setIsForcedShut] = useState(false)\n\tconst [isHovered, setIsHovered] = useState(false)\n\tconst [isFocused, setIsFocused] = useState(false)\n\tconst tooltipId = useId()\n\n\tuseEffect(() => {\n\t\tfunction handler(e: KeyboardEvent) {\n\t\t\tif (e.key === 'Escape' && (isHovered || isFocused)) {\n\t\t\t\te.stopPropagation()\n\t\t\t\tsetIsForcedShut(true)\n\t\t\t}\n\t\t}\n\t\tdocument.addEventListener('keyup', handler)\n\t\treturn () => document.removeEventListener('keyup', handler)\n\t}, [isHovered, isFocused])\n\n\tfunction onBlur() {\n\t\tsetIsForcedShut(false)\n\t\tsetIsFocused(false)\n\t}\n\tfunction onFocus() {\n\t\tsetIsFocused(true)\n\t}\n\tfunction onMouseEnter() {\n\t\tsetIsForcedShut(false)\n\t\tsetIsHovered(true)\n\t}\n\tfunction onMouseLeave() {\n\t\tsetIsHovered(false)\n\t\tif (isFocused) {\n\t\t\tsetIsForcedShut(true)\n\t\t}\n\t}\n\n\tfunction onKeyUp(e: React.KeyboardEvent) {\n\t\tif (!onClick) return\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tonClick?.(e as any)\n\t\t}\n\t}\n\n\treturn (\n\t\t<span className={s.wrapper}>\n\t\t\t{TriggerElem === 'button' && (\n\t\t\t\t<button\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tonKeyUp={onKeyUp}\n\t\t\t\t\tonMouseEnter={onMouseEnter}\n\t\t\t\t\tonMouseLeave={onMouseLeave}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\taria-describedby={tooltipId}\n\t\t\t\t\tclassName={[className, s.TriggerElem].join(' ')}\n\t\t\t\t\tdangerouslySetInnerHTML={dangerouslySetInnerHTML}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</button>\n\t\t\t)}\n\t\t\t{TriggerElem === 'a' && (\n\t\t\t\t<a\n\t\t\t\t\thref={href}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\
|
|
1
|
+
{"version":3,"file":"TooltipTrigger.mjs","names":[],"sources":["../../src/components/TooltipTrigger.tsx"],"sourcesContent":["import React, {\n\tuseEffect,\n\tuseId,\n\tuseState,\n\ttype AnchorHTMLAttributes,\n\ttype ReactNode,\n} from 'react'\n\nimport s from './TooltipTrigger.module.css'\nimport { ExternalLinkIcon } from './icons/ExternalLinkIcon'\n\ninterface Props {\n\tTriggerElem: 'a' | 'button'\n\tonClick?: (event: React.MouseEvent) => void\n\thref?: string\n\tchildren?: ReactNode\n\tclassName?: string\n\ttooltipText?: string\n\tnewWindow?: boolean\n\ttooltipPosition?: TooltipPosition\n\tdangerouslySetInnerHTML?: AnchorHTMLAttributes<HTMLAnchorElement>['dangerouslySetInnerHTML']\n}\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right'\n\nexport function TooltipTrigger({\n\tTriggerElem,\n\tonClick,\n\tchildren,\n\tclassName,\n\ttooltipText,\n\thref,\n\tnewWindow,\n\tdangerouslySetInnerHTML,\n\ttooltipPosition = 'top',\n}: Props) {\n\tconst [isForcedShut, setIsForcedShut] = useState(false)\n\tconst [isHovered, setIsHovered] = useState(false)\n\tconst [isFocused, setIsFocused] = useState(false)\n\tconst tooltipId = useId()\n\n\tuseEffect(() => {\n\t\tfunction handler(e: KeyboardEvent) {\n\t\t\tif (e.key === 'Escape' && (isHovered || isFocused)) {\n\t\t\t\te.stopPropagation()\n\t\t\t\tsetIsForcedShut(true)\n\t\t\t}\n\t\t}\n\t\tdocument.addEventListener('keyup', handler)\n\t\treturn () => document.removeEventListener('keyup', handler)\n\t}, [isHovered, isFocused])\n\n\tfunction onBlur() {\n\t\tsetIsForcedShut(false)\n\t\tsetIsFocused(false)\n\t}\n\tfunction onFocus() {\n\t\tsetIsFocused(true)\n\t}\n\tfunction onMouseEnter() {\n\t\tsetIsForcedShut(false)\n\t\tsetIsHovered(true)\n\t}\n\tfunction onMouseLeave() {\n\t\tsetIsHovered(false)\n\t\tif (isFocused) {\n\t\t\tsetIsForcedShut(true)\n\t\t}\n\t}\n\n\tfunction onKeyUp(e: React.KeyboardEvent) {\n\t\tif (!onClick) return\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault()\n\t\t\tonClick?.(e as any)\n\t\t}\n\t}\n\n\treturn (\n\t\t<span className={s.wrapper}>\n\t\t\t{TriggerElem === 'button' && (\n\t\t\t\t<button\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tonKeyUp={onKeyUp}\n\t\t\t\t\tonMouseEnter={onMouseEnter}\n\t\t\t\t\tonMouseLeave={onMouseLeave}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\taria-describedby={tooltipId}\n\t\t\t\t\tclassName={[className, s.TriggerElem].join(' ')}\n\t\t\t\t\tdangerouslySetInnerHTML={dangerouslySetInnerHTML}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</button>\n\t\t\t)}\n\t\t\t{TriggerElem === 'a' && (\n\t\t\t\t<a\n\t\t\t\t\thref={href}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tonMouseEnter={onMouseEnter}\n\t\t\t\t\tonMouseLeave={onMouseLeave}\n\t\t\t\t\tonFocus={onFocus}\n\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\taria-describedby={tooltipId}\n\t\t\t\t\tclassName={[className, s.TriggerElem].join(' ')}\n\t\t\t\t\ttarget={newWindow ? '_blank' : undefined}\n\t\t\t\t\trel={newWindow ? 'noreferrer' : undefined}\n\t\t\t\t>\n\t\t\t\t\t<span style={{ whiteSpace: 'nowrap' }}>\n\t\t\t\t\t\t{dangerouslySetInnerHTML ? (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{ whiteSpace: 'initial' }}\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={dangerouslySetInnerHTML}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span style={{ whiteSpace: 'initial' }}>{children}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{newWindow && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t<ExternalLinkIcon className={s.externalLinkIcon} />\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t</a>\n\t\t\t)}\n\n\t\t\t<span\n\t\t\t\tid={tooltipId}\n\t\t\t\tclassName={s.tooltip}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tdata-force-closed={isForcedShut}\n\t\t\t\tdata-tooltip-position={tooltipPosition}\n\t\t\t>\n\t\t\t\t{tooltipText}\n\t\t\t</span>\n\t\t</span>\n\t)\n}\n"],"mappings":";;;;;AAyBA,SAAgB,eAAe,EAC9B,aACA,SACA,UACA,WACA,aACA,MACA,WACA,yBACA,kBAAkB,SACT;CACT,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,YAAY,OAAO;AAEzB,iBAAgB;EACf,SAAS,QAAQ,GAAkB;AAClC,OAAI,EAAE,QAAQ,aAAa,aAAa,YAAY;AACnD,MAAE,iBAAiB;AACnB,oBAAgB,KAAK;;;AAGvB,WAAS,iBAAiB,SAAS,QAAQ;AAC3C,eAAa,SAAS,oBAAoB,SAAS,QAAQ;IACzD,CAAC,WAAW,UAAU,CAAC;CAE1B,SAAS,SAAS;AACjB,kBAAgB,MAAM;AACtB,eAAa,MAAM;;CAEpB,SAAS,UAAU;AAClB,eAAa,KAAK;;CAEnB,SAAS,eAAe;AACvB,kBAAgB,MAAM;AACtB,eAAa,KAAK;;CAEnB,SAAS,eAAe;AACvB,eAAa,MAAM;AACnB,MAAI,WAAW;AACd,mBAAgB,KAAK;;;CAIvB,SAAS,QAAQ,GAAwB;AACxC,MAAI,CAAC,QAAS;AACd,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACvC,KAAE,gBAAgB;AAClB,aAAU,EAAS;;;AAIrB,QACC,oCAAC,UAAK,WAAW,EAAE,WACjB,gBAAgB,YAChB,oCAAC;EACS;EACA;EACK;EACA;EACL;EACD;EACR,oBAAkB;EAClB,WAAW,CAAC,WAAW,EAAE,YAAY,CAAC,KAAK,IAAI;EACtB;IAExB,SACO,EAET,gBAAgB,OAChB,oCAAC;EACM;EACG;EACK;EACA;EACL;EACD;EACR,oBAAkB;EAClB,WAAW,CAAC,WAAW,EAAE,YAAY,CAAC,KAAK,IAAI;EAC/C,QAAQ,YAAY,WAAW;EAC/B,KAAK,YAAY,eAAe;IAEhC,oCAAC,UAAK,OAAO,EAAE,YAAY,UAAU,IACnC,0BACA,oCAAC;EACA,OAAO,EAAE,YAAY,WAAW;EACP;GACxB,GAEF,oCAAC,UAAK,OAAO,EAAE,YAAY,WAAW,IAAG,SAAgB,EAEzD,aACA,0DAAE,QAED,oCAAC,oBAAiB,WAAW,EAAE,mBAAoB,CACjD,CAEE,CACJ,EAGL,oCAAC;EACA,IAAI;EACJ,WAAW,EAAE;EACb,eAAY;EACZ,qBAAmB;EACnB,yBAAuB;IAEtB,YACK,CACD"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "storybook-addon-dependency-previews",
|
|
3
3
|
"description": "A Storybook 10 addon to automatically generate a visual dependency tree for your components.",
|
|
4
|
-
"version": "0.5.4
|
|
4
|
+
"version": "0.5.4",
|
|
5
5
|
"private": false,
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"homepage": "https://dependency-previews-storybook.netlify.app/?path=/docs/04-templates-home-template--docs",
|