@elice/material-exercise 1.220803.0

package/cjs/components/material-exercise/exercise-menu/locales/en.json.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var phrasesEn = {"exerciseMenu.dropdown.button.tooltip":"More","exerciseMenu.dropdown.item.codeHistory":"Submit History","exerciseMenu.dropdown.item.environment":"Environment","exerciseMenu.dropdown.item.preference":"Editor Preferences","exerciseMenu.dropdown.item.room":"Code Sharing","exerciseMenu.dropdown.item.submitHistory":"Code History","exerciseMenu.reset.button.tooltip.disabled":"The file cannot be reset","exerciseMenu.reset.button.tooltip.enabled":"Reset the file","exerciseMenu.reset.confirmDialog.body":"Are you sure you want to clear all the code you wrote at current file and reset it?","exerciseMenu.reset.confirmDialog.cancel":"Cencel","exerciseMenu.reset.confirmDialog.confirm":"Confirm","exerciseMenu.reset.confirmDialog.title":"Reset the file","exerciseMenu.stdioFileBrowser.button.tooltip":"File","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"Files sent from your code\nappear here.","exerciseMenu.stdioFileBrowser.popover.header":"File"};
+
+module.exports = phrasesEn;

package/cjs/components/material-exercise/exercise-menu/locales/ko.json.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var phrasesKo = {"exerciseMenu.dropdown.button.tooltip":"더 보기","exerciseMenu.dropdown.item.codeHistory":"코드 수정 이력","exerciseMenu.dropdown.item.environment":"실습 환경","exerciseMenu.dropdown.item.preference":"에디터 설정","exerciseMenu.dropdown.item.room":"코드 공유","exerciseMenu.dropdown.item.submitHistory":"실행/제출 이력","exerciseMenu.reset.button.tooltip.disabled":"해당 파일은 초기화를 할 수 없습니다","exerciseMenu.reset.button.tooltip.enabled":"코드 초기화","exerciseMenu.reset.confirmDialog.body":"작성한 코드를 모두 지우고 초기화하시겠습니까?","exerciseMenu.reset.confirmDialog.cancel":"취소","exerciseMenu.reset.confirmDialog.confirm":"확인","exerciseMenu.reset.confirmDialog.title":"코드 초기화","exerciseMenu.stdioFileBrowser.button.tooltip":"파일","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"코드에서 전송한 파일이\n여기에 표시됩니다.","exerciseMenu.stdioFileBrowser.popover.header":"파일"};
+
+module.exports = phrasesKo;

package/cjs/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdown.d.ts

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

package/cjs/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdown.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var recoil = require('recoil');
+var recoil$1 = require('../context/recoil.js');
+var context = require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ExerciseMultilangDropdown = () => {
+  const {
+    materialExerciseId,
+    exerciseRoomId
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const multilangLanguages = recoil.useRecoilValue(recoil$1.exerciseMultilangLanguagesState(materialExerciseId));
+  const [multilangEnvironment, setMultilangEnvironment] = recoil.useRecoilState(recoil$1.exerciseMultilangEnvironmentState({
+    materialExerciseId,
+    exerciseRoomId
+  })); //
+  //
+  //
+
+  if (!multilangLanguages || !Object.keys(multilangLanguages !== null && multilangLanguages !== void 0 ? multilangLanguages : {}).length || !multilangEnvironment) {
+    return null;
+  }
+
+  return React__default["default"].createElement(blocks.Dropdown, {
+    type: "dark",
+    size: "tiny",
+    border: true,
+    placement: "bottom-end",
+    value: multilangEnvironment.language,
+    onChange: language => setMultilangEnvironment({
+      language
+    })
+  }, Object.keys(multilangLanguages).map(lang => React__default["default"].createElement("option", {
+    key: lang,
+    value: lang
+  }, multilangLanguages[lang].label)));
+};
+
+module.exports = ExerciseMultilangDropdown;

package/cjs/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdownLazy.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ExerciseMultilangDropdownLazy: () => JSX.Element;
+export default ExerciseMultilangDropdownLazy;

package/cjs/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdownLazy.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+var ExerciseMultilangDropdown = require('./ExerciseMultilangDropdown.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ExerciseMultilangDropdownLazy = () => {
+  return React__default["default"].createElement(React__default["default"].Suspense, {
+    fallback: null
+  }, React__default["default"].createElement(ExerciseMultilangDropdown, null));
+};
+
+module.exports = ExerciseMultilangDropdownLazy;

package/cjs/components/material-exercise/exercise-multilang-dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ExerciseMultilangDropdown } from './ExerciseMultilangDropdown';
+export { default as ExerciseMultilangDropdownLazy } from './ExerciseMultilangDropdownLazy';

package/cjs/components/material-exercise/exercise-multilang-dropdown/types.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Languages that support from multi lang env.
+ */
+export declare type MultilangLanguage = string | 'c' | 'cpp' | 'java' | 'python3' | 'javascript' | 'rust' | 'go' | 'ruby' | 'swift' | 'kotlin' | 'csharp' | 'fsharp' | 'scala' | 'lua' | 'php';
+/**
+ * Meta data of each language from `.languages.json`.
+ */
+export interface MultilangLanguagesJsonLangMeta {
+    /**
+     * @example 'C (GCC 9.3.0)'
+     */
+    label: string;
+    /**
+     * @example 'stdbuf -i0 -o0 -e0 ./main'
+     */
+    cmd: string;
+    /**
+     * @example 'gcc -o main -O2 -Wall -Wno-unused-result c/main.c'
+     */
+    preCmd: string;
+    /**
+     * @example 'c/'
+     */
+    rootDir: string;
+    /**
+     * @example ['c/main.c']
+     */
+    initialOpenFilelist: string[];
+}
+/**
+ * Parsed `.languages.json`.
+ */
+export declare type MultilangLanguagesJson = Record<MultilangLanguage, MultilangLanguagesJsonLangMeta>;
+/**
+ * Parsed `.environment.json`.
+ */
+export interface MultilangEnvironmentJson {
+    language: MultilangLanguage;
+}

package/cjs/components/material-exercise/exercise-preview/ExercisePreview.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.VFC<{}>;
+export default _default;

package/cjs/components/material-exercise/exercise-preview/ExercisePreview.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var React = require('react');
+var designTokens = require('@elice/design-tokens');
+var recoil = require('recoil');
+var styled = require('styled-components');
+var NoVncLazy = require('../../shared/no-vnc/NoVncLazy.js');
+var WebBrowser = require('../../shared/web-browser/WebBrowser.js');
+var recoil$1 = require('../context/recoil.js');
+var context = require('../context/context.js');
+var recoilTypes = require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+var ExerciseIntlProvider = require('../context/ExerciseIntlProvider.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
+var ExercisePreviewDisplayModeButton = require('./ExercisePreviewDisplayModeButton.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledExercisePreview = styled__default["default"].div.withConfig({
+  componentId: "sc-i6d1i5-0"
+})(["width:100%;height:100%;background-color:", ";"], designTokens.base.color.navy7);
+/**
+ * Preview result of exercise running.
+ * - NoVnc
+ * - Web browser
+ */
+
+const ExercisePreview = () => {
+  const {
+    materialExerciseId
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  const exercisePreviewType = recoil.useRecoilValue(recoil$1.exercisePreviewTypeState(materialExerciseId)); // runner states
+
+  const isSubmitting = recoil.useRecoilValue(recoil$1.exerciseRunnerSubmittingState);
+  const isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
+  const exerciseRunnerRoomConnectionInfo = recoil.useRecoilValue(recoil$1.exerciseRunnerRoomConnectionInfoState); // preview refs
+
+  const noVnc = React__default["default"].useRef(null);
+  const webBrowser = React__default["default"].useRef(null); //
+  // Action when exercise submitted.
+  //
+
+  React__default["default"].useEffect(() => {
+    var _a, _b;
+
+    if (!isSubmitting) {
+      return;
+    }
+
+    switch (exercisePreviewType) {
+      case recoilTypes.ExercisePreviewType.NoVnc:
+        (_a = noVnc.current) === null || _a === void 0 ? void 0 : _a.reset();
+        break;
+
+      case recoilTypes.ExercisePreviewType.WebBrowser:
+        (_b = webBrowser.current) === null || _b === void 0 ? void 0 : _b.reload();
+        break;
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isSubmitting]);
+  /**
+   * NoVnc
+   */
+
+  const renderNoVnc = () => {
+    if (exercisePreviewType !== recoilTypes.ExercisePreviewType.NoVnc) {
+      return null;
+    }
+
+    if (!(exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) || !exerciseRunnerRoomConnectionInfo) {
+      return null;
+    }
+
+    return React__default["default"].createElement(NoVncLazy, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
+      isRunning: isRunning,
+      readyExerciseImage: exercise.readyExerciseImage,
+      exercisePreviewDisplayModeButton: React__default["default"].createElement(ExercisePreviewDisplayModeButton, null),
+      ref: noVnc
+    }));
+  };
+  /**
+   * Web browser
+   */
+
+
+  const renderWebBrowser = () => {
+    if (exercisePreviewType !== recoilTypes.ExercisePreviewType.WebBrowser) {
+      return null;
+    }
+
+    if (!exerciseRunnerRoomConnectionInfo) {
+      return null;
+    }
+
+    return React__default["default"].createElement(WebBrowser, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
+      menuButtons: React__default["default"].createElement(ExercisePreviewDisplayModeButton, null),
+      ref: webBrowser
+    }));
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(StyledExercisePreview, null, renderNoVnc(), renderWebBrowser());
+};
+
+var ExercisePreview$1 = ExerciseIntlProvider.withExerciseIntlProvider(ExercisePreview, {
+  en: en,
+  ko: ko
+});
+
+module.exports = ExercisePreview$1;

package/cjs/components/material-exercise/exercise-preview/ExercisePreviewDisplayModeButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ExerciseMenuButtonProps } from "../../shared/exercise-menu-button";
+declare type ExercisePreviewDisplayModeButtonProps = Omit<ExerciseMenuButtonProps, 'icon' | 'onClick'>;
+declare const ExercisePreviewDisplayModeButton: React.ForwardRefExoticComponent<ExercisePreviewDisplayModeButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ExercisePreviewDisplayModeButton;

