Add Container component to simplify app/lib entrypoint (#379)

1. Create new Container component, and move a lot of the logic for the app entrypoint to it, in order to keep src/index.js as simple as possible.
2. Move the 'what-input' import to the App component - it should have been there to begin with.
3. Move the global app styles from src/styles.index.scss to Container component, as they are most related to this component.
4. Change import order in App component - cosmetic change to ensure that absolute imports come first.
5. Add better explanation in App/Container JSDoc comments

src/components/app/index.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
+import 'what-input';
+import '@quantumblack/kedro-ui/lib/styles/app-no-webfont.css';
+import LoadWebFont from '@quantumblack/kedro-ui/lib/utils/webfont.js';
 import configureStore from '../../store';
 import { resetData, updateFontLoaded } from '../../actions';
 import { loadInitialPipelineData } from '../../actions/pipelines';
@@ -9,12 +12,15 @@ import getInitialState, {
   preparePipelineState,
 } from '../../store/initial-state';
 import { getFlagsMessage } from '../../utils/flags';
-import '@quantumblack/kedro-ui/lib/styles/app-no-webfont.css';
-import LoadWebFont from '@quantumblack/kedro-ui/lib/utils/webfont.js';
 import './app.css';
 
 /**
- * Main wrapper component. Intialises the Redux store
+ * Entry-point component for the use-case where Kedro-Viz is imported as a
+ * library/package into a larger application, rather than run as a standalone
+ * app. If run as a standalone then 'Container' is the top-level component.
+ *
+ * This component intialises anything that might be needed in both use-cases,
+ * e.g. the Redux store, webfont loading, announcing flags, etc.
  */
 class App extends React.Component {
   constructor(props) {

src/components/container/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import App from '../app';
+import EasterEgg from '../easter-egg';
+import getPipelineData from '../../utils/data-source';
+import './container.css';
+
+/**
+ * Top-level component for the use-case where Kedro-Viz is run as a standalone
+ * app rather than imported as a library/package into a larger application.
+ */
+const Container = () => (
+  <>
+    <App data={getPipelineData()} />
+    <EasterEgg />
+  </>
+);
+
+export default Container;

src/index.js

@@ -1,16 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import 'what-input';
-import App from './components/app';
-import EasterEgg from './components/easter-egg';
-import getPipelineData from './utils/data-source';
-import './styles/index.css';
-
-const KedroViz = () => (
-  <>
-    <App data={getPipelineData()} />
-    <EasterEgg />
-  </>
-);
+import KedroViz from './components/container';
 
 ReactDOM.render(<KedroViz />, document.getElementById('root'));