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

package/src/components/Table/useSortBy.test.ts

@@ -1,96 +0,0 @@
-import { renderHook, act } from '@testing-library/react-hooks'
-
-import { TEST_TABLE_COLUMNS, TEST_TABLE_ROWS } from './Table.fixtures'
-import useSortBy from './useSortBy'
-
-describe('useSortBy', () => {
-  it('returns table data properly sorted', () => {
-    const { result } = renderHook(() => useSortBy(TEST_TABLE_COLUMNS, TEST_TABLE_ROWS))
-
-    expect(typeof result.current.sortByColumn).toBe('function')
-
-    // initial state, defaults table row values passed to the hook
-    expect(result.current.tableData).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          key: 1,
-          name: 'Orange',
-        }),
-        expect.objectContaining({
-          key: 2,
-          name: 'Raspberry',
-        }),
-        expect.objectContaining({
-          key: 3,
-          name: 'Mango',
-        }),
-      ])
-    )
-
-    // first call will sort table rows ASC
-    act(() => {
-      result.current.sortByColumn(TEST_TABLE_COLUMNS[0])
-    })
-
-    expect(result.current.tableData).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          key: 3,
-          name: 'Mango',
-        }),
-        expect.objectContaining({
-          key: 1,
-          name: 'Orange',
-        }),
-        expect.objectContaining({
-          key: 2,
-          name: 'Raspberry',
-        }),
-      ])
-    )
-
-    // second call will sort table rows DESC
-    act(() => {
-      result.current.sortByColumn(TEST_TABLE_COLUMNS[0])
-    })
-
-    expect(result.current.tableData).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          key: 2,
-          name: 'Raspberry',
-        }),
-        expect.objectContaining({
-          key: 1,
-          name: 'Orange',
-        }),
-        expect.objectContaining({
-          key: 3,
-          name: 'Mango',
-        }),
-      ])
-    )
-
-    // third call defaults table rows to its initial state
-    act(() => {
-      result.current.sortByColumn(TEST_TABLE_COLUMNS[0])
-    })
-
-    expect(result.current.tableData).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          key: 1,
-          name: 'Orange',
-        }),
-        expect.objectContaining({
-          key: 2,
-          name: 'Raspberry',
-        }),
-        expect.objectContaining({
-          key: 3,
-          name: 'Mango',
-        }),
-      ])
-    )
-  })
-})

package/src/components/Table/useSortBy.ts

@@ -1,92 +0,0 @@
-import { useCallback, useState } from 'react'
-
-import get from 'utils/toolset/get'
-import type { TableRowGroup, SortableColumn, ColumnGroup, SortState } from './useSortBy.types'
-import { SortDirection } from './useSortBy.types'
-
-/**
- * Sort table rows using column keys with Array.prototype.sort() function
- *
- * @param {SortableColumn} sortConfig - sorting config including `key` and `isSortedDesc`
- * @param {TableRowGroup} tableRowGroup - a group of table rows to be sorted
- *
- * @returns {TableRowGroup} sorted table rows
- */
-function sortRows(sortConfig: SortableColumn, tableRowGroup: TableRowGroup): TableRowGroup {
-  return [...tableRowGroup].sort((object1, object2) => {
-    if (get(object1, sortConfig.key) > get(object2, sortConfig.key)) {
-      return sortConfig.order === SortDirection.DESC ? -1 : 1
-    }
-
-    if (get(object1, sortConfig.key) < get(object2, sortConfig.key)) {
-      return sortConfig.order === SortDirection.DESC ? 1 : -1
-    }
-
-    return 0
-  })
-}
-
-/**
- * A hook that receives columns and table rows to sort them when sortByColumn function is called.
- * Exposes columnData, tableData and sortByColumn to be consumed by the Table component.
- *
- * @param {ColumnGroup} columnGroup a group of table columns
- * @param {TableRowGroup} tableRowGroup a group of table rows
- *
- * @returns {TableRowGroup} sorted table rows
- */
-function useSortBy(
-  columnGroup: ColumnGroup,
-  tableRowGroup: TableRowGroup
-): {
-  tableData: TableRowGroup
-  columnData: ColumnGroup
-  sortByColumn: (column: SortableColumn) => void
-} {
-  const [state, setState] = useState<SortState>({
-    sortConfig: { key: '', title: '' },
-    columnGroup,
-    tableRowGroup,
-  })
-
-  const { sortConfig, columnGroup: columns, tableRowGroup: tableRows } = state
-
-  const sortByColumn = useCallback((column: SortableColumn) => {
-    setState(({ columnGroup: columns, ...rest }) => {
-      const updatedColumns: ColumnGroup = columns.map((current) => {
-        if (!column.isSortable || current.key !== column.key) {
-          return current
-        }
-
-        if (!current.order) {
-          return {
-            ...current,
-            order: SortDirection.ASC,
-          }
-        } else if (current.order !== SortDirection.DESC) {
-          return {
-            ...current,
-            order: SortDirection.DESC,
-          }
-        }
-
-        return {
-          ...current,
-          order: null,
-        }
-      })
-
-      return { ...rest, columnGroup: updatedColumns, sortConfig: column }
-    })
-  }, [])
-
-  const sortedTableData = sortConfig.order ? sortRows(sortConfig, tableRows) : tableRows
-
-  return {
-    columnData: columns,
-    tableData: sortedTableData,
-    sortByColumn,
-  }
-}
-
-export default useSortBy

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

