refactor: remove import react (#50)

* refactor: remove import react

affects: @medly/create-app, @medly/create-component

* refactor: add space after import

affects: @medly/create-app

packages/app/template/common/src/App.tsx

@@ -2,11 +2,10 @@ import { ErrorBoundary, Header, PageLayout, SideNav } from '@components';
 import { CssBaseline, ToastContainer } from '@medly-components/core';
 import Routes from '@routes';
 import { defaultTheme } from '@theme';
-import React from 'react';
+import type { FC } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
-
-const App: React.FC = () => (
+const App: FC = () => (
     <ThemeProvider theme={defaultTheme}>
         <>
             <CssBaseline />

packages/app/template/common/src/components/layout/ErrorBoundary/ErrorBoundary.test.tsx

@@ -1,5 +1,4 @@
 import { renderWithRouter } from '@test-utils';
-import React from 'react';
 import PageContent from '../PageContent';
 import ErrorBoundary from './ErrorBoundary';
 

packages/app/template/common/src/components/layout/ErrorBoundary/ErrorBoundary.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import { PureComponent } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-class ErrorBoundary extends React.PureComponent<RouteComponentProps> {
+class ErrorBoundary extends PureComponent<RouteComponentProps> {
     public componentDidCatch() {
         this.props.history.push('/');
     }

packages/app/template/common/src/components/layout/Header/Header.test.tsx

@@ -1,5 +1,4 @@
 import { render } from '@test-utils';
-import React from 'react';
 import { Header } from './Header';
 
 describe('Header', () => {

packages/app/template/common/src/components/layout/Header/Header.tsx

@@ -1,9 +1,9 @@
 import { Avatar, Text } from '@medly-components/core';
 import { WithStyle } from '@medly-components/utils';
-import React from 'react';
+import type { FC } from 'react';
 import * as Styled from './Header.styled';
 
-export const Header: React.FC & WithStyle = () => {
+const Component: FC = () => {
     return (
         <Styled.Header>
             <Styled.LeftSide>
@@ -18,5 +18,5 @@ export const Header: React.FC & WithStyle = () => {
     );
 };
 
-Header.displayName = 'Header';
-Header.Style = Styled.Header;
+Component.displayName = 'Header';
+export const Header: FC & WithStyle = Object.assign(Component, { Style: Styled.Header });

packages/app/template/common/src/components/layout/PageContent/PageContent.test.tsx

@@ -1,5 +1,4 @@
 import { render } from '@test-utils';
-import React from 'react';
 import { PageContent } from './PageContent';
 
 describe('PageContent component', () => {

packages/app/template/common/src/components/layout/PageContent/PageContent.tsx

@@ -1,10 +1,10 @@
 import { CircleLoader } from '@medly-components/loaders';
 import { WithStyle } from '@medly-components/utils';
-import React from 'react';
+import type { FC } from 'react';
 import * as Styled from './PageContent.styled';
 import { Props } from './types';
 
-export const PageContent: React.FC<Props> & WithStyle = props => {
+const Component: FC<Props> = props => {
     return (
         <Styled.PageContent {...props}>
             {props.isLoading && (
@@ -17,5 +17,7 @@ export const PageContent: React.FC<Props> & WithStyle = props => {
     );
 };
 
-PageContent.displayName = 'PageContent';
-PageContent.Style = Styled.PageContent;
+Component.displayName = 'PageContent';
+export const PageContent: FC<Props> & WithStyle = Object.assign(Component, {
+    Style: Styled.PageContent
+});

packages/app/template/common/src/components/layout/PageLayout/PageLayout.test.tsx

@@ -1,5 +1,4 @@
 import { render } from '@test-utils';
-import React from 'react';
 import Header from '../Header';
 import PageContent from '../PageContent';
 import { PageLayout } from './PageLayout';

packages/app/template/common/src/components/layout/PageLayout/PageLayout.tsx

@@ -1,7 +1,7 @@
-import React, { HTMLProps } from 'react';
+import { FC, HTMLProps, memo } from 'react';
 import { PageLayoutStyled } from './PageLayout.styled';
 
-export const PageLayout: React.FC<HTMLProps<HTMLDivElement>> = React.memo(({ children }) => {
+export const PageLayout: FC<HTMLProps<HTMLDivElement>> = memo(({ children }) => {
     return <PageLayoutStyled>{children}</PageLayoutStyled>;
 });
 

packages/app/template/common/src/components/layout/SideNav/SideNav.test.tsx

@@ -1,6 +1,5 @@
 import { renderWithRouter } from '@test-utils';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { SideNav } from './SideNav';
 
 const mockHistoryPush = jest.fn();

packages/app/template/common/src/components/layout/SideNav/SideNav.tsx

@@ -1,10 +1,11 @@
 import { Text } from '@medly-components/core';
 import { DashboardIcon } from '@medly-components/icons';
 import { MedlySidenavHeader, SideNav as MedlySideNav } from '@medly-components/layout';
-import React, { useCallback } from 'react';
+import type { FC } from 'react';
+import { memo, useCallback } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
-const Component: React.FC = React.memo(() => {
+const Component: FC = memo(() => {
     const { pathname } = useLocation(),
         history = useHistory(),
         handlePathChange = useCallback((page: string) => history.push(page), [history]);

packages/app/template/common/src/index.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import * as ReactDOM from 'react-dom';
+import { render } from 'react-dom';
 import 'regenerator-runtime/runtime';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+render(<App />, document.getElementById('root'));

packages/app/template/common/src/pages/Dashboard/Dashboard.test.tsx

@@ -1,5 +1,4 @@
 import { render } from '@test-utils';
-import React from 'react';
 import Dashboard from './';
 
 describe('Dashboard', () => {

packages/app/template/common/src/pages/Dashboard/Dashboard.tsx

@@ -1,9 +1,9 @@
 import { PageContent } from '@components/layout';
 import { Text } from '@medly-components/core';
-import React from 'react';
+import type { FC } from 'react';
 import { DashboardProps } from './types';
 
-export const Dashboard: React.FC<DashboardProps> = ({ isLoading }) => (
+export const Dashboard: FC<DashboardProps> = ({ isLoading }) => (
     <PageContent isLoading={isLoading}>
         <Text textWeight="Strong" textVariant="body1">
             Dashboard Content

packages/app/template/common/src/routes/Routes.test.tsx

@@ -1,5 +1,4 @@
 import { renderWithRouter } from '@test-utils';
-import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { Routes } from './Routes';
 

packages/app/template/common/src/routes/Routes.tsx

@@ -1,9 +1,9 @@
-import React, { lazy, Suspense } from 'react';
+import { FC, lazy, Suspense } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 const Dashboard = lazy(() => import(/* webpackChunkName: "Dashboard" */ /* webpackPrefetch: true */ '@pages/Dashboard'));
 
-export const Routes: React.FC = () => (
+export const Routes: FC = () => (
     <Suspense fallback={<span>Loading ...</span>}>
         <Switch>
             <Route exact path="/" component={Dashboard} />

packages/app/template/common/src/utils/test-utils.tsx

@@ -3,13 +3,12 @@ import { render, RenderOptions, RenderResult } from '@testing-library/react';
 import { defaultTheme } from '@theme';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import React from 'react';
+import type { FC } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
-
 export const mockAxios = new MockAdapter(axios);
 
-const WithThemeProvider: React.FunctionComponent = props => (
+const WithThemeProvider: FC = props => (
     <ThemeProvider theme={defaultTheme}>
         <>
             <ToastContainer position="top-end" />

packages/app/template/common/template.json

@@ -44,7 +44,7 @@
         "axios@latest",
         "react@latest",
         "react-dom@latest",
-        "react-router-dom@latest",
+        "react-router-dom@5.3.0",
         "styled-components@latest"
     ],
     "devDependencies": [

packages/app/template/stateManagers/context/src/App.tsx

@@ -3,11 +3,10 @@ import { CssBaseline, ToastContainer } from '@medly-components/core';
 import Routes from '@routes';
 import { defaultTheme } from '@theme';
 import { UserProvider } from 'context';
-import React from 'react';
+import type { FC } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
-
-const App: React.FC = () => (
+const App: FC = () => (
     <ThemeProvider theme={defaultTheme}>
         <>
             <CssBaseline />

packages/app/template/stateManagers/context/src/components/layout/Header/Header.test.tsx

@@ -1,5 +1,4 @@
 import { mockAxios, renderWithUserProvider, screen } from '@test-utils';
-import React from 'react';
 import { Header } from './Header';
 
 const mockResponse = {

packages/app/template/stateManagers/context/src/components/layout/Header/Header.tsx

@@ -1,10 +1,11 @@
 import { useUser } from '@context';
 import { Avatar, Text } from '@medly-components/core';
 import { WithStyle } from '@medly-components/utils';
-import React, { useMemo } from 'react';
+import type { FC } from 'react';
+import { useMemo } from 'react';
 import * as Styled from './Header.styled';
 
-export const Header: React.FC & WithStyle = () => {
+const Component: FC = () => {
     const {
         state: { firstName, lastName }
     } = useUser();
@@ -24,6 +25,5 @@ export const Header: React.FC & WithStyle = () => {
         </Styled.Header>
     );
 };
-
-Header.displayName = 'Header';
-Header.Style = Styled.Header;
+Component.displayName = 'Header';
+export const Header: FC & WithStyle = Object.assign(Component, { Style: Styled.Header });

packages/app/template/stateManagers/context/src/components/layout/PageLayout/PageLayout.test.tsx

@@ -1,5 +1,4 @@
 import { mockAxios, renderWithUserProvider } from '@test-utils';
-import React from 'react';
 import Header from '../Header';
 import PageContent from '../PageContent';
 import { PageLayout } from './PageLayout';

packages/app/template/stateManagers/context/src/context/User/userContext.tsx

@@ -1,8 +1,8 @@
 import { addToast } from '@medly-components/core';
 import axios from 'axios';
-import React, { createContext, useContext, useEffect, useReducer } from 'react';
+import type { FC } from 'react';
+import { createContext, useContext, useEffect, useReducer } from 'react';
 import { Dispatch, User, UserActions, UserActionTypes } from './types';
-
 const FETCH_USER_URL = 'https://run.mocky.io/v3/7937982d-ac84-4657-a1f2-e4fcf5f6d375';
 
 export const initialState: User = {
@@ -31,7 +31,7 @@ export const userReducer = (state: User, { type, ...payload }: UserActions) => {
     }
 };
 
-const UserProvider: React.FC = ({ children }) => {
+const UserProvider: FC = ({ children }) => {
     const [state, dispatch] = useReducer(userReducer, initialState);
     const value = { state, dispatch };
 

packages/app/template/stateManagers/context/src/utils/test-utils.tsx

@@ -4,13 +4,12 @@ import { render, RenderOptions, RenderResult } from '@testing-library/react';
 import { defaultTheme } from '@theme';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import React from 'react';
+import type { FC, ReactElement } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
-
 export const mockAxios = new MockAdapter(axios);
 
-const WithThemeProvider: React.FunctionComponent = props => (
+const WithThemeProvider: FC = props => (
     <ThemeProvider theme={defaultTheme}>
         <>
             <ToastContainer position="top-end" />
@@ -19,27 +18,26 @@ const WithThemeProvider: React.FunctionComponent = props => (
     </ThemeProvider>
 );
 
-const WithRouter: React.FunctionComponent = props => (
+const WithRouter: FC = props => (
     <MemoryRouter>
         <WithThemeProvider>{props.children}</WithThemeProvider>
     </MemoryRouter>
 );
 
-const WithUserProvider: React.FC = props => {
+const WithUserProvider: FC = props => {
     return (
         <WithRouter>
             <UserProvider {...props} />
         </WithRouter>
     );
 };
 
-const customRender = (ui: React.ReactElement, options?: RenderOptions): RenderResult =>
-    render(ui, { wrapper: WithThemeProvider, ...options });
+const customRender = (ui: ReactElement, options?: RenderOptions): RenderResult => render(ui, { wrapper: WithThemeProvider, ...options });
 
-export const renderWithUserProvider = (ui: React.ReactElement, options?: RenderOptions): RenderResult =>
+export const renderWithUserProvider = (ui: ReactElement, options?: RenderOptions): RenderResult =>
     render(ui, { wrapper: WithUserProvider, ...options });
 
-export const renderWithRouter = (ui: React.ReactElement, options?: RenderOptions): RenderResult =>
+export const renderWithRouter = (ui: ReactElement, options?: RenderOptions): RenderResult =>
     render(ui, { wrapper: WithRouter, ...options });
 
 // re-export everything

packages/app/template/stateManagers/redux/src/App.tsx

@@ -3,12 +3,12 @@ import { CssBaseline, ToastContainer } from '@medly-components/core';
 import Routes from '@routes';
 import { store } from '@store';
 import { defaultTheme } from '@theme';
-import React from 'react';
+import type { FC } from 'react';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 
-const App: React.FC = () => (
+const App: FC = () => (
     <Provider store={store}>
         <ThemeProvider theme={defaultTheme}>
             <>

packages/app/template/stateManagers/redux/src/components/layout/Header/Header.test.tsx

@@ -1,7 +1,6 @@
 import { initialState } from '@store';
 import { mockAxios, render, screen } from '@test-utils';
 import { user } from '@testData';
-import React from 'react';
 import { Provider } from 'react-redux';
 import reduxMockStore from 'redux-mock-store';
 import Header from './Header.container';

packages/app/template/stateManagers/redux/src/components/layout/Header/Header.tsx

@@ -1,10 +1,11 @@
 import { Avatar, Text } from '@medly-components/core';
 import { WithStyle } from '@medly-components/utils';
-import React, { useEffect, useMemo } from 'react';
+import type { FC } from 'react';
+import { useEffect, useMemo } from 'react';
 import * as Styled from './Header.styled';
 import { HeaderProps } from './types';
 
-export const Header: React.FC<HeaderProps> & WithStyle = ({ fetchUser, firstName, lastName }) => {
+const Component: FC<HeaderProps> = ({ fetchUser, firstName, lastName }) => {
     const nameInitials = useMemo(() => (firstName && lastName ? `${firstName[0]}${lastName[0]}`.toUpperCase() : ''), [firstName, lastName]);
 
     useEffect(() => {
@@ -25,5 +26,5 @@ export const Header: React.FC<HeaderProps> & WithStyle = ({ fetchUser, firstName
     );
 };
 
-Header.displayName = 'Header';
-Header.Style = Styled.Header;
+Component.displayName = 'Header';
+export const Header: FC<HeaderProps> & WithStyle = Object.assign(Component, { Style: Styled.Header });

packages/app/template/stateManagers/redux/src/components/layout/PageLayout/PageLayout.test.tsx

@@ -1,5 +1,4 @@
 import { mockAxios, renderWithStore } from '@test-utils';
-import React from 'react';
 import Header from '../Header';
 import PageContent from '../PageContent';
 import { PageLayout } from './PageLayout';