@toptal/picasso-lab 9.3.1 → 10.0.0

package/src/Drawer/Drawer.tsx

@@ -1,105 +0,0 @@
-import MUIDrawer from '@material-ui/core/Drawer'
-import { makeStyles, Theme, useTheme } from '@material-ui/core/styles'
-import cx from 'classnames'
-import { Button, Container } from '@toptal/picasso'
-import { BaseProps } from '@toptal/picasso-shared'
-import { useDrawer, usePicassoRoot } from '@toptal/picasso-provider'
-import { CloseMinor16 } from '@toptal/picasso/Icon'
-import React, { FunctionComponent, ReactNode, useLayoutEffect } from 'react'
-
-import styles from './styles'
-import DrawerTitle from '../DrawerTitle'
-
-type AnchorType = 'bottom' | 'left' | 'right' | 'top'
-
-type WidthType = 'narrow' | 'regular' | 'medium' | 'wide' | 'ultra-wide'
-
-export interface Props extends BaseProps {
-  /** Side from which the drawer will appear.  */
-  anchor?: AnchorType
-  /** Drawer content */
-  children: ReactNode
-  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */
-  disablePortal?: boolean
-  /** Specify if the drawer is opened or not */
-  open: boolean
-  /** Specify the drawer title */
-  title?: ReactNode
-  /** Callback fired when the component requests to be closed. */
-  onClose?: () => void
-  /** Width of Drawer */
-  width?: WidthType
-}
-
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoDrawer' })
-
-export const Drawer: FunctionComponent<Props> = props => {
-  const {
-    children,
-    disablePortal,
-    open,
-    onClose,
-    title,
-    width = 'regular',
-    ...rest
-  } = props
-  const classes = useStyles()
-  const { setHasDrawer } = useDrawer()
-  const theme = useTheme()
-  const container = usePicassoRoot()
-
-  useLayoutEffect(() => {
-    setHasDrawer(open)
-
-    const cleanup = () => {
-      setHasDrawer(false)
-    }
-
-    return cleanup
-  }, [open, setHasDrawer])
-
-  const handleOnClose = () => {
-    if (onClose) {
-      onClose()
-    }
-  }
-
-  return (
-    <MUIDrawer
-      {...rest}
-      open={open}
-      onClose={handleOnClose}
-      disablePortal={disablePortal}
-      container={container}
-      ModalProps={{ style: { zIndex: theme.zIndex.drawer } }}
-    >
-      <Container
-        flex
-        direction='column'
-        className={cx(classes.container, classes[width])}
-      >
-        <DrawerTitle title={title} />
-        <Container flex className={classes.content}>
-          {children}
-        </Container>
-        <Button.Circular
-          variant='flat'
-          icon={<CloseMinor16 />}
-          onClick={handleOnClose}
-          className={classes.closeButton}
-        />
-      </Container>
-    </MUIDrawer>
-  )
-}
-
-Drawer.displayName = 'Drawer'
-
-Drawer.defaultProps = {
-  anchor: 'right',
-  disablePortal: false,
-  onClose: () => {},
-  width: 'regular'
-}
-
-export default Drawer

package/src/Drawer/index.ts

@@ -1,6 +0,0 @@
-import { OmitInternalProps } from '@toptal/picasso-shared'
-
-import { Props } from './Drawer'
-
-export { default } from './Drawer'
-export type DrawerProps = OmitInternalProps<Props>

package/src/Drawer/story/CustomTitle.example.tsx

@@ -1,32 +0,0 @@
-import { Button, Typography, Container, List } from '@toptal/picasso'
-import { Drawer } from '@toptal/picasso-lab'
-import React, { useState } from 'react'
-
-const Title = () => (
-  <Container flex alignItems='center' padded='small'>
-    <Typography>This Drawer has a custom title</Typography>
-    <Button size='small'>OK!</Button>
-  </Container>
-)
-
-const Example = () => {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <div>
-      <Button data-testid='trigger' onClick={() => setOpen(!open)}>
-        Show drawer
-      </Button>
-      <Drawer title={<Title />} open={open} onClose={() => setOpen(false)}>
-        <Container data-testid='content' padded='small'>
-          <List variant='ordered'>
-            <List.Item>Add at least 10 skills</List.Item>
-            <List.Item>Set your age</List.Item>
-          </List>
-        </Container>
-      </Drawer>
-    </div>
-  )
-}
-
-export default Example

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

