@toptal/picasso-lab 9.3.1 → 10.0.0

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

@@ -1,447 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Calendar renders 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      tabindex="0"
-    >
-      <div
-        class="PicassoCalendar-root"
-      >
-        <div
-          class="PicassoCalendar-actions"
-        >
-          <button
-            class="MuiButtonBase-root PicassoButton-small PicassoButton-secondary PicassoButton-root"
-            data-component-type="button"
-            tabindex="0"
-            title="Previous month"
-            type="button"
-          >
-            <span
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
-            >
-              <svg
-                class="PicassoSvgBackMinor16-root"
-                style="min-width: 16px; min-height: 16px;"
-                viewBox="0 0 16 16"
-              >
-                <path
-                  d="M9.997 3.29l.707.707-4 4 4 4-.707.707L5.29 7.997l.707-.707 4-4z"
-                />
-              </svg>
-            </span>
-          </button>
-          <h3
-            class="MuiTypography-root MuiTypography-h3"
-          >
-            February 2019
-          </h3>
-          <button
-            class="MuiButtonBase-root PicassoButton-small PicassoButton-secondary PicassoButton-root"
-            data-component-type="button"
-            tabindex="0"
-            title="Next month"
-            type="button"
-          >
-            <span
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
-            >
-              <svg
-                class="PicassoSvgChevronMinor16-root"
-                style="min-width: 16px; min-height: 16px;"
-                viewBox="0 0 16 16"
-              >
-                <path
-                  d="M5.997 3.29l4 4 .707.707-.707.707-4 4-.707-.707 4-4-4-4 .707-.707z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-        <div
-          class="calendar-month"
-        >
-          <div
-            class="PicassoCalendar-weekDays"
-          >
-            <div
-              class="PicassoCalendar-weekDay"
-            >
-              Mon
-            </div>
-            <div
-              class="PicassoCalendar-weekDay"
-            >
-              Tue
-            </div>
-            <div
-              class="PicassoCalendar-weekDay"
-            >
-              Wed
-            </div>
-            <div
-              class="PicassoCalendar-weekDay"
-            >
-              Thu
-            </div>
-            <div
-              class="PicassoCalendar-weekDay"
-            >
-              Fri
-            </div>
-            <div
-              class="PicassoCalendar-weekDay"
-            >
-              Sat
-            </div>
-            <div
-              class="PicassoCalendar-weekDay"
-            >
-              Sun
-            </div>
-          </div>
-          <div
-            class="PicassoCalendar-week"
-          >
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
-              data-simple-react-calendar-day="2019-01-28"
-              data-testid="day-button-28"
-              type="button"
-              value="Mon Jan 28 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              28
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
-              data-simple-react-calendar-day="2019-01-29"
-              data-testid="day-button-29"
-              type="button"
-              value="Tue Jan 29 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              29
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
-              data-simple-react-calendar-day="2019-01-30"
-              data-testid="day-button-30"
-              type="button"
-              value="Wed Jan 30 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              30
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
-              data-simple-react-calendar-day="2019-01-31"
-              data-testid="day-button-31"
-              type="button"
-              value="Thu Jan 31 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              31
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-01"
-              data-testid="day-button-1"
-              type="button"
-              value="Fri Feb 01 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              1
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-02"
-              data-testid="day-button-2"
-              type="button"
-              value="Sat Feb 02 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              2
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-03"
-              data-testid="day-button-3"
-              type="button"
-              value="Sun Feb 03 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              3
-            </button>
-          </div>
-          <div
-            class="PicassoCalendar-week"
-          >
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-04"
-              data-testid="day-button-4"
-              type="button"
-              value="Mon Feb 04 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              4
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-05"
-              data-testid="day-button-5"
-              type="button"
-              value="Tue Feb 05 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              5
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-06"
-              data-testid="day-button-6"
-              type="button"
-              value="Wed Feb 06 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              6
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-07"
-              data-testid="day-button-7"
-              type="button"
-              value="Thu Feb 07 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              7
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-08"
-              data-testid="day-button-8"
-              type="button"
-              value="Fri Feb 08 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              8
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-09"
-              data-testid="day-button-9"
-              type="button"
-              value="Sat Feb 09 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              9
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-10"
-              data-testid="day-button-10"
-              type="button"
-              value="Sun Feb 10 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              10
-            </button>
-          </div>
-          <div
-            class="PicassoCalendar-week"
-          >
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-11"
-              data-testid="day-button-11"
-              type="button"
-              value="Mon Feb 11 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              11
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-12"
-              data-testid="day-button-12"
-              type="button"
-              value="Tue Feb 12 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              12
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-13"
-              data-testid="day-button-13"
-              type="button"
-              value="Wed Feb 13 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              13
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-14"
-              data-testid="day-button-14"
-              type="button"
-              value="Thu Feb 14 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              14
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-15"
-              data-testid="day-button-15"
-              type="button"
-              value="Fri Feb 15 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              15
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-16"
-              data-testid="day-button-16"
-              type="button"
-              value="Sat Feb 16 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              16
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-17"
-              data-testid="day-button-17"
-              type="button"
-              value="Sun Feb 17 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              17
-            </button>
-          </div>
-          <div
-            class="PicassoCalendar-week"
-          >
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-18"
-              data-testid="day-button-18"
-              type="button"
-              value="Mon Feb 18 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              18
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-19"
-              data-testid="day-button-19"
-              type="button"
-              value="Tue Feb 19 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              19
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-20"
-              data-testid="day-button-20"
-              type="button"
-              value="Wed Feb 20 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              20
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-21"
-              data-testid="day-button-21"
-              type="button"
-              value="Thu Feb 21 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              21
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-22"
-              data-testid="day-button-22"
-              type="button"
-              value="Fri Feb 22 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              22
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-23"
-              data-testid="day-button-23"
-              type="button"
-              value="Sat Feb 23 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              23
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-24"
-              data-testid="day-button-24"
-              type="button"
-              value="Sun Feb 24 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              24
-            </button>
-          </div>
-          <div
-            class="PicassoCalendar-week"
-          >
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-25"
-              data-testid="day-button-25"
-              type="button"
-              value="Mon Feb 25 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              25
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-26"
-              data-testid="day-button-26"
-              type="button"
-              value="Tue Feb 26 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              26
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-27"
-              data-testid="day-button-27"
-              type="button"
-              value="Wed Feb 27 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              27
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable"
-              data-simple-react-calendar-day="2019-02-28"
-              data-testid="day-button-28"
-              type="button"
-              value="Thu Feb 28 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              28
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
-              data-simple-react-calendar-day="2019-03-01"
-              data-testid="day-button-1"
-              type="button"
-              value="Fri Mar 01 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              1
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
-              data-simple-react-calendar-day="2019-03-02"
-              data-testid="day-button-2"
-              type="button"
-              value="Sat Mar 02 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              2
-            </button>
-            <button
-              class="PicassoCalendar-day PicassoCalendar-selectable PicassoCalendar-grayed"
-              data-simple-react-calendar-day="2019-03-03"
-              data-testid="day-button-3"
-              type="button"
-              value="Sun Mar 03 2019 00:00:00 GMT+0000 (Coordinated Universal Time)"
-            >
-              3
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/Calendar/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Calendar'
-export * from './Calendar'

