feat: introduce typed access for component-scoped css variables

Author: malangcat

examples/stackflow-spa/src/activities/ActivityHome.tsx

@@ -1,6 +1,16 @@
-import { VStack, useSnackbarAdapter } from "@seed-design/react";
+import { IconBellFill, IconPlusFill } from "@karrotmarket/react-monochrome-icon";
+import {
+  ContextualFloatingButton,
+  Fab,
+  Float,
+  PrefixIcon,
+  VStack,
+  useSnackbarAdapter,
+} from "@seed-design/react";
+import { AppScreenLayer } from "@seed-design/stackflow";
 import { receive } from "@stackflow/compat-await-push";
 import type { ActivityComponentType } from "@stackflow/react";
+import { useState } from "react";
 import { List, ListItem, ListItemGroup } from "../components/List";
 import { AppBar, AppBarMain } from "../seed-design/stackflow/AppBar";
 import { AppScreen, AppScreenContent } from "../seed-design/stackflow/AppScreen";
@@ -26,6 +36,8 @@ const ActivityHome: ActivityComponentType = () => {
   const { dialogProps, setOpen } = useStepDialog();
   const snackbarAdapter = useSnackbarAdapter();
 
+  const [isFabExtended, setIsFabExtended] = useState(true);
+
   return (
     <AppScreen>
       <AppBar>
@@ -160,6 +172,23 @@ const ActivityHome: ActivityComponentType = () => {
           />
         </List>
       </AppScreenContent>
+      <Float placement="bottom-center" offsetY="16px" zIndex={AppScreenLayer.vars.zIndex}>
+        <ContextualFloatingButton>
+          <PrefixIcon svg={<IconBellFill />} />
+          알림 설정
+        </ContextualFloatingButton>
+      </Float>
+      <Float
+        placement="bottom-end"
+        offsetX="16px"
+        offsetY="16px"
+        zIndex={AppScreenLayer.vars.zIndex}
+      >
+        <Fab.Root extended={isFabExtended} onClick={() => setIsFabExtended(!isFabExtended)}>
+          <Fab.Icon svg={<IconPlusFill />} />
+          <Fab.Label>글쓰기</Fab.Label>
+        </Fab.Root>
+      </Float>
     </AppScreen>
   );
 };

packages/stackflow/src/components/AppBar/AppBar.tsx

@@ -21,30 +21,37 @@ export const AppBarPropsProvider = PropsProvider;
 
 export interface AppBarProps extends AppBarVariantProps, AppBarPrimitive.RootProps {}
 
-export const AppBarRoot = forwardRef<HTMLDivElement, AppBarProps>((props, ref) => {
-  const contextProps = useProps();
-  const [variantProps, otherProps] = appBar.splitVariantProps({ ...contextProps, ...props });
-
-  const classNames = appBar(variantProps);
-
-  return (
-    <ClassNamesProvider value={classNames}>
-      <MainPropsProvider
-        value={{
-          theme: variantProps.theme,
-          transitionStyle: variantProps.transitionStyle,
-          tone: variantProps.tone,
-        }}
-      >
-        <AppBarPrimitive.Root
-          ref={ref}
-          {...mergeProps({ className: classNames.root }, otherProps)}
-        />
-      </MainPropsProvider>
-    </ClassNamesProvider>
-  );
-});
-AppBarRoot.displayName = "AppBarRoot";
+export const AppBarRoot = Object.assign(
+  forwardRef<HTMLDivElement, AppBarProps>((props, ref) => {
+    const contextProps = useProps();
+    const [variantProps, otherProps] = appBar.splitVariantProps({ ...contextProps, ...props });
+
+    const classNames = appBar(variantProps);
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <MainPropsProvider
+          value={{
+            theme: variantProps.theme,
+            transitionStyle: variantProps.transitionStyle,
+            tone: variantProps.tone,
+          }}
+        >
+          <AppBarPrimitive.Root
+            ref={ref}
+            {...mergeProps({ className: classNames.root }, otherProps)}
+          />
+        </MainPropsProvider>
+      </ClassNamesProvider>
+    );
+  }),
+  {
+    displayName: "AppBarRoot",
+    vars: {
+      zIndex: "var(--z-index-app-bar)",
+    },
+  },
+);
 
 export interface AppBarLeftProps extends AppBarPrimitive.LeftProps {}
 

packages/stackflow/src/components/AppScreen/AppScreen.tsx

@@ -45,21 +45,33 @@ AppScreenRoot.displayName = "AppScreenRoot";
 
 export interface AppScreenDimProps extends AppScreenPrimitive.DimProps {}
 
-export const AppScreenDim = withContext<HTMLDivElement, AppScreenDimProps>(
-  AppScreenPrimitive.Dim,
-  "dim",
+export const AppScreenDim = Object.assign(
+  withContext<HTMLDivElement, AppScreenDimProps>(AppScreenPrimitive.Dim, "dim"),
+  {
+    vars: {
+      zIndex: "var(--z-index-dim)",
+    },
+  },
 );
 
 export interface AppScreenEdgeProps extends AppScreenPrimitive.EdgeProps {}
 
-export const AppScreenEdge = withContext<HTMLDivElement, AppScreenEdgeProps>(
-  AppScreenPrimitive.Edge,
-  "edge",
+export const AppScreenEdge = Object.assign(
+  withContext<HTMLDivElement, AppScreenEdgeProps>(AppScreenPrimitive.Edge, "edge"),
+  {
+    vars: {
+      zIndex: "var(--z-index-edge)",
+    },
+  },
 );
 
 export interface AppScreenLayerProps extends AppScreenPrimitive.LayerProps {}
 
-export const AppScreenLayer = withContext<HTMLDivElement, AppScreenLayerProps>(
-  AppScreenPrimitive.Layer,
-  "layer",
+export const AppScreenLayer = Object.assign(
+  withContext<HTMLDivElement, AppScreenLayerProps>(AppScreenPrimitive.Layer, "layer"),
+  {
+    vars: {
+      zIndex: "var(--z-index-layer)",
+    },
+  },
 );