Update dependency @cloudfour/eslint-plugin to v20 (#1860)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Caleb Eby <[email protected]>

Author: renovate[bot]

.eslintrc.js

@@ -36,6 +36,15 @@ module.exports = {
       rules: {
         // Src files are bundled so they do not have to follow Node's resolution rules
         '@cloudfour/n/no-missing-import': 'off',
+        // Webpack (at least the version we're using) doesn't recognize node: imports
+        '@cloudfour/unicorn/prefer-node-protocol': 'off',
+      },
+    },
+    {
+      files: ['*.mdx'],
+      rules: {
+        // The auto-fixer for this rule does not work with .mdx files.
+        '@cloudfour/import/order': 'off',
       },
     },
   ],

glob-sass-importer.js

@@ -1,6 +1,7 @@
-const glob = require('tiny-glob');
 const path = require('path');
 
+const glob = require('tiny-glob');
+
 /** @typedef {{file: string} | {contents: string} | null } ResolveResult */
 
 /**

gulpfile.js/tasks/build-sass.js

@@ -1,12 +1,12 @@
+const cssnano = require('cssnano');
 const { src, dest } = require('gulp');
-const outDir = 'dist';
-
-const sass = require('gulp-sass')(require('sass'));
-const rename = require('gulp-rename');
 const postcss = require('gulp-postcss');
-const cssnano = require('cssnano');
+const rename = require('gulp-rename');
+const sass = require('gulp-sass')(require('sass'));
 sass.compiler = require('sass');
 
+const outDir = 'dist';
+
 const buildSass = () =>
   src('./src/index.scss')
     .pipe(

gulpfile.js/tasks/build-scripts.js

@@ -1,11 +1,12 @@
-const rollup = require('rollup');
+const fs = require('fs').promises;
 const path = require('path');
+
+const { getBabelInputPlugin } = require('@rollup/plugin-babel');
 const nodeResolve = require('@rollup/plugin-node-resolve').default;
+const rollup = require('rollup');
+const dts = require('rollup-plugin-dts').default;
 const { terser } = require('rollup-plugin-terser');
-const { getBabelInputPlugin } = require('@rollup/plugin-babel');
-const fs = require('fs').promises;
 const glob = require('tiny-glob');
-const dts = require('rollup-plugin-dts').default;
 
 const outDir = 'dist';
 /** Used to hold TS output from tsc, before it gets bundled by rollup into `dist` */

gulpfile.js/tasks/svg-to-twig.js

@@ -1,11 +1,12 @@
+const { readFileSync } = require('fs');
+const path = require('path');
+
 const { src, dest } = require('gulp');
-const svgmin = require('gulp-svgmin');
 const rename = require('gulp-rename');
-const { obj } = require('through2');
-const ltx = require('ltx');
+const svgmin = require('gulp-svgmin');
 const yaml = require('js-yaml');
-const path = require('path');
-const { readFileSync } = require('fs');
+const ltx = require('ltx');
+const { obj } = require('through2');
 
 // Load SVGO preferences from config file to keep things DRY
 const svgoPath = path.join(__dirname, '../../.svgo.yml');

gulpfile.js/tasks/watch-preprocess.js

@@ -1,6 +1,7 @@
 const { watch } = require('gulp');
-const svgToTwig = require('./svg-to-twig');
+
 const buildTokens = require('./build-tokens');
+const svgToTwig = require('./svg-to-twig');
 
 module.exports = function () {
   watch('src/assets/**/*.svg', svgToTwig);

package-lock.json

@@ -48,7 +48,7 @@
     "@babel/preset-env": "7.18.2",
     "@changesets/changelog-github": "0.4.4",
     "@changesets/cli": "2.22.0",
-    "@cloudfour/eslint-plugin": "19.0.0",
+    "@cloudfour/eslint-plugin": "20.0.2",
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-node-resolve": "13.3.0",
     "@storybook/addon-a11y": "6.5.9",
@@ -150,6 +150,12 @@
   "jest": {
     "setupFilesAfterEnv": [
       "./jest.setup.js"
-    ]
+    ],
+    "moduleNameMapper": {
+      "^(.+)\\.js$": [
+        "$1.js",
+        "$1.ts"
+      ]
+    }
   }
 }

package.json

@@ -1,4 +1,4 @@
-import { Story, Canvas, Meta } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import template from './alert.twig';
 
 <Meta

src/components/alert/alert.stories.mdx

@@ -1,4 +1,4 @@
-import { Story, Canvas, Meta } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import template from './author.twig';
 import ariannaImage from './demo/arianna.png';
 import danielleImage from './demo/danielle.png';

src/components/author/author.stories.mdx

@@ -1,7 +1,9 @@
 import path from 'path';
+
 import type { ElementHandle } from 'pleasantest';
 import { getAccessibilityTree, withBrowser } from 'pleasantest';
-import { loadTwigTemplate } from '../../../test-utils';
+
+import { loadTwigTemplate } from '../../../test-utils.js';
 
 /** Helper to load the Twig template file */
 const template = loadTwigTemplate(path.join(__dirname, './author.twig'));

src/components/author/author.test.ts

@@ -1,4 +1,4 @@
-import { Story, Canvas, Meta } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import template from './avatar.twig';
 import demoImageSmall from './demo/tyler-64.png';
 import demoImageMedium from './demo/tyler-335.png';

src/components/avatar/avatar.stories.mdx

@@ -1,4 +1,4 @@
-import { Story, Canvas, Meta } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import template from './badge.twig';
 const badgeStory = (args) => {
   // Don't bother with the inline options if they don't exist or are defaults