With new design sdk

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,13 +1,18 @@
-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";
+import { MainImageRepository } from "@design-sdk/core/assets-repository";
+import { ImageRepositories } from "@design-sdk/figma/asset-repository";
+
+// set image repo for figma platform
+MainImageRepository.instance = new ImageRepositories();
 
 const CodemirrorEditor = dynamic(
   import("../../components/code-editor/code-mirror"),

package.json

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

packages/designto-clean/index.ts

@@ -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/designto-code/flutter/wrappers/container.wrap.ts

@@ -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/designto-code/package.json

@@ -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"
     },

packages/designto-code/proc/index.ts

@@ -1,4 +1,4 @@
-import { repo_assets } from "@bridged.xyz/design-sdk";
+import { repo_assets } from "@design-sdk/core";
 
 export abstract class BuildProcess {
   readonly id: string;

packages/designto-flutter/builders/default.builder.ts

@@ -4,7 +4,7 @@ import {
   ReflectFrameNode,
   ReflectGroupNode,
   ReflectTextNode,
-} from "@bridged.xyz/design-sdk/lib/nodes/types";
+} from "@design-sdk/core/nodes";
 
 import { Size, Widget } from "@bridged.xyz/flutter-builder";
 import { wrapWithContainer } from "../wrappers/container.wrap";

packages/designto-flutter/builders/text.builder.ts

@@ -1,4 +1,4 @@
-import { ReflectTextNode } from "@bridged.xyz/design-sdk/lib/nodes/types";
+import { ReflectTextNode } from "@design-sdk/core/nodes";
 import { SizedBox, Text, Widget } from "@bridged.xyz/flutter-builder";
 import { makeText } from "../make/text.make";
 import { WidgetBuilder } from "./default.builder";

packages/designto-flutter/convert/size.convert.ts

@@ -1,5 +1,5 @@
-import { nodeWidthHeight } from "@bridged.xyz/design-sdk/lib/utils/node-width-height";
-import { ReflectSceneNode } from "@bridged.xyz/design-sdk/lib/nodes/types";
+import { nodeWidthHeight } from "@design-sdk/core/utils/node-width-height";
+import { ReflectSceneNode } from "@design-sdk/core/nodes";
 import { double, Size } from "@bridged.xyz/flutter-builder";
 import { roundNumber } from "@reflect-ui/uiutils";
 

packages/designto-flutter/index.ts

@@ -1,4 +1,4 @@
-import { nodes } from "@bridged.xyz/design-sdk";
+import { nodes } from "@design-sdk/core";
 import { TextBuilder, WidgetBuilder } from "./builders";
 import * as flutter from "@bridged.xyz/flutter-builder";
 import { makeSafelyAsStackList } from "./utils/make-as-safe-list";

packages/designto-flutter/interpreter/action.interpret.ts

