wip

daangn · Jan 7, 2025 · c32bd5c · c32bd5c
1 parent 251bdd4
commit c32bd5c
Show file tree

Hide file tree

Showing 35 changed files with 1,337 additions and 897 deletions.
diff --git a/examples/stackflow-spa/src/App.tsx b/examples/stackflow-spa/src/App.tsx
@@ -2,11 +2,14 @@ import type React from "react";
 
 import { Stack } from "./stackflow";
 import { PreferenceProvider } from "./hooks/usePreference";
+import { Suspense } from "react";
 
 const App: React.FC = () => (
   <div>
     <PreferenceProvider>
-      <Stack />
+      <Suspense>
+        <Stack />
+      </Suspense>
     </PreferenceProvider>
   </div>
 );

diff --git a/examples/stackflow-spa/src/activities/ActivityActionButton.tsx b/examples/stackflow-spa/src/activities/ActivityActionButton.tsx
@@ -1,5 +1,6 @@
-import { AppScreen } from "@stackflow/plugin-basic-ui";
 import type { ActivityComponentType } from "@stackflow/react";
+import { AppBar, BackButton, Left, Title } from "../design-system/stackflow/AppBar";
+import { AppScreen } from "../design-system/stackflow/AppScreen";
 
 import { actionButton, actionButtonVariantMap } from "@seed-design/recipe/actionButton";
 
