@toptal/picasso-lab 9.3.0 → 9.3.1

package/src/Dropzone/Dropzone.tsx

@@ -0,0 +1,146 @@
+import React, { forwardRef } from 'react'
+import { useDropzone } from 'react-dropzone'
+import cx from 'classnames'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import { BaseProps } from '@toptal/picasso-shared'
+import { Upload24 } from '@toptal/picasso/Icon'
+import {
+  FormError,
+  Container,
+  FileList,
+  Typography,
+  FormHint
+} from '@toptal/picasso'
+
+import { FileUpload, DropzoneOptions } from './types'
+import styles from './styles'
+
+export interface Props extends BaseProps {
+  /**
+   * Set accepted file types. See https://github.com/okonet/attr-accept for more information.
+   */
+  accept?: DropzoneOptions['accept']
+  /** Enable/disable the dropzone */
+  disabled?: boolean
+  /** Maximum file size (in bytes) */
+  maxSize?: number
+  /** Minimum file size (in bytes) */
+  minSize?: number
+  /** Allow drag 'n' drop (or selection from the file dialog) of multiple files */
+  multiple?: boolean
+  /** The text of the hint */
+  hint?: string
+  /** Callback invoked when a file item is removed */
+  onRemove?: (fileName: string, index: number) => void
+  /** Callback for when the drop event occurs */
+  onDropAccepted?: DropzoneOptions['onDropAccepted']
+  /** callback for when the drop event occurs */
+  onDropRejected?: DropzoneOptions['onDropRejected']
+  /** callback for when the drop event occurs */
+  onDrop?: DropzoneOptions['onDrop']
+  /** Custom validation function */
+  validator?: DropzoneOptions['validator']
+  /** Value uses the File interface. */
+  value?: FileUpload[]
+  /** Reasons why files couldn't be droped into dropzone */
+  errorMessages?: string[]
+  focused?: boolean
+  hovered?: boolean
+}
+
+const useStyles = makeStyles<Theme>(styles, { name: 'Dropzone' })
+
+export const Dropzone = forwardRef<HTMLInputElement, Props>(function Dropzone(
+  props,
+  ref
+) {
+  const {
+    hint,
+    onRemove,
+    value,
+    className,
+    errorMessages = [],
+    style,
+    'data-testid': dataTestId,
+    focused,
+    hovered,
+
+    // dropzoneOptions
+    accept,
+    minSize,
+    maxSize,
+    multiple,
+    disabled,
+    onDrop,
+    onDropAccepted,
+    onDropRejected,
+    validator
+  } = props
+
+  const { getRootProps, isDragActive, getInputProps } = useDropzone({
+    accept,
+    minSize,
+    maxSize,
+    multiple,
+    disabled,
+    onDrop,
+    onDropAccepted,
+    onDropRejected,
+    validator
+  })
+
+  const classes = useStyles()
+
+  return (
+    <Container style={style} ref={ref} className={className}>
+      <Container
+        flex
+        direction='column'
+        alignItems='center'
+        data-testid={dataTestId}
+        {...getRootProps({
+          className: cx(classes.root, {
+            [classes.dragActive]: isDragActive,
+            [classes.hovered]: hovered,
+            [classes.disabled]: disabled,
+            [classes.focused]: focused
+          })
+        })}
+      >
+        <input {...getInputProps({ className: classes.nativeInput })} />
+        <Upload24 color='darkGrey' />
+        <Typography size='medium' color='black' weight='semibold'>
+          Click or drag file to upload
+        </Typography>
+        {hint && errorMessages.length === 0 && (
+          <FormHint className={cx(classes.hint)}>{hint}</FormHint>
+        )}
+        {errorMessages.length > 0 &&
+          errorMessages.map((error, index) => (
+            <FormError
+              className={classes.error}
+              key={`${error}-${String(index)}`}
+            >
+              {error}
+            </FormError>
+          ))}
+      </Container>
+      {value && value.length > 0 && (
+        <Container top='xsmall'>
+          <FileList files={value} onItemRemove={onRemove} />
+        </Container>
+      )}
+    </Container>
+  )
+})
+
+Dropzone.displayName = 'Dropzone'
+
+Dropzone.defaultProps = {
+  disabled: false,
+  maxSize: Infinity,
+  minSize: 0,
+  multiple: true
+}
+
+export default Dropzone

