@toptal/picasso-lab 9.3.1 → 10.0.0

package/dist-package/README.md

@@ -1,26 +0,0 @@
-# @toptal/picasso-lab
-
-[![Picasso NPM package](https://img.shields.io/npm/v/@toptal/picasso-lab?color=green&logo=toptal)](https://www.npmjs.com/package/@toptal/picasso-lab)
-
-This package is a home of experimental features. Once APIs are battle tested and proven to work they are moved to `@toptal/picasso`.
-
-## Prerequisites
-
-The following peer dependencies are required:
-
-- `@toptal/picasso`
-- `@toptal/picasso-shared`
-- `react`
-- `react-dom`
-
-## Setup
-
-- `yarn add @toptal/picasso-lab`
-
-## Limitations
-
-This package does not practice strict [semantic versioning](https://semver.org/) and is not supported by our [Version Support Policy](https://toptal-core.atlassian.net/wiki/spaces/FE/pages/1357545615/Version+Support+Policy). Breaking changes can be rolled out as minor/path releases.
-
-## Documentation
-
-Documentation and demos are available at [picasso.toptal.net](https://picasso.toptal.net/).

package/dist-package/package.json

@@ -1,53 +0,0 @@
-{
-  "name": "@toptal/picasso-lab",
-  "version": "9.3.1",
-  "description": "Lab components of Picasso",
-  "author": "Toptal",
-  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-lab#readme",
-  "license": "MIT",
-  "main": "index.js",
-  "module": "index.js",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/toptal/picasso.git"
-  },
-  "scripts": {
-    "build:package": "cross-env NODE_ENV=production node ../../bin/build.js --tsConfig=./tsconfig.build.json",
-    "prepublishOnly": "../../bin/prepublish.js"
-  },
-  "bugs": {
-    "url": "https://github.com/toptal/picasso/issues"
-  },
-  "peerDependencies": {
-    "@material-ui/core": "4.11.0",
-    "@toptal/picasso": "^13.4.2",
-    "@toptal/picasso-shared": "^7",
-    "popper.js": "^1.16.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
-  },
-  "dependencies": {
-    "@toptal/picasso-provider": "^0.3.1",
-    "ap-style-title-case": "^1.1.2",
-    "classnames": "^2.3.1",
-    "date-fns": "^2.9.0",
-    "date-fns-tz": "^1.1.3",
-    "react-dropzone": "^11.4.0",
-    "react-router-dom": "^5.2.0",
-    "simple-react-calendar": "^2.2.8"
-  },
-  "devDependencies": {
-    "@babel/types": "^7.15.0",
-    "@types/classnames": "^2.3.1",
-    "@types/styled-components": "^5.1.13",
-    "storybook-readme": "^5.0.9",
-    "styled-components": "^5.3.1"
-  },
-  "sideEffects": [
-    "**/styles.ts",
-    "**/styles.js"
-  ]
-}

package/src/Calendar/Calendar.tsx

@@ -1,215 +0,0 @@
-import React, { forwardRef, ReactNode } from 'react'
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import SimpleReactCalendar from 'simple-react-calendar'
-import cx from 'classnames'
-import format from 'date-fns/format'
-import { Theme, makeStyles } from '@material-ui/core/styles'
-import { BaseProps } from '@toptal/picasso-shared'
-import { Button, Typography } from '@toptal/picasso'
-import { ChevronMinor16, BackMinor16 } from '@toptal/picasso/Icon'
-
-import {
-  CalendarProps,
-  MonthHeaderProps,
-  WeekProps,
-  DayOfWeekProps,
-  DayProps,
-  DaysOfWeekProps
-} from './types'
-import styles from './styles'
-
-type SimpleReactCalendarRangeType = {
-  start: Date
-  end: Date
-}
-export type DateOrDateRangeType = Date | DateRangeType
-export type DateRangeType = [Date, Date]
-
-export { DayProps }
-
-const getNormalizedValue = (value: DateOrDateRangeType | undefined) => {
-  if (!value) {
-    return
-  }
-
-  if (value instanceof Date) {
-    return value
-  }
-
-  const [start, end] = value
-
-  return { start, end }
-}
-
-export interface Props
-  extends BaseProps,
-    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'> {
-  onChange: (value: DateOrDateRangeType) => void
-  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void
-  renderDay?: (args: DayProps) => ReactNode
-  minDate?: Date
-  maxDate?: Date
-  range?: boolean
-  value?: DateOrDateRangeType
-  activeMonth?: Date
-  disabledIntervals?: { start: Date; end: Date }[]
-  weekStartsOn?: number
-}
-
-const isDateRange = (
-  value: Date | SimpleReactCalendarRangeType
-): value is SimpleReactCalendarRangeType => {
-  return !(value instanceof Date) && Boolean(value.start && value.end)
-}
-
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoCalendar' })
-
-export const Calendar = forwardRef<HTMLDivElement, Props>(function Calendar(
-  props,
-  ref
-) {
-  const classes = useStyles()
-  const {
-    range,
-    activeMonth,
-    value,
-    onChange,
-    minDate,
-    maxDate,
-    disabledIntervals,
-    renderDay,
-    weekStartsOn,
-    ...rest
-  } = props
-
-  const handleChange = (selection: Date | SimpleReactCalendarRangeType) => {
-    if (isDateRange(selection)) {
-      const { start, end } = selection
-
-      onChange([start, end])
-    } else {
-      onChange(selection)
-    }
-  }
-
-  return (
-    <div ref={ref} {...rest} tabIndex={0}>
-      <SimpleReactCalendar
-        selected={getNormalizedValue(value)}
-        onSelect={handleChange}
-        customRender={({ children }: CalendarProps) => {
-          return <div className={classes.root}>{children}</div>
-        }}
-        renderDay={(dayProps: DayProps) => {
-          const {
-            key,
-            isDisabled,
-            isSelected,
-            isSelectable,
-            isToday,
-            isMonthNext,
-            isMonthPrev,
-            isSelectionStart,
-            isSelectionEnd,
-            handleOnClick,
-            handleOnEnter,
-            getDayFormatted,
-            date,
-            ISODate
-          } = dayProps
-
-          const defaultMarkup = (
-            <button
-              data-testid={`day-button-${
-                isSelected ? 'selected' : getDayFormatted(date)
-              }`}
-              data-simple-react-calendar-day={ISODate}
-              key={key}
-              tabIndex={isDisabled || !isSelectable ? -1 : undefined}
-              className={cx(classes.day, {
-                [classes.selected]: isSelected,
-                [classes.selectable]: isSelectable,
-                [classes.today]: isToday,
-                [classes.grayed]:
-                  (isMonthPrev || isMonthNext) && !isSelected && !isDisabled,
-                [classes.disabled]: isDisabled || !isSelectable,
-                [classes.startSelection]: isSelectionStart,
-                [classes.endSelection]: isSelectionEnd
-              })}
-              onClick={handleOnClick}
-              onMouseEnter={handleOnEnter}
-              value={date.toString()}
-              type='button'
-            >
-              {getDayFormatted(date)}
-            </button>
-          )
-
-          return renderDay
-            ? renderDay({
-                ...dayProps,
-                children: defaultMarkup
-              })
-            : defaultMarkup
-        }}
-        renderMonthHeader={({
-          switchMonth,
-          activeMonth: headerActiveMonth
-        }: MonthHeaderProps) => {
-          return (
-            <div className={classes.actions}>
-              <Button
-                title='Previous month'
-                variant='secondary'
-                size='small'
-                onClick={() => switchMonth(-1)}
-              >
-                <BackMinor16 />
-              </Button>
-              <Typography variant='heading' size='medium'>
-                {format(headerActiveMonth, 'MMMM y')}
-              </Typography>
-              <Button
-                title='Next month'
-                variant='secondary'
-                size='small'
-                onClick={() => switchMonth(1)}
-              >
-                <ChevronMinor16 />
-              </Button>
-            </div>
-          )
-        }}
-        renderDaysOfWeek={({ children }: DaysOfWeekProps) => {
-          return <div className={classes.weekDays}>{children}</div>
-        }}
-        renderDayOfWeek={({ day, key }: DayOfWeekProps) => {
-          return (
-            <div key={key} className={classes.weekDay}>
-              {day}
-            </div>
-          )
-        }}
-        renderWeek={({ children }: WeekProps) => {
-          return <div className={classes.week}>{children}</div>
-        }}
-        activeMonth={activeMonth || value}
-        mode={range ? 'range' : 'single'}
-        minDate={minDate}
-        maxDate={maxDate}
-        disabledIntervals={disabledIntervals}
-        getNoticeContent={() => null}
-        weekStartsOn={weekStartsOn}
-      />
-    </div>
-  )
-})
-
-Calendar.defaultProps = {
-  range: false
-}
-
-Calendar.displayName = 'Calendar'
-
-export default Calendar