diff --git a/packages/storybook-addon-designs/package.json b/packages/storybook-addon-designs/package.json index f03ca0b..f8da190 100644 --- a/packages/storybook-addon-designs/package.json +++ b/packages/storybook-addon-designs/package.json @@ -43,7 +43,7 @@ "release": "npm run prepublishOnly && auto shipit" }, "dependencies": { - "@figspec/react": "^1.0.0" + "@figspec/react": "^2.0.0" }, "peerDependencies": { "@storybook/addon-docs": "^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0", diff --git a/packages/storybook-addon-designs/src/manager/components/Figspec.tsx b/packages/storybook-addon-designs/src/manager/components/Figspec.tsx index a8788ca..73ed3e2 100644 --- a/packages/storybook-addon-designs/src/manager/components/Figspec.tsx +++ b/packages/storybook-addon-designs/src/manager/components/Figspec.tsx @@ -32,12 +32,15 @@ type RenderItem = type: "file"; props: Pick< FigspecFileViewerProps, - "documentNode" | "renderedImages" | "link" + "apiResponse" | "renderedImages" | "link" >; } | { type: "frame"; - props: Pick; + props: Pick< + FigspecFrameViewerProps, + "apiResponse" | "renderedImage" | "link" + >; }; type Remote = @@ -139,7 +142,7 @@ export const Figspec: FC = ({ config }) => { value: { type: "file", props: { - documentNode, + apiResponse: documentNode, renderedImages: images.images, link: config.url, }, @@ -168,7 +171,11 @@ export const Figspec: FC = ({ config }) => { value: { type: "frame", props: { - nodes, + // Type mismatch due to different figma-js versions. As that library is + // no longer maintained, upstream should mark this property `unknown` or + // provided its own interface. + apiResponse: + nodes as unknown as FigspecFrameViewerProps["apiResponse"], renderedImage: Object.values(images.images)[0], link: config.url, }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e2ad843..fac3f15 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -59,8 +59,8 @@ importers: packages/storybook-addon-designs: dependencies: '@figspec/react': - specifier: ^1.0.0 - version: 1.0.4(react@18.3.1) + specifier: ^2.0.0 + version: 2.0.1(@types/react@18.3.26)(react@18.3.1) '@storybook/addon-docs': specifier: ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 version: 10.0.0(@types/react@18.3.26)(esbuild@0.25.11)(rollup@4.52.5)(storybook@10.0.0(@testing-library/dom@10.4.1)(prettier@3.6.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@7.1.12(@types/node@22.18.13)))(vite@7.1.12(@types/node@22.18.13)) @@ -352,11 +352,19 @@ packages: '@figspec/components@1.0.3': resolution: {integrity: sha512-fBwHzJ4ouuOUJEi+yBZIrOy+0/fAjB3AeTcIHTT1PRxLz8P63xwC7R0EsIJXhScIcc+PljGmqbbVJCjLsnaGYA==} + '@figspec/components@2.0.5': + resolution: {integrity: sha512-nJ2Ms3Ua8r3f18fWVC6GEAN1qchJ0KheZIV+lPaDjZa4KJW9FXi2Ora2tuPkp8SMFl6uaqibYk7/VwTq+zNQ7A==} + '@figspec/react@1.0.4': resolution: {integrity: sha512-jaPvkIef4d6NjsRiw91OZabrfdPH9FtoPGYcY5mpXjYEcdUqIq1aHtLq3SkMVyVysEapTEJ6yS8amy93MyXBEQ==} peerDependencies: react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + '@figspec/react@2.0.1': + resolution: {integrity: sha512-xflqJ3XQZVzm8+7dsm8OFxVAmBNNA3Mg65sqwNHiq7VRSMSD7qwH4BPsBy07ZaX+9nHeaacBpFZd3Q0aIsISqw==} + peerDependencies: + react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + '@isaacs/cliui@8.0.2': resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -392,9 +400,17 @@ packages: '@lit-labs/react@1.2.1': resolution: {integrity: sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A==} + '@lit-labs/react@2.1.3': + resolution: {integrity: sha512-OD9h2JynerBQUMNzb563jiVpxfvPF0HjQkKY2mx0lpVYvD7F+rtJpOGz6ek+6ufMidV3i+MPT9SX62OKWHFrQg==} + '@lit-labs/ssr-dom-shim@1.4.0': resolution: {integrity: sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==} + '@lit/react@1.0.8': + resolution: {integrity: sha512-p2+YcF+JE67SRX3mMlJ1TKCSTsgyOVdAwd/nxp3NuV1+Cb6MWALbN6nT7Ld4tpmYofcE5kcaSY1YBB9erY+6fw==} + peerDependencies: + '@types/react': 17 || 18 || 19 + '@lit/reactive-element@1.6.3': resolution: {integrity: sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==} @@ -2623,12 +2639,22 @@ snapshots: dependencies: lit: 2.8.0 + '@figspec/components@2.0.5': {} + '@figspec/react@1.0.4(react@18.3.1)': dependencies: '@figspec/components': 1.0.3 '@lit-labs/react': 1.2.1 react: 18.3.1 + '@figspec/react@2.0.1(@types/react@18.3.26)(react@18.3.1)': + dependencies: + '@figspec/components': 2.0.5 + '@lit-labs/react': 2.1.3(@types/react@18.3.26) + react: 18.3.1 + transitivePeerDependencies: + - '@types/react' + '@isaacs/cliui@8.0.2': dependencies: string-width: 5.1.2 @@ -2673,8 +2699,18 @@ snapshots: '@lit-labs/react@1.2.1': {} + '@lit-labs/react@2.1.3(@types/react@18.3.26)': + dependencies: + '@lit/react': 1.0.8(@types/react@18.3.26) + transitivePeerDependencies: + - '@types/react' + '@lit-labs/ssr-dom-shim@1.4.0': {} + '@lit/react@1.0.8(@types/react@18.3.26)': + dependencies: + '@types/react': 18.3.26 + '@lit/reactive-element@1.6.3': dependencies: '@lit-labs/ssr-dom-shim': 1.4.0