@duro-app/ui 0.12.2 → 0.14.0

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,308 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Table} from './Table'
+import {Badge} from '../Badge/Badge'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+
+const meta: Meta = {
+  title: 'Components/Table',
+}
+
+export default meta
+type Story = StoryObj
+
+const services = [
+  {name: 'Traefik', status: 'Running', port: '443', uptime: '14d 3h'},
+  {name: 'Pi-hole', status: 'Running', port: '80', uptime: '14d 3h'},
+  {name: 'Portainer', status: 'Stopped', port: '9000', uptime: '\u2014'},
+  {name: 'Grafana', status: 'Running', port: '3000', uptime: '7d 12h'},
+  {name: 'Prometheus', status: 'Warning', port: '9090', uptime: '7d 12h'},
+]
+
+function statusVariant(status: string) {
+  switch (status) {
+    case 'Running':
+      return 'success' as const
+    case 'Stopped':
+      return 'error' as const
+    case 'Warning':
+      return 'warning' as const
+    default:
+      return 'default' as const
+  }
+}
+
+export const Default: Story = {
+  render: () => (
+    <Table.Root columns={4}>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>Service</Table.HeaderCell>
+          <Table.HeaderCell>Status</Table.HeaderCell>
+          <Table.HeaderCell>Port</Table.HeaderCell>
+          <Table.HeaderCell>Uptime</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {services.map((s) => (
+          <Table.Row key={s.name}>
+            <Table.Cell>{s.name}</Table.Cell>
+            <Table.Cell>
+              <Badge variant={statusVariant(s.status)} size="sm">
+                {s.status}
+              </Badge>
+            </Table.Cell>
+            <Table.Cell>{s.port}</Table.Cell>
+            <Table.Cell>{s.uptime}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  ),
+  play: async ({canvas}) => {
+    // ARIA table structure
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+
+    const rowgroups = canvas.getAllByRole('rowgroup')
+    await expect(rowgroups.length).toBe(2) // header + body
+
+    // Header cells
+    const columnHeaders = canvas.getAllByRole('columnheader')
+    await expect(columnHeaders.length).toBe(4)
+    await expect(columnHeaders[0]).toHaveTextContent('Service')
+    await expect(columnHeaders[1]).toHaveTextContent('Status')
+    await expect(columnHeaders[2]).toHaveTextContent('Port')
+    await expect(columnHeaders[3]).toHaveTextContent('Uptime')
+
+    // Rows (1 header + 5 body)
+    const rows = canvas.getAllByRole('row')
+    await expect(rows.length).toBe(6)
+
+    // Body cells
+    const cells = canvas.getAllByRole('cell')
+    await expect(cells.length).toBe(20) // 5 rows * 4 columns
+    await expect(cells[0]).toHaveTextContent('Traefik')
+  },
+}
+
+export const Striped: Story = {
+  render: () => (
+    <Table.Root variant="striped" columns={4}>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>Service</Table.HeaderCell>
+          <Table.HeaderCell>Status</Table.HeaderCell>
+          <Table.HeaderCell>Port</Table.HeaderCell>
+          <Table.HeaderCell>Uptime</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {services.map((s) => (
+          <Table.Row key={s.name}>
+            <Table.Cell>{s.name}</Table.Cell>
+            <Table.Cell>
+              <Badge variant={statusVariant(s.status)} size="sm">
+                {s.status}
+              </Badge>
+            </Table.Cell>
+            <Table.Cell>{s.port}</Table.Cell>
+            <Table.Cell>{s.uptime}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+    await expect(canvas.getAllByRole('row').length).toBe(6)
+  },
+}
+
+export const Bordered: Story = {
+  render: () => (
+    <Table.Root variant="bordered" columns={4}>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>Service</Table.HeaderCell>
+          <Table.HeaderCell>Status</Table.HeaderCell>
+          <Table.HeaderCell>Port</Table.HeaderCell>
+          <Table.HeaderCell>Uptime</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {services.map((s) => (
+          <Table.Row key={s.name}>
+            <Table.Cell>{s.name}</Table.Cell>
+            <Table.Cell>
+              <Badge variant={statusVariant(s.status)} size="sm">
+                {s.status}
+              </Badge>
+            </Table.Cell>
+            <Table.Cell>{s.port}</Table.Cell>
+            <Table.Cell>{s.uptime}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+    await expect(canvas.getAllByRole('columnheader').length).toBe(4)
+    await expect(canvas.getAllByRole('cell').length).toBe(20)
+  },
+}
+
+export const Compact: Story = {
+  render: () => (
+    <Table.Root size="sm" columns={4}>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>Service</Table.HeaderCell>
+          <Table.HeaderCell>Status</Table.HeaderCell>
+          <Table.HeaderCell>Port</Table.HeaderCell>
+          <Table.HeaderCell>Uptime</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {services.map((s) => (
+          <Table.Row key={s.name}>
+            <Table.Cell>{s.name}</Table.Cell>
+            <Table.Cell>
+              <Badge variant={statusVariant(s.status)} size="sm">
+                {s.status}
+              </Badge>
+            </Table.Cell>
+            <Table.Cell>{s.port}</Table.Cell>
+            <Table.Cell>{s.uptime}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+    await expect(canvas.getByText('Traefik')).toBeInTheDocument()
+  },
+}
+
+const storyStyles = css.create({
+  stack: {display: 'flex', flexDirection: 'column', gap: 24},
+  label: {color: colors.textMuted, fontSize: '0.875rem', fontWeight: 600},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={storyStyles.stack}>
+      <html.div>
+        <html.span style={storyStyles.label}>Default</html.span>
+        <Table.Root columns={3}>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+              <Table.HeaderCell>Role</Table.HeaderCell>
+              <Table.HeaderCell>Status</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Traefik</Table.Cell>
+              <Table.Cell>Reverse Proxy</Table.Cell>
+              <Table.Cell>Active</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Pi-hole</Table.Cell>
+              <Table.Cell>DNS</Table.Cell>
+              <Table.Cell>Active</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table.Root>
+      </html.div>
+
+      <html.div>
+        <html.span style={storyStyles.label}>Striped</html.span>
+        <Table.Root variant="striped" columns={3}>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+              <Table.HeaderCell>Role</Table.HeaderCell>
+              <Table.HeaderCell>Status</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Traefik</Table.Cell>
+              <Table.Cell>Reverse Proxy</Table.Cell>
+              <Table.Cell>Active</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Pi-hole</Table.Cell>
+              <Table.Cell>DNS</Table.Cell>
+              <Table.Cell>Active</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Grafana</Table.Cell>
+              <Table.Cell>Monitoring</Table.Cell>
+              <Table.Cell>Active</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table.Root>
+      </html.div>
+
+      <html.div>
+        <html.span style={storyStyles.label}>Bordered</html.span>
+        <Table.Root variant="bordered" columns={3}>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+              <Table.HeaderCell>Role</Table.HeaderCell>
+              <Table.HeaderCell>Status</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Traefik</Table.Cell>
+              <Table.Cell>Reverse Proxy</Table.Cell>
+              <Table.Cell>Active</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Pi-hole</Table.Cell>
+              <Table.Cell>DNS</Table.Cell>
+              <Table.Cell>Active</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table.Root>
+      </html.div>
+
+      <html.div>
+        <html.span style={storyStyles.label}>Compact (sm)</html.span>
+        <Table.Root size="sm" columns={3}>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+              <Table.HeaderCell>Role</Table.HeaderCell>
+              <Table.HeaderCell>Status</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Traefik</Table.Cell>
+              <Table.Cell>Reverse Proxy</Table.Cell>
+              <Table.Cell>Active</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Pi-hole</Table.Cell>
+              <Table.Cell>DNS</Table.Cell>
+              <Table.Cell>Active</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table.Root>
+      </html.div>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    // All four tables render
+    const tables = canvas.getAllByRole('table')
+    await expect(tables.length).toBe(4)
+  },
+}

package/src/components/Table/Table.tsx

@@ -0,0 +1,179 @@
+import {type ReactNode, createContext, useContext, Children} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+// --- Types ---
+
+export type TableVariant = 'default' | 'striped' | 'bordered'
+export type TableSize = 'sm' | 'md'
+
+// --- Context ---
+
+interface TableContextValue {
+  variant: TableVariant
+  size: TableSize
+  columns: number
+  isHeader: boolean
+}
+
+const TableContext = createContext<TableContextValue | null>(null)
+
+function useTable() {
+  const ctx = useContext(TableContext)
+  if (!ctx) throw new Error('Table compound components must be used within Table.Root')
+  return ctx
+}
+
+// --- HeaderContext (to distinguish header vs body rowgroup) ---
+
+const HeaderContext = createContext(false)
+
+// --- Root ---
+
+interface RootProps {
+  children: ReactNode
+  variant?: TableVariant
+  size?: TableSize
+  columns: number
+}
+
+function Root({children, variant = 'default', size = 'md', columns}: RootProps) {
+  return (
+    <TableContext.Provider value={{variant, size, columns, isHeader: false}}>
+      <html.div role="table" style={styles.root}>
+        {children}
+      </html.div>
+    </TableContext.Provider>
+  )
+}
+
+// --- Header ---
+
+function Header({children}: {children: ReactNode}) {
+  return (
+    <HeaderContext.Provider value={true}>
+      <html.div role="rowgroup" style={styles.header}>
+        {children}
+      </html.div>
+    </HeaderContext.Provider>
+  )
+}
+
+// --- Body ---
+
+function Body({children}: {children: ReactNode}) {
+  const {variant} = useTable()
+  const childArray = Children.toArray(children)
+
+  return (
+    <HeaderContext.Provider value={false}>
+      <html.div role="rowgroup">
+        {childArray.map((child, index) => {
+          if (variant === 'striped') {
+            return (
+              <RowIndexContext.Provider key={index} value={index}>
+                {child}
+              </RowIndexContext.Provider>
+            )
+          }
+          return child
+        })}
+      </html.div>
+    </HeaderContext.Provider>
+  )
+}
+
+// Row index context for striped variant
+const RowIndexContext = createContext<number>(-1)
+
+// --- Row ---
+
+function Row({children}: {children: ReactNode}) {
+  const {variant, columns} = useTable()
+  const isHeader = useContext(HeaderContext)
+  const rowIndex = useContext(RowIndexContext)
+  const isEvenRow = rowIndex >= 0 && rowIndex % 2 === 1
+  const childArray = Children.toArray(children)
+  const isLastRow = false // handled by CSS or parent
+
+  return (
+    <html.div
+      role="row"
+      style={[
+        styles.row,
+        styles.gridColumns(columns),
+        !isHeader && styles.bodyRow,
+        !isHeader && variant === 'striped' && isEvenRow && styles.stripedEven,
+      ]}
+    >
+      {variant === 'bordered'
+        ? childArray.map((child, index) => (
+            <CellIndexContext.Provider key={index} value={{index, total: childArray.length}}>
+              {child}
+            </CellIndexContext.Provider>
+          ))
+        : children}
+    </html.div>
+  )
+}
+
+// Cell index context for bordered variant
+const CellIndexContext = createContext<{index: number; total: number}>({
+  index: 0,
+  total: 0,
+})
+
+// --- HeaderCell ---
+
+function HeaderCell({children}: {children: ReactNode}) {
+  const {size, variant} = useTable()
+  const {index, total} = useContext(CellIndexContext)
+  const isLast = variant === 'bordered' && index === total - 1
+
+  return (
+    <html.div
+      role="columnheader"
+      style={[
+        styles.headerCell,
+        size === 'sm' ? styles.cellSm : styles.cellMd,
+        variant === 'bordered' && styles.borderedCell,
+        isLast && styles.borderedCellLast,
+      ]}
+    >
+      {children}
+    </html.div>
+  )
+}
+
+// --- Cell ---
+
+function Cell({children}: {children: ReactNode}) {
+  const {size, variant} = useTable()
+  const {index, total} = useContext(CellIndexContext)
+  const isLast = variant === 'bordered' && index === total - 1
+
+  return (
+    <html.div
+      role="cell"
+      style={[
+        styles.cell,
+        size === 'sm' ? styles.cellSm : styles.cellMd,
+        variant === 'bordered' && styles.borderedCell,
+        isLast && styles.borderedCellLast,
+      ]}
+    >
+      {children}
+    </html.div>
+  )
+}
+
+// --- Export ---
+
+export const Table = {
+  Root,
+  Header,
+  Body,
+  Row,
+  HeaderCell,
+  Cell,
+}

package/src/components/Table/styles.css.ts

@@ -0,0 +1,97 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+
+export const styles = css.create({
+  // Root
+  root: {
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: radii.md,
+    overflow: 'hidden',
+    backgroundColor: colors.bgCard,
+    fontFamily: typography.fontFamily,
+    color: colors.text,
+  },
+
+  // Header group
+  header: {
+    backgroundColor: colors.bgCard,
+  },
+
+  // Row
+  row: {
+    display: 'grid',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: colors.border,
+  },
+  rowLastChild: {
+    borderBottomWidth: 0,
+  },
+  bodyRow: {
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    transitionProperty: 'background-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+  },
+
+  // Header cell
+  headerCell: {
+    fontWeight: typography.fontWeightSemibold,
+    color: colors.textMuted,
+    textAlign: 'start',
+  },
+
+  // Body cell
+  cell: {
+    color: colors.text,
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  // Size: sm
+  cellSm: {
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    fontSize: typography.fontSizeXs,
+  },
+  // Size: md
+  cellMd: {
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    fontSize: typography.fontSizeSm,
+  },
+
+  // Variant: striped (even body rows)
+  stripedEven: {
+    backgroundColor: {
+      default: colors.bgCardHover,
+      ':hover': colors.bgCardHover,
+    },
+  },
+
+  // Variant: bordered (cells get side borders)
+  borderedCell: {
+    borderRightWidth: 1,
+    borderRightStyle: 'solid',
+    borderRightColor: colors.border,
+  },
+  borderedCellLast: {
+    borderRightWidth: 0,
+  },
+
+  // Dynamic styles — simple identifier params only (StyleX constraint)
+  gridColumns: (columns: number) => ({
+    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+  }),
+})