@elice/material-exercise 1.231212.0 → 1.231228.0

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

@@ -1,11 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var en = {
+const en = {
   'materialExercise.button.referenceDocs': 'Reference Docs'
 };
-var ko = {
+const ko = {
   'materialExercise.button.referenceDocs': '언어 레퍼런스'
 };
 

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

@@ -30,100 +30,98 @@ var ExerciseRunner = require('./exercise-runner/ExerciseRunner.js');
 var MaterialExercise_styled = require('./MaterialExercise.styled.js');
 var MaterialExercise_i18n = require('./MaterialExercise.i18n.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-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;
-  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(props.materialExerciseId));
-  var exerciseFileTreeOpened = recoil.useRecoilValue(recoil$1.exerciseFileTreeOpenedState);
-  var exercisePreviewType = recoil.useRecoilValue(recoil$1.exercisePreviewTypeState(props.materialExerciseId));
-  var exercisePreviewDisplayMode = recoil.useRecoilValue(recoil$1.exercisePreviewDisplayModeState);
-  var exerciseMonacoEditorApis = recoil.useRecoilValue(recoil$1.exerciseMonacoEditorApisState);
+const MaterialExercise = React.forwardRef((props, ref) => {
+  const intl = reactIntl.useIntl();
+  const {
+    onReferenceDocsToggle
+  } = React.useContext(context.ExerciseContext);
+  const {
+    width,
+    height
+  } = recoil.useRecoilValue(recoil$1.exerciseContainerSizeState);
+  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(props.materialExerciseId));
+  const exerciseFileTreeOpened = recoil.useRecoilValue(recoil$1.exerciseFileTreeOpenedState);
+  const exercisePreviewType = recoil.useRecoilValue(recoil$1.exercisePreviewTypeState(props.materialExerciseId));
+  const exercisePreviewDisplayMode = recoil.useRecoilValue(recoil$1.exercisePreviewDisplayModeState);
+  const exerciseMonacoEditorApis = recoil.useRecoilValue(recoil$1.exerciseMonacoEditorApisState);
   /**
    * File tree
    */
-  var renderExerciseFileTree = function renderExerciseFileTree() {
-    return React__default["default"].createElement(MaterialExercise_styled.StyledxerciseFileTreeContaner, {
+  const renderExerciseFileTree = () => {
+    return React.createElement(MaterialExercise_styled.StyledxerciseFileTreeContaner, {
       "aria-hidden": !exerciseFileTreeOpened
-    }, React__default["default"].createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
+    }, React.createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
       initialWidth: Math.max(MaterialExercise_styled.EXERCISE_FILE_TREE_MIN_WIDTH, width * MaterialExercise_styled.EXERCISE_HORIZONTAL_RATIO.FILETREE),
       minConstraints: [MaterialExercise_styled.EXERCISE_FILE_TREE_MIN_WIDTH, Infinity],
       resizeHandles: ['e']
-    }), React__default["default"].createElement(MaterialExercise_styled.StyledExerciseFileTreeWrap, null, React__default["default"].createElement(ExerciseFileTreeLazy["default"], null))));
+    }), React.createElement(MaterialExercise_styled.StyledExerciseFileTreeWrap, null, React.createElement(ExerciseFileTreeLazy.default, null))));
   };
   /**
    * File tree toggle button
    */
-  var renderExerciseFileTreeButton = function renderExerciseFileTreeButton() {
-    return React__default["default"].createElement(ExerciseFileTabsFileTreeButton["default"], null);
+  const renderExerciseFileTreeButton = () => {
+    return React.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));
+  const renderExerciseFileTabs = () => {
+    return React.createElement(MaterialExercise_styled.StyledExerciseTabsWrap, null, React.createElement(ExerciseFileTabsLazy.default, null));
   };
   /**
    * reference docs toggle button
    */