package/src/Dropzone/__snapshots__/test.tsx.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropzone renders 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class=""
+    >
+      <div
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-column Dropzone-root"
+        tabindex="0"
+      >
+        <input
+          autocomplete="off"
+          multiple=""
+          style="display: none;"
+          tabindex="-1"
+          type="file"
+        />
+        <svg
+          class="PicassoSvgUpload24-root PicassoSvgUpload24-darkGrey"
+          style="min-width: 24px; min-height: 24px;"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M2 18v3h19v-3h1v4H1v-4h1zm9.5-16.207L16.207 6.5l-.707.707-3.501-3.501V19H11l-.001-15.294L7.5 7.207 6.793 6.5 11.5 1.793z"
+          />
+        </svg>
+        <p
+          class="MuiTypography-root PicassoTypography-bodyMedium PicassoTypography-black PicassoTypography-semibold MuiTypography-body1"
+        >
+          Click or drag file to upload
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/Dropzone/index.ts

@@ -0,0 +1,7 @@
+import { OmitInternalProps } from '@toptal/picasso-shared'
+
+import { Props } from './Dropzone'
+export { default } from './Dropzone'
+export * from './types'
+
+export type DropzoneProps = OmitInternalProps<Props>

package/src/Dropzone/story/Default.example.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Dropzone } from '@toptal/picasso-lab'
+
+const Example = () => {
+  return <Dropzone />
+}
+
+export default Example

package/src/Dropzone/story/Disabled.example.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Dropzone } from '@toptal/picasso-lab'
+
+const value = [
+  {
+    uploading: false,
+    progress: 0,
+    file: new File(['resume.pdf'], 'resume.pdf')
+  }
+]
+
+const Example = () => {
+  return (
+    <Dropzone
+      disabled
+      value={value}
+      onDrop={() => alert('onDrop callback triggered')}
+      onRemove={() => alert('onRemove callback triggered')}
+      hint='Max file size: 25MB'
+      accept='image/*'
+    />
+  )
+}
+
+export default Example

package/src/Dropzone/story/Error.example.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Dropzone } from '@toptal/picasso-lab'
+
+const errorMessages = ['resume.pdf: File is too large']
+
+const Example = () => {
+  return (
+    <Dropzone
+      hint='Max file size: 25MB'
+      accept='image/*'
+      errorMessages={errorMessages}
+    />
+  )
+}
+
+export default Example

package/src/Dropzone/story/Multiple.example.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Dropzone } from '@toptal/picasso-lab'
+
+const value = [
+  {
+    uploading: false,
+    progress: 0,
+    file: new File(['resume.pdf'], 'resume.pdf')
+  },
+  {
+    uploading: false,
+    progress: 0,
+    file: new File(['portfolio.pdf'], 'portfolio.pdf')
+  }
+]
+
+const Example = () => {
+  return (
+    <Dropzone
+      value={value}
+      onDrop={() => alert('onDrop callback triggered')}
+      onRemove={() => alert('onRemove callback triggered')}
+      hint='Files allowed: 2. Max file size: 25MB'
+      accept='image/*'
+      disabled
+    />
+  )
+}
+
+export default Example

