Chore: Fix lint script and issues (#1862)

As far as I can tell, yarn lint has not been checking files in src since this change. This fixes the yarn lint script and addresses the lint failures it reveals.

Some of these issues can be resolved by upgrading eslint, prettier, and/or eslint-plugin-prettier, but for now this just gets lint green.

Signed-off-by: Nick Rabinowitz <nick@unfolded.ai>

.eslintrc

@@ -27,6 +27,7 @@
     "max-len": 0,
     "react/no-did-mount-set-state": 0,
     "react/no-multi-comp": 0,
+    "react/sort-comp": 0,
     "no-use-before-define": "off",
     "prefer-spread": 1,
     "prefer-template": 1,
@@ -44,6 +45,15 @@
     "consistent-return": 0,
     "comma-dangle": 1
   },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "no-undef": 0,
+        "no-unused-vars": 0,
+      },
+    },
+  ],
   "settings": {
     "react": {
       "version": "detect"

package.json

@@ -69,7 +69,7 @@
     "typedoc": "typedoc --theme markdown --out typedoc --inputFiles ./src/reducers --inputFiles ./src/actions --excludeExternals --excludeNotExported --excludePrivate",
     "example-version": "babel-node ./scripts/edit-version.js",
     "prettier-all": "prettier --write '{src,examples,test}/**/*.{js,tsx,ts}'",
-    "lint": "yarn typescript && eslint src/*/src/*.{js,tsx,ts} test webpack examples/*.js examples/**/src/*.{js,tsx,ts} website/*.js website/src --fix",
+    "lint": "yarn typescript && eslint src test webpack examples website --fix --ignore-path .gitignore --ext .js,.ts,.tsx",
     "lint:css": "stylelint './src/**/*.js'",
     "typescript": "tsc --noEmit",
     "web": "(yarn && yarn install:web && yarn start:web)",
@@ -347,7 +347,7 @@
     "Giuseppe Macri <gmacri@uber.com>"
   ],
   "volta": {
-    "node": "12.19.0",
-    "yarn": "1.22.17"
+    "node": "12.22.12",
+    "yarn": "1.22.19"
   }
 }

src/actions/action-types.ts

@@ -183,7 +183,7 @@ const ActionTypes = {
   START_SAVE_STORAGE: `${ACTION_PREFIX}START_SAVE_STORAGE`
 };
 
-// eslint-disable-line
+// eslint-disable-next-line prettier/prettier
 const assignType = <T>(obj: T): { [K in keyof T]: `${typeof ACTION_PREFIX}${string & K}`; } => obj as any
 
 export default assignType(ActionTypes);

src/actions/provider-actions.ts

@@ -23,6 +23,7 @@ import {ACTION_PREFIX} from './action-types';
 import {SavedMap} from 'schemas';
 import {MapListItem, Provider} from 'cloud-providers';
 
+// eslint-disable-next-line prettier/prettier
 const assignType = <T>(obj: T): { [K in keyof T]: `${typeof ACTION_PREFIX}${string & K}`; } => obj as any
 export const ActionTypes = assignType({
   EXPORT_FILE_TO_CLOUD: `${ACTION_PREFIX}EXPORT_FILE_TO_CLOUD`,
@@ -147,7 +148,7 @@ export const loadCloudMap: (
 ) => {
   type: typeof ActionTypes.LOAD_CLOUD_MAP;
   payload: LoadCloudMapPayload;
-} = createAction(ActionTypes.LOAD_CLOUD_MAP, payload => ({payload : payload}));
+} = createAction(ActionTypes.LOAD_CLOUD_MAP, payload => ({payload}));
 
 /** LOAD_CLOUD_MAP_SUCCESS */
 type LoadCloudMapSuccessCallback = (p: {response: any; loadParams: any; provider: Provider}) => any;
@@ -165,7 +166,7 @@ export const loadCloudMapSuccess: (
   payload: LoadCloudMapSuccessPayload;
 } = createAction(
   ActionTypes.LOAD_CLOUD_MAP_SUCCESS,
-  (payload: LoadCloudMapSuccessPayload) => ({payload : payload})
+  (payload: LoadCloudMapSuccessPayload) => ({payload})
 );
 
 /** LOAD_CLOUD_MAP_ERROR */
@@ -179,7 +180,7 @@ export const loadCloudMapError: (
 ) => {
   type: typeof ActionTypes.LOAD_CLOUD_MAP_ERROR;
   payload: LoadCloudMapErrorPayload;
-} = createAction(ActionTypes.LOAD_CLOUD_MAP_ERROR, (payload: LoadCloudMapErrorPayload) => ({payload : payload}));
+} = createAction(ActionTypes.LOAD_CLOUD_MAP_ERROR, (payload: LoadCloudMapErrorPayload) => ({payload}));
 
 /** GET_SAVED_MAPS */
 export type GetSavedMapsPayload = string;
@@ -202,7 +203,7 @@ export const getSavedMapsSuccess: (
   payload: GetSavedMapsSuccessPayload;
 } = createAction(
   ActionTypes.GET_SAVED_MAPS_SUCCESS,
-  (payload: GetSavedMapsSuccessPayload) => ({payload : payload})
+  (payload: GetSavedMapsSuccessPayload) => ({payload})
 );
 
 /** GET_SAVED_MAPS_ERROR */
@@ -215,4 +216,4 @@ export const getSavedMapsError: (
 ) => {
   type: typeof ActionTypes.GET_SAVED_MAPS_ERROR;
   payload: GetSavedMapsErrorPayload;
-} = createAction(ActionTypes.GET_SAVED_MAPS_ERROR, payload => ({payload : payload}));
+} = createAction(ActionTypes.GET_SAVED_MAPS_ERROR, payload => ({payload}));

src/cloud-providers/index.ts

@@ -19,4 +19,5 @@
 // THE SOFTWARE.
 
 export {default as Provider, FILE_CONFLICT_MSG} from './provider';
+// eslint-disable-next-line prettier/prettier
 export type {MapListItem, Millisecond, Thumbnail, ProviderProps} from './provider';

src/components/common/animation-control/playback-controls.tsx

@@ -116,14 +116,14 @@ interface AnimationWindowControlProps {
   btnStyle;
 }
 
-export const AnimationWindowControl = ({
+export const AnimationWindowControl: React.FC<AnimationWindowControlProps> = ({
   onClick,
   selected,
   onHide,
   height,
   animationItems,
   btnStyle = {}
-}: AnimationWindowControlProps) => (
+}) => (
   <div>
     {Object.values(animationItems)
       .filter(item => item.id !== selected)
@@ -150,7 +150,7 @@ export const AnimationWindowControl = ({
   </div>
 );
 
-interface PlaybackControls {
+interface PlaybackControlsProps {
   isAnimatable?: boolean;
   isAnimating?: boolean;
   width?: number | string;
@@ -172,7 +172,7 @@ function PlaybackControlsFactory(
   AnimationSpeedSlider: ReturnType<typeof AnimationSpeedSliderFactory>
 ) {
   // eslint-disable-next-line complexity
-  const PlaybackControls = ({
+  const PlaybackControls: React.FC<PlaybackControlsProps> = ({
     isAnimatable = true,
     isAnimating,
     width,
@@ -187,7 +187,7 @@ function PlaybackControlsFactory(
     animationItems = DEFAULT_ANIMATE_ITEMS,
     buttonStyle = 'secondary',
     buttonHeight = DEFAULT_BUTTON_HEIGHT
-  }: PlaybackControls) => {
+  }) => {
     const [isSpeedControlVisible, toggleSpeedControl] = useState(false);
     const [showAnimationWindowControl, setShowAnimationWindowControl] = useState(false);
 

src/components/common/data-table/option-dropdown.tsx

@@ -104,11 +104,11 @@ const OptionDropdown = (props: OptionDropdownProps) => {
   );
 
   const TABLE_OPTION_LIST_ICONS = {
-    Pin: Pin,
-    ArrowDown: ArrowDown,
-    ArrowUp: ArrowUp,
-    Clipboard: Clipboard,
-    Cancel: Cancel
+    Pin,
+    ArrowDown,
+    ArrowUp,
+    Clipboard,
+    Cancel
   };
 
   const options = TABLE_OPTION_LIST.filter(op => !op.condition || op.condition(props)).map(op => ({

src/components/common/item-selector/chickleted-input.tsx

@@ -24,7 +24,7 @@ import styled from 'styled-components';
 import Delete from '../icons/delete';
 import {FormattedMessage} from '@kepler.gl/localization';
 
-interface ChickletedInput {
+interface ChickletedInputProps {
   // required properties
   onClick: MouseEventHandler<HTMLDivElement>;
   removeItem: Function;
@@ -108,7 +108,7 @@ const ChickletedInputContainer = styled.div<ChickletedInputContainerProps>`
   overflow: hidden;
 `;
 
-const ChickletedInput = ({
+const ChickletedInput: React.FC<ChickletedInputProps> = ({
   disabled,
   onClick,
   className,
@@ -118,7 +118,7 @@ const ChickletedInput = ({
   displayOption = d => d,
   inputTheme,
   CustomChickletComponent
-}: ChickletedInput) => (
+}) => (
   <ChickletedInputContainer
     className={`${className} chickleted-input`}
     onClick={onClick}

src/components/common/item-selector/item-selector.tsx

@@ -34,14 +34,14 @@ import {toArray} from 'utils/utils';
 import {injectIntl, IntlShape} from 'react-intl';
 import {FormattedMessage} from '@kepler.gl/localization';
 
-interface StyledDropdownSelect {
+interface StyledDropdownSelectProps {
   inputTheme?: string;
   size?: string;
 }
 
 export const StyledDropdownSelect = styled.div.attrs({
   className: 'item-selector__dropdown'
-})<StyledDropdownSelect>`
+})<StyledDropdownSelectProps>`
   ${props =>
     props.inputTheme === 'secondary'
       ? props.theme.secondaryInput
@@ -293,7 +293,7 @@ class ItemSelector extends Component<ItemSelectorProps> {
       disabled: this.props.disabled,
       onClick: this._showTypeahead,
       error: this.props.isError,
-      inputTheme: inputTheme,
+      inputTheme,
       size: this.props.size
     };
     const intl = this.props.intl;

src/components/common/line-chart.tsx

@@ -107,7 +107,7 @@ interface LineChartProps {
 
 const MARGIN = {top: 0, bottom: 0, left: 0, right: 0};
 function LineChartFactory() {
-  const LineChart = ({
+  const LineChartComponent = ({
     brushComponent,
     brushing,
     color,
@@ -164,7 +164,7 @@ function LineChartFactory() {
       </LineChartWrapper>
     );
   };
-  return LineChart;
+  return LineChartComponent;
 }
 
 export default LineChartFactory;

src/components/common/loading-spinner.tsx

@@ -43,11 +43,11 @@ const Loader = styled.span`
     animation-name: ${animationName};
 }`;
 
-interface LoadingWrapper {
+interface LoadingWrapperProps {
   borderColor?: string;
 }
 
-const LoadingWrapper = styled.div<LoadingWrapper>`
+const LoadingWrapper = styled.div<LoadingWrapperProps>`
   border-radius: 50%;
   border: 3px solid ${props => props.borderColor || props.theme.borderColorLT};
   padding: 2px;
@@ -60,7 +60,12 @@ interface LoadingSpinnerProps {
   gap?: number;
 }
 
-const LoadingSpinner = ({size = 32, color = '', strokeWidth = 3, gap = 2}: LoadingSpinnerProps) => (
+const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  size = 32,
+  color = '',
+  strokeWidth = 3,
+  gap = 2
+}) => (
   <LoadingWrapper style={{width: `${size}px`, height: `${size}px`, padding: `${gap}px`}}>
     <Loader
       color={color}

src/components/common/range-plot.tsx

@@ -53,7 +53,7 @@ RangePlotFactory.deps = [RangeBrushFactory, HistogramPlotFactory, LineChartFacto
 export default function RangePlotFactory(
   RangeBrush: ReturnType<typeof RangeBrushFactory>,
   HistogramPlot: ReturnType<typeof HistogramPlotFactory>,
-  LineChart: ReturnType<typeof LineChartFactory>
+  LineChartPlot: ReturnType<typeof LineChartFactory>
 ) {
   const RangePlot = ({
     onBrush,
@@ -133,7 +133,7 @@ export default function RangePlotFactory(
         className="kg-range-slider__plot"
       >
         {plotType === 'lineChart' && lineChart ? (
-          <LineChart lineChart={lineChart} {...commonProps} />
+          <LineChartPlot lineChart={lineChart} {...commonProps} />
         ) : (
           <HistogramPlot histogram={histogram} {...commonProps} />
         )}

src/components/common/range-slider.tsx

@@ -63,7 +63,7 @@ interface RangeSliderProps {
   range?: number[];
   value0: number;
   value1: number;
-  onChange?: (val: number[]) => void; //TODO
+  onChange?: (val: number[]) => void; // TODO
   histogram?: any[];
   isRanged?: boolean;
   isEnlarged?: boolean;

src/components/filters/filter-panels/multi-select-filter-panel.tsx

@@ -28,7 +28,7 @@ MultiSelectFilterPanelFactory.deps = [FieldPanelWithFieldSelectFactory, MultiSel
 
 function MultiSelectFilterPanelFactory(
   FieldPanelWithFieldSelect: ReturnType<typeof FieldPanelWithFieldSelectFactory>,
-  MultiSelectFilter: ReturnType<typeof MultiSelectFilterFactory>
+  MultiSelectFilterComponent: ReturnType<typeof MultiSelectFilterFactory>
 ) {
   const MultiSelectFilterPanel: FilterPanelComponent<MultiSelectFilter> = React.memo(
     ({idx, datasets, allAvailableFields, filter, setFilter, removeFilter}) => {
@@ -46,7 +46,7 @@ function MultiSelectFilterPanelFactory(
           >
             {filter.type && !filter.enlarged && (
               <div className="filter-panel__filter">
-                <MultiSelectFilter filter={filter} setFilter={onSetFilter} />
+                <MultiSelectFilterComponent filter={filter} setFilter={onSetFilter} />
               </div>
             )}
           </FieldPanelWithFieldSelect>

src/components/filters/filter-panels/range-filter-panel.tsx

@@ -28,7 +28,7 @@ RangeFilterPanelFactory.deps = [FieldPanelWithFieldSelectFactory, RangeFilterFac
 
 function RangeFilterPanelFactory(
   FieldPanelWithFieldSelect: ReturnType<typeof FieldPanelWithFieldSelectFactory>,
-  RangeFilter: ReturnType<typeof RangeFilterFactory>
+  RangeFilterComponent: ReturnType<typeof RangeFilterFactory>
 ) {
   const RangeFilterPanel: FilterPanelComponent<RangeFilter> = React.memo(
     ({idx, datasets, allAvailableFields, filter, removeFilter, setFilter}) => {
@@ -46,7 +46,7 @@ function RangeFilterPanelFactory(
           >
             {filter.type && !filter.enlarged && (
               <div className="filter-panel__filter">
-                <RangeFilter filter={filter} setFilter={onSetFilter} />
+                <RangeFilterComponent filter={filter} setFilter={onSetFilter} />
               </div>
             )}
           </FieldPanelWithFieldSelect>

src/components/filters/time-range-filter.tsx

@@ -53,7 +53,7 @@ export function timeRangeSliderFieldsSelector(filter: TimeRangeFilter) {
 TimeRangeFilterFactory.deps = [TimeRangeSliderFactory];
 
 function TimeRangeFilterFactory(TimeRangeSlider: ReturnType<typeof TimeRangeSliderFactory>) {
-  const TimeRangeFilter: React.FC<TimeRangeFilterProps> = ({
+  const TimeRangeFilterComponent: React.FC<TimeRangeFilterProps> = ({
     filter,
     setFilter,
     isAnimatable,
@@ -69,7 +69,7 @@ function TimeRangeFilterFactory(TimeRangeSlider: ReturnType<typeof TimeRangeSlid
     />
   );
 
-  return TimeRangeFilter;
+  return TimeRangeFilterComponent;
 }
 
 export default TimeRangeFilterFactory;

src/components/geocoder/geocoder.tsx

@@ -205,7 +205,7 @@ const GeoCoder: React.FC<GeocoderProps & IntlProps> = ({
 
   const onItemSelected = useCallback(
     item => {
-      let newViewport = new WebMercatorViewport(viewport);
+      const newViewport = new WebMercatorViewport(viewport);
       const {bbox, center} = item;
 
       const resultViewport = bbox

src/components/map-container.tsx

@@ -24,6 +24,8 @@ import MapboxGLMap, {MapRef} from 'react-map-gl';
 import DeckGL from '@deck.gl/react';
 import {createSelector} from 'reselect';
 import WebMercatorViewport from 'viewport-mercator-project';
+import mapboxgl from 'mapbox-gl';
+
 import {errorNotification} from 'utils/notifications-utils';
 
 import * as VisStateActions from 'actions/vis-state-actions';

src/components/modal-container.tsx

@@ -342,7 +342,7 @@ export default function ModalContainerFactory(
             template = (
               <LoadDataModal
                 {...providerState}
-                //@ts-expect-error //TODO Remove it once LoadDataModal is translated
+                // @ts-expect-error //TODO Remove it once LoadDataModal is translated
                 onClose={this._closeModal}
                 onFileUpload={this._onFileUpload}
                 onLoadCloudMap={this._onLoadCloudMap}
@@ -464,7 +464,7 @@ export default function ModalContainerFactory(
             break;
           case SAVE_MAP_ID:
             template = (
-              //@ts-expect-error //TODO Remove it once SaveMapModal is translated
+              // @ts-expect-error //TODO Remove it once SaveMapModal is translated
               <SaveMapModal
                 {...providerState}
                 exportImage={uiState.exportImage}

src/components/modals/load-storage-map.tsx

@@ -271,7 +271,7 @@ interface LoadStorageMapProps {
   onSetCloudProvider;
   currentProvider?: string;
   getSavedMaps: (provider?: Provider) => void;
-  onLoadCloudMap: ({loadParams: any, provider: Provider}) => void;
+  onLoadCloudMap: (opts: {loadParams: any; provider?: Provider}) => void;
   visualizations: Visualization[];
   isProviderLoading?: boolean;
 }