@elice/material-exercise 1.231107.0-gstta.1 → 1.231128.0

package/cjs/components/material-exercise/MaterialExercise.js

@@ -6,11 +6,13 @@ var React = require('react');
 var reactIntl = require('react-intl');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
+var icons = require('@elice/icons');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var recoil = require('recoil');
 var stylesheets = require('../../constants/stylesheets.js');
+var ExerciseFileTabsFileTreeButton = require('./exercise-file-tabs/ExerciseFileTabsFileTreeButton.js');
 var recoil$1 = require('./context/recoil.js');
-require('./context/context.js');
+var context = require('./context/context.js');
 var recoilTypes = require('./context/recoilTypes.js');
 var subjects = require('./context/subjects.js');
 var ExerciseProvider = require('./context/ExerciseProvider.js');
@@ -19,6 +21,9 @@ require('./exercise-file-tabs/ExerciseFileTabs.js');
 var ExerciseFileTabsLazy = require('./exercise-file-tabs/ExerciseFileTabsLazy.js');
 require('./exercise-file-tree/ExerciseFileTree.js');
 var ExerciseFileTreeLazy = require('./exercise-file-tree/ExerciseFileTreeLazy.js');
+var ExerciseMenu = require('./exercise-menu/ExerciseMenu.js');
+require('react-use');
+var ExerciseMultilangDropdownLazy = require('./exercise-multilang-dropdown/ExerciseMultilangDropdownLazy.js');
 var ExercisePreview = require('./exercise-preview/ExercisePreview.js');
 var ExerciseRightpane = require('./exercise-rightpane/ExerciseRightpane.js');
 var ExerciseRunner = require('./exercise-runner/ExerciseRunner.js');
@@ -36,6 +41,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * Material exercise.
  */
 var MaterialExercise = React.forwardRef(function (props, ref) {
+  var intl = reactIntl.useIntl();
+  var _React$useContext = React__default["default"].useContext(context.ExerciseContext),
+    onReferenceDocsToggle = _React$useContext.onReferenceDocsToggle;
   var _useRecoilValue = recoil.useRecoilValue(recoil$1.exerciseContainerSizeState),
     width = _useRecoilValue.width,
     height = _useRecoilValue.height;
@@ -56,12 +64,48 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
       resizeHandles: ['e']
     }), React__default["default"].createElement(MaterialExercise_styled.StyledExerciseFileTreeWrap, null, React__default["default"].createElement(ExerciseFileTreeLazy["default"], null))));
   };
+  /**
+   * File tree toggle button
+   */
+  var renderExerciseFileTreeButton = function renderExerciseFileTreeButton() {
+    return React__default["default"].createElement(ExerciseFileTabsFileTreeButton["default"], null);
+  };
   /**
    * File tabs
    */
   var renderExerciseFileTabs = function renderExerciseFileTabs() {
     return React__default["default"].createElement(MaterialExercise_styled.StyledExerciseTabsWrap, null, React__default["default"].createElement(ExerciseFileTabsLazy["default"], null));
   };
+  /**
+   * reference docs toggle button
+   */
+  var renderExerciseReferenceDocsToggleButton = function renderExerciseReferenceDocsToggleButton() {
+    if (typeof onReferenceDocsToggle !== 'function') {
+      return null;
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Button, {
+      size: "micro",
+      role: "navy3",
+      style: {
+        width: '100%'
+      },
+      onClick: onReferenceDocsToggle
+    }, React__default["default"].createElement(blocks.Icon, {
+      icon: icons.eilClassroom
+    }), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.25
+    }), intl.formatMessage({
+      id: 'materialExercise.button.referenceDocs'
+    })), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.5
+    }));
+  };
+  /**
+   * Menu
+   */
+  var renderExerciseMenu = function renderExerciseMenu() {
+    return React__default["default"].createElement(MaterialExercise_styled.StyledExerciseTabMenuWrap, null, renderExerciseReferenceDocsToggleButton(), React__default["default"].createElement(ExerciseMultilangDropdownLazy["default"], null), React__default["default"].createElement(ExerciseMenu["default"], null));
+  };
   /**
    * Code editor and file viewer
    */
