@toptal/picasso-lab 9.3.1 → 10.0.0

package/src/EmptyStatePage/story/index.jsx

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

package/src/EmptyStatePage/styles.ts

@@ -1,9 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    image: {
-      width: '8rem',
-      height: '8rem'
-    }
-  })

package/src/Note/Note.tsx

@@ -1,36 +0,0 @@
-import React, { forwardRef } from 'react'
-import { makeStyles, Theme } from '@material-ui/core/styles'
-import { BaseProps } from '@toptal/picasso-shared'
-import cx from 'classnames'
-
-import NoteTitle from '../NoteTitle'
-import NoteSubtitle from '../NoteSubtitle'
-import NoteContent from '../NoteContent'
-import styles from './styles'
-
-export interface Props extends BaseProps {
-  children: React.ReactNode
-}
-
-const useStyles = makeStyles<Theme>(styles)
-
-export const Note = forwardRef<HTMLDivElement, Props>(function Note(
-  { children, className, ...rest },
-  ref
-) {
-  const classes = useStyles()
-
-  return (
-    <div ref={ref} className={cx(classes.root, className)} {...rest}>
-      {children}
-    </div>
-  )
-})
-
-Note.displayName = 'Note'
-
-export default Object.assign(Note, {
-  Title: NoteTitle,
-  Subtitle: NoteSubtitle,
-  Content: NoteContent
-})

