@elice/material-exercise 1.220803.0

package/es/components/material-exercise/exercise-room/helpers/exerciseRoomPermissionStringConvertor.js

@@ -0,0 +1,32 @@
+import { enums } from '@elice/types';
+import { camelize } from 'humps';
+
+const exerciseRoomPermissionStringConvertor = publicPermission => {
+  let result = '';
+
+  switch (publicPermission) {
+    case enums.ExerciseRoomPermission.Nothing:
+      result = enums.ExerciseRoomPermission[publicPermission];
+      break;
+
+    case enums.ExerciseRoomPermission.Read:
+      result = enums.ExerciseRoomPermission[publicPermission];
+      break;
+
+    case enums.ExerciseRoomPermission.ReadWrite:
+      result = enums.ExerciseRoomPermission[publicPermission];
+      break;
+
+    case enums.ExerciseRoomPermission.Owner:
+      result = enums.ExerciseRoomPermission[publicPermission];
+      break;
+
+    default:
+      result = '';
+      break;
+  }
+
+  return camelize(result);
+};
+
+export { exerciseRoomPermissionStringConvertor };

package/es/components/material-exercise/exercise-room/helpers/index.d.ts

@@ -0,0 +1 @@
+export { exerciseRoomPermissionStringConvertor } from './exerciseRoomPermissionStringConvertor';

package/es/components/material-exercise/exercise-room/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ExerciseRoom } from './ExerciseRoom';
+export type { ExerciseRoomProps } from './ExerciseRoom';

package/es/components/material-exercise/exercise-room/locales/en.json.js

@@ -0,0 +1,3 @@
+var phrasesEn = {"materialExerciseExerciseRoom.create":"New Exercise Room","materialExerciseExerciseRoom.create.failure":"There was a problem creating a new lab.","materialExerciseExerciseRoom.create.success":"A new room has been created.","materialExerciseExerciseRoom.defaultExerciseRoomDescription":"The room is set to open by default.","materialExerciseExerciseRoom.description":"Create your own practice environment by creating a practice room with your tutor and friends.","materialExerciseExerciseRoom.detail.addUsers.label":"Add users","materialExerciseExerciseRoom.detail.addUsers.placeholder":"Search for the username you want to invite.","materialExerciseExerciseRoom.detail.copy":"Copy","materialExerciseExerciseRoom.detail.copy.success":"The link has been copied.","materialExerciseExerciseRoom.detail.footer.button.open.description":"The room is set to open by default.","materialExerciseExerciseRoom.detail.footer.description":"The room is set to open by default.","materialExerciseExerciseRoom.detail.sharelink.label":"Share Link","materialExerciseExerciseRoom.detail.table.body.add":"Invite","materialExerciseExerciseRoom.detail.table.head.permission":"Permission","materialExerciseExerciseRoom.detail.table.head.users":"Participants","materialExerciseExerciseRoom.detail.title.label":"Title","materialExerciseExerciseRoom.detail.title.placeholder":"Enter title","materialExerciseExerciseRoom.exerciseRoom.name":"Room Name","materialExerciseExerciseRoom.exerciseRoom.participants":"Participants","materialExerciseExerciseRoom.exerciseRoom.publicPermission":"Permission","materialExerciseExerciseRoom.exerciseRoom.publicPermission.nothing":"No Permission","materialExerciseExerciseRoom.exerciseRoom.publicPermission.owner":"Owner","materialExerciseExerciseRoom.exerciseRoom.publicPermission.read":"Read Only","materialExerciseExerciseRoom.exerciseRoom.publicPermission.readWrite":"Read and Write","materialExerciseExerciseRoom.exit":"Close","materialExerciseExerciseRoom.leave":"Leave Exercise Room","materialExerciseExerciseRoom.leave.dialog.body":"Every code you wrote will disappear. Are you sure you want to leave this room?","materialExerciseExerciseRoom.leave.dialog.title":"Exit Exercise Room","materialExerciseExerciseRoom.open":"Open Exercise Room","materialExerciseExerciseRoom.selected":"(Current ExerciseRoom)","materialExerciseExerciseRoom.title":"Exercise Room"};
+
+export { phrasesEn as default };

