Skip to content

Commit

Permalink
Add image support to HTML/Tailwind, FlutterLogo to Flutter and color …
Browse files Browse the repository at this point in the history 
…placeholder for SwiftUI.
  • Loading branch information
@bernaferrari
bernaferrari committed Feb 18, 2021
1 parent b021c30 commit 2263995
Show file tree
Hide file tree
Showing 17 changed files with 181 additions and 67 deletions.
12 changes: 5 additions & 7 deletions __tests__/altNodes/altConversions.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ describe("AltConversions", () => {
rectangle.resize(20, 20);

expect(tailwindMain(convertIntoAltNodes([rectangle]))).toEqual(
'<div class="w-5 h-5"></div>'
'<div class="w-5 h-5"/>'
);
});

Expand All @@ -41,7 +41,7 @@ describe("AltConversions", () => {

expect(htmlMain(convertIntoAltNodes([frame]))).toEqual(
`<div style="width: 20px; height: 20px;">
<div style="width: 20px; height: 20px;"></div>
<div style="width: 20px; height: 20px;"/>
</div>`
);
});
Expand Down Expand Up @@ -126,7 +126,7 @@ describe("AltConversions", () => {

expect(
tailwindMain(convertIntoAltNodes([node], new AltFrameNode()))
).toEqual(`<div class="w-5 h-5 rounded-full"></div>`);
).toEqual(`<div class="w-5 h-5 rounded-full"/>`);
});

it("Line", () => {
Expand All @@ -146,7 +146,7 @@ describe("AltConversions", () => {

expect(
tailwindMain(convertIntoAltNodes([node], new AltFrameNode()))
).toEqual(`<div class="w-5 h-0.5"></div>`);
).toEqual(`<div class="w-5 h-0.5"/>`);
});

it("Vector", () => {
Expand All @@ -173,8 +173,6 @@ describe("AltConversions", () => {

expect(
tailwindMain(convertIntoAltNodes([node], new AltFrameNode()))
).toEqual(
`<div class="w-5 h-5 bg-pink-900 bg-opacity-50 rounded-lg"></div>`
);
).toEqual(`<div class="w-5 h-5 bg-pink-900 bg-opacity-50 rounded-lg"/>`);
});
});
2 changes: 1 addition & 1 deletion __tests__/altNodes/convertGroupToFrame.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ describe("Convert Group to Frame", () => {
const converted = convertGroupToFrame(group);
expect(tailwindMain([convertNodesOnRectangle(converted)]))
.toEqual(`<div class="relative w-5 h-5">
<div class="w-full h-full"></div>
<div class="w-full h-full"/>
</div>`);
});