package/src/Note/__snapshots__/test.tsx.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Note renders 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class="makeStyles-root"
-    >
-      <div
-        class="makeStyles-root"
-      >
-        <h4
-          class="MuiTypography-root MuiTypography-h4"
-        >
-          Title
-        </h4>
-      </div>
-      <div
-        class="PicassoContainer-bottomsmallMargin"
-      >
-        <p
-          class="MuiTypography-root PicassoTypography-bodySmall PicassoTypography-darkGrey MuiTypography-body1"
-        >
-          Subtitle
-        </p>
-      </div>
-      <p
-        class="MuiTypography-root PicassoTypography-bodyMedium PicassoTypography-black MuiTypography-body1"
-      >
-        Content
-      </p>
-    </div>
-  </div>
-</div>
-`;

package/src/Note/index.ts

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

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

@@ -1,14 +0,0 @@
-import React from 'react'
-import { Note } from '@toptal/picasso-lab'
-
-const Example = () => (
-  <Note>
-    <Note.Title>Awesome title</Note.Title>
-    <Note.Subtitle>added on November 14, 2019 at 3:46</Note.Subtitle>
-    <Note.Content>
-      This is a dummy content comment used for example purpouses
-    </Note.Content>
-  </Note>
-)
-
-export default Example

package/src/Note/story/index.jsx

@@ -1,23 +0,0 @@
-import PicassoBook from '~/.storybook/components/PicassoBook'
-import noteTitleStory from '../../NoteTitle/story'
-import noteSubtitleStory from '../../NoteSubtitle/story'
-import noteContentStory from '../../NoteContent/story'
-import { Note } from '../Note'
-
-const page = PicassoBook.section('Picasso Lab').createPage(
-  'Note',
-  `
-  ${PicassoBook.createBaseDocsLink(
-    'https://app.abstract.com/projects/1b06c884-06af-482a-bf12-a82f521a19a1/branches/master/commits/cd38a6cc5bf8f8b535b142fb9a2c9578c641dd82/files/96635516-c961-460f-988e-7ca2f565a7ec/layers/3B863FAB-C94C-4EE2-8061-FBFAB45778AE?mode=design&present=true&selected=root-699B47BF-FAEA-4D18-8474-A2EB3EA863B2'
-  )}
-  `
-)
-
-page
-  .createTabChapter('Props')
-  .addComponentDocs({ component: Note, name: 'Note' })
-  .addComponentDocs(noteTitleStory.componentDocs)
-  .addComponentDocs(noteSubtitleStory.componentDocs)
-  .addComponentDocs(noteContentStory.componentDocs)
-
-page.createChapter().addExample('Note/story/Default.example.tsx', 'Default') // picasso-skip-visuals

package/src/Note/styles.ts

@@ -1,27 +0,0 @@
-import { Theme, createStyles } from '@material-ui/core/styles'
-
-const barWidth = 4
-
-export default ({ palette, sizes, spacing }: Theme) =>
-  createStyles({
-    root: {
-      borderRadius: sizes.borderRadius.medium,
-      border: `1px solid ${palette.grey.lighter2}`,
-      padding: `${spacing(3)}px ${spacing(3)}px ${spacing(3)}px ${
-        spacing(3) + barWidth
-      }px`,
-      position: 'relative',
-      overflow: 'hidden',
-      backgroundColor: palette.common.white,
-      '&:before': {
-        background: palette.yellow.main,
-        display: 'block',
-        height: '100%',
-        left: 0,
-        position: 'absolute',
-        content: '""',
-        top: 0,
-        width: barWidth
-      }
-    }
-  })

package/src/Note/test.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { render } from '@toptal/picasso/test-utils'
-
-import Note from './Note'
-
-const renderNote = () => {
-  return render(
-    <Note>
-      <Note.Title>Title</Note.Title>
-      <Note.Subtitle>Subtitle</Note.Subtitle>
-      <Note.Content>Content</Note.Content>
-    </Note>
-  )
-}
-
-describe('Note', () => {
-  it('renders', () => {
-    const { container } = renderNote()
-
-    expect(container).toMatchSnapshot()
-  })
-})

package/src/NoteContent/NoteContent.tsx

@@ -1,23 +0,0 @@
-import React, { forwardRef, ReactNode } from 'react'
-import { BaseProps } from '@toptal/picasso-shared'
-import { Typography } from '@toptal/picasso'
-
-export interface Props extends BaseProps {
-  children: ReactNode
-}
-
-export const NoteContent = forwardRef<HTMLDivElement, Props>(
-  function NoteContent({ children, ...rest }, ref) {
-    return (
-      <Typography ref={ref} as='p' size='medium' color='black' {...rest}>
-        {children}
-      </Typography>
-    )
-  }
-)
-
-NoteContent.defaultProps = {}
-
-NoteContent.displayName = 'NoteContent'
-
-export default NoteContent

package/src/NoteContent/index.ts

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

package/src/NoteContent/story/index.jsx

@@ -1,12 +0,0 @@
-import PicassoBook from '~/.storybook/components/PicassoBook'
-import { NoteContent } from '../NoteContent'
-
-const componentDocs = PicassoBook.createComponentDocs(
-  NoteContent,
-  'Note.Content',
-  'Note content'
-)
-
-export default {
-  componentDocs
-}

package/src/NoteSubtitle/NoteSubtitle.tsx

@@ -1,25 +0,0 @@
-import React, { forwardRef, ReactNode } from 'react'
-import { BaseProps } from '@toptal/picasso-shared'
-import { Container, Typography } from '@toptal/picasso'
-
-export interface Props extends BaseProps {
-  children: ReactNode
-}
-
-export const NoteSubtitle = forwardRef<HTMLDivElement, Props>(
-  function NoteSubtitle({ children, ...rest }, ref) {
-    return (
-      <Container ref={ref} bottom='small' {...rest}>
-        <Typography color='dark-grey' size='small'>
-          {children}
-        </Typography>
-      </Container>
-    )
-  }
-)
-
-NoteSubtitle.defaultProps = {}
-
-NoteSubtitle.displayName = 'NoteSubtitle'
-
-export default NoteSubtitle

package/src/NoteSubtitle/index.ts

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

package/src/NoteSubtitle/story/index.jsx

@@ -1,12 +0,0 @@
-import PicassoBook from '~/.storybook/components/PicassoBook'
-import { NoteSubtitle } from '../NoteSubtitle'
-
-const componentDocs = PicassoBook.createComponentDocs(
-  NoteSubtitle,
-  'Note.Subtitle',
-  'Note subtitle'
-)
-
-export default {
-  componentDocs
-}

package/src/NoteTitle/NoteTitle.tsx

@@ -1,34 +0,0 @@
-import React, { forwardRef } from 'react'
-import { makeStyles, Theme } from '@material-ui/core/styles'
-import { BaseProps } from '@toptal/picasso-shared'
-import cx from 'classnames'
-import { Typography } from '@toptal/picasso'
-
-import styles from './styles'
-
-export interface Props extends BaseProps {
-  children: React.ReactNode
-}
-
-const useStyles = makeStyles<Theme>(styles)
-
-export const NoteTitle = forwardRef<HTMLDivElement, Props>(function NoteTitle(
-  { children, className, ...rest },
-  ref
-) {
-  const classes = useStyles()
-
-  return (
-    <div ref={ref} className={cx(classes.root, className)} {...rest}>
-      <Typography variant='heading' size='small'>
-        {children}
-      </Typography>
-    </div>
-  )
-})
-
-NoteTitle.defaultProps = {}
-
-NoteTitle.displayName = 'NoteTitle'
-
-export default NoteTitle

package/src/NoteTitle/index.ts

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

package/src/NoteTitle/story/index.jsx

@@ -1,12 +0,0 @@
-import PicassoBook from '~/.storybook/components/PicassoBook'
-import { NoteTitle } from '../NoteTitle'
-
-const componentDocs = PicassoBook.createComponentDocs(
-  NoteTitle,
-  'Note.Title',
-  'Note title'
-)
-
-export default {
-  componentDocs
-}

package/src/NoteTitle/styles.ts

@@ -1,8 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    root: {
-      marginBottom: '0.25rem'
-    }
-  })

package/src/OverviewBlock/OverviewBlock.tsx

@@ -1,125 +0,0 @@
-import React, {
-  forwardRef,
-  ElementType,
-  HTMLAttributes,
-  MouseEvent,
-  ReactNode
-} from 'react'
-import { Theme, makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
-import {
-  OverridableComponent,
-  ColorType,
-  BaseProps,
-  TextLabelProps,
-  useTitleCase
-} from '@toptal/picasso-shared'
-import { Container, Typography } from '@toptal/picasso'
-import { toTitleCase } from '@toptal/picasso/utils'
-
-import styles from './styles'
-import { useOverviewBlockGroupContext } from '../OverviewBlockGroup/OverviewBlockGroupContext'
-import OverviewBlockGroup from '../OverviewBlockGroup'
-import OverviewBlockRow from '../OverviewBlockRow'
-
-type VariantColorType = Extract<ColorType, 'red' | 'green' | 'yellow'>
-
-type Variant = `value-${VariantColorType}` | `label-${VariantColorType}`
-
-type ColorSchema = {
-  value: ColorType
-  label: ColorType
-}
-
-export type Props = BaseProps &
-  TextLabelProps &
-  HTMLAttributes<HTMLButtonElement> & {
-    /** Counter value  */
-    value: ReactNode
-    /** Counter title  */
-    label: string
-    /** The color variant  */
-    variant?: Variant
-    /** Component used for the root node. Either a string to use a DOM element or a component. */
-    as?: ElementType
-    /** Callback invoked when component is clicked */
-    onClick?: (event: MouseEvent) => void
-  }
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoOverviewBlock'
-})
-
-export const OverviewBlock: OverridableComponent<Props> = forwardRef<
-  HTMLButtonElement,
-  Props
->(function OverviewBlock(props, ref) {
-  const {
-    value,
-    label,
-    variant,
-    as,
-    className,
-    onClick,
-    titleCase: propsTitleCase,
-    ...rest
-  } = props
-  const classes = useStyles()
-  const { align, blockWidth } = useOverviewBlockGroupContext()
-
-  const color: ColorSchema = {
-    value: 'black',
-    label: 'dark-grey'
-  }
-
-  if (variant) {
-    const [partName, colorName] = variant.split('-') as [
-      keyof ColorSchema,
-      ColorType
-    ]
-
-    color[partName] = colorName
-  }
-
-  const isClickable = Boolean(onClick) || typeof as !== 'string'
-
-  const Component = isClickable && as ? as : 'div'
-
-  const titleCase = useTitleCase(propsTitleCase)
-
-  return (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cx(
-        { [classes.clickable]: isClickable },
-        { [classes.disableOutline]: !isClickable },
-        classes[`${align}Align`],
-        classes[`${blockWidth}Width`],
-        classes.root,
-        className
-      )}
-      onClick={onClick}
-    >
-      <Container align='left'>
-        <Typography size='xsmall' weight='semibold' color={color.label}>
-          {titleCase ? toTitleCase(label) : label}
-        </Typography>
-        <Typography size='large' weight='semibold' color={color.value}>
-          {value}
-        </Typography>
-      </Container>
-    </Component>
-  )
-})
-
-OverviewBlock.defaultProps = {
-  as: 'button'
-}
-
-OverviewBlock.displayName = 'OverviewBlock'
-
-export default Object.assign(OverviewBlock, {
-  Group: OverviewBlockGroup,
-  Row: OverviewBlockRow
-})

package/src/OverviewBlock/index.ts

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

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

@@ -1,35 +0,0 @@
-import React from 'react'
-import { OverviewBlock } from '@toptal/picasso-lab'
-
-const DefaultExample = () => {
-  const handleClick = (title: string) => {
-    window.alert(`${title} clicked`)
-  }
-
-  return (
-    <OverviewBlock.Group>
-      <OverviewBlock
-        value='4249'
-        label='ACH'
-        onClick={() => handleClick('ACH')}
-      />
-      <OverviewBlock
-        value='19302'
-        label='Credit Card'
-        onClick={() => handleClick('Credit Card')}
-      />
-      <OverviewBlock
-        value='979'
-        label='PayPal'
-        onClick={() => handleClick('PayPal')}
-      />
-      <OverviewBlock
-        value='803'
-        label='Wire'
-        onClick={() => handleClick('Wire')}
-      />
-    </OverviewBlock.Group>
-  )
-}
-
-export default DefaultExample

package/src/OverviewBlock/story/Multiline.example.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { OverviewBlock } from '@toptal/picasso-lab'
-
-const MultilineExample = () => (
-  <section>
-    <OverviewBlock.Group>
-      <OverviewBlock.Row>
-        <OverviewBlock
-          value='$26,125,123.70'
-          label='Outstanding'
-          variant='label-yellow'
-        />
-        <OverviewBlock
-          value='$5,837,806.68'
-          label='Overdue'
-          variant='label-red'
-        />
-        <OverviewBlock
-          value='$1,232,107.99'
-          label='Disputed'
-          variant='label-red'
-        />
-        <OverviewBlock
-          value='$1,722,076.43'
-          label='Incollections'
-          variant='label-red'
-        />
-      </OverviewBlock.Row>
-      <OverviewBlock.Row>
-        <OverviewBlock
-          value='$935,590.65'
-          label='Written off'
-          variant='label-red'
-        />
-        <OverviewBlock value='$5,758,716.46' label='Pending receipt' />
-        <OverviewBlock
-          value='$44,244,163.83'
-          label='Credited'
-          variant='label-green'
-        />
-        <OverviewBlock
-          value='$585,895,606.35'
-          label='Paid'
-          variant='label-green'
-        />
-      </OverviewBlock.Row>
-    </OverviewBlock.Group>
-  </section>
-)
-
-export default MultilineExample

package/src/OverviewBlock/story/Number.example.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { OverviewBlock } from '@toptal/picasso-lab'
-
-const NumberExample = () => {
-  return (
-    <OverviewBlock.Group>
-      <OverviewBlock value='63' label='Pending tasks' variant='label-red' />
-      <OverviewBlock value='0' label="Today's tasks" variant='label-red' />
-      <OverviewBlock
-        value='0'
-        label="This week's tasks"
-        variant='label-green'
-      />
-      <OverviewBlock value='63' label='Total tasks' />
-      <OverviewBlock value='63' label='Playbook tasks' variant='label-yellow' />
-    </OverviewBlock.Group>
-  )
-}
-
-export default NumberExample

package/src/OverviewBlock/story/Routing.example.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import { OverviewBlock } from '@toptal/picasso-lab'
-import { MemoryRouter as Router, Link, Route, Switch } from 'react-router-dom'
-
-const Index = () => <h2>Home</h2>
-const About = () => <h2>About</h2>
-const Users = () => <h2>Users</h2>
-
-const RoutingExample = () => (
-  <Router>
-    <div>
-      <OverviewBlock.Group>
-        <OverviewBlock value='10' label='Home' as={Link} to='/' />
-        <OverviewBlock
-          value='11'
-          label='About'
-          variant='label-green'
-          as={Link}
-          to='/about'
-        />
-        <OverviewBlock
-          value='15'
-          label='Users'
-          variant='label-green'
-          as={Link}
-          to='/users'
-        />
-      </OverviewBlock.Group>
-
-      <Switch>
-        <Route path='/' exact component={Index} />
-        <Route path='/about' component={About} />
-        <Route path='/users' component={Users} />
-        <Route component={Index} />
-      </Switch>
-    </div>
-  </Router>
-)
-
-export default RoutingExample

package/src/OverviewBlock/story/Text.example.tsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import { OverviewBlock } from '@toptal/picasso-lab'
-
-const TextExample = () => {
-  return (
-    <OverviewBlock.Group>
-      <OverviewBlock value='Active' label='Status' variant='value-green' />
-      <OverviewBlock value='Developers' label='Interested In' />
-      <OverviewBlock value='Ambiguous' label='Priority / Intent' />
-      <OverviewBlock value='1968' label='Days in Funnel' />
-    </OverviewBlock.Group>
-  )
-}
-
-export default TextExample