feat: add comment of eslint disabled rule

README.md

@@ -27,7 +27,6 @@ Here is a quick example to get you started:
 **./App.js**
 
 ```jsx
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 
 import CustomComponent from './CustomComponent';
@@ -48,7 +47,6 @@ root.render(<App />);
 **./CustomComponent.js**
 
 ```jsx
-import React from 'react';
 import { Button } from '@ichef/gypcrete';
 
 const CustomComponent = () => <Button basic="Hello World!" />;

packages/core/configs/svgr/componentTemplate.js

@@ -10,7 +10,7 @@ function componentTemplate({ template }, opts, { componentName, props, jsx }) {
    * See usage: https://babeljs.io/docs/en/next/babel-template.html#string-usage
    */
   const code = `
-    import React from 'react';
+
     NEWLINE
 
     export default function COMPONENT_NAME(PROPS) {

packages/core/src/Avatar.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 

packages/core/src/BasicRow.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import FlexCell from './FlexCell';

packages/core/src/Button.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 

packages/core/src/Checkbox.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import prefixClass from './utils/prefixClass';
@@ -90,7 +90,7 @@ class Checkbox extends PureComponent {
   render() {
     const {
       input,
-      indeterminate,
+      indeterminate, // eslint-disable-line no-unused-vars
       overrideButton,
       // <input> props
       checked,

packages/core/src/ColumnView.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import './styles/ColumnView.scss';

packages/core/src/EditableBasicRow.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import './styles/EditableBasicRow.scss';
@@ -56,7 +56,7 @@ export const ROW_INPUT_TAGS = {
  *     onChange={(event) => console.log(event.target.value)} />
  * ```
  */
-
+// eslint-disable-next-line no-undef
 const EditableBasicRow = React.memo(
   ({
     inputTag: InputTag,
@@ -69,13 +69,15 @@ const EditableBasicRow = React.memo(
     onFocus,
     onBlur,
     // status props
+    // eslint-disable-next-line no-unused-vars
     status, // digested by this component and should not go into <input>
     statusIcon,
     // React props
     className,
     // <BasicRow> props from <Text>, should ignore
+    // eslint-disable-next-line no-unused-vars
     basic, // eslint-disable-line react/prop-types
-    tag, // eslint-disable-line react/prop-types
+    tag, // eslint-disable-line react/prop-types, no-unused-vars
     ...inputProps
   }) => {
     const [currentValue, setCurrentValue] = useState(

packages/core/src/EditableText.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import withStatus, { withStatusPropTypes, STATUS_CODE } from './mixins/withStatus';
@@ -87,7 +87,7 @@ class EditableText extends PureComponent {
       statusIcon,
       errorMsg,
       // React props,
-      className,
+      className, // eslint-disable-line no-unused-vars
       ...editableRowProps
     } = this.props;
 

packages/core/src/EditableTextLabel.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import keycode from 'keycode';
 
@@ -32,6 +32,7 @@ const TOUCH_TIMEOUT_MS = 250;
  * It does not offer direct control to the `<input>` inside.
  */
 
+// eslint-disable-next-line no-undef
 const EditableTextLabel = React.memo(
   ({
     inEdit: inEditProp, // not used here

packages/core/src/FlexCell.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import icBEM from './utils/icBEM';

packages/core/src/HeaderRow.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import './styles/HeaderRow.scss';

packages/core/src/Icon.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 

packages/core/src/IconButton.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -19,8 +18,8 @@ import IconLayout from './IconLayout';
 function IconButton({
   icon,
   tinted,
-  color,
-  solid,
+  color, // eslint-disable-line no-unused-vars
+  solid, // eslint-disable-line no-unused-vars
   // React props
   className,
   ...buttonProps

packages/core/src/IconCheckbox.js

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import IconLayout from './IconLayout';
 import Checkbox, { CHECKBOX_BUTTON } from './Checkbox';
 

packages/core/src/IconLayout.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import withStatus, { withStatusPropTypes } from './mixins/withStatus';

packages/core/src/InfiniteScroll.js

@@ -1,4 +1,4 @@
-import React, { PureComponent, isValidElement } from 'react';
+import { PureComponent, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import documentOffset from 'document-offset';
@@ -272,6 +272,7 @@ class InfiniteScroll extends PureComponent {
   //   Renderer
   // -------------------------------------
 
+  /* eslint-disable no-unused-vars */
   render() {
     const {
       onLoadMore,
@@ -290,6 +291,7 @@ class InfiniteScroll extends PureComponent {
       style,
       ...rootProps
     } = this.props;
+    /* eslint-enable no-unused-vars */
 
     // Get classnames and styles`
     const rootClassName = classNames(`${BEM.root}`, className);

packages/core/src/List.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import './styles/List.scss';

packages/core/src/ListRow.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -58,6 +58,7 @@ class ListRow extends PureComponent {
     );
   }
 
+  /* eslint-disable no-unused-vars */
   render() {
     const {
       highlight,
@@ -72,6 +73,7 @@ class ListRow extends PureComponent {
       children,
       ...wrapperProps
     } = this.props;
+    /* eslint-enable no-unused-vars */
 
     const bemClass = BEM.root.modifier('highlight', highlight);
 

packages/core/src/Modal.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import memoize from 'memoize-one';

packages/core/src/Overlay.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import classNames from 'classnames';
 
 import icBEM from './utils/icBEM';

packages/core/src/Popover.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 

packages/core/src/Popup.js

@@ -1,4 +1,4 @@
-import React, { isValidElement } from 'react';
+import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 

packages/core/src/PopupButton.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames';
 
 import prefixClass from './utils/prefixClass';

packages/core/src/Radio.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 

packages/core/src/SearchInput.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -63,6 +63,7 @@ class SearchInput extends Component {
     innerValue: this.props.defaultValue,
   };
 
+  // eslint-disable-next-line no-undef
   inputRef = React.createRef();
 
   cachedValue = null;

packages/core/src/Section.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 

packages/core/src/SplitView.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames';
 
 import icBEM from './utils/icBEM';

packages/core/src/SplitViewColumn.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 

packages/core/src/StatusIcon.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import icBEM from './utils/icBEM';
@@ -21,6 +21,7 @@ const ROOT_BEM = icBEM(COMPONENT_NAME);
 
 const ICON_HIDE_TIMEOUT = 2 * 1000;
 
+// eslint-disable-next-line no-undef
 const StatusIcon = React.memo(({ status, position, autohide, ...wrapperProps }) => {
   const [hideIcon, setHideIcon] = useState(false);
   const hideIconTimeout = useRef(null);

packages/core/src/Switch.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 

packages/core/src/SwitchIcon.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 

packages/core/src/Tag.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames';
 import './styles/Tag.scss';
 

packages/core/src/Text.js

@@ -15,7 +15,7 @@
  * └╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌┘
  */
 
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -90,8 +90,10 @@ class Text extends PureComponent {
       className: classNames(BEM.row.toString(), BEM.basic.toString()),
     };
 
+    // eslint-disable-next-line no-undef
     if (basicRow && React.isValidElement(basicRow)) {
       // Inject { basic, tag, statusIcon } to default or custom row.
+      // eslint-disable-next-line no-undef
       return React.cloneElement(basicRow, basicRowProps);
     }
 

packages/core/src/TextEllipsis.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import icBEM from './utils/icBEM';
 import prefixClass from './utils/prefixClass';
 import './styles/TextEllipsis.scss';

packages/core/src/TextInput.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -99,7 +98,7 @@ function TextInput(
     maxRows,
     // React props
     className,
-    children,
+    children, // eslint-disable-line no-unused-vars
     ...inputProps
   },
   context,

packages/core/src/TextLabel.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames';
 import prefixClass from './utils/prefixClass';
 import rowComp from './mixins/rowComp';

packages/core/src/Tooltip.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames';
 
 import icBEM from './utils/icBEM';

packages/core/src/__tests__/Avatar.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 

packages/core/src/__tests__/BasicRow.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+/* eslint-disable testing-library/no-node-access */
 import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 

packages/core/src/__tests__/Button.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 

packages/core/src/__tests__/Checkbox.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { shallow, mount } from 'enzyme';
 

packages/core/src/__tests__/ColumnView.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 

packages/core/src/__tests__/EditableBasicRow.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import EditableBasicRow, { ROW_INPUT_TAGS } from '../EditableBasicRow';

packages/core/src/__tests__/EditableText.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 

packages/core/src/__tests__/EditableTextLabel.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { screen, render, waitFor, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import EditableTextLabel from '../EditableTextLabel';

packages/core/src/__tests__/FlexCell.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import FlexCell from '../FlexCell';