Expand Down
12 changes: 6 additions & 6 deletions __tests__/altNodes/convertNodesOnRectangle.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ describe("convert node if child is big rect", () => {

expect(tailwindMain([converted])).toEqual(
`<div class="w-24 h-24">
<div class="w-full h-full bg-black"></div>
<div class="w-full h-full bg-black"/>
</div>`
);
});
Expand Down Expand Up @@ -99,7 +99,7 @@ describe("convert node if child is big rect", () => {
expect(tailwindMain([invisibleConverted])).toEqual(
`<div class="w-24 h-24">
<div class="inline-flex items-start justify-start w-full h-full pr-12 pb-12">
<div class="flex-1 h-full bg-white"></div>
<div class="flex-1 h-full bg-white"/>
</div>
</div>`
);
Expand Down Expand Up @@ -157,7 +157,7 @@ describe("convert node if child is big rect", () => {
expect(tailwindMain([converted])).toEqual(
`<div class="w-5 h-5">
<div class="inline-flex items-center justify-center w-full h-full p-1 bg-black">
<div class="flex-1 h-full bg-white"></div>
<div class="flex-1 h-full bg-white"/>
</div>
</div>`
);
Expand Down Expand Up @@ -190,8 +190,8 @@ describe("convert node if child is big rect", () => {

expect(tailwindMain([convertNodesOnRectangle(group)]))
.toEqual(`<div class="relative" style="width: 120px; height: 20px;">
<div class="w-24 h-24 absolute left-0 top-0"></div>
<div class="w-5 h-28 absolute left-0 top-0"></div>
<div class="w-24 h-24 absolute left-0 top-0"/>
<div class="w-5 h-28 absolute left-0 top-0"/>
</div>`);
});
it("group with 2 children", () => {
Expand Down Expand Up @@ -251,7 +251,7 @@ describe("convert node if child is big rect", () => {

expect(tailwindMain([conv])).toEqual(
`<div class="inline-flex items-start justify-start w-5 h-5 pr-3 pb-3 bg-black">
<div class="flex-1 h-full bg-white"></div>
<div class="flex-1 h-full bg-white"/>
</div>`
);
});
Expand Down
26 changes: 13 additions & 13 deletions __tests__/altNodes/convertToAutoLayout.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ describe("Convert to AutoLayout", () => {
// output should be HORIZONTAL
expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
`<div class="inline-flex items-start justify-end w-12 h-12 pr-2.5 pb-8">
<div class="w-1/2 h-full bg-white"></div>
<div class="w-1/2 h-full bg-black"></div>
<div class="w-1/2 h-full bg-white"/>
<div class="w-1/2 h-full bg-black"/>
</div>`
);

Expand All @@ -72,8 +72,8 @@ describe("Convert to AutoLayout", () => {

expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
`<div class="inline-flex flex-col items-start justify-end w-12 h-12 pr-8 pb-2.5">
<div class="w-full h-1/2 bg-white"></div>
<div class="w-full h-1/2 bg-black"></div>
<div class="w-full h-1/2 bg-white"/>
<div class="w-full h-1/2 bg-black"/>
</div>`
);

Expand All @@ -87,8 +87,8 @@ describe("Convert to AutoLayout", () => {

expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
`<div class="inline-flex flex-col space-y-1 items-end justify-end w-12 h-12 pb-1">
<div class="w-full h-5 bg-white"></div>
<div class="w-5 h-5 bg-black"></div>
<div class="w-full h-5 bg-white"/>
<div class="w-5 h-5 bg-black"/>
</div>`
);

Expand All @@ -103,8 +103,8 @@ describe("Convert to AutoLayout", () => {

expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
`<div class="inline-flex items-end justify-end w-12 h-12 pr-2.5">
<div class="w-1/2 h-full bg-white"></div>
<div class="w-1/2 h-5 bg-black"></div>
<div class="w-1/2 h-full bg-white"/>
<div class="w-1/2 h-5 bg-black"/>
</div>`
);

Expand All @@ -118,8 +118,8 @@ describe("Convert to AutoLayout", () => {

expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
`<div class="relative" style="width: 50px; height: 50px;">
<div class="w-5 h-5 absolute bg-black" style="left: 10px; top: 10px;"></div>
<div class="w-5 h-5 absolute left-0 top-0 bg-white"></div>
<div class="w-5 h-5 absolute bg-black" style="left: 10px; top: 10px;"/>
<div class="w-5 h-5 absolute left-0 top-0 bg-white"/>
</div>`
);
});
Expand Down Expand Up @@ -159,9 +159,9 @@ describe("Convert to AutoLayout", () => {
// output should be HORIZONTAL
expect(tailwindMain([convertToAutoLayout(frame)]))
.toEqual(`<div class="inline-flex items-start justify-end w-12 h-12 pb-8">
<div class="w-5 h-full"></div>
<div class="w-5 h-full"></div>
<div class="w-5 h-full"></div>
<div class="w-5 h-full"/>
<div class="w-5 h-full"/>
<div class="w-5 h-full"/>
</div>`);
});
});
2 changes: 1 addition & 1 deletion __tests__/html/builderImpl/htmlColor.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ describe("HTML Color", () => {
node.dashPattern = [];

expect(htmlMain([node])).toEqual(
`<div style="width: 18px; height: 18px; background-image: linear-gradient(131deg, black, rgba(255, 0, 0, 1)); border-radius: 16px; border-style: solid; border-width: 4px; border-style: solid; border-color: rgba(63.75, 63.75, 63.75, 1);"></div>`
`<div style="width: 18px; height: 18px; background-image: linear-gradient(131deg, black, rgba(255, 0, 0, 1)); border-radius: 16px; border-style: solid; border-width: 4px; border-style: solid; border-color: rgba(63.75, 63.75, 63.75, 1);"/>`
);
});

Expand Down
26 changes: 12 additions & 14 deletions __tests__/html/htmlMain.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ describe("HTML Main", () => {

expect(htmlMain([convertToAutoLayout(node)]))
.toEqual(`<div style="width: 320px; height: 320px; position: relative;">
<div style="width: 385px; height: 8px; left: 9px; top: 9px; position: absolute; background-color: white;"></div>
<div style="width: 8px; height: 385px; left: 9px; top: 9px; position: absolute;"></div>
<div style="width: 385px; height: 8px; left: 9px; top: 9px; position: absolute; background-color: white;"/>
<div style="width: 8px; height: 385px; left: 9px; top: 9px; position: absolute;"/>
</div>`);
});

Expand Down Expand Up @@ -91,17 +91,15 @@ describe("HTML Main", () => {
child.parent = node;
expect(htmlMain([node], "", true, true))
.toEqual(`<div className="GROUP" style={{width: 32, height: 32, position: 'relative',}}>
<div className="RECT" style={{width: 4, height: 4, left: 9, top: 9, position: 'absolute', backgroundColor: 'white',}}></div>
<div className="RECT" style={{width: 4, height: 4, left: 9, top: 9, position: 'absolute', backgroundColor: 'white',}}/>
</div>`);
});

it("ellipse with no size", () => {
const node = new AltEllipseNode();

// undefined (unitialized, only happen on tests)
expect(htmlMain([node])).toEqual(
'<div style="border-radius: 9999px;"></div>'
);
expect(htmlMain([node])).toEqual('<div style="border-radius: 9999px;"/>');
// todo verify if it is working properly.
node.x = 0;
node.y = 0;
Expand Down Expand Up @@ -201,8 +199,8 @@ describe("HTML Main", () => {

expect(htmlMain([convertToAutoLayout(node)], "", true, true))
.toEqual(`<div className="FRAME" style={{width: 32, height: 32, position: 'relative',}}>
<div className="RECT1" style={{width: 4, height: 4, left: 9, top: 9, position: 'absolute', backgroundColor: 'white',}}></div>
<div className="RECT2" style={{width: 4, height: 4, left: 9, top: 9, position: 'absolute',}}></div>
<div className="RECT1" style={{width: 4, height: 4, left: 9, top: 9, position: 'absolute', backgroundColor: 'white',}}/>
<div className="RECT2" style={{width: 4, height: 4, left: 9, top: 9, position: 'absolute',}}/>
</div>`);
});

Expand Down Expand Up @@ -258,9 +256,9 @@ describe("HTML Main", () => {

expect(htmlMain([node], "", false, true))
.toEqual(`<div class="FRAME" style="width: 32px; height: 32px; display: inline-flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;">
<div class="RECT1" style="width: 4px; height: 4px; background-color: white;"></div>
<div style="width: 4px;"></div>
<div class="RECT2" style="width: 4px; height: 4px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;"></div>
<div class="RECT1" style="width: 4px; height: 4px; background-color: white;"/>
<div style="width: 4px;"/>
<div class="RECT2" style="width: 4px; height: 4px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;"/>
</div>`);

node.primaryAxisAlignItems = "MAX";
Expand All @@ -271,9 +269,9 @@ describe("HTML Main", () => {

expect(htmlMain([node], "", false, true))
.toEqual(`<div class="FRAME" style="width: 32px; height: 32px; display: inline-flex; flex-direction: row; align-items: flex-end; justify-content: flex-end;">
<div class="RECT1" style="width: 4px; height: 4px; background-color: white;"></div>
<div style="width: 4px;"></div>
<div class="RECT2" style="width: 4px; height: 4px; display: inline-flex; flex-direction: column; align-items: center; justify-content: space-between;"></div>
<div class="RECT1" style="width: 4px; height: 4px; background-color: white;"/>
<div style="width: 4px;"/>
<div class="RECT2" style="width: 4px; height: 4px; display: inline-flex; flex-direction: column; align-items: center; justify-content: space-between;"/>
</div>`);
});

Expand Down
4 changes: 3 additions & 1 deletion __tests__/swiftui/builderImpl/swiftuiColor.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,8 @@ describe("SwiftUI Color", () => {
},
];

expect(swiftuiColorFromFills(node.fills)).toEqual("");
expect(swiftuiColorFromFills(node.fills)).toEqual(
"Color(red: 0.50, green: 0.23, blue: 0.27, opacity: 0.50)"
);
});
});
2 changes: 1 addition & 1 deletion __tests__/tailwind/builderImpl/tailwindColor.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ describe("Tailwind Color", () => {
node.cornerRadius = 16;

expect(tailwindMain([node])).toEqual(
`<div class="w-4 h-4 bg-gradient-to-br from-black to-red-600 border-4 rounded-full border-gray-700"></div>`
`<div class="w-4 h-4 bg-gradient-to-br from-black to-red-600 border-4 rounded-full border-gray-700"/>`
);
});

Expand Down
10 changes: 5 additions & 5 deletions __tests__/tailwind/size.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ describe("Tailwind Size", () => {

expect(tailwindMain([frameNodeToAlt(node)]))
.toEqual(`<div class="inline-flex items-center justify-center p-60" style="width: 500px; height: 500px;">
<div class="flex-1 h-full"></div>
<img class="flex-1 h-full rounded-full" src="https://via.placeholder.com/8x8"/>
</div>`);

expect(tailwindSize(frameNodeToAlt(subnode))).toEqual("w-2 h-2 ");
Expand Down Expand Up @@ -261,10 +261,10 @@ describe("Tailwind Size", () => {

expect(tailwindMain([node]))
.toEqual(`<div class="inline-flex flex-col space-y-2.5 items-center justify-center w-56 h-72 px-2.5 bg-red-600">
<div class="w-full h-5 bg-white"></div>
<div class="w-full h-5 bg-white"></div>
<div class="w-24 h-5 bg-white"></div>
<div class="w-8 h-5 bg-white"></div>
<div class="w-full h-5 bg-white"/>
<div class="w-full h-5 bg-white"/>
<div class="w-24 h-5 bg-white"/>
<div class="w-8 h-5 bg-white"/>
</div>`);
});
});
Expand Down
12 changes: 6 additions & 6 deletions __tests__/tailwind/tailwindMain.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ describe("Tailwind Main", () => {

expect(tailwindMain([convertToAutoLayout(node)]))
.toEqual(`<div class="relative" style="width: 320px; height: 320px;">
<div class="absolute bg-white" style="width: 385px; height: 8px; left: 9px; top: 9px;"></div>
<div class="w-2 h-96 absolute" style="left: 9px; top: 9px;"></div>
<div class="absolute bg-white" style="width: 385px; height: 8px; left: 9px; top: 9px;"/>
<div class="w-2 h-96 absolute" style="left: 9px; top: 9px;"/>
</div>`);
});

Expand Down Expand Up @@ -90,15 +90,15 @@ describe("Tailwind Main", () => {
child.parent = node;
expect(tailwindMain([node], "", true, true))
.toEqual(`<div className="GROUP relative" style={{width: 32, height: 32,}}>
<div className="RECT w-1 h-1 absolute bg-white" style={{left: 9, top: 9,}}></div>
<div className="RECT w-1 h-1 absolute bg-white" style={{left: 9, top: 9,}}/>
</div>`);
});

it("ellipse with no size", () => {
const node = new AltEllipseNode();

// undefined (unitialized, only happen on tests)
expect(tailwindMain([node])).toEqual('<div class="rounded-full"></div>');
expect(tailwindMain([node])).toEqual('<div class="rounded-full"/>');

node.width = 0;
node.height = 10;
Expand Down Expand Up @@ -195,8 +195,8 @@ describe("Tailwind Main", () => {

expect(tailwindMain([convertToAutoLayout(node)], "", true, true))
.toEqual(`<div className="FRAME relative" style={{width: 32, height: 32,}}>
<div className="RECT1 w-1 h-1 absolute bg-white" style={{left: 9, top: 9,}}></div>
<div className="RECT2 w-1 h-1 absolute" style={{left: 9, top: 9,}}></div>
<div className="RECT1 w-1 h-1 absolute bg-white" style={{left: 9, top: 9,}}/>
<div className="RECT2 w-1 h-1 absolute" style={{left: 9, top: 9,}}/>
</div>`);
});
});

0 comments on commit 2263995

Please sign in to comment.