@stackflow/plugin-basic-ui 0.21.3 → 1.0.0

package/src/components/AppBar.tsx

@@ -1,6 +1,6 @@
 import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import React, { useRef } from "react";
+import { forwardRef, useRef } from "react";
 
 import { IconBack, IconClose } from "../assets";
 import { useGlobalOptions } from "../basicUIPlugin";
@@ -18,6 +18,7 @@ type AppBarProps = Partial<
     | "borderSize"
     | "height"
     | "heightTransitionDuration"
+    | "overflow"
     | "iconColor"
     | "textColor"
     | "backgroundColor"
@@ -49,7 +50,7 @@ type AppBarProps = Partial<
   modalPresentationStyle?: "fullScreen";
   onTopClick?: (e: React.MouseEvent) => void;
 };
-const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
+const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
   (
     {
       title,
@@ -65,6 +66,8 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
       borderColor,
       borderSize,
       height,
+      heightTransitionDuration,
+      overflow,
       backgroundColor,
       onTopClick,
     },
@@ -266,6 +269,9 @@ const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
             [globalVars.appBar.borderColor]: borderColor,
             [globalVars.appBar.borderSize]: borderSize,
             [globalVars.appBar.height]: height,
+            [globalVars.appBar.heightTransitionDuration]:
+              heightTransitionDuration,
+            [globalVars.appBar.overflow]: overflow,
             [globalVars.appBar.backgroundColor]:
               backgroundColor || globalVars.backgroundColor,
             [appScreenCss.vars.appBar.center.mainWidth]: `${maxWidth}px`,

package/src/components/AppScreen.tsx

@@ -2,7 +2,7 @@
 
 import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import React, { createContext, useContext, useMemo, useRef } from "react";
+import { createContext, useContext, useMemo, useRef } from "react";
 
 import { useGlobalOptions } from "../basicUIPlugin";
 import {
@@ -31,7 +31,10 @@ export function useAppScreen() {
 export type AppScreenProps = Partial<
   Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">
 > & {
-  appBar?: Omit<PropOf<typeof AppBar>, "theme" | "ref" | "key">;
+  appBar?: Omit<
+    PropOf<typeof AppBar>,
+    "theme" | "modalPresentationStyle" | "ref" | "key"
+  >;
   preventSwipeBack?: boolean;
   modalPresentationStyle?: "fullScreen";
   children: React.ReactNode;
@@ -140,7 +143,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
             [css.vars.transitionDuration]:
               transitionState === "enter-active" ||
               transitionState === "exit-active"
-                ? `var(--stackflow-transition-duration)`
+                ? globalVars.transitionDuration
                 : "0ms",
           }),
         )}

package/src/components/BottomSheet.tsx

@@ -2,7 +2,7 @@
 
 import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import React, { useRef } from "react";
+import { useRef } from "react";
 
 import { useLazy, useNullableActivity, useStyleEffect } from "../hooks";
 import type { GlobalVars } from "../theme.css";
@@ -83,7 +83,7 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
           [css.vars.transitionDuration]:
             transitionState === "enter-active" ||
             transitionState === "exit-active"
-              ? `var(--stackflow-transition-duration)`
+              ? globalVars.transitionDuration
               : "0ms",
         }),
       )}

package/src/components/Modal.tsx

@@ -2,7 +2,7 @@
 
 import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import React, { useRef } from "react";
+import { useRef } from "react";
 
 import { useLazy, useNullableActivity, useStyleEffect } from "../hooks";
 import type { GlobalVars } from "../theme.css";
@@ -83,7 +83,7 @@ const Modal: React.FC<ModalProps> = ({
           [css.vars.transitionDuration]:
             transitionState === "enter-active" ||
             transitionState === "exit-active"
-              ? `var(--stackflow-transition-duration)`
+              ? globalVars.transitionDuration
               : "0ms",
         }),
       )}

package/src/hooks/useMaxWidth.ts

@@ -1,4 +1,3 @@
-import type React from "react";
 import { useEffect, useState } from "react";
 
 import { listenResize, noop } from "../utils";

package/src/hooks/useStyleEffect.ts

@@ -1,7 +1,7 @@
 import type { ActivityTransitionState } from "@stackflow/core";
-import type React from "react";
 import { useEffect } from "react";
 
