veza/apps/web/src/components/admin/UserTableRow.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { UserTableRow } from './UserTableRow';
import { User } from '@/types';

// Mock user data
const createMockUser = (overrides: Partial<User> = {}): User => ({
    id: 'usr_abc123def456',
    username: 'demo_artist',
    email: 'demo@veza.music',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=demo',
    status: 'online',
    role: 'user',
    roles: ['user', 'artist'],
    tier: 'Pro',
    created_at: '2025-01-15',
    last_login_at: '2026-02-02',
    ...overrides,
});

/**
 * UserTableRow - Ligne de tableau utilisateur
 *
 * Composant de ligne affichant les informations d'un utilisateur
 * avec menu d'actions contextuel.
 */
const meta: Meta<typeof UserTableRow> = {
    title: 'Components/Features/Admin/UserTableRow',
    component: UserTableRow,
    parameters: {
        docs: {
            description: {
                component: 'Ligne de tableau utilisateur avec avatar, statut, rôles et menu d\'actions.',
            },
        },
    },
    tags: ['autodocs'],
    args: {
        user: createMockUser(),
        onBan: fn(),
        onDelete: fn(),
        onEditRole: fn(),
    },
    argTypes: {
        user: {
            description: 'Objet utilisateur à afficher',
        },
        onBan: {
            action: 'onBan',
            description: 'Callback pour suspendre l\'utilisateur',
        },
        onDelete: {
            action: 'onDelete',
            description: 'Callback pour supprimer l\'utilisateur',
        },
        onEditRole: {
            action: 'onEditRole',
            description: 'Callback pour modifier les rôles',
        },
    },
    decorators: [
        (Story) => (
            <div className="bg-kodo-background p-4">
                <table className="w-full">
                    <tbody>
                        <Story />
                    </tbody>
                </table>
            </div>
        ),
    ],
};

export default meta;
type Story = StoryObj<typeof meta>;

/**
 * Utilisateur standard en ligne.
 */
export const Default: Story = {
    name: 'Par défaut',
};

/**
 * Ligne sélectionnée avec menu ouvert.
 */
export const Selected: Story = {
    name: 'Sélectionné',
    parameters: {
        docs: {
            description: {
                story: 'État de la ligne quand le menu d\'actions est ouvert.',
            },
        },
    },
};

/**
 * Utilisateur banni/suspendu.
 */
export const Banned: Story = {
    name: 'Suspendu',
    args: {
        user: createMockUser({
            username: 'banned_user',
            status: 'busy',
            roles: ['banned'],
        }),
    },
    parameters: {
        docs: {
            description: {
                story: 'Affichage d\'un utilisateur suspendu.',
            },
        },
    },
};