Prettier conversion. Closes #552 (#581)

.eslintrc.js

@@ -0,0 +1,92 @@
+module.exports = {
+  extends: [
+    'prettier',
+    'airbnb',
+    'plugin:flowtype/recommended',
+    'prettier/react',
+    'prettier/flowtype',
+    'plugin:jest/recommended',
+    'plugin:prettier/recommended',
+  ],
+  parser: 'babel-eslint',
+  plugins: ['prettier', 'flowtype', 'react', 'import', 'jest'],
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+    'jest/globals': true,
+  },
+  globals: {
+    // flow globals
+    TimeoutID: true,
+    IntervalID: true,
+    AnimationFrameID: true,
+  },
+  rules: {
+    // Error on prettier violations
+    'prettier/prettier': 'error',
+
+    // New eslint style rules that is not disabled by prettier:
+    'lines-between-class-members': 'off',
+
+    // Allowing warning and error console logging
+    'no-console': ['error', { allow: ['warn', 'error'] }],
+
+    // Opting out of prefer destructuring (nicer with flow in lots of cases)
+    'prefer-destructuring': 'off',
+
+    // Disallowing the use of variables starting with `_` unless it called on `this`.
+    // Allowed: `this._secret = Symbol()`
+    // Not allowed: `const _secret = Symbol()`
+    'no-underscore-dangle': ['error', { allowAfterThis: true }],
+
+    // Cannot reassign function parameters but allowing modification
+    'no-param-reassign': ['error', { props: false }],
+
+    // Allowing ++ on numbers
+    'no-plusplus': 'off',
+
+    // Allowing Math.pow rather than forcing `**`
+    'no-restricted-properties': [
+      'off',
+      {
+        object: 'Math',
+        property: 'pow',
+      },
+    ],
+
+    // Allowing jsx in files with any file extension (old components have jsx but not the extension)
+    'react/jsx-filename-extension': 'off',
+
+    // Not requiring default prop declarations all the time
+    'react/require-default-props': 'off',
+
+    // Opt out of preferring stateless functions
+    'react/prefer-stateless-function': 'off',
+
+    // Allowing files to have multiple components in it
+    'react/no-multi-comp': 'off',
+
+    // Sometimes we use the PropTypes.object PropType for simplicity
+    'react/forbid-prop-types': 'off',
+
+    // Allowing the non function setState approach
+    'react/no-access-state-in-setstate': 'off',
+
+    // Opting out of this
+    'react/destructuring-assignment': 'off',
+
+    // Adding 'skipShapeProps' as the rule has issues with correctly handling PropTypes.shape
+    'react/no-unused-prop-types': ['error', { skipShapeProps: true }],
+
+    // Require // @flow at the top of files
+    'flowtype/require-valid-file-annotation': [
+      'error',
+      'always',
+      { annotationStyle: 'line' },
+    ],
+
+    // Allowing importing from dev deps (for stories and tests)
+    'import/no-extraneous-dependencies': 'off',
+  },
+};

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "all",
+  "semi": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true
+}

.stylelintrc

@@ -2,6 +2,11 @@
   "processors": ["stylelint-processor-styled-components"],
   "extends": [
     "stylelint-config-standard",
-    "stylelint-config-styled-components"
-  ]
+    "stylelint-config-styled-components",
+    "stylelint-config-prettier",
+  ],
+  "rules": {
+    "declaration-empty-line-before": null,
+    "comment-empty-line-before": null,
+  }
 }

package.json

@@ -26,8 +26,10 @@
   ],
   "scripts": {
     "test": "jest --config ./jest.config.js",
-    "validate": "yarn lint && yarn lint:css && yarn typecheck",
-    "lint": "yarn eslint .",
+    "validate": "yarn prettier:check lint:eslint && yarn lint:css && yarn typecheck",
+    "prettier:check": "yarn prettier --debug-check src/**/*.{js,jsx} test/**/*.{js,jsx} stories/**/*.{js,jsx} website/src/**/*.{js,jsx}",
+    "prettier:write": "yarn prettier --write src/**/*.{js,jsx} test/**/*.{js,jsx} stories/**/*.{js,jsx} website/src/**/*.{js,jsx}",
+    "lint:eslint": "yarn eslint .",
     "lint:css": "stylelint \"stories/**/*.{js,jsx}\"",
     "typecheck": "flow check",
     "check-bundle-sizes": "cross-env SNAPSHOT=match yarn build:dist && yarn build:clean",
@@ -74,15 +76,18 @@
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
+    "eslint-config-airbnb": "^17.0.0",
+    "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-flowtype": "^2.49.3",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-jest": "^21.17.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-prettier": "^2.6.1",
     "eslint-plugin-react": "^7.9.1",
     "flow-bin": "0.73.0",
     "jest": "^23.1.0",
     "jest-watch-typeahead": "^0.1.0",
+    "prettier": "^1.13.6",
     "puppeteer": "^1.4.0",
     "raf-stub": "^2.0.2",
     "react": "^16.3.1",
@@ -99,6 +104,7 @@
     "rollup-plugin-uglify": "^3.0.0",
     "styled-components": "^3.3.2",
     "stylelint": "9.2.1",
+    "stylelint-config-prettier": "^3.3.0",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.3.1"

rollup.config.js

@@ -75,10 +75,7 @@ export default [
     input,
     output: { file: pkg.main, format: 'cjs' },
     external: excludeAllExternals,
-    plugins: [
-      resolve({ extensions }),
-      babel(getBabelOptions()),
-    ],
+    plugins: [resolve({ extensions }), babel(getBabelOptions())],
   },
   // EcmaScript Module (esm) build
   // - Keeping console.log statements

src/debug/timings.js

@@ -3,7 +3,7 @@ import invariant from 'tiny-invariant';
 
 type Records = {
   [key: string]: number,
-}
+};
 
 const records: Records = {};
 
@@ -33,7 +33,7 @@ export const start = (key: string) => {
 type Style = {|
   textColor: string,
   symbol: string,
-|}
+|};
 
 export const finish = (key: string) => {
   if (isProduction) {
@@ -71,7 +71,8 @@ export const finish = (key: string) => {
   })();
 
   // eslint-disable-next-line no-console
-  console.log(`${style.symbol} %cTiming %c${rounded} %cms %c${key}`,
+  console.log(
+    `${style.symbol} %cTiming %c${rounded} %cms %c${key}`,
     // title
     'color: blue; font-weight: bold; ',
     // result
@@ -82,4 +83,3 @@ export const finish = (key: string) => {
     'color: purple; font-weight: bold;',
   );
 };
-

src/index.js

@@ -2,13 +2,13 @@
 
 // Components
 
-export { default as DragDropContext } from './view/drag-drop-context/';
-export { default as Droppable } from './view/droppable/';
-export { default as Draggable } from './view/draggable/';
+export { default as DragDropContext } from './view/drag-drop-context';
+export { default as Droppable } from './view/droppable';
+export { default as Draggable } from './view/draggable';
 
 // Utils
 
-export { resetServerContext } from './view/drag-drop-context/';
+export { resetServerContext } from './view/drag-drop-context';
 
 // Public flow types
 
@@ -17,7 +17,6 @@ export type {
   TypeId,
   DraggableId,
   DroppableId,
-
   // Hooks
   DragStart,
   DragUpdate,
@@ -48,6 +47,4 @@ export type {
 } from './view/draggable/draggable-types';
 
 // DragHandle
-export type {
-  DragHandleProps,
-} from './view/drag-handle/drag-handle-types';
+export type { DragHandleProps } from './view/drag-handle/drag-handle-types';