update flutter & node import pattern

Author: softmarshmallow

packages/design-sdk

@@ -1,25 +1,21 @@
+import * as flutter from "@bridged.xyz/flutter-builder";
 import {
-  BorderRadiusGeometry,
-  BorderRadius,
-} from "@bridged.xyz/flutter-builder";
-import {
-  ReflectRectangleNode,
   ReflectEllipseNode,
-  ReflectFrameNode,
+  IReflectCornerMixin,
 } from "@bridged.xyz/design-sdk/lib/nodes/types";
 import { interpretRadius } from "../interpreter/radius.interpret";
 
 export function makeBorderRadius(
-  node: ReflectRectangleNode | ReflectEllipseNode | ReflectFrameNode
-): BorderRadiusGeometry {
+  node: IReflectCornerMixin
+): flutter.BorderRadiusGeometry {
   if (node instanceof ReflectEllipseNode) return undefined;
   if (node.cornerRadius === undefined || node.cornerRadius.all === 0) {
     return undefined;
   }
 
   return node.cornerRadius.all !== undefined
-    ? BorderRadius.circular(node.cornerRadius.all as number)
-    : BorderRadius.only({
+    ? flutter.BorderRadius.circular(node.cornerRadius.all as number)
+    : flutter.BorderRadius.only({
         topLeft: interpretRadius(node.cornerRadius.tl),
         topRight: interpretRadius(node.cornerRadius.tr),
         bottomLeft: interpretRadius(node.cornerRadius.bl),

packages/designto-flutter/make/border-radius.make.ts

@@ -1,5 +1,5 @@
 import { ReflectDefaultShapeMixin } from "@bridged.xyz/design-sdk/lib/nodes";
-import { BorderSide } from "@bridged.xyz/flutter-builder";
+import * as flutter from "@bridged.xyz/flutter-builder";
 import { roundNumber } from "@reflect-ui/uiutils";
 import { makeColor } from "./color.make";
 
@@ -9,7 +9,7 @@ export function makeBorderSide(node: ReflectDefaultShapeMixin) {
     return undefined;
   }
 
-  return new BorderSide({
+  return new flutter.BorderSide({
     color: makeColor(node.strokes),
     width: roundNumber(node.strokeWeight),
   });

packages/designto-flutter/make/border-side.make.ts

@@ -1,4 +1,4 @@
-import { Border } from "@bridged.xyz/flutter-builder";
+import * as flutter from "@bridged.xyz/flutter-builder";
 import {
   ReflectDefaultShapeMixin,
   ReflectSceneNode,
@@ -7,15 +7,15 @@ import { roundNumber } from "@reflect-ui/uiutils";
 import { makeColor } from "./color.make";
 
 // generate the border, when it exists
-export function makeBorder(node: ReflectSceneNode): Border {
+export function makeBorder(node: ReflectSceneNode): flutter.Border {
   if (node instanceof ReflectDefaultShapeMixin) {
     if (!node.strokes || node.strokes.length === 0) {
       return undefined;
     }
 
     // generate the border, when it should exist
     return node.strokeWeight
-      ? Border.all({
+      ? flutter.Border.all({
           color: makeColor(node.strokes),
           width: roundNumber(node.strokeWeight),
         })

packages/designto-flutter/make/border.make.ts

@@ -1,19 +1,6 @@
-import {
-  ReflectEllipseNode,
-  ReflectFrameNode,
-  ReflectRectangleNode,
-} from "@bridged.xyz/design-sdk/lib/nodes";
+import { nodes } from "@bridged.xyz/design-sdk";
 import { retrieveFill } from "@bridged.xyz/design-sdk/lib/utils";
-import {
-  BoxDecoration,
-  BoxFit,
-  BoxShape,
-  Color,
-  DecorationImage,
-  Gradient,
-  ImageProvider,
-  Snippet,
-} from "@bridged.xyz/flutter-builder";
+import * as flutter from "@bridged.xyz/flutter-builder";
 import { interpretGradient } from "../interpreter/gradient.interpret";
 import { interpretImageFills } from "../interpreter/image.interpret";
 import { makeBorderRadius } from "./border-radius.make";
@@ -23,17 +10,20 @@ import { makeColorFromRGBO } from "./color.make";
 import { Figma } from "@bridged.xyz/design-sdk";
 
 export function makeBoxDecoration(
-  node: ReflectRectangleNode | ReflectEllipseNode | ReflectFrameNode
-): BoxDecoration | Color {
+  node:
+    | nodes.ReflectRectangleNode
+    | nodes.ReflectEllipseNode
+    | nodes.ReflectFrameNode
+): flutter.BoxDecoration | flutter.Color {
   const decorationBackground = makeBoxDecorationBg(node.fills);
   const decorationBorder = makeBorder(node);
   const decorationBoxShadow = makeBoxShadow(node);
   const decorationBorderRadius = makeBorderRadius(node);
 
   // modify the circle's shape when type is ellipse
-  const decorationShape: BoxShape =
-    node instanceof ReflectEllipseNode
-      ? (BoxShape.circle as Snippet)
+  const decorationShape: flutter.BoxShape =
+    node instanceof nodes.ReflectEllipseNode
+      ? (flutter.BoxShape.circle as flutter.Snippet)
       : undefined;
 
   // generate the decoration, or just the backgroundColor when color is SOLID.
@@ -45,35 +35,35 @@ export function makeBoxDecoration(
     decorationBackground;
 
   return isNotSolid
-    ? new BoxDecoration({
+    ? new flutter.BoxDecoration({
         borderRadius: decorationBorderRadius,
         shape: decorationShape,
         image:
-          decorationBackground instanceof ImageProvider
-            ? new DecorationImage({
+          decorationBackground instanceof flutter.ImageProvider
+            ? new flutter.DecorationImage({
                 image: decorationBackground,
-                fit: BoxFit.cover as Snippet,
+                fit: flutter.BoxFit.cover as flutter.Snippet,
               })
             : undefined,
         border: decorationBorder,
         boxShadow: decorationBoxShadow,
         color:
-          decorationBackground instanceof Color
-            ? (decorationBackground as Color)
+          decorationBackground instanceof flutter.Color
+            ? (decorationBackground as flutter.Color)
             : undefined,
         gradient:
-          decorationBackground instanceof Gradient
-            ? (decorationBackground as Gradient)
+          decorationBackground instanceof flutter.Gradient
+            ? (decorationBackground as flutter.Gradient)
             : undefined,
       })
-    : decorationBackground instanceof Color
-    ? (decorationBackground as Color)
+    : decorationBackground instanceof flutter.Color
+    ? (decorationBackground as flutter.Color)
     : undefined;
 }
 
 export function makeBoxDecorationBg(
   fills: ReadonlyArray<Figma.Paint>
-): Gradient | Color | ImageProvider {
+): flutter.Gradient | flutter.Color | flutter.ImageProvider {
   const fill = retrieveFill(fills);
 
   if (fill?.type === "SOLID") {

packages/designto-flutter/make/box-decoration.make.ts

@@ -1,11 +1,13 @@
-import { BoxShadow, Offset } from "@bridged.xyz/flutter-builder";
+import * as flutter from "@bridged.xyz/flutter-builder";
 import { ReflectSceneNode } from "@bridged.xyz/design-sdk/lib/nodes/types";
 import { roundNumber } from "@reflect-ui/uiutils";
 import { makeColorFromRGBO } from "./color.make";
 import { Figma } from "@bridged.xyz/design-sdk";
 
-export function makeBoxShadow(node: ReflectSceneNode): Array<BoxShadow> {
-  let boxShadows: Array<BoxShadow> = [];
+export function makeBoxShadow(
+  node: ReflectSceneNode
+): Array<flutter.BoxShadow> {
+  let boxShadows: Array<flutter.BoxShadow> = [];
 
   if (node.effects?.length > 0) {
     const shadows: Array<Figma.ShadowEffect> = node.effects.filter(
@@ -19,25 +21,25 @@ export function makeBoxShadow(node: ReflectSceneNode): Array<BoxShadow> {
     }
 
     shadows.forEach(function (d: Figma.ShadowEffect) {
-      let boxShadow: BoxShadow;
+      let boxShadow: flutter.BoxShadow;
       if (d.type == "DROP_SHADOW") {
-        boxShadow = new BoxShadow({
+        boxShadow = new flutter.BoxShadow({
           color: makeColorFromRGBO(d.color, d.color.a),
           blurRadius: requiredNumber(d.radius),
           spreadRadius: requiredNumber(d.spread),
-          offset: requiredOffset(new Offset(d.offset.x, d.offset.y)),
+          offset: requiredOffset(new flutter.Offset(d.offset.x, d.offset.y)),
         });
       } else if (d.type == "INNER_SHADOW") {
         // handling inner shadow
         // https://stackoverflow.com/a/55096682/5463235
 
-        boxShadow = new BoxShadow({
+        boxShadow = new flutter.BoxShadow({
           color: makeColorFromRGBO(d.color, d.color.a),
           blurRadius: requiredNumber(d.radius),
           // multiply -1 * blur for spread
           // TODO inspect this logic again.
           spreadRadius: requiredNumber((d.spread + d.radius) * -1),
-          offset: requiredOffset(new Offset(d.offset.x, d.offset.y)),
+          offset: requiredOffset(new flutter.Offset(d.offset.x, d.offset.y)),
         });
       }
 
@@ -60,7 +62,7 @@ function requiredNumber(number: number): number {
 /**
  * returns undefined, if offset is redundant.
  */
-function requiredOffset(offset: Offset): Offset {
+function requiredOffset(offset: flutter.Offset): flutter.Offset {
   if (offset.dx == 0 && offset.dy == 0) {
     return undefined;
   }

packages/designto-flutter/make/box-shadow.make.ts

@@ -1,33 +1,27 @@
 import { manifests } from "@reflect-ui/detection";
-import {
-  Color,
-  FlatButton,
-  RoundedRectangleBorder,
-  Text,
-  Snippet,
-} from "@bridged.xyz/flutter-builder";
+import * as flutter from "@bridged.xyz/flutter-builder";
 import { makeColor } from "./color.make";
 import { makeBorderRadius } from "./border-radius.make";
 import { makeBorderSide } from "./border-side.make";
 import { makeDynamicIcon, makeIcon } from "./icon.make";
 
 export function makeButton(manifest: manifests.DetectedButtonManifest) {
-  const text = new Text(manifest.text?.characters);
-  const color: Color = makeColor(manifest.base.fills);
-  const textColor: Color = makeColor(manifest.text?.fills);
+  const text = new flutter.Text(manifest.text?.characters);
+  const color: flutter.Color = makeColor(manifest.base.fills);
+  const textColor: flutter.Color = makeColor(manifest.text?.fills);
   const minWidth = manifest.base.width;
   const height = manifest.base.height;
-  const shape = new RoundedRectangleBorder({
+  const shape = new flutter.RoundedRectangleBorder({
     borderRadius: makeBorderRadius(manifest.base),
     side: makeBorderSide(manifest.base),
   });
-  const onPressed = Snippet.fromStatic(
+  const onPressed = flutter.Snippet.fromStatic(
     '(){ print("Button clicked!"); }'
   ) as any;
 
   if (manifest.icon) {
     const icon = makeDynamicIcon(manifest.icon);
-    return FlatButton.icon({
+    return flutter.FlatButton.icon({
       onPressed: onPressed,
       label: text,
       icon: icon,
@@ -39,7 +33,7 @@ export function makeButton(manifest: manifests.DetectedButtonManifest) {
     });
   }
 
-  return new FlatButton({
+  return new flutter.FlatButton({
     onPressed: onPressed,
     child: text,
     color: color,

packages/designto-flutter/make/button.make.ts

@@ -1,11 +1,4 @@
-import {
-  Color,
-  RoundedRectangleBorder,
-  TextStyle,
-  Text,
-  Chip,
-  Snippet,
-} from "@bridged.xyz/flutter-builder";
+import * as flutter from "@bridged.xyz/flutter-builder";
 import { manifests } from "@reflect-ui/detection";
 import { makeBorderRadius } from ".";
 import { makeBorderSide } from "./border-side.make";
@@ -14,18 +7,18 @@ import { makeDynamicIcon } from "./icon.make";
 
 export function makeChip(manifest: manifests.DetectedChipManifest) {
   console.log({ manifest });
-  var content = new Text(manifest.content?.characters);
-  const color: Color = makeColor(manifest.base.fills);
-  const textColor: Color = makeColor(manifest.content?.fills);
+  var content = new flutter.Text(manifest.content?.characters);
+  const color: flutter.Color = makeColor(manifest.base.fills);
+  const textColor: flutter.Color = makeColor(manifest.content?.fills);
   const height = manifest.base.height;
-  const shape = new RoundedRectangleBorder({
+  const shape = new flutter.RoundedRectangleBorder({
     borderRadius: makeBorderRadius(manifest.base),
     side: makeBorderSide(manifest.base),
   });
-  const onSelected = Snippet.fromStatic(
+  const onSelected = flutter.Snippet.fromStatic(
     '(){ print("Chip onSelected"); }'
   ) as any;
-  const onDeleted = Snippet.fromStatic(
+  const onDeleted = flutter.Snippet.fromStatic(
     '(){ print("Chip onSelected"); }'
   ) as any;
 
@@ -44,11 +37,11 @@ export function makeChip(manifest: manifests.DetectedChipManifest) {
     trailingWidget = icon;
   }
 
-  return new Chip({
+  return new flutter.Chip({
     // onSelected : onSelected,
     onDeleted: onDeleted,
     label: content,
-    labelStyle: new TextStyle({ color: textColor }),
+    labelStyle: new flutter.TextStyle({ color: textColor }),
     backgroundColor: color,
     shape,
     avartar: leadingWidget,

packages/designto-flutter/make/chip.make.ts

@@ -1,14 +1,14 @@
 import { Figma } from "@bridged.xyz/design-sdk";
 import { retrieveFill } from "@bridged.xyz/design-sdk/lib/utils";
-import { Color, Colors } from "@bridged.xyz/flutter-builder";
+import * as flutter from "@bridged.xyz/flutter-builder";
 import { converters } from "@reflect-ui/core/lib";
 
 /**
  * Retrieve the SOLID color for Flutter when existent, otherwise ""
  */
 export function makeColor(
   fills: ReadonlyArray<Figma.Paint> | Figma.Paint
-): Color | undefined {
+): flutter.Color | undefined {
   const fill = retrieveFill(fills);
 
   if (fill?.type === "SOLID") {
@@ -20,19 +20,22 @@ export function makeColor(
   return undefined;
 }
 
-export function makeColorFromRGBO(color: Figma.RGB, opacity: number): Color {
+export function makeColorFromRGBO(
+  color: Figma.RGB,
+  opacity: number
+): flutter.Color {
   try {
     if (color.r + color.g + color.b === 0 && opacity === 0) {
-      return Colors.transparent;
+      return flutter.Colors.transparent;
     }
     if (color.r + color.g + color.b === 0 && opacity === 1) {
-      return Colors.black;
+      return flutter.Colors.black;
     }
     if (color.r + color.g + color.b === 3 && opacity === 1) {
-      return Colors.white;
+      return flutter.Colors.white;
     }
 
-    return Color.fromHex(converters.color.rgbTo8hex(color, opacity));
+    return flutter.Color.fromHex(converters.color.rgbTo8hex(color, opacity));
   } catch (e) {
     console.error(
       `error while converting color to rgba color:${color}, opacity:${opacity}`,