Warning log (#144)

* Added a method for recording and displaying warnings when doing conversions.

* Added icon and changed color to yellow.

* added dark theme (only slightly darker)

* Accidentally missed several merge conflicts in rebase

* more merge fixes

* Fixed issue with empty selection causing weird errors with syntax highlighter

Author: mimshwright

apps/debug/pages/index.tsx

@@ -6,6 +6,8 @@ export default function Web() {
   const [selectedFramework, setSelectedFramework] =
     React.useState<FrameworkTypes>("HTML");
 
+  const testWarnings = ["This is an example of a conversion warning message."];
+
   return (
     <div className="flex flex-col p-8 space-y-2">
       <p className="text-3xl font-bold">Debug Mode</p>
@@ -19,14 +21,14 @@ export default function Web() {
               code={
                 "backend:dev: CJS dist/index.js 105.74 KB backend:dev: CJS ⚡️ Build        success in 419ms plugin:dev: warn - Port 3000 is in use, trying 3001        instead. plugin:dev: warn - Port 3001 is in use, trying 3002 instead."
               }
-              emptySelection={false}
               selectedFramework={selectedFramework}
               setSelectedFramework={setSelectedFramework}
               htmlPreview={null}
               settings={undefined}
               onPreferenceChanged={() => {}}
               colors={[]}
               gradients={[]}
+              warnings={testWarnings}
             />
           </div>
         </div>
@@ -38,12 +40,12 @@ export default function Web() {
               code={"code goes hereeeee"}
               selectedFramework={selectedFramework}
               setSelectedFramework={setSelectedFramework}
-              emptySelection={false}
               htmlPreview={null}
               settings={undefined}
               onPreferenceChanged={() => {}}
               colors={[]}
               gradients={[]}
+              warnings={testWarnings}
             />
           </div>
         </div>

apps/plugin/ui-src/App.tsx

@@ -10,6 +10,7 @@ import {
   SolidColorConversion,
   ErrorMessage,
   SettingsChangedMessage,
+  Warning,
 } from "types";
 import { postUISettingsChangingMessage } from "./messaging";
 
@@ -21,6 +22,7 @@ interface AppState {
   settings: PluginSettings | null;
   colors: SolidColorConversion[];
   gradients: LinearGradientConversion[];
+  warnings: Warning[];
 }
 
 const emptyPreview = { size: { width: 0, height: 0 }, content: "" };
@@ -33,6 +35,7 @@ export default function App() {
     settings: null,
     colors: [],
     gradients: [],
+    warnings: [],
   });
 
   const rootStyles = getComputedStyle(document.documentElement);
@@ -68,8 +71,9 @@ export default function App() {
           // const emptyMessage = untypedMessage as EmptyMessage;
           setState((prevState) => ({
             ...prevState,
-            code: "// No layer is selected.",
+            code: "",
             htmlPreview: emptyPreview,
+            warnings: [],
             colors: [],
             gradients: [],
           }));
@@ -131,7 +135,7 @@ export default function App() {
     <div className={`${figmaColorBgValue === "#ffffff" ? "" : "dark"}`}>
       <PluginUI
         code={state.code}
-        emptySelection={false}
+        warnings={state.warnings}
         selectedFramework={state.selectedFramework}
         setSelectedFramework={handleFrameworkChange}
         htmlPreview={state.htmlPreview}

packages/backend/src/code.ts

@@ -8,11 +8,12 @@ import { generateHTMLPreview, htmlMain } from "./html/htmlMain";
 import { postConversionComplete, postEmptyMessage } from "./messaging";
 import { swiftuiMain } from "./swiftui/swiftuiMain";
 import { tailwindMain } from "./tailwind/tailwindMain";
+import { clearWarnings, warnings } from "./common/commonConversionWarnings";
 import { PluginSettings } from "types";
 
 export const run = (settings: PluginSettings) => {
+  clearWarnings();
   const selection = figma.currentPage.selection;
-
   const convertedSelection = convertIntoNodes(selection, null);
 
   // ignore when nothing was selected
@@ -47,6 +48,7 @@ export const run = (settings: PluginSettings) => {
     colors,
     gradients,
     settings,
+    warnings: [...warnings],
   });
 };
 

packages/backend/src/common/commonConversionWarnings.ts

@@ -0,0 +1,10 @@
+import { Warning } from "types";
+
+export const warnings = new Set<Warning>();
+export const addWarning = (warning: Warning) => {
+  if (warnings.has(warning) === false) {
+    console.warn(warning);
+  }
+  warnings.add(warning);
+};
+export const clearWarnings = () => warnings.clear();

packages/backend/src/flutter/builderImpl/flutterColor.ts

@@ -1,4 +1,5 @@
 import { rgbTo8hex, gradientAngle } from "../../common/color";
+import { addWarning } from "../../common/commonConversionWarnings";
 import { generateWidgetCode, sliceNum } from "../../common/numToAutoFixed";
 import { retrieveTopFill } from "../../common/retrieveFill";
 import { nearestValue } from "../../tailwind/conversionTables";
@@ -50,6 +51,7 @@ export const flutterBoxDecorationColor = (
 };
 
 export const flutterDecorationImage = (node: SceneNode, fill: ImagePaint) => {
+  addWarning("Image fills are replaced with placeholders");
   return generateWidgetCode("DecorationImage", {
     image: `NetworkImage("https://via.placeholder.com/${node.width.toFixed(
       0,
@@ -82,7 +84,7 @@ export const flutterGradient = (fill: GradientPaint): string => {
     case "GRADIENT_ANGULAR":
       return flutterAngularGradient(fill);
     default:
-      // Diamond gradient is unsupported.
+      addWarning("Diamond dradients are not supported in Flutter");
       return "";
   }
 };

packages/backend/src/flutter/flutterMain.ts

@@ -13,6 +13,7 @@ import {
 } from "./builderImpl/flutterAutoLayout";
 import { commonSortChildrenWhenInferredAutoLayout } from "../common/commonChildrenOrder";
 import { PluginSettings } from "types";
+import { addWarning } from "../common/commonConversionWarnings";
 
 let localSettings: PluginSettings;
 let previousExecutionCache: string[];
@@ -113,6 +114,9 @@ const flutterWidgetGenerator = (
       case "TEXT":
         comp.push(flutterText(node));
         break;
+      case "VECTOR":
+        addWarning("VectorNodes are not supported in Flutter");
+        break;
       default:
       // do nothing
     }
@@ -143,6 +147,7 @@ const flutterContainer = (node: SceneNode, child: string): string => {
 
   let image = "";
   if ("fills" in node && retrieveTopFill(node.fills)?.type === "IMAGE") {
+    addWarning("Image fills are replaced with placeholders");
     image = `Image.network("https://via.placeholder.com/${node.width.toFixed(
       0,
     )}x${node.height.toFixed(0)}")`;

packages/backend/src/html/htmlMain.ts

@@ -6,6 +6,7 @@ import { htmlAutoLayoutProps } from "./builderImpl/htmlAutoLayout";
 import { formatWithJSX } from "../common/parseJSX";
 import { commonSortChildrenWhenInferredAutoLayout } from "../common/commonChildrenOrder";
 import { PluginSettings } from "types";
+import { addWarning } from "../common/commonConversionWarnings";
 
 let showLayerNames = false;
 
@@ -87,6 +88,8 @@ const htmlWidgetGenerator = (
         break;
       case "VECTOR":
         comp += htmlAsset(node, isJsx);
+        addWarning("VectorNodes are not fully supported in HTML");
+        break;
     }
   });
 
@@ -208,6 +211,7 @@ export const htmlAsset = (node: SceneNode, isJsx: boolean = false): string => {
   let tag = "div";
   let src = "";
   if (retrieveTopFill(node.fills)?.type === "IMAGE") {
+    addWarning("Image fills are replaced with placeholders");
     tag = "img";
     src = ` src="https://via.placeholder.com/${node.width.toFixed(
       0,
@@ -249,6 +253,7 @@ export const htmlContainer = (
     let tag = "div";
     let src = "";
     if (retrieveTopFill(node.fills)?.type === "IMAGE") {
+      addWarning("Image fills are replaced with placeholders");
       if (!("children" in node) || node.children.length === 0) {
         tag = "img";
         src = ` src="https://via.placeholder.com/${node.width.toFixed(

packages/backend/src/swiftui/builderImpl/swiftuiColor.ts

@@ -2,6 +2,7 @@ import { retrieveTopFill } from "../../common/retrieveFill";
 import { gradientAngle } from "../../common/color";
 import { nearestValue } from "../../tailwind/conversionTables";
 import { sliceNum } from "../../common/numToAutoFixed";
+import { addWarning } from "../../common/commonConversionWarnings";
 
 export const swiftUISolidColor = (fill: Paint): string => {
   if (fill && fill.type === "SOLID") {
@@ -58,6 +59,7 @@ export const swiftuiBackground = (
   } else if (fill?.type === "GRADIENT_LINEAR") {
     return swiftuiGradient(fill);
   } else if (fill?.type === "IMAGE") {
+    addWarning("Image fills are replaced with placeholders");
     return `AsyncImage(url: URL(string: "https://via.placeholder.com/${node.width.toFixed(
       0,
     )}x${node.height.toFixed(0)}"))`;

packages/backend/src/swiftui/swiftuiMain.ts

@@ -4,6 +4,7 @@ import { SwiftuiTextBuilder } from "./swiftuiTextBuilder";
 import { SwiftuiDefaultBuilder } from "./swiftuiDefaultBuilder";
 import { commonSortChildrenWhenInferredAutoLayout } from "../common/commonChildrenOrder";
 import { PluginSettings } from "types";
+import { addWarning } from "../common/commonConversionWarnings";
 
 let localSettings: PluginSettings;
 let previousExecutionCache: string[];
@@ -85,6 +86,9 @@ const swiftuiWidgetGenerator = (
       case "TEXT":
         comp.push(swiftuiText(node));
         break;
+      case "VECTOR":
+        addWarning("VectorNodes are not supported in SwiftUI");
+        break;
       default:
         break;
     }

packages/backend/src/tailwind/builderImpl/tailwindColor.ts

@@ -6,6 +6,7 @@ import {
   nearestValue,
 } from "../conversionTables";
 import { TailwindColorType } from "types";
+import { addWarning } from "../../common/commonConversionWarnings";
 
 /**
  * Get a tailwind color value object
@@ -90,6 +91,10 @@ export const tailwindGradientFromFills = (
     return tailwindGradient(fill);
   }
 
+  addWarning(
+    "Gradients are not fully supported in Tailwind except for Linear Gradients.",
+  );
+
   return "";
 };