@storybook/addon-designs/dist/register-panel.mjs.map

Storybook addon for embedding your design preview in addon panel

{"version":3,"sources":["../src/manager/components/IFrame.tsx","../src/manager/components/Figma.tsx","../src/manager/components/Figspec.tsx","../src/manager/register.tsx","../src/constants.ts","../src/manager/components/ErrorBoundary.tsx","../src/manager/components/Wrapper.tsx","../src/manager/components/hooks/usePan.ts","../src/manager/components/Pan.tsx","../src/manager/components/ZoomButtons.tsx","../src/manager/components/hooks/useZoom.ts","../src/manager/components/Image.tsx","../src/manager/components/LinkPanel.tsx","../src/manager/components/Sketch.tsx","../src/manager/components/Tabs.tsx","../src/manager/containers/Wrapper.tsx","../src/register-panel.ts"],"names":["IFrame","$container","$loading","$iframe","init_IFrame","__esmMin","config","defer","url","setUrl","useState","loaded","setLoaded","useEffect","handle","jsx","Placeholder","css","figmaURLPattern","isFigmaURL","Figma","init_Figma","iframeConfig","useMemo","Figspec_exports","__export","Figspec","Figspec_default","unwrapJson","res","getAccessToken","cfg","listAllFrames","node","a","b","fullscreen","init_Figspec","state","setState","fetchDetails","signal","match","fileKey","nodeId","accessToken","headers","nodeUrl","imageUrl","documentNode","resp","frames","frame","images","nodes","err","fulfilled","fulfil","ac","Fragment","FigspecFileViewer","FigspecFrameViewer","AddonName","PanelName","ParameterName","ErrorBoundary","Component","error","info","Link","usePan","cb","deps","lastPosition","savePosition","isPanning","setPanState","onMouseDown","useCallback","ev","onTouchStart","touch","move","p","prev","onMouseMove","screenX","screenY","onTouchMove","clear","Pan","children","className","style","defaultValue","value","onChange","offset","panHandlers","delta","transform","vec","$transformLayer","ZoomButtons","onZoomIn","onZoomOut","onReset","IconButton","ZoomIcon","ZoomOutIcon","ZoomResetIcon","useZoom","initialValue","scale","setScale","zoomIn","prevScale","zoomOut","resetZoom","ImagePreview","zoom","imageStyles","FlexBar","Separator","$preview","$image","LinkPanel","v1UrlParser","malformedUrlErrorMessage","pathSegments","s","sid","aid","Sketch","result","parsed","Tabs","tabs","selected","setSelected","SbTabs","tab","lazy","Wrapper","meta","Suspense","active","useStorybookState","useParameter","onceRevealed","setOnceRevealed","DEFAULT_TAB_NAME","register","renderTarget","addons","api","title","param","types","AddonPanel"],"mappings":"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","file":"register-panel.mjs","sourcesContent":["/** @jsx jsx */\nimport { FC, ReactNode, useEffect, useState } from \"react\";\nimport { css, jsx } from \"storybook/theming\";\n\nimport { Placeholder } from \"storybook/internal/components\";\n\nimport { IFrameConfigBase } from \"../../config\";\n\ninterface Props {\n  config: IFrameConfigBase;\n\n  /**\n   * Whether to defer loading iframe contents\n   * @default false\n   */\n  defer?: boolean;\n}\n\nexport const IFrame: FC<Props> = ({ config, defer = false }) => {\n  const [url, setUrl] = useState(defer ? undefined : config.url);\n  const [loaded, setLoaded] = useState(false);\n\n  // Defer loading iframe URL.\n  // Some sites (e.g. Figma) detects Fullscreen API capability on\n  // initial load. This is quite common implementation. But in our usage,\n  // it seems that React hold the created <iframe> element when update,\n  // and it causes \"outdated Fullscreen capability\" problem.\n  // This might be a browser bug that \"`fullscreenEnabled` property does not\n  // updated\" but I'm not sure what the correct behavior (I couldn't see the\n  // statement in the Fulscreen API spec).\n  // This side-effect delays the loading of an iframe contents by one frame to\n  // make sure the contents gets updated attributes.\n  // https://github.com/storybookjs/addon-designs/issues/77\n  useEffect(() => {\n    if (!defer) {\n      return;\n    }\n\n    const handle = requestAnimationFrame(() => {\n      setUrl(config.url);\n    });\n\n    return () => cancelAnimationFrame(handle);\n  }, [defer, config.url]);\n\n  useEffect(() => {\n    setLoaded(false);\n  }, [url]);\n\n  return (\n    <div css={$container}>\n      {!loaded && (\n        // @ts-expect-error: @types resolution is completely broken probably due to migration to npm workspace\n        <Placeholder css={$loading}>Loading...</Placeholder>\n      )}\n      <iframe\n        css={$iframe}\n        src={url}\n        allowFullScreen={config.allowFullscreen}\n        onLoad={() => setLoaded(true)}\n      />\n    </div>\n  );\n};\n\nexport default IFrame;\n\nconst $container = css`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  overflow: hidden;\n`;\n\nconst $loading = css`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n\n  transform: translate(-50%, -50%);\n`;\n\nconst $iframe = css`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border: none;\n\n  z-index: 1;\n`;\n","/** @jsx jsx */\nimport { FC, useMemo } from \"react\";\nimport { jsx } from \"storybook/theming\";\n\nimport { IFrame } from \"./IFrame\";\n\nimport { FigmaConfig, IFrameConfigBase } from \"../../config\";\n\nexport const figmaURLPattern =\n  /https:\\/\\/[\\w.-]+\\.?figma.com\\/([\\w-]+)\\/([0-9a-zA-Z]{22,128})(?:\\/.*)?$/;\n\nexport const isFigmaURL = (url: string) => figmaURLPattern.test(url);\n\ninterface Props {\n  config: FigmaConfig;\n}\n\nexport const Figma: FC<Props> = ({ config }) => {\n  const iframeConfig = useMemo<IFrameConfigBase>(() => {\n    const isValid = isFigmaURL(config.url);\n\n    if (!isValid) {\n      console.warn(\n        \"[storybook-addon-designs] \" +\n          \"The URL you specified is not valid Figma URL.\\n\" +\n          \"The addon fallbacks to normal iframe mode.\" +\n          \"For more detail, please check <https://www.figma.com/developers/embed>.\",\n      );\n      return config;\n    }\n\n    const embedHost = config.embedHost || location.hostname;\n    const url = `https://www.figma.com/embed?embed_host=${embedHost}&url=${config.url}`;\n\n    return {\n      url,\n      allowFullscreen: config.allowFullscreen,\n    };\n  }, [config.url, config.allowFullscreen, config.embedHost]);\n\n  return <IFrame defer config={iframeConfig} />;\n};\n","/** @jsx jsx */\nimport type {\n  FileResponse,\n  FileNodesResponse,\n  FileImageResponse,\n  Node,\n} from \"figma-js\";\nimport { FC, Fragment, useEffect, useMemo, useState } from \"react\";\nimport {\n  FigspecFileViewer,\n  FigspecFileViewerProps,\n  FigspecFrameViewer,\n  FigspecFrameViewerProps,\n} from \"@figspec/react\";\nimport { Placeholder } from \"storybook/internal/components\";\nimport { css, jsx } from \"storybook/theming\";\n\nimport { FigspecConfig } from \"../../config\";\n\nimport { figmaURLPattern } from \"./Figma\";\n\nconst fullscreen = css`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n`;\n\ntype RenderItem =\n  | {\n      type: \"file\";\n      props: Pick<\n        FigspecFileViewerProps,\n        \"documentNode\" | \"renderedImages\" | \"link\"\n      >;\n    }\n  | {\n      type: \"frame\";\n      props: Pick<FigspecFrameViewerProps, \"nodes\" | \"renderedImage\" | \"link\">;\n    };\n\ntype Remote<T, E = Error> =\n  | {\n      state: \"fetched\";\n      value: T;\n    }\n  | {\n      state: \"failed\";\n      error: E;\n    }\n  | {\n      state: \"loading\";\n    };\n\nfunction unwrapJson<T>(res: Response): Promise<T> {\n  return res.status !== 200\n    ? Promise.reject(res.statusText)\n    : (res.json() as Promise<T>);\n}\n\n/**\n * Safely get Figma API access token.\n */\nfunction getAccessToken(cfg: FigspecConfig): string | null {\n  if (cfg.accessToken) {\n    return cfg.accessToken;\n  }\n\n  try {\n    return process.env.STORYBOOK_FIGMA_ACCESS_TOKEN ?? null;\n  } catch (err) {\n    // The only case here is no DefinePlugin entry for `process.env` nor\n    // `process.env.STORYBOOK_FIGMA_ACCESS_TOKEN`. We can safely ignore this.\n    return null;\n  }\n}\n\ninterface Props {\n  config: FigspecConfig;\n}\n\nexport const Figspec: FC<Props> = ({ config }) => {\n  const [state, setState] = useState<Remote<RenderItem, string>>({\n    state: \"loading\",\n  });\n\n  const fetchDetails = async (signal: AbortSignal) => {\n    setState({ state: \"loading\" });\n\n    try {\n      const match = config.url.match(figmaURLPattern);\n\n      if (!match) {\n        throw new Error(config.url + \" is not a valid Figma URL.\");\n      }\n\n      const [, , fileKey] = match;\n\n      const url = new URL(config.url);\n\n      const nodeId = url.searchParams.get(\"node-id\");\n\n      const accessToken = getAccessToken(config);\n\n      if (!accessToken) {\n        throw new Error(\"Personal Access Token is required.\");\n      }\n\n      const headers = {\n        \"X-FIGMA-TOKEN\": accessToken,\n      };\n\n      const nodeUrl = new URL(`https://api.figma.com/v1/files/${fileKey}`);\n      const imageUrl = new URL(`https://api.figma.com/v1/images/${fileKey}`);\n\n      imageUrl.searchParams.set(\"format\", \"svg\");\n\n      if (!nodeId) {\n        const documentNode = await fetch(nodeUrl.href, {\n          headers,\n          signal,\n        }).then((resp) => unwrapJson<FileResponse>(resp));\n\n        const frames = listAllFrames(documentNode.document);\n\n        imageUrl.searchParams.set(\n          \"ids\",\n          frames.map((frame) => frame.id).join(\",\"),\n        );\n\n        const images = await fetch(imageUrl.href, {\n          headers,\n          signal,\n        }).then((resp) => unwrapJson<FileImageResponse>(resp));\n\n        setState({\n          state: \"fetched\",\n          value: {\n            type: \"file\",\n            props: {\n              documentNode,\n              renderedImages: images.images,\n              link: config.url,\n            },\n          },\n        });\n        return;\n      }\n\n      nodeUrl.pathname += \"/nodes\";\n\n      nodeUrl.searchParams.set(\"ids\", nodeId);\n      imageUrl.searchParams.set(\"ids\", nodeId);\n\n      const [nodes, images] = await Promise.all([\n        fetch(nodeUrl.href, {\n          headers,\n          signal,\n        }).then((resp) => unwrapJson<FileNodesResponse>(resp)),\n        fetch(imageUrl.href, { headers, signal }).then((resp) =>\n          unwrapJson<FileImageResponse>(resp),\n        ),\n      ]);\n\n      setState({\n        state: \"fetched\",\n        value: {\n          type: \"frame\",\n          props: {\n            nodes,\n            renderedImage: Object.values<string>(images.images)[0],\n            link: config.url,\n          },\n        },\n      });\n    } catch (err) {\n      if (err instanceof DOMException && err.code === DOMException.ABORT_ERR) {\n        return;\n      }\n\n      console.error(err);\n\n      setState({\n        state: \"failed\",\n        error: err instanceof Error ? err.message : String(err),\n      });\n    }\n  };\n\n  useEffect(() => {\n    let fulfilled = false;\n    const fulfil = () => {\n      fulfilled = true;\n    };\n\n    const ac = new AbortController();\n\n    fetchDetails(ac.signal).then(fulfil, fulfil);\n\n    return () => {\n      if (!fulfilled) {\n        ac.abort();\n      }\n    };\n  }, [config.url]);\n\n  switch (state.state) {\n    case \"loading\":\n      return (\n        <Placeholder>\n          <Fragment>Loading Figma file...</Fragment>\n        </Placeholder>\n      );\n    case \"failed\":\n      return (\n        <Placeholder>\n          <Fragment>Failed to load Figma file</Fragment>\n          <Fragment>{state.error}</Fragment>\n        </Placeholder>\n      );\n    case \"fetched\":\n      return state.value.type === \"file\" ? (\n        <FigspecFileViewer css={fullscreen} {...state.value.props} />\n      ) : (\n        <FigspecFrameViewer css={fullscreen} {...state.value.props} />\n      );\n  }\n};\n\nexport default Figspec;\n\nfunction listAllFrames(node: Node): Node[] {\n  if (\"absoluteBoundingBox\" in node) {\n    return [node];\n  }\n\n  if (!node.children || node.children.length === 0) {\n    return [];\n  }\n\n  return node.children.map(listAllFrames).reduce((a, b) => a.concat(b), []);\n}\n","/** @jsx jsx */\nimport { addons, types, useParameter } from \"storybook/manager-api\";\nimport { AddonPanel } from \"storybook/internal/components\";\nimport { jsx } from \"storybook/theming\";\n\nimport { AddonName, PanelName, ParameterName } from \"../constants\";\nimport { ErrorBoundary } from \"./components/ErrorBoundary\";\nimport type { Config } from \"../config\";\n\nimport { Wrapper } from \"./containers/Wrapper\";\n\nconst DEFAULT_TAB_NAME = \"Design\";\n\nexport function register(renderTarget: \"panel\" | \"tab\") {\n  addons.register(AddonName, (api) => {\n    const title = function () {\n      const param = useParameter<Config | Config[] | undefined>(ParameterName);\n\n      if (!param) {\n        return DEFAULT_TAB_NAME;\n      }\n\n      // As the addon shows an additional tab panel, it's better not to\n      // use any of items' name.\n      if (Array.isArray(param)) {\n        return param.length > 0\n          ? `${DEFAULT_TAB_NAME} (${param.length})`\n          : DEFAULT_TAB_NAME;\n      }\n\n      return (param.name || DEFAULT_TAB_NAME) + \" (1)\";\n    };\n\n    if (renderTarget === \"tab\") {\n      addons.add(PanelName, {\n        title: DEFAULT_TAB_NAME,\n        render({ active }) {\n          if (!active) {\n            // NOTE: Return type of render is `ReactElement`, hence returning `null` causes\n            //       type error. I'm using `<noscript>` in place of `null`.\n            return <noscript />;\n          }\n\n          return (\n            <ErrorBoundary>\n              <Wrapper active />\n            </ErrorBoundary>\n          );\n        },\n        type: types.TAB,\n        paramKey: ParameterName,\n      });\n    } else {\n      addons.add(PanelName, {\n        type: types.PANEL,\n        title,\n        paramKey: ParameterName,\n        render({ active }) {\n          return (\n            <AddonPanel active={!!active}>\n              <ErrorBoundary>\n                <Wrapper active={!!active} />\n              </ErrorBoundary>\n            </AddonPanel>\n          );\n        },\n      });\n    }\n  });\n}\n","/**\n * The identifier of the addon.\n */\nexport const AddonName = \"STORYBOOK_ADDON_DESIGNS\";\n\n/**\n * The name of the panel.\n */\nexport const PanelName = AddonName + \"/panel\";\n\n/**\n * Addon events.\n */\nexport const Events = {\n  UpdateConfig: AddonName + \"/update_config\",\n};\n\n/**\n * A key of story parameters.\n */\nexport const ParameterName = \"design\";\n","/** @jsx jsx */\nimport { Component, ErrorInfo, Fragment } from \"react\";\nimport { Link, Placeholder } from \"storybook/internal/components\";\nimport { jsx } from \"storybook/theming\";\n\ntype State =\n  | {\n      hasError: false;\n    }\n  | {\n      hasError: true;\n      error: unknown;\n    };\n\nexport class ErrorBoundary extends Component<{ children: React.ReactNode }> {\n  public state: State = { hasError: false };\n\n  static getDerivedStateFromError(error: unknown): State {\n    return {\n      hasError: true,\n      error,\n    };\n  }\n\n  override componentDidCatch(error: unknown, info: ErrorInfo): void {\n    console.group(\n      \"An error occurred during rendering Addon panel of storybook-addon-designs\",\n    );\n    console.log(\"--- Error ---\");\n    console.error(error);\n    console.log(\"--- React Component Stack ---\");\n    console.error(info.componentStack);\n    console.groupEnd();\n  }\n\n  override render() {\n    if (this.state.hasError) {\n      return (\n        <Placeholder>\n          <Fragment>Failed to render addon UI</Fragment>\n          <Fragment>\n            <p>\n              Sorry, this addon has crashed due to the below error has thrown\n              during rendering the addon UI.\n            </p>\n            <pre>{String(this.state.error)}</pre>\n            <p>\n              See console log for more details. To clear the error state, please\n              reload the page.{\" \"}\n              <Link\n                href=\"https://github.com/storybookjs/addon-designs/issues/new?assignees=&labels=category%3A+bug&template=bug_report.yml\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                withArrow\n                cancel={false}\n              >\n                Bug report\n              </Link>\n            </p>\n          </Fragment>\n        </Placeholder>\n      );\n    }\n\n    return this.props.children;\n  }\n}\n","/** @jsx jsx */\nimport { Fragment, lazy, Suspense, FC } from \"react\";\nimport { jsx } from \"storybook/theming\";\n\nimport { Link, Placeholder } from \"storybook/internal/components\";\n\nimport { Config } from \"../../config\";\n\nimport { Figma } from \"./Figma\";\nimport { IFrame } from \"./IFrame\";\nimport { ImagePreview } from \"./Image\";\nimport { LinkPanel } from \"./LinkPanel\";\nimport { Sketch } from \"./Sketch\";\nimport { Tab, Tabs } from \"./Tabs\";\n\nconst Figspec = lazy(() => import(\"./Figspec\"));\n\ninterface Props {\n  config?: Config | Config[];\n}\n\nexport const Wrapper: FC<Props> = ({ config }) => {\n  if (!config || (\"length\" in config && config.length === 0)) {\n    return (\n      <Placeholder>\n        <Fragment>No designs found</Fragment>\n        <Fragment>\n          Learn how to{\" \"}\n          <Link\n            href=\"https://github.com/storybookjs/addon-designs#3-add-it-to-story\"\n            target=\"_blank\"\n            rel=\"noopener\"\n            withArrow\n            cancel={false}\n          >\n            display design preview for the story\n          </Link>\n        </Fragment>\n      </Placeholder>\n    );\n  }\n\n  const tabs = [...(config instanceof Array ? config : [config])].map<Tab>(\n    (cfg) => {\n      const meta: Omit<Tab, \"content\"> = {\n        id: JSON.stringify(cfg),\n        name:\n          cfg.name ||\n          (cfg.type as Config[\"type\"] | undefined)?.toUpperCase() ||\n          \"ERROR\",\n        offscreen: cfg.offscreen ?? true,\n      };\n\n      switch (cfg.type) {\n        case \"iframe\":\n          return {\n            ...meta,\n            content: <IFrame config={cfg} />,\n          };\n        case \"figma\":\n          return {\n            ...meta,\n            content: <Figma config={cfg} />,\n            offscreen: false,\n          };\n        case \"sketch\":\n          return {\n            ...meta,\n            content: <Sketch config={cfg} />,\n          };\n        case \"figspec\":\n        case \"experimental-figspec\":\n          if (cfg.type === \"experimental-figspec\") {\n            console.warn(\n              \"[storybook-addon-designs] `experimental-figspec` is deprecated. We will remove it in v7.0. Please replace it to `figspec` type.\",\n            );\n          }\n\n          return {\n            ...meta,\n            content: (\n              <Suspense fallback=\"Preparing Figspec viewer...\">\n                <Figspec config={cfg} />\n              </Suspense>\n            ),\n            offscreen: false,\n          };\n        case \"image\":\n          return {\n            ...meta,\n            content: <ImagePreview config={cfg} />,\n          };\n        case \"link\":\n          return {\n            ...meta,\n            content: <LinkPanel config={cfg} />,\n          };\n      }\n\n      // FIXME: Link is temporarily set to source code due to \"Available config types\" section\n      //        had been removed from README. We need to add a list to README or docs site.\n      //        This is very much user-unfriendly, especially for whom not familier with TypeScript.\n      return {\n        ...meta,\n        content: (\n          <Placeholder>\n            <Fragment>Invalid config type</Fragment>\n            <Fragment>\n              Config type you set is not supported. Please choose one from{\" \"}\n              <Link\n                href=\"https://github.com/storybookjs/addon-designs/blob/master/packages/storybook-addon-designs/src/config.ts\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                withArrow\n                cancel={false}\n              >\n                available config types\n              </Link>\n            </Fragment>\n          </Placeholder>\n        ),\n      };\n    },\n  );\n\n  if (tabs.length === 1) {\n    return <div>{tabs[0].content}</div>;\n  }\n\n  return <Tabs tabs={tabs} deps={[config]} />;\n};\n\nexport default Wrapper;\n","import {\n  useCallback,\n  useState,\n  DependencyList,\n  MouseEventHandler,\n  TouchEventHandler,\n} from \"react\";\n\nexport type Point2D = [number, number];\n\ninterface PanController {\n  onMouseDown: MouseEventHandler;\n  onMouseMove: MouseEventHandler;\n  onMouseUp: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n  onTouchStart: TouchEventHandler;\n  onTouchMove: TouchEventHandler;\n  onTouchCancel: TouchEventHandler;\n  onTouchEnd: TouchEventHandler;\n}\n\n/**\n * Emulate MouseEvent.movementX and MouseEvent.movementY(Candidate Recommendation)\n * Needed due to lack of support in Safari\n */\ntype UsePan = (\n  cb: (movement: Point2D) => any,\n  deps: DependencyList,\n) => PanController;\n\nexport const usePan: UsePan = (cb, deps) => {\n  const [lastPosition, savePosition] = useState<Point2D>([0, 0]);\n  const [isPanning, setPanState] = useState<boolean>(false);\n\n  const onMouseDown = useCallback<PanController[\"onMouseDown\"]>(\n    (ev) => {\n      // Ensure to turn on pan mode only for main button down\n      if (ev.button !== 0) {\n        return;\n      }\n\n      savePosition([ev.screenX, ev.screenY]);\n      setPanState(true);\n    },\n    [setPanState, savePosition],\n  );\n\n  const onTouchStart = useCallback<PanController[\"onTouchStart\"]>(\n    (ev) => {\n      const touch = ev.touches[0];\n\n      savePosition([touch.screenX, touch.screenY]);\n      setPanState(true);\n    },\n    [setPanState, savePosition],\n  );\n\n  const move = useCallback(\n    (p: Point2D) => {\n      if (!isPanning) {\n        return;\n      }\n\n      savePosition((prev) => {\n        cb([p[0] - prev[0], p[1] - prev[1]]);\n\n        return p;\n      });\n    },\n    [savePosition, isPanning, ...deps],\n  );\n\n  const onMouseMove = useCallback<PanController[\"onMouseMove\"]>(\n    (ev) => {\n      const { screenX, screenY } = ev;\n\n      move([screenX, screenY]);\n    },\n    [move],\n  );\n\n  const onTouchMove = useCallback<PanController[\"onTouchMove\"]>(\n    (ev) => {\n      const { screenX, screenY } = ev.touches[0];\n\n      move([screenX, screenY]);\n    },\n    [savePosition, isPanning, ...deps],\n  );\n\n  const clear = useCallback(() => {\n    savePosition([0, 0]);\n    setPanState(false);\n  }, [setPanState, savePosition]);\n\n  return {\n    onMouseDown,\n    onMouseMove,\n    onMouseUp: clear,\n    onMouseLeave: clear,\n    onTouchStart,\n    onTouchMove,\n    onTouchCancel: clear,\n    onTouchEnd: clear,\n  };\n};\n","/** @jsx jsx */\nimport {\n  useEffect,\n  useMemo,\n  useState,\n  CSSProperties,\n  FC,\n  ReactNode,\n} from \"react\";\nimport { css, jsx } from \"storybook/theming\";\n\nimport { usePan, Point2D } from \"./hooks/usePan\";\n\ninterface Props {\n  children: ReactNode;\n\n  className?: string;\n  style?: CSSProperties;\n\n  defaultValue?: Point2D;\n\n  value?: Point2D;\n\n  onChange?(delta: Point2D): any;\n}\n\nexport const Pan: FC<Props> = ({\n  children,\n  className,\n  style,\n  defaultValue,\n  value,\n  onChange,\n}) => {\n  const [offset, move] = useState<Point2D>([0, 0]);\n\n  useEffect(() => {\n    if (defaultValue) {\n      move(defaultValue);\n    } else {\n      move(value || [0, 0]);\n    }\n  }, [defaultValue]);\n\n  const panHandlers = usePan(\n    (delta) => {\n      if (onChange) {\n        onChange(delta);\n      }\n\n      move((prev) => [prev[0] + delta[0], prev[1] + delta[1]]);\n    },\n    [move, onChange],\n  );\n\n  const transform = useMemo<CSSProperties>(() => {\n    const vec = value || offset;\n\n    return {\n      transform: `translate(${vec[0]}px, ${vec[1]}px)`,\n    };\n  }, [value, offset]);\n\n  return (\n    <div css={$container} className={className} style={style} {...panHandlers}>\n      <div css={$transformLayer} style={transform}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Pan;\n\nconst $container = css`\n  position: relative;\n  overflow: hidden;\n\n  &:active {\n    cursor: move;\n  }\n`;\n\nconst $transformLayer = css`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n`;\n","/** @jsx jsx */\nimport { Fragment, FC } from \"react\";\nimport { jsx } from \"storybook/theming\";\n\nimport { IconButton } from \"storybook/internal/components\";\nimport { ZoomIcon, ZoomOutIcon, ZoomResetIcon } from \"@storybook/icons\";\n\ninterface Props {\n  onZoomIn?(): any;\n  onZoomOut?(): any;\n  onReset?(): any;\n}\n\nexport const ZoomButtons: FC<Props> = ({ onZoomIn, onZoomOut, onReset }) => (\n  <Fragment>\n    <IconButton onClick={onZoomIn}>\n      <ZoomIcon />\n    </IconButton>\n    <IconButton onClick={onZoomOut}>\n      <ZoomOutIcon />\n    </IconButton>\n    <IconButton onClick={onReset}>\n      <ZoomResetIcon />\n    </IconButton>\n  </Fragment>\n);\n\nexport default ZoomButtons;\n","import { useCallback, useEffect, useState, DependencyList } from \"react\";\n\ntype UseZoom = (\n  initialValue: number,\n  deps: DependencyList,\n) => {\n  /**\n   * Current scale factor.\n   * 0.0 < n < Infinity\n   */\n  scale: number;\n\n  /**\n   * Zoom in\n   */\n  zoomIn(): void;\n\n  /**\n   * Zoom out\n   */\n  zoomOut(): void;\n\n  /**\n   * Reset scale factor to 1.\n   */\n  resetZoom(): void;\n};\n\nexport const useZoom: UseZoom = (initialValue, deps) => {\n  const [scale, setScale] = useState<number>(1);\n\n  useEffect(() => {\n    setScale(initialValue);\n  }, deps);\n\n  const zoomIn = useCallback(() => {\n    setScale((prevScale) => prevScale + 0.1);\n  }, [setScale]);\n\n  const zoomOut = useCallback(() => {\n    setScale((prevScale) => Math.max(prevScale - 0.1, 0.1));\n  }, [setScale]);\n\n  const resetZoom = useCallback(() => {\n    setScale(1);\n  }, [setScale]);\n\n  return { scale, zoomIn, zoomOut, resetZoom };\n};\n","/** @jsx jsx */\nimport { Fragment, useMemo, CSSProperties, FC } from \"react\";\nimport { css, jsx } from \"storybook/theming\";\n\nimport { FlexBar, Separator } from \"storybook/internal/components\";\n\nimport { Pan } from \"./Pan\";\nimport { ZoomButtons } from \"./ZoomButtons\";\n\nimport { ImageConfig } from \"../../config\";\n\nimport { useZoom } from \"./hooks/useZoom\";\n\ninterface Props {\n  config: ImageConfig;\n}\n\nexport const ImagePreview: FC<Props> = ({ config }) => {\n  const zoom = useZoom(config.scale || 1, [config.scale]);\n\n  const imageStyles = useMemo<CSSProperties>(\n    () => ({\n      transform: `scale(${zoom.scale})`,\n    }),\n    [zoom.scale],\n  );\n\n  return (\n    <div css={$container}>\n      <FlexBar border>\n        <div\n          style={{\n            display: \"grid\",\n            gridAutoFlow: \"column\",\n            gap: \"4px\",\n            alignItems: \"center\",\n          }}\n        >\n          <Fragment key=\"left\">\n            <p>\n              <b>Image</b>\n            </p>\n            <Separator />\n            <ZoomButtons\n              onReset={zoom.resetZoom}\n              onZoomIn={zoom.zoomIn}\n              onZoomOut={zoom.zoomOut}\n            />\n          </Fragment>\n        </div>\n      </FlexBar>\n      <Pan css={$preview} defaultValue={config.offset}>\n        <img css={$image} src={config.url} style={imageStyles} />\n      </Pan>\n    </div>\n  );\n};\n\nexport default ImagePreview;\n\nconst $container = css`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n`;\n\nconst $preview = css`\n  flex-grow: 1;\n`;\n\nconst $image = css`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  margin: auto;\n\n  pointer-events: none;\n  border-radius: 1px;\n  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);\n`;\n","/** @jsx jsx */\nimport { FC } from \"react\";\nimport { css, jsx } from \"storybook/theming\";\n\nimport { Link } from \"storybook/internal/components\";\n\nimport { LinkConfig } from \"../../config\";\n\ninterface Props {\n  config: LinkConfig;\n}\n\nexport const LinkPanel: FC<Props> = ({ config }) => (\n  <div css={$container}>\n    <Link\n      cancel={false}\n      href={config.url}\n      target={config.target ?? \"_blank\"}\n      rel={config.rel ?? \"noopener\"}\n      withArrow={config.showArrow ?? true}\n    >\n      {config.label || config.url}\n    </Link>\n  </div>\n);\n\nexport default LinkPanel;\n\nconst $container = css`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n","/** @jsx jsx */\nimport { Link, Placeholder } from \"storybook/internal/components\";\nimport { jsx } from \"storybook/theming\";\nimport { FC, Fragment, ReactNode, useMemo } from \"react\";\n\nimport { SketchConfig, IFrameConfigBase } from \"../../config\";\n\nimport { IFrame } from \"./IFrame\";\n\ninterface ParseSucceeded<T> {\n  valid: true;\n\n  data: T;\n}\n\ninterface ParseFailed {\n  valid: false;\n\n  error: ReactNode;\n}\n\ntype Parser<T> = (url: URL) => ParseSucceeded<T> | ParseFailed;\n\nexport const v1UrlParser: Parser<IFrameConfigBase> = (url) => {\n  if (url.protocol !== \"https:\") {\n    return {\n      valid: false,\n      error: (\n        <Fragment>\n          Expected HTTPS link, received <code>{url.protocol}</code>.\n        </Fragment>\n      ),\n    };\n  }\n\n  if (url.hostname !== \"www.sketch.com\") {\n    return {\n      valid: false,\n      error: (\n        <Fragment>\n          Expected a hostname <code>www.sketch.com</code>, received{\" \"}\n          <code>{url.hostname}</code>\n        </Fragment>\n      ),\n    };\n  }\n\n  const malformedUrlErrorMessage = (\n    <Fragment>\n      Expected pathname <code>{\"/s/<string>/a/<string>\"}</code>, received{\" \"}\n      <code>{url.pathname}</code>.\n    </Fragment>\n  );\n\n  const pathSegments = url.pathname.split(\"/\").slice(1);\n  if (pathSegments.length < 4) {\n    return {\n      valid: false,\n      error: malformedUrlErrorMessage,\n    };\n  }\n\n  if (pathSegments[0] === \"embed\") {\n    return {\n      valid: true,\n      data: {\n        url: url.href,\n        offscreen: false,\n      },\n    };\n  }\n\n  const [s, sid, a, aid] = pathSegments;\n  if (s !== \"s\" || !sid || a !== \"a\" || !aid) {\n    return {\n      valid: false,\n      error: malformedUrlErrorMessage,\n    };\n  }\n\n  return {\n    valid: true,\n    data: {\n      url: `https://www.sketch.com/embed/s/${sid}/a/${aid}`,\n      offscreen: false,\n    },\n  };\n};\n\ninterface Props {\n  config: SketchConfig;\n}\n\nexport const Sketch: FC<Props> = ({ config }) => {\n  const result = useMemo(() => {\n    const parsed = v1UrlParser(new URL(config.url));\n    if (!parsed.valid) {\n      return parsed;\n    }\n\n    return {\n      ...pa