@@ -1,21 +0,0 @@
-import type { TableColumn } from './Table.types'
-
-export type TableRowGroup = Array<Record<string, string | number>>
-
-export interface SortableColumn extends TableColumn {
-  isSortable?: boolean
-  order?: SortDirection | null
-}
-
-export type ColumnGroup = Array<SortableColumn>
-
-export interface SortState {
-  sortConfig: SortableColumn
-  columnGroup: ColumnGroup
-  tableRowGroup: TableRowGroup
-}
-
-export enum SortDirection {
-  ASC = 'ASC',
-  DESC = 'DESC',
-}

package/src/components/TablePagination/RowsPerPage.tsx

@@ -1,81 +0,0 @@
-import React from 'react'
-import { Text } from 'components/Text'
-import { Dropdown, DropdownContext } from 'components/Dropdown'
-import { Layout } from 'components/Layout'
-import { Icon } from 'components/Icon'
-import type { RowsPerPageProps } from './TablePagination.types'
-import type { ButtonProps } from 'components/Button'
-import { NoPaddingButton } from './TablePagination.styles'
-import { Popover } from 'components/Popover'
-
-const TriggerButton = (props: Omit<ButtonProps, 'scale' | 'variant'>) => {
-  const { toggle } = React.useContext(DropdownContext)
-
-  return (
-    <Popover.Reference>
-      <NoPaddingButton data-testid="rows-per-page-button" onClick={toggle} {...props}>
-        <Icon name="caret-down" size={16} color="neutral-darker" />
-      </NoPaddingButton>
-    </Popover.Reference>
-  )
-}
-
-function RowsPerPage({
-  page,
-  rowsPerPage,
-  onRowsPerPageChange,
-  labelRowsPerPage,
-  count,
-  rowsPerPageOptions,
-  disabled = false,
-  position = 'bottom',
-  align = 'start',
-}: RowsPerPageProps): JSX.Element {
-  const getItemsRange = () => {
-    if (!count) {
-      return 0
-    }
-
-    const from = page * rowsPerPage + 1
-    let to = (page + 1) * rowsPerPage
-
-    if (to > count) {
-      to = count
-    }
-
-    return `${from}-${to}`
-  }
-
-  return (
-    <Layout.Group space="s" align="center">
-      <Text variant="caption" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
-        {labelRowsPerPage}
-      </Text>
-      <Text variant="body" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
-        <Text variant="body-bold" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
-          {getItemsRange()}
-        </Text>{' '}
-        of{' '}
-        <Text variant="body-bold" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
-          {count}
-        </Text>
-      </Text>
-      <Dropdown position={position} align={align}>
-        <TriggerButton disabled={disabled} />
-        <Dropdown.Menu>
-          {rowsPerPageOptions.map((option) => (
-            <Dropdown.Item
-              key={option}
-              onClick={() => onRowsPerPageChange(option)}
-              trailing={option === rowsPerPage && <Icon name="check" size={20} color="accent" />}
-            >
-              {option} per page
-            </Dropdown.Item>
-          ))}
-        </Dropdown.Menu>
-      </Dropdown>
-    </Layout.Group>
-  )
-}
-
-export default RowsPerPage

package/src/components/TablePagination/TablePagination.stories.tsx

