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

package/src/components/Modal/Modal.stories.tsx

@@ -1,121 +0,0 @@
-import React from 'react'
-import type { Meta } from '@storybook/react'
-import { useArgs } from '@storybook/client-api'
-import Modal from './Modal'
-import type { ModalProps } from './Modal'
-
-export default {
-  title: 'Components/Modal',
-  component: Modal,
-  argTypes: {
-    scale: {
-      control: {
-        type: 'select',
-        options: ['large', 'default', 'small'],
-      },
-    },
-    fullscreen: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    open: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    className: {
-      table: {
-        disable: true,
-      },
-    },
-    id: {
-      table: {
-        disable: true,
-      },
-    },
-    theme: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as Meta
-
-export function WithoutHeader(args: ModalProps): JSX.Element {
-  const [{ open }, updateArgs] = useArgs()
-
-  return (
-    <Modal
-      {...args}
-      onOverlayClick={() =>
-        updateArgs({
-          ...args,
-          open: !open,
-        })
-      }
-    >
-      Content
-    </Modal>
-  )
-}
-
-WithoutHeader.args = {
-  scale: 'default',
-  open: true,
-  fullscreen: false,
-}
-
-export function WithHeader(args: ModalProps): JSX.Element {
-  const [{ open }, updateArgs] = useArgs()
-
-  return (
-    <Modal
-      {...args}
-      onOverlayClick={() =>
-        updateArgs({
-          ...args,
-          open: !open,
-        })
-      }
-    >
-      <Modal.Header title="Modal Title"></Modal.Header>
-      Content
-    </Modal>
-  )
-}
-
-WithHeader.args = {
-  scale: 'default',
-  open: true,
-  fullscreen: false,
-  title: 'Modal Title',
-}
-
-export function WithCloseButton(args: ModalProps): JSX.Element {
-  const [{ open }, updateArgs] = useArgs()
-
-  return (
-    <Modal
-      {...args}
-      onOverlayClick={() =>
-        updateArgs({
-          ...args,
-          open: !open,
-        })
-      }
-    >
-      <Modal.Header title="Modal Title">
-        <Modal.Close />
-      </Modal.Header>
-      Content
-    </Modal>
-  )
-}
-
-WithCloseButton.args = {
-  scale: 'default',
-  open: true,
-  fullscreen: false,
-  title: 'Modal Title',
-}

package/src/components/Modal/Modal.test.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-
-import Modal from './Modal'
-import generator from '../../tests/generator'
-import renderer, { screen, user } from '../../tests/renderer'
-
-const setup = ({ open = false, ...overrides }) =>
-  renderer(<Modal open={open} {...overrides} />).render()
-
-describe('<Modal />', () => {
-  it('does not render content by default', () => {
-    const props = {
-      open: false,
-      children: generator.word(),
-    }
-
-    setup(props)
-
-    expect(screen.queryByText(props.children)).not.toBeVisible()
-  })
-
-  it('renders content when open', () => {
-    const props = {
-      open: true,
-      children: generator.word(),
-    }
-
-    setup(props)
-
-    expect(screen.queryByText(props.children)).toBeVisible()
-  })
-
-  it('calls callback when click on the overlay', () => {
-    const props = {
-      open: true,
-      children: generator.word(),
-      onOverlayClick: jest.fn(),
-    }
-
-    setup(props)
-
-    user.click(screen.getByTestId('modal-overlay'))
-
-    expect(props.onOverlayClick).toBeCalled()
-  })
-})

package/src/components/Modal/Modal.tsx

@@ -1,163 +0,0 @@
-import React, { PropsWithChildren } from 'react'
-import ReactDOM from 'react-dom'
-import styled, { css } from 'styled-components'
-
-import conditional, { whenProps } from 'tools/conditional'
-import { getToken as token } from 'theming'
-import { Text } from 'components/Text'
-import CloseButton from 'common/CloseButton'
-import rem from 'utils/toolset/rem'
-
-interface WithScaleProps {
-  scale?: 'small' | 'default' | 'large'
-}
-
-export interface ModalProps extends WithScaleProps {
-  className?: string
-  id?: string
-  open: boolean
-  fullscreen?: boolean
-  onOverlayClick?: () => void
-}
-
-interface ModalWrapperProps {
-  className?: string
-  id?: string
-  open: boolean
-  fullscreen: boolean
-}
-
-interface ContentProps extends WithScaleProps {
-  fullscreen: boolean
-}
-
-const ModalWrapper = styled.div<ModalWrapperProps>`
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  z-index: ${token('z-index-overlay')};
-
-  display: ${conditional({
-    flex: whenProps({ open: true }),
-    none: whenProps({ open: false }),
-  })};
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-
-  height: 100%;
-
-  background: ${token('modal-overlay-background')};
-`
-
-const HeaderWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: content-box;
-  height: ${token('space-xl')};
-  margin-bottom: ${token('space-l')};
-  padding-bottom: ${token('space-s')};
-
-  border-bottom: 1px solid ${token('color-neutral-light')};
-`
-const Close = styled(CloseButton).attrs({
-  size: 16,
-})`
-  position: absolute;
-  top: ${rem('36px')};
-  right: ${rem('36px')};
-`
-
-const Content = styled.div<ContentProps>`
-  background: white;
-  border-radius: ${token('border-radius-s')};
-  box-shadow: ${token('shadow-modal')};
-
-  padding: ${token('space-xl')};
-
-  margin: 0 auto;
-
-  position: relative;
-
-  outline: none;
-
-  z-index: ${token('z-index-modal')};
-
-  ${({ fullscreen }) =>
-    fullscreen &&
-    css`
-      position: absolute;
-      top: 0;
-      left: 0;
-
-      width: 100%;
-      height: 100vh;
-    `}
-
-  ${({ fullscreen }) =>
-    !fullscreen &&
-    css`
-      position: relative;
-      left: auto;
-
-      width: 80%;
-      max-width: ${conditional({
-        'modal-small-max-width': whenProps({ scale: 'small' }),
-        'modal-max-width': whenProps({ scale: 'default' }),
-        'modal-large-max-width': whenProps({ scale: 'large' }),
-      })};
-      height: auto;
-    `}
-`
-
-const Header = ({ title, children }: PropsWithChildren<{ title: string }>) => {
-  return (
-    <HeaderWrapper>
-      {title && (
-        <Text variant="heading-md-bold" color="color-neutral-darkest">
-          {title}
-        </Text>
-      )}
-      {children}
-    </HeaderWrapper>
-  )
-}
-
-function Modal({
-  scale = 'default',
-  children,
-  open,
-  fullscreen = false,
-  onOverlayClick = () => null,
-  ...others
-}: PropsWithChildren<ModalProps>): JSX.Element {
-  return ReactDOM.createPortal(
-    <ModalWrapper
-      open={open}
-      fullscreen={fullscreen}
-      onClick={onOverlayClick}
-      data-testid="modal-overlay"
-      {...others}
-    >
-      <Content
-        role="dialog"
-        aria-modal="true"
-        fullscreen={fullscreen}
-        scale={scale}
-        onClick={(e) => {
-          e.stopPropagation()
-        }}
-      >
-        {children}
-      </Content>
-    </ModalWrapper>,
-    document.body
-  )
-}
-
-Modal.Header = Header
-Modal.Close = Close
-
-export default Modal

package/src/components/Modal/index.tsx

@@ -1,2 +0,0 @@
-export { default as Modal } from './Modal'
-export type { ModalProps } from './Modal'

package/src/components/Pagination/Pagination.constants.ts

@@ -1,7 +0,0 @@
-export const PAGINATION_ITEM_TYPE = {
-  endEllipsis: 'end-ellipsis',
-  next: 'next',
-  page: 'page',
-  previous: 'previous',
-  startEllipsis: 'start-ellipsis',
-}

package/src/components/Pagination/Pagination.helper.ts

@@ -1,88 +0,0 @@
-import { PAGINATION_ITEM_TYPE } from './Pagination.constants'
-import type { PaginationHelperArgs } from './Pagination.types'
-
-export class PaginationHelper {
-  boundaryCount: number
-  count: number
-  page: number
-  siblingCount: number
-
-  constructor({ boundaryCount, count, page, siblingCount }: PaginationHelperArgs) {
-    this.boundaryCount = boundaryCount
-    this.count = count
-    this.page = page
-    this.siblingCount = siblingCount
-  }
-
-  range(start: number, end: number): number[] {
-    const length = end - start + 1
-    return Array.from({ length }, (_, i) => start + i)
-  }
-
-  getStartPages(): number[] {
-    return this.range(1, Math.min(this.boundaryCount, this.count))
-  }
-
-  getEndPages(): number[] {
-    return this.range(
-      Math.max(this.count - this.boundaryCount + 1, this.boundaryCount + 1),
-      this.count
-    )
-  }
-
-  getSibilingsStart(): number {
-    return Math.max(
-      Math.min(
-        // Natural start
-        this.page - this.siblingCount,
-        // Lower boundary when page is high
-        this.count - this.boundaryCount - this.siblingCount * 2 - 1
-      ),
-      // Greater than startPages
-      this.boundaryCount + 2
-    )
-  }
-
-  getSibilingsEnd(): number {
-    const endPages = this.getEndPages()
-
-    return Math.min(
-      Math.max(
-        // Natural end
-        this.page + this.siblingCount,
-        // Upper boundary when page is low
-        this.boundaryCount + this.siblingCount * 2 + 2
-      ),
-      // Less than endPages
-      endPages.length > 0 ? endPages[0] - 2 : this.count - 1
-    )
-  }
-
-  getStartEllipsis(): number[] | string[] {
-    const siblingsStart = this.getSibilingsStart()
-
-    if (siblingsStart > this.boundaryCount + 2) {
-      return [PAGINATION_ITEM_TYPE.startEllipsis]
-    }
-
-    if (this.boundaryCount + 1 < this.count - this.boundaryCount) {
-      return [this.boundaryCount + 1]
-    }
-
-    return []
-  }
-
-  getEndEllipsis(): number[] | string[] {
-    const siblingsEnd = this.getSibilingsEnd()
-
-    if (siblingsEnd < this.count - this.boundaryCount - 1) {
-      return [PAGINATION_ITEM_TYPE.endEllipsis]
-    }
-
-    if (this.count - this.boundaryCount > this.boundaryCount) {
-      return [this.count - this.boundaryCount]
-    }
-
-    return []
-  }
-}

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,29 +0,0 @@
-import React, { useState } from 'react'
-import Pagination from './Pagination'
-import type { Story, Meta } from '@storybook/react'
-
-import type { PaginationProps } from './Pagination.types'
-
-export default {
-  title: 'Components/Pagination',
-  component: Pagination,
-  argTypes: {},
-} as Meta
-
-export const Playground: Story<PaginationProps> = (args: PaginationProps) => {
-  const [page, setPage] = useState(args.page)
-
-  return (
-    <div className="flex flex-row space-x-2">
-      <Pagination {...args} onChange={({ page }) => setPage(page)} page={page} />
-    </div>
-  )
-}
-
-Playground.args = {
-  boundaryCount: 1,
-  count: 10,
-  disabled: false,
-  page: 1,
-  siblingCount: 1,
-}

package/src/components/Pagination/Pagination.test.tsx

@@ -1,102 +0,0 @@
-import userEvent from '@testing-library/user-event'
-import React from 'react'
-
-import renderer, { screen, fire } from '../../tests/renderer'
-
-import Pagination from './Pagination'
-import type { PaginationProps } from './Pagination.types'
-
-describe('Pagination', () => {
-  const setup = (overrides: PaginationProps) => renderer(<Pagination {...overrides} />).render()
-
-  describe('Previous button', () => {
-    const props = {
-      page: 1,
-      count: 5,
-      onChange: jest.fn(),
-    }
-
-    it('disables button when the first page is selected', () => {
-      setup(props)
-
-      expect(screen.getByRole('button', { name: /go to previous page/i })).toBeDisabled()
-      expect(screen.getByRole('button', { name: /go to next page/i })).toBeEnabled()
-    })
-
-    it('calls onChange properly', () => {
-      setup({ ...props, page: 2 })
-
-      fire.click(screen.getByRole('button', { name: /go to previous page/i }))
-      expect(props.onChange).toHaveBeenCalledWith({ page: 1 })
-    })
-  })
-
-  describe('Next button', () => {
-    const props = {
-      page: 5,
-      count: 5,
-      onChange: jest.fn(),
-    }
-
-    it('disables button when the last page is selected', () => {
-      setup(props)
-
-      expect(screen.getByRole('button', { name: /go to next page/i })).toBeDisabled()
-      expect(screen.getByRole('button', { name: /go to previous page/i })).toBeEnabled()
-    })
-
-    it('calls onChange properly', () => {
-      setup({ ...props, page: 4 })
-
-      fire.click(screen.getByRole('button', { name: /go to next page/i }))
-      expect(props.onChange).toHaveBeenCalledWith({ page: 5 })
-    })
-  })
-
-  describe('Pages buttons', () => {
-    const props = {
-      page: 1,
-      count: 7,
-      onChange: jest.fn(),
-    }
-
-    it('renders correctly', () => {
-      setup(props)
-
-      for (let page = 1; page <= props.count; page++) {
-        screen.getByRole('button', { name: `Go to page ${page}` })
-      }
-    })
-
-    it('renders ellipsis correctly', () => {
-      // ['previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next']
-      const expectedButtonsNames = [
-        'Go to previous page',
-        'Go to page 1',
-        'Go to page 3',
-        'Go to page 4',
-        'Go to page 5',
-        'Go to page 6',
-        'Go to page 7',
-        'Go to page 10',
-        'Go to next page',
-      ]
-      setup({ ...props, count: 10, page: 5 })
-
-      expect(screen.getAllByText('...')).toHaveLength(2)
-
-      expectedButtonsNames.forEach((buttonName) => screen.getByRole('button', { name: buttonName }))
-    })
-
-    it('calls onChange properly when clicks at ellipsis buttons', () => {
-      // ['previous', 1, 'ellipsis', 9, 10, 11, 'ellipsis', 20, 'next']
-      setup({ ...props, count: 20, page: 10 })
-
-      userEvent.click(screen.getAllByText('...')[0])
-      expect(props.onChange).toBeCalledWith({ page: 8 })
-
-      userEvent.click(screen.getAllByText('...')[1])
-      expect(props.onChange).toBeCalledWith({ page: 12 })
-    })
-  })
-})

package/src/components/Pagination/Pagination.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-
-import { Layout } from 'components/Layout'
-
-import PaginationItem from './PaginationItem'
-import usePagination from './usePagination'
-
-import type { PaginationProps } from './Pagination.types'
-
-function Pagination(props: PaginationProps): JSX.Element {
-  const {
-    boundaryCount = 1,
-    count,
-    disabled = false,
-    onChange,
-    page,
-    siblingCount = 1,
-    ...others
-  } = props
-
-  const items = usePagination({ boundaryCount, count, disabled, onChange, page, siblingCount })
-
-  return (
-    <nav aria-label="pagination navigation" {...others}>
-      <Layout.Group space="none" align="center">
-        {items.map((item) => (
-          <PaginationItem {...item} key={`${item.itemType}${item.page || ''}`} />
-        ))}
-      </Layout.Group>
-    </nav>
-  )
-}
-
-export default Pagination

package/src/components/Pagination/Pagination.types.ts

@@ -1,55 +0,0 @@
-import type { HTMLAttributes } from 'react'
-
-import type { ButtonProps } from 'components/Button'
-
-export type PaginationProps = Omit<HTMLAttributes<HTMLElement>, 'onChange'> & {
-  /**
-   * Number of pages displayed before the ellipsis
-   */
-  boundaryCount?: number
-  /**
-   * The total number of pages to be shown
-   */
-  count: number
-  /**
-   * Controls if pages button should be disabled or not
-   */
-  disabled?: boolean
-  /**
-   * Handler called every page change
-   */
-  onChange: ({ page }: { page: number }) => void
-  /**
-   * The current page number
-   */
-  page: number
-  /**
-   * Number of pages displayed next to the current page
-   */
-  siblingCount?: number
-}
-
-export type usePaginationProps = Pick<
-  PaginationProps,
-  'boundaryCount' | 'count' | 'disabled' | 'onChange' | 'page' | 'siblingCount'
->
-
-export type usePaginationReturn = {
-  'aria-current'?: boolean | undefined
-  disabled: boolean
-  itemType: string
-  onClick: () => void
-  page: number | null
-}
-
-export type PaginationItemProps = ButtonProps & {
-  itemType: string
-  page: number | null
-}
-
-export type PaginationHelperArgs = {
-  boundaryCount: number
-  count: number
-  page: number
-  siblingCount: number
-}