@@ -1,4 +1,4 @@
-import { Figma } from "@bridged.xyz/design-sdk";
+import { Figma } from "@design-sdk/figma";
 // interpret https://www.figma.com/plugin-docs/api/Action/
 export function isRouteAction(reaction: Figma.Reaction) {
   const validTrigger =

packages/designto-flutter/interpreter/context.ts

@@ -1,6 +0,0 @@
-import { ConstraintNode } from "@bridged.xyz/design-sdk/lib/utils/types"
-
-function constraints(node: ConstraintNode) {
-    // node.constraints.horizontal.
-    // node.constraints.vertical
-}

packages/designto-flutter/interpreter/corner.interpret.ts

@@ -1,4 +1,4 @@
-import { ReflectRectangleNode } from "@bridged.xyz/design-sdk/lib/nodes";
+import { ReflectRectangleNode } from "@design-sdk/core/nodes";
 import {
   BorderRadiusGeometry,
   BorderRadius,

packages/designto-flutter/interpreter/gradient.interpret.ts

@@ -1,9 +1,9 @@
 import { Gradient, LinearGradient, Color } from "@bridged.xyz/flutter-builder";
 import { roundNumber } from "@reflect-ui/uiutils";
-import { color_utils } from "@bridged.xyz/design-sdk";
+import { color_utils } from "@design-sdk/core";
+import { GradientPaint } from "@design-sdk/figma";
 import { makeColorFromRGBO } from "../make/color.make";
 import { interpretGradientDirection } from "./gradient-direction.interpret";
-import { GradientPaint } from "@bridged.xyz/design-sdk/lib/figma/types/v1";
 
 export function interpretGradient(gradient: GradientPaint): Gradient {
   // TODO Handle transform percisely.

packages/designto-flutter/interpreter/icon.interpreter.ts

@@ -1,6 +1,6 @@
-import { ReflectSceneNode } from "@bridged.xyz/design-sdk/lib/nodes";
+import { ReflectSceneNode } from "@design-sdk/core/nodes";
 import { Icons, IconData } from "@bridged.xyz/flutter-builder";
-import { repo_assets } from "@bridged.xyz/design-sdk";
+import { repo_assets } from "@design-sdk/core";
 
 export function interpretIcon(
   node: ReflectSceneNode
@@ -19,7 +19,7 @@ export function interpretIcon(
     );
   }
 
-  const asset = repo_assets.ImageRepositories.current.addImage({
+  const asset = repo_assets.MainImageRepository.instance.current.addImage({
     key: node.id,
     hash: null,
   });

packages/designto-flutter/interpreter/illust.interpret.ts

@@ -1,10 +1,9 @@
-import { ReflectSceneNode } from "@bridged.xyz/design-sdk/lib/nodes";
-import { repo_assets } from "@bridged.xyz/design-sdk";
+import { repo_assets, nodes } from "@design-sdk/core";
 
 export function interpretIllust(
-  node: ReflectSceneNode
+  node: nodes.ReflectSceneNode
 ): repo_assets.TemporaryImageAsset {
-  const asset = repo_assets.ImageRepositories.current.addImage({
+  const asset = repo_assets.MainImageRepository.instance.current.addImage({
     key: node.id,
     hash: undefined,
   });

packages/designto-flutter/interpreter/image.interpret.ts

@@ -1,14 +1,12 @@
-import { ReflectDefaultShapeMixin } from "@bridged.xyz/design-sdk/lib/nodes";
+import { ReflectDefaultShapeMixin } from "@design-sdk/core/nodes";
 import { ImageProvider, NetworkImage } from "@bridged.xyz/flutter-builder";
 import {
   retrieveImageFill,
   retrievePrimaryImageFill,
-} from "@bridged.xyz/design-sdk/lib/utils/retrieve-image-fills";
-import { repo_assets } from "@bridged.xyz/design-sdk";
+} from "@design-sdk/core/utils/retrieve-image-fills";
+import { repo_assets } from "@design-sdk/core";
 import { currentBuildingNodeId } from "..";
-import { Figma } from "@bridged.xyz/design-sdk/lib/figma";
-
-// TODO - make this non async. It's too costly. generate preview image url local algorythm, upload syncronously.
+import { Figma } from "@design-sdk/figma";
 
 /**
  * finds the primary image in shape node, upload it to temporary hosting. returns the ImageProvider with hosted image.
@@ -33,10 +31,12 @@ export function interpretImageFills(
     image = retrieveImageFill(fills as Figma.ImagePaint);
   }
 
-  const hostedImage = repo_assets.ImageRepositories.current.addImage({
-    key: currentBuildingNodeId,
-    hash: image?.hash,
-  });
+  const hostedImage = repo_assets.MainImageRepository.instance.current.addImage(
+    {
+      key: currentBuildingNodeId,
+      hash: image?.hash,
+    }
+  );
 
   // this will give image provider `Image.network("https://domain.com/image.png")`
   return new NetworkImage(hostedImage.url);

packages/designto-flutter/interpreter/main-axis-size.interpret.ts

@@ -1,4 +1,4 @@
-import { ReflectSceneNode } from "@bridged.xyz/design-sdk/lib/nodes";
+import { ReflectSceneNode } from "@design-sdk/core/nodes";
 import { MainAxisSize } from "@bridged.xyz/flutter-builder";
 
 export function interpretMainAxisSize(node: ReflectSceneNode): MainAxisSize {