import React from 'react'
import { Table } from '../'
import { HIDE_CONTROL, SPACE, Story, STRING } from '../helpers/storybook'
export default {
title: 'Table',
component: Table,
argTypes: {
fullWidth: { control: 'boolean', defaultValue: true },
cardBreakpoint: { options: ['tiny', 'small', 'medium', 'large', 'extraLarge'] },
variant: { options: ['table', 'card', 'mini'] },
dividers: { control: 'boolean' },
as: HIDE_CONTROL,
},
} as const
type TableStory = Story<
typeof Table,
{
captionText: string
hasHeader: boolean
headerText: string
cellText: string
columnCount: number
rowCount: number
alignment: 'left' | 'right' | 'center'
hasBody: boolean
}
>
export const Layout: TableStory = ({
captionText,
hasHeader,
headerText,
cellText,
columnCount,
rowCount,
alignment,
hasBody,
...args
}) => {
const makeRow = (
content: string,
index: number,
Row: React.ElementType = Table.Row
): React.ReactElement => {
const cols = []
for (let i = 0; i < columnCount; i++) {
cols.push(
{content ? `${content} ${i}` : null}
)
}
return {cols}
}
const header = hasHeader ? makeRow(headerText, 0, Table.Header) : null
const Body = hasBody ? Table.Body : React.Fragment
const rows = []
for (let i = 0; i < rowCount; i++) {
rows.push(makeRow(cellText, i + 1))
}
return (
{captionText && {captionText}}
{header}
{rows}
)
}
Layout.argTypes = {
alignment: { name: 'cell align', options: ['left', 'center', 'right'] },
captionText: STRING,
hasHeader: { name: 'has thead' },
hasBody: { name: 'has tbody' },
margin: SPACE,
sticky: { name: 'Sticky column position', options: ['right', 'none'] },
rowFocus: { options: [true, false, 'mouse-only'] },
}
Layout.args = {
captionText: '',
hasHeader: true,
headerText: 'Header',
cellText: 'Cell',
columnCount: 4,
rowCount: 3,
hasBody: true,
sticky: 'none',
rowFocus: true,
rowHover: true,
}
export const StylesOnly: TableStory = ({
captionText,
hasHeader,
headerText,
cellText,
columnCount,
rowCount,
alignment,
hasBody,
...args
}) => {
const makeRow = (
content: string,
index: number,
Cell: React.ElementType = 'td'
): React.ReactElement => {
const cols = []
for (let i = 0; i < columnCount; i++) {
cols.push({`${content} ${i}`} | )
}
return {cols}
}
const header = hasHeader ? {makeRow(headerText, 0, 'th')} : null
const Body = hasBody ? 'tbody' : React.Fragment
const rows = []
for (let i = 0; i < rowCount; i++) {
rows.push(makeRow(cellText, i + 1))
}
return (
{captionText && {captionText}}
{header}
{rows}
)
}
StylesOnly.argTypes = { ...Layout.argTypes }
delete StylesOnly.argTypes.alignment
StylesOnly.args = { ...Layout.args }
export const WithLongValues: Story<
typeof Table,
{
text1: string
text2: string
}
> = ({ text1, text2 }) => {
return (
Header Cell
Header Cell
Header Cell
Header Cell
{text1}
Data cell
Data cell
Data cell
{text2}
Data cell
Data cell
Data cell
Data cell
Data cell
Data cell
Data cell
)
}
WithLongValues.argTypes = {
variant: HIDE_CONTROL,
fullWidth: HIDE_CONTROL,
cardBreakpoint: HIDE_CONTROL,
dividers: HIDE_CONTROL,
}
const text =
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta perspiciatis dolores autem reiciendis minus voluptates, necessitatibus expedita inventore id vel'
WithLongValues.args = {
text1: text,
text2: text,
}
WithLongValues.storyName = 'With long values'