updating with new universal design sdk

Author: softmarshmallow

editor/components/figma/screen-importer.tsx

@@ -1,17 +1,14 @@
-import React, { useEffect, useState } from "react";
-import { api } from "@bridged.xyz/design-sdk/lib/figma-remote";
+import React, { useState } from "react";
+import { remote, utils, nodes } from "@design-sdk/figma";
+import { convert } from "@design-sdk/figma";
 import { utils_figma } from "../../utils";
-import { utils, convert } from "@bridged.xyz/design-sdk";
-import { mapFigmaRemoteToFigma } from "@bridged.xyz/design-sdk/lib/figma-remote/mapper";
-import { ReflectSceneNode } from "@bridged.xyz/design-sdk/lib/nodes";
 import { UserInputCache } from "../../utils/user-input-value-cache";
-import * as figrem from "@bridged.xyz/design-sdk/lib/figma-remote/types";
 
-export type OnImportedCallback = (reflect: ReflectSceneNode) => void;
-type _OnRemoteLoadedCallback = (reflect: figrem.Node) => void;
+export type OnImportedCallback = (reflect: nodes.ReflectSceneNode) => void;
+type _OnRemoteLoadedCallback = (reflect: remote.types.Node) => void;
 
 async function fetchTarget(file: string, node: string) {
-  const client = api.Client({
+  const client = remote.api.Client({
     personalAccessToken: utils_figma.figmaPersonalAccessToken(),
   });
 
@@ -27,7 +24,7 @@ async function fetchTarget(file: string, node: string) {
 
 async function fetchDemo() {
   const _nid = utils_figma.FIGMA_BRIDGED_DEMO_APP_ENTRY_NODE_ID;
-  const client = api.Client({
+  const client = remote.api.Client({
     personalAccessToken: utils_figma.figmaPersonalAccessToken(),
   });
 
@@ -46,11 +43,11 @@ async function fetchDemo() {
 }
 
 export function FigmaScreenImporter(props: { onImported: OnImportedCallback }) {
-  const [reflect, setReflect] = useState<ReflectSceneNode>();
+  const [reflect, setReflect] = useState<nodes.ReflectSceneNode>();
 
-  const handleLocalDataLoad = (d: figrem.Node) => {
+  const handleLocalDataLoad = (d: remote.types.Node) => {
     console.log("api raw", d);
-    const _mapped = mapFigmaRemoteToFigma(d as any);
+    const _mapped = remote.mapper.mapFigmaRemoteToFigma(d as any);
     console.log("mapped", _mapped);
     const _converted = convert.intoReflectNode(_mapped);
     console.log("converted", _converted);
@@ -85,7 +82,7 @@ function _DefaultImporterSegment(props: { onLoaded: _OnRemoteLoadedCallback }) {
   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 figrem.Node);
+      props.onLoaded(d as remote.types.Node);
     });
   };
 
@@ -111,7 +108,7 @@ function _UrlImporterSegment(props: { onLoaded: _OnRemoteLoadedCallback }) {
     UserInputCache.set(_FIGMA_FILE_URL_IMPORT_INPUT_CACHE_KEY, urlInput);
     const q = utils.figmaApi.parseFileAndNodeIdFromUrl_Figma(urlInput);
     fetchTarget(q.file, q.node).then((d) => {
-      props.onLoaded(d as figrem.Node);
+      props.onLoaded(d as remote.types.Node);
     });
   };
 

editor/next.config.js

@@ -5,7 +5,10 @@ const withTM = require("next-transpile-modules")([
   "@designto/web",
   "@designto/react",
   "@bridged.xyz/flutter-builder",
-  "@bridged.xyz/design-sdk",
+  "@design-sdk/core",
+  "@design-sdk/universal",
+  "@design-sdk/figma",
+  "@design-sdk/sketch",
   "@reflect-ui/core",
   "@reflect-ui/detection",
 ]);

editor/pages/_development/figma.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react";
-import { figmacomp, canvas, code, runner } from "../../components";
 import dynamic from "next/dynamic";
-import { flutter } from "@designto/code";
-import { composeAppWithHome } from "@bridged.xyz/flutter-builder/dist/lib/composer";
-import { utils_dart } from "../../utils";
+import React, { useEffect, useState } from "react";
 import styled from "@emotion/styled";
+import { figmacomp, canvas, runner } from "../../components";
+import { flutter } from "@designto/code";
+import { composeAppWithHome } from "@bridged.xyz/flutter-builder";
 import { features, types, hosting } from "@bridged.xyz/base-sdk";
-import { ReflectSceneNode } from "@bridged.xyz/design-sdk/lib/nodes";
+import { ReflectSceneNode } from "@design-sdk/core/nodes";
+import { utils_dart } from "../../utils";
 import { nanoid } from "nanoid";
 
 const CodemirrorEditor = dynamic(

package.json

@@ -7,6 +7,8 @@
     "workspaces": [
         "editor",
         "packages/*",
-        "packages/coli/packages/*"
+        "packages/design-sdk/*",
+        "packages/coli/packages/*",
+        "packages/coli-web-builder/*"
     ]
 }

packages/coli

@@ -1,4 +1,4 @@
-import { ReflectSceneNode } from "@bridged.xyz/design-sdk/lib/nodes";
+import { ReflectSceneNode } from "@design-sdk/core/nodes";
 import { ReflectLintFeedback } from "@reflect-ui/lint/lib/feedbacks/feedback";
 import { DefaultSeectionLintRunner } from "@reflect-ui/lint/lib/linter";
 

packages/coli-web-builder

@@ -0,0 +1,109 @@
+import { convertToSize } from "../convert";
+import {
+  ReflectRectangleNode,
+  ReflectEllipseNode,
+  ReflectFrameNode,
+  ReflectGroupNode,
+} from "@design-sdk/core/nodes";
+import { makeEdgeInsets } from "../make";
+import { array } from "@reflect-ui/uiutils";
+import {
+  Container,
+  Widget,
+  EdgeInsetsGeometry,
+  Padding,
+  Alignment,
+  AlignmentGeometry,
+  Color,
+  BoxDecoration,
+  Size,
+} from "@bridged.xyz/flutter-builder";
+import { makeBoxDecoration } from "../make/box-decoration.make";
+import { roundDouble } from "../convert/double.convert";
+
+export function wrapWithContainer(
+  node:
+    | ReflectRectangleNode
+    | ReflectEllipseNode
+    | ReflectFrameNode
+    | ReflectGroupNode,
+  child?: Widget,
+  options?: { size: Size }
+): Widget {
+  // ignore the view when size is zero or less
+  // while technically it shouldn't get less than 0, due to rounding errors,
+  // it can get to values like: -0.000004196293048153166
+  if (node.width <= 0 || node.height <= 0) {
+    return child;
+  }
+
+  // ignore for Groups
+  const propBoxDecoration =
+    node instanceof ReflectGroupNode ? undefined : makeBoxDecoration(node);
+  // if option passed, use option's value
+  const propSize = array.filters.notEmpty(options?.size)
+    ? options.size
+    : convertToSize(node);
+  console.log("propSize", propSize);
+
+  // todo Image, Gradient & multiple fills
+
+  let propPadding: EdgeInsetsGeometry;
+  if (node instanceof ReflectFrameNode) {
+    propPadding = makeEdgeInsets(node);
+  }
+
+  if (propSize || propBoxDecoration) {
+    // Container is a container if [propSize] or [propBoxDecoration] are set.
+    // console.log("wrapping with container. child - ", child)
+    return new Container({
+      width: roundDouble(propSize.width),
+      height: roundDouble(propSize.height),
+      child: child,
+      padding: propPadding,
+      decoration:
+        propBoxDecoration instanceof BoxDecoration
+          ? propBoxDecoration
+          : undefined,
+      color: propBoxDecoration instanceof Color ? propBoxDecoration : undefined,
+    });
+  } else if (propPadding) {
+    // console.log("wrapping with padding")
+    return new Padding({
+      padding: propPadding,
+      child: child,
+    });
+    // if there is just a padding, add Padding
+  } else {
+    return child;
+  }
+}
+
+type GradientDirection = {
+  begin: AlignmentGeometry;
+  end: AlignmentGeometry;
+};
+
+export function gradientDirection(angle: number): GradientDirection {
+  switch (
+    array.nearestValue(angle, [-180, -135, -90, -45, 0, 45, 90, 135, 180])
+  ) {
+    case 0:
+      return { begin: Alignment.centerLeft, end: Alignment.centerRight };
+    case 45:
+      return { begin: Alignment.topLeft, end: Alignment.bottomRight };
+    case 90:
+      return { begin: Alignment.topCenter, end: Alignment.bottomCenter };
+    case 135:
+      return { begin: Alignment.topRight, end: Alignment.bottomLeft };
+    case -45:
+      return { begin: Alignment.bottomLeft, end: Alignment.topRight };
+    case -90:
+      return { begin: Alignment.bottomCenter, end: Alignment.topCenter };
+    case -135:
+      return { begin: Alignment.bottomRight, end: Alignment.topLeft };
+    default:
+      // when 180 or -180
+      return { begin: Alignment.centerRight, end: Alignment.centerLeft };
+  }
+}

packages/design-sdk

@@ -8,7 +8,7 @@
         "@designto/flutter": "0.0.1",
         "@designto/react": "0.0.0",
         "@designto/web": "0.0.0",
-        "@bridged.xyz/design-sdk": "^0.1.0",
+        "@design-sdk/universal": "0.0.0",
         "@reflect-ui/detection": "0.1.1",
         "@bridged.xyz/flutter-builder": "^1.23.0-7.0.pre.42"
     },