117 lines
2.8 KiB
TypeScript
117 lines
2.8 KiB
TypeScript
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.',
|
|
},
|
|
},
|
|
},
|
|
};
|