docs: remove react imports

docs/.eslintrc.json

@@ -2,7 +2,8 @@
     "extends": "@comet/eslint-config/react",
     "ignorePatterns": [".docusaurus", "build"],
     "rules": {
-        "@calm/react-intl/missing-formatted-message": "off"
+        "@calm/react-intl/missing-formatted-message": "off",
+        "react/react-in-jsx-scope": "off"
     },
     "env": {
         "node": true

docs/docs/blocks/block-factories.mdx

@@ -483,7 +483,7 @@ const supportedBlocks: SupportedBlocks = {
 };
 
 interface LinkBlockProps extends PropsWithData<LinkBlockData> {
-    children: React.ReactElement;
+    children: ReactElement;
 }
 
 export function LinkBlock({ data, children }: LinkBlockProps) {

docs/docs/blocks/your-first-block.mdx

@@ -319,8 +319,7 @@ import { BlockCategory, BlocksFinalForm, createCompositeBlock, createCompositeSe
 import { createRichTextBlock } from "@comet/cms-admin";
 import { MenuItem } from "@material-ui/core";
 import { HeadlineBlockData } from "@src/blocks.generated";
-import { LinkBlock } from "@src/common/blocks/LinkBlock";
-import * as React from "react";\n
+import { LinkBlock } from "@src/common/blocks/LinkBlock";\n
 const RichTextBlock = createRichTextBlock({
     link: LinkBlock,
     rte: {
@@ -444,10 +443,9 @@ The complete code for our Headline site block (including all necessary imports)
         <CodeBlock language="tsx">
             {`import { PropsWithData, withPreview } from "@comet/cms-site";
 import { HeadlineBlockData } from "@src/blocks.generated";
-import * as React from "react";
 import { Renderers } from "redraft";\n
 import RichTextBlock from "./RichTextBlock";\n
-const headlineTags: { [key: string]: React.ElementType } = {
+const headlineTags: { [key: string]: ElementType } = {
     "header-one": "h1",
     "header-two": "h2",
     "header-three": "h3",

docs/docs/comet-core-development/creating-customizable-admin-components.md

@@ -70,7 +70,7 @@ export interface MyComponentProps
         title: typeof Typography;
     }> {
     variant?: "primary" | "secondary";
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 ```
 
@@ -183,8 +183,8 @@ Generally, this is done by defining an `iconMapping` prop as an object, for whic
 export interface MyComponentProps {
     // ...
     iconMapping?: {
-        fullscreenButton?: React.ReactNode;
-        closeDialog?: React.ReactNode;
+        fullscreenButton?: ReactNode;
+        closeDialog?: ReactNode;
     };
 }
 ```

docs/docs/migration/migration-from-v5-to-v6.md

@@ -329,8 +329,8 @@ This was removed because it was often unwanted and overridden.
 1. Add following code if you still want the old behavior:
 
     ```tsx
-    const stackApi = React.useContext(StackApiContext);
-    const editDialog = React.useContext(EditDialogApiContext);
+    const stackApi = useContext(StackApiContext);
+    const editDialog = useContext(EditDialogApiContext);
 
     // ...
 

docs/docs/migration/migration-from-v6-to-v7.md

@@ -733,7 +733,7 @@ The content scope controls were changed to display all available combinations in
     ```diff
     - import { ContentScopeControls as ContentScopeControlsLibrary } from "@comet/cms-admin";
 
-    - export const ContentScopeControls: React.FC = () => {
+    - export const ContentScopeControls = () => {
     -     return <ContentScopeControlsLibrary<ContentScope> config={controlsConfig} />;
     - };
     + import { ContentScopeControls } from "@comet/cms-admin";
@@ -764,7 +764,7 @@ Following steps are necessary to correctly use the new Toolbar:
     ```diff
     // NewsGrid.tsx
 
-    function NewsToolbar(): React.ReactElement {
+    function NewsToolbar() {
         // ...
 
         return (

docs/src/components/Story.tsx

@@ -2,7 +2,7 @@ import { createCometTheme } from "@comet/admin-theme";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import CodeBlock from "@theme/CodeBlock";
 import type { Props as PlaygroundProps } from "@theme/Playground";
-import React from "react";
+import { useEffect, useState } from "react";
 import { IntlProvider } from "react-intl";
 import { transform } from "sucrase";
 
@@ -17,9 +17,9 @@ const importStory = async (name: string) => {
 
 export const Story = ({ path, ...props }: StoryProps) => {
     const theme = createCometTheme();
-    const [code, setCode] = React.useState("");
+    const [code, setCode] = useState("");
 
-    React.useEffect(() => {
+    useEffect(() => {
         importStory(path).then(setCode);
     }, [path]);
 

docs/src/stories/FieldSet.tsx

@@ -1,7 +1,6 @@
 import { FieldSet } from "@comet/admin";
 import { Info } from "@comet/admin-icons";
 import { Chip, IconButton, Typography } from "@mui/material";
-import * as React from "react";
 
 function Story() {
     return (

docs/src/stories/Typography.tsx

@@ -1,5 +1,4 @@
 import { Box, Typography } from "@mui/material";
-import * as React from "react";
 
 function Story() {
     return (

docs/src/theme/Playground/Button.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
 
 import styles from "./button.module.css";
 
-interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     isOpen: boolean;
 }
 

docs/src/theme/Playground/index.tsx

@@ -5,13 +5,13 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import type { Props } from "@theme/Playground";
 import clsx from "clsx";
-import React from "react";
+import React, { ReactNode, useState } from "react";
 import { LiveEditor, LiveError, LivePreview, LiveProvider } from "react-live";
 
 import { Button } from "./Button";
 import styles from "./styles.module.css";
 
-function Header({ children }: { children: React.ReactNode }) {
+function Header({ children }: { children: ReactNode }) {
     return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
 }
 
@@ -51,7 +51,7 @@ function ThemedLiveEditor({ isOpen = false }) {
 }
 
 function EditorWithHeader() {
-    const [isEditorOpen, setIsEditorOpen] = React.useState(false);
+    const [isEditorOpen, setIsEditorOpen] = useState(false);
 
     return (
         <>

docs/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "extends": "@tsconfig/docusaurus/tsconfig.json",
     "compilerOptions": {
-        "baseUrl": "."
+        "baseUrl": ".",
+        "jsx": "react-jsx",
     }
 }