[Chore]: Technical: fix linting errors of @types/styled-components plugin

src/components/common/dataset-label.tsx

@@ -21,6 +21,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import {CenterFlexbox, DatasetSquare} from 'components/common/styled-components';
+import KeplerTable from 'utils/table-utils/kepler-table';
 
 const DatasetName = styled.div.attrs({
   className: 'dataset-name'
@@ -31,15 +32,12 @@ const DatasetName = styled.div.attrs({
 `;
 
 interface DatasetLabelType {
-  dataset: {
-    color?: string;
-    label?: string;
-  };
+  dataset: KeplerTable;
 }
 
 const DatasetLabel = ({dataset}: DatasetLabelType) => (
   <CenterFlexbox>
-    <DatasetSquare className="dataset-clolor" color={dataset.color} />
+    <DatasetSquare className="dataset-color" backgroundColor={dataset.color} />
     <DatasetName>{dataset.label}</DatasetName>
   </CenterFlexbox>
 );

src/components/common/file-uploader/file-upload-progress.tsx

@@ -25,11 +25,9 @@ import {TruncatedTitleText} from 'components/common/styled-components';
 import {getError} from 'utils/utils';
 import {FileLoadingProgress} from 'reducers/vis-state-updaters';
 
-/** @typedef {import('./file-upload-progress').FileUploadProgressProps} FileUploadProgressProps*/
-
-const StyledFileProgress = styled.div.attrs({
-  className: 'file-upload__progress'
-})`
+const StyledFileProgress = styled.div.attrs(props => ({
+  className: `file-upload__progress${props.className ? ` ${props.className}` : ''}`
+}))`
   color: ${props => props.theme.textColorLT};
   font-size: 12px;
   margin-top: 12px;

src/components/common/line-chart.tsx

@@ -97,12 +97,12 @@ interface LineChartProps {
   height: number;
   hoveredDP?: HoverDP | null;
   isEnlarged?: boolean;
-  lineChart: LineChart;
+  lineChart?: LineChart;
   margin: {top?: number; bottom?: number; left?: number; right?: number};
   onMouseMove: (datapoint: LineSeriesPoint | null, data?: RVNearestXData<LineSeriesPoint>) => void;
   width: number;
   timezone?: string | null;
-  timeFormat: string;
+  timeFormat?: string;
 }
 
 const MARGIN = {top: 0, bottom: 0, left: 0, right: 0};
@@ -122,10 +122,12 @@ function LineChartFactory() {
     timezone,
     timeFormat
   }: LineChartProps) => {
-    const {series, yDomain} = lineChart;
+    const {series, yDomain} = lineChart || {};
 
     const brushData = useMemo(() => {
-      return [{x: series[0].x, y: yDomain[1], customComponent: () => brushComponent}];
+      return series && series[0] && series[0].x && yDomain && yDomain[1]
+        ? [{x: series[0].x, y: yDomain[1], customComponent: () => brushComponent}]
+        : [];
     }, [series, yDomain, brushComponent]);
     const hintFormatter = useMemo(() => datetimeFormatter(timezone)(timeFormat), [
       timezone,

src/components/common/portaled.tsx

@@ -51,11 +51,11 @@ const addEventListeners = () => {
 };
 
 interface GetChildPosProps {
-  offsets: {
+  offsets: Partial<{
     topOffset: number;
     leftOffset: number;
     rightOffset: number;
-  };
+  }>;
   rect: DOMRect;
   childRect: DOMRect;
   pageOffset: {
@@ -72,7 +72,7 @@ export const getChildPos = ({offsets, rect, childRect, pageOffset, padding}: Get
   const pos = {
     top: pageOffset.y + rect.top + (topOffset || 0),
     ...(anchorLeft
-      ? {left: pageOffset.x + rect.left + leftOffset}
+      ? {left: pageOffset.x + rect.left + leftOffset!}
       : {right: window.innerWidth - rect.right - pageOffset.x + (rightOffset || 0)})
   };
 
@@ -140,10 +140,11 @@ interface PortaledProps {
   isOpened?: boolean;
   top: number;
   left?: number;
-  right: number;
+  right?: number;
   overlayZIndex?: number;
   modalProps?: Partial<ReactModal.Props>;
   modalStyle?: Partial<typeof defaultModalStyle>;
+  children: React.ReactNode;
 }
 
 interface PortaledState {

src/components/common/range-plot.tsx

@@ -38,12 +38,12 @@ interface RangePlotProps {
   value: number[];
   width: number;
   plotType?: string;
-  lineChart: LineChart;
+  lineChart?: LineChart;
   histogram?: {x0: number; x1: number}[];
   isEnlarged?: boolean;
   isRanged?: boolean;
   theme: any;
-  timeFormat: string;
+  timeFormat?: string;
   timezone?: string;
   playbackControlWidth?: number;
 }

src/components/common/styled-components.tsx

@@ -22,6 +22,7 @@ import styled from 'styled-components';
 import ReactTooltip from 'react-tooltip';
 import {media} from 'styles/media-breakpoints';
 import classnames from 'classnames';
+import {RGBColor} from 'reducers';
 
 export const SelectText = styled.span`
   color: ${props => props.theme.labelColor};
@@ -326,7 +327,7 @@ export const InlineInput = styled(Input)`
 
 interface StyledPanelHeaderProps {
   active?: boolean;
-  labelRCGColorValues?: string[];
+  labelRCGColorValues?: RGBColor[];
 }
 
 export const StyledPanelHeader = styled.div<StyledPanelHeaderProps>`
@@ -378,15 +379,15 @@ export const ButtonGroup = styled.div`
   }
 `;
 
-interface StyledPanelHeaderProps {
-  color: string[];
+interface DatasetSquareProps {
+  backgroundColor: RGBColor;
 }
 
-export const DatasetSquare = styled.div<StyledPanelHeaderProps>`
+export const DatasetSquare = styled.div<DatasetSquareProps>`
   display: inline-block;
   width: 10px;
   height: 10px;
-  background-color: rgb(${props => props.color.join(',')});
+  background-color: rgb(${props => props.backgroundColor.join(',')});
   margin-right: 12px;
 `;
 

src/components/common/toolbar-item.tsx

@@ -27,9 +27,9 @@ interface StyledDivProps {
   active?: boolean;
 }
 
-const StyledDiv = styled.div.attrs({
-  className: 'toolbar-item'
-})<StyledDivProps>`
+const StyledDiv = styled.div.attrs(props => ({
+  className: `toolbar-item${props.className ? ` ${props.className}` : ''}`
+}))<StyledDivProps>`
   color: ${props =>
     props.active ? props.theme.toolbarItemIconHover : props.theme.panelHeaderIcon};
   padding: 12px 20px;
@@ -71,7 +71,6 @@ export type ToolbarItemProps = {
   icon?: ComponentType<any>;
 };
 
-/** @type {typeof import('./toolbar-item').ToolbarItem} */
 const ToolbarItem = React.memo((props: ToolbarItemProps) => (
   <StyledDiv
     id={props.id}

src/components/geocoder/geocoder.tsx

@@ -29,6 +29,10 @@ import {Input} from 'components/common/styled-components';
 import {Search, Delete} from 'components/common/icons';
 import {Viewport} from 'reducers/map-state-updaters';
 
+type StyledContainerProps = {
+  width?: number;
+};
+
 // matches only valid coordinates
 const COORDINATE_REGEX_STRING =
   '^[-+]?([1-8]?\\d(\\.\\d+)?|90(\\.0+)?),\\s*[-+]?(180(\\.0+)?|((1[0-7]\\d)|([1-9]?\\d))(\\.\\d+)?)';
@@ -50,7 +54,7 @@ export const testForCoordinates = (query: string): [true, number, number] | [fal
   return [isValid, Number(tokens[0]), Number(tokens[1])];
 };
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<StyledContainerProps>`
   position: relative;
   color: ${props => props.theme.textColor};
 

src/components/modal-container.tsx

@@ -147,7 +147,6 @@ export default function ModalContainerFactory(
   SaveMapModal: ReturnType<typeof SaveMapModalFactory>,
   ShareMapModal: ReturnType<typeof ShareMapModalFactory>
 ): React.ElementType<ModalContainerProps> {
-  /** @typedef {import('./modal-container').ModalContainerProps} ModalContainerProps */
   /** @augments React.Component<ModalContainerProps> */
   class ModalContainer extends Component<ModalContainerProps> {
     // TODO - remove when prop types are fully exported
@@ -311,6 +310,7 @@ export default function ModalContainerFactory(
             );
 
             // TODO: we need to make this width consistent with the css rule defined modal.js:32 max-width: 70vw
+            // @ts-ignore // TODO fix this after add types to Theme
             modalProps.cssStyle = css`
               ${DataTableModalStyle};
               ${media.palm`

src/components/side-panel/common/dataset-tag.tsx

@@ -69,7 +69,7 @@ export default function DatasetTagFactory() {
       <UpdateTableColor id={dataset.id} updateTableColor={updateTableColor}>
         <DatasetSquare
           className="dataset-color"
-          color={dataset.color}
+          backgroundColor={dataset.color}
           onClick={onClickSquare}
           data-tip
           data-for={`update-color-${id}`}

src/components/side-panel/filter-panel/filter-panel-header.tsx

@@ -36,7 +36,7 @@ export const StyledFilterHeader = styled(StyledPanelHeader)`
   }
 
   border-left: 3px solid;
-  ${(props: {labelRCGColorValues: KeplerTable['color'][]}) =>
+  ${props =>
     props.labelRCGColorValues && props.labelRCGColorValues.length > 0
       ? `border-image: ${createLinearGradient('bottom', props.labelRCGColorValues)} 3;`
       : 'border-color: transparent;'};

src/components/side-panel/layer-panel/add-layer-button.js

@@ -92,7 +92,7 @@ const TYPEAHEAD_INPUT_CLASS = 'typeahead__input';
 function AddLayerButtonFactory() {
   const ListItem = ({value}) => (
     <ListItemWrapper>
-      <DatasetSquare className="dataset-color" color={value.color} />
+      <DatasetSquare className="dataset-color" backgroundColor={value.color} />
       <div className="dataset-name" title={value.label}>
         {value.label}
       </div>

src/utils/data-utils.ts

@@ -414,7 +414,7 @@ export function applyCustomFormat(format, field): FieldFormatter {
  */
 export function datetimeFormatter(
   timezone?: string | null
-): (format: string) => (ts: number) => string {
+): (format?: string) => (ts: number) => string {
   return timezone
     ? format => ts =>
         moment