@@ -1,29 +0,0 @@
-import { Button, Container, List } from '@toptal/picasso'
-import { Drawer } from '@toptal/picasso-lab'
-import React, { useState } from 'react'
-
-const Example = () => {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <div>
-      <Button data-testid='trigger' onClick={() => setOpen(!open)}>
-        Show drawer
-      </Button>
-      <Drawer
-        title='My Operational Issues'
-        open={open}
-        onClose={() => setOpen(false)}
-      >
-        <Container data-testid='content' padded='medium'>
-          <List variant='ordered'>
-            <List.Item>Add at least 10 skills</List.Item>
-            <List.Item>Set your age</List.Item>
-          </List>
-        </Container>
-      </Drawer>
-    </div>
-  )
-}
-
-export default Example

package/src/Drawer/story/DrawerAndNotification.example.tsx

@@ -1,34 +0,0 @@
-import { Button, Container, List } from '@toptal/picasso'
-import { Drawer } from '@toptal/picasso-lab'
-import { useNotifications } from '@toptal/picasso/utils'
-import React, { useState } from 'react'
-
-const Example = () => {
-  const { showSuccess } = useNotifications()
-  const [open, setOpen] = useState(false)
-
-  const showDrawer = () => {
-    setOpen(!open)
-    showSuccess("That's one small step for a man, one giant leap for mankind.")
-  }
-
-  return (
-    <div>
-      <Button onClick={showDrawer}>Show drawer</Button>
-      <Drawer
-        title='My Operational Issues'
-        open={open}
-        onClose={() => setOpen(false)}
-      >
-        <Container padded='medium'>
-          <List variant='ordered'>
-            <List.Item>Add at least 10 skills</List.Item>
-            <List.Item>Set your age</List.Item>
-          </List>
-        </Container>
-      </Drawer>
-    </div>
-  )
-}
-
-export default Example

package/src/Drawer/story/Widths.example.tsx

@@ -1,46 +0,0 @@
-import { Container, List, Button } from '@toptal/picasso'
-import { Drawer } from '@toptal/picasso-lab'
-import React, { useState } from 'react'
-
-type WidthType = 'narrow' | 'regular' | 'medium' | 'wide' | 'ultra-wide'
-
-const types: WidthType[] = ['narrow', 'regular', 'medium', 'wide', 'ultra-wide']
-
-const Example = () => {
-  const [width, setWidth] = useState<WidthType>('narrow')
-  const [open, setOpen] = useState(false)
-
-  const handleClick = (type: WidthType) => {
-    setWidth(type)
-    setOpen(!open)
-  }
-
-  return (
-    <div>
-      {types.map(type => (
-        <Button
-          data-testid={`show-${type}`}
-          onClick={() => handleClick(type)}
-          key={type}
-        >
-          Show {type} drawer
-        </Button>
-      ))}
-      <Drawer
-        title='My Operational Issues'
-        open={open}
-        onClose={() => setOpen(false)}
-        width={width}
-      >
-        <Container data-testid='content' padded='medium'>
-          <List variant='ordered'>
-            <List.Item>Add at least 10 skills</List.Item>
-            <List.Item>Set your age</List.Item>
-          </List>
-        </Container>
-      </Drawer>
-    </div>
-  )
-}
-
-export default Example

package/src/Drawer/story/WithoutTitle.example.tsx

@@ -1,22 +0,0 @@
-import { Button, Typography, Container } from '@toptal/picasso'
-import { Drawer } from '@toptal/picasso-lab'
-import React, { useState } from 'react'
-
-const Example = () => {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <div>
-      <Button data-testid='trigger' onClick={() => setOpen(!open)}>
-        Show drawer
-      </Button>
-      <Drawer open={open} onClose={() => setOpen(false)}>
-        <Container data-testid='content' padded='small'>
-          <Typography>This is the content. The title is omitted.</Typography>
-        </Container>
-      </Drawer>
-    </div>
-  )
-}
-
-export default Example

package/src/Drawer/story/index.jsx

