@toptal/picasso-lab 9.3.1 → 10.0.0

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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

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

package/src/EmptyState/index.tsx

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

package/src/EmptyState/story/index.jsx

@@ -1,13 +0,0 @@
-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)

package/src/EmptyStateCollection/EmptyStateCollection.tsx

@@ -1,56 +0,0 @@
-import { Container, Typography } from '@toptal/picasso'
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  ReactElement,
-  cloneElement
-} from 'react'
-import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Search16 as Search } from '@toptal/picasso/Icon'
-
-import styles from './styles'
-
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-  /** Adds <Icon /> before EmptyStateCollection content */
-  icon?: ReactElement
-}
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoEmptyStateCollection'
-})
-
-export const EmptyStateCollection = forwardRef<HTMLDivElement, Props>(
-  function EmptyStateCollection(props, ref) {
-    const classes = useStyles()
-    const { icon, children, style, ...rest } = props
-    const iconProps = {
-      className: classes.icon,
-      color: 'dark-grey' as const
-    }
-    const iconElement = icon ? (
-      cloneElement(icon, iconProps)
-    ) : (
-      <Search {...iconProps} />
-    )
-
-    return (
-      <Container {...rest} alignItems='center' flex ref={ref} style={style}>
-        <Container
-          alignItems='center'
-          className={classes.iconWrapper}
-          flex
-          right='xsmall'
-        >
-          {iconElement}
-        </Container>
-        <Container>
-          <Typography size='small'>{children}</Typography>
-        </Container>
-      </Container>
-    )
-  }
-)
-
-EmptyStateCollection.displayName = 'EmptyStateCollection'
-
-export default EmptyStateCollection

package/src/EmptyStateCollection/index.tsx

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

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

@@ -1,11 +0,0 @@
-import React from 'react'
-import { EmptyState } from '@toptal/picasso-lab'
-import { Container } from '@toptal/picasso'
-
-const DefaultExample = () => (
-  <Container>
-    <EmptyState.Collection>No memorandums were added yet</EmptyState.Collection>
-  </Container>
-)
-
-export default DefaultExample

package/src/EmptyStateCollection/story/index.jsx

@@ -1,20 +0,0 @@
-import { EmptyStateCollection } from '../EmptyStateCollection'
-import PicassoBook from '~/.storybook/components/PicassoBook'
-
-const componentDocs = PicassoBook.createComponentDocs(
-  EmptyStateCollection,
-  'EmptyState.Collection'
-)
-
-const chapter = PicassoBook.connectToPage(page =>
-  page
-    .createChapter('EmptyState.Collection')
-    .addExample('EmptyStateCollection/story/Default.example.tsx', {
-      id: 'EmptyStateCollection'
-    })
-)
-
-export default {
-  componentDocs,
-  chapter
-}

package/src/EmptyStateCollection/styles.ts

@@ -1,10 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    icon: {
-      flexBasis: '1rem',
-      minWidth: '1rem',
-      height: '1rem'
-    }
-  })

package/src/EmptyStatePage/EmptyStatePage.tsx

@@ -1,65 +0,0 @@
-import { Container, Typography } from '@toptal/picasso'
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  ReactElement,
-  cloneElement
-} from 'react'
-import { makeStyles, Theme } from '@material-ui/core/styles'
-
-import styles from './styles'
-
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-  /** Adds <Icon /> above EmptyStatePage content  */
-  image: ReactElement
-  /** Adds Title string below the main image */
-  title?: string
-}
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoEmptyStatePage'
-})
-
-export const EmptyStatePage = forwardRef<HTMLDivElement, Props>(
-  function EmptyStatePage(props, ref) {
-    const classes = useStyles()
-    const { image, title, children, style, ...rest } = props
-
-    return (
-      <Container
-        {...rest}
-        direction='column'
-        alignItems='center'
-        flex
-        ref={ref}
-        style={style}
-      >
-        <Container
-          alignItems='center'
-          justifyContent='center'
-          bottom='small'
-          flex
-        >
-          {cloneElement(image, { className: classes.image })}
-        </Container>
-        {title && (
-          <Container bottom='xsmall'>
-            <Typography variant='heading' size='medium'>
-              {title}
-            </Typography>
-          </Container>
-        )}
-        <Typography
-          size='small'
-          as={typeof children === 'string' ? 'p' : 'div'}
-        >
-          {children}
-        </Typography>
-      </Container>
-    )
-  }
-)
-
-EmptyStatePage.displayName = 'EmptyStatePage'
-
-export default EmptyStatePage

package/src/EmptyStatePage/index.tsx

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

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

@@ -1,21 +0,0 @@
-import React from 'react'
-import { EmptyState } from '@toptal/picasso-lab'
-import { Container, Image } from '@toptal/picasso'
-
-const DefaultExample = () => (
-  <Container>
-    <EmptyState.Page
-      title='Memorandums page is empty'
-      image={
-        <Image
-          src='./jacqueline-with-flowers-1954-square.jpg'
-          alt='Placeholder image'
-        />
-      }
-    >
-      No memorandums were added yet
-    </EmptyState.Page>
-  </Container>
-)
-
-export default DefaultExample