package/src/Calendar/styles.ts

@@ -1,104 +0,0 @@
-import { Theme, createStyles } from '@material-ui/core/styles'
-import { alpha, rem } from '@toptal/picasso-shared'
-
-export default ({ palette, shadows }: Theme) =>
-  createStyles({
-    root: {
-      padding: '1.875em',
-      color: palette.grey.darker,
-      display: 'flex',
-      flexDirection: 'column',
-      flexBasis: '20.5rem',
-      maxWidth: '20.5rem',
-      boxShadow: shadows[2],
-      backgroundColor: palette.common.white
-    },
-    month: {},
-    week: {
-      display: 'flex'
-    },
-    day: {
-      height: '2.5rem',
-      width: '2.5rem',
-      minWidth: '2.5rem',
-      verticalAlign: 'middle',
-      fontSize: '0.75rem',
-      userSelect: 'none',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      background: palette.common.white,
-      position: 'relative',
-      margin: 0,
-      padding: 0,
-      border: 'none',
-      outline: 0
-    },
-    weekDays: {
-      display: 'flex',
-      textAlign: 'center',
-      fontSize: '0.75em',
-      textTransform: 'uppercase',
-      color: palette.grey.main2,
-      paddingBottom: rem('11px')
-    },
-    weekDay: {
-      flexBasis: '15%'
-    },
-
-    actions: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      marginBottom: '1.5rem'
-    },
-    selected: {
-      background: palette.blue.lighter
-    },
-    selectable: {
-      cursor: 'pointer',
-
-      '&:hover, &:focus': {
-        backgroundColor: alpha(palette.blue.main, 0.24)
-      },
-
-      '&$startSelection:hover, &$endSelection:hover': {
-        backgroundColor: palette.blue.main
-      }
-    },
-    startSelection: {
-      backgroundColor: palette.blue.main,
-      color: palette.common.white,
-
-      '&$today:after': {
-        backgroundColor: palette.common.white
-      }
-    },
-    endSelection: {
-      backgroundColor: palette.blue.main,
-      color: palette.common.white,
-
-      '&$today:after': {
-        backgroundColor: palette.common.white
-      }
-    },
-    today: {
-      display: 'flex',
-      flexDirection: 'column',
-
-      '&:after': {
-        content: '""',
-        height: '0.25rem',
-        width: '0.25rem',
-        borderRadius: '50%',
-        background: palette.blue.main,
-        position: 'absolute',
-        bottom: '0.375rem'
-      }
-    },
-    grayed: {
-      color: palette.grey.main2
-    },
-    disabled: {
-      color: palette.grey.main
-    }
-  })

package/src/Calendar/test.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { render } from '@toptal/picasso/test-utils'
-
-import Calendar from './Calendar'
-
-describe('Calendar', () => {
-  it('renders', () => {
-    const value = new Date('12-12-2019')
-
-    const { container } = render(
-      <Calendar
-        activeMonth={new Date(2019, 1, 1)}
-        onChange={() => {}}
-        value={value}
-      />
-    )
-
-    expect(container).toMatchSnapshot()
-  })
-})

package/src/Calendar/types.ts

@@ -1,42 +0,0 @@
-import { ReactNode } from 'react'
-
-export interface DayProps {
-  isDisabled: boolean
-  isSelected: boolean
-  isSelectable: boolean
-  isToday: boolean
-  isMonthNext: boolean
-  isMonthPrev: boolean
-  isSelectionStart: boolean
-  isSelectionEnd: boolean
-  handleOnClick: () => void
-  handleOnEnter: () => void
-  date: Date
-  ISODate: string
-  getDayFormatted: (date: Date) => string
-  key?: string
-  children?: ReactNode
-}
-
-export interface MonthHeaderProps {
-  switchMonth: (diff: number) => void
-  activeMonth: Date
-}
-
-export interface WeekProps {
-  children?: ReactNode
-}
-
-export interface DayOfWeekProps {
-  day: string
-  key: string
-  children?: ReactNode
-}
-
-export interface DaysOfWeekProps {
-  children?: ReactNode
-}
-
-export interface CalendarProps {
-  children?: ReactNode
-}