@stackflow/plugin-basic-ui 0.14.1

package/src/components/BottomSheet.css.ts

@@ -0,0 +1,78 @@
+import { createThemeContract, style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+
+import { f } from "../styles";
+import { globalVars } from "../theme.css";
+
+export const vars = createThemeContract({
+  transitionDuration: null,
+  zIndexes: {
+    dim: null,
+    paper: null,
+  },
+});
+
+const transition = style({
+  transition: vars.transitionDuration,
+});
+
+export const enterActive = style({});
+export const enterDone = style({});
+export const exitActive = style({});
+export const exitDone = style({
+  transform: "translateX(100%)",
+});
+
+export const container = recipe({
+  base: [f.posAbsFull, f.overflowHidden],
+  variants: {
+    transitionState: {
+      "enter-active": enterActive,
+      "enter-done": enterDone,
+      "exit-active": exitActive,
+      "exit-done": exitDone,
+    },
+  },
+});
+
+export const dim = style([
+  f.posAbsFull,
+  f.overflowHidden,
+  f.flexAlignEnd,
+  transition,
+  {
+    backgroundColor: globalVars.dimBackgroundColor,
+    zIndex: vars.zIndexes.dim,
+    opacity: 0,
+    selectors: {
+      [`${enterActive} &, ${enterDone} &`]: {
+        opacity: 1,
+      },
+      [`${exitActive} &, ${exitDone} &`]: {
+        opacity: 0,
+      },
+    },
+  },
+]);
+
+export const paper = style([
+  f.overflowHidden,
+  transition,
+  {
+    backgroundColor: globalVars.backgroundColor,
+    width: "100%",
+    borderRadius: `${globalVars.bottomSheet.borderRadius} ${globalVars.bottomSheet.borderRadius} 0 0`,
+    transform: "translateY(100%)",
+    opacity: 0,
+    selectors: {
+      [`${enterActive} &, ${enterDone} &`]: {
+        transform: "translateY(0)",
+        opacity: 1,
+      },
+      [`${exitActive} &, ${exitDone} &`]: {
+        transform: "translateY(100%)",
+        opacity: 0,
+      },
+    },
+  },
+]);

package/src/components/BottomSheet.tsx

@@ -0,0 +1,91 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+
+import { useActions, useActivity } from "@stackflow/react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import React, { useRef } from "react";
+
+import { useLazy, useStyleEffect } from "../hooks";
+import type { GlobalVars } from "../theme.css";
+import { globalVars } from "../theme.css";
+import { compactMap } from "../utils";
+import * as css from "./BottomSheet.css";
+
+type BottomSheetProps = Partial<
+  Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">
+> &
+  Partial<GlobalVars["bottomSheet"]> & {
+    children: React.ReactNode;
+  };
+const BottomSheet: React.FC<BottomSheetProps> = ({
+  borderRadius = "1rem",
+  backgroundColor,
+  dimBackgroundColor,
+  children,
+}) => {
+  const activity = useActivity();
+  const { pop } = useActions();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const paperRef = useRef<HTMLDivElement>(null);
+
+  useStyleEffect({
+    styleName: "hide",
+    refs: [containerRef],
+  });
+  useStyleEffect({
+    styleName: "offset",
+    refs: [paperRef],
+  });
+  useStyleEffect({
+    styleName: "swipe-back",
+    refs: [paperRef],
+  });
+
+  const popLock = useRef(false);
+
+  const onDimClick = () => {
+    if (popLock.current) {
+      return;
+    }
+
+    pop();
+    popLock.current = true;
+  };
+  const onPaperClick: React.MouseEventHandler = (e) => {
+    e.stopPropagation();
+  };
+
+  const zIndexBase = activity.zIndex * 5 + 3;
+  const zIndexPaper = activity.zIndex * 5 + 4;
+
+  return (
+    <div
+      className={css.container({
+        transitionState: useLazy(activity.transitionState),
+      })}
+      ref={containerRef}
+      style={assignInlineVars(
+        compactMap({
+          [globalVars.bottomSheet.borderRadius]: borderRadius,
+          [globalVars.backgroundColor]: backgroundColor,
+          [globalVars.dimBackgroundColor]: dimBackgroundColor,
+          [css.vars.zIndexes.dim]: `${zIndexBase}`,
+          [css.vars.zIndexes.paper]: `${zIndexPaper}`,
+          [css.vars.transitionDuration]:
+            activity.transitionState === "enter-active" ||
+            activity.transitionState === "exit-active"
+              ? `var(--stackflow-transition-duration)`
+              : "0ms",
+        }),
+      )}
+    >
+      <div className={css.dim} ref={paperRef} onClick={onDimClick}>
+        <div className={css.paper} onClick={onPaperClick}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BottomSheet;

package/src/components/Modal.css.ts

@@ -0,0 +1,82 @@
+import { createThemeContract, style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+
+import { f } from "../styles";
+import { globalVars } from "../theme.css";
+
+export const vars = createThemeContract({
+  transitionDuration: null,
+  zIndexes: {
+    dim: null,
+    paper: null,
+  },
+});
+
+const transition = style({
+  transition: vars.transitionDuration,
+});
+
+export const enterActive = style({});
+export const enterDone = style({});
+export const exitActive = style({});
+export const exitDone = style({
+  transform: "translateX(100%)",
+});
+
+export const container = recipe({
+  base: [f.posAbsFull, f.overflowHidden],
+  variants: {
+    transitionState: {
+      "enter-active": enterActive,
+      "enter-done": enterDone,
+      "exit-active": exitActive,
+      "exit-done": exitDone,
+    },
+  },
+});
+
+export const dim = style([
+  f.posAbsFull,
+  f.overflowHidden,
+  f.flexAlignCenter,
+  f.flexJustifyCenter,
+  transition,
+  {
+    backgroundColor: globalVars.dimBackgroundColor,
+    zIndex: vars.zIndexes.dim,
+    opacity: 0,
+    selectors: {
+      [`${enterActive} &, ${enterDone} &`]: {
+        opacity: 1,
+      },
+      [`${exitActive} &, ${exitDone} &`]: {
+        opacity: 0,
+      },
+    },
+  },
+]);
+
+export const paper = style([
+  f.overflowHidden,
+  transition,
+  {
+    backgroundColor: globalVars.backgroundColor,
+    width: "100%",
+    margin: "0 2.5rem",
+    boxShadow:
+      "0px 0.625rem 2.375rem rgba(0, 0, 0, 0.15), 0px .5625rem 2.875rem rgba(0, 0, 0, 0.12), 0px .3125rem .9375rem rgba(0, 0, 0, 0.1)",
+    borderRadius: globalVars.modal.borderRadius,
+    transform: "scale(1.1)",
+    opacity: 0,
+    selectors: {
+      [`${enterActive} &, ${enterDone} &`]: {
+        transform: "scale(1)",
+        opacity: 1,
+      },
+      [`${exitActive} &, ${exitDone} &`]: {
+        transform: "scale(1.1)",
+        opacity: 0,
+      },
+    },
+  },
+]);

package/src/components/Modal.tsx

@@ -0,0 +1,91 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+
+import { useActions, useActivity } from "@stackflow/react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import React, { useRef } from "react";
+
+import { useLazy, useStyleEffect } from "../hooks";
+import type { GlobalVars } from "../theme.css";
+import { globalVars } from "../theme.css";
+import { compactMap } from "../utils";
+import * as css from "./Modal.css";
+
+type ModalProps = Partial<
+  Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">
+> &
+  Partial<GlobalVars["modal"]> & {
+    children: React.ReactNode;
+  };
+const Modal: React.FC<ModalProps> = ({
+  backgroundColor,
+  dimBackgroundColor,
+  borderRadius = "1rem",
+  children,
+}) => {
+  const activity = useActivity();
+  const { pop } = useActions();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const paperRef = useRef<HTMLDivElement>(null);
+
+  useStyleEffect({
+    styleName: "hide",
+    refs: [containerRef],
+  });
+  useStyleEffect({
+    styleName: "offset",
+    refs: [paperRef],
+  });
+  useStyleEffect({
+    styleName: "swipe-back",
+    refs: [paperRef],
+  });
+
+  const popLock = useRef(false);
+
+  const onDimClick = () => {
+    if (popLock.current) {
+      return;
+    }
+
+    pop();
+    popLock.current = true;
+  };
+  const onPaperClick: React.MouseEventHandler = (e) => {
+    e.stopPropagation();
+  };
+
+  const zIndexBase = activity.zIndex * 5 + 3;
+  const zIndexPaper = activity.zIndex * 5 + 4;
+
+  return (
+    <div
+      className={css.container({
+        transitionState: useLazy(activity.transitionState),
+      })}
+      ref={containerRef}
+      style={assignInlineVars(
+        compactMap({
+          [globalVars.bottomSheet.borderRadius]: borderRadius,
+          [globalVars.backgroundColor]: backgroundColor,
+          [globalVars.dimBackgroundColor]: dimBackgroundColor,
+          [css.vars.zIndexes.dim]: `${zIndexBase}`,
+          [css.vars.zIndexes.paper]: `${zIndexPaper}`,
+          [css.vars.transitionDuration]:
+            activity.transitionState === "enter-active" ||
+            activity.transitionState === "exit-active"
+              ? `var(--stackflow-transition-duration)`
+              : "0ms",
+        }),
+      )}
+    >
+      <div className={css.dim} ref={paperRef} onClick={onDimClick}>
+        <div className={css.paper} onClick={onPaperClick}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+export * from "./useLazy";
+export * from "./useMaxWidth";
+export * from "./useStyleEffect";
+export * from "./useStyleEffectHide";
+export * from "./useStyleEffectOffset";
+export * from "./useStyleEffectSwipeBack";
+export * from "./useTheme";

package/src/hooks/useLazy.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+import { requestNextFrame } from "../utils";
+
+export function useLazy<T>(value: T) {
+  const [state, setState] = useState<T | undefined>(undefined);
+
+  useEffect(() => {
+    requestNextFrame(() => {
+      setState(value);
+    });
+  }, [value]);
+
+  return state;
+}

package/src/hooks/useMaxWidth.ts

@@ -0,0 +1,43 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { listenResize, noop } from "../utils";
+
+export function useMaxWidth({
+  outerRef,
+  innerRef,
+  enable,
+}: {
+  outerRef: React.ForwardedRef<any>;
+  innerRef: React.MutableRefObject<any>;
+  enable: boolean;
+}) {
+  const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);
+
+  useEffect(() => {
+    const $outer = outerRef && "current" in outerRef && outerRef.current;
+    const $inner = innerRef.current;
+
+    if (!enable || !$outer || !$inner) {
+      return noop;
+    }
+
+    const dispose = listenResize(() => {
+      const screenWidth = $outer.clientWidth;
+
+      const leftWidth = $inner.offsetLeft;
+      const centerWidth = $inner.clientWidth;
+      const rightWidth = screenWidth - leftWidth - centerWidth;
+
+      const sideMargin = Math.max(leftWidth, rightWidth);
+
+      setMaxWidth(screenWidth - 2 * sideMargin);
+    });
+
+    return dispose;
+  }, []);
+
+  return {
+    maxWidth,
+  };
+}

package/src/hooks/useStyleEffect.ts

@@ -0,0 +1,76 @@
+import type { ActivityTransitionState } from "@stackflow/core";
+import { useActivity } from "@stackflow/react";
+import type React from "react";
+import { useEffect } from "react";
+
+const connections: {
+  [styleName: string]: Map<
+    number,
+    {
+      refs: Array<React.RefObject<any>>;
+      hasEffect: boolean;
+    }
+  >;
+} = {};
+
+export function useStyleEffect({
+  styleName,
+  refs,
+  effect,
+}: {
+  styleName: string;
+  refs: Array<React.RefObject<any>>;
+  effect?: (params: {
+    activityTransitionState: ActivityTransitionState;
+    refs: Array<React.RefObject<any>>;
+  }) => (() => void) | void;
+}) {
+  const activity = useActivity();
+
+  useEffect(() => {
+    if (!connections[styleName]) {
+      connections[styleName] = new Map();
+    }
+
+    connections[styleName].set(activity.zIndex, {
+      refs,
+      hasEffect: !!effect,
+    });
+
+    return () => {
+      connections[styleName].delete(activity.zIndex);
+    };
+  }, [activity.id, refs, effect]);
+
+  useEffect(() => {
+    if (!effect) {
+      return () => {};
+    }
+
+    const refs = (() => {
+      let arr: Array<React.RefObject<any>> = [];
+
+      for (let i = 1; i <= activity.zIndex; i += 1) {
+        const connection = connections[styleName].get(activity.zIndex - i);
+
+        if (connection?.refs) {
+          arr = [...arr, ...connection.refs];
+        }
+        if (connection?.hasEffect) {
+          break;
+        }
+      }
+
+      return arr;
+    })();
+
+    const cleanup = effect({
+      activityTransitionState: activity.transitionState,
+      refs,
+    });
+
+    return () => {
+      cleanup?.();
+    };
+  }, [activity.transitionState]);
+}

package/src/hooks/useStyleEffectHide.ts

@@ -0,0 +1,34 @@
+/* eslint-disable no-param-reassign */
+
+import { useStyleEffect } from "./useStyleEffect";
+
+export function useStyleEffectHide({
+  refs,
+  hasEffect,
+}: {
+  refs: Array<React.RefObject<any>>;
+  hasEffect?: boolean;
+}) {
+  useStyleEffect({
+    styleName: "hide",
+    refs,
+    effect: hasEffect
+      ? ({ activityTransitionState, refs }) => {
+          switch (activityTransitionState) {
+            case "enter-done": {
+              refs.forEach((ref) => {
+                ref.current.style.display = "none";
+              });
+              break;
+            }
+            default: {
+              refs.forEach((ref) => {
+                ref.current.style.display = "";
+              });
+              break;
+            }
+          }
+        }
+      : undefined,
+  });
+}

package/src/hooks/useStyleEffectOffset.ts

@@ -0,0 +1,57 @@
+/* eslint-disable no-param-reassign */
+
+import { listenOnce, requestNextFrame } from "../utils";
+import { useStyleEffect } from "./useStyleEffect";
+
+export const OFFSET_PX_ANDROID = 32;
+export const OFFSET_PX_CUPERTINO = 80;
+
+export function useStyleEffectOffset({
+  refs,
+  theme,
+  hasEffect,
+}: {
+  refs: Array<React.RefObject<any>>;
+  theme: "android" | "cupertino";
+  hasEffect?: boolean;
+}) {
+  useStyleEffect({
+    styleName: "offset",
+    refs,
+    effect: hasEffect
+      ? ({ activityTransitionState, refs }) => {
+          const transform =
+            theme === "cupertino"
+              ? `translateX(-${OFFSET_PX_CUPERTINO / 16}rem)`
+              : `translateY(-${OFFSET_PX_ANDROID / 16}rem)`;
+
+          switch (activityTransitionState) {
+            case "enter-active":
+            case "enter-done": {
+              refs.forEach((ref) => {
+                ref.current.style.transition = `var(--stackflow-transition-duration)`;
+                ref.current.style.transform = transform;
+              });
+              break;
+            }
+            case "exit-active":
+            case "exit-done": {
+              requestNextFrame(() => {
+                refs.forEach((ref) => {
+                  ref.current.style.transform = "";
+
+                  listenOnce(ref.current, "transitionend", () => {
+                    ref.current.style.transition = "";
+                  });
+                });
+              });
+              break;
+            }
+            default: {
+              break;
+            }
+          }
+        }
+      : undefined,
+  });
+}