add framework control & add auth prompt banner

Author: softmarshmallow

editor-packages/base-sdk

@@ -0,0 +1,118 @@
+import styled from "@emotion/styled";
+import React, { useEffect } from "react";
+import { useAuthState } from "hooks";
+import { useRouter } from "next/router";
+
+export function SigninToContinueBannerPrmoptProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const authstate = useAuthState();
+
+  const shouldshow = authstate == "expired" || authstate == "unauthorized";
+
+  return (
+    <>
+      {children}
+      {shouldshow && <SigninToContinueBannerPrmopt />}
+    </>
+  );
+}
+
+export function SigninToContinueBannerPrmopt() {
+  const router = useRouter();
+  const onnextclick = () => {
+    const signinurl = `https://accounts.grida.co/signin?redirect_uri=${window.location.href}`;
+    router.replace(signinurl);
+  };
+
+  return (
+    <Positioner>
+      <Contents>
+        <Desc>Ready to build your apps with Grida?</Desc>
+        <NextButton onClick={onnextclick}>Next</NextButton>
+      </Contents>
+    </Positioner>
+  );
+}
+
+const Positioner = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+
+  position: fixed;
+  bottom: 0;
+  left: 0px;
+  right: 0px;
+
+  background-color: #fff;
+  z-index: 998;
+
+  justify-content: center;
+  flex-direction: column;
+  align-items: end;
+  box-sizing: border-box;
+  padding: 16px 20px;
+
+  a {
+    margin: 0px 2px;
+    text-decoration: underline;
+  }
+`;
+
+const Contents = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row;
+  align-items: center;
+  flex: none;
+  gap: 48px;
+  width: 439px;
+  height: 59px;
+  box-sizing: border-box;
+`;
+
+const Desc = styled.span`
+  color: rgba(0, 0, 0, 1);
+  text-overflow: ellipsis;
+  font-size: 16px;
+  font-family: "Helvetica Neue", sans-serif;
+  font-weight: 500;
+  text-align: center;
+`;
+
+const NextButton = styled.button`
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  flex: none;
+  gap: 10px;
+  border-radius: 4px;
+  width: 116px;
+  height: 59px;
+  background-color: rgba(45, 66, 255, 1);
+  box-sizing: border-box;
+  padding: 10px 10px;
+
+  outline: none;
+  border: none;
+
+  color: rgba(255, 255, 255, 1);
+  text-overflow: ellipsis;
+  font-size: 21px;
+  font-family: "Helvetica Neue", sans-serif;
+  font-weight: 400;
+  text-align: left;
+
+  :hover {
+    opacity: 0.9;
+  }
+
+  :focus {
+    opacity: 0.9;
+  }
+`;

editor/components/prompt-banner-signin-to-continue/index.tsx

@@ -1,8 +1,11 @@
-import { useAuthState as useGridaAuthState } from "@base-sdk-fp/auth-components-react";
+import {
+  useAuthState as useGridaAuthState,
+  LoginState,
+} from "@base-sdk-fp/auth-components-react";
 import { useEffect, useState } from "react";
 
 export function useAuthState() {
-  const [authState, setAuthState] = useState<any>();
+  const [authState, setAuthState] = useState<LoginState>();
   const gridaauthstate = useGridaAuthState();
 
   useEffect(() => {

editor/hooks/use-auth-state.ts

@@ -28,6 +28,8 @@ import { DesignInput } from "@designto/config/input";
 import { ClearRemoteDesignSessionCache } from "components/clear-remote-design-session-cache";
 import { WidgetTree } from "components/visualization/json-visualization/json-tree";
 import { personal } from "@design-sdk/figma-auth-store";
+import { CodeOptionsControl } from "components/codeui-code-options-control";
+import { SigninToContinueBannerPrmoptProvider } from "components/prompt-banner-signin-to-continue";
 
 export default function DesignToCodeUniversalPage() {
   const router = useRouter();
@@ -36,7 +38,9 @@ export default function DesignToCodeUniversalPage() {
   const [result, setResult] = useState<Result>();
   const [preview, setPreview] = useState<Result>();
 
-  const framework_config = get_framework_config_from_query(router.query);
+  const [framework_config, set_framework_config] = useState(
+    get_framework_config_from_query(router.query)
+  );
   const preview_runner_framework = get_preview_runner_framework(router.query);
   const enable_components = get_enable_components_config_from_query(
     router.query
@@ -78,6 +82,13 @@ export default function DesignToCodeUniversalPage() {
           setPreview(result);
         }
       });
+    }
+  }, [design, framework_config.framework]);
+
+  useEffect(() => {
+    if (design) {
+      const { reflect, raw } = design;
+      const { id, name } = reflect;
       // ----- for preview -----
       if (framework_config.framework !== preview_runner_framework.framework) {
         designToCode({
@@ -104,11 +115,11 @@ export default function DesignToCodeUniversalPage() {
   }
 
   const { code, scaffold, name: componentName } = result;
-  console.log("design to code result::", result);
 
-  const runner_platform = get_runner_platform(framework_config);
+  // const runner_platform = get_runner_platform(framework_config);
+
   return (
-    <>
+    <SigninToContinueBannerPrmoptProvider>
       <DefaultEditorWorkspaceLayout
         leftbar={
           <></>
@@ -139,8 +150,15 @@ export default function DesignToCodeUniversalPage() {
           </WorkspaceContentPanel>
           <WorkspaceContentPanel key={design.node}>
             <InspectionPanelContentWrap>
+              <CodeOptionsControl
+                initialPreset={router.query.framework as string}
+                fallbackPreset="react_default"
+                onUseroptionChange={(o) => {
+                  set_framework_config(get_framework_config(o.framework));
+                }}
+              />
               <CodeEditor
-                // key={code.raw}
+                key={code.raw}
                 height="100vh"
                 options={{
                   automaticLayout: true,
@@ -200,7 +218,7 @@ export default function DesignToCodeUniversalPage() {
           )}
         </WorkspaceContentPanelGridLayout>
       </DefaultEditorWorkspaceLayout>
-    </>
+    </SigninToContinueBannerPrmoptProvider>
   );
 }
 
@@ -211,6 +229,7 @@ function get_enable_components_config_from_query(
   if (enable_components) {
     return enable_components === "true";
   }
+  // disabled by default
   return false;
 }
 
@@ -268,6 +287,6 @@ function get_runner_platform(config: FrameworkConfig) {
 
 const InspectionPanelContentWrap = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: stretch;
 `;