[RFR] Upgrade, Configure & Apply Prettier

.prettierrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+    arrowParens: 'avoid',
+    bracketSpacing: true,
+    jsxBracketSameLine: false,
+    jsxSingleQuote: false,
+    printWidth: 80,
+    quoteProps: 'as-needed',
+    rangeStart: 0,
+    rangeEnd: Infinity,
+    semi: true,
+    singleQuote: true,
+    tabWidth: 4,
+    trailingComma: 'es5',
+    useTabs: false
+}

cypress/cypress.json

@@ -8,7 +8,5 @@
     "videosFolder": "videos",
     "viewportWidth": 1280,
     "viewportHeight": 720,
-    "blacklistHosts": [
-        "source.unsplash.com"
-    ]
+    "blacklistHosts": ["source.unsplash.com"]
 }

cypress/integration/edit.js

@@ -29,7 +29,7 @@ describe('Edit Page', () => {
             EditPostPage.submit();
             // Ensure react-admin has handled the update as it will redirect to the list page
             // once done
-            cy.url().should(url => expect(url).to.match(/.*\/posts$/))
+            cy.url().should(url => expect(url).to.match(/.*\/posts$/));
             EditPostPage.navigate();
             cy.get(EditPostPage.elements.input('title')).should(el =>
                 expect(el).to.have.value('Lorem Ipsum')
@@ -83,9 +83,13 @@ describe('Edit Page', () => {
 
     it('should allow to select an item from the AutocompleteInput without showing the choices again after', () => {
         EditCommentPage.navigate();
-        cy.get(EditCommentPage.elements.input('post_id')).clear().type('Sed quo');
+        cy.get(EditCommentPage.elements.input('post_id'))
+            .clear()
+            .type('Sed quo');
         cy.get('[role="tooltip"]').within(() => {
-            cy.contains('Accusantium qui nihil voluptatum quia voluptas maxime ab similique');
+            cy.contains(
+                'Accusantium qui nihil voluptatum quia voluptas maxime ab similique'
+            );
             cy.contains('Sed quo et et fugiat modi').click();
         });
         cy.get('[role="tooltip"]').should(el => expect(el).to.not.exist);
@@ -95,13 +99,14 @@ describe('Edit Page', () => {
         cy.get('[role="tooltip"]').should(el => expect(el).to.not.exist);
 
         // Ensure they still appear when needed though
-        cy.get(EditCommentPage.elements.input('post_id')).clear().type('architecto aut');
+        cy.get(EditCommentPage.elements.input('post_id'))
+            .clear()
+            .type('architecto aut');
         cy.get('[role="tooltip"]').within(() => {
             cy.contains('Sed quo et et fugiat modi');
             cy.contains('Sint dignissimos in architecto aut');
             cy.contains('A voluptas eius eveniet ut commodi dolor');
         });
-
     });
 
     it('should reset the form correctly when switching from edit to create', () => {

cypress/integration/tabs-with-routing.js

@@ -22,11 +22,9 @@ describe('Tabs with routing', () => {
             cy.contains('Id');
             cy.contains('Name');
             ShowPage.gotoTab(2);
-            cy
-                .url()
-                .then(url =>
-                    expect(url).to.match(/.*#\/users\/1\/show\/security/)
-                );
+            cy.url().then(url =>
+                expect(url).to.match(/.*#\/users\/1\/show\/security/)
+            );
             cy.contains('Role');
             ShowPage.gotoTab(1);
             cy.contains('Id');
@@ -38,11 +36,9 @@ describe('Tabs with routing', () => {
             cy.contains('Id');
             cy.contains('Name');
             ShowPage.gotoTab(2);
-            cy
-                .url()
-                .then(url =>
-                    expect(url).to.match(/.*#\/users\/1\/show\/security/)
-                );
+            cy.url().then(url =>
+                expect(url).to.match(/.*#\/users\/1\/show\/security/)
+            );
             cy.contains('Role');
             cy.go('back');
             cy.contains('Id');
@@ -59,9 +55,9 @@ describe('Tabs with routing', () => {
             cy.contains('Id');
             cy.contains('Name');
             EditPage.gotoTab(2);
-            cy
-                .url()
-                .then(url => expect(url).to.match(/.*#\/users\/1\/security/));
+            cy.url().then(url =>
+                expect(url).to.match(/.*#\/users\/1\/security/)
+            );
             cy.contains('Role');
             EditPage.gotoTab(1);
             cy.contains('Id');
@@ -73,9 +69,9 @@ describe('Tabs with routing', () => {
             cy.contains('Id');
             cy.contains('Name');
             EditPage.gotoTab(2);
-            cy
-                .url()
-                .then(url => expect(url).to.match(/.*#\/users\/1\/security/));
+            cy.url().then(url =>
+                expect(url).to.match(/.*#\/users\/1\/security/)
+            );
             cy.contains('Role');
             cy.go('back');
             cy.contains('Id');

cypress/plugins/index.js

@@ -1,5 +1,5 @@
 const wp = require('@cypress/webpack-preprocessor');
-const task = require('cypress-skip-and-only-ui/task')
+const task = require('cypress-skip-and-only-ui/task');
 
 module.exports = on => {
     const options = {

cypress/support/ListPage.js

@@ -16,7 +16,8 @@ export default url => ({
         viewsColumn: '.datagrid-body tr td:nth-child(7)',
         datagridHeaders: 'th',
         sortBy: name => `th span[data-sort=\"${name}\"]`,
-        svg: (name, criteria = '') => `th span[data-sort=\"${name}\"] svg${criteria}`,
+        svg: (name, criteria = '') =>
+            `th span[data-sort=\"${name}\"] svg${criteria}`,
         logout: '.logout',
         bulkActionsToolbar: '[data-test=bulk-actions-toolbar]',
         customBulkActionsButton:
@@ -107,5 +108,5 @@ export default url => ({
 
     toggleColumnSort(name) {
         cy.get(this.elements.sortBy(name)).click();
-    }
+    },
 });

cypress/support/index.js

@@ -1 +1 @@
-require('cypress-skip-and-only-ui/support');
+require('cypress-skip-and-only-ui/support');

examples/demo/src/dataProvider/graphql.js

@@ -1,4 +1,6 @@
-import buildApolloClient, { buildQuery as buildQueryFactory } from 'ra-data-graphql-simple';
+import buildApolloClient, {
+    buildQuery as buildQueryFactory,
+} from 'ra-data-graphql-simple';
 import { DELETE } from 'ra-core';
 import gql from 'graphql-tag';
 const getGqlResource = resource => {
@@ -42,26 +44,25 @@ const customBuildQuery = introspectionResults => {
                     }
 
                     throw new Error(`Could not delete ${resource}`);
-                }
-            }
+                },
+            };
         }
 
         return buildQuery(type, resource, params);
-    }
-}
+    };
+};
 
 export default () => {
-
     return buildApolloClient({
         clientOptions: {
             uri: 'http://localhost:4000/graphql',
         },
         introspection: {
             operationNames: {
-                [DELETE]: resource => `remove${resource.name}`
-            }
+                [DELETE]: resource => `remove${resource.name}`,
+            },
         },
-        buildQuery: customBuildQuery
+        buildQuery: customBuildQuery,
     }).then(dataProvider => (type, resource, params) =>
         dataProvider(type, getGqlResource(resource), params)
     );

examples/demo/src/orders/OrderEdit.js

@@ -35,7 +35,8 @@ const OrderEdit = props => (
             <ReferenceInput source="customer_id" reference="customers">
                 <AutocompleteInput
                     optionText={choice =>
-                        `${choice.first_name} ${choice.last_name}`}
+                        `${choice.first_name} ${choice.last_name}`
+                    }
                 />
             </ReferenceInput>
             <SelectInput

examples/demo/src/reviews/ReviewList.js

@@ -59,7 +59,9 @@ class ReviewList extends Component {
                                     className={classnames(classes.list, {
                                         [classes.listWithDrawer]: isMatch,
                                     })}
-                                    bulkActionButtons={<ReviewsBulkActionButtons />}
+                                    bulkActionButtons={
+                                        <ReviewsBulkActionButtons />
+                                    }
                                     filters={<ReviewFilter />}
                                     perPage={25}
                                     sort={{ field: 'date', order: 'DESC' }}

examples/simple/src/comments/PostPreview.js

@@ -8,7 +8,7 @@ const PostPreview = props => {
             state.admin.resources[props.resource]
                 ? state.admin.resources[props.resource].data[props.id]
                 : null,
-        [props.resource, props.id],
+        [props.resource, props.id]
     );
     const version = useSelector(state => state.admin.ui.viewVersion);
     const isLoading = useSelector(state => state.admin.loading > 0);

examples/simple/src/comments/PostQuickCreate.js

@@ -57,7 +57,7 @@ const PostQuickCreate = ({ onCancel, onSave }) => {
                 },
             });
         },
-        [onSave],
+        [onSave]
     );
 
     return (

examples/simple/src/comments/PostReferenceInput.js

@@ -35,22 +35,19 @@ const PostReferenceInput = props => {
     const [showPreviewDialog, setShowPreviewDialog] = useState(false);
     const [newPostId, setNewPostId] = useState('');
 
-    useEffect(
-        () => {
-            //Refresh the choices of the ReferenceInput to ensure our newly created post
-            // always appear, even after selecting another post
-            dispatch(
-                crudGetMatching(
-                    'posts',
-                    'comments@post_id',
-                    { page: 1, perPage: 25 },
-                    { field: 'id', order: 'DESC' },
-                    {},
-                ),
-            );
-        },
-        [newPostId],
-    );
+    useEffect(() => {
+        //Refresh the choices of the ReferenceInput to ensure our newly created post
+        // always appear, even after selecting another post
+        dispatch(
+            crudGetMatching(
+                'posts',
+                'comments@post_id',
+                { page: 1, perPage: 25 },
+                { field: 'id', order: 'DESC' },
+                {}
+            )
+        );
+    }, [newPostId]);
 
     const handleNewClick = useCallback(event => {
         event.preventDefault();

examples/simple/src/posts/PostCreate.js

@@ -33,7 +33,7 @@ const SaveWithNoteButton = props => {
             handleSubmit(values => {
                 dispatch(saveWithNote(values, basePath, redirect));
             }),
-        [basePath, redirect],
+        [basePath, redirect]
     );
 
     return <SaveButton {...props} handleSubmitWithRedirect={handleClick} />;

examples/simple/src/posts/ResetViewsButton.js

@@ -8,21 +8,13 @@ const ResetViewsButton = props => {
     const dispatch = useDispatch();
     const { basePath, resource, selectedIds } = props;
 
-    const handleClick = useCallback(
-        () => {
-            dispatch(
-                startUndoable(
-                    crudUpdateMany(
-                        resource,
-                        selectedIds,
-                        { views: 0 },
-                        basePath,
-                    ),
-                ),
-            );
-        },
-        [basePath, resource, selectedIds],
-    );
+    const handleClick = useCallback(() => {
+        dispatch(
+            startUndoable(
+                crudUpdateMany(resource, selectedIds, { views: 0 }, basePath)
+            )
+        );
+    }, [basePath, resource, selectedIds]);
 
     return (
         <Button label="simple.action.resetViews" onClick={handleClick}>

examples/simple/src/users/UserCreate.js

@@ -33,7 +33,9 @@ const UserEditToolbar = ({ permissions, ...props }) => (
 
 const UserCreate = ({ permissions, ...props }) => (
     <Create {...props} aside={<Aside />}>
-        <TabbedForm toolbar={<UserEditToolbar permissions={permissions} {...props} />}>
+        <TabbedForm
+            toolbar={<UserEditToolbar permissions={permissions} {...props} />}
+        >
             <FormTab label="user.form.summary" path="">
                 <TextInput
                     source="name"

package.json

@@ -11,9 +11,8 @@
         "test": "yarn -s test-unit && yarn -s test-e2e",
         "test-ci": "yarn -s test-unit-ci && yarn -s test-e2e",
         "doc": "cd docs && jekyll server . --watch",
-        "lint": "eslint ./packages/**/src",
-        "prettier": "prettier --single-quote --trailing-comma es5 --tab-width 4 --write --list-different \"packages/*/src/**/*.{js,ts,tsx,css,md}\" \"examples/*/src/**/*.{js,ts,tsx,css,md}\"",
-        "run-simple": "cd examples/simple && yarn -s start",
+        "lint": "eslint ./packages/**/src ./examples/**/src ./cypress/**",
+        "prettier": "prettier --config ./.prettierrc.js --write --list-different \"packages/*/src/**/*.{js,json,ts,tsx,css,md}\" \"examples/*/src/**/*.{js,ts,json,tsx,css,md}\" \"cypress/**/*.{js,ts,json,tsx,css,md}\"",        "run-simple": "cd examples/simple && yarn -s start",
         "run-tutorial": "yarn run -s build && cd examples/tutorial && yarn -s start",
         "run-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=rest yarn -s start",
         "run-graphql-demo": "cd examples/demo && cross-env REACT_APP_DATA_PROVIDER=graphql yarn -s start"
@@ -51,7 +50,7 @@
         "lerna": "~2.9.1",
         "lolex": "~2.3.2",
         "mutationobserver-shim": "^0.3.3",
-        "prettier": "~1.16.4",
+        "prettier": "~1.17.1",
         "raf": "~3.4.1",
         "ts-jest": "^24.0.0",
         "tslint": "^5.16.0",

packages/ra-core/src/auth/WithPermissions.tsx

@@ -64,7 +64,7 @@ const isEmptyChildren = children => Children.count(children) === 0;
  *
  *     const customRoutes = [
  *         <Route path="/foo" render={routeParams =>
- *             <WithPermissions 
+ *             <WithPermissions
  *                  location={routeParams.location}
  *                  authParams={{ foo: 'bar' }}
  *                  render={props => <Foo {...props} />}

packages/ra-core/src/controller/field/ReferenceFieldController.tsx

@@ -2,7 +2,6 @@ import { FunctionComponent, ReactNode, ReactElement } from 'react';
 import { Record } from '../../types';
 import useReference, { UseReferenceProps } from './useReference';
 
-
 interface Props {
     allowEmpty?: boolean;
     basePath: string;

packages/ra-core/src/i18n/TranslationProvider.tsx

@@ -56,7 +56,10 @@ class TranslationProviderView extends Component<ViewProps, State> {
     }
 
     componentDidUpdate(prevProps) {
-        if (prevProps.locale !== this.props.locale || prevProps.messages !== this.props.messages) {
+        if (
+            prevProps.locale !== this.props.locale ||
+            prevProps.messages !== this.props.messages
+        ) {
             const { locale, messages } = this.props;
 
             const polyglot = new Polyglot({

packages/ra-data-graphql-simple/src/buildGqlQuery.js

@@ -51,7 +51,9 @@ export const buildFields = (introspectionResults, path = []) => fields =>
                     null,
                     null,
                     gqlTypes.selectionSet(
-                        buildFields(introspectionResults, path)(linkedType.fields)
+                        buildFields(introspectionResults, path)(
+                            linkedType.fields
+                        )
                     )
                 ),
             ];