feat: rewrite appbar styling, support PTR

daangn · Jan 27, 2025 · 122dd1a · 122dd1a
1 parent 8def06e
commit 122dd1a
Show file tree

Hide file tree

Showing 58 changed files with 1,247 additions and 902 deletions.
diff --git a/biome.json b/biome.json
@@ -41,7 +41,8 @@
       },
       "complexity": {
         "useLiteralKeys": "warn",
-        "noBannedTypes": "off"
+        "noBannedTypes": "off",
+        "noForEach": "off"
       },
       "correctness": {
         "useExhaustiveDependencies": "warn",

diff --git a/examples/stackflow-spa/src/activities/ActivityActionButton.tsx b/examples/stackflow-spa/src/activities/ActivityActionButton.tsx
@@ -1,6 +1,6 @@
 import type { ActivityComponentType } from "@stackflow/react";
-import { AppBar, BackButton, Left, Title } from "../design-system/stackflow/AppBar";
-import { AppScreen } from "../design-system/stackflow/AppScreen";
+import { AppBar, BackButton, AppBarLeft, AppBarTitle } from "../design-system/stackflow/AppBar";
+import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen";
 
 import { actionButton, actionButtonVariantMap } from "@seed-design/recipe/actionButton";
 
@@ -16,26 +16,25 @@ const initialVariants = {
 
 const ActivityActionButton: ActivityComponentType = () => {
   return (
-    <AppScreen
-      appBar={
-        <AppBar>
-          <Left>
-            <BackButton />
-          </Left>
-          <Title>Action Button</Title>
-        </AppBar>
-      }
-    >
-      <ComponentAnalyzer
-        variantsMap={actionButtonVariantMap}
-        initialVariants={initialVariants}
-        recipeFn={actionButton}
-        render={(variants) => (
-          <ActionButton key={JSON.stringify(variants)} {...variants}>
-            {variants.layout === "withText" ? "야옹" : <IconPlusFill />}
-          </ActionButton>
-        )}
-      />
+    <AppScreen>
+      <AppBar>
+        <AppBarLeft>
+          <BackButton />
+        </AppBarLeft>
+        <AppBarTitle>Action Button</AppBarTitle>
+      </AppBar>
+      <AppScreenContent>
+        <ComponentAnalyzer
+          variantsMap={actionButtonVariantMap}
+          initialVariants={initialVariants}
+          recipeFn={actionButton}
+          render={(variants) => (
+            <ActionButton key={JSON.stringify(variants)} {...variants}>
+              {variants.layout === "withText" ? "야옹" : <IconPlusFill />}
+            </ActionButton>
+          )}
+        />
+      </AppScreenContent>
     </AppScreen>
   );
 };

diff --git a/examples/stackflow-spa/src/activities/ActivityActionChip.tsx b/examples/stackflow-spa/src/activities/ActivityActionChip.tsx
@@ -1,6 +1,6 @@
 import type { ActivityComponentType } from "@stackflow/react";
-import { AppBar, BackButton, Left, Title } from "../design-system/stackflow/AppBar";
-import { AppScreen } from "../design-system/stackflow/AppScreen";
+import { AppBar, BackButton, AppBarLeft, AppBarTitle } from "../design-system/stackflow/AppBar";
+import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen";
 
 import { actionChip, actionChipVariantMap } from "@seed-design/recipe/actionChip";
 
@@ -15,26 +15,25 @@ const initialVariants = {
 
 const ActivityActionChip: ActivityComponentType = () => {
   return (
-    <AppScreen
-      appBar={
-        <AppBar>
-          <Left>
-            <BackButton />
-          </Left>
-          <Title>Action Chip</Title>
-        </AppBar>
-      }
-    >
-      <ComponentAnalyzer
-        variantsMap={actionChipVariantMap}
-        initialVariants={initialVariants}
-        recipeFn={actionChip}
-        render={(variants) => (
-          <ActionChip count={10} key={JSON.stringify(variants)} {...variants}>
-            {variants.layout === "withText" ? "야옹" : <IconPlusFill />}
-          </ActionChip>
-        )}
-      />
+    <AppScreen>
+      <AppBar>
+        <AppBarLeft>
+          <BackButton />
+        </AppBarLeft>
+        <AppBarTitle>Action Chip</AppBarTitle>
+      </AppBar>
+      <AppScreenContent>
+        <ComponentAnalyzer
+          variantsMap={actionChipVariantMap}
+          initialVariants={initialVariants}
+          recipeFn={actionChip}
+          render={(variants) => (
+            <ActionChip count={10} key={JSON.stringify(variants)} {...variants}>
+              {variants.layout === "withText" ? "야옹" : <IconPlusFill />}
+            </ActionChip>
+          )}
+        />
+      </AppScreenContent>
     </AppScreen>
   );
 };

diff --git a/examples/stackflow-spa/src/activities/ActivityControlChip.tsx b/examples/stackflow-spa/src/activities/ActivityControlChip.tsx
@@ -1,6 +1,6 @@
 import type { ActivityComponentType } from "@stackflow/react";
-import { AppBar, BackButton, Left, Title } from "../design-system/stackflow/AppBar";
-import { AppScreen } from "../design-system/stackflow/AppScreen";
+import { AppBar, BackButton, AppBarLeft, AppBarTitle } from "../design-system/stackflow/AppBar";
+import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen";
 
 import { controlChip, controlChipVariantMap } from "@seed-design/recipe/controlChip";
 
@@ -15,26 +15,25 @@ const initialVariants = {
 
 const ActivityControlChip: ActivityComponentType = () => {
   return (
-    <AppScreen
-      appBar={
-        <AppBar>
-          <Left>
-            <BackButton />
-          </Left>
-          <Title>Control Chip</Title>
-        </AppBar>
-      }
-    >
-      <ComponentAnalyzer
-        variantsMap={controlChipVariantMap}
-        initialVariants={initialVariants}
-        recipeFn={controlChip}
-        render={(variants) => (
-          <ControlChip.Toggle count={10} key={JSON.stringify(variants)} {...variants}>
-            {variants.layout === "withText" ? "야옹" : <IconPlusFill />}
-          </ControlChip.Toggle>
-        )}
-      />
+    <AppScreen>
+      <AppBar>
+        <AppBarLeft>
+          <BackButton />
+        </AppBarLeft>
+        <AppBarTitle>Control Chip</AppBarTitle>
+      </AppBar>
+      <AppScreenContent>
+        <ComponentAnalyzer
+          variantsMap={controlChipVariantMap}
+          initialVariants={initialVariants}
+          recipeFn={controlChip}
+          render={(variants) => (
+            <ControlChip.Toggle count={10} key={JSON.stringify(variants)} {...variants}>
+              {variants.layout === "withText" ? "야옹" : <IconPlusFill />}
+            </ControlChip.Toggle>
+          )}
+        />
+      </AppScreenContent>
     </AppScreen>
   );
 };

diff --git a/examples/stackflow-spa/src/activities/ActivityErrorState.tsx b/examples/stackflow-spa/src/activities/ActivityErrorState.tsx
@@ -1,27 +1,36 @@
 import type { ActivityComponentType } from "@stackflow/react";
 
-import { AppScreen } from "@stackflow/plugin-basic-ui";
 import React from "react";
+import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen";
 import { ErrorState, type ErrorStateProps } from "../design-system/ui/error-state";
+import { AppBar, AppBarLeft, AppBarTitle, BackButton } from "../design-system/stackflow/AppBar";
 
 const ActivityErrorState: ActivityComponentType = () => {
   const [variant, setVariant] = React.useState<ErrorStateProps["variant"]>("default");
-  const [hideTitle, setHideTitle] = React.useState(false);
+  const [hideAppBarTitle, setHideAppBarTitle] = React.useState(false);
   return (
-    <AppScreen appBar={{}}>
-      <ErrorState
-        variant={variant}
-        title={hideTitle ? undefined : "에러 타이틀"}
-        description="에러가 발생했습니다."
-        primaryActionProps={{
-          children: hideTitle ? "타이틀 보이기" : "타이틀 숨기기",
-          onClick: () => setHideTitle((prev) => !prev),
-        }}
-        secondaryActionProps={{
-          children: variant === "basement" ? "default로 전환" : "basement로 전환",
-          onClick: () => setVariant((prev) => (prev === "default" ? "basement" : "default")),
-        }}
-      />
+    <AppScreen>
+      <AppBar>
+        <AppBarLeft>
+          <BackButton />
+        </AppBarLeft>
+        <AppBarTitle>Error State</AppBarTitle>
+      </AppBar>
+      <AppScreenContent>
+        <ErrorState
+          variant={variant}
+          title={hideAppBarTitle ? undefined : "에러 타이틀"}
+          description="에러가 발생했습니다."
+          primaryActionProps={{
+            children: hideAppBarTitle ? "타이틀 보이기" : "타이틀 숨기기",
+            onClick: () => setHideAppBarTitle((prev) => !prev),
+          }}
+          secondaryActionProps={{
+            children: variant === "basement" ? "default로 전환" : "basement로 전환",
+            onClick: () => setVariant((prev) => (prev === "default" ? "basement" : "default")),
+          }}
+        />
+      </AppScreenContent>
     </AppScreen>
   );
 };

diff --git a/examples/stackflow-spa/src/activities/ActivityHelpBubble.tsx b/examples/stackflow-spa/src/activities/ActivityHelpBubble.tsx
@@ -1,23 +1,20 @@
 import type { ActivityComponentType } from "@stackflow/react";
 
-import { AppBar, BackButton, Left, Title } from "../design-system/stackflow/AppBar";
-import { AppScreen } from "../design-system/stackflow/AppScreen";
+import { AppBar, AppBarLeft, AppBarTitle, BackButton } from "../design-system/stackflow/AppBar";
+import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen";
 import { ActionButton } from "../design-system/ui/action-button";
 import { HelpBubbleTrigger } from "../design-system/ui/help-bubble";
 
 const ActivityHelpBubble: ActivityComponentType = () => {
   return (
-    <AppScreen
-      appBar={
-        <AppBar>
-          <Left>
-            <BackButton />
-          </Left>
-          <Title>Help Bubble</Title>
-        </AppBar>
-      }
-    >
-      <div style={{ overflowY: "auto", height: "200vh" }}>
+    <AppScreen>
+      <AppBar>
+        <AppBarLeft>
+          <BackButton />
+        </AppBarLeft>
+        <AppBarTitle>Help Bubble</AppBarTitle>
+      </AppBar>
+      <AppScreenContent style={{ overflowY: "auto", height: "200vh" }}>
         <div style={{ display: "flex", paddingTop: "20vh", justifyContent: "center" }}>
           <HelpBubbleTrigger title="Flip 테스트">
             <ActionButton>Flip 테스트</ActionButton>
@@ -52,7 +49,7 @@ const ActivityHelpBubble: ActivityComponentType = () => {
             <ActionButton>Placement=bottom 테스트</ActionButton>
           </HelpBubbleTrigger>
         </div>
-      </div>
+      </AppScreenContent>
     </AppScreen>
   );
 };

diff --git a/examples/stackflow-spa/src/activities/ActivityHome.tsx b/examples/stackflow-spa/src/activities/ActivityHome.tsx
@@ -2,8 +2,8 @@ import { useSnackbarAdapter } from "@seed-design/react";
 import { receive } from "@stackflow/compat-await-push";
 import type { ActivityComponentType } from "@stackflow/react";
 import { List, ListItem } from "../components/List";
-import { AppBar, Title } from "../design-system/stackflow/AppBar";
-import { AppScreen } from "../design-system/stackflow/AppScreen";
+import { AppBar, AppBarTitle } from "../design-system/stackflow/AppBar";
+import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen";
 import { DialogPushTrigger } from "../design-system/stackflow/DialogPushTrigger";
 import { ActionButton } from "../design-system/ui/action-button";
 import {
@@ -27,21 +27,11 @@ const ActivityHome: ActivityComponentType = () => {
   const snackbarAdapter = useSnackbarAdapter();
 
   return (
-    <AppScreen
-      appBar={
-        <AppBar>
-          <Title>Home</Title>
-        </AppBar>
-      }
-    >
-      <div
-        style={
-          {
-            overflow: "auto",
-            height: "calc(100vh - var(--stackflow-plugin-basic-ui-app-bar-height))",
-          } as React.CSSProperties
-        }
-      >
+    <AppScreen>
+      <AppBar>
+        <AppBarTitle>Home</AppBarTitle>
+      </AppBar>
+      <AppScreenContent>
         <List>
           <ListItem onClick={() => push("ActivityActionButton", {})} title="ActionButton" />
           <ListItem onClick={() => push("ActivityActionChip", {})} title="ActionChip" />
@@ -123,7 +113,7 @@ const ActivityHome: ActivityComponentType = () => {
             title="Snackbar (critical)"
           />
         </List>
-      </div>
+      </AppScreenContent>
     </AppScreen>
   );
 };

diff --git a/examples/stackflow-spa/src/activities/ActivityLayerBar.tsx b/examples/stackflow-spa/src/activities/ActivityLayerBar.tsx
@@ -1,45 +1,41 @@
 import type { ActivityComponentType } from "@stackflow/react";
 import {
   AppBar,
+  AppBarLeft,
+  AppBarRight,
+  AppBarTitle,
   BackButton,
   IconButton,
-  Left,
-  Right,
-  Title,
 } from "../design-system/stackflow/AppBar";
-import { AppScreen } from "../design-system/stackflow/AppScreen";
+import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen";
 
 import { IconBellLine } from "@daangn/react-monochrome-icon";
 import { theme } from "../stackflow/theme";
 
 const ActivityLayerBar: ActivityComponentType = () => {
   return (
-    <AppScreen
-      appBar={
-        <AppBar tone="layer" border={false}>
-          <Left>
-            <BackButton />
-          </Left>
-          <Title>야옹</Title>
-          <Right>
-            <IconButton>
-              <IconBellLine />
-            </IconButton>
-            <IconButton>
-              <IconBellLine />
-            </IconButton>
-            <IconButton>
-              <IconBellLine />
-            </IconButton>
-            <IconButton>
-              <IconBellLine />
-            </IconButton>
-          </Right>
-        </AppBar>
-      }
-      theme={theme}
-    >
-      <div style={{ height: 800 }} />
+    <AppScreen theme={theme}>
+      <AppBar tone="layer">
+        <AppBarLeft>
+          <BackButton />
+        </AppBarLeft>
+        <AppBarTitle>야옹</AppBarTitle>
+        <AppBarRight>
+          <IconButton>
+            <IconBellLine />
+          </IconButton>
+          <IconButton>
+            <IconBellLine />
+          </IconButton>
+          <IconButton>
+            <IconBellLine />
+          </IconButton>
+          <IconButton>
+            <IconBellLine />
+          </IconButton>
+        </AppBarRight>
+      </AppBar>
+      <AppScreenContent />
     </AppScreen>
   );
 };