@stackflow/plugin-basic-ui 0.14.1

package/src/hooks/useStyleEffectSwipeBack.ts

@@ -0,0 +1,228 @@
+/* eslint-disable no-param-reassign */
+
+import { listenOnce } from "../utils";
+import { useStyleEffect } from "./useStyleEffect";
+import { OFFSET_PX_CUPERTINO } from "./useStyleEffectOffset";
+
+export function useStyleEffectSwipeBack({
+  theme,
+  dimRef,
+  edgeRef,
+  paperRef,
+  hasEffect,
+  onSwiped,
+}: {
+  theme: "android" | "cupertino";
+  dimRef: React.RefObject<HTMLDivElement>;
+  edgeRef: React.RefObject<HTMLDivElement>;
+  paperRef: React.RefObject<HTMLDivElement>;
+  hasEffect?: boolean;
+  onSwiped?: () => void;
+}) {
+  useStyleEffect({
+    styleName: "swipe-back",
+    refs: [paperRef],
+    effect: hasEffect
+      ? ({ refs }) => {
+          if (theme !== "cupertino") {
+            return () => {};
+          }
+
+          if (!dimRef.current || !edgeRef.current || !paperRef.current) {
+            return () => {};
+          }
+
+          const $dim = dimRef.current;
+          const $edge = edgeRef.current;
+          const $paper = paperRef.current;
+
+          let x0: number | null = null;
+          let t0: number | null = null;
+          let x: number | null = null;
+
+          let cachedRefs: Array<{
+            style: {
+              transform: string;
+              transition: string;
+            };
+            parentElement?: {
+              style: {
+                display: string;
+              };
+            };
+          }> = [];
+
+          const resetState = () => {
+            x0 = null;
+            t0 = null;
+            x = null;
+            cachedRefs = [];
+          };
+
+          let _rAFLock = false;
+
+          function movePaper(dx: number) {
+            if (!_rAFLock) {
+              _rAFLock = true;
+
+              requestAnimationFrame(() => {
+                const p = dx / $paper.clientWidth;
+
+                $dim.style.opacity = `${1 - p}`;
+                $dim.style.transition = "0s";
+
+                $paper.style.overflowY = "hidden";
+                $paper.style.transform = `translateX(${dx}px)`;
+                $paper.style.transition = "0s";
+
+                refs.forEach((ref: React.RefObject<HTMLElement>) => {
+                  if (!ref.current) {
+                    return;
+                  }
+
+                  ref.current.style.transform = `translateX(${
+                    -1 * (1 - p) * OFFSET_PX_CUPERTINO
+                  }px)`;
+                  ref.current.style.transition = "0s";
+
+                  if (ref.current.parentElement?.style.display === "none") {
+                    ref.current.parentElement.style.display = "block";
+                  }
+                });
+
+                _rAFLock = false;
+              });
+            }
+          }
+
+          function resetPaper({ swiped }: { swiped: boolean }) {
+            requestAnimationFrame(() => {
+              $dim.style.opacity = `${swiped ? 0 : 1}`;
+              $dim.style.transition = "var(--stackflow-transition-duration)";
+
+              $paper.style.overflowY = "hidden";
+              $paper.style.transform = `translateX(${swiped ? "100%" : "0"})`;
+              $paper.style.transition = "var(--stackflow-transition-duration)";
+
+              refs.forEach((ref: React.RefObject<HTMLElement>) => {
+                if (!ref.current) {
+                  return;
+                }
+
+                ref.current.style.transition = `var(--stackflow-transition-duration)`;
+                ref.current.style.transform = `translateX(${
+                  swiped ? "0" : `-${OFFSET_PX_CUPERTINO / 16}rem`
+                })`;
+              });
+
+              listenOnce($paper, "transitionend", () => {
+                $dim.style.opacity = "";
+                $paper.style.overflowY = "";
+                $paper.style.transform = "";
+
+                refs.forEach((ref: React.RefObject<HTMLElement>, i) => {
+                  if (!ref.current) {
+                    return;
+                  }
+
+                  const cachedRef = cachedRefs[i];
+
+                  if (swiped) {
+                    ref.current.style.transition = "";
+                    ref.current.style.transform = "";
+
+                    if (ref.current.parentElement) {
+                      ref.current.parentElement.style.display = "";
+                    }
+                  } else if (cachedRef) {
+                    ref.current.style.transition = cachedRef.style.transition;
+                    ref.current.style.transform = cachedRef.style.transform;
+
+                    if (ref.current.parentElement && cachedRef.parentElement) {
+                      ref.current.parentElement.style.display =
+                        cachedRef.parentElement.style.display;
+                    }
+                  }
+                });
+              });
+            });
+          }
+
+          const onTouchStart = (e: TouchEvent) => {
+            const { activeElement } = document as any;
+
+            activeElement?.blur?.();
+            // eslint-disable-next-line no-multi-assign
+            x0 = x = e.touches[0].clientX;
+            t0 = Date.now();
+
+            cachedRefs = refs.map((ref) => {
+              if (!ref.current) {
+                return {
+                  style: {
+                    transform: "",
+                    transition: "",
+                  },
+                };
+              }
+
+              return {
+                style: {
+                  transform: ref.current.style.transform,
+                  transition: ref.current.style.transition,
+                },
+                parentElement: ref.current.parentElement
+                  ? {
+                      style: {
+                        display: ref.current.parentElement.style.display,
+                      },
+                    }
+                  : undefined,
+              };
+            });
+          };
+
+          const onTouchMove = (e: TouchEvent) => {
+            if (!x0) {
+              resetState();
+              return;
+            }
+
+            x = e.touches[0].clientX;
+
+            movePaper(x - x0);
+          };
+
+          const onTouchEnd = () => {
+            if (!x0 || !t0 || !x) {
+              resetState();
+              return;
+            }
+
+            const t = Date.now();
+            const v = (x - x0) / (t - t0);
+            const swiped = v > 1 || x / $paper.clientWidth > 0.4;
+
+            if (swiped) {
+              onSwiped?.();
+            }
+
+            resetState();
+            resetPaper({ swiped });
+          };
+
+          $edge.addEventListener("touchstart", onTouchStart, { passive: true });
+          $edge.addEventListener("touchmove", onTouchMove, { passive: true });
+          $edge.addEventListener("touchend", onTouchEnd, { passive: true });
+          $edge.addEventListener("touchcancel", onTouchEnd, { passive: true });
+
+          return () => {
+            $edge.removeEventListener("touchstart", onTouchStart);
+            $edge.removeEventListener("touchmove", onTouchMove);
+            $edge.removeEventListener("touchend", onTouchEnd);
+            $edge.removeEventListener("touchcancel", onTouchEnd);
+          };
+        }
+      : undefined,
+  });
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+
+const ThemeContext = createContext<"android" | "cupertino">("android");
+
+export const ThemeProvider = ThemeContext.Provider;
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { basicUIPlugin } from "./basicUIPlugin";
+export { default as AppScreen } from "./components/AppScreen";
+export { default as BottomSheet } from "./components/BottomSheet";
+export { default as Modal } from "./components/Modal";
+export { globalVars as cssVars } from "./theme.css";

package/src/styles/f.css.ts

@@ -0,0 +1,84 @@
+import { style } from "@vanilla-extract/css";
+
+export const fullWidth = style({
+  width: "100%",
+});
+
+export const fullHeight = style({
+  height: "100%",
+});
+
+export const top0 = style({
+  top: 0,
+});
+
+export const left0 = style({
+  left: 0,
+});
+
+export const posAbs = style({
+  position: "absolute",
+});
+
+export const posRel = style({
+  position: "relative",
+});
+
+export const posAbsFull = style([posAbs, fullWidth, fullHeight, top0, left0]);
+
+export const flex = style({
+  display: "flex",
+});
+
+export const flexAlignCenter = style([
+  flex,
+  {
+    alignItems: "center",
+  },
+]);
+
+export const flexAlignEnd = style([
+  flex,
+  {
+    alignItems: "flex-end",
+  },
+]);
+
+export const flexJustifyCenter = style([
+  flex,
+  {
+    justifyContent: "center",
+  },
+]);
+
+export const overflowHidden = style({
+  overflow: "hidden",
+});
+
+export const whiteSpaceNowrap = style({
+  whiteSpace: "nowrap",
+});
+
+export const textAlignCenter = style({
+  textAlign: "center",
+});
+
+export const cursorPointer = style({
+  cursor: "pointer",
+  WebkitTapHighlightColor: "transparent",
+});
+
+export const borderBox = style({
+  boxSizing: "border-box",
+});
+
+export const contentBox = style({
+  boxSizing: "content-box",
+});
+
+export const resetButton = style({
+  appearance: "none",
+  border: 0,
+  padding: 0,
+  background: "none",
+});

package/src/styles/index.ts

@@ -0,0 +1 @@
+export * as f from "./f.css";

package/src/theme.css.ts

@@ -0,0 +1,75 @@
+import {
+  createGlobalTheme,
+  createGlobalThemeContract,
+  createTheme,
+} from "@vanilla-extract/css";
+import type { MapLeafNodes } from "@vanilla-extract/private";
+
+export const globalVars = createGlobalThemeContract(
+  {
+    backgroundColor: "background-color",
+    dimBackgroundColor: "dim-background-color",
+    appBar: {
+      borderColor: "app-bar-border-color",
+      borderSize: "app-bar-border-size",
+      height: "app-bar-height",
+      iconColor: "app-bar-icon-color",
+      textColor: "app-bar-text-color",
+    },
+    bottomSheet: {
+      borderRadius: "bottom-sheet-border-radius",
+    },
+    modal: {
+      borderRadius: "bottom-sheet-border-radius",
+    },
+  },
+  (value) => `stackflow-basic-ui-${value}`,
+);
+
+type InferVars<T> = T extends MapLeafNodes<infer U, any> ? U : never;
+export type GlobalVars = InferVars<typeof globalVars>;
+
+const defaultVars = {
+  backgroundColor: "#fff",
+  dimBackgroundColor: "rgba(0, 0, 0, 0.15)",
+  appBar: {
+    borderColor: "rgba(0, 0, 0, 0.07)",
+    borderSize: "1px",
+    height: "3.5rem",
+    iconColor: "#212124",
+    textColor: "#212124",
+  },
+  bottomSheet: {
+    borderRadius: "1rem",
+  },
+  modal: {
+    borderRadius: "1rem",
+  },
+};
+
+const cupertinoVars = {
+  ...defaultVars,
+  appBar: {
+    ...defaultVars.appBar,
+    height: "2.75rem",
+    borderSize: "0.5px",
+  },
+};
+
+const root = ":root";
+export const rootAndroid = ":root[data-stackflow-basic-ui-theme=android]";
+export const rootCupertino = ":root[data-stackflow-basic-ui-theme=cupertino]";
+
+createGlobalTheme(`${root}, ${rootAndroid}`, globalVars, {
+  ...defaultVars,
+});
+createGlobalTheme(rootCupertino, globalVars, {
+  ...cupertinoVars,
+});
+
+export const android = createTheme(globalVars, {
+  ...defaultVars,
+});
+export const cupertino = createTheme(globalVars, {
+  ...cupertinoVars,
+});

package/src/utils/PropOf.ts

@@ -0,0 +1 @@
+export type PropOf<T> = T extends React.ComponentType<infer U> ? U : never;

package/src/utils/compactMap.ts

@@ -0,0 +1,13 @@
+export function compactMap<T extends {}>(
+  obj: T,
+): {
+  [key in keyof T]: NonNullable<T[key]>;
+} {
+  return Object.entries(obj).reduce<any>((acc, [key, value]) => {
+    if (value !== null && value !== undefined) {
+      acc[key] = value;
+    }
+
+    return acc;
+  }, {});
+}

package/src/utils/index.ts

@@ -0,0 +1,7 @@
+export * from "./compactMap";
+export * from "./last";
+export * from "./listenOnce";
+export * from "./listenResize";
+export * from "./noop";
+export * from "./PropOf";
+export * from "./requestNextFrame";

package/src/utils/last.ts

@@ -0,0 +1 @@
+export const last = <T extends unknown>(arr: T[]) => arr[arr.length - 1];

package/src/utils/listenOnce.ts

@@ -0,0 +1,12 @@
+export function listenOnce<T extends HTMLElement>(
+  el: T,
+  type: keyof HTMLElementEventMap,
+  cb: () => void,
+) {
+  const listener = () => {
+    el.removeEventListener(type, listener);
+    cb();
+  };
+
+  el.addEventListener(type, listener);
+}

package/src/utils/listenResize.ts

@@ -0,0 +1,8 @@
+export const listenResize = (cb: () => void) => {
+  cb();
+  window.addEventListener("resize", cb);
+
+  return () => {
+    window.removeEventListener("resize", cb);
+  };
+};

package/src/utils/noop.ts

@@ -0,0 +1 @@
+export const noop = () => {};

package/src/utils/requestNextFrame.tsx

@@ -0,0 +1,8 @@
+// https://github.com/MingruiZhang/react-animate-mount/blob/32300c04a4fdfa97724b70aaaf0c0f403d6da247/src/Animate.js#L171-L179
+export function requestNextFrame(cb: () => void) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      cb();
+    });
+  });
+}