@stackflow/plugin-basic-ui 0.14.1

package/src/basicUIPlugin.tsx

@@ -0,0 +1,48 @@
+import type { StackflowReactPlugin } from "@stackflow/react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import React from "react";
+
+import { ThemeProvider } from "./hooks";
+import * as theme from "./theme.css";
+import { compactMap } from "./utils";
+
+type RPartial<K> = {
+  [attr in keyof K]?: K[attr] extends object ? RPartial<K[attr]> : K[attr];
+};
+
+type BasicUIPluginOptions = RPartial<theme.GlobalVars> & {
+  theme: "android" | "cupertino";
+};
+
+export const basicUIPlugin: (
+  options: BasicUIPluginOptions,
+) => StackflowReactPlugin = (options) => () => ({
+  key: "basic-ui",
+  wrapStack({ stack }) {
+    return (
+      <ThemeProvider value={options.theme}>
+        <div
+          className={theme[options.theme]}
+          style={assignInlineVars(
+            compactMap({
+              [theme.globalVars.backgroundColor]: options.backgroundColor,
+              [theme.globalVars.dimBackgroundColor]: options.dimBackgroundColor,
+              [theme.globalVars.appBar.borderColor]:
+                options.appBar?.borderColor,
+              [theme.globalVars.appBar.borderSize]: options.appBar?.borderSize,
+              [theme.globalVars.appBar.height]: options.appBar?.height,
+              [theme.globalVars.appBar.iconColor]: options.appBar?.iconColor,
+              [theme.globalVars.appBar.textColor]: options.appBar?.textColor,
+              [theme.globalVars.bottomSheet.borderRadius]:
+                options.bottomSheet?.borderRadius,
+              [theme.globalVars.modal.borderRadius]:
+                options.modal?.borderRadius,
+            }),
+          )}
+        >
+          {stack.render()}
+        </div>
+      </ThemeProvider>
+    );
+  },
+});

package/src/components/AppBar.css.ts

@@ -0,0 +1,173 @@
+import { style } from "@vanilla-extract/css";
+import { calc } from "@vanilla-extract/css-utils";
+import { recipe } from "@vanilla-extract/recipes";
+
+import { f } from "../styles";
+import {
+  android,
+  cupertino,
+  globalVars,
+  rootAndroid,
+  rootCupertino,
+} from "../theme.css";
+import {
+  background,
+  enterActive,
+  enterDone,
+  exitActive,
+  vars,
+} from "./AppScreen.css";
+
+export const appBar = recipe({
+  base: [
+    f.posAbs,
+    f.flexAlignCenter,
+    f.fullWidth,
+    f.contentBox,
+    background,
+    {
+      height: globalVars.appBar.height,
+      paddingTop: ["constant(safe-area-inset-top)", "env(safe-area-inset-top)"],
+      zIndex: vars.zIndexes.appBar,
+      selectors: {
+        [`${cupertino} &, ${rootCupertino} &`]: {
+          position: "absolute",
+        },
+        [`${cupertino} ${exitActive} &, ${rootCupertino} ${exitActive} &`]: {
+          transform: "translateX(100%)",
+        },
+        [`${android} &, ${rootAndroid} &`]: {
+          opacity: 0,
+          transform: "translateY(10rem)",
+          transition: vars.transitionDuration,
+        },
+        [`${android} ${enterActive} &, ${rootAndroid} ${enterActive} &`]: {
+          opacity: 1,
+          transform: "translateY(0)",
+        },
+        [`${android} ${enterDone} &, ${rootAndroid} ${enterDone} &`]: {
+          opacity: 1,
+          transform: "translateY(0)",
+        },
+      },
+    },
+  ],
+  variants: {
+    border: {
+      true: {
+        boxShadow: `inset 0px ${calc(
+          globalVars.appBar.borderSize,
+        ).negate()} 0 ${globalVars.appBar.borderColor}`,
+      },
+    },
+  },
+});
+
+export const left = style([
+  f.flexAlignCenter,
+  f.fullHeight,
+  {
+    padding: "0 0.5rem",
+    ":empty": {
+      display: "none",
+    },
+  },
+]);
+
+export const backButton = style([
+  f.flexAlignCenter,
+  f.flexJustifyCenter,
+  f.cursorPointer,
+  f.resetButton,
+  {
+    color: globalVars.appBar.iconColor,
+    transition: "opacity 300ms",
+    width: "2.25rem",
+    height: "2.75rem",
+    ":active": {
+      opacity: "0.2",
+      transition: "opacity 0s",
+    },
+  },
+]);
+
+export const closeButton = style([backButton]);
+
+export const center = style([
+  f.flexAlignCenter,
+  {
+    flex: 1,
+  },
+]);
+
+export const centerMain = recipe({
+  base: {
+    width: vars.appBar.center.mainWidth,
+    color: globalVars.appBar.textColor,
+    selectors: {
+      [`${android} &, ${rootAndroid} &`]: {
+        width: "100%",
+        justifyContent: "flex-start",
+        paddingLeft: "1rem",
+        fontSize: "1.1875rem",
+        lineHeight: "1.5",
+        fontWeight: "bold",
+        boxSizing: "border-box",
+      },
+      [`${cupertino} &, ${rootCupertino} &`]: {
+        position: "absolute",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        fontFamily: "-apple-system, BlinkMacSystemFont",
+        fontWeight: 600,
+        fontSize: "1rem",
+        left: "50%",
+        transform: "translate(-50%)",
+        height: globalVars.appBar.height,
+        top: ["constant(safe-area-inset-top)", "env(safe-area-inset-top)"],
+      },
+    },
+  },
+  variants: {
+    hasLeft: {
+      true: {
+        selectors: {
+          [`${android} &, ${rootAndroid} &`]: {
+            paddingLeft: "0.375rem",
+          },
+        },
+      },
+    },
+  },
+});
+
+export const centerText = style([
+  f.overflowHidden,
+  f.whiteSpaceNowrap,
+  f.fullWidth,
+  {
+    textOverflow: "ellipsis",
+    fontSize: "inherit",
+    fontWeight: "inherit",
+  },
+]);
+
+export const right = style([
+  f.flexAlignCenter,
+  f.fullHeight,
+  f.posRel,
+  {
+    padding: "0 0.5rem",
+    marginLeft: "auto",
+    ":empty": {
+      display: "none",
+    },
+    selectors: {
+      [`${android} &, ${rootAndroid} &`]: {
+        padding: "0 0.5rem 0 0",
+      },
+    },
+  },
+]);