package/es/components/material-exercise/exercise-room/locales/ko.json.js

@@ -0,0 +1,3 @@
+var phrasesKo = {"materialExerciseExerciseRoom.create":"새 실습방","materialExerciseExerciseRoom.create.failure":"새로운 실습방을 만드는데 문제가 발생하였습니다.","materialExerciseExerciseRoom.create.success":"새로운 실습방이 생성 되었습니다.","materialExerciseExerciseRoom.defaultExerciseRoomDescription":"해당 실습방이 기본으로 열리도록 설정되어 있습니다.","materialExerciseExerciseRoom.description":"튜터, 친구들과 함께 실습방을 만들어 나만의 실습 환경을 만들어보세요.","materialExerciseExerciseRoom.detail.addUsers.label":"구성원 초대","materialExerciseExerciseRoom.detail.addUsers.placeholder":"초대할 사용자 이름을 검색하세요.","materialExerciseExerciseRoom.detail.copy":"복사","materialExerciseExerciseRoom.detail.copy.success":"공유 링크가 복사되었습니다.","materialExerciseExerciseRoom.detail.footer.button.open.description":"해당 실습방이 기본으로 열리도록 설정되어 있습니다.","materialExerciseExerciseRoom.detail.footer.description":"해당 실습방이 기본으로 열리도록 설정되어 있습니다.","materialExerciseExerciseRoom.detail.sharelink.label":"공유 링크","materialExerciseExerciseRoom.detail.table.body.add":"초대","materialExerciseExerciseRoom.detail.table.head.permission":"권한","materialExerciseExerciseRoom.detail.table.head.users":"구성원","materialExerciseExerciseRoom.detail.title.label":"타이틀","materialExerciseExerciseRoom.detail.title.placeholder":"타이틀을 입력하세요.","materialExerciseExerciseRoom.exerciseRoom.name":"실습방 이름","materialExerciseExerciseRoom.exerciseRoom.participants":"구성원","materialExerciseExerciseRoom.exerciseRoom.publicPermission":"내 권한","materialExerciseExerciseRoom.exerciseRoom.publicPermission.nothing":"권한없음","materialExerciseExerciseRoom.exerciseRoom.publicPermission.owner":"개설자","materialExerciseExerciseRoom.exerciseRoom.publicPermission.read":"읽기 전용","materialExerciseExerciseRoom.exerciseRoom.publicPermission.readWrite":"수정","materialExerciseExerciseRoom.exit":"닫기","materialExerciseExerciseRoom.leave":"실습방 나가기","materialExerciseExerciseRoom.leave.dialog.body":"작성한 코드가 모두 사라집니다. 정말 이 실습방에서 나가시겠습니까?","materialExerciseExerciseRoom.leave.dialog.title":"실습방 나가기","materialExerciseExerciseRoom.open":"실습방 열기","materialExerciseExerciseRoom.selected":"(현재 열린 실습방)","materialExerciseExerciseRoom.title":"실습방"};
+
+export { phrasesKo as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunner.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ExerciseRunnerProps {
+    exercisePreview?: React.ReactNode;
+}
+declare const _default: React.VFC<ExerciseRunnerProps>;
+export default _default;

package/es/components/material-exercise/exercise-runner/ExerciseRunner.js

@@ -0,0 +1,542 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { useEvent } from 'react-use';
+import { postOrgMaterialExerciseExerciseRunningSubmit, postOrgMaterialExerciseExerciseRunningCancel } from '@elice/api-client';
+import { Flex, ResizableNext, Dialog } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { enums } from '@elice/types';
+import { useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
+import styled from 'styled-components';
+import XtermLazy from '../../shared/xterm/XtermLazy.js';
+import { MATERIAL_RESIZABLE_COMMON_PROPS } from '../../../constants/stylesheets.js';
+import { useArduino } from '../../../hooks/useArduino.js';
+import { exerciseState, exerciseEditorPreferenceState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseRunnerRunTypeState, exerciseRunnerRoomConnectionInfoState, exerciseRunnerStdioFilesState, exercisePreviewTypeState, exercisePreviewDisplayModeState, exerciseWebsocketQuery, exerciseContainerSizeState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import { ExercisePreviewType, ExercisePreviewDisplayMode } from '../context/recoilTypes.js';
+import { exerciseRunnerTextSend$ } from '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import { useRunnerRoomWebSocket } from '../../../hooks/useRunnerRoomWebSocket.js';
+import { useStdioWebSocket } from '../../../hooks/useStdioWebSocket.js';
+import 'ot-text-unicode';
+import '@elice/material-shared-utils';
+import '@elice/websocket';
+import 'humps';
+import 'lodash/debounce';
+import 'random-words';
+import 'unicount';
+import { withExerciseIntlProvider } from '../context/ExerciseIntlProvider.js';
+import phrasesEn from './locales/en.json.js';
+import phrasesKo from './locales/ko.json.js';
+import { ExerciseRunnerContext } from './ExerciseRunnerContext.js';
+import ExerciseRunnerController from './ExerciseRunnerController.js';
+
+const EXERCISE_RUNNER_HORIZONTAL_RATIO = {
+  PREVIEW: 0.3,
+  XTERM: 0.7
+};
+const StyledExerciseRunner = styled.div.withConfig({
+  componentId: "sc-mp78g-0"
+})(["display:flex;flex-direction:column;width:100%;height:100%;background-color:", ";overflow:hidden;"], base.color.navy8);
+/**
+ *
+ */
+
+const ExerciseRunner = ({
+  exercisePreview
+}) => {
+  var _a, _b, _c;
+
+  const intl = useIntl();
+  const {
+    materialExerciseId,
+    exerciseRoomId,
+    locale,
+    onSubmit,
+    onError
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const {
+    fontSize: editorPreferenceFontSize
+  } = useRecoilValue(exerciseEditorPreferenceState); // runner states
+
+  const setRunnerSubmitting = useSetRecoilState(exerciseRunnerSubmittingState);
+  const setRunnerRunning = useSetRecoilState(exerciseRunnerRunningState);
+  const [runnerRunTypeState, setRunnerRunTypeState] = useRecoilState(exerciseRunnerRunTypeState);
+  const setExerciseRunnerRoomConnectionInfo = useSetRecoilState(exerciseRunnerRoomConnectionInfoState);
+  const setRunnerStdioFilesState = useSetRecoilState(exerciseRunnerStdioFilesState); // preview states
+
+  const exercisePreviewType = useRecoilValue(exercisePreviewTypeState(materialExerciseId));
+  const exercisePreviewDisplayMode = useRecoilValue(exercisePreviewDisplayModeState); // websockets
+
+  const setRunnerRoomWebSocketState = useSetRecoilState(exerciseWebsocketQuery('runnerRoom'));
+  const setStdioWebSocketState = useSetRecoilState(exerciseWebsocketQuery('stdio')); // etc
+
+  const exerciseContainerSize = useRecoilValue(exerciseContainerSizeState);
+  const [runnerSubmitErrorDialog, setRunnerSubmitErrorDialog] = React.useState(null);
+  const arduinoTextBuffer = React.useRef('');
+  const runnerRunTypeRef = React.useRef(runnerRunTypeState);
+  const xterm = React.useRef(null);
+  /**
+   * Handle text received from arduino serial output.
+   */
+
+  const handleArduinoDigitalOutput = text => {
+    var _a;
+
+    (_a = xterm.current) === null || _a === void 0 ? void 0 : _a.write(text);
+  }; // Arduino
+
+
+  const arduino = useArduino({
+    writeTerminal: handleArduinoDigitalOutput
+  });
+  const isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.Arduino;
+  /**
+   * Handle destroy arduino client.
+   */
+
+  const handleArduinoDistroy = React.useCallback(() => {
+    if (isArduinoExercise) {
+      arduino.destroy();
+    }
+  }, [isArduinoExercise, arduino]);
+  /**
+   * Handle text received from stdio websocket.
+   */
+
+  const handleWsStdioTextReceive = (type, text) => {
+    var _a, _b, _c;
+
+    switch (type) {
+      case 'text':
+        (_a = xterm.current) === null || _a === void 0 ? void 0 : _a[runnerRunTypeRef.current !== enums.ExerciseRunType.Run ? 'writeEmphasized' : 'write'](text);
+        break;
+
+      case 'grader':
+        (_b = xterm.current) === null || _b === void 0 ? void 0 : _b.write(text);
+        break;
+
+      case 'echo':
+        (_c = xterm.current) === null || _c === void 0 ? void 0 : _c.write(text);
+        break;
+    }
+  };
+  /**
+   * Handle file received from stdio websocket.
+   */
+
+
+  const handleWsStdioFileReceive = stdioFile => {
+    // arduino exercise
+    if (isArduinoExercise) {
+      if ('filename' in stdioFile && stdioFile.filename.startsWith('firmware') && stdioFile.filename.endsWith('hex')) {
+        arduino.uploadHexFile(stdioFile);
+      }
+
+      return;
+    } // normal exercise
+
+
+    setRunnerStdioFilesState(prevFiles => [...prevFiles, stdioFile]);
+  };
+  /**
+   * Runner room websocket
+   */
+
+
+  const wsRunnerRoom = useRunnerRoomWebSocket({
+    exerciseRoomId
+  });
+  /**
+   * Stdio websocket
+   */
+
+  const wsStdio = useStdioWebSocket({
+    wsUri: (_a = wsRunnerRoom.roomConnectionInfo) === null || _a === void 0 ? void 0 : _a.wsUri,
+    roomToken: (_b = wsRunnerRoom.roomConnectionInfo) === null || _b === void 0 ? void 0 : _b.roomToken,
+    isTty: (_c = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _c === void 0 ? void 0 : _c.isTty,
+    onTextReceive: handleWsStdioTextReceive,
+    onFileReceive: handleWsStdioFileReceive
+  });
+  /**
+   * Handle submit code error.
+   */
+
+  const handleRunnerSubmitError = err => {
+    var _a, _b;
+
+    switch ((_a = err.detail) === null || _a === void 0 ? void 0 : _a.failCode) {
+      case 'room_type_mismatch':
+      case 'not_found_exercise_room':
+      case 'not_found_lecture_page':
+      case 'invalid_run_type':
+      case 'insufficient_permission':
+        setRunnerSubmitErrorDialog({
+          code: err.detail.failCode,
+          message: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.body.commonError'
+          }),
+          action: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.action.reload'
+          }),
+          onAction: () => window.location.reload()
+        });
+        break;
+
+      case 'invalid_room_token':
+        setRunnerSubmitErrorDialog({
+          code: err.detail.failCode,
+          message: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.body.networkError'
+          }),
+          action: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.action.reload'
+          }),
+          onAction: () => window.location.reload()
+        });
+        break;
+
+      case 'not_for_submit_grade':
+        setRunnerSubmitErrorDialog({
+          code: err.detail.failCode,
+          message: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.body.notForSubmitGrade'
+          }),
+          action: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.action.confirm'
+          })
+        });
+        break;
+
+      case 'expired_exercise_image':
+        setRunnerSubmitErrorDialog({
+          code: err.detail.failCode,
+          message: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.body.expiredExerciseImage'
+          }),
+          action: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.action.reload'
+          }),
+          onAction: () => window.location.reload()
+        });
+        break;
+
+      case 'not_prepared_room_forwarder':
+      case 'try_again':
+        setRunnerSubmitErrorDialog({
+          code: err.detail.failCode,
+          message: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.body.notPreparedRoom'
+          }),
+          action: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.action.confirm'
+          })
+        });
+        break;
+
+      case 'room_is_busy':
+        setRunnerSubmitErrorDialog({
+          code: err.detail.failCode,
+          message: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.body.roomIsBusy'
+          }),
+          action: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.action.confirm'
+          })
+        });
+        break;
+
+      case 'exceed_submit_grade_limit':
+        setRunnerSubmitErrorDialog({
+          code: err.detail.failCode,
+          message: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.body.exceedSubmitGradeLimit'
+          }),
+          action: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.action.confirm'
+          })
+        });
+        break;
+
+      default:
+        setRunnerSubmitErrorDialog({
+          code: ((_b = err === null || err === void 0 ? void 0 : err.detail) === null || _b === void 0 ? void 0 : _b.failCode) || 'unknown',
+          message: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.body.unknown'
+          }),
+          action: intl.formatMessage({
+            id: 'exerciseRunner.submitErrorDialog.action.confirm'
+          })
+        });
+        break;
+    }
+  };
+  /**
+   * Handle submit code to runner and run / grade.
+   */
+
+
+  const handleRunnerSubmit = async runType => {
+    var _a, _b, _c;
+
+    const readyExerciseImage = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage;
+    const roomToken = (_a = wsRunnerRoom.roomConnectionInfo) === null || _a === void 0 ? void 0 : _a.roomToken;
+
+    if (!readyExerciseImage || !roomToken) {
+      return;
+    }
+
+    setRunnerStdioFilesState([]);
+    setRunnerRunTypeState(runType);
+    setRunnerSubmitting(true);
+    return postOrgMaterialExerciseExerciseRunningSubmit({
+      roomToken,
+      runType,
+      exerciseImageId: readyExerciseImage.id,
+      vncWidth: readyExerciseImage.isVnc ? Math.max((_b = readyExerciseImage.defaultVncWidth) !== null && _b !== void 0 ? _b : 0, 640) : undefined,
+      vncHeight: readyExerciseImage.isVnc ? Math.max((_c = readyExerciseImage.defaultVncHeight) !== null && _c !== void 0 ? _c : 0, 480) : undefined
+    }).then(res => {
+      if (typeof onSubmit === 'function') {
+        onSubmit(res);
+      }
+    }).catch(err => {
+      setRunnerSubmitting(false);
+      handleRunnerSubmitError(err);
+
+      if (typeof onError === 'function') {
+        onError(err);
+      }
+    });
+  };
+  /**
+   * Handle runner to cancel running.
+   */
+
+
+  const handleRunnerCancel = async () => {
+    var _a;
+
+    const roomToken = (_a = wsRunnerRoom.roomConnectionInfo) === null || _a === void 0 ? void 0 : _a.roomToken;
+
+    if (roomToken) {
+      void postOrgMaterialExerciseExerciseRunningCancel({
+        roomToken
+      });
+    }
+  };
+  /**
+   * Handle runner to request code sync.
+   */
+
+
+  const handleRunnerSyncRequest = () => {
+    wsStdio.sendSync();
+  };
+  /**
+   * Handle input requests for arduino.
+   */
+
+
+  const handleXtermArduinoInputRequest = char => {
+    var _a, _b, _c;
+
+    switch (char) {
+      // backspace
+      case '\u007f':
+        (_a = xterm.current) === null || _a === void 0 ? void 0 : _a.write(' ');
+        arduinoTextBuffer.current = arduinoTextBuffer.current.slice(0, -1);
+        break;
+      // enter
+
+      case '\r':
+        if (arduinoTextBuffer.current.length) {
+          (_b = xterm.current) === null || _b === void 0 ? void 0 : _b.write('\r\n');
+          arduino.sendText(arduinoTextBuffer.current);
+          arduinoTextBuffer.current = '';
+        }
+
+        break;
+      // any char
+
+      default:
+        (_c = xterm.current) === null || _c === void 0 ? void 0 : _c.write(char);
+        arduinoTextBuffer.current = `${arduinoTextBuffer.current}${char}`;
+        break;
+    }
+  };
+  /**
+   * Handle input requests.
+   */
+
+
+  const handleXtermInputRequest = text => {
+    if (isArduinoExercise) {
+      handleXtermArduinoInputRequest(text);
+    } else {
+      wsStdio.sendText(text);
+    }
+  }; //
+  // Initialize Arduino devices.
+  //
+
+
+  React.useEffect(() => {
+    if (!isArduinoExercise) {
+      return;
+    }
+
+    void arduino.init();
+    return () => {
+      void arduino.destroy();
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [exercise]); //
+  // Destroy arduino client when unload window.
+  //
+
+  useEvent('beforeunload', handleArduinoDistroy, window); //
+  // Update runner room websocket state.
+  //
+
+  React.useEffect(() => setRunnerRoomWebSocketState(wsRunnerRoom.readyState), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [wsRunnerRoom.readyState]); //
+  // Update stdio websocket state.
+  //
+
+  React.useEffect(() => setStdioWebSocketState(wsStdio.readyState), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [wsStdio.readyState]); //
+  // Set runner submitting status to false,
+  // whenever runner room's running status is changed.
+  // (assume that sumbitting done when running status is changed)
+  //
+
+  React.useEffect(() => setRunnerSubmitting(false), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [wsRunnerRoom.isRunning]); //
+  // Auto focus terminal when running.
+  //
+
+  React.useEffect(() => {
+    if (wsRunnerRoom.isRunning) {
+      setTimeout(() => {
+        var _a;
+
+        return (_a = xterm.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }, 100);
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [wsRunnerRoom.isRunning]); //
+  // Bind runner run type to ref.
+  //
+
+  React.useEffect(() => {
+    runnerRunTypeRef.current = runnerRunTypeState;
+  }, [runnerRunTypeState]); //
+  // Update room connection info.
+  //
+
+  React.useEffect(() => setRunnerRunning(wsRunnerRoom.isRunning), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [wsRunnerRoom.isRunning]); //
+  // Update room connection info.
+  //
+
+  React.useEffect(() => setExerciseRunnerRoomConnectionInfo(wsRunnerRoom.roomConnectionInfo), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [wsRunnerRoom.roomConnectionInfo]); //
+  // handle send text request to runner stdio.
+  //
+
+  React.useEffect(() => {
+    const textSendSub = exerciseRunnerTextSend$.subscribe(wsStdio.sendText);
+    return () => {
+      textSendSub.unsubscribe();
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  /**
+   * Preview.
+   */
+
+  const renderPreview = () => {
+    if (exercisePreviewType === ExercisePreviewType.None) {
+      return null;
+    }
+
+    if (exercisePreviewDisplayMode !== ExercisePreviewDisplayMode.Mini) {
+      return null;
+    }
+
+    return React.createElement(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
+      children: exercisePreview,
+      initialWidth: exerciseContainerSize.width * EXERCISE_RUNNER_HORIZONTAL_RATIO.PREVIEW,
+      resizeHandles: ['e'],
+      minConstraints: [128, Infinity]
+    }));
+  };
+  /**
+   * Xterm
+   */
+
+
+  const renderXterm = () => {
+    return React.createElement(XtermLazy, {
+      isRunning: wsRunnerRoom.isRunning,
+      fontSize: editorPreferenceFontSize,
+      suppressSystemMessage: isArduinoExercise,
+      onInputRequest: handleXtermInputRequest,
+      onTtyResizeRequest: wsStdio.sendTtyResize,
+      locale: locale,
+      ref: xterm
+    });
+  };
+  /**
+   * Runner submit error dialog.
+   */
+
+
+  const renderRunnerSubmitErrorDialog = () => {
+    if (!runnerSubmitErrorDialog) {
+      return null;
+    }
+
+    return React.createElement(Dialog, {
+      type: "error",
+      title: intl.formatMessage({
+        id: 'exerciseRunner.submitErrorDialog.title'
+      }),
+      body: `${runnerSubmitErrorDialog.message}\n(error code: ${runnerSubmitErrorDialog.code})`,
+      onHide: () => setRunnerSubmitErrorDialog(null)
+    }, React.createElement(Dialog.ActionButton, {
+      children: runnerSubmitErrorDialog.action,
+      onClick: () => {
+        if (typeof runnerSubmitErrorDialog.onAction === 'function') {
+          runnerSubmitErrorDialog.onAction();
+        }
+
+        setRunnerSubmitErrorDialog(null);
+      }
+    }));
+  }; //
+  //
+  //
+
+
+  return React.createElement(StyledExerciseRunner, null, React.createElement(ExerciseRunnerContext.Provider, {
+    value: {
+      onSubmit: handleRunnerSubmit,
+      onCancel: handleRunnerCancel,
+      onSyncRequest: handleRunnerSyncRequest
+    }
+  }, React.createElement(ExerciseRunnerController, null), React.createElement(Flex, {
+    auto: true,
+    style: {
+      minHeight: 0
+    },
+    overflow: "hidden"
+  }, renderPreview(), renderXterm(), renderRunnerSubmitErrorDialog())));
+};
+
+var ExerciseRunner$1 = withExerciseIntlProvider(ExerciseRunner, {
+  en: phrasesEn,
+  ko: phrasesKo
+});
+
+export { ExerciseRunner$1 as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerContext.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { enums } from '@elice/types';
+export interface ExerciseRunnerContextValue {
+    /**
+     *
+     */
+    onSubmit: (runType: enums.ExerciseRunType) => Promise<void>;
+    /**
+     *
+     */
+    onSyncRequest: () => void;
+    /**
+     *
+     */
+    onCancel: () => void;
+}
+export declare const ExerciseRunnerContext: React.Context<ExerciseRunnerContextValue>;

package/es/components/material-exercise/exercise-runner/ExerciseRunnerContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const ExerciseRunnerContext = React.createContext(null);
+
+export { ExerciseRunnerContext };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerController.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseRunnerController: React.VFC;
+export default ExerciseRunnerController;

package/es/components/material-exercise/exercise-runner/ExerciseRunnerController.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Flex, Hspace } from '@elice/blocks';
+import { enums } from '@elice/types';
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+import { MATERIAL_DIVIDER_BORDER_VALUE } from '../../../constants/stylesheets.js';
+import { exerciseState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import ExerciseRunnerControllerArduinoStatusMessage from './ExerciseRunnerControllerArduinoStatusMessage.js';
+import ExerciseRunnerControllerButtonGroup from './ExerciseRunnerControllerButtonGroup.js';
+import ExerciseRunnerControllerRunningInfo from './ExerciseRunnerControllerRunningInfo.js';
+import ExerciseRunnerControllerStatusMessage from './ExerciseRunnerControllerStatusMessage.js';
+import ExerciseRunnerControllerTimer from './ExerciseRunnerControllerTimer.js';
+
+const RUNNER_CONTROLLER_HEIGHT = 50;
+const StyledController = styled.div.withConfig({
+  componentId: "sc-1fvokag-0"
+})(["display:flex;justify-content:space-between;align-items:center;padding:0.5rem 1rem;height:", "px;border-bottom:", ";"], RUNNER_CONTROLLER_HEIGHT, MATERIAL_DIVIDER_BORDER_VALUE);
+
+const ExerciseRunnerController = () => {
+  const {
+    materialExerciseId
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.Arduino;
+  return React.createElement(StyledController, null, React.createElement(Flex, {
+    align: "center"
+  }, React.createElement(ExerciseRunnerControllerButtonGroup, null), React.createElement(Hspace, {
+    width: 1
+  }), React.createElement(ExerciseRunnerControllerRunningInfo, null), React.createElement(ExerciseRunnerControllerTimer, null)), React.createElement(Flex, {
+    column: true,
+    align: "flex-end"
+  }, React.createElement(ExerciseRunnerControllerStatusMessage, null), isArduinoExercise ? React.createElement(ExerciseRunnerControllerArduinoStatusMessage, null) : null));
+};
+
+export { ExerciseRunnerController as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerArduinoStatusMessage.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseRunnerControllerArduinoStatusMessage: React.VFC;
+export default ExerciseRunnerControllerArduinoStatusMessage;