package/src/Dropzone/story/Uploader.example.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react'
+import {
+  Dropzone,
+  DropzoneErrorCode,
+  DropzoneFileUpload,
+  DropzoneFileError,
+  DropzoneFileRejection
+} from '@toptal/picasso-lab'
+
+const MAX_SIZE = 600 * 1000
+
+const customSizeValidator = (file: File): DropzoneFileError[] | null => {
+  if (file.size > MAX_SIZE) {
+    return [
+      {
+        code: DropzoneErrorCode.FileTooLarge,
+        message: `File size exceeds the ${MAX_SIZE / 1000 / 1000}MB.`
+      }
+    ]
+  }
+
+  return null
+}
+
+const useFiles = ({ maxFiles }: { maxFiles: number }) => {
+  const [files, setFiles] = useState<DropzoneFileUpload[]>([])
+  const [errorMessages, setError] = useState<string[]>([])
+  const [disabled, setDisabled] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (files.length >= maxFiles) {
+      setDisabled(true)
+    } else {
+      setDisabled(false)
+    }
+  }, [maxFiles, files.length])
+
+  const addFiles = (
+    acceptedFiles: File[],
+    rejectedFiles: DropzoneFileRejection[]
+  ): void => {
+    if (files.length + acceptedFiles.length + rejectedFiles.length > maxFiles) {
+      return setError(['Too many files'])
+    }
+    if (acceptedFiles.length > 0) {
+      const previousFiles = files
+      const newFiles = acceptedFiles.map(file => ({
+        file,
+        uploading: true
+      }))
+
+      setFiles([...previousFiles, ...newFiles])
+      let progress = 0
+      const interval = setInterval(() => {
+        if (progress === 100) {
+          setFiles([
+            ...previousFiles,
+            ...newFiles.map(file => ({ ...file, uploading: false }))
+          ])
+          clearInterval(interval)
+        } else {
+          setFiles([
+            ...previousFiles,
+            ...newFiles.map(file => ({ ...file, progress }))
+          ])
+          progress += 10
+        }
+      }, 250)
+    }
+
+    if (rejectedFiles.length) {
+      setError(
+        rejectedFiles.map(
+          ({ errors, file }) =>
+            `${file.name}: ${errors.map(error => error.message).join(', ')}`
+        )
+      )
+    } else {
+      setError([])
+    }
+  }
+
+  const removeFile = (fileName: string, fileIndex: number) => {
+    const updatedFiles = files.filter((_, index) => index !== fileIndex)
+
+    setFiles(updatedFiles)
+  }
+
+  return {
+    files,
+    addFiles,
+    removeFile,
+    errorMessages,
+    disabled
+  }
+}
+const Example = () => {
+  const { files, addFiles, removeFile, errorMessages, disabled } = useFiles({
+    maxFiles: 2
+  })
+
+  return (
+    <Dropzone
+      value={files}
+      onDrop={addFiles}
+      onRemove={removeFile}
+      hint={`Files allowed 2. Max file size: ${MAX_SIZE / 1000}KB`}
+      accept='image/*'
+      validator={customSizeValidator}
+      errorMessages={errorMessages}
+      disabled={disabled}
+    />
+  )
+}
+
+export default Example

package/src/Dropzone/story/Uploading.example.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Dropzone } from '@toptal/picasso-lab'
+
+const value = [
+  {
+    uploading: true,
+    progress: 30,
+    file: new File(['resume.pdf'], 'resume.pdf')
+  }
+]
+
+const Example = () => {
+  return <Dropzone value={value} hint='Max file size: 25MB' accept='image/*' />
+}
+
+export default Example

package/src/Dropzone/story/index.jsx

