Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@storybook/addon-designs

Package Overview
Dependencies
Maintainers
11
Versions
45
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/addon-designs - npm Package Compare versions

Comparing version 8.0.2 to 8.0.3--canary.240.2b4de44.0

4

dist/blocks.js

@@ -34,3 +34,3 @@ 'use strict';

z-index: 1;
`;});var $,ke,B,L=N(()=>{S();$=/https:\/\/([w.-]+.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/,ke=e=>$.test(e),B=({config:e})=>{let o=p.useMemo(()=>ke(e.url)?{url:`https://www.figma.com/embed?embed_host=${e.embedHost||location.hostname}&url=${e.url}`,allowFullscreen:e.allowFullscreen}:(console.warn(`[storybook-addon-designs] The URL you specified is not valid Figma URL.
`;});var $,ke,B,L=N(()=>{S();$=/https:\/\/[\w.-]+\.?figma.com\/([\w-]+)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/,ke=e=>$.test(e),B=({config:e})=>{let o=p.useMemo(()=>ke(e.url)?{url:`https://www.figma.com/embed?embed_host=${e.embedHost||location.hostname}&url=${e.url}`,allowFullscreen:e.allowFullscreen}:(console.warn(`[storybook-addon-designs] The URL you specified is not valid Figma URL.
The addon fallbacks to normal iframe mode.For more detail, please check <https://www.figma.com/developers/embed>.`),e),[e.url,e.allowFullscreen,e.embedHost]);return theming.jsx(P,{defer:!0,config:o})};});var q={};Fe(q,{Figspec:()=>E,default:()=>Ee});function D(e){return e.status!==200?Promise.reject(e.statusText):e.json()}function De(e){if(e.accessToken)return e.accessToken;try{return process.env.STORYBOOK_FIGMA_ACCESS_TOKEN??null}catch{return null}}function G(e){return "absoluteBoundingBox"in e?[e]:!e.children||e.children.length===0?[]:e.children.map(G).reduce((o,t)=>o.concat(t),[])}var X,E,Ee,H=N(()=>{L();X=theming.css`

@@ -42,3 +42,3 @@ position: absolute;

