@loadsmart/loadsmart-ui 5.2.1 → 5.3.0

package/dist/utils/toolset/keyboard.d.ts

@@ -11,6 +11,10 @@ declare const SUPPORTED_KEYS: {
     SHIFT: string;
     SPACE: string;
     TAB: string;
+    E_LOWERCASE: string;
+    DOT: string;
+    PLUS: string;
+    MINUS: string;
 };
 export declare type SupportedKey = keyof typeof SUPPORTED_KEYS;
 export declare function getKeyboardKey(e: KeyboardEvent): KeyboardEvent['key'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.2.1",
+  "version": "5.3.0",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [

package/src/components/Icon/Icon.tsx

@@ -20,6 +20,7 @@ import SortIcon from './assets/sort.svg'
 import UploadIcon from './assets/upload.svg'
 import WarningIcon from './assets/warning.svg'
 import DotsHorizontalIcon from './assets/dots-horizontal.svg'
+import CaretRightLastIcon from './assets/caret-right-last.svg'
 
 import type { IconProps as GenericIconProps } from '../IconFactory'
 
@@ -44,6 +45,7 @@ const icons = {
   upload: UploadIcon as JSX.Element,
   warning: WarningIcon as JSX.Element,
   'dots-horizontal': DotsHorizontalIcon as JSX.Element,
+  'caret-right-last': CaretRightLastIcon as JSX.Element,
 }
 
 const Icon = IconFactory(icons)

package/src/components/Icon/assets/caret-right-last.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2501 6.38126L14.1842 10.4471L27.7371 24L14.1842 37.5529L18.2501 41.6187L31.803 28.0659L35.8688 24L31.803 19.9341L18.2501 6.38126Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.2922 38.375L44.1256 38.375L44.1256 9.625L40.2922 9.625L40.2922 38.375Z"/>
+</svg>

package/src/components/TablePagination/RowsPerPage.tsx

@@ -0,0 +1,76 @@
+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 { RowsPerPageProps } from './TablePagination.types'
+import { ButtonProps } from 'components/Button'
+import { NoPaddingButton } from './TablePagination.styles'
+
+const TriggerButton = (props: Omit<ButtonProps, 'scale' | 'variant'>) => {
+  const { toggle } = React.useContext(DropdownContext)
+
+  return (
+    <NoPaddingButton data-testid="rows-per-page-button" onClick={toggle} {...props}>
+      <Icon name="caret-down" size={16} color="neutral-darker" />
+    </NoPaddingButton>
+  )
+}
+
+function RowsPerPage({
+  page,
+  rowsPerPage,
+  onRowsPerPageChange,
+  labelRowsPerPage,
+  count,
+  rowsPerPageOptions,
+  disabled = false,
+}: 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>
+        <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

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import TablePagination from './TablePagination'
+import { Meta, Story } from '@storybook/react/types-6-0'
+
+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)
+
+  return (
+    <Layout.Group>
+      <TablePagination
+        {...args}
+        onPageChange={(page) => setPage(page)}
+        page={page}
+        rowsPerPage={rowsPerPage}
+        onRowsPerPageChange={setRowsPerPage}
+      />
+    </Layout.Group>
+  )
+}
+
+Playground.args = {
+  page: 0,
+  count: 1004,
+  rowsPerPage: 100,
+  disabled: false,
+  variant: 'default',
+}

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,112 @@
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+
+import renderer, { screen } from '../../../tests/renderer'
+
+import TablePagination from './TablePagination'
+import { 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', () => {
+    const onPageChange = jest.fn()
+    const onRowsPerPageChange = jest.fn()
+    setup({
+      page: 2,
+      onPageChange,
+      onRowsPerPageChange,
+    })
+    userEvent.click(screen.getByTestId('rows-per-page-button'))
+    userEvent.click(screen.getByText(/50 per page/i))
+
+    expect(onRowsPerPageChange).toHaveBeenLastCalledWith(50)
+    expect(onPageChange).toHaveBeenLastCalledWith(0)
+  })
+
+  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

@@ -0,0 +1,51 @@
+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,
+    ...rest
+  } = props
+
+  const handleRowsPerPageChange = (selectedOption: number) => {
+    onRowsPerPageChange(selectedOption)
+    onPageChange(0)
+  }
+
+  return (
+    <Layout.Group space="xl" align="center" justify="space-between" {...rest}>
+      <RowsPerPage
+        page={page}
+        count={count}
+        onRowsPerPageChange={handleRowsPerPageChange}
+        rowsPerPage={rowsPerPage}
+        rowsPerPageOptions={rowsPerPageOptions}
+        labelRowsPerPage={labelRowsPerPage}
+        disabled={disabled || !count}
+      />
+      <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

@@ -0,0 +1,59 @@
+import { GroupProps } from 'components/Layout/Group'
+
+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.
+   */
+  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
+}
+
+export type TablePaginationActionsProps = Omit<
+  TablePaginationProps,
+  'labelRowsPerPage' | 'onRowsPerPageChange' | 'rowsPerPageOptions' | 'rowsPerPage'
+> & {
+  rowsPerPage: number
+}
+
+export type RowsPerPageProps = Omit<
+  TablePaginationProps,
+  'rowsPerPageOptions' | 'onPageChange' | 'rowsPerPage'
+> & {
+  rowsPerPageOptions: number[]
+  rowsPerPage: number
+}

