eventx-design-system
Version:
Design System do EventX
286 lines (285 loc) • 7.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Table } from './Table';
import { Badge } from '../Badge';
import { Button } from '../Button';
const meta = {
title: 'Components/Table',
component: Table,
parameters: {
layout: 'padded',
},
tags: ['autodocs'],
argTypes: {
variant: {
control: { type: 'select' },
options: ['default', 'striped', 'bordered'],
},
hoverable: {
control: { type: 'boolean' },
},
selectable: {
control: { type: 'boolean' },
},
},
};
export default meta;
// Dados de exemplo
const sampleData = [
{
id: '1',
name: 'João Silva',
email: 'joao@email.com',
role: 'Admin',
status: 'active',
lastLogin: '2024-01-15',
actions: 'edit',
},
{
id: '2',
name: 'Maria Santos',
email: 'maria@email.com',
role: 'User',
status: 'inactive',
lastLogin: '2024-01-10',
actions: 'edit',
},
{
id: '3',
name: 'Pedro Costa',
email: 'pedro@email.com',
role: 'Manager',
status: 'active',
lastLogin: '2024-01-12',
actions: 'edit',
},
{
id: '4',
name: 'Ana Oliveira',
email: 'ana@email.com',
role: 'User',
status: 'active',
lastLogin: '2024-01-14',
actions: 'edit',
},
];
const eventData = [
{
id: '1',
name: 'Conferência de Tecnologia 2024',
date: '2024-03-15',
location: 'São Paulo, SP',
organizer: 'Tech Events',
category: 'Tecnologia',
status: 'active',
attendees: 150,
},
{
id: '2',
name: 'Workshop de Marketing Digital',
date: '2024-03-20',
location: 'Rio de Janeiro, RJ',
organizer: 'Marketing Pro',
category: 'Marketing',
status: 'draft',
attendees: 80,
},
{
id: '3',
name: 'Meetup de Desenvolvimento',
date: '2024-03-25',
location: 'Belo Horizonte, MG',
organizer: 'Dev Community',
category: 'Tecnologia',
status: 'active',
attendees: 45,
},
];
// Colunas básicas
const basicColumns = [
{
key: 'name',
title: 'Nome',
dataIndex: 'name',
sortable: true,
},
{
key: 'email',
title: 'Email',
dataIndex: 'email',
},
{
key: 'role',
title: 'Função',
dataIndex: 'role',
sortable: true,
},
{
key: 'status',
title: 'Status',
dataIndex: 'status',
render: (value) => (_jsx(Badge, { variant: value === 'active' ? 'success' : 'error', size: "sm", children: value === 'active' ? 'Ativo' : 'Inativo' })),
},
];
// Colunas com ações
const columnsWithActions = [
...basicColumns,
{
key: 'actions',
title: 'Ações',
align: 'center',
width: '120px',
render: () => (_jsxs("div", { style: { display: 'flex', gap: '0.5rem' }, children: [_jsx(Button, { size: "sm", variant: "outline", children: "Editar" }), _jsx(Button, { size: "sm", variant: "ghost", children: "Ver" })] })),
},
];
// Colunas para eventos
const eventColumns = [
{
key: 'name',
title: 'Evento',
dataIndex: 'name',
sortable: true,
},
{
key: 'date',
title: 'Data',
dataIndex: 'date',
sortable: true,
render: (value) => new Date(value).toLocaleDateString('pt-BR'),
},
{
key: 'location',
title: 'Local',
dataIndex: 'location',
},
{
key: 'organizer',
title: 'Organizador',
dataIndex: 'organizer',
sortable: true,
},
{
key: 'category',
title: 'Categoria',
dataIndex: 'category',
},
{
key: 'attendees',
title: 'Participantes',
dataIndex: 'attendees',
align: 'center',
sortable: true,
},
{
key: 'status',
title: 'Status',
dataIndex: 'status',
render: (value) => (_jsx(Badge, { variant: value === 'active' ? 'success' : 'warning', size: "sm", children: value === 'active' ? 'Ativo' : 'Rascunho' })),
},
];
export const Default = {
args: {
columns: basicColumns,
dataSource: sampleData,
variant: 'default',
hoverable: true,
},
};
export const Striped = {
args: {
columns: basicColumns,
dataSource: sampleData,
variant: 'striped',
hoverable: true,
},
};
export const Bordered = {
args: {
columns: basicColumns,
dataSource: sampleData,
variant: 'bordered',
hoverable: true,
},
};
export const WithActions = {
args: {
columns: columnsWithActions,
dataSource: sampleData,
variant: 'default',
hoverable: true,
},
};
export const Selectable = {
render: (args) => {
const [selectedKeys, setSelectedKeys] = useState([]);
return (_jsxs("div", { children: [_jsx(Table, { ...args, selectable: true, selectedRowKeys: selectedKeys, onRowSelect: (keys, rows) => {
setSelectedKeys(keys);
console.log('Selected rows:', rows);
} }), _jsx("div", { style: { marginTop: '1rem' }, children: _jsxs("p", { children: ["Linhas selecionadas: ", selectedKeys.length] }) })] }));
},
args: {
columns: basicColumns,
dataSource: sampleData,
variant: 'default',
hoverable: true,
},
};
export const WithSorting = {
render: (args) => {
const [sortConfig, setSortConfig] = useState(undefined);
const handleSort = (key, direction) => {
setSortConfig({ key, direction });
};
return (_jsx(Table, { ...args, sortConfig: sortConfig, onSort: handleSort }));
},
args: {
columns: basicColumns,
dataSource: sampleData,
variant: 'default',
hoverable: true,
},
};
export const EventsTable = {
args: {
columns: eventColumns,
dataSource: eventData,
variant: 'default',
hoverable: true,
},
};
export const Loading = {
args: {
columns: basicColumns,
dataSource: [],
loading: true,
variant: 'default',
},
};
export const Empty = {
args: {
columns: basicColumns,
dataSource: [],
variant: 'default',
emptyText: 'Nenhum usuário encontrado',
},
};
export const WithRowClick = {
args: {
columns: basicColumns,
dataSource: sampleData,
variant: 'default',
hoverable: true,
onRowClick: (record, index) => {
console.log('Row clicked:', record, 'at index:', index);
alert(`Clicou na linha: ${record.name}`);
},
},
};
export const Compact = {
args: {
columns: basicColumns,
dataSource: sampleData.slice(0, 2),
variant: 'default',
hoverable: false,
},
};