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

package/src/components/Dialog/Dialog.test.tsx

@@ -1,74 +0,0 @@
-import React, { Fragment } from 'react'
-
-import Dialog from './Dialog'
-import generator from '../../tests/generator'
-import renderer, { screen } from '../../tests/renderer'
-import type { DialogProps } from './Dialog'
-
-const setup = (props: DialogProps) => renderer(<Dialog {...props} />).render()
-
-describe('Dialog', () => {
-  it('renders with default Confirm button label', () => {
-    const props: DialogProps = {
-      open: true,
-      children: (
-        <Fragment>
-          <Dialog.ActionConfirm data-testid="dialog-confirm-action" onConfirm={jest.fn()} />
-        </Fragment>
-      ),
-    }
-
-    setup(props)
-    expect(screen.getByTestId('dialog-confirm-action')).toHaveTextContent('CONFIRM')
-  })
-
-  it('renders with default Cancel button label', () => {
-    const props: DialogProps = {
-      open: true,
-      children: (
-        <Fragment>
-          <Dialog.ActionCancel data-testid="dialog-cancel-action" onCancel={jest.fn()} />
-        </Fragment>
-      ),
-    }
-
-    setup(props)
-    expect(screen.getByTestId('dialog-cancel-action')).toHaveTextContent('CANCEL')
-  })
-
-  it('renders with custom Confirm button label', () => {
-    const label = generator.word()
-    const props: DialogProps = {
-      open: true,
-      children: (
-        <Fragment>
-          <Dialog.ActionConfirm data-testid="dialog-confirm-action" onConfirm={jest.fn()}>
-            {label}
-          </Dialog.ActionConfirm>
-        </Fragment>
-      ),
-    }
-
-    setup(props)
-    expect(screen.getByTestId('dialog-confirm-action')).not.toHaveTextContent('CONFIRM')
-    expect(screen.getByTestId('dialog-confirm-action')).toHaveTextContent(label)
-  })
-
-  it('renders with custom Cancel button label', () => {
-    const label = generator.word()
-    const props: DialogProps = {
-      open: true,
-      children: (
-        <Fragment>
-          <Dialog.ActionCancel data-testid="dialog-cancel-action" onCancel={jest.fn()}>
-            {label}
-          </Dialog.ActionCancel>
-        </Fragment>
-      ),
-    }
-
-    setup(props)
-    expect(screen.getByTestId('dialog-cancel-action')).not.toHaveTextContent('CANCEL')
-    expect(screen.getByTestId('dialog-cancel-action')).toHaveTextContent(label)
-  })
-})

package/src/components/Dialog/Dialog.tsx

