@storybook/addon-designs/dist/Figspec-I6MED3MV.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 R=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 N(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[,,n]=r,d=new URL(e.url).searchParams.get("node-id"),g=N(e);if(!g)throw new Error("Personal Access Token is required.");let p={"X-FIGMA-TOKEN":g},m=new URL(`https://api.figma.com/v1/files/${n}`),c=new URL(`https://api.figma.com/v1/images/${n}`);if(c.searchParams.set("format","svg"),!d){let i=await fetch(m.href,{headers:p,signal:s}).then(l=>f(l)),k=P(i.document);c.searchParams.set("ids",k.map(l=>l.id).join(","));let v=await fetch(c.href,{headers:p,signal:s}).then(l=>f(l));a({state:"fetched",value:{type:"file",props:{apiResponse:i,renderedImages:v.images,link:e.url}}});return}m.pathname+="/nodes",m.searchParams.set("ids",d),c.searchParams.set("ids",d);let[T,E]=await Promise.all([fetch(m.href,{headers:p,signal:s}).then(i=>f(i)),fetch(c.href,{headers:p,signal:s}).then(i=>f(i))]);a({state:"fetched",value:{type:"frame",props:{apiResponse: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;},n=new AbortController;return w(n.signal).then(r,r),()=>{s||n.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:R,...t.value.props}):jsx(FigspecFrameViewer,{css:R,...t.value.props})}},$=b;function P(e){return "absoluteBoundingBox"in e?[e]:!e.children||e.children.length===0?[]:e.children.map(P).reduce((t,a)=>t.concat(a),[])}
export{b as Figspec,$ as default};