Extract general popups markup to its own component

Split popups controllers into separate components
Implemented storybooks for all project's popups

packages/app/shell/App.tsx

@@ -1,7 +1,7 @@
 import { hot } from 'react-hot-loader/root';
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { History } from 'history';
+
 import { Store } from 'app/reducers';
 import AuthFlowRoute from 'app/containers/AuthFlowRoute';
 import RootPage from 'app/pages/root/RootPage';
@@ -9,11 +9,18 @@ import { ComponentLoader } from 'app/components/ui/loader';
 
 import ContextProvider from './ContextProvider';
 
+import type { History } from 'history';
+
 const SuccessOauthPage = React.lazy(() =>
     import(/* webpackChunkName: "page-oauth-success" */ 'app/pages/auth/SuccessOauthPage'),
 );
 
-const App = ({ store, history }: { store: Store; history: History<any> }) => (
+interface Props {
+    store: Store;
+    history: History;
+}
+
+const App: ComponentType<Props> = ({ store, history }) => (
     <ContextProvider store={store} history={history}>
         <React.Suspense fallback={<ComponentLoader />}>
             <Switch>

packages/app/shell/ContextProvider.tsx

@@ -1,20 +1,26 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Router } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
+import { History } from 'history';
+
 import { IntlProvider } from 'app/components/i18n';
 import { Store } from 'app/reducers';
 
-function ContextProvider({ children, store, history }: { children: React.ReactNode; store: Store; history: any }) {
-    return (
-        <HelmetProvider>
-            <ReduxProvider store={store}>
-                <IntlProvider>
-                    <Router history={history}>{children}</Router>
-                </IntlProvider>
-            </ReduxProvider>
-        </HelmetProvider>
-    );
+interface Props {
+    children: React.ReactNode;
+    store: Store;
+    history: History;
 }
 
+const ContextProvider: ComponentType<Props> = ({ children, store, history }) => (
+    <HelmetProvider>
+        <ReduxProvider store={store}>
+            <IntlProvider>
+                <Router history={history}>{children}</Router>
+            </IntlProvider>
+        </ReduxProvider>
+    </HelmetProvider>
+);
+
 export default ContextProvider;

packages/app/shell/TestContextProvider.tsx

@@ -1,16 +1,26 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { createMemoryHistory } from 'history';
+import { DeepPartial } from 'utility-types';
+
 import storeFactory from 'app/storeFactory';
+import { RootState } from 'app/reducers';
 
 import ContextProvider from './ContextProvider';
 
-type ContextProps = React.ComponentProps<typeof ContextProvider>;
+type NotOverriddenProps = Omit<React.ComponentProps<typeof ContextProvider>, 'store' | 'history'>;
+type Props = NotOverriddenProps & {
+    state?: DeepPartial<RootState>;
+};
 
-function TestContextProvider(props: Partial<ContextProps> & { children: ContextProps['children'] }) {
-    const store = React.useMemo(storeFactory, []);
+const TestContextProvider: ComponentType<Props> = ({ state = {}, children, ...props }) => {
+    const store = React.useMemo(() => storeFactory(state), []);
     const history = React.useMemo(createMemoryHistory, []);
 
-    return <ContextProvider store={store} history={history} {...props} />;
-}
+    return (
+        <ContextProvider store={store} history={history} {...props}>
+            {children}
+        </ContextProvider>
+    );
+};
 
 export default TestContextProvider;