@@ -1,42 +0,0 @@
-import React, { useState } from 'react'
-import TablePagination from './TablePagination'
-import type { Meta, Story } from '@storybook/react'
-
-import type { TablePaginationProps } from './TablePagination.types'
-import { Layout } from 'components/Layout'
-
-export default {
-  title: 'Components/TablePagination',
-  component: TablePagination,
-  argTypes: {},
-} as Meta
-
-export const Playground: Story<TablePaginationProps> = (args: TablePaginationProps) => {
-  const [page, setPage] = useState(args.page)
-  const [rowsPerPage, setRowsPerPage] = useState(args.rowsPerPage)
-
-  const handleRowsPerPageChange = (rowsPerPage: number) => {
-    setRowsPerPage(rowsPerPage)
-    setPage(0)
-  }
-
-  return (
-    <Layout.Group>
-      <TablePagination
-        {...args}
-        onPageChange={(page) => setPage(page)}
-        page={page}
-        rowsPerPage={rowsPerPage}
-        onRowsPerPageChange={handleRowsPerPageChange}
-      />
-    </Layout.Group>
-  )
-}
-
-Playground.args = {
-  page: 0,
-  count: 1004,
-  rowsPerPage: 100,
-  disabled: false,
-  variant: 'default',
-}

package/src/components/TablePagination/TablePagination.styles.ts

@@ -1,13 +0,0 @@
-import styled from 'styled-components'
-import { Button } from 'components/Button'
-
-export const NoPaddingButton = styled(Button).attrs({
-  variant: 'tertiary',
-  scale: 'small',
-})`
-  padding: 0;
-
-  > span {
-    margin: 0 !important;
-  }
-`

package/src/components/TablePagination/TablePagination.test.tsx

@@ -1,111 +0,0 @@
-import userEvent from '@testing-library/user-event'
-import React from 'react'
-
-import renderer, { screen } from '../../tests/renderer'
-
-import TablePagination from './TablePagination'
-import type { TablePaginationProps } from './TablePagination.types'
-
-describe('TablePagination', () => {
-  const setup = ({ ...overrides }: Partial<TablePaginationProps> = {}) => {
-    const defaultProps: TablePaginationProps = {
-      variant: 'default',
-      count: 1000,
-      onPageChange: jest.fn(),
-      onRowsPerPageChange: jest.fn(),
-      rowsPerPage: 100,
-      page: 0,
-    }
-
-    renderer(<TablePagination {...defaultProps} {...overrides} />).render()
-  }
-
-  it('disables preview page buttons if page = 0', () => {
-    setup()
-
-    expect(screen.getByTitle(/previous page/i)).toBeDisabled()
-    expect(screen.getByTitle(/first page/i)).toBeDisabled()
-  })
-
-  it('disables next and last page buttons if the page is the last one', () => {
-    setup({
-      page: 9,
-    })
-
-    expect(screen.getByTitle(/next page/i)).toBeDisabled()
-    expect(screen.getByTitle(/last page/i)).toBeDisabled()
-  })
-
-  it('calls the onChangePage action after the pagination actions are clicked', () => {
-    const onPageChange = jest.fn()
-    setup({
-      page: 2,
-      onPageChange,
-    })
-
-    userEvent.click(screen.getByTitle(/previous page/i))
-    expect(onPageChange).toHaveBeenLastCalledWith(1)
-    userEvent.click(screen.getByTitle(/first page/i))
-    expect(onPageChange).toHaveBeenLastCalledWith(0)
-    userEvent.click(screen.getByTitle(/next page/i))
-    expect(onPageChange).toHaveBeenLastCalledWith(3)
-    userEvent.click(screen.getByTitle(/last page/i))
-    expect(onPageChange).toHaveBeenLastCalledWith(9)
-
-    userEvent.clear(screen.getByTitle('Page'))
-    userEvent.type(screen.getByTitle('Page'), '5')
-    userEvent.tab()
-    expect(onPageChange).toHaveBeenLastCalledWith(4)
-  })
-
-  it('calls the onRowsPerPageChange with the selected option', async () => {
-    const onPageChange = jest.fn()
-    const onRowsPerPageChange = jest.fn()
-    setup({
-      page: 2,
-      onPageChange,
-      onRowsPerPageChange,
-    })
-    userEvent.click(screen.getByTestId('rows-per-page-button'))
-    userEvent.click(await screen.findByText(/50 per page/i))
-
-    expect(onRowsPerPageChange).toHaveBeenLastCalledWith(50)
-  })
-
-  it('hides some actions for the compact variant', () => {
-    setup({
-      variant: 'compact',
-    })
-
-    expect(screen.queryByTitle(/first page/i)).not.toBeInTheDocument()
-    expect(screen.queryByTitle(/last page/i)).not.toBeInTheDocument()
-    expect(screen.queryByTitle('Page')).not.toBeInTheDocument()
-  })
-
-  it('disables all the buttons when the component is disabled', () => {
-    setup({
-      disabled: true,
-    })
-
-    expect(screen.getByTitle('Page')).toBeDisabled()
-    expect(screen.getByTitle(/previous page/i)).toBeDisabled()
-    expect(screen.getByTitle(/first page/i)).toBeDisabled()
-    expect(screen.getByTitle(/next page/i)).toBeDisabled()
-    expect(screen.getByTitle(/last page/i)).toBeDisabled()
-    expect(screen.getByTestId('rows-per-page-button')).toBeDisabled()
-  })
-
-  it('displays no pages state when no items available', () => {
-    setup({
-      count: 0,
-    })
-
-    expect(screen.getByTitle('Page')).toHaveValue(0)
-    expect(screen.getByTitle('Page')).toBeDisabled()
-    expect(screen.getByTitle(/previous page/i)).toBeDisabled()
-    expect(screen.getByTitle(/first page/i)).toBeDisabled()
-    expect(screen.getByTitle(/next page/i)).toBeDisabled()
-    expect(screen.getByTitle(/last page/i)).toBeDisabled()
-    expect(screen.getByTestId('rows-per-page-button')).toBeDisabled()
-  })
-})

