Merge pull request #125 from gridaco/feature/register-scene

(With backend 2/2) Add new feature register - "Register scene to grida app"

Author: softmarshmallow

app/lib/auth/index.ts

@@ -52,6 +52,10 @@ export async function isAuthenticated() {
   return (await AuthStorage.get())?.length > 1; // using 1 (same as != undefined.)
 }
 
+export async function getAccessToken(): Promise<string> {
+  return await AuthStorage.get();
+}
+
 export async function checkAuthSession(session: string): Promise<boolean> {
   // TODO:
   const res = await __auth_proxy.checkProxyAuthResult(

app/lib/components/Icon/check-icon.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+export function CheckIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM7.29 14.29L3.7 10.7C3.31 10.31 3.31 9.68 3.7 9.29C4.09 8.9 4.72 8.9 5.11 9.29L8 12.17L14.88 5.29C15.27 4.9 15.9 4.9 16.29 5.29C16.68 5.68 16.68 6.31 16.29 6.7L8.7 14.29C8.32 14.68 7.68 14.68 7.29 14.29Z" />
+    </svg>
+  );
+}

app/lib/components/animation/animated-check-icon.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 
 import { motion } from "framer-motion";
+import { CheckIcon } from "../Icon/check-icon";
 
 const variants = {
   "make-active": {
@@ -14,20 +15,16 @@ const variants = {
 
 export function AnimatedCheckIcon() {
   return (
-    <CheckIcon
+    <StyledCheckIcon
       style={{
         marginRight: "9px",
       }}
       variants={variants}
       initial={{ fill: "#C1C1C1" }}
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM7.29 14.29L3.7 10.7C3.31 10.31 3.31 9.68 3.7 9.29C4.09 8.9 4.72 8.9 5.11 9.29L8 12.17L14.88 5.29C15.27 4.9 15.9 4.9 16.29 5.29C16.68 5.68 16.68 6.31 16.29 6.7L8.7 14.29C8.32 14.68 7.68 14.68 7.29 14.29Z" />
-    </CheckIcon>
+      <CheckIcon />
+    </StyledCheckIcon>
   );
 }
 
-const CheckIcon = styled(motion.svg)``;
+const StyledCheckIcon = styled(motion.div)``;

app/lib/components/animation/progress-bar.tsx

@@ -3,7 +3,11 @@ import styled from "@emotion/styled";
 
 import { AnimatePresence, motion } from "framer-motion";
 
-export function ProgressBar() {
+interface IProgressBar {
+  contorl?: () => void;
+}
+
+export function ProgressBar(props: IProgressBar) {
   return (
     <Background>
       <AnimatePresence>
@@ -15,6 +19,7 @@ export function ProgressBar() {
             duration: 10,
             delay: 2,
           }}
+          onAnimationComplete={props.contorl}
         />
       </AnimatePresence>
     </Background>
@@ -24,9 +29,9 @@ export function ProgressBar() {
 const Background = styled.div`
   background: #f5f5f5;
 
-  // for reset body padding
-  margin-left: -8px;
-  margin-right: -8px;
+  // for reset body and parent padding
+  margin-left: -20px;
+  margin-right: -20px;
 `;
 
 const Bar = styled(motion.div)`

app/lib/components/upload-steps.tsx

@@ -6,6 +6,7 @@ import { ProgressBar } from "./animation/progress-bar";
 import { AnimatedCheckIcon } from "./animation/animated-check-icon";
 import { motion } from "framer-motion";
 import { Preview } from ".";
+import { CheckIcon } from "./Icon/check-icon";
 
 const step = [
   "converting design to universal format",
@@ -16,17 +17,6 @@ const step = [
   "running tests",
 ];
 
-const loadingVariants = {
-  "make-active": {
-    // display: "none",
-    // opacity: 1,
-    // transitionEnd: {
-    //   display: "none",
-    // },
-    transition: { duration: 1 },
-  },
-};
-
 const fieldVariants = {
   "make-active": {
     transition: { staggerChildren: 0.8, delayChildren: 1 },
@@ -40,38 +30,26 @@ const itemVariants = {
   },
 };
 
-const finishVariants = {
-  "make-active": {
-    display: "none",
-    transition: { display: "block" },
-  },
-};
-
 export function UploadSteps() {
   const [isLoading, setIsLoading] = useState(true);
 
-  useEffect(() => {
-    console.log(isLoading);
-  }, [isLoading]);
+  function animateHandle() {
+    setIsLoading(!isLoading);
+  }
+
   return (
     <>
       <Preview auto />
+      {isLoading && <ProgressBar contorl={animateHandle} />}
       <InnerWrapper variants={fieldVariants} animate="make-active">
         {isLoading ? (
-          <Loading variants={loadingVariants} animate="make-active">
-            <ProgressBar />
+          <Loading>
             <Title>
               Uploading your design
               <br />
               “button”
             </Title>
-            <StepsWrapper
-              variants={fieldVariants}
-              animate="make-active"
-              onTransitionEnd={() => {
-                setIsLoading(!isLoading);
-              }}
-            >
+            <StepsWrapper variants={fieldVariants} animate="make-active">
               {step.map((item, i) => (
                 <Field key={`Upload-Step-${item}-${i}`} variants={itemVariants}>
                   <Icon />
@@ -84,9 +62,12 @@ export function UploadSteps() {
           </Loading>
         ) : (
           <>
-            <Finish variants={finishVariants} initial={{ display: "none" }}>
+            <Finish>
               <Field>
-                <Icon></Icon>
+                <IconBox>
+                  <CheckIcon />
+                </IconBox>
+
                 <Title>Your design is ready</Title>
               </Field>
               <Item>
@@ -113,11 +94,11 @@ const InnerWrapper = styled(motion.div)`
   /* display: none; */
 `;
 
-const Loading = styled(motion.div)`
+const Loading = styled.div`
   /* display: none; */
 `;
 
-const Finish = styled(motion.div)`
+const Finish = styled.div`
   /* display: none; */
 `;
 
@@ -143,9 +124,6 @@ const Field = styled(motion.div)`
   }
 `;
 const Icon = styled(AnimatedCheckIcon)`
-  /* width: 16px;
-  height: 16px;
-  line-height: 19px; */
   margin-right: 9px;
 `;
 
@@ -164,6 +142,10 @@ const FooterButtonWrapper = styled.div`
   bottom: 8px;
   width: calc(100% - 40px);
 `;
+const IconBox = styled.div`
+  fill: #6cd470;
+  margin-right: 9px;
+`;
 
 const CheckButton = styled(Button)`
   ${BlackButton};

app/lib/pages/code/code-screen.tsx

@@ -16,15 +16,14 @@ import { make_empty_selection_state_text_content } from "./constants";
 import { format } from "./formatter";
 import copy from "copy-to-clipboard";
 import { PluginSdk } from "@plugin-sdk/app";
-import { CodeScreenFooter } from "./code-screen-footer";
+import { CodeScreenFooter } from "./footer-action/code-screen-footer";
 import { CodeOptionsControl } from "./code-options-control";
 import { fromApp, CodeGenRequest } from "./__plugin/events";
 import { useSingleSelection } from "../../utils/plugin-hooks";
 
 type DesigntoCodeUserOptions = FrameworkOption;
-interface ICodeScreen {}
 
-export function CodeScreen(props: ICodeScreen) {
+export function CodeScreen() {
   const [app, setApp] = useState<string>();
   const [useroption, setUseroption] = React.useState<DesigntoCodeUserOptions>(
     all_preset_options_map__prod.flutter_default
@@ -167,7 +166,11 @@ export function CodeScreen(props: ICodeScreen) {
         />
       </CodeWrapper>
 
-      <CodeScreenFooter app={app} />
+      <CodeScreenFooter
+        framework={useroption.framework}
+        app={app}
+        scene={selection?.node as any}
+      />
     </div>
   );
 }

app/lib/pages/code/code-screen-footer.tsx renamed to app/lib/pages/code/footer-action/code-screen-footer.tsx

@@ -1,12 +1,17 @@
 import React, { useState } from "react";
 import styled from "@emotion/styled";
-import { BlackButton, WhtieButton } from "../../components/style/global-style";
+import { WhtieButton } from "../../../components/style/global-style";
 import { assistant as analytics } from "@analytics.bridged.xyz/internal";
 import { PluginSdk } from "@plugin-sdk/app";
-import { quickLook } from "../../quicklook";
+import { preview } from "../../../scene-view";
+import { NextUploadButton } from "./next-upload-button";
+import type { ReflectSceneNode } from "@design-sdk/core/nodes";
+import { Framework } from "../framework-option";
 
 interface ICodeScreenFooter {
+  framework: Framework;
   app?: any;
+  scene?: ReflectSceneNode;
 }
 
 export function CodeScreenFooter(props: ICodeScreenFooter) {
@@ -18,7 +23,7 @@ export function CodeScreenFooter(props: ICodeScreenFooter) {
     };
 
     setLoadingState(true);
-    quickLook("quicklook", props.app)
+    preview("quicklook", props.app)
       .then((r) => {
         setLoadingState(false);
         PluginSdk.notify("quick look ready !");
@@ -32,24 +37,26 @@ export function CodeScreenFooter(props: ICodeScreenFooter) {
     // ANALYTICS
     analytics.event_click_quicklook();
   };
+
+  /** currently we only support uploading & preview for flutter */
+  const _can_enable_next = props.framework == Framework.flutter && !!props.app;
+  const _can_show_preview = props.framework == Framework.flutter && !!props.app;
+
   return (
     <CodeFooterCtaWrapper>
-      <NextStepButton
-        disabled={!props.app}
-        onClick={() => {
-          // TODO: the button component should be passed from outer side.
-        }}
-      >
-        Next
-      </NextStepButton>
-      {props.app && (
-        <PreviewButton
-          disabled={isLaunchingConsole}
-          onClick={onQuickLookClicked}
-        >
-          {isLaunchingConsole ? "launching.." : "preview"}
-        </PreviewButton>
-      )}
+      {
+        <>
+          <NextUploadButton disabled={!_can_enable_next} {...props} />
+          {_can_show_preview && (
+            <PreviewButton
+              disabled={isLaunchingConsole}
+              onClick={onQuickLookClicked}
+            >
+              {isLaunchingConsole ? "launching.." : "preview"}
+            </PreviewButton>
+          )}
+        </>
+      }
     </CodeFooterCtaWrapper>
   );
 }
@@ -70,22 +77,6 @@ const CodeFooterCtaWrapper = styled.footer`
     }
   }
 `;
-
-const NextStepButton = styled.button`
-  ${BlackButton}
-  /* 2/3 size. 12 is wrapper padding  */
-  width: calc(66.666% - 12px);
-
-  &:hover {
-    color: #fff;
-    background: #17181a;
-  }
-  &:disabled {
-    color: #bbbbbb;
-    background: #949494;
-  }
-`;
-
 const PreviewButton = styled.button`
   ${WhtieButton}
   /* 1/3 size. 12 is wrapper padding */