tech: run automated refactoring

- Clean import paths
- Replace wildcard import/export
- Avoid pass-through imports
- Avoid using global React.* values
- Fix type imports
- Replace default with named exports
- Unwrap directories
- Delete empty files
- Delete empty directories
- Join same imports

src/App.tsx

@@ -1,28 +1,29 @@
-import React, {Suspense, useContext, useEffect, useMemo, useState} from 'react';
+import {FC, Suspense, useContext, useEffect, useMemo, useState} from 'react';
 import {Navigate, Route, Routes, useLocation} from 'react-router-dom';
 import {useUpdate} from 'react-use';
 
 import {config} from '@constants/config';
 
-import {DashboardContext, MainContext} from '@contexts';
+import {DashboardContext} from '@contexts/DashboardContext';
+import {MainContext} from '@contexts/MainContext';
 
-import {EndpointModal, MessagePanel, notificationCall} from '@molecules';
+import {EndpointModal} from '@molecules/EndpointModal';
+import {MessagePanel} from '@molecules/MessagePanel';
+import {notificationCall} from '@molecules/Notification';
 
-import {
-  EndpointProcessing,
-  Executors,
-  GlobalSettings,
-  Loading,
-  NotFound,
-  Sources,
-  TestSuites,
-  Tests,
-  Triggers,
-} from '@pages';
+import {EndpointProcessing} from '@pages/EndpointProcessing';
+import {Executors} from '@pages/Executors';
+import {GlobalSettings} from '@pages/GlobalSettings';
+import {Loading} from '@pages/Loading';
+import {NotFound} from '@pages/NotFound';
+import {Sources} from '@pages/Sources';
+import {TestSuites} from '@pages/TestSuites';
+import {Tests} from '@pages/Tests';
+import {Triggers} from '@pages/Triggers';
 
-import PluginsContext from '@plugins/context';
-import createPluginManager from '@plugins/manager';
-import {Plugin} from '@plugins/types';
+import {PluginsContext} from '@plugins/context';
+import {createPluginManager} from '@plugins/manager';
+import type {Plugin} from '@plugins/types';
 
 import {useAppDispatch} from '@redux/hooks';
 import {setExecutors} from '@redux/reducers/executorsSlice';
@@ -46,7 +47,7 @@ export interface AppProps {
   plugins: Plugin[];
 }
 
-const App: React.FC<AppProps> = ({plugins}) => {
+export const App: FC<AppProps> = ({plugins}) => {
   const [TriggersProvider] = initializeTriggersStore();
 
   const dispatch = useAppDispatch();
@@ -190,5 +191,3 @@ const App: React.FC<AppProps> = ({plugins}) => {
       </Suspense>
     );
 };
-
-export default App;

src/AppRoot.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useMemo} from 'react';
+import {FC, useEffect, useMemo} from 'react';
 import {useLocation, useNavigate} from 'react-router-dom';
 import {useAsync} from 'react-use';
 
@@ -7,21 +7,23 @@ import {Content} from 'antd/lib/layout/layout';
 
 import FingerprintJS from '@fingerprintjs/fingerprintjs';
 
-import {ConfigContext, DashboardContext, MainContext} from '@contexts';
+import {ConfigContext} from '@contexts/ConfigContext';
+import {DashboardContext} from '@contexts/DashboardContext';
+import {MainContext} from '@contexts/MainContext';
 import {ModalHandler, ModalOutletProvider} from '@contexts/ModalContext';
 
-import {FeatureFlagsProvider} from '@feature-flags';
+import {FeatureFlagsProvider} from '@feature-flags/context';
 
 import {useAxiosInterceptors} from '@hooks/useAxiosInterceptors';
 import {useLastCallback} from '@hooks/useLastCallback';
 
-import {Sider} from '@organisms';
+import {Sider} from '@organisms/Sider';
 