@@ -92,7 +136,7 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
     if (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.isEditorDisabled) {
       return null;
     }
-    return React__default["default"].createElement(MaterialExercise_styled.StyledExerciseMain, null, renderExerciseFileTree(), React__default["default"].createElement(MaterialExercise_styled.StyledExerciseFileAndTabWrap, null, React__default["default"].createElement(MaterialExercise_styled.StyledExerciseTabBar, null, renderExerciseFileTabs()), renderExerciseFile()), React__default["default"].createElement(ExerciseRightpane["default"], null));
+    return React__default["default"].createElement(MaterialExercise_styled.StyledExerciseMain, null, renderExerciseFileTree(), React__default["default"].createElement(MaterialExercise_styled.StyledExerciseFileAndTabWrap, null, React__default["default"].createElement(MaterialExercise_styled.StyledExerciseTabBar, null, renderExerciseFileTreeButton(), renderExerciseFileTabs(), renderExerciseMenu()), renderExerciseFile()), React__default["default"].createElement(ExerciseRightpane["default"], null));
   };
   /**
    * Exercise Runner

package/cjs/components/material-exercise/MaterialExercise.styled.js

@@ -55,7 +55,7 @@ var StyledExerciseTabBar = styled__default["default"].div.withConfig({
 var StyledExerciseTabsWrap = styled__default["default"].div.withConfig({
   componentId: "sc-9joi7g-5"
 })(["flex:1;min-width:0;"]);
-styled__default["default"].div.withConfig({
+var StyledExerciseTabMenuWrap = styled__default["default"].div.withConfig({
   componentId: "sc-9joi7g-6"
 })(["display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;background-color:", ";"], designTokens.base.color.navy8);
 // ========== Exercise FileTree ==========
@@ -81,5 +81,6 @@ exports.StyledExerciseFileWrap = StyledExerciseFileWrap;
 exports.StyledExerciseMain = StyledExerciseMain;
 exports.StyledExerciseRunnerWrap = StyledExerciseRunnerWrap;
 exports.StyledExerciseTabBar = StyledExerciseTabBar;
+exports.StyledExerciseTabMenuWrap = StyledExerciseTabMenuWrap;
 exports.StyledExerciseTabsWrap = StyledExerciseTabsWrap;
 exports.StyledxerciseFileTreeContaner = StyledxerciseFileTreeContaner;

package/cjs/components/material-exercise/context/ExerciseIntlProvider.js

@@ -27,5 +27,22 @@ var withExerciseIntlProvider = function withExerciseIntlProvider(Component, phra
     });
   };
 };
+/**
+ *
+ */
+var withForwardRefExerciseIntlProvider = function withForwardRefExerciseIntlProvider(Component, phrases) {
+  return React.forwardRef(function (props, ref) {
+    var _useContext2 = React.useContext(context.ExerciseContext),
+      locale = _useContext2.locale;
+    return React__default["default"].createElement(materialSharedUtils.MaterialIntlProvider, {
+      children: React__default["default"].createElement(Component, Object.assign({}, props, {
+        ref: ref
+      })),
+      locale: locale,
+      phrases: phrases
+    });
+  });
+};
 
 exports.withExerciseIntlProvider = withExerciseIntlProvider;
+exports.withForwardRefExerciseIntlProvider = withForwardRefExerciseIntlProvider;

package/cjs/components/material-exercise/context/ExerciseProviderNoImage.js

