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

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

@@ -1,145 +0,0 @@
-import React, { useRef, useState, useCallback } from 'react'
-import clsx from 'clsx'
-
-import toArray from 'utils/toolset/toArray'
-import KeyboardKey from 'utils/toolset/keyboard'
-import pluralize from 'utils/toolset/pluralize'
-
-import { Text } from 'components/Text'
-
-import { useDragDropFileContext } from '../DragDropFile.context'
-
-import { DropZoneWrapper, HiddenInput, UploadIcon } from '../styles'
-import type { DropZoneProps } from '../types'
-
-const DropZone = ({
-  className,
-  hint,
-  multiple = false,
-  accept,
-  disabled = false,
-  error = false,
-  renderCustomContent,
-  ...props
-}: DropZoneProps): JSX.Element => {
-  const { onFilesAdded } = useDragDropFileContext()
-
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [isDragging, setIsDragging] = useState(false)
-
-  const onChangeInput = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      event.preventDefault()
-      event.stopPropagation()
-
-      onFilesAdded(Array.from(event.currentTarget.files || []))
-    },
-    [onFilesAdded]
-  )
-
-  const onKeyPress = useCallback(
-    (event: React.KeyboardEvent) => {
-      if (!disabled && inputRef.current && KeyboardKey(event).is('ENTER')) {
-        inputRef.current.click()
-      }
-    },
-    [disabled, inputRef]
-  )
-
-  const onDrop = useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
-      event.preventDefault()
-      event.stopPropagation()
-
-      if (!disabled) {
-        if (isDragging) {
-          setIsDragging(false)
-        }
-
-        onFilesAdded(Array.from(event.dataTransfer.files || []))
-      }
-    },
-    [disabled, isDragging, onFilesAdded]
-  )
-
-  const onDragStart = useCallback((event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault()
-  }, [])
-
-  const onDragOver = useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
-      event.preventDefault()
-
-      if (!disabled && !isDragging) {
-        setIsDragging(true)
-      }
-    },
-    [disabled, isDragging]
-  )
-
-  const onDragLeave = useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
-      event.preventDefault()
-
-      if (isDragging) {
-        setIsDragging(false)
-      }
-    },
-    [isDragging]
-  )
-
-  const renderDefaultContent = useCallback(
-    () => (
-      <>
-        <UploadIcon name="upload" size={48} />
-        <Text variant="body" color="color-neutral-darker">
-          {`Drag and drop your ${pluralize(Number(!multiple), 'files', 'file')} here or `}
-          <Text as="a" color={disabled ? 'color-neutral' : 'color-accent'} variant="body-bold">
-            {`Browse ${pluralize(Number(!multiple), 'Files', 'File')}`}
-          </Text>
-        </Text>
-        {hint && (
-          <Text variant="caption" color="color-neutral-dark">
-            {hint}
-          </Text>
-        )}
-      </>
-    ),
-    [multiple, disabled, hint]
-  )
-
-  return (
-    <DropZoneWrapper
-      space="m"
-      align="center"
-      justify="center"
-      className={clsx(className, {
-        'is-disabled': disabled,
-        'is-focused': isDragging,
-      })}
-      disabled={disabled}
-      error={error}
-      tabIndex={0}
-      role="button"
-      aria-pressed="false"
-      onKeyPress={onKeyPress}
-      onDrop={onDrop}
-      onDragStart={onDragStart}
-      onDragOver={onDragOver}
-      onDragLeave={onDragLeave}
-    >
-      {(renderCustomContent || renderDefaultContent)({ isDragging })}
-      <HiddenInput
-        onInput={onChangeInput}
-        type="file"
-        ref={inputRef}
-        accept={accept ? toArray(accept).join(',') : undefined}
-        disabled={disabled}
-        multiple={multiple}
-        {...props}
-      />
-    </DropZoneWrapper>
-  )
-}
-
-export default DropZone

package/src/components/DragDropFile/components/FileItem.tsx

