@@ -19,8 +19,8 @@ function RenderCount(props: { name: string }) {
}
function PrintMountCount() {
- const [, rerender] = React.useState(0);
- React.useEffect(() => {
+ const [, rerender] = useState(0);
+ useEffect(() => {
const timer = setInterval(() => {
rerender(new Date().getTime());
}, 100);
diff --git a/storybook/src/admin/tabs/RouterTabsInSubroute.stories.tsx b/storybook/src/admin/tabs/RouterTabsInSubroute.stories.tsx
index 97ca1d1a5e..2f9f2d3b8a 100644
--- a/storybook/src/admin/tabs/RouterTabsInSubroute.stories.tsx
+++ b/storybook/src/admin/tabs/RouterTabsInSubroute.stories.tsx
@@ -1,5 +1,5 @@
import { RouterTab, RouterTabs, SubRoute } from "@comet/admin";
-import * as React from "react";
+import { useEffect, useState } from "react";
import { Redirect, Route, Switch, useLocation, useRouteMatch } from "react-router";
import { storyRouterDecorator } from "../../story-router.decorator";
@@ -24,8 +24,8 @@ function Story() {
function Path() {
const location = useLocation();
- const [, rerender] = React.useState(0);
- React.useEffect(() => {
+ const [, rerender] = useState(0);
+ useEffect(() => {
const timer = setTimeout(() => {
rerender(new Date().getTime());
}, 1000);
diff --git a/storybook/src/admin/theming/ThemableAppHeader.stories.tsx b/storybook/src/admin/theming/ThemableAppHeader.stories.tsx
index 7db586e200..46d3a0d73f 100644
--- a/storybook/src/admin/theming/ThemableAppHeader.stories.tsx
+++ b/storybook/src/admin/theming/ThemableAppHeader.stories.tsx
@@ -1,6 +1,5 @@
import { AppHeader, CometLogo, MuiThemeProvider } from "@comet/admin";
import { createCometTheme } from "@comet/admin-theme";
-import * as React from "react";
export default {
title: "@comet/admin/theming",
diff --git a/storybook/src/admin/toolbar/DataGridToolbar.stories.tsx b/storybook/src/admin/toolbar/DataGridToolbar.stories.tsx
index dce17b17cc..ce997216b1 100644
--- a/storybook/src/admin/toolbar/DataGridToolbar.stories.tsx
+++ b/storybook/src/admin/toolbar/DataGridToolbar.stories.tsx
@@ -2,7 +2,6 @@ import { DataGridToolbar, GridFilterButton, StackLink, ToolbarActions, ToolbarFi
import { Add as AddIcon } from "@comet/admin-icons";
import { Button } from "@mui/material";
import { DataGrid, GridToolbarQuickFilter } from "@mui/x-data-grid";
-import * as React from "react";
import { storyRouterDecorator } from "../../story-router.decorator";
diff --git a/storybook/src/admin/toolbar/Toolbar.stories.tsx b/storybook/src/admin/toolbar/Toolbar.stories.tsx
index 50b08aac4f..abaf81835c 100644
--- a/storybook/src/admin/toolbar/Toolbar.stories.tsx
+++ b/storybook/src/admin/toolbar/Toolbar.stories.tsx
@@ -13,11 +13,11 @@ import {
import { ToolbarActionButton } from "@comet/admin/lib/common/toolbar/actions/ToolbarActionButton";
import { ArrowRight, Save } from "@comet/admin-icons";
import { Chip } from "@mui/material";
-import * as React from "react";
+import { ReactNode } from "react";
import { storyRouterDecorator } from "../../story-router.decorator";
-function StackWrapper({ children }: { children: React.ReactNode }) {
+function StackWrapper({ children }: { children: ReactNode }) {
return (
diff --git a/storybook/src/admin/tooltip/IconWithTooltip.stories.tsx b/storybook/src/admin/tooltip/IconWithTooltip.stories.tsx
index c32bd117f3..dc65eb057a 100644
--- a/storybook/src/admin/tooltip/IconWithTooltip.stories.tsx
+++ b/storybook/src/admin/tooltip/IconWithTooltip.stories.tsx
@@ -1,6 +1,5 @@
import { Tooltip } from "@comet/admin";
import { Add } from "@comet/admin-icons";
-import * as React from "react";
export default {
title: "@comet/admin",
diff --git a/storybook/src/apollo-rest-story.decorator.tsx b/storybook/src/apollo-rest-story.decorator.tsx
index e1b5434946..44ea11dddc 100644
--- a/storybook/src/apollo-rest-story.decorator.tsx
+++ b/storybook/src/apollo-rest-story.decorator.tsx
@@ -1,7 +1,6 @@
import { ApolloClient, ApolloLink, ApolloProvider, InMemoryCache } from "@apollo/client";
import { Decorator } from "@storybook/react";
import { RestLink } from "apollo-link-rest";
-import * as React from "react";
export function apolloRestStoryDecorator(options?: { uri?: string; responseTransformer?: RestLink.ResponseTransformer }): Decorator {
return (Story) => {
diff --git a/storybook/src/apollo-story.decorator.tsx b/storybook/src/apollo-story.decorator.tsx
index fd45ea064a..a3edeca818 100644
--- a/storybook/src/apollo-story.decorator.tsx
+++ b/storybook/src/apollo-story.decorator.tsx
@@ -1,7 +1,6 @@
import { ApolloClient, ApolloLink, ApolloProvider, createHttpLink, InMemoryCache } from "@apollo/client";
import { createErrorDialogApolloLink } from "@comet/admin";
import { Decorator } from "@storybook/react";
-import * as React from "react";
const createApolloClient = (uri: string) => {
const link = ApolloLink.from([
diff --git a/storybook/src/cms-admin/ContentScopeProvider/OptionalDimensions.stories.tsx b/storybook/src/cms-admin/ContentScopeProvider/OptionalDimensions.stories.tsx
index af993d39da..5cc484e47c 100644
--- a/storybook/src/cms-admin/ContentScopeProvider/OptionalDimensions.stories.tsx
+++ b/storybook/src/cms-admin/ContentScopeProvider/OptionalDimensions.stories.tsx
@@ -1,7 +1,6 @@
import { AppHeader, AppHeaderFillSpace, AppHeaderMenuButton, CometLogo, MainContent } from "@comet/admin";
import { ContentScopeControls, ContentScopeIndicator, ContentScopeProvider, ContentScopeValues, useContentScope } from "@comet/cms-admin";
import { Typography } from "@mui/material";
-import React from "react";
import { storyRouterDecorator } from "../../story-router.decorator";
diff --git a/storybook/src/cms-admin/ContentScopeSelect.stories.tsx b/storybook/src/cms-admin/ContentScopeSelect.stories.tsx
index 72c61fd2e3..82ba543124 100644
--- a/storybook/src/cms-admin/ContentScopeSelect.stories.tsx
+++ b/storybook/src/cms-admin/ContentScopeSelect.stories.tsx
@@ -3,7 +3,7 @@ import { Domain, Language } from "@comet/admin-icons";
import { ContentScopeSelect, findTextMatches, MarkedMatches } from "@comet/cms-admin";
import { ListItemIcon, ListItemText } from "@mui/material";
import { Meta } from "@storybook/react";
-import React, { useState } from "react";
+import { useState } from "react";
export default {
title: "@comet/cms-admin/Content Scope Select",
diff --git a/storybook/src/dnd.decorator.tsx b/storybook/src/dnd.decorator.tsx
index d4456f4fe4..ef0c924c65 100644
--- a/storybook/src/dnd.decorator.tsx
+++ b/storybook/src/dnd.decorator.tsx
@@ -1,5 +1,4 @@
import { Decorator } from "@storybook/react";
-import * as React from "react";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
diff --git a/storybook/src/docs/bestPractices/GridAndFormLayouts.stories.tsx b/storybook/src/docs/bestPractices/GridAndFormLayouts.stories.tsx
index af8f93c4c8..771f012310 100644
--- a/storybook/src/docs/bestPractices/GridAndFormLayouts.stories.tsx
+++ b/storybook/src/docs/bestPractices/GridAndFormLayouts.stories.tsx
@@ -30,7 +30,7 @@ import {
import { Add, Edit, Html, Select as SelectIcon } from "@comet/admin-icons";
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography } from "@mui/material";
import { DataGrid, GridRowSelectionModel, GridToolbarQuickFilter } from "@mui/x-data-grid";
-import React, { ReactNode, useEffect, useRef, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
import { masterLayoutDecorator, stackRouteDecorator } from "../../helpers/storyDecorators";
import { storyRouterDecorator } from "../../story-router.decorator";
diff --git a/storybook/src/docs/bestPractices/Overview.mdx b/storybook/src/docs/bestPractices/Overview.mdx
index 67dfc3abc6..d3dbe29b0d 100644
--- a/storybook/src/docs/bestPractices/Overview.mdx
+++ b/storybook/src/docs/bestPractices/Overview.mdx
@@ -10,7 +10,7 @@ tba.
tba.
-- `function Dashboard(): React.ReactElement {`
+- `function Dashboard() {`
- file & component structuing:
- module (ddd)
- naming: products/ProductsForm.tsx
diff --git a/storybook/src/docs/components/AppHeader/AppHeader.stories.tsx b/storybook/src/docs/components/AppHeader/AppHeader.stories.tsx
index 75c63e3ceb..93036712d1 100644
--- a/storybook/src/docs/components/AppHeader/AppHeader.stories.tsx
+++ b/storybook/src/docs/components/AppHeader/AppHeader.stories.tsx
@@ -1,7 +1,7 @@
import { AppHeader, AppHeaderButton, AppHeaderDropdown, AppHeaderFillSpace, AppHeaderMenuButton, CometLogo } from "@comet/admin";
import { Account, Language, Logout, Preview, Snips, SwitchUser, Wrench } from "@comet/admin-icons";
import { Avatar, Box, Button, Divider, MenuItem, MenuList, Typography } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
export default {
title: "Docs/Components/AppHeader",
@@ -177,7 +177,7 @@ export const CustomButton = {
export const Dropdown = {
render: () => {
- const [open, setOpen] = React.useState(false);
+ const [open, setOpen] = useState(false);
return (
<>
diff --git a/storybook/src/docs/components/ClearInputAdornment/ClearInputAdornment.stories.tsx b/storybook/src/docs/components/ClearInputAdornment/ClearInputAdornment.stories.tsx
index 593ab9005c..b7f08d8dc8 100644
--- a/storybook/src/docs/components/ClearInputAdornment/ClearInputAdornment.stories.tsx
+++ b/storybook/src/docs/components/ClearInputAdornment/ClearInputAdornment.stories.tsx
@@ -2,7 +2,7 @@ import { ClearInputAdornment, Field, FieldContainer, FinalFormInput, FinalFormSe
import { FinalFormDatePicker } from "@comet/admin-date-time";
import { Cut } from "@comet/admin-icons";
import { Grid, InputBase, MenuItem } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
import { Form } from "react-final-form";
export default {
@@ -11,7 +11,7 @@ export default {
export const Basic = {
render: () => {
- const [inputText, setInputText] = React.useState("Lorem ipsum");
+ const [inputText, setInputText] = useState("Lorem ipsum");
return (
diff --git a/storybook/src/docs/components/ClearInputButton/ClearInputButton.stories.tsx b/storybook/src/docs/components/ClearInputButton/ClearInputButton.stories.tsx
index cf39eb063d..b41e9ae4f6 100644
--- a/storybook/src/docs/components/ClearInputButton/ClearInputButton.stories.tsx
+++ b/storybook/src/docs/components/ClearInputButton/ClearInputButton.stories.tsx
@@ -1,7 +1,7 @@
import { ClearInputButton } from "@comet/admin";
import { Cut } from "@comet/admin-icons";
import { Box, InputAdornment, InputBase, Typography } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
export default {
title: "Docs/Components/ClearInputButton",
@@ -28,7 +28,7 @@ export const Default = {
export const ClearableInputField = {
render: () => {
- const [inputText, setInputText] = React.useState("");
+ const [inputText, setInputText] = useState("");
return (
diff --git a/storybook/src/docs/components/ColorPicker/ColorPicker.stories.tsx b/storybook/src/docs/components/ColorPicker/ColorPicker.stories.tsx
index 23beb6946b..581cfa4950 100644
--- a/storybook/src/docs/components/ColorPicker/ColorPicker.stories.tsx
+++ b/storybook/src/docs/components/ColorPicker/ColorPicker.stories.tsx
@@ -2,7 +2,7 @@ import { Field, FieldContainer } from "@comet/admin";
import { ColorPicker, ColorPickerColorPreviewProps, FinalFormColorPicker } from "@comet/admin-color-picker";
import { StateFilled, StateRing, Warning } from "@comet/admin-icons";
import { Grid } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
import { Form } from "react-final-form";
export default {
@@ -11,11 +11,11 @@ export default {
export const Basic = {
render: () => {
- const [colorOne, setColorOne] = React.useState("#00ff00");
- const [colorTwo, setColorTwo] = React.useState("rgba(255, 127, 80, 0.75)");
- const [colorThree, setColorThree] = React.useState();
- const [colorFour, setColorFour] = React.useState();
- const [colorFive, setColorFive] = React.useState();
+ const [colorOne, setColorOne] = useState("#00ff00");
+ const [colorTwo, setColorTwo] = useState("rgba(255, 127, 80, 0.75)");
+ const [colorThree, setColorThree] = useState();
+ const [colorFour, setColorFour] = useState();
+ const [colorFive, setColorFive] = useState();
return (
@@ -128,18 +128,18 @@ export const FinalForm = {
export const Customized = {
render: () => {
- const [colorOne, setColorOne] = React.useState("#00ff00");
- const [colorTwo, setColorTwo] = React.useState();
+ const [colorOne, setColorOne] = useState("#00ff00");
+ const [colorTwo, setColorTwo] = useState();
- const CustomColorPreview = ({ color }: ColorPickerColorPreviewProps): React.ReactElement => {
+ const CustomColorPreview = ({ color }: ColorPickerColorPreviewProps) => {
return ;
};
- const CustomColorEmptyPreview = (): React.ReactElement => {
+ const CustomColorEmptyPreview = () => {
return ;
};
- const CustomColorInvalidPreview = (): React.ReactElement => {
+ const CustomColorInvalidPreview = () => {
return ;
};
diff --git a/storybook/src/docs/components/ContentOverflow/ContentOverflow.stories.tsx b/storybook/src/docs/components/ContentOverflow/ContentOverflow.stories.tsx
index 5e7c513a3d..278c248f2f 100644
--- a/storybook/src/docs/components/ContentOverflow/ContentOverflow.stories.tsx
+++ b/storybook/src/docs/components/ContentOverflow/ContentOverflow.stories.tsx
@@ -2,7 +2,6 @@ import { ContentOverflow, GridColDef } from "@comet/admin";
import { Box, Link, Paper, Typography, TypographyProps } from "@mui/material";
import {} from "@mui/system";
import { DataGrid } from "@mui/x-data-grid";
-import * as React from "react";
export default {
title: "Docs/Components/ContentOverflow",
diff --git a/storybook/src/docs/components/CopyToClipboardButton/CopyToClipboardButton.stories.tsx b/storybook/src/docs/components/CopyToClipboardButton/CopyToClipboardButton.stories.tsx
index 8a8e5347cd..a3d3f6fe90 100644
--- a/storybook/src/docs/components/CopyToClipboardButton/CopyToClipboardButton.stories.tsx
+++ b/storybook/src/docs/components/CopyToClipboardButton/CopyToClipboardButton.stories.tsx
@@ -1,6 +1,5 @@
import { CopyToClipboardButton } from "@comet/admin";
import { Card, CardContent, Grid, Typography, useTheme } from "@mui/material";
-import * as React from "react";
export default {
title: "Docs/Components/CopyToClipboardButton",
diff --git a/storybook/src/docs/components/DataGrid/DataGrid.mdx b/storybook/src/docs/components/DataGrid/DataGrid.mdx
index 682631cf1c..155b45b6ba 100644
--- a/storybook/src/docs/components/DataGrid/DataGrid.mdx
+++ b/storybook/src/docs/components/DataGrid/DataGrid.mdx
@@ -121,8 +121,8 @@ This component is a button with a context menu, that can also display of the num
The `ActionItem` type has the following properties:
-- `label: React.ReactNode`: The label of the action.
-- `icon?: React.ReactNode`: The icon of the action displayed at the start of an action.
+- `label: ReactNode`: The label of the action.
+- `icon?: ReactNode`: The icon of the action displayed at the start of an action.
- `divider?: boolean`: If true, a divider will be displayed below the action.
diff --git a/storybook/src/docs/components/DataGrid/DataGrid.stories.tsx b/storybook/src/docs/components/DataGrid/DataGrid.stories.tsx
index 2389d78808..a2d8991dc2 100644
--- a/storybook/src/docs/components/DataGrid/DataGrid.stories.tsx
+++ b/storybook/src/docs/components/DataGrid/DataGrid.stories.tsx
@@ -24,8 +24,7 @@ import { Button, Divider, Menu, MenuItem, useTheme } from "@mui/material";
import Box from "@mui/material/Box";
import { DataGrid, GridRowSelectionModel } from "@mui/x-data-grid";
import { DataGridPro } from "@mui/x-data-grid-pro";
-import * as React from "react";
-import { useState } from "react";
+import { useRef, useState } from "react";
import { apolloStoryDecorator } from "../../../apollo-story.decorator";
import { exampleColumns, exampleRows } from "../../../helpers/ExampleDataGrid";
@@ -404,8 +403,8 @@ export const UseDataGridExcelExport = {
},
];
- const [showMoreMenu, setShowMoreMenu] = React.useState(false);
- const moreMenuRef = React.useRef(null);
+ const [showMoreMenu, setShowMoreMenu] = useState(false);
+ const moreMenuRef = useRef(null);
const query = gql`
query LaunchesPast($limit: Int, $offset: Int, $sort: String, $order: String) {
diff --git a/storybook/src/docs/components/EditDialog/EditDialog.stories.tsx b/storybook/src/docs/components/EditDialog/EditDialog.stories.tsx
index 33d258dd7e..e48036051b 100644
--- a/storybook/src/docs/components/EditDialog/EditDialog.stories.tsx
+++ b/storybook/src/docs/components/EditDialog/EditDialog.stories.tsx
@@ -15,7 +15,7 @@ import {
useEditDialogApi,
} from "@comet/admin";
import { Button, MenuItem, Typography } from "@mui/material";
-import * as React from "react";
+import { useRef, useState, VoidFunctionComponent } from "react";
import { useLocation } from "react-router";
import { v4 as uuid } from "uuid";
@@ -54,7 +54,7 @@ export const Hook = {
export const Component = {
render: () => {
- const editDialogApi = React.useRef(null);
+ const editDialogApi = useRef(null);
return (
<>
@@ -84,7 +84,7 @@ export const Component = {
export const UseEditDialogApi = {
render: () => {
- const ChildComponentWithOpenButton: React.VoidFunctionComponent = () => {
+ const ChildComponentWithOpenButton: VoidFunctionComponent = () => {
const editDialogApi = useEditDialogApi();
return (
@@ -168,7 +168,7 @@ export const WithTable = {
name: string;
}
- const [users, setUsers] = React.useState([
+ const [users, setUsers] = useState([
{ id: "8a31ea9d-d00a-4e37-807b-a69624964ba0", name: "Isabella" },
{ id: "a5baf49a-d53c-4b3f-abd4-80d2b418589d", name: "Theo" },
{ id: "29734826-06b4-491b-ada7-cf1000d95790", name: "Maria" },
@@ -204,7 +204,7 @@ export const WithTable = {
selectionApi: ISelectionApi;
}
- const UserForm: React.VoidFunctionComponent = ({ selectionApi, id, mode = "add" }) => {
+ const UserForm: VoidFunctionComponent = ({ selectionApi, id, mode = "add" }) => {
const selection = { id, mode };
const user = selection.mode === "edit" ? users.find((user) => user.id === id) : undefined;
@@ -357,7 +357,7 @@ export const SelectionWithComponent = {
];
const location = useLocation();
- const editDialogApi = React.useRef(null);
+ const editDialogApi = useRef(null);
return (
<>
diff --git a/storybook/src/docs/components/EditDialog/editDialog.decorator.tsx b/storybook/src/docs/components/EditDialog/editDialog.decorator.tsx
index 2343f3b69f..17c460eab9 100644
--- a/storybook/src/docs/components/EditDialog/editDialog.decorator.tsx
+++ b/storybook/src/docs/components/EditDialog/editDialog.decorator.tsx
@@ -1,7 +1,6 @@
import { MockedProvider } from "@apollo/client/testing";
import { RouterMemoryRouter } from "@comet/admin";
import { Decorator } from "@storybook/react";
-import * as React from "react";
export function editDialogDecorator(): Decorator {
return (Story) => {
diff --git a/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.mdx b/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.mdx
index e55a19725a..8e5256db46 100644
--- a/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.mdx
+++ b/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.mdx
@@ -13,7 +13,7 @@ Setup is easy, just add the `ErrorDialogHandler` somewhere in your application
```
import { ErrorDialogHandler } from "@comet/admin";
-const App: React.FunctionComponent = ({ children }) => {
+const App: FunctionComponent = ({ children }) => {
return (
diff --git a/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.stories.tsx b/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.stories.tsx
index 71b51ba764..82c2a95300 100644
--- a/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.stories.tsx
+++ b/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.stories.tsx
@@ -1,7 +1,7 @@
import { gql, useQuery } from "@apollo/client";
import { useErrorDialog } from "@comet/admin";
import { Button, Typography } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
import { apolloSwapiStoryDecorator } from "../../../../apollo-story.decorator";
import { errorDialogStoryProviderDecorator } from "./error-dialog-provider.decorator";
@@ -40,7 +40,7 @@ export const ManualErrorDialog = {
export const AutomaticErrorOnGraphqlError = {
render: () => {
const Story = () => {
- const [brokenQuery, setBrokenQuery] = React.useState(false);
+ const [brokenQuery, setBrokenQuery] = useState(false);
const query = brokenQuery ? "{ allFilms { films { somenotavailablefield } } }" : "{ allFilms { films { title } } }";
const { data, error } = useQuery(gql`
${query}
diff --git a/storybook/src/docs/components/ErrorHandling/ErrorDialog/error-dialog-provider.decorator.tsx b/storybook/src/docs/components/ErrorHandling/ErrorDialog/error-dialog-provider.decorator.tsx
index 8eec2ae72f..e81ed17aa0 100644
--- a/storybook/src/docs/components/ErrorHandling/ErrorDialog/error-dialog-provider.decorator.tsx
+++ b/storybook/src/docs/components/ErrorHandling/ErrorDialog/error-dialog-provider.decorator.tsx
@@ -1,6 +1,5 @@
import { ErrorDialogHandler } from "@comet/admin";
import { Decorator } from "@storybook/react";
-import * as React from "react";
export function errorDialogStoryProviderDecorator(): Decorator {
return (Story) => {
diff --git a/storybook/src/docs/components/FileDropzone/FileDropzone.stories.tsx b/storybook/src/docs/components/FileDropzone/FileDropzone.stories.tsx
index f2634e7d81..edc8d5dac4 100644
--- a/storybook/src/docs/components/FileDropzone/FileDropzone.stories.tsx
+++ b/storybook/src/docs/components/FileDropzone/FileDropzone.stories.tsx
@@ -1,7 +1,6 @@
import { FileDropzone } from "@comet/admin";
import { Card, CardContent, Stack } from "@mui/material";
import { Meta } from "@storybook/react";
-import * as React from "react";
export default {
title: "Docs/Components/FileDropzone",
diff --git a/storybook/src/docs/components/FileSelect/FileSelect.stories.tsx b/storybook/src/docs/components/FileSelect/FileSelect.stories.tsx
index 5d9eb5bbf9..776386890d 100644
--- a/storybook/src/docs/components/FileSelect/FileSelect.stories.tsx
+++ b/storybook/src/docs/components/FileSelect/FileSelect.stories.tsx
@@ -1,7 +1,6 @@
import { FileSelect, FileSelectItem } from "@comet/admin";
import { Card, CardContent } from "@mui/material";
import { Meta } from "@storybook/react";
-import * as React from "react";
export default {
title: "Docs/Components/FileSelect",
diff --git a/storybook/src/docs/components/FileSelectListItem/FileSelectListItem.stories.tsx b/storybook/src/docs/components/FileSelectListItem/FileSelectListItem.stories.tsx
index 882afc6fdf..76d71dcf30 100644
--- a/storybook/src/docs/components/FileSelectListItem/FileSelectListItem.stories.tsx
+++ b/storybook/src/docs/components/FileSelectListItem/FileSelectListItem.stories.tsx
@@ -1,7 +1,6 @@
import { FileSelectListItem } from "@comet/admin";
import { Box, Card, CardContent } from "@mui/material";
import { Meta } from "@storybook/react";
-import * as React from "react";
export default {
title: "Docs/Components/FileSelectListItem",
diff --git a/storybook/src/docs/components/FinalFormRangeInput/FinalFormRangeInput.stories.tsx b/storybook/src/docs/components/FinalFormRangeInput/FinalFormRangeInput.stories.tsx
index 320b6f09b0..68debaf369 100644
--- a/storybook/src/docs/components/FinalFormRangeInput/FinalFormRangeInput.stories.tsx
+++ b/storybook/src/docs/components/FinalFormRangeInput/FinalFormRangeInput.stories.tsx
@@ -1,7 +1,6 @@
import { Field, FinalFormRangeInput } from "@comet/admin";
import { Button } from "@mui/material";
import { styled } from "@mui/material/styles";
-import * as React from "react";
import { Form } from "react-final-form";
export default {
diff --git a/storybook/src/docs/components/GridCellContent/GridCellContent.stories.tsx b/storybook/src/docs/components/GridCellContent/GridCellContent.stories.tsx
index f262c2b786..d16d917382 100644
--- a/storybook/src/docs/components/GridCellContent/GridCellContent.stories.tsx
+++ b/storybook/src/docs/components/GridCellContent/GridCellContent.stories.tsx
@@ -2,7 +2,6 @@ import { GridCellContent, GridColDef } from "@comet/admin";
import { StateFilled } from "@comet/admin-icons";
import { faker } from "@faker-js/faker";
import { DataGrid } from "@mui/x-data-grid";
-import * as React from "react";
export default {
title: "Docs/Components/GridCellContent",
diff --git a/storybook/src/docs/components/HoverActions/HoverActions.stories.tsx b/storybook/src/docs/components/HoverActions/HoverActions.stories.tsx
index 085b8986ab..34e02ff181 100644
--- a/storybook/src/docs/components/HoverActions/HoverActions.stories.tsx
+++ b/storybook/src/docs/components/HoverActions/HoverActions.stories.tsx
@@ -1,7 +1,6 @@
import { CopyToClipboardButton, HoverActions, Table } from "@comet/admin";
import { Download, Maximize } from "@comet/admin-icons";
import { IconButton } from "@mui/material";
-import * as React from "react";
export default {
title: "Docs/Components/HoverActions",
diff --git a/storybook/src/docs/components/Master/Master.stories.tsx b/storybook/src/docs/components/Master/Master.stories.tsx
index 01edcb34dc..efb96bdcf0 100644
--- a/storybook/src/docs/components/Master/Master.stories.tsx
+++ b/storybook/src/docs/components/Master/Master.stories.tsx
@@ -13,7 +13,7 @@ import {
} from "@comet/admin";
import { Dashboard, Wrench } from "@comet/admin-icons";
import { AppBar, Box, Card, CardContent, Drawer, Toolbar as MuiToolbar, Typography } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
export default {
title: "Docs/Components/Master",
@@ -39,7 +39,7 @@ export const Master = {
}
function MasterHeader() {
- const [showDrawer, setShowDrawer] = React.useState(false);
+ const [showDrawer, setShowDrawer] = useState(false);
return (
<>
diff --git a/storybook/src/docs/components/PrettyBytes/PrettyBytes.stories.tsx b/storybook/src/docs/components/PrettyBytes/PrettyBytes.stories.tsx
index bee76171e2..1559a2084a 100644
--- a/storybook/src/docs/components/PrettyBytes/PrettyBytes.stories.tsx
+++ b/storybook/src/docs/components/PrettyBytes/PrettyBytes.stories.tsx
@@ -1,5 +1,4 @@
import { PrettyBytes } from "@comet/admin";
-import * as React from "react";
export default {
title: "Docs/Components/PrettyBytes",
diff --git a/storybook/src/docs/components/RowActions/RowActions.stories.tsx b/storybook/src/docs/components/RowActions/RowActions.stories.tsx
index d2e38c064c..c69f5e8080 100644
--- a/storybook/src/docs/components/RowActions/RowActions.stories.tsx
+++ b/storybook/src/docs/components/RowActions/RowActions.stories.tsx
@@ -2,7 +2,6 @@ import { RowActionsItem, RowActionsMenu } from "@comet/admin";
import { Copy, Delete, Edit, Online, Paste, Settings } from "@comet/admin-icons";
import { Divider, Paper } from "@mui/material";
import { Meta } from "@storybook/react";
-import * as React from "react";
export default {
title: "Docs/Components/RowActions",
diff --git a/storybook/src/docs/components/Rte/Rte.stories.tsx b/storybook/src/docs/components/Rte/Rte.stories.tsx
index c45461c24a..db02cc2ac6 100644
--- a/storybook/src/docs/components/Rte/Rte.stories.tsx
+++ b/storybook/src/docs/components/Rte/Rte.stories.tsx
@@ -3,7 +3,6 @@ import { ContentState, convertFromHTML } from "draft-js";
import { stateToHTML } from "draft-js-export-html";
import { stateToMarkdown } from "draft-js-export-markdown";
import { stateFromMarkdown } from "draft-js-import-markdown";
-import * as React from "react";
export default {
title: "Docs/Components/Rich Text Editor",
@@ -19,7 +18,7 @@ export const Minimal = {
},
};
-const PrettyJson: React.FC<{ children: string }> = ({ children }) => {JSON.stringify(JSON.parse(children), null, 2)}
;
+const PrettyJson = ({ children }: { children: string }) => {JSON.stringify(JSON.parse(children), null, 2)}
;
export const SourceDataDefault = {
render: () => {
diff --git a/storybook/src/docs/components/SaveButton/SaveButton.stories.tsx b/storybook/src/docs/components/SaveButton/SaveButton.stories.tsx
index f176090c3c..d6fcf1ac5f 100644
--- a/storybook/src/docs/components/SaveButton/SaveButton.stories.tsx
+++ b/storybook/src/docs/components/SaveButton/SaveButton.stories.tsx
@@ -1,5 +1,5 @@
import { SaveButton } from "@comet/admin";
-import * as React from "react";
+import { useState } from "react";
import { FormattedMessage } from "react-intl";
export default {
@@ -8,7 +8,7 @@ export default {
export const Basic = {
render: () => {
- const [saving, setSaving] = React.useState(false);
+ const [saving, setSaving] = useState(false);
return (
{
- const [chosenOption, setChosenOption] = React.useState("one");
+ const [chosenOption, setChosenOption] = useState("one");
const snackbarApi = useSnackbarApi();
const handleUndo = (prevOption?: string) => {
setChosenOption(prevOption);
};
- const handleChange = (event: React.MouseEvent, newOption: any) => {
+ const handleChange = (event: MouseEvent, newOption: any) => {
const prevOption = chosenOption;
setChosenOption(newOption);
snackbarApi.showSnackbar(
diff --git a/storybook/src/docs/components/Snackbar/snackbar.decorator.tsx b/storybook/src/docs/components/Snackbar/snackbar.decorator.tsx
index 87654ed7f2..66ecde2f04 100644
--- a/storybook/src/docs/components/Snackbar/snackbar.decorator.tsx
+++ b/storybook/src/docs/components/Snackbar/snackbar.decorator.tsx
@@ -1,6 +1,5 @@
import { SnackbarProvider } from "@comet/admin";
import { Decorator } from "@storybook/react";
-import * as React from "react";
export function snackbarDecorator(): Decorator {
return (Story) => {
diff --git a/storybook/src/docs/components/SplitButton/SplitButton.stories.tsx b/storybook/src/docs/components/SplitButton/SplitButton.stories.tsx
index 2a83e6c464..68684cf025 100644
--- a/storybook/src/docs/components/SplitButton/SplitButton.stories.tsx
+++ b/storybook/src/docs/components/SplitButton/SplitButton.stories.tsx
@@ -1,7 +1,7 @@
import { SplitButton } from "@comet/admin";
import { Home } from "@comet/admin-icons";
import { Button, Typography } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
export default {
title: "Docs/Components/SplitButton",
@@ -32,7 +32,7 @@ export const Uncontrolled = {
export const Controlled = {
render: () => {
- const [selectedIndex, setSelectedIndex] = React.useState(1);
+ const [selectedIndex, setSelectedIndex] = useState(1);
return (
{
{ id: 2, firstname: "Lewis", lastname: "Chan" },
];
- const [idVisible, setIdVisible] = React.useState(false);
+ const [idVisible, setIdVisible] = useState(false);
return (
<>
diff --git a/storybook/src/docs/components/Table/02_TableQuery.stories.tsx b/storybook/src/docs/components/Table/02_TableQuery.stories.tsx
index a7a8ac6ba0..7fc6b6e4f2 100644
--- a/storybook/src/docs/components/Table/02_TableQuery.stories.tsx
+++ b/storybook/src/docs/components/Table/02_TableQuery.stories.tsx
@@ -1,6 +1,5 @@
import { gql } from "@apollo/client";
import { SortDirection, Table, TableQuery, useTableQuery } from "@comet/admin";
-import * as React from "react";
import { apolloRestStoryDecorator } from "../../../apollo-rest-story.decorator";
diff --git a/storybook/src/docs/components/Table/03_Sorting.stories.tsx b/storybook/src/docs/components/Table/03_Sorting.stories.tsx
index 93a1d9b377..c16b02c3d0 100644
--- a/storybook/src/docs/components/Table/03_Sorting.stories.tsx
+++ b/storybook/src/docs/components/Table/03_Sorting.stories.tsx
@@ -1,6 +1,5 @@
import { gql } from "@apollo/client";
import { SortDirection, Table, TableQuery, useTableQuery, useTableQuerySort } from "@comet/admin";
-import * as React from "react";
import { apolloRestStoryDecorator } from "../../../apollo-rest-story.decorator";
diff --git a/storybook/src/docs/components/Table/04_Pagination.stories.tsx b/storybook/src/docs/components/Table/04_Pagination.stories.tsx
index 6cc72f3c8b..45898b634b 100644
--- a/storybook/src/docs/components/Table/04_Pagination.stories.tsx
+++ b/storybook/src/docs/components/Table/04_Pagination.stories.tsx
@@ -1,6 +1,5 @@
import { gql } from "@apollo/client";
import { createOffsetLimitPagingAction, Table, TableQuery, useTableQuery, useTableQueryPaging } from "@comet/admin";
-import React from "react";
import { apolloRestStoryDecorator } from "../../../apollo-rest-story.decorator";
diff --git a/storybook/src/docs/components/Table/05_FilterBar.stories.tsx b/storybook/src/docs/components/Table/05_FilterBar.stories.tsx
index 31ed1ccfd5..a993395541 100644
--- a/storybook/src/docs/components/Table/05_FilterBar.stories.tsx
+++ b/storybook/src/docs/components/Table/05_FilterBar.stories.tsx
@@ -21,13 +21,12 @@ import {
import { FinalFormReactSelectStaticOptions } from "@comet/admin-react-select";
import { Link, Typography } from "@mui/material";
import faker from "faker";
-import * as React from "react";
interface ColorFilterFieldProps {
colors: string[];
}
-const ColorFilterField: React.FC = ({ colors }) => {
+const ColorFilterField = ({ colors }: ColorFilterFieldProps) => {
const options = colors
.filter((color, index, colorsArray) => colorsArray.indexOf(color) == index) //filter colorsArray to only have unique values as select options
.map((color) => {
diff --git a/storybook/src/docs/components/Table/06_ExcelExport.stories.tsx b/storybook/src/docs/components/Table/06_ExcelExport.stories.tsx
index 27a6b79209..52af2a7d15 100644
--- a/storybook/src/docs/components/Table/06_ExcelExport.stories.tsx
+++ b/storybook/src/docs/components/Table/06_ExcelExport.stories.tsx
@@ -17,7 +17,6 @@ import {
VisibleType,
} from "@comet/admin";
import { Typography } from "@mui/material";
-import * as React from "react";
import { apolloRestStoryDecorator } from "../../../apollo-rest-story.decorator";
diff --git a/storybook/src/docs/components/Table/07_TableDndOrder.stories.tsx b/storybook/src/docs/components/Table/07_TableDndOrder.stories.tsx
index cf69c9b173..230baaac23 100644
--- a/storybook/src/docs/components/Table/07_TableDndOrder.stories.tsx
+++ b/storybook/src/docs/components/Table/07_TableDndOrder.stories.tsx
@@ -1,6 +1,5 @@
import { TableDndOrder, TableLocalChanges } from "@comet/admin";
import { Button } from "@mui/material";
-import * as React from "react";
import { dndProviderDecorator } from "../../../dnd.decorator";
diff --git a/storybook/src/docs/components/Table/08_SelectionTable.stories.tsx b/storybook/src/docs/components/Table/08_SelectionTable.stories.tsx
index 809a04c8c6..a3051343d7 100644
--- a/storybook/src/docs/components/Table/08_SelectionTable.stories.tsx
+++ b/storybook/src/docs/components/Table/08_SelectionTable.stories.tsx
@@ -1,7 +1,6 @@
import { gql } from "@apollo/client";
import { Field, FinalForm, FinalFormInput, Selected, Table, TableQuery, useSelectionRoute, useTableQuery } from "@comet/admin";
import { Grid } from "@mui/material";
-import * as React from "react";
import { apolloRestStoryDecorator } from "../../../apollo-rest-story.decorator";
import { storyRouterDecorator } from "../../../story-router.decorator";
diff --git a/storybook/src/docs/components/Tabs/01_Tabs.mdx b/storybook/src/docs/components/Tabs/01_Tabs.mdx
index 8f2ed11ca9..2ea9d23127 100644
--- a/storybook/src/docs/components/Tabs/01_Tabs.mdx
+++ b/storybook/src/docs/components/Tabs/01_Tabs.mdx
@@ -87,8 +87,8 @@ The tab content has to be defined separately.
language="tsx"
code={dedent`
// based on https://v4.mui.com/components/tabs/#SimpleTabs.tsx
- const [value, setValue] = React.useState(0);
- const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+ const [value, setValue] = useState(0);
+ const handleChange = (event: ChangeEvent<{}>, newValue: number) => {
setValue(newValue);
};
return (
diff --git a/storybook/src/docs/components/Tabs/01_Tabs.stories.tsx b/storybook/src/docs/components/Tabs/01_Tabs.stories.tsx
index 941714d707..1f4d969f7a 100644
--- a/storybook/src/docs/components/Tabs/01_Tabs.stories.tsx
+++ b/storybook/src/docs/components/Tabs/01_Tabs.stories.tsx
@@ -11,7 +11,6 @@ import {
ToolbarFillSpace,
} from "@comet/admin";
import { Card, CardContent } from "@mui/material";
-import * as React from "react";
import { storyRouterDecorator } from "../../../story-router.decorator";
diff --git a/storybook/src/docs/components/Tabs/02_RouterTabs.stories.tsx b/storybook/src/docs/components/Tabs/02_RouterTabs.stories.tsx
index 01cf28e376..5ed255c41a 100644
--- a/storybook/src/docs/components/Tabs/02_RouterTabs.stories.tsx
+++ b/storybook/src/docs/components/Tabs/02_RouterTabs.stories.tsx
@@ -1,5 +1,4 @@
import { RouterTab, RouterTabs, Stack, StackBreadcrumbs, StackPage, StackSwitch } from "@comet/admin";
-import * as React from "react";
import { useLocation } from "react-router";
import { storyRouterDecorator } from "../../../story-router.decorator";
diff --git a/storybook/src/docs/components/Tabs/stories/NestedStackSwitchWithRouterTabs.stories.tsx b/storybook/src/docs/components/Tabs/stories/NestedStackSwitchWithRouterTabs.stories.tsx
index c366aa35c2..7cedab1383 100644
--- a/storybook/src/docs/components/Tabs/stories/NestedStackSwitchWithRouterTabs.stories.tsx
+++ b/storybook/src/docs/components/Tabs/stories/NestedStackSwitchWithRouterTabs.stories.tsx
@@ -1,5 +1,4 @@
import { RouterTab, RouterTabs, Stack, StackBreadcrumbs, StackPage, StackSwitch } from "@comet/admin";
-import * as React from "react";
import { useLocation } from "react-router";
import { storyRouterDecorator } from "../../../../story-router.decorator";
diff --git a/storybook/src/docs/components/Toolbar/Toolbar.stories.tsx b/storybook/src/docs/components/Toolbar/Toolbar.stories.tsx
index c8f2f98b42..48a3f9560e 100644
--- a/storybook/src/docs/components/Toolbar/Toolbar.stories.tsx
+++ b/storybook/src/docs/components/Toolbar/Toolbar.stories.tsx
@@ -23,7 +23,7 @@ import {
} from "@comet/admin";
import { ChevronLeft, CometColor, Search } from "@comet/admin-icons";
import { Autocomplete, Button, Grid, IconButton, InputAdornment, InputBase, Typography } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
import { Form } from "react-final-form";
import { FormattedMessage } from "react-intl";
@@ -550,7 +550,7 @@ export const SearchAutocomplete = () => {
};
export const Save = () => {
- const [saving, setSaving] = React.useState(false);
+ const [saving, setSaving] = useState(false);
return (
Save Button
@@ -635,7 +635,7 @@ export const _FinalFormSaveButton = () => {
};
export const SaveSplitButton = () => {
- const [saving, setSaving] = React.useState(false);
+ const [saving, setSaving] = useState(false);
return (
Save Split Button
diff --git a/storybook/src/docs/components/Toolbar/toolbar.decorator.tsx b/storybook/src/docs/components/Toolbar/toolbar.decorator.tsx
index 73efc5c8b6..0e9eb4ef5c 100644
--- a/storybook/src/docs/components/Toolbar/toolbar.decorator.tsx
+++ b/storybook/src/docs/components/Toolbar/toolbar.decorator.tsx
@@ -1,6 +1,5 @@
import { Stack, StackPage, StackPageTitle, StackSwitch } from "@comet/admin";
import { Decorator } from "@storybook/react";
-import * as React from "react";
export function toolbarDecorator(): Decorator {
return (Story) => {
diff --git a/storybook/src/docs/components/Tooltip/Tooltip.stories.tsx b/storybook/src/docs/components/Tooltip/Tooltip.stories.tsx
index 6ac4faae45..a24edaa4a6 100644
--- a/storybook/src/docs/components/Tooltip/Tooltip.stories.tsx
+++ b/storybook/src/docs/components/Tooltip/Tooltip.stories.tsx
@@ -1,7 +1,6 @@
import { Tooltip } from "@comet/admin";
import { Info } from "@comet/admin-icons";
import { Grid, IconButton } from "@mui/material";
-import * as React from "react";
export default {
title: "Docs/Components/Tooltip",
diff --git a/storybook/src/docs/form/Layout.stories.tsx b/storybook/src/docs/form/Layout.stories.tsx
index bed9372406..e9d3409d3d 100644
--- a/storybook/src/docs/form/Layout.stories.tsx
+++ b/storybook/src/docs/form/Layout.stories.tsx
@@ -24,7 +24,7 @@ import {
Typography,
} from "@mui/material";
import { styled, StyledEngineProvider } from "@mui/material/styles";
-import * as React from "react";
+import { useState } from "react";
import { Form } from "react-final-form";
const fooBarOptions = [
@@ -129,7 +129,7 @@ export const FieldsInSidebar = {
export const FieldsInDialog = {
render: () => {
- const [showDialog, setShowDialog] = React.useState(false);
+ const [showDialog, setShowDialog] = useState(false);
return (
<>
diff --git a/storybook/src/docs/form/Validation.stories.tsx b/storybook/src/docs/form/Validation.stories.tsx
index b220596f18..91d427042e 100644
--- a/storybook/src/docs/form/Validation.stories.tsx
+++ b/storybook/src/docs/form/Validation.stories.tsx
@@ -1,6 +1,5 @@
import { Field, FinalForm, FinalFormInput } from "@comet/admin";
import { FORM_ERROR } from "final-form";
-import * as React from "react";
export default {
title: "Docs/Form/Validation",
diff --git a/storybook/src/docs/form/components/DateAndTimePickers/01_DatePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/01_DatePicker.stories.tsx
index 2c09a6ece1..163600a35c 100644
--- a/storybook/src/docs/form/components/DateAndTimePickers/01_DatePicker.stories.tsx
+++ b/storybook/src/docs/form/components/DateAndTimePickers/01_DatePicker.stories.tsx
@@ -1,7 +1,7 @@
import { Field, FieldContainer } from "@comet/admin";
import { DatePicker, FinalFormDatePicker } from "@comet/admin-date-time";
import { Grid } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
import { Form } from "react-final-form";
export default {
@@ -9,10 +9,10 @@ export default {
};
export const Basic = () => {
- const [dateOne, setDateOne] = React.useState();
- const [dateTwo, setDateTwo] = React.useState();
- const [dateThree, setDateThree] = React.useState("2024-03-10");
- const [dateFour, setDateFour] = React.useState("2024-03-10");
+ const [dateOne, setDateOne] = useState();
+ const [dateTwo, setDateTwo] = useState();
+ const [dateThree, setDateThree] = useState("2024-03-10");
+ const [dateFour, setDateFour] = useState("2024-03-10");
return (
diff --git a/storybook/src/docs/form/components/DateAndTimePickers/02_TimePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/02_TimePicker.stories.tsx
index d1339f7f1d..02cf9d4e90 100644
--- a/storybook/src/docs/form/components/DateAndTimePickers/02_TimePicker.stories.tsx
+++ b/storybook/src/docs/form/components/DateAndTimePickers/02_TimePicker.stories.tsx
@@ -1,7 +1,7 @@
import { Field, FieldContainer } from "@comet/admin";
import { FinalFormTimePicker, TimePicker } from "@comet/admin-date-time";
import { Grid } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
import { Form } from "react-final-form";
export default {
@@ -9,10 +9,10 @@ export default {
};
export const Basic = () => {
- const [timeOne, setTimeOne] = React.useState();
- const [timeTwo, setTimeTwo] = React.useState();
- const [timeThree, setTimeThree] = React.useState();
- const [timeFour, setTimeFour] = React.useState("14:30");
+ const [timeOne, setTimeOne] = useState();
+ const [timeTwo, setTimeTwo] = useState();
+ const [timeThree, setTimeThree] = useState();
+ const [timeFour, setTimeFour] = useState("14:30");
return (
diff --git a/storybook/src/docs/form/components/DateAndTimePickers/03_DateTimePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/03_DateTimePicker.stories.tsx
index b2edcfdb34..29b67a118b 100644
--- a/storybook/src/docs/form/components/DateAndTimePickers/03_DateTimePicker.stories.tsx
+++ b/storybook/src/docs/form/components/DateAndTimePickers/03_DateTimePicker.stories.tsx
@@ -1,7 +1,7 @@
import { Field, FieldContainer } from "@comet/admin";
import { DateTimePicker, FinalFormDateTimePicker } from "@comet/admin-date-time";
import { Grid } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
import { Form } from "react-final-form";
export default {
@@ -9,10 +9,10 @@ export default {
};
export const Basic = () => {
- const [dateTimeOne, setDateTimeOne] = React.useState();
- const [dateTimeTwo, setDateTimeTwo] = React.useState(new Date());
- const [dateTimeThree, setDateTimeThree] = React.useState();
- const [dateTimeFour, setDateFour] = React.useState(new Date());
+ const [dateTimeOne, setDateTimeOne] = useState();
+ const [dateTimeTwo, setDateTimeTwo] = useState(new Date());
+ const [dateTimeThree, setDateTimeThree] = useState();
+ const [dateTimeFour, setDateFour] = useState(new Date());
return (
diff --git a/storybook/src/docs/form/components/DateAndTimePickers/04_DateRangePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/04_DateRangePicker.stories.tsx
index 8f24a1e5b2..e2ad95f163 100644
--- a/storybook/src/docs/form/components/DateAndTimePickers/04_DateRangePicker.stories.tsx
+++ b/storybook/src/docs/form/components/DateAndTimePickers/04_DateRangePicker.stories.tsx
@@ -1,7 +1,7 @@
import { Field, FieldContainer } from "@comet/admin";
import { DateRange, DateRangePicker, FinalFormDateRangePicker } from "@comet/admin-date-time";
import { Grid } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
import { Form } from "react-final-form";
export default {
@@ -9,9 +9,9 @@ export default {
};
export const Basic = () => {
- const [dateOne, setDateOne] = React.useState();
- const [dateTwo, setDateTwo] = React.useState({ start: "2024-03-10", end: "2024-03-16" });
- const [dateThree, setDateThree] = React.useState({ start: "2024-03-10", end: "2024-03-16" });
+ const [dateOne, setDateOne] = useState();
+ const [dateTwo, setDateTwo] = useState({ start: "2024-03-10", end: "2024-03-16" });
+ const [dateThree, setDateThree] = useState({ start: "2024-03-10", end: "2024-03-16" });
return (
diff --git a/storybook/src/docs/form/components/DateAndTimePickers/05_TimeRangePicker.stories.tsx b/storybook/src/docs/form/components/DateAndTimePickers/05_TimeRangePicker.stories.tsx
index 916a2c71c5..90293ea05c 100644
--- a/storybook/src/docs/form/components/DateAndTimePickers/05_TimeRangePicker.stories.tsx
+++ b/storybook/src/docs/form/components/DateAndTimePickers/05_TimeRangePicker.stories.tsx
@@ -1,7 +1,7 @@
import { Field, FieldContainer } from "@comet/admin";
import { FinalFormTimeRangePicker, TimeRange, TimeRangePicker } from "@comet/admin-date-time";
import { Grid } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
import { Form } from "react-final-form";
export default {
@@ -9,8 +9,8 @@ export default {
};
export const Basic = () => {
- const [timeRangeOne, setTimeRangeOne] = React.useState();
- const [timeRangeTwo, setTimeRangeTwo] = React.useState({ start: "14:00", end: "16:00" });
+ const [timeRangeOne, setTimeRangeOne] = useState();
+ const [timeRangeTwo, setTimeRangeTwo] = useState({ start: "14:00", end: "16:00" });
return (
diff --git a/storybook/src/docs/form/components/Field.stories.tsx b/storybook/src/docs/form/components/Field.stories.tsx
index 892bdeb7ee..f046b6f30b 100644
--- a/storybook/src/docs/form/components/Field.stories.tsx
+++ b/storybook/src/docs/form/components/Field.stories.tsx
@@ -1,5 +1,4 @@
import { Field, FinalForm, FinalFormInput } from "@comet/admin";
-import * as React from "react";
export default {
title: "Docs/Form/Components/Field",
diff --git a/storybook/src/docs/form/components/FieldContainer.stories.tsx b/storybook/src/docs/form/components/FieldContainer.stories.tsx
index e16ef33fbf..1e071e90c8 100644
--- a/storybook/src/docs/form/components/FieldContainer.stories.tsx
+++ b/storybook/src/docs/form/components/FieldContainer.stories.tsx
@@ -1,6 +1,7 @@
import { FieldContainer } from "@comet/admin";
+import { Info } from "@comet/admin-icons";
import { InputBase } from "@mui/material";
-import * as React from "react";
+import { ChangeEvent, useState } from "react";
export default {
title: "Docs/Form/Components/FieldContainer",
@@ -8,9 +9,9 @@ export default {
export const Basic = {
render: () => {
- const [value, setValue] = React.useState("");
+ const [value, setValue] = useState("");
- function handleChange(e: React.ChangeEvent) {
+ function handleChange(e: ChangeEvent) {
setValue(e.target.value);
}
@@ -35,6 +36,16 @@ export const Basic = {
+
+
+
+
+
+
+
+ } helperText="Helper Text with icon">
+
+
);
},
diff --git a/storybook/src/docs/form/components/FinalForm.stories.tsx b/storybook/src/docs/form/components/FinalForm.stories.tsx
index 04e7ac2906..eba003c4a8 100644
--- a/storybook/src/docs/form/components/FinalForm.stories.tsx
+++ b/storybook/src/docs/form/components/FinalForm.stories.tsx
@@ -2,7 +2,7 @@ import { gql, useApolloClient } from "@apollo/client";
import { MockedProvider, MockedResponse } from "@apollo/client/testing";
import { Field, FinalForm, FinalFormInput, FormSection, SaveButton } from "@comet/admin";
import { useFormApiRef } from "@comet/admin/lib/FinalForm";
-import * as React from "react";
+import { VoidFunctionComponent } from "react";
export default {
title: "Docs/Form/Components/FinalForm",
@@ -99,7 +99,7 @@ export const SubmitMutationBestPractices = () => {
interface InnerFormProps {
id: number;
}
- const InnerForm: React.VoidFunctionComponent = ({ id }) => {
+ const InnerForm: VoidFunctionComponent = ({ id }) => {
const client = useApolloClient();
return (
diff --git a/storybook/src/docs/form/components/FinalFormFields.stories.tsx b/storybook/src/docs/form/components/FinalFormFields.stories.tsx
index c70ea4c812..bed9b2f7dc 100644
--- a/storybook/src/docs/form/components/FinalFormFields.stories.tsx
+++ b/storybook/src/docs/form/components/FinalFormFields.stories.tsx
@@ -14,7 +14,7 @@ import {
FinalFormSwitch,
} from "@comet/admin";
import { Button, FormControlLabel } from "@mui/material";
-import * as React from "react";
+import { useMemo } from "react";
interface Option {
value: string;
@@ -76,7 +76,7 @@ export const _FinalFormAutocomplete = {
{ value: "vanilla", label: "Vanilla" },
];
- const initialValues = React.useMemo(
+ const initialValues = useMemo(
// Why useMemo()?
// FinalForm reinitializes the form every time initalValues changes. A shallow equality check is used.
// Therefore, without useMemo() FinalForm would reinitialize on every render.
@@ -149,7 +149,7 @@ export const _FinalFormSelect = {
{ value: "vanilla", label: "Vanilla" },
];
- const initialValues = React.useMemo(
+ const initialValues = useMemo(
// Why useMemo()?
// see "FinalFormAutocomplete" story
() => ({
diff --git a/storybook/src/docs/form/components/FormSection.stories.tsx b/storybook/src/docs/form/components/FormSection.stories.tsx
index f499d7a9df..9ec434cf31 100644
--- a/storybook/src/docs/form/components/FormSection.stories.tsx
+++ b/storybook/src/docs/form/components/FormSection.stories.tsx
@@ -1,5 +1,4 @@
import { Field, FinalForm, FinalFormInput, FormSection } from "@comet/admin";
-import * as React from "react";
export default {
title: "Docs/Form/Components/FormSection",
diff --git a/storybook/src/docs/form/components/NumberField.stories.tsx b/storybook/src/docs/form/components/NumberField.stories.tsx
index 4a8eac5fad..dc6af5d0ed 100644
--- a/storybook/src/docs/form/components/NumberField.stories.tsx
+++ b/storybook/src/docs/form/components/NumberField.stories.tsx
@@ -1,5 +1,4 @@
import { FinalForm, NumberField } from "@comet/admin";
-import * as React from "react";
export default {
title: "Docs/Form/Components/NumberField",
diff --git a/storybook/src/docs/helper/clipboard.stories.tsx b/storybook/src/docs/helper/clipboard.stories.tsx
index 76d01ee193..ab51ca9ae4 100644
--- a/storybook/src/docs/helper/clipboard.stories.tsx
+++ b/storybook/src/docs/helper/clipboard.stories.tsx
@@ -1,6 +1,5 @@
import { readClipboardText, writeClipboardText } from "@comet/admin";
import { Button } from "@mui/material";
-import * as React from "react";
export default {
title: "Docs/Helper/Clipboard",
diff --git a/storybook/src/docs/hooks/useAsyncOptionsProps/useAsyncOptionsProps.stories.tsx b/storybook/src/docs/hooks/useAsyncOptionsProps/useAsyncOptionsProps.stories.tsx
index a3cb508c66..78597ea90d 100644
--- a/storybook/src/docs/hooks/useAsyncOptionsProps/useAsyncOptionsProps.stories.tsx
+++ b/storybook/src/docs/hooks/useAsyncOptionsProps/useAsyncOptionsProps.stories.tsx
@@ -1,5 +1,5 @@
import { Field, FinalFormAutocomplete, FinalFormSelect, useAsyncOptionsProps } from "@comet/admin";
-import * as React from "react";
+import { useMemo } from "react";
import { Form } from "react-final-form";
export default {
@@ -11,7 +11,7 @@ export const Select = () => {
value: string;
label: string;
}
- const initialValues = React.useMemo(() => {
+ const initialValues = useMemo(() => {
return { selectAsync: { value: "strawberry", label: "Strawberry" } };
}, []);
diff --git a/storybook/src/docs/hooks/useFocusAwarePolling/useFocusAwarePolling.stories.tsx b/storybook/src/docs/hooks/useFocusAwarePolling/useFocusAwarePolling.stories.tsx
index b7fd9ff569..8e94abcb1a 100644
--- a/storybook/src/docs/hooks/useFocusAwarePolling/useFocusAwarePolling.stories.tsx
+++ b/storybook/src/docs/hooks/useFocusAwarePolling/useFocusAwarePolling.stories.tsx
@@ -2,7 +2,7 @@ import { gql, useQuery } from "@apollo/client";
import { useFocusAwarePolling } from "@comet/admin";
import { Pause, Play } from "@comet/admin-icons";
import { Button, Typography } from "@mui/material";
-import * as React from "react";
+import { useState } from "react";
import { apolloStoryDecorator } from "../../../apollo-story.decorator";
@@ -59,7 +59,7 @@ export const BasicExample = {
export const WithSkipOption = {
render: () => {
- const [paused, setPaused] = React.useState(false);
+ const [paused, setPaused] = useState(false);
const { data, loading, error, refetch, startPolling, stopPolling } = useQuery(
gql`
diff --git a/storybook/src/docs/hooks/useStoredState/useStoredState.mdx b/storybook/src/docs/hooks/useStoredState/useStoredState.mdx
index ccfba3c668..b2c3958405 100644
--- a/storybook/src/docs/hooks/useStoredState/useStoredState.mdx
+++ b/storybook/src/docs/hooks/useStoredState/useStoredState.mdx
@@ -6,7 +6,7 @@ import * as UseStoredStateStories from "./useStoredState.stories";
# useStoredState()
-The `useStoredState()` hook has a similar api like the `React.useState()` hook. The main difference is, that `useStoredState()` saves and loads the state by default to local storage, so the state is persistent over tabs, and browser restarts.
+The `useStoredState()` hook has a similar api like the `useState()` hook. The main difference is, that `useStoredState()` saves and loads the state by default to local storage, so the state is persistent over tabs, and browser restarts.
### Local Storage
diff --git a/storybook/src/docs/hooks/useStoredState/useStoredState.stories.tsx b/storybook/src/docs/hooks/useStoredState/useStoredState.stories.tsx
index 5152547c08..5facdfb102 100644
--- a/storybook/src/docs/hooks/useStoredState/useStoredState.stories.tsx
+++ b/storybook/src/docs/hooks/useStoredState/useStoredState.stories.tsx
@@ -1,6 +1,5 @@
import { FormSection, useStoredState } from "@comet/admin";
import { Button, InputBase } from "@mui/material";
-import * as React from "react";
export default {
title: "Docs/Hooks/useStoredState",
diff --git a/storybook/src/docs/icons/AllIcons.stories.tsx b/storybook/src/docs/icons/AllIcons.stories.tsx
index e621566e90..03244f57a3 100644
--- a/storybook/src/docs/icons/AllIcons.stories.tsx
+++ b/storybook/src/docs/icons/AllIcons.stories.tsx
@@ -2,7 +2,7 @@ import { ClearInputAdornment } from "@comet/admin";
import * as icons from "@comet/admin-icons";
import { Grid, InputAdornment, InputBase, SvgIconProps, Typography } from "@mui/material";
import { styled } from "@mui/material/styles";
-import * as React from "react";
+import { ComponentType, useState } from "react";
import { useDebounce } from "use-debounce";
const matchesSearchQuery = (str: string, query: string): boolean => {
@@ -40,12 +40,12 @@ const IconWrapper = styled("div")`
const SearchIcon = icons.Search;
-const IconsGrid = ({ searchQuery }: { searchQuery: string }): React.ReactElement => {
+const IconsGrid = ({ searchQuery }: { searchQuery: string }) => {
return (
{Object.keys(icons).map((key) => {
if (key !== "__esModule" && key != null && matchesSearchQuery(key, searchQuery)) {
- const Icon = (icons as Record