@toptal/picasso-lab 9.3.1 → 13.0.0

package/src/OverviewBlock/story/index.jsx

@@ -1,100 +0,0 @@
-import overviewBlockGroupStory from '../../OverviewBlockGroup/story'
-import overviewBlockRowStory from '../../OverviewBlockRow/story'
-import { OverviewBlock } from '../OverviewBlock'
-import PicassoBook from '~/.storybook/components/PicassoBook'
-
-const page = PicassoBook.section('Picasso Lab').createPage(
-  'OverviewBlock',
-  'Allows displaying counters.'
-)
-
-page
-  .createTabChapter('Props')
-  .addComponentDocs({
-    component: OverviewBlock,
-    name: 'OverviewBlock',
-    // react-docgen-typescript doesn't work with generics, so we have to generate this
-    // documentation manually
-    additionalDocs: {
-      children: {
-        name: 'children',
-        type: 'ReactNode',
-        description: 'Content of the component'
-      },
-      value: {
-        name: 'value',
-        type: 'string',
-        description: 'Counter value'
-      },
-      title: {
-        name: 'title',
-        type: 'string',
-        description: 'Counter title'
-      },
-      color: {
-        name: 'variant',
-        type: {
-          name: 'enum',
-          enums: [
-            "'value-red'",
-            "'value-green'",
-            "'value-blue'",
-            "'value-yellow'",
-            "'label-red'",
-            "'label-green'",
-            "'label-blue'",
-            "'label-yellow'"
-          ]
-        },
-        description: 'The color variant'
-      },
-      align: {
-        name: 'align',
-        type: {
-          name: 'enum',
-          enums: ["'default'", "'center'"]
-        },
-        defaultValue: 'default',
-        description:
-          'Value and label alignment. By default content is aligned to the left.'
-      },
-      width: {
-        name: 'width',
-        type: {
-          name: 'enum',
-          enums: ["'narrow'", "'regular'", "'wide'"]
-        },
-        defaultValue: 'regular',
-        description: 'The width variant'
-      },
-      as: {
-        name: 'as',
-        type: {
-          name: 'enum'
-        },
-        defaultValue: 'button',
-        description:
-          'The component used for the root node.\nEither a string to use a DOM element or a component.'
-      },
-      onClick: {
-        name: 'onClick',
-        type: {
-          name: 'function',
-          description: '(event: MouseEvent) => void'
-        },
-        description: 'Callback invoked when component is clicked'
-      }
-    }
-  })
-  .addComponentDocs(overviewBlockGroupStory.componentDocs)
-  .addComponentDocs(overviewBlockRowStory.componentDocs)
-
-page
-  .createChapter()
-  .addExample('OverviewBlock/story/Default.example.tsx', 'Default')
-  .addExample('OverviewBlock/story/Text.example.tsx', 'Text')
-  .addExample('OverviewBlock/story/Number.example.tsx', 'Number')
-  .addExample('OverviewBlock/story/Multiline.example.tsx', 'Multi-line')
-  .addExample('OverviewBlock/story/Routing.example.tsx', 'Routing')
-
-page.connect(overviewBlockGroupStory.chapter)

package/src/OverviewBlock/styles.ts

@@ -1,44 +0,0 @@
-import { createStyles, Theme } from '@material-ui/core/styles'
-import { rem } from '@toptal/picasso-shared'
-
-export default ({ palette, sizes }: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      backgroundColor: palette.common.white,
-      margin: 0,
-      minWidth: rem('150px'),
-      border: 'none',
-      textDecoration: 'none',
-      '&:not(:first-child)': {
-        borderLeft: `${sizes.borderWidth} solid ${palette.grey.light2}`
-      }
-    },
-    clickable: {
-      cursor: 'pointer',
-      outline: 'none',
-      '&:hover': {
-        backgroundColor: palette.blue.lighter
-      }
-    },
-    disableOutline: {
-      outline: 'none'
-    },
-
-    defaultAlign: {
-      alignItems: 'flex-start'
-    },
-    centerAlign: {
-      alignItems: 'center'
-    },
-    narrowWidth: {
-      padding: '0.75rem 1rem'
-    },
-    regularWidth: {
-      padding: '0.75rem 1.5rem'
-    },
-    wideWidth: {
-      padding: '0.75rem 2rem'
-    }
-  })

package/src/OverviewBlock/test.tsx

@@ -1,111 +0,0 @@
-import React, { ComponentProps } from 'react'
-import { render, PicassoConfig } from '@toptal/picasso/test-utils'
-import * as titleCaseModule from 'ap-style-title-case'
-import { Link, MemoryRouter as Router } from 'react-router-dom'
-
-import OverviewBlock from './OverviewBlock'
-
-jest.mock('ap-style-title-case')
-
-const renderOverviewBlock = (
-  props: ComponentProps<typeof OverviewBlock>,
-  picassoConfig?: PicassoConfig
-) => {
-  return render(
-    <Router>
-      <OverviewBlock {...props} />
-    </Router>,
-    undefined,
-    picassoConfig
-  )
-}
-
-let spiedOnTitleCase: jest.SpyInstance
-
-describe('OverviewBlock', () => {
-  beforeEach(() => {
-    spiedOnTitleCase = jest.spyOn(titleCaseModule, 'default')
-  })
-
-  afterEach(() => {
-    spiedOnTitleCase.mockReset()
-  })
-
-  it('should transform text to title case when Picasso titleCase property is true', () => {
-    const LABEL_TEXT = 'abc dj4'
-
-    renderOverviewBlock(
-      { value: 'abc co5', label: LABEL_TEXT },
-      { titleCase: true }
-    )
-
-    expect(spiedOnTitleCase).toHaveBeenCalledWith(LABEL_TEXT)
-  })
-
-  it('should not transform text to title case when Picasso titleCase property is true but the component property overrides it', () => {
-    renderOverviewBlock(
-      { value: 'abc dk9', label: 'abc ps0', titleCase: false },
-      { titleCase: true }
-    )
-
-    expect(spiedOnTitleCase).toHaveBeenCalledTimes(0)
-  })
-
-  describe('when OnClick function is defined', () => {
-    describe('when `as` prop is defined', () => {
-      it('render the element as `Link`', () => {
-        const { getByTestId } = renderOverviewBlock({
-          value: 'abc dk9',
-          label: 'abc ps0',
-          as: Link,
-          onClick: jest.fn(),
-          to: '/',
-          'data-testid': 'OverviewBlock'
-        })
-        const block = getByTestId('OverviewBlock')
-
-        // By the Link component to -> href
-        expect(block).toHaveAttribute('href', '/')
-        expect(block.nodeName).toBe('A')
-      })
-    })
-
-    describe('when `as` prop is undefined', () => {
-      it('render the element as `button`', () => {
-        const { getByTestId } = renderOverviewBlock({
-          value: 'abc dk9',
-          label: 'abc ps0',
-          onClick: jest.fn(),
-          'data-testid': 'OverviewBlock'
-        })
-
-        expect(getByTestId('OverviewBlock').nodeName).toBe('BUTTON')
-      })
-    })
-  })
-
-  describe('when OnClick function is undefined', () => {
-    it('renders the element as `div`', () => {
-      const { getByTestId } = renderOverviewBlock({
-        value: 'abc dk9',
-        label: 'abc ps0',
-        'data-testid': 'OverviewBlock'
-      })
-
-      expect(getByTestId('OverviewBlock').nodeName).toBe('DIV')
-    })
-
-    it('renders the element as `Link`', () => {
-      const { getByTestId } = renderOverviewBlock({
-        as: Link,
-        to: '/',
-        'data-testid': 'OverviewBlock'
-      })
-      const block = getByTestId('OverviewBlock')
-
-      // By the Link component to -> href
-      expect(block).toHaveAttribute('href', '/')
-      expect(block.nodeName).toBe('A')
-    })
-  })
-})

package/src/OverviewBlockGroup/OverviewBlockGroup.tsx