package/src/components/AppBar.tsx

@@ -0,0 +1,193 @@
+import { useActions, useActivity } from "@stackflow/react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import React, { useRef } from "react";
+
+import { IconBack, IconClose } from "../assets";
+import { useMaxWidth, useTheme } from "../hooks";
+import type { GlobalVars } from "../theme.css";
+import { globalVars } from "../theme.css";
+import { compactMap, noop } from "../utils";
+import * as css from "./AppBar.css";
+import * as appScreenCss from "./AppScreen.css";
+
+type AppBarProps = Partial<
+  Pick<
+    GlobalVars["appBar"],
+    "borderColor" | "borderSize" | "height" | "iconColor" | "textColor"
+  >
+> & {
+  title?: React.ReactNode;
+  appendLeft?: () => React.ReactNode;
+  appendRight?: () => React.ReactNode;
+  backButton?:
+    | {
+        renderIcon?: () => React.ReactNode;
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+      }
+    | {
+        render?: () => React.ReactNode;
+      };
+  closeButton?:
+    | {
+        renderIcon?: () => React.ReactNode;
+        onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+      }
+    | {
+        render?: () => React.ReactNode;
+      };
+  closeButtonLocation?: "left" | "right";
+  border?: boolean;
+};
+const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
+  (
+    {
+      title,
+      appendLeft,
+      appendRight,
+      backButton,
+      closeButton,
+      closeButtonLocation = "left",
+      border = true,
+      iconColor,
+      textColor,
+      borderColor,
+      borderSize,
+      height,
+    },
+    ref,
+  ) => {
+    const actions = useActions();
+    const activity = useActivity();
+
+    const theme = useTheme();
+
+    const centerRef = useRef<any>(null);
+
+    const { maxWidth } = useMaxWidth({
+      outerRef: ref,
+      innerRef: centerRef,
+      enable: theme === "cupertino",
+    });
+
+    const onBackClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (backButton && "onClick" in backButton && backButton.onClick) {
+        backButton.onClick(e);
+      }
+
+      if (!e.defaultPrevented) {
+        actions.pop();
+      }
+    };
+
+    const isCloseButtonVisible =
+      activity.zIndex === 0 ||
+      (activity.zIndex === 1 &&
+        activity.transitionState === "enter-active" &&
+        activity.pushedBy.name === "Replaced");
+
+    const renderBackButton = () => {
+      if (isCloseButtonVisible) {
+        return null;
+      }
+
+      if (!backButton) {
+        return (
+          <button
+            type="button"
+            className={css.backButton}
+            onClick={onBackClick}
+          >
+            <IconBack />
+          </button>
+        );
+      }
+
+      if ("render" in backButton && backButton.render) {
+        return backButton.render?.();
+      }
+
+      return (
+        <button type="button" className={css.backButton} onClick={onBackClick}>
+          {"renderIcon" in backButton && backButton.renderIcon ? (
+            backButton.renderIcon()
+          ) : (
+            <IconBack />
+          )}
+        </button>
+      );
+    };
+
+    const renderCloseButton = () => {
+      if (!closeButton || !isCloseButtonVisible) {
+        return null;
+      }
+      if ("render" in closeButton && closeButton.render) {
+        return closeButton.render();
+      }
+
+      return (
+        <button
+          type="button"
+          className={css.closeButton}
+          onClick={"onClick" in closeButton ? closeButton.onClick : noop}
+        >
+          {"renderIcon" in closeButton && closeButton.renderIcon ? (
+            closeButton.renderIcon()
+          ) : (
+            <IconClose />
+          )}
+        </button>
+      );
+    };
+
+    const hasLeft = !!(
+      (closeButtonLocation === "left" && closeButton) ||
+      backButton ||
+      appendLeft
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={css.appBar({
+          border,
+        })}
+        style={assignInlineVars(
+          compactMap({
+            [globalVars.appBar.iconColor]: iconColor,
+            [globalVars.appBar.textColor]: textColor,
+            [globalVars.appBar.borderColor]: borderColor,
+            [globalVars.appBar.borderSize]: borderSize,
+            [globalVars.appBar.height]: height,
+            [appScreenCss.vars.appBar.center.mainWidth]: `${maxWidth}px`,
+          }),
+        )}
+      >
+        <div className={css.left}>
+          {closeButtonLocation === "left" && renderCloseButton()}
+          {renderBackButton()}
+          {appendLeft?.()}
+        </div>
+        <div ref={centerRef} className={css.center}>
+          <div
+            className={css.centerMain({
+              hasLeft,
+            })}
+          >
+            {typeof title === "string" ? (
+              <div className={css.centerText}>{title}</div>
+            ) : (
+              title
+            )}
+          </div>
+        </div>
+        <div className={css.right}>
+          {appendRight?.()}
+          {closeButtonLocation === "right" && renderCloseButton()}
+        </div>
+      </div>
+    );
+  },
+);
+
+export default AppBar;