@@ -1,117 +0,0 @@
-import React from 'react'
-
-import formatBytes from 'utils/toolset/formatBytes'
-
-import { Stack, Group } from 'components/Layout'
-import { Bar } from 'components/Loaders/LoadingBar'
-import { Button } from 'components/Button'
-import { Icon } from 'components/Icon'
-import { Text } from 'components/Text'
-
-import type { FileItemProps, FileStatus } from '../types'
-import { Divider } from '../styles'
-
-const FileName = ({ file }: Pick<FileItemProps, 'file'>): JSX.Element =>
-  file.size ? (
-    <Group space="m" align="center">
-      <Text variant="caption">{file.name}</Text>
-      <Text variant="number-sm">{formatBytes(file.size)}</Text>
-    </Group>
-  ) : (
-    <Text variant="caption">{file.name}</Text>
-  )
-
-type FileActionButtonProps = Pick<FileItemProps, 'onRemove' | 'onRetry' | 'disabled'> & {
-  type: 'remove' | 'retry'
-}
-
-const FileActionButton = ({
-  type,
-  onRemove,
-  onRetry,
-  disabled,
-}: FileActionButtonProps): JSX.Element => {
-  const { iconName, label, onClick } =
-    type === 'remove'
-      ? {
-          iconName: 'close',
-          label: 'REMOVE',
-          onClick: onRemove,
-        }
-      : {
-          iconName: 'refresh',
-          label: 'RETRY',
-          onClick: onRetry,
-        }
-
-  return (
-    <Button
-      scale="small"
-      variant="tertiary"
-      leading={<Icon name={iconName} size={12} />}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      {label}
-    </Button>
-  )
-}
-
-const LoadingFile = ({ file, ...actionProps }: FileItemProps): JSX.Element => (
-  <Stack as="li" space="s">
-    <Group align="center" justify="space-between">
-      <FileName file={file} />
-      <FileActionButton type="remove" {...actionProps} />
-    </Group>
-    <Bar />
-  </Stack>
-)
-
-const ErrorFile = ({ file, errorMessage, ...actionProps }: FileItemProps): JSX.Element => (
-  <Stack as="li" space="s">
-    <Group align="center" justify="space-between">
-      <Group space="s" align="center">
-        <Icon name="warning" size={12} />
-        <FileName file={file} />
-      </Group>
-      {actionProps.onRetry ? (
-        <Group space="none" align="center">
-          <FileActionButton type="retry" {...actionProps} />
-          <Divider />
-          <FileActionButton type="remove" {...actionProps} />
-        </Group>
-      ) : (
-        <FileActionButton type="remove" {...actionProps} />
-      )}
-    </Group>
-    {errorMessage && (
-      <Text variant="caption" color="color-danger">
-        {errorMessage}
-      </Text>
-    )}
-  </Stack>
-)
-
-const SuccessFile = ({ file, ...actionProps }: FileItemProps): JSX.Element => (
-  <Group as="li" align="center" justify="space-between">
-    <Group space="s" align="center">
-      <Icon name="check" size={12} />
-      <FileName file={file} />
-    </Group>
-    <FileActionButton type="remove" {...actionProps} />
-  </Group>
-)
-
-const FILE_ITEM_BY_STATUS: Record<FileStatus, (props: FileItemProps) => JSX.Element> = {
-  loading: LoadingFile,
-  error: ErrorFile,
-  success: SuccessFile,
-}
-
-const FileItem = (props: FileItemProps): JSX.Element => {
-  const FileItemComponent = FILE_ITEM_BY_STATUS[props.status]
-
-  return <FileItemComponent {...props} />
-}
-
-export default FileItem

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

@@ -1,119 +0,0 @@
-import React from 'react'
-import { screen, within } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-
-import formatBytes from 'utils/toolset/formatBytes'
-
-import { renderWithDragDropFileProvider } from '../../../testing'
-
-import type { FileListProps, DragDropFileContextValue } from '../types'
-import { fileListMock, loadingFileItem, errorFileItem, successFileItem } from '../mocks'
-import FileList from './FileList'
-
-const onRemoveFile = jest.fn()
-const onRetryUpload = jest.fn()
-
-const setup = (
-  propsOverrides?: FileListProps,
-  contextValueOverrides?: Partial<DragDropFileContextValue>
-) =>
-  renderWithDragDropFileProvider(<FileList {...propsOverrides} />, {
-    fileList: fileListMock,
-    onRemoveFile,
-    onRetryUpload,
-    ...contextValueOverrides,
-  })
-
-describe('<DragDropFile.FileList />', () => {
-  it('does not render if the files list is empty', () => {
-    const contextValue = { fileList: [] }
-
-    const { container } = setup({}, contextValue)
-
-    expect(container).toBeEmptyDOMElement()
-  })
-
-  it('renders the number of files with success status as a title', () => {
-    const contextValue = { fileList: [loadingFileItem, errorFileItem, successFileItem] }
-
-    setup({}, contextValue)
-
-    expect(screen.queryByText('1 File uploaded')).toBeVisible()
-  })
-
-  it('renders the name of every file provided in a list item', () => {
-    setup()
-
-    const lis = screen.getAllByRole('listitem')
-
-    for (let i = 0; i < fileListMock.length; i++) {
-      const file = fileListMock[i].file
-
-      expect(within(lis[i]).getByText(file.name)).toBeVisible()
-    }
-  })
-
-  it('renders the formatted size if available of every file provided in a list item', () => {
-    const filesWithSize = fileListMock.filter((item) => !!item.file.size)
-
-    setup({}, { fileList: filesWithSize })
-
-    const lis = screen.getAllByRole('listitem')
-
-    for (let i = 0; i < filesWithSize.length; i++) {
-      const file = filesWithSize[i].file
-
-      expect(within(lis[i]).getByText(formatBytes(file.size))).toBeVisible()
-    }
-  })
-
-  it('calls onRemoveFile on remove button click on each file item', () => {
-    setup()
-
-    const lis = screen.getAllByRole('listitem')
-
-    for (let i = 0; i < fileListMock.length; i++) {
-      const fileItem = fileListMock[i]
-
-      userEvent.click(within(lis[i]).getByRole('button', { name: 'REMOVE' }))
-
-      expect(onRemoveFile).toHaveBeenCalledWith(fileItem, i)
-    }
-  })
-
-  it('disables the remove button on each file item if disabled is true', () => {
-    setup({ disabled: true })
-
-    const lis = screen.getAllByRole('listitem')
-
-    for (let i = 0; i < fileListMock.length; i++) {
-      expect(within(lis[i]).getByRole('button', { name: 'REMOVE' })).toBeDisabled()
-    }
-  })
-
-  it('does not render a retry button on error items if onRetryUpload is not provided', () => {
-    const contextValue = { onRetryUpload: undefined, fileList: [errorFileItem] }
-
-    setup({}, contextValue)
-
-    expect(screen.queryByRole('button', { name: 'RETRY' })).not.toBeInTheDocument()
-  })
-
-  it('calls onRetryUpload on retry button click on each file item with error status', () => {
-    setup()
-
-    const lis = screen.getAllByRole('listitem')
-
-    for (let i = 0; i < fileListMock.length; i++) {
-      const fileItem = fileListMock[i]
-
-      if (fileItem.status === 'error') {
-        userEvent.click(within(lis[i]).getByRole('button', { name: 'RETRY' }))
-
-        expect(onRetryUpload).toHaveBeenCalledWith(fileItem, i)
-      } else {
-        expect(within(lis[i]).queryByRole('button', { name: 'RETRY' })).not.toBeInTheDocument()
-      }
-    }
-  })
-})