@@ -15,7 +16,16 @@ const initialVariants = {
 
 const ActivityActionButton: ActivityComponentType = () => {
   return (
-    <AppScreen appBar={{ title: "ActionButton" }}>
+    <AppScreen
+      appBar={
+        <AppBar>
+          <Left>
+            <BackButton />
+          </Left>
+          <Title>Action Button</Title>
+        </AppBar>
+      }
+    >
       <ComponentAnalyzer
         variantsMap={actionButtonVariantMap}
         initialVariants={initialVariants}

diff --git a/examples/stackflow-spa/src/activities/ActivityActionChip.tsx b/examples/stackflow-spa/src/activities/ActivityActionChip.tsx
@@ -1,5 +1,6 @@
-import { AppScreen } from "@stackflow/plugin-basic-ui";
 import type { ActivityComponentType } from "@stackflow/react";
+import { AppBar, BackButton, Left, Title } from "../design-system/stackflow/AppBar";
+import { AppScreen } from "../design-system/stackflow/AppScreen";
 
 import { actionChip, actionChipVariantMap } from "@seed-design/recipe/actionChip";
 
@@ -14,7 +15,16 @@ const initialVariants = {
 
 const ActivityActionChip: ActivityComponentType = () => {
   return (
-    <AppScreen appBar={{ title: "ActionChip" }}>
+    <AppScreen
+      appBar={
+        <AppBar>
+          <Left>
+            <BackButton />
+          </Left>
+          <Title>Action Chip</Title>
+        </AppBar>
+      }
+    >
       <ComponentAnalyzer
         variantsMap={actionChipVariantMap}
         initialVariants={initialVariants}

diff --git a/examples/stackflow-spa/src/activities/ActivityControlChip.tsx b/examples/stackflow-spa/src/activities/ActivityControlChip.tsx
@@ -1,5 +1,6 @@
-import { AppScreen } from "@stackflow/plugin-basic-ui";
 import type { ActivityComponentType } from "@stackflow/react";
+import { AppBar, BackButton, Left, Title } from "../design-system/stackflow/AppBar";
+import { AppScreen } from "../design-system/stackflow/AppScreen";
 
 import { controlChip, controlChipVariantMap } from "@seed-design/recipe/controlChip";
 
@@ -14,7 +15,16 @@ const initialVariants = {
 
 const ActivityControlChip: ActivityComponentType = () => {
   return (
-    <AppScreen appBar={{ title: "ControlChip" }}>
+    <AppScreen
+      appBar={
+        <AppBar>
+          <Left>
+            <BackButton />
+          </Left>
+          <Title>Control Chip</Title>
+        </AppBar>
+      }
+    >
       <ComponentAnalyzer
         variantsMap={controlChipVariantMap}
         initialVariants={initialVariants}

diff --git a/examples/stackflow-spa/src/activities/ActivityHelpBubble.tsx b/examples/stackflow-spa/src/activities/ActivityHelpBubble.tsx
@@ -1,14 +1,22 @@
-import "@seed-design/stylesheet/helpBubble.css";
-
 import type { ActivityComponentType } from "@stackflow/react";
 
-import { AppScreen } from "@stackflow/plugin-basic-ui";
+import { AppBar, BackButton, Left, Title } from "../design-system/stackflow/AppBar";
+import { AppScreen } 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={{ title: "HelpBubble" }}>
+    <AppScreen
+      appBar={
+        <AppBar>
+          <Left>
+            <BackButton />
+          </Left>
+          <Title>Help Bubble</Title>
+        </AppBar>
+      }
+    >
       <div style={{ overflowY: "auto", height: "200vh" }}>
         <div style={{ display: "flex", paddingTop: "20vh", justifyContent: "center" }}>
           <HelpBubbleTrigger title="Flip 테스트">

diff --git a/examples/stackflow-spa/src/activities/ActivityHome.tsx b/examples/stackflow-spa/src/activities/ActivityHome.tsx
@@ -1,15 +1,20 @@
 import type { ActivityComponentType } from "@stackflow/react";
-
-import { AppScreen } from "@stackflow/plugin-basic-ui";
-
 import { List, ListItem } from "../components/List";
+import { AppBar, Title } from "../design-system/stackflow/AppBar";
+import { AppScreen } from "../design-system/stackflow/AppScreen";
 import { useFlow } from "../stackflow";
 
 const ActivityHome: ActivityComponentType = () => {
   const { push } = useFlow();
 
   return (
-    <AppScreen appBar={{ title: "Home" }}>
+    <AppScreen
+      appBar={
+        <AppBar>
+          <Title>Home</Title>
+        </AppBar>
+      }
+    >
       <div
         style={{
           overflow: "auto",

diff --git a/examples/stackflow-spa/src/activities/ActivityLayerBar.tsx b/examples/stackflow-spa/src/activities/ActivityLayerBar.tsx
@@ -10,7 +10,6 @@ import {
 import { AppScreen } from "../design-system/stackflow/AppScreen";
 
 import { IconBellLine } from "@daangn/react-monochrome-icon";
-import img from "../assets/peng.jpeg";
 import { theme } from "../stackflow/theme";
 
 const ActivityLayerBar: ActivityComponentType = () => {

diff --git a/examples/stackflow-spa/src/activities/ActivityNotFound.tsx b/examples/stackflow-spa/src/activities/ActivityNotFound.tsx
@@ -1,10 +1,22 @@
 import type { ActivityComponentType } from "@stackflow/react";
-
-import { AppScreen } from "@stackflow/plugin-basic-ui";
-import React from "react";
+import { AppBar, BackButton, Left, Title } from "../design-system/stackflow/AppBar";
+import { AppScreen } from "../design-system/stackflow/AppScreen";
 
 const ActivityNotFound: ActivityComponentType = () => {
-  return <AppScreen appBar={{}}>404 Not Found</AppScreen>;
+  return (
+    <AppScreen
+      appBar={
+        <AppBar>
+          <Left>
+            <BackButton />
+          </Left>
+          <Title>Error</Title>
+        </AppBar>
+      }
+    >
+      404 Not Found
+    </AppScreen>
+  );
 };
 
 export default ActivityNotFound;
diff --git a/examples/stackflow-spa/src/design-system/stackflow/AppBar.tsx b/examples/stackflow-spa/src/design-system/stackflow/AppBar.tsx
@@ -1,9 +1,9 @@
-import "@seed-design/stylesheet/topNavigation.css";
+import "@seed-design/stylesheet/appBar.css";
 
 import { IconChevronLeftLine, IconXmarkLine } from "@daangn/react-monochrome-icon";
 import { AppBar as SeedAppBar, type AppBarIconButtonProps } from "@seed-design/stackflow";
 import { useActions, useActivity } from "@stackflow/react";
-import { forwardRef, useCallback } from "react";
+import { forwardRef } from "react";
 
 export const AppBar = SeedAppBar.Root;
 
@@ -20,16 +20,13 @@ export const BackButton = forwardRef<HTMLButtonElement, AppBarIconButtonProps>(
     const activity = useActivity();
     const actions = useActions();
 
-    const handleOnClick = useCallback(
-      (e: React.MouseEvent<HTMLButtonElement>) => {
-        onClick?.(e);
+    const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(e);
 
-        if (!e.defaultPrevented) {
-          actions.pop();
-        }
-      },
-      [actions],
-    );
+      if (!e.defaultPrevented) {
+        actions.pop();
+      }
+    };
 
     if (!activity) {
       return null;
@@ -57,13 +54,13 @@ export const CloseButton = forwardRef<HTMLButtonElement, AppBarIconButtonProps>(
   ({ children = <IconXmarkLine />, onClick, ...otherProps }, ref) => {
     const activity = useActivity();
 
-    const handleOnClick = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+    const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
       onClick?.(e);
 
       if (!e.defaultPrevented) {
         // you can do something here
       }
-    }, []);
+    };
 
     const isRoot = !activity || activity.isRoot;
 

diff --git a/examples/stackflow-spa/src/design-system/stackflow/AppScreen.tsx b/examples/stackflow-spa/src/design-system/stackflow/AppScreen.tsx
@@ -1,12 +1,25 @@
-import "@seed-design/stylesheet/screen.css";
+import "@seed-design/stylesheet/appScreen.css";
 
 import { AppScreen as SeedAppScreen, type AppScreenProps } from "@seed-design/stackflow";
+import { useActions } from "@stackflow/react";
 import { forwardRef } from "react";
+import { flushSync } from "react-dom";
 
 export const AppScreen = forwardRef<HTMLDivElement, AppScreenProps>(
-  ({ children, ...otherProps }, ref) => {
+  ({ children, onSwipeEnd, ...otherProps }, ref) => {
+    const { pop } = useActions();
+
     return (
-      <SeedAppScreen.Root ref={ref} {...otherProps}>
+      <SeedAppScreen.Root
+        ref={ref}
+        onSwipeEnd={({ swiped }) => {
+          if (swiped) {
+            pop();
+          }
+          onSwipeEnd?.({ swiped });
+        }}
+        {...otherProps}
+      >
         <SeedAppScreen.Dim />
         <SeedAppScreen.Layer>{children}</SeedAppScreen.Layer>
         <SeedAppScreen.Edge />

diff --git a/examples/stackflow-spa/src/stackflow/Stack.tsx b/examples/stackflow-spa/src/stackflow/Stack.tsx
@@ -6,6 +6,7 @@ import { stackflow } from "@stackflow/react";
 import React from "react";
 
 import { IconChevronLeftLine } from "@daangn/react-monochrome-icon";
+import { GlobalInteractionProvider, useGlobalInteraction } from "@seed-design/stackflow";
 import ActivityNotFound from "../activities/ActivityNotFound";
 import { theme } from "./theme";
 
@@ -45,6 +46,25 @@ const { Stack, useFlow, useStepFlow } = stackflow({
       dimBackgroundColor: vars.$color.bg.overlay,
       theme,
     }),
+    () => ({
+      key: "test",
+      wrapStack: ({ stack }) => {
+        const api = useGlobalInteraction();
+        const topActivity = stack.activities.find((activity) => activity.isTop);
+        const globalTransitionState = topActivity?.transitionState ?? "enter-done";
+        return (
+          <GlobalInteractionProvider value={api}>
+            <div
+              ref={api.stackRef}
+              {...api.stackProps}
+              data-global-transition-state={globalTransitionState}
+            >
+              {stack.render()}
+            </div>
+          </GlobalInteractionProvider>
+        );
+      },
+    }),
     historySyncPlugin({
       fallbackActivity: () => "ActivityNotFound",
       routes: {