@stackflow/plugin-basic-ui 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackflow/plugin-basic-ui",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/daangn/stackflow.git",
@@ -32,33 +32,20 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.7.2",
-    "@vanilla-extract/dynamic": "^2.0.2",
-    "@vanilla-extract/private": "^1.0.3",
-    "@vanilla-extract/recipes": "^0.2.5",
-    "ts-pattern": "^4.0.5"
+    "@vanilla-extract/css": "^1.15.3",
+    "@vanilla-extract/dynamic": "^2.1.1",
+    "@vanilla-extract/private": "^1.0.5",
+    "@vanilla-extract/recipes": "^0.5.3"
   },
   "devDependencies": {
-    "@stackflow/core": "^1.0.10",
-    "@stackflow/esbuild-config": "^1.0.1",
-    "@stackflow/eslint-config": "^1.0.2",
-    "@stackflow/react": "^1.1.8",
-    "@types/react": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.32.0",
-    "@typescript-eslint/parser": "^5.20.0",
-    "esbuild": "^0.14.51",
-    "eslint": "^8.13.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-json-format": "^2.0.1",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "react": "^18.1.0",
+    "@stackflow/core": "^1.0.12",
+    "@stackflow/esbuild-config": "^1.0.2",
+    "@stackflow/react": "^1.1.10",
+    "@types/react": "^18.3.3",
+    "esbuild": "^0.23.0",
+    "react": "^18.3.1",
     "rimraf": "^3.0.2",
-    "typescript": "^4.7.4"
+    "typescript": "^5.5.3"
   },
   "peerDependencies": {
     "@stackflow/core": "^1",

package/src/basicUIPlugin.css.ts

@@ -3,44 +3,44 @@ import {
   createGlobalThemeContract,
   createTheme,
 } from "@vanilla-extract/css";
-import type { MapLeafNodes } from "@vanilla-extract/private";
 import { recipe } from "@vanilla-extract/recipes";
 
-export const globalVars = createGlobalThemeContract(
-  {
-    backgroundColor: "background-color",
-    dimBackgroundColor: "dim-background-color",
-    transitionDuration: "transition-duration",
-    computedTransitionDuration: "computed-transition-duration",
-    appBar: {
-      borderColor: "app-bar-border-color",
-      borderColorTransitionDuration: "app-bar-border-color-transition-duration",
-      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",
-      iconColorTransitionDuration: "app-bar-icon-color-transition-duration",
-      textColor: "app-bar-text-color",
-      textColorTransitionDuration: "app-bar-text-color-transition-duration",
-      backgroundColor: "app-bar-background-color",
-      backgroundColorTransitionDuration:
-        "app-bar-background-color-transition-duration",
-      overflow: "app-bar-overflow",
-      minSafeAreaInsetTop: "app-bar-min-safe-area-inset-top",
-    },
-    bottomSheet: {
-      borderRadius: "bottom-sheet-border-radius",
-    },
-    modal: {
-      borderRadius: "bottom-sheet-border-radius",
-    },
+const GLOBAL_VARS = {
+  backgroundColor: "background-color",
+  dimBackgroundColor: "dim-background-color",
+  transitionDuration: "transition-duration",
+  computedTransitionDuration: "computed-transition-duration",
+  appBar: {
+    borderColor: "app-bar-border-color",
+    borderColorTransitionDuration: "app-bar-border-color-transition-duration",
+    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",
+    iconColorTransitionDuration: "app-bar-icon-color-transition-duration",
+    textColor: "app-bar-text-color",
+    textColorTransitionDuration: "app-bar-text-color-transition-duration",
+    backgroundColor: "app-bar-background-color",
+    backgroundColorTransitionDuration:
+      "app-bar-background-color-transition-duration",
+    overflow: "app-bar-overflow",
+    minSafeAreaInsetTop: "app-bar-min-safe-area-inset-top",
+  },
+  bottomSheet: {
+    borderRadius: "bottom-sheet-border-radius",
+  },
+  modal: {
+    borderRadius: "bottom-sheet-border-radius",
   },
+};
+
+export const globalVars = createGlobalThemeContract(
+  GLOBAL_VARS,
   (value) => `stackflow-plugin-basic-ui-${value}`,
 );
 
-type InferVars<T> = T extends MapLeafNodes<infer U, any> ? U : never;
-export type GlobalVars = InferVars<typeof globalVars>;
+export type GlobalVars = typeof GLOBAL_VARS;
 
 const androidValues: GlobalVars = {
   backgroundColor: "#fff",

package/src/basicUIPlugin.tsx

@@ -69,8 +69,8 @@ export const basicUIPlugin: (
             compactMap({
               [css.globalVars.backgroundColor]: _options.backgroundColor,
               [css.globalVars.dimBackgroundColor]: _options.dimBackgroundColor,
-              [css.globalVars
-                .transitionDuration]: `${stack.transitionDuration}ms`,
+              [css.globalVars.transitionDuration]:
+                `${stack.transitionDuration}ms`,
               [css.globalVars.computedTransitionDuration]:
                 stack.globalTransitionState === "loading"
                   ? `${stack.transitionDuration}ms`

package/src/components/AppBar.tsx

@@ -120,6 +120,7 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
         return (
           <button
             type="button"
+            aria-label="Go Back"
             className={css.backButton}
             onClick={onBackClick}
           >
@@ -147,8 +148,8 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
             backButton && "ariaLabel" in backButton
               ? backButton.ariaLabel
               : globalBackButton && "ariaLabel" in globalBackButton
-              ? globalBackButton.ariaLabel
-              : undefined
+                ? globalBackButton.ariaLabel
+                : undefined
           }
           onClick={onBackClick}
         >
@@ -230,8 +231,8 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
             closeButton && "ariaLabel" in closeButton
               ? closeButton.ariaLabel
               : globalCloseButton && "ariaLabel" in globalCloseButton
-              ? globalCloseButton.ariaLabel
-              : undefined
+                ? globalCloseButton.ariaLabel
+                : undefined
           }
           onClick={onCloseClick}
         >
@@ -316,7 +317,6 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
               <button
                 className={css.centerMainEdge}
                 type="button"
-                aria-hidden="true"
                 onClick={onTopClick}
               />
             </div>

package/src/components/AppScreen.css.ts

@@ -121,14 +121,15 @@ export const paper = recipe({
       true: [
         f.borderBox,
         {
-          transition: `transform ${vars.transitionDuration}, opacity ${vars.transitionDuration}, padding-top ${globalVars.appBar.heightTransitionDuration}`,
-          paddingTop: globalVars.appBar.height,
+          transition: `transform ${vars.transitionDuration}, opacity ${vars.transitionDuration}, margin-top ${globalVars.appBar.heightTransitionDuration}`,
+          marginTop: globalVars.appBar.height,
+          height: `calc(100% - ${globalVars.appBar.height})`,
           "@supports": {
-            "(padding-top: constant(safe-area-inset-top))": {
-              paddingTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, constant(safe-area-inset-top)))`,
+            "(margin-top: constant(safe-area-inset-top))": {
+              marginTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, constant(safe-area-inset-top)))`,
             },
-            "(padding-top: env(safe-area-inset-top))": {
-              paddingTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, env(safe-area-inset-top)))`,
+            "(margin-top: env(safe-area-inset-top))": {
+              marginTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, env(safe-area-inset-top)))`,
             },
           },
         },

package/src/components/AppScreen.tsx

@@ -12,6 +12,7 @@ import {
   useStyleEffectHide,
   useStyleEffectOffset,
   useStyleEffectSwipeBack,
+  useZIndexBase,
 } from "../hooks";
 import type { PropOf } from "../utils";
 import { compactMap } from "../utils";
@@ -74,7 +75,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
 
   const hasAppBar = !!appBar;
 
-  const zIndexBase = (activity?.zIndex ?? 0) * 5;
+  const zIndexBase = useZIndexBase();
 
   let zIndexDim: number;
   let zIndexPaper: number;
@@ -92,7 +93,6 @@ const AppScreen: React.FC<AppScreenProps> = ({
       zIndexAppBar = zIndexBase + 7;
       break;
     }
-    case "android":
     default: {
       zIndexDim = zIndexBase;
       zIndexPaper = zIndexBase + (activityEnterStyle === "slideInLeft" ? 1 : 3);

package/src/components/BottomSheet.tsx

@@ -1,12 +1,15 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-
 import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useRef } from "react";
 
 import type { GlobalVars } from "../basicUIPlugin.css";
 import { globalVars } from "../basicUIPlugin.css";
-import { useLazy, useNullableActivity, useStyleEffect } from "../hooks";
+import {
+  useLazy,
+  useNullableActivity,
+  useStyleEffect,
+  useZIndexBase,
+} from "../hooks";
 import { compactMap } from "../utils";
 import * as css from "./BottomSheet.css";
 
@@ -65,8 +68,8 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
     e.stopPropagation();
   };
 
-  const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;
-  const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;
+  const zIndexBase = useZIndexBase() + 3;
+  const zIndexPaper = useZIndexBase() + 4;
   const transitionState = activity?.transitionState ?? "enter-done";
 
   return (

package/src/components/Modal.tsx

@@ -1,12 +1,15 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-
 import { useActions } from "@stackflow/react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useRef } from "react";
 
 import type { GlobalVars } from "../basicUIPlugin.css";
 import { globalVars } from "../basicUIPlugin.css";
-import { useLazy, useNullableActivity, useStyleEffect } from "../hooks";
+import {
+  useLazy,
+  useNullableActivity,
+  useStyleEffect,
+  useZIndexBase,
+} from "../hooks";
 import { compactMap } from "../utils";
 import * as css from "./Modal.css";
 
@@ -63,8 +66,8 @@ const Modal: React.FC<ModalProps> = ({
     e.stopPropagation();
   };
 
-  const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;
-  const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;
+  const zIndexBase = useZIndexBase() + 3;
+  const zIndexPaper = useZIndexBase() + 4;
   const transitionState = activity?.transitionState ?? "enter-done";
 
   return (

package/src/hooks/index.ts

@@ -6,3 +6,4 @@ export * from "./useStyleEffect";
 export * from "./useStyleEffectHide";
 export * from "./useStyleEffectOffset";
 export * from "./useStyleEffectSwipeBack";
+export * from "./useZIndexBase";

package/src/hooks/useStyleEffect.ts

@@ -25,7 +25,7 @@ export function useStyleEffect<T extends HTMLElement>({
   effect?: (params: {
     activityTransitionState: ActivityTransitionState;
     refs: Array<React.RefObject<T>>;
-  }) => (() => void) | void;
+  }) => (() => void) | undefined;
   effectDeps?: any[];
 }) {
   const activity = useNullableActivity();

package/src/hooks/useStyleEffectHide.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-param-reassign */
-
 import { noop } from "../utils";
 import { useStyleEffect } from "./useStyleEffect";
 

package/src/hooks/useStyleEffectOffset.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-param-reassign */
-
 import { globalVars } from "../basicUIPlugin.css";
 import { listenOnce, noop, requestNextFrame } from "../utils";
 import { useStyleEffect } from "./useStyleEffect";
@@ -32,11 +30,10 @@ export function useStyleEffectOffset({
               opacity = "1";
               break;
             }
-            case "android":
             default: {
               transform =
                 activityEnterStyle === "slideInLeft"
-                  ? `translate3d(-50%, 0, 0)`
+                  ? "translate3d(-50%, 0, 0)"
                   : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
               opacity = activityEnterStyle === "slideInLeft" ? "0" : "1";
               break;
@@ -81,7 +78,6 @@ export function useStyleEffectOffset({
                   return () => {
                     cleanup();
                   };
-                case "enter-active":
                 default:
                   return noop;
               }

package/src/hooks/useStyleEffectSwipeBack.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-param-reassign */
-
 import { globalVars } from "../basicUIPlugin.css";
 import * as appScreenCss from "../components/AppScreen.css";
 import { listenOnce, noop } from "../utils";
@@ -175,7 +173,7 @@ export function useStyleEffectSwipeBack({
             const { activeElement } = document as any;
 
             activeElement?.blur?.();
-            // eslint-disable-next-line no-multi-assign
+
             x0 = x = e.touches[0].clientX;
             t0 = Date.now();
 

package/src/hooks/useZIndexBase.ts

@@ -0,0 +1,6 @@
+import { useNullableActivity } from "./useNullableActivity";
+
+export function useZIndexBase() {
+  const activity = useNullableActivity();
+  return (activity?.zIndex ?? 0) * 5;
+}

package/src/index.ts

@@ -15,3 +15,4 @@ export {
 export { vars as bottomSheetVars } from "./components/BottomSheet.css";
 export { default as Modal, ModalProps } from "./components/Modal";
 export { vars as modalVars } from "./components/Modal.css";
+export { useStyleEffect, useZIndexBase } from "./hooks";

package/src/utils/last.ts

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