ci: add prettier back 🎉

.eslintrc.js

@@ -6,6 +6,8 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/recommended-requiring-type-checking',
     'airbnb/hooks',
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
     'plugin:eslint-comments/recommended',
     'plugin:jest/recommended',
     'plugin:promise/recommended',
@@ -16,14 +18,44 @@ module.exports = {
     'plugin:import/warnings',
     'plugin:import/typescript',
   ],
-  plugins: ['@typescript-eslint', 'eslint-comments', 'jest', 'import', 'promise', 'unicorn', 'header', 'react-hooks', 'jsx-a11y'],
+  plugins: [
+    '@typescript-eslint',
+    'eslint-comments',
+    'jest',
+    'import',
+    'promise',
+    'unicorn',
+    'header',
+    'react-hooks',
+    'jsx-a11y',
+    'prettier',
+  ],
   rules: {
     /**
      * depricated to be deleted
      */
     // https://github.com/typescript-eslint/typescript-eslint/issues/2077
     '@typescript-eslint/camelcase': 0,
 
+    /**
+     *****************************************
+     * Rules with high processing demand
+     *****************************************
+     */
+    'import/no-restricted-paths':
+      process.env.NODE_ENV === 'production'
+        ? [
+            'error',
+            {
+              zones: [
+                { target: './src', from: './src/index.ts' },
+                { target: './src', from: './', except: ['./src', './node_modules/'] },
+              ],
+            },
+          ]
+        : 0,
+    'import/namespace': process.env.NODE_ENV === 'production' ? 2 : 0,
+
     /**
      *****************************************
      * Rules to consider adding/fixing later
@@ -99,14 +131,18 @@ module.exports = {
         ExportDeclaration: { consistent: true },
       },
     ],
-    quotes: ['error', 'single'],
     semi: ['error', 'always'],
     // https://github.com/typescript-eslint/typescript-eslint/issues/1824
-    indent: ['error', 2, {
-      SwitchCase: 1,
-      MemberExpression: 1,
-      offsetTernaryExpressions: true,
-    }],
+    // TODO: Add back once indent ts rule is fixed
+    // indent: [
+    //   'error',
+    //   2,
+    //   {
+    //     SwitchCase: 1,
+    //     MemberExpression: 1,
+    //     offsetTernaryExpressions: true,
+    //   },
+    // ],
     'max-len': [
       'warn',
       {
@@ -144,7 +180,6 @@ module.exports = {
     '@typescript-eslint/indent': 0,
     '@typescript-eslint/no-inferrable-types': 0,
     '@typescript-eslint/ban-ts-comment': 1,
-    '@typescript-eslint/space-before-function-paren': [2, 'never'],
     '@typescript-eslint/no-unused-vars': [
       'error',
       {
@@ -166,22 +201,15 @@ module.exports = {
     /*
      * import plugin
      */
-    'import/order': ['error', {
-      'newlines-between': 'always',
-      groups: [
-        'builtin',
-        'external',
-        ['parent', 'sibling', 'index', 'internal'],
-      ],
-      alphabetize: { order: 'asc', caseInsensitive: true }, // todo replace with directory gradient ordering
-    }],
-    'import/no-unresolved': ['error', { ignore: ['theme_dark.scss', 'theme_light.scss'] }],
-    'import/no-restricted-paths': [
+    'import/order': [
       'error',
       {
-        zones: [{ target: './src', from: './src/index.ts' }, { target: './src', from: './', except: ['./src', './node_modules/'] }],
+        'newlines-between': 'always',
+        groups: ['builtin', 'external', ['parent', 'sibling', 'index', 'internal']],
+        alphabetize: { order: 'asc', caseInsensitive: true }, // todo replace with directory gradient ordering
       },
     ],
+    'import/no-unresolved': ['error', { ignore: ['theme_dark.scss', 'theme_light.scss'] }],
     // https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html
     'import/prefer-default-export': 0,
     // Limit usage in development directories
@@ -192,6 +220,10 @@ module.exports = {
      */
     'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
     'react/prop-types': 0,
+    'react/sort-comp': 0,
+    'react/jsx-one-expression-per-line': 0,
+    'react/jsx-curly-newline': 0,
+    'react/jsx-indent': 0,
     // Too restrictive: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md
     'react/destructuring-assignment': 0,
     // No jsx extension: https://github.com/facebook/create-react-app/issues/87#issuecomment-234627904
@@ -347,6 +379,12 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['.playground/**/*.ts?(x)'],
+      rules: {
+        'react/prefer-stateless-function': 0,
+      },
+    },
     {
       files: ['*.test.ts?(x)'],
       rules: {

.prettierignore

@@ -1,9 +1,5 @@
 *.md
 *.mdx
-*.ts
-*.tsx
-*.js
-*.jsx
 .out/
 .idea/
 .vscode/

.storybook-docs/webpack.config.js

@@ -36,7 +36,7 @@ const scssLoaders = [
   'sass-loader',
 ];
 
-module.exports = async({ config }) => {
+module.exports = async ({ config }) => {
   // config.plugins.push(new webpack.EnvironmentPlugin({ RNG_SEED: null }));
 
   // Replace default css rules with nonce

.storybook/webpack.config.js

@@ -40,26 +40,28 @@ const scssLoaders = [
 const MAX_CYCLES = 0;
 let numCyclesDetected = 0;
 
-module.exports = async({ config }) => {
+module.exports = async ({ config }) => {
   config.plugins.push(new webpack.EnvironmentPlugin({ RNG_SEED: null }));
-  config.plugins.push(new CircularDependencyPlugin({
-    onStart() {
-      numCyclesDetected = 0;
-    },
-    onDetected({ paths, compilation }) {
-      if (!/^node_modules\/.+/.test(paths[0])) {
-        numCyclesDetected++;
-        compilation.warnings.push(new Error(paths.join(' -> ')));
-      }
-    },
-    onEnd({ compilation }) {
-      if (numCyclesDetected > MAX_CYCLES) {
-        compilation.errors.push(new Error(
-          `Detected ${numCyclesDetected} cycles which exceeds configured limit of ${MAX_CYCLES}`
-        ));
-      }
-    },
-  }));
+  config.plugins.push(
+    new CircularDependencyPlugin({
+      onStart() {
+        numCyclesDetected = 0;
+      },
+      onDetected({ paths, compilation }) {
+        if (!/^node_modules\/.+/.test(paths[0])) {
+          numCyclesDetected++;
+          compilation.warnings.push(new Error(paths.join(' -> ')));
+        }
+      },
+      onEnd({ compilation }) {
+        if (numCyclesDetected > MAX_CYCLES) {
+          compilation.errors.push(
+            new Error(`Detected ${numCyclesDetected} cycles which exceeds configured limit of ${MAX_CYCLES}`),
+          );
+        }
+      },
+    }),
+  );
 
   config.module.rules.push({
     test: /\.tsx?$/,

browsers/browsers.test.ts

@@ -27,7 +27,7 @@ jest.setTimeout(30000);
 
 let driver: webdriver.WebDriver;
 describe('smoke tests', () => {
-  beforeAll(async() => {
+  beforeAll(async () => {
     let capabilities: webdriver.Capabilities | null = null;
     switch (process.env.BROWSER || 'chrome') {
       case 'ie':
@@ -59,11 +59,11 @@ describe('smoke tests', () => {
     }
   });
 
-  afterAll(async() => {
+  afterAll(async () => {
     await driver.quit();
   });
 
-  test('elastic-chart element smoke test', async() => {
+  test('elastic-chart element smoke test', async () => {
     await driver.get('http://localhost:8080');
     await driver.sleep(5000);
 

browsers/setup.js

@@ -24,17 +24,18 @@ const WebpackDevServer = require('webpack-dev-server');
 
 const config = require(path.join(__dirname, '..', '.playground', 'webpack.config.js'));
 
-module.exports = async() => await new Promise((resolve, reject) => {
-  const compiler = webpack(config);
-  const server = new WebpackDevServer(compiler);
-  compiler.hooks.done.tap('done', () => {
-    resolve();
-    global.__WP_SERVER__ = server;
-  });
+module.exports = async () =>
+  await new Promise((resolve, reject) => {
+    const compiler = webpack(config);
+    const server = new WebpackDevServer(compiler);
+    compiler.hooks.done.tap('done', () => {
+      resolve();
+      global.__WP_SERVER__ = server;
+    });
 
-  server.listen(8080, 'localhost', (err) => {
-    if (err) {
-      reject(err);
-    }
+    server.listen(8080, 'localhost', (err) => {
+      if (err) {
+        reject(err);
+      }
+    });
   });
-});

browsers/teardown.js

@@ -17,6 +17,6 @@
  * under the License.
  */
 
-module.exports = async() => {
+module.exports = async () => {
   await global.__WP_SERVER__.close();
 };

integration/helpers.ts

@@ -72,9 +72,7 @@ function encodeString(string: string) {
  */
 const storiesToSkip: Record<string, string[]> = {
   // Interactions: ['Some story name'],
-  Legend: [
-    'Actions',
-  ],
+  Legend: ['Actions'],
 };
 
 /**

integration/jest_puppeteer.config.js

@@ -52,7 +52,7 @@ const customConfig = {
         },
       }
     : {
-      // https://github.com/gidztech/jest-puppeteer-docker/issues/24
+        // https://github.com/gidztech/jest-puppeteer-docker/issues/24
         chromiumFlags: [], // for docker chromium options
         connect: {
           ...sharedConfig,

integration/page_objects/common.ts

@@ -332,7 +332,7 @@ class CommonPage {
     mousePosition: MousePosition,
     options?: Omit<ScreenshotElementAtUrlOptions, 'action'>,
   ) {
-    const action = async() => await this.moveMouseRelativeToDOMElement(mousePosition, this.chartSelector);
+    const action = async () => await this.moveMouseRelativeToDOMElement(mousePosition, this.chartSelector);
     await this.expectChartAtUrlToMatchScreenshot(url, {
       ...options,
       action,
@@ -353,7 +353,7 @@ class CommonPage {
     end: MousePosition,
     options?: Omit<ScreenshotElementAtUrlOptions, 'action'>,
   ) {
-    const action = async() => await this.dragMouseRelativeToDOMElement(start, end, this.chartSelector);
+    const action = async () => await this.dragMouseRelativeToDOMElement(start, end, this.chartSelector);
     await this.expectChartAtUrlToMatchScreenshot(url, {
       ...options,
       action,

integration/tests/all.test.ts

@@ -30,7 +30,7 @@ const storyGroups = getStorybookInfo();
 describe('Baseline Visual tests for all stories', () => {
   describe.each(storyGroups)('%s', (_group, encodedGroup, stories) => {
     describe.each(stories)('%s', (_title, encodedTitle, delay) => {
-      it('visually looks correct', async() => {
+      it('visually looks correct', async () => {
         const url = `http://localhost:9001?id=${encodedGroup}--${encodedTitle}`;
         await common.expectChartAtUrlToMatchScreenshot(url, { delay });
       });

integration/tests/annotations_stories.test.ts

@@ -21,22 +21,22 @@ import { common } from '../page_objects';
 
 describe('Annotations stories', () => {
   describe('rotation', () => {
-    it('rotation - 0', async() => {
+    it('rotation - 0', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
         'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=0',
       );
     });
-    it('rotation - 90', async() => {
+    it('rotation - 90', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
         'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=90',
       );
     });
-    it('rotation - negative 90', async() => {
+    it('rotation - negative 90', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
         'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=-90',
       );
     });
-    it('rotation - 180', async() => {
+    it('rotation - 180', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
         'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=180',
       );

integration/tests/area_stories.test.ts

@@ -20,14 +20,14 @@
 import { common } from '../page_objects';
 
 describe('Area series stories', () => {
-  it('stacked as NOT percentage', async() => {
+  it('stacked as NOT percentage', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
       'http://localhost:9001/?path=/story/area-chart--stacked-percentage&knob-stacked as percentage=',
     );
   });
 
   describe('accessorFormats', () => {
-    it('should show custom format', async() => {
+    it('should show custom format', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
         'http://localhost:9001/?path=/story/area-chart--band-area&knob-scale to extent=&knob-y0AccessorFormat= [min]&knob-y1AccessorFormat= [max]',
       );
@@ -37,15 +37,15 @@ describe('Area series stories', () => {
   describe('scale to extents', () => {
     describe('domain.fit is true', () => {
       const trueUrl = 'http://localhost:9001/?path=/story/area-chart--stacked-band&knob-fit Y domain=true';
-      it('should show correct extents - Banded', async() => {
+      it('should show correct extents - Banded', async () => {
         await common.expectChartAtUrlToMatchScreenshot(trueUrl);
       });
     });
 
     describe('domain.fit is false', () => {
       const falseUrl = 'http://localhost:9001/?path=/story/area-chart--stacked-band&knob-fit Y domain=false';
 
-      it('should show correct extents - Banded', async() => {
+      it('should show correct extents - Banded', async () => {
         await common.expectChartAtUrlToMatchScreenshot(falseUrl);
       });
     });