package/src/components/AppScreen.css.ts

@@ -0,0 +1,159 @@
+import { createThemeContract, style } from "@vanilla-extract/css";
+import { calc } from "@vanilla-extract/css-utils";
+import { recipe } from "@vanilla-extract/recipes";
+
+import { f } from "../styles";
+import {
+  android,
+  cupertino,
+  globalVars,
+  rootAndroid,
+  rootCupertino,
+} from "../theme.css";
+
+export const vars = createThemeContract({
+  transitionDuration: null,
+  zIndexes: {
+    dim: null,
+    paper: null,
+    edge: null,
+    appBar: null,
+  },
+  appBar: {
+    center: {
+      mainWidth: null,
+    },
+  },
+});
+
+const dimBackgroundColor = style({
+  backgroundColor: globalVars.dimBackgroundColor,
+});
+
+export const background = style({
+  backgroundColor: globalVars.backgroundColor,
+});
+
+export const allTransitions = 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 appScreen = 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,
+  dimBackgroundColor,
+  allTransitions,
+  {
+    opacity: 0,
+    zIndex: vars.zIndexes.dim,
+    selectors: {
+      [`${android} &, ${rootAndroid} &`]: {
+        height: "10rem",
+        background: `linear-gradient(${globalVars.dimBackgroundColor}, rgba(0, 0, 0, 0))`,
+      },
+      [`${enterActive} &`]: {
+        opacity: 1,
+      },
+      [`${enterDone} &`]: {
+        opacity: 1,
+      },
+      [`${exitActive} &`]: {
+        opacity: 0,
+      },
+      [`${exitDone} &`]: {
+        opacity: 0,
+      },
+    },
+  },
+]);
+
+export const paper = recipe({
+  base: [
+    f.posAbsFull,
+    background,
+    allTransitions,
+    {
+      overflowY: "scroll",
+      WebkitOverflowScrolling: "touch",
+      "::-webkit-scrollbar": {
+        display: "none",
+      },
+      zIndex: vars.zIndexes.paper,
+      selectors: {
+        [`${cupertino} &, ${rootCupertino} &`]: {
+          transform: "translateX(100%)",
+        },
+        [`${cupertino} ${enterActive} &, ${rootCupertino} ${enterActive} &`]: {
+          transform: "translateX(0)",
+        },
+        [`${cupertino} ${enterDone} &, ${rootCupertino} ${enterDone} &`]: {
+          transform: "translateX(0)",
+        },
+        [`${android} &, ${rootAndroid} &`]: {
+          opacity: 0,
+          transform: "translateY(10rem)",
+        },
+        [`${android} ${enterActive} &, ${rootAndroid} ${enterActive} &`]: {
+          opacity: 1,
+          transform: "translateY(0)",
+        },
+        [`${android} ${enterDone} &, ${rootAndroid} ${enterDone} &`]: {
+          opacity: 1,
+          transform: "translateY(0)",
+        },
+      },
+    },
+  ],
+  variants: {
+    hasAppBar: {
+      true: [
+        f.borderBox,
+        {
+          paddingTop: [
+            `calc(${globalVars.appBar.height} + constant(safe-area-inset-top))`,
+            `calc(${globalVars.appBar.height} + env(safe-area-inset-top))`,
+          ],
+        },
+      ],
+    },
+  },
+});
+
+export const edge = recipe({
+  base: [
+    f.posAbs,
+    f.top0,
+    f.left0,
+    f.fullHeight,
+    {
+      width: "1.25rem",
+      zIndex: vars.zIndexes.edge,
+    },
+  ],
+  variants: {
+    hasAppBar: {
+      true: {
+        top: globalVars.appBar.height,
+        height: calc("100%").subtract(globalVars.appBar.height).toString(),
+      },
+    },
+  },
+});

