refactor(sidebar): split nav views and add router decorator

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/stories/exampleUser.ts

@@ -0,0 +1,8 @@
+export const user = {
+  username: 'nvirellia',
+  nickname: 'Noa Virellia',
+  subtitle: '天生骄傲',
+  email: 'noa@requiem.garden',
+  bio: '',
+  avatar: 'https://avatars.githubusercontent.com/u/54884471?v=4',
+};

client/cms/src/stories/nav-user.stories.tsx

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { NavUser_ } from '@/components/sidebar/nav-user';
-
-const meta = {
-  title: 'NavUser',
-  component: NavUser_,
-} satisfies Meta<typeof NavUser_>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {};

client/cms/src/stories/profile/edit-profile.dialog.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { EditProfileDialogView } from '@/components/profile/edit-profile.dialog.view';
+import { user } from '../exampleUser';
 
 const meta = {
   title: 'Profile/EditDialog',
@@ -27,14 +28,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    user: {
-      username: 'nvirellia',
-      nickname: 'Noa Virellia',
-      subtitle: '天生骄傲',
-      email: 'noa@requiem.garden',
-      bio: '',
-      avatar: 'https://avatars.githubusercontent.com/u/54884471?v=4',
-    },
+    user,
     updateProfile: async () => { },
   },
   parameters: {

client/cms/src/stories/profile/profile.stories.tsx

@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ProfileError } from '@/components/profile/profile.error';
 import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
 import { ProfileView } from '@/components/profile/profile.view';
+import { user } from '../exampleUser';
 
 const queryClient = new QueryClient();
 
@@ -23,20 +24,12 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    user: {
-      username: 'nvirellia',
-      nickname: 'Noa Virellia',
-      subtitle: '天生骄傲',
-      email: 'noa@requiem.garden',
-      bio: '',
-      avatar: 'https://avatars.githubusercontent.com/u/54884471?v=4',
-    },
+    user,
     onSaveBio: async () => Promise.resolve(),
   },
-
 };
 
-export const Skeleton: Story = {
+export const Loading: Story = {
   render: () => <ProfileSkeleton />,
   args: {
     user: {},

client/cms/src/stories/sidebar.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AppSidebar } from '@/components/sidebar/app-sidebar.view';
+import { NavUserSkeleton } from '@/components/sidebar/nav-user.skeletion';
+import { NavUserView } from '@/components/sidebar/nav-user.view';
+import { SidebarProvider } from '@/components/ui/sidebar';
+import { navData } from '@/lib/navData';
+import { user } from './exampleUser';
+
+const meta = {
+  title: 'Navigation/Sidebar',
+  component: AppSidebar,
+  decorators: [
+    Story => (
+      <SidebarProvider
+        style={
+          {
+            '--sidebar-width': 'calc(var(--spacing) * 72)',
+            '--header-height': 'calc(var(--spacing) * 12)',
+          } as React.CSSProperties
+        }
+      >
+        <Story />
+      </SidebarProvider>
+    ),
+  ],
+} satisfies Meta<typeof AppSidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    navData,
+    footerWidget: <NavUserView user={user} />,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    navData,
+    footerWidget: <NavUserSkeleton />,
+  },
+};