@@ -1,56 +0,0 @@
-import React, {
-  FunctionComponent,
-  HTMLAttributes,
-  ReactNode,
-  ReactComponentElement
-} from 'react'
-
-import { Alignment, BlockWidth } from './settings'
-import { OverviewBlockGroupContext } from './OverviewBlockGroupContext'
-import OverviewBlockRow from '../OverviewBlockRow'
-
-type Props = HTMLAttributes<HTMLDivElement> & {
-  /** Value and label alignment for blocks. By default content is aligned to the left. */
-  align?: Alignment
-  /** The block width variant */
-  blockWidth?: BlockWidth
-}
-
-// We need to inject a single row if there is none provided.
-// It allows to skip `OverviewBlock.Row` component for a single-row groups.
-const shouldInjectRow = (children?: ReactNode) => {
-  if (!children) {
-    return false
-  }
-
-  return !React.Children.toArray(children)
-    .filter((el): el is ReactComponentElement<typeof OverviewBlockRow> =>
-      React.isValidElement(el)
-    )
-    .some(el => el.type.displayName === OverviewBlockRow.displayName)
-}
-
-const OverviewBlockGroup: FunctionComponent<Props> = props => {
-  const { children, align = 'default', blockWidth = 'regular', ...rest } = props
-
-  return (
-    <section {...rest}>
-      <OverviewBlockGroupContext.Provider value={{ align, blockWidth }}>
-        {shouldInjectRow(children) ? (
-          <OverviewBlockRow>{children}</OverviewBlockRow>
-        ) : (
-          children
-        )}
-      </OverviewBlockGroupContext.Provider>
-    </section>
-  )
-}
-
-OverviewBlockGroup.displayName = 'OverviewBlockGroup'
-
-OverviewBlockGroup.defaultProps = {
-  align: 'default',
-  blockWidth: 'regular'
-}
-
-export default OverviewBlockGroup

package/src/OverviewBlockGroup/OverviewBlockGroupContext.tsx

@@ -1,21 +0,0 @@
-import { createContext, useContext } from 'react'
-
-import { Alignment, BlockWidth } from './settings'
-
-interface OverviewBlockGroupSettings {
-  align: Alignment
-  blockWidth: BlockWidth
-}
-
-const defaultSettings = {
-  align: 'default' as const,
-  blockWidth: 'regular' as const
-}
-
-export const OverviewBlockGroupContext = createContext<
-  OverviewBlockGroupSettings
->(defaultSettings)
-
-export const useOverviewBlockGroupContext = () => {
-  return useContext(OverviewBlockGroupContext)
-}

package/src/OverviewBlockGroup/index.ts

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

package/src/OverviewBlockGroup/settings.ts

@@ -1,2 +0,0 @@
-export type Alignment = 'default' | 'center'
-export type BlockWidth = 'narrow' | 'regular' | 'wide'

package/src/OverviewBlockGroup/story/BlockWidth.example.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { OverviewBlock } from '@toptal/picasso-lab'
-import { Container } from '@toptal/picasso'
-
-const BlockWidthExample = () => {
-  return (
-    <Container>
-      <Container>
-        <OverviewBlock.Group blockWidth='narrow'>
-          <OverviewBlock value='Narrow' label='Width' />
-          <OverviewBlock value='Narrow' label='Width' />
-          <OverviewBlock value='Narrow' label='Width' />
-          <OverviewBlock value='Narrow' label='Width' />
-          <OverviewBlock value='Narrow' label='Width' />
-        </OverviewBlock.Group>
-      </Container>
-
-      <Container top='small'>
-        <OverviewBlock.Group blockWidth='regular'>
-          <OverviewBlock value='Regular' label='Width' />
-          <OverviewBlock value='Regular' label='Width' />
-          <OverviewBlock value='Regular' label='Width' />
-          <OverviewBlock value='Regular' label='Width' />
-        </OverviewBlock.Group>
-      </Container>
-
-      <Container top='small'>
-        <OverviewBlock.Group blockWidth='wide'>
-          <OverviewBlock value='Wide' label='Width' />
-          <OverviewBlock value='Wide' label='Width' />
-          <OverviewBlock value='Wide' label='Width' />
-        </OverviewBlock.Group>
-      </Container>
-    </Container>
-  )
-}
-
-export default BlockWidthExample