-  var renderExerciseReferenceDocsToggleButton = function renderExerciseReferenceDocsToggleButton() {
+  const renderExerciseReferenceDocsToggleButton = () => {
     if (typeof onReferenceDocsToggle !== 'function') {
       return null;
     }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Button, {
+    return React.createElement(React.Fragment, null, React.createElement(blocks.Button, {
       size: "micro",
       role: "navy3",
       style: {
         width: '100%'
       },
       onClick: onReferenceDocsToggle
-    }, React__default["default"].createElement(blocks.Icon, {
+    }, React.createElement(blocks.Icon, {
       icon: icons.eilClassroom
-    }), React__default["default"].createElement(blocks.Hspace, {
+    }), React.createElement(blocks.Hspace, {
       width: 0.25
     }), intl.formatMessage({
       id: 'materialExercise.button.referenceDocs'
-    })), React__default["default"].createElement(blocks.Hspace, {
+    })), React.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));
+  const renderExerciseMenu = () => {
+    return React.createElement(MaterialExercise_styled.StyledExerciseTabMenuWrap, null, renderExerciseReferenceDocsToggleButton(), React.createElement(ExerciseMultilangDropdownLazy.default, null), React.createElement(ExerciseMenu.default, null));
   };
   /**
    * Code editor and file viewer
    */
-  var renderExerciseFile = function renderExerciseFile() {
-    return React__default["default"].createElement(MaterialExercise_styled.StyledExerciseFileWrap, null, React__default["default"].createElement(ExerciseFile["default"], null));
+  const renderExerciseFile = () => {
+    return React.createElement(MaterialExercise_styled.StyledExerciseFileWrap, null, React.createElement(ExerciseFile.default, null));
   };
   /**
    * Exercise preview (side by side)
    */
-  var renderExercisePreviewSideBySide = function renderExercisePreviewSideBySide() {
+  const renderExercisePreviewSideBySide = () => {
     if (exercisePreviewType === recoilTypes.ExercisePreviewType.None) {
       return null;
     }
     if (exercisePreviewDisplayMode !== recoilTypes.ExercisePreviewDisplayMode.SideBySide) {
       return null;
     }
-    return React__default["default"].createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
-      children: React__default["default"].createElement(ExercisePreview["default"], null),
+    return React.createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
+      children: React.createElement(ExercisePreview.default, null),
       initialWidth: Math.max(MaterialExercise_styled.EXERCISE_PREVIEW_MIN_WIDTH, width * MaterialExercise_styled.EXERCISE_HORIZONTAL_RATIO.PREVIEW),
       minConstraints: [MaterialExercise_styled.EXERCISE_PREVIEW_MIN_WIDTH, Infinity],
       resizeHandles: ['w']
@@ -132,23 +130,23 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
   /**
    * Exercise main
    */
-  var renderExerciseMain = function renderExerciseMain() {
+  const renderExerciseMain = () => {
     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, renderExerciseFileTreeButton(), renderExerciseFileTabs(), renderExerciseMenu()), renderExerciseFile()), React__default["default"].createElement(ExerciseRightpane["default"], null));
+    return React.createElement(MaterialExercise_styled.StyledExerciseMain, null, renderExerciseFileTree(), React.createElement(MaterialExercise_styled.StyledExerciseFileAndTabWrap, null, React.createElement(MaterialExercise_styled.StyledExerciseTabBar, null, renderExerciseFileTreeButton(), renderExerciseFileTabs(), renderExerciseMenu()), renderExerciseFile()), React.createElement(ExerciseRightpane.default, null));
   };
   /**
    * Exercise Runner
    */
-  var renderExerciseRunner = function renderExerciseRunner() {
-    var _runner = React__default["default"].createElement(MaterialExercise_styled.StyledExerciseRunnerWrap, null, React__default["default"].createElement(ExerciseRunner["default"], {
-      exercisePreview: React__default["default"].createElement(ExercisePreview["default"], null)
+  const renderExerciseRunner = () => {
+    const _runner = React.createElement(MaterialExercise_styled.StyledExerciseRunnerWrap, null, React.createElement(ExerciseRunner.default, {
+      exercisePreview: React.createElement(ExercisePreview.default, null)
     }));
     if (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.isEditorDisabled) {
       return _runner;
     }
-    return React__default["default"].createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
+    return React.createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
       initialHeight: Math.max(MaterialExercise_styled.EXERCISE_RUNNER_MIN_HEIGHT, height * 0.35),
       minConstraints: [Infinity, MaterialExercise_styled.EXERCISE_RUNNER_MIN_HEIGHT],
       resizeHandles: ['n']
@@ -157,36 +155,33 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
   //
   //
   //
-  React__default["default"].useImperativeHandle(ref, function () {
-    return {
-      sendTextToRunner: function sendTextToRunner(text) {
-        subjects.exerciseRunnerTextSend$.next(text);
-      },
-      getMonacoEditorApis: function getMonacoEditorApis() {
-        return exerciseMonacoEditorApis;
-      }
-    };
-  }, [exerciseMonacoEditorApis]);
+  React.useImperativeHandle(ref, () => ({
+    sendTextToRunner: text => {
+      subjects.exerciseRunnerTextSend$.next(text);
+    },
+    getMonacoEditorApis: () => exerciseMonacoEditorApis
+  }), [exerciseMonacoEditorApis]);
   //
   //
   //
-  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(MaterialExercise_styled.StyledExerciseContainer, null, renderExerciseMain(), renderExerciseRunner()), renderExercisePreviewSideBySide());
+  return React.createElement(React.Fragment, null, React.createElement(MaterialExercise_styled.StyledExerciseContainer, null, renderExerciseMain(), renderExerciseRunner()), renderExercisePreviewSideBySide());
 });
 //
 //
 //
-var MaterialExercise$1 = materialSharedUtils.withForwardRefMaterial(React.forwardRef(function (props, ref) {
-  var _props$locale = props.locale,
-    locale = _props$locale === void 0 ? 'en' : _props$locale;
-  return React__default["default"].createElement(reactIntl.IntlProvider, {
+var MaterialExercise$1 = materialSharedUtils.withForwardRefMaterial(React.forwardRef((props, ref) => {
+  const {
+    locale = 'en'
+  } = props;
+  return React.createElement(reactIntl.IntlProvider, {
     locale: locale,
     defaultLocale: "en",
     messages: locale in MaterialExercise_i18n ? MaterialExercise_i18n[locale] : MaterialExercise_i18n.en
-  }, React__default["default"].createElement(ExerciseProvider["default"], Object.assign({}, props), React__default["default"].createElement(MaterialExercise, Object.assign({}, props, {
+  }, React.createElement(ExerciseProvider.default, Object.assign({}, props), React.createElement(MaterialExercise, Object.assign({}, props, {
     ref: ref
   }))));
 }), apiClient.config.init, {
   overrideRecoilScope: true
 });
 
-exports["default"] = MaterialExercise$1;
+exports.default = MaterialExercise$1;

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

@@ -1,19 +1,13 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 var stylesheets = require('../../constants/stylesheets.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var EXERCISE_FILE_TREE_MIN_WIDTH = 128;
-var EXERCISE_PREVIEW_MIN_WIDTH = 128;
-var EXERCISE_RUNNER_MIN_HEIGHT = 128;
-var EXERCISE_HORIZONTAL_RATIO = {
+const EXERCISE_FILE_TREE_MIN_WIDTH = 128;
+const EXERCISE_PREVIEW_MIN_WIDTH = 128;
+const EXERCISE_RUNNER_MIN_HEIGHT = 128;
+const EXERCISE_HORIZONTAL_RATIO = {
   FILETREE: 0.15,
   EDITOR: 0.45,
   PREVIEW: 0.4
@@ -25,7 +19,7 @@ var EXERCISE_HORIZONTAL_RATIO = {
  * - File (Editor)
  * - Runner
  */
-var StyledExerciseContainer = styled__default["default"].div.withConfig({
+const StyledExerciseContainer = styled.div.withConfig({
   componentId: "sc-9joi7g-0"
 })(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;"]);
 /**
@@ -34,7 +28,7 @@ var StyledExerciseContainer = styled__default["default"].div.withConfig({
  * - FileTabs
  * - File (Editor)
  */
-var StyledExerciseMain = styled__default["default"].div.withConfig({
+const StyledExerciseMain = styled.div.withConfig({
   componentId: "sc-9joi7g-1"
 })(["flex:1;display:flex;width:100%;min-width:0;min-height:0;"]);
 /**
@@ -42,31 +36,31 @@ var StyledExerciseMain = styled__default["default"].div.withConfig({
  * - FileTabs
  * - File (Editor)
  */
-var StyledExerciseFileAndTabWrap = styled__default["default"].div.withConfig({
+const StyledExerciseFileAndTabWrap = styled.div.withConfig({
   componentId: "sc-9joi7g-2"
 })(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;background-color:", ";"], designTokens.base.color.navy9);
-var StyledExerciseFileWrap = styled__default["default"].div.withConfig({
+const StyledExerciseFileWrap = styled.div.withConfig({
   componentId: "sc-9joi7g-3"
 })(["flex:1;min-height:0;"]);
 // ========== Exercise FileTab ==========
-var StyledExerciseTabBar = styled__default["default"].div.withConfig({
+const StyledExerciseTabBar = styled.div.withConfig({
   componentId: "sc-9joi7g-4"
 })(["display:flex;border-bottom:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE);
-var StyledExerciseTabsWrap = styled__default["default"].div.withConfig({
+const StyledExerciseTabsWrap = styled.div.withConfig({
   componentId: "sc-9joi7g-5"
 })(["flex:1;min-width:0;"]);
-var StyledExerciseTabMenuWrap = styled__default["default"].div.withConfig({
+const StyledExerciseTabMenuWrap = styled.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 ==========
-var StyledExerciseFileTreeWrap = styled__default["default"].div.withConfig({
+const StyledExerciseFileTreeWrap = styled.div.withConfig({
   componentId: "sc-9joi7g-7"
 })(["flex:1;display:flex;flex-direction:column;min-width:0;height:100%;border-right:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE);
-var StyledxerciseFileTreeContaner = styled__default["default"].div.withConfig({
+const StyledxerciseFileTreeContaner = styled.div.withConfig({
   componentId: "sc-9joi7g-8"
 })(["display:flex;height:100%;max-width:auto;&[aria-hidden='true']{max-width:0;overflow:hidden;}"]);
 // ========== Exercise Runner ==========
-var StyledExerciseRunnerWrap = styled__default["default"].div.withConfig({
+const StyledExerciseRunnerWrap = styled.div.withConfig({
   componentId: "sc-9joi7g-9"
 })(["width:100%;height:100%;border-top:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE);
 

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

@@ -13,36 +13,29 @@ require('./context/subjects.js');
 var ExerciseProvider = require('./context/ExerciseProvider.js');
 var ExerciseFile = require('./exercise-file/ExerciseFile.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 //
 //
 //
 /**
  * Material exercise.
  */
-var MaterialExerciseMobile = function MaterialExerciseMobile(_ref) {
-  var filename = _ref.filename;
-  var setExerciseActiveFilename = recoil.useSetRecoilState(recoil$1.exerciseActiveFilenameState);
-  React__default["default"].useEffect(function () {
-    return setExerciseActiveFilename(filename);
-  },
+const MaterialExerciseMobile = ({
+  filename
+}) => {
+  const setExerciseActiveFilename = recoil.useSetRecoilState(recoil$1.exerciseActiveFilenameState);
+  React.useEffect(() => setExerciseActiveFilename(filename),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [filename]);
   //
   //
   //
-  return React__default["default"].createElement(ExerciseFile["default"], null);
+  return React.createElement(ExerciseFile.default, null);
 };
 //
 //
 //
-var MaterialExerciseMobile$1 = materialSharedUtils.withMaterial(function (props) {
-  return React__default["default"].createElement(ExerciseProvider["default"], Object.assign({}, props), React__default["default"].createElement(MaterialExerciseMobile, Object.assign({}, props)));
-}, apiClient.config.init, {
+var MaterialExerciseMobile$1 = materialSharedUtils.withMaterial(props => React.createElement(ExerciseProvider.default, Object.assign({}, props), React.createElement(MaterialExerciseMobile, Object.assign({}, props))), apiClient.config.init, {
   overrideRecoilScope: true
 });
 
-exports["default"] = MaterialExerciseMobile$1;
+exports.default = MaterialExerciseMobile$1;

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

@@ -1,27 +1,22 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var context = require('./context.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 //
 //
 //
 /**
  *
  */
-var withExerciseIntlProvider = function withExerciseIntlProvider(Component, phrases) {
-  return function (props) {
-    var _useContext = React.useContext(context.ExerciseContext),
-      locale = _useContext.locale;
-    return React__default["default"].createElement(materialSharedUtils.MaterialIntlProvider, {
-      children: React__default["default"].createElement(Component, Object.assign({}, props)),
+const withExerciseIntlProvider = (Component, phrases) => {
+  return props => {
+    const {
+      locale
+    } = React.useContext(context.ExerciseContext);
+    return React.createElement(materialSharedUtils.MaterialIntlProvider, {
+      children: React.createElement(Component, Object.assign({}, props)),
       locale: locale,
       phrases: phrases
     });
@@ -30,12 +25,13 @@ 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, {
+const withForwardRefExerciseIntlProvider = (Component, phrases) => {
+  return React.forwardRef((props, ref) => {
+    const {
+      locale
+    } = React.useContext(context.ExerciseContext);
+    return React.createElement(materialSharedUtils.MaterialIntlProvider, {
+      children: React.createElement(Component, Object.assign({}, props, {
         ref: ref
       })),
       locale: locale,