style(import-default-name): Added import-default-name eslint rule

Added a rule to force the naming of the default import specified packages. This will fix
inconsistencies with variable names.

Author: dmiller9911

.eslintrc

@@ -6,6 +6,13 @@
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-static-element-interactions": "off",
     "jsx-a11y/no-noninteractive-element-interactions": "off",
+    "import-default-name": [
+      "error",
+      {
+        "classnames": "classNames",
+        "prop-types": "PropTypes"
+      }
+    ],
     "import/no-extraneous-dependencies": [
       "error",
       {

.vscode/settings.json

@@ -2,5 +2,8 @@
   "editor.formatOnSave": true,
   "prettier.eslintIntegration": true,
   "prettier.singleQuote": true,
-  "prettier.trailingComma": "none"
+  "prettier.trailingComma": "none",
+  "eslint.options": {
+    "rulePaths": ["./lint-rules"]
+  }
 }

lint-rules/import-default-name.js

@@ -0,0 +1,52 @@
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Force default import names to match specified values',
+      category: 'Possible Errors',
+      recommended: true
+    },
+    fixable: 'code',
+    schema: [
+      {
+        type: 'object',
+        properties: {},
+        additionalProperties: true
+      }
+    ]
+  },
+  create(context) {
+    const [importMap = {}] = context.options;
+    return {
+      ImportDeclaration(node) {
+        const defaultImport = node.specifiers.find(
+          spec => spec.type === 'ImportDefaultSpecifier'
+        );
+        if (!defaultImport) {
+          return;
+        }
+        const expectedName = importMap[node.source.value];
+        const receivedName = defaultImport.local.name;
+        if (expectedName && expectedName !== receivedName) {
+          context.report({
+            node,
+            message:
+              'Expected default import to be named "{{ expected }}" but received "{{ received }}"',
+            data: {
+              expected: expectedName,
+              received: receivedName
+            },
+            fix(fixer) {
+              const [varDecl] = context.getDeclaredVariables(node);
+              return [
+                ...varDecl.references.map(ref =>
+                  fixer.replaceText(ref.identifier, expectedName)
+                ),
+                fixer.replaceText(defaultImport, expectedName)
+              ];
+            }
+          });
+        }
+      }
+    };
+  }
+};

package.json

@@ -110,7 +110,7 @@
     "build:scripts": "babel src --out-dir dist/js --ignore .test.js,__mocks__",
     "build:less": "mkdir -p dist/less && cp -r less/* dist/less",
     "build:sass": "mkdir -p dist/sass && cp -r sass/patternfly-react/* dist/sass && node-sass --output-style compressed --include-path sass $npm_package_sassIncludes_patternfly $npm_package_sassIncludes_bootstrap $npm_package_sassIncludes_fontAwesome -o dist/css sass/patternfly-react.scss",
-    "lint": "eslint --fix --max-warnings 0 src storybook && npm run stylelint",
+    "lint": "eslint --rulesdir lint-rules/ --fix --max-warnings 0 src storybook && npm run stylelint",
     "prettier": "prettier --write --single-quote --trailing-comma=none '{src,storybook}/**/*.js'",
     "prepare": "npm run build",
     "test": "npm run lint && jest",

sass/patternfly-react/_patternfly-react.scss

@@ -2,7 +2,6 @@
   Patternfly React Partials
 */
 @import 'card';
-
 @import 'utilization-bar';
 @import 'breadcrumb';
 @import 'label-remove';

src/components/Cards/AggregateStatusCard/AggregateStatusCard.test.js

@@ -8,9 +8,7 @@ import {
 } from './index';
 
 test('Aggregate Status Card Count is working properly', () => {
-  const component = mount(
-    <AggregateStatusCount> 9 </AggregateStatusCount>
-  );
+  const component = mount(<AggregateStatusCount> 9 </AggregateStatusCount>);
 
   expect(component.render()).toMatchSnapshot();
 });

src/components/Cards/AggregateStatusCard/AggregateStatusCount.js

@@ -1,9 +1,9 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 const AggregateStatusCount = ({ children, className, ...props }) => {
-  const classes = ClassNames('card-pf-aggregate-status-count', className);
+  const classes = classNames('card-pf-aggregate-status-count', className);
 
   return (
     <span className={classes} {...props}>

src/components/Cards/AggregateStatusCard/AggregateStatusNotification.js

@@ -1,9 +1,9 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 const AggregateStatusNotification = ({ children, className, ...props }) => {
-  const classes = ClassNames(
+  const classes = classNames(
     'card-pf-aggregate-status-notification',
     className
   );

src/components/Cards/AggregateStatusCard/AggregateStatusNotifications.js

@@ -1,9 +1,9 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 const AggregateStatusNotifications = ({ children, className, ...props }) => {
-  const classes = ClassNames(
+  const classes = classNames(
     'card-pf-aggregate-status-notifications',
     className
   );

src/components/Cards/Card.js

@@ -1,4 +1,4 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -12,7 +12,7 @@ const Card = ({
   cardRef,
   ...props
 }) => {
-  const classes = ClassNames(
+  const classes = classNames(
     'card-pf',
     { 'card-pf-accented': accented },
     { 'card-pf-aggregate-status': aggregated },