add react demo page

softmarshmallow · softmarshmallow · commit fc31898b548c · 2021-05-05T20:05:03.000+09:00
diff --git a/editor/components/app-runner/index.ts b/editor/components/app-runner/index.ts
@@ -1 +1,2 @@
 export * from "./flutter-app-runner";
+export * from "./react-app-runner";
diff --git a/editor/components/app-runner/react-app-runner.tsx b/editor/components/app-runner/react-app-runner.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export function ReactAppRunner() {
+  return <></>;
+}
diff --git a/editor/pages/_app.tsx b/editor/pages/_app.tsx
@@ -15,6 +15,20 @@ function MyApp({ Component, pageProps }) {
             font-family: "Roboto", sans-serif;
             background-color: #181a22;
           }
+
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6,
+          p {
+            color: white;
+          }
+
+          a {
+            color: grey;
+          }
         `}
       />
       <Head>
diff --git a/editor/pages/_development/figma/index.tsx b/editor/pages/_development/figma/index.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import Link from "next/link";
+export default function FigmaDemoIndexPage() {
+  return (
+    <>
+      <p>
+        In order to develop design to code from figma, you'll need to set figma
+        personal access token via
+        <br />
+        <Link href="/preferences/access-tokens">Preferences</Link>
+      </p>
+      <Link href="./figma/to-flutter">Flutter demo</Link>
+      <br />
+      <Link href="./figma/to-react">React demo</Link>
+    </>
+  );
+}
diff --git a/editor/pages/_development/figma/to-flutter.tsx b/editor/pages/_development/figma/to-flutter.tsx
@@ -1,12 +1,12 @@
 import dynamic from "next/dynamic";
 import React, { useEffect, useState } from "react";
 import styled from "@emotion/styled";
-import { figmacomp, canvas, runner } from "../../components";
+import { figmacomp, canvas, runner } from "../../../components";
 import { flutter } from "@designto/code";
 import { composeAppWithHome } from "@bridged.xyz/flutter-builder";
 import { features, types, hosting } from "@bridged.xyz/base-sdk";
 import { ReflectSceneNode } from "@design-sdk/core/nodes";
-import { utils_dart } from "../../utils";
+import { utils_dart } from "../../../utils";
 import { nanoid } from "nanoid";
 import { MainImageRepository } from "@design-sdk/core/assets-repository";
 import { ImageRepositories } from "@design-sdk/figma/asset-repository";
@@ -15,7 +15,7 @@ import { ImageRepositories } from "@design-sdk/figma/asset-repository";
 MainImageRepository.instance = new ImageRepositories();
 
 const CodemirrorEditor = dynamic(
-  import("../../components/code-editor/code-mirror"),
+  import("../../../components/code-editor/code-mirror"),
   {
     ssr: false,
   }
diff --git a/editor/pages/_development/figma/to-react.tsx b/editor/pages/_development/figma/to-react.tsx
@@ -0,0 +1,63 @@
+import dynamic from "next/dynamic";
+import React, { useEffect, useState } from "react";
+import { MainImageRepository } from "@design-sdk/core/assets-repository";
+import { ImageRepositories } from "@design-sdk/figma/asset-repository";
+import { figmacomp, canvas, runner } from "../../../components";
+import { react } from "@designto/code";
+import { nanoid } from "nanoid";
+import { ReflectSceneNode } from "@design-sdk/core/nodes";
+import styled from "@emotion/styled";
+
+// set image repo for figma platform
+MainImageRepository.instance = new ImageRepositories();
+
+const CodemirrorEditor = dynamic(
+  import("../../../components/code-editor/code-mirror"),
+  {
+    ssr: false,
+  }
+);
+
+export default function FigmaToReactDemoPage() {
+  const [reflect, setReflect] = useState<ReflectSceneNode>();
+
+  const handleOnDesignImported = (reflect: ReflectSceneNode) => {
+    setReflect(reflect);
+  };
+
+  // todo
+  const widgetCode = "Not loaded";
+
+  return (
+    <>
+      <canvas.DefaultCanvas />
+      <figmacomp.FigmaScreenImporter onImported={handleOnDesignImported} />
+      <ContentWrap>
+        <CodemirrorEditor
+          value={
+            widgetCode
+              ? widgetCode
+              : "// No input design provided to be converted.."
+          }
+          options={{
+            mode: "dart",
+            theme: "monokai",
+            lineNumbers: true,
+          }}
+        />
+        {widgetCode && (
+          <div>
+            <runner.ReactAppRunner />
+            <br />
+          </div>
+        )}
+      </ContentWrap>
+    </>
+  );
+}
+
+const ContentWrap = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+`;
diff --git a/editor/pages/preferences/access-tokens.tsx b/editor/pages/preferences/access-tokens.tsx
diff --git a/editor/styles/Home.module.css b/editor/styles/Home.module.css
diff --git a/editor/styles/globals.css b/editor/styles/globals.css
diff --git a/packages/designto-code/index.ts b/packages/designto-code/index.ts
@@ -1,2 +1,3 @@
 export * as flutter from "./flutter";
 export * as proc from "./proc";
+export * as react from "./react";

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export * from "./flutter-app-runner";`
	`2`	`+export * from "./react-app-runner";`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`export * as flutter from "./flutter";`
`2`	`2`	`export * as proc from "./proc";`
	`3`	`+export * as react from "./react";`