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

package/src/components/Pagination/PaginationItem.tsx

@@ -1,74 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import conditional, { whenProps } from 'tools/conditional'
-import hoverable from 'styles/hoverable'
-import focusable from 'styles/focusable'
-
-import { BaseButton, IconButton as IconButtonDefault } from 'components/Button'
-import { Icon } from 'components/Icon'
-import { Text } from 'components/Text'
-
-import type { PaginationItemProps } from './Pagination.types'
-import { PAGINATION_ITEM_TYPE } from './Pagination.constants'
-
-const IconButton = styled(IconButtonDefault)`
-  margin: ${token('space-xs')};
-`
-
-const PageButton = styled(BaseButton)`
-  background-color: transparent;
-  border: none;
-
-  ${focusable`
-    box-shadow: ${token('button-primary-outline')};
-  `}
-
-  ${hoverable`
-    * {
-      text-decoration: underline;
-      color: ${token('color-neutral-dark')};
-    }
-  `}
-
-  ${Text} {
-    color: ${conditional({
-      'color-accent': whenProps({ 'aria-current': true }),
-    })};
-    text-decoration: ${conditional({
-      underline: whenProps({ 'aria-current': true }),
-    })};
-  }
-`
-
-const ICONS_NAME: Record<string, string> = {
-  previous: 'caret-left',
-  next: 'caret-right',
-}
-
-function PaginationItem(props: PaginationItemProps): JSX.Element {
-  const { itemType: type, page, ...others } = props
-
-  const iconName = ICONS_NAME[type]
-
-  if (iconName) {
-    return (
-      <IconButton {...others} id={iconName} aria-label={`Go to ${type} page`}>
-        <Icon name={iconName} size={16} />
-      </IconButton>
-    )
-  }
-
-  return (
-    <PageButton {...others} aria-label={`Go to page ${page?.toString() ?? ''}`}>
-      <Text variant="body">
-        {[PAGINATION_ITEM_TYPE.endEllipsis, PAGINATION_ITEM_TYPE.startEllipsis].includes(type)
-          ? '...'
-          : page}
-      </Text>
-    </PageButton>
-  )
-}
-
-export default PaginationItem

package/src/components/Pagination/index.ts

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

package/src/components/Pagination/usePagination.test.ts