@@ -26,6 +26,22 @@ var ExerciseProviderNoImage = function ExerciseProviderNoImage(_ref) {
     buttonText = _ref.buttonText,
     onButtonClick = _ref.onButtonClick;
   var intl = reactIntl.useIntl();
+  /**
+   * render action button
+   */
+  var renderActionButton = function renderActionButton() {
+    if (typeof onButtonClick !== 'function') {
+      return null;
+    }
+    return React__default["default"].createElement(blocks.Button, {
+      onClick: onButtonClick
+    }, buttonText || intl.formatMessage({
+      id: 'exerciseContext.provider.noImage.button'
+    }));
+  };
+  //
+  //
+  //
   return React__default["default"].createElement(StyledProviderNoImage, null, React__default["default"].createElement(blocks.SafeImage, {
     src: imageSrc,
     defaultSrc: "https://static.elice.io/elice-material/exercise/empty-code-purple.png",
@@ -40,11 +56,7 @@ var ExerciseProviderNoImage = function ExerciseProviderNoImage(_ref) {
     role: "white"
   }, text || intl.formatMessage({
     id: 'exerciseContext.provider.noImage.title'
-  }))), React__default["default"].createElement(blocks.Button, {
-    onClick: onButtonClick
-  }, buttonText || intl.formatMessage({
-    id: 'exerciseContext.provider.noImage.button'
-  })));
+  }))), renderActionButton());
 };
 //
 //

package/cjs/components/material-exercise/exercise-code-history/ExerciseCodeHistory.js

