Add About screen, Tailwind absolute positioniong, improve extractText…

… to extract the style, and other fixes.

src/FlutterItemColor.svelte

@@ -9,20 +9,19 @@
   const clipboard = () => dispatch("clipboard");
 
   let textColor;
-  if (contrastBlack > contrastWhite) {
-    textColor = "black";
-  } else {
-    textColor = "white";
-  }
 
   // avoid undeterministic scenarios, where toFixed can't be called in undefined
   let fixedBlack = "";
-  if (contrastBlack) {
-    fixedBlack = contrastBlack.toFixed(2);
-  }
-
   let fixedWhite = "";
-  if (contrastWhite) {
+
+  $: if (contrastBlack || contrastWhite) {
+    if (contrastBlack > contrastWhite) {
+      textColor = "black";
+    } else {
+      textColor = "white";
+    }
+
+    fixedBlack = contrastBlack.toFixed(2);
     fixedWhite = contrastWhite.toFixed(2);
   }
 

src/PluginUI.svelte

@@ -22,6 +22,7 @@
 
   import ScreenTailwind from "./ScreenTailwind.svelte";
   import ScreenFlutter from "./ScreenFlutter.svelte";
+  import ScreenAbout from "./ScreenAbout.svelte";
 </script>
 
 <style lang="postcss">
@@ -35,6 +36,7 @@
   <TabList>
     <Tab>Tailwind</Tab>
     <Tab>Flutter</Tab>
+    <Tab>About</Tab>
   </TabList>
 
   <TabPanel>
@@ -45,6 +47,10 @@
     <ScreenFlutter on:clipboard={updateClipboard} />
   </TabPanel>
 
+  <TabPanel>
+    <ScreenAbout />
+  </TabPanel>
+
 </Tabs>
 
 <div class="p-2">

src/ScreenAbout.svelte

@@ -0,0 +1,215 @@
+<script>
+  import ItemColor from "./FlutterItemColor.svelte";
+  import ItemText from "./TailwindItemText.svelte";
+
+  import Prism from "svelte-prism";
+  import "prism-theme-night-owl";
+  import "prismjs/components/prism-dart";
+</script>
+
+<div class="bg-orange-100 w-full px-8 py-4">
+  <p class="text-center font-bold text-xl">Responsive Layout</p>
+  <div class="w-full pt-4 flex items-center justify-center space-x-4">
+    <div
+      class="inline-flex flex-col items-center justify-center p-5 border-red-600
+      border-2">
+      <div class="relative w-32 h-24">
+        <div
+          p
+          class="inline-flex items-center justify-center px-3 py-3 absolute
+          left-0 bottom-0 h-10 border-red-600 border-2">
+          <p class="text-xs font-medium text-center text-red-600">BAD</p>
+        </div>
+        <div
+          class="inline-flex items-center justify-center px-3 py-3 absolute
+          left-0 top-0 h-10 border-red-600 border-2">
+          <p class="text-xs font-medium text-center text-red-600">BAD</p>
+        </div>
+        <div
+          class="inline-flex items-center justify-center px-3 py-3 absolute
+          inset-y-0 right-0 my-auto h-10 border-red-600 border-2">
+          <p class="text-xs font-medium text-center text-red-600">BAD</p>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="inline-flex space-x-4 items-center justify-center p-4
+      border-blue-600 border-2">
+      <div
+        class="inline-flex flex-col space-y-3 items-center justify-center p-1
+        border-blue-600 border-2">
+        <div
+          class="inline-flex items-center justify-center p-3 h-10
+          border-blue-600 border-2">
+          <p class="text-xs font-medium text-center text-blue-600">GOOD</p>
+        </div>
+        <div
+          class="inline-flex items-center justify-center p-3 h-10
+          border-blue-600 border-2">
+          <p class="text-xs font-medium text-center text-blue-600">GOOD</p>
+        </div>
+      </div>
+      <div
+        class="inline-flex items-center justify-center p-3 h-10 border-blue-600
+        border-2">
+        <p class="text-xs font-medium text-center text-blue-600">GOOD</p>
+      </div>
+    </div>
+  </div>
+  <div class="h-4" />
+
+  <p class="text-center text-base">
+    The plugin works
+    <span class="font-bold">perfectly</span>
+    when layers are vertically or horizontally aligned, even if AutoLayout is
+    off. When the layout is more complex, you can manually group layers to make
+    them aligned.
+  </p>
+
+</div>
+
+<div class="bg-gray-100 w-full px-8 py-4">
+  <p class="text-center font-bold text-xl">Info</p>
+  <div class="h-2" />
+
+  <p class="text-center text-base">
+    I have tried to think what would make sense for
+    <span class="font-bold">80% of people</span>
+    . Still, bugs can and will happen; ideas will appear. Your mission, should
+    you choose to accept, is to share them with me.
+  </p>
+
+</div>
+<div class="bg-blue-900 w-full px-8 py-4">
+  <p class="text-center font-bold text-xl text-white">Figma to Code</p>
+  <div class="h-2" />
+  <p class="text-center font-semibold text-md text-white">
+    Designed and developed by Bernardo Ferrari
+  </p>
+  <div class="h-4" />
+  <div class="flex content-center justify-center space-x-4">
+    <a href="https://twitter.com/@bernaferrari">
+      <button
+        class="bg-white hover:bg-gray-300 text-gray-800 font-semibold p-2 border
+        border-gray-400 rounded-lg shadow">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round">
+          <path
+            d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574
+            2.163-2.723-.951.555-2.005.959-3.127
+            1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92
+            4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64
+            3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188
+            4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946
+            4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631
+            1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39
+            0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0
+            13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56
+            2.46-2.548l-.047-.02z" />
+        </svg>
+      </button>
+    </a>
+    <a href="https://reddit.com/u/bernaferrari">
+      <button
+        class="bg-white hover:bg-gray-300 text-gray-800 font-semibold p-2 border
+        border-gray-400 rounded-lg shadow">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round">
+          <path
+            d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12
+            0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0
+            1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674
+            1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0
+            .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13
+            4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87
+            0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754
+            1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43
+            4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1
+            .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8
+            12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561
+            1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687
+            0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561
+            1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0
+            0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0
+            2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464
+            0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0
+            0 0-.232-.095z" />
+        </svg>
+
+      </button>
+    </a>
+    <a href="mailto:[email protected]">
+      <button
+        class="bg-white hover:bg-gray-300 text-gray-800 font-semibold p-2 border
+        border-gray-400 rounded-lg shadow">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="feather feather-mail">
+          <path
+            d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1
+            0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+          <polyline points="22,6 12,13 2,6" />
+        </svg>
+      </button>
+    </a>
+    <a href="https://github.com/bernaferrari">
+      <button
+        class="bg-white hover:bg-gray-300 text-gray-800 font-semibold p-2 border
+        border-gray-400 rounded-lg shadow">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round">
+          <path
+            d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205
+            11.385.6.113.82-.258.82-.577
+            0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422
+            18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084
+            1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305
+            3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93
+            0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0
+            1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3
+            .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12
+            3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475
+            5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0
+            .315.21.69.825.57C20.565 22.092 24 17.592 24
+            12.297c0-6.627-5.373-12-12-12" />
+        </svg>
+      </button>
+    </a>
+  </div>
+  <div class="flex justify-center mt-1">
+    <a
+      class="text-center text-white text-xs py-2 px-4"
+      href="https://github.com/bernaferrari">
+      This project is open source and has no tracking.
+    </a>
+  </div>
+</div>

src/ScreenFlutter.svelte

@@ -7,43 +7,13 @@
   import "prismjs/components/prism-dart";
 
   let colorData = [];
-  let textData = [];
   let codeData = "";
   let emptySelection = false;
 
   $: colorObservable = colorData;
-  $: textObservable = textData;
   $: codeObservable = codeData;
   $: emptyObservable = emptySelection;
 
-  if (false) {
-    // DEBUG
-    colorData = [
-      { name: "orange-400", hex: "#f2994a" },
-      { name: "red-500", hex: "#eb5757" },
-      { name: "gray-700", hex: "#595959" },
-      { name: "black", hex: "#000000" },
-      { name: "white", hex: "#ffffff" },
-      { name: "green-700", hex: "#219653" }
-    ];
-
-    textData = [
-      { name: "Header", attr: "font-xs bold a" },
-      { name: "Lorem ipsum dolores", attr: "text-sm wide ahja ahja aaa" },
-      { name: "Figma to Code", attr: "aa asa dad asdad" },
-      {
-        name: "Layout",
-        attr:
-          "asd asda sdsd asda sdbhjas dhasjj asidasuidhausdh asudh asuhud ahs dasas"
-      }
-    ];
-
-    codeData = `<div class="inline-flex space-x-1 items-center justify-center p-1 border-gray-700 border-2 rounded-lg">
-<div class="flex items-center justify-center p-1 h-4 bg-white rounded-lg"><p class="h-4 w-4 text-xs font-bold text-center text-gray-700">Aa</p></div>
-<div class="inline-flex flex-col items-center justify-center p-1 self-start w-16"><p class="self-start text-xs font-medium text-black">Header</p><p class="self-start text-xs text-black">font-xs bold arhhh</p></div></div>
-`;
-  }
-
   onmessage = event => {
     console.log("got this from the plugin code", event.data);
     if (!event.data.pluginMessage) {
@@ -57,7 +27,7 @@
     if (event.data.pluginMessage.type === "colors") {
       colorData = event.data.pluginMessage.data;
     } else if (event.data.pluginMessage.type === "text") {
-      textData = event.data.pluginMessage.data;
+      // textData = event.data.pluginMessage.data;
     } else if (event.data.pluginMessage.type === "result") {
       codeData = event.data.pluginMessage.data;
     }
@@ -144,28 +114,6 @@
         </div>
       </div>
     {/if}
-
-    <div class="h-2" />
-
-    {#if textObservable.length > 0}
-      <div
-        class="flex flex-col space-y-2 items-center w-full p-2 border-2
-        rounded-lg">
-        <div class="flex flex-wrap w-full">
-          <div class="p-1 w-1/2">
-            <div
-              class="flex w-full h-full items-center justify-center bg-gray-300
-              rounded-lg">
-              <p class="text-xl font-semibold">Texts</p>
-            </div>
-          </div>
-          {#each textObservable as item}
-            <div class="w-1/2 p-1">
-              <ItemText {...item} on:clipboard={clipboard(item.full)} />
-            </div>
-          {/each}
-        </div>
-      </div>
-    {/if}
   {/if}
+
 </div>

src/TailwindItemText.svelte

@@ -3,7 +3,7 @@
 
   export let name = "";
   export let attr = "";
-  export let color = "";
+  export let style = "";
 
   const dispatch = createEventDispatcher();
   const clipboard = () => dispatch("clipboard");
@@ -13,8 +13,8 @@
   class="flex space-x-2 items-center px-2 py-1 text-left border rounded-lg
   w-full transition duration-300 ease-in-out bg-white transform hover:scale-105"
   on:click={clipboard}>
-  <div class="flex items-center justify-center p-1 h-8 rounded-lg border-2">
-    <p class="text-xs text-center text-gray-700" style="color: {color}">Aa</p>
+  <div class="flex items-center justify-center p-1 h-8">
+    <p class="text-xs text-center text-gray-700" {style}>Aa</p>
   </div>
   <div class="flex flex-col min-w-0">
     <p class="text-sm font-medium truncate w-full">{name}</p>

src/code.ts

@@ -41,7 +41,6 @@ const run = () => {
     undefined
   );
 
-  console.log("mode is ", mode);
   // @ts-ignore
   if (mode === "flutter") {
     result = flutterMain(parentId, convertedSelection, material);
@@ -80,8 +79,9 @@ figma.on("selectionchange", () => {
   run();
 });
 
+// efficient? No. Works? Yes.
+// todo pass data instead of relying in types
 figma.ui.onmessage = (msg) => {
-  console.log("msg is ", msg);
   if (msg.type === "tailwind") {
     mode = "tailwind";
     run();