@@ -1,80 +0,0 @@
-import { Drawer } from '../Drawer'
-import PicassoBook from '~/.storybook/components/PicassoBook'
-
-const page = PicassoBook.section('Picasso Lab').createPage(
-  'Drawer',
-  `
-    Allows rendering a sidebar with custom content
-    
-    ${PicassoBook.createBaseDocsLink(
-      'https://share.goabstract.com/22ba178c-50b8-4eb3-9eeb-e527fbed15e5?collectionLayerId=e9a36438-d8c9-42a4-94bc-ea134fd2e2a1&mode=design&present=true'
-    )}
-  `
-)
-
-page.createTabChapter('Props').addComponentDocs({
-  component: Drawer,
-  name: 'Drawer'
-})
-
-page
-  .createChapter()
-  .addExample('Drawer/story/Default.example.tsx', {
-    title: 'Default',
-    effect: async (testPage, makeScreenshot) => {
-      await testPage.click('[data-testid="trigger"]')
-
-      await makeScreenshot({
-        isFullScreen: true,
-        selector: '[data-testid="content"]'
-      })
-    }
-  })
-  .addExample('Drawer/story/WithoutTitle.example.tsx', {
-    title: 'Without Title',
-    effect: async (testPage, makeScreenshot) => {
-      await testPage.click('[data-testid="trigger"]')
-
-      await makeScreenshot({
-        isFullScreen: true
-      })
-    }
-  })
-  .addExample('Drawer/story/CustomTitle.example.tsx', {
-    title: 'Custom Title',
-    effect: async (testPage, makeScreenshot) => {
-      await testPage.click('[data-testid="trigger"]')
-
-      await makeScreenshot({
-        isFullScreen: true
-      })
-    }
-  })
-  .addExample('Drawer/story/Widths.example.tsx', {
-    title: 'Width',
-    effect: async (testPage, makeScreenshot) => {
-      const types = ['narrow', 'regular', 'medium', 'wide', 'ultra-wide']
-      const contentSelector = '[data-testid="content"]'
-
-      for (const type in types) {
-        const buttonSelector = `[data-testid="show-${types[type]}"]`
-
-        await testPage.click(buttonSelector)
-        await testPage.waitFor(contentSelector, {
-          visible: true
-        })
-        await makeScreenshot({
-          isFullScreen: true,
-          selector: contentSelector
-        })
-        await testPage.click('[role="presentation"] button')
-        await testPage.waitFor(contentSelector, {
-          hidden: true
-        })
-      }
-    }
-  })
-  .addExample(
-    'Drawer/story/DrawerAndNotification.example.tsx',
-    'With notification'
-  ) // picasso-skip-visuals

package/src/Drawer/styles.ts

@@ -1,42 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-import { PicassoProvider } from '@toptal/picasso-provider'
-
-PicassoProvider.override(() => ({
-  MuiDrawer: {
-    paper: {
-      maxWidth: '100%'
-    }
-  }
-}))
-
-export default () =>
-  createStyles({
-    container: {
-      maxWidth: '100%',
-      position: 'relative',
-      flex: 1
-    },
-    content: {
-      flex: 1
-    },
-    closeButton: {
-      position: 'absolute',
-      right: '1.5rem',
-      top: '1rem'
-    },
-    narrow: {
-      width: '27.5rem'
-    },
-    regular: {
-      width: '35rem'
-    },
-    medium: {
-      width: '40rem'
-    },
-    wide: {
-      width: '60rem'
-    },
-    'ultra-wide': {
-      width: '73.75rem'
-    }
-  })

package/src/DrawerTitle/DrawerTitle.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { BaseProps } from '@toptal/picasso-shared'
-import { Container, Typography } from '@toptal/picasso'
-import { makeStyles, Theme } from '@material-ui/core/styles'
-
-import styles from './styles'
-import { DrawerProps } from '../Drawer'
-
-export interface Props extends BaseProps, Pick<DrawerProps, 'title'> {}
-
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoDrawerTitle' })
-
-export const DrawerTitle = ({ title }: Props) => {
-  const classes = useStyles()
-
-  if (!title) {
-    return null
-  }
-
-  if (React.isValidElement(title)) {
-    return title
-  }
-
-  return (
-    <Container flex alignItems='center' className={classes.header}>
-      <Typography variant='heading' size='medium' className={classes.title}>
-        {title}
-      </Typography>
-    </Container>
-  )
-}
-
-DrawerTitle.displayName = 'DrawerTitle'
-
-export default DrawerTitle

package/src/DrawerTitle/index.ts

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

package/src/DrawerTitle/styles.ts

@@ -1,12 +0,0 @@
-import { createStyles, Theme } from '@material-ui/core/styles'
-
-export default ({ palette }: Theme) =>
-  createStyles({
-    header: {
-      borderBottom: `1px solid ${palette.grey.lighter}`,
-      padding: '1rem 1.5rem'
-    },
-    title: {
-      flexGrow: 1
-    }
-  })

package/src/Dropzone/Dropzone.tsx

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

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

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