@@ -1,139 +0,0 @@
-import React, { ReactNode } from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-
-import { Modal } from '../Modal'
-import { Button } from '../Button'
-import type { ButtonProps } from '../Button'
-import conditional, { whenProps } from 'tools/conditional'
-import rem from 'utils/toolset/rem'
-
-interface WithScaleProps {
-  scale?: 'small' | 'default' | 'large'
-}
-
-export interface DialogProps extends WithScaleProps {
-  className?: string
-  id?: string
-  open: boolean
-  children: ReactNode
-  onOverlayClick?: () => void
-}
-
-const Header = styled.h1`
-  padding-bottom: ${token('space-s')};
-
-  color: ${token('dialog-header-color')};
-  font-weight: ${token('font-weight-bold')};
-  font-size: ${token('font-size-2')};
-  line-height: ${token('font-height-2')};
-  text-align: center;
-
-  border-bottom: 1px solid ${token('dialog-header-border-color')};
-`
-const Body = styled.div`
-  margin-top: ${token('space-l')};
-  margin-bottom: ${token('space-l')};
-
-  color: ${token('dialog-body-font-color')};
-  font-size: ${token('font-size-4')};
-  line-height: ${token('font-height-3')};
-  text-align: center;
-`
-
-const ActionWrapper = styled.div`
-  button {
-    width: 100%;
-    margin-bottom: ${token('space-s')};
-  }
-`
-
-const Close = styled(Modal.Close)`
-  top: ${token('space-xl')};
-  right: ${rem('36px')};
-`
-
-const StyledDialogActions = styled.div<{ $scale: string; $direction: string }>`
-  display: flex;
-  flex-flow: ${conditional({
-    'row-reverse': whenProps({ $direction: 'horizontal' }),
-    column: whenProps({ $direction: 'vertical' }),
-  })};
-  justify-content: ${conditional({
-    center: whenProps({ $scale: 'small' }),
-    end: whenProps({ $scale: ['default', 'large'] }),
-  })};
-
-  ${ActionWrapper}:last-child {
-    margin-right: ${conditional({
-      'space-m': whenProps({ $direction: 'horizontal' }),
-      initial: whenProps({ $direction: 'vertical' }),
-    })}};
-  }
-`
-
-function DialogActions({
-  scale = 'default',
-  direction = 'vertical',
-  children,
-}: {
-  scale?: 'small' | 'default' | 'large'
-  direction?: 'vertical' | 'horizontal'
-  children: ReactNode
-}) {
-  return (
-    <StyledDialogActions $scale={scale} $direction={direction}>
-      {children}
-    </StyledDialogActions>
-  )
-}
-
-export interface DialogActionConfirmProps extends Omit<ButtonProps, 'onClick' | 'variant'> {
-  onConfirm: () => void
-}
-
-function DialogActionConfirm({
-  onConfirm = () => void 0,
-  children = 'CONFIRM',
-  ...others
-}: DialogActionConfirmProps) {
-  return (
-    <ActionWrapper>
-      <Button {...others} onClick={onConfirm} variant="primary">
-        {children}
-      </Button>
-    </ActionWrapper>
-  )
-}
-
-export interface DialogActionCancelProps extends Omit<ButtonProps, 'onClick' | 'variant'> {
-  onCancel: () => void
-}
-
-function DialogActionCancel({
-  onCancel = () => void 0,
-  children = 'CANCEL',
-  ...others
-}: DialogActionCancelProps) {
-  return (
-    <ActionWrapper>
-      <Button {...others} onClick={onCancel} variant="secondary">
-        {children}
-      </Button>
-    </ActionWrapper>
-  )
-}
-
-function Dialog({ scale = 'default', open, ...others }: DialogProps): JSX.Element {
-  return <Modal open={open} scale={scale} {...others} />
-}
-
-Dialog.Header = Header
-Dialog.Body = Body
-Dialog.ActionConfirm = DialogActionConfirm
-Dialog.ActionCancel = DialogActionCancel
-Dialog.Actions = DialogActions
-Dialog.Close = Close
-
-export default Dialog

package/src/components/Dialog/index.tsx

@@ -1,4 +0,0 @@
-export { default as Dialog } from './Dialog'
-export type { DialogProps, DialogActionConfirmProps, DialogActionCancelProps } from './Dialog'
-export { default as useDialog } from './useDialog'
-export type { useDialogProps } from './useDialog'

package/src/components/Dialog/useDialog.tsx

@@ -1,59 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-
-export interface useDialogProps {
-  open: boolean
-  onOpen?: () => void
-  onClose?: () => void
-}
-
-function useDialog({ open: openProp, onOpen, onClose }: useDialogProps): {
-  open: boolean
-  show: () => void
-  hide: () => void
-  toggle: () => void
-} {
-  const [open, setOpen] = useState(openProp)
-
-  const show = useCallback(
-    function show() {
-      setOpen(true)
-      onOpen?.()
-    },
-    [onOpen]
-  )
-
-  const hide = useCallback(
-    function hide() {
-      setOpen(false)
-      onClose?.()
-    },
-    [onClose]
-  )
-
-  const toggle = useCallback(
-    function toggle() {
-      if (open) {
-        hide()
-      } else {
-        show()
-      }
-    },
-    [hide, open, show]
-  )
-
-  useEffect(
-    function updateState() {
-      setOpen(openProp)
-    },
-    [openProp]
-  )
-
-  return {
-    open,
-    show,
-    hide,
-    toggle,
-  }
-}
-
-export default useDialog