@@ -1,188 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks'
-
-import usePagination from './usePagination'
-
-describe('usePagination', () => {
-  it('returns a disabled previous and next button when has only one page', () => {
-    const props = {
-      page: 1,
-      count: 1,
-      onChange: jest.fn(),
-    }
-    const items = renderHook(() => usePagination(props)).result.current
-
-    expect(items[0]).toHaveProperty('itemType', 'previous')
-    expect(items[0]).toHaveProperty('disabled', true)
-    expect(items[2]).toHaveProperty('itemType', 'next')
-    expect(items[2]).toHaveProperty('disabled', true)
-  })
-
-  it('returns a disabled previous button and an enabled next button when count > 1 and first page selected', () => {
-    const props = {
-      page: 1,
-      count: 2,
-      onChange: jest.fn(),
-    }
-    const items = renderHook(() => usePagination(props)).result.current
-
-    expect(items[0]).toHaveProperty('itemType', 'previous')
-    expect(items[0]).toHaveProperty('disabled', true)
-    expect(items[3]).toHaveProperty('itemType', 'next')
-    expect(items[3]).toHaveProperty('disabled', false)
-  })
-
-  it('returns an enabled previous button and a disabled next button when page === count', () => {
-    const props = {
-      page: 2,
-      count: 2,
-      onChange: jest.fn(),
-    }
-    const items = renderHook(() => usePagination(props)).result.current
-
-    expect(items[0]).toHaveProperty('itemType', 'previous')
-    expect(items[0]).toHaveProperty('disabled', false)
-    expect(items[3]).toHaveProperty('itemType', 'next')
-    expect(items[3]).toHaveProperty('disabled', true)
-  })
-
-  it('returns no ellipses when count <= 7', () => {
-    const props = {
-      page: 1,
-      count: 7,
-      onChange: jest.fn(),
-    }
-    const items = renderHook(() => usePagination(props)).result.current
-
-    expect(items[1]).toHaveProperty('page', 1)
-    expect(items[2]).toHaveProperty('page', 2)
-    expect(items[3]).toHaveProperty('page', 3)
-    expect(items[4]).toHaveProperty('page', 4)
-    expect(items[5]).toHaveProperty('page', 5)
-    expect(items[6]).toHaveProperty('page', 6)
-    expect(items[7]).toHaveProperty('page', 7)
-  })
-
-  it('returns an end ellipsis by default when count >= 8', () => {
-    const props = {
-      page: 1,
-      count: 8,
-      onChange: jest.fn(),
-    }
-    const items = renderHook(() => usePagination(props)).result.current
-
-    expect(items).toHaveLength(9)
-
-    expect(items[2]).toHaveProperty('itemType', 'page')
-    expect(items[2]).toHaveProperty('page', 2)
-
-    expect(items[6]).toHaveProperty('itemType', 'end-ellipsis')
-    expect(items[6]).toHaveProperty('page', 6)
-  })
-
-  it('returns a start ellipsis when page >= 5', () => {
-    const props = {
-      page: 5,
-      count: 8,
-      onChange: jest.fn(),
-    }
-    const items = renderHook(() => usePagination(props)).result.current
-
-    expect(items[2]).toHaveProperty('itemType', 'start-ellipsis')
-    expect(items[2]).toHaveProperty('page', 3)
-    expect(items[6]).toHaveProperty('page', 7)
-  })
-
-  it('returns start and end ellipsis when count >= 9', () => {
-    const props = {
-      page: 5,
-      count: 9,
-      onChange: jest.fn(),
-    }
-    const items = renderHook(() => usePagination(props)).result.current
-
-    expect(items).toHaveLength(9)
-
-    expect(items[2]).toHaveProperty('itemType', 'start-ellipsis')
-    expect(items[2]).toHaveProperty('page', 3)
-
-    expect(items[6]).toHaveProperty('itemType', 'end-ellipsis')
-    expect(items[6]).toHaveProperty('page', 7)
-  })
-
-  it('returns no sibilings', () => {
-    const props = {
-      page: 4,
-      count: 7,
-      siblingCount: 0,
-      onChange: jest.fn(),
-    }
-    const items = renderHook(() => usePagination(props)).result.current
-
-    expect(items).toHaveLength(7)
-
-    expect(items[2]).toHaveProperty('itemType', 'start-ellipsis')
-
-    expect(items[3]).toHaveProperty('itemType', 'page')
-    expect(items[3]).toHaveProperty('page', 4)
-
-    expect(items[4]).toHaveProperty('itemType', 'end-ellipsis')
-  })
-
-  it('returns more than one siblings', () => {
-    const props = {
-      page: 6,
-      count: 11,
-      siblingCount: 2,
-      onChange: jest.fn(),
-    }
-    const items = renderHook(() => usePagination(props)).result.current
-
-    expect(items).toHaveLength(11)
-
-    expect(items[2]).toHaveProperty('itemType', 'start-ellipsis')
-
-    expect(items[3]).toHaveProperty('itemType', 'page')
-    expect(items[3]).toHaveProperty('page', 4)
-
-    expect(items[4]).toHaveProperty('itemType', 'page')
-    expect(items[4]).toHaveProperty('page', 5)
-
-    expect(items[5]).toHaveProperty('itemType', 'page')
-    expect(items[5]).toHaveProperty('page', 6)
-
-    expect(items[6]).toHaveProperty('itemType', 'page')
-    expect(items[6]).toHaveProperty('page', 7)
-
-    expect(items[7]).toHaveProperty('itemType', 'page')
-    expect(items[7]).toHaveProperty('page', 8)
-
-    expect(items[8]).toHaveProperty('itemType', 'end-ellipsis')
-  })
-
-  it('returns more than one boundary page', () => {
-    const props = {
-      page: 6,
-      count: 11,
-      boundaryCount: 2,
-      onChange: jest.fn(),
-    }
-    const items = renderHook(() => usePagination(props)).result.current
-
-    expect(items).toHaveLength(11)
-
-    expect(items[1]).toHaveProperty('itemType', 'page')
-    expect(items[1]).toHaveProperty('page', 1)
-
-    expect(items[2]).toHaveProperty('itemType', 'page')
-    expect(items[2]).toHaveProperty('page', 2)
-
-    expect(items[3]).toHaveProperty('itemType', 'start-ellipsis')
-    expect(items[7]).toHaveProperty('itemType', 'end-ellipsis')
-
-    expect(items[8]).toHaveProperty('itemType', 'page')
-    expect(items[8]).toHaveProperty('page', 10)
-
-    expect(items[9]).toHaveProperty('itemType', 'page')
-    expect(items[9]).toHaveProperty('page', 11)
-  })
-})

