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

package/dist-package/README.md

@@ -0,0 +1,26 @@
+# @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/{Section → dist-package/Section}/Section.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { BaseProps, SizeType } from '@toptal/picasso';
-declare type VariantType = 'bordered' | 'default';
+declare type VariantType = 'bordered' | 'default' | 'withHeaderBar';
 export interface Props extends BaseProps {
     /** Title of the Section */
     title?: ReactNode;

package/{Section → dist-package/Section}/Section.js

@@ -20,7 +20,7 @@ const useStyles = makeStyles(styles, {
     name: 'PicassoSection'
 });
 export const Section = forwardRef(function Section(props, ref) {
-    const { className, style, title, subtitle, actions, children, testIds, collapsible = false, defaultCollapsed = true, variant, titleSize = 'medium' } = props, rest = __rest(props, ["className", "style", "title", "subtitle", "actions", "children", "testIds", "collapsible", "defaultCollapsed", "variant", "titleSize"]);
+    const { className, style, title, subtitle, actions, children, testIds, collapsible = false, defaultCollapsed = true, variant = 'default', titleSize = 'medium' } = props, rest = __rest(props, ["className", "style", "title", "subtitle", "actions", "children", "testIds", "collapsible", "defaultCollapsed", "variant", "titleSize"]);
     const classes = useStyles();
     const [collapsed, setCollapsed] = useState(collapsible ? defaultCollapsed : false);
     const toggleCollapse = () => setCollapsed(!collapsed);
@@ -34,11 +34,12 @@ export const Section = forwardRef(function Section(props, ref) {
         renderCollapse())) : null;
     const hasHeader = title || subtitle || hasActions;
     return (React.createElement(Container, Object.assign({ ref: ref, className: cx({
-            [classes.bordered]: variant === 'bordered',
-            [classes.collapsed]: variant !== 'bordered' && collapsed
+            [classes[variant]]: true,
+            [classes.collapsed]: variant === 'default' && collapsed
         }, classes.root, className), style: style }, rest),
-        hasHeader && (React.createElement(Container, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.header, className: cx(classes.header, {
-                [classes.collapsedHeader]: collapsed
+        hasHeader && (React.createElement(Container, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.header, className: cx({
+                [classes[`${variant}Header`]]: true,
+                [classes[`${variant}CollapsedHeader`]]: collapsed
             }) },
             renderTitle(),
             renderSubtitle(),

package/dist-package/Section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../src/Section/Section.tsx"],"names":[],"mappings":"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"}

package/dist-package/Section/styles.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@material-ui/core';
+declare const _default: ({ sizes, palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "default" | "title" | "root" | "bordered" | "actions" | "subtitle" | "collapsed" | "withHeaderBar" | "defaultHeader" | "borderedHeader" | "withHeaderBarHeader" | "defaultCollapsedHeader" | "borderedCollapsedHeader" | "withHeaderBarCollapsedHeader">;
+export default _default;

package/dist-package/Section/styles.js

@@ -0,0 +1,60 @@
+import { createStyles } from '@material-ui/core';
+const defaultHeader = {
+    display: 'flex',
+    paddingBottom: '1.5rem'
+};
+const defaultCollapsedHeader = {
+    paddingBottom: '0'
+};
+export default ({ sizes, palette }) => createStyles({
+    root: {
+        paddingTop: '2rem'
+    },
+    title: {
+        marginRight: '1rem'
+    },
+    subtitle: {
+        alignSelf: 'center',
+        marginRight: '1rem'
+    },
+    actions: {
+        display: 'flex',
+        marginLeft: 'auto'
+    },
+    collapsed: {
+        paddingBottom: '2rem'
+    },
+    default: {},
+    bordered: {
+        borderRadius: sizes.borderRadius.medium,
+        border: `solid ${sizes.borderWidth} ${palette.grey.light}`,
+        padding: '2rem',
+        '& > :last-child': {
+            paddingBottom: '0'
+        }
+    },
+    withHeaderBar: {
+        padding: 0,
+        '& > :last-child:not(:first-child)': {
+            padding: '1.5rem'
+        },
+        borderRadius: sizes.borderRadius.medium,
+        border: `solid ${sizes.borderWidth} ${palette.grey.light2}`
+    },
+    defaultHeader,
+    borderedHeader: defaultHeader,
+    withHeaderBarHeader: {
+        display: 'flex',
+        padding: '0.75rem 1rem',
+        borderRadius: `${sizes.borderRadius.medium} ${sizes.borderRadius.medium} 0 0`,
+        borderBottom: `solid ${sizes.borderWidth} ${palette.grey.light2}`,
+        backgroundColor: palette.grey.lighter
+    },
+    defaultCollapsedHeader,
+    borderedCollapsedHeader: defaultCollapsedHeader,
+    withHeaderBarCollapsedHeader: {
+        borderBottom: 'none',
+        borderRadius: sizes.borderRadius.medium
+    }
+});
+//# sourceMappingURL=styles.js.map

package/dist-package/Section/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Section/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,mBAAmB,CAAA;AAEvD,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;CACxB,CAAA;AAED,MAAM,sBAAsB,GAAG;IAC7B,aAAa,EAAE,GAAG;CACnB,CAAA;AAED,eAAe,CAAC,EAAE,KAAK,EAAE,OAAO,EAAS,EAAE,EAAE,CAC3C,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM;KACnB;IACD,KAAK,EAAE;QACL,WAAW,EAAE,MAAM;KACpB;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,QAAQ;QACnB,WAAW,EAAE,MAAM;KACpB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,MAAM;KACnB;IAED,SAAS,EAAE;QACT,aAAa,EAAE,MAAM;KACtB;IACD,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE;QACR,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM;QACvC,MAAM,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1D,OAAO,EAAE,MAAM;QACf,iBAAiB,EAAE;YACjB,aAAa,EAAE,GAAG;SACnB;KACF;IACD,aAAa,EAAE;QACb,OAAO,EAAE,CAAC;QACV,mCAAmC,EAAE;YACnC,OAAO,EAAE,QAAQ;SAClB;QACD,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM;QACvC,MAAM,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;KAC5D;IACD,aAAa;IACb,cAAc,EAAE,aAAa;IAC7B,mBAAmB,EAAE;QACnB,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,cAAc;QACvB,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,MAAM;QAC7E,YAAY,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QACjE,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;KACtC;IAED,sBAAsB;IACtB,uBAAuB,EAAE,sBAAsB;IAC/C,4BAA4B,EAAE;QAC5B,YAAY,EAAE,MAAM;QACpB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM;KACxC;CACF,CAAC,CAAA"}

package/{index.d.ts → dist-package/index.d.ts}

@@ -1,7 +1,7 @@
 export { default as Calendar } from './Calendar';
 export type { DateOrDateRangeType } from './Calendar';
-export { default as DatePicker } from './DatePicker';
-export type { DatePickerProps } from './DatePicker';
+export { default as DatePicker, datePickerParseDateString, DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT, DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT } from './DatePicker';
+export type { DatePickerValue, DatePickerStringParser, DatePickerProps } from './DatePicker';
 export { default as Drawer } from './Drawer';
 export type { DrawerProps } from './Drawer';
 export { default as Dropzone, ErrorCode as DropzoneErrorCode } from './Dropzone';

package/{index.js → dist-package/index.js}

@@ -1,5 +1,5 @@
 export { default as Calendar } from './Calendar';
-export { default as DatePicker } from './DatePicker';
+export { default as DatePicker, datePickerParseDateString, DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT, DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT } from './DatePicker';
 export { default as Drawer } from './Drawer';
 export { default as Dropzone, ErrorCode as DropzoneErrorCode } from './Dropzone';
 export { default as OverviewBlock } from './OverviewBlock';

package/dist-package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,yBAAyB,EACzB,uCAAuC,EACvC,oCAAoC,EACrC,MAAM,cAAc,CAAA;AAMrB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAE5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,SAAS,IAAI,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAQhF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE1D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AAExC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEhD,qEAAqE"}

package/dist-package/package.json

@@ -0,0 +1,53 @@
+{
+  "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-lab",
-  "version": "9.1.1-alpha-sat-750--poc-picasso-with-ssr.2531+65adfef8",
+  "version": "9.3.1",
   "description": "Lab components of Picasso",
   "author": "Toptal",
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-lab#readme",
@@ -23,14 +23,14 @@
   },
   "peerDependencies": {
     "@material-ui/core": "4.11.0",
-    "@toptal/picasso": "^12",
+    "@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-alpha-sat-750--poc-picasso-with-ssr.2531+65adfef8",
+    "@toptal/picasso-provider": "^0.3.1",
     "ap-style-title-case": "^1.1.2",
     "classnames": "^2.3.1",
     "date-fns": "^2.9.0",
@@ -49,6 +49,5 @@
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
-  ],
-  "gitHead": "65adfef8a2a7320ca68307bcc6916d6edb3b5a61"
+  ]
 }

package/src/Calendar/Calendar.tsx

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