package/src/components/DragDropFile/DragDropFile.context.tsx

@@ -1,39 +0,0 @@
-import React, { createContext, useContext, useCallback, useMemo } from 'react'
-
-import type { DragDropFileContextValue, DragDropFileProviderProps, FileWithStatus } from './types'
-
-export const DragDropFileContext = createContext<DragDropFileContextValue | undefined>(undefined)
-
-export const DragDropFileProvider = ({
-  fileList,
-  onFilesAdded,
-  onFileRemoved,
-  onRetryUpload,
-  children,
-}: DragDropFileProviderProps): JSX.Element => {
-  const onRemoveFile = useCallback(
-    (removedItem: FileWithStatus, index: number) => {
-      onFileRemoved([...fileList.slice(0, index), ...fileList.slice(index + 1)], removedItem, index)
-    },
-    [fileList]
-  )
-
-  const contextValue = useMemo(
-    () => ({ fileList, onFilesAdded, onRemoveFile, onRetryUpload }),
-    [fileList, onFilesAdded, onRemoveFile, onRetryUpload]
-  )
-
-  return (
-    <DragDropFileContext.Provider value={contextValue}>{children}</DragDropFileContext.Provider>
-  )
-}
-
-export const useDragDropFileContext = (): DragDropFileContextValue => {
-  const context = useContext(DragDropFileContext)
-
-  if (!context) {
-    throw new Error('useDragDropFileContext must be used within an DragDropFileProvider')
-  }
-
-  return context
-}

package/src/components/DragDropFile/DragDropFile.stories.tsx

