liqa/client/.storybook/stories/Table.stories.tsx

import type { Meta, StoryObj } from '@storybook/react-vite';
import { Table } from '../../src/ui/Table/Table';
import { Badge } from '../../src/ui/Badge/Badge';

const meta: Meta<typeof Table> = {
  title: 'UI/Table',
  component: Table,
  tags: ['autodocs'],
  parameters: { layout: 'padded' },
};
export default meta;

interface User {
  id: number;
  name: string;
  email: string;
  status: 'active' | 'inactive';
}

const users: User[] = [
  { id: 1, name: 'Alice Müller', email: 'alice@example.com', status: 'active' },
  { id: 2, name: 'Bob Nguyen', email: 'bob@example.com', status: 'inactive' },
  { id: 3, name: 'Carol Santos', email: 'carol@example.com', status: 'active' },
];

export const Default: StoryObj<typeof Table<User>> = {
  args: {
    data: users,
    rowKey: (u) => u.id,
    emptyMessage: 'No users found.',
    columns: [
      { key: 'id', header: 'ID', render: (u) => u.id, width: 60 },
      { key: 'name', header: 'Name', render: (u) => u.name },
      { key: 'email', header: 'Email', render: (u) => u.email },
      {
        key: 'status',
        header: 'Status',
        width: 110,
        render: (u) => (
          <Badge variant={u.status === 'active' ? 'success' : 'neutral'}>{u.status}</Badge>
        ),
      },
    ],
  },
};

export const Loading: StoryObj<typeof Table<User>> = {
  args: {
    ...Default.args,
    loading: true,
  },
};

export const Empty: StoryObj<typeof Table<User>> = {
  args: {
    ...Default.args,
    data: [],
    emptyMessage: 'No users found.',
  },
};

export const SingleRow: StoryObj<typeof Table<User>> = {
  args: {
    ...Default.args,
    data: [users[0]],
  },
};