package/cjs/components/material-exercise/exercise-preview/ExercisePreviewDisplayModeButton.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var icons = require('@elice/icons');
+var recoil = require('recoil');
+var ExerciseMenuButton = require('../../shared/exercise-menu-button/ExerciseMenuButton.js');
+var recoil$1 = require('../context/recoil.js');
+require('../context/context.js');
+var recoilTypes = require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ExercisePreviewDisplayModeButton = React.forwardRef((props, ref) => {
+  var _a;
+
+  const intl = reactIntl.useIntl();
+  const [exercisePreviewDisplayMode, setExercisePreviewDisplayMode] = recoil.useRecoilState(recoil$1.exercisePreviewDisplayModeState);
+  /**
+   * Handle click.
+   */
+
+  const handleClick = () => {
+    setExercisePreviewDisplayMode(prevDisplayMode => prevDisplayMode === recoilTypes.ExercisePreviewDisplayMode.Mini ? recoilTypes.ExercisePreviewDisplayMode.SideBySide : recoilTypes.ExercisePreviewDisplayMode.Mini);
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(ExerciseMenuButton, Object.assign({}, props, {
+    icon: exercisePreviewDisplayMode === recoilTypes.ExercisePreviewDisplayMode.Mini ? icons.eilScreenHalf : icons.eilPanelRight,
+    title: ((_a = props.title) !== null && _a !== void 0 ? _a : exercisePreviewDisplayMode === recoilTypes.ExercisePreviewDisplayMode.Mini) ? intl.formatMessage({
+      id: 'exercisePreview.displayModeButton.sideBySide'
+    }) : intl.formatMessage({
+      id: 'exercisePreview.displayModeButton.mini'
+    }),
+    placement: "bottom-end",
+    onClick: handleClick,
+    ref: ref
+  }));
+});
+
+module.exports = ExercisePreviewDisplayModeButton;

package/cjs/components/material-exercise/exercise-preview/index.d.ts

@@ -0,0 +1 @@
+export { default as ExercisePreview } from './ExercisePreview';

package/cjs/components/material-exercise/exercise-preview/locales/en.json.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var phrasesEn = {"exercisePreview.displayModeButton.mini":"Toggle to Mini mode","exercisePreview.displayModeButton.sideBySide":"Toggle to Side-by-side mode"};
+
+module.exports = phrasesEn;

package/cjs/components/material-exercise/exercise-preview/locales/ko.json.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var phrasesKo = {"exercisePreview.displayModeButton.mini":"간소화 뷰로 전환","exercisePreview.displayModeButton.sideBySide":"사이드 뷰로 전환"};
+
+module.exports = phrasesKo;

package/cjs/components/material-exercise/exercise-rightpane/ExerciseRightpane.d.ts

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

package/cjs/components/material-exercise/exercise-rightpane/ExerciseRightpane.js

@@ -0,0 +1,130 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var icons = require('@elice/icons');
+var recoil = require('recoil');
+var styled = require('styled-components');
+var stylesheets = require('../../../constants/stylesheets.js');
+var recoil$1 = require('../context/recoil.js');
+require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+var ExerciseIntlProvider = require('../context/ExerciseIntlProvider.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
+var ExerciseRightpaneEditorPerference = require('./ExerciseRightpaneEditorPerference.js');
+var ExerciseRightpaneEnvironment = require('./ExerciseRightpaneEnvironment.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const HEADER_CLOSE_BUTTON_SIZE = '1.75rem';
+const StyledRightpaneWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-1tj3x49-0"
+})(["position:relative;display:flex;flex-direction:column;width:20rem;border-left:", ";color:white;background-color:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE, designTokens.base.color.navy9);
+const StyledPreferenceHeader = styled__default["default"].div.withConfig({
+  componentId: "sc-1tj3x49-1"
+})(["display:flex;flex-direction:column;padding:0.25rem 1rem;"]);
+const StyledPreferenceHeaderCloseButton = styled__default["default"](blocks.IconButton).withConfig({
+  componentId: "sc-1tj3x49-2"
+})(["flex:0 0 ", ";height:", " !important;"], HEADER_CLOSE_BUTTON_SIZE, HEADER_CLOSE_BUTTON_SIZE);
+const StyledRightpaneBodyWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-1tj3x49-3"
+})(["flex:1;padding:1rem;overflow-x:hidden;overflow-y:auto;", ""], stylesheets.getMaterialScrollBarCss({
+  width: '0.375rem',
+  borderRadius: '2px'
+}));
+
+const ExerciseRightpane = () => {
+  const [activeState, setActiveState] = recoil.useRecoilState(recoil$1.exerciseRightpaneActiveState);
+  /**
+   *
+   */
+
+  const handleClose = () => {
+    setActiveState(null);
+  };
+  /**
+   * Title of pane header.
+   */
+
+
+  const renderRightpaneHeaderTitle = () => {
+    switch (activeState) {
+      case 'environment':
+        return React__default["default"].createElement(reactIntl.FormattedMessage, {
+          id: "exerciseRightpane.environment.title"
+        });
+
+      case 'preference':
+        return React__default["default"].createElement(reactIntl.FormattedMessage, {
+          id: "exerciseRightpane.preference.title"
+        });
+
+      default:
+        return '';
+    }
+  };
+  /**
+   * Pane header.
+   */
+
+
+  const renderRightpaneHeader = () => {
+    return React__default["default"].createElement(StyledPreferenceHeader, null, React__default["default"].createElement(blocks.Flex, {
+      align: "center"
+    }, React__default["default"].createElement(blocks.Text, {
+      role: "white",
+      bold: true,
+      block: true
+    }, renderRightpaneHeaderTitle()), React__default["default"].createElement(StyledPreferenceHeaderCloseButton, {
+      icon: icons.eilMathsignMultiplyBasic,
+      size: "tight",
+      role: "white",
+      onClick: handleClose
+    })));
+  };
+  /**
+   * Pane content.
+   */
+
+
+  const renderRightpaneBodyContent = () => {
+    switch (activeState) {
+      case 'environment':
+        return React__default["default"].createElement(ExerciseRightpaneEnvironment, null);
+
+      case 'preference':
+        return React__default["default"].createElement(ExerciseRightpaneEditorPerference, null);
+
+      default:
+        return null;
+    }
+  }; //
+  //
+  //
+
+
+  if (!activeState) {
+    return null;
+  }
+
+  return React__default["default"].createElement(StyledRightpaneWrap, null, renderRightpaneHeader(), React__default["default"].createElement(blocks.Hr, {
+    marginStart: 0,
+    marginEnd: 0,
+    color: designTokens.base.color.navy6
+  }), React__default["default"].createElement(StyledRightpaneBodyWrap, null, renderRightpaneBodyContent()));
+};
+
+var ExerciseRightpane$1 = ExerciseIntlProvider.withExerciseIntlProvider(ExerciseRightpane, {
+  en: en,
+  ko: ko
+});
+
+module.exports = ExerciseRightpane$1;

package/cjs/components/material-exercise/exercise-rightpane/ExerciseRightpaneEditorPerference.d.ts

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

package/cjs/components/material-exercise/exercise-rightpane/ExerciseRightpaneEditorPerference.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var recoil = require('recoil');
+require('../../shared/monaco-editor/MonacoEditorLazy.js');
+var MonacoEditorPerferenceForm = require('../../shared/monaco-editor/MonacoEditorPerferenceForm.js');
+require('monaco-editor/esm/vs/editor/editor.api');
+require('../../shared/monaco-editor/constants/monaco/preferences.js');
+var recoil$1 = require('../context/recoil.js');
+var context = require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ExerciseRightpaneEditorPerference = () => {
+  const {
+    locale
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const [preference, setPreference] = recoil.useRecoilState(recoil$1.exerciseEditorPreferenceState);
+  return React__default["default"].createElement(MonacoEditorPerferenceForm, {
+    value: preference,
+    locale: locale,
+    onChange: setPreference
+  });
+}; //
+
+module.exports = ExerciseRightpaneEditorPerference;

package/cjs/components/material-exercise/exercise-rightpane/ExerciseRightpaneEnvironment.d.ts

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

package/cjs/components/material-exercise/exercise-rightpane/ExerciseRightpaneEnvironment.js

@@ -0,0 +1,113 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var recoil = require('recoil');
+var styled = require('styled-components');
+var recoil$1 = require('../context/recoil.js');
+var context = require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledEnvironmentList = styled__default["default"].ul.withConfig({
+  componentId: "sc-208wkr-0"
+})(["margin:0;padding:0;list-style:none;> li{margin-bottom:2rem;&:last-of-type{margin-bottom:0;}}"]);
+
+const ExerciseRightpaneEnvironment = () => {
+  const intl = reactIntl.useIntl();
+  const {
+    materialExerciseId
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const materialExercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  const readyExerciseImage = materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise.readyExerciseImage;
+  /**
+   *
+   */
+
+  const exerciseEnvironment = React__default["default"].useMemo(() => readyExerciseImage ? [{
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.cpuLimit.name'
+    }),
+    value: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.cpuLimit.value'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.timeLimit.name'
+    }),
+    value: intl.formatNumber(readyExerciseImage.timeLimit / 1000, {
+      style: 'unit',
+      unit: 'second',
+      unitDisplay: 'short'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.memoryLimit.name'
+    }),
+    value: intl.formatNumber(readyExerciseImage.memoryLimit / 1024 / 1024, {
+      style: 'unit',
+      unit: 'megabyte',
+      unitDisplay: 'short'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.isVnc.name'
+    }),
+    value: readyExerciseImage.isVnc ? intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.common.value.true'
+    }) : intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.common.value.false'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.httpPort.name'
+    }),
+    value: readyExerciseImage.httpPort ? intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.httpPort.value.true'
+    }) : intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.httpPort.value.false'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.isGpu.name'
+    }),
+    value: readyExerciseImage.isGpu ? intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.common.value.true'
+    }) : intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.common.value.false'
+    })
+  }] : null, [readyExerciseImage, intl]); //
+  //
+  //
+
+  if (!exerciseEnvironment) {
+    return null;
+  }
+
+  return React__default["default"].createElement(StyledEnvironmentList, null, exerciseEnvironment.map(({
+    name,
+    value
+  }) => React__default["default"].createElement("li", {
+    key: name
+  }, React__default["default"].createElement(blocks.Text, {
+    role: "navy",
+    block: true,
+    size: "small"
+  }, name), React__default["default"].createElement(blocks.Vspace, {
+    height: 0.5
+  }), React__default["default"].createElement(blocks.Text, {
+    role: "white",
+    bold: true,
+    block: true,
+    size: "small"
+  }, value))));
+};
+
+module.exports = ExerciseRightpaneEnvironment;