package/src/components/TablePagination/TablePagination.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-
-import { Layout } from 'components/Layout'
-
-import type { TablePaginationProps } from './TablePagination.types'
-import TablePaginationActions from 'components/TablePagination/TablePaginationActions'
-import RowsPerPage from 'components/TablePagination/RowsPerPage'
-
-function TablePagination(props: TablePaginationProps): JSX.Element {
-  const {
-    variant = 'default',
-    count,
-    labelRowsPerPage = 'Rows per page:',
-    onPageChange,
-    onRowsPerPageChange,
-    page,
-    rowsPerPage = 50,
-    rowsPerPageOptions = [10, 25, 50, 100],
-    disabled = false,
-    rowsPerPagePlacement,
-    ...rest
-  } = props
-
-  return (
-    <Layout.Group space="xl" align="center" justify="space-between" {...rest}>
-      <RowsPerPage
-        page={page}
-        count={count}
-        onRowsPerPageChange={onRowsPerPageChange}
-        rowsPerPage={rowsPerPage}
-        rowsPerPageOptions={rowsPerPageOptions}
-        labelRowsPerPage={labelRowsPerPage}
-        disabled={disabled || !count}
-        position={rowsPerPagePlacement?.position}
-        align={rowsPerPagePlacement?.align}
-      />
-      <TablePaginationActions
-        variant={variant}
-        page={page}
-        onPageChange={onPageChange}
-        rowsPerPage={rowsPerPage}
-        count={count}
-        disabled={disabled || !count}
-      />
-    </Layout.Group>
-  )
-}
-
-export default TablePagination

package/src/components/TablePagination/TablePagination.types.ts

@@ -1,69 +0,0 @@
-import type { GroupProps } from 'components/Layout/Group'
-import type { PopoverPlacement } from 'components/Popover'
-
-export interface TablePaginationProps extends GroupProps {
-  /**
-   * The pagination variant
-   * @default 'default'
-   */
-  variant?: 'compact' | 'default'
-  /**
-   * The total number of paginated items
-   */
-  count: number
-  /**
-   * Customize the rows per page label.
-   * @default 'Rows per page:'
-   */
-  labelRowsPerPage?: string
-  /**
-   * Callback fired when the page is changed.
-   */
-  onPageChange: (page: number) => void
-  /**
-   * Callback fired when the number of rows per page is changed.
-   *
-   * Note: Resetting the page to zero after the number of rows per page is changed isn't part of
-   * the component and has to be implemented where it's necessary
-   */
-  onRowsPerPageChange: (rowsPerPage: number) => void
-  /**
-   * The number of rows per page.
-   * @default 50
-   */
-  rowsPerPage?: number
-  /**
-   * The zero-based index of the current page.
-   */
-  page: number
-  /**
-   * Customizes the options of the rows per page select field.
-   * @default [10, 25, 50, 100]
-   */
-  rowsPerPageOptions?: number[]
-  /**
-   * Disable all the pagination actions
-   */
-  disabled?: boolean
-  /**
-   * Customizes the placement of the rows per page select field.
-   * @default { position: 'bottom', align: 'start' }
-   */
-  rowsPerPagePlacement?: PopoverPlacement
-}
-
-export type TablePaginationActionsProps = Omit<
-  TablePaginationProps,
-  'labelRowsPerPage' | 'onRowsPerPageChange' | 'rowsPerPageOptions' | 'rowsPerPage'
-> & {
-  rowsPerPage: number
-}
-
-export type RowsPerPageProps = Omit<
-  TablePaginationProps,
-  'rowsPerPageOptions' | 'onPageChange' | 'rowsPerPage' | 'align'
-> &
-  PopoverPlacement & {
-    rowsPerPageOptions: number[]
-    rowsPerPage: number
-  }