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

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

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

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

package/src/Calendar/styles.ts

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

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

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