@@ -0,0 +1,85 @@
+import { Dropzone } from '../Dropzone'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Picasso Lab').createPage(
+  'Dropzone',
+  `
+  ${PicassoBook.createBaseDocsLink(
+    'https://app.abstract.com/projects/1b06c884-06af-482a-bf12-a82f521a19a1/branches/master/commits/58ee1df911f7d6ca2d9214171088a69bdff23401/files/13531207-e094-44ec-ae1f-f27628c1aea5/layers/27C9F1FA-E469-4AA4-936C-DD752F77ADE3?mode=build&selected=root-8BD3C500-A858-4CC4-8CE8-02E0453C0C4D&sha=58ee1df911f7d6ca2d9214171088a69bdff23401'
+  )}
+  `
+)
+
+page.createTabChapter('Props').addComponentDocs({
+  component: Dropzone,
+  name: 'Dropzone',
+  additionalDocs: {
+    accept: {
+      name: 'accept',
+      type: 'string | string[]',
+      description:
+        'Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276'
+    },
+    onDropAccepted: {
+      name: 'onDropAccepted',
+      type: {
+        name: 'function',
+        description: '(files: File[], event) => void'
+      },
+      description:
+        'Callback for when the drop event occurs. Note that if no files are accepted, this callback is not invoked.'
+    },
+    onDropRejected: {
+      name: 'onDropRejected',
+      type: {
+        name: 'function',
+        description: '(fileRejections: FileRejection[], event) => void'
+      },
+      description:
+        'Callback for when the drop event occurs. Note that if no files are rejected, this callback is not invoked.'
+    },
+    validator: {
+      name: 'validator',
+      type: {
+        name: 'function',
+        description: '(file:File) => FileError | FileError[] | null'
+      },
+      description: 'Custom validation function',
+      defaultvalue: 'null'
+    },
+    onDrop: {
+      name: 'onDrop',
+      type: {
+        name: 'function',
+        description:
+          '(acceptedFiles: File[], fileRejections: FileRejection[], event:DragEvent | Event) => void'
+      },
+      description: `
+Callback for when the drop event occurs. Note that this callback is invoked after the getFilesFromEvent callback is done.
+
+Files are accepted or rejected based on the accept, multiple, minSize and maxSize props. accept must be a valid MIME type according to input element specification or a valid file extension. If multiple is set to false and additional files are dropped, all files besides the first will be rejected. Any file which does not have a size in the minSize, maxSize range, will be rejected as well.
+
+Note that the onDrop callback will always be invoked regardless if the dropped files were accepted or rejected. If you'd like to react to a specific scenario, use the onDropAccepted/onDropRejected props.
+
+onDrop will provide you with an array of File objects which you can then process and send to a server. For example, with SuperAgent as a http/ajax library:
+
+      function onDrop(acceptedFiles) {
+        const req = request.post('/upload')
+        acceptedFiles.forEach(file => {
+          req.attach(file.name, file)
+        })
+        req.end(callback)
+      }
+      `
+    }
+  }
+})
+
+page
+  .createChapter()
+  .addExample('Dropzone/story/Default.example.tsx', 'Default') // picasso-skip-visuals
+  .addExample('Dropzone/story/Uploader.example.tsx', 'With upload') // picasso-skip-visuals
+  .addExample('Dropzone/story/Uploading.example.tsx', 'Uploading') // picasso-skip-visuals
+  .addExample('Dropzone/story/Disabled.example.tsx', 'Completed') // picasso-skip-visuals
+  .addExample('Dropzone/story/Multiple.example.tsx', 'Completed Multiple files') // picasso-skip-visuals
+  .addExample('Dropzone/story/Error.example.tsx', 'Upload Failed') // picasso-skip-visuals

package/src/Dropzone/styles.ts

