@comet/cms-admin: Remove React barrel imports, add ESLint rule (#2526)

Use named imports instead of barrel importing React. Doing so will
result in less code and better readability. The new [React
docs](https://react.dev/) also use named imports and never import React
itself.

To avoid conflicts, we temporarily add the ESLint rules in the packages
on `main`. The restrict-import rule will be added in the v8 (next)
branch in the `@comet/eslint-config` package, then they will be removed
here again.

packages/admin/cms-admin/.eslintrc.json

@@ -2,6 +2,18 @@
     "extends": "@comet/eslint-config/react",
     "ignorePatterns": ["src/**/*.generated.ts", "lib/**"],
     "rules": {
-        "@comet/no-other-module-relative-import": "off"
+        "@comet/no-other-module-relative-import": "off",
+        "react/react-in-jsx-scope": "off",
+        "no-restricted-imports": [
+            "error",
+            {
+                "paths": [
+                    {
+                        "name": "react",
+                        "importNames": ["default"]
+                    }
+                ]
+            }
+        ]
     }
 }

packages/admin/cms-admin/src/blocks/AnchorBlock.tsx

@@ -1,6 +1,5 @@
 import { Field, FinalFormInput } from "@comet/admin";
 import { BlockCategory, BlockInterface, BlocksFinalForm, createBlockSkeleton, SelectPreviewComponent } from "@comet/blocks-admin";
-import * as React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { AnchorBlockData, AnchorBlockInput } from "../blocks.generated";

packages/admin/cms-admin/src/blocks/CmsBlockContextProvider.tsx

@@ -2,7 +2,7 @@ import { ApolloClient, NormalizedCacheObject, useApolloClient } from "@apollo/cl
 import { DocumentNode } from "@apollo/client/core";
 import { BlockContextProvider } from "@comet/blocks-admin";
 import { AxiosInstance } from "axios";
-import * as React from "react";
+import { ReactNode } from "react";
 
 import { DocumentInterface, DocumentType } from "../documents/types";
 import { AllCategories } from "../pages/pageTree/PageTreeContext";
@@ -25,10 +25,10 @@ export interface CmsBlockContext {
 }
 
 interface CmsBlockContextProviderProps extends Omit<CmsBlockContext, "apolloClient"> {
-    children: React.ReactNode;
+    children?: ReactNode;
 }
 
-export const CmsBlockContextProvider: React.FunctionComponent<CmsBlockContextProviderProps> = ({ children, ...values }): React.ReactElement => {
+export const CmsBlockContextProvider = ({ children, ...values }: CmsBlockContextProviderProps) => {
     const apolloClient = useApolloClient();
     return <BlockContextProvider value={{ ...values, apolloClient }}>{children}</BlockContextProvider>;
 };

packages/admin/cms-admin/src/blocks/DamVideoBlock.tsx

@@ -16,7 +16,7 @@ import {
 } from "@comet/blocks-admin";
 import { Box, Divider, Grid, IconButton, ListItemIcon, Menu, MenuItem, Typography } from "@mui/material";
 import { deepClone } from "@mui/x-data-grid/utils/utils";
-import * as React from "react";
+import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { DamVideoBlockData, DamVideoBlockInput } from "../blocks.generated";
@@ -127,7 +127,7 @@ export const DamVideoBlock: BlockInterface<DamVideoBlockData, State, DamVideoBlo
     definesOwnPadding: true,
 
     AdminComponent: ({ state, updateState }) => {
-        const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+        const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
         const isInPaper = useAdminComponentPaper();
         const contentScope = useContentScope();
         const apolloClient = useApolloClient();

packages/admin/cms-admin/src/blocks/EmailLinkBlock.tsx

@@ -1,7 +1,6 @@
 import { Field, FinalFormInput } from "@comet/admin";
 import { BlockCategory, BlockInterface, BlocksFinalForm, createBlockSkeleton, SelectPreviewComponent } from "@comet/blocks-admin";
 import { isEmail } from "class-validator";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { EmailLinkBlockData, EmailLinkBlockInput } from "../blocks.generated";

packages/admin/cms-admin/src/blocks/ExternalLinkBlock.tsx

@@ -1,7 +1,6 @@
 import { Field, FinalFormCheckbox, FinalFormInput } from "@comet/admin";
 import { BlockCategory, BlockInterface, BlocksFinalForm, createBlockSkeleton, LinkBlockInterface, SelectPreviewComponent } from "@comet/blocks-admin";
 import { FormControlLabel } from "@mui/material";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { ExternalLinkBlockData, ExternalLinkBlockInput } from "../blocks.generated";

packages/admin/cms-admin/src/blocks/InternalLinkBlock.tsx

@@ -12,7 +12,6 @@ import {
 } from "@comet/blocks-admin";
 import { Box, Divider, MenuItem } from "@mui/material";
 import { deepClone } from "@mui/x-data-grid/utils/utils";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { InternalLinkBlockData, InternalLinkBlockInput } from "../blocks.generated";

packages/admin/cms-admin/src/blocks/PhoneLinkBlock.tsx

@@ -1,6 +1,5 @@
 import { Field, FinalFormInput } from "@comet/admin";
 import { BlockCategory, BlockInterface, BlocksFinalForm, createBlockSkeleton, SelectPreviewComponent } from "@comet/blocks-admin";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { PhoneLinkBlockData, PhoneLinkBlockInput } from "../blocks.generated";

packages/admin/cms-admin/src/blocks/PixelImageBlock.tsx

@@ -15,7 +15,7 @@ import { BlockDependency } from "@comet/blocks-admin/lib/blocks/types";
 import { ButtonBase, Divider, Grid, IconButton, ListItemIcon, Menu, MenuItem, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { deepClone } from "@mui/x-data-grid/utils/utils";
-import * as React from "react";
+import { useCallback, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { PixelImageBlockData, PixelImageBlockInput } from "../blocks.generated";
@@ -156,8 +156,8 @@ export const PixelImageBlock: BlockInterface<PixelImageBlockData, ImageBlockStat
     definesOwnPadding: true,
 
     AdminComponent: ({ state, updateState }) => {
-        const [open, setOpen] = React.useState(false);
-        const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+        const [open, setOpen] = useState(false);
+        const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
         const context = useCmsBlockContext();
         const { filteredAcceptedMimeTypes } = useDamAcceptedMimeTypes();
         const contentScope = useContentScope();
@@ -166,7 +166,7 @@ export const PixelImageBlock: BlockInterface<PixelImageBlockData, ImageBlockStat
 
         // useSyncImageAttributes({ state, updateState });
 
-        const handleClose = React.useCallback(() => {
+        const handleClose = useCallback(() => {
             setOpen(false);
         }, [setOpen]);
 

packages/admin/cms-admin/src/blocks/SvgImageBlock.tsx

@@ -14,7 +14,7 @@ import {
 import { BlockDependency } from "@comet/blocks-admin/lib/blocks/types";
 import { Box, Divider, Grid, IconButton, ListItemIcon, Menu, MenuItem, Typography } from "@mui/material";
 import { deepClone } from "@mui/x-data-grid/utils/utils";
-import * as React from "react";
+import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { SvgImageBlockData, SvgImageBlockInput } from "../blocks.generated";
@@ -125,7 +125,7 @@ export const SvgImageBlock: BlockInterface<SvgImageBlockData, SvgImageBlockState
     definesOwnPadding: true,
 
     AdminComponent: ({ state, updateState }) => {
-        const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+        const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
         const context = useCmsBlockContext();
         const { filteredAcceptedMimeTypes } = useDamAcceptedMimeTypes();
         const contentScope = useContentScope();

packages/admin/cms-admin/src/blocks/VimeoVideoBlock.tsx

@@ -11,7 +11,6 @@ import {
     useAdminComponentPaper,
 } from "@comet/blocks-admin";
 import { Box } from "@mui/material";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { VimeoVideoBlockData, VimeoVideoBlockInput } from "../blocks.generated";

packages/admin/cms-admin/src/blocks/YouTubeVideoBlock.tsx

@@ -11,7 +11,6 @@ import {
     useAdminComponentPaper,
 } from "@comet/blocks-admin";
 import { Box } from "@mui/material";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { YouTubeVideoBlockData, YouTubeVideoBlockInput } from "../blocks.generated";

packages/admin/cms-admin/src/blocks/createImageLinkBlock.tsx

@@ -1,5 +1,4 @@
 import { BlockInterface, createCompositeBlock } from "@comet/blocks-admin";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { PixelImageBlock } from "./PixelImageBlock";

packages/admin/cms-admin/src/blocks/createLinkBlock.tsx

@@ -9,7 +9,6 @@ import {
     useAdminComponentPaper,
 } from "@comet/blocks-admin";
 import { Box } from "@mui/system";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { LinkBlockData } from "../blocks.generated";

packages/admin/cms-admin/src/blocks/createRichTextBlock.tsx

@@ -11,7 +11,6 @@ import {
     RawDraftContentState,
 } from "draft-js";
 import isEqual from "lodash.isequal";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { RichTextBlockData, RichTextBlockInput } from "../blocks.generated";

packages/admin/cms-admin/src/blocks/createSeoBlock.tsx

@@ -18,7 +18,6 @@ import {
 import { Box, Divider, Grid, IconButton, MenuItem, Paper, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import arrayMutators from "final-form-arrays";
-import * as React from "react";
 import { Field as ReactFinalFormField } from "react-final-form";
 import { FieldArray } from "react-final-form-arrays";
 import { FormattedMessage, useIntl } from "react-intl";

packages/admin/cms-admin/src/blocks/createTextImageBlock.tsx

@@ -10,7 +10,6 @@ import {
     withAdditionalBlockAttributes,
 } from "@comet/blocks-admin";
 import { FormControlLabel, MenuItem, Radio, RadioGroup, Select } from "@mui/material";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { TextImageBlockData, TextImageBlockInput } from "../blocks.generated";

packages/admin/cms-admin/src/blocks/createTextLinkBlock.tsx

@@ -11,7 +11,6 @@ import {
     withAdditionalBlockAttributes,
 } from "@comet/blocks-admin";
 import { Box } from "@mui/material";
-import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { TextLinkBlockData, TextLinkBlockInput } from "../blocks.generated";

packages/admin/cms-admin/src/blocks/helpers/VideoOptionsFields.tsx

@@ -1,6 +1,5 @@
 import { Field, FinalFormSwitch, OnChangeField } from "@comet/admin";
 import { FormControlLabel } from "@mui/material";
-import * as React from "react";
 import { useForm } from "react-final-form";
 import { FormattedMessage } from "react-intl";
 

packages/admin/cms-admin/src/blocks/image/EditImageDialog.tsx

@@ -18,7 +18,7 @@ import {
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import isEqual from "lodash.isequal";
-import * as React from "react";
+import { ChangeEvent } from "react";
 import { Form } from "react-final-form";
 import { FormattedMessage } from "react-intl";
 
@@ -68,7 +68,7 @@ const DialogContent = styled(MuiDialogContent)`
     padding-left: 40px;
 `;
 
-export function EditImageDialog({ image, initialValues, onSubmit, onClose, inheritedDamSettings, damFileId }: Props): React.ReactElement {
+export function EditImageDialog({ image, initialValues, onSubmit, onClose, inheritedDamSettings, damFileId }: Props) {
     const contentScope = useContentScope();
     const apolloClient = useApolloClient();
     const dependencyMap = useDependenciesConfig();
@@ -220,10 +220,10 @@ export function EditImageDialog({ image, initialValues, onSubmit, onClose, inher
 
 interface YesNoSwitchProps {
     checked?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
-const YesNoSwitch = ({ checked, onChange }: YesNoSwitchProps): React.ReactElement => {
+const YesNoSwitch = ({ checked, onChange }: YesNoSwitchProps) => {
     return (
         <FormControlLabel
             control={<Switch checked={checked} onChange={onChange} />}

packages/admin/cms-admin/src/blocks/rte/extension/CmsLink/EditorComponent.tsx

@@ -1,13 +1,12 @@
 import { ContentState } from "draft-js";
-import * as React from "react";
+import { PropsWithChildren } from "react";
 
 interface IProps {
     contentState: ContentState;
     entityKey: string;
-    children?: React.ReactNode;
 }
 
-export function EditorComponent(props: IProps): React.ReactElement {
+export function EditorComponent(props: PropsWithChildren<IProps>) {
     return (
         <a
             href="#"

packages/admin/cms-admin/src/blocks/rte/extension/CmsLink/createCmsLinkToolbarButton.tsx

@@ -8,7 +8,7 @@ import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
 import { EditorState, EntityInstance, RichUtils } from "draft-js";
-import * as React from "react";
+import { MouseEvent, ReactElement, useCallback, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { ENTITY_TYPE } from "./Decorator";
@@ -22,9 +22,9 @@ interface CreateCmsLinkToolbarButtonOptions {
     link: BlockInterface;
 }
 
-export function createCmsLinkToolbarButton({ link: LinkBlock }: CreateCmsLinkToolbarButtonOptions): (props: IProps) => React.ReactElement {
-    function ToolbarButton({ editorState, setEditorState }: IProps): React.ReactElement {
-        const [open, setOpen] = React.useState(false);
+export function createCmsLinkToolbarButton({ link: LinkBlock }: CreateCmsLinkToolbarButtonOptions): (props: IProps) => ReactElement {
+    function ToolbarButton({ editorState, setEditorState }: IProps) {
+        const [open, setOpen] = useState(false);
         const { entity: linkEntity, entitySelection: linkSelection } = findEntityInCurrentSelection(editorState, ENTITY_TYPE);
         const selection = editorState.getSelection();
         const linkEditCreateDisabled = !linkEntity && (selection.isCollapsed() || !selectionIsInOneBlock(editorState)); // when a link entity is found it is always editable, when no entity is found, creating a link is disabled when no char is selected (selection.isCollapsed()) or when the selection exceeds a block (a link over multiple blocks is normally not intended)
@@ -68,7 +68,7 @@ export function createCmsLinkToolbarButton({ link: LinkBlock }: CreateCmsLinkToo
     function LinkDialog({ onClose, linkEntity, editorState, setEditorState, selectedText }: ILinkDialogProps) {
         // provides the form inputs
 
-        const linkState: BlockState<typeof LinkBlock> = React.useMemo(() => {
+        const linkState: BlockState<typeof LinkBlock> = useMemo(() => {
             if (linkEntity) {
                 // editing link, create a clone to edit in dialog (as the user might cancel editing)
                 return linkEntity.getData() as BlockState<typeof LinkBlock>;
@@ -78,15 +78,15 @@ export function createCmsLinkToolbarButton({ link: LinkBlock }: CreateCmsLinkToo
             }
         }, [linkEntity]);
 
-        const [newLinkState, setNewLinkState] = React.useState<BlockState<typeof LinkBlock>>(linkState);
+        const [newLinkState, setNewLinkState] = useState<BlockState<typeof LinkBlock>>(linkState);
 
         const handleClose = () => {
             onClose();
         };
 
         // removes the selected link entity
-        const handleRemove = React.useCallback(
-            (e: React.MouseEvent) => {
+        const handleRemove = useCallback(
+            (e: MouseEvent) => {
                 e.preventDefault();
 
                 const selection = editorState.getSelection();
@@ -99,8 +99,8 @@ export function createCmsLinkToolbarButton({ link: LinkBlock }: CreateCmsLinkToo
         );
 
         // creates or updates the draft link entity
-        const handleUpdate = React.useCallback(
-            (e: React.MouseEvent) => {
+        const handleUpdate = useCallback(
+            (e: MouseEvent) => {
                 e.preventDefault();
                 const selection = editorState.getSelection();
                 // update the data in the entity

packages/admin/cms-admin/src/builds/BuildEntry.tsx

@@ -4,7 +4,7 @@ import { SsgRunning, SsgStandby } from "@comet/admin-icons";
 import { List, ListItem, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { differenceInMinutes, parseISO } from "date-fns";
-import * as React from "react";
+import { ReactNode } from "react";
 import { FormattedMessage, FormattedTime } from "react-intl";
 
 import { DropdownMenuItem } from "../common/DropdownMenuItem";
@@ -30,8 +30,8 @@ const buildStatusQuery = gql`
     }
 `;
 
-const BuildStatusPopperContent: React.FunctionComponent<{ data: GQLBuildStatusQuery }> = ({ data: { autoBuildStatus, builds } }) => {
-    const content: React.ReactNode[] = [];
+const BuildStatusPopperContent = ({ data: { autoBuildStatus, builds } }: { data: GQLBuildStatusQuery }) => {
+    const content: ReactNode[] = [];
     const lastBuild = builds.length > 0 ? builds[0] : undefined;
 
     if (lastBuild) {
@@ -103,7 +103,7 @@ const BuildStatusPopperContent: React.FunctionComponent<{ data: GQLBuildStatusQu
     );
 };
 
-export function BuildEntry(): React.ReactElement {
+export function BuildEntry() {
     const { data, error, refetch, startPolling, stopPolling } = useQuery<GQLBuildStatusQuery>(buildStatusQuery, {
         skip: process.env.NODE_ENV === "development",
         fetchPolicy: "network-only",

packages/admin/cms-admin/src/builds/PublishButton.tsx

@@ -1,12 +1,12 @@
 import { Button } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import * as React from "react";
+import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { StartBuildsDialog } from "./StartBuildsDialog";
 
-export const PublishButton: React.FunctionComponent = () => {
-    const [isStartBuildsDialogOpen, setIsStartBuildsDialogOpen] = React.useState(false);
+export const PublishButton = () => {
+    const [isStartBuildsDialogOpen, setIsStartBuildsDialogOpen] = useState(false);
 
     const handlePublishClick = () => {
         setIsStartBuildsDialogOpen(true);

packages/admin/cms-admin/src/builds/PublisherPage.tsx

@@ -3,7 +3,6 @@ import { Stack, Toolbar, ToolbarActions, ToolbarFillSpace, ToolbarTitleItem } fr
 import { styled } from "@mui/material/styles";
 import { DataGrid } from "@mui/x-data-grid";
 import { parseISO } from "date-fns";
-import * as React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { ContentScopeIndicator } from "../contentScope/ContentScopeIndicator";
@@ -30,7 +29,7 @@ const DataGridContainer = styled("div")`
     height: calc(100vh - var(--comet-admin-master-layout-content-top-spacing));
 `;
 
-export function PublisherPage(): React.ReactElement {
+export function PublisherPage() {
     const intl = useIntl();
 
     const { data, loading, error } = useQuery<GQLBuildsQuery, undefined>(buildsQuery);