feat(react): Figma file support

Changes

3 changed files (+141/-31)

• packages/react/src/index.stories.jsx
  • @@ -1,17 +1,17 @@
    import { action } from "@storybook/addon-actions"; - import { FigspecViewer } from "."; + import { FigspecFrameViewer } from "."; import demoJson from "./__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.json"; import demoImage from "./__storybook__/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.svg"; export default { - title: "FigspecViewer", - component: FigspecViewer, + title: "FigspecFrameViewer", + component: FigspecFrameViewer, }; const Template = (args) => ( - <FigspecViewer + <FigspecFrameViewer {...args} style={{ width: 500,
• packages/react/src/index.tsx
  • @@ -1,7 +1,10 @@
    import "@figspec/components"; // This line is treated as type-only import even without the `type` keyword. // The keyword is here to indicate the line does not triggers any side-effects. - import type { FigspecViewer as FigspecViewerElement } from "@figspec/components"; + import type { + FigspecFrameViewer as FigspecFrameViewerElement, + FigspecFileViewer as FigspecFileViewerElement, + } from "@figspec/components"; import { forwardRef, useCallback,
  • @@ -10,8 +13,24 @@ useImperativeHandle,
    useState, } from "react"; - type ElementProps = Pick< - FigspecViewerElement, + const bindEvent = ( + element: HTMLElement, + event: string, + cb: (ev: CustomEvent) => void + ) => { + const listener = ((ev: CustomEvent) => { + cb(ev); + }) as EventListener; + + element.addEventListener(event, listener); + + return () => element.removeEventListener(event, listener); + }; + + // Frame viewer + + type FigspecFrameViewerElementProps = Pick< + FigspecFrameViewerElement, // HTML attributes | "id" | "className"
  • @@ -25,31 +44,18 @@ | "panSpeed"
    | "zoomMargin" >; - export interface FigspecViewerProps extends ElementProps { + export interface FigspecFrameViewerProps + extends FigspecFrameViewerElementProps { onScaleChange?(ev: CustomEvent<{ scale: number }>): void; onPositionChange?(ev: CustomEvent<{ x: number; y: number }>): void; onNodeSelect?(ev: CustomEvent<{ selectedNode: unknown | null }>): void; } - type Ref = FigspecViewerElement | null | undefined; + type FigspecFrameViewerRef = FigspecFrameViewerElement | null | undefined; - const bindEvent = ( - element: HTMLElement, - event: string, - cb: (ev: CustomEvent) => void - ) => { - const listener = ((ev: CustomEvent) => { - cb(ev); - }) as EventListener; - - element.addEventListener(event, listener); - - return () => element.removeEventListener(event, listener); - }; - - export const FigspecViewer = forwardRef< - FigspecViewerElement, - FigspecViewerProps + export const FigspecFrameViewer = forwardRef< + FigspecFrameViewerElement, + FigspecFrameViewerProps >( ( {
  • @@ -66,11 +72,15 @@ ...rest
    }, ref ) => { - const [refNode, setNode] = useState<FigspecViewerElement | null>(null); + const [refNode, setNode] = useState<FigspecFrameViewerElement | null>(null); - useImperativeHandle<Ref, Ref>(ref, () => refNode, [refNode]); + useImperativeHandle<FigspecFrameViewerRef, FigspecFrameViewerRef>( + ref, + () => refNode, + [refNode] + ); - const refCb = useCallback((node: FigspecViewerElement | null) => { + const refCb = useCallback((node: FigspecFrameViewerElement | null) => { if (node) { setNode(node);
  • @@ -105,7 +115,106 @@ return bindEvent(refNode, "scalechange", onScaleChange);
    }, [refNode, onScaleChange]); return ( - <figspec-viewer + <figspec-frame-viewer + ref={refCb} + class={className} + pan-speed={panSpeed} + zoom-margin={zoomMargin} + zoom-speed={zoomSpeed} + {...rest} + /> + ); + } + ); + + // File viewer + + type FigspecFileViewerElementProps = Pick< + FigspecFileViewerElement, + // HTML attributes + | "id" + | "className" + | "style" + // Element props + | "documentNode" + | "renderedImages" + // Element attributes (will be converted to kebab-case) + | "zoomSpeed" + | "panSpeed" + | "zoomMargin" + >; + + export interface FigspecFileViewerProps extends FigspecFileViewerElementProps { + onScaleChange?(ev: CustomEvent<{ scale: number }>): void; + onPositionChange?(ev: CustomEvent<{ x: number; y: number }>): void; + onNodeSelect?(ev: CustomEvent<{ selectedNode: unknown | null }>): void; + } + + type FigspecFileViewerRef = FigspecFileViewerElement | null | undefined; + + export const FigspecFileViewer = forwardRef< + FigspecFileViewerElement, + FigspecFileViewerProps + >( + ( + { + documentNode, + renderedImages, + className, + panSpeed, + zoomMargin, + zoomSpeed, + onNodeSelect, + onPositionChange, + onScaleChange, + ...rest + }, + ref + ) => { + const [refNode, setNode] = useState<FigspecFileViewerElement | null>(null); + + useImperativeHandle<FigspecFileViewerRef, FigspecFileViewerRef>( + ref, + () => refNode, + [refNode] + ); + + const refCb = useCallback((node: FigspecFileViewerElement | null) => { + if (node) { + setNode(node); + + node.documentNode = documentNode; + node.renderedImages = renderedImages; + } + }, []); + + useEffect(() => { + if (!refNode) return; + + refNode.documentNode = documentNode; + refNode.renderedImages = renderedImages; + }, [refNode, documentNode, renderedImages]); + + useEffect(() => { + if (!refNode || !onNodeSelect) return; + + return bindEvent(refNode, "nodeselect", onNodeSelect); + }, [refNode, onNodeSelect]); + + useEffect(() => { + if (!refNode || !onPositionChange) return; + + return bindEvent(refNode, "positionchange", onPositionChange); + }, [refNode, onPositionChange]); + + useEffect(() => { + if (!refNode || !onScaleChange) return; + + return bindEvent(refNode, "scalechange", onScaleChange); + }, [refNode, onScaleChange]); + + return ( + <figspec-file-viewer ref={refCb} class={className} pan-speed={panSpeed}
• packages/react/src/types.d.ts
  • @@ -1,5 +1,6 @@
    declare namespace JSX { interface IntrinsicElements { - "figspec-viewer": any; + "figspec-frame-viewer": any; + "figspec-file-viewer": any; } }