package/src/components/Pagination/usePagination.ts

@@ -1,87 +0,0 @@
-import { PAGINATION_ITEM_TYPE } from './Pagination.constants'
-import { PaginationHelper } from './Pagination.helper'
-import type { usePaginationProps, usePaginationReturn } from './Pagination.types'
-
-function usePagination(props: usePaginationProps): usePaginationReturn[] {
-  const {
-    boundaryCount = 1,
-    count,
-    disabled = false,
-    onChange: handleChange,
-    page,
-    siblingCount = 1,
-  } = props
-
-  const paginationHelper = new PaginationHelper({ boundaryCount, count, page, siblingCount })
-
-  function handleClick({ page }: { page: number | null }) {
-    if (page) {
-      handleChange({ page })
-    }
-  }
-
-  const startPages = paginationHelper.getStartPages()
-  const endPages = paginationHelper.getEndPages()
-
-  const siblingsStart = paginationHelper.getSibilingsStart()
-  const siblingsEnd = paginationHelper.getSibilingsEnd()
-
-  // Basic list of items to render
-  // e.g. itemList = ['previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next']
-  const itemList = [
-    PAGINATION_ITEM_TYPE.previous,
-    ...startPages,
-
-    // Start ellipsis
-    ...paginationHelper.getStartEllipsis(),
-
-    // Sibling pages
-    ...paginationHelper.range(siblingsStart, siblingsEnd),
-
-    // End ellipsis
-    ...paginationHelper.getEndEllipsis(),
-
-    ...endPages,
-    PAGINATION_ITEM_TYPE.next,
-  ]
-
-  function getButtonPage(item: string | number): number | null {
-    if (typeof item === 'number') {
-      return item
-    } else {
-      switch (item) {
-        case PAGINATION_ITEM_TYPE.previous:
-          return page - 1
-        case PAGINATION_ITEM_TYPE.next:
-          return page + 1
-        case PAGINATION_ITEM_TYPE.startEllipsis:
-          return siblingsStart - 1
-        case PAGINATION_ITEM_TYPE.endEllipsis:
-          return siblingsEnd + 1
-        default:
-          return null
-      }
-    }
-  }
-
-  function isDisabled(item: string | number): boolean {
-    if (item === PAGINATION_ITEM_TYPE.previous) return page <= 1
-    if (item === PAGINATION_ITEM_TYPE.next) return page >= count
-
-    return false
-  }
-
-  return itemList.map((item) => {
-    const isNumber = typeof item === 'number'
-
-    return {
-      onClick: () => handleClick({ page: getButtonPage(item) }),
-      itemType: isNumber ? PAGINATION_ITEM_TYPE.page : item.toString(),
-      page: getButtonPage(item),
-      disabled: disabled || isDisabled(item),
-      ...(isNumber && { 'aria-current': item === page }),
-    }
-  })
-}
-
-export default usePagination

package/src/components/Popover/Popover.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import type { Story, Meta } from '@storybook/react'
-
-import Popover from './Popover'
-
-import type { PopoverProps } from './Popover.types'
-
-export default {
-  title: 'Components/Popover',
-  component: Popover,
-  argTypes: {
-    position: {
-      control: {
-        type: 'radio',
-        options: ['top', 'right', 'bottom', 'left'],
-      },
-    },
-    align: {
-      control: {
-        type: 'radio',
-        options: ['start', 'center', 'end'],
-      },
-    },
-  },
-} as Meta
-
-export const Playground: Story<PopoverProps> = ({ children, ...args }: PopoverProps) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center">
-        <div style={{ maxHeight: 100, overflow: 'scroll', border: 'solid 1px black' }}>
-          <div style={{ height: 250, paddingTop: 100 }}>
-            <Popover {...args}>
-              <Popover.Reference>Reference</Popover.Reference>
-              <Popover.Floating style={{ background: 'white', pointerEvents: 'none' }}>
-                {children}
-              </Popover.Floating>
-            </Popover>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  children: 'Just a floating content',
-  position: 'bottom',
-  align: 'center',
-}

