extract remote figma fetcher to design-sdk

editor/components/figma/screen-importer.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { convert, nodes, Figma } from "@design-sdk/figma";
-import { types, api, mapper } from "@design-sdk/figma-remote";
+import { nodes } from "@design-sdk/figma";
+import { types, fetch } from "@design-sdk/figma-remote";
 import {
   parseFileAndNodeId,
   FigmaTargetNodeConfig,
@@ -9,76 +9,17 @@ import { utils_figma } from "../../utils";
 import { UserInputCache } from "../../utils/user-input-value-cache";
 
 export type OnImportedCallback = (reflect: nodes.ReflectSceneNode) => void;
-type _OnRemoteLoadedCallback = (reflect: types.Node) => void;
-
-export interface FigmaReflectImportPack {
-  remote: api.Node;
-  figma: Figma.SceneNode;
-  reflect: nodes.ReflectSceneNode;
-}
-
-export async function fetchTargetAsReflect(
-  file: string,
-  node: string
-): Promise<FigmaReflectImportPack> {
-  const d = await fetchTarget(file, node);
-  const _mapped = mapper.mapFigmaRemoteToFigma(d as any);
-  const _converted = convert.intoReflectNode(_mapped);
-  return {
-    remote: d,
-    figma: _mapped,
-    reflect: _converted,
-  };
-}
-
-async function fetchTarget(file: string, node: string) {
-  const client = api.Client({
-    personalAccessToken: utils_figma.figmaPersonalAccessToken(),
-  });
-
-  const nodesRes = await client.fileNodes(file, {
-    ids: [node],
-  });
-  const nodes = nodesRes.data.nodes;
-
-  const demoEntryNode = nodes[node];
-
-  return demoEntryNode.document;
-}
-
-async function fetchDemo() {
-  const _nid = utils_figma.FIGMA_BRIDGED_DEMO_APP_ENTRY_NODE_ID;
-  const client = api.Client({
-    personalAccessToken: utils_figma.figmaPersonalAccessToken(),
-  });
-
-  const nodesRes = await client.fileNodes(
-    utils_figma.FIGMA_BRIDGED_DEMO_APP_FILE_ID,
-    {
-      ids: [_nid],
-    }
-  );
-
-  const nodes = nodesRes.data.nodes;
-
-  const demoEntryNode = nodes[_nid];
-
-  return demoEntryNode.document;
-}
+type _OnPartiallyLoadedCallback = (pack: fetch.FigmaRemoteImportPack) => void;
 
 export function FigmaScreenImporter(props: {
   onImported: OnImportedCallback;
   onTargetEnter?: (target: FigmaTargetNodeConfig) => void;
 }) {
   const [reflect, setReflect] = useState<nodes.ReflectSceneNode>();
 
-  const handleLocalDataLoad = (d: types.Node) => {
-    console.log("api raw", d);
-    const _mapped = mapper.mapFigmaRemoteToFigma(d as any);
-    console.log("mapped", _mapped);
-    const _converted = convert.intoReflectNode(_mapped);
-    console.log("converted", _converted);
-    setReflect(_converted);
+  const handleLocalDataLoad = async (partial: fetch.FigmaRemoteImportPack) => {
+    const final = await fetch.completePartialPack(partial);
+    setReflect(final.reflect);
   };
 
   return (
@@ -111,12 +52,18 @@ export function FigmaScreenImporter(props: {
   );
 }
 
-function _DefaultImporterSegment(props: { onLoaded: _OnRemoteLoadedCallback }) {
+function _DefaultImporterSegment(props: {
+  onLoaded: _OnPartiallyLoadedCallback;
+}) {
   const handleOnLoadDefaultDesignClick = () => {
-    fetchDemo().then((d) => {
-      // it's okay to force cast here. since the typings are the same (following official figma remote api spec)
-      props.onLoaded(d as types.Node);
-    });
+    fetch
+      .fetchDemo({
+        personalAccessToken: utils_figma.figmaPersonalAccessToken_safe(),
+      })
+      .then((d) => {
+        // it's okay to force cast here. since the typings are the same (following official figma remote api spec)
+        props.onLoaded(d);
+      });
   };
 
   return (
@@ -133,7 +80,7 @@ function _DefaultImporterSegment(props: { onLoaded: _OnRemoteLoadedCallback }) {
 const _FIGMA_FILE_URL_IMPORT_INPUT_CACHE_KEY =
   "_FIGMA_FILE_URL_IMPORT_INPUT_CACHE_KEY";
 function _UrlImporterSegment(props: {
-  onLoaded: _OnRemoteLoadedCallback;
+  onLoaded: _OnPartiallyLoadedCallback;
   onUrlEnter?: (url: string) => void;
 }) {
   const [loadState, setLoadState] = useState<
@@ -150,10 +97,13 @@ function _UrlImporterSegment(props: {
     props.onUrlEnter?.(urlInput);
     UserInputCache.set(_FIGMA_FILE_URL_IMPORT_INPUT_CACHE_KEY, urlInput);
     setLoadState("loading");
-    fetchTarget(figmaTargetConfig.file, figmaTargetConfig.node)
+    fetch
+      .fetchTarget(figmaTargetConfig.file, figmaTargetConfig.node, {
+        personalAccessToken: utils_figma.figmaPersonalAccessToken_safe(),
+      })
       .then((d) => {
         setLoadState("complete");
-        props.onLoaded(d as types.Node);
+        props.onLoaded(d);
       })
       .catch((_) => {
         setLoadState("failed");

editor/pages/figma/to-token.tsx

@@ -13,12 +13,13 @@ import {
 import { useRouter } from "next/router";
 import { extractFromFigmaQueryParams } from "../../query/from-figma";
 import { Figma } from "@design-sdk/figma";
-import { fetchTargetAsReflect } from "../../components/figma/screen-importer";
+import { fetch } from "@design-sdk/figma-remote";
 import { DefaultEditorWorkspaceLayout } from "../../layout/default-editor-workspace-layout";
 import { LayerHierarchy } from "../../components/editor-hierarchy";
 import { WorkspaceContentPanelGridLayout } from "../../layout/panel/workspace-content-panel-grid-layout";
 import { WorkspaceContentPanel } from "../../layout/panel";
 import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout";
+import { utils_figma } from "../../utils";
 
 export default function FigmaToReflectWidgetTokenPage() {
   const [figmaNode, setFigmaNode] = useState<Figma.SceneNode>();
@@ -37,12 +38,14 @@ export default function FigmaToReflectWidgetTokenPage() {
       setFigmaNodeUrl(params.figma_target_url);
       const targetnodeconfig = parseFileAndNodeId(params.figma_target_url);
       setTargetnodeConfig(targetnodeconfig);
-      fetchTargetAsReflect(targetnodeconfig.file, targetnodeconfig.node).then(
-        (res) => {
+      fetch
+        .fetchTargetAsReflect(targetnodeconfig.file, targetnodeconfig.node, {
+          personalAccessToken: utils_figma.figmaPersonalAccessToken_safe(),
+        })
+        .then((res) => {
           setReflect(res.reflect);
           setFigmaNode(res.figma);
-        }
-      );
+        });
     }
   }, [router]);
 

editor/query/from-figma/index.ts

@@ -5,7 +5,8 @@ import {
 import { Figma, nodes, remote } from "@design-sdk/figma";
 import { NextRouter, useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { fetchTargetAsReflect } from "../../components/figma/screen-importer";
+import { fetch } from "@design-sdk/figma-remote";
+import { utils_figma } from "../../utils";
 
 const P_FIGMA_TARGET_URL = "figma_target_url";
 
@@ -67,14 +68,16 @@ export function useReflectTargetNode() {
   const [targetNode, setTargetNode] = useState<TargetNodeConfig>();
   useEffect(() => {
     if (figmaTargetNode) {
-      fetchTargetAsReflect(figmaTargetNode.file, figmaTargetNode.node).then(
-        (res) => {
-          setTargetNode({
+      fetch
+        .fetchTargetAsReflect(figmaTargetNode.file, figmaTargetNode.node, {
+          personalAccessToken: utils_figma.figmaPersonalAccessToken_safe(),
+        })
+        .then((res) => {
+          setTargetNode(<TargetNodeConfig>{
             ...res,
             ...figmaTargetNode,
           });
-        }
-      );
+        });
     }
   }, [figmaTargetNode]);
 

editor/utils/figma/index.ts

@@ -1,2 +1 @@
 export * from "./figma-access-token";
-export * from "./figma-default-set";