+
),
diff --git a/apps/web/src/components/dashboard/StatCard.stories.tsx b/apps/web/src/components/dashboard/StatCard.stories.tsx
index 3c755a16d..9f0aa5e98 100644
--- a/apps/web/src/components/dashboard/StatCard.stories.tsx
+++ b/apps/web/src/components/dashboard/StatCard.stories.tsx
@@ -1,11 +1,18 @@
import type { Meta, StoryObj } from '@storybook/react';
import { StatCard } from './StatCard';
-import { Users, DollarSign, Activity } from 'lucide-react';
+import { Activity, Music, Users, DollarSign } from 'lucide-react';
const meta = {
title: 'Components/Dashboard/StatCard',
component: StatCard,
tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
} satisfies Meta
;
export default meta;
@@ -13,32 +20,32 @@ type Story = StoryObj;
export const Default: Story = {
args: {
- label: 'Total Users',
- value: '12,345',
- icon: ,
- trend: '+12%',
+ label: 'Total Plays',
+ value: '1.2M',
+ icon: ,
+ trend: '+12.5',
color: 'cyan',
- sparklineData: [50, 60, 55, 70, 65, 80, 75, 90],
+ sparklineData: [40, 30, 45, 50, 60, 75, 80],
},
};
export const NegativeTrend: Story = {
args: {
label: 'Revenue',
- value: '$4,200',
- icon: ,
- trend: '-5%',
+ value: '$432.50',
+ icon: ,
+ trend: '-5.2',
color: 'red',
- sparklineData: [90, 80, 70, 60, 50, 40],
+ sparklineData: [80, 75, 70, 65, 60, 55, 50],
},
};
export const NoTrend: Story = {
args: {
- label: 'Active Sessions',
- value: '342',
- icon: ,
- color: 'lime',
- sparklineData: [10, 20, 15, 25, 30, 20, 40],
+ label: 'Followers',
+ value: '5,432',
+ icon: ,
+ color: 'magenta',
+ sparklineData: [10, 20, 15, 25, 30, 40, 50],
},
};
diff --git a/apps/web/src/components/developer/APIPlaygroundView.stories.tsx b/apps/web/src/components/developer/APIPlaygroundView.stories.tsx
new file mode 100644
index 000000000..f93e3e4c6
--- /dev/null
+++ b/apps/web/src/components/developer/APIPlaygroundView.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { APIPlaygroundView } from './APIPlaygroundView';
+
+const meta: Meta = {
+ title: 'Components/Developer/APIPlaygroundView',
+ component: APIPlaygroundView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/developer/DeveloperDashboardView.stories.tsx b/apps/web/src/components/developer/DeveloperDashboardView.stories.tsx
new file mode 100644
index 000000000..e88a5472f
--- /dev/null
+++ b/apps/web/src/components/developer/DeveloperDashboardView.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DeveloperDashboardView } from './DeveloperDashboardView';
+import { ToastProvider } from '../../components/feedback/ToastProvider';
+
+const meta: Meta = {
+ title: 'Components/Developer/DeveloperDashboardView',
+ component: DeveloperDashboardView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/developer/WebhooksView.stories.tsx b/apps/web/src/components/developer/WebhooksView.stories.tsx
new file mode 100644
index 000000000..5c5a6731a
--- /dev/null
+++ b/apps/web/src/components/developer/WebhooksView.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { WebhooksView } from './WebhooksView';
+
+const meta: Meta = {
+ title: 'Components/Developer/WebhooksView',
+ component: WebhooksView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Empty: Story = { name: 'Vide' };
diff --git a/apps/web/src/components/developer/modals/CreateAPIKeyModal.stories.tsx b/apps/web/src/components/developer/modals/CreateAPIKeyModal.stories.tsx
new file mode 100644
index 000000000..6898a4f1c
--- /dev/null
+++ b/apps/web/src/components/developer/modals/CreateAPIKeyModal.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CreateAPIKeyModal } from './CreateAPIKeyModal';
+import { fn } from '@storybook/test';
+
+const meta: Meta = {
+ title: 'Components/Developer/Modals/CreateAPIKeyModal',
+ component: CreateAPIKeyModal,
+ parameters: { layout: 'centered' },
+ tags: ['autodocs'],
+ args: { onClose: fn() },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Created: Story = { name: 'Clé créée' };
diff --git a/apps/web/src/components/education/CourseDetailView.stories.tsx b/apps/web/src/components/education/CourseDetailView.stories.tsx
new file mode 100644
index 000000000..a9e07f985
--- /dev/null
+++ b/apps/web/src/components/education/CourseDetailView.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CourseDetailView } from './CourseDetailView';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+const meta: Meta = {
+ title: 'Components/Education/CourseDetailView',
+ component: CourseDetailView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Enrolled: Story = { name: 'Inscrit' };
diff --git a/apps/web/src/components/education/CourseLearningView.stories.tsx b/apps/web/src/components/education/CourseLearningView.stories.tsx
new file mode 100644
index 000000000..1d7cec05d
--- /dev/null
+++ b/apps/web/src/components/education/CourseLearningView.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CourseLearningView } from './CourseLearningView';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+const meta: Meta = {
+ title: 'Components/Education/CourseLearningView',
+ component: CourseLearningView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Complete: Story = { name: 'Terminé' };
diff --git a/apps/web/src/components/filters/FilterBar.stories.tsx b/apps/web/src/components/filters/FilterBar.stories.tsx
new file mode 100644
index 000000000..b55ac74e3
--- /dev/null
+++ b/apps/web/src/components/filters/FilterBar.stories.tsx
@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FilterBar } from './FilterBar';
+
+const mockFilters = {
+ filters: [
+ {
+ id: 'genre',
+ label: 'Genre',
+ type: 'select' as const,
+ options: [
+ { label: 'All Genres', value: '' },
+ { label: 'Electronic', value: 'electronic' },
+ { label: 'Hip Hop', value: 'hiphop' },
+ { label: 'Rock', value: 'rock' },
+ ],
+ value: '',
+ },
+ {
+ id: 'year',
+ label: 'Year',
+ type: 'select' as const,
+ options: [
+ { label: 'All Years', value: '' },
+ { label: '2024', value: '2024' },
+ { label: '2023', value: '2023' },
+ { label: '2022', value: '2022' },
+ ],
+ value: '',
+ },
+ ],
+ onFilterChange: () => { },
+};
+
+const mockSort = {
+ options: [
+ { label: 'Newest', value: 'newest' },
+ { label: 'Oldest', value: 'oldest' },
+ { label: 'Most Popular', value: 'popular' },
+ { label: 'A-Z', value: 'alpha' },
+ ],
+ value: 'newest',
+ onChange: () => { },
+};
+
+const meta: Meta = {
+ title: 'Components/Filters/FilterBar',
+ component: FilterBar,
+ parameters: {
+ layout: 'padded',
+ },
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ filters: mockFilters,
+ sort: mockSort,
+ },
+};
+
+export const FiltersOnly: Story = {
+ args: {
+ filters: mockFilters,
+ },
+};
+
+export const SortOnly: Story = {
+ args: {
+ sort: mockSort,
+ },
+};
+
+export const NotCollapsible: Story = {
+ args: {
+ filters: mockFilters,
+ sort: mockSort,
+ collapsible: false,
+ },
+};
+
+export const CollapsedByDefault: Story = {
+ args: {
+ filters: mockFilters,
+ sort: mockSort,
+ collapsible: true,
+ defaultOpen: false,
+ },
+};
diff --git a/apps/web/src/components/gamification/AchievementCard.stories.tsx b/apps/web/src/components/gamification/AchievementCard.stories.tsx
new file mode 100644
index 000000000..fce34477e
--- /dev/null
+++ b/apps/web/src/components/gamification/AchievementCard.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AchievementCard } from './AchievementCard';
+
+const meta: Meta = {
+ title: 'Components/Gamification/AchievementCard',
+ component: AchievementCard,
+ parameters: { layout: 'padded' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Locked: Story = { name: 'Verrouillé' };
+export const Unlocked: Story = { name: 'Déverrouillé' };
diff --git a/apps/web/src/components/gamification/AchievementsView.stories.tsx b/apps/web/src/components/gamification/AchievementsView.stories.tsx
new file mode 100644
index 000000000..76860bca8
--- /dev/null
+++ b/apps/web/src/components/gamification/AchievementsView.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AchievementsView } from './AchievementsView';
+
+const meta: Meta = {
+ title: 'Components/Gamification/AchievementsView',
+ component: AchievementsView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Empty: Story = { name: 'Vide' };
diff --git a/apps/web/src/components/gamification/LeaderboardView.stories.tsx b/apps/web/src/components/gamification/LeaderboardView.stories.tsx
new file mode 100644
index 000000000..8ba204047
--- /dev/null
+++ b/apps/web/src/components/gamification/LeaderboardView.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LeaderboardView } from './LeaderboardView';
+
+const meta: Meta = {
+ title: 'Components/Gamification/LeaderboardView',
+ component: LeaderboardView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/gamification/XPBar.stories.tsx b/apps/web/src/components/gamification/XPBar.stories.tsx
new file mode 100644
index 000000000..38e3a842e
--- /dev/null
+++ b/apps/web/src/components/gamification/XPBar.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { XPBar } from './XPBar';
+
+const meta: Meta = {
+ title: 'Components/Gamification/XPBar',
+ component: XPBar,
+ parameters: { layout: 'padded' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const LevelUp: Story = { name: 'Montée de niveau' };
diff --git a/apps/web/src/components/inventory/EquipmentDetailView.stories.tsx b/apps/web/src/components/inventory/EquipmentDetailView.stories.tsx
new file mode 100644
index 000000000..42076eefc
--- /dev/null
+++ b/apps/web/src/components/inventory/EquipmentDetailView.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EquipmentDetailView } from './EquipmentDetailView';
+import { ToastProvider } from '../../components/feedback/ToastProvider';
+
+const meta: Meta = {
+ title: 'Components/Inventory/EquipmentDetailView',
+ component: EquipmentDetailView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/library/playlists/PlaylistsView.stories.tsx b/apps/web/src/components/library/playlists/PlaylistsView.stories.tsx
new file mode 100644
index 000000000..cfe6e4472
--- /dev/null
+++ b/apps/web/src/components/library/playlists/PlaylistsView.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlaylistsView } from './PlaylistsView';
+
+const meta: Meta = {
+ title: 'Components/Library/Playlists/PlaylistsView',
+ component: PlaylistsView,
+ parameters: { layout: 'padded' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/library/playlists/QueueView.stories.tsx b/apps/web/src/components/library/playlists/QueueView.stories.tsx
new file mode 100644
index 000000000..992b5f8b3
--- /dev/null
+++ b/apps/web/src/components/library/playlists/QueueView.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueueView } from './QueueView';
+
+/**
+ * QueueView - Vue de la file d'attente
+ *
+ * Vue pleine page de la queue avec gestion
+ * complĂšte des tracks.
+ */
+const meta: Meta = {
+ title: 'Components/Library/Playlists/QueueView',
+ component: QueueView,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Vue complĂšte de la queue avec actions.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut avec tracks.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat vide.
+ */
+export const Empty: Story = {
+ name: 'Vide',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Message affiché quand la queue est vide.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.stories.tsx b/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.stories.tsx
new file mode 100644
index 000000000..5dd48b243
--- /dev/null
+++ b/apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.stories.tsx
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { SaveQueueAsPlaylistModal } from './SaveQueueAsPlaylistModal';
+
+/**
+ * SaveQueueAsPlaylistModal - Modal de sauvegarde de queue
+ *
+ * Modal permettant de sauvegarder la queue actuelle
+ * comme nouvelle playlist.
+ */
+const meta: Meta = {
+ title: 'Components/Library/Playlists/SaveQueueAsPlaylistModal',
+ component: SaveQueueAsPlaylistModal,
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'Modal de sauvegarde de queue en playlist.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ args: {
+ onClose: fn(),
+ onSave: fn(),
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat de sauvegarde en cours.
+ */
+export const Saving: Story = {
+ name: 'Sauvegarde',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Spinner pendant la création de la playlist.',
+ },
+ },
+ },
+};
+
+/**
+ * Sauvegarde réussie.
+ */
+export const Success: Story = {
+ name: 'SuccĂšs',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Message de confirmation aprÚs création.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/components/marketplace/LicenceCard.stories.tsx b/apps/web/src/components/marketplace/LicenceCard.stories.tsx
new file mode 100644
index 000000000..87f222370
--- /dev/null
+++ b/apps/web/src/components/marketplace/LicenceCard.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LicenceCard } from './LicenceCard';
+
+const meta: Meta = {
+ title: 'Components/Marketplace/LicenceCard',
+ component: LicenceCard,
+ parameters: { layout: 'padded' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Basic: Story = { name: 'Basic' };
+export const Pro: Story = { name: 'Pro' };
+export const Exclusive: Story = { name: 'Exclusive' };
diff --git a/apps/web/src/components/marketplace/ProductDetailView.stories.tsx b/apps/web/src/components/marketplace/ProductDetailView.stories.tsx
new file mode 100644
index 000000000..8e5b0b23c
--- /dev/null
+++ b/apps/web/src/components/marketplace/ProductDetailView.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProductDetailView } from './ProductDetailView';
+
+const meta: Meta = {
+ title: 'Components/Marketplace/ProductDetailView',
+ component: ProductDetailView,
+ parameters: { layout: 'padded' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Loading: Story = { name: 'Chargement' };
+export const OutOfStock: Story = { name: 'Rupture de stock' };
diff --git a/apps/web/src/components/monitoring/MonitoringDashboard.stories.tsx b/apps/web/src/components/monitoring/MonitoringDashboard.stories.tsx
new file mode 100644
index 000000000..b67217e5c
--- /dev/null
+++ b/apps/web/src/components/monitoring/MonitoringDashboard.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MonitoringDashboard } from './MonitoringDashboard';
+import { ToastProvider } from '../../components/feedback/ToastProvider';
+
+const meta: Meta = {
+ title: 'Components/Monitoring/MonitoringDashboard',
+ component: MonitoringDashboard,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/navigation/Breadcrumbs.stories.tsx b/apps/web/src/components/navigation/Breadcrumbs.stories.tsx
new file mode 100644
index 000000000..59dfab6b7
--- /dev/null
+++ b/apps/web/src/components/navigation/Breadcrumbs.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumbs } from './Breadcrumbs';
+import { FileText, Music } from 'lucide-react';
+
+const meta: Meta = {
+ title: 'Components/Navigation/Breadcrumbs',
+ component: Breadcrumbs,
+ parameters: {
+ layout: 'padded',
+ },
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ items: [
+ { label: 'Library', href: '/library' },
+ { label: 'Playlists', href: '/library/playlists' },
+ { label: 'Summer Vibes' },
+ ],
+ },
+};
+
+export const WithIcons: Story = {
+ args: {
+ items: [
+ { label: 'Documents', href: '/docs', icon: },
+ { label: 'Music', href: '/docs/music', icon: },
+ { label: 'Track Details' },
+ ],
+ },
+};
+
+export const WithoutHome: Story = {
+ args: {
+ items: [
+ { label: 'Settings', href: '/settings' },
+ { label: 'Privacy' },
+ ],
+ showHome: false,
+ },
+};
+
+export const SingleItem: Story = {
+ args: {
+ items: [
+ { label: 'Dashboard' },
+ ],
+ showHome: false,
+ },
+};
diff --git a/apps/web/src/components/navigation/Pagination.stories.tsx b/apps/web/src/components/navigation/Pagination.stories.tsx
new file mode 100644
index 000000000..4a5ac3452
--- /dev/null
+++ b/apps/web/src/components/navigation/Pagination.stories.tsx
@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Pagination } from './Pagination';
+import { useState } from 'react';
+
+const meta: Meta = {
+ title: 'Components/Navigation/Pagination',
+ component: Pagination,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ onPageChange: { action: 'onPageChange' },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ currentPage: 1,
+ totalPages: 10,
+ },
+};
+
+export const MiddlePage: Story = {
+ args: {
+ currentPage: 5,
+ totalPages: 10,
+ },
+};
+
+export const LastPage: Story = {
+ args: {
+ currentPage: 10,
+ totalPages: 10,
+ },
+};
+
+export const FewPages: Story = {
+ args: {
+ currentPage: 2,
+ totalPages: 3,
+ },
+};
+
+export const WithFirstLast: Story = {
+ args: {
+ currentPage: 5,
+ totalPages: 20,
+ showFirstLast: true,
+ },
+};
+
+export const WithItemsInfo: Story = {
+ args: {
+ currentPage: 2,
+ totalPages: 10,
+ totalItems: 95,
+ itemsPerPage: 10,
+ showItemsInfo: true,
+ },
+};
+
+// Interactive story
+const InteractivePagination = () => {
+ const [page, setPage] = useState(1);
+ return (
+
+ );
+};
+
+export const Interactive: Story = {
+ render: () => ,
+};
diff --git a/apps/web/src/components/player/FullPlayer.stories.tsx b/apps/web/src/components/player/FullPlayer.stories.tsx
new file mode 100644
index 000000000..cfe82f87d
--- /dev/null
+++ b/apps/web/src/components/player/FullPlayer.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { FullPlayer } from './FullPlayer';
+
+/**
+ * FullPlayer - Lecteur plein Ă©cran
+ *
+ * Vue immersive du lecteur avec artwork, waveform,
+ * paroles et contrÎles avancés.
+ */
+const meta: Meta = {
+ title: 'Components/Player/FullPlayer',
+ component: FullPlayer,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Lecteur audio plein Ă©cran avec artwork et waveform.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ args: {
+ onClose: fn(),
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Avec panneau de queue visible.
+ */
+export const WithQueue: Story = {
+ name: 'Avec Queue',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche le panneau de queue à cÎté du player.',
+ },
+ },
+ },
+};
+
+/**
+ * Avec paroles affichées.
+ */
+export const WithLyrics: Story = {
+ name: 'Avec Paroles',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche les paroles synchronisées.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/components/player/LyricsPanel.stories.tsx b/apps/web/src/components/player/LyricsPanel.stories.tsx
new file mode 100644
index 000000000..05d3a9d87
--- /dev/null
+++ b/apps/web/src/components/player/LyricsPanel.stories.tsx
@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LyricsPanel } from './LyricsPanel';
+
+/**
+ * LyricsPanel - Panneau de paroles
+ *
+ * Affichage des paroles synchronisées avec
+ * la lecture audio actuelle.
+ */
+const meta: Meta = {
+ title: 'Components/Player/LyricsPanel',
+ component: LyricsPanel,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'Panneau de paroles synchronisées avec le player.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut avec paroles.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Paroles synchronisées en cours.
+ */
+export const Synced: Story = {
+ name: 'Synchronisé',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Paroles avec mise en surbrillance synchronisée.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat vide - aucune parole.
+ */
+export const Empty: Story = {
+ name: 'Vide',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Message affiché quand aucune parole n\'est disponible.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/components/player/QueuePanel.stories.tsx b/apps/web/src/components/player/QueuePanel.stories.tsx
new file mode 100644
index 000000000..143de5764
--- /dev/null
+++ b/apps/web/src/components/player/QueuePanel.stories.tsx
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { QueuePanel } from './QueuePanel';
+
+/**
+ * QueuePanel - Panneau de file d'attente
+ *
+ * Liste des tracks en file d'attente avec
+ * réorganisation par drag-and-drop.
+ */
+const meta: Meta = {
+ title: 'Components/Player/QueuePanel',
+ component: QueuePanel,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'Panneau de queue avec drag-and-drop.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut avec tracks.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat vide.
+ */
+export const Empty: Story = {
+ name: 'Vide',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Message affiché quand la queue est vide.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat de rĂ©organisation.
+ */
+export const Reordering: Story = {
+ name: 'RĂ©organisation',
+ parameters: {
+ docs: {
+ description: {
+ story: 'DĂ©monstration du drag-and-drop.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/components/search/GlobalSearchBar.stories.tsx b/apps/web/src/components/search/GlobalSearchBar.stories.tsx
new file mode 100644
index 000000000..3748a4a22
--- /dev/null
+++ b/apps/web/src/components/search/GlobalSearchBar.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { GlobalSearchBar } from './GlobalSearchBar';
+
+const meta: Meta = {
+ title: 'Components/Search/GlobalSearchBar',
+ component: GlobalSearchBar,
+ parameters: { layout: 'centered' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Focused: Story = { name: 'Focus' };
+export const WithSuggestions: Story = { name: 'Avec suggestions' };
diff --git a/apps/web/src/components/settings/accessibility/AccessibilitySettingsView.stories.tsx b/apps/web/src/components/settings/accessibility/AccessibilitySettingsView.stories.tsx
new file mode 100644
index 000000000..1351e6b33
--- /dev/null
+++ b/apps/web/src/components/settings/accessibility/AccessibilitySettingsView.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AccessibilitySettingsView } from './AccessibilitySettingsView';
+
+/**
+ * AccessibilitySettingsView - ParamÚtres d'accessibilité
+ *
+ * Section des options d'accessibilité : contraste,
+ * taille de police, réduction des animations.
+ */
+const meta: Meta = {
+ title: 'Components/Settings/Accessibility/AccessibilitySettingsView',
+ component: AccessibilitySettingsView,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'ParamÚtres d\'accessibilité avec contraste et taille de police.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut des paramĂštres d'accessibilitĂ©.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
diff --git a/apps/web/src/components/settings/account/AccountSettings.stories.tsx b/apps/web/src/components/settings/account/AccountSettings.stories.tsx
new file mode 100644
index 000000000..585bb9348
--- /dev/null
+++ b/apps/web/src/components/settings/account/AccountSettings.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AccountSettings } from './AccountSettings';
+
+/**
+ * AccountSettings - ParamĂštres du compte
+ *
+ * Section principale des paramĂštres de compte avec
+ * gestion email, nom d'utilisateur et suppression.
+ */
+const meta: Meta = {
+ title: 'Components/Settings/Account/AccountSettings',
+ component: AccountSettings,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'ParamĂštres de compte avec actions email, username, suppression.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
diff --git a/apps/web/src/components/settings/account/ChangeEmailModal.stories.tsx b/apps/web/src/components/settings/account/ChangeEmailModal.stories.tsx
new file mode 100644
index 000000000..adc48421d
--- /dev/null
+++ b/apps/web/src/components/settings/account/ChangeEmailModal.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { ChangeEmailModal } from './ChangeEmailModal';
+
+/**
+ * ChangeEmailModal - Modal de changement d'email
+ *
+ * Modal permettant Ă l'utilisateur de changer son adresse email
+ * avec validation et envoi de confirmation.
+ */
+const meta: Meta = {
+ title: 'Components/Settings/Account/ChangeEmailModal',
+ component: ChangeEmailModal,
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'Modal de changement d\'email avec validation.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ args: {
+ onClose: fn(),
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut de la modal.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat d'envoi en cours.
+ */
+export const Sending: Story = {
+ name: 'Envoi',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Spinner affiché pendant l\'envoi de la demande.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat envoyĂ© avec succĂšs.
+ */
+export const Sent: Story = {
+ name: 'Envoyé',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Message de confirmation aprÚs envoi réussi.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/components/settings/account/ChangeUsernameModal.stories.tsx b/apps/web/src/components/settings/account/ChangeUsernameModal.stories.tsx
new file mode 100644
index 000000000..05fc909f6
--- /dev/null
+++ b/apps/web/src/components/settings/account/ChangeUsernameModal.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { ChangeUsernameModal } from './ChangeUsernameModal';
+
+/**
+ * ChangeUsernameModal - Modal de changement de nom d'utilisateur
+ *
+ * Modal permettant de changer le nom d'utilisateur avec
+ * vérification de disponibilité en temps réel.
+ */
+const meta: Meta = {
+ title: 'Components/Settings/Account/ChangeUsernameModal',
+ component: ChangeUsernameModal,
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'Modal de changement de nom d\'utilisateur avec vérification.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ args: {
+ onClose: fn(),
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut de la modal.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat de vĂ©rification de disponibilitĂ©.
+ */
+export const Checking: Story = {
+ name: 'VĂ©rification',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Spinner pendant la vérification de disponibilité.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat nom disponible.
+ */
+export const Available: Story = {
+ name: 'Disponible',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Indicateur vert quand le nom est disponible.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/components/settings/account/DeleteAccountView.stories.tsx b/apps/web/src/components/settings/account/DeleteAccountView.stories.tsx
new file mode 100644
index 000000000..20ca748e2
--- /dev/null
+++ b/apps/web/src/components/settings/account/DeleteAccountView.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DeleteAccountView } from './DeleteAccountView';
+
+/**
+ * DeleteAccountView - Vue de suppression de compte
+ *
+ * Section permettant la suppression définitive du compte
+ * avec avertissements et confirmation multiple.
+ */
+const meta: Meta = {
+ title: 'Components/Settings/Account/DeleteAccountView',
+ component: DeleteAccountView,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'Zone de suppression de compte avec confirmation obligatoire.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat de confirmation.
+ */
+export const Confirm: Story = {
+ name: 'Confirmation',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Modal de confirmation avant suppression définitive.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/components/settings/appearance/AppearanceSettingsView.stories.tsx b/apps/web/src/components/settings/appearance/AppearanceSettingsView.stories.tsx
new file mode 100644
index 000000000..55beadb89
--- /dev/null
+++ b/apps/web/src/components/settings/appearance/AppearanceSettingsView.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AppearanceSettingsView } from './AppearanceSettingsView';
+
+/**
+ * AppearanceSettingsView - ParamĂštres d'apparence
+ *
+ * Section des préférences visuelles : thÚme, couleur d'accent,
+ * animations et densité de l'interface.
+ */
+const meta: Meta = {
+ title: 'Components/Settings/Appearance/AppearanceSettingsView',
+ component: AppearanceSettingsView,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'ParamĂštres d\'apparence avec thĂšme, couleurs et animations.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut des paramĂštres d'apparence.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
diff --git a/apps/web/src/components/settings/data/DataExportView.stories.tsx b/apps/web/src/components/settings/data/DataExportView.stories.tsx
new file mode 100644
index 000000000..5e28776e7
--- /dev/null
+++ b/apps/web/src/components/settings/data/DataExportView.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DataExportView } from './DataExportView';
+
+const meta: Meta = {
+ title: 'Components/Settings/Data/DataExportView',
+ component: DataExportView,
+ parameters: { layout: 'padded' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Exporting: Story = { name: 'Export en cours' };
+export const Ready: Story = { name: 'PrĂȘt' };
diff --git a/apps/web/src/components/settings/security/SecuritySettings.stories.tsx b/apps/web/src/components/settings/security/SecuritySettings.stories.tsx
new file mode 100644
index 000000000..324e66cfc
--- /dev/null
+++ b/apps/web/src/components/settings/security/SecuritySettings.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SecuritySettings } from './SecuritySettings';
+
+/**
+ * SecuritySettings - ParamÚtres de sécurité
+ *
+ * Section des paramÚtres de sécurité incluant gestion
+ * des mots de passe, 2FA, et sessions actives.
+ */
+const meta: Meta = {
+ title: 'Components/Settings/Security/SecuritySettings',
+ component: SecuritySettings,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'ParamÚtres de sécurité avec 2FA, mot de passe et sessions.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut des paramĂštres de sĂ©curitĂ©.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat de mise Ă jour en cours.
+ */
+export const Updating: Story = {
+ name: 'Mise Ă jour',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Feedback visuel pendant la mise à jour des paramÚtres de sécurité.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/components/settings/security/SessionManagement.stories.tsx b/apps/web/src/components/settings/security/SessionManagement.stories.tsx
new file mode 100644
index 000000000..954823d14
--- /dev/null
+++ b/apps/web/src/components/settings/security/SessionManagement.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SessionManagement } from './SessionManagement';
+
+/**
+ * SessionManagement - Gestion des sessions
+ *
+ * Composant affichant les sessions actives avec
+ * option de déconnexion individuelle ou globale.
+ */
+const meta: Meta = {
+ title: 'Components/Settings/Security/SessionManagement',
+ component: SessionManagement,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'Liste des sessions actives avec actions de déconnexion.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut avec sessions actives.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat avec plusieurs sessions.
+ */
+export const WithSessions: Story = {
+ name: 'Avec sessions',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche plusieurs sessions actives sur différents appareils.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/components/settings/security/TwoFactorSetup.stories.tsx b/apps/web/src/components/settings/security/TwoFactorSetup.stories.tsx
new file mode 100644
index 000000000..44d6c624d
--- /dev/null
+++ b/apps/web/src/components/settings/security/TwoFactorSetup.stories.tsx
@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { within, userEvent } from '@storybook/test';
+import { TwoFactorSetup } from './TwoFactorSetup';
+
+/**
+ * TwoFactorSetup - Configuration 2FA
+ *
+ * Assistant multi-Ă©tapes pour configurer l'authentification
+ * Ă deux facteurs avec QR code et codes de backup.
+ */
+const meta: Meta = {
+ title: 'Components/Settings/Security/TwoFactorSetup',
+ component: TwoFactorSetup,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'Assistant de configuration 2FA en 3 étapes: choix de méthode, scan QR code, codes de backup.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ args: {
+ onBack: fn(),
+ onComplete: fn(),
+ },
+ argTypes: {
+ onBack: {
+ description: 'Callback appelé quand l\'utilisateur revient en arriÚre',
+ action: 'onBack',
+ },
+ onComplete: {
+ description: 'Callback appelé quand la configuration est terminée',
+ action: 'onComplete',
+ },
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătape 1 - Choix de la mĂ©thode d'authentification.
+ */
+export const Step1_ChooseMethod: Story = {
+ name: 'Ătape 1: Choix de mĂ©thode',
+ parameters: {
+ docs: {
+ description: {
+ story: 'PremiĂšre Ă©tape: choisir entre Authenticator App (TOTP) ou SMS.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătape 2 - Scan du QR code et vĂ©rification.
+ */
+export const Step2_QRCode: Story = {
+ name: 'Ătape 2: QR Code',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Cliquer sur "Authenticator App" pour passer Ă l'Ă©tape 2
+ const totpOption = canvas.getByText(/authenticator app/i);
+ await userEvent.click(totpOption);
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'DeuxiÚme étape: scanner le QR code et entrer le code de vérification.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătape 3 - Affichage des codes de backup.
+ */
+export const Step3_BackupCodes: Story = {
+ name: 'Ătape 3: Codes de backup',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Naviguer vers l'Ă©tape 3 (simulation)
+ // Note: Cela nécessite que l'API mock retourne des données valides
+ const totpOption = canvas.getByText(/authenticator app/i);
+ await userEvent.click(totpOption);
+
+ // Attendre le QR code et entrer un code
+ // Cette simulation est limitée sans mocks complets
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'TroisiÚme étape: sauvegarder les codes de backup avec options copier/télécharger.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/components/social/CreatePostModal.stories.tsx b/apps/web/src/components/social/CreatePostModal.stories.tsx
new file mode 100644
index 000000000..c333ecb8d
--- /dev/null
+++ b/apps/web/src/components/social/CreatePostModal.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { CreatePostModal } from './CreatePostModal';
+
+const meta: Meta = {
+ title: 'Components/Social/CreatePostModal',
+ component: CreatePostModal,
+ parameters: { layout: 'centered' },
+ tags: ['autodocs'],
+ args: { onClose: fn() },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Posting: Story = { name: 'Envoi' };
diff --git a/apps/web/src/components/social/ExploreView.stories.tsx b/apps/web/src/components/social/ExploreView.stories.tsx
new file mode 100644
index 000000000..ff9eef60b
--- /dev/null
+++ b/apps/web/src/components/social/ExploreView.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ExploreView } from './ExploreView';
+
+const meta: Meta = {
+ title: 'Components/Social/ExploreView',
+ component: ExploreView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/social/FeedView.stories.tsx b/apps/web/src/components/social/FeedView.stories.tsx
new file mode 100644
index 000000000..90d8f7ed7
--- /dev/null
+++ b/apps/web/src/components/social/FeedView.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeedView } from './FeedView';
+
+const meta: Meta = {
+ title: 'Components/Social/FeedView',
+ component: FeedView,
+ parameters: { layout: 'padded' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Loading: Story = { name: 'Chargement' };
+export const Empty: Story = { name: 'Vide' };
diff --git a/apps/web/src/components/social/connections/ConnectionsView.stories.tsx b/apps/web/src/components/social/connections/ConnectionsView.stories.tsx
new file mode 100644
index 000000000..b62785ef8
--- /dev/null
+++ b/apps/web/src/components/social/connections/ConnectionsView.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConnectionsView } from './ConnectionsView';
+
+const meta: Meta = {
+ title: 'Components/Social/ConnectionsView',
+ component: ConnectionsView,
+ parameters: { layout: 'padded' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Empty: Story = { name: 'Vide' };
diff --git a/apps/web/src/components/studio/GoLiveView.stories.tsx b/apps/web/src/components/studio/GoLiveView.stories.tsx
new file mode 100644
index 000000000..6e3e0d5a6
--- /dev/null
+++ b/apps/web/src/components/studio/GoLiveView.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { GoLiveView } from './GoLiveView';
+
+const meta: Meta = {
+ title: 'Components/Studio/GoLiveView',
+ component: GoLiveView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Setup: Story = { name: 'Configuration' };
+export const Live: Story = { name: 'En direct' };
+export const Ended: Story = { name: 'Terminé' };
diff --git a/apps/web/src/components/studio/projects/CreateProjectModal.stories.tsx b/apps/web/src/components/studio/projects/CreateProjectModal.stories.tsx
new file mode 100644
index 000000000..40ee4f210
--- /dev/null
+++ b/apps/web/src/components/studio/projects/CreateProjectModal.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CreateProjectModal } from './CreateProjectModal';
+import { fn } from '@storybook/test';
+
+const meta: Meta = {
+ title: 'Components/Studio/Projects/CreateProjectModal',
+ component: CreateProjectModal,
+ parameters: { layout: 'centered' },
+ tags: ['autodocs'],
+ args: { onClose: fn() },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Creating: Story = { name: 'Création' };
diff --git a/apps/web/src/components/studio/projects/ProjectDetailView.stories.tsx b/apps/web/src/components/studio/projects/ProjectDetailView.stories.tsx
new file mode 100644
index 000000000..2b7d6a721
--- /dev/null
+++ b/apps/web/src/components/studio/projects/ProjectDetailView.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProjectDetailView } from './ProjectDetailView';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+const meta: Meta = {
+ title: 'Components/Studio/Projects/ProjectDetailView',
+ component: ProjectDetailView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Loading: Story = { name: 'Chargement' };
diff --git a/apps/web/src/components/upload/BulkUploadModal.stories.tsx b/apps/web/src/components/upload/BulkUploadModal.stories.tsx
new file mode 100644
index 000000000..9d0d9a886
--- /dev/null
+++ b/apps/web/src/components/upload/BulkUploadModal.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { BulkUploadModal } from './BulkUploadModal';
+
+const meta: Meta = {
+ title: 'Components/Upload/BulkUploadModal',
+ component: BulkUploadModal,
+ parameters: { layout: 'centered' },
+ tags: ['autodocs'],
+ args: { onClose: fn() },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Uploading: Story = { name: 'Upload en cours' };
+export const Complete: Story = { name: 'Terminé' };
diff --git a/apps/web/src/components/upload/FileUploadZone.stories.tsx b/apps/web/src/components/upload/FileUploadZone.stories.tsx
new file mode 100644
index 000000000..17d316bfe
--- /dev/null
+++ b/apps/web/src/components/upload/FileUploadZone.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FileUploadZone } from './FileUploadZone';
+
+const meta: Meta = {
+ title: 'Components/Upload/FileUploadZone',
+ component: FileUploadZone,
+ parameters: { layout: 'centered' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Dragging: Story = { name: 'Drag en cours' };
+export const Processing: Story = { name: 'Traitement' };
diff --git a/apps/web/src/components/upload/UploadProgressBar.stories.tsx b/apps/web/src/components/upload/UploadProgressBar.stories.tsx
new file mode 100644
index 000000000..8564e5413
--- /dev/null
+++ b/apps/web/src/components/upload/UploadProgressBar.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { UploadProgressBar } from './UploadProgressBar';
+
+const meta: Meta = {
+ title: 'Components/Upload/UploadProgressBar',
+ component: UploadProgressBar,
+ parameters: { layout: 'centered' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Complete: Story = { name: 'Terminé' };
+export const Error: Story = { name: 'Erreur' };
diff --git a/apps/web/src/components/upload/metadata/CoverArtUploadModal.stories.tsx b/apps/web/src/components/upload/metadata/CoverArtUploadModal.stories.tsx
new file mode 100644
index 000000000..6d5e1b437
--- /dev/null
+++ b/apps/web/src/components/upload/metadata/CoverArtUploadModal.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { CoverArtUploadModal } from './CoverArtUploadModal';
+
+const meta: Meta = {
+ title: 'Components/Upload/CoverArtUploadModal',
+ component: CoverArtUploadModal,
+ parameters: { layout: 'centered' },
+ tags: ['autodocs'],
+ args: { onClose: fn() },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Uploading: Story = { name: 'Upload' };
+export const Preview: Story = { name: 'Prévisualisation' };
diff --git a/apps/web/src/components/upload/metadata/LyricsEditorModal.stories.tsx b/apps/web/src/components/upload/metadata/LyricsEditorModal.stories.tsx
new file mode 100644
index 000000000..8c8bceb86
--- /dev/null
+++ b/apps/web/src/components/upload/metadata/LyricsEditorModal.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LyricsEditorModal } from './LyricsEditorModal';
+import { fn } from '@storybook/test';
+
+const meta: Meta = {
+ title: 'Components/Upload/Metadata/LyricsEditorModal',
+ component: LyricsEditorModal,
+ parameters: { layout: 'centered' },
+ tags: ['autodocs'],
+ args: { onClose: fn() },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Syncing: Story = { name: 'Synchronisation' };
diff --git a/apps/web/src/components/upload/metadata/MetadataEditor.stories.tsx b/apps/web/src/components/upload/metadata/MetadataEditor.stories.tsx
new file mode 100644
index 000000000..87de5d891
--- /dev/null
+++ b/apps/web/src/components/upload/metadata/MetadataEditor.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MetadataEditor } from './MetadataEditor';
+
+const meta: Meta = {
+ title: 'Components/Upload/MetadataEditor',
+ component: MetadataEditor,
+ parameters: { layout: 'padded' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const WithData: Story = { name: 'Avec données' };
+export const Saving: Story = { name: 'Sauvegarde' };
diff --git a/apps/web/src/components/upload/metadata/MetadataForm.stories.tsx b/apps/web/src/components/upload/metadata/MetadataForm.stories.tsx
new file mode 100644
index 000000000..caa107409
--- /dev/null
+++ b/apps/web/src/components/upload/metadata/MetadataForm.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MetadataForm } from './MetadataForm';
+
+const meta: Meta = {
+ title: 'Components/Upload/Metadata/MetadataForm',
+ component: MetadataForm,
+ parameters: { layout: 'padded' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const WithErrors: Story = { name: 'Avec erreurs' };
diff --git a/apps/web/src/components/views/AdminView.stories.tsx b/apps/web/src/components/views/AdminView.stories.tsx
new file mode 100644
index 000000000..f6ad29984
--- /dev/null
+++ b/apps/web/src/components/views/AdminView.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AdminView } from './AdminView';
+
+/**
+ * AdminView - Vue principale d'administration
+ *
+ * Layout avec sidebar de navigation et zone de contenu
+ * pour basculer entre les différentes vues admin.
+ */
+const meta: Meta = {
+ title: 'Components/Views/AdminView',
+ component: AdminView,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Vue conteneur admin avec navigation sidebar vers sous-vues.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ currentSubView: {
+ control: 'select',
+ options: ['dashboard', 'users', 'moderation', 'audit', 'settings'],
+ description: 'Sous-vue à afficher par défaut',
+ },
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Vue dashboard par défaut.
+ */
+export const Default: Story = {
+ name: 'Par défaut (Dashboard)',
+ args: {
+ currentSubView: 'dashboard',
+ },
+};
diff --git a/apps/web/src/components/views/AnalyticsView.stories.tsx b/apps/web/src/components/views/AnalyticsView.stories.tsx
new file mode 100644
index 000000000..16874855f
--- /dev/null
+++ b/apps/web/src/components/views/AnalyticsView.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AnalyticsView } from './AnalyticsView';
+
+const meta: Meta = {
+ title: 'Components/Views/AnalyticsView',
+ component: AnalyticsView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Loading: Story = { name: 'Chargement' };
diff --git a/apps/web/src/components/views/ChatView.stories.tsx b/apps/web/src/components/views/ChatView.stories.tsx
new file mode 100644
index 000000000..d4b00c6aa
--- /dev/null
+++ b/apps/web/src/components/views/ChatView.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChatView } from './ChatView';
+
+const meta: Meta = {
+ title: 'Components/Views/ChatView',
+ component: ChatView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/views/DiscoverView.stories.tsx b/apps/web/src/components/views/DiscoverView.stories.tsx
new file mode 100644
index 000000000..9f539d74b
--- /dev/null
+++ b/apps/web/src/components/views/DiscoverView.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DiscoverView } from './DiscoverView';
+
+const meta: Meta = {
+ title: 'Components/Views/DiscoverView',
+ component: DiscoverView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Loading: Story = { name: 'Chargement' };
diff --git a/apps/web/src/components/views/EducationView.stories.tsx b/apps/web/src/components/views/EducationView.stories.tsx
new file mode 100644
index 000000000..a42fb0975
--- /dev/null
+++ b/apps/web/src/components/views/EducationView.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EducationView } from './EducationView';
+
+const meta: Meta = {
+ title: 'Components/Views/EducationView',
+ component: EducationView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/views/GearView.stories.tsx b/apps/web/src/components/views/GearView.stories.tsx
new file mode 100644
index 000000000..29a9386c9
--- /dev/null
+++ b/apps/web/src/components/views/GearView.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { GearView } from './GearView';
+import { ToastProvider } from '../../components/feedback/ToastProvider';
+
+const meta: Meta = {
+ title: 'Components/Views/GearView',
+ component: GearView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/views/LiveView.stories.tsx b/apps/web/src/components/views/LiveView.stories.tsx
new file mode 100644
index 000000000..b4406a772
--- /dev/null
+++ b/apps/web/src/components/views/LiveView.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LiveView } from './LiveView';
+
+const meta: Meta = {
+ title: 'Components/Views/LiveView',
+ component: LiveView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/views/NotificationsView.stories.tsx b/apps/web/src/components/views/NotificationsView.stories.tsx
new file mode 100644
index 000000000..1b6cf4253
--- /dev/null
+++ b/apps/web/src/components/views/NotificationsView.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NotificationsView } from './NotificationsView';
+
+const meta: Meta = {
+ title: 'Components/Views/NotificationsView',
+ component: NotificationsView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/views/ProfileView.stories.tsx b/apps/web/src/components/views/ProfileView.stories.tsx
new file mode 100644
index 000000000..ee38baf26
--- /dev/null
+++ b/apps/web/src/components/views/ProfileView.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProfileView } from './ProfileView';
+
+const meta: Meta = {
+ title: 'Components/Views/ProfileView',
+ component: ProfileView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Loading: Story = { name: 'Chargement' };
diff --git a/apps/web/src/components/views/PurchasesView.stories.tsx b/apps/web/src/components/views/PurchasesView.stories.tsx
new file mode 100644
index 000000000..f574db44d
--- /dev/null
+++ b/apps/web/src/components/views/PurchasesView.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PurchasesView } from './PurchasesView';
+
+const meta: Meta = {
+ title: 'Components/Views/PurchasesView',
+ component: PurchasesView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Empty: Story = { name: 'Vide' };
+export const Loading: Story = { name: 'Chargement' };
diff --git a/apps/web/src/components/views/SettingsView.stories.tsx b/apps/web/src/components/views/SettingsView.stories.tsx
new file mode 100644
index 000000000..0dcb08e31
--- /dev/null
+++ b/apps/web/src/components/views/SettingsView.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SettingsView } from './SettingsView';
+
+/**
+ * SettingsView - Vue principale des paramĂštres
+ *
+ * Interface à onglets pour naviguer entre les différentes
+ * sections de paramÚtres (profil, compte, apparence, sécurité, etc.)
+ */
+const meta: Meta = {
+ title: 'Components/Views/SettingsView',
+ component: SettingsView,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Vue avec navigation par onglets vers toutes les sections de paramĂštres.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ initialTab: {
+ control: 'select',
+ options: ['profile', 'account', 'appearance', 'accessibility', 'security', 'integrations', 'cloud', 'backups', 'data', 'audio', 'notifications'],
+ description: 'Onglet à afficher par défaut',
+ },
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut avec onglet Profile.
+ */
+export const Default: Story = {
+ name: 'Par défaut (Profile)',
+ args: {
+ initialTab: 'profile',
+ },
+};
diff --git a/apps/web/src/components/views/SocialView.stories.tsx b/apps/web/src/components/views/SocialView.stories.tsx
new file mode 100644
index 000000000..81ceec154
--- /dev/null
+++ b/apps/web/src/components/views/SocialView.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SocialView } from './SocialView';
+
+const meta: Meta = {
+ title: 'Components/Views/SocialView',
+ component: SocialView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/views/StudioView.stories.tsx b/apps/web/src/components/views/StudioView.stories.tsx
new file mode 100644
index 000000000..f1ceb78f0
--- /dev/null
+++ b/apps/web/src/components/views/StudioView.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StudioView } from './StudioView';
+
+const meta: Meta = {
+ title: 'Components/Views/StudioView',
+ component: StudioView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
diff --git a/apps/web/src/components/views/UploadView.stories.tsx b/apps/web/src/components/views/UploadView.stories.tsx
new file mode 100644
index 000000000..d90124551
--- /dev/null
+++ b/apps/web/src/components/views/UploadView.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { UploadView } from './UploadView';
+
+const meta: Meta = {
+ title: 'Components/Views/UploadView',
+ component: UploadView,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Uploading: Story = { name: 'Upload en cours' };
+export const Complete: Story = { name: 'Terminé' };
+export const Error: Story = { name: 'Erreur' };
diff --git a/apps/web/src/context/CartContext.test.tsx b/apps/web/src/context/CartContext.test.tsx
deleted file mode 100644
index 3aa7babd9..000000000
--- a/apps/web/src/context/CartContext.test.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { renderHook, act } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { CartProvider, useCart } from './CartContext';
-import { ReactNode } from 'react';
-import { Product, ProductLicense } from '@/types';
-import { ToastProvider } from './ToastContext';
-
-// Mock useToast via ToastProvider
-const mockAddToast = vi.fn();
-
-vi.mock('./ToastContext', async () => {
- const actual = await vi.importActual('./ToastContext');
- return {
- ...actual,
- ToastProvider: ({ children }: { children: ReactNode }) => children,
- useToast: () => ({
- addToast: mockAddToast,
- }),
- };
-});
-
-const mockProduct: Product = {
- id: '1',
- title: 'Test Product',
- price: 9.99,
- currency: 'USD',
- type: 'track',
-};
-
-const wrapper = ({ children }: { children: ReactNode }) => (
- {children}
-);
-
-describe('CartContext', () => {
- beforeEach(() => {
- vi.clearAllMocks();
- });
-
- it('should provide cart context', () => {
- const { result } = renderHook(() => useCart(), { wrapper });
-
- expect(result.current).toBeDefined();
- expect(result.current).toHaveProperty('cart');
- expect(result.current).toHaveProperty('addToCart');
- expect(result.current).toHaveProperty('removeFromCart');
- expect(result.current).toHaveProperty('clearCart');
- });
-
- it('should have empty cart initially', () => {
- const { result } = renderHook(() => useCart(), { wrapper });
-
- expect(result.current.cart).toEqual([]);
- });
-
- it('should add product to cart', () => {
- const { result } = renderHook(() => useCart(), { wrapper });
-
- act(() => {
- result.current.addToCart(mockProduct);
- });
-
- expect(result.current.cart).toHaveLength(1);
- expect(result.current.cart[0].id).toBe(mockProduct.id);
- expect(result.current.cart[0].title).toBe(mockProduct.title);
- });
-
- it('should remove product from cart', () => {
- const { result } = renderHook(() => useCart(), { wrapper });
-
- act(() => {
- result.current.addToCart(mockProduct);
- });
-
- expect(result.current.cart).toHaveLength(1);
-
- const cartId = result.current.cart[0].cartId;
-
- act(() => {
- result.current.removeFromCart(cartId);
- });
-
- expect(result.current.cart).toHaveLength(0);
- });
-
- it('should clear cart', () => {
- const { result } = renderHook(() => useCart(), { wrapper });
-
- act(() => {
- result.current.addToCart(mockProduct);
- result.current.addToCart({ ...mockProduct, id: '2' });
- });
-
- expect(result.current.cart).toHaveLength(2);
-
- act(() => {
- result.current.clearCart();
- });
-
- expect(result.current.cart).toHaveLength(0);
- });
-
- it('should add product with license', () => {
- const { result } = renderHook(() => useCart(), { wrapper });
-
- const license: ProductLicense = {
- id: 'std',
- name: 'Standard',
- price: 9.99,
- features: ['Royalty Free'],
- };
-
- act(() => {
- result.current.addToCart(mockProduct, license);
- });
-
- expect(result.current.cart).toHaveLength(1);
- expect(result.current.cart[0].selectedLicense).toEqual(license);
- });
-});
diff --git a/apps/web/src/context/CartContext.tsx b/apps/web/src/context/CartContext.tsx
deleted file mode 100644
index 9df280ff2..000000000
--- a/apps/web/src/context/CartContext.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { createContext, useContext, useState } from 'react';
-import { CartItem, Product, ProductLicense } from '../types';
-import { useToast } from '@/components/feedback/ToastProvider';
-
-interface CartContextType {
- cart: CartItem[];
- addToCart: (product: Product, license?: ProductLicense) => void;
- removeFromCart: (cartId: string) => void;
- clearCart: () => void;
- cartTotal: number;
- itemCount: number;
-}
-
-const CartContext = createContext(undefined);
-
-export const useCart = () => {
- const context = useContext(CartContext);
- if (!context) {
- throw new Error('useCart must be used within a CartProvider');
- }
- return context;
-};
-
-export const CartProvider: React.FC<{ children: React.ReactNode }> = ({
- children,
-}) => {
- const { addToast } = useToast();
- const [cart, setCart] = useState([]);
-
- const addToCart = (product: Product, license?: ProductLicense) => {
- // Generate a unique ID for the cart item (productID + licenseID)
- // This allows adding the same product with different licenses
- const licenseId = license ? license.id : 'standard';
- const existingItem = cart.find(
- (item) =>
- item.id === product.id && item.selectedLicense?.id === license?.id,
- );
-
- if (existingItem) {
- addToast('Item already in cart', 'info');
- return;
- }
-
- const newItem: CartItem = {
- ...product,
- cartId: `${product.id}-${licenseId}-${Date.now()}`,
- selectedLicense: license,
- };
-
- setCart((prev) => [...prev, newItem]);
- addToast(`${product.title} added to cart`, 'success');
- };
-
- const removeFromCart = (cartId: string) => {
- setCart((prev) => prev.filter((item) => item.cartId !== cartId));
- };
-
- const clearCart = () => {
- setCart([]);
- };
-
- const cartTotal = cart.reduce((acc, item) => {
- const price = item.selectedLicense
- ? item.selectedLicense.price
- : item.price;
- return acc + price;
- }, 0);
-
- return (
-
- {children}
-
- );
-};
diff --git a/apps/web/src/features/auth/components/AuthErrorMessage.stories.tsx b/apps/web/src/features/auth/components/AuthErrorMessage.stories.tsx
new file mode 100644
index 000000000..b0ed1f036
--- /dev/null
+++ b/apps/web/src/features/auth/components/AuthErrorMessage.stories.tsx
@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AuthErrorMessage } from './AuthErrorMessage';
+
+/**
+ * AuthErrorMessage - Affichage d'erreurs d'authentification
+ *
+ * Composant wrapper pour afficher les erreurs d'authentification
+ * de maniÚre cohérente avec le design system.
+ *
+ * @deprecated Considérez d'utiliser ErrorDisplay directement pour les nouveaux développements.
+ */
+const meta: Meta = {
+ title: 'Features/Auth/AuthErrorMessage',
+ component: AuthErrorMessage,
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'Composant d\'affichage des erreurs d\'authentification. Utilise ErrorDisplay en interne.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ message: {
+ control: 'text',
+ description: 'Message d\'erreur Ă afficher',
+ },
+ className: {
+ control: 'text',
+ description: 'Classes CSS additionnelles',
+ },
+ id: {
+ control: 'text',
+ description: 'ID unique pour l\'accessibilité',
+ },
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Message d'erreur par défaut.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+ args: {
+ message: 'Une erreur est survenue lors de l\'authentification.',
+ },
+};
+
+/**
+ * Erreur de réseau.
+ */
+export const Network: Story = {
+ name: 'Erreur réseau',
+ args: {
+ message: 'Impossible de se connecter au serveur. VĂ©rifiez votre connexion internet.',
+ },
+};
+
+/**
+ * Erreur de validation.
+ */
+export const Validation: Story = {
+ name: 'Erreur de validation',
+ args: {
+ message: 'Email ou mot de passe incorrect.',
+ },
+};
+
+/**
+ * Message vide - ne rend rien.
+ */
+export const Empty: Story = {
+ name: 'Vide (pas de rendu)',
+ args: {
+ message: '',
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Quand le message est vide, le composant ne rend rien (retourne null).',
+ },
+ },
+ },
+};
+
+/**
+ * Avec ID personnalisé pour l'accessibilité.
+ */
+export const WithCustomId: Story = {
+ name: 'Avec ID personnalisé',
+ args: {
+ message: 'Session expirée. Veuillez vous reconnecter.',
+ id: 'login-error-message',
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'L\'ID peut ĂȘtre utilisĂ© pour lier le message d\'erreur Ă un champ de formulaire via aria-describedby.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/auth/components/AuthLayout.stories.tsx b/apps/web/src/features/auth/components/AuthLayout.stories.tsx
new file mode 100644
index 000000000..572195945
--- /dev/null
+++ b/apps/web/src/features/auth/components/AuthLayout.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AuthLayout } from './AuthLayout';
+import { MemoryRouter } from 'react-router-dom';
+
+const meta: Meta = {
+ title: 'Features/Auth/AuthLayout',
+ component: AuthLayout,
+ parameters: {
+ layout: 'fullscreen',
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ title: 'Welcome Back',
+ subtitle: 'Please sign in to continue',
+ children: (
+
+
Email
+
Password
+
Sign In
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut du formulaire.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat de chargement pendant l'envoi.
+ */
+export const Loading: Story = {
+ name: 'Chargement',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Remplir l'email
+ const emailInput = canvas.getByLabelText(/email/i);
+ await userEvent.type(emailInput, 'user@veza.music');
+
+ // Soumettre pour voir le loader
+ const submitButton = canvas.getByRole('button', { name: /envoyer/i });
+ await userEvent.click(submitButton);
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Montre le spinner pendant l\'envoi de la demande.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat de succĂšs aprĂšs envoi.
+ */
+export const Success: Story = {
+ name: 'SuccÚs - Email envoyé',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche le message de confirmation aprÚs envoi réussi.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/auth/components/TwoFactorVerify.stories.tsx b/apps/web/src/features/auth/components/TwoFactorVerify.stories.tsx
new file mode 100644
index 000000000..e500866f0
--- /dev/null
+++ b/apps/web/src/features/auth/components/TwoFactorVerify.stories.tsx
@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { within, userEvent } from '@storybook/test';
+import { TwoFactorVerify } from './TwoFactorVerify';
+
+/**
+ * TwoFactorVerify - VĂ©rification 2FA
+ *
+ * Composant pour saisir le code de vérification 2FA
+ * lors de la connexion avec authentification Ă deux facteurs.
+ */
+const meta: Meta = {
+ title: 'Features/Auth/TwoFactorVerify',
+ component: TwoFactorVerify,
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'Formulaire de vérification 2FA avec support des codes de backup.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ args: {
+ onSuccess: fn(),
+ onCancel: fn(),
+ },
+ argTypes: {
+ onSuccess: {
+ description: 'Callback appelé avec le code aprÚs vérification réussie',
+ action: 'onSuccess',
+ },
+ onCancel: {
+ description: 'Callback appelé quand l\'utilisateur annule',
+ action: 'onCancel',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut - saisie du code TOTP.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat avec erreur de vĂ©rification.
+ */
+export const WithError: Story = {
+ name: 'Avec erreur',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Saisir un code invalide
+ const codeInput = canvas.getByLabelText(/verification code/i);
+ await userEvent.type(codeInput, '123456');
+
+ // Cliquer sur Verify
+ const verifyButton = canvas.getByRole('button', { name: /verify/i });
+ await userEvent.click(verifyButton);
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche le message d\'erreur aprĂšs un code invalide.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat de chargement pendant la vĂ©rification.
+ */
+export const Loading: Story = {
+ name: 'Chargement',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Saisir un code
+ const codeInput = canvas.getByLabelText(/verification code/i);
+ await userEvent.type(codeInput, '123456');
+
+ // Cliquer sur Verify pour voir le spinner
+ const verifyButton = canvas.getByRole('button', { name: /verify/i });
+ await userEvent.click(verifyButton);
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Montre le spinner pendant la vérification.',
+ },
+ },
+ },
+};
+
+/**
+ * Mode backup code.
+ */
+export const BackupCode: Story = {
+ name: 'Code de backup',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Cliquer sur "Use a backup code"
+ const backupLink = canvas.getByRole('button', { name: /use a backup code/i });
+ await userEvent.click(backupLink);
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Interface pour utiliser un code de backup au lieu du TOTP.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/auth/pages/ForgotPasswordPage.stories.tsx b/apps/web/src/features/auth/pages/ForgotPasswordPage.stories.tsx
new file mode 100644
index 000000000..c791b0fd8
--- /dev/null
+++ b/apps/web/src/features/auth/pages/ForgotPasswordPage.stories.tsx
@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent } from '@storybook/test';
+import { ForgotPasswordPage } from './ForgotPasswordPage';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Create a mocked QueryClient for stories
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+/**
+ * ForgotPasswordPage - Page de récupération de mot de passe
+ *
+ * Permet aux utilisateurs de demander un lien de réinitialisation
+ * de leur mot de passe par email.
+ */
+const meta: Meta = {
+ title: 'Pages/Auth/ForgotPasswordPage',
+ component: ForgotPasswordPage,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Page de demande de réinitialisation de mot de passe.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut - formulaire de demande.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat aprĂšs envoi rĂ©ussi du lien.
+ */
+export const Sent: Story = {
+ name: 'Email envoyé',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Remplir l'email
+ const emailInput = canvas.getByLabelText(/email/i);
+ await userEvent.type(emailInput, 'user@veza.music');
+
+ // Soumettre le formulaire
+ const submitButton = canvas.getByRole('button', { name: /envoyer/i });
+ await userEvent.click(submitButton);
+
+ // Le message de succĂšs s'affichera aprĂšs la mutation
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche le message de confirmation aprĂšs envoi du lien.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat d'erreur - email non trouvĂ© ou erreur serveur.
+ */
+export const WithError: Story = {
+ name: 'Avec erreur',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Saisir un email invalide
+ const emailInput = canvas.getByLabelText(/email/i);
+ await userEvent.type(emailInput, 'invalid-email');
+
+ // DĂ©clencher la validation
+ await userEvent.tab();
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Montre les erreurs de validation du formulaire.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/auth/pages/LoginPage.stories.tsx b/apps/web/src/features/auth/pages/LoginPage.stories.tsx
new file mode 100644
index 000000000..634047297
--- /dev/null
+++ b/apps/web/src/features/auth/pages/LoginPage.stories.tsx
@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent, expect, fn } from '@storybook/test';
+import { LoginPage } from './LoginPage';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Create a mocked QueryClient for stories
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+/**
+ * LoginPage - Page de connexion
+ *
+ * Page complĂšte de connexion avec formulaire email/mot de passe,
+ * boutons OAuth, et liens vers l'inscription et la récupération de mot de passe.
+ */
+const meta: Meta = {
+ title: 'Pages/Auth/LoginPage',
+ component: LoginPage,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Page de connexion avec authentification par email/mot de passe et OAuth.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut de la page de connexion.
+ * Formulaire vide prĂȘt Ă ĂȘtre rempli.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Simulation d'une erreur d'authentification.
+ * Montre le message d'erreur aprÚs une tentative de connexion échouée.
+ */
+export const WithError: Story = {
+ name: 'Avec erreur',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Remplir les champs avec des données invalides
+ const emailInput = canvas.getByLabelText(/email/i);
+ const passwordInput = canvas.getByLabelText(/password/i);
+
+ await userEvent.type(emailInput, 'test@example.com');
+ await userEvent.type(passwordInput, 'wrongpassword');
+
+ // Soumettre le formulaire
+ const submitButton = canvas.getByRole('button', { name: /sign in/i });
+ await userEvent.click(submitButton);
+
+ // Note: Dans Storybook, l'erreur viendra du mock de useLogin
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Démontre l\'affichage d\'un message d\'erreur aprÚs une tentative de connexion échouée.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat de chargement pendant la soumission du formulaire.
+ */
+export const Loading: Story = {
+ name: 'Chargement',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Remplir le formulaire
+ const emailInput = canvas.getByLabelText(/email/i);
+ const passwordInput = canvas.getByLabelText(/password/i);
+
+ await userEvent.type(emailInput, 'user@veza.music');
+ await userEvent.type(passwordInput, 'SecurePass123!');
+
+ // Soumettre immédiatement pour montrer l'état de chargement
+ const submitButton = canvas.getByRole('button', { name: /sign in/i });
+ await userEvent.click(submitButton);
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Montre l\'Ă©tat de chargement avec le spinner pendant la soumission.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/auth/pages/RegisterPage.stories.tsx b/apps/web/src/features/auth/pages/RegisterPage.stories.tsx
new file mode 100644
index 000000000..9c07df167
--- /dev/null
+++ b/apps/web/src/features/auth/pages/RegisterPage.stories.tsx
@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent } from '@storybook/test';
+import { RegisterPage } from './RegisterPage';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Create a mocked QueryClient for stories
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+/**
+ * RegisterPage - Page d'inscription
+ *
+ * Page complÚte d'inscription avec formulaire de création de compte,
+ * validation en temps réel, indicateur de force du mot de passe,
+ * et vérification de disponibilité du nom d'utilisateur.
+ */
+const meta: Meta = {
+ title: 'Pages/Auth/RegisterPage',
+ component: RegisterPage,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Page d\'inscription avec validation complÚte et vérification email.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut de la page d'inscription.
+ * Formulaire vide prĂȘt Ă ĂȘtre rempli.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Simulation d'une erreur d'inscription.
+ * Par exemple, nom d'utilisateur déjà pris.
+ */
+export const WithError: Story = {
+ name: 'Avec erreur',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Remplir les champs
+ const usernameInput = canvas.getByLabelText(/nom d'utilisateur/i);
+ const emailInput = canvas.getByLabelText(/email/i);
+ const passwordInput = canvas.getByLabelText(/^mot de passe \*/i);
+ const confirmPasswordInput = canvas.getByLabelText(/confirmer le mot de passe/i);
+
+ await userEvent.type(usernameInput, 'existinguser');
+ await userEvent.type(emailInput, 'new@veza.music');
+ await userEvent.type(passwordInput, 'SecurePass123!@#');
+ await userEvent.type(confirmPasswordInput, 'SecurePass123!@#');
+
+ // L'erreur de disponibilité sera affichée via le hook useUsernameAvailability
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Démontre l\'affichage d\'erreurs de validation en temps réel.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat de succĂšs aprĂšs inscription.
+ * Affiche le message de vérification email.
+ */
+export const Success: Story = {
+ name: 'SuccĂšs - VĂ©rification email',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Remplir tous les champs avec des données valides
+ const usernameInput = canvas.getByLabelText(/nom d'utilisateur/i);
+ const emailInput = canvas.getByLabelText(/email/i);
+ const passwordInput = canvas.getByLabelText(/^mot de passe \*/i);
+ const confirmPasswordInput = canvas.getByLabelText(/confirmer le mot de passe/i);
+ const termsCheckbox = canvas.getByRole('checkbox');
+
+ await userEvent.type(usernameInput, 'newartist');
+ await userEvent.type(emailInput, 'artist@veza.music');
+ await userEvent.type(passwordInput, 'SuperSecure123!@#');
+ await userEvent.type(confirmPasswordInput, 'SuperSecure123!@#');
+ await userEvent.click(termsCheckbox);
+
+ // Le succÚs sera affiché aprÚs la mutation réussie
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Montre le message de succÚs avec instructions de vérification email.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/auth/pages/ResetPasswordPage.stories.tsx b/apps/web/src/features/auth/pages/ResetPasswordPage.stories.tsx
new file mode 100644
index 000000000..7bccd27c1
--- /dev/null
+++ b/apps/web/src/features/auth/pages/ResetPasswordPage.stories.tsx
@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent } from '@storybook/test';
+import { ResetPasswordPage } from './ResetPasswordPage';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+/**
+ * ResetPasswordPage - Page de réinitialisation de mot de passe
+ *
+ * Permet aux utilisateurs de définir un nouveau mot de passe
+ * aprÚs avoir cliqué sur le lien envoyé par email.
+ */
+const meta: Meta = {
+ title: 'Pages/Auth/ResetPasswordPage',
+ component: ResetPasswordPage,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Page de réinitialisation de mot de passe avec indicateur de force.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut avec un token valide.
+ * Affiche le formulaire de nouveau mot de passe.
+ */
+export const Default: Story = {
+ name: 'Par défaut (token valide)',
+ decorators: [
+ (Story) => (
+
+
+
+ } />
+
+
+
+ ),
+ ],
+};
+
+/**
+ * Ătat de succĂšs aprĂšs rĂ©initialisation.
+ */
+export const Success: Story = {
+ name: 'SuccĂšs',
+ decorators: [
+ (Story) => (
+
+
+
+ } />
+
+
+
+ ),
+ ],
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Remplir les champs
+ const passwordInput = canvas.getByLabelText(/nouveau mot de passe/i);
+ const confirmInput = canvas.getByLabelText(/confirmer le mot de passe/i);
+
+ await userEvent.type(passwordInput, 'NewSecurePass123!@#');
+ await userEvent.type(confirmInput, 'NewSecurePass123!@#');
+
+ // Soumettre
+ const submitButton = canvas.getByRole('button', { name: /réinitialiser/i });
+ await userEvent.click(submitButton);
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche le message de succÚs aprÚs réinitialisation du mot de passe.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat avec token invalide ou expirĂ©.
+ */
+export const InvalidToken: Story = {
+ name: 'Token invalide',
+ decorators: [
+ (Story) => (
+
+
+
+ } />
+
+
+
+ ),
+ ],
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche le message d\'erreur quand le token est manquant ou invalide.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/auth/pages/VerifyEmailPage.stories.tsx b/apps/web/src/features/auth/pages/VerifyEmailPage.stories.tsx
new file mode 100644
index 000000000..78ae54135
--- /dev/null
+++ b/apps/web/src/features/auth/pages/VerifyEmailPage.stories.tsx
@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { VerifyEmailPage } from './VerifyEmailPage';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+/**
+ * VerifyEmailPage - Page de vérification d'email
+ *
+ * VĂ©rifie automatiquement l'email de l'utilisateur via le token
+ * reçu par email et affiche le statut approprié.
+ */
+const meta: Meta = {
+ title: 'Pages/Auth/VerifyEmailPage',
+ component: VerifyEmailPage,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Page de vérification d\'email avec états de chargement, succÚs et erreur.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat de vĂ©rification en cours (spinner).
+ */
+export const Pending: Story = {
+ name: 'VĂ©rification en cours',
+ decorators: [
+ (Story) => (
+
+
+
+ } />
+
+
+
+ ),
+ ],
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche un spinner pendant la vérification de l\'email.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat de succĂšs - email vĂ©rifiĂ©.
+ */
+export const Verified: Story = {
+ name: 'Email vérifié',
+ decorators: [
+ (Story) => (
+
+
+
+ } />
+
+
+
+ ),
+ ],
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche le message de succÚs aprÚs vérification.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat d'erreur - token invalide ou expirĂ©.
+ */
+export const Error: Story = {
+ name: 'Erreur de vérification',
+ decorators: [
+ (Story) => (
+
+
+
+ } />
+
+
+
+ ),
+ ],
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche l\'erreur avec options de réessayer et renvoyer l\'email.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/chat/components/CreateRoomDialog.stories.tsx b/apps/web/src/features/chat/components/CreateRoomDialog.stories.tsx
new file mode 100644
index 000000000..42e3be93f
--- /dev/null
+++ b/apps/web/src/features/chat/components/CreateRoomDialog.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { CreateRoomDialog } from './CreateRoomDialog';
+
+const meta: Meta = {
+ title: 'Features/Chat/CreateRoomDialog',
+ component: CreateRoomDialog,
+ parameters: { layout: 'centered' },
+ tags: ['autodocs'],
+ args: { onClose: fn() },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Creating: Story = { name: 'Création' };
diff --git a/apps/web/src/features/chat/components/MessageSearch.stories.tsx b/apps/web/src/features/chat/components/MessageSearch.stories.tsx
new file mode 100644
index 000000000..d6ccb732f
--- /dev/null
+++ b/apps/web/src/features/chat/components/MessageSearch.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MessageSearch } from './MessageSearch';
+
+const meta: Meta = {
+ title: 'Features/Chat/MessageSearch',
+ component: MessageSearch,
+ parameters: { layout: 'padded' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Results: Story = { name: 'RĂ©sultats' };
+export const NoResults: Story = { name: 'Sans résultats' };
diff --git a/apps/web/src/features/chat/components/VirtualizedChatMessages.stories.tsx b/apps/web/src/features/chat/components/VirtualizedChatMessages.stories.tsx
new file mode 100644
index 000000000..3c2130a9b
--- /dev/null
+++ b/apps/web/src/features/chat/components/VirtualizedChatMessages.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { VirtualizedChatMessages } from './VirtualizedChatMessages';
+
+const meta: Meta = {
+ title: 'Features/Chat/VirtualizedChatMessages',
+ component: VirtualizedChatMessages,
+ parameters: { layout: 'padded' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Loading: Story = { name: 'Chargement' };
diff --git a/apps/web/src/features/chat/pages/ChatPage.stories.tsx b/apps/web/src/features/chat/pages/ChatPage.stories.tsx
new file mode 100644
index 000000000..5798c6013
--- /dev/null
+++ b/apps/web/src/features/chat/pages/ChatPage.stories.tsx
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChatPage } from './ChatPage';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+const meta: Meta = {
+ title: 'Pages/Chat/ChatPage',
+ component: ChatPage,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Loading: Story = { name: 'Chargement' };
+export const Empty: Story = { name: 'Vide' };
diff --git a/apps/web/src/features/dashboard/pages/DashboardPage.stories.tsx b/apps/web/src/features/dashboard/pages/DashboardPage.stories.tsx
new file mode 100644
index 000000000..ce9843c96
--- /dev/null
+++ b/apps/web/src/features/dashboard/pages/DashboardPage.stories.tsx
@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import DashboardPage from './DashboardPage';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+/**
+ * DashboardPage - Tableau de bord utilisateur
+ *
+ * Page principale du tableau de bord avec statistiques,
+ * activité récente, tracks récents et actions rapides.
+ */
+const meta: Meta = {
+ title: 'Pages/Dashboard/DashboardPage',
+ component: DashboardPage,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Tableau de bord utilisateur avec vue d\'ensemble des statistiques et activités.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut du dashboard avec donnĂ©es chargĂ©es.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat de chargement des tracks rĂ©cents.
+ */
+export const Loading: Story = {
+ name: 'Chargement',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche les squelettes de chargement pour les tracks récents.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat vide - aucun track dans la bibliothĂšque.
+ */
+export const Empty: Story = {
+ name: 'BibliothĂšque vide',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Message affiché quand l\'utilisateur n\'a pas de tracks.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/error/pages/NotFoundPage.stories.tsx b/apps/web/src/features/error/pages/NotFoundPage.stories.tsx
new file mode 100644
index 000000000..cbe327adf
--- /dev/null
+++ b/apps/web/src/features/error/pages/NotFoundPage.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NotFoundPage from './NotFoundPage';
+
+/**
+ * NotFoundPage - Page d'erreur 404
+ *
+ * Affiche une page d'erreur conviviale lorsqu'une page n'est pas trouvée,
+ * avec des liens rapides vers les sections principales de l'application.
+ */
+const meta: Meta = {
+ title: 'Pages/Error/NotFoundPage',
+ component: NotFoundPage,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Page 404 améliorée avec messages utiles et actions de récupération.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut de la page 404.
+ * Affiche le code d'erreur, un message explicatif, des boutons d'action
+ * et des liens rapides vers les sections principales.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * MĂȘme affichage avec les suggestions - les suggestions
+ * sont toujours visibles dans ce composant.
+ */
+export const WithSuggestions: Story = {
+ name: 'Avec suggestions',
+ parameters: {
+ docs: {
+ description: {
+ story: 'La page inclut toujours des suggestions pour aider l\'utilisateur Ă continuer sa navigation.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/error/pages/ServerErrorPage.stories.tsx b/apps/web/src/features/error/pages/ServerErrorPage.stories.tsx
new file mode 100644
index 000000000..bd42b6337
--- /dev/null
+++ b/apps/web/src/features/error/pages/ServerErrorPage.stories.tsx
@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent, expect } from '@storybook/test';
+import ServerErrorPage from './ServerErrorPage';
+
+/**
+ * ServerErrorPage - Page d'erreur 500
+ *
+ * Affiche une page d'erreur serveur avec options de récupération,
+ * informations de statut et détails techniques.
+ */
+const meta: Meta = {
+ title: 'Pages/Error/ServerErrorPage',
+ component: ServerErrorPage,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Page d\'erreur 500 améliorée avec messages utiles et actions de récupération.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut de la page d'erreur serveur.
+ * Affiche le code d'erreur 500, un message explicatif,
+ * des boutons d'action et des informations d'aide.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * DĂ©monstration du comportement du bouton "RĂ©essayer".
+ * Utilise une play function pour simuler le clic.
+ */
+export const WithRetry: Story = {
+ name: 'Avec action RĂ©essayer',
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // Trouver le bouton RĂ©essayer
+ const retryButton = canvas.getByRole('button', { name: /réessayer/i });
+
+ // VĂ©rifier que le bouton existe
+ await expect(retryButton).toBeInTheDocument();
+
+ // Cliquer sur le bouton pour voir l'Ă©tat de chargement
+ await userEvent.click(retryButton);
+
+ // VĂ©rifier que le texte change en "RĂ©essai..."
+ await expect(canvas.getByText(/réessai/i)).toBeInTheDocument();
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Simule un clic sur le bouton RĂ©essayer pour montrer l\'animation de chargement.',
+ },
+ },
+ },
+};
+
+/**
+ * Variante pour erreur réseau.
+ * Le mĂȘme composant est utilisĂ©, les dĂ©tails techniques
+ * affichent les informations du navigateur.
+ */
+export const NetworkError: Story = {
+ name: 'Erreur réseau',
+ parameters: {
+ docs: {
+ description: {
+ story: 'ReprĂ©sentation d\'une erreur rĂ©seau - mĂȘme composant avec contexte diffĂ©rent.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/library/components/LibraryManager.stories.tsx b/apps/web/src/features/library/components/LibraryManager.stories.tsx
new file mode 100644
index 000000000..3b2cd01df
--- /dev/null
+++ b/apps/web/src/features/library/components/LibraryManager.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LibraryManager } from './LibraryManager';
+import { Button } from '@/components/ui/button';
+import { ToastProvider } from '@/components/feedback/ToastProvider';
+
+const meta = {
+ title: 'Features/Library/LibraryManager',
+ component: LibraryManager,
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+// NOTE: LibraryManager fetches data on mount via apiClient.
+// Msw (Mock Service Worker) would be ideal here.
+// For now, we rely on the fact that if fetch fails, it shows an empty state or error state, which IS a valid visual test.
+// We can't easily patch apiClient here without a proper test harness.
+
+export const Default: Story = {};
diff --git a/apps/web/src/features/library/pages/LibraryPage.stories.tsx b/apps/web/src/features/library/pages/LibraryPage.stories.tsx
new file mode 100644
index 000000000..4b6658698
--- /dev/null
+++ b/apps/web/src/features/library/pages/LibraryPage.stories.tsx
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LibraryPage } from './LibraryPage';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+const meta: Meta = {
+ title: 'Pages/Library/LibraryPage',
+ component: LibraryPage,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Empty: Story = { name: 'Vide' };
+export const Loading: Story = { name: 'Chargement' };
diff --git a/apps/web/src/features/notifications/pages/NotificationsPage.stories.tsx b/apps/web/src/features/notifications/pages/NotificationsPage.stories.tsx
new file mode 100644
index 000000000..3deccf76b
--- /dev/null
+++ b/apps/web/src/features/notifications/pages/NotificationsPage.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NotificationsPage } from './NotificationsPage';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+const meta: Meta = {
+ title: 'Pages/Notifications/NotificationsPage',
+ component: NotificationsPage,
+ parameters: { layout: 'fullscreen' },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = { name: 'Par défaut' };
+export const Empty: Story = { name: 'Vide' };
diff --git a/apps/web/src/features/player/components/AudioPlayer.stories.tsx b/apps/web/src/features/player/components/AudioPlayer.stories.tsx
new file mode 100644
index 000000000..85c0c09e6
--- /dev/null
+++ b/apps/web/src/features/player/components/AudioPlayer.stories.tsx
@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import AudioPlayer from './AudioPlayer';
+
+/**
+ * AudioPlayer - Lecteur audio complet
+ *
+ * Composant principal du lecteur audio avec contrĂŽles,
+ * qualité, vitesse et visualisation.
+ */
+const meta: Meta = {
+ title: 'Features/Player/AudioPlayer',
+ component: AudioPlayer,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'Lecteur audio intégré avec tous les contrÎles de lecture.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ compact: {
+ control: 'boolean',
+ description: 'Mode compact du lecteur',
+ },
+ showQualitySelector: {
+ control: 'boolean',
+ description: 'Afficher le sélecteur de qualité',
+ },
+ showSpeedControl: {
+ control: 'boolean',
+ description: 'Afficher le contrĂŽle de vitesse',
+ },
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat en lecture.
+ */
+export const Playing: Story = {
+ name: 'En lecture',
+ args: {
+ autoPlay: true,
+ showQualitySelector: true,
+ showSpeedControl: true,
+ },
+};
+
+/**
+ * Ătat en pause.
+ */
+export const Paused: Story = {
+ name: 'En pause',
+ args: {
+ autoPlay: false,
+ },
+};
+
+/**
+ * Ătat de chargement.
+ */
+export const Loading: Story = {
+ name: 'Chargement',
+ args: {
+ preload: 'auto',
+ },
+};
+
+/**
+ * Ătat d'erreur.
+ */
+export const Error: Story = {
+ name: 'Erreur',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche le message d\'erreur avec option de retry.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/player/components/GlobalPlayer.stories.tsx b/apps/web/src/features/player/components/GlobalPlayer.stories.tsx
new file mode 100644
index 000000000..34d06c5d7
--- /dev/null
+++ b/apps/web/src/features/player/components/GlobalPlayer.stories.tsx
@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { GlobalPlayer } from './GlobalPlayer';
+import { usePlayerStore } from '../store/playerStore';
+import { useEffect } from 'react';
+
+const meta: Meta = {
+ title: 'Features/Player/GlobalPlayer',
+ component: GlobalPlayer,
+ parameters: {
+ layout: 'fullscreen',
+ },
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+const mockTracks = [
+ { id: '1', title: 'Neon Lights', artist: 'Cyberwave', cover: 'https://picsum.photos/200', duration: 180, url: '' },
+];
+
+const StoreInitializer = ({ active }: { active: boolean }) => {
+ useEffect(() => {
+ if (active) {
+ usePlayerStore.setState({
+ currentTrack: mockTracks[0],
+ isPlaying: true,
+ duration: 180,
+ currentTime: 45,
+ queue: mockTracks,
+ currentIndex: 0
+ });
+ } else {
+ usePlayerStore.setState({
+ currentTrack: null,
+ isPlaying: false,
+ duration: 0,
+ currentTime: 0,
+ queue: [],
+ currentIndex: -1
+ });
+ }
+ }, [active]);
+ return null;
+}
+
+export const Active: Story = {
+ decorators: [
+ (Story) => (
+ <>
+
+
+
+ )
+ ]
+};
+
+export const Idle: Story = {
+ decorators: [
+ (Story) => (
+ <>
+
+
+
+ )
+ ]
+};
diff --git a/apps/web/src/features/player/components/PlaybackSpeedControl.stories.tsx b/apps/web/src/features/player/components/PlaybackSpeedControl.stories.tsx
new file mode 100644
index 000000000..5c2b77e40
--- /dev/null
+++ b/apps/web/src/features/player/components/PlaybackSpeedControl.stories.tsx
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { PlaybackSpeedControl } from './PlaybackSpeedControl';
+
+/**
+ * PlaybackSpeedControl - ContrĂŽle de vitesse
+ *
+ * Composant de sélection de la vitesse de lecture audio.
+ */
+const meta: Meta = {
+ title: 'Features/Player/PlaybackSpeedControl',
+ component: PlaybackSpeedControl,
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'SĂ©lecteur de vitesse de lecture (0.5x - 2x).',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ args: {
+ onSpeedChange: fn(),
+ },
+ argTypes: {
+ speed: {
+ control: 'select',
+ options: [0.5, 0.75, 1, 1.25, 1.5, 2],
+ description: 'Vitesse de lecture actuelle',
+ },
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut (1x).
+ */
+export const Default: Story = {
+ name: 'Par défaut (1x)',
+ args: {
+ speed: 1,
+ },
+};
+
+/**
+ * Vitesse 1.5x.
+ */
+export const Speed1_5x: Story = {
+ name: '1.5x',
+ args: {
+ speed: 1.5,
+ },
+};
+
+/**
+ * Vitesse 2x.
+ */
+export const Speed2x: Story = {
+ name: '2x',
+ args: {
+ speed: 2,
+ },
+};
diff --git a/apps/web/src/features/player/components/PlayerError.stories.tsx b/apps/web/src/features/player/components/PlayerError.stories.tsx
new file mode 100644
index 000000000..a50863fbb
--- /dev/null
+++ b/apps/web/src/features/player/components/PlayerError.stories.tsx
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { PlayerError } from './PlayerError';
+
+/**
+ * PlayerError - Erreur du lecteur
+ *
+ * Composant d'affichage des erreurs de lecture
+ * avec option de retry.
+ */
+const meta: Meta = {
+ title: 'Features/Player/PlayerError',
+ component: PlayerError,
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'Message d\'erreur du lecteur avec retry.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ args: {
+ onRetry: fn(),
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Erreur réseau.
+ */
+export const NetworkError: Story = {
+ name: 'Erreur réseau',
+ args: {
+ error: 'Network error: Unable to load audio stream.',
+ },
+};
+
+/**
+ * Erreur de format.
+ */
+export const FormatError: Story = {
+ name: 'Erreur de format',
+ args: {
+ error: 'Format not supported: Unable to decode audio.',
+ },
+};
+
+/**
+ * Erreur générique.
+ */
+export const Generic: Story = {
+ name: 'Erreur générique',
+ args: {
+ error: 'An unexpected error occurred during playback.',
+ },
+};
diff --git a/apps/web/src/features/player/components/PlayerLoading.stories.tsx b/apps/web/src/features/player/components/PlayerLoading.stories.tsx
new file mode 100644
index 000000000..f2189e75e
--- /dev/null
+++ b/apps/web/src/features/player/components/PlayerLoading.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlayerLoading } from './PlayerLoading';
+
+const meta: Meta = {
+ title: 'Features/Player/PlayerLoading',
+ component: PlayerLoading,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ isLoading: true,
+ message: 'Chargement...',
+ size: 'md',
+ },
+};
+
+export const Small: Story = {
+ args: {
+ isLoading: true,
+ message: 'Buffering...',
+ size: 'sm',
+ },
+};
+
+export const Large: Story = {
+ args: {
+ isLoading: true,
+ message: 'Initializing Player...',
+ size: 'lg',
+ },
+};
+
+export const FullScreen: Story = {
+ args: {
+ isLoading: true,
+ message: 'Loading your music...',
+ fullScreen: true,
+ },
+};
+
+export const Hidden: Story = {
+ args: {
+ isLoading: false,
+ },
+};
diff --git a/apps/web/src/features/player/components/PlayerQueue.stories.tsx b/apps/web/src/features/player/components/PlayerQueue.stories.tsx
new file mode 100644
index 000000000..6f8e3cfed
--- /dev/null
+++ b/apps/web/src/features/player/components/PlayerQueue.stories.tsx
@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlayerQueue } from './PlayerQueue';
+import { usePlayerStore } from '../store/playerStore';
+import { useEffect } from 'react';
+
+const meta: Meta = {
+ title: 'Features/Player/PlayerQueue',
+ component: PlayerQueue,
+ parameters: {
+ layout: 'padded',
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ onClose: { action: 'onClose' },
+ onPlay: { action: 'onPlay' },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+const mockTracks = [
+ { id: '1', title: 'Start Me Up', artist: 'The Rolling Stones', cover: 'https://picsum.photos/200', duration: 200, url: '' },
+ { id: '2', title: 'Bohemian Rhapsody', artist: 'Queen', cover: 'https://picsum.photos/201', duration: 354, url: '' },
+ { id: '3', title: 'Hotel California', artist: 'Eagles', cover: 'https://picsum.photos/202', duration: 391, url: '' },
+];
+
+const StoreInitializer = ({ tracks, currentIndex = 0 }: { tracks: any[], currentIndex?: number }) => {
+ const { addToQueue, clearQueue, play } = usePlayerStore();
+
+ useEffect(() => {
+ clearQueue();
+ // We add tracks one by one or batch if supported, here we simluate adding
+ // Note: usePlayerStore actions might need adjustment if they don't support direct manipulation for stories
+ // But addToQueue takes Track[].
+
+ // We clear first
+ usePlayerStore.setState({ queue: [], currentIndex: -1 });
+
+ // Set state directly for storybook purposes to ensure consistency
+ usePlayerStore.setState({
+ queue: tracks,
+ currentIndex: currentIndex,
+ currentTrack: tracks[currentIndex]
+ });
+
+ }, [tracks, currentIndex, addToQueue, clearQueue]);
+
+ return null;
+};
+
+export const Default: Story = {
+ args: {
+ isOpen: true,
+ },
+ decorators: [
+ (Story) => (
+ <>
+
+
+
+
+
+ ),
+ ],
+};
+
+export const Empty: Story = {
+ args: {
+ isOpen: true,
+ },
+ decorators: [
+ (Story) => (
+ <>
+
+
+
+
+
+ ),
+ ],
+};
diff --git a/apps/web/src/features/player/components/TrackInfo.stories.tsx b/apps/web/src/features/player/components/TrackInfo.stories.tsx
new file mode 100644
index 000000000..ee6ed5565
--- /dev/null
+++ b/apps/web/src/features/player/components/TrackInfo.stories.tsx
@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TrackInfo } from './TrackInfo';
+
+const mockTrack = {
+ id: '1',
+ title: 'Cyberpunk City',
+ artist: 'Synth Master',
+ cover: 'https://picsum.photos/200',
+ album: 'Neon Nights',
+ genre: 'Synthwave',
+ duration: 180,
+ url: 'test.mp3',
+};
+
+const meta: Meta = {
+ title: 'Features/Player/TrackInfo',
+ component: TrackInfo,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ track: mockTrack,
+ className: 'w-[300px]',
+ },
+};
+
+export const NoCover: Story = {
+ args: {
+ track: { ...mockTrack, cover: undefined },
+ className: 'w-[300px]',
+ },
+};
+
+export const NoMetadata: Story = {
+ args: {
+ track: mockTrack,
+ showMetadata: false,
+ className: 'w-[300px]',
+ },
+};
+
+export const Small: Story = {
+ args: {
+ track: mockTrack,
+ coverSize: 'sm',
+ className: 'w-[300px]',
+ },
+};
+
+export const Large: Story = {
+ args: {
+ track: mockTrack,
+ coverSize: 'lg',
+ className: 'w-[300px]',
+ },
+};
+
+export const Empty: Story = {
+ args: {
+ track: null,
+ className: 'w-[300px]',
+ },
+};
diff --git a/apps/web/src/features/playlists/components/AddCollaboratorModal.stories.tsx b/apps/web/src/features/playlists/components/AddCollaboratorModal.stories.tsx
new file mode 100644
index 000000000..660b3d0d3
--- /dev/null
+++ b/apps/web/src/features/playlists/components/AddCollaboratorModal.stories.tsx
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { AddCollaboratorModal } from './AddCollaboratorModal';
+
+/**
+ * AddCollaboratorModal - Modal d'ajout de collaborateur
+ *
+ * Modal permettant de rechercher et ajouter des
+ * collaborateurs Ă une playlist.
+ */
+const meta: Meta = {
+ title: 'Features/Playlists/AddCollaboratorModal',
+ component: AddCollaboratorModal,
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'Modal de recherche et ajout de collaborateurs.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ args: {
+ onClose: fn(),
+ onAdd: fn(),
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Recherche en cours.
+ */
+export const Searching: Story = {
+ name: 'Recherche',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Spinner pendant la recherche d\'utilisateurs.',
+ },
+ },
+ },
+};
+
+/**
+ * Collaborateur ajouté.
+ */
+export const Added: Story = {
+ name: 'Ajouté',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Confirmation d\'ajout du collaborateur.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/playlists/components/CollaboratorList.stories.tsx b/apps/web/src/features/playlists/components/CollaboratorList.stories.tsx
new file mode 100644
index 000000000..619b109fb
--- /dev/null
+++ b/apps/web/src/features/playlists/components/CollaboratorList.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CollaboratorList } from './CollaboratorList';
+
+/**
+ * CollaboratorList - Liste des collaborateurs
+ *
+ * Composant affichant les collaborateurs d'une playlist
+ * avec leurs permissions.
+ */
+const meta: Meta = {
+ title: 'Features/Playlists/CollaboratorList',
+ component: CollaboratorList,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'Liste des collaborateurs avec rĂŽles et permissions.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut avec collaborateurs.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat vide.
+ */
+export const Empty: Story = {
+ name: 'Vide',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Message affiché quand il n\'y a pas de collaborateurs.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/playlists/components/CollaboratorManagement.stories.tsx b/apps/web/src/features/playlists/components/CollaboratorManagement.stories.tsx
new file mode 100644
index 000000000..d70b6c738
--- /dev/null
+++ b/apps/web/src/features/playlists/components/CollaboratorManagement.stories.tsx
@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CollaboratorManagement } from './CollaboratorManagement';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { PlaylistCollaborator } from '@/services/api/playlists';
+
+const queryClient = new QueryClient();
+
+const CollaboratorManagementWithData = (props: any) => {
+ useEffect(() => {
+ // Seed mock data
+ const mockCollaborators: PlaylistCollaborator[] = [
+ {
+ id: 'c1',
+ user_id: 'u1',
+ playlist_id: props.playlistId,
+ role: 'editor',
+ joined_at: new Date().toISOString(),
+ user: {
+ id: 'u1',
+ username: 'BeatMaster',
+ avatar: 'https://picsum.photos/id/10/50/50'
+ }
+ },
+ {
+ id: 'c2',
+ user_id: 'u2',
+ playlist_id: props.playlistId,
+ role: 'viewer',
+ joined_at: new Date().toISOString(),
+ user: {
+ id: 'u2',
+ username: 'LyricsPro',
+ avatar: 'https://picsum.photos/id/20/50/50'
+ }
+ }
+ ];
+
+ queryClient.setQueryData(['playlist', props.playlistId, 'collaborators'], mockCollaborators);
+ }, [props.playlistId]);
+
+ return ;
+};
+
+const meta = {
+ title: 'Features/Playlists/CollaboratorManagement',
+ component: CollaboratorManagement,
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ render: (args) => ,
+ args: {
+ playlistId: 'p1',
+ canManage: true
+ }
+};
+
+export const ReadOnly: Story = {
+ render: (args) => ,
+ args: {
+ playlistId: 'p1',
+ canManage: false
+ }
+};
diff --git a/apps/web/src/features/playlists/components/CreatePlaylistDialog.stories.tsx b/apps/web/src/features/playlists/components/CreatePlaylistDialog.stories.tsx
new file mode 100644
index 000000000..6e334bc97
--- /dev/null
+++ b/apps/web/src/features/playlists/components/CreatePlaylistDialog.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CreatePlaylistDialog } from './CreatePlaylistDialog';
+import { ToastProvider } from '@/components/feedback/ToastProvider';
+
+const meta: Meta = {
+ title: 'Features/Playlists/CreatePlaylistDialog',
+ component: CreatePlaylistDialog,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+ argTypes: {
+ onOpenChange: { action: 'onOpenChange' },
+ onCreated: { action: 'onCreated' },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ open: true,
+ },
+};
diff --git a/apps/web/src/features/playlists/components/ExportPlaylistButton.stories.tsx b/apps/web/src/features/playlists/components/ExportPlaylistButton.stories.tsx
new file mode 100644
index 000000000..482636211
--- /dev/null
+++ b/apps/web/src/features/playlists/components/ExportPlaylistButton.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ExportPlaylistButton } from './ExportPlaylistButton';
+import { ToastProvider } from '@/components/feedback/ToastProvider';
+
+const meta: Meta = {
+ title: 'Features/Playlists/ExportPlaylistButton',
+ component: ExportPlaylistButton,
+ parameters: {
+ layout: 'centered',
+ },
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ playlistId: '1',
+ playlistTitle: 'My Playlist',
+ },
+};
diff --git a/apps/web/src/features/playlists/components/PlaylistActions.stories.tsx b/apps/web/src/features/playlists/components/PlaylistActions.stories.tsx
new file mode 100644
index 000000000..2e8b28edd
--- /dev/null
+++ b/apps/web/src/features/playlists/components/PlaylistActions.stories.tsx
@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlaylistActions } from './PlaylistActions';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ToastProvider } from '@/components/feedback/ToastProvider';
+import { MemoryRouter } from 'react-router-dom';
+
+const queryClient = new QueryClient();
+
+const mockPlaylist = {
+ id: '1',
+ title: 'My Awesome Playlist',
+ description: 'Best tracks ever',
+ is_public: true,
+ cover_url: 'https://picsum.photos/200',
+ user_id: '1',
+ track_count: 10,
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString(),
+};
+
+const meta: Meta = {
+ title: 'Features/Playlists/PlaylistActions',
+ component: PlaylistActions,
+ parameters: {
+ layout: 'centered',
+ },
+ decorators: [
+ (Story) => (
+
+
+
+
+
+
+
+
+
+ ),
+ ],
+ tags: ['autodocs'],
+ argTypes: {
+ onUpdated: { action: 'onUpdated' },
+ onShareClick: { action: 'onShareClick' },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ playlist: mockPlaylist,
+ },
+};
+
+export const WithShare: Story = {
+ args: {
+ playlist: mockPlaylist,
+ canShare: true,
+ },
+};
diff --git a/apps/web/src/features/playlists/components/PlaylistAnalytics.stories.tsx b/apps/web/src/features/playlists/components/PlaylistAnalytics.stories.tsx
new file mode 100644
index 000000000..bf8cec3c5
--- /dev/null
+++ b/apps/web/src/features/playlists/components/PlaylistAnalytics.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlaylistAnalytics } from './PlaylistAnalytics';
+
+const meta: Meta = {
+ title: 'Features/Playlists/PlaylistAnalytics',
+ component: PlaylistAnalytics,
+ parameters: {
+ layout: 'padded',
+ },
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ playlistId: '1',
+ },
+};
diff --git a/apps/web/src/features/playlists/components/PlaylistFollowButton.stories.tsx b/apps/web/src/features/playlists/components/PlaylistFollowButton.stories.tsx
new file mode 100644
index 000000000..b26057ccf
--- /dev/null
+++ b/apps/web/src/features/playlists/components/PlaylistFollowButton.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlaylistFollowButton } from './PlaylistFollowButton';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ToastProvider } from '@/components/feedback/ToastProvider';
+
+const queryClient = new QueryClient();
+
+const meta: Meta = {
+ title: 'Features/Playlists/PlaylistFollowButton',
+ component: PlaylistFollowButton,
+ parameters: {
+ layout: 'centered',
+ },
+ decorators: [
+ (Story) => (
+
+
+
+
+
+
+
+ ),
+ ],
+ tags: ['autodocs'],
+ argTypes: {
+ onFollowChange: { action: 'onFollowChange' },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ playlistId: '1',
+ initialFollowing: false,
+ initialFollowerCount: 10,
+ showCount: true,
+ },
+};
+
+export const Following: Story = {
+ args: {
+ playlistId: '1',
+ initialFollowing: true,
+ initialFollowerCount: 11,
+ showCount: true,
+ },
+};
diff --git a/apps/web/src/features/playlists/components/PlaylistForm.stories.tsx b/apps/web/src/features/playlists/components/PlaylistForm.stories.tsx
new file mode 100644
index 000000000..f23139948
--- /dev/null
+++ b/apps/web/src/features/playlists/components/PlaylistForm.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlaylistForm } from './PlaylistForm';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ToastProvider } from '@/components/feedback/ToastProvider';
+
+const queryClient = new QueryClient();
+
+const meta: Meta = {
+ title: 'Features/Playlists/PlaylistForm',
+ component: PlaylistForm,
+ parameters: {
+ layout: 'centered',
+ },
+ decorators: [
+ (Story) => (
+
+
+
+
+
+
+
+ ),
+ ],
+ tags: ['autodocs'],
+ argTypes: {
+ onSubmit: { action: 'onSubmit' },
+ onCancel: { action: 'onCancel' },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Create: Story = {
+ args: {},
+};
+
+export const Edit: Story = {
+ args: {
+ playlist: {
+ id: '1',
+ title: 'Existing Playlist',
+ description: 'Some description',
+ is_public: true,
+ cover_url: '',
+ user_id: '1',
+ track_count: 5,
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString(),
+ },
+ submitLabel: 'Save Changes',
+ },
+};
diff --git a/apps/web/src/features/playlists/components/PlaylistHeader.stories.tsx b/apps/web/src/features/playlists/components/PlaylistHeader.stories.tsx
index 03fc0319e..ef82feae0 100644
--- a/apps/web/src/features/playlists/components/PlaylistHeader.stories.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistHeader.stories.tsx
@@ -1,28 +1,27 @@
import type { Meta, StoryObj } from '@storybook/react';
import { PlaylistHeader } from './PlaylistHeader';
+import { Playlist } from '../types';
import { BrowserRouter } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-const queryClient = new QueryClient();
-
-const mockPlaylist = {
+const mockPlaylist: Playlist = {
id: 'pl1',
- user_id: 'u1',
- title: 'Chill Vibes',
- description: 'Relax and unwind with these smooth tracks.',
+ title: 'Summer Vibes 2025',
+ description: 'The ultimate collection of sun-soaked tracks.',
+ cover_url: 'https://picsum.photos/id/30/500/500',
is_public: true,
- track_count: 120,
- created_at: new Date().toISOString(),
- updated_at: new Date().toISOString(),
+ user_id: 'u1',
user: {
id: 'u1',
- username: 'ChillMaster',
- avatar_url: 'https://placehold.co/40',
+ username: 'DJ Sunny',
+ avatar_url: ''
},
- cover_url: 'https://placehold.co/600x400',
- follower_count: 1234,
+ track_count: 42,
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString(),
+ tags: ['summer', 'house', 'vibes'],
+ follower_count: 1250,
is_following: false,
-};
+} as Playlist;
const meta = {
title: 'Features/Playlists/PlaylistHeader',
@@ -30,13 +29,11 @@ const meta = {
tags: ['autodocs'],
decorators: [
(Story) => (
-
-
-
-
-
-
-
+
+
+
+
+
),
],
} satisfies Meta;
@@ -44,7 +41,7 @@ const meta = {
export default meta;
type Story = StoryObj;
-export const Default: Story = {
+export const Public: Story = {
args: {
playlist: mockPlaylist,
},
@@ -52,19 +49,6 @@ export const Default: Story = {
export const Private: Story = {
args: {
- playlist: {
- ...mockPlaylist,
- is_public: false,
- title: 'Private Collection',
- },
- },
-};
-
-export const NoCover: Story = {
- args: {
- playlist: {
- ...mockPlaylist,
- cover_url: undefined,
- },
+ playlist: { ...mockPlaylist, is_public: false },
},
};
diff --git a/apps/web/src/features/playlists/components/PlaylistList.stories.tsx b/apps/web/src/features/playlists/components/PlaylistList.stories.tsx
new file mode 100644
index 000000000..9099652db
--- /dev/null
+++ b/apps/web/src/features/playlists/components/PlaylistList.stories.tsx
@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlaylistList } from './PlaylistList';
+
+/**
+ * PlaylistList - Liste de playlists
+ *
+ * Composant d'affichage des playlists en grille ou liste
+ * avec loading states et Ă©tat vide.
+ */
+const meta: Meta = {
+ title: 'Features/Playlists/PlaylistList',
+ component: PlaylistList,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'Liste de playlists avec modes grille et liste.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut avec playlists.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Affichage en grille.
+ */
+export const Grid: Story = {
+ name: 'Grille',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affichage des playlists en mode grille.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat vide.
+ */
+export const Empty: Story = {
+ name: 'Vide',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Message affiché quand aucune playlist n\'existe.',
+ },
+ },
+ },
+};
+
+/**
+ * Ătat de chargement.
+ */
+export const Loading: Story = {
+ name: 'Chargement',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Skeleton loading pendant le chargement.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/playlists/components/PlaylistRecommendations.stories.tsx b/apps/web/src/features/playlists/components/PlaylistRecommendations.stories.tsx
new file mode 100644
index 000000000..a286b27a3
--- /dev/null
+++ b/apps/web/src/features/playlists/components/PlaylistRecommendations.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlaylistRecommendations } from './PlaylistRecommendations';
+
+/**
+ * PlaylistRecommendations - Recommandations de playlists
+ *
+ * Composant affichant des suggestions de playlists
+ * basées sur les goûts de l'utilisateur.
+ */
+const meta: Meta = {
+ title: 'Features/Playlists/PlaylistRecommendations',
+ component: PlaylistRecommendations,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'Recommandations de playlists personnalisées.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut avec recommandations.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat vide.
+ */
+export const Empty: Story = {
+ name: 'Vide',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Message affiché quand aucune recommandation n\'est disponible.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/playlists/components/PlaylistSearch.stories.tsx b/apps/web/src/features/playlists/components/PlaylistSearch.stories.tsx
new file mode 100644
index 000000000..1f97e95e1
--- /dev/null
+++ b/apps/web/src/features/playlists/components/PlaylistSearch.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlaylistSearch } from './PlaylistSearch';
+
+/**
+ * PlaylistSearch - Recherche de playlists
+ *
+ * Composant de recherche avec autocomplétion
+ * et résultats en temps réel.
+ */
+const meta: Meta = {
+ title: 'Features/Playlists/PlaylistSearch',
+ component: PlaylistSearch,
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'Recherche de playlists avec résultats en temps réel.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Avec résultats affichés.
+ */
+export const WithResults: Story = {
+ name: 'Avec résultats',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Affiche les résultats de recherche.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/playlists/components/PlaylistTrackItem.stories.tsx b/apps/web/src/features/playlists/components/PlaylistTrackItem.stories.tsx
new file mode 100644
index 000000000..dcd8c6f1a
--- /dev/null
+++ b/apps/web/src/features/playlists/components/PlaylistTrackItem.stories.tsx
@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlaylistTrackItem } from './PlaylistTrackItem';
+
+/**
+ * PlaylistTrackItem - ĂlĂ©ment de track dans une playlist
+ *
+ * Ligne affichant un track avec contrÎles, durée,
+ * et indicateur de lecture.
+ */
+const meta: Meta = {
+ title: 'Features/Playlists/PlaylistTrackItem',
+ component: PlaylistTrackItem,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'ĂlĂ©ment de track avec actions et indicateurs.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Track en cours de lecture.
+ */
+export const Playing: Story = {
+ name: 'En lecture',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Indicateur visuel du track en cours de lecture.',
+ },
+ },
+ },
+};
+
+/**
+ * Track sélectionné.
+ */
+export const Selected: Story = {
+ name: 'Sélectionné',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Ătat de sĂ©lection pour actions groupĂ©es.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/playlists/components/PlaylistTrackList.stories.tsx b/apps/web/src/features/playlists/components/PlaylistTrackList.stories.tsx
new file mode 100644
index 000000000..282ba2dd3
--- /dev/null
+++ b/apps/web/src/features/playlists/components/PlaylistTrackList.stories.tsx
@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlaylistTrackList } from './PlaylistTrackList';
+
+/**
+ * PlaylistTrackList - Liste des tracks d'une playlist
+ *
+ * Composant affichant les tracks avec drag-and-drop
+ * pour réorganisation.
+ */
+const meta: Meta = {
+ title: 'Features/Playlists/PlaylistTrackList',
+ component: PlaylistTrackList,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: 'Liste de tracks avec drag-and-drop.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut avec tracks.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat vide.
+ */
+export const Empty: Story = {
+ name: 'Vide',
+};
+
+/**
+ * Mode réorganisation.
+ */
+export const Reordering: Story = {
+ name: 'RĂ©organisation',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Démonstration du drag-and-drop pour réorganiser.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/playlists/components/SharePlaylistModal.stories.tsx b/apps/web/src/features/playlists/components/SharePlaylistModal.stories.tsx
new file mode 100644
index 000000000..853e52651
--- /dev/null
+++ b/apps/web/src/features/playlists/components/SharePlaylistModal.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { SharePlaylistModal } from './SharePlaylistModal';
+
+/**
+ * SharePlaylistModal - Modal de partage de playlist
+ *
+ * Modal permettant de partager une playlist via lien
+ * ou réseaux sociaux.
+ */
+const meta: Meta = {
+ title: 'Features/Playlists/SharePlaylistModal',
+ component: SharePlaylistModal,
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'Modal de partage avec lien copiable et options sociales.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ args: {
+ onClose: fn(),
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Lien copié.
+ */
+export const Copied: Story = {
+ name: 'Copié',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Confirmation que le lien a été copié.',
+ },
+ },
+ },
+};
diff --git a/apps/web/src/features/playlists/pages/PlaylistDetailPage.stories.tsx b/apps/web/src/features/playlists/pages/PlaylistDetailPage.stories.tsx
new file mode 100644
index 000000000..380d81342
--- /dev/null
+++ b/apps/web/src/features/playlists/pages/PlaylistDetailPage.stories.tsx
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlaylistDetailPage } from './PlaylistDetailPage';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+/**
+ * PlaylistDetailPage - Page de détail playlist
+ *
+ * Page complĂšte affichant une playlist avec header,
+ * tracks, collaborateurs et actions.
+ */
+const meta: Meta = {
+ title: 'Pages/Playlists/PlaylistDetailPage',
+ component: PlaylistDetailPage,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Page de détail d\'une playlist avec toutes ses fonctionnalités.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ } />
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat de chargement.
+ */
+export const Loading: Story = {
+ name: 'Chargement',
+};
+
+/**
+ * Playlist non trouvée.
+ */
+export const NotFound: Story = {
+ name: 'Non trouvée',
+};
diff --git a/apps/web/src/features/playlists/pages/PlaylistListPage.stories.tsx b/apps/web/src/features/playlists/pages/PlaylistListPage.stories.tsx
new file mode 100644
index 000000000..25833cfb8
--- /dev/null
+++ b/apps/web/src/features/playlists/pages/PlaylistListPage.stories.tsx
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlaylistListPage } from './PlaylistListPage';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const createMockQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false, staleTime: Infinity },
+ mutations: { retry: false },
+ },
+});
+
+/**
+ * PlaylistListPage - Page de liste des playlists
+ *
+ * Page principale affichant toutes les playlists
+ * avec recherche et filtres.
+ */
+const meta: Meta = {
+ title: 'Pages/Playlists/PlaylistListPage',
+ component: PlaylistListPage,
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ description: {
+ component: 'Page de liste des playlists avec recherche et filtres.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Ătat par dĂ©faut.
+ */
+export const Default: Story = {
+ name: 'Par défaut',
+};
+
+/**
+ * Ătat vide.
+ */
+export const Empty: Story = {
+ name: 'Vide',
+};
+
+/**
+ * Ătat de chargement.
+ */
+export const Loading: Story = {
+ name: 'Chargement',
+};
diff --git a/apps/web/src/features/profile/components/FollowButton.stories.tsx b/apps/web/src/features/profile/components/FollowButton.stories.tsx
index f9a3ec4dd..128a651c8 100644
--- a/apps/web/src/features/profile/components/FollowButton.stories.tsx
+++ b/apps/web/src/features/profile/components/FollowButton.stories.tsx
@@ -1,63 +1,64 @@
import type { Meta, StoryObj } from '@storybook/react';
import { FollowButton } from './FollowButton';
+import { ToastProvider } from '@/components/feedback/ToastProvider';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+const queryClient = new QueryClient();
+
+// Seed auth store to simulate logged in user
+const WithAuth = (Story: any) => {
+ useEffect(() => {
+ // Dynamic import to avoid circular dependencies or build issues if store is used elsewhere
+ import('@/features/auth/store/authStore').then(({ useAuthStore }) => {
+ useAuthStore.setState({
+ isAuthenticated: true,
+ user: { id: 'current-user-id', email: 'test@example.com', username: 'CurrentUser' }
+ });
+ });
+ }, []);
+ return ;
+};
+
+// Wrapper to seed data
+const FollowButtonWithData = (props: any) => {
+ useEffect(() => {
+ queryClient.setQueryData(['userProfile', props.userId], {
+ id: props.userId,
+ username: 'TargetUser',
+ is_following: props.initialFollowing
+ });
+ }, [props.userId, props.initialFollowing]);
+ return ;
+};
-const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- retry: false,
- },
- },
-});
const meta = {
- title: 'Features/Profile/Components/FollowButton',
+ title: 'Features/Profile/FollowButton',
component: FollowButton,
tags: ['autodocs'],
decorators: [
(Story) => (
-
+
+