Big fat New Years refactor (#151)

* renamed Frameworks

(cherry picked from commit 533bbd8e6202ad903f2783683cf82fc860c26f0e)

* removed unused. fixed typo

(cherry picked from commit 79d76a358a05b0544af1859ad2eb55888e077c8a)

* extracted components from plugin-ui

* added warning icon to components

* updated tsconfig

* removing unused code

* Add code type automatically when posting code message

* Moved convert to code to its own file. also made htmlpreview a single step.

* renamed some things and removed exports from some local functions

* removed unused code in alt conversion

* altnode conversion WIP

* continuing refactor of alt node conversion. WIP

* finished refactoring alt nodes

* removed AltNode type

Author: mimshwright

apps/debug/pages/index.tsx

@@ -1,10 +1,10 @@
-import { FrameworkTypes } from "types";
+import { Framework } from "types";
 import * as React from "react";
 import { PluginUI } from "plugin-ui";
 
 export default function Web() {
   const [selectedFramework, setSelectedFramework] =
-    React.useState<FrameworkTypes>("HTML");
+    React.useState<Framework>("HTML");
 
   const testWarnings = ["This is an example of a conversion warning message."];
 
@@ -18,9 +18,7 @@ export default function Web() {
           <div className="bg-white w-96 shadow-md rounded-md">
             <PluginFigmaToolbar variant="(Light)" />
             <PluginUI
-              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."
-              }
+              code={"code goes hereeeee"}
               selectedFramework={selectedFramework}
               setSelectedFramework={setSelectedFramework}
               htmlPreview={null}
@@ -50,26 +48,6 @@ export default function Web() {
           </div>
         </div>
       </div>
-      {/* <div>Templates for debugging</div>
-      <div className="flex space-x-4">
-        {[1, 2, 3, 4, 5].map((d) => (
-          <div
-            key={`row ${d}`}
-            className={`bg-gray-400 w-28 h-28 rounded ${
-              d == 1 ? "ring-2 ring-green-500" : ""
-            }`}
-          >
-            <Image
-              src="https://images.unsplash.com/photo-1678653300204-75de70535454?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=120&q=0"
-              alt="A random image"
-              width={112}
-              height={112}
-              style={{ objectFit: "cover" }}
-              className="rounded"
-            />
-          </div>
-        ))}
-      </div> */}
 
       <div>Plugin dropdown selection (each frame a different breakpoint)</div>
       <div className="flex space-x-4">
@@ -97,7 +75,6 @@ export default function Web() {
 
 const PluginFigmaToolbar = (props: { variant: string }) => (
   <div className="bg-gray-800 w-full h-8 flex items-center text-white space-x-4 px-4">
-    {/* <div className="bg-white w-4 h-4 rounded" /> */}
     <span>Figma to Code {props.variant}</span>
   </div>
 );

apps/plugin/plugin-src/code.ts

@@ -16,7 +16,7 @@ import { PluginSettings, SettingWillChangeMessage } from "types";
 
 let userPluginSettings: PluginSettings;
 
-const defaultPluginSettings: PluginSettings = {
+export const defaultPluginSettings: PluginSettings = {
   framework: "HTML",
   jsx: false,
   optimizeLayout: true,

apps/plugin/ui-src/App.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { PluginUI } from "plugin-ui";
 import {
-  FrameworkTypes,
+  Framework,
   PluginSettings,
   ConversionMessage,
   Message,
@@ -16,7 +16,7 @@ import { postUISettingsChangingMessage } from "./messaging";
 
 interface AppState {
   code: string;
-  selectedFramework: FrameworkTypes;
+  selectedFramework: Framework;
   isLoading: boolean;
   htmlPreview: HTMLPreview;
   settings: PluginSettings | null;
@@ -119,7 +119,7 @@ export default function App() {
     ) : null;
   }
 
-  const handleFrameworkChange = (updatedFramework: FrameworkTypes) => {
+  const handleFrameworkChange = (updatedFramework: Framework) => {
     setState((prevState) => ({
       ...prevState,
       // code: "// Loading...",