@@ -0,0 +1,163 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var dayjs = require('dayjs');
+var recoil = require('recoil');
+var ExerciseVersionList = require('../../shared/exercise-version-list/ExerciseVersionList.js');
+var ExerciseVersionListItem = require('../../shared/exercise-version-list/ExerciseVersionListItem.js');
+var MaterialModal = require('../../shared/material-modal/MaterialModal.js');
+var MonacoEditorLazy = require('../../shared/monaco-editor/MonacoEditorLazy.js');
+require('../../shared/monaco-editor/MonacoEditorPerferenceForm.js');
+require('monaco-editor/esm/vs/editor/editor.api');
+require('../../shared/monaco-editor/constants/monaco/preferences.js');
+require('react-use');
+require('socket.io-client');
+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');
+require('../../../constants/arduino.js');
+require('@elice/api-client');
+require('@elice/material-shared-utils');
+require('@elice/websocket');
+require('humps');
+var useUsercodeHistory = require('../../../hooks/useUsercodeHistory.js');
+require('lodash/debounce');
+require('ot-text-unicode');
+require('random-words');
+require('unicount');
+var ExerciseIntlProvider = require('../context/ExerciseIntlProvider.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
+var ExerciseCodeHistory_styled = require('./ExerciseCodeHistory.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+
+var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
+  var onHide = _ref.onHide,
+    onLoadVersionButtonClick = _ref.onLoadVersionButtonClick;
+  var intl = reactIntl.useIntl();
+  var _React$useContext = React__default["default"].useContext(context.ExerciseContext),
+    exerciseRoomId = _React$useContext.exerciseRoomId;
+  var activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  var preference = recoil.useRecoilValue(recoil$1.exerciseEditorPreferenceState);
+  var _useUsercodeHistory = useUsercodeHistory.useUsercodeHistory(exerciseRoomId, activeFilename),
+    doc = _useUsercodeHistory.doc,
+    ops = _useUsercodeHistory.ops,
+    version = _useUsercodeHistory.version,
+    latestVersion = _useUsercodeHistory.latestVersion,
+    hasMoreVersion = _useUsercodeHistory.hasMoreVersion,
+    changeVersion = _useUsercodeHistory.changeVersion,
+    loadMoreVersions = _useUsercodeHistory.loadMoreVersions;
+  /**
+   *
+   */
+  var renderVersionList = function renderVersionList() {
+    return React__default["default"].createElement(ExerciseVersionList["default"], null, ops.map(function (op) {
+      return React__default["default"].createElement(ExerciseVersionListItem["default"], {
+        key: op.version,
+        selected: version === op.version,
+        onClick: function onClick() {
+          changeVersion(op.version);
+        }
+      }, React__default["default"].createElement(blocks.Text, {
+        role: "gray3",
+        size: "small"
+      }, intl.formatMessage({
+        id: 'exerciseCodeHistory.op.version'
+      }, {
+        version: op.version,
+        datetime: dayjs__default["default"](op.createdDatetime).format('YYYY.M.DD hh:mm a')
+      })));
+    }), hasMoreVersion ? React__default["default"].createElement(ExerciseVersionListItem["default"], {
+      onClick: loadMoreVersions,
+      style: {
+        justifyContent: 'center'
+      }
+    }, React__default["default"].createElement(blocks.Text, {
+      role: "white",
+      size: "small"
+    }, intl.formatMessage({
+      id: 'exerciseCodeHistory.button.load.more'
+    }))) : null);
+  };
+  /**
+   *
+   */
+  var rednerVersionControlColumn = function rednerVersionControlColumn() {
+    return React__default["default"].createElement(ExerciseCodeHistory_styled.StyledVersionsWrapper, null, React__default["default"].createElement(ExerciseCodeHistory_styled.StyledVersionRangeInputWrapper, null, React__default["default"].createElement(ExerciseCodeHistory_styled.StyledVersionRangeInput, {
+      type: "range",
+      min: latestVersion ? latestVersion - ops.length + 1 : 0,
+      max: latestVersion !== null && latestVersion !== void 0 ? latestVersion : 0,
+      value: version !== null && version !== void 0 ? version : 0,
+      onChange: function onChange(e) {
+        changeVersion(parseInt(e.target.value, 10));
+      }
+    })), renderVersionList());
+  };
+  /**
+   *
+   */
+  var renderEditorColumn = function renderEditorColumn() {
+    if (!activeFilename) {
+      return null;
+    }
+    var uniqueFilePath = "code-history/".concat(exerciseRoomId, "/v").concat(version !== null && version !== void 0 ? version : 0);
+    var editorFilename = "".concat(uniqueFilePath, "/").concat(activeFilename);
+    return React__default["default"].createElement(ExerciseCodeHistory_styled.StyledEditorWrapper, null, React__default["default"].createElement(ExerciseCodeHistory_styled.StyledFileNameBox, {
+      role: "white"
+    }, activeFilename), React__default["default"].createElement(MonacoEditorLazy["default"], {
+      key: editorFilename,
+      defaultValue: doc,
+      filename: editorFilename,
+      preference: Object.assign(Object.assign({}, preference), {
+        readOnly: true,
+        scrollBeyondLastLine: false
+      })
+    }));
+  };
+  /**
+   *
+   */
+  var renderFooterButton = function renderFooterButton() {
+    if (typeof onLoadVersionButtonClick !== 'function') {
+      return;
+    }
+    return React__default["default"].createElement(blocks.Button, {
+      size: "small",
+      role: "primary",
+      onClick: function onClick() {
+        onLoadVersionButtonClick(doc);
+      }
+    }, intl.formatMessage({
+      id: 'exerciseCodeHistory.button.load.selectedVersions'
+    }));
+  };
+  //
+  //
+  //
+  return React__default["default"].createElement(MaterialModal["default"], {
+    title: intl.formatMessage({
+      id: 'exerciseCodeHistory.title'
+    }),
+    onHide: onHide,
+    footer: renderFooterButton()
+  }, React__default["default"].createElement(ExerciseCodeHistory_styled.StyledModalContent, null, rednerVersionControlColumn(), renderEditorColumn()));
+};
+//
+//
+//
+var ExerciseCodeHistory$1 = ExerciseIntlProvider.withExerciseIntlProvider(ExerciseCodeHistory, {
+  en: en["default"],
+  ko: ko["default"]
+});
+
+exports["default"] = ExerciseCodeHistory$1;

package/cjs/components/material-exercise/exercise-code-history/ExerciseCodeHistory.styled.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var cssInputRangeTrack = styled.css(["width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease;"]);
+var cssInputRangeThumb = styled.css(["height:1rem;width:1rem;border-radius:50%;background:", ";cursor:pointer;"], designTokens.base.color.primary6);
+var StyledModalContent = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-1auppml-0"
+})(["position:absolute;width:100%;height:100%;overflow:hidden;"]);
+var StyledVersionRangeInput = styled__default["default"].input.withConfig({
+  componentId: "sc-1auppml-1"
+})(["-webkit-appearance:none;margin:0.5rem 0;width:100%;cursor:pointer;&:focus{outline:none;}&::-webkit-slider-runnable-track{background:", ";", ";}&::-webkit-slider-thumb{-webkit-appearance:none;margin-top:calc((0.375rem - 1rem) / 2);", ";}&:focus::-webkit-slider-runnable-track{background:rgba(", ",0.05);}&::-moz-range-track{background:", ";", ";}&::-moz-range-thumb{", ";}"], designTokens.base.color.navy9, cssInputRangeTrack, cssInputRangeThumb, designTokens.base.color.navy9, designTokens.base.color.navy9, cssInputRangeTrack, cssInputRangeThumb);
+var StyledVersionsWrapper = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-1auppml-2"
+})(["flex-direction:column;flex:1 1.75 25rem;position:relative;height:100%;border-right:1px solid ", ";"], designTokens.base.color.navy9);
+var StyledVersionRangeInputWrapper = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-1auppml-3"
+})(["height:3rem;padding:1rem;border-bottom:1px solid ", ";"], designTokens.base.color.navy9);
+var StyledEditorWrapper = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-1auppml-4"
+})(["flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll;"]);
+var StyledFileNameBox = styled__default["default"](blocks.Text).withConfig({
+  componentId: "sc-1auppml-5"
+})(["min-height:3rem;height:3rem;line-height:3rem;padding-left:1rem;border-bottom:1px solid ", ";"], designTokens.base.color.navy9);
+
+exports.StyledEditorWrapper = StyledEditorWrapper;
+exports.StyledFileNameBox = StyledFileNameBox;
+exports.StyledModalContent = StyledModalContent;
+exports.StyledVersionRangeInput = StyledVersionRangeInput;
+exports.StyledVersionRangeInputWrapper = StyledVersionRangeInputWrapper;
+exports.StyledVersionsWrapper = StyledVersionsWrapper;
+exports.cssInputRangeThumb = cssInputRangeThumb;
+exports.cssInputRangeTrack = cssInputRangeTrack;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var phrasesEn = {"exerciseCodeHistory.button.load.more":"Load more","exerciseCodeHistory.button.load.selectedVersions":"Load selected versions","exerciseCodeHistory.op.version":"Version {version} {datetime}","exerciseCodeHistory.title":"Code revision history"};
+
+exports["default"] = phrasesEn;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var phrasesKo = {"exerciseCodeHistory.button.load.more":"더 불러오기","exerciseCodeHistory.button.load.selectedVersions":"선택 버전 불러오기","exerciseCodeHistory.op.version":"버전 {version} {datetime}","exerciseCodeHistory.title":"코드 수정 이력"};
+
+exports["default"] = phrasesKo;