left: 0;
`;E=({config:e})=>{let[o,t]=p.useState({state:"loading"}),r=async n=>{t({state:"loading"});try{let s=e.url.match($);if(!s)throw new Error(e.url+" is not a valid Figma URL.");let[,,,a]=s,u=new URL(e.url).searchParams.get("node-id"),F=De(e);if(!F)throw new Error("Personal Access Token is required.");let c={"X-FIGMA-TOKEN":F},f=new URL(`https://api.figma.com/v1/files/${a}`),i=new URL(`https://api.figma.com/v1/images/${a}`);if(i.searchParams.set("format","svg"),!u){let v=await fetch(f.href,{headers:c,signal:n}).then(k=>D(k)),ue=G(v.document);i.searchParams.set("ids",ue.map(k=>k.id).join(","));let ge=await fetch(i.href,{headers:c,signal:n}).then(k=>D(k));t({state:"fetched",value:{type:"file",props:{documentNode:v,renderedImages:ge.images,link:e.url}}});return}f.pathname+="/nodes",f.searchParams.set("ids",u),i.searchParams.set("ids",u);let[g,y]=await Promise.all([fetch(f.href,{headers:c,signal:n}).then(v=>D(v)),fetch(i.href,{headers:c,signal:n}).then(v=>D(v))]);t({state:"fetched",value:{type:"frame",props:{nodes:g,renderedImage:Object.values(y.images)[0],link:e.url}}});}catch(s){if(s instanceof DOMException&&s.code===DOMException.ABORT_ERR)return;console.error(s),t({state:"failed",error:s instanceof Error?s.message:String(s)});}};switch(p.useEffect(()=>{let n=!1,s=()=>{n=!0;},a=new AbortController;return r(a.signal).then(s,s),()=>{n||a.abort();}},[e.url]),o.state){case"loading":return theming.jsx(components.Placeholder,null,theming.jsx(p.Fragment,null,"Loading Figma file..."));case"failed":return theming.jsx(components.Placeholder,null,theming.jsx(p.Fragment,null,"Failed to load Figma file"),theming.jsx(p.Fragment,null,o.error));case"fetched":return o.value.type==="file"?theming.jsx(react.FigspecFileViewer,{css:X,...o.value.props}):theming.jsx(react.FigspecFrameViewer,{css:X,...o.value.props})}},Ee=E;});L();H();S();var Q=(e,o)=>{let[t,r]=p.useState([0,0]),[n,s]=p.useState(!1),a=p.useCallback(i=>{i.button===0&&(r([i.screenX,i.screenY]),s(!0));},[s,r]),l=p.useCallback(i=>{let g=i.touches[0];r([g.screenX,g.screenY]),s(!0);},[s,r]),u=p.useCallback(i=>{n&&r(g=>(e([i[0]-g[0],i[1]-g[1]]),i));},[r,n,...o]),F=p.useCallback(i=>{let{screenX:g,screenY:y}=i;u([g,y]);},[u]),c=p.useCallback(i=>{let{screenX:g,screenY:y}=i.touches[0];u([g,y]);},[r,n,...o]),f=p.useCallback(()=>{r([0,0]),s(!1);},[s,r]);return {onMouseDown:a,onMouseMove:F,onMouseUp:f,onMouseLeave:f,onTouchStart:l,onTouchMove:c,onTouchCancel:f,onTouchEnd:f}};var oe=({children:e,className:o,style:t,defaultValue:r,value:n,onChange:s})=>{let[a,l]=p.useState([0,0]);p.useEffect(()=>{l(r||n||[0,0]);},[r]);let u=Q(c=>{s&&s(c),l(f=>[f[0]+c[0],f[1]+c[1]]);},[l,s]),F=p.useMemo(()=>{let c=n||a;return {transform:`translate(${c[0]}px, ${c[1]}px)`}},[n,a]);return theming.jsx("div",{css:Ne,className:o,style:t,...u},theming.jsx("div",{css:Ue,style:F},e))};var Ne=theming.css`
`;E=({config:e})=>{let[o,t]=p.useState({state:"loading"}),r=async n=>{t({state:"loading"});try{let s=e.url.match($);if(!s)throw new Error(e.url+" is not a valid Figma URL.");let[,,a]=s,u=new URL(e.url).searchParams.get("node-id"),F=De(e);if(!F)throw new Error("Personal Access Token is required.");let c={"X-FIGMA-TOKEN":F},f=new URL(`https://api.figma.com/v1/files/${a}`),i=new URL(`https://api.figma.com/v1/images/${a}`);if(i.searchParams.set("format","svg"),!u){let v=await fetch(f.href,{headers:c,signal:n}).then(k=>D(k)),ue=G(v.document);i.searchParams.set("ids",ue.map(k=>k.id).join(","));let ge=await fetch(i.href,{headers:c,signal:n}).then(k=>D(k));t({state:"fetched",value:{type:"file",props:{documentNode:v,renderedImages:ge.images,link:e.url}}});return}f.pathname+="/nodes",f.searchParams.set("ids",u),i.searchParams.set("ids",u);let[g,y]=await Promise.all([fetch(f.href,{headers:c,signal:n}).then(v=>D(v)),fetch(i.href,{headers:c,signal:n}).then(v=>D(v))]);t({state:"fetched",value:{type:"frame",props:{nodes:g,renderedImage:Object.values(y.images)[0],link:e.url}}});}catch(s){if(s instanceof DOMException&&s.code===DOMException.ABORT_ERR)return;console.error(s),t({state:"failed",error:s instanceof Error?s.message:String(s)});}};switch(p.useEffect(()=>{let n=!1,s=()=>{n=!0;},a=new AbortController;return r(a.signal).then(s,s),()=>{n||a.abort();}},[e.url]),o.state){case"loading":return theming.jsx(components.Placeholder,null,theming.jsx(p.Fragment,null,"Loading Figma file..."));case"failed":return theming.jsx(components.Placeholder,null,theming.jsx(p.Fragment,null,"Failed to load Figma file"),theming.jsx(p.Fragment,null,o.error));case"fetched":return o.value.type==="file"?theming.jsx(react.FigspecFileViewer,{css:X,...o.value.props}):theming.jsx(react.FigspecFrameViewer,{css:X,...o.value.props})}},Ee=E;});L();H();S();var Q=(e,o)=>{let[t,r]=p.useState([0,0]),[n,s]=p.useState(!1),a=p.useCallback(i=>{i.button===0&&(r([i.screenX,i.screenY]),s(!0));},[s,r]),l=p.useCallback(i=>{let g=i.touches[0];r([g.screenX,g.screenY]),s(!0);},[s,r]),u=p.useCallback(i=>{n&&r(g=>(e([i[0]-g[0],i[1]-g[1]]),i));},[r,n,...o]),F=p.useCallback(i=>{let{screenX:g,screenY:y}=i;u([g,y]);},[u]),c=p.useCallback(i=>{let{screenX:g,screenY:y}=i.touches[0];u([g,y]);},[r,n,...o]),f=p.useCallback(()=>{r([0,0]),s(!1);},[s,r]);return {onMouseDown:a,onMouseMove:F,onMouseUp:f,onMouseLeave:f,onTouchStart:l,onTouchMove:c,onTouchCancel:f,onTouchEnd:f}};var oe=({children:e,className:o,style:t,defaultValue:r,value:n,onChange:s})=>{let[a,l]=p.useState([0,0]);p.useEffect(()=>{l(r||n||[0,0]);},[r]);let u=Q(c=>{s&&s(c),l(f=>[f[0]+c[0],f[1]+c[1]]);},[l,s]),F=p.useMemo(()=>{let c=n||a;return {transform:`translate(${c[0]}px, ${c[1]}px)`}},[n,a]);return theming.jsx("div",{css:Ne,className:o,style:t,...u},theming.jsx("div",{css:Ue,style:F},e))};var Ne=theming.css`
position: relative;

@@ -45,0 +45,0 @@ overflow: hidden;

{
"name": "@storybook/addon-designs",
"version": "8.0.2",
"version": "8.0.3--canary.240.2b4de44.0",
"description": "Storybook addon for embedding your design preview in addon panel",

@@ -5,0 +5,0 @@ "keywords": [

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc