teacher tool - don't default export components

teachertool/src/App.tsx

@@ -9,15 +9,15 @@ import * as NotificationService from "./services/notificationService";
 import { downloadTargetConfigAsync } from "./services/backendRequests";
 import { logDebug } from "./services/loggingService";
 
-import HeaderBar from "./components/HeaderBar";
-import MainPanel from "./components/MainPanel";
-import Notifications from "./components/Notifications";
-import CatalogModal from "./components/CatalogModal";
+import { HeaderBar } from "./components/HeaderBar";
+import { MainPanel } from "./components/MainPanel";
+import { Notifications } from "./components/Notifications";
+import { CatalogModal } from "./components/CatalogModal";
 
 import { postNotification } from "./transforms/postNotification";
 import { loadCatalogAsync } from "./transforms/loadCatalogAsync";
 
-function App() {
+export const App = () => {
     const { state, dispatch } = useContext(AppStateContext);
     const [inited, setInited] = useState(false);
 
@@ -58,6 +58,4 @@ function App() {
             <Notifications />
         </>
     );
-}
-
-export default App;
+};

teachertool/src/components/ActiveRubricDisplay.tsx

@@ -9,7 +9,7 @@ import { showCatalogModal } from "../transforms/showCatalogModal";
 
 interface IProps {}
 
-const ActiveRubricDisplay: React.FC<IProps> = ({}) => {
+export const ActiveRubricDisplay: React.FC<IProps> = ({}) => {
     const { state: teacherTool, dispatch } = useContext(AppStateContext);
 
     return (
@@ -42,5 +42,3 @@ const ActiveRubricDisplay: React.FC<IProps> = ({}) => {
         </div>
     );
 };
-
-export default ActiveRubricDisplay;

teachertool/src/components/CatalogModal.tsx

@@ -10,7 +10,7 @@ import { CatalogCriteria } from "../types/criteria";
 
 interface IProps {}
 
-const CatalogModal: React.FC<IProps> = ({}) => {
+export const CatalogModal: React.FC<IProps> = ({}) => {
     const { state: teacherTool } = useContext(AppStateContext);
     const [checkedCriteriaIds, setCheckedCriteria] = useState<Set<string>>(new Set<string>());
 
@@ -77,5 +77,3 @@ const CatalogModal: React.FC<IProps> = ({}) => {
         </Modal>
     ) : null;
 };
-
-export default CatalogModal;

teachertool/src/components/DebugInput.tsx

@@ -9,7 +9,7 @@ import { runEvaluateAsync } from "../transforms/runEvaluateAsync";
 
 interface IProps {}
 
-const DebugInput: React.FC<IProps> = ({}) => {
+export const DebugInput: React.FC<IProps> = ({}) => {
     const [shareLink, setShareLink] = useState("https://makecode.microbit.org/S95591-52406-50965-65671");
     const [rubric, setRubric] = useState("");
 
@@ -44,5 +44,3 @@ const DebugInput: React.FC<IProps> = ({}) => {
         </div>
     );
 };
-
-export default DebugInput;

teachertool/src/components/EvalResultDisplay.tsx

@@ -5,7 +5,7 @@ import { AppStateContext } from "../state/appStateContext";
 
 interface IProps {}
 
-const EvalResultDisplay: React.FC<IProps> = ({}) => {
+export const EvalResultDisplay: React.FC<IProps> = ({}) => {
     const { state: teacherTool } = useContext(AppStateContext);
 
     return (
@@ -30,5 +30,3 @@ const EvalResultDisplay: React.FC<IProps> = ({}) => {
         </>
     );
 };
-
-export default EvalResultDisplay;

teachertool/src/components/HeaderBar.tsx

@@ -5,7 +5,7 @@ import { MenuBar } from "react-common/components/controls/MenuBar";
 
 interface HeaderBarProps {}
 
-const HeaderBar: React.FC<HeaderBarProps> = () => {
+export const HeaderBar: React.FC<HeaderBarProps> = () => {
     const appTheme = pxt.appTarget?.appTheme;
 
     const brandIconClick = () => {};
@@ -93,5 +93,3 @@ const HeaderBar: React.FC<HeaderBarProps> = () => {
         </header>
     );
 };
-
-export default HeaderBar;

teachertool/src/components/MainPanel.tsx

@@ -2,15 +2,15 @@ import * as React from "react";
 // eslint-disable-next-line import/no-internal-modules
 import css from "./styling/MainPanel.module.css";
 
-import DebugInput from "./DebugInput";
-import MakeCodeFrame from "./MakecodeFrame";
-import EvalResultDisplay from "./EvalResultDisplay";
-import ActiveRubricDisplay from "./ActiveRubricDisplay";
-import SplitPane from "./SplitPane";
+import { DebugInput } from "./DebugInput";
+import { MakeCodeFrame } from "./MakecodeFrame";
+import { EvalResultDisplay } from "./EvalResultDisplay";
+import { ActiveRubricDisplay } from "./ActiveRubricDisplay";
+import { SplitPane } from "./SplitPane";
 
 interface IProps {}
 
-const MainPanel: React.FC<IProps> = () => {
+export const MainPanel: React.FC<IProps> = () => {
     return (
         <div className={css["main-panel"]}>
             <SplitPane split={"vertical"} defaultSize={"80%"} primary={"left"}>
@@ -28,5 +28,3 @@ const MainPanel: React.FC<IProps> = () => {
         </div>
     );
 };
-
-export default MainPanel;

teachertool/src/components/MakecodeFrame.tsx

@@ -6,7 +6,7 @@ import { getEditorUrl } from "../utils";
 
 interface MakeCodeFrameProps {}
 
-const MakeCodeFrame: React.FC<MakeCodeFrameProps> = () => {
+export const MakeCodeFrame: React.FC<MakeCodeFrameProps> = () => {
     const { state: teacherTool } = useContext(AppStateContext);
 
     function createIFrameUrl(shareId: string): string {
@@ -41,5 +41,3 @@ const MakeCodeFrame: React.FC<MakeCodeFrameProps> = () => {
     );
     /* eslint-enable @microsoft/sdl/react-iframe-missing-sandbox */
 };
-
-export default MakeCodeFrame;

teachertool/src/components/Notifications.tsx

@@ -3,7 +3,7 @@ import { AppStateContext } from "../state/appStateContext";
 
 interface IProps {}
 
-const Notifications: React.FC<IProps> = ({}) => {
+export const Notifications: React.FC<IProps> = ({}) => {
     const { state: teacherTool, dispatch } = useContext(AppStateContext);
 
     return (
@@ -16,5 +16,3 @@ const Notifications: React.FC<IProps> = ({}) => {
         </div>
     );
 };
-
-export default Notifications;

teachertool/src/components/SplitPane.tsx

@@ -11,7 +11,7 @@ interface IProps {
     children: React.ReactNode;
 }
 
-const SplitPane: React.FC<IProps> = ({ className, split, children }) => {
+export const SplitPane: React.FC<IProps> = ({ className, split, children }) => {
     const [left, right] = React.Children.toArray(children);
 
     return (
@@ -24,5 +24,3 @@ const SplitPane: React.FC<IProps> = ({ className, split, children }) => {
         </div>
     );
 };
-
-export default SplitPane;

teachertool/src/index.tsx

@@ -8,7 +8,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 // eslint-disable-next-line import/no-unassigned-import
 import "./teacherTool.css";
-import App from "./App";
+import { App } from "./App";
 import { AppStateProvider } from "./state/appStateContext";
 
 function enableAnalytics() {