package/src/components/Popover/Popover.test.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { composeStories } from '@storybook/react'
-
-import * as stories from './Popover.stories'
-import generator from '../../tests/generator'
-import renderer, { screen } from '../../tests/renderer'
-import type { PopoverProps } from './Popover.types'
-
-const { Playground } = composeStories(stories)
-
-const setup = (overrides: Partial<PopoverProps>) => renderer(<Playground {...overrides} />).render()
-
-describe('Popover', () => {
-  it('renders correctly', () => {
-    const props = {
-      children: generator.word(),
-    }
-
-    setup(props)
-    screen.getByText(props.children)
-  })
-})

package/src/components/Popover/Popover.tsx

@@ -1,110 +0,0 @@
-import React, { CSSProperties, useMemo, useRef } from 'react'
-import { useFloating, offset, flip, shift, arrow, autoUpdate } from '@floating-ui/react-dom'
-import type { Placement } from '@floating-ui/react-dom'
-
-import type {
-  PopoverAlign,
-  PopoverFloatingProps,
-  PopoverPosition,
-  PopoverProps,
-  PopoverReferenceProps,
-  UsePopoverReturn,
-} from './Popover.types'
-
-const PopoverContext = React.createContext<UsePopoverReturn | undefined>(undefined)
-
-export function usePopover(): UsePopoverReturn {
-  const value = React.useContext(PopoverContext)
-
-  if (!value) {
-    throw new Error('usePopover must be used within a <Popover> Provider')
-  }
-
-  return value
-}
-
-function Popover(props: PopoverProps): JSX.Element {
-  const arrowRef = useRef<HTMLElement | null>(null)
-
-  const { position = 'bottom', align = 'start', strategy = 'fixed' } = props
-
-  const desiredPlacement: Placement = `${position}${
-    align === 'center' ? '' : `-${align}`
-  }` as Placement
-
-  const floating = useFloating({
-    placement: desiredPlacement,
-    strategy,
-    middleware: [offset(10), flip(), shift(), arrow({ element: arrowRef, padding: 8 })],
-    // TODO: FloatingUI docs states that `autoUpdate` is expensive.
-    // This should be properly investidated since it's the way to
-    // update fixed positions after scrolling.
-    whileElementsMounted: autoUpdate,
-  })
-
-  const [resultPosition = position, resultAlign = align] = floating.placement.split('-') as [
-    PopoverPosition,
-    PopoverAlign
-  ]
-
-  const value = useMemo<UsePopoverReturn>(
-    () => ({
-      strategy,
-      register: {
-        setReference: floating.refs.setReference,
-        setFloating: floating.refs.setFloating,
-        setArrow: arrowRef,
-      },
-      result: {
-        floatingStyles: floating.floatingStyles,
-        arrow: { top: floating.middlewareData.arrow?.y, left: floating.middlewareData.arrow?.x },
-        position: resultPosition,
-        align: resultAlign,
-      },
-    }),
-    [
-      floating.refs.setFloating,
-      floating.middlewareData.arrow?.x,
-      floating.middlewareData.arrow?.y,
-      floating.refs.setReference,
-      floating.floatingStyles,
-      resultAlign,
-      resultPosition,
-      strategy,
-    ]
-  )
-
-  return <PopoverContext.Provider value={value}>{props.children}</PopoverContext.Provider>
-}
-
-function PopoverReference({ children, ...others }: PopoverReferenceProps): JSX.Element {
-  const { register } = usePopover()
-
-  return (
-    <div ref={register.setReference} {...others}>
-      {children}
-    </div>
-  )
-}
-
-function PopoverFloating({ children, style, ...others }: PopoverFloatingProps): JSX.Element {
-  const { register, result } = usePopover()
-
-  return (
-    <div
-      ref={register.setFloating}
-      {...others}
-      style={{
-        ...result.floatingStyles,
-        ...style,
-      }}
-    >
-      {children}
-    </div>
-  )
-}
-
-Popover.Floating = PopoverFloating
-Popover.Reference = PopoverReference
-
-export default Popover

