@stackflow/plugin-basic-ui 0.19.3-alpha.1 → 0.20.0

package/src/components/AppBar.tsx

@@ -1,10 +1,10 @@
-import { useActions, useActivity } from "@stackflow/react";
+import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import React, { useRef } from "react";
 
 import { IconBack, IconClose } from "../assets";
 import { useGlobalOptions } from "../basicUIPlugin";
-import { useMaxWidth } from "../hooks";
+import { useMaxWidth, useNullableActivity } from "../hooks";
 import type { GlobalVars } from "../theme.css";
 import { globalVars } from "../theme.css";
 import { compactMap, noop } from "../utils";
@@ -17,6 +17,7 @@ type AppBarProps = Partial<
     | "borderColor"
     | "borderSize"
     | "height"
+    | "heightTransitionDuration"
     | "iconColor"
     | "textColor"
     | "backgroundColor"
@@ -66,7 +67,7 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
     ref,
   ) => {
     const actions = useActions();
-    const activity = useActivity();
+    const activity = useNullableActivity();
 
     const globalOptions = useGlobalOptions();
     const globalCloseButton = globalOptions.appBar?.closeButton;
@@ -90,6 +91,9 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
     };
 
     const renderBackButton = () => {
+      if (!activity) {
+        return null;
+      }
       if (activity.isRoot) {
         return null;
       }
@@ -136,10 +140,9 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
     };
 
     const renderCloseButton = () => {
-      if (
-        (!closeButton && !globalOptions.appBar?.closeButton) ||
-        !activity.isRoot
-      ) {
+      const isRoot = !activity || activity.isRoot;
+
+      if ((!closeButton && !globalOptions.appBar?.closeButton) || !isRoot) {
         return null;
       }
       if (closeButton && "render" in closeButton && closeButton.render) {
@@ -206,37 +209,42 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
           }),
         )}
       >
-        <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
-            )}
-            <button
-              className={css.centerMainEdge}
-              type="button"
-              aria-hidden="true"
-              onClick={onTopClick}
-            />
+        <div className={css.safeArea} />
+        <div className={css.container}>
+          <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
+              )}
+              <button
+                className={css.centerMainEdge}
+                type="button"
+                aria-hidden="true"
+                onClick={onTopClick}
+              />
+            </div>
+          </div>
+          <div className={css.right}>
+            {appendRight?.()}
+            {closeButtonLocation === "right" && renderCloseButton()}
           </div>
-        </div>
-        <div className={css.right}>
-          {appendRight?.()}
-          {closeButtonLocation === "right" && renderCloseButton()}
         </div>
       </div>
     );
   },
 );
 
+AppBar.displayName = "AppBar";
+
 export default AppBar;

package/src/components/AppScreen.css.ts

@@ -1,5 +1,4 @@
 import { createThemeContract, style } from "@vanilla-extract/css";
-import { calc } from "@vanilla-extract/css-utils";
 import { recipe } from "@vanilla-extract/recipes";
 
 import { f } from "../styles";
