Chore/modify e slint rule

.eslintrc.json

@@ -42,7 +42,7 @@
   "rules": {
     "no-shadow": "off",
     "@typescript-eslint/no-shadow": "error",
-    "react/jsx-props-no-spreading": "warn",
+    "react/jsx-props-no-spreading": "off",
     "react/require-default-props": "off",
     "import/prefer-default-export": "off",
     "react/prop-types": "warn",

src/assets/icons/BxCopy.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 export const BxCopy = (props: React.SVGProps<SVGSVGElement>): JSX.Element => {
   return (
     <svg

src/assets/icons/BxLifeBuoy.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 export const BxLifeBuoy = (
   props: React.SVGProps<SVGSVGElement>
 ): JSX.Element => {

src/assets/icons/BxsClearRocket.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 export const BxsClearRocket = (
   props: React.SVGProps<SVGSVGElement>
 ): JSX.Element => {

src/components/Card/Card.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import {
   Box,
   BoxProps,

src/components/DisplayCard/DisplayCard.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import {
   Box,
   Divider,

src/components/MediaSettingsModal/MediaSettingsModal.jsx

@@ -158,7 +158,6 @@ export const MediaSettingsModal = ({
                 <FormTitle>File name</FormTitle>
                 <FormField
                   placeholder="File name"
-                  // eslint-disable-next-line react/jsx-props-no-spreading
                   {...register("name")}
                   id="name"
                 />

src/components/PageSettingsModal/PageSettingsModal.tsx

@@ -158,7 +158,6 @@ export const PageSettingsModal = ({
                 <Input
                   placeholder="Page title"
                   id="title"
-                  // eslint-disable-next-line react/jsx-props-no-spreading
                   {...register("title", { required: true })}
                 />
                 <FormErrorMessage>{errors.title?.message}</FormErrorMessage>
@@ -173,7 +172,6 @@ export const PageSettingsModal = ({
                   </FormLabel.Description>
                 </Box>
                 <Input
-                  // eslint-disable-next-line react/jsx-props-no-spreading
                   {...register("permalink", { required: true })}
                   id="permalink"
                   placeholder="Page URL"
@@ -196,7 +194,6 @@ export const PageSettingsModal = ({
                 <Input
                   placeholder="Meta Description (Optional)"
                   id="description"
-                  // eslint-disable-next-line react/jsx-props-no-spreading
                   {...register("description")}
                 />
                 <FormErrorMessage>

src/components/PageSettingsModal/ResourcePageSettingsModal.tsx

@@ -250,7 +250,6 @@ export const ResourcePageSettingsModal = ({
                   <FormLabel mb={0}>Resource Type</FormLabel>
                 </Box>
                 <Select
-                  // eslint-disable-next-line react/jsx-props-no-spreading
                   {...register("layout", { required: true })}
                   id="layout"
                   value={watch("layout")}
@@ -268,7 +267,6 @@ export const ResourcePageSettingsModal = ({
                 <Input
                   placeholder="Page title"
                   id="title"
-                  // eslint-disable-next-line react/jsx-props-no-spreading
                   {...register("title", { required: true })}
                 />
                 <FormErrorMessage>{errors.title?.message}</FormErrorMessage>
@@ -289,7 +287,6 @@ export const ResourcePageSettingsModal = ({
                       </FormLabel.Description>
                     </Box>
                     <Input
-                      // eslint-disable-next-line react/jsx-props-no-spreading
                       {...register("permalink", { required: true })}
                       id="permalink"
                       placeholder="Page URL"
@@ -310,7 +307,6 @@ export const ResourcePageSettingsModal = ({
                   </FormLabel.Description>
                 </Box>
                 <Input
-                  // eslint-disable-next-line react/jsx-props-no-spreading
                   {...register("date", { required: true })}
                   id="date"
                   placeholder="Date (YYYY-MM-DD)"
@@ -362,7 +358,6 @@ export const ResourcePageSettingsModal = ({
                     <Input
                       placeholder="Meta Description (Optional)"
                       id="description"
-                      // eslint-disable-next-line react/jsx-props-no-spreading
                       {...register("description")}
                     />
                     <FormErrorMessage>

src/components/contact-us/Section.jsx

@@ -49,7 +49,6 @@ const EditorSection = ({
       <>
         <Droppable droppableId={sectionId} type={sectionId}>
           {(droppableProvided) => (
-            /* eslint-disable react/jsx-props-no-spreading */
             <div
               className={styles.card}
               ref={droppableProvided.innerRef}

src/components/folders/ReorderingModal.jsx

@@ -91,7 +91,6 @@ const ReorderingModal = ({ params, dirData, onProceed, onClose }) => {
                   <div
                     className={`${contentStyles.contentContainerFolderColumn} mb-5`}
                     ref={droppableProvided.innerRef}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
                     {...droppableProvided.droppableProps}
                   >
                     {dirOrder.map((folderContentItem, folderContentIndex) => (
@@ -102,9 +101,7 @@ const ReorderingModal = ({ params, dirData, onProceed, onClose }) => {
                       >
                         {(draggableProvided) => (
                           <div
-                            // eslint-disable-next-line react/jsx-props-no-spreading
                             {...draggableProvided.draggableProps}
-                            // eslint-disable-next-line react/jsx-props-no-spreading
                             {...draggableProvided.dragHandleProps}
                             ref={draggableProvided.innerRef}
                           >

src/components/homepage/HeroDropdown.jsx

@@ -101,7 +101,6 @@ const HeroDropdown = ({
     </FormContext>
     <Droppable droppableId="dropdownelem" type="dropdownelem">
       {(droppableProvided) => (
-        /* eslint-disable react/jsx-props-no-spreading */
         <div
           className={styles.card}
           ref={droppableProvided.innerRef}

src/components/homepage/HeroSection.jsx

@@ -156,7 +156,6 @@ const EditorHeroSection = ({
               />
               <Droppable droppableId="highlight" type="highlight">
                 {(droppableProvided) => (
-                  /* eslint-disable react/jsx-props-no-spreading */
                   <div
                     className={styles.card}
                     ref={droppableProvided.innerRef}

src/components/media/MediaAltText.jsx

@@ -95,7 +95,6 @@ export const MediaAltText = ({ onProceed, onClose, type }) => {
                      */}
                     <FormField
                       placeholder={formTitle}
-                      // eslint-disable-next-line react/jsx-props-no-spreading
                       {...register("altText")}
                       id="altText"
                     />

src/components/navbar/NavSection.jsx

@@ -218,7 +218,6 @@ const NavSection = ({
     <>
       <Droppable droppableId="link" type="link">
         {(droppableProvided) => (
-          /* eslint-disable react/jsx-props-no-spreading */
           <div
             className={styles.card}
             ref={droppableProvided.innerRef}

src/components/navbar/NavSublinkSection.jsx

@@ -93,7 +93,6 @@ const NavSublinkSection = ({
 }) => (
   <Droppable droppableId={`sublink-${linkIndex}`} type="sublink">
     {(droppableProvided) => (
-      /* eslint-disable react/jsx-props-no-spreading */
       <div
         className={styles.card}
         ref={droppableProvided.innerRef}

src/layouts/EditContactUs.jsx

@@ -45,7 +45,6 @@ import { validateContactType, validateLocationType } from "utils/validators"
 
 import { DEFAULT_RETRY_MSG, isEmpty } from "utils"
 
-/* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/no-array-index-key */
 
 // Constants

src/layouts/EditHomepage.jsx

@@ -40,7 +40,6 @@ import {
 
 import { DEFAULT_RETRY_MSG } from "utils"
 
-/* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/no-array-index-key */
 
 // Constants

src/layouts/ResourceRoom/ResourceRoom.tsx

@@ -134,7 +134,6 @@ const EmptyResourceRoom = () => {
               <Input
                 marginTop={5}
                 placeholder="Resource room name"
-                // eslint-disable-next-line react/jsx-props-no-spreading
                 {...register("newDirectoryName", {
                   required: "Please enter resource room name",
                 })}
@@ -362,7 +361,6 @@ const ResourceRoomContent = ({
                 <FormLabel>Resource room title</FormLabel>
                 <Input
                   placeholder="New resource room name"
-                  // eslint-disable-next-line react/jsx-props-no-spreading
                   {...register("newDirectoryName", {
                     required:
                       "Please ensure that you have entered a resource room name!",

src/layouts/SiteLaunchPad/SiteLaunchPad.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import {
   Modal,
   ModalOverlay,

src/layouts/SiteLaunchPad/components/SiteLaunchCheckList.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import {
   Box,
   Center,

src/layouts/SiteLaunchPad/components/SiteLaunchInfoGathering.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import { Box, Button, Icon, Text, RadioGroup } from "@chakra-ui/react"
 import { Input, Radio } from "@opengovsg/design-system-react"
 import { useState } from "react"

src/layouts/components/CreateButton.tsx

@@ -10,7 +10,6 @@ export const CreateButton = forwardRef<ButtonProps, "button">(
     return (
       <Button
         variant="outline"
-        /* eslint-disable-next-line react/jsx-props-no-spreading */
         {...props}
         ref={ref}
         iconSpacing="0.5rem"

src/layouts/components/Section/Section.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import { VStack, StackProps } from "@chakra-ui/react"
 
 // eslint-disable-next-line import/prefer-default-export

src/layouts/components/Section/SectionCaption.tsx

@@ -17,7 +17,6 @@ export const SectionCaption = ({
         <Text textStyle="subhead-3" as="span">
           {label}
         </Text>
-        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <Text textStyle="body-2" as="span" {...rest} />
       </Text>
     </HStack>

src/layouts/layouts/SiteEditLayout/SiteEditLayout.tsx

@@ -27,7 +27,6 @@ const GRID_LAYOUT: Pick<
 export const SiteEditLayout = ({ children }: StackProps): JSX.Element => {
   return (
     <>
-      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
       <Grid {...GRID_LAYOUT}>
         <GridItem
           area="header"
@@ -67,7 +66,6 @@ export const SiteEditContent = ({
       w="100%"
       h="100%"
       divider={<StackDivider borderColor="border.divider.alt" />}
-      // eslint-disable-next-line react/jsx-props-no-spreading
       {...rest}
     >
       {children}

src/layouts/layouts/SiteViewLayout/SiteViewLayout.tsx

@@ -22,7 +22,6 @@ const GRID_LAYOUT: Pick<
 export const SiteViewLayout = ({ children }: StackProps): JSX.Element => {
   return (
     <>
-      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
       <Grid {...GRID_LAYOUT}>
         <GridItem
           area="header"
@@ -53,7 +52,6 @@ export const SiteViewContent = ({
       w="100%"
       h="100%"
       divider={<StackDivider borderColor="border.divider.alt" />}
-      // eslint-disable-next-line react/jsx-props-no-spreading
       {...rest}
     >
       {children}

src/routing/ProtectedRoute.tsx

@@ -40,7 +40,6 @@ export const ProtectedRoute = ({
   if (displayedName && WrappedComponent) {
     return (
       <Route
-        // eslint-disable-next-line react/jsx-props-no-spreading
         {...rest}
         render={(props) => {
           const { match } = props
@@ -49,10 +48,7 @@ export const ProtectedRoute = ({
             ...match,
             decodedParams: getDecodedParams(prune(params)),
           }
-          return (
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            <WrappedComponent {...rest} {...props} match={newMatch} />
-          )
+          return <WrappedComponent {...rest} {...props} match={newMatch} />
         }}
       />
     )

src/routing/ProtectedRouteWithProps.tsx

@@ -12,7 +12,6 @@ type RouteProps = {
 export const ProtectedRouteWithProps = (props: RouteProps): JSX.Element => {
   return (
     <Sentry.ErrorBoundary fallback={FallbackComponent}>
-      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
       <ProtectedRoute {...props} />
     </Sentry.ErrorBoundary>
   )

src/routing/RedirectIfLoggedInRoute.jsx

@@ -13,7 +13,6 @@ export default function RedirectIfLoggedInRoute({
     <Redirect to="/sites" />
   ) : (
     children ||
-      // eslint-disable-next-line react/jsx-props-no-spreading
       (WrappedComponent && <Route {...rest} component={WrappedComponent} />)
   )
 }