Prepare ra-ui-materialui Migration to TypeScript

cypress/integration/list.js

@@ -117,7 +117,7 @@ describe('List Page', () => {
             LoginPage.login('admin', 'password');
             ListPageUsers.navigate();
             cy.contains('1-2 of 2');
-            cy.get('button[tooltip="Remove this filter"]').click();
+            cy.get('button[title="Remove this filter"]').click();
             cy.contains('1-3 of 3');
         });
     });

examples/demo/package.json

@@ -3,8 +3,8 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@material-ui/core": "~1.4.0",
-        "@material-ui/icons": "~1.1.0",
+        "@material-ui/core": "~1.5.1",
+        "@material-ui/icons": "~1.1.1",
         "data-generator": "^2.4.0",
         "fakerest": "~2.1.0",
         "fetch-mock": "~6.3.0",

examples/simple/package.json

@@ -21,8 +21,8 @@
         "@babel/preset-env": "^7.1.0",
         "@babel/preset-react": "^7.0.0",
         "@babel/preset-typescript": "^7.1.0",
-        "@material-ui/core": "~1.4.0",
-        "@material-ui/icons": "~1.1.0",
+        "@material-ui/core": "~1.5.1",
+        "@material-ui/icons": "~1.1.1",
         "babel-loader": "^8.0.4",
         "enzyme": "^3.8.0",
         "enzyme-adapter-react-16": "^1.7.1",

examples/tutorial/package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@material-ui/core": "~1.4.0",
+        "@material-ui/core": "~1.5.1",
         "ra-data-json-server": "^2.0.0",
         "react": "~16.3.1",
         "react-admin": "^2.0.0",

packages/ra-core/src/inference/types.ts

@@ -7,5 +7,5 @@ export interface InferredType {
 }
 
 export interface InferredTypeMap {
-    [key: string]: InferredType;
+    [key: string]: InferredType | undefined;
 }

packages/ra-ui-materialui/package.json

@@ -26,6 +26,8 @@
         "watch": "rimraf ./lib && tsc --watch"
     },
     "devDependencies": {
+        "@material-ui/core": "~1.5.1",
+        "@material-ui/icons": "^1.1.1",
         "cross-env": "^5.2.0",
         "enzyme": "~3.7.0",
         "enzyme-adapter-react-16": "~1.6.0",

packages/ra-ui-materialui/src/Link.js

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Link as RRLink } from 'react-router-dom';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, createStyles } from '@material-ui/core/styles';
 