package/src/OverviewBlockGroup/story/CenterAligned.example.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { OverviewBlock } from '@toptal/picasso-lab'
-
-const CenterAlignedExample = () => {
-  return (
-    <OverviewBlock.Group align='center'>
-      <OverviewBlock value='12345678' label='Label' variant='label-red' />
-      <OverviewBlock
-        value='$585,895,606.35'
-        label='Paid'
-        variant='label-green'
-      />
-    </OverviewBlock.Group>
-  )
-}
-
-export default CenterAlignedExample

package/src/OverviewBlockGroup/story/index.jsx

@@ -1,25 +0,0 @@
-import OverviewBlockGroup from '../OverviewBlockGroup'
-import PicassoBook from '~/.storybook/components/PicassoBook'
-
-const componentDocs = PicassoBook.createComponentDocs(
-  OverviewBlockGroup,
-  'OverviewBlock.Group'
-)
-
-const chapter = PicassoBook.connectToPage(page =>
-  page
-    .createChapter('Visual variants of the groups', '')
-    .addExample(
-      'OverviewBlockGroup/story/CenterAligned.example.tsx',
-      'Center Aligned'
-    )
-    .addExample(
-      'OverviewBlockGroup/story/BlockWidth.example.tsx',
-      'Block Width'
-    )
-)
-
-export default {
-  chapter,
-  componentDocs
-}

package/src/OverviewBlockGroup/test.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { render } from '@toptal/picasso/test-utils'
-
-import OverviewBlock from '../OverviewBlock'
-import OverviewBlockGroup from './OverviewBlockGroup'
-
-describe('OverlayBlockGroup', () => {
-  it('allows to render a single block', () => {
-    expect(() => {
-      render(
-        <OverviewBlockGroup>
-          <OverviewBlock value='Value' label='Label' />
-        </OverviewBlockGroup>
-      )
-    }).not.toThrow()
-  })
-})

package/src/OverviewBlockRow/OverviewBlockRow.tsx

@@ -1,22 +0,0 @@
-import React, { FunctionComponent, HTMLAttributes } from 'react'
-import { Theme, makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
-
-import styles from './styles'
-
-type Props = HTMLAttributes<HTMLDivElement>
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoOverviewBlockRow'
-})
-
-const OverviewBlockRow: FunctionComponent<Props> = props => {
-  const { className, ...rest } = props
-  const classes = useStyles()
-
-  return <div {...rest} className={cx(classes.root, className)} />
-}
-
-OverviewBlockRow.displayName = 'OverviewBlockRow'
-
-export default OverviewBlockRow

package/src/OverviewBlockRow/index.ts

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

package/src/OverviewBlockRow/story/index.jsx

@@ -1,11 +0,0 @@
-import OverviewBlockRow from '../OverviewBlockRow'
-import PicassoBook from '~/.storybook/components/PicassoBook'
-
-const componentDocs = PicassoBook.createComponentDocs(
-  OverviewBlockRow,
-  'OverviewBlock.Row'
-)
-
-export default {
-  componentDocs
-}

package/src/OverviewBlockRow/styles.ts

@@ -1,27 +0,0 @@
-import { createStyles, Theme } from '@material-ui/core/styles'
-
-export default ({ palette, sizes }: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      borderRadius: sizes.borderRadius.medium,
-      padding: '1rem 0',
-      border: `${sizes.borderWidth} solid ${palette.grey.lighter2}`,
-      backgroundColor: palette.common.white,
-      justifyContent: 'flex-start',
-      '& > *': {
-        flex: '1 0'
-      },
-      '&:not(:first-child)': {
-        borderTop: 0,
-        borderTopLeftRadius: 0,
-        borderTopRightRadius: 0
-      },
-      '&:not(:last-child)': {
-        borderBottom: 0,
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-        paddingBottom: 0
-      }
-    }
-  })

package/src/Section/Section.tsx