package/src/components/DragDropFile/components/FileList.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-
-import isEmpty from 'utils/toolset/isEmpty'
-import pluralize from 'utils/toolset/pluralize'
-
-import { Stack } from 'components/Layout'
-import { Text } from 'components/Text'
-
-import { useDragDropFileContext } from '../DragDropFile.context'
-
-import type { FileListProps } from '../types'
-import { FileListUL } from '../styles'
-
-import FileItem from './FileItem'
-
-const FileList = ({ disabled, ...props }: FileListProps): JSX.Element | null => {
-  const { fileList, onRemoveFile, onRetryUpload } = useDragDropFileContext()
-
-  if (isEmpty(fileList)) {
-    return null
-  }
-
-  const uploadedFiles = fileList.filter((file) => file.status === 'success').length
-
-  return (
-    <Stack space="m" {...props}>
-      <Text variant="heading-sm-bold">{`${uploadedFiles} ${pluralize(
-        uploadedFiles,
-        'Files',
-        'File'
-      )} uploaded`}</Text>
-      <FileListUL space="m">
-        {fileList.map((item, index) => (
-          <FileItem
-            key={`file-${item.file.name}-${index}`}
-            disabled={disabled}
-            onRemove={() => onRemoveFile(item, index)}
-            onRetry={onRetryUpload ? () => onRetryUpload(item, index) : undefined}
-            {...item}
-          />
-        ))}
-      </FileListUL>
-    </Stack>
-  )
-}
-
-export default FileList

package/src/components/DragDropFile/components/Wrapper.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-
-import isEmpty from 'utils/toolset/isEmpty'
-
-import { useDragDropFileContext } from '../DragDropFile.context'
-import { DragDropFileWrapper } from '../styles'
-import type { WrapperProps } from '../types'
-
-/**
- * This is a `Stack` component customized with the needed spacing between the DragDropFile inner components
- */
-const Wrapper = ({ children, ...props }: WrapperProps) => {
-  const { fileList } = useDragDropFileContext()
-
-  return (
-    <DragDropFileWrapper space="l" withFileList={!isEmpty(fileList)} {...props}>
-      {children}
-    </DragDropFileWrapper>
-  )
-}
-
-export default Wrapper

package/src/components/DragDropFile/index.ts

@@ -1,9 +0,0 @@
-export { DragDropFileProvider, useDragDropFileContext } from './DragDropFile.context'
-export { default as DragDropFile } from './DragDropFile'
-export type {
-  FileStatus,
-  FileWithStatus,
-  DropZoneProps,
-  DragDropFileProviderProps,
-  DragDropFileContextValue,
-} from './types'

package/src/components/DragDropFile/mocks.ts

@@ -1,23 +0,0 @@
-import type { FileWithStatus } from './types'
-
-export const loadingFile = new File([''], 'loading-file.png')
-
-export const errorFile = new File([''], 'error-file.png')
-Object.defineProperty(errorFile, 'size', { value: 1024 * 1024 * 2 })
-
-export const successFile = new File([''], 'success-file.png')
-Object.defineProperty(successFile, 'size', { value: 420 })
-
-export const filesMock: File[] = [loadingFile, errorFile, successFile]
-
-export const loadingFileItem: FileWithStatus = { file: loadingFile, status: 'loading' }
-
-export const errorFileItem: FileWithStatus = {
-  file: errorFile,
-  status: 'error',
-  errorMessage: 'Failed: File size exceeded.',
-}
-
-export const successFileItem: FileWithStatus = { file: successFile, status: 'success' }
-
-export const fileListMock: FileWithStatus[] = [loadingFileItem, errorFileItem, successFileItem]

package/src/components/DragDropFile/styles.tsx

