chore: add storybook

Signed-off-by: Fernando Fernández <[email protected]>

Author: ferferga

.gitignore

@@ -94,3 +94,5 @@ sw.js
 
 # Debian build artifacts
 packaging/jellyfin-vue*
+
+*storybook.log

frontend/package.json

@@ -24,7 +24,8 @@
     "start": "vite",
     "serve": "vite preview",
     "prod": "npm run build && npm run serve",
-    "clean": "git clean -fxd"
+    "clean": "git clean -fxd",
+    "storybook": "storybook dev -p 6006 --config-dir storybook --no-open"
   },
   "dependencies": {
     "@fontsource-variable/figtree": "5.1.2",
@@ -53,15 +54,23 @@
     "vuetify": "3.7.4"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "3.2.4",
     "@iconify/json": "2.2.293",
     "@intlify/unplugin-vue-i18n": "4.0.0",
     "@jellyfin-vue/configs": "*",
     "@jellyfin-vue/vite-plugins": "*",
     "@rollup/plugin-virtual": "3.0.2",
+    "@storybook/addon-a11y": "8.5.1",
+    "@storybook/addon-essentials": "8.5.1",
+    "@storybook/addon-interactions": "8.5.1",
+    "@storybook/blocks": "8.5.1",
+    "@storybook/vue3": "8.5.1",
+    "@storybook/vue3-vite": "8.5.1",
     "@types/sortablejs": "1.15.8",
     "@vitejs/plugin-vue": "5.2.1",
     "browserslist": "4.24.4",
     "lightningcss": "1.28.2",
+    "storybook": "8.5.1",
     "unocss": "0.65.4",
     "unplugin-vue-components": "28.0.0",
     "unplugin-vue-router": "0.10.9",

frontend/storybook/main.ts

@@ -0,0 +1 @@
+export { default } from '@jellyfin-vue/configs/storybook';

frontend/storybook/stories/Playback/TrackList.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
+import TrackList from '#/components/Playback/TrackList.vue';
+
+// Mock data
+const mockAlbum = {
+  Id: '123',
+  Name: 'Test Album',
+  Type: 'MusicAlbum' as BaseItemKind
+};
+
+const mockTracks = [
+  {
+    Id: '1',
+    Name: 'Track 1',
+    IndexNumber: 1,
+    ParentIndexNumber: 1,
+    RunTimeTicks: 2_000_000_000,
+    Type: 'Audio',
+    Artists: ['Artist 1'],
+    AlbumArtist: 'Artist 1',
+    ArtistItems: [{ Id: 'artist1', Name: 'Artist 1' }]
+  },
+  {
+    Id: '2',
+    Name: 'Track 2',
+    IndexNumber: 2,
+    ParentIndexNumber: 1,
+    RunTimeTicks: 3_000_000_000,
+    Type: 'Audio',
+    Artists: ['Artist 2'],
+    AlbumArtist: 'Artist 1',
+    ArtistItems: [{ Id: 'artist2', Name: 'Artist 2' }]
+  }
+];
+
+const meta: Meta<typeof TrackList> = {
+  title: 'Components/Playback/TrackList',
+  component: TrackList,
+  tags: ['autodocs'],
+  args: {
+    item: mockAlbum,
+    tracks: mockTracks
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TrackList>;
+
+export const Default: Story = {
+  args: {
+    item: mockAlbum,
+    tracks: mockTracks
+  }
+};
+
+export const MultipleDiscs: Story = {
+  args: {
+    item: mockAlbum,
+    tracks: [
+      ...mockTracks,
+      {
+        Id: '3',
+        Name: 'Track 1 Disc 2',
+        IndexNumber: 1,
+        ParentIndexNumber: 2,
+        RunTimeTicks: 2_000_000_000,
+        Type: 'Audio',
+        Artists: ['Artist 1'],
+        AlbumArtist: 'Artist 1',
+        ArtistItems: [{ Id: 'artist1', Name: 'Artist 1' }]
+      }
+    ]
+  }
+};