Storybook: remove React barrel imports

storybook/.eslintrc.json

@@ -7,7 +7,8 @@
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-non-null-assertion": "off",
         "no-console": "off",
-        "@comet/no-other-module-relative-import": "off"
+        "@comet/no-other-module-relative-import": "off",
+        "react/react-in-jsx-scope": "off"
     },
     "overrides": [
         {

storybook/.storybook/preview.tsx

@@ -7,7 +7,6 @@ import { createTheme as createMuiTheme, GlobalStyles } from "@mui/material";
 import type { Preview } from "@storybook/react";
 import { Locale as DateFnsLocale } from "date-fns";
 import { de as deLocale, enUS as enLocale } from "date-fns/locale";
-import * as React from "react";
 import { IntlProvider } from "react-intl";
 
 import { worker } from "./mocks/browser";

storybook/src/admin-date-time/AllDateAndTimePickers.stories.tsx

@@ -1,6 +1,5 @@
 import { DateField, DateRange, DateRangeField, DateTimeField, TimeField, TimeRange, TimeRangeField } from "@comet/admin-date-time";
 import { Box, Card, CardContent } from "@mui/material";
-import * as React from "react";
 import { Form } from "react-final-form";
 
 export default {

storybook/src/admin-date-time/DatePicker.stories.tsx

@@ -1,7 +1,6 @@
 import { Field } from "@comet/admin";
 import { FinalFormDatePicker } from "@comet/admin-date-time";
 import { Card, CardContent } from "@mui/material";
-import * as React from "react";
 import { Form } from "react-final-form";
 
 export default {

storybook/src/admin-date-time/DateRangePicker.stories.tsx

@@ -1,7 +1,6 @@
 import { Field } from "@comet/admin";
 import { DateRange, FinalFormDateRangePicker } from "@comet/admin-date-time";
 import { Card, CardContent } from "@mui/material";
-import * as React from "react";
 import { Form } from "react-final-form";
 
 export default {

storybook/src/admin-date-time/DateTimePicker.stories.tsx

@@ -1,7 +1,6 @@
 import { Field } from "@comet/admin";
 import { FinalFormDateTimePicker } from "@comet/admin-date-time";
 import { Card, CardContent } from "@mui/material";
-import * as React from "react";
 import { Form } from "react-final-form";
 
 export default {

storybook/src/admin-date-time/TimePicker.stories.tsx

@@ -1,7 +1,6 @@
 import { Field } from "@comet/admin";
 import { FinalFormTimePicker } from "@comet/admin-date-time";
 import { Card, CardContent } from "@mui/material";
-import * as React from "react";
 import { Form } from "react-final-form";
 
 export default {

storybook/src/admin-date-time/TimeRangePicker.stories.tsx

@@ -1,7 +1,6 @@
 import { Field } from "@comet/admin";
 import { FinalFormTimeRangePicker, TimeRange } from "@comet/admin-date-time";
 import { Card, CardContent } from "@mui/material";
-import * as React from "react";
 import { Form } from "react-final-form";
 
 export default {

storybook/src/admin-icons/IconUsage.stories.tsx

@@ -1,6 +1,5 @@
 import { Cookie, Error, ThreeDotSaving } from "@comet/admin-icons";
 import { Card, CardContent, Grid, Typography } from "@mui/material";
-import * as React from "react";
 
 export default {
     title: "@comet/admin-icons",

storybook/src/admin-react-select/FinalFormReactSelect.stories.tsx

@@ -1,7 +1,6 @@
 import { Field, FinalFormInput, FormSection } from "@comet/admin";
 import { FinalFormReactSelectStaticOptions } from "@comet/admin-react-select";
 import { Card, CardContent } from "@mui/material";
-import * as React from "react";
 import { Form } from "react-final-form";
 
 const options = [

storybook/src/admin-react-select/FinalFormReactSelectDialog.stories.tsx

@@ -1,7 +1,6 @@
 import { CancelButton, Field, OkayButton } from "@comet/admin";
 import { FinalFormReactSelectStaticOptions } from "@comet/admin-react-select";
 import { Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
-import * as React from "react";
 import { Form } from "react-final-form";
 
 const options = [

storybook/src/admin-react-select/FinalFormReactSelectDisabledOption.stories.tsx

@@ -1,7 +1,6 @@
 import { Field, FormSection } from "@comet/admin";
 import { FinalFormReactSelectStaticOptions } from "@comet/admin-react-select";
 import { Card, CardContent } from "@mui/material";
-import * as React from "react";
 import { Form } from "react-final-form";
 
 const options = [

storybook/src/admin-react-select/ReactSelectDisabledOption.stories.tsx

@@ -1,7 +1,6 @@
 import { FormSection } from "@comet/admin";
 import { ReactSelect } from "@comet/admin-react-select";
 import { Card, CardContent } from "@mui/material";
-import * as React from "react";
 
 const options = [
     { value: "chocolate", label: "Chocolate" },

storybook/src/admin-rte/Field.stories.tsx

@@ -1,7 +1,7 @@
 import { Field, FinalFormInput, FormSection } from "@comet/admin";
 import { createFinalFormRte } from "@comet/admin-rte";
 import { Button, Card, CardContent, Grid } from "@mui/material";
-import * as React from "react";
+import { useReducer, useState } from "react";
 import { Form } from "react-final-form";
 
 const { RteField, RteReadOnly } = createFinalFormRte();
@@ -11,8 +11,8 @@ export default {
 };
 
 export const _Field = () => {
-    const [submittedValue, setSubmittedValue] = React.useState<{ rteContent: any }>({ rteContent: undefined });
-    const [disabled, toggleDisabled] = React.useReducer((s) => !s, false);
+    const [submittedValue, setSubmittedValue] = useState<{ rteContent: any }>({ rteContent: undefined });
+    const [disabled, toggleDisabled] = useReducer((s) => !s, false);
 
     return (
         <Grid container spacing={4} style={{ maxWidth: 800 }}>

storybook/src/admin-rte/FieldAllOptions.stories.tsx

@@ -1,7 +1,7 @@
 import { Field, FormSection } from "@comet/admin";
 import { createFinalFormRte } from "@comet/admin-rte";
 import { Button, Card, CardContent, Grid } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
 import { Form } from "react-final-form";
 
 import { ContentFormat, defaultContent, makeApiOptions, rteOptions } from "./RteAllOptions.stories";
@@ -17,7 +17,7 @@ export default {
 
 export const FieldAllOptions = {
     render: () => {
-        const [submittedValue, setSubmittedValue] = React.useState<{ rteContent: any }>({ rteContent: defaultContent });
+        const [submittedValue, setSubmittedValue] = useState<{ rteContent: any }>({ rteContent: defaultContent });
 
         return (
             <Grid container spacing={4} style={{ maxWidth: 800 }}>

storybook/src/admin-rte/MaxListLevel.stories.tsx

@@ -1,6 +1,6 @@
 import { IRteRef, makeRteApi, Rte } from "@comet/admin-rte";
 import { Box, Card, CardContent } from "@mui/material";
-import * as React from "react";
+import { useRef } from "react";
 
 import { PrintEditorState, useAutoFocus } from "./helper";
 
@@ -128,7 +128,7 @@ export const MaxListLevel = {
         });
 
         // focus the editor to see the cursor immediately
-        const editorRef = React.useRef<IRteRef>();
+        const editorRef = useRef<IRteRef>();
         useAutoFocus(editorRef);
 
         return (

storybook/src/admin-rte/Rte.stories.tsx

@@ -1,6 +1,6 @@
 import { IRteRef, makeRteApi, Rte } from "@comet/admin-rte";
 import { Box, Card, CardContent } from "@mui/material";
-import * as React from "react";
+import { useRef } from "react";
 
 import { exampleContent, PrintEditorState, useAutoFocus } from "./helper";
 
@@ -15,7 +15,7 @@ export const RteMinimalConfiguration = {
         const { editorState, setEditorState } = useRteApi({ defaultValue: JSON.stringify(exampleContent) }); // defaultValue is optional
 
         // focus the editor to see the cursor immediately
-        const editorRef = React.useRef<IRteRef>();
+        const editorRef = useRef<IRteRef>();
         useAutoFocus(editorRef);
 
         return (

storybook/src/admin-rte/RteAllOptions.stories.tsx

@@ -1,7 +1,7 @@
 import { IMakeRteApiProps, IRteApiProps, IRteOptions, IRteRef, LinkDecorator, makeRteApi, Rte } from "@comet/admin-rte";
 import { Box, Card, CardContent, Typography } from "@mui/material";
 import { convertFromRaw, convertToRaw } from "draft-js";
-import * as React from "react";
+import { ReactNode, useRef } from "react";
 
 import { exampleContent, PrintEditorState, useAutoFocus } from "./helper";
 
@@ -25,12 +25,12 @@ export const apiOptions: IRteApiProps<ContentFormat> = {
     debounceDelay: 400, // delay when onDebouncedContentChange after editor content changed
 };
 
-const RedCustomHeader: React.FC = ({ children }) => (
+const RedCustomHeader = ({ children }: { children?: ReactNode }) => (
     <Typography variant="h1" style={{ color: "red" }}>
         {children}
     </Typography>
 );
-const GreenCustomHeader: React.FC = ({ children }) => <h2 style={{ color: "green" }}>{children}</h2>;
+const GreenCustomHeader = ({ children }: { children?: ReactNode }) => <h2 style={{ color: "green" }}>{children}</h2>;
 
 export const rteOptions: IRteOptions = {
     supports: [
@@ -112,7 +112,7 @@ export const RteAllOptions = {
         const { editorState, setEditorState } = useRteApi(apiOptions);
 
         // focus the editor to see the cursor immediately
-        const editorRef = React.useRef<IRteRef>();
+        const editorRef = useRef<IRteRef>();
         useAutoFocus(editorRef);
 
         return (

storybook/src/admin-rte/RteCustom.stories.tsx

@@ -1,6 +1,6 @@
 import { IRteOptions, IRteRef, makeRteApi, Rte } from "@comet/admin-rte";
 import { Box, Card, CardContent, Typography } from "@mui/material";
-import * as React from "react";
+import { useRef } from "react";
 
 import { PrintEditorState, useAutoFocus } from "./helper";
 
@@ -20,7 +20,7 @@ export const RteCustomized = {
         const { editorState, setEditorState } = useRteApi();
 
         // focus the editor to see the cursor immediately
-        const editorRef = React.useRef<IRteRef>();
+        const editorRef = useRef<IRteRef>();
         useAutoFocus(editorRef);
 
         return (

storybook/src/admin-rte/RteCustomInlineStyles.stories.tsx

@@ -1,7 +1,7 @@
 import { Favorite } from "@comet/admin-icons";
 import { IRteOptions, IRteRef, makeRteApi, Rte } from "@comet/admin-rte";
 import { Box, Card, CardContent } from "@mui/material";
-import * as React from "react";
+import { useRef } from "react";
 
 import { PrintEditorState, useAutoFocus } from "./helper";
 
@@ -29,7 +29,7 @@ export const CustomInlineStyles = {
         const { editorState, setEditorState } = useRteApi();
 
         // focus the editor to see the cursor immediately
-        const editorRef = React.useRef<IRteRef>();
+        const editorRef = useRef<IRteRef>();
         useAutoFocus(editorRef);
 
         return (

storybook/src/admin-rte/RteDisable.stories.tsx

@@ -1,7 +1,7 @@
 import { Toolbar, ToolbarActions, ToolbarFillSpace } from "@comet/admin";
 import { IRteRef, makeRteApi, Rte } from "@comet/admin-rte";
 import { Box, Button, Card, CardContent } from "@mui/material";
-import * as React from "react";
+import { useReducer, useRef } from "react";
 
 import { exampleContent, PrintEditorState, useAutoFocus } from "./helper";
 
@@ -14,10 +14,10 @@ export default {
 export const RteDisable = {
     render: () => {
         const { editorState, setEditorState } = useRteApi({ defaultValue: JSON.stringify(exampleContent) }); // defaultValue is optional
-        const [disabled, toggleDisabled] = React.useReducer((s) => !s, false);
+        const [disabled, toggleDisabled] = useReducer((s) => !s, false);
 
         // focus the editor to see the cursor immediately
-        const editorRef = React.useRef<IRteRef>();
+        const editorRef = useRef<IRteRef>();
         useAutoFocus(editorRef);
 
         return (

storybook/src/admin-rte/RteFilterContent.stories.tsx

@@ -8,7 +8,7 @@ import {
 } from "@comet/admin-rte";
 import { Box, Card, CardContent, Typography } from "@mui/material";
 import { EditorState, EntityInstance } from "draft-js";
-import * as React from "react";
+import { useRef } from "react";
 
 import { PrintEditorState, useAutoFocus } from "./helper";
 
@@ -41,7 +41,7 @@ export const RteFilterContent = {
         const { editorState, setEditorState } = useRteApi();
 
         // focus the editor to see the cursor immediately
-        const editorRef = React.useRef<IRteRef>();
+        const editorRef = useRef<IRteRef>();
         useAutoFocus(editorRef);
 
         return (

storybook/src/admin-rte/RteMaxBlocks.stories.tsx

@@ -1,6 +1,6 @@
 import { IRteOptions, IRteRef, makeRteApi, Rte } from "@comet/admin-rte";
 import { Box, Card, CardContent } from "@mui/material";
-import * as React from "react";
+import { useRef } from "react";
 
 import { PrintEditorState, useAutoFocus } from "./helper";
 
@@ -45,7 +45,7 @@ export const RteMaxBlocksSet = {
         });
 
         // focus the editor to see the cursor immediately
-        const editorRef = React.useRef<IRteRef>();
+        const editorRef = useRef<IRteRef>();
         useAutoFocus(editorRef);
 
         return (

storybook/src/admin-rte/RteReadOnly.stories.tsx

@@ -1,12 +1,12 @@
 import { IRteReadOnlyOptions, makeRteApi, RteReadOnly } from "@comet/admin-rte";
 import { Box, Card, CardContent } from "@mui/material";
-import * as React from "react";
+import { ReactNode } from "react";
 
 import { exampleContent, PrintEditorState } from "./helper";
 
 const [useRteApi] = makeRteApi();
 
-const GreenCustomHeader: React.FC = ({ children }) => <span style={{ color: "green" }}>{children}</span>;
+const GreenCustomHeader = ({ children }: { children?: ReactNode }) => <span style={{ color: "green" }}>{children}</span>;
 
 const rteOptions: IRteReadOnlyOptions = {
     blocktypeMap: {

storybook/src/admin-rte/RteSortBlockTypes.stories.tsx

@@ -1,6 +1,5 @@
 import { IRteOptions, makeRteApi, Rte } from "@comet/admin-rte";
 import { Box, Card, CardContent } from "@mui/material";
-import * as React from "react";
 
 const rteOptions: IRteOptions = {
     blocktypeMap: {

storybook/src/admin-rte/RteTheming.stories.tsx

@@ -1,6 +1,5 @@
 import { makeRteApi, Rte } from "@comet/admin-rte";
 import { Box, Card, CardContent } from "@mui/material";
-import * as React from "react";
 
 const [useRteApi] = makeRteApi();
 

storybook/src/admin-rte/SaveAsDraftObject.stories.tsx

@@ -1,7 +1,7 @@
 import { IMakeRteApiProps, makeRteApi, OnDebouncedContentChangeFn, Rte } from "@comet/admin-rte";
 import { Box, Card, CardContent } from "@mui/material";
 import { convertFromRaw, convertToRaw, RawDraftContentState } from "draft-js";
-import * as React from "react";
+import { useState } from "react";
 
 import { PrintAnything } from "./helper";
 
@@ -48,7 +48,7 @@ export default {
 
 export const SaveAsRawDraftJsObject = {
     render: () => {
-        const [savableContent, setSavableContent] = React.useState<RawDraftContentState>(defaultValue);
+        const [savableContent, setSavableContent] = useState<RawDraftContentState>(defaultValue);
 
         const handleDebouncedContentChange: OnDebouncedContentChangeFn = (innerEditorState, convertStateToRawContent) => {
             setSavableContent(convertStateToRawContent(innerEditorState));

storybook/src/admin-rte/SaveAsHtml.stories.tsx

@@ -2,7 +2,7 @@ import { IMakeRteApiProps, makeRteApi, OnDebouncedContentChangeFn, Rte } from "@
 import { Box, Card, CardContent } from "@mui/material";
 import { ContentState, convertFromHTML } from "draft-js";
 import { stateToHTML } from "draft-js-export-html";
-import * as React from "react";
+import { useState } from "react";
 
 import { PrintAnything } from "./helper";
 
@@ -28,7 +28,7 @@ export default {
 
 export const SaveAsHtml = {
     render: () => {
-        const [savableContent, setSavableContent] = React.useState<Html>(defaultValue);
+        const [savableContent, setSavableContent] = useState<Html>(defaultValue);
 
         const handleDebouncedContentChange: OnDebouncedContentChangeFn = (innerEditorState, convertStateToRawContent) => {
             setSavableContent(convertStateToRawContent(innerEditorState));

storybook/src/admin-rte/SaveAsMD.stories.tsx

@@ -2,7 +2,7 @@ import { IMakeRteApiProps, makeRteApi, OnDebouncedContentChangeFn, Rte } from "@
 import { Box, Card, CardContent } from "@mui/material";
 import { stateToMarkdown } from "draft-js-export-markdown";
 import { stateFromMarkdown } from "draft-js-import-markdown";
-import * as React from "react";
+import { useState } from "react";
 
 import { PrintAnything } from "./helper";
 
@@ -31,7 +31,7 @@ export default {
 
 export const SaveAsMd = {
     render: () => {
-        const [savableContent, setSavableContent] = React.useState<Markdown>(defaultValue);
+        const [savableContent, setSavableContent] = useState<Markdown>(defaultValue);
 
         const handleDebouncedContentChange: OnDebouncedContentChangeFn = (innerEditorState, convertStateToRawContent) => {
             setSavableContent(convertStateToRawContent(innerEditorState));