Linting fixes

scripts/react/templates.js

@@ -9,7 +9,7 @@ const propTypes = {
   children: PT.element,
 }
 
-export const ${name}: FC<I${name}Props> = (props) => {
+export const ${name}: FC<PropsWithChildren<I${name}Props>> = (props) => {
   const { children, ...divProps } = props;
   return (
     <div {...divProps}>

src/api/config.ts

@@ -38,7 +38,7 @@ export const defaultRequestConfig: AxiosRequestConfig = {
         indices: false,
         arrayFormat: 'comma',
         format: 'RFC1738',
-        sort: (a, b) => a - b,
+        sort: (a, b) => a.localeCompare(b),
         skipNulls: true,
       }),
   },

src/components/AbstractRefList/AbstractRefLayout.tsx

@@ -1,12 +1,16 @@
 import { Heading, Stack, Text } from '@chakra-ui/react';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
 interface IAbsRefLayoutProps {
   titleDescription: string;
   docTitle: string | string[];
 }
 
-export const AbstractRefLayout: FC<IAbsRefLayoutProps> = ({ children, titleDescription, docTitle }) => {
+export const AbstractRefLayout: FC<PropsWithChildren<IAbsRefLayoutProps>> = ({
+  children,
+  titleDescription,
+  docTitle,
+}) => {
   return (
     <Stack direction="column" as="section" aria-labelledby="title" gap={1} width="full">
       <Heading as="h2" id="title" fontSize="2xl">

src/components/AuthorAffiliations/store.tsx

@@ -1,6 +1,6 @@
 import { IAuthorAffiliationItem } from '@/api/author-affiliation/types';
 import { isNotNilOrEmpty } from 'ramda-adjunct';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import create, { GetState, Mutate, SetState, StoreApi } from 'zustand';
 import createContext from 'zustand/context';
 import { devtools } from 'zustand/middleware';
@@ -82,7 +82,7 @@ const createStore = (items: IAuthorAffiliationItem[]) => () => {
 const AuthorAffStoreCtx = createContext<IAuthorAffState>();
 export const useAuthorAffStore = AuthorAffStoreCtx.useStore;
 
-export const AuthorAffStoreProvider: FC<IStoreOpts> = (props) => {
+export const AuthorAffStoreProvider: FC<PropsWithChildren<IStoreOpts>> = (props) => {
   const { children, items } = props;
   return <AuthorAffStoreCtx.Provider createStore={createStore(items)}>{children}</AuthorAffStoreCtx.Provider>;
 };

src/components/CitationExporter/components/DescriptionCollapse.tsx

@@ -2,7 +2,7 @@ import { QuestionIcon, QuestionOutlineIcon } from '@chakra-ui/icons';
 import { Box, Collapse, CollapseProps, IconButton, useDisclosure } from '@chakra-ui/react';
 import { ReactElement, ReactNode } from 'react';
 
-export interface IDescriptionCollapseProps extends CollapseProps {
+export interface IDescriptionCollapseProps extends Omit<CollapseProps, 'children'> {
   label: string;
   body: ReactNode;
   children: (props: { btn: ReactNode; content: ReactNode }) => ReactNode;

src/components/CitationExporter/components/ExportContainer.tsx

@@ -1,12 +1,9 @@
 import { Box, Heading, Spinner } from '@chakra-ui/react';
-import { FC, HTMLAttributes, ReactNode } from 'react';
+import { FC, HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 
-export const ExportContainer: FC<{ header: ReactNode; isLoading?: boolean } & HTMLAttributes<HTMLDivElement>> = ({
-  children,
-  header,
-  isLoading,
-  ...divProps
-}) => {
+export const ExportContainer: FC<
+  PropsWithChildren<{ header: ReactNode; isLoading?: boolean } & HTMLAttributes<HTMLDivElement>>
+> = ({ children, header, isLoading, ...divProps }) => {
   return (
     <Box
       p="3"

src/components/DataDownloader/DataDownloader.tsx

@@ -1,7 +1,7 @@
 import { DownloadIcon } from '@chakra-ui/icons';
 import { Flex, IconButton, StyleProps, Text } from '@chakra-ui/react';
 import { useDownloadFile } from 'src/lib';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
 export interface IDataDownloaderProps extends StyleProps {
   label: string;
@@ -13,7 +13,7 @@ export interface IDataDownloaderProps extends StyleProps {
 /**
  * The component is a download button, which handles downloading of dynamically generated data file
  */
-export const DataDownloader: FC<IDataDownloaderProps> = ({
+export const DataDownloader: FC<PropsWithChildren<IDataDownloaderProps>> = ({
   label,
   getFileContent,
   fileName,

src/components/FeedbackForms/AssociatedArticles/AssociatedArticlesForm.tsx

@@ -334,7 +334,7 @@ export const AssociatedTable = () => {
           stylesTheme="default"
           onChange={handleRelationshipChange}
         />
-        <FormErrorMessage>{!!errors.relationship && errors.relationship}</FormErrorMessage>
+        <FormErrorMessage>{!!errors.relationship && errors.relationship.message}</FormErrorMessage>
       </FormControl>
 
       {relationship !== null && (
@@ -359,12 +359,12 @@ export const AssociatedTable = () => {
                 relationship === 'errata'
                   ? 'Errata '
                   : relationship === 'addenda'
-                  ? 'Addenda '
-                  : relationship === 'series'
-                  ? 'Series of articles '
-                  : relationship === 'arxiv'
-                  ? 'Main paper '
-                  : 'Related '
+                    ? 'Addenda '
+                    : relationship === 'series'
+                      ? 'Series of articles '
+                      : relationship === 'arxiv'
+                        ? 'Main paper '
+                        : 'Related '
               }Bibcode(s)`}</FormLabel>
               <Flex direction="column" gap={2}>
                 {associatedBibcodes.map((b, index) => (

src/components/HideOnPrint/HideOnPrint.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { Box, BoxProps } from '@chakra-ui/react';
 
-export const HideOnPrint: FC<BoxProps> = (props) => {
+export const HideOnPrint: FC<PropsWithChildren<BoxProps>> = (props) => {
   const { children, ...boxProps } = props;
   return (
     <Box

src/components/Layout/FeedbackLayout.tsx

@@ -1,13 +1,13 @@
-import { Container, Box, Stack, Heading, Text } from '@chakra-ui/react';
+import { Box, Container, Heading, Stack, Text } from '@chakra-ui/react';
 import Head from 'next/head';
-import { FC, ReactNode, useEffect, useRef } from 'react';
+import { FC, PropsWithChildren, ReactNode, useEffect, useRef } from 'react';
 
 interface IFeedbackLayoutProps {
   title: string;
   alert?: ReactNode;
 }
 
-export const FeedbackLayout: FC<IFeedbackLayoutProps> = ({ children, title, alert }) => {
+export const FeedbackLayout: FC<PropsWithChildren<IFeedbackLayoutProps>> = ({ children, title, alert }) => {
   const alertRef = useRef<HTMLDivElement>();
 
   // scroll to alert does not work

src/components/Layout/Layout.tsx

@@ -1,7 +1,7 @@
 import { Container, Flex, useMediaQuery } from '@chakra-ui/react';
 import { SkipNavLink } from '@chakra-ui/skip-nav';
 import { useRouter } from 'next/router';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { Footer } from '../Footer';
 import { NavBar } from '../NavBar';
 import dynamic from 'next/dynamic';
@@ -16,7 +16,7 @@ const LandingTabs = dynamic(() => import('@/components/LandingTabs/LandingTabs')
 });
 
 const LANDING_PAGES = ['/', '/classic-form', '/paper-form'];
-export const Layout: FC = ({ children }) => {
+export const Layout: FC<PropsWithChildren> = ({ children }) => {
   const router = useRouter();
 
   const isLandingPage = LANDING_PAGES.includes(router.pathname);

src/components/Layout/SettingsLayout.tsx

@@ -1,7 +1,7 @@
 import { Heading, LayoutProps, Stack, Text } from '@chakra-ui/react';
 import { SettingsSideNav } from '@/components';
 import Head from 'next/head';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { SuspendedAlert } from '@/components/Feedbacks/SuspendedAlert';
 
@@ -10,7 +10,7 @@ interface ISettingsLayoutProps {
   maxW?: LayoutProps['maxW'];
 }
 
-export const SettingsLayout: FC<ISettingsLayoutProps> = ({ children, title }) => {
+export const SettingsLayout: FC<PropsWithChildren<ISettingsLayoutProps>> = ({ children, title }) => {
   return (
     <Stack direction={{ base: 'column', lg: 'row' }} spacing={6} my={{ base: 2, lg: 10 }}>
       <Head>

src/components/Layout/VizPageLayout.tsx

@@ -1,7 +1,7 @@
 import { Flex, Heading, HStack } from '@chakra-ui/react';
 import { SimpleLink, VisualizationsTabs, VizSection } from '@/components';
 import Head from 'next/head';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { UrlObject } from 'url';
 import { ChevronLeftIcon } from '@chakra-ui/icons';
 
@@ -10,7 +10,7 @@ interface IVizPageLayoutProps {
   from?: UrlObject;
 }
 
-export const VizPageLayout: FC<IVizPageLayoutProps> = ({ children, vizPage, from }) => {
+export const VizPageLayout: FC<PropsWithChildren<IVizPageLayoutProps>> = ({ children, vizPage, from }) => {
   return (
     <>
       <Head>

src/components/NavBar/AppModeDropdown.tsx

@@ -29,9 +29,12 @@ export const AppModeDropdown = (): ReactElement => {
         options={options}
         stylesTheme="theme"
         onChange={handleThemeChange}
-        label="Select theme"
-        id="theme-selector"
-        instanceId="theme-selector"
+        label="Select Mode"
+        inputId="appmode-selector"
+        id="appmode-selector"
+        instanceId="appmode-selector"
+        aria-label="Select Mode"
+        data-testid="appmode-selector"
       />
     </Box>
   );

src/components/ResultList/Pagination/Pagination.tsx

@@ -25,7 +25,17 @@ import { NumPerPageType, SafeSearchUrlParams } from '@/types';
 import { makeSearchParams, stringifySearchParams } from '@/utils';
 import { useRouter } from 'next/router';
 import { clamp, curryN } from 'ramda';
-import { Dispatch, FC, KeyboardEventHandler, ReactElement, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  Dispatch,
+  FC,
+  KeyboardEventHandler,
+  PropsWithChildren,
+  ReactElement,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { MenuPlacement } from 'react-select';
 import { calculatePagination, PaginationAction, PaginationResult } from './usePagination';
 
@@ -106,7 +116,7 @@ export const Pagination = (props: PaginationProps): ReactElement => {
    */
   const perPageChangeHandler = useCallback(
     ({ value }: SelectOption) => {
-      const numPerPage = parseInt(value, 10) as typeof APP_DEFAULTS['PER_PAGE_OPTIONS'][number];
+      const numPerPage = parseInt(value, 10) as (typeof APP_DEFAULTS)['PER_PAGE_OPTIONS'][number];
       if (typeof onPerPageSelect === 'function') {
         onPerPageSelect(numPerPage);
       }
@@ -238,7 +248,9 @@ export const Pagination = (props: PaginationProps): ReactElement => {
   );
 };
 
-const PaginationButton: FC<{ page: number; noLinks: boolean; onlyUpdatePageParam: boolean }> = (props) => {
+const PaginationButton: FC<PropsWithChildren<{ page: number; noLinks: boolean; onlyUpdatePageParam: boolean }>> = (
+  props,
+) => {
   const { children, page, noLinks, onlyUpdatePageParam } = props;
   const router = useRouter();
   const getLinkParams = useCallback(

src/components/SearchBar/AllSearchTermsDropdown.tsx

@@ -118,10 +118,7 @@ export const AllSearchTermsDropdown = ({ onSelect }: IAllSearchTermsDropdown): R
     <Box
       aria-label="all search terms dropdown"
       {...getComboboxProps({
-        ref: (el: HTMLDivElement) => {
-          tooltipReferenceRef(el);
-          return el;
-        },
+        ref: (el: HTMLDivElement) => tooltipReferenceRef(el),
       })}
       w="200px"
     >
@@ -131,10 +128,7 @@ export const AllSearchTermsDropdown = ({ onSelect }: IAllSearchTermsDropdown): R
             placeholder="all search terms"
             fontSize="md"
             {...getInputProps({
-              ref: (el: HTMLInputElement) => {
-                dropdownReferenceRef(el);
-                return el;
-              },
+              ref: (el: HTMLInputElement) => dropdownReferenceRef(el),
               onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                   if (items.length === 0 || !isOpen) {
@@ -170,10 +164,7 @@ export const AllSearchTermsDropdown = ({ onSelect }: IAllSearchTermsDropdown): R
         overflowY="scroll"
         overflowX="hidden"
         {...getMenuProps({
-          ref: (el: HTMLUListElement) => {
-            dropdownPopperRef(el);
-            return el;
-          },
+          ref: (el: HTMLUListElement) => dropdownPopperRef(el),
         })}
         data-testid="allSearchTermsMenu"
       >

src/components/SearchExamples/SearchExamples.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, Grid, GridItem, Text } from '@chakra-ui/react';
 import { useStore } from '@/store';
 import { noop } from '@/utils';
-import { FC, HTMLAttributes, MouseEventHandler, useMemo } from 'react';
+import { FC, HTMLAttributes, MouseEventHandler, PropsWithChildren, useMemo } from 'react';
 import { examples } from './examples';
 import { useIsClient } from '@/lib/useIsClient';
 import { useIntermediateQuery } from '@/lib/useIntermediateQuery';
@@ -12,7 +12,7 @@ export interface ISearchExamplesProps extends HTMLAttributes<HTMLDivElement> {
   onSelect?: () => void;
 }
 
-export const SearchExamples: FC<ISearchExamplesProps> = (props) => {
+export const SearchExamples: FC<PropsWithChildren<ISearchExamplesProps>> = (props) => {
   const { onSelect = noop, ...divProps } = props;
   const mode = useStore((state) => state.mode);
   const { appendToQuery } = useIntermediateQuery();

src/components/SearchFacet/SearchFacetModal/AlphaSorter.tsx

@@ -1,13 +1,13 @@
 import { Box, Flex, FlexProps, RadioProps, useRadio, useRadioGroup } from '@chakra-ui/react';
 import { range } from 'ramda';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
 interface IAlphaSorterProps extends FlexProps {
   letter: string;
   onLetterChange: (letter: string) => void;
 }
 
-export const AlphaSorter: FC<IAlphaSorterProps> = (props) => {
+export const AlphaSorter: FC<PropsWithChildren<IAlphaSorterProps>> = (props) => {
   const { letter = 'All', onLetterChange, ...flexProps } = props;
   const { getRootProps, getRadioProps } = useRadioGroup({
     onChange: onLetterChange,

src/components/SearchFacet/SearchFacetModal/SearchFacetModal.tsx

@@ -25,7 +25,7 @@ import { keyToPath, parseTitleFromKey } from '../helpers';
 import { useDebounce } from 'src/lib';
 import { SelectedList } from './SelectedList';
 
-interface ISearchFacetModalProps extends Omit<IFacetListProps, 'onError'> {
+interface ISearchFacetModalProps extends Omit<IFacetListProps, 'onError' | 'children'> {
   children: (props: { searchTerm: string }) => ReactNode;
 }
 

src/components/SearchFacet/SearchFacetModal/SearchInput.tsx

@@ -10,15 +10,15 @@ import {
 } from '@chakra-ui/react';
 import { useFacetStore } from '@/components/SearchFacet/store/FacetStore';
 import { capitalizeString } from '@/utils';
-import { ChangeEventHandler, FC } from 'react';
+import { ChangeEventHandler, FC, PropsWithChildren } from 'react';
 
 export interface ISearchInputProps extends InputGroupProps {
   search: string;
   onSearchChange: (search: string) => void;
   isDisabled?: boolean;
 }
 
-export const SearchInput: FC<ISearchInputProps> = (props) => {
+export const SearchInput: FC<PropsWithChildren<ISearchInputProps>> = (props) => {
   const { search, onSearchChange, isDisabled, ...inputGroupProps } = props;
 
   const forceUppercaseInitial = useFacetStore((state) => state.params.forceUppercaseInitial);

src/components/SearchFacet/store/FacetStore.ts

@@ -2,7 +2,7 @@ import { ISearchFacetProps } from '@/components';
 import { facetConfig } from '@/components/SearchFacet/config';
 import { FacetItem, IFacetParams, SearchFacetID } from '@/components/SearchFacet/types';
 import { omit, pick } from 'ramda';
-import { createElement, FC } from 'react';
+import { createElement, FC, PropsWithChildren } from 'react';
 import create from 'zustand';
 import createContext from 'zustand/context';
 import { computeNextSelectionState, createNodes, getSelected } from './helpers';
@@ -108,7 +108,7 @@ const createStore = (preloadedState: Partial<IFacetStoreState>) => () =>
 const FacetStoreContext = createContext<IFacetStoreState & FacetStoreEvents>();
 export const useFacetStore = FacetStoreContext.useStore;
 
-export const FacetStoreProvider: FC<{ facetId: SearchFacetID }> = ({ children, facetId }) => {
+export const FacetStoreProvider: FC<PropsWithChildren<{ facetId: SearchFacetID }>> = ({ children, facetId }) => {
   const params = pick(
     ['label', 'field', 'hasChildren', 'logic', 'facetQuery', 'filter', 'forceUppercaseInitial', 'maxDepth'],
     facetConfig[facetId],