feat(plugin-basic-ui): Allow css customization for components (#615)

Author: ENvironmentSet

.changeset/tender-ghosts-draw.md

@@ -0,0 +1,5 @@
+---
+"@stackflow/plugin-basic-ui": minor
+---
+
+Allow components style to be customized directly

.pnp.cjs

@@ -36,7 +36,8 @@
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/dynamic": "^2.1.1",
     "@vanilla-extract/private": "^1.0.5",
-    "@vanilla-extract/recipes": "^0.5.3"
+    "@vanilla-extract/recipes": "^0.5.3",
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@stackflow/core": "^1.2.0",

extensions/plugin-basic-ui/package.json

@@ -6,6 +6,7 @@ import {
   useNullableActivity,
 } from "@stackflow/react-ui-core";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
+import clsx from "clsx";
 import { forwardRef, useRef } from "react";
 import { IconBack, IconClose } from "../assets";
 import { useGlobalOptions } from "../basicUIPlugin";
@@ -61,6 +62,7 @@ type AppBarProps = Partial<
   activityEnterStyle?: "slideInLeft";
   onTopClick?: (e: React.MouseEvent) => void;
   enterStyle?: "cover";
+  className?: string;
 };
 const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
   (
@@ -90,6 +92,7 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
       backgroundImageTransitionDuration,
       onTopClick,
       enterStyle,
+      className,
     },
     ref,
   ) => {
@@ -280,12 +283,15 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
     return (
       <div
         ref={ref}
-        className={css.appBar({
-          border,
-          modalPresentationStyle,
-          activityEnterStyle,
-          enterStyle,
-        })}
+        className={clsx(
+          css.appBar({
+            border,
+            modalPresentationStyle,
+            activityEnterStyle,
+            enterStyle,
+          }),
+          className,
+        )}
         style={assignInlineVars(
           compactMap({
             [globalVars.appBar.iconColor]: iconColor,

extensions/plugin-basic-ui/src/components/AppBar.tsx

@@ -11,6 +11,7 @@ import {
   useZIndexBase,
 } from "@stackflow/react-ui-core";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
+import clsx from "clsx";
 import { createContext, useContext, useMemo, useRef } from "react";
 import { useGlobalOptions } from "../basicUIPlugin";
 import type { GlobalVars } from "../basicUIPlugin.css";
@@ -48,6 +49,7 @@ export type AppScreenProps = Partial<
   preventSwipeBack?: boolean;
   CUPERTINO_ONLY_modalPresentationStyle?: "fullScreen";
   ANDROID_ONLY_activityEnterStyle?: "slideInLeft";
+  className?: string;
   children: React.ReactNode;
 };
 const AppScreen: React.FC<AppScreenProps> = ({
@@ -58,6 +60,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
   preventSwipeBack,
   CUPERTINO_ONLY_modalPresentationStyle,
   ANDROID_ONLY_activityEnterStyle,
+  className,
   children,
 }) => {
   const globalOptions = useGlobalOptions();
@@ -231,12 +234,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
     >
       <div
         ref={appScreenRef}
-        className={css.appScreen({
-          transitionState:
-            transitionState === "enter-done" || transitionState === "exit-done"
-              ? transitionState
-              : lazyTransitionState,
-        })}
+        className={clsx(css.appScreen({ transitionState }), className)}
         style={assignInlineVars(
           compactMap({
             [globalVars.backgroundColor]: backgroundColor,

extensions/plugin-basic-ui/src/components/AppScreen.tsx

@@ -9,6 +9,7 @@ import {
   useStyleEffect,
   useZIndexBase,
 } from "@stackflow/react-ui-core";
+import clsx from "clsx";
 import type { GlobalVars } from "../basicUIPlugin.css";
 import { globalVars } from "../basicUIPlugin.css";
 import { compactMap } from "../utils";
@@ -21,6 +22,7 @@ export type BottomSheetProps = Partial<
     paperRef?: React.Ref<HTMLDivElement>;
     onOutsideClick?: React.MouseEventHandler;
     children: React.ReactNode;
+    className?: string;
   };
 const BottomSheet: React.FC<BottomSheetProps> = ({
   borderRadius = "1rem",
@@ -30,6 +32,7 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
   paperRef,
   onOutsideClick,
   children,
+  className,
 }) => {
   const activity = useNullableActivity();
   const { pop } = useActions();
@@ -80,9 +83,12 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
 
   return (
     <div
-      className={css.container({
-        transitionState: useLazy(transitionState),
-      })}
+      className={clsx(
+        css.container({
+          transitionState: useLazy(transitionState),
+        }),
+        className,
+      )}
       ref={containerRef}
       style={assignInlineVars(
         compactMap({

extensions/plugin-basic-ui/src/components/BottomSheet.tsx

@@ -9,6 +9,7 @@ import {
   useStyleEffect,
   useZIndexBase,
 } from "@stackflow/react-ui-core";
+import clsx from "clsx";
 import type { GlobalVars } from "../basicUIPlugin.css";
 import { globalVars } from "../basicUIPlugin.css";
 import { compactMap } from "../utils";
@@ -20,6 +21,7 @@ export type ModalProps = Partial<
   Partial<GlobalVars["modal"]> & {
     onOutsideClick?: React.MouseEventHandler;
     children: React.ReactNode;
+    className?: string;
   };
 const Modal: React.FC<ModalProps> = ({
   backgroundColor,
@@ -29,6 +31,7 @@ const Modal: React.FC<ModalProps> = ({
   maxWidth,
   onOutsideClick,
   children,
+  className,
 }) => {
   const activity = useNullableActivity();
   const { pop } = useActions();
@@ -79,9 +82,12 @@ const Modal: React.FC<ModalProps> = ({
 
   return (
     <div
-      className={css.container({
-        transitionState: useLazy(transitionState),
-      })}
+      className={clsx(
+        css.container({
+          transitionState: useLazy(transitionState),
+        }),
+        className,
+      )}
       ref={containerRef}
       style={assignInlineVars(
         compactMap({

extensions/plugin-basic-ui/src/components/Modal.tsx

@@ -5298,6 +5298,7 @@ __metadata:
     "@vanilla-extract/dynamic": "npm:^2.1.1"
     "@vanilla-extract/private": "npm:^1.0.5"
     "@vanilla-extract/recipes": "npm:^0.5.3"
+    clsx: "npm:^2.1.1"
     esbuild: "npm:^0.23.0"
     react: "npm:^18.3.1"
     rimraf: "npm:^3.0.2"