Use named exports, clean up unused imports

lib/ui/src/settings/about.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { actions as createActions } from '@storybook/addon-actions';
 
-import AboutScreen from './about';
+import { AboutScreen } from './about';
 
 const info = {
   plain: `- upgrade webpack & babel to latest\n- new addParameters and third argument to .add to pass data to addons\n- added the ability to theme storybook\n- improved ui for mobile devices\n- improved performance of addon-knobs`,

lib/ui/src/settings/about.tsx

@@ -189,4 +189,4 @@ const AboutScreen: FunctionComponent<{
   );
 };
 
-export { AboutScreen as default };
+export { AboutScreen };

lib/ui/src/settings/about_page.tsx

@@ -1,10 +1,8 @@
-import { history } from 'global';
 import React, { Component, FunctionComponent } from 'react';
 
-import { Route } from '@storybook/router';
 import { Consumer, API, Combo } from '@storybook/api';
 
-import AboutScreen from './about';
+import { AboutScreen } from './about';
 
 // Clear a notification on mount. This could be exported by core/notifications.js perhaps?
 class NotificationClearer extends Component<{ api: API; notificationId: string }> {
@@ -33,4 +31,4 @@ const AboutPage: FunctionComponent<{ onClose: () => void }> = ({ onClose }) => (
   </Consumer>
 );
 
-export { AboutPage as default };
+export { AboutPage };

lib/ui/src/settings/index.tsx

@@ -1,11 +1,11 @@
-import React, { FunctionComponent, SyntheticEvent, useEffect, useState } from 'react';
+import React, { FunctionComponent, SyntheticEvent } from 'react';
 import { Tabs, IconButton, Icons } from '@storybook/components';
 import { useStorybookApi } from '@storybook/api';
 import { Location, Route } from '@storybook/router';
 import { styled } from '@storybook/theming';
-import AboutPage from './about_page';
-import ReleaseNotesPage from './release_notes_page';
-import ShortcutsPage from './shortcuts_page';
+import { AboutPage } from './about_page';
+import { ReleaseNotesPage } from './release_notes_page';
+import { ShortcutsPage } from './shortcuts_page';
 
 const ABOUT = 'about';
 const SHORTCUTS = 'shortcuts';

lib/ui/src/settings/release_notes.stories.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { actions as makeActions } from '@storybook/addon-actions';
 
-import { DecoratorFn } from '@storybook/react';
-import { PureReleaseNotes } from './release_notes';
+import { PureReleaseNotesScreen } from './release_notes';
 
 export default {
-  component: PureReleaseNotes,
+  component: PureReleaseNotesScreen,
   title: 'UI/Settings/ReleaseNotes',
 };
 
@@ -14,9 +13,14 @@ const actions = makeActions('setLoaded', 'onClose');
 const VERSION = '6.0.0';
 
 export const Loading = () => (
-  <PureReleaseNotes didHitMaxWaitTime={false} isLoaded={false} version={VERSION} {...actions} />
+  <PureReleaseNotesScreen
+    didHitMaxWaitTime={false}
+    isLoaded={false}
+    version={VERSION}
+    {...actions}
+  />
 );
 
 export const DidHitMaxWaitTime = () => (
-  <PureReleaseNotes didHitMaxWaitTime isLoaded={false} version={VERSION} {...actions} />
+  <PureReleaseNotesScreen didHitMaxWaitTime isLoaded={false} version={VERSION} {...actions} />
 );

lib/ui/src/settings/release_notes.tsx

@@ -63,7 +63,7 @@ interface ReleaseNotesProps {
   version: string;
 }
 
-const PureReleaseNotes: FunctionComponent<ReleaseNotesProps> = ({
+const PureReleaseNotesScreen: FunctionComponent<ReleaseNotesProps> = ({
   didHitMaxWaitTime,
   isLoaded,
   onClose,
@@ -87,7 +87,7 @@ const PureReleaseNotes: FunctionComponent<ReleaseNotesProps> = ({
 
 const MAX_WAIT_TIME = 10000; // 10 seconds
 
-const ReleaseNotes: FunctionComponent<Omit<
+const ReleaseNotesScreen: FunctionComponent<Omit<
   ReleaseNotesProps,
   'isLoaded' | 'setLoaded' | 'didHitMaxWaitTime'
 >> = (props) => {
@@ -100,7 +100,7 @@ const ReleaseNotes: FunctionComponent<Omit<
   }, [isLoaded]);
 
   return (
-    <PureReleaseNotes
+    <PureReleaseNotesScreen
       didHitMaxWaitTime={didHitMaxWaitTime}
       isLoaded={isLoaded}
       setLoaded={setLoaded}
@@ -109,4 +109,4 @@ const ReleaseNotes: FunctionComponent<Omit<
   );
 };
 
-export { ReleaseNotes as default, PureReleaseNotes };
+export { ReleaseNotesScreen, PureReleaseNotesScreen };

lib/ui/src/settings/release_notes_page.tsx

@@ -1,7 +1,7 @@
 import { useStorybookApi } from '@storybook/api';
 import React, { FunctionComponent, useEffect } from 'react';
 
-import ReleaseNotesScreen from './release_notes';
+import { ReleaseNotesScreen } from './release_notes';
 
 const ReleaseNotesPage: FunctionComponent<{ onClose: () => void }> = ({ onClose }) => {
   const api = useStorybookApi();
@@ -13,4 +13,4 @@ const ReleaseNotesPage: FunctionComponent<{ onClose: () => void }> = ({ onClose
   return <ReleaseNotesScreen onClose={onClose} version={api.releaseNotesVersion()} />;
 };
 
-export { ReleaseNotesPage as default };
+export { ReleaseNotesPage };

lib/ui/src/settings/shortcuts.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { actions as makeActions } from '@storybook/addon-actions';
 
 import { DecoratorFn } from '@storybook/react';
-import ShortcutsScreen from './shortcuts';
+import { ShortcutsScreen } from './shortcuts';
 
 const defaultShortcuts = {
   fullScreen: ['F'],

lib/ui/src/settings/shortcuts.tsx

@@ -1,4 +1,4 @@
-import React, { Component, Fragment, SyntheticEvent } from 'react';
+import React, { Component } from 'react';
 import { styled, keyframes } from '@storybook/theming';
 import { GlobalHotKeys } from 'react-hotkeys';
 
@@ -7,7 +7,7 @@ import {
   shortcutToHumanString,
   shortcutMatchesShortcut,
 } from '@storybook/api/shortcut';
-import { Form, IconButton, Icons, Tabs } from '@storybook/components';
+import { Form, Icons } from '@storybook/components';
 import SettingsFooter from './SettingsFooter';
 
 const { Button, Input } = Form;
@@ -322,4 +322,4 @@ class ShortcutsScreen extends Component<ShortcutsScreenProps, ShortcutsScreenSta
   }
 }
 
-export default ShortcutsScreen;
+export { ShortcutsScreen };

lib/ui/src/settings/shortcuts_page.tsx

@@ -3,7 +3,7 @@ import React, { FunctionComponent } from 'react';
 
 import { Consumer } from '@storybook/api';
 
-import ShortcutsScreen from './shortcuts';
+import { ShortcutsScreen } from './shortcuts';
 
 const ShortcutsPage: FunctionComponent<{ onClose: () => void }> = ({ onClose }) => (
   <Consumer>
@@ -19,4 +19,4 @@ const ShortcutsPage: FunctionComponent<{ onClose: () => void }> = ({ onClose })
   </Consumer>
 );
 
-export { ShortcutsPage as default };
+export { ShortcutsPage };