-import {ErrorBoundary} from '@pages';
+import {ErrorBoundary} from '@pages/ErrorBoundary';
 
 import {BasePermissionsResolver, PermissionsProvider} from '@permissions/base';
 
-import {Plugin} from '@plugins/types';
+import type {Plugin} from '@plugins/types';
 
 import {useAppDispatch} from '@redux/hooks';
 
@@ -33,15 +35,15 @@ import {initializeTestsStore} from '@store/tests';
 
 import {useTelemetry, useTelemetryValue} from '@telemetry/hooks';
 
-import anonymizeQueryString from '@utils/anonymizeQueryString';
+import {anonymizeQueryString} from '@utils/anonymizeQueryString';
 import {composeProviders} from '@utils/composeProviders';
 import {externalLinks} from '@utils/externalLinks';
 import {safeRefetch} from '@utils/fetchUtils';
 
-import App from './App';
+import {App} from './App';
 import {StyledLayoutContentWrapper} from './App.styled';
 
-const AppRoot: React.FC = () => {
+export const AppRoot: FC = () => {
   useAxiosInterceptors();
 
   const dispatch = useAppDispatch();
@@ -141,5 +143,3 @@ const AppRoot: React.FC = () => {
       </>
     );
 };
-
-export default AppRoot;

src/DashboardRewrite.tsx

@@ -1,7 +1,7 @@
 import {FC, useContext, useLayoutEffect} from 'react';
 import {useParams} from 'react-router-dom';
 
-import {DashboardContext} from '@contexts';
+import {DashboardContext} from '@contexts/DashboardContext';
 
 import {useDashboardNavigate} from '@hooks/useDashboardNavigate';
 
@@ -10,7 +10,7 @@ interface DashboardRewriteProps {
   keepQuery?: boolean;
 }
 
-const DashboardRewrite: FC<DashboardRewriteProps> = ({pattern, keepQuery = false}) => {
+export const DashboardRewrite: FC<DashboardRewriteProps> = ({pattern, keepQuery = false}) => {
   const {location} = useContext(DashboardContext);
   const params = useParams();
   const pathname = pattern.replace(/:([^/]+)/g, (_, key) => `${params[key]}`);
@@ -20,5 +20,3 @@ const DashboardRewrite: FC<DashboardRewriteProps> = ({pattern, keepQuery = false
 
   return null;
 };
-
-export default DashboardRewrite;

src/components/atoms/Asterisk/Asterisk.ts → src/components/atoms/Asterisk.ts

@@ -1,14 +1,12 @@
 import styled from 'styled-components';
 
-import Colors from '@styles/Colors';
+import {Colors} from '@styles/Colors';
 
-const Asterisk = styled.span`
+export const Asterisk = styled.span`
   &::after {
     content: '*';
     margin: 0 4px;
   }
 
   color: ${Colors.rose500};
 `;
-
-export default Asterisk;

src/components/atoms/CommandInput/CommandInput.tsx → src/components/atoms/CommandInput.tsx

@@ -1,10 +1,12 @@
+import {FC} from 'react';
+
 import {Input, InputProps} from 'antd';
 
-import {Text} from '@custom-antd';
+import {Text} from '@custom-antd/Typography/Text';
 
-import Colors from '@styles/Colors';
+import {Colors} from '@styles/Colors';
 
-const CommandInput: React.FC<InputProps> = props => {
+export const CommandInput: FC<InputProps> = props => {
   return (
     <Input
       placeholder="e.g.: myscript.sh"
@@ -17,5 +19,3 @@ const CommandInput: React.FC<InputProps> = props => {
     />
   );
 };
-
-export default CommandInput;

src/components/atoms/CopyButton/CopyButton.styled.tsx → src/components/atoms/CopyButton.styled.tsx

@@ -2,7 +2,7 @@ import {CheckOutlined, CopyOutlined} from '@ant-design/icons';
 
 import styled from 'styled-components';
 
-import Colors from '@styles/Colors';
+import {Colors} from '@styles/Colors';
 
 const CopyIconBaseStyles = `
   position: absolute;

src/components/atoms/CopyButton/CopyButton.tsx → src/components/atoms/CopyButton.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import {FC} from 'react';
 
 import {Tooltip} from 'antd';
 
 import {useCopyToClipboard} from '@hooks/useCopyToClipboard';
 
 import {StyledCheckOutlined, StyledCopyOutlined} from './CopyButton.styled';
 
-const CopyButton: React.FC<{content: string | (() => string); onClick?: () => void}> = props => {
+export const CopyButton: FC<{content: string | (() => string); onClick?: () => void}> = props => {
   const {content, onClick} = props;
   const {isCopied, setCopyToClipboardState} = useCopyToClipboard(content);
 
@@ -21,5 +21,3 @@ const CopyButton: React.FC<{content: string | (() => string); onClick?: () => vo
     </Tooltip>
   );
 };
-
-export default CopyButton;

src/components/atoms/CreatableMultiSelect/CreatableMultiSelect.styled.tsx → src/components/atoms/CreatableMultiSelect.styled.tsx

@@ -2,9 +2,9 @@ import {GroupBase, StylesConfig, ThemeConfig} from 'react-select';
 
 import styled from 'styled-components';
 
-import {Option} from '@models/form';
+import type {Option} from '@models/form';
 
-import Colors from '@styles/Colors';
+import {Colors} from '@styles/Colors';
 
 export const StyledOption = styled.div`
   padding: 6px 12px;

src/components/atoms/CreatableMultiSelect/CreatableMultiSelect.tsx → src/components/atoms/CreatableMultiSelect.tsx

@@ -1,18 +1,16 @@
-import React, {KeyboardEvent, useRef} from 'react';
+import {FC, KeyboardEvent, useRef} from 'react';
 import {MultiValueGenericProps, OptionProps} from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 
-import usePressEnter from '@hooks/usePressEnter';
+import {usePressEnter} from '@hooks/usePressEnter';
 
-import {Option} from '@models/form';
+import type {Option} from '@models/form';
 
 import {customStyles, customTheme} from './CreatableMultiSelect.styled';
-import {
-  DefaultDropdownIndicator,
-  DefaultMultiValueLabel,
-  DefaultMultiValueRemove,
-  DefaultOptionComponent,
-} from './DefaultComponents';
+import {DropdownIndicator as DefaultDropdownIndicator} from './CreatableMultiSelect/DefaultComponents/DropdownIndicator';
+import {MultiValueLabel as DefaultMultiValueLabel} from './CreatableMultiSelect/DefaultComponents/MultiValueLabel';
+import {MultiValueRemove as DefaultMultiValueRemove} from './CreatableMultiSelect/DefaultComponents/MultiValueRemove';
+import {MultiValueLabel as DefaultOptionComponent} from './CreatableMultiSelect/DefaultComponents/Option';
 
 type MultiSelectProps = {
   options?: Option[];
@@ -30,7 +28,7 @@ type MultiSelectProps = {
   menuPlacement?: 'auto' | 'bottom' | 'top';
 };
 
-const CreatableMultiSelect: React.FC<MultiSelectProps> = props => {
+export const CreatableMultiSelect: FC<MultiSelectProps> = props => {
   const {
     options,
     placeholder,
@@ -92,4 +90,3 @@ const CreatableMultiSelect: React.FC<MultiSelectProps> = props => {
     />
   );
 };
-export default CreatableMultiSelect;

src/components/atoms/CreatableMultiSelect/CustomComponents/LabelsMultiValueLabel.tsx

@@ -1,12 +1,11 @@
 import {MultiValueGenericProps} from 'react-select';
 
-import {SplitLabelText} from '@atoms';
+import {StyledMultiLabel} from '@atoms/CreatableMultiSelect.styled';
+import {SplitLabelText} from '@atoms/SplitLabelText';
 
-import {Option} from '@models/form';
+import type {Option} from '@models/form';
 
-import {StyledMultiLabel} from '../CreatableMultiSelect.styled';
-
-const LabelsMultiValueLabel = (props: MultiValueGenericProps<Option>) => {
+export const LabelsMultiValueLabel = (props: MultiValueGenericProps<Option>) => {
   const {children} = props;
 
   return (
@@ -15,5 +14,3 @@ const LabelsMultiValueLabel = (props: MultiValueGenericProps<Option>) => {
     </StyledMultiLabel>
   );
 };
-
-export default LabelsMultiValueLabel;

src/components/atoms/CreatableMultiSelect/CustomComponents/LabelsOption.tsx

@@ -1,14 +1,13 @@
 import {OptionProps} from 'react-select';
 
-import {SplitLabelText} from '@atoms';
+import {StyledOption} from '@atoms/CreatableMultiSelect.styled';
+import {SplitLabelText} from '@atoms/SplitLabelText';
 
-import {Option} from '@models/form';
+import type {Option} from '@models/form';
 
 import {labelRegex} from '@molecules/LabelsSelect/utils';
 
-import {StyledOption} from '../CreatableMultiSelect.styled';
-
-const LabelsOption = (props: OptionProps<Option>) => {
+export const LabelsOption = (props: OptionProps<Option>) => {
   // @ts-ignore
   const {children, innerRef, innerProps, value} = props;
 
@@ -29,5 +28,3 @@ const LabelsOption = (props: OptionProps<Option>) => {
     <StyledOption ref={innerRef}>{children}</StyledOption>
   );
 };
-
-export default LabelsOption;

src/components/atoms/CreatableMultiSelect/DefaultComponents/DropdownIndicator.tsx

@@ -1,13 +1,11 @@
 import {DownOutlined} from '@ant-design/icons';
 
-import {DropdownWrapper} from '../CreatableMultiSelect.styled';
+import {DropdownWrapper} from '@atoms/CreatableMultiSelect.styled';
 
-const DropdownIndicator = () => {
+export const DropdownIndicator = () => {
   return (
     <DropdownWrapper>
       <DownOutlined />
     </DropdownWrapper>
   );
 };
-
-export default DropdownIndicator;

src/components/atoms/CreatableMultiSelect/DefaultComponents/MultiValueLabel.tsx

@@ -1,9 +1,7 @@
 import {MultiValueGenericProps, components} from 'react-select';
 
-import {Option} from '@models/form';
+import type {Option} from '@models/form';
 
-const MultiValueLabel = (props: MultiValueGenericProps<Option>) => {
+export const MultiValueLabel = (props: MultiValueGenericProps<Option>) => {
   return <components.MultiValueLabel {...props} />;
 };
-
-export default MultiValueLabel;

src/components/atoms/CreatableMultiSelect/DefaultComponents/MultiValueRemove.tsx

@@ -2,14 +2,12 @@ import {MultiValueRemoveProps, components} from 'react-select';
 
 import {ReactComponent as RemoveIcon} from '@assets/closeCircle.svg';
 
-import {Option} from '@models/form';
+import type {Option} from '@models/form';
 
-const MultiValueRemove = (props: MultiValueRemoveProps<Option>) => {
+export const MultiValueRemove = (props: MultiValueRemoveProps<Option>) => {
   return (
     <components.MultiValueRemove {...props}>
       <RemoveIcon />
     </components.MultiValueRemove>
   );
 };
-
-export default MultiValueRemove;

src/components/atoms/CreatableMultiSelect/DefaultComponents/Option.tsx

@@ -1,9 +1,7 @@
 import {OptionProps, components} from 'react-select';
 
-import {Option} from '@models/form';
+import type {Option} from '@models/form';
 
-const MultiValueLabel = (props: OptionProps<Option>) => {
+export const MultiValueLabel = (props: OptionProps<Option>) => {
   return <components.Option {...props} />;
 };
-
-export default MultiValueLabel;