Mobile & desktop components (#1433)

* Move keyboard managing functionality out from separate hook and component

* Remove outdated imports

* Deal with typescript generics

* Fix build errros

* Improve type inferences

* Split components by mode

* Split to Mobile, Desktop, Static and Responsive components by wrapper variant

* Fix docs not working with new components

* Adopt date-io v2

* Fix autosubmit logic for desktop variant

* Update TimePicker and DateTimepicker documentation examples

* Update date-io version

* Remove ts-ignores

* Fix ts build errors

* Fix console warns

* Fix responsivenness for DateTimePicker

* Fix some tests

* Fix DateTimePicker tests

* Regenerate lockfile

* Fix refs ts errors

* Fix wierd styles

* Return @materail-ui/styles back for overrides.ts

* Remove KeyboardDatePicker imports

* Revert not needed package upgrades

* Make ampm false by defautl

* Rename wrappers

* Updated docs for DatePicker

* Update TimePicker and DateTimePicker docs

* Add engines to package.json

* Add engines to docs package.json

* Fix prop types generation

* Move inputValue state down from usePickerState hook

* Enable working mobile keyboard input from dialog

* Move mobile keyboard open state up to the pickerState and fix date validation in mobile keyboard view

* Move prop-types to deps, add @types/react to dependencies

* Remove useStaticState

* Update cypress docker image

* Fix incorrect executor reference

* Updarte version of cireclci cypress orb

* Fix tests

* Fix displaying issues

* Fix ts error

.circleci/config.yml

@@ -11,7 +11,7 @@ defaults: &js_defaults
 
 version: 2.1
 orbs:
-  cypress: cypress-io/cypress@1.6.0
+  cypress: cypress-io/cypress@1
 
 ####################
 # Custom jobs
@@ -89,7 +89,7 @@ jobs:
 
   cypress_tests:
     description: Run cypress tests
-    executor: cypress/browsers-chrome69
+    executor: cypress/browsers-chrome73-ff68
     steps:
       - attach_workspace:
           at: .

docs/layout/Layout.tsx

@@ -11,7 +11,7 @@ import { GITHUB_URL } from '_constants';
 import { createOverrides } from './styleOverrides';
 import { withRouter, WithRouterProps } from 'next/router';
 import { utilsMap, UtilsLib } from '../utils/utilsService';
-import { withStyles, WithStyles, createStyles } from '@material-ui/styles';
+import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
 import {
   Hidden,
   Drawer,

docs/layout/PageWithContext.tsx

@@ -10,8 +10,8 @@ import { UtilsContext } from '../_shared/UtilsServiceContext';
 import { MuiPickersUtilsProvider } from '@material-ui/pickers';
 import { NotificationManager } from 'utils/NotificationManager';
 import { Theme, createMuiTheme, CssBaseline } from '@material-ui/core';
-import { ThemeProvider, jssPreset, StylesProvider } from '@material-ui/styles';
 import { createUtilsService, UtilsLib, utilsMap } from '../utils/utilsService';
+import { ThemeProvider, jssPreset, StylesProvider } from '@material-ui/core/styles';
 
 export type ThemeType = 'light' | 'dark';
 export type Direction = Theme['direction'];

docs/layout/components/DrawerMenu.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import NavigationMenu from './NavigationMenu';
 import { version } from '@material-ui/pickers/package.json';
 import { Divider, Toolbar, Typography, Theme } from '@material-ui/core';
-import { createStyles, withStyles, WithStyles } from '@material-ui/styles';
+import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
 
 const styles = (theme: Theme) =>
   createStyles({

docs/layout/components/navigationMap.ts

@@ -28,7 +28,7 @@ export const navItems = [
   {
     title: 'Components API',
     children: Object.keys(PropTypesDoc)
-      .filter(component => !['ModalWrapper'].includes(component))
+      .filter(component => !component.match(/^(Mobile|Desktop|Static)/))
       .map(component => ({
         title: component,
         as: `/api/${component}`,

docs/layout/styleOverrides.ts

@@ -1,5 +1,5 @@
 import { Theme } from '@material-ui/core';
-import { StyleRules } from '@material-ui/styles';
+import { StyleRules } from '@material-ui/core/styles';
 
 export const createOverrides = (theme: Theme): StyleRules<any> => ({
   body: {

docs/package.json

@@ -12,19 +12,21 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
+  "engines": {
+    "node": "12.x"
+  },
   "dependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.7.4",
-    "@date-io/date-fns": "^1.3.7",
-    "@date-io/dayjs": "^1.3.7",
+    "@date-io/date-fns": "^2.0.0",
+    "@date-io/dayjs": "^2.0.1",
     "@date-io/hijri": "^1.3.8",
-    "@date-io/jalaali": "^1.3.7",
-    "@date-io/luxon": "^1.3.7",
-    "@date-io/moment": "^1.3.7",
+    "@date-io/jalaali": "^2.0.0",
+    "@date-io/luxon": "^2.0.0",
+    "@date-io/moment": "^2.0.0",
     "@mapbox/rehype-prism": "^0.3.1",
     "@material-ui/core": "^4.5.1",
     "@material-ui/icons": "^3.0.2",
     "@material-ui/pickers": "*",
-    "@material-ui/styles": "^4.5.0",
     "@types/fuzzy-search": "^2.1.0",
     "@types/isomorphic-fetch": "^0.0.35",
     "@types/luxon": "^1.11.0",

docs/pages/_error.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import KawaiiIcon from '_shared/svgIcons/KawaiiIcon';
-import { styled } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 import { Grid, Typography, NoSsr } from '@material-ui/core';
 
 const CenteredGrid = styled(Grid)({

docs/pages/api/props.tsx

@@ -67,10 +67,19 @@ const Docs: React.FC<WithRouterProps> = ({ router }) => {
 
       {!internalComponents.includes(componentName) && (
         <>
-          <h4> Modal Wrapper </h4>
-          <Typography gutterBottom>Available only with variant "dialog" </Typography>
+          <h4> Mobile Wrapper </h4>
+          <Typography gutterBottom>
+            Props available on mobile device with {componentName} or with `Mobile{componentName}`
+          </Typography>
 
-          <PropTypesTable disableHeader src="ModalWrapper" />
+          <PropTypesTable disableHeader src="MobileWrapper" />
+
+          <h4> Desktop Wrapper </h4>
+          <Typography gutterBottom>
+            Props available on mobile device with `{componentName}` or with `Desktop{componentName}`
+          </Typography>
+
+          <PropTypesTable disableHeader src="DesktopWrapper" />
         </>
       )}
     </>

docs/pages/demo/datepicker/AdvancedKeyboard.example.jsx

@@ -0,0 +1,28 @@
+import React, { Fragment, useState } from 'react';
+import EventNoteIcon from '@material-ui/icons/EventNote';
+import { DesktopDatePicker } from '@material-ui/pickers';
+
+function AdvancedKeyboardExample(props) {
+  const [selectedDate, handleDateChange] = useState(new Date());
+
+  return (
+    <Fragment>
+      <DesktopDatePicker
+        autoOk
+        variant="outlined"
+        label="Advanced keyboard"
+        placeholder="2018/01/01"
+        format={props.__willBeReplacedGetFormatString({
+          moment: 'YYYY/MM/DD',
+          dateFns: 'yyyy/MM/dd',
+        })}
+        mask="____/__/__"
+        keyboardIcon={<EventNoteIcon />}
+        value={selectedDate}
+        onChange={date => handleDateChange(date)}
+      />
+    </Fragment>
+  );
+}
+
+export default AdvancedKeyboardExample;

docs/pages/demo/datepicker/BasicDatePicker.example.jsx

@@ -1,39 +1,16 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import { DatePicker } from '@material-ui/pickers';
 
-function BasicDatePicker(props) {
+function BasicDatePicker() {
   const [selectedDate, handleDateChange] = useState(new Date());
 
   return (
-    <Fragment>
-      <DatePicker
-        label="Basic example"
-        value={selectedDate}
-        onChange={date => handleDateChange(date)}
-      />
-
-      <DatePicker
-        autoOk
-        label="Clearable"
-        clearable
-        disableFuture
-        value={selectedDate}
-        onChange={date => handleDateChange(date)}
-      />
-
-      <DatePicker
-        disableFuture
-        openTo="year"
-        format={props.__willBeReplacedGetFormatString({
-          moment: 'DD/MM/YYYY',
-          dateFns: 'dd/MM/yyyy',
-        })}
-        label="Date of birth"
-        views={['year', 'month', 'date']}
-        value={selectedDate}
-        onChange={date => handleDateChange(date)}
-      />
-    </Fragment>
+    <DatePicker
+      label="Basic example"
+      value={selectedDate}
+      // DialogProps={{ 'aria-activedescendant': '12' }}
+      onChange={date => handleDateChange(date)}
+    />
   );
 }
 

docs/pages/demo/datepicker/CustomDay.example.jsx

@@ -7,7 +7,7 @@ import React, { PureComponent } from 'react';
 import startOfWeek from 'date-fns/startOfWeek';
 import isWithinInterval from 'date-fns/isWithinInterval';
 import { DatePicker } from '@material-ui/pickers';
-import { createStyles } from '@material-ui/styles';
+import { createStyles } from '@material-ui/core/styles';
 // this guy required only on the docs site to work with dynamic date library
 import { makeJSDateObject } from '../../../utils/helpers';
 import { IconButton, withStyles } from '@material-ui/core';

docs/pages/demo/datepicker/InlineDatePicker.example.jsx → docs/pages/demo/datepicker/DatePickers.example.jsx

@@ -1,42 +1,42 @@
 import React, { Fragment, useState } from 'react';
-import { DatePicker, KeyboardDatePicker } from '@material-ui/pickers';
+import { MobileDatePicker, DesktopDatePicker, DatePicker } from '@material-ui/pickers';
 
-function InlineDatePickerDemo(props) {
+function DatePickersVariants(props) {
   const [selectedDate, handleDateChange] = useState(new Date());
 
   return (
     <Fragment>
-      <DatePicker
-        variant="inline"
-        label="Basic example"
+      <MobileDatePicker
+        clearable
+        label="For mobile"
         value={selectedDate}
+        placeholder="10/10/2018"
         onChange={date => handleDateChange(date)}
+        format={props.__willBeReplacedGetFormatString({
+          moment: 'MM/DD/YYYY',
+          dateFns: 'MM/dd/yyyy',
+        })}
       />
 
-      <DatePicker
-        disableToolbar
-        variant="inline"
-        label="Only calendar"
-        helperText="No year selection"
+      <DesktopDatePicker
+        autoOk
+        label="For desktop"
+        minDate={new Date('2017-01-01')}
         value={selectedDate}
         onChange={date => handleDateChange(date)}
       />
 
-      <KeyboardDatePicker
-        autoOk
-        variant="inline"
-        inputVariant="outlined"
-        label="With keyboard"
-        format={props.__willBeReplacedGetFormatString({
-          moment: 'MM/DD/YYYY',
-          dateFns: 'MM/dd/yyyy',
-        })}
+      <DatePicker
+        disableFuture
+        showTodayButton
+        label="Responsive"
+        openTo="year"
+        views={['year', 'month', 'date']}
         value={selectedDate}
-        InputAdornmentProps={{ position: 'start' }}
         onChange={date => handleDateChange(date)}
       />
     </Fragment>
   );
 }
 
-export default InlineDatePickerDemo;
+export default DatePickersVariants;

docs/pages/demo/datepicker/StaticDatePicker.example.jsx

@@ -1,23 +1,21 @@
 import React, { useState } from 'react';
-import { DatePicker } from '@material-ui/pickers';
+import { StaticDatePicker } from '@material-ui/pickers';
 
-const StaticDatePicker = () => {
+const StaticDatePickerExample = () => {
   const [date, handleDateChange] = useState(new Date());
 
   return (
     <>
-      <DatePicker
+      <StaticDatePicker
         autoOk
-        variant="static"
         openTo="year"
         value={date}
         onChange={date => handleDateChange(date)}
       />
 
-      <DatePicker
+      <StaticDatePicker
         autoOk
         orientation="landscape"
-        variant="static"
         openTo="date"
         value={date}
         onChange={date => handleDateChange(date)}
@@ -26,4 +24,4 @@ const StaticDatePicker = () => {
   );
 };
 
-export default StaticDatePicker;
+export default StaticDatePickerExample;

docs/pages/demo/datepicker/ViewsDatePicker.example.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useState } from 'react';
-import { DatePicker } from '@material-ui/pickers';
+import { DatePicker, MobileDatePicker } from '@material-ui/pickers';
 
 function YearMonthPicker() {
   const [selectedDate, handleDateChange] = useState(new Date());
@@ -13,18 +13,17 @@ function YearMonthPicker() {
         onChange={date => handleDateChange(date)}
       />
 
-      <DatePicker
+      <MobileDatePicker
         views={['year', 'month']}
         label="Year and Month"
         helperText="With min and max"
-        minDate={new Date('2018-03-01')}
-        maxDate={new Date('2018-06-01')}
+        minDate={new Date('2012-03-01')}
+        maxDate={new Date('2023-06-01')}
         value={selectedDate}
         onChange={date => handleDateChange(date)}
       />
 
       <DatePicker
-        variant="inline"
         openTo="year"
         views={['year', 'month']}
         label="Year and Month"