@@ -1,163 +0,0 @@
-import cx from 'classnames'
-import React, { forwardRef, ReactNode, useState } from 'react'
-import { makeStyles, Theme } from '@material-ui/core/styles'
-import { Collapse } from '@material-ui/core'
-import {
-  ArrowDownMinor16,
-  BaseProps,
-  Button,
-  Container,
-  SizeType,
-  Typography
-} from '@toptal/picasso'
-import { Rotate180 } from '@toptal/picasso/utils/Transitions'
-
-import styles from './styles'
-
-type VariantType = 'bordered' | 'default' | 'withHeaderBar'
-
-export interface Props extends BaseProps {
-  /** Title of the Section */
-  title?: ReactNode
-  /** Subtitle of the Section */
-  subtitle?: ReactNode
-  /** Additional actions of the Section */
-  actions?: ReactNode
-  /** Main content of the Section */
-  children?: ReactNode
-  /** Whether section can be collapsed */
-  collapsible?: boolean
-  /** Default collapsed value **(applied if `collapsible: true`)** */
-  defaultCollapsed?: boolean
-  testIds?: {
-    header?: string
-    title?: string
-    subtitle?: string
-    actions?: string
-    collapse?: string
-  }
-  variant?: VariantType
-  /** Title size of the inner text */
-  titleSize?: SizeType<'small' | 'medium'>
-}
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoSection'
-})
-
-export const Section = forwardRef<HTMLDivElement, Props>(function Section(
-  props,
-  ref
-) {
-  const {
-    className,
-    style,
-    title,
-    subtitle,
-    actions,
-    children,
-    testIds,
-    collapsible = false,
-    defaultCollapsed = true,
-    variant = 'default',
-    titleSize = 'medium',
-    ...rest
-  } = props
-  const classes = useStyles()
-  const [collapsed, setCollapsed] = useState(
-    collapsible ? defaultCollapsed : false
-  )
-
-  const toggleCollapse = () => setCollapsed(!collapsed)
-
-  const renderTitle = () =>
-    title ? (
-      <Typography
-        className={classes.title}
-        data-testid={testIds?.title}
-        variant='heading'
-        size={titleSize}
-      >
-        {title}
-      </Typography>
-    ) : null
-
-  const renderSubtitle = () =>
-    subtitle ? (
-      <Typography
-        className={classes.subtitle}
-        data-testid={testIds?.subtitle}
-        size='medium'
-        color='dark-grey'
-      >
-        {subtitle}
-      </Typography>
-    ) : null
-
-  const renderCollapse = () =>
-    collapsible ? (
-      <Button.Circular
-        onClick={toggleCollapse}
-        data-testid={testIds?.collapse}
-        variant='flat'
-        icon={
-          <Rotate180 on={!collapsed}>
-            <ArrowDownMinor16 />
-          </Rotate180>
-        }
-      />
-    ) : null
-
-  const hasActions = actions || collapsible
-  const renderActions = () =>
-    hasActions ? (
-      <Container data-testid={testIds?.actions} className={classes.actions}>
-        {actions}
-        {renderCollapse()}
-      </Container>
-    ) : null
-
-  const hasHeader = title || subtitle || hasActions
-
-  return (
-    <Container
-      ref={ref}
-      className={cx(
-        {
-          [classes[variant]]: true,
-          [classes.collapsed]: variant === 'default' && collapsed
-        },
-        classes.root,
-        className
-      )}
-      style={style}
-      {...rest}
-    >
-      {hasHeader && (
-        <Container
-          data-testid={testIds?.header}
-          className={cx({
-            [classes[`${variant}Header`]]: true,
-            [classes[`${variant}CollapsedHeader`]]: collapsed
-          })}
-        >
-          {renderTitle()}
-          {renderSubtitle()}
-          {renderActions()}
-        </Container>
-      )}
-      <Collapse in={!collapsed} unmountOnExit>
-        {children}
-      </Collapse>
-    </Container>
-  )
-})
-
-Section.displayName = 'Section'
-Section.defaultProps = {
-  collapsible: false,
-  defaultCollapsed: true,
-  titleSize: 'medium'
-}
-
-export default Section