feat: Stackflow cleanup (#502)

daangn · Feb 2, 2025 · a57795d · a57795d
1 parent 538f2fc
commit a57795d
Show file tree

Hide file tree

Showing 109 changed files with 4,846 additions and 2,120 deletions.
diff --git a/.yarn/cache/@stackflow-react-npm-1.4.0-b4e46e6d80-a5d01eaa61.zip b/.yarn/cache/@stackflow-react-npm-1.4.0-b4e46e6d80-a5d01eaa61.zip
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/docs/components/example/app-screen-preview.tsx b/docs/components/example/app-screen-preview.tsx
@@ -1,17 +1,17 @@
 "use client";
 
-import { Flex } from "seed-design/ui/layout";
 import { IconBellFill } from "@daangn/react-monochrome-icon";
 import type { ActivityComponentType } from "@stackflow/react/future";
 import {
   AppBar,
-  AppScreen,
-  CloseButton,
-  IconButton,
-  Left,
-  Right,
-  Title,
-} from "seed-design/ui/app-screen";
+  AppBarCloseButton,
+  AppBarIconButton,
+  AppBarLeft,
+  AppBarMain,
+  AppBarRight,
+} from "seed-design/ui/app-bar";
+import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
+import { Flex } from "seed-design/ui/layout";
 
 declare module "@stackflow/config" {
   interface Register {
@@ -21,25 +21,23 @@ declare module "@stackflow/config" {
 
 const AppScreenPreviewActivity: ActivityComponentType<"AppScreenPreview"> = () => {
   return (
-    <AppScreen
-      theme="cupertino"
-      appBar={
-        <AppBar>
-          <Left>
-            <CloseButton />
-          </Left>
-          <Title>Preview</Title>
-          <Right>
-            <IconButton aria-label="Notification">
-              <IconBellFill />
-            </IconButton>
-          </Right>
-        </AppBar>
-      }
-    >
-      <Flex height="full" justifyContent="center" alignItems="center">
-        Preview
-      </Flex>
+    <AppScreen theme="cupertino">
+      <AppBar>
+        <AppBarLeft>
+          <AppBarCloseButton />
+        </AppBarLeft>
+        <AppBarMain>Preview</AppBarMain>
+        <AppBarRight>
+          <AppBarIconButton aria-label="Notification">
+            <IconBellFill />
+          </AppBarIconButton>
+        </AppBarRight>
+      </AppBar>
+      <AppScreenContent>
+        <Flex height="full" justifyContent="center" alignItems="center">
+          Preview
+        </Flex>
+      </AppScreenContent>
     </AppScreen>
   );
 };

diff --git a/docs/components/example/app-screen-transparent-bar.tsx b/docs/components/example/app-screen-transparent-bar.tsx
@@ -1,17 +1,17 @@
 "use client";
 
-import { Flex } from "seed-design/ui/layout";
 import { IconBellFill } from "@daangn/react-monochrome-icon";
 import type { ActivityComponentType } from "@stackflow/react/future";
 import {
   AppBar,
-  AppScreen,
-  CloseButton,
-  IconButton,
-  Left,
-  Right,
-  Title,
-} from "seed-design/ui/app-screen";
+  AppBarCloseButton,
+  AppBarIconButton,
+  AppBarLeft,
+  AppBarMain,
+  AppBarRight,
+} from "seed-design/ui/app-bar";
+import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
+import { Flex } from "seed-design/ui/layout";
 
 declare module "@stackflow/config" {
   interface Register {
@@ -21,25 +21,23 @@ declare module "@stackflow/config" {
 
 const AppScreenTransparentBarActivity: ActivityComponentType<"AppScreenTransparentBar"> = () => {
   return (
-    <AppScreen
-      theme="cupertino"
-      appBar={
-        <AppBar tone="transparent" border={false}>
-          <Left>
-            <CloseButton />
-          </Left>
-          <Title>Transparent Bar</Title>
-          <Right>
-            <IconButton aria-label="Notification">
-              <IconBellFill />
-            </IconButton>
-          </Right>
-        </AppBar>
-      }
-    >
-      <Flex height="full">
-        <img src="/penguin.webp" alt="Penguin" />
-      </Flex>
+    <AppScreen theme="cupertino">
+      <AppBar tone="transparent">
+        <AppBarLeft>
+          <AppBarCloseButton />
+        </AppBarLeft>
+        <AppBarMain>Preview</AppBarMain>
+        <AppBarRight>
+          <AppBarIconButton aria-label="Notification">
+            <IconBellFill />
+          </AppBarIconButton>
+        </AppBarRight>
+      </AppBar>
+      <AppScreenContent>
+        <Flex height="full" justifyContent="center" alignItems="center">
+          Preview
+        </Flex>
+      </AppScreenContent>
     </AppScreen>
   );
 };

diff --git a/docs/components/stackflow/Stack.ts b/docs/components/stackflow/Stack.ts
@@ -3,14 +3,13 @@ import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
 import { type ActivityComponentType, stackflow } from "@stackflow/react/future";
 import { getConfig } from "./stackflow.config";
 import type { Register } from "@stackflow/config";
+import { seedPlugin } from "@seed-design/stackflow";
 
 interface MakeStackProps<T extends keyof Register> {
   Activity: ActivityComponentType<T>;
 }
 
-export const makeStack = <T extends keyof Register>(
-  props: MakeStackProps<T>,
-) => {
+export const makeStack = <T extends keyof Register>(props: MakeStackProps<T>) => {
   const { Activity } = props;
 
   const { Stack, actions, stepActions } = stackflow({
@@ -31,6 +30,9 @@ export const makeStack = <T extends keyof Register>(
           },
         },
       }),
+      seedPlugin({
+        theme: "cupertino",
+      }),
     ],
   });
 

diff --git a/docs/content/docs/react/components/stackflow/app-screen.mdx b/docs/content/docs/react/components/stackflow/app-screen.mdx
@@ -17,7 +17,11 @@ description: "이 문서는 정리 중이에요. 문의 내용은 #_design_core
 
 ### AppBar
 
-<ReactTypeTable path="./registry/ui/app-screen.tsx" name="AppBarProps" />
+<ReactTypeTable path="./registry/ui/app-bar.tsx" name="AppBarProps" />
+
+### AppBarMain
+
+<ReactTypeTable path="./registry/ui/app-bar.tsx" name="AppBarMainProps" />
 
 ## 예제
 

diff --git a/docs/package.json b/docs/package.json
@@ -44,7 +44,7 @@
     "@stackflow/core": "^1.1.0",
     "@stackflow/plugin-basic-ui": "^1.10.0",
     "@stackflow/plugin-renderer-basic": "^1.1.13",
-    "@stackflow/react": "^1.4.0",
+    "@stackflow/react": "^1.4.1",
     "change-case": "^5.4.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

diff --git a/docs/public/rootage-next/components/top-navigation.json b/docs/public/rootage-next/components/top-navigation.json
@@ -28,16 +28,6 @@
                 "value": "$dimension.s4"
               }
             },
-            "title": {
-              "fontSize": {
-                "type": "color",
-                "value": "$font-size.s6-static"
-              },
-              "fontWeight": {
-                "type": "color",
-                "value": "$font-weight.bold"
-              }
-            },
             "icon": {
               "size": {
                 "type": "dimension",
@@ -81,16 +71,6 @@
                 "value": "$dimension.s4"
               }
             },
-            "title": {
-              "fontSize": {
-                "type": "color",
-                "value": "$font-size.s6-static"
-              },
-              "fontWeight": {
-                "type": "color",
-                "value": "$font-weight.bold"
-              }
-            },
             "icon": {
               "size": {
                 "type": "dimension",
@@ -133,6 +113,12 @@
                 "value": "$color.fg.neutral"
               }
             },
+            "subtitle": {
+              "color": {
+                "type": "color",
+                "value": "$color.fg.neutral-muted"
+              }
+            },
             "icon": {
               "color": {
                 "type": "color",
@@ -165,6 +151,12 @@
                 "value": "$color.palette.static-white"
               }
             },
+            "subtitle": {
+              "color": {
+                "type": "color",
+                "value": "$color.palette.static-white"
+              }
+            },
             "icon": {
               "color": {
                 "type": "color",
@@ -201,6 +193,64 @@
           }
         }
       ]
