Enforce props on a new line for multiline components

.eslintrc.json

@@ -38,10 +38,8 @@
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "react/prop-types": 0,
-    "react/jsx-max-props-per-line": [2, {
-      "maximum": 1,
-      "when": "always"
-    }],
+    "react/jsx-max-props-per-line": ["error", { "maximum": 1, "when": "always" }],
+    "react/jsx-first-prop-new-line": ["error", "multiline-multiprop"],
     "react/jsx-fragments": "error",
     "arrow-spacing": "error",
     "space-infix-ops": "error",

package.json

@@ -20,7 +20,7 @@
     "eslint": "^6.8.0",
     "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-no-only-tests": "^2.6.0",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-ternary": "^1.0.4",
     "npm-run-all": "^4.1.5",

packages/common-components/src/Toasts/ToastContent.tsx

@@ -105,7 +105,8 @@ const ToastContent = ({ toast, onClose }: ToastContentProps) => {
             />
             {onProgressCancel &&
               onProgressCancelLoading
-              ? <Loading size={16}
+              ? <Loading
+                size={16}
                 className={classes.progressCrossButton} />
               : <CloseCirceSvg
                 className={classes.progressCrossButton}

packages/common-components/src/stories/Tabs.stories.tsx

@@ -13,7 +13,8 @@ export const TabsDemo = (): React.ReactNode => {
       activeKey={tab}
       onTabSelect={setTab}
     >
-      <TabPane title="tab 1"
+      <TabPane
+        title="tab 1"
         tabKey="1"
       >
         first

packages/common-components/src/stories/Toasts.stories.tsx

@@ -107,10 +107,11 @@ const ToastNotificationDemo: React.FC<{toast: ToastParams}> = ({ toast }) => {
       <br />
       {toasts.map((toast) => (
         toast.progress && toast.progress < 80 ? (
-          <button onClick={() => updateToast(toast.id, {
-            ...toast,
-            progress: toast.progress !== undefined ? toast.progress + 20 : undefined
-          })}>
+          <button
+            onClick={() => updateToast(toast.id, {
+              ...toast,
+              progress: toast.progress !== undefined ? toast.progress + 20 : undefined
+            })}>
             increase progress toast
           </button>
         ) : null

packages/files-ui/src/Components/Elements/TeamModal.tsx

@@ -53,7 +53,8 @@ const TeamModal = ({ onHide }: Props) => {
       mobileStickyBottom={false}
     >
       <div className={classes.root}>
-        <Typography variant="h2"
+        <Typography
+          variant="h2"
           className={classes.title}
         >
           <Trans>Teams</Trans>

packages/files-ui/src/Components/Modules/FileBrowsers/BinFileBrowser.tsx

@@ -123,23 +123,24 @@ const BinFileBrowser: React.FC<IFileBrowserModuleProps> = ({ controls = false }:
   }), [])
 
   return (
-    <FileBrowserContext.Provider value={{
-      bucket,
-      crumbs: undefined,
-      deleteItems,
-      recoverItems,
-      currentPath,
-      moduleRootPath: ROUTE_LINKS.Bin("/"),
-      refreshContents,
-      loadingCurrentPath,
-      showUploadsInTable: false,
-      sourceFiles: pathContents,
-      heading: t`Bin`,
-      controls,
-      itemOperations,
-      bulkOperations,
-      viewFolder
-    }}>
+    <FileBrowserContext.Provider
+      value={{
+        bucket,
+        crumbs: undefined,
+        deleteItems,
+        recoverItems,
+        currentPath,
+        moduleRootPath: ROUTE_LINKS.Bin("/"),
+        refreshContents,
+        loadingCurrentPath,
+        showUploadsInTable: false,
+        sourceFiles: pathContents,
+        heading: t`Bin`,
+        controls,
+        itemOperations,
+        bulkOperations,
+        viewFolder
+      }}>
       <DragAndDrop>
         <FilesList />
       </DragAndDrop>

packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx

@@ -185,28 +185,29 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
   }), [])
 
   return (
-    <FileBrowserContext.Provider value={{
-      bucket,
-      bulkOperations,
-      crumbs,
-      moduleRootPath: ROUTE_LINKS.Drive("/"),
-      currentPath,
-      refreshContents,
-      deleteItems: moveItemsToBin,
-      downloadFile: handleDownload,
-      moveItems,
-      renameItem: renameItem,
-      viewFolder,
-      handleUploadOnDrop,
-      loadingCurrentPath,
-      showUploadsInTable: true,
-      sourceFiles: pathContents,
-      heading: t`My Files`,
-      controls: true,
-      allowDropUpload: true,
-      itemOperations,
-      withSurvey: showSurvey && olderThanOneWeek
-    }}>
+    <FileBrowserContext.Provider
+      value={{
+        bucket,
+        bulkOperations,
+        crumbs,
+        moduleRootPath: ROUTE_LINKS.Drive("/"),
+        currentPath,
+        refreshContents,
+        deleteItems: moveItemsToBin,
+        downloadFile: handleDownload,
+        moveItems,
+        renameItem: renameItem,
+        viewFolder,
+        handleUploadOnDrop,
+        loadingCurrentPath,
+        showUploadsInTable: true,
+        sourceFiles: pathContents,
+        heading: t`My Files`,
+        controls: true,
+        allowDropUpload: true,
+        itemOperations,
+        withSurvey: showSurvey && olderThanOneWeek
+      }}>
       <DragAndDrop>
         <FilesList />
       </DragAndDrop>

packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx

@@ -368,7 +368,8 @@ const FileInfoModal = ({ filePath, close }: IFileInfoModuleProps) => {
                       <Trans>CID (Content Identifier)</Trans>
                     </Typography>
                   </Grid>
-                  <div onClick={onCopyCID}
+                  <div
+                    onClick={onCopyCID}
                     className={classes.copyRow}
                   >
                     <Typography
@@ -402,7 +403,8 @@ const FileInfoModal = ({ filePath, close }: IFileInfoModuleProps) => {
                       <Trans>Decryption key</Trans>
                     </Typography>
                   </Grid>
-                  <div onClick={onCopyKey}
+                  <div
+                    onClick={onCopyKey}
                     className={classes.copyRow}
                   >
                     <Typography

packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx

@@ -189,7 +189,8 @@ const MoveFileModule = ({ filesToMove, onClose, onCancel, mode }: IMoveFileModul
         sm={12}
         className={classes.paddedContainer}
       >
-        <Typography className={classes.heading}
+        <Typography
+          className={classes.heading}
           variant="h5"
           component="h5"
         >

packages/files-ui/src/Components/Modules/FileBrowsers/SearchFileBrowser.tsx

@@ -102,20 +102,21 @@ const SearchFileBrowser: React.FC<IFileBrowserModuleProps> = ({ controls = false
   }), [])
 
   return (
-    <FileBrowserContext.Provider value={{
-      crumbs: undefined,
-      loadingCurrentPath: loadingSearchResults,
-      showUploadsInTable: false,
-      viewFolder,
-      sourceFiles: pathContents,
-      moduleRootPath: undefined,
-      currentPath: searchTerm,
-      heading: t`Search results`,
-      controls,
-      itemOperations,
-      isSearch: true,
-      getPath
-    }}>
+    <FileBrowserContext.Provider
+      value={{
+        crumbs: undefined,
+        loadingCurrentPath: loadingSearchResults,
+        showUploadsInTable: false,
+        viewFolder,
+        sourceFiles: pathContents,
+        moduleRootPath: undefined,
+        currentPath: searchTerm,
+        heading: t`Search results`,
+        controls,
+        itemOperations,
+        isSearch: true,
+        getPath
+      }}>
       <DragAndDrop>
         <FilesList />
       </DragAndDrop>

packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx

@@ -287,28 +287,29 @@ const SharedFileBrowser = () => {
 
 
   return (
-    <FileBrowserContext.Provider value={{
-      bucket,
-      bulkOperations,
-      handleUploadOnDrop,
-      crumbs,
-      moduleRootPath: ROUTE_LINKS.SharedFolderExplorer(bucket?.id || "", "/"),
-      currentPath,
-      refreshContents,
-      deleteItems,
-      downloadFile: handleDownload,
-      moveItems,
-      renameItem,
-      viewFolder,
-      loadingCurrentPath,
-      showUploadsInTable: false,
-      sourceFiles: pathContents,
-      heading: bucket?.name || t`Shared`,
-      controls: true,
-      allowDropUpload: access === "writer" || access === "owner",
-      itemOperations,
-      withSurvey: false
-    }}>
+    <FileBrowserContext.Provider
+      value={{
+        bucket,
+        bulkOperations,
+        handleUploadOnDrop,
+        crumbs,
+        moduleRootPath: ROUTE_LINKS.SharedFolderExplorer(bucket?.id || "", "/"),
+        currentPath,
+        refreshContents,
+        deleteItems,
+        downloadFile: handleDownload,
+        moveItems,
+        renameItem,
+        viewFolder,
+        loadingCurrentPath,
+        showUploadsInTable: false,
+        sourceFiles: pathContents,
+        heading: bucket?.name || t`Shared`,
+        controls: true,
+        allowDropUpload: access === "writer" || access === "owner",
+        itemOperations,
+        withSurvey: false
+      }}>
       <DragAndDrop>
         <FilesList isShared/>
       </DragAndDrop>

packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx

@@ -965,8 +965,10 @@ const FilesList = ({ isShared = false }: Props) => {
             data-cy="data-state-no-files"
           >
             <EmptySvg />
-            <Typography variant="h4"
-              component="h4">
+            <Typography
+              variant="h4"
+              component="h4"
+            >
               <Trans>No files to show</Trans>
             </Typography>
           </section>
@@ -982,8 +984,10 @@ const FilesList = ({ isShared = false }: Props) => {
             >
               {desktop ? (
                 <TableHead>
-                  <TableRow type="grid"
-                    className={classes.tableRow}>
+                  <TableRow
+                    type="grid"
+                    className={classes.tableRow}
+                  >
                     <TableHeadCell>
                       <CheckboxInput
                         value={selectedItems.length === items.length}
@@ -1029,8 +1033,10 @@ const FilesList = ({ isShared = false }: Props) => {
                 </TableHead>
               ) : (
                 <TableHead>
-                  <TableRow type="grid"
-                    className={classes.tableRow}>
+                  <TableRow
+                    type="grid"
+                    className={classes.tableRow}
+                  >
                     <TableHeadCell>
                       <CheckboxInput
                         value={selectedItems.length === items.length}

packages/files-ui/src/Components/Modules/FilePreviewModal.tsx

@@ -322,7 +322,8 @@ const FilePreviewModal = ({ file, nextFile, previousFile, closePreview, filePath
             className={classes.prevNext}
           >
             {previousFile && (
-              <Button onClick={previousFile}
+              <Button
+                onClick={previousFile}
                 className={classes.prevNextButton}
                 data-cy="button-view-previous-file">
                 <ArrowLeftIcon />

packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx

@@ -444,7 +444,8 @@ const InitialScreen = ({ className }: IInitialScreen) => {
                     labelClassName={classes.inputLabel}
                   />
                   {!!errorEmail && (
-                    <Typography component="p"
+                    <Typography
+                      component="p"
                       variant="body1"
                       className={classes.error}>{error}</Typography>
                   )}
@@ -506,7 +507,8 @@ const InitialScreen = ({ className }: IInitialScreen) => {
               {maintenanceMode && (
                 <Typography className={clsx(classes.maintenanceMessage, classes.maintenanceActiveMessage)}>
                   <Trans>We are performing routine maintenance of the system. Service status updates will be posted on the{" "}
-                    <a href={ROUTE_LINKS.DiscordInvite}
+                    <a
+                      href={ROUTE_LINKS.DiscordInvite}
                       target="_blank"
                       rel='noreferrer noopener'>Files Support Channel</a>{" "}
                       on Discord

packages/files-ui/src/Components/Modules/Settings/Profile.tsx

@@ -479,7 +479,8 @@ const ProfileView = () => {
                     }
                   </>
                 }
-                <CheckboxInput label={t`Allow lookup by sharing key, wallet address or username`}
+                <CheckboxInput
+                  label={t`Allow lookup by sharing key, wallet address or username`}
                   value={profile?.lookupConsent || false}
                   onChange={toggleLookupConsent} />
               </div>
@@ -599,7 +600,8 @@ const ProfileView = () => {
               <Trans>Theme</Trans>
             </Typography>
             <Grid container>
-              <Grid item
+              <Grid
+                item
                 xs={12}
                 lg={6}
               >
@@ -615,7 +617,8 @@ const ProfileView = () => {
                   </Typography>}
                 </label>
               </Grid>
-              <Grid item
+              <Grid
+                item
                 xs={12}
                 lg={6}
               >

packages/files-ui/src/Components/SharingExplainerModal.tsx

@@ -92,7 +92,8 @@ const SharingExplainerModal = ({ showModal, onHide }: Props) => {
 
       case 2:
         return <>
-          <div className={classes.title}
+          <div
+            className={classes.title}
           ><Trans>Add viewers and editors by username, sharing id or Ethereum address.</Trans></div>
           <div className={classes.imageContainer}>
             <img

packages/files-ui/src/Contexts/PosthogContext.tsx

@@ -149,7 +149,8 @@ const PosthogProvider = ({ children }: PosthogProviderProps) => {
               This website uses cookies that help the website function and track interactions for analytics purposes.
               You have the right to decline our use of cookies. For us to provide a customizable user experience to you,
               please click on the Accept button below.
-              <a className={classes.link}
+              <a
+                className={classes.link}
                 href="https://files.chainsafe.io/privacy-policy"
                 target='_blank'
                 rel='noopener noreferrer'>Learn more