@storybook/addon-designs/dist/blocks.js

Storybook addon for embedding your design preview in addon panel

import {b,c,a}from'./chunk-QREMOWU7.js';import*as h from'react';import h__default,{lazy,useState,useMemo,Fragment,Suspense,useEffect,useCallback}from'react';import {Placeholder,ActionBar,FlexBar,Separator,Link,IconButton,Tabs}from'storybook/internal/components';import {css,styled,jsx}from'storybook/theming';import {useOf}from'@storybook/addon-docs/blocks';var y=(e,t)=>{let[a,l]=useState([0,0]),[r,n]=useState(false),i=useCallback(d=>{d.button===0&&(l([d.screenX,d.screenY]),n(true));},[n,l]),c=useCallback(d=>{let m=d.touches[0];l([m.screenX,m.screenY]),n(true);},[n,l]),g=useCallback(d=>{r&&l(m=>(e([d[0]-m[0],d[1]-m[1]]),d));},[l,r,...t]),M=useCallback(d=>{let{screenX:m,screenY:B}=d;g([m,B]);},[g]),v=useCallback(d=>{let{screenX:m,screenY:B}=d.touches[0];g([m,B]);},[l,r,...t]),p=useCallback(()=>{l([0,0]),n(false);},[n,l]);return {onMouseDown:i,onMouseMove:M,onMouseUp:p,onMouseLeave:p,onTouchStart:c,onTouchMove:v,onTouchCancel:p,onTouchEnd:p}};var F=({children:e,className:t,style:a,defaultValue:l,value:r,onChange:n})=>{let[i,c]=useState([0,0]);useEffect(()=>{c(l||r||[0,0]);},[l]);let g=y(v=>{n&&n(v),c(p=>[p[0]+v[0],p[1]+v[1]]);},[c,n]),M=useMemo(()=>{let v=r||i;return {transform:`translate(${v[0]}px, ${v[1]}px)`}},[r,i]);return jsx("div",{css:a0,className:t,style:a,...g},jsx("div",{css:l0,style:M},e))};var a0=css`
  position: relative;
  overflow: hidden;

  &:active {
    cursor: move;
  }
`,l0=css`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
`;var D=h.forwardRef(({color:e="currentColor",size:t=14,...a},l)=>h.createElement("svg",{width:t,height:t,viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",ref:l,...a},h.createElement("path",{d:"M6 3.5a.5.5 0 01.5.5v1.5H8a.5.5 0 010 1H6.5V8a.5.5 0 01-1 0V6.5H4a.5.5 0 010-1h1.5V4a.5.5 0 01.5-.5z",fill:e}),h.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.544 10.206a5.5 5.5 0 11.662-.662.5.5 0 01.148.102l3 3a.5.5 0 01-.708.708l-3-3a.5.5 0 01-.102-.148zM10.5 6a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z",fill:e}))),T=h.forwardRef(({color:e="currentColor",size:t=14,...a},l)=>h.createElement("svg",{width:t,height:t,viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",ref:l,...a},h.createElement("path",{d:"M4 5.5a.5.5 0 000 1h4a.5.5 0 000-1H4z",fill:e}),h.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6 11.5c1.35 0 2.587-.487 3.544-1.294a.5.5 0 00.102.148l3 3a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.148-.102A5.5 5.5 0 106 11.5zm0-1a4.5 4.5 0 100-9 4.5 4.5 0 000 9z",fill:e}))),U=h.forwardRef(({color:e="currentColor",size:t=14,...a},l)=>h.createElement("svg",{width:t,height:t,viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",ref:l,...a},h.createElement("path",{d:"M1.5 2.837V1.5a.5.5 0 00-1 0V4a.5.5 0 00.5.5h2.5a.5.5 0 000-1H2.258a4.5 4.5 0 11-.496 4.016.5.5 0 10-.942.337 5.502 5.502 0 008.724 2.353.5.5 0 00.102.148l3 3a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.148-.102A5.5 5.5 0 101.5 2.837z",fill:e})));var O=({onZoomIn:e,onZoomOut:t,onReset:a})=>jsx(Fragment,null,jsx(IconButton,{onClick:e},jsx(D,null)),jsx(IconButton,{onClick:t},jsx(T,null)),jsx(IconButton,{onClick:a},jsx(U,null)));var G=(e,t)=>{let[a,l]=useState(1);useEffect(()=>{l(e);},t);let r=useCallback(()=>{l(c=>c+.1);},[l]),n=useCallback(()=>{l(c=>Math.max(c-.1,.1));},[l]),i=useCallback(()=>{l(1);},[l]);return {scale:a,zoomIn:r,zoomOut:n,resetZoom:i}};var C=({config:e})=>{let t=G(e.scale||1,[e.scale]),a=useMemo(()=>({transform:`scale(${t.scale})`}),[t.scale]);return jsx("div",{css:d0},jsx(FlexBar,{border:true},jsx("div",{style:{display:"grid",gridAutoFlow:"column",gap:"4px",alignItems:"center"}},jsx(Fragment,{key:"left"},jsx("p",null,jsx("b",null,"Image")),jsx(Separator,null),jsx(O,{onReset:t.resetZoom,onZoomIn:t.zoomIn,onZoomOut:t.zoomOut})))),jsx(F,{css:w0,defaultValue:e.offset},jsx("img",{css:f0,src:e.url,style:a})))};var d0=css`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
`,w0=css`
  flex-grow: 1;
`,f0=css`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;

  pointer-events: none;
  border-radius: 1px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
`;var Z=({config:e})=>jsx("div",{css:g0},jsx(Link,{cancel:false,href:e.url,target:e.target??"_blank",rel:e.rel??"noopener",withArrow:e.showArrow??true},e.label||e.url));var g0=css`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
`;var s0=e=>{if(e.protocol!=="https:")return {valid:false,error:jsx(Fragment,null,"Expected HTTPS link, received ",jsx("code",null,e.protocol),".")};if(e.hostname!=="www.sketch.com")return {valid:false,error:jsx(Fragment,null,"Expected a hostname ",jsx("code",null,"www.sketch.com"),", received"," ",jsx("code",null,e.hostname))};let t=jsx(Fragment,null,"Expected pathname ",jsx("code",null,"/s/<string>/a/<string>"),", received"," ",jsx("code",null,e.pathname),"."),a=e.pathname.split("/").slice(1);if(a.length<4)return {valid:false,error:t};if(a[0]==="embed")return {valid:true,data:{url:e.href,offscreen:false}};let[l,r,n,i]=a;return l!=="s"||!r||n!=="a"||!i?{valid:false,error:t}:{valid:true,data:{url:`https://www.sketch.com/embed/s/${r}/a/${i}`,offscreen:false}}},W=({config:e})=>{let t=useMemo(()=>{let a=s0(new URL(e.url));return a.valid?{...a,data:{...e,...a.data}}:a},[e]);return t.valid?jsx(a,{defer:true,config:t.data}):jsx(Placeholder,null,jsx(Fragment,null,"Invalid Sketch URL"),jsx(Fragment,null,t.error))};var Y=({tabs:e,deps:t=[]})=>{let[a,l]=useState(e[0].id);return useEffect(()=>{l(e[0].id);},t),jsx(Tabs,{absolute:true,selected:a,actions:{onSelect:l}},e.map(r=>jsx("div",{key:r.id,id:r.id,title:r.name},r.offscreen||a===r.id?r.content:null)))};var C0=lazy(()=>import('./Figspec-PKMAWPLM.js')),J=({config:e})=>{if(!e||"length"in e&&e.length===0)return jsx(Placeholder,null,jsx(Fragment,null,"No designs found"),jsx(Fragment,null,"Learn how to"," ",jsx(Link,{href:"https://github.com/storybookjs/addon-designs#3-add-it-to-story",target:"_blank",rel:"noopener",withArrow:true,cancel:false},"display design preview for the story")));let t=[...e instanceof Array?e:[e]].map(a$1=>{let l={id:JSON.stringify(a$1),name:a$1.name||a$1.type?.toUpperCase()||"ERROR",offscreen:a$1.offscreen??true};switch(a$1.type){case "iframe":return {...l,content:jsx(a,{config:a$1})};case "figma":return {...l,content:jsx(b,{config:a$1}),offscreen:false};case "sketch":return {...l,content:jsx(W,{config:a$1})};case "figspec":case "experimental-figspec":return a$1.type==="experimental-figspec"&&console.warn("[storybook-addon-designs] `experimental-figspec` is deprecated. We will remove it in v7.0. Please replace it to `figspec` type."),{...l,content:jsx(Suspense,{fallback:"Preparing Figspec viewer..."},jsx(C0,{config:a$1})),offscreen:false};case "image":return {...l,content:jsx(C,{config:a$1})};case "link":return {...l,content:jsx(Z,{config:a$1})}}return {...l,content:jsx(Placeholder,null,jsx(Fragment,null,"Invalid config type"),jsx(Fragment,null,"Config type you set is not supported. Please choose one from"," ",jsx(Link,{href:"https://github.com/storybookjs/addon-designs/blob/master/packages/storybook-addon-designs/src/config.ts",target:"_blank",rel:"noopener",withArrow:true,cancel:false},"available config types")))}});return t.length===1?jsx("div",null,t[0].content):jsx(Y,{tabs:t,deps:[e]})};var Q="design";var V0=styled.div(({theme:e})=>`
  font-family: ${e.typography.fonts.base};
  font-size: ${e.typography.size.s3}px;
  margin: 0;
`),P0=styled.div(({theme:e,height:t="60%",collapsed:a})=>`
  position: relative;
  width: 100%;
  height: 0;
  padding: 0;
  padding-top: ${a?"3em":typeof t=="string"?t:t+"px"};
  margin: 25px 0 40px;
  border: 1px solid ${e.appBorderColor};

  border-radius: ${e.appBorderRadius}px;
  box-shadow:
    ${e.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0"};
`),S0=styled(Placeholder)`
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
`,x=({children:e,collapsable:t=true,defaultCollapsed:a=false,placeholder:l,showLink:r=true,onCollapsedChange:n,...i})=>{let[c,g]=useState(!!a),M=r&&"url"in i;return h__default.createElement(V0,null,h__default.createElement(P0,{collapsed:t&&c,...i},t&&c?h__default.createElement(S0,null,l):e,h__default.createElement(ActionBar,{actionItems:[t&&{title:c?"Show":"Hide",onClick:()=>{let v=!c;n&&n(v,c),g(v);}},M&&{title:"Open in new tab",onClick:()=>window.open(i.url,"_blank")}].filter(v=>!!v)})))},a5=({placeholder:e,...t})=>h__default.createElement(x,{placeholder:e??"Design (Figma)",...t},h__default.createElement(b,{config:{type:"figma",...t}})),l5=({placeholder:e,...t})=>h__default.createElement(x,{placeholder:e??"Design (Figma-Spec)",...t},h__default.createElement(c,{config:{type:"figspec",...t}})),r5=({placeholder:e,...t})=>h__default.createElement(x,{placeholder:e??"Design (iframe)",...t},h__default.createElement(a,{config:t})),n5=({placeholder:e,...t})=>h__default.createElement(x,{placeholder:e??"Design (Image)",...t},h__default.createElement(C,{config:{type:"image",...t}})),b0=styled.div`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  overflow: auto;
`,o5=e=>{let{of:t,placeholder:a,...l}=e;if("of"in e&&t===void 0)throw new Error("Unexpected `of={undefined}`, did you mistype a CSF file reference?");let{story:r}=useOf(t||"story",["story"]);return h__default.createElement(x,{placeholder:a??"Design",...l},h__default.createElement(b0,null,h__default.createElement(J,{config:r.parameters[Q]})))};export{o5 as Design,x as DocBlockBase,a5 as Figma,l5 as Figspec,r5 as IFrame,n5 as Image};