@@ -1,183 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import type { Meta } from '@storybook/react'
-
-import { ErrorMessage } from 'components/ErrorMessage'
-
-import type { DropZoneProps, FileWithStatus } from './types'
-import { DragDropFileProvider } from './DragDropFile.context'
-import DragDropFile from './DragDropFile'
-
-import { fileListMock, successFileItem, errorFileItem } from './mocks'
-
-export default {
-  title: 'Components/DragDropFile',
-  component: DragDropFile,
-  argTypes: {
-    hint: {
-      control: {
-        type: 'text',
-      },
-    },
-    multiple: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    accept: {
-      control: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    error: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    errorMessage: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-} as Meta
-
-type PlaygroundProps = DropZoneProps & { errorMessage?: string }
-
-export function Playground({ errorMessage, ...args }: PlaygroundProps): JSX.Element {
-  const [fileList, setFileList] = useState<FileWithStatus[]>([])
-
-  const onFilesAdded = (newFiles: File[]) => {
-    setFileList([...fileList, ...newFiles.map((file) => ({ file, status: 'success' as const }))])
-  }
-
-  const onFileRemoved = (newList: FileWithStatus[]) => {
-    setFileList(newList)
-  }
-
-  return (
-    <div className="flex flex-col">
-      <DragDropFileProvider
-        fileList={fileList}
-        onFilesAdded={onFilesAdded}
-        onFileRemoved={onFileRemoved}
-      >
-        <DragDropFile.Wrapper>
-          <DragDropFile.DropZone {...args} />
-          <ErrorMessage>{errorMessage}</ErrorMessage>
-          <DragDropFile.FileList />
-        </DragDropFile.Wrapper>
-      </DragDropFileProvider>
-    </div>
-  )
-}
-
-Playground.args = {
-  hint: 'File rule example: You can attach up to 3 files with size limit of 5mb each.',
-  accept: 'image/*',
-  multiple: true,
-}
-
-const loadingFileList = fileListMock.map((item) => ({ ...item, status: 'loading' as const }))
-
-export function WithInitialFileList({ errorMessage, ...args }: PlaygroundProps): JSX.Element {
-  const [fileList, setFileList] = useState<FileWithStatus[]>(loadingFileList)
-
-  useEffect(() => {
-    // Here we're simulating that the status of the third element changes after 1 second.
-    window.setTimeout(() => {
-      setFileList((prevList) => [...prevList.slice(0, 2), successFileItem])
-    }, 1000)
-    // Here we're simulating that the status of the second element changes after 2 seconds.
-    window.setTimeout(() => {
-      setFileList((prevList) => [...prevList.slice(0, 1), errorFileItem, ...prevList.slice(2)])
-    }, 2000)
-  }, [])
-
-  const onFilesAdded = (newFiles: File[]) => {
-    setFileList([...fileList, ...newFiles.map((file) => ({ file, status: 'success' as const }))])
-  }
-
-  const onFileRemoved = (newList: FileWithStatus[]) => {
-    setFileList(newList)
-  }
-
-  const onRetryUpload = (item: FileWithStatus, index: number) => {
-    alert(`Retry upload for file ${item.file.name} at index ${index}`)
-  }
-
-  return (
-    <div className="flex flex-col">
-      <DragDropFileProvider
-        fileList={fileList}
-        onFilesAdded={onFilesAdded}
-        onFileRemoved={onFileRemoved}
-        onRetryUpload={onRetryUpload}
-      >
-        <DragDropFile.Wrapper>
-          <DragDropFile.DropZone {...args} />
-          <ErrorMessage>{errorMessage}</ErrorMessage>
-          <DragDropFile.FileList />
-        </DragDropFile.Wrapper>
-      </DragDropFileProvider>
-    </div>
-  )
-}
-
-WithInitialFileList.args = {
-  hint: 'File rule example: You can attach up to 3 files with size limit of 5mb each.',
-  accept: 'image/*',
-  multiple: true,
-}
-
-export function GeneralError({ errorMessage, ...args }: PlaygroundProps): JSX.Element {
-  const [fileList, setFileList] = useState<FileWithStatus[]>([])
-
-  const onFilesAdded = (newFiles: File[]) => {
-    setFileList([
-      ...fileList,
-      ...newFiles.map((file) => ({
-        file,
-        status: 'error' as const,
-        errorMessage: 'Failed: File size exceeded.',
-      })),
-    ])
-  }
-
-  const onFileRemoved = (newList: FileWithStatus[]) => {
-    setFileList(newList)
-  }
-
-  const onRetryUpload = (item: FileWithStatus, index: number) => {
-    alert(`Retry upload for file ${item.file.name} at index ${index}`)
-  }
-
-  return (
-    <div className="flex flex-col">
-      <DragDropFileProvider
-        fileList={fileList}
-        onFilesAdded={onFilesAdded}
-        onFileRemoved={onFileRemoved}
-        onRetryUpload={onRetryUpload}
-      >
-        <DragDropFile.Wrapper>
-          <DragDropFile.DropZone {...args} />
-          <ErrorMessage>{errorMessage}</ErrorMessage>
-          <DragDropFile.FileList />
-        </DragDropFile.Wrapper>
-      </DragDropFileProvider>
-    </div>
-  )
-}
-
-GeneralError.args = {
-  hint: 'File rule example: You can attach up to 3 files with size limit of 5mb each.',
-  accept: 'image/*',
-  multiple: true,
-  error: true,
-  errorMessage: 'File number exceeded: You can upload up to 3 files',
-}

package/src/components/DragDropFile/DragDropFile.tsx

@@ -1,11 +0,0 @@
-import Wrapper from './components/Wrapper'
-import DropZone from './components/DropZone'
-import FileList from './components/FileList'
-
-const DragDropFile = (): null => null
-
-DragDropFile.Wrapper = Wrapper
-DragDropFile.DropZone = DropZone
-DragDropFile.FileList = FileList
-
-export default DragDropFile

package/src/components/DragDropFile/components/DropZone.test.tsx

@@ -1,108 +0,0 @@
-import React from 'react'
-import { screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-
-import generator from '../../../tests/generator'
-import { renderWithDragDropFileProvider, DragDropFileEvent } from '../../../testing'
-
-import type { DropZoneProps } from '../types'
-import { filesMock } from '../mocks'
-import DropZone from './DropZone'
-
-const onFilesAdded = jest.fn()
-
-const dropZonePropsMock: DropZoneProps = {
-  'aria-label': 'Drag and drop file input',
-  hint: 'File rule example: You can attach up to 3 files with size limit of 5mb each.',
-  multiple: true,
-  accept: 'image/*',
-  disabled: false,
-  error: false,
-}
-
-const setup = (dropZonePropsOverrides?: Partial<DropZoneProps>) =>
-  renderWithDragDropFileProvider(<DropZone {...dropZonePropsMock} {...dropZonePropsOverrides} />, {
-    onFilesAdded,
-  })
-
-const getInput = () => screen.getByLabelText(dropZonePropsMock['aria-label']!) as HTMLInputElement
-
-describe('<DragDropFile.DropZone />', () => {
-  it.each`
-    multiple | expectedText
-    ${false} | ${'Drag and drop your file here or'}
-    ${true}  | ${'Drag and drop your files here or'}
-  `('renders correctly when multiple is $multiple', ({ multiple, expectedText }) => {
-    const props = { multiple }
-
-    setup(props)
-
-    expect(screen.queryByText(expectedText)).toBeVisible()
-  })
-
-  it('renders the provided hint correctly', () => {
-    const props = { hint: generator.sentence() }
-
-    setup(props)
-
-    expect(screen.queryByText(props.hint)).toBeVisible()
-  })
-
-  it('renders a custom content if provided considering the isDragging state', () => {
-    const renderCustomContent: DropZoneProps['renderCustomContent'] = ({ isDragging }) => (
-      <div>{isDragging ? 'Is dragging.' : 'Is not dragging.'}</div>
-    )
-
-    setup({ renderCustomContent })
-
-    expect(screen.queryByText('Is not dragging.')).toBeVisible()
-
-    DragDropFileEvent.dragOver(getInput())
-
-    expect(screen.queryByText('Is dragging.')).toBeVisible()
-  })
-
-  it('renders correctly when disabled', () => {
-    const props = { disabled: true }
-
-    setup(props)
-
-    expect(screen.getByRole('button')).toHaveClass('is-disabled')
-  })
-
-  it('calls onFilesAdded with a single uploaded file', () => {
-    setup({ multiple: false })
-
-    const input = getInput()
-
-    userEvent.upload(input, filesMock[0])
-
-    expect(onFilesAdded).toHaveBeenCalledWith(filesMock.slice(0, 1))
-  })
-
-  it('calls onFilesAdded with multiple uploaded files', () => {
-    setup({ multiple: true })
-
-    const input = getInput()
-
-    userEvent.upload(input, filesMock)
-
-    expect(onFilesAdded).toHaveBeenCalledWith(filesMock)
-  })
-
-  it('calls onFilesAdded when files are dropped in the drop zone', () => {
-    setup({ multiple: true })
-
-    DragDropFileEvent.dropFiles(getInput(), filesMock)
-
-    expect(onFilesAdded).toHaveBeenCalledWith(filesMock)
-  })
-
-  it('does not call onFilesAdded when files are dropped in the drop zone and disabled is true', () => {
-    setup({ multiple: true, disabled: true })
-
-    DragDropFileEvent.dropFiles(getInput(), filesMock)
-
-    expect(onFilesAdded).not.toHaveBeenCalled()
-  })
-})