Refactor component structure

web/package.json

@@ -8,9 +8,11 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "@types/file-saver": "^2.0.7",
     "@types/jest": "^27.4.0",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
+    "@types/react-router-dom": "^5.3.3",
     "@xterm/addon-canvas": "^0.6.0-beta.1",
     "@xterm/addon-fit": "^0.9.0-beta.1",
     "@xterm/addon-image": "^0.7.0-beta.1",

web/src/App.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import App from './App';
+import { App } from './App';
 
 test('renders learn react link', () => {
   const { getByText } = render(<App />);

web/src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
-import { Switch, Route } from "react-router-dom";
+import { Switch, Route } from 'react-router-dom';
 
 import {
   configureStore,
@@ -11,11 +11,12 @@ import {
 import { history } from '~/store/configure';
 import { bootstrapGo } from '~/services/go';
 import config from './services/config';
-import Playground from '~/components/pages/Playground';
-import NotFoundPage from "~/components/pages/NotFoundPage";
-import ConnectedThemeProvider from '~/components/utils/ConnectedThemeProvider';
+import { PlaygroundPage } from '~/components/pages/PlaygroundPage';
+import { NotFoundPage } from "~/components/pages/NotFoundPage";
+import { ConnectedThemeProvider } from '~/components/utils/ConnectedThemeProvider';
+import {ApiClientProvider} from '~/services/api';
+
 import './App.css';
-import {ApiClientProvider} from "@services/api";
 
 // Configure store and import config from localStorage
 const store = configureStore();
@@ -27,7 +28,7 @@ bootstrapGo(
   createGoLifecycleAdapter(a => store.dispatch(a))
 );
 
-const App = () => {
+export const App = () => {
   return (
     <Provider store={store}>
       <ApiClientProvider>
@@ -40,7 +41,7 @@ const App = () => {
                   "/snippet/:snippetID"
                 ]}
                 exact
-                component={Playground}
+                component={PlaygroundPage}
               />
               <Route path="*" component={NotFoundPage}/>
             </Switch>
@@ -50,5 +51,3 @@ const App = () => {
     </Provider>
   );
 }
-
-export default App;

web/src/components/core/Panel/PanelAction.tsx → web/src/components/elements/panel/PanelAction/PanelAction.tsx

@@ -10,7 +10,7 @@ export interface PanelActionProps {
   onClick?: () => void
 }
 
-const PanelAction: React.FC<PanelActionProps> = ({hidden, icon, desktopOnly, label, onClick}) => {
+export const PanelAction: React.FC<PanelActionProps> = ({hidden, icon, desktopOnly, label, onClick}) => {
   if (hidden) {
     return null;
   }
@@ -25,5 +25,3 @@ const PanelAction: React.FC<PanelActionProps> = ({hidden, icon, desktopOnly, lab
     </button>
   );
 };
-
-export default PanelAction;

web/src/components/elements/panel/PanelAction/index.ts

@@ -0,0 +1 @@
+export * from './PanelAction';

web/src/components/core/Panel/PanelHeader.tsx → web/src/components/elements/panel/PanelHeader/PanelHeader.tsx

@@ -1,14 +1,14 @@
 import React, {useContext} from 'react';
 import {ITheme, ThemeContext} from '@fluentui/react';
-import PanelAction, {PanelActionProps} from '~/components/core/Panel/PanelAction';
+import { PanelAction, type PanelActionProps } from '../PanelAction';
 import './PanelHeader.css';
 
 interface Props {
   label: string
   commands?: {[key: string]: PanelActionProps},
 }
 
-const PanelHeader: React.FC<Props> = ({label, commands}) => {
+export const PanelHeader: React.FC<Props> = ({label, commands}) => {
   const theme = useContext(ThemeContext);
   const {
     palette: { neutralLight, neutralDark, neutralQuaternaryAlt }
@@ -43,5 +43,3 @@ const PanelHeader: React.FC<Props> = ({label, commands}) => {
     </div>
   );
 };
-
-export default PanelHeader;

web/src/components/elements/panel/PanelHeader/index.ts

@@ -0,0 +1 @@
+export * from './PanelHeader';

web/src/components/editor/CodeEditor.tsx → web/src/components/features/editor/CodeEditor.tsx

@@ -39,7 +39,7 @@ interface CodeEditorState {
   options: s.monaco,
   vim: s.vim,
 }))
-export default class CodeEditor extends React.Component<any, CodeEditorState> {
+export class CodeEditor extends React.Component<any, CodeEditorState> {
   private analyzer?: Analyzer;
   private _previousTimeout: any;
   private editorInstance?: editor.IStandaloneCodeEditor;

web/src/components/editor/FlexContainer.tsx → web/src/components/features/editor/FlexContainer.tsx

@@ -1,6 +1,6 @@
 import React, { FC, PropsWithChildren } from 'react';
 
-const FlexContainer: FC<PropsWithChildren<{}>> = ({ children }) => (
+export const FlexContainer: FC<PropsWithChildren<{}>> = ({ children }) => (
   <div style={{
     background: '#000',
     flex: '1 1',
@@ -9,5 +9,3 @@ const FlexContainer: FC<PropsWithChildren<{}>> = ({ children }) => (
     {children}
   </div>
 );
-
-export default FlexContainer;

web/src/components/inspector/Console/format.ts → web/src/components/features/inspector/Console/format.ts

@@ -1,4 +1,4 @@
-import type { EvalEvent } from '@services/api';
+import type { EvalEvent } from '~/services/api';
 
 const imgRegEx = /\bIMAGE:([A-Za-z0-9=+/]+)\b/;
 

web/src/components/inspector/InspectorPanel/InspectorPanel.tsx → web/src/components/features/inspector/InspectorPanel/InspectorPanel.tsx

@@ -9,8 +9,8 @@ import {
   VscSplitVertical
 } from 'react-icons/vsc';
 
-import RunOutput from '~/components/inspector/RunOutput';
-import PanelHeader from '~/components/core/Panel/PanelHeader';
+import { ConnectedRunOutput } from '../RunOutput';
+import { PanelHeader } from '~/components/elements/panel/PanelHeader';
 import {LayoutType, DEFAULT_PANEL_HEIGHT, DEFAULT_PANEL_WIDTH} from '~/styles/layout';
 import './InspectorPanel.css';
 
@@ -32,7 +32,7 @@ interface Props extends ResizePanelParams {
   onViewChange?: (changes: ResizePanelParams) => void
 }
 
-const InspectorPanel: React.FC<Props> = ({
+export const InspectorPanel: React.FC<Props> = ({
   layout = LayoutType.Vertical,
   height = DEFAULT_PANEL_HEIGHT,
   width= DEFAULT_PANEL_WIDTH,
@@ -116,10 +116,8 @@ const InspectorPanel: React.FC<Props> = ({
         }}
       />
       <div className="InspectorPanel__container" hidden={isCollapsed}>
-        <RunOutput />
+        <ConnectedRunOutput />
       </div>
     </Resizable>
   );
 };
-
-export default InspectorPanel;

web/src/components/inspector/RunOutput/RunOutput.tsx → web/src/components/features/inspector/RunOutput/RunOutput.tsx

@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import {MessageBar, MessageBarType, useTheme} from '@fluentui/react';
 
-import { Console } from '~/components/inspector/Console';
+import { Console } from '~/components/features/inspector/Console';
 import {connect, type StatusState} from '~/store';
 import type { TerminalState } from '~/store/terminal';
 import type {MonacoSettings} from '~/services/config';
@@ -74,10 +74,9 @@ const RunOutput: React.FC<StateProps & OwnProps> = ({ status, monaco, terminal }
   )
 }
 
-const ConnectedRunOutput = connect<StateProps, OwnProps>((
+export const ConnectedRunOutput = connect<StateProps, OwnProps>((
   { status, monaco, terminal }
 ) => ({
   status, monaco, terminal
 }))(RunOutput);
 
-export default ConnectedRunOutput;

web/src/components/features/inspector/RunOutput/index.ts

@@ -0,0 +1 @@
+export * from './RunOutput'

web/src/components/settings/SettingsModal.tsx → web/src/components/features/settings/SettingsModal.tsx

@@ -9,9 +9,9 @@ import {
   PivotItem
 } from '@fluentui/react';
 
-import ThemeableComponent from '~/components/utils/ThemeableComponent';
+import { ThemeableComponent } from '~/components/utils/ThemeableComponent';
 import { getContentStyles, getIconButtonStyles } from '~/styles/modal';
-import SettingsProperty from './SettingsProperty';
+import { SettingsProperty } from './SettingsProperty';
 import { DEFAULT_FONT } from '~/services/fonts';
 import type { MonacoSettings } from '~/services/config';
 import type { TerminalSettings, RenderingBackend } from '~/store/terminal';
@@ -52,7 +52,7 @@ interface SettingsModalState {
   monaco: state.monaco,
   terminal: state.terminal.settings,
 }))
-export default class SettingsModal extends ThemeableComponent<SettingsProps, SettingsModalState> {
+export class SettingsModal extends ThemeableComponent<SettingsProps, SettingsModalState> {
   private titleID = 'Settings';
   private subtitleID = 'SettingsSubText';
   private changes: SettingsChanges = {};

web/src/components/settings/SettingsProperty.tsx → web/src/components/features/settings/SettingsProperty.tsx

@@ -7,7 +7,7 @@ interface SettingsSectionProps {
   control: JSX.Element
 }
 
-export default function SettingsProperty(props: SettingsSectionProps) {
+export function SettingsProperty(props: SettingsSectionProps) {
   if (props.description) {
     return (
       <div className={settingsPropStyles.block}>

web/src/components/settings/SettingsSection.tsx → web/src/components/features/settings/SettingsSection.tsx

@@ -6,7 +6,7 @@ interface SettingsSectionProps {
   children: JSX.Element | JSX.Element[]
 }
 
-export default function SettingsSection(props: SettingsSectionProps) {
+export function SettingsSection(props: SettingsSectionProps) {
   return (
     <div className={settingsSectionStyles.section}>
       <div className={settingsSectionStyles.title}>{props.title}</div>

web/src/components/inputs/RunTargetSelector/RunTargetSelector.tsx

@@ -1,41 +1,41 @@
-import clsx from "clsx";
+import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import {Dropdown, IDropdownStyles} from '@fluentui/react';
-import {RunTargetConfig} from "~/services/config";
+import {RunTargetConfig} from '~/services/config';
+import {VersionsInfo} from '~/services/api';
 import {
   StateDispatch,
   connect,
   newRunTargetChangeDispatcher,
-} from "~/store";
+} from '~/store';
 
-import {onRenderOption, onRenderTitle} from "./dropdown";
+import {onRenderOption, onRenderTitle} from './dropdown';
 import {
   createDropdownOptions,
   DropdownOption,
   dropdownOptionsFromResponse,
   keyFromOption,
-} from "./options";
+} from './options';
 
-import "./RunTargetSelector.css";
-import {VersionsInfo} from "@services/api";
+import './RunTargetSelector.css';
 
 const dropdownStyles: Partial<IDropdownStyles> = {
   callout: {
-    minWidth: "256px"
+    minWidth: '256px'
   },
   dropdown: {
-    maxWidth: "10rem"
+    maxWidth: '10rem'
   },
   dropdownOptionText: { overflow: 'visible', whiteSpace: 'normal' },
   dropdownItem: {
     height: 'auto',
-    paddingTop: ".3rem",
-    paddingBottom: ".3rem"
+    paddingTop: '.3rem',
+    paddingBottom: '.3rem'
   },
   dropdownItemSelected: {
     height: 'auto',
-    paddingTop: ".3rem",
-    paddingBottom: ".3rem"
+    paddingTop: '.3rem',
+    paddingBottom: '.3rem'
   },
 };
 
@@ -53,7 +53,7 @@ interface Props extends OwnProps, StateProps {
   dispatch: StateDispatch
 }
 
-const RunTargetSelector: React.FC<Props> = ({
+const RunTargetSelectorBase: React.FC<Props> = ({
   responsive,
   disabled,
   runTarget,
@@ -97,9 +97,7 @@ const RunTargetSelector: React.FC<Props> = ({
   )
 }
 
-const ConnectedRunTargetSelector = connect<StateProps, OwnProps>
+export const RunTargetSelector = connect<StateProps, OwnProps>
 (({runTarget}) => ({runTarget}))(
-  RunTargetSelector
+  RunTargetSelectorBase
 );
-
-export default ConnectedRunTargetSelector;

web/src/components/inputs/RunTargetSelector/index.ts

@@ -1 +1 @@
-export {default} from './RunTargetSelector';
+export * from './RunTargetSelector';

web/src/components/core/Header/Header.tsx → web/src/components/layout/Header/Header.tsx

@@ -6,11 +6,11 @@ import {
 
 import apiClient, { type VersionsInfo } from "~/services/api";
 import { newAddNotificationAction, NotificationType } from "~/store/notifications";
-import SettingsModal, { type SettingsChanges } from '~/components/settings/SettingsModal';
-import ThemeableComponent from '~/components/utils/ThemeableComponent';
-import AboutModal from '~/components/modals/AboutModal';
-import RunTargetSelector from '~/components/inputs/RunTargetSelector';
-import SharePopup from '~/components/utils/SharePopup';
+import { SettingsModal, type SettingsChanges } from '~/components/features/settings/SettingsModal';
+import { ThemeableComponent } from '~/components/utils/ThemeableComponent';
+import { AboutModal } from '~/components/modals/AboutModal';
+import { RunTargetSelector } from '~/components/inputs/RunTargetSelector';
+import { SharePopup } from '~/components/utils/SharePopup';
 
 import { dispatchTerminalSettingsChange } from '~/store/terminal';
 import {

web/src/components/core/Header/utils.ts → web/src/components/layout/Header/utils.ts

@@ -1,5 +1,5 @@
 import { ContextualMenuItemType, IContextualMenuItem, IIconProps } from '@fluentui/react';
-import snippets, { Snippet, SnippetType } from '@services/go/snippets';
+import snippets, { Snippet, SnippetType } from '~/services/go/snippets';
 
 const snippetIconTypeMapping: { [type: string]: IIconProps } = {
   [SnippetType.Test]: {

web/src/components/core/Layout/Layout.tsx → web/src/components/layout/Layout/Layout.tsx

@@ -6,10 +6,8 @@ interface Props {
   layout?: LayoutType;
 }
 
-const Layout: React.FC<Props> = ({layout = LayoutType.Vertical, children}) => (
+export const Layout: React.FC<Props> = ({layout = LayoutType.Vertical, children}) => (
   <div className={`Layout Layout--${layout}`}>
     {children}
   </div>
 );
-
-export default Layout;

web/src/components/core/StatusBar/StatusBar.tsx → web/src/components/layout/StatusBar/StatusBar.tsx

@@ -5,9 +5,9 @@ import {VscDebugAlt} from "react-icons/vsc";
 import environment from "~/environment";
 import {StateDispatch, connect} from "~/store";
 
-import EllipsisText from "~/components/utils/EllipsisText";
-import StatusBarItem from "~/components/core/StatusBar/StatusBarItem";
-import VimStatusBarItem from "~/plugins/vim/VimStatusBarItem";
+import { EllipsisText } from "~/components/utils/EllipsisText";
+import { StatusBarItem } from "~/components/layout/StatusBar/StatusBarItem";
+import { VimStatusBarItem } from "~/plugins/vim/VimStatusBarItem";
 
 import "./StatusBar.css";
 
@@ -152,7 +152,7 @@ const StatusBar: React.FC<Props> = ({
   );
 };
 
-const ConnectedStatusBar = connect<StateProps, OwnProps>(
+export const ConnectedStatusBar = connect<StateProps, OwnProps>(
   ({status}) => {
     const {
       loading,
@@ -163,5 +163,3 @@ const ConnectedStatusBar = connect<StateProps, OwnProps>(
     return { loading, lastError, running, markers };
   }
 )(StatusBar);
-
-export default ConnectedStatusBar;

web/src/components/core/StatusBar/StatusBarItem.tsx → web/src/components/layout/StatusBar/StatusBarItem.tsx

@@ -48,7 +48,7 @@ const getItemContents = ({icon, iconOnly, imageSrc, title, children}) => (
   </>
 )
 
-const StatusBarItem: React.FC<StatusBarItemProps> = ({
+export const StatusBarItem: React.FC<StatusBarItemProps> = ({
   title,
   className,
   icon,
@@ -107,5 +107,3 @@ const StatusBarItem: React.FC<StatusBarItemProps> = ({
     </div>
   );
 };
-
-export default StatusBarItem;

web/src/components/layout/StatusBar/index.ts

@@ -0,0 +1 @@
+export * from './StatusBar';