@@ -0,0 +1,43 @@
+import { createStyles, Theme } from '@material-ui/core/styles'
+
+export default ({ palette, sizes, transitions }: Theme) =>
+  createStyles({
+    root: {
+      padding: '20px',
+      borderWidth: sizes.borderWidth,
+      borderRadius: sizes.borderRadius.medium,
+      borderColor: palette.grey.light2,
+      borderStyle: 'dashed',
+      backgroundColor: palette.common.white,
+      color: palette.grey.dark,
+      outline: 'none',
+      transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}`,
+      transitionProperty: 'border, background-color',
+      gap: '0.5rem',
+      '&:hover, &$hovered, &:focus, &$focused, &$dragActive': {
+        borderColor: palette.blue.main,
+        cursor: 'pointer'
+      },
+      '&$disabled': {
+        backgroundColor: palette.grey.lighter,
+        '&:hover': {
+          cursor: 'no-drop',
+          borderColor: palette.grey.light2
+        }
+      }
+    },
+    hint: {
+      margin: 0,
+      '& > *': {
+        lineHeight: '1rem'
+      }
+    },
+    completed: {},
+    error: {
+      margin: 0
+    },
+    dragActive: {},
+    hovered: {},
+    disabled: {},
+    focused: {}
+  })

package/src/Dropzone/test.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { render } from '@toptal/picasso/test-utils'
+import { OmitInternalProps } from '@toptal/picasso-shared'
+
+import Dropzone, { Props } from './Dropzone'
+
+const renderDropzone = (props: OmitInternalProps<Props>) =>
+  render(<Dropzone {...props} />)
+
+describe('Dropzone', () => {
+  it('renders', () => {
+    const { queryByText, container } = renderDropzone({})
+
+    expect(queryByText('Click or drag file to upload')).toBeVisible()
+    expect(container).toMatchSnapshot()
+  })
+
+  it('shows error', () => {
+    const { queryByText } = renderDropzone({
+      errorMessages: ['error example'],
+      hint: 'hint example'
+    })
+
+    expect(queryByText('hint example')).not.toBeInTheDocument()
+    expect(queryByText('error example')).toBeVisible()
+  })
+
+  it('renders hint', () => {
+    const { queryByText } = renderDropzone({ hint: 'hint example' })
+
+    expect(queryByText('hint example')).toBeVisible()
+  })
+})

package/src/Dropzone/types.ts

@@ -0,0 +1,56 @@
+export interface FileUpload {
+  uploading?: boolean
+  progress?: number
+  error?: string
+  file: File
+}
+
+export type DropzoneOptions = {
+  /**
+   * Set accepted file types. See https://github.com/okonet/attr-accept for more information.
+   */
+  accept?: string | string[]
+  /** Enable/disable the dropzone */
+  disabled?: boolean
+  /** Maximum file size (in bytes) */
+  maxSize?: number
+  /** Minimum file size (in bytes) */
+  minSize?: number
+  /** Callback for when the drop event occurs */
+  onDrop?: <T extends File>(
+    acceptedFiles: T[],
+    fileRejections: FileRejection[],
+    event: DropEvent
+  ) => void
+  /** Callback for when the drop event occurs */
+  onDropAccepted?: <T extends File>(files: T[], event: DropEvent) => void
+  /** Callback for when the drop event occurs */
+  onDropRejected?: (fileRejections: FileRejection[], event: DropEvent) => void
+  /** Custom validation function */
+  validator?: <T extends File>(file: T) => FileError | FileError[] | null
+}
+
+export type DropEvent =
+  | React.DragEvent<HTMLElement>
+  | React.ChangeEvent<HTMLInputElement>
+  | DragEvent
+  | Event
+
+export const ErrorCode = {
+  FileInvalidType: 'file-invalid-type',
+  FileTooLarge: 'file-too-large',
+  FileTooSmall: 'file-too-small',
+  TooManyFiles: 'too-many-files'
+} as const
+
+type ErrorCodeType = typeof ErrorCode[keyof typeof ErrorCode]
+
+export interface FileError {
+  message: string
+  code: ErrorCodeType | string
+}
+
+export interface FileRejection {
+  file: File
+  errors: FileError[]
+}

package/src/EmptyState/EmptyState.tsx

@@ -0,0 +1,7 @@
+import EmptyStatePage from '../EmptyStatePage'
+import EmptyStateCollection from '../EmptyStateCollection'
+
+export default {
+  Page: EmptyStatePage,
+  Collection: EmptyStateCollection
+}

package/src/EmptyState/index.tsx

@@ -0,0 +1 @@
+export { default } from './EmptyState'

package/src/EmptyState/story/index.jsx

@@ -0,0 +1,13 @@
+import PicassoBook from '~/.storybook/components/PicassoBook'
+import emptyStatePageStory from '../../EmptyStatePage/story'
+import emptyStateCollectionStory from '../../EmptyStateCollection/story'
+
+const page = PicassoBook.section('Picasso Lab').createPage('EmptyState')
+
+page
+  .createTabChapter('Props')
+  .addComponentDocs(emptyStatePageStory.componentDocs)
+  .addComponentDocs(emptyStateCollectionStory.componentDocs)
+
+page.connect(emptyStatePageStory.chapter)
+page.connect(emptyStateCollectionStory.chapter)