+import { noop } from "../utils";
 import { useNullableActivity } from "./useNullableActivity";
 
 const connections: {
@@ -14,17 +14,17 @@ const connections: {
   >;
 } = {};
 
-export function useStyleEffect({
+export function useStyleEffect<T extends HTMLElement>({
   styleName,
   refs,
   effect,
   effectDeps,
 }: {
   styleName: string;
-  refs: Array<React.RefObject<any>>;
+  refs: Array<React.RefObject<T>>;
   effect?: (params: {
     activityTransitionState: ActivityTransitionState;
-    refs: Array<React.RefObject<HTMLElement>>;
+    refs: Array<React.RefObject<T>>;
   }) => (() => void) | void;
   effectDeps?: any[];
 }) {
@@ -32,7 +32,7 @@ export function useStyleEffect({
 
   useEffect(() => {
     if (!activity) {
-      return () => {};
+      return noop;
     }
     if (!connections[styleName]) {
       connections[styleName] = new Map();
@@ -50,14 +50,14 @@ export function useStyleEffect({
 
   useEffect(() => {
     if (!activity) {
-      return () => {};
+      return noop;
     }
     if (!effect) {
-      return () => {};
+      return noop;
     }
 
     const refs = (() => {
-      let arr: Array<React.RefObject<any>> = [];
+      let arr: Array<React.RefObject<T>> = [];
 
       for (let i = 1; i <= activity.zIndex; i += 1) {
         const connection = connections[styleName].get(activity.zIndex - i);

package/src/hooks/useStyleEffectHide.ts

@@ -1,7 +1,6 @@
 /* eslint-disable no-param-reassign */
 
-import type React from "react";
-
+import { noop } from "../utils";
 import { useStyleEffect } from "./useStyleEffect";
 
 export function useStyleEffectHide({
@@ -45,7 +44,7 @@ export function useStyleEffectHide({
             default: {
               cleanup();
 
-              return () => {};
+              return noop;
             }
           }
         }

package/src/hooks/useStyleEffectOffset.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-param-reassign */
 
-import { listenOnce, requestNextFrame } from "../utils";
+import { globalVars } from "../theme.css";
+import { listenOnce, noop, requestNextFrame } from "../utils";
 import { useStyleEffect } from "./useStyleEffect";
 
 export const OFFSET_PX_ANDROID = 32;
@@ -51,7 +52,7 @@ export function useStyleEffectOffset({
                   return;
                 }
 
-                ref.current.style.transition = `var(--stackflow-transition-duration)`;
+                ref.current.style.transition = globalVars.transitionDuration;
                 ref.current.style.transform = transform;
               });
 
@@ -62,7 +63,7 @@ export function useStyleEffectOffset({
                   };
                 case "enter-active":
                 default:
-                  return () => {};
+                  return noop;
               }
             }
             case "exit-active":
@@ -71,10 +72,10 @@ export function useStyleEffectOffset({
                 cleanup();
               });
 
-              return () => {};
+              return noop;
             }
             default: {
-              return () => {};
+              return noop;
             }
           }
         }

package/src/hooks/useStyleEffectSwipeBack.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-param-reassign */
 
-import { listenOnce } from "../utils";
+import { globalVars } from "../theme.css";
+import { listenOnce, noop } from "../utils";
 import { useStyleEffect } from "./useStyleEffect";
 import { OFFSET_PX_CUPERTINO } from "./useStyleEffectOffset";
 
@@ -27,11 +28,11 @@ export function useStyleEffectSwipeBack({
     effect: hasEffect
       ? ({ refs }) => {
           if (theme !== "cupertino") {
-            return () => {};
+            return noop;
           }
 
           if (!dimRef.current || !edgeRef.current || !paperRef.current) {
-            return () => {};
+            return noop;
           }
 
           const $dim = dimRef.current;
@@ -101,19 +102,18 @@ export function useStyleEffectSwipeBack({
             return new Promise((resolve) => {
               requestAnimationFrame(() => {
                 $dim.style.opacity = `${swiped ? 0 : 1}`;
-                $dim.style.transition = "var(--stackflow-transition-duration)";
+                $dim.style.transition = globalVars.transitionDuration;
 
                 $paper.style.overflowY = "hidden";
                 $paper.style.transform = `translateX(${swiped ? "100%" : "0"})`;
-                $paper.style.transition =
-                  "var(--stackflow-transition-duration)";
+                $paper.style.transition = globalVars.transitionDuration;
 
                 refs.forEach((ref) => {
                   if (!ref.current) {
                     return;
                   }
 
-                  ref.current.style.transition = `var(--stackflow-transition-duration)`;
+                  ref.current.style.transition = globalVars.transitionDuration;
                   ref.current.style.transform = `translate3d(${
                     swiped ? "0" : `-${OFFSET_PX_CUPERTINO / 16}rem`
                   }, 0, 0)`;

package/src/theme.css.ts

@@ -9,6 +9,7 @@ export const globalVars = createGlobalThemeContract(
   {
     backgroundColor: "background-color",
     dimBackgroundColor: "dim-background-color",
+    transitionDuration: "transition-duration",
     appBar: {
       borderColor: "app-bar-border-color",
       borderSize: "app-bar-border-size",
@@ -18,6 +19,7 @@ export const globalVars = createGlobalThemeContract(
       iconColor: "app-bar-icon-color",
       textColor: "app-bar-text-color",
       backgroundColor: "app-bar-background-color",
+      overflow: "app-bar-overflow",
     },
     bottomSheet: {
       borderRadius: "bottom-sheet-border-radius",
@@ -35,15 +37,17 @@ export type GlobalVars = InferVars<typeof globalVars>;
 const defaultVars = {
   backgroundColor: "#fff",
   dimBackgroundColor: "rgba(0, 0, 0, 0.15)",
+  transitionDuration: "0ms",
   appBar: {
     borderColor: "rgba(0, 0, 0, 0.07)",
     borderSize: "1px",
     height: "3.5rem",
-    heightTransitionDuration: "275ms",
+    heightTransitionDuration: "0ms",
     minHeight: "3.5rem",
     iconColor: "#212124",
     textColor: "#212124",
     backgroundColor: "#fff",
+    overflow: "hidden",
   },
   bottomSheet: {
     borderRadius: "1rem",

package/src/utils/index.ts

@@ -1,5 +1,7 @@
 export * from "./compact";
 export * from "./compactMap";
+export * from "./isBrowser";
+export * from "./isServer";
 export * from "./last";
 export * from "./listenOnce";
 export * from "./listenResize";

package/src/utils/isBrowser.ts

@@ -0,0 +1,9 @@
+import { isServer } from "./isServer";
+
+/**
+ * @description
+ * 현재 JS 런타임이 브라우저 환경인지 확인해요.
+ */
+export function isBrowser() {
+  return !isServer();
+}

package/src/utils/isServer.ts

@@ -0,0 +1,7 @@
+/**
+ * @description
+ * 현재 JS 런타임이 서버 환경인지 확인해요.
+ */
+export function isServer() {
+  return typeof window === "undefined";
+}