refactor: pagination

.changeset/dirty-fishes-flash.md

@@ -0,0 +1,9 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactor and enhancement of `<Pagination />` : 
+- Number of results on the bottom left 
+- Number of items to display
+- Styling
+

packages/ui/src/components/Pagination/PaginationButtons.tsx

@@ -0,0 +1,158 @@
+import styled from '@emotion/styled'
+import { useCallback, useMemo } from 'react'
+import { Button } from '../Button'
+import { Stack } from '../Stack'
+import { Text } from '../Text'
+import { getPageNumbers } from './getPageNumbers'
+
+const PageNumbersContainer = styled(Stack)`
+  margin: 0 ${({ theme }) => theme.space['1']};
+`
+
+const PageButton = styled(Button, {
+  shouldForwardProp: prop => !['width'].includes(prop),
+})<{ width: string }>`
+  width: ${({ theme, width }) => (width === 'small' ? theme.sizing[400] : theme.sizing[500])};
+`
+
+const Ellipsis = styled(Text, {
+  shouldForwardProp: prop => !['width'].includes(prop),
+})<{ size: string }>`
+  align-content: center;
+  padding: ${({ theme }) => theme.space[1]};
+  height: ${({ theme, size }) => (size === 'small' ? theme.sizing[400] : theme.sizing[500])};
+  width: ${({ theme, size }) => (size === 'small' ? theme.sizing[400] : theme.sizing[500])};
+`
+
+type PaginationButtonsProps = {
+  page: number
+  disabled: boolean
+  onChange: (newPage: number) => void
+  pageCount: number
+  pageTabCount?: number
+  className?: string
+  'data-testid'?: string
+  perPage: boolean
+}
+
+type MakeButtonProps = {
+  hasEllipsisBefore: boolean
+  pageNumber: number
+  disabled?: boolean
+  page: number
+  handlePageClick: (pageNumber: number) => () => void
+  perPage: boolean
+}
+const MakeButton = ({
+  hasEllipsisBefore,
+  pageNumber,
+  disabled,
+  page,
+  handlePageClick,
+  perPage,
+}: MakeButtonProps) => (
+  <>
+    {hasEllipsisBefore ? (
+      <Ellipsis
+        aria-label="ellipsis"
+        disabled={disabled}
+        variant="body"
+        sentiment="neutral"
+        prominence="default"
+        as="span"
+        placement="center"
+        size={perPage ? 'small' : 'medium'}
+      >
+        ...
+      </Ellipsis>
+    ) : null}
+    <PageButton
+      aria-current={pageNumber === page}
+      disabled={disabled}
+      variant={pageNumber === page ? 'filled' : 'outlined'}
+      sentiment={pageNumber === page ? 'primary' : 'neutral'}
+      onClick={handlePageClick(pageNumber)}
+      type="button"
+      size={perPage ? 'small' : 'medium'}
+      width={perPage ? 'small' : 'medium'}
+    >
+      {pageNumber}
+    </PageButton>
+  </>
+)
+
+export const PaginationButtons = ({
+  page,
+  disabled,
+  onChange,
+  pageCount,
+  pageTabCount,
+  'data-testid': dataTestId,
+  className,
+  perPage,
+}: PaginationButtonsProps) => {
+  const goToNextPage = useCallback(() => {
+    onChange(page + 1)
+  }, [onChange, page])
+
+  const goToPreviousPage = useCallback(() => {
+    onChange(page - 1)
+  }, [onChange, page])
+
+  const pageNumbersToDisplay = useMemo(
+    () => (pageCount > 1 ? getPageNumbers(page, pageCount, pageTabCount) : [1]),
+    [page, pageCount, pageTabCount],
+  )
+
+  const handlePageClick = useCallback(
+    (pageNumber: number) => () => {
+      onChange(pageNumber)
+    },
+    [onChange],
+  )
+
+  return (
+    <Stack className={className} data-testid={dataTestId} direction="row">
+      <Stack gap={1}>
+        <Button
+          aria-label="Back"
+          disabled={page <= 1 || disabled}
+          variant="outlined"
+          sentiment="primary"
+          onClick={goToPreviousPage}
+          icon="arrow-left"
+          size={perPage ? 'small' : 'medium'}
+        />
+      </Stack>
+      <PageNumbersContainer direction="row" gap={1}>
+        {pageNumbersToDisplay.map((pageNumber, index) => (
+          <MakeButton
+            hasEllipsisBefore={
+              !(
+                index === 0 ||
+                pageNumbersToDisplay[index - 1] === pageNumber - 1
+              )
+            }
+            page={page}
+            pageNumber={pageNumber}
+            handlePageClick={handlePageClick}
+            disabled={disabled}
+            key={pageNumber}
+            perPage={perPage}
+          />
+        ))}
+      </PageNumbersContainer>
+      <Stack gap={1}>
+        <Button
+          aria-label="Next"
+          disabled={page >= pageCount || disabled}
+          variant="outlined"
+          sentiment="primary"
+          onClick={goToNextPage}
+          icon="arrow-right"
+          size={perPage ? 'small' : 'medium'}
+        />
+      </Stack>
+    </Stack>
+  )
+}

packages/ui/src/components/Pagination/PerPage.tsx

