affc628722
- Added stories for: DatePicker, Select, RadioGroup, FileUpload, Table - Achieved high coverage for core UI components
65 lines
2.6 KiB
TypeScript
65 lines
2.6 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './table';
|
|
|
|
const meta = {
|
|
title: 'UI/Table',
|
|
component: Table,
|
|
tags: ['autodocs'],
|
|
} satisfies Meta<typeof Table>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {
|
|
render: () => (
|
|
<Table>
|
|
<TableCaption>A list of your recent invoices.</TableCaption>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-[100px]">Invoice</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Method</TableHead>
|
|
<TableHead className="text-right">Amount</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell className="font-medium">INV-001</TableCell>
|
|
<TableCell>Paid</TableCell>
|
|
<TableCell>Credit Card</TableCell>
|
|
<TableCell className="text-right">$250.00</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">INV-002</TableCell>
|
|
<TableCell>Pending</TableCell>
|
|
<TableCell>PayPal</TableCell>
|
|
<TableCell className="text-right">$150.00</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">INV-003</TableCell>
|
|
<TableCell>Unpaid</TableCell>
|
|
<TableCell>Bank Transfer</TableCell>
|
|
<TableCell className="text-right">$350.00</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">INV-004</TableCell>
|
|
<TableCell>Paid</TableCell>
|
|
<TableCell>Credit Card</TableCell>
|
|
<TableCell className="text-right">$450.00</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell className="font-medium">INV-005</TableCell>
|
|
<TableCell>Paid</TableCell>
|
|
<TableCell>PayPal</TableCell>
|
|
<TableCell className="text-right">$550.00</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
<TableFooter>
|
|
<TableRow>
|
|
<TableCell colSpan={3}>Total</TableCell>
|
|
<TableCell className="text-right">$1,750.00</TableCell>
|
|
</TableRow>
|
|
</TableFooter>
|
|
</Table>
|
|
),
|
|
};
|