+    },
+    {
+      "variants": {
+        "titleLayout": "titleOnly"
+      },
+      "definitions": [
+        {
+          "states": [
+            "enabled"
+          ],
+          "slots": {
+            "title": {
+              "fontSize": {
+                "type": "color",
+                "value": "$font-size.s6-static"
+              },
+              "fontWeight": {
+                "type": "color",
+                "value": "$font-weight.bold"
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      "variants": {
+        "titleLayout": "withSubtitle"
+      },
+      "definitions": [
+        {
+          "states": [
+            "enabled"
+          ],
+          "slots": {
+            "title": {
+              "fontSize": {
+                "type": "color",
+                "value": "$font-size.s5-static"
+              },
+              "fontWeight": {
+                "type": "color",
+                "value": "$font-weight.bold"
+              }
+            },
+            "subtitle": {
+              "fontSize": {
+                "type": "color",
+                "value": "$font-size.s2-static"
+              },
+              "fontWeight": {
+                "type": "color",
+                "value": "$font-weight.regular"
+              }
+            }
+          }
+        }
+      ]
     }
   ]
 }
diff --git a/docs/public/rootage-next/font-size.json b/docs/public/rootage-next/font-size.json
@@ -117,6 +117,28 @@
           }
         }
       },
+      "$font-size.s2-static": {
+        "values": {
+          "default": {
+            "type": "dimension",
+            "value": {
+              "value": 12,
+              "unit": "px"
+            }
+          }
+        }
+      },
+      "$font-size.s5-static": {
+        "values": {
+          "default": {
+            "type": "dimension",
+            "value": {
+              "value": 16,
+              "unit": "px"
+            }
+          }
+        }
+      },
       "$font-size.s6-static": {
         "values": {
           "default": {