package/cjs/components/material-exercise/exercise-rightpane/index.d.ts

@@ -0,0 +1 @@
+export { default as ExerciseRightpane } from './ExerciseRightpane';

package/cjs/components/material-exercise/exercise-rightpane/locales/en.json.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var phrasesEn = {"exerciseRightpane.environment.item.common.value.false":"No","exerciseRightpane.environment.item.common.value.true":"Yes","exerciseRightpane.environment.item.cpuLimit.name":"CPU Limit","exerciseRightpane.environment.item.cpuLimit.value":"3 cores","exerciseRightpane.environment.item.httpPort.name":"HTTP Port","exerciseRightpane.environment.item.httpPort.value.false":"Not enabled","exerciseRightpane.environment.item.httpPort.value.true":"8080","exerciseRightpane.environment.item.isGpu.name":"GPU Enabled","exerciseRightpane.environment.item.isVnc.name":"VNC Enabled","exerciseRightpane.environment.item.memoryLimit.name":"Memory Limit","exerciseRightpane.environment.item.timeLimit.name":"Time Limit","exerciseRightpane.environment.title":"Environment","exerciseRightpane.preference.title":"Editor Preferences"};
+
+module.exports = phrasesEn;

package/cjs/components/material-exercise/exercise-rightpane/locales/ko.json.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var phrasesKo = {"exerciseRightpane.environment.item.common.value.false":"아니오","exerciseRightpane.environment.item.common.value.true":"예","exerciseRightpane.environment.item.cpuLimit.name":"CPU 제한","exerciseRightpane.environment.item.cpuLimit.value":"3 코어","exerciseRightpane.environment.item.httpPort.name":"HTTP 포트","exerciseRightpane.environment.item.httpPort.value.false":"연결 안 함","exerciseRightpane.environment.item.httpPort.value.true":"8080","exerciseRightpane.environment.item.isGpu.name":"GPU 사용","exerciseRightpane.environment.item.isVnc.name":"VNC 사용","exerciseRightpane.environment.item.memoryLimit.name":"메모리 제한","exerciseRightpane.environment.item.timeLimit.name":"시간 제한","exerciseRightpane.environment.title":"실습 환경","exerciseRightpane.preference.title":"에디터 설정"};
+
+module.exports = phrasesKo;

package/cjs/components/material-exercise/exercise-room/ExerciseRoom.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ExerciseRoomProps {
+    locale?: string;
+    onHide: () => void;
+}
+declare const _default: React.VFC<React.PropsWithChildren<ExerciseRoomProps>>;
+export default _default;