refactor: table

Author: lisalupi

.changeset/true-bugs-go.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactor component `Table` to use vanilla extract instead of Emotion

packages/ui/src/components/Table/Cell.tsx

@@ -1,22 +1,14 @@
 'use client'
 
-import styled from '@emotion/styled'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type { ReactNode } from 'react'
 import type { Color } from '../../theme'
+import { useColumnProvider } from '../List/ColumnProvider'
+import { tableCell } from './styles.css'
+import { maxWidthCell, minWidthCell, widthCell } from './variables.css'
 
 type Align = 'left' | 'center' | 'right'
 
-const StyledCell = styled('td', {
-  shouldForwardProp: prop => !['sentiment', 'align'].includes(prop),
-})<{ sentiment?: Color; align: Align }>`
-  display: table-cell;
-  vertical-align: middle;
-  padding: ${({ theme }) => theme.space['1']};
-  font-size: ${({ theme }) => theme.typography.bodySmall.fontSize};
-  background-color: ${({ sentiment, theme }) => (sentiment ? theme.colors[sentiment].background : null)};
-  text-align: ${({ align }) => align};
-`
-
 type CellProps = {
   children?: ReactNode
   className?: string
@@ -33,14 +25,22 @@ export const Cell = ({
   rowSpan,
   sentiment,
   align = 'left',
-}: CellProps) => (
-  <StyledCell
-    align={align}
-    className={className}
-    colSpan={colSpan}
-    rowSpan={rowSpan}
-    sentiment={sentiment}
-  >
-    {children}
-  </StyledCell>
-)
+}: CellProps) => {
+  const { maxWidth, minWidth, width } = useColumnProvider()
+
+  return (
+    <td
+      align={align}
+      className={`${className ? `${className} ` : ''}${tableCell({ align, sentiment })}`}
+      colSpan={colSpan}
+      rowSpan={rowSpan}
+      style={assignInlineVars({
+        [widthCell]: width,
+        [minWidthCell]: minWidth,
+        [maxWidthCell]: maxWidth,
+      })}
+    >
+      {children}
+    </td>
+  )
+}

packages/ui/src/components/Table/Header.tsx

@@ -1,16 +1,12 @@
 'use client'
 
-import styled from '@emotion/styled'
 import type { ReactNode } from 'react'
-
-const StyledHeader = styled('thead')`
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral.border};
-`
+import { tableHeader } from './styles.css'
 
 type HeaderProps = {
   children: ReactNode
 }
 
 export const Header = ({ children }: HeaderProps) => (
-  <StyledHeader>{children}</StyledHeader>
+  <thead className={tableHeader}>{children}</thead>
 )

packages/ui/src/components/Table/HeaderCell.tsx

@@ -1,70 +1,29 @@
 'use client'
 
-import styled from '@emotion/styled'
 import {
   InformationOutlineIcon,
   SortIcon as SortIconUV,
   SouthShortIcon,
 } from '@ultraviolet/icons'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type { ReactNode } from 'react'
+import { listSortIcon } from '../List/styles.css'
 import { Text } from '../Text'
 import { Tooltip } from '../Tooltip'
-
-const StyledSortIcon = styled(SouthShortIcon, {
-  shouldForwardProp: prop => !['order'].includes(prop),
-})<{ order: 'ascending' | 'descending' }>`
-    transform: ${({ order }) =>
-      order === 'ascending' ? 'rotate(-180deg)' : 'none'};
-    transition: transform 0.2s;
-`
+import { headerCellText, tableHeaderCell } from './styles.css'
+import {
+  headerCellMaxWidth,
+  headerCellMinWidth,
+  headerCellWidth,
+} from './variables.css'
 
 const SortIcon = ({ order }: { order?: 'ascending' | 'descending' }) =>
   order ? (
-    <StyledSortIcon order={order} sentiment="primary" />
+    <SouthShortIcon className={listSortIcon[order]} sentiment="primary" />
   ) : (
     <SortIconUV sentiment="neutral" />
   )
 
-type StyledHeaderCellProps = Pick<
-  HeaderCellProps,
-  'width' | 'maxWidth' | 'minWidth'
-> & {
-  align?: 'left' | 'center' | 'right'
-}
-
-const StyledHeaderCell = styled('th', {
-  shouldForwardProp: prop =>
-    !['align', 'width', 'maxWidth', 'minWidth'].includes(prop),
-})<StyledHeaderCellProps>`
-${({ width, maxWidth, minWidth }) => `
-    ${width ? `width: ${width};` : ''}
-    ${maxWidth ? `max-width: ${maxWidth};` : ''}
-    ${minWidth ? `min-width: ${minWidth};` : ''}
-  `}
-  display: table-cell;
-  vertical-align: middle;
-  text-align: ${({ align }) => align};
-  padding: ${({ theme }) => theme.space['1']};
-
-  &[role*='button'] {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  &:first-of-type {
-    &[data-checkbox="true"] {
-      padding-left: ${({ theme }) => theme.space['2']};
-    } 
-  }
-`
-
-const StyledText = styled(Text)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: ${({ theme }) => theme.space['1']};
-`
-
 type HeaderCellProps = {
   children: ReactNode
   className?: string
@@ -104,13 +63,10 @@ export const HeaderCell = ({
     : undefined
 
   return (
-    <StyledHeaderCell
+    <th
       align={align}
       aria-sort={order}
-      className={className}
-      data-checkbox={isCheckbox}
-      maxWidth={maxWidth}
-      minWidth={minWidth}
+      className={`${className ? `${className} ` : ''}${tableHeaderCell({ align, checked: isCheckbox })}`}
       onClick={handleOrder}
       onKeyDown={
         handleOrder
@@ -126,11 +82,16 @@ export const HeaderCell = ({
           : undefined
       }
       role={onOrder ? 'button columnheader' : undefined}
+      style={assignInlineVars({
+        [headerCellWidth]: width ?? 'auto',
+        [headerCellMaxWidth]: maxWidth ?? 'none',
+        [headerCellMinWidth]: minWidth ?? 'auto',
+      })}
       tabIndex={handleOrder ? 0 : -1}
-      width={width}
     >
-      <StyledText
+      <Text
         as="div"
+        className={headerCellText}
         sentiment={order !== undefined ? 'primary' : 'neutral'}
         variant="bodySmall"
       >
@@ -147,7 +108,7 @@ export const HeaderCell = ({
         {orderDirection !== undefined && isOrdered !== undefined ? (
           <SortIcon aria-disabled={!onOrder} order={order} />
         ) : null}
-      </StyledText>
-    </StyledHeaderCell>
+      </Text>
+    </th>
   )
 }