mimic updates on react builder

Author: softmarshmallow

editor/components/app-runner/code-sandbox-runner.tsx

@@ -16,9 +16,14 @@ export function CodeSandBoxView(props: { source: string }) {
       files: {
         "index.js": {
           content: props.source,
-          isBinary: true,
+          isBinary: false,
         },
+        // "package.json": {
+        //   content: "",
+        //   isBinary: false,
+        // },
       },
+      template: "create-react-app-typescript",
     });
 
     const {

editor/next.config.js

@@ -10,10 +10,14 @@ const withTM = require("next-transpile-modules")([
   "@design-sdk/sketch",
   "@reflect-ui/core",
   "@reflect-ui/detection",
-  "@bridged.xyz/flutter-builder",
+
+  // region coli
+  "coli",
   "@coli.codes/web-builder",
   "@coli.codes/web-builder-core",
   "@coli.codes/react-builder",
+  "@bridged.xyz/flutter-builder",
+  // endregion coli
 ]);
 
 const withCSS = require("@zeit/next-css");

editor/pages/figma/to-react.tsx

@@ -35,10 +35,11 @@ export default function FigmaToReactDemoPage() {
   if (reflect) {
     const _reflectWidget = tokenize(reflect);
     const _reactWidget = react.buildReactWidget(_reflectWidget);
-    console.log("_reactWidget", _reactWidget);
+    const _stringfiedReactwidget = react.buildReactApp(_reactWidget, {
+      template: "cra",
+    });
 
-    // todo
-    widgetCode = JSON.stringify(_reactWidget);
+    widgetCode = _stringfiedReactwidget;
   }
 
   return (
@@ -56,7 +57,7 @@ export default function FigmaToReactDemoPage() {
               : "// No input design provided to be converted.."
           }
           options={{
-            mode: "dart",
+            mode: "javascript",
             theme: "monokai",
             lineNumbers: true,
           }}

packages/coli

@@ -1,14 +1,15 @@
 import * as core from "@reflect-ui/core";
 import * as react from "@coli.codes/react-builder";
+import { IWidgetWithStyle } from "@coli.codes/web-builder-core/widget-with-style";
 
 export function buildReactWidgetFromReflectWidget(
   widget: core.Widget
-): react.Widget {
+): IWidgetWithStyle {
   const _reactWidgetChildren = widget.children?.map((c) =>
     buildReactWidgetFromReflectWidget(c)
   );
 
-  let thisReactWidget: react.Widget;
+  let thisReactWidget: IWidgetWithStyle;
   if (widget instanceof core.Column) {
     thisReactWidget = new react.Column();
   } else if (widget instanceof core.Row) {

packages/coli-web-builder

@@ -1,10 +1,15 @@
 import { Widget } from "@reflect-ui/core";
 import { buildReactWidgetFromReflectWidget } from "./build-widget";
+import { stringfyReactWidget_STYLED_COMPONENTS } from "@coli.codes/react-builder";
+import { IWidgetWithStyle } from "@coli.codes/web-builder-core/widget-with-style";
+
 export function buildReactApp(
-  widget: Widget,
+  widget: IWidgetWithStyle,
   options: { template: "cra" | "nextjs" }
-) {
-  throw "not implemented";
+): string {
+  const strigfiedMainWidget = stringfyReactWidget_STYLED_COMPONENTS(widget);
+
+  return strigfiedMainWidget;
 }
 
 export function buildReactWidget(widget: Widget) {