Mock Browser

.storybook/main.js

@@ -1,7 +1,43 @@
+// https://stackoverflow.com/a/65970945/12377179
+
+const path = require("path");
+const fs = require("fs");
+
+function getPackageDir(filepath) {
+  let currDir = path.dirname(require.resolve(filepath));
+  while (true) {
+    if (fs.existsSync(path.join(currDir, "package.json"))) {
+      return currDir;
+    }
+    const { dir, root } = path.parse(currDir);
+    if (dir === root) {
+      throw new Error(
+        `Could not find package.json in the parent directories starting from ${filepath}.`
+      );
+    }
+    currDir = dir;
+  }
+}
+
 module.exports = {
   stories: [
     "../app/lib/components/**/*.stories.mdx",
     "../app/lib/components/**/*.stories.@(js|jsx|ts|tsx)",
+    "**/*.stories.mdx",
+    "**/*.stories.@(js|jsx|ts|tsx)",
   ],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+
+  webpackFinal: async (config) => ({
+    ...config,
+    resolve: {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        "@emotion/core": getPackageDir("@emotion/react"),
+        "@emotion/styled": getPackageDir("@emotion/styled"),
+        "emotion-theming": getPackageDir("@emotion/react"),
+      },
+    },
+  }),
 };

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,107 @@
+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({
+  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,
+  },
+}: {
+  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 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.
+  const scroll_progress_percentage = scrollYProgress.get();
+
+  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,
+        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,50 @@
+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"}
+      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: -40 },
+  };
+
+  return (
+    <motion.div
+      variants={variants_for_child}
+      animate={hidden ? "hidden" : "visible"}
+      transition={smooth_damping_hide_motion_transition}
+    >
+      {children}
+    </motion.div>
+  );
+}

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,57 +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;
-
-  &: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/secondary-menu-dropdown.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useHistory } from "react-router-dom";
-import { WorkMode, WorkScreen } from "../../navigation";
+import { WorkMode, WorkScreen } from "../../routing";
 import { SecondaryWorkmodeMenu } from "./secondary-workmode-menu";
 
 type Stage = "production" | "development" | string;

app/lib/components/navigation/work-mode-button.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+export 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;
+
+  &: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/upload-steps.tsx

@@ -5,8 +5,8 @@ import {
   TransparentButtonStyle,
 } from "@ui/core/button-style";
 import { Button } from "@material-ui/core";
-import { AnimatedProgressBar } from "./animation/animated-progress-bar";
-import { AnimatedCheckIcon } from "./animation/animated-check-icon";
+import { AnimatedProgressBar } from "./animated/animated-progress-bar";
+import { AnimatedCheckIcon } from "./animated/animated-check-icon";
 import { motion } from "framer-motion";
 import { Preview } from "@ui/previewer";
 import CheckIcon from "@assistant/icons/check";

app/lib/main/global-state-atoms.ts

@@ -0,0 +1,6 @@
+import { atom } from "recoil";
+
+export const hide_navigation = atom<boolean>({
+  key: "hide_navigation",
+  default: false,
+});