@toptal/picasso-lab 9.3.0 → 9.3.1

package/src/DatePicker/utils.ts

@@ -0,0 +1,123 @@
+import parse from 'date-fns/parse'
+import isValid from 'date-fns/isValid'
+import formatDate from 'date-fns/format'
+import isWithinInterval from 'date-fns/isWithinInterval'
+import isEqual from 'date-fns/isEqual'
+import isBefore from 'date-fns/isBefore'
+import isAfter from 'date-fns/isAfter'
+import { utcToZonedTime, format as tzFormat } from 'date-fns-tz'
+
+import { DatePickerStringParser } from './types'
+import { DateOrDateRangeType, DateRangeType } from '../Calendar'
+
+// Convert date to given timezone. If timezone is undefined, return given date as is.
+export const timezoneConvert = (
+  date: DateOrDateRangeType,
+  timeZone?: string
+): DateOrDateRangeType => {
+  const convert = (dateToConvert: Date) => {
+    if (timeZone) {
+      /**
+       * Prevent invalid IANA timezone error. This is likely to happen
+       * when someone is editing properties in a Storybook examples.
+       */
+      try {
+        return utcToZonedTime(dateToConvert, timeZone)
+      } catch {
+        return dateToConvert
+      }
+    }
+
+    return dateToConvert
+  }
+
+  return Array.isArray(date)
+    ? (date.map(convert) as DateRangeType)
+    : (convert(date) as Date)
+}
+
+// Format date in given timezone. If timezone is undefined, return given date as is.
+export const timezoneFormat = (date: Date, timeZone?: string) => {
+  if (timeZone) {
+    /**
+     * Prevent invalid IANA timezone error. This is likely to happen
+     * when someone is editing properties in a Storybook examples.
+     */
+    try {
+      /**
+       * Maintain the same date and time, but formatted in the given timezone
+       * so next time the user edits the date it's not recalculated.
+       */
+      return new Date(tzFormat(date, 'MMM dd yyyy HH:mm:ss OOOO', { timeZone }))
+    } catch {
+      return date
+    }
+  }
+
+  return date
+}
+
+export const formatDateRange = (dates: DateRangeType, format: string) =>
+  dates.map(date => formatDate(date, format)).join(' - ')
+
+export const isDateValid = (date: string, pattern: string) => {
+  return (
+    date.length === pattern.length && isValid(parse(date, pattern, new Date()))
+  )
+}
+
+export const isDateAfter = (date: Date, dateToCompare: Date) =>
+  isEqual(date, dateToCompare) || isAfter(date, dateToCompare)
+
+export const isDateBefore = (date: Date, dateToCompare: Date) =>
+  isEqual(date, dateToCompare) || isBefore(date, dateToCompare)
+
+// eslint-disable-next-line complexity
+export const isDateWithinInterval = (
+  date: Date,
+  minDate: Date | undefined,
+  maxDate: Date | undefined
+) => {
+  if (!minDate && !maxDate) {
+    return true
+  }
+
+  if (minDate && maxDate) {
+    return isWithinInterval(date, {
+      start: minDate,
+      end: maxDate
+    })
+  }
+
+  if (minDate) {
+    return isDateAfter(date, minDate)
+  }
+
+  if (maxDate) {
+    return isDateBefore(date, maxDate)
+  }
+
+  return false
+}
+
+export const datePickerParseDateString: DatePickerStringParser = (
+  value,
+  { dateFormat, timezone, minDate, maxDate }
+) => {
+  if (!isDateValid(value, dateFormat)) {
+    return
+  }
+
+  const parsedNextValue = parse(value, dateFormat, new Date())
+  const nextTimezoneValue = timezoneFormat(parsedNextValue, timezone)
+
+  if (!isDateWithinInterval(nextTimezoneValue, minDate, maxDate)) {
+    return
+  }
+
+  return nextTimezoneValue
+}
+
+export const isValidDateValue = (
+  dateValue: DateOrDateRangeType | string
+): dateValue is DateOrDateRangeType => typeof dateValue !== 'string'

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
+    }
+  })