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

package/src/EmptyStatePage/story/index.jsx

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

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

package/src/Note/Note.tsx

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

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

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

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

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

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

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

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

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

package/src/NoteContent/story/index.jsx

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

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

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

package/src/NoteSubtitle/story/index.jsx

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

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

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

package/src/NoteTitle/story/index.jsx

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

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

package/src/OverviewBlock/OverviewBlock.tsx

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

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

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

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

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

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

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