chore: eslint everywhere else (#567)

.eslintignore

@@ -3,9 +3,3 @@ vite-env.d.ts
 polyfills.ts
 vite.config.ts
 commitlint.config.ts
-
-# components dir is being worked on
-/src/components/*
-
-# unignored components
-!/src/components/Table.tsx

.eslintrc.json

@@ -22,6 +22,8 @@
   "rules": {
     "class-methods-use-this": "off",
     "import/extensions": "off",
+    // let prettier handle
+    "import/order": "off",
     "import/no-extraneous-dependencies": [
       "error",
       {

src/components/Accordion.tsx

@@ -18,6 +18,7 @@ export type AccordionProps = {
 export const Accordion = ({ items, className }: AccordionProps) => (
   <$Root className={className} type="single" collapsible>
     {items.map(({ header, content }, idx) => (
+      // eslint-disable-next-line react/no-array-index-key
       <$Item key={idx} value={idx.toString()}>
         <Header>
           <$Trigger>

src/components/AlertMessage.tsx

@@ -15,7 +15,11 @@ type ElementProps = {
 
 export type AlertMessageProps = ElementProps & StyleProps;
 
-export const AlertMessage: React.FC<AlertMessageProps> = ({ className, children, type }) => {
+export const AlertMessage: React.FC<AlertMessageProps> = ({
+  className,
+  children,
+  type,
+}: AlertMessageProps) => {
   return (
     <AlertContainer type={type} className={className}>
       {children}

src/components/AssetIcon.tsx

@@ -106,7 +106,7 @@ const assetIcons = {
 } as const;
 
 const isAssetSymbol = (symbol: Nullable<string>): symbol is AssetSymbol =>
-  symbol != null && assetIcons.hasOwnProperty(symbol);
+  symbol != null && Object.hasOwn(assetIcons, symbol);
 
 export const AssetIcon = ({
   symbol,

src/components/Button.tsx

@@ -61,20 +61,18 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
 
     return (
       <StyledBaseButton
-        disabled={state[ButtonState.Disabled] || state[ButtonState.Loading]}
+        disabled={!!state[ButtonState.Disabled] || !!state[ButtonState.Loading]}
         {...{ ref, action, size, shape, state, ...otherProps }}
       >
-        <>
-          {state[ButtonState.Loading] ? (
-            <LoadingDots size={3} />
-          ) : (
-            <>
-              {slotLeft}
-              {children}
-              {slotRight}
-            </>
-          )}
-        </>
+        {state[ButtonState.Loading] ? (
+          <LoadingDots size={3} />
+        ) : (
+          <>
+            {slotLeft}
+            {children}
+            {slotRight}
+          </>
+        )}
       </StyledBaseButton>
     );
   }

src/components/Checkbox.tsx

@@ -25,7 +25,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   id,
   label,
   disabled,
-}) => (
+}: CheckboxProps) => (
   <$Container>
     <$Root
       className={className}

src/components/CollapsibleTabs.tsx

@@ -78,7 +78,7 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
           </$TabsList>
 
           <$Toolbar>
-            {currentTab?.slotToolbar || slotToolbar}
+            {currentTab?.slotToolbar ?? slotToolbar}
             <CollapsibleTrigger asChild>
               <$IconButton iconName={IconName.Caret} isToggle />
             </CollapsibleTrigger>

src/components/ComboboxMenu.tsx

@@ -47,7 +47,6 @@ export const ComboboxMenu = <
   withItemBorders,
   withStickyLayout,
 }: ComboboxMenuProps<MenuItemValue, MenuGroupValue>) => {
-  const [highlightedCommand, setHighlightedCommand] = useState<MenuItemValue>();
   const [searchValue, setSearchValue] = useState('');
 
   return (

src/components/Details.tsx

@@ -12,11 +12,13 @@ import { WithSeparators } from '@/components/Separator';
 import { WithTooltip } from '@/components/WithTooltip';
 
 export type DetailsItem = {
+  // eslint-disable-next-line react/no-unused-prop-types
   key: string;
   tooltip?: string;
   tooltipParams?: Record<string, string>;
   label: string | JSX.Element;
   value?: Nullable<string> | JSX.Element | undefined;
+  // eslint-disable-next-line react/no-unused-prop-types
   subitems?: DetailsItem[];
   withTooltipIcon?: boolean;
   allowUserSelection?: boolean;
@@ -47,8 +49,11 @@ type ElementProps = {
 type StyleProps = {
   layout?: 'column' | 'row' | 'rowColumns' | 'grid' | 'stackColumn';
   justifyItems?: 'start' | 'end';
+  // I don't know why we're getting false positives for these props
+  // eslint-disable-next-line react/no-unused-prop-types
   withSeparators?: boolean;
   withOverflow?: boolean;
+  // eslint-disable-next-line react/no-unused-prop-types
   className?: string;
 };
 

src/components/Dialog.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { PropsWithChildren, useRef } from 'react';
 
 import {
   Close,
@@ -58,19 +58,14 @@ const DialogPortal = ({
   withPortal,
   container,
   children,
-}: {
+}: PropsWithChildren<{
   withPortal: boolean;
   container?: HTMLElement;
-  children: React.ReactNode;
-}) => {
+}>) => {
   const {
     dialogAreaRef: { current },
   } = useDialogArea() ?? { dialogAreaRef: {} };
-  return withPortal ? (
-    <Portal container={container ?? current}>{children}</Portal>
-  ) : (
-    <>{children}</>
-  );
+  return withPortal ? <Portal container={container ?? current}>{children}</Portal> : children;
 };
 
 export const Dialog = ({

src/components/DiffArrow.tsx

@@ -1,4 +1,4 @@
-import styled, { AnyStyledComponent, css } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { NumberSign } from '@/constants/numbers';
 
@@ -60,5 +60,5 @@ const $DiffArrowContainer = styled.span<DiffArrowProps>`
       down: css`
         transform: rotate(90deg);
       `,
-    }[direction || 'right'])}
+    }[direction ?? 'right'])}
 `;

src/components/DropdownHeaderMenu.stories.tsx

@@ -9,7 +9,7 @@ import { DropdownHeaderMenu } from '@/components/DropdownHeaderMenu';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const DropdownHeaderMenuStory: Story<Parameters<typeof DropdownHeaderMenu>> = (args) => {
+export const DropdownHeaderMenuStory: Story<Parameters<typeof DropdownHeaderMenu>> = () => {
   const [view, setView] = useState<string | undefined>();
 
   const exampleItems = [

src/components/DropdownMenu.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-alert */
 import type { Story } from '@ladle/react';
 
 import { DropdownMenu } from '@/components/DropdownMenu';

src/components/DropdownSelectMenu.tsx

@@ -75,30 +75,41 @@ export const DropdownSelectMenu = <MenuItemValue extends string>({
           <RadioGroup
             value={value}
             onValueChange={
-              onValueChange != null ? (value) => onValueChange(value as MenuItemValue) : undefined
+              onValueChange != null
+                ? (innerValue) => onValueChange(innerValue as MenuItemValue)
+                : undefined
             }
           >
-            {items.map(({ value, label, slotBefore, slotAfter, tag, disabled }) => (
-              <$RadioItem key={value} value={value} disabled={disabled}>
-                {slotBefore}
-
-                <$ItemLabel>
-                  {label}
-                  {tag && (
-                    <>
-                      {' '}
-                      <Tag>{tag}</Tag>
-                    </>
-                  )}
-                </$ItemLabel>
-
-                {slotAfter}
-
-                <$ItemIndicator>
-                  <CheckIcon />
-                </$ItemIndicator>
-              </$RadioItem>
-            ))}
+            {items.map(
+              ({
+                value: innerValue,
+                label,
+                slotBefore,
+                slotAfter,
+                tag,
+                disabled: innerDisabled,
+              }) => (
+                <$RadioItem key={innerValue} value={innerValue} disabled={innerDisabled}>
+                  {slotBefore}
+
+                  <$ItemLabel>
+                    {label}
+                    {tag && (
+                      <>
+                        {' '}
+                        <Tag>{tag}</Tag>
+                      </>
+                    )}
+                  </$ItemLabel>
+
+                  {slotAfter}
+
+                  <$ItemIndicator>
+                    <CheckIcon />
+                  </$ItemIndicator>
+                </$RadioItem>
+              )
+            )}
           </RadioGroup>
         </$Content>
       </Portal>

src/components/ErrorBoundary.tsx

@@ -5,15 +5,12 @@ import { log } from '@/lib/telemetry';
 type ErrorBoundaryProps = { children: React.ReactNode };
 
 export class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-  }
-
   componentDidCatch(error: Error): void {
     log('ErrorBoundary', error);
   }
 
   render() {
-    return this.props.children;
+    const { children } = this.props;
+    return children;
   }
 }

src/components/FormInput.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import styled, { AnyStyledComponent, css } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { AlertType } from '@/constants/alerts';
 

src/components/Input.tsx

@@ -70,7 +70,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     {
       className,
       allowNegative = false,
-      decimals,
+      decimals: inDecimals,
       disabled,
       id,
       max,
@@ -107,7 +107,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       [InputType.Search]: null,
     }[type];
 
-    decimals = decimals !== undefined ? decimals : numberFormatConfig?.defaultDecimals;
+    const decimals = inDecimals ?? numberFormatConfig?.defaultDecimals;
 
     const defaultNumberPlaceholder = `${numberFormatConfig?.prefix ?? ''}${BIG_NUMBERS.ZERO.toFixed(
       decimals !== undefined ? decimals : USD_DECIMALS
@@ -153,7 +153,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             decimalScale={decimals}
             decimalSeparator={LOCALE_DECIMAL_SEPARATOR}
             isAllowed={({ floatValue }: NumberFormatValues) =>
-              floatValue ? floatValue <= (max || Number.MAX_VALUE) : true
+              floatValue ? floatValue <= (max ?? Number.MAX_VALUE) : true
             }
             prefix={numberFormatConfig?.prefix}
             suffix={numberFormatConfig?.suffix}
@@ -163,20 +163,22 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             onFocus={onFocus}
             onInput={(e: SyntheticInputEvent) => {
               if (!onInput) return;
-              const value = e.target.value;
-              const { prefix = '', suffix = '' } = numberFormatConfig || {};
+              const newValue = e.target.value;
+              const { prefix = '', suffix = '' } = numberFormatConfig ?? {};
               // Remove prefix and suffix, replace commas with periods
-              const formattedValue = value.replace(prefix, '').replace(suffix, '');
+              const newFormattedValue = newValue.replace(prefix, '').replace(suffix, '');
 
-              const floatValue: number | undefined = isNaN(Number(formattedValue.replace(',', '.')))
+              const floatValue: number | undefined = Number.isNaN(
+                Number(newFormattedValue.replace(',', '.'))
+              )
                 ? undefined
-                : Number(formattedValue.replace(',', '.'));
+                : Number(newFormattedValue.replace(',', '.'));
 
-              onInput?.({ value, floatValue, formattedValue, ...e });
+              onInput?.({ value: newValue, floatValue, formattedValue: newFormattedValue, ...e });
             }}
             // Native
             disabled={disabled}
-            placeholder={placeholder || defaultNumberPlaceholder}
+            placeholder={placeholder ?? defaultNumberPlaceholder}
             value={formattedValue}
             autoComplete="off"
             autoCorrect="off"

src/components/Link.tsx

@@ -40,6 +40,7 @@ export const Link = forwardRef<HTMLAnchorElement, ElementProps & StyleProps>(
       href={href}
       onClick={(e: React.MouseEvent) => {
         if (analyticsConfig) {
+          // eslint-disable-next-line no-console
           console.log(analyticsConfig);
         }
 

src/components/Loading/LoadingDots.tsx

@@ -6,7 +6,7 @@ export type LoadingDotsProps = {
 };
 
 // Component
-export const LoadingDots: React.FC<LoadingDotsProps> = ({ size = 1 }) => (
+export const LoadingDots: React.FC<LoadingDotsProps> = ({ size = 1 }: LoadingDotsProps) => (
   <LoadingDotsContainer size={size}>
     <i />
     <i />

src/components/Loading/LoadingSpinner.tsx

@@ -2,13 +2,18 @@ import styled, { keyframes } from 'styled-components';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
-// In some strange cases, hiding a spinner on one part of the page causes the linearGradient to
-// be hidden on all other instances of the page. An id can be passed in to prevent this.
-export const LoadingSpinner: React.FC<{
+type LoadingSpinnerProps = {
   id?: string;
   className?: string;
   disabled?: boolean;
-}> = ({ id, className, disabled = false }) => {
+};
+// In some strange cases, hiding a spinner on one part of the page causes the linearGradient to
+// be hidden on all other instances of the page. An id can be passed in to prevent this.
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  id,
+  className,
+  disabled = false,
+}: LoadingSpinnerProps) => {
   return (
     <$Spinner className={className}>
       <$LoadingSpinnerSvg
@@ -40,7 +45,8 @@ export const LoadingSpinner: React.FC<{
   );
 };
 
-export const LoadingSpace: React.FC<{ className?: string; id: string }> = ({ className, id }) => (
+type LoadingSpaceProps = { className?: string; id: string };
+export const LoadingSpace: React.FC<LoadingSpaceProps> = ({ className, id }: LoadingSpaceProps) => (
   <$LoadingSpaceContainer className={className}>
     <LoadingSpinner id={id} />
   </$LoadingSpaceContainer>