feat(client): event list

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

client/cms/src/stories/event-card.stories.ts

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { EventCardView } from '@/components/workbenchCards/event-card.view';
-
-const meta = {
-  title: 'Cards/EventCard',
-  component: EventCardView,
-} satisfies Meta<typeof EventCardView>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    type: 'official',
-    coverImage: "https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-watersplash.png?raw=true",
-    eventName: 'Nix CN Conference 26.05',
-    description: 'Event Description',
-    startTime: "2026-06-13T04:00:00.000Z",
-    endTime: "2026-06-14T04:00:00.000Z",
-  },
-};

client/cms/src/stories/events/event-card.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { EventCardSkeleton } from '@/components/events/event-card.skeleton';
+import { EventCardView } from '@/components/events/event-card.view';
+
+const meta = {
+  title: 'Events/EventCard',
+  component: EventCardView,
+} satisfies Meta<typeof EventCardView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    type: 'official',
+    coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-watersplash.png?raw=true',
+    eventName: 'Nix CN Conference 26.05',
+    description: 'Event Description',
+    startTime: new Date('2026-06-13T04:00:00.000Z'),
+    endTime: new Date('2026-06-14T04:00:00.000Z'),
+    onJoinEvent: () => { },
+  },
+};
+
+export const Loading: Story = {
+  render: () => <EventCardSkeleton />,
+  args: {
+    type: 'official',
+    coverImage: '',
+    eventName: '',
+    description: '',
+    startTime: new Date(0),
+    endTime: new Date(0),
+    onJoinEvent: () => { },
+  },
+};

client/cms/src/stories/events/event-grid.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { EventGridSkeleton } from '@/components/events/event-grid.skeleton';
+import { EventGridView } from '@/components/events/event-grid.view';
+
+const meta = {
+  title: 'Events/EventGrid',
+  component: EventGridView,
+} satisfies Meta<typeof EventGridView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    events: [
+      {
+        type: 'official',
+        coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-watersplash.png?raw=true',
+        eventName: 'Nix CN Conference 26.05',
+        description: 'Event Description',
+        startTime: new Date('2026-06-13T04:00:00.000Z'),
+        endTime: new Date('2026-06-14T04:00:00.000Z'),
+        onJoinEvent: () => { },
+      },
+      {
+        type: 'official',
+        coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-moonscape.png?raw=true',
+        eventName: 'Nix CN Conference 26.05',
+        description: 'Event Description',
+        startTime: new Date('2026-06-13T04:00:00.000Z'),
+        endTime: new Date('2026-06-14T04:00:00.000Z'),
+        onJoinEvent: () => { },
+      },
+      {
+        type: 'official',
+        coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-nineish-catppuccin-latte.png?raw=true',
+        eventName: 'Nix CN Conference 26.05',
+        description: 'Event Description',
+        startTime: new Date('2026-06-13T04:00:00.000Z'),
+        endTime: new Date('2026-06-14T04:00:00.000Z'),
+        onJoinEvent: () => { },
+      },
+      {
+        type: 'official',
+        coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nixos-wallpaper-catppuccin-macchiato.png?raw=true',
+        eventName: 'Nix CN Conference 26.05',
+        description: 'Event Description',
+        startTime: new Date('2026-06-13T04:00:00.000Z'),
+        endTime: new Date('2026-06-14T04:00:00.000Z'),
+        onJoinEvent: () => { },
+      },
+    ],
+  },
+};
+
+export const Skeleton: Story = {
+  render: () => <EventGridSkeleton />,
+  args: {
+    events: [],
+  },
+};

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

@@ -4,10 +4,10 @@ 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';
+import { user } from '../exampleUser';
 
 const meta = {
-  title: 'Navigation/Sidebar',
+  title: 'Layout/Sidebar',
   component: AppSidebar,
   decorators: [
     Story => (