diff --git a/.eslintrc b/.eslintrc index 90bd2aa159e..7ff694de61b 100644 --- a/.eslintrc +++ b/.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", { diff --git a/.vscode/settings.json b/.vscode/settings.json index 5ab825d8aa3..27b869695f3 100644 --- a/.vscode/settings.json +++ b/.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"] + } } diff --git a/lint-rules/import-default-name.js b/lint-rules/import-default-name.js new file mode 100644 index 00000000000..3c5aa5cf5d1 --- /dev/null +++ b/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) + ]; + } + }); + } + } + }; + } +}; diff --git a/package.json b/package.json index 4d137ba45a7..9c338a99d00 100644 --- a/package.json +++ b/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", diff --git a/sass/patternfly-react/_patternfly-react.scss b/sass/patternfly-react/_patternfly-react.scss index d88c80d7f06..1a48a8f4474 100644 --- a/sass/patternfly-react/_patternfly-react.scss +++ b/sass/patternfly-react/_patternfly-react.scss @@ -2,7 +2,6 @@ Patternfly React Partials */ @import 'card'; - @import 'utilization-bar'; @import 'breadcrumb'; @import 'label-remove'; diff --git a/src/components/Cards/AggregateStatusCard/AggregateStatusCard.test.js b/src/components/Cards/AggregateStatusCard/AggregateStatusCard.test.js index ff344e23e66..706168a43f4 100644 --- a/src/components/Cards/AggregateStatusCard/AggregateStatusCard.test.js +++ b/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( - 9 - ); + const component = mount( 9 ); expect(component.render()).toMatchSnapshot(); }); diff --git a/src/components/Cards/AggregateStatusCard/AggregateStatusCount.js b/src/components/Cards/AggregateStatusCard/AggregateStatusCount.js index 1ffedafbede..fa342014dee 100644 --- a/src/components/Cards/AggregateStatusCard/AggregateStatusCount.js +++ b/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 ( diff --git a/src/components/Cards/AggregateStatusCard/AggregateStatusNotification.js b/src/components/Cards/AggregateStatusCard/AggregateStatusNotification.js index c19c5dc8164..defbc80e099 100644 --- a/src/components/Cards/AggregateStatusCard/AggregateStatusNotification.js +++ b/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 ); diff --git a/src/components/Cards/AggregateStatusCard/AggregateStatusNotifications.js b/src/components/Cards/AggregateStatusCard/AggregateStatusNotifications.js index dc5e5902730..4abdc760739 100644 --- a/src/components/Cards/AggregateStatusCard/AggregateStatusNotifications.js +++ b/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 ); diff --git a/src/components/Cards/Card.js b/src/components/Cards/Card.js index 10271d7c4de..e17d349dcfb 100644 --- a/src/components/Cards/Card.js +++ b/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 }, diff --git a/src/components/Cards/CardBody.js b/src/components/Cards/CardBody.js index 72c22ba1b2a..bc70da1c0a3 100644 --- a/src/components/Cards/CardBody.js +++ b/src/components/Cards/CardBody.js @@ -1,9 +1,9 @@ -import ClassNames from 'classnames'; +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; const CardBody = ({ children, className, ...props }) => { - const classes = ClassNames('card-pf-body', className); + const classes = classNames('card-pf-body', className); return (
diff --git a/src/components/Cards/CardDropdownButton.js b/src/components/Cards/CardDropdownButton.js index 2c2d41f8f9f..1ace7f1bb53 100644 --- a/src/components/Cards/CardDropdownButton.js +++ b/src/components/Cards/CardDropdownButton.js @@ -1,4 +1,4 @@ -import ClassNames from 'classnames'; +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import { Dropdown } from '../Dropdown'; @@ -12,7 +12,7 @@ const CardDropdownButton = ({ pullRight, ...props }) => { - const classes = ClassNames('card-pf-time-frame-filter', className); + const classes = classNames('card-pf-time-frame-filter', className); const CustomButtonGroup = customGroup => ( ); diff --git a/src/components/Cards/CardFooter.js b/src/components/Cards/CardFooter.js index f8815406f7f..5dcd304f91d 100644 --- a/src/components/Cards/CardFooter.js +++ b/src/components/Cards/CardFooter.js @@ -1,9 +1,9 @@ -import ClassNames from 'classnames'; +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; const CardFooter = ({ children, className, ...props }) => { - const classes = ClassNames('card-pf-footer', className); + const classes = classNames('card-pf-footer', className); return (
diff --git a/src/components/Cards/CardGrid.js b/src/components/Cards/CardGrid.js index e505bfbc91f..1225d428d6c 100644 --- a/src/components/Cards/CardGrid.js +++ b/src/components/Cards/CardGrid.js @@ -1,11 +1,11 @@ -import ClassNames from 'classnames'; +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import CardHeightMatching from './CardHeightMatching'; import { Grid } from '../Grid/index'; const CardGrid = ({ matchHeight, children, className, ...props }) => { - const classes = ClassNames('container-cards-pf', className); + const classes = classNames('container-cards-pf', className); const cardSelector = ['.card-pf-match-height']; if (matchHeight) { diff --git a/src/components/Cards/CardHeading.js b/src/components/Cards/CardHeading.js index 84f810cfe37..d4f35b3ff4c 100644 --- a/src/components/Cards/CardHeading.js +++ b/src/components/Cards/CardHeading.js @@ -1,9 +1,9 @@ -import ClassNames from 'classnames'; +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; const CardHeading = ({ children, className, ...props }) => { - const classes = ClassNames('card-pf-heading', className); + const classes = classNames('card-pf-heading', className); return (
diff --git a/src/components/Cards/CardLink.js b/src/components/Cards/CardLink.js index a4bf20a22cc..f60db9768ff 100644 --- a/src/components/Cards/CardLink.js +++ b/src/components/Cards/CardLink.js @@ -1,9 +1,9 @@ -import ClassNames from 'classnames'; +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; const CardLink = ({ disabled, children, className, icon, ...props }) => { - const classes = ClassNames( + const classes = classNames( { 'card-pf-link-with-icon': icon, disabled diff --git a/src/components/Cards/CardTitle.js b/src/components/Cards/CardTitle.js index 8b9fd99e8d0..445d461337c 100644 --- a/src/components/Cards/CardTitle.js +++ b/src/components/Cards/CardTitle.js @@ -1,9 +1,9 @@ -import ClassNames from 'classnames'; +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; const CardTitle = ({ children, className, ...props }) => { - const classes = ClassNames('card-pf-title', className); + const classes = classNames('card-pf-title', className); return (

diff --git a/src/components/Cards/Cards.test.js b/src/components/Cards/Cards.test.js index 7a1dcf9a78b..f75f3ebc7f9 100644 --- a/src/components/Cards/Cards.test.js +++ b/src/components/Cards/Cards.test.js @@ -29,9 +29,7 @@ test('Card Title is working properly', () => { }); test('Card Footer is working properly', () => { - const component = mount( - This is a Card Footer - ); + const component = mount(This is a Card Footer); expect(component.render()).toMatchSnapshot(); }); diff --git a/src/components/Cards/UtilizationTrendCard/UtilizationCard.js b/src/components/Cards/UtilizationTrendCard/UtilizationCard.js index 37925be72d7..8e1787d2d3a 100644 --- a/src/components/Cards/UtilizationTrendCard/UtilizationCard.js +++ b/src/components/Cards/UtilizationTrendCard/UtilizationCard.js @@ -1,10 +1,10 @@ -import ClassNames from 'classnames'; +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import { Card } from '../index'; const UtilizationCard = ({ children, className, ...props }) => { - const classes = ClassNames('card-pf-utilization', className); + const classes = classNames('card-pf-utilization', className); return ( diff --git a/src/components/Cards/UtilizationTrendCard/UtilizationCardDetails.js b/src/components/Cards/UtilizationTrendCard/UtilizationCardDetails.js index f33e433c921..97f2370f36e 100644 --- a/src/components/Cards/UtilizationTrendCard/UtilizationCardDetails.js +++ b/src/components/Cards/UtilizationTrendCard/UtilizationCardDetails.js @@ -1,9 +1,9 @@ -import ClassNames from 'classnames'; +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; const UtilizationCardDetails = ({ children, className, ...props }) => { - const classes = ClassNames('card-pf-utilization-details', className); + const classes = classNames('card-pf-utilization-details', className); return (

diff --git a/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsCount.js b/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsCount.js index 8a583541520..183eb189acc 100644 --- a/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsCount.js +++ b/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsCount.js @@ -1,9 +1,9 @@ -import ClassNames from 'classnames'; +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; const UtilizationCardDetailsCount = ({ children, className, ...props }) => { - const classes = ClassNames( + const classes = classNames( 'card-pf-utilization-card-details-count', className ); diff --git a/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsDesc.js b/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsDesc.js index de2a1d44cf0..6a675a5bd45 100644 --- a/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsDesc.js +++ b/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsDesc.js @@ -1,9 +1,9 @@ -import ClassNames from 'classnames'; +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; const UtilizationCardDetailsDesc = ({ children, className, ...props }) => { - const classes = ClassNames( + const classes = classNames( 'card-pf-utilization-card-details-description', className ); diff --git a/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine1.js b/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine1.js index b85189cafd6..4be920990b4 100644 --- a/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine1.js +++ b/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine1.js @@ -1,9 +1,9 @@ -import ClassNames from 'classnames'; +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; const UtilizationCardDetailsLine1 = ({ children, className, ...props }) => { - const classes = ClassNames( + const classes = classNames( 'card-pf-utilization-card-details-line-1', className ); diff --git a/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine2.js b/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine2.js index 2b7140c5c45..d9d6ca9c1ad 100644 --- a/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine2.js +++ b/src/components/Cards/UtilizationTrendCard/UtilizationCardDetailsLine2.js @@ -1,9 +1,9 @@ -import ClassNames from 'classnames'; +import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; const UtilizationCardDetailsLine2 = ({ children, className, ...props }) => { - const classes = ClassNames( + const classes = classNames( 'card-pf-utilization-card-details-line-2', className );