package/src/components/Popover/Popover.types.ts

@@ -1,39 +0,0 @@
-import type { UseFloatingReturn } from '@floating-ui/react-dom'
-import type { CSSProperties, HTMLAttributes, MutableRefObject, PropsWithChildren } from 'react'
-
-export interface UsePopoverReturn {
-  register: {
-    setReference: UseFloatingReturn['refs']['setReference']
-    setFloating: UseFloatingReturn['refs']['setFloating']
-    setArrow: MutableRefObject<Element | null>
-  }
-  result: {
-    floatingStyles: CSSProperties
-    arrow: {
-      top: number | undefined
-      left: number | undefined
-    }
-    position: PopoverPosition
-    align: PopoverAlign
-  }
-  strategy: 'fixed' | 'absolute'
-}
-
-export type PopoverPosition = 'top' | 'bottom' | 'right' | 'left'
-export type PopoverAlign = 'start' | 'center' | 'end'
-
-export interface PopoverPlacement {
-  position?: PopoverPosition
-  align?: PopoverAlign
-}
-
-export type PopoverProps = PropsWithChildren<
-  PopoverPlacement & {
-    strategy?: UsePopoverReturn['strategy']
-    arrow?: MutableRefObject<HTMLElement | null>
-  }
->
-
-export type PopoverReferenceProps = HTMLAttributes<HTMLDivElement>
-
-export type PopoverFloatingProps = HTMLAttributes<HTMLDivElement>

package/src/components/Popover/index.ts

@@ -1,11 +0,0 @@
-export { default as Popover, usePopover } from './Popover'
-
-export type {
-  PopoverProps,
-  PopoverFloatingProps,
-  PopoverReferenceProps,
-  PopoverPlacement,
-  PopoverPosition,
-  PopoverAlign,
-  UsePopoverReturn,
-} from './Popover.types'

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import ProgressBar, { ProgressBarProps } from './ProgressBar'
-import type { Meta } from '@storybook/react'
-import Status from 'utils/types/Status'
-
-export default {
-  title: 'Components/ProgressBar',
-  component: ProgressBar,
-  argTypes: {
-    scheme: {
-      description: 'Color scheme to be used',
-      table: {
-        type: {
-          summary: 'ColorScheme',
-        },
-        defaultValue: {
-          summary: 'light',
-        },
-      },
-      control: {
-        type: 'select',
-        options: ['light', 'dark'],
-      },
-    },
-    status: {
-      control: {
-        type: 'select',
-        options: Status,
-      },
-    },
-  },
-} as Meta
-
-export function Playground(args: ProgressBarProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center w-40 space-x-2">
-        <ProgressBar {...args} />
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  value: 60,
-  status: Status.Success,
-}

package/src/components/ProgressBar/ProgressBar.test.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import { screen } from '@testing-library/react'
-
-import renderer from '../../tests/renderer'
-
-import { ProgressBar } from './ProgressBar'
-
-const setup = ({ ...overrides }) => renderer(<ProgressBar value={50} {...overrides} />).render()
-
-describe('<ProgressBar />', () => {
-  it('should render the progress bar with right values', () => {
-    const props = {
-      value: 50,
-    }
-
-    setup(props)
-
-    expect(screen.getByRole(/progressbar/i)).toHaveAttribute('aria-valuenow', '50')
-  })
-
-  it('should clamp the progress bar with negative values', () => {
-    const props = {
-      value: -80,
-    }
-
-    setup(props)
-
-    expect(screen.getByRole(/progressbar/i)).toHaveAttribute('aria-valuenow', '0')
-  })
-
-  it('should clamp the progress bar on high values', () => {
-    const props = {
-      value: 1200,
-    }
-
-    setup(props)
-
-    expect(screen.getByRole(/progressbar/i)).toHaveAttribute('aria-valuenow', '100')
-  })
-})