[Refactoring] Reorganize folder structure (mui#1098)

* Regorganize folder structure

* Create new views folder with all components

* Remove unnecessary theme type annotations

* Restore lost in merge changes

* Fix imports in tests

docs/_shared/Ad.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { loadScript } from 'utils/helpers';
-import { Grid, Theme } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
+import { Grid, makeStyles } from '@material-ui/core';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(theme => ({
   '@global': {
     '#codefund': {
       '& .cf-wrapper': {

docs/_shared/PropTypesTable.tsx

@@ -12,11 +12,10 @@ import {
   TableRow,
   makeStyles,
   Typography,
-  Theme,
   Grid,
 } from '@material-ui/core';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(theme => ({
   header: {
     marginTop: 24,
   },

lib/src/DatePicker/DatePicker.tsx

@@ -2,7 +2,7 @@ import { useUtils } from '../_shared/hooks/useUtils';
 import { DatePickerToolbar } from './DatePickerToolbar';
 import { MaterialUiPickersDate } from '../typings/date';
 import { getFormatByViews } from '../_helpers/date-utils';
-import { OutterCalendarProps } from './components/Calendar';
+import { OutterCalendarProps } from '../views/Calendar/Calendar';
 import { datePickerDefaultProps, ParsableDate } from '../constants/prop-types';
 import { WrappedPurePickerProps, makePurePicker } from '../Picker/WrappedPurePicker';
 import { makeKeyboardPicker, WrappedKeyboardPickerProps } from '../Picker/WrappedKeyboardPicker';

lib/src/DateTimePicker/DateTimePickerTabs.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import Paper from '@material-ui/core/Paper';
-import { Theme } from '@material-ui/core';
 import { TimeIcon } from '../_shared/icons/TimeIcon';
 import { DateTimePickerView } from './DateTimePicker';
 import { DateRangeIcon } from '../_shared/icons/DateRangeIcon';
@@ -32,7 +31,7 @@ export interface DateTimePickerTabsProps {
 }
 
 export const useStyles = makeStyles(
-  (theme: Theme) => {
+  theme => {
     // prettier-ignore
     const tabsBackground = theme.palette.type === 'light'
     ? theme.palette.primary.main

lib/src/Picker/Picker.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import Calendar from '../DatePicker/components/Calendar';
-import YearSelection from '../DatePicker/components/YearSelection';
-import MonthSelection from '../DatePicker/components/MonthSelection';
-import { MaterialUiPickersDate } from '..';
-import { useViews } from '../_shared/hooks/useViews';
+import Calendar from '../views/Calendar/Calendar';
 import { useUtils } from '../_shared/hooks/useUtils';
+import { useViews } from '../_shared/hooks/useViews';
 import { makeStyles } from '@material-ui/core/styles';
+import { YearSelection } from '../views/Year/YearView';
+import { MaterialUiPickersDate } from '../typings/date';
+import { MonthSelection } from '../views/Month/MonthView';
+import { TimePickerView } from '../views/Clock/ClockView';
 import { BaseTimePickerProps } from '../TimePicker/TimePicker';
 import { BaseDatePickerProps } from '../DatePicker/DatePicker';
 import { datePickerDefaultProps } from '../constants/prop-types';
-import { TimePickerView } from '../TimePicker/components/TimePickerView';
 
 const viewsMap = {
   year: YearSelection,

lib/src/__tests__/DatePicker/Calendar.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ShallowWrapper } from 'enzyme';
 import { shallowRender, utilsToUse } from '../test-utils';
-import { Calendar, CalendarProps } from '../../DatePicker/components/Calendar';
+import { Calendar, CalendarProps } from '../../views/Calendar/Calendar';
 
 describe('Calendar', () => {
   let component: ShallowWrapper<CalendarProps>;

lib/src/__tests__/DatePicker/Month.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ShallowWrapper } from 'enzyme';
 import { shallow, utilsToUse } from '../test-utils';
-import { Month, MonthProps } from '../../DatePicker/components/Month';
+import { Month, MonthProps } from '../../views/Month/Month';
 
 describe('Month', () => {
   let component: ShallowWrapper<MonthProps>;

lib/src/__tests__/DatePicker/MonthSelection.test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import Month from '../../DatePicker/components/Month';
+import Month from '../../views/Month/Month';
 import { ReactWrapper } from 'enzyme';
 import { mount, utilsToUse } from '../test-utils';
-import { MonthSelection, MonthSelectionProps } from '../../DatePicker/components/MonthSelection';
+import { MonthSelection, MonthSelectionProps } from '../../views/Month/MonthView';
 
 describe('MonthSelection', () => {
   let component: ReactWrapper<MonthSelectionProps>;

lib/src/__tests__/TimePicker/Clock.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ShallowWrapper } from 'enzyme';
 import { shallow } from '../test-utils';
-import { Clock, ClockProps } from '../../TimePicker/components/Clock';
+import { Clock, ClockProps } from '../../views/Clock/Clock';
 
 const mouseClockEvent = {
   preventDefault: jest.fn(),

lib/src/_shared/PickerToolbar.tsx

@@ -1,27 +1,11 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Toolbar, { ToolbarProps } from '@material-ui/core/Toolbar';
-import { Theme } from '@material-ui/core';
 import { ExtendMui } from '../typings/extendMui';
-import { createStyles, WithStyles, withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
-export interface PickerToolbarProps extends ExtendMui<ToolbarProps>, WithStyles<typeof styles> {}
-
-const PickerToolbar: React.SFC<PickerToolbarProps> = ({
-  children,
-  className = null,
-  classes,
-  ...other
-}) => {
-  return (
-    <Toolbar className={clsx(classes.toolbar, className)} {...other}>
-      {children}
-    </Toolbar>
-  );
-};
-
-export const styles = (theme: Theme) =>
-  createStyles({
+export const useStyles = makeStyles(
+  theme => ({
     toolbar: {
       display: 'flex',
       flexDirection: 'column',
@@ -33,6 +17,22 @@ export const styles = (theme: Theme) =>
           ? theme.palette.primary.main
           : theme.palette.background.default,
     },
-  });
+  }),
+  { name: 'MuiPickersToolbar' }
+);
+
+const PickerToolbar: React.SFC<ExtendMui<ToolbarProps>> = ({
+  children,
+  className = null,
+  ...other
+}) => {
+  const classes = useStyles();
+
+  return (
+    <Toolbar className={clsx(classes.toolbar, className)} {...other}>
+      {children}
+    </Toolbar>
+  );
+};
 
-export default withStyles(styles, { name: 'MuiPickersToolbar' })(PickerToolbar);
+export default PickerToolbar;

lib/src/_shared/ToolbarText.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography, { TypographyProps } from '@material-ui/core/Typography';
-import { Theme } from '@material-ui/core';
 import { ExtendMui } from '../typings/extendMui';
 import { makeStyles, fade } from '@material-ui/core/styles';
 
@@ -11,7 +10,7 @@ export interface ToolbarTextProps extends ExtendMui<TypographyProps> {
 }
 
 export const useStyles = makeStyles(
-  (theme: Theme) => {
+  theme => {
     const textColor =
       theme.palette.type === 'light'
         ? theme.palette.primary.contrastText

lib/src/index.ts

@@ -23,13 +23,13 @@ export { TimePicker, KeyboardTimePicker } from './TimePicker';
 
 export { DateTimePicker, KeyboardDateTimePicker } from './DateTimePicker';
 
-export { default as Calendar } from './DatePicker/components/Calendar';
+export { default as Calendar } from './views/Calendar/Calendar';
 
-export { default as Day } from './DatePicker/components/Day';
+export { default as Day } from './views/Calendar/Day';
 
-export { default as TimePickerView } from './TimePicker/components/TimePickerView';
+export { default as TimePickerView } from './views/Clock/ClockView';
 
-export { default as Clock } from './TimePicker/components/Clock';
+export { default as Clock } from './views/Clock/Clock';
 
 export { Picker } from './Picker/Picker';
 

lib/src/typings/overrides.ts

@@ -1,23 +1,23 @@
+import { styles as ClockStyles } from '../views/Clock/Clock';
+import { useStyles as DayStyles } from '../views/Calendar/Day';
 import { styles as ModalDialogStyles } from '../_shared/ModalDialog';
-import { useStyles as DayStyles } from '../DatePicker/components/Day';
-import { styles as ClockStyles } from '../TimePicker/components/Clock';
-import { styles as PickerToolbarStyles } from '../_shared/PickerToolbar';
+import { styles as CalendarStyles } from '../views/Calendar/Calendar';
+import { useStyles as MuiPickersYearStyles } from '../views/Year/Year';
 import { styles as ToolbarButtonStyles } from '../_shared/ToolbarButton';
-import { styles as CalendarStyles } from '../DatePicker/components/Calendar';
+import { useStyles as MuiPickersMonthStyles } from '../views/Month/Month';
+import { styles as ClockPointerStyles } from '../views/Clock/ClockPointer';
+import { useStyles as PickerToolbarStyles } from '../_shared/PickerToolbar';
+import { useStyles as ClockNumberStyles } from '../views/Clock/ClockNumber';
 import { useStyles as DTTabsStyles } from '../DateTimePicker/DateTimePickerTabs';
-import { useStyles as MuiPickersYearStyles } from '../DatePicker/components/Year';
 import { useStyles as DatePickerRootStyles } from '../DatePicker/DatePickerToolbar';
-import { useStyles as MuiPickersMonthStyles } from '../DatePicker/components/Month';
-import { styles as ClockPointerStyles } from '../TimePicker/components/ClockPointer';
+import { useStyles as MuiPickersYearSelectionStyles } from '../views/Year/YearView';
 import { StyleRules, StyleRulesCallback } from '@material-ui/core/styles/withStyles';
-import { useStyles as ClockNumberStyles } from '../TimePicker/components/ClockNumber';
+import { useStyles as CalendarHeaderStyles } from '../views/Calendar/CalendarHeader';
 import { useStyles as DTHeaderStyles } from '../DateTimePicker/DateTimePickerToolbar';
 import { useStyles as TimePickerToolbarStyles } from '../TimePicker/TimePickerToolbar';
-import { useStyles as CalendarHeaderStyles } from '../DatePicker/components/CalendarHeader';
-import { useStyles as SlideTransitionStyles } from '../DatePicker/components/SlideTransition';
+import { useStyles as SlideTransitionStyles } from '../views/Calendar/SlideTransition';
+import { useStyles as MuiPickersMonthSelectionStyles } from '../views/Month/MonthView';
 import { useStyles as MuiPickerDTToolbarStyles } from '../DateTimePicker/DateTimePickerToolbar';
-import { useStyles as MuiPickersYearSelectionStyles } from '../DatePicker/components/YearSelection';
-import { useStyles as MuiPickersMonthSelectionStyles } from '../DatePicker/components/MonthSelection';
 
 type Classes<T> = Partial<
   StyleRules<

lib/src/DatePicker/components/Day.tsx → lib/src/views/Calendar/Day.tsx

@@ -3,11 +3,10 @@ import * as PropTypes from 'prop-types';
 import clsx from 'clsx';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
-import { Theme } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(
-  (theme: Theme) => ({
+  theme => ({
     day: {
       width: 36,
       height: 36,

lib/src/DatePicker/components/SlideTransition.tsx → lib/src/views/Calendar/SlideTransition.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 export type SlideDirection = 'right' | 'left';
@@ -13,7 +13,7 @@ interface SlideTransitionProps {
 
 const animationDuration = 350;
 export const useStyles = makeStyles(
-  (theme: Theme) => {
+  theme => {
     const slideTransition = theme.transitions.create('transform', {
       duration: animationDuration,
       easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)',

lib/src/TimePicker/components/Clock.tsx → lib/src/views/Clock/Clock.tsx

@@ -2,9 +2,8 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import ClockPointer from './ClockPointer';
 import ClockType, { ClockViewType } from '../../constants/ClockType';
-import { Theme } from '@material-ui/core';
 import { getHours, getMinutes } from '../../_helpers/time-utils';
-import { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';
+import { withStyles, createStyles, WithStyles, Theme } from '@material-ui/core/styles';
 
 export interface ClockProps extends WithStyles<typeof styles> {
   type: ClockViewType;

lib/src/TimePicker/components/ClockNumber.tsx → lib/src/views/Clock/ClockNumber.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
-import { Theme, makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const positions: Record<number, [number, number]> = {
   0: [0, 40],
@@ -38,7 +38,7 @@ export interface ClockNumberProps {
 }
 
 export const useStyles = makeStyles(
-  (theme: Theme) => {
+  theme => {
     const size = theme.spacing(4);
 
     return {

lib/src/DatePicker/components/MonthSelection.tsx → lib/src/views/Month/MonthView.tsx

@@ -92,5 +92,3 @@ export const MonthSelection: React.FC<MonthSelectionProps> = ({
     </div>
   );
 };
-
-export default MonthSelection;

lib/src/DatePicker/components/Year.tsx → lib/src/views/Year/Year.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
-import { Theme, makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 export interface YearProps {
   children: React.ReactNode;
@@ -13,7 +13,7 @@ export interface YearProps {
 }
 
 export const useStyles = makeStyles(
-  (theme: Theme) => ({
+  theme => ({
     root: {
       height: theme.spacing(5),
       display: 'flex',

lib/src/DatePicker/components/YearSelection.tsx → lib/src/views/Year/YearView.tsx

@@ -26,7 +26,7 @@ export const useStyles = makeStyles(
   { name: 'MuiPickersYearSelection' }
 );
 
-const YearSelection: React.FC<YearSelectionProps> = ({
+export const YearSelection: React.FC<YearSelectionProps> = ({
   date,
   onChange,
   onYearChange,
@@ -86,5 +86,3 @@ const YearSelection: React.FC<YearSelectionProps> = ({
     </div>
   );
 };
-
-export default YearSelection;