Skip to content

Commit

Permalink
Add Gradients and Color export to every screen.
Browse files Browse the repository at this point in the history 
Modularize Colors/Gradients and converge 'retrieveColors' into a common 'retrieveGenericSolidUIColors'.

Update color methods naming to try to be consistant accross all frameworks.
  • Loading branch information
@bernaferrari
bernaferrari committed Jan 25, 2021
1 parent c1693e4 commit 59b6e52
Show file tree
Hide file tree
Showing 39 changed files with 835 additions and 641 deletions.
20 changes: 12 additions & 8 deletions __tests__/flutter/builderImpl/flutterColor.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { flutterMain } from "./../../../src/flutter/flutterMain";
import {
flutterColor,
flutterColorFromFills,
flutterBoxDecorationColor,
} from "../../../src/flutter/builderImpl/flutterColor";
import { AltRectangleNode, AltTextNode } from "../../../src/altNodes/altMixins";
Expand All @@ -24,7 +24,9 @@ describe("Flutter Color", () => {
},
];

expect(flutterColor(node.fills)).toEqual("color: Color(0xffef5138), ");
expect(flutterColorFromFills(node.fills)).toEqual(
"color: Color(0xffef5138), "
);
});

it("check for black and white on Text", () => {
Expand All @@ -42,7 +44,7 @@ describe("Flutter Color", () => {
},
];

expect(flutterColor(node.fills)).toEqual("color: Colors.black, ");
expect(flutterColorFromFills(node.fills)).toEqual("color: Colors.black, ");

node.fills = [
{
Expand All @@ -56,7 +58,7 @@ describe("Flutter Color", () => {
},
];

expect(flutterColor(node.fills)).toEqual("color: Colors.white, ");
expect(flutterColorFromFills(node.fills)).toEqual("color: Colors.white, ");
});

it("opacity and visibility changes", () => {
Expand All @@ -74,7 +76,7 @@ describe("Flutter Color", () => {
},
];

expect(flutterColor(node.fills)).toEqual("");
expect(flutterColorFromFills(node.fills)).toEqual("");

node.fills = [
{
Expand All @@ -90,7 +92,7 @@ describe("Flutter Color", () => {
];

// this scenario should never happen in real life; figma allows undefined to be set, but not to be get.
expect(flutterColor(node.fills)).toEqual("color: Colors.black, ");
expect(flutterColorFromFills(node.fills)).toEqual("color: Colors.black, ");

node.fills = [
{
Expand All @@ -104,7 +106,9 @@ describe("Flutter Color", () => {
visible: true,
},
];
expect(flutterColor(node.fills)).toEqual("color: Color(0x00000000), ");
expect(flutterColorFromFills(node.fills)).toEqual(
"color: Color(0x00000000), "
);
});

it("Gradient Linear", () => {
Expand Down Expand Up @@ -266,6 +270,6 @@ describe("Flutter Color", () => {
},
];

expect(flutterColor(node.fills)).toEqual("");
expect(flutterColorFromFills(node.fills)).toEqual("");
});
});
51 changes: 31 additions & 20 deletions __tests__/flutter/builderImpl/flutterSize.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ describe("Flutter Size", () => {

node.width = 16;
node.height = 16;
expect(flutterSize(node)).toEqual("width: 16, height: 16, ");
expect(flutterSize(node).size).toEqual("width: 16, height: 16, ");

node.width = 100;
node.height = 200;
expect(flutterSize(node)).toEqual("width: 100, height: 200, ");
expect(flutterSize(node).size).toEqual("width: 100, height: 200, ");

node.width = 300;
node.height = 300;
expect(flutterSize(node)).toEqual("width: 300, height: 300, ");
expect(flutterSize(node).size).toEqual("width: 300, height: 300, ");
});

it("STRETCH inside AutoLayout", () => {
Expand All @@ -44,9 +44,15 @@ describe("Flutter Size", () => {
child.parent = node;
node.children = [child];

expect(flutterSize(child)).toEqual(
"width: double.infinity, height: double.infinity, "
);
const fSize1 = flutterSize(child);
expect(fSize1.size).toEqual("height: double.infinity, ");
expect(fSize1.isExpanded).toEqual(true);

node.layoutMode = "VERTICAL";

const fSize2 = flutterSize(child);
expect(fSize2.size).toEqual("width: double.infinity, ");
expect(fSize2.isExpanded).toEqual(true);
});

it("Fixed size when children are absolute", () => {
Expand All @@ -56,7 +62,7 @@ describe("Flutter Size", () => {
node.height = 48;
node.children = [new AltRectangleNode(), new AltRectangleNode()];

expect(flutterSize(node)).toEqual("width: 48, height: 48, ");
expect(flutterSize(node).size).toEqual("width: 48, height: 48, ");
});

it("counterAxisSizingMode is FIXED", () => {
Expand All @@ -67,13 +73,13 @@ describe("Flutter Size", () => {
node.children = [new AltRectangleNode(), new AltRectangleNode()];

node.layoutMode = "HORIZONTAL";
expect(flutterSize(node)).toEqual("height: 48, ");
expect(flutterSize(node).size).toEqual("height: 48, ");

node.layoutMode = "VERTICAL";
expect(flutterSize(node)).toEqual("width: 48, ");
expect(flutterSize(node).size).toEqual("width: 48, ");

node.layoutMode = "NONE";
expect(flutterSize(node)).toEqual("width: 48, height: 48, ");
expect(flutterSize(node).size).toEqual("width: 48, height: 48, ");
});

it("counterAxisSizingMode is AUTO", () => {
Expand All @@ -87,7 +93,7 @@ describe("Flutter Size", () => {
node.height = 48;
node.children = [new AltRectangleNode(), new AltRectangleNode()];

expect(flutterSize(node)).toEqual("");
expect(flutterSize(node).size).toEqual("");

// responsive
const parentNode = new AltFrameNode();
Expand All @@ -99,8 +105,8 @@ describe("Flutter Size", () => {
parentNode.height = 48;
parentNode.children = [node];
node.parent = parentNode;
expect(flutterSize(node)).toEqual("");
expect(flutterSize(parentNode)).toEqual("width: 48, height: 48, ");
expect(flutterSize(node).size).toEqual("");
expect(flutterSize(parentNode).size).toEqual("width: 48, height: 48, ");
});

it("width changes when there are strokes", () => {
Expand All @@ -110,7 +116,7 @@ describe("Flutter Size", () => {
node.width = 8;
node.height = 8;

expect(flutterSize(node)).toEqual("width: 8, height: 8, ");
expect(flutterSize(node).size).toEqual("width: 8, height: 8, ");

node.strokeWeight = 4;
node.strokes = [
Expand All @@ -121,10 +127,10 @@ describe("Flutter Size", () => {
];

node.strokeAlign = "CENTER";
expect(flutterSize(node)).toEqual("width: 12, height: 12, ");
expect(flutterSize(node).size).toEqual("width: 12, height: 12, ");

node.strokeAlign = "OUTSIDE";
expect(flutterSize(node)).toEqual("width: 16, height: 16, ");
expect(flutterSize(node).size).toEqual("width: 16, height: 16, ");
});

it("adjust parent if children's size + stroke > parent size", () => {
Expand All @@ -147,10 +153,15 @@ describe("Flutter Size", () => {
parentNode.children = [node];
node.parent = parentNode;

expect(flutterSize(parentNode)).toEqual("width: 16, height: 16, ");
const fSize1 = flutterSize(parentNode);

expect(fSize1.size).toEqual("width: 16, height: 16, ");
expect(fSize1.isExpanded).toEqual(false);

node.strokeAlign = "CENTER";
expect(flutterSize(parentNode)).toEqual("width: 12, height: 12, ");
const fSize2 = flutterSize(parentNode);
expect(fSize2.size).toEqual("width: 12, height: 12, ");
expect(fSize2.isExpanded).toEqual(false);
});

it("full width when width is same to the parent", () => {
Expand All @@ -168,7 +179,7 @@ describe("Flutter Size", () => {

parentNode.children = [node];

expect(flutterSize(parentNode)).toEqual("width: 12, height: 12, ");
expect(flutterSize(node)).toEqual("width: 12, height: 12, ");
expect(flutterSize(parentNode).size).toEqual("width: 12, height: 12, ");
expect(flutterSize(node).size).toEqual("width: 12, height: 12, ");
});
});
55 changes: 47 additions & 8 deletions __tests__/flutter/flutterMain.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,8 @@ Container(width: 4, height: 4, color: Colors.white, ),),],),)`);

expect(flutterMain([node]))
.toEqual(`Row(mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children:[
Container(width: 8, height: 8, color: Colors.white, ), SizedBox(width: 8),
Container(width: 8, height: 8, color: Colors.white, ),
SizedBox(width: 8),
Container(width: 8, height: 8, color: Colors.black, ),], ),`);

// variations for test coverage
Expand All @@ -196,23 +197,26 @@ Container(width: 8, height: 8, color: Colors.black, ),], ),`);

expect(flutterMain([node]))
.toEqual(`Column(mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children:[
Container(width: 8, height: 8, color: Colors.white, ), SizedBox(height: 8),
Container(width: 8, height: 8, color: Colors.white, ),
SizedBox(height: 8),
Container(width: 8, height: 8, color: Colors.black, ),], ),`);

node.primaryAxisAlignItems = "MAX";
node.counterAxisAlignItems = "MAX";

expect(flutterMain([node]))
.toEqual(`Column(mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end, children:[
Container(width: 8, height: 8, color: Colors.white, ), SizedBox(height: 8),
Container(width: 8, height: 8, color: Colors.white, ),
SizedBox(height: 8),
Container(width: 8, height: 8, color: Colors.black, ),], ),`);

node.primaryAxisAlignItems = "SPACE_BETWEEN";
node.counterAxisAlignItems = "CENTER";

expect(flutterMain([node]))
.toEqual(`Column(mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children:[
Container(width: 8, height: 8, color: Colors.white, ), SizedBox(height: 8),
Container(width: 8, height: 8, color: Colors.white, ),
SizedBox(height: 8),
Container(width: 8, height: 8, color: Colors.black, ),], ),`);
});

Expand All @@ -225,14 +229,36 @@ Container(width: 8, height: 8, color: Colors.black, ),], ),`);
node.x = 0;
node.y = 0;
node.layoutMode = "HORIZONTAL";
node.primaryAxisSizingMode = "FIXED";
node.primaryAxisAlignItems = "CENTER";
node.counterAxisSizingMode = "AUTO";
node.counterAxisAlignItems = "CENTER";
node.itemSpacing = 8;
node.paddingBottom = 0;
node.paddingTop = 0;
node.paddingLeft = 0;
node.paddingRight = 0;
node.visible = true;
node.layoutAlign = "INHERIT";
node.fills = [
{
type: "SOLID",
color: {
r: 1,
g: 1,
b: 1,
},
},
];

const child1 = new AltRectangleNode();
child1.width = 8;
child1.height = 8;
child1.x = 0;
child1.y = 0;
child1.layoutGrow = 1;
child1.visible = true;
child1.layoutAlign = "STRETCH";
child1.fills = [
{
type: "SOLID",
Expand All @@ -243,13 +269,26 @@ Container(width: 8, height: 8, color: Colors.black, ),], ),`);
},
},
];

node.children = [child1];
child1.parent = node;

const child2 = new AltRectangleNode();
child2.width = 8;
child2.height = 8;
child2.x = 12;
child2.y = 12;
child2.layoutGrow = 0;
child2.visible = true;
child2.layoutAlign = "INHERIT";
child2.fills = [];
child2.parent = node;

node.children = [child1, child2];

expect(flutterMain([node], "", true)).toEqual(
`SizedBox(width: 8, height: 8, child:
Material(color: Colors.white, ), ),`
`SizedBox(width: 32, child: Material(color: Colors.white, child: Row(mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children:[
Expanded(child: SizedBox(height: double.infinity, child: Material(color: Colors.white, ), ), ),
SizedBox(width: 8),
Container(width: 8, height: 8, ),], ), ), ),`
);
});
});
27 changes: 13 additions & 14 deletions __tests__/flutter/flutterMaterial.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,23 +62,23 @@ Material(color: Colors.transparent, child: Padding(padding: const EdgeInsets.all
},
];

expect(flutterMaterial(node, ""))
.toEqual(`SizedBox(width: 10, height: 10, child:
Material(color: Colors.white, ), ), `);
expect(flutterMaterial(node, "")).toEqual(
`\nSizedBox(width: 10, height: 10, child: Material(color: Colors.white, ), ), `
);

expect(flutterMaterial(node, "child"))
.toEqual(`SizedBox(width: 10, height: 10, child:
Material(color: Colors.white, child: child), ), `);
expect(flutterMaterial(node, "child")).toEqual(
`\nSizedBox(width: 10, height: 10, child: Material(color: Colors.white, child: child), ), `
);
});

it("ellipse", () => {
const node = new AltEllipseNode();
node.width = 10;
node.height = 10;

expect(flutterMaterial(node, ""))
.toEqual(`SizedBox(width: 10, height: 10, child:
Material(color: Colors.transparent, shape: CircleBorder(), ), ), `);
expect(flutterMaterial(node, "")).toEqual(
`\nSizedBox(width: 10, height: 10, child: Material(color: Colors.transparent, shape: CircleBorder(), ), ), `
);
});

it("rectangle with border", () => {
Expand All @@ -97,9 +97,9 @@ Material(color: Colors.transparent, shape: CircleBorder(), ), ), `);
},
];

expect(flutterMaterial(node, ""))
.toEqual(`SizedBox(width: 10, height: 10, child:
Material(color: Colors.transparent, shape: RoundedRectangleBorder(side: BorderSide(width: 4, color: Colors.white, ), ),), ), `);
expect(flutterMaterial(node, "")).toEqual(
`\nSizedBox(width: 10, height: 10, child: Material(color: Colors.transparent, shape: RoundedRectangleBorder(side: BorderSide(width: 4, color: Colors.white, ), ),), ), `
);
});

it("clipping", () => {
Expand All @@ -119,8 +119,7 @@ Material(color: Colors.transparent, shape: RoundedRectangleBorder(side: BorderSi
node.children = [child];

expect(flutterMaterial(node, "")).toEqual(
`SizedBox(width: 10, height: 10, child:
Material(color: Colors.transparent, borderRadius: BorderRadius.circular(10), clipBehavior: Clip.antiAlias, ), ), `
`\nSizedBox(width: 10, height: 10, child: Material(color: Colors.transparent, borderRadius: BorderRadius.circular(10), clipBehavior: Clip.antiAlias, ), ), `
);
});
});
Loading

0 comments on commit 59b6e52

Please sign in to comment.