@@ -127,7 +126,7 @@ export const paper = recipe({
       true: [
         f.borderBox,
         {
-          transition: `transform ${vars.transitionDuration}, opacity ${vars.transitionDuration}, height ${globalVars.appBar.showTransitionDuration}`,
+          transition: `transform ${vars.transitionDuration}, opacity ${vars.transitionDuration}, padding-top ${globalVars.appBar.heightTransitionDuration}`,
           paddingTop: [
             `calc(${globalVars.appBar.height} + constant(safe-area-inset-top))`,
             `calc(${globalVars.appBar.height} + env(safe-area-inset-top))`,
@@ -153,7 +152,7 @@ export const edge = recipe({
     hasAppBar: {
       true: {
         top: globalVars.appBar.height,
-        height: calc("100%").subtract(globalVars.appBar.height).toString(),
+        height: `calc(100% - ${globalVars.appBar.height})`,
       },
     },
   },

package/src/components/AppScreen.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable no-param-reassign */
 
-import { useActions, useActivity } from "@stackflow/react";
+import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import React, { useRef } from "react";
 
 import { useGlobalOptions } from "../basicUIPlugin";
 import {
   useLazy,
+  useNullableActivity,
   useStyleEffectHide,
   useStyleEffectOffset,
   useStyleEffectSwipeBack,
@@ -22,8 +23,7 @@ type AppScreenProps = Partial<
   Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">
 > & {
   appBar?: Omit<PropOf<typeof AppBar>, "theme" | "ref" | "key">;
-  showAppBar?: boolean;
-  showAppBarTransitionDuration?: string;
+
   preventSwipeBack?: boolean;
   children: React.ReactNode;
 };
@@ -31,13 +31,11 @@ const AppScreen: React.FC<AppScreenProps> = ({
   backgroundColor,
   dimBackgroundColor,
   appBar,
-  showAppBar = !!appBar,
-  showAppBarTransitionDuration,
   preventSwipeBack,
   children,
 }) => {
   const globalOptions = useGlobalOptions();
-  const activity = useActivity();
+  const activity = useNullableActivity();
   const { pop } = useActions();
 
   const appScreenRef = useRef<HTMLDivElement>(null);
@@ -67,16 +65,16 @@ const AppScreen: React.FC<AppScreenProps> = ({
     },
   });
 
-  const hasAppBar = !!appBar && showAppBar;
+  const hasAppBar = !!appBar;
 
-  const zIndexBase = activity.zIndex * 5;
+  const zIndexBase = (activity?.zIndex ?? 0) * 5;
   const zIndexDim = zIndexBase;
   const zIndexPaper =
     zIndexBase + (globalOptions.theme === "cupertino" && hasAppBar ? 1 : 3);
   const zIndexEdge = zIndexBase + 4;
   const zIndexAppBar = zIndexBase + 7;
 
-  const { transitionState } = activity;
+  const transitionState = activity?.transitionState ?? "enter-done";
   const lazyTransitionState = useLazy(transitionState);
 
   const onAppBarTopClick: React.MouseEventHandler = (e) => {
@@ -103,16 +101,16 @@ const AppScreen: React.FC<AppScreenProps> = ({
         compactMap({
           [globalVars.backgroundColor]: backgroundColor,
           [globalVars.dimBackgroundColor]: dimBackgroundColor,
-          [globalVars.appBar.height]: showAppBar ? appBar?.height : "0",
-          [globalVars.appBar.showTransitionDuration]:
-            showAppBarTransitionDuration,
+          [globalVars.appBar.height]: appBar?.height,
+          [globalVars.appBar.heightTransitionDuration]:
+            appBar?.heightTransitionDuration,
           [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"
+            transitionState === "enter-active" ||
+            transitionState === "exit-active"
               ? `var(--stackflow-transition-duration)`
               : "0ms",
         }),
@@ -120,7 +118,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
     >
       <div className={css.dim} ref={dimRef} />
       <div
-        key={activity.id}
+        key={activity?.id}
         className={css.paper({
           hasAppBar,
         })}
@@ -128,7 +126,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
       >
         {children}
       </div>
-      {!activity.isRoot &&
+      {!activity?.isRoot &&
         globalOptions.theme === "cupertino" &&
         !preventSwipeBack && (
           <div className={css.edge({ hasAppBar })} ref={edgeRef} />
@@ -140,4 +138,6 @@ const AppScreen: React.FC<AppScreenProps> = ({
   );
 };
 
+AppScreen.displayName = "AppScreen";
+
 export default AppScreen;

package/src/components/BottomSheet.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 
-import { useActions, useActivity } from "@stackflow/react";
+import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import React, { useRef } from "react";
 
-import { useLazy, useStyleEffect } from "../hooks";
+import { useLazy, useNullableActivity, useStyleEffect } from "../hooks";
 import type { GlobalVars } from "../theme.css";
 import { globalVars } from "../theme.css";
 import { compactMap } from "../utils";
@@ -24,7 +24,7 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
   onOutsideClick,
   children,
 }) => {
-  const activity = useActivity();
+  const activity = useNullableActivity();
   const { pop } = useActions();
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -63,13 +63,14 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
     e.stopPropagation();
   };
 
-  const zIndexBase = activity.zIndex * 5 + 3;
-  const zIndexPaper = activity.zIndex * 5 + 4;
+  const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;
+  const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;
+  const transitionState = activity?.transitionState ?? "enter-done";
 
   return (
     <div
       className={css.container({
-        transitionState: useLazy(activity.transitionState),
+        transitionState: useLazy(transitionState),
       })}
       ref={containerRef}
       style={assignInlineVars(
@@ -80,8 +81,8 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
           [css.vars.zIndexes.dim]: `${zIndexBase}`,
           [css.vars.zIndexes.paper]: `${zIndexPaper}`,
           [css.vars.transitionDuration]:
-            activity.transitionState === "enter-active" ||
-            activity.transitionState === "exit-active"
+            transitionState === "enter-active" ||
+            transitionState === "exit-active"
               ? `var(--stackflow-transition-duration)`
               : "0ms",
         }),
@@ -96,4 +97,6 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
   );
 };
 
+BottomSheet.displayName = "BottomSheet";
+
 export default BottomSheet;

package/src/components/Modal.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 
-import { useActions, useActivity } from "@stackflow/react";
+import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import React, { useRef } from "react";
 
-import { useLazy, useStyleEffect } from "../hooks";
+import { useLazy, useNullableActivity, useStyleEffect } from "../hooks";
 import type { GlobalVars } from "../theme.css";
 import { globalVars } from "../theme.css";
 import { compactMap } from "../utils";
@@ -24,7 +24,7 @@ const Modal: React.FC<ModalProps> = ({
   onOutsideClick,
   children,
 }) => {
-  const activity = useActivity();
+  const activity = useNullableActivity();
   const { pop } = useActions();
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -63,13 +63,14 @@ const Modal: React.FC<ModalProps> = ({
     e.stopPropagation();
   };
 
-  const zIndexBase = activity.zIndex * 5 + 3;
-  const zIndexPaper = activity.zIndex * 5 + 4;
+  const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;
+  const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;
+  const transitionState = activity?.transitionState ?? "enter-done";
 
   return (
     <div
       className={css.container({
-        transitionState: useLazy(activity.transitionState),
+        transitionState: useLazy(transitionState),
       })}
       ref={containerRef}
       style={assignInlineVars(
@@ -80,8 +81,8 @@ const Modal: React.FC<ModalProps> = ({
           [css.vars.zIndexes.dim]: `${zIndexBase}`,
           [css.vars.zIndexes.paper]: `${zIndexPaper}`,
           [css.vars.transitionDuration]:
-            activity.transitionState === "enter-active" ||
-            activity.transitionState === "exit-active"
+            transitionState === "enter-active" ||
+            transitionState === "exit-active"
               ? `var(--stackflow-transition-duration)`
               : "0ms",
         }),
@@ -96,4 +97,6 @@ const Modal: React.FC<ModalProps> = ({
   );
 };
 
+Modal.displayName = "Modal";
+
 export default Modal;

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from "./useLazy";
 export * from "./useMaxWidth";
+export * from "./useNullableActivity";
 export * from "./useStyleEffect";
 export * from "./useStyleEffectHide";
 export * from "./useStyleEffectOffset";

package/src/hooks/useNullableActivity.ts

@@ -0,0 +1,6 @@
+import type { Activity } from "@stackflow/core";
+import { useActivity } from "@stackflow/react";
+
+export function useNullableActivity() {
+  return useActivity() as Activity | null;
+}

package/src/hooks/useStyleEffect.ts

@@ -1,8 +1,9 @@
 import type { ActivityTransitionState } from "@stackflow/core";
-import { useActivity } from "@stackflow/react";
 import type React from "react";
 import { useEffect } from "react";
 
+import { useNullableActivity } from "./useNullableActivity";
+
 const connections: {
   [styleName: string]: Map<
     number,
@@ -25,9 +26,12 @@ export function useStyleEffect({
     refs: Array<React.RefObject<HTMLElement>>;
   }) => (() => void) | void;
 }) {
-  const activity = useActivity();
+  const activity = useNullableActivity();
 
   useEffect(() => {
+    if (!activity) {
+      return () => {};
+    }
     if (!connections[styleName]) {
       connections[styleName] = new Map();
     }
@@ -40,9 +44,12 @@ export function useStyleEffect({
     return () => {
       connections[styleName].delete(activity.zIndex);
     };
-  }, [activity.id, refs, effect]);
+  }, [activity?.id, refs, effect]);
 
   useEffect(() => {
+    if (!activity) {
+      return () => {};
+    }
     if (!effect) {
       return () => {};
     }
@@ -72,5 +79,5 @@ export function useStyleEffect({
     return () => {
       cleanup?.();
     };
-  }, [activity.transitionState]);
+  }, [activity?.transitionState]);
 }

package/src/index.ts

@@ -2,10 +2,4 @@ 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 {
-  useStyleEffect,
-  useStyleEffectHide,
-  useStyleEffectOffset,
-  useStyleEffectSwipeBack,
-} from "./hooks";
 export { globalVars as cssVars } from "./theme.css";

package/src/styles/f.css.ts

@@ -30,6 +30,10 @@ export const flex = style({
   display: "flex",
 });
 
+export const flex1 = style({
+  flex: 1,
+});
+
 export const flexAlignCenter = style([
   flex,
   {

package/src/theme.css.ts

@@ -13,10 +13,11 @@ export const globalVars = createGlobalThemeContract(
       borderColor: "app-bar-border-color",
       borderSize: "app-bar-border-size",
       height: "app-bar-height",
+      heightTransitionDuration: "app-bar-height-transition-duration",
+      minHeight: "app-bar-min-height",
       iconColor: "app-bar-icon-color",
       textColor: "app-bar-text-color",
       backgroundColor: "app-bar-background-color",
-      showTransitionDuration: "app-bar-show-transition-duration",
     },
     bottomSheet: {
       borderRadius: "bottom-sheet-border-radius",
@@ -38,10 +39,11 @@ const defaultVars = {
     borderColor: "rgba(0, 0, 0, 0.07)",
     borderSize: "1px",
     height: "3.5rem",
+    heightTransitionDuration: "275ms",
+    minHeight: "3.5rem",
     iconColor: "#212124",
     textColor: "#212124",
     backgroundColor: "#fff",
-    showTransitionDuration: "275ms",
   },
   bottomSheet: {
     borderRadius: "1rem",
@@ -56,6 +58,7 @@ const cupertinoVars = {
   appBar: {
     ...defaultVars.appBar,
     height: "2.75rem",
+    minHeight: "2.75rem",
     borderSize: "0.5px",
   },
 };

package/src/utils/compact.ts

@@ -0,0 +1,6 @@
+export function compact<T>(arr: Array<T>): Array<NonNullable<T>> {
+  return arr.filter(
+    (item): item is NonNullable<typeof item> =>
+      item !== undefined && item !== null,
+  );
+}

package/src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from "./compact";
 export * from "./compactMap";
 export * from "./last";
 export * from "./listenOnce";