storybook-addon-dependency-previews 0.5.2 → 0.5.3
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.
|
@@ -9,12 +9,22 @@ react = require_rolldown_runtime.__toESM(react);
|
|
|
9
9
|
function PrimaryPreview({ storyInfo }) {
|
|
10
10
|
const [hasLoaded, setHasLoaded] = (0, react.useState)(false);
|
|
11
11
|
const { csfModule, primaryExport, primaryId, error, isLoading } = require_useDynamicStory.useDynamicStory(storyInfo);
|
|
12
|
+
(0, react.useEffect)(() => {
|
|
13
|
+
setHasLoaded(false);
|
|
14
|
+
}, [primaryId]);
|
|
12
15
|
const message = error || isLoading && "Loading preview…" || !csfModule && "Module could not be loaded." || !primaryExport && "No story export found.";
|
|
13
16
|
if (message) return /* @__PURE__ */ react.default.createElement("p", { style: {
|
|
14
17
|
opacity: .7,
|
|
15
18
|
whiteSpace: "pre-wrap"
|
|
16
19
|
} }, message);
|
|
17
|
-
return /* @__PURE__ */ react.default.createElement("div",
|
|
20
|
+
return /* @__PURE__ */ react.default.createElement("div", null, !hasLoaded && /* @__PURE__ */ react.default.createElement("div", { style: {
|
|
21
|
+
display: "grid",
|
|
22
|
+
placeItems: "center",
|
|
23
|
+
padding: "2rem 0"
|
|
24
|
+
} }, /* @__PURE__ */ react.default.createElement(require_LoadingRipples.LoadingRipples, null)), /* @__PURE__ */ react.default.createElement("div", { style: {
|
|
25
|
+
height: hasLoaded ? "auto" : 0,
|
|
26
|
+
overflow: "hidden"
|
|
27
|
+
} }, /* @__PURE__ */ react.default.createElement(require_FullParityStory.FullParityStory, {
|
|
18
28
|
storyId: primaryId,
|
|
19
29
|
args: primaryExport.args,
|
|
20
30
|
onLoad: () => setHasLoaded(true)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimaryPreview.cjs","names":["useDynamicStory","LoadingRipples","FullParityStory"],"sources":["../../src/components/PrimaryPreview.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useDynamicStory } from '../hooks/useDynamicStory'\nimport type { StoryInfo } from '../types'\nimport { FullParityStory } from './FullParityStory'\nimport { LoadingRipples } from './icons/LoadingRipples'\n\ninterface PropsForPrimaryPreview {\n\tstoryInfo: StoryInfo\n}\n\nexport function PrimaryPreview({ storyInfo }: PropsForPrimaryPreview) {\n\tconst [hasLoaded, setHasLoaded] = useState(false)\n\tconst { csfModule, primaryExport, primaryId, error, isLoading } =\n\t\tuseDynamicStory(storyInfo)\n\tconst message =\n\t\terror ||\n\t\t(isLoading && 'Loading preview…') ||\n\t\t(!csfModule && 'Module could not be loaded.') ||\n\t\t(!primaryExport && 'No story export found.')\n\n\t// `pre-wrap` preserves the line breaks in multi-line diagnostics like the\n\t// `buildMissingStoryModuleError` output (lookup key, key count, sample keys).\n\t// Single-line statuses (\"Loading preview…\", \"Module could not be loaded.\")\n\t// render identically either way.\n\tif (message)\n\t\treturn (\n\t\t\t<p style={{ opacity: 0.7, whiteSpace: 'pre-wrap' }}>{message}</p>\n\t\t)\n\n\
|
|
1
|
+
{"version":3,"file":"PrimaryPreview.cjs","names":["useDynamicStory","LoadingRipples","FullParityStory"],"sources":["../../src/components/PrimaryPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { useDynamicStory } from '../hooks/useDynamicStory'\nimport type { StoryInfo } from '../types'\nimport { FullParityStory } from './FullParityStory'\nimport { LoadingRipples } from './icons/LoadingRipples'\n\ninterface PropsForPrimaryPreview {\n\tstoryInfo: StoryInfo\n}\n\nexport function PrimaryPreview({ storyInfo }: PropsForPrimaryPreview) {\n\tconst [hasLoaded, setHasLoaded] = useState(false)\n\tconst { csfModule, primaryExport, primaryId, error, isLoading } =\n\t\tuseDynamicStory(storyInfo)\n\t// Reset `hasLoaded` whenever the rendered story changes — FullParityStory\n\t// will swap its iframe `src` and re-fire `onLoad`. Without this, the second\n\t// (and subsequent) story load would re-render the empty bordered iframe at\n\t// full height because `hasLoaded` would still be true from the previous\n\t// story. Keyed on `primaryId` because that's what feeds the iframe `src`;\n\t// if it changes the iframe will reload.\n\tuseEffect(() => {\n\t\tsetHasLoaded(false)\n\t}, [primaryId])\n\tconst message =\n\t\terror ||\n\t\t(isLoading && 'Loading preview…') ||\n\t\t(!csfModule && 'Module could not be loaded.') ||\n\t\t(!primaryExport && 'No story export found.')\n\n\t// `pre-wrap` preserves the line breaks in multi-line diagnostics like the\n\t// `buildMissingStoryModuleError` output (lookup key, key count, sample keys).\n\t// Single-line statuses (\"Loading preview…\", \"Module could not be loaded.\")\n\t// render identically either way.\n\tif (message)\n\t\treturn (\n\t\t\t<p style={{ opacity: 0.7, whiteSpace: 'pre-wrap' }}>{message}</p>\n\t\t)\n\n\t// While the iframe is still loading, collapse its wrapper to zero height so\n\t// FullParityStory's default-sized empty bordered box doesn't render as a big\n\t// blank panel. The iframe itself is still in the DOM and loads normally —\n\t// height:0/overflow:hidden just clips its visual footprint until iframe-resizer\n\t// measures the real content and `onLoad` flips `hasLoaded` to true.\n\t//\n\t// Inline styles intentionally — earlier Tailwind grid classes (grid-cols-1,\n\t// place-items-center) only resolve when the consumer's Tailwind config scans\n\t// the addon's dist, which most installs don't. Inline styles ship in the bundle\n\t// and work in every consumer regardless of CSS toolchain.\n\treturn (\n\t\t<div>\n\t\t\t{!hasLoaded && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'grid',\n\t\t\t\t\t\tplaceItems: 'center',\n\t\t\t\t\t\tpadding: '2rem 0',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<LoadingRipples />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: hasLoaded ? 'auto' : 0,\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<FullParityStory\n\t\t\t\t\tstoryId={primaryId!}\n\t\t\t\t\targs={primaryExport.args}\n\t\t\t\t\tonLoad={() => setHasLoaded(true)}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,eAAe,EAAE,aAAqC;CACrE,MAAM,CAAC,WAAW,oCAAyB,MAAM;CACjD,MAAM,EAAE,WAAW,eAAe,WAAW,OAAO,cACnDA,wCAAgB,UAAU;AAO3B,4BAAgB;AACf,eAAa,MAAM;IACjB,CAAC,UAAU,CAAC;CACf,MAAM,UACL,SACC,aAAa,sBACb,CAAC,aAAa,iCACd,CAAC,iBAAiB;AAMpB,KAAI,QACH,QACC,4CAAC,OAAE,OAAO;EAAE,SAAS;EAAK,YAAY;EAAY,IAAG,QAAY;AAanE,QACC,4CAAC,aACC,CAAC,aACD,4CAAC,SACA,OAAO;EACN,SAAS;EACT,YAAY;EACZ,SAAS;EACT,IAED,4CAACC,4CAAiB,CACb,EAEP,4CAAC,SACA,OAAO;EACN,QAAQ,YAAY,SAAS;EAC7B,UAAU;EACV,IAED,4CAACC;EACA,SAAS;EACT,MAAM,cAAc;EACpB,cAAc,aAAa,KAAK;GAC/B,CACG,CACD"}
|
|
@@ -1,18 +1,28 @@
|
|
|
1
1
|
import { useDynamicStory } from "../hooks/useDynamicStory.mjs";
|
|
2
2
|
import { FullParityStory } from "./FullParityStory.mjs";
|
|
3
3
|
import { LoadingRipples } from "./icons/LoadingRipples.mjs";
|
|
4
|
-
import React, { useState } from "react";
|
|
4
|
+
import React, { useEffect, useState } from "react";
|
|
5
5
|
|
|
6
6
|
//#region src/components/PrimaryPreview.tsx
|
|
7
7
|
function PrimaryPreview({ storyInfo }) {
|
|
8
8
|
const [hasLoaded, setHasLoaded] = useState(false);
|
|
9
9
|
const { csfModule, primaryExport, primaryId, error, isLoading } = useDynamicStory(storyInfo);
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
setHasLoaded(false);
|
|
12
|
+
}, [primaryId]);
|
|
10
13
|
const message = error || isLoading && "Loading preview…" || !csfModule && "Module could not be loaded." || !primaryExport && "No story export found.";
|
|
11
14
|
if (message) return /* @__PURE__ */ React.createElement("p", { style: {
|
|
12
15
|
opacity: .7,
|
|
13
16
|
whiteSpace: "pre-wrap"
|
|
14
17
|
} }, message);
|
|
15
|
-
return /* @__PURE__ */ React.createElement("div",
|
|
18
|
+
return /* @__PURE__ */ React.createElement("div", null, !hasLoaded && /* @__PURE__ */ React.createElement("div", { style: {
|
|
19
|
+
display: "grid",
|
|
20
|
+
placeItems: "center",
|
|
21
|
+
padding: "2rem 0"
|
|
22
|
+
} }, /* @__PURE__ */ React.createElement(LoadingRipples, null)), /* @__PURE__ */ React.createElement("div", { style: {
|
|
23
|
+
height: hasLoaded ? "auto" : 0,
|
|
24
|
+
overflow: "hidden"
|
|
25
|
+
} }, /* @__PURE__ */ React.createElement(FullParityStory, {
|
|
16
26
|
storyId: primaryId,
|
|
17
27
|
args: primaryExport.args,
|
|
18
28
|
onLoad: () => setHasLoaded(true)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimaryPreview.mjs","names":[],"sources":["../../src/components/PrimaryPreview.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useDynamicStory } from '../hooks/useDynamicStory'\nimport type { StoryInfo } from '../types'\nimport { FullParityStory } from './FullParityStory'\nimport { LoadingRipples } from './icons/LoadingRipples'\n\ninterface PropsForPrimaryPreview {\n\tstoryInfo: StoryInfo\n}\n\nexport function PrimaryPreview({ storyInfo }: PropsForPrimaryPreview) {\n\tconst [hasLoaded, setHasLoaded] = useState(false)\n\tconst { csfModule, primaryExport, primaryId, error, isLoading } =\n\t\tuseDynamicStory(storyInfo)\n\tconst message =\n\t\terror ||\n\t\t(isLoading && 'Loading preview…') ||\n\t\t(!csfModule && 'Module could not be loaded.') ||\n\t\t(!primaryExport && 'No story export found.')\n\n\t// `pre-wrap` preserves the line breaks in multi-line diagnostics like the\n\t// `buildMissingStoryModuleError` output (lookup key, key count, sample keys).\n\t// Single-line statuses (\"Loading preview…\", \"Module could not be loaded.\")\n\t// render identically either way.\n\tif (message)\n\t\treturn (\n\t\t\t<p style={{ opacity: 0.7, whiteSpace: 'pre-wrap' }}>{message}</p>\n\t\t)\n\n\
|
|
1
|
+
{"version":3,"file":"PrimaryPreview.mjs","names":[],"sources":["../../src/components/PrimaryPreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { useDynamicStory } from '../hooks/useDynamicStory'\nimport type { StoryInfo } from '../types'\nimport { FullParityStory } from './FullParityStory'\nimport { LoadingRipples } from './icons/LoadingRipples'\n\ninterface PropsForPrimaryPreview {\n\tstoryInfo: StoryInfo\n}\n\nexport function PrimaryPreview({ storyInfo }: PropsForPrimaryPreview) {\n\tconst [hasLoaded, setHasLoaded] = useState(false)\n\tconst { csfModule, primaryExport, primaryId, error, isLoading } =\n\t\tuseDynamicStory(storyInfo)\n\t// Reset `hasLoaded` whenever the rendered story changes — FullParityStory\n\t// will swap its iframe `src` and re-fire `onLoad`. Without this, the second\n\t// (and subsequent) story load would re-render the empty bordered iframe at\n\t// full height because `hasLoaded` would still be true from the previous\n\t// story. Keyed on `primaryId` because that's what feeds the iframe `src`;\n\t// if it changes the iframe will reload.\n\tuseEffect(() => {\n\t\tsetHasLoaded(false)\n\t}, [primaryId])\n\tconst message =\n\t\terror ||\n\t\t(isLoading && 'Loading preview…') ||\n\t\t(!csfModule && 'Module could not be loaded.') ||\n\t\t(!primaryExport && 'No story export found.')\n\n\t// `pre-wrap` preserves the line breaks in multi-line diagnostics like the\n\t// `buildMissingStoryModuleError` output (lookup key, key count, sample keys).\n\t// Single-line statuses (\"Loading preview…\", \"Module could not be loaded.\")\n\t// render identically either way.\n\tif (message)\n\t\treturn (\n\t\t\t<p style={{ opacity: 0.7, whiteSpace: 'pre-wrap' }}>{message}</p>\n\t\t)\n\n\t// While the iframe is still loading, collapse its wrapper to zero height so\n\t// FullParityStory's default-sized empty bordered box doesn't render as a big\n\t// blank panel. The iframe itself is still in the DOM and loads normally —\n\t// height:0/overflow:hidden just clips its visual footprint until iframe-resizer\n\t// measures the real content and `onLoad` flips `hasLoaded` to true.\n\t//\n\t// Inline styles intentionally — earlier Tailwind grid classes (grid-cols-1,\n\t// place-items-center) only resolve when the consumer's Tailwind config scans\n\t// the addon's dist, which most installs don't. Inline styles ship in the bundle\n\t// and work in every consumer regardless of CSS toolchain.\n\treturn (\n\t\t<div>\n\t\t\t{!hasLoaded && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'grid',\n\t\t\t\t\t\tplaceItems: 'center',\n\t\t\t\t\t\tpadding: '2rem 0',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<LoadingRipples />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: hasLoaded ? 'auto' : 0,\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<FullParityStory\n\t\t\t\t\tstoryId={primaryId!}\n\t\t\t\t\targs={primaryExport.args}\n\t\t\t\t\tonLoad={() => setHasLoaded(true)}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;;AAUA,SAAgB,eAAe,EAAE,aAAqC;CACrE,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,EAAE,WAAW,eAAe,WAAW,OAAO,cACnD,gBAAgB,UAAU;AAO3B,iBAAgB;AACf,eAAa,MAAM;IACjB,CAAC,UAAU,CAAC;CACf,MAAM,UACL,SACC,aAAa,sBACb,CAAC,aAAa,iCACd,CAAC,iBAAiB;AAMpB,KAAI,QACH,QACC,oCAAC,OAAE,OAAO;EAAE,SAAS;EAAK,YAAY;EAAY,IAAG,QAAY;AAanE,QACC,oCAAC,aACC,CAAC,aACD,oCAAC,SACA,OAAO;EACN,SAAS;EACT,YAAY;EACZ,SAAS;EACT,IAED,oCAAC,qBAAiB,CACb,EAEP,oCAAC,SACA,OAAO;EACN,QAAQ,YAAY,SAAS;EAC7B,UAAU;EACV,IAED,oCAAC;EACA,SAAS;EACT,MAAM,cAAc;EACpB,cAAc,aAAa,KAAK;GAC/B,CACG,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
|
+
"version": "0.5.3",
|
|
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",
|