@@ -1,81 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { getToken } from 'theming'
-import conditional, { whenProps } from 'tools/conditional'
-import prop from 'tools/prop'
-import transition from 'styles/transition'
-import hoverable from 'styles/hoverable'
-import focusable from 'styles/focusable'
-import disableable from 'styles/disableable'
-import hidden from 'styles/hidden'
-
-import { StackProps, Stack } from 'components/Layout/Stack'
-import { Icon } from 'components/Icon'
-
-import type { DropZoneProps } from './types'
-
-export const DragDropFileWrapper = styled(Stack)<{ withFileList: boolean }>`
-  width: 100%;
-
-  & > label + p {
-    margin-top: ${conditional({
-      'space-m': whenProps({ withFileList: true }),
-      'space-l': whenProps({ withFileList: false }),
-    })};
-  }
-`
-
-export const DropZoneWrapper = styled((props: StackProps) => <Stack as="label" {...props} />)<
-  Pick<DropZoneProps, 'disabled' | 'error'>
->`
-  ${transition({ property: 'border-color, box-shadow, opacity' })}
-
-  cursor: pointer;
-
-  background-color: ${getToken('color-neutral-white')};
-  border-radius: ${getToken('border-radius-s')};
-  border: 2px dashed;
-  border-color: ${conditional({
-    'color-neutral-light': whenProps({ error: false }),
-    'color-danger': whenProps({ disabled: false, error: true }),
-  })};
-
-  padding: ${getToken('space-l')} ${getToken('space-3xl')};
-
-  text-align: center;
-
-  ${hoverable`
-    border-color: ${conditional({
-      'color-accent': whenProps({ disabled: false, error: false }),
-    })};
-  `}
-
-  ${focusable`
-    border-color: ${conditional({
-      'color-accent': whenProps({ disabled: false, error: false }),
-    })};
-    box-shadow: ${getToken('shadow-glow-primary')};
-  `}
-
-  ${disableable()}
-`
-
-export const HiddenInput = styled.input`
-  ${hidden()}
-`
-
-export const UploadIcon = styled(Icon)`
-  color: ${getToken('color-neutral')};
-`
-
-export const FileListUL = styled((props: StackProps) => <Stack as="ul" {...props} />)`
-  padding: 0;
-`
-
-export const Divider = styled.div`
-  width: 1px;
-  height: 16px;
-
-  background-color: ${getToken('color-neutral-darker')};
-`

package/src/components/DragDropFile/types.ts

@@ -1,85 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react'
-
-import type { StackProps } from 'components/Layout/Stack'
-
-export type WrapperProps = Partial<StackProps>
-
-export type DropZoneProps = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> & {
-  /**
-   * Optional hint to be rendered below the main call to action text.
-   */
-  hint?: string
-  /**
-   * Whether the input should allow multiple files.
-   */
-  multiple?: boolean
-  /**
-   * List (or single string) of allowed file formats.
-   */
-  accept?: string | string[]
-  /**
-   * Disables the drop zone.
-   */
-  disabled?: boolean
-  /**
-   * Applies error styles to the drop zone wrapper.
-   */
-  error?: boolean
-  /**
-   * Useful to render custom content inside the dropzone.
-   * If provided, the icon, call to action, and hint won't be rendered.
-   */
-  renderCustomContent?: (params: { isDragging: boolean }) => JSX.Element
-}
-
-export type FileStatus = 'loading' | 'error' | 'success'
-
-export type FileWithStatus = {
-  file: File
-  status: FileStatus
-  errorMessage?: string
-}
-
-export type FileItemProps = FileWithStatus & {
-  onRemove: () => void
-  onRetry?: () => void
-  disabled?: boolean
-}
-
-export type FileListProps = Partial<StackProps> & {
-  /**
-   * Disables the buttons within the file items.
-   */
-  disabled?: boolean
-}
-
-export type DragDropFileProviderProps = {
-  /**
-   * List of items including the file and its status.
-   */
-  fileList: FileWithStatus[]
-  /**
-   * Function that will be triggered when new files are added to the input.
-   */
-  onFilesAdded: (newFiles: File[]) => void
-  /**
-   * Function that will be triggered when a file is removed from the list.
-   */
-  onFileRemoved: (
-    newFileList: FileWithStatus[],
-    removedItem: FileWithStatus,
-    removedItemIndex: number
-  ) => void
-  /**
-   * Optional function to retry upload on a file item with error status.
-   */
-  onRetryUpload?: (item: FileWithStatus, removedItemIndex: number) => void
-  children: ReactNode
-}
-
-export type DragDropFileContextValue = Pick<
-  DragDropFileProviderProps,
-  'fileList' | 'onFilesAdded' | 'onRetryUpload'
-> & {
-  onRemoveFile: (removedItem: FileWithStatus, removedItemIndex: number) => void
-}