package/src/components/AppScreen.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable no-param-reassign */
+
+import { useActions, useActivity } from "@stackflow/react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import React, { useRef } from "react";
+
+import {
+  useLazy,
+  useStyleEffectHide,
+  useStyleEffectOffset,
+  useStyleEffectSwipeBack,
+  useTheme,
+} from "../hooks";
+import type { GlobalVars } from "../theme.css";
+import { globalVars } from "../theme.css";
+import type { PropOf } from "../utils";
+import { compactMap } from "../utils";
+import AppBar from "./AppBar";
+import * as css from "./AppScreen.css";
+
+type AppScreenProps = Partial<
+  Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">
+> & {
+  appBar?: Omit<PropOf<typeof AppBar>, "theme" | "ref" | "key">;
+  children: React.ReactNode;
+};
+const AppScreen: React.FC<AppScreenProps> = ({ appBar, children }) => {
+  const theme = useTheme();
+  const activity = useActivity();
+  const { pop } = useActions();
+
+  const appScreenRef = useRef<HTMLDivElement>(null);
+  const dimRef = useRef<HTMLDivElement>(null);
+  const paperRef = useRef<HTMLDivElement>(null);
+  const edgeRef = useRef<HTMLDivElement>(null);
+  const appBarRef = useRef<HTMLDivElement>(null);
+
+  useStyleEffectHide({
+    refs: [appScreenRef],
+    hasEffect: true,
+  });
+  useStyleEffectOffset({
+    theme,
+    refs: theme === "cupertino" ? [paperRef] : [paperRef, appBarRef],
+    hasEffect: true,
+  });
+  useStyleEffectSwipeBack({
+    theme,
+    dimRef,
+    edgeRef,
+    paperRef,
+    hasEffect: true,
+    onSwiped() {
+      pop();
+    },
+  });
+
+  const isRoot = activity.zIndex === 0;
+  const hasAppBar = !!appBar;
+
+  const zIndexBase = activity.zIndex * 5;
+  const zIndexDim = zIndexBase;
+  const zIndexPaper = zIndexBase + (theme === "cupertino" && hasAppBar ? 1 : 3);
+  const zIndexEdge = zIndexBase + 4;
+  const zIndexAppBar = zIndexBase + 7;
+
+  return (
+    <div
+      ref={appScreenRef}
+      className={css.appScreen({
+        transitionState: useLazy(activity.transitionState),
+      })}
+      style={assignInlineVars(
+        compactMap({
+          [globalVars.appBar.height]: appBar?.height,
+          [css.vars.zIndexes.dim]: `${zIndexDim}`,
+          [css.vars.zIndexes.paper]: `${zIndexPaper}`,
+          [css.vars.zIndexes.edge]: `${zIndexEdge}`,
+          [css.vars.zIndexes.appBar]: `${zIndexAppBar}`,
+          [css.vars.transitionDuration]:
+            activity.transitionState === "enter-active" ||
+            activity.transitionState === "exit-active"
+              ? `var(--stackflow-transition-duration)`
+              : "0ms",
+        }),
+      )}
+    >
+      <div className={css.dim} ref={dimRef} />
+      <div
+        key={activity.id}
+        className={css.paper({
+          hasAppBar,
+        })}
+        ref={paperRef}
+      >
+        {children}
+      </div>
+      {!isRoot && theme === "cupertino" && (
+        <div className={css.edge({ hasAppBar })} ref={edgeRef} />
+      )}
+      {appBar && <AppBar {...appBar} ref={appBarRef} />}
+    </div>
+  );
+};
+
+export default AppScreen;