[core] Update format to match main v2

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import TextField from '@material-ui/core/TextField';
+import { DatePicker } from '@material-ui/pickers';
+
+export default function BasicDatePicker() {
+  const [value, setValue] = React.useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      label="Basic example"
+      value={value}
+      onChange={newValue => setValue(newValue)}
+      renderInput={props => <TextField {...props} />}
+    />
+  );
+}

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

@@ -1,5 +1,5 @@
+import * as React from 'react';
 import clsx from 'clsx';
-import React, { useState } from 'react';
 import isSameDay from 'date-fns/isSameDay';
 import endOfWeek from 'date-fns/endOfWeek';
 import startOfWeek from 'date-fns/startOfWeek';
@@ -29,13 +29,13 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function WeekPicker(props) {
-  const classes = useStyles(props);
-  const [selectedDate, handleDateChange] = useState(new Date());
+export default function CustomDay(props) {
+  const classes = useStyles();
+  const [selectedDate, handleDateChange] = React.useState(new Date());
 
   const renderWeekPickerDay = (date, selectedDates, DayComponentProps) => {
-    let dateClone = makeJSDateObject(date);
-    let selectedDateClone = makeJSDateObject(selectedDate);
+    const dateClone = makeJSDateObject(date);
+    const selectedDateClone = makeJSDateObject(selectedDate);
 
     const start = startOfWeek(selectedDateClone);
     const end = endOfWeek(selectedDateClone);
@@ -72,5 +72,3 @@ function WeekPicker(props) {
     />
   );
 }
-
-export default WeekPicker;

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import * as React from 'react';
 import { styled } from '@material-ui/core/styles';
 import { DesktopDatePicker } from '@material-ui/pickers';
 
@@ -7,14 +7,14 @@ const InputContainer = styled('div')({
   alignItems: 'center',
 });
 
-function CustomInput() {
-  const [selectedDate, handleDateChange] = useState(new Date());
+export default function CustomInput() {
+  const [value, setValue] = React.useState(new Date());
 
   return (
     <DesktopDatePicker
       label="Advanced keyboard"
-      value={selectedDate}
-      onChange={date => handleDateChange(date)}
+      value={value}
+      onChange={newValue => setValue(newValue)}
       renderInput={({ inputRef, inputProps, InputProps }) => (
         <InputContainer>
           <input ref={inputRef} {...inputProps} />
@@ -24,5 +24,3 @@ function CustomInput() {
     />
   );
 }
-
-export default CustomInput;

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

@@ -1,12 +1,12 @@
-import React, { Fragment, useState } from 'react';
+import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import { MobileDatePicker, DesktopDatePicker, DatePicker } from '@material-ui/pickers';
 
-function DatePickersVariants(props) {
-  const [selectedDate, handleDateChange] = useState(new Date());
+export default function DatePickersVariants(props) {
+  const [selectedDate, handleDateChange] = React.useState(new Date());
 
   return (
-    <Fragment>
+    <React.Fragment>
       <MobileDatePicker
         clearable
         label="For mobile"
@@ -37,8 +37,6 @@ function DatePickersVariants(props) {
         onChange={date => handleDateChange(date)}
         renderInput={props => <TextField {...props} />}
       />
-    </Fragment>
+    </React.Fragment>
   );
 }
-
-export default DatePickersVariants;

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

@@ -10,24 +10,24 @@ function disableWeekends(date) {
 }
 
 export default function StaticDatePickerExample() {
-  const [date, handleDateChange] = React.useState(new Date());
+  const [value, setValue] = React.useState(new Date());
 
   return (
     <React.Fragment>
       <StaticDatePicker
         displayStaticWrapperAs="desktop"
         openTo="year"
-        value={date}
-        onChange={date => handleDateChange(date)}
+        value={value}
+        onChange={newValue => setValue(newValue)}
         renderInput={props => <TextField {...props} />}
       />
 
       <StaticDatePicker
         orientation="landscape"
         openTo="date"
-        value={date}
+        value={value}
         shouldDisableDate={disableWeekends}
-        onChange={date => handleDateChange(date)}
+        onChange={newValue => setValue(newValue)}
         renderInput={props => <TextField {...props} />}
       />
     </React.Fragment>

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

@@ -1,12 +1,12 @@
-import React, { Fragment, useState } from 'react';
+import React from 'react';
 import TextField from '@material-ui/core/TextField';
 import { DatePicker, MobileDatePicker } from '@material-ui/pickers';
 
-function YearMonthPicker() {
-  const [selectedDate, handleDateChange] = useState(new Date());
+export default function YearDatePicker() {
+  const [selectedDate, handleDateChange] = React.useState(new Date());
 
   return (
-    <Fragment>
+    <React.Fragment>
       <DatePicker
         views={['year']}
         label="Year only"
@@ -33,8 +33,6 @@ function YearMonthPicker() {
         onChange={date => handleDateChange(date)}
         renderInput={props => <TextField {...props} helperText="Start from year selection" />}
       />
-    </Fragment>
+    </React.Fragment>
   );
 }
-
-export default YearMonthPicker;

docs/pages/demo/daterangepicker/BasicDateRangePicker.example.tsx

@@ -2,15 +2,15 @@ import * as React from 'react';
 import TextField from '@material-ui/core/TextField';
 import { DateRangePicker, DateRange, DateRangeDelimiter } from '@material-ui/pickers';
 
-function BasicDateRangePicker() {
-  const [selectedDate, handleDateChange] = React.useState<DateRange<Date>>([null, null]);
+export default function BasicDateRangePicker() {
+  const [value, setValue] = React.useState<DateRange<Date>>([null, null]);
 
   return (
     <DateRangePicker
       startText="Check-in"
       endText="Check-out"
-      value={selectedDate}
-      onChange={date => handleDateChange(date)}
+      value={value}
+      onChange={newValue => setValue(newValue)}
       renderInput={(startProps, endProps) => (
         <React.Fragment>
           <TextField {...startProps} />
@@ -21,5 +21,3 @@ function BasicDateRangePicker() {
     />
   );
 }
-
-export default BasicDateRangePicker;