Assistant 2021.9 Release

.vscode/settings.json

@@ -8,5 +8,11 @@
     "**/.DS_Store": true,
     "**/dist": true,
     "**/node_modules": true
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/*.code-search": true,
+    "**/yarn.lock": true
   }
 }

CHANGELOG.md

@@ -28,6 +28,35 @@
 - [Flutter] Poligon Node support with XImage (svg)
 - [Lint] Primal naming & grouping linting for better code export quality. this is tracked sperately on [lint](https://github.com/bridgedxyz/lint)
 
+## [2021.9.1] - 2021-10-11
+
+> 2021.9 is a cold release
+
+[PR#159](https://github.com/gridaco/assistant/pull/159)
+
+- Instant responsive preview - a realtime application from design, seriously, with a single click.
+- adoped monaco editor
+- semi-stable react support with styled-component
+- minimalistic navigation with hide animation on focus mode
+- (fix) wrong cache loading issue on boot
+- prevent thread lock on big screen
+- prevent thread lock on too many remote component screen
+
+## [2021.8.0b] - 2021-8-26
+
+**What's new**
+
+- Speed
+- Navigation UX Renewal
+- The code
+- Code interaction
+- Figma to Flutter
+- Figma to React (React as preview feature)
+- Icons loader
+- Design Lint now on beta channel
+
+[Read thw full release notes from medium blog](https://blog.grida.co/d-figma-assistant-by-grida-supercharge-your-design-development-workflow-e6b2989216e2)
+
 ## [2021.0.2f0] - 2021-5-21
 
 > Deisgn to code logical separation. Design to code is now imported from [designto.codes](https://designto.codes)

README.md

@@ -56,7 +56,7 @@ yarn sketch
 
 # [OPTIONAL 3 & Contributors only] run plugin ui in webdev mode
 yarn web
-# visit http://localhost:3000/init-webdev to work on browser
+# visit http://localhost:3303/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)
@@ -176,14 +176,13 @@ we release new updates in a by-monthluy cycle. Watch this repository on github o
 
 All update logs available at [CHANGELOG.md](./CHANGELOG.md)
 
-
 ## Blogs
+
 - [Flutter force week 103](https://medium.com/flutterforce/flutterforce-week-103-95b0822ef25f)
 - [Flutter force week 135](https://medium.com/flutterforce/flutterforce-week-135-d28b8741302a)
 - [Assistant initial release](https://blog.grida.co/assistant-initial-release-f75d0084df9c)
 - [Introducng Grida Assistant 2021.8.0b](https://blog.grida.co/figma-assistant-by-grida-supercharge-your-design-development-workflow-e6b2989216e2)
 
-
 ## LEGAL
 
 > read [LICENSE](./LICENSE).

app/__plugin__init__/index.ts

@@ -1,4 +1,7 @@
 // DO NOT REMOVE THIS LINE
-import "../lib/pages/code/__plugin";
-import "@app/data-mapper/__plugin";
+import "@app/design-to-code/__plugin";
 import "@app/design-lint/__plugin";
+
+// disabled on staging
+// import "@app/data-mapper/__plugin";
+// import "@app/design-text-code-syntax-highlight/__plugin";

app/lib/app.css

@@ -2,6 +2,11 @@
   font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
 }
 
+body {
+  /* for reset user agnet style -> margin: 8px */
+  margin: 0px;
+}
+
 /* 
   If you want to change the font, be sure to check the following!
   tippy-1 is `tippyjs' id. it is only for drop item in @code-ui/docstring 

app/lib/components/comming-soon-template.tsx

@@ -26,10 +26,7 @@ export function CommingSoonTemplate(props: Props) {
   );
 }
 
-const Wrapper = styled.div`
-  /* -8 is for reset body margin */
-  margin: 0 -8px;
-`;
+const Wrapper = styled.div``;
 
 const ImageBox = styled.div``;
 

app/lib/components/motions/README.md

@@ -0,0 +1,3 @@
+# General motions
+
+Motions only ! - no symantic ui components allowed here.

app/lib/components/motions/index.ts

@@ -0,0 +1,2 @@
+export * from "./update-hide-by-scroll-position-and-velocity";
+export * from "./smooth-dampings";

app/lib/components/motions/smooth-dampings/index.ts

@@ -0,0 +1,4 @@
+export const smooth_damping_hide_motion_transition = {
+  ease: [0.1, 0.25, 0.3, 1],
+  duration: 0.6,
+};

app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts

@@ -0,0 +1,121 @@
+import { useState, useEffect, RefObject } from "react";
+import { ScrollMotionValues } from "framer-motion";
+import { useElementScroll } from "framer-motion";
+
+export function update_hide_by_scroll_position_and_velocity({
+  scrollY,
+  scrollYProgress,
+  is_animating_by_intense_scrolling,
+  on_animating_by_intense_scrolling,
+  on_change,
+  options = {
+    top_sensitivity: 0.01,
+    bottom_sensitivity: 0.01,
+    define_intense_velocity: 1,
+    do_show_on_bottom_hit: true,
+  },
+}: {
+  scrollY: ScrollMotionValues["scrollY"];
+  scrollYProgress: ScrollMotionValues["scrollYProgress"];
+  is_animating_by_intense_scrolling: boolean;
+  on_animating_by_intense_scrolling: (v?: true) => void;
+  on_change: (hide: boolean) => void;
+  options?: {
+    top_sensitivity: number;
+    bottom_sensitivity: number;
+    define_intense_velocity: number;
+    do_show_on_bottom_hit: boolean;
+  };
+}) {
+  const scroll_progress_percentage = scrollYProgress.get();
+  const ydiff = Math.abs(scrollY.get() - scrollY.getPrevious());
+  if (
+    // don't execute if diff is `<=` than 2. - this is a really small scroll
+    ydiff <= 2 &&
+    // except for bottom / top
+    scroll_progress_percentage !== 0 &&
+    scroll_progress_percentage !== 1
+  ) {
+    return;
+  }
+
+  const velocity = scrollYProgress.getVelocity();
+  const velocity_abs = Math.abs(velocity);
+  if (
+    // if < 20, this event is not triggered by human, or caused by extremely short scroll area, causing high velocity.
+    velocity_abs > 20 ||
+    scrollYProgress.get() == scrollYProgress.getPrevious()
+  ) {
+    return;
+  }
+  const is_intense_scrolling = velocity_abs > options.define_intense_velocity;
+  const direction = velocity > 0 ? "down" : "up"; // this is ok. velocity can't be 0.
+
+  if (scroll_progress_percentage >= 1 - options.bottom_sensitivity) {
+    if (options.do_show_on_bottom_hit) {
+      // bottom = show
+      on_change(false);
+    }
+  } else if (scroll_progress_percentage <= options.top_sensitivity) {
+    switch (direction) {
+      // top + down = hide
+      case "down":
+        if (!is_intense_scrolling) {
+          on_change(true);
+        }
+        break;
+      case "up":
+        // top + up = show
+        on_change(false);
+        break;
+    }
+  } else {
+    if (is_intense_scrolling) {
+      switch (direction) {
+        // scroll intense + down = hide
+        case "down":
+          on_change(true);
+          break;
+        // scroll intense + up = show
+        case "up":
+          on_animating_by_intense_scrolling(true);
+          on_change(false);
+          break;
+      }
+    } else {
+      if (!is_animating_by_intense_scrolling) {
+        // middle = hide
+        on_change(true);
+      }
+    }
+  }
+}
+
+export function useScrollTriggeredAnimation(el: RefObject<HTMLElement>) {
+  const { scrollYProgress, scrollY } = useElementScroll(el);
+  const [hide, setHide] = useState(false);
+  let is_animating_by_intense_scrolling = false;
+  useEffect(() => {
+    return scrollYProgress.onChange(() =>
+      update_hide_by_scroll_position_and_velocity({
+        scrollYProgress,
+        scrollY,
+        is_animating_by_intense_scrolling,
+        on_animating_by_intense_scrolling: () => {
+          is_animating_by_intense_scrolling = true;
+        },
+        on_change: (hide) => {
+          setHide(hide);
+        },
+        options: {
+          do_show_on_bottom_hit: false,
+          top_sensitivity: 0.05,
+          bottom_sensitivity: 0.1,
+          define_intense_velocity: 50,
+        },
+      })
+    );
+  });
+
+  return hide;
+}

app/lib/components/navigation/navigation-motions.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { smooth_damping_hide_motion_transition } from "../motions";
+
+export function AppbarContainerMotion({
+  hidden,
+  children,
+}: {
+  hidden: boolean;
+  children: JSX.Element | JSX.Element[];
+}) {
+  /** add this const **/
+  const variants_for_container = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0, height: 0 },
+  };
+
+  return (
+    <motion.div
+      variants={variants_for_container}
+      animate={hidden ? "hidden" : "visible"}
+      style={{
+        zIndex: 1,
+      }}
+      transition={smooth_damping_hide_motion_transition}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export function AppbarContentMotion({
+  hidden,
+  children,
+}: {
+  hidden: boolean;
+  children: JSX.Element | JSX.Element[];
+}) {
+  const variants_for_child = {
+    visible: { y: 0 },
+    hidden: { y: -100 },
+  };
+
+  return (
+    <motion.div
+      variants={variants_for_child}
+      animate={hidden ? "hidden" : "visible"}
+      transition={smooth_damping_hide_motion_transition}
+    >
+      {children}
+    </motion.div>
+  );
+}

app/lib/components/navigation/navigator-expansion-control-button.tsx

@@ -35,7 +35,5 @@ const Button = styled.div`
 
   svg {
     fill: #cfcfcf;
-    width: 25px;
-    height: 34px;
   }
 `;

app/lib/components/navigation/primary-workmode-select.tsx

@@ -1,7 +1,6 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
 import React from "react";
-import { PrimaryWorkmodeSet, WorkMode } from "../../navigation";
+import { PrimaryWorkmodeSet, WorkMode } from "../../routing";
+import { WorkmodeButton } from "./work-mode-button";
 
 export function PrimaryWorkmodeSelect(props: {
   set: PrimaryWorkmodeSet;
@@ -31,58 +30,3 @@ export function PrimaryWorkmodeSelect(props: {
     </>
   );
 }
-
-function WorkmodeButton(props: {
-  name: string;
-  active: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <>
-      <WorkmodeLabel active={props.active} onClick={props.onClick}>
-        {props.name}
-      </WorkmodeLabel>
-    </>
-  );
-}
-interface Props {
-  active: boolean;
-}
-
-const WorkmodeLabel = styled.h3<Props>`
-  display: flex;
-  text-transform: capitalize;
-  font-size: 21px;
-  letter-spacing: 0em;
-  cursor: pointer;
-  user-select: none;
-
-  // reset for h3 init style
-  margin: 0;
-  margin-top: 14px;
-
-  &:first-child {
-    margin-right: 12px;
-  }
-
-  ${(props) =>
-    props.active
-      ? css`
-          font-weight: 700;
-          line-height: 26px;
-          color: #000;
-        `
-      : css`
-          font-weight: 400;
-          line-height: 25px;
-          color: #cfcfcf;
-
-          &:hover {
-            font-size: 21px;
-            font-weight: 400;
-            line-height: 25px;
-            letter-spacing: 0em;
-            color: #606060;
-          }
-        `}
-`;

app/lib/components/navigation/route-back-button.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { useHistory } from "react-router";
+import BackArrow from "@assistant/icons/back-arrow";
+
+export function RouteBackButton() {
+  const history = useHistory();
+
+  const close = () => {
+    history.goBack();
+  };
+
+  return (
+    <BackIcon onClick={close}>
+      <BackArrow />
+    </BackIcon>
+  );
+}
+
+export const BackIcon = styled.div`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+`;