@storybook/addon-designs/dist/Figspec-TUXHDRDA.js

Storybook addon for embedding your design preview in addon panel

import {b as b$1}from'./chunk-F4FP4ZIZ.js';import {useState,useEffect,Fragment}from'react';import {FigspecFileViewer,FigspecFrameViewer}from'@figspec/react';import {Placeholder}from'storybook/internal/components';import {css,jsx}from'storybook/theming';var P=css`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
`;function f(e){return e.status!==200?Promise.reject(e.statusText):e.json()}function C(e){if(e.accessToken)return e.accessToken;try{return process.env.STORYBOOK_FIGMA_ACCESS_TOKEN??null}catch{return null}}var b=({config:e})=>{let[t,a]=useState({state:"loading"}),w=async s=>{a({state:"loading"});try{let r=e.url.match(b$1);if(!r)throw new Error(e.url+" is not a valid Figma URL.");let[,,i]=r,d=new URL(e.url).searchParams.get("node-id"),g=C(e);if(!g)throw new Error("Personal Access Token is required.");let m={"X-FIGMA-TOKEN":g},p=new URL(`https://api.figma.com/v1/files/${i}`),c=new URL(`https://api.figma.com/v1/images/${i}`);if(c.searchParams.set("format","svg"),!d){let n=await fetch(p.href,{headers:m,signal:s}).then(l=>f(l)),v=R(n.document);c.searchParams.set("ids",v.map(l=>l.id).join(","));let y=await fetch(c.href,{headers:m,signal:s}).then(l=>f(l));a({state:"fetched",value:{type:"file",props:{documentNode:n,renderedImages:y.images,link:e.url}}});return}p.pathname+="/nodes",p.searchParams.set("ids",d),c.searchParams.set("ids",d);let[T,E]=await Promise.all([fetch(p.href,{headers:m,signal:s}).then(n=>f(n)),fetch(c.href,{headers:m,signal:s}).then(n=>f(n))]);a({state:"fetched",value:{type:"frame",props:{nodes:T,renderedImage:Object.values(E.images)[0],link:e.url}}});}catch(r){if(r instanceof DOMException&&r.code===DOMException.ABORT_ERR)return;console.error(r),a({state:"failed",error:r instanceof Error?r.message:String(r)});}};switch(useEffect(()=>{let s=false,r=()=>{s=true;},i=new AbortController;return w(i.signal).then(r,r),()=>{s||i.abort();}},[e.url]),t.state){case "loading":return jsx(Placeholder,null,jsx(Fragment,null,"Loading Figma file..."));case "failed":return jsx(Placeholder,null,jsx(Fragment,null,"Failed to load Figma file"),jsx(Fragment,null,t.error));case "fetched":return t.value.type==="file"?jsx(FigspecFileViewer,{css:P,...t.value.props}):jsx(FigspecFrameViewer,{css:P,...t.value.props})}},$=b;function R(e){return "absoluteBoundingBox"in e?[e]:!e.children||e.children.length===0?[]:e.children.map(R).reduce((t,a)=>t.concat(a),[])}
export{b as Figspec,$ as default};