@loadsmart/loadsmart-ui 7.6.0 → 8.0.0-beta.1

package/src/components/Table/Table.tsx

@@ -1,523 +0,0 @@
-import React, { Children, Fragment, isValidElement, useEffect, useState } from 'react'
-import styled, { css } from 'styled-components'
-import type { ReactNode } from 'react'
-import { isFunction } from '@loadsmart/utils-function'
-
-import { getToken as token } from 'theming'
-import { conditional, whenProps, prop } from 'tools/index'
-import hoverable from 'styles/hoverable'
-import focusable from 'styles/focusable'
-import { Checkbox } from 'components/Checkbox'
-import { Radio } from 'components/Radio'
-import { Link } from 'components/Link'
-import { Text } from 'components/Text'
-import { Dropdown } from 'components/Dropdown'
-import { Layout } from 'components/Layout'
-import { Icon } from 'components/Icon'
-import { Children as InternalButton } from 'components/Button/Button'
-
-import {
-  isCellSelected,
-  TableSelectionProvider,
-  useIsCellSelected,
-  useSelection,
-  useTableSelection,
-} from './Selection'
-import TableSortHandle from './TableSortHandle'
-
-import type {
-  TableProps,
-  TableSectionProps,
-  TableRowProps,
-  TableCellProps,
-  TableCaptionProps,
-  TableSelectionProps,
-  SelectionCellProps,
-  TablePickerItemProps,
-  TablePickerProps,
-  ExpandableTableRowProps,
-} from './Table.types'
-
-const StyledTableBody = styled.tbody`
-  /* placeholder */
-`
-
-const StyledTableFoot = styled.tfoot`
-  box-shadow: 0 -1px 0 ${token('color-neutral')};
-`
-
-const StyledTableCaption = styled.caption<{ $position?: 'top' | 'bottom' }>`
-  ${conditional({
-    ['border-bottom']: whenProps([{ $position: ['top', undefined] }]),
-    ['border-top']: whenProps({ $position: 'bottom' }),
-  })}: solid 1px ${token('color-neutral-lighter')};
-
-  ${conditional({
-    ['margin-bottom']: whenProps([{ $position: ['top', undefined] }]),
-    ['margin-top']: whenProps({ $position: 'bottom' }),
-  })}: ${token('space-m')};
-  padding: ${token('space-m')} ${token('space-s')};
-
-  text-align: left;
-
-  caption-side: ${prop('$position', 'top')};
-  background-color: ${token('color-neutral-white')};
-`
-
-const StyledCell = css<{ alignment?: string }>`
-  color: ${token('color-neutral-darker')};
-  text-align: ${prop('alignment', 'left')};
-  vertical-align: middle;
-`
-
-const StyledTableCell = styled.td<{ alignment?: string; format?: string }>`
-  ${StyledCell}
-
-  font-family: ${conditional({
-    'font-family-monospace': whenProps({ format: ['number', 'currency'] }),
-    'font-family-default': whenProps({ format: 'default' }),
-  })};
-`
-
-const StyledTableHeadCell = styled.th<{
-  alignment?: string
-  clickable: boolean
-}>`
-  ${StyledCell}
-
-  font-family: ${token('font-family-default')};
-
-  font-weight: ${token('font-weight-bold')};
-
-  text-transform: capitalize;
-
-  cursor: ${conditional({
-    pointer: whenProps({ clickable: true }),
-    normal: whenProps({ clickable: false }),
-  })};
-`
-
-const StyledTableHead = styled.thead`
-  border: 1px solid ${token('color-neutral-lighter')};
-
-  ${StyledTableCell} {
-    padding: ${token('space-s')};
-
-    font-weight: ${token('font-weight-bold')};
-    text-transform: capitalize;
-  }
-`
-
-const StyledTableRow = styled.tr<{ selected: boolean; isExpanded: boolean }>`
-  ${StyledTableHead} > & {
-    background-color: ${token('color-neutral-lightest')};
-  }
-
-  ${StyledTableFoot} > & {
-    background-color: ${token('color-neutral-lightest')};
-  }
-
-  background-color: ${conditional({
-    'table-row-selected-color': whenProps({ selected: true }),
-    'color-neutral-white': whenProps({ selected: false }),
-  })};
-  ${hoverable`
-    background-color: ${conditional({
-      'table-row-selected-color': whenProps({ selected: true }),
-    })} !important;
-  `}
-
-  border-color: ${token('color-neutral-lighter')};
-  border-width: 1px;
-  border-top-style: solid;
-  border-right-style: solid;
-  border-left-style: solid;
-  border-bottom-style: ${conditional({
-    solid: whenProps({ isExpanded: false }),
-    hidden: whenProps({ isExpanded: true }),
-  })};
-
-  box-shadow: ${conditional({
-    '0px 3px 3px 0px #C1CED9': whenProps({ isExpanded: true }),
-    none: whenProps({ isExpanded: false }),
-  })};
-
-  ${StyledTableBody} > & {
-    ${hoverable`
-      background-color: ${token('color-neutral-lighter')};
-    `}
-
-    ${focusable`
-      box-shadow: inset ${token('shadow-glow-primary')};
-    `}
-  }
-`
-
-const StyledExpandableContentRow = styled.tr`
-  border-color: ${token('color-neutral-lighter')};
-  border-width: 1px;
-  border-top-style: hidden;
-  border-right-style: solid;
-  border-left-style: solid;
-  border-bottom-style: solid;
-`
-
-const StyledTable = styled.table<{ scale?: string }>`
-  width: 100%;
-
-  white-space: nowrap;
-
-  background-color: ${token('color-neutral-lightest')};
-
-  border-collapse: collapse;
-
-  ${StyledTableBody} ${StyledTableRow} {
-    height: ${conditional({
-      '24px': whenProps({ scale: 'small' }),
-      '48px': whenProps({ scale: 'default' }),
-      '80px': whenProps({ scale: 'large' }),
-    })};
-  }
-
-  ${StyledTableHeadCell},
-  ${StyledTableCell} {
-    padding: ${conditional({
-      'space-xs': whenProps({ scale: 'small' }),
-      'space-s': whenProps({ scale: ['default', 'large'] }),
-    })};
-
-    font-size: ${conditional({
-      'font-size-5': whenProps({ scale: 'small' }),
-      'font-size-4': whenProps({ scale: ['default', 'large'] }),
-    })};
-  }
-`
-
-const RotatableIcon = styled(Icon)<{ $rotate: boolean }>`
-  ${conditional({
-    'transform: rotate(90deg);': whenProps({ $rotate: true }),
-  })}
-`
-
-function Table<T>({
-  children,
-  selection,
-  scale = 'default',
-  ...others
-}: TableProps<T>): JSX.Element {
-  return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    <TableSelectionProvider selection={selection}>
-      <StyledTable scale={scale} {...others}>
-        {children}
-      </StyledTable>
-    </TableSelectionProvider>
-  )
-}
-
-const TableCaptionInner = styled.div<{ $height?: number }>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: ${prop('$height', 36)}px;
-`
-
-function TableCaption({ children, position, height }: TableCaptionProps): JSX.Element {
-  return (
-    <StyledTableCaption $position={position}>
-      <TableCaptionInner $height={height}>{children}</TableCaptionInner>
-    </StyledTableCaption>
-  )
-}
-
-function TableHead({ children, ...others }: TableSectionProps): JSX.Element {
-  return <StyledTableHead {...others}>{children}</StyledTableHead>
-}
-
-function TableBody({ children, ...others }: TableSectionProps): JSX.Element {
-  return <StyledTableBody {...others}>{children}</StyledTableBody>
-}
-
-function TableCell({
-  children,
-  alignment = 'left',
-  format = 'default',
-  ...others
-}: TableCellProps): JSX.Element {
-  return (
-    <StyledTableCell alignment={alignment} format={format} {...others}>
-      {children}
-    </StyledTableCell>
-  )
-}
-
-function SelectionCell<T>({ value, ...props }: SelectionCellProps<T>): JSX.Element {
-  const { toggle, register, config } = useTableSelection()
-
-  const selected = useIsCellSelected(value)
-
-  const action = () => toggle(value as T)
-
-  useEffect(() => {
-    register(value)
-  }, [value, register])
-
-  if (props.children) {
-    return (
-      <TableCell>
-        {props.children({
-          selected,
-          toggle: action,
-        })}
-      </TableCell>
-    )
-  }
-
-  const Input = config.multiple ? Checkbox : Radio
-
-  return (
-    <TableCell {...props}>
-      {value ? <Input checked={selected} scale="small" onChange={action} /> : null}
-    </TableCell>
-  )
-}
-
-function SelectionHeadCell<T>(props: SelectionCellProps<T>): JSX.Element {
-  const { allRowsAreSelected, toggleAll, config } = useTableSelection()
-
-  const selected = allRowsAreSelected
-  const action = () => toggleAll()
-
-  if (props.children) {
-    return <TableHeadCell {...props}>{props.children({ selected, toggle: action })}</TableHeadCell>
-  }
-
-  const Input = config.multiple ? Checkbox : Fragment
-
-  return (
-    <TableHeadCell {...props}>
-      <Input checked={selected} scale="small" onChange={action} />
-    </TableHeadCell>
-  )
-}
-
-function TableRow({ children, ...others }: TableRowProps): JSX.Element {
-  const selected = useIsRowSelected(children)
-
-  return (
-    <StyledTableRow {...others} selected={selected} isExpanded={false}>
-      {children}
-    </StyledTableRow>
-  )
-}
-
-function ExpandableTableRow({
-  expandableContent,
-  expanded,
-  leading: propsLeading,
-  children,
-  onExpandedChange,
-  initialExpanded = false,
-  ...others
-}: ExpandableTableRowProps): JSX.Element {
-  const [openState, setOpenState] = useState(initialExpanded)
-
-  const selected = useIsRowSelected(children)
-
-  const open = expanded ?? openState
-  const isExpanded = Boolean(open && expandableContent)
-  const colSpan = Array.isArray(children) ? children.length + 1 : 1
-
-  let leading: ReactNode = <RotatableIcon name="caret-right" $rotate={open} />
-  if (propsLeading) {
-    leading = isFunction(propsLeading) ? propsLeading(open) : propsLeading
-  }
-
-  function toggle() {
-    if (!expandableContent) return
-
-    onExpandedChange?.(!open)
-    setOpenState(!open)
-  }
-
-  return (
-    <>
-      <StyledTableRow {...others} onClick={toggle} isExpanded={isExpanded} selected={selected}>
-        <TableCell>{expandableContent && leading}</TableCell>
-        {children}
-      </StyledTableRow>
-      {isExpanded && (
-        <StyledExpandableContentRow>
-          <StyledTableCell colSpan={colSpan}>{expandableContent}</StyledTableCell>
-        </StyledExpandableContentRow>
-      )}
-    </>
-  )
-}
-
-function TableHeadCell({
-  alignment = 'left',
-  children,
-  onClick,
-  ...others
-}: TableCellProps): JSX.Element {
-  return (
-    <StyledTableHeadCell
-      clickable={onClick != null}
-      alignment={alignment}
-      onClick={onClick}
-      {...others}
-    >
-      <Layout.Group space="xs" align="center">
-        {children}
-      </Layout.Group>
-    </StyledTableHeadCell>
-  )
-}
-
-const ActionsWrapper = styled.div`
-  display: flex;
-  gap: ${token('space-s')};
-  margin-left: auto;
-`
-
-function TableSelectionActions({ buttons, children, ...others }: TableSelectionProps): JSX.Element {
-  const { values, clear } = useSelection()
-
-  return (
-    <ActionsWrapper {...others}>
-      {values.length > 0 ? (
-        <>
-          {buttons.map((Action, i) => (
-            <Action key={i} values={values} />
-          ))}
-          <Link
-            onClick={(e) => {
-              e.preventDefault()
-              clear()
-            }}
-          >
-            <Text variant="link">CANCEL</Text>
-          </Link>
-        </>
-      ) : (
-        children
-      )}
-    </ActionsWrapper>
-  )
-}
-
-const StyledPickerTrigger = styled(Dropdown.Trigger.Button)`
-  padding: 0;
-
-  ${InternalButton} {
-    margin: ${token('space-2xs')};
-  }
-`
-
-function TablePickerItem<T>({
-  option,
-  checked,
-  children,
-  ...props
-}: TablePickerItemProps<T>): JSX.Element {
-  return (
-    <Dropdown.Item
-      leading={
-        checked ? (
-          <Icon name="check" size="16" color="neutral-darker" />
-        ) : (
-          <Layout.Box padding="s" />
-        )
-      }
-      role="option"
-      aria-selected={checked ? 'true' : 'false'}
-      {...props}
-    >
-      {children || (option && (option.option || option.title || option.key)) || 'Column'}
-    </Dropdown.Item>
-  )
-}
-
-const TriggerIcon = styled(Icon).attrs({
-  name: 'dots-horizontal',
-  size: '12',
-  color: 'neutral-darker',
-})`
-  transform: rotate(90deg);
-`
-
-function TablePicker<T>({
-  value,
-  onChange,
-  options,
-  align,
-  children,
-  trigger: propsTrigger,
-  ...props
-}: TablePickerProps<T>): JSX.Element {
-  return (
-    <Dropdown align={align}>
-      <StyledPickerTrigger trailing={null} scale="small" {...props}>
-        {propsTrigger !== undefined ? (
-          ({ expanded }) => (isFunction(propsTrigger) ? propsTrigger(expanded) : propsTrigger)
-        ) : (
-          <TriggerIcon />
-        )}
-      </StyledPickerTrigger>
-      <Dropdown.Menu role="listbox">
-        {children ||
-          options?.map((option, i) => (
-            <TablePickerItem
-              key={i}
-              option={option}
-              checked={option.key === value?.key}
-              onClick={() => onChange?.(option)}
-            />
-          ))}
-      </Dropdown.Menu>
-    </Dropdown>
-  )
-}
-
-function useIsRowSelected(children: ReactNode): boolean {
-  const { selected, config } = useTableSelection()
-
-  if (!selected) return false
-
-  const arrChildren = Children.toArray(children)
-
-  const selectionCellChild = arrChildren.find((child) => {
-    return isValidElement(child) && child.type === SelectionCell
-  })
-
-  if (!selectionCellChild) return false
-
-  const { value } = (selectionCellChild as React.ReactElement).props as SelectionCellProps
-
-  if (!value) return false
-
-  return isCellSelected(value, selected, config)
-}
-
-Table.Head = TableHead
-Table.Body = TableBody
-Table.Row = TableRow
-Table.Cell = TableCell
-Table.HeadCell = TableHeadCell
-Table.Foot = StyledTableFoot
-Table.Caption = TableCaption
-Table.Selection = {
-  Actions: TableSelectionActions,
-  Cell: SelectionCell,
-  HeadCell: SelectionHeadCell,
-}
-Table.ExpandableRow = ExpandableTableRow
-Table.SortHandle = TableSortHandle
-TablePicker.Item = TablePickerItem
-Table.Picker = TablePicker
-
-export { useSelection }
-
-export default Table

package/src/components/Table/Table.types.ts

@@ -1,93 +0,0 @@
-import type { Selectable } from 'hooks/useSelectable'
-import type {
-  ComponentType,
-  HTMLAttributes,
-  PropsWithChildren,
-  ReactNode,
-  ReactElement,
-} from 'react'
-import type { DropdownMenuItemProps, DropdownMenuProps } from 'components/Dropdown'
-import type { DropdownTriggerButtonProps } from 'components/Dropdown/DropdownTrigger'
-
-import type { TableSelectableRow, TableSelectionConfig } from './Selection'
-
-type Scale = 'default' | 'small' | 'large'
-
-export interface TableProps<T extends Selectable = TableSelectableRow>
-  extends HTMLAttributes<HTMLTableElement> {
-  scale?: Scale
-  selection?: TableSelectionConfig<T>
-}
-
-export interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
-  position?: 'top' | 'bottom'
-  height?: number
-}
-
-export interface TableSelectionProps extends HTMLAttributes<HTMLDivElement> {
-  buttons: ComponentType<{ values: TableSelectableRow[] }>[]
-}
-
-export interface SelectionCellProps<T extends Selectable = TableSelectableRow>
-  extends HTMLAttributes<HTMLTableCellElement> {
-  value?: T
-  children?: (props: { selected: boolean; toggle: () => void }) => ReactElement
-}
-
-export interface TableSectionProps extends HTMLAttributes<HTMLTableSectionElement> {
-  scale?: Scale
-}
-
-export type TableRowProps = HTMLAttributes<HTMLTableRowElement>
-
-export type ExpandableTableRowProps = TableRowProps & {
-  expandableContent?: ReactNode
-  leading?: ReactNode | ((expanded: boolean) => ReactNode)
-  initialExpanded?: boolean
-  expanded?: boolean
-  onExpandedChange?: (expanded: boolean) => void
-}
-
-export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
-  alignment?: 'left' | 'right'
-  format?: 'default' | 'number' | 'currency'
-  columnWidth?: string
-  scale?: Scale
-  selected?: boolean
-}
-
-export type TableColumn<T = Record<string, unknown>> = {
-  /**
-   * The accessor of you entry interface
-   */
-  key: keyof T
-
-  /**
-   * The label that should go in the Header cell
-   */
-  title: ReactNode
-
-  /**
-   * The text of the Dropdown.Item
-   * If omitted, `title` is used
-   */
-  option?: string
-}
-
-export type TableColumns<T> = Array<TableColumn<T>>
-
-export interface TablePickerItemProps<T> extends DropdownMenuItemProps {
-  option?: TableColumn<T>
-  checked?: boolean
-}
-
-export interface TablePickerProps<T>
-  extends PropsWithChildren<
-    Partial<Omit<DropdownTriggerButtonProps, 'onChange' | 'value' | 'children'>>
-  > {
-  value?: TableColumn<T>
-  onChange?: (value: TableColumn<T>) => void
-  options?: TableColumns<T>
-  trigger?: ReactNode | ((expanded: boolean) => ReactNode)
-  align?: DropdownMenuProps['align']
-}

package/src/components/Table/TableSortHandle.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import { Icon } from 'components/Icon'
-import { Box as DefaultBox } from 'components/Layout'
-import type { SortDirection } from './useSortBy.types'
-
-import type { BoxProps } from 'components/Layout/Box'
-
-interface TableSortHandleProps extends BoxProps {
-  order?: SortDirection | null
-}
-
-const Box = styled(DefaultBox)`
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-
-  margin-left: ${token('space-xs')};
-`
-
-function TableSortHandle({ order, ...rest }: TableSortHandleProps): JSX.Element | null {
-  return (
-    <Box {...rest} padding="none">
-      <Icon name={order != null ? `sort-${order}` : 'sort'} width="0.75em" height="0.85em" />
-    </Box>
-  )
-}
-
-export default TableSortHandle

package/src/components/Table/index.tsx

@@ -1,2 +0,0 @@
-export { default as Table } from './Table'
-export type { TableProps, TableCellProps, TableRowProps, TableSectionProps } from './Table.types'