@@ -0,0 +1,74 @@
+import styled from '@emotion/styled'
+import type { Dispatch, SetStateAction } from 'react'
+import { SelectInputV2 } from '../SelectInputV2'
+import { Stack } from '../Stack'
+import { Text } from '../Text'
+
+const optionsItemsPerPage = [
+  {
+    value: '10',
+    label: '10',
+  },
+  {
+    value: '25',
+    label: '25',
+  },
+  {
+    value: '50',
+    label: '50',
+  },
+  {
+    value: '100',
+    label: '100',
+  },
+]
+
+const StyledSelectInput = styled(SelectInputV2)`
+  width: fit-content;
+  min-width: none;
+`
+
+type PerPageProps = {
+  perPage: number
+  onChangePerPage?: (perPage: number) => void
+  perPageText?: string
+  setPerPage: Dispatch<SetStateAction<number>>
+  numberOfItemsText?: string
+  page: number
+  numberOfItems: number
+}
+
+export const PerPage = ({
+  perPage,
+  onChangePerPage,
+  perPageText,
+  setPerPage,
+  numberOfItemsText,
+  page,
+  numberOfItems,
+}: PerPageProps) => {
+  const handleChange = (value: string) => {
+    const intValue = Number.parseInt(value, 10)
+    onChangePerPage?.(intValue)
+    setPerPage(intValue)
+  }
+
+  return (
+    <Stack direction="row" gap="2" alignItems="center">
+      <Text as="span" variant="body" sentiment="neutral" prominence="weak">
+        {perPageText ?? 'Items per page'}
+      </Text>
+      <StyledSelectInput
+        value={perPage.toString()}
+        options={optionsItemsPerPage}
+        onChange={handleChange}
+        name="select-items-per-page"
+        size="small"
+      />
+      <Text as="span" variant="body" sentiment="neutral" prominence="weak">
+        {(page - 1) * perPage + 1}-{Math.min(page * perPage, numberOfItems)}{' '}
+        {numberOfItemsText ?? `of ${numberOfItems} items"`}
+      </Text>
+    </Stack>
+  )
+}

packages/ui/src/components/Pagination/__stories__/Controlled.stories.tsx

@@ -0,0 +1,33 @@
+import type { StoryFn } from '@storybook/react'
+import { useState } from 'react'
+import { Pagination } from '..'
+import { Badge } from '../../Badge'
+
+export const Controlled: StoryFn = props => {
+  const [page, setPage] = useState(1)
+
+  return (
+    <>
+      Current page : {page}{' '}
+      <Pagination {...props} onChange={setPage} page={page} pageCount={10} />
+    </>
+  )
+}
+
+Controlled.args = {
+  value: 40,
+  labelDescription: (
+    <Badge sentiment="primary" size="small">
+      New
+    </Badge>
+  ),
+  label: 'Label',
+}
+
+Controlled.parameters = {
+  docs: {
+    description: {
+      story: 'Define number of elements to show per page',
+    },
+  },
+}

packages/ui/src/components/Pagination/__stories__/PerPage.stories.tsx

@@ -0,0 +1,70 @@
+import styled from '@emotion/styled'
+import type { StoryFn } from '@storybook/react'
+import { useState } from 'react'
+import { Pagination } from '..'
+import { Badge } from '../../Badge'
+import { Stack } from '../../Stack'
+
+const NUMBER_OF_ITEMS = 134
+const StyledList = styled.ul`
+  height: 13.5rem;
+  overflow-y: auto;
+  border: ${({ theme }) => theme.colors.neutral.border} 1px solid;
+  padding: ${({ theme }) => theme.space[1]};
+`
+export const PerPage: StoryFn = props => {
+  const [page, setPage] = useState(1)
+  const [perPage, setPerPage] = useState(10)
+  const computeNumberOfPages = Math.ceil(NUMBER_OF_ITEMS / perPage)
+
+  return (
+    <Stack gap={1}>
+      <StyledList>
+        {Array.from({ length: perPage }).map((_, index) => {
+          const itemNumber = perPage * (page - 1) + index + 1
+          if (itemNumber <= NUMBER_OF_ITEMS) {
+            return <li key={itemNumber}>Item #{itemNumber}</li>
+          }
+
+          return null
+        })}
+      </StyledList>
+      <Pagination
+        {...props}
+        onChange={setPage}
+        page={page}
+        perPage={perPage}
+        pageCount={computeNumberOfPages}
+        onChangePerPage={setPerPage}
+        numberOfItems={NUMBER_OF_ITEMS}
+      />
+    </Stack>
+  )
+}
+
+PerPage.args = {
+  value: 40,
+  labelDescription: (
+    <Badge sentiment="primary" size="small">
+      New
+    </Badge>
+  ),
+  label: 'Label',
+  numberOfItemsText: `of ${NUMBER_OF_ITEMS} items`,
+}
+
+PerPage.parameters = {
+  docs: {
+    description: {
+      story: 'Define number of elements to show per page',
+    },
+  },
+}
+
+PerPage.decorators = [
+  StoryComponent => (
+    <div style={{ height: '500px' }}>
+      <StoryComponent />
+    </div>
+  ),
+]

packages/ui/src/components/Pagination/__stories__/Playground.stories.tsx

@@ -1,3 +1,8 @@
 import { Template } from './Template.stories'
 
 export const Playground = Template.bind({})
+
+Playground.args = {
+  page: 1,
+  pageCount: 5,
+}

packages/ui/src/components/Pagination/__stories__/index.stories.tsx

@@ -8,3 +8,5 @@ export default {
 export { Playground } from './Playground.stories'
 export { Basic } from './Basic.stories'
 export { Disabled } from './Disabled.stories'
+export { Controlled } from './Controlled.stories'
+export { PerPage } from './PerPage.stories'