fix: documentation examples

daangn · Jan 27, 2025 · 10ea9d1 · 10ea9d1
1 parent 811fb2a
commit 10ea9d1
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 57 deletions.
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 "@/registry/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,
+  AppBarRight,
+  AppBarTitle,
+} 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>
+        <AppBarTitle>Preview</AppBarTitle>
+        <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 "@/registry/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,
+  AppBarRight,
+  AppBarTitle,
+} 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>
+        <AppBarTitle>Preview</AppBarTitle>
+        <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",
+      }),
     ],
   });