import individual components from dir

- same as downstream in Workflows, in order to code split properly, can't use the `src/` or `src/components/` imports as they have side effects (and therefore can't be tree-shaken)
  - instead have to do individual component imports to tree shake properly

- this seems to substantially improve performance from lethargic minutes of loading on first page load to seconds
  - I believe Storybook tries to code split things itself, so maybe it was making a giant bundle for each story file?

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>

stories/data-loader.tsx

@@ -5,6 +5,8 @@ import { App } from './utils';
 
 import { DataLoader } from '../src/components/data-loader';
 
+// import '../src/styles/main.scss';
+
 function loadData(input: string): Promise<string> {
     return new Promise((resolve) => window.setTimeout(() => resolve(`hello ${input}`), 50));
 }

stories/dropdown.tsx

@@ -1,7 +1,8 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
-import { DropDown, DropDownMenu } from '../src/components';
+import { DropDown } from '../src/components/dropdown/dropdown';
+import { DropDownMenu } from '../src/components/dropdown-menu';
 
 storiesOf('Dropdown', module)
     .add('default', () => <DropDown anchor={() => <a>Click me</a>}><p>Dropdown content here</p></DropDown>)

stories/forms.tsx

@@ -1,7 +1,8 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { Form, Text } from 'react-form';
-import { FormField, FormSelect } from '../src/components';
+
+import { FormField, FormSelect } from '../src/components/form-field/form-field';
 
 storiesOf('Forms', module)
     .add('default', () => (

stories/logs-viewer.tsx

@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { Observable } from 'rxjs';
 
-import { LogsViewer } from '../src/components';
+import { LogsViewer } from '../src/components/logs-viewer/logs-viewer';
 
 storiesOf('LogsViewer', module).add('default', () => (
   <div>

stories/notifications.tsx

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
-import { NotificationType} from '../src/components';
+import { NotificationType } from '../src/components/notifications/notifications';
 
 import { App } from './utils';
 

stories/page.tsx

@@ -5,7 +5,8 @@ import { Route, Router } from 'react-router';
 import { timer } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { Layout, Page } from '../src/components';
+import { Layout } from '../src/components/layout/layout';
+import { Page } from '../src/components/page/page';
 
 const navItems = [{ path: location.pathname, title: 'Sample', iconClassName: 'argo-icon-docs' }];
 const breadcrumbs = [{

stories/popup.tsx

@@ -4,7 +4,8 @@ import * as React from 'react';
 import { Checkbox as ReactCheckbox} from 'react-form';
 import { Text } from 'react-form';
 
-import { Checkbox, FormField } from '../src/components';
+import { Checkbox } from '../src/components/checkbox';
+import { FormField } from '../src/components/form-field/form-field';
 import { App } from './utils';
 
 storiesOf('Popup', module)

stories/select.tsx

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
-import { Select } from '../src/components';
+import { Select } from '../src/components/select/select';
 
 storiesOf('Select', module)
     .add('default', () => {

stories/tabs.tsx

@@ -1,6 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { Tabs } from '../src/components';
+
+import { Tabs } from '../src/components/tabs/tabs';
 
 storiesOf('Tabs', module)
     .add('basic tabs', () => (

stories/utils.tsx

@@ -1,7 +1,10 @@
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
-import { Notifications, NotificationsApi, NotificationsManager, Popup, PopupApi, PopupManager, PopupProps} from '../src/components';
+import { Notifications } from '../src/components/notifications/notifications';
+import { NotificationsApi, NotificationsManager } from '../src/components/notifications/notification-manager';
+import { Popup, PopupProps } from '../src/components/popup/popup';
+import { PopupApi, PopupManager } from '../src/components/popup/popup-manager';
 
 export class App extends React.Component<{ children: (apis: {
     notifications: NotificationsApi,