package/src/components/TablePagination/TablePaginationActions.tsx

@@ -0,0 +1,144 @@
+import React, { ChangeEvent, KeyboardEvent, useEffect, useState } from 'react'
+
+import { Layout } from 'components/Layout'
+import { Text } from 'components/Text'
+import { TextField } from 'components/TextField'
+import { TablePaginationActionsProps } from 'components/TablePagination/TablePagination.types'
+import styled from 'styled-components'
+import { Icon, IconProps } from 'components/Icon'
+import Keyboard from 'utils/toolset/keyboard'
+import { NoPaddingButton } from './TablePagination.styles'
+import { prop } from 'tools/index'
+
+export const ActionIcon = styled(Icon).attrs({
+  color: 'neutral-darker',
+  size: '16',
+})<IconProps & { rotate?: number }>`
+  transform: rotate(${prop('rotate', 0)}deg);
+`
+
+function TablePaginationActions({
+  variant = 'default',
+  disabled = false,
+  onPageChange,
+  page,
+  count,
+  rowsPerPage,
+}: TablePaginationActionsProps): JSX.Element {
+  const totalPages = Math.ceil(count / rowsPerPage)
+  const [pageValue, setPageValue] = useState<number | ''>(page + 1)
+  const isCompact = variant === 'compact'
+
+  useEffect(() => {
+    setPageValue(page + 1)
+  }, [page])
+
+  const handleFirstPageClick = () => {
+    onPageChange(0)
+  }
+
+  const handlePreviousPageClick = () => {
+    onPageChange(page - 1)
+  }
+
+  const handleNextPageClick = () => {
+    onPageChange(page + 1)
+  }
+
+  const handleLastPageClick = () => {
+    onPageChange(totalPages - 1)
+  }
+
+  const publishPageChange = () => {
+    if (pageValue && pageValue - 1 !== page) {
+      onPageChange(pageValue - 1)
+    }
+  }
+
+  const handleKeyUp = (e: KeyboardEvent) => {
+    if (Keyboard(e).is('ENTER')) {
+      publishPageChange()
+    }
+  }
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (Keyboard(e).is(['E_LOWERCASE', 'DOT', 'MINUS', 'PLUS'])) {
+      e.preventDefault()
+    }
+  }
+
+  const handlePageChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value === '') {
+      setPageValue('')
+      return
+    }
+
+    const numberValue = Number(e.target.value)
+
+    if (!numberValue || numberValue < 1 || numberValue > totalPages) return
+
+    setPageValue(numberValue)
+  }
+
+  return (
+    <Layout.Group space="s" align="center">
+      {!isCompact && (
+        <NoPaddingButton
+          onClick={handleFirstPageClick}
+          disabled={page === 0 || disabled}
+          title="First page"
+        >
+          <ActionIcon name="caret-right-last" rotate={180} />
+        </NoPaddingButton>
+      )}
+      <NoPaddingButton
+        onClick={handlePreviousPageClick}
+        disabled={page === 0 || disabled}
+        title="Previous page"
+      >
+        <ActionIcon name="caret-left" />
+      </NoPaddingButton>
+      {!isCompact && (
+        <>
+          <TextField
+            type="number"
+            min={1}
+            max={totalPages}
+            disabled={disabled || totalPages === 1}
+            onChange={handlePageChange}
+            onBlur={publishPageChange}
+            onKeyUp={handleKeyUp}
+            onKeyDown={handleKeyDown}
+            scale="small"
+            value={count ? pageValue : 0}
+            title="Page"
+          />
+          <Text variant="body" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
+            of{' '}
+            <Text variant="body-bold" color={disabled ? 'color-neutral' : 'color-neutral-dark'}>
+              {totalPages}
+            </Text>
+          </Text>
+        </>
+      )}
+      <NoPaddingButton
+        onClick={handleNextPageClick}
+        disabled={page >= totalPages - 1 || disabled}
+        title="Next page"
+      >
+        <ActionIcon name="caret-right" />
+      </NoPaddingButton>
+      {!isCompact && (
+        <NoPaddingButton
+          onClick={handleLastPageClick}
+          disabled={page >= totalPages - 1 || disabled}
+          title="Last page"
+        >
+          <ActionIcon name="caret-right-last" />
+        </NoPaddingButton>
+      )}
+    </Layout.Group>
+  )
+}
+
+export default TablePaginationActions

package/src/components/TablePagination/index.ts

@@ -0,0 +1,2 @@
+export { default as TablePagination } from './TablePagination'
+export type { TablePaginationProps } from './TablePagination.types'

package/src/index.ts

@@ -173,3 +173,6 @@ export type {
   DragDropFileProviderProps,
   DragDropFileContextValue,
 } from './components/DragDropFile/types'
+
+export { TablePagination } from './components/TablePagination'
+export type { TablePaginationProps } from './components/TablePagination'

package/src/utils/toolset/keyboard.ts

@@ -15,6 +15,10 @@ const SUPPORTED_KEYS = {
   SHIFT: 'Shift',
   SPACE: ' ',
   TAB: 'Tab',
+  E_LOWERCASE: 'e',
+  DOT: '.',
+  PLUS: '+',
+  MINUS: '-',
 }
 
 export type SupportedKey = keyof typeof SUPPORTED_KEYS