@toptal/picasso-lab 9.1.1-alpha-sat-750--poc-picasso-with-ssr.2531 → 9.3.1

package/src/Drawer/Drawer.tsx

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

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

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

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

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

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

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

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

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

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

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

package/src/DrawerTitle/styles.ts

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

@@ -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>