package/cjs/components/material-exercise/exercise-file-tabs/ExerciseFileTabs.js

@@ -44,7 +44,13 @@ var ExerciseFileTabs = function ExerciseFileTabs() {
     openedTabs = _useRecoilState4[0],
     setOpenedTabs = _useRecoilState4[1];
   var handleCloseTab = function handleCloseTab(path) {
-    //
+    var updatedTabs = openedTabs.filter(function (tab) {
+      return tab !== path;
+    });
+    setOpenedTabs(updatedTabs);
+    if (activeFilename === path) {
+      setActiveFilename(updatedTabs.length > 0 ? updatedTabs[0] : '');
+    }
   };
   var handleTabOrderChange = function handleTabOrderChange(currentIndex, movedIndex) {
     var newOpenedTabs = _rollupPluginBabelHelpers.toConsumableArray(openedTabs);

package/cjs/components/material-exercise/exercise-file-tabs/ExerciseFileTabsFileTreeButton.js

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var reactIntl = require('react-intl');
+var reactUse = require('react-use');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var icons = require('@elice/icons');
+var types = require('@elice/types');
+var utils = require('@elice/utils');
+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');
+var ExerciseIntlProvider = require('../context/ExerciseIntlProvider.js');
+var fileTreeButton_en = require('./locales/fileTreeButton.en.json.js');
+var fileTreeButton_ko = require('./locales/fileTreeButton.ko.json.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);
+
+var ICON_BUTTON_SIZE = '2.25rem';
+var StyledFileTreeButton = styled__default["default"](blocks.IconButton).withConfig({
+  componentId: "sc-ohtsjn-0"
+})(["width:", " !important;height:", " !important;border-right:1px solid ", " !important;background-color:", " !important;&:hover{background-color:", " !important;}"], ICON_BUTTON_SIZE, ICON_BUTTON_SIZE, designTokens.base.color.navy7, function (props) {
+  return props.active ? designTokens.base.color.navy8 : designTokens.base.color.navy8;
+}, designTokens.base.color.navy9);
+var ExerciseFileTabsFileTreeButton = React.forwardRef(function (_, ref) {
+  var intl = reactIntl.useIntl();
+  var _React$useContext = React__default["default"].useContext(context.ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId;
+  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  var _useRecoilState = recoil.useRecoilState(recoil$1.exerciseFileTreeOpenedState),
+    _useRecoilState2 = _rollupPluginBabelHelpers.slicedToArray(_useRecoilState, 2),
+    exerciseFileTreeOpened = _useRecoilState2[0],
+    setExerciseFileTreeOpened = _useRecoilState2[1];
+  /**
+   * Handle click.
+   */
+  var handleClick = function handleClick() {
+    setExerciseFileTreeOpened(function (prev) {
+      return !prev;
+    });
+  };
+  //
+  // apply default file tree opened state.
+  //
+  React__default["default"].useEffect(function () {
+    var _a;
+    var exerciseUiConfig = utils.eliceApiUiConfigNormalizeHelper('materialExercise', (_a = exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig) !== null && _a !== void 0 ? _a : {});
+    setExerciseFileTreeOpened(exerciseUiConfig.editorFileTreeDefaultStatus === types.enums.ExerciseUiConfigEditorFileTreeDefaultStatus.Open);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [exercise]);
+  //
+  //
+  //
+  var _useHover = reactUse.useHover(function (isHovering) {
+      return React__default["default"].createElement("div", null, React__default["default"].createElement(blocks.Tooltip, {
+        title: exerciseFileTreeOpened ? intl.formatMessage({
+          id: 'exerciseFileTab.fileTreeButton.tooltip.close'
+        }) : intl.formatMessage({
+          id: 'exerciseFileTab.fileTreeButton.tooltip.open'
+        }),
+        placement: "bottom-start"
+      }, React__default["default"].createElement(StyledFileTreeButton, {
+        icon: isHovering ? icons.eilArrowRightwardsDouble : icons.eilFolder,
+        iconRotate: !isHovering ? 0 : exerciseFileTreeOpened ? 180 : 0,
+        role: "gray3",
+        size: "tiny",
+        transparent: true,
+        border: false,
+        hasBorderRadius: false,
+        active: exerciseFileTreeOpened,
+        onClick: handleClick,
+        ref: ref
+      })));
+    }),
+    _useHover2 = _rollupPluginBabelHelpers.slicedToArray(_useHover, 1),
+    el = _useHover2[0];
+  return (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.editorFileTreeDefaultStatus) === types.enums.ExerciseUiConfigEditorFileTreeDefaultStatus.Hide ? null : el;
+});
+//
+//
+//
+var ExerciseFileTabsFileTreeButton$1 = ExerciseIntlProvider.withForwardRefExerciseIntlProvider(ExerciseFileTabsFileTreeButton, {
+  en: fileTreeButton_en["default"],
+  ko: fileTreeButton_ko["default"]
+});
+
+exports["default"] = ExerciseFileTabsFileTreeButton$1;

package/cjs/components/material-exercise/exercise-file-tabs/locales/fileTreeButton.en.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var phrasesEn = {"exerciseFileTab.fileTreeButton.tooltip.close":"Close Filetree","exerciseFileTab.fileTreeButton.tooltip.open":"Open Filetree"};
+
+exports["default"] = phrasesEn;

package/cjs/components/material-exercise/exercise-file-tabs/locales/fileTreeButton.ko.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var phrasesKo = {"exerciseFileTab.fileTreeButton.tooltip.close":"파일 트리 닫기","exerciseFileTab.fileTreeButton.tooltip.open":"파일 트리 열기"};
+
+exports["default"] = phrasesKo;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenu.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var designTokens = require('@elice/design-tokens');
+var types = require('@elice/types');
+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');
+var ExerciseIntlProvider = require('../context/ExerciseIntlProvider.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
+var ExerciseMenuArduinoAgentModalButton = require('./ExerciseMenuArduinoAgentModalButton.js');
+var ExerciseMenuArduinoSettings = require('./ExerciseMenuArduinoSettings.js');
+var ExerciseMenuDropdown = require('./ExerciseMenuDropdown.js');
+var ExerciseMenuReset = require('./ExerciseMenuReset.js');
+var ExerciseMenuStdioFileBrowser = require('./ExerciseMenuStdioFileBrowser.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);
+
+var StyledExerciseMenuWrapper = styled__default["default"].div.withConfig({
+  componentId: "sc-1gf6m87-0"
+})(["display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;height:2.25rem;gap:0.5rem;background-color:", ";"], designTokens.base.color.navy8);
+var ExerciseMenu = function ExerciseMenu() {
+  var _React$useContext = React__default["default"].useContext(context.ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId;
+  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === types.enums.ExerciseEnvType.Arduino;
+  //
+  //
+  //
+  return React__default["default"].createElement(StyledExerciseMenuWrapper, null, isArduinoExercise ? React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(ExerciseMenuArduinoAgentModalButton["default"], null), React__default["default"].createElement(ExerciseMenuArduinoSettings["default"], null)) : React__default["default"].createElement(ExerciseMenuStdioFileBrowser["default"], null), React__default["default"].createElement(ExerciseMenuReset["default"], null), React__default["default"].createElement(ExerciseMenuDropdown["default"], null));
+};
+var ExerciseMenu$1 = ExerciseIntlProvider.withExerciseIntlProvider(ExerciseMenu, {
+  en: en["default"],
+  ko: ko["default"]
+});
+
+exports["default"] = ExerciseMenu$1;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuArduinoAgentModalButton.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var icons = require('@elice/icons');
+var recoil = require('recoil');
+var recoil$1 = require('../context/recoil.js');
+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 ExerciseMenuArduinoAgentModalButton = function ExerciseMenuArduinoAgentModalButton() {
+  var setOpen = recoil.useSetRecoilState(recoil$1.exerciseArduinoAgentModalState);
+  var handleClick = function handleClick() {
+    setOpen(true);
+  };
+  return React__default["default"].createElement(blocks.Button, {
+    size: "micro",
+    role: "warning",
+    icon: React__default["default"].createElement(blocks.Icon, {
+      icon: icons.eilStatusDanger
+    }),
+    iconAlign: "left",
+    border: false,
+    onClick: handleClick
+  }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "exerciseMenu.arduino.agent.button"
+  }));
+};
+
+exports["default"] = ExerciseMenuArduinoAgentModalButton;