🧩 WOR-2 Refactor tree

CHANGELOG.md

@@ -18,7 +18,7 @@
     1. `@swy/ui/custom` → `@swy/ui/shared`
     2. `@swy/ui/dnd` → `@swy/ui/shared`
     3. `@swy/ui/form` → `@swy/ui/shared`
-  - Refactor components: `IconBlock`, `Unsplash`
+  - Refactor components: `IconBlock`, `Unsplash`, `Tree`
   - Rename: `IconPicker` → `EmojiPicker`
   - Remove unused shadcn components
   - Remove path alias

apps/storybook/src/lib/utils.ts

@@ -0,0 +1,2 @@
+export const delay = async (timeout: number) =>
+  await new Promise((resolve) => setTimeout(resolve, timeout));

apps/storybook/src/stories/notion/workspace-provider/_components/base-layout.tsx

@@ -16,18 +16,14 @@ import {
   ResizablePanelGroup,
 } from "@swy/ui/shadcn";
 
-import { useDocuments } from "./use-documents";
+import { usePages } from "./use-pages";
 
-interface LayoutProps extends React.PropsWithChildren {
-  pageId: string;
-}
+type LayoutProps = React.PropsWithChildren;
 
-export const BaseLayout = ({ pageId, children }: LayoutProps) => {
+export const BaseLayout = ({ children }: LayoutProps) => {
   const { minSize, ref, collapse, expand, isResizing, isMobile } =
     useSidebarLayout("group", "sidebar", 240);
-  const { isLoading, fetchPages } = useDocuments({
-    workspaceId: "workspace-0",
-  });
+  const { pageId, isLoading, fetchPages, selectPage } = usePages("workspace-0");
 
   return (
     <ResizablePanelGroup
@@ -49,6 +45,7 @@ export const BaseLayout = ({ pageId, children }: LayoutProps) => {
           className="w-full"
           isMobile={isMobile}
           collapse={collapse}
+          redirect={selectPage}
           settingsProps={{
             settings: mockSettings,
             onFetchConnections: () => Promise.resolve(mockConnections),

apps/storybook/src/stories/notion/workspace-provider/_components/liveblocks-layout.tsx

@@ -17,33 +17,19 @@ import {
   ResizablePanelGroup,
 } from "@swy/ui/shadcn";
 
-import { useDocuments } from "./use-documents";
+import { usePages } from "./use-pages";
 
 /** Setup Liveblocks */
 const authEndpoint = "/api/liveblocks";
 const client = createClient({ authEndpoint });
 const { useSelf, useOthers } = createRoomContext(client);
 
-interface LayoutProps extends React.PropsWithChildren {
-  pageId: string;
-}
-
-export const LayoutWithLiveblocks = ({ pageId, children }: LayoutProps) => {
-  return (
-    <RoomProvider authEndpoint={authEndpoint} roomId={pageId}>
-      <Layout pageId={pageId}>{children}</Layout>
-    </RoomProvider>
-  );
-};
+type LayoutProps = React.PropsWithChildren;
 
-export const Layout = ({ pageId, children }: LayoutProps) => {
-  const { minSize, ref, collapse, expand, isResizing, isMobile } =
+export const LayoutWithLiveblocks = ({ children }: LayoutProps) => {
+  const { minSize, ref, collapse, expand, isResizing, isMobile, isCollapsed } =
     useSidebarLayout("group", "sidebar", 240);
-  const currentUser = useSelf();
-  const otherUsers = useOthers();
-  const { isLoading, fetchPages } = useDocuments({
-    workspaceId: "workspace-0",
-  });
+  const { pageId, isLoading, fetchPages, selectPage } = usePages("workspace-0");
 
   return (
     <ResizablePanelGroup
@@ -65,6 +51,7 @@ export const Layout = ({ pageId, children }: LayoutProps) => {
           className="w-full"
           isMobile={isMobile}
           collapse={collapse}
+          redirect={selectPage}
           settingsProps={{
             settings: mockSettings,
             onFetchConnections: () => Promise.resolve(mockConnections),
@@ -82,28 +69,49 @@ export const Layout = ({ pageId, children }: LayoutProps) => {
         order={2}
         className={cn(isResizing && "transition-all duration-300 ease-in-out")}
       >
-        <PageProvider
-          className="order-3 flex size-full flex-col overflow-hidden"
-          page={mockPages[pageId]!}
-          currentUser={currentUser}
-          otherUsers={otherUsers}
-          fetchLogs={() => Promise.resolve(mockLogs)}
-        >
-          <Navbar
-            className="w-full"
-            onResetWidth={expand}
-            isCollapsed={ref.current?.isCollapsed()}
-          />
-          <main className="h-full">
-            <PageHeader unsplashAPIKey="UNSPLASH_API_KEY" />
-            {pageId === "#" ? (
-              <div className="px-[54px] text-[32px]">Welcome to WorXpace</div>
-            ) : (
-              children
-            )}
-          </main>
-        </PageProvider>
+        <RoomProvider authEndpoint={authEndpoint} roomId={pageId}>
+          <PageLayout pageId={pageId} isCollapsed={isCollapsed} expand={expand}>
+            {children}
+          </PageLayout>
+        </RoomProvider>
       </ResizablePanel>
     </ResizablePanelGroup>
   );
 };
+
+export const PageLayout = ({
+  children,
+  pageId,
+  expand,
+  isCollapsed,
+}: LayoutProps & {
+  pageId: string;
+  expand: () => void;
+  isCollapsed?: boolean;
+}) => {
+  const currentUser = useSelf();
+  const otherUsers = useOthers();
+  return (
+    <PageProvider
+      className="order-3 flex size-full flex-col overflow-hidden"
+      page={mockPages[pageId]!}
+      currentUser={currentUser}
+      otherUsers={otherUsers}
+      fetchLogs={() => Promise.resolve(mockLogs)}
+    >
+      <Navbar
+        className="w-full"
+        onResetWidth={expand}
+        isCollapsed={isCollapsed}
+      />
+      <main className="h-full">
+        <PageHeader unsplashAPIKey="UNSPLASH_API_KEY" />
+        {pageId === "#" ? (
+          <div className="px-[54px] text-[32px]">Welcome to WorXpace</div>
+        ) : (
+          children
+        )}
+      </main>
+    </PageProvider>
+  );
+};

apps/storybook/src/stories/notion/workspace-provider/_components/use-pages.ts

@@ -0,0 +1,25 @@
+import { useState } from "react";
+import useSWR from "swr";
+
+import { documents, mockPages } from "@swy/notion/mock";
+import { useTree, type TreeItemData } from "@swy/ui/shared";
+
+const fetcher = () => Promise.resolve(documents);
+
+export const usePages = (workspaceId: string) => {
+  const tree = useTree();
+  const [pageId, setPageId] = useState("#");
+
+  const { isLoading } = useSWR<TreeItemData[], Error>(workspaceId, fetcher, {
+    onSuccess: (data) => tree.set(data),
+    onError: (e) => console.log(`[swr:workspace]: ${e.message}`),
+  });
+  const fetchPages = () => Promise.resolve(Object.values(mockPages));
+  const selectPage = (path: string) => {
+    const [, , id] = path.split("/");
+    if (!id) return;
+    setPageId(id);
+  };
+
+  return { pageId, isLoading, fetchPages, selectPage };
+};

apps/storybook/src/stories/notion/workspace-provider/index.stories.tsx

@@ -1,9 +1,8 @@
-import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { WorkspaceProvider, WorkspaceSwitcher } from "@swy/notion";
-import { documents, GROUPS, user, workspaces } from "@swy/notion/mock";
-import { ModalProvider, TreeProvider } from "@swy/ui/shared";
+import { user, workspaces } from "@swy/notion/mock";
+import { ModalProvider } from "@swy/ui/shared";
 
 import { BaseLayout } from "./_components";
 
@@ -26,25 +25,6 @@ export const Swticher: Story = {
   parameters: { layout: "centered" },
 };
 
-const Template: Story["render"] = ({ children, ...props }) => {
-  const [pageId, setPageId] = useState("#");
-  return (
-    <WorkspaceProvider {...props}>
-      <ModalProvider>
-        <TreeProvider
-          className="flex h-screen bg-main"
-          groups={GROUPS}
-          initialItems={documents}
-          onClickItem={setPageId}
-          isItemActive={(id) => id === pageId}
-        >
-          <BaseLayout pageId={pageId}>{children}</BaseLayout>
-        </TreeProvider>
-      </ModalProvider>
-    </WorkspaceProvider>
-  );
-};
-
 export const WorkspaceLayout: Story = {
   args: {
     user,
@@ -53,6 +33,16 @@ export const WorkspaceLayout: Story = {
     className: "h-full",
     children: <div className="p-[54px]">Hi!</div>,
   },
-  render: Template,
   parameters: { layout: "fullscreen" },
+  render: ({ children, ...props }) => {
+    return (
+      <WorkspaceProvider {...props}>
+        <ModalProvider>
+          <div className="flex h-screen bg-main">
+            <BaseLayout>{children}</BaseLayout>
+          </div>
+        </ModalProvider>
+      </WorkspaceProvider>
+    );
+  },
 };

apps/storybook/src/stories/playground/worxpace.stories.tsx

@@ -1,10 +1,9 @@
-import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { CollaborativeEditor } from "@swy/liveblocks";
 import { WorkspaceProvider } from "@swy/notion";
-import { documents, GROUPS, user, workspaces } from "@swy/notion/mock";
-import { ModalProvider, TreeProvider } from "@swy/ui/shared";
+import { user, workspaces } from "@swy/notion/mock";
+import { ModalProvider } from "@swy/ui/shared";
 
 import { liveblocksAuth } from "@/stories/notion/__mock__";
 import { LayoutWithLiveblocks } from "@/stories/notion/workspace-provider/_components";
@@ -20,32 +19,21 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const Template: Story["render"] = () => {
-  const [pageId, setPageId] = useState("#");
-  return (
+export const Playground: Story = {
+  render: () => (
     <WorkspaceProvider
       user={user}
       workspaces={workspaces}
       initial="workspace-0"
       className="h-full"
     >
       <ModalProvider>
-        <TreeProvider
-          className="flex h-screen bg-main"
-          groups={GROUPS}
-          initialItems={documents}
-          onClickItem={setPageId}
-          isItemActive={(id) => id === pageId}
-        >
-          <LayoutWithLiveblocks pageId={pageId}>
+        <div className="flex h-screen bg-main">
+          <LayoutWithLiveblocks>
             <CollaborativeEditor />
           </LayoutWithLiveblocks>
-        </TreeProvider>
+        </div>
       </ModalProvider>
     </WorkspaceProvider>
-  );
-};
-
-export const Playground: Story = {
-  render: Template,
+  ),
 };