Merge pull request #146 from gridaco/staging

Staging

README.md

@@ -50,7 +50,8 @@ yarn figma
 yarn sketch
 
 # [OPTIONAL 3 & Contributors only] run plugin ui in webdev mode
-yarn webdev
+yarn web
+# visit http://localhost:3000/init-webdev to work on browser
 ```
 
 _soon as the subpackages are released as stable, we will remove git submodule dependency for ease of use. until then, this will be the primary repository and all the edits and PRs will be caused by this project._ - [Learn more here](https://github.com/bridgedxyz/.github/blob/main/contributing/working-with-submodules.md)

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/icons-loader.tsx

@@ -223,7 +223,7 @@ function filterIcons(
       return [k, item];
     })
     .filter((k) => k !== undefined);
-  console.log("default icons", defaultIcons.length);
+  console.log("default icons loaded", defaultIcons.length);
   return defaultIcons;
 }
 
@@ -278,7 +278,6 @@ function IconItem(props: { name: string; config: IconConfig }) {
 
   const onClick = () => {
     _onUserLoadIconToCanvas();
-    console.log("icon", name, "clicked");
     loadData().then((d) => {
       parent.postMessage(
         {

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/main/index.tsx

@@ -307,9 +307,6 @@ function _update_focused_screen_ev(screen: WorkScreen) {
     },
     "*"
   );
-  console.log(
-    `sending back thread about changed screen (user interest) data - "${screen}"`
-  );
 }
 
 const Wrapper = styled.div`

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 → 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 */