chore: optimize imports for better tree shaking (#781)

* part1

Signed-off-by: ryjiang <[email protected]>

* part2

Signed-off-by: ryjiang <[email protected]>

* part3

Signed-off-by: ryjiang <[email protected]>

* part4

Signed-off-by: ryjiang <[email protected]>

---------

Signed-off-by: ryjiang <[email protected]>

client/src/components/DataListView/DataListView.tsx

@@ -1,10 +1,11 @@
-import { Typography, Chip } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
 import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material';
 import { formatFieldType } from '@/utils';
 import DataView from '@/components/DataView/DataView';
 import { DYNAMIC_FIELD } from '@/consts';
 import CopyButton from '@/components/advancedSearch/CopyButton';
+import type { Theme } from '@mui/material/styles';
 import type { CollectionFullObject } from '@server/types';
 
 interface DataListViewProps {

client/src/components/DataView/DataView.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import MediaPreview from '../MediaPreview/MediaPreview';
 
 const DataView = (props: { type: string; value: any }) => {

client/src/components/MediaPreview/MediaPreview.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import icons from '../icons/Icons';
 
 const MediaPreview = (props: { value: string }) => {

client/src/components/advancedSearch/Condition.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, FC, useMemo } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { Theme, IconButton, TextField, SelectChangeEvent } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import CloseIcon from '@mui/icons-material/Close';
 import CustomSelector from '../customSelector/CustomSelector';
 import { LOGICAL_OPERATORS, DataTypeStringEnum } from '@/consts';
 import { formatValue, checkValue } from './utils';
+import type { FC } from 'react';
 import type { ConditionProps } from './Types';
 import type { FieldObject } from '@server/types';
 

client/src/components/advancedSearch/ConditionGroup.tsx

@@ -1,11 +1,12 @@
-import React, { useState, FC } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Theme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import { ToggleButton, ToggleButtonGroup } from '@mui/lab';
 import ConditionItem from './Condition';
 import icons from '../icons/Icons';
 import CustomButton from '../customButton/CustomButton';
+import type { FC } from 'react';
 import type {
   ConditionGroupProps,
   BinaryLogicalOpProps,

client/src/components/advancedSearch/CopyButton.tsx

@@ -1,9 +1,10 @@
-import React, { useState, FC } from 'react';
+import React, { useState } from 'react';
 import { Theme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import icons from '../icons/Icons';
 import CustomIconButton from '../customButton/CustomIconButton';
 import { useTranslation } from 'react-i18next';
+import type { FC } from 'react';
 import type { CopyButtonProps } from './Types';
 
 const CopyIcon = icons.copyExpression;

client/src/components/advancedSearch/Dialog.tsx

@@ -1,20 +1,17 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  Theme,
-  Typography,
-  IconButton,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-} from '@mui/material';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
 import { makeStyles } from '@mui/styles';
 import CustomButton from '../customButton/CustomButton';
 import ConditionGroup from './ConditionGroup';
 import icons from '../icons/Icons';
 import CopyBtn from './CopyButton';
-// import DialogTemplate from '../customDialog/DialogTemplate';
+import type { Theme } from '@mui/material/styles';
 import type { DialogProps } from './Types';
 
 const AdvancedDialog = (props: DialogProps) => {

client/src/components/advancedSearch/Filter.tsx

@@ -1,11 +1,13 @@
 import { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
-import { Theme, Chip, Tooltip } from '@mui/material';
+import Chip from '@mui/material/Chip';
+import Tooltip from '@mui/material/Tooltip';
 import { makeStyles } from '@mui/styles';
 import { useTranslation } from 'react-i18next';
 import icons from '@/components/icons/Icons';
 import { generateIdByHash } from '@/utils/Common';
 import AdvancedDialog from './Dialog';
 import CustomButton from '../customButton/CustomButton';
+import type { Theme } from '@mui/material/styles';
 import type { FilterProps, ConditionData } from './Types';
 
 const Filter = forwardRef((props: FilterProps, ref) => {

client/src/components/cards/EmptyCard.tsx

@@ -1,7 +1,9 @@
-import { FC } from 'react';
-import { Theme, Typography, CardContent } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
 import { makeStyles } from '@mui/styles';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
+import type { FC } from 'react';
+import type { Theme } from '@mui/material/styles';
 import type { EmptyCardProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/code/CodeBlock.tsx

@@ -1,10 +1,11 @@
-import { Theme, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import CopyButton from '../advancedSearch/CopyButton';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { vs2015, github } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { FC } from 'react';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { CodeBlockProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({

client/src/components/code/CodeView.tsx

@@ -1,10 +1,11 @@
-import { Theme, Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import CustomTabList from '../customTabList/CustomTabList';
 import CodeBlock from './CodeBlock';
-import { CodeViewProps } from './Types';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
+import type { CodeViewProps } from './Types';
 import type { ITab } from '../customTabList/Types';
 
 const getStyles = makeStyles((theme: Theme) => ({

client/src/components/customButton/CustomButton.tsx

@@ -1,5 +1,8 @@
-import { Button, ButtonProps, Tooltip, Theme } from '@mui/material';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 import { makeStyles } from '@mui/styles';
+import type { ButtonProps } from '@mui/material/Button';
+import type { Theme } from '@mui/material/styles';
 
 const buttonStyle = makeStyles((theme: Theme) => ({
   button: {

client/src/components/customButton/CustomIconButton.tsx

@@ -1,5 +1,8 @@
-import { IconButtonProps, Tooltip, IconButton, Theme } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
+import IconButton from '@mui/material/IconButton';
 import { makeStyles } from '@mui/styles';
+import type { IconButtonProps } from '@mui/material/IconButton';
+import type { Theme } from '@mui/material/styles';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/components/customButton/RefreshButton.tsx

@@ -1,8 +1,9 @@
-import { useState, MouseEvent } from 'react';
+import { useState } from 'react';
 import CustomIconButton from '@/components/customButton/CustomIconButton';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
-import { IconButtonProps } from '@mui/material';
 import icons from '@/components/icons/Icons';
+import type { MouseEvent } from 'react';
+import type { IconButtonProps } from '@mui/material';
 
 const RefreshButton = (
   props: IconButtonProps & {

client/src/components/customDialog/CustomDialog.tsx

@@ -1,15 +1,13 @@
 import { FC } from 'react';
-import {
-  DialogActions,
-  DialogContent,
-  Dialog,
-  Theme,
-  Typography,
-} from '@mui/material';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import Dialog from '@mui/material/Dialog';
+import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import CustomButton from '../customButton/CustomButton';
 import CustomDialogTitle from './CustomDialogTitle';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { CustomDialogType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/customDialog/CustomDialogTitle.tsx

@@ -1,7 +1,9 @@
-import { DialogTitleProps, Typography, Theme } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import MuiDialogTitle from '@mui/material/DialogTitle';
 import icons from '../icons/Icons';
 import { makeStyles } from '@mui/styles';
+import type { DialogTitleProps } from '@mui/material/DialogTitle';
+import type { Theme } from '@mui/material/styles';
 
 const getStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/components/customDialog/DeleteDialogTemplate.tsx

@@ -1,19 +1,18 @@
-import {
-  DialogActions,
-  DialogContent,
-  TextField,
-  Theme,
-  Typography,
-  Checkbox,
-  FormControlLabel,
-} from '@mui/material';
-import { ChangeEvent, FC, useContext, useState } from 'react';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { FC, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import CustomButton from '@/components/customButton/CustomButton';
 import CustomDialogTitle from '@/components/customDialog/CustomDialogTitle';
-import { DeleteDialogContentType } from '@/components/customDialog/Types';
 import { rootContext } from '@/context';
 import { makeStyles } from '@mui/styles';
+import type { ChangeEvent } from 'react';
+import type { Theme } from '@mui/material/styles';
+import type { DeleteDialogContentType } from '@/components/customDialog/Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/components/customDialog/DialogTemplate.tsx

@@ -1,15 +1,13 @@
 import { FC, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  DialogContent,
-  DialogActions,
-  Theme,
-  CircularProgress,
-} from '@mui/material';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import CircularProgress from '@mui/material/CircularProgress';
 import CustomDialogTitle from './CustomDialogTitle';
 import CustomButton from '../customButton/CustomButton';
 import CodeView from '../code/CodeView';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { DialogContainerProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/customDrawer/CustomDrawer.tsx

@@ -1,5 +1,7 @@
 import { useContext } from 'react';
-import { Drawer, Box, Button } from '@mui/material';
+import Drawer from '@mui/material/Drawer';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import { rootContext } from '@/context';
 
 const CustomDrawer = () => {

client/src/components/customInput/CustomInput.tsx

@@ -1,19 +1,17 @@
-import {
-  FilledTextFieldProps,
-  FormControl,
-  FormHelperText,
-  Grid,
-  IconButton,
-  Input,
-  InputAdornment,
-  InputLabel,
-  StandardTextFieldProps,
-  TextField,
-  Theme,
-} from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import FormHelperText from '@mui/material/FormHelperText';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Input from '@mui/material/Input';
+import InputAdornment from '@mui/material/InputAdornment';
+import InputLabel from '@mui/material/InputLabel';
+import TextField from '@mui/material/TextField';
 import { makeStyles } from '@mui/styles';
 import Icons from '../icons/Icons';
 import { ReactElement } from 'react';
+import type { FilledTextFieldProps } from '@mui/material/TextField';
+import type { StandardTextFieldProps } from '@mui/material/TextField';
+import type { Theme } from '@mui/material/styles';
 import type {
   IAdornmentConfig,
   IIconConfig,

client/src/components/customInput/SearchInput.tsx

@@ -1,8 +1,10 @@
-import { InputAdornment, TextField, Theme } from '@mui/material';
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField from '@mui/material/TextField';
 import { makeStyles } from '@mui/styles';
 import { useRef, FC, useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import Icons from '../icons/Icons';
+import type { Theme } from '@mui/material/styles';
 import type { SearchType } from './Types';
 
 const useSearchStyles = makeStyles((theme: Theme) => ({

client/src/components/customRadio/CustomRadio.tsx

@@ -1,5 +1,6 @@
-import * as React from 'react';
-import { FormGroup, FormControlLabel, Switch } from '@mui/material';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 
 export const CustomRadio = (props: {
   label: string;

client/src/components/customSelector/CustomGroupedSelect.tsx

@@ -1,13 +1,11 @@
-import {
-  FormControl,
-  InputLabel,
-  ListSubheader,
-  MenuItem,
-  Select,
-  Theme,
-} from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import ListSubheader from '@mui/material/ListSubheader';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
 import { makeStyles } from '@mui/styles';
 import { FC } from 'react';
+import type { Theme } from '@mui/material/styles';
 import type { GroupOption, ICustomGroupSelect } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({

client/src/components/customSelector/CustomMultiSelector.tsx

@@ -1,11 +1,9 @@
 import { FC } from 'react';
-import {
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  Checkbox,
-} from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Checkbox from '@mui/material/Checkbox';
 import { withStyles } from '@mui/styles';
 import { generateId } from '../../utils/Common';
 import type { CustomMultiSelectorType } from './Types';

client/src/components/customSelector/CustomSelector.tsx

@@ -1,5 +1,8 @@
 import { FC } from 'react';
-import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
 import { generateId } from '../../utils/Common';
 import type { CustomSelectorType } from './Types';
 

client/src/components/customSnackBar/CustomSnackBar.tsx

@@ -1,8 +1,11 @@
 import { forwardRef, FC } from 'react';
 import MuiAlert from '@mui/material/Alert';
-import { Snackbar, Theme, AlertProps } from '@mui/material';
-import Slide, { SlideProps } from '@mui/material/Slide';
+import Snackbar from '@mui/material/Snackbar';
+import Slide from '@mui/material/Slide';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
+import type { AlertProps } from '@mui/material/Alert';
+import type { SlideProps } from '@mui/material/Slide';
 import type { CustomSnackBarType } from './Types';
 
 // if we need to use slide component

client/src/components/customSwitch/CustomSwitch.tsx

@@ -1,7 +1,9 @@
-import { FormControlLabel, Switch, Theme } from '@mui/material';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { CustomSwitchProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({