-const styles = theme => ({
+const styles = theme => createStyles({
     link: {
         textDecoration: 'none',
         color: theme.palette.primary.main,

packages/ra-ui-materialui/src/auth/Login.js

@@ -7,14 +7,15 @@ import {
     MuiThemeProvider,
     createMuiTheme,
     withStyles,
+    createStyles,
 } from '@material-ui/core/styles';
 import LockIcon from '@material-ui/icons/Lock';
 
 import defaultTheme from '../defaultTheme';
 import Notification from '../layout/Notification';
 import DefaultLoginForm from './LoginForm';
 
-const styles = theme => ({
+const styles = theme => createStyles({
     main: {
         display: 'flex',
         flexDirection: 'column',

packages/ra-ui-materialui/src/auth/LoginForm.js

@@ -7,10 +7,10 @@ import CardActions from '@material-ui/core/CardActions';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, createStyles } from '@material-ui/core/styles';
 import { translate, userLogin } from 'ra-core';
 
-const styles = () => ({
+const styles = () => createStyles({
     form: {
         padding: '0 1em 1em 1em',
     },
@@ -24,7 +24,7 @@ const styles = () => ({
 
 // see http://redux-form.com/6.4.3/examples/material-ui/
 const renderInput = ({
-    meta: { touched, error } = {}, // eslint-disable-line react/prop-types
+    meta: { touched, error } = { touched: false, error: '' }, // eslint-disable-line react/prop-types
     input: { ...inputProps }, // eslint-disable-line react/prop-types
     ...props
 }) => (

packages/ra-ui-materialui/src/auth/Logout.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import compose from 'recompose/compose';
 import MenuItem from '@material-ui/core/MenuItem';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, createStyles } from '@material-ui/core/styles';
 import ExitIcon from '@material-ui/icons/PowerSettingsNew';
 import classnames from 'classnames';
 import { translate, userLogout as userLogoutAction } from 'ra-core';
 
-const styles = theme => ({
+const styles = theme => createStyles({
     menuItem: {
         color: theme.palette.text.secondary,
     },

packages/ra-ui-materialui/src/button/BulkDeleteButton.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import compose from 'recompose/compose';
 import ActionDelete from '@material-ui/icons/Delete';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, createStyles } from '@material-ui/core/styles';
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import { crudDeleteMany, startUndoable } from 'ra-core';
 
@@ -22,7 +22,7 @@ const sanitizeRestProps = ({
     ...rest
 }) => rest;
 
-const styles = theme => ({
+const styles = theme => createStyles({
     deleteButton: {
         color: theme.palette.error.main,
         '&:hover': {

packages/ra-ui-materialui/src/button/Button.js

@@ -4,13 +4,13 @@ import compose from 'recompose/compose';
 import MuiButton from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
 import IconButton from '@material-ui/core/IconButton';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, createStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
 import { translate } from 'ra-core';
 
 import Responsive from '../layout/Responsive';
 
-const styles = {
+const styles = createStyles({
     button: {
         display: 'inline-flex',
         alignItems: 'center',
@@ -30,17 +30,17 @@ const styles = {
     largeIcon: {
         fontSize: 24,
     },
-};
+});
 
 const Button = ({
     alignIcon = 'left',
     children,
     classes = {},
     className,
-    color = 'primary',
+    color,
     disabled,
     label,
-    size = 'small',
+    size,
     translate,
     ...rest
 }) => (
@@ -110,10 +110,15 @@ Button.propTypes = {
     color: PropTypes.string,
     disabled: PropTypes.bool,
     label: PropTypes.string,
-    size: PropTypes.string,
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
     translate: PropTypes.func.isRequired,
 };
 
+Button.defaultProps = {
+    color: 'primary',
+    size: 'small'
+}
+
 const enhance = compose(
     withStyles(styles),
     translate

packages/ra-ui-materialui/src/button/CreateButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys';
 import MuiButton from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, createStyles } from '@material-ui/core/styles';
 import ContentAdd from '@material-ui/icons/Add';
 import compose from 'recompose/compose';
 import classnames from 'classnames';
@@ -12,7 +12,7 @@ import { translate } from 'ra-core';
 import Button from './Button';
 import Responsive from '../layout/Responsive';
 
-const styles = theme => ({
+const styles = theme => createStyles({
     floating: {
         color: theme.palette.getContrastText(theme.palette.primary.main),
         margin: 0,

packages/ra-ui-materialui/src/button/DeleteButton.js

@@ -2,15 +2,15 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import compose from 'recompose/compose';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, createStyles } from '@material-ui/core/styles';
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import ActionDelete from '@material-ui/icons/Delete';
 import classnames from 'classnames';
 import { translate, crudDelete, startUndoable } from 'ra-core';
 
 import Button from './Button';
 
-const styles = theme => ({
+const styles = theme => createStyles({
     deleteButton: {
         color: theme.palette.error.main,
         '&:hover': {

packages/ra-ui-materialui/src/button/SaveButton.js

@@ -4,19 +4,19 @@ import { connect } from 'react-redux';
 import compose from 'recompose/compose';
 import Button from '@material-ui/core/Button';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, createStyles } from '@material-ui/core/styles';
 import ContentSave from '@material-ui/icons/Save';
 import classnames from 'classnames';
 import { showNotification, translate } from 'ra-core';
 
-const styles = {
+const styles = createStyles({
     button: {
         position: 'relative',
     },
     iconPaddingStyle: {
         marginRight: '0.5em',
     },
-};
+});
 
 const sanitizeRestProps = ({
     basePath,

packages/ra-ui-materialui/src/detail/Create.js

@@ -1,21 +1,21 @@
-import React from 'react';
+import React, { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import Card from '@material-ui/core/Card';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, createStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
 import { CreateController } from 'ra-core';
 
 import TitleForRecord from '../layout/TitleForRecord';
 import CardContentInner from '../layout/CardContentInner';
 
-const styles = {
+const styles = createStyles({
     root: {
         display: 'flex',
     },
     card: {
         flex: '1 1 auto',
     },
-};
+});
 
 const sanitizeRestProps = ({
     actions,
@@ -68,14 +68,14 @@ export const CreateView = ({
         <Card className={classes.card}>
             {actions && (
                 <CardContentInner>
-                    {React.cloneElement(actions, {
+                    {cloneElement(actions, {
                         basePath,
                         resource,
                         hasList,
                     })}
                 </CardContentInner>
             )}
-            {React.cloneElement(children, {
+            {cloneElement(Children.only(children), {
                 basePath,
                 record,
                 redirect:
@@ -87,7 +87,7 @@ export const CreateView = ({
             })}
         </Card>
         {aside &&
-            React.cloneElement(aside, {
+            cloneElement(aside, {
                 basePath,
                 record,
                 resource,

packages/ra-ui-materialui/src/detail/Edit.js

@@ -1,23 +1,23 @@
-import React from 'react';
+import React, { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, createStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
 import { EditController } from 'ra-core';
 
 import DefaultActions from './EditActions';
 import TitleForRecord from '../layout/TitleForRecord';
 import CardContentInner from '../layout/CardContentInner';
 
-export const styles = {
+export const styles = createStyles({
     root: {
         display: 'flex',
     },
     card: {
         flex: '1 1 auto',
     },
-};
+});
 
 const sanitizeRestProps = ({
     actions,
@@ -85,7 +85,7 @@ export const EditView = ({
             <Card className={classes.card}>
                 {actions && (
                     <CardContentInner>
-                        {React.cloneElement(actions, {
+                        {cloneElement(actions, {
                             basePath,
                             data: record,
                             hasShow,
@@ -95,7 +95,7 @@ export const EditView = ({
                     </CardContentInner>
                 )}
                 {record ? (
-                    React.cloneElement(children, {
+                    cloneElement(Children.only(children), {
                         basePath,
                         record,
                         redirect: