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

package.json

@@ -127,6 +127,7 @@
     "@types/react-redux": "^7.1.23",
     "@types/react-virtualized": "^9.21.20",
     "@types/react-vis": "^1.8.0",
+    "@types/styled-components": "^5.1.25",
     "classnames": "^2.2.1",
     "colorbrewer": "^1.5.0",
     "copy-to-clipboard": "^3.3.1",

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

@@ -50,7 +50,7 @@ const AnimationWidgetInner = styled.div`
 `;
 
 const StyledDomain = styled.div.attrs(props => ({
-  className: classnames('animation-control__time-domain', {[props.className]: props.className})
+  className: classnames('animation-control__time-domain', props.className)
 }))`
   color: ${props => props.theme.titleTextColor};
   font-weight: 400;

src/components/common/animation-control/floating-time-display.tsx

@@ -43,7 +43,7 @@ const StyledTimeDisplayWrapper = styled.div.attrs({
 `;
 
 const StyledTimeDisplay = styled.div.attrs(props => ({
-  className: classnames('floating-time-display__inner', {[props.className]: props.className})
+  className: classnames('floating-time-display__inner', props.className)
 }))`
   background-color: ${props => props.theme.panelBackground};
   border-radius: ${props => props.theme.timeDisplayBorderRadius}px;

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

@@ -22,7 +22,7 @@ import React, {useState, useCallback} from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
 import {FormattedMessage} from 'localization';
-import {Button, Tooltip} from 'components/common/styled-components';
+import {Button, Tooltip, ButtonProps} from 'components/common/styled-components';
 import AnimationSpeedSliderFactory from './animation-speed-slider';
 import {Reset, Play, Pause, Rocket, AnchorWindow, FreeWindow} from 'components/common/icons';
 import {ANIMATION_WINDOW} from 'constants/default-settings';
@@ -51,7 +51,7 @@ const StyledSpeedControl = styled.div`
   }
 `;
 
-interface IconButtonProps {
+interface IconButtonProps extends ButtonProps {
   collapsed?: boolean;
 }
 

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 {RGBColor} from 'reducers';
 
 const DatasetName = styled.div.attrs({
   className: 'dataset-name'
@@ -32,14 +33,14 @@ const DatasetName = styled.div.attrs({
 
 interface DatasetLabelType {
   dataset: {
-    color?: string;
-    label?: string;
+    color: RGBColor;
+    label: string;
   };
 }
 
 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

@@ -20,16 +20,15 @@
 
 import React from 'react';
 import styled, {withTheme} from 'styled-components';
+import classnames from 'classnames';
 import ProgressBar from '../progress-bar';
 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: classnames('file-upload__progress', props.className)
+}))`
   color: ${props => props.theme.textColorLT};
   font-size: 12px;
   margin-top: 12px;

src/components/common/info-helper.tsx

@@ -27,7 +27,7 @@ import styled from 'styled-components';
 import {camelize} from 'utils/utils';
 
 interface StyledInfoHelperProps {
-  width: number;
+  width?: number;
 }
 
 const StyledInfoHelper = styled.div<StyledInfoHelperProps>`

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

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component, ComponentType} from 'react';
+import React, {Component, ComponentType, MouseEventHandler} from 'react';
 import classnames from 'classnames';
 import uniqBy from 'lodash.uniqby';
 import listensToClickOutside from 'react-onclickoutside';
@@ -232,12 +232,12 @@ class ItemSelector extends Component<ItemSelectorProps> {
     }
   };
 
-  _onErase = e => {
+  _onErase: MouseEventHandler = e => {
     e.stopPropagation();
     this.props.onChange(null);
   };
 
-  _showTypeahead = e => {
+  _showTypeahead: MouseEventHandler = e => {
     e.stopPropagation();
     if (!this.props.disabled) {
       this.setState({

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

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component, createRef, ElementType} from 'react';
+import React, {Component, createRef, ElementType, PropsWithChildren} from 'react';
 import debounce from 'lodash.debounce';
 import isEqual from 'lodash.isequal';
 
@@ -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)})
   };
 
@@ -131,7 +131,7 @@ const WINDOW_PAD = 40;
 
 const noop = () => {};
 
-interface PortaledProps {
+type PortaledProps = PropsWithChildren<{
   component: ElementType;
   onClose?: (
     event: React.MouseEvent<Element, globalThis.MouseEvent> | React.KeyboardEvent<Element>
@@ -140,11 +140,11 @@ interface PortaledProps {
   isOpened?: boolean;
   top: number;
   left?: number;
-  right: number;
+  right?: number;
   overlayZIndex?: number;
   modalProps?: Partial<ReactModal.Props>;
   modalStyle?: Partial<typeof defaultModalStyle>;
-}
+}>;
 
 interface PortaledState {
   pos:

src/components/common/range-brush.tsx

@@ -64,7 +64,7 @@ export type OnBrush = (val0: number, val1: number) => void;
 
 export interface RangeBrushProps {
   isRanged?: boolean;
-  theme: any;
+  theme?: any;
   range: number[];
   value: number[];
   onBrushStart: () => void;
@@ -78,7 +78,7 @@ export interface RangeBrushProps {
   onMouseoutHandle: () => void;
 }
 
-function RangeBrushFactory() {
+function RangeBrushFactory(): React.ComponentType<RangeBrushProps> {
   class RangeBrush extends Component<RangeBrushProps> {
     static defaultProps = {
       isRanged: true

src/components/common/range-plot.tsx

@@ -38,13 +38,13 @@ 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;
-  timezone?: string;
+  timeFormat?: string;
+  timezone?: string | null;
   playbackControlWidth?: number;
 }
 

src/components/common/slider/slider-handle.tsx

@@ -31,7 +31,7 @@ interface StyledSliderHandleProps {
 }
 
 const StyledSliderHandle = styled.span.attrs(props => ({
-  className: classnames('kg-range-slider__handle', {[props.className]: props.className})
+  className: classnames('kg-range-slider__handle', props.className)
 }))<StyledSliderHandleProps>`
   position: absolute;
   z-index: 10;
@@ -174,7 +174,7 @@ export default class SliderHandle extends Component {
   }
 
   state = {mouseOver: false};
-  ref = createRef<typeof StyledSliderHandle & HTMLSpanElement>(); // Set correct type
+  ref = createRef<HTMLSpanElement>();
 
   toggleMouseOver = () => {
     this.setState({mouseOver: !this.state.mouseOver});

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};
@@ -104,9 +105,9 @@ export const PanelLabelBold = styled(PanelLabel)`
   font-weight: 500;
 `;
 
-export const PanelHeaderTitle = styled.span.attrs({
-  className: 'side-panel-panel__header__title'
-})`
+export const PanelHeaderTitle = styled.span.attrs(props => ({
+  className: classnames('side-panel-panel__header__title', props.className)
+}))`
   color: ${props => props.theme.textColor};
   font-size: 13px;
   letter-spacing: 0.43px;
@@ -127,9 +128,9 @@ export const PanelHeaderContent = styled.div`
   }
 `;
 
-export const PanelContent = styled.div.attrs({
-  className: 'side-panel-panel__content'
-})`
+export const PanelContent = styled.div.attrs(props => ({
+  className: classnames('side-panel-panel__content', props.className)
+}))`
   background-color: ${props => props.theme.panelContentBackground};
   padding: 12px;
 `;
@@ -193,7 +194,7 @@ export const Tooltip = styled(ReactTooltip)`
   }
 `;
 
-interface ButtonProps {
+export interface ButtonProps {
   negative?: boolean;
   secondary?: boolean;
   link?: boolean;
@@ -203,6 +204,7 @@ interface ButtonProps {
   small?: boolean;
   disabled?: boolean;
   width?: string;
+  inactive?: boolean;
 }
 
 export const Button = styled.div.attrs(props => ({
@@ -324,9 +326,9 @@ export const InlineInput = styled(Input)`
   ${props => props.theme.inlineInput};
 `;
 
-interface StyledPanelHeaderProps {
+export interface StyledPanelHeaderProps {
   active?: boolean;
-  labelRCGColorValues?: string[];
+  labelRCGColorValues?: RGBColor | null;
 }
 
 export const StyledPanelHeader = styled.div<StyledPanelHeaderProps>`
@@ -378,15 +380,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

@@ -20,16 +20,17 @@
 
 import React from 'react';
 import styled from 'styled-components';
+import classnames from 'classnames';
 import {FormattedMessage} from 'localization';
 import {ComponentType, MouseEvent} from 'react';
 
 interface StyledDivProps {
   active?: boolean;
 }
 
-const StyledDiv = styled.div.attrs({
-  className: 'toolbar-item'
-})<StyledDivProps>`
+const StyledDiv = styled.div.attrs(props => ({
+  className: classnames('toolbar-item', props.className)
+}))<StyledDivProps>`
   color: ${props =>
     props.active ? props.theme.toolbarItemIconHover : props.theme.panelHeaderIcon};
   padding: 12px 20px;
@@ -72,7 +73,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/common/toolbar.tsx

@@ -20,7 +20,7 @@
 
 import styled from 'styled-components';
 
-interface ToolbarProps {
+export interface ToolbarProps {
   show?: boolean;
 }
 

src/components/common/vertical-toolbar.tsx

@@ -19,9 +19,9 @@
 // THE SOFTWARE.
 
 import styled from 'styled-components';
-import Toolbar from './toolbar';
+import Toolbar, {ToolbarProps} from './toolbar';
 
-const VerticalToolbar = styled(Toolbar)`
+const VerticalToolbar = styled(Toolbar)<ToolbarProps>`
   flex-direction: column;
 
   .toolbar-item {