[Chore] (Types) move howto button out, add layer conf types, yarn lint (

#1926)

.github/workflows/test.yml

@@ -35,6 +35,9 @@ jobs:
       - name: Install Dependecies
         run: yarn
 
+      - name: Lint
+        run: yarn lint
+
       - name: Test
         run: xvfb-run --auto-servernum yarn cover
 

src/components/index.ts

@@ -208,8 +208,9 @@ export {
   LayerTitleSectionFactory
 } from './side-panel/layer-panel/layer-panel-header';
 
+export {default as HowToButton} from './side-panel/layer-panel/how-to-button';
+
 export {
-  HowToButton,
   LayerColorRangeSelector,
   LayerColorSelector
 } from './side-panel/layer-panel/layer-configurator';

src/components/side-panel/layer-panel/how-to-button.tsx

@@ -0,0 +1,45 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {MouseEventHandler} from 'react';
+import styled from 'styled-components';
+import {FormattedMessage} from '@kepler.gl/localization';
+
+import {Button} from 'components/common/styled-components';
+
+const StyledHowToButton = styled.div`
+  position: absolute;
+  right: 12px;
+  top: -4px;
+`;
+
+export type HowToButtonProps = {
+  onClick: MouseEventHandler;
+};
+
+export const HowToButton: React.FC<HowToButtonProps> = ({onClick}: HowToButtonProps) => (
+  <StyledHowToButton>
+    <Button link small onClick={onClick}>
+      <FormattedMessage id={'layerConfiguration.howTo'} />
+    </Button>
+  </StyledHowToButton>
+);
+
+export default HowToButton;

src/components/side-panel/layer-panel/layer-configurator.tsx

@@ -23,7 +23,7 @@ import React, {Component, Fragment, MouseEventHandler} from 'react';
 import styled from 'styled-components';
 import {FormattedMessage} from '@kepler.gl/localization';
 
-import {Button, Input, PanelLabel, SidePanelSection} from 'components/common/styled-components';
+import {Input, PanelLabel, SidePanelSection} from 'components/common/styled-components';
 import ItemSelector from 'components/common/item-selector/item-selector';
 
 import VisConfigByFieldSelectorFactory from './vis-config-by-field-selector';
@@ -36,6 +36,7 @@ import VisConfigSwitchFactory from './vis-config-switch';
 import VisConfigSliderFactory from './vis-config-slider';
 import LayerConfigGroupFactory, {ConfigGroupCollapsibleContent} from './layer-config-group';
 import TextLabelPanelFactory from './text-label-panel';
+import HowToButton from './how-to-button';
 
 import {capitalizeFirstLetter} from 'utils/utils';
 
@@ -60,14 +61,18 @@ type LayerConfiguratorProps = {
   layerTypeOptions: {
     id: string;
     label: string;
-    icon: any; //
-    requireData: any; //
+    icon: React.ElementType;
+    requireData: boolean;
   }[];
   openModal: ActionHandler<typeof toggleModal>;
   updateLayerConfig: (newConfig: Partial<LayerBaseConfig>) => void;
   updateLayerType: (newType: string) => void;
   updateLayerVisConfig: (newVisConfig: Partial<LayerVisConfig>) => void;
-  updateLayerVisualChannelConfig: (newConfig: Partial<LayerBaseConfig>, channel: string) => void;
+  updateLayerVisualChannelConfig: (
+    newConfig: Partial<LayerBaseConfig>,
+    channel: string,
+    newVisConfig?: Partial<LayerVisConfig>
+  ) => void;
   updateLayerColorUI: (prop: string, newConfig: NestedPartial<ColorUI>) => void;
   updateLayerTextLabel: (idx: number | 'all', prop: string, value: any) => void;
 };
@@ -1064,23 +1069,6 @@ export default function LayerConfiguratorFactory(
 
   return LayerConfigurator;
 }
-/*
- * Componentize config component into pure functional components
- */
-
-const StyledHowToButton = styled.div`
-  position: absolute;
-  right: 12px;
-  top: -4px;
-`;
-
-export const HowToButton = ({onClick}: {onClick: MouseEventHandler}) => (
-  <StyledHowToButton>
-    <Button link small onClick={onClick}>
-      <FormattedMessage id={'layerConfiguration.howTo'} />
-    </Button>
-  </StyledHowToButton>
-);
 
 export const LayerColorSelector = ({
   layer,