@elice/material-exercise 1.220803.0

package/cjs/components/material-exercise/exercise-file-editor/ExerciseFileEditor.js

@@ -0,0 +1,337 @@
+'use strict';
+
+var React = require('react');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var types = require('@elice/types');
+var recoil = require('recoil');
+var ExerciseFileShimmer = require('../../shared/exercise-shimmer/ExerciseFileShimmer.js');
+require('../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js');
+require('../../shared/exercise-shimmer/ExerciseFileTabShimmer.js');
+require('../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js');
+require('../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js');
+var FileViewerNonViewable = require('../../shared/file-viewer/FileViewerNonViewable.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');
+var subjects = require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+require('../../../constants/arduino.js');
+var exerciseFile = require('../../../utils/exerciseFile.js');
+require('@elice/material-shared-utils');
+require('@elice/websocket');
+require('humps');
+require('ot-text-unicode');
+var useUsercodeEditWebSocket = require('../../../hooks/useUsercodeEditWebSocket.js');
+var ExerciseFileReadOnlyBanner = require('./ExerciseFileReadOnlyBanner.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+//
+//
+
+/**
+ * Exercise file (code) editor for editable files
+ */
+
+const ExerciseFileEditor = () => {
+  const {
+    materialExerciseId,
+    exerciseRoomId,
+    readOnlyEditor,
+    readOnlyActiveFile,
+    locale
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  const exerciseRoom = recoil.useRecoilValue(recoil$1.exerciseRoomState(exerciseRoomId));
+  const lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
+  const preference = recoil.useRecoilValue(recoil$1.exerciseEditorPreferenceState);
+  const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  const readOnly = readOnlyEditor || readOnlyActiveFile;
+  const setUsercodeWebSocketState = recoil.useSetRecoilState(recoil$1.exerciseWebsocketQuery('usercodeEdit'));
+  const setFileEditorCursorState = recoil.useSetRecoilState(recoil$1.exerciseFileEditorCursorState);
+  const setFileEditorCursorSelectionValueState = recoil.useSetRecoilState(recoil$1.exerciseFileEditorCursorSelectionValueState); // editor
+
+  const editorApis = React__default["default"].useRef(null);
+  const editorDocHistories = React__default["default"].useRef({});
+  const serverInitiatedVersions = React__default["default"].useRef([]); // ready state
+
+  const [isEditorReady, setEditorReady] = React__default["default"].useState(false);
+  const [isWebSocketReady, setWebSocketReady] = React__default["default"].useState(false);
+  const isReady = isEditorReady && isWebSocketReady;
+  const [isFileResettable, setFileResettable] = React__default["default"].useState(exerciseFile.checkExerciseFileResettable(activeFilename, {
+    exercise,
+    exerciseRoom
+  }));
+  /**
+   * Set value of current file.
+   */
+
+  const setValue = async content => {
+    var _a;
+
+    if (!isFileResettable) {
+      console.warn('Cannot reset file since not resettable.');
+      return;
+    }
+
+    if (!activeFilename) {
+      console.warn('Cannot reset file since no file selected.');
+      return;
+    }
+
+    if (content) {
+      (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.setValue(content);
+    } // reset as initial value on `null` received.
+    else if (content === null) {
+      const readyExerciseImage = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage;
+
+      if (!editorApis.current || !readyExerciseImage) {
+        return;
+      }
+
+      return apiClient.getOrgMaterialExerciseExerciseImageExerciseFileGet({
+        exerciseImageId: readyExerciseImage.id,
+        filename: activeFilename
+      }).then(res => res.exerciseFile.content).then(content => {
+        var _a;
+
+        if (typeof content === 'string') {
+          (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.setValue(content);
+        } else {
+          setFileResettable(false);
+        }
+      });
+    }
+  };
+  /**
+   * Update editor document history.
+   */
+
+
+  const pushEditorDocHistories = () => {
+    const _editorApis = editorApis.current;
+
+    if (!_editorApis) {
+      return;
+    }
+
+    if (typeof _editorApis.getMonacoModel === 'function') {
+      const model = _editorApis.getMonacoModel();
+
+      if (model) {
+        editorDocHistories.current[model.getVersionId()] = model.getValue();
+      }
+    }
+  };
+  /**
+   * Handle usercode edit websocket received `WRITE_NOTI` message,
+   * move cursor or insert / delete content.
+   */
+
+
+  const handleWebsocketUsercodeWriteNoti = ots => {
+    var _a, _b, _c;
+
+    let cursor = 0;
+
+    for (const ot of ots) {
+      const model = (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.getMonacoModel();
+
+      if (!model) {
+        continue;
+      } // remove previous versions.
+
+
+      if (serverInitiatedVersions.current.length > 100) {
+        serverInitiatedVersions.current.splice(0, 50);
+      }
+
+      switch (typeof ot) {
+        // cursor changed...
+        case 'number':
+          cursor += ot;
+          break;
+        // insertion
+
+        case 'string':
+          serverInitiatedVersions.current.push(model.getVersionId());
+          (_b = editorApis.current) === null || _b === void 0 ? void 0 : _b.insertValue(cursor, ot);
+          cursor += ot.length;
+          break;
+        // deletion
+
+        default:
+          serverInitiatedVersions.current.push(model.getVersionId());
+          (_c = editorApis.current) === null || _c === void 0 ? void 0 : _c.removeValue(cursor, cursor + (typeof ot.d === 'number' ? ot.d : ot.d.length));
+          break;
+      }
+    }
+  };
+  /**
+   * Usercode edit web socket.
+   */
+
+
+  const wsUsercode = useUsercodeEditWebSocket.useUsercodeEditWebSocket({
+    exerciseRoomId,
+    filename: activeFilename,
+    onInit: () => setWebSocketReady(true),
+    onWriteNoti: handleWebsocketUsercodeWriteNoti
+  });
+  /**
+   *
+   */
+
+  const handleChange = e => {
+    const index = serverInitiatedVersions.current.indexOf(e.versionId - 1);
+
+    if (index !== -1) {
+      serverInitiatedVersions.current.splice(index, 1);
+      return;
+    } // get previous model doc
+
+
+    const prevDoc = editorDocHistories.current[e.versionId - 1]; // send OTs to server
+
+    for (const change of e.changes) {
+      // insertion
+      if (change.rangeLength === 0 && !readOnly) {
+        wsUsercode.sendOTs(change.rangeOffset > 0 ? [change.rangeOffset, change.text] : [change.text]);
+      } // deletion
+      else {
+        if (prevDoc && !readOnly) {
+          wsUsercode.sendOTs([change.rangeOffset || null, {
+            d: prevDoc.slice(change.rangeOffset, change.rangeOffset + change.rangeLength)
+          }].filter(Boolean));
+        } // replace
+
+
+        if (change.text.length > 0 && !readOnly) {
+          wsUsercode.sendOTs(change.rangeOffset > 0 ? [change.rangeOffset, change.text] : [change.text]);
+        }
+      }
+    }
+
+    delete editorDocHistories.current[e.versionId - 1];
+  };
+  /**
+   * Handle editor cursor change.
+   */
+
+
+  const handleEditorCursor = range => {
+    var _a, _b;
+
+    if (!readOnly) {
+      wsUsercode.sendCursor(range);
+    }
+
+    setFileEditorCursorState(range);
+    setFileEditorCursorSelectionValueState((_b = (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.getValueInRange(range.from, range.to)) !== null && _b !== void 0 ? _b : '');
+  };
+  /**
+   * Handle editor save shortcut emitted.
+   */
+
+
+  const handleSave = () => {
+    subjects.exerciseFileEditorSaveAction$.next();
+  }; //
+  // Handle editor content change.
+  //
+
+
+  React__default["default"].useEffect(() => {
+    var _a;
+
+    const _editorApis = editorApis.current;
+
+    if (!_editorApis || !isReady) {
+      return;
+    }
+
+    _editorApis.setValue(wsUsercode.doc);
+
+    pushEditorDocHistories();
+    const subscription = (_a = _editorApis.editor) === null || _a === void 0 ? void 0 : _a.onDidChangeModelContent(e => {
+      pushEditorDocHistories();
+      handleChange(e);
+    });
+    return () => {
+      if (subscription) {
+        subscription.dispose();
+      }
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isReady, readOnly]); //
+  // Handle websocket status change.
+  //
+
+  React__default["default"].useEffect(() => setUsercodeWebSocketState(wsUsercode.readyState), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [wsUsercode.readyState]); //
+  // handle content change request to code editor.
+  //
+
+  React__default["default"].useEffect(() => {
+    const contentChangeSub = subjects.exerciseFileEditorContentChange$.subscribe(v => {
+      setValue(v).catch(() => void 0);
+    });
+    return () => {
+      contentChangeSub.unsubscribe();
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []); //
+  //
+  //
+  // empty file
+
+  if (!activeFilename) {
+    return React__default["default"].createElement(ExerciseFileShimmer, null);
+  } // non-editable file
+
+
+  if (!wsUsercode.docEditable) {
+    return React__default["default"].createElement(FileViewerNonViewable, {
+      filename: activeFilename,
+      locale: locale
+    });
+  } // websocket not ready
+
+
+  if (!isWebSocketReady) {
+    return React__default["default"].createElement(ExerciseFileShimmer, null);
+  }
+
+  const uniqueFilePath = `code/${exerciseRoomId}`;
+  const editorFilename = `${uniqueFilePath}/${activeFilename}`;
+  return React__default["default"].createElement(blocks.Flex, {
+    column: true,
+    width: "100%",
+    height: "100%"
+  }, React__default["default"].createElement(ExerciseFileReadOnlyBanner, null), React__default["default"].createElement(MonacoEditorLazy, {
+    key: editorFilename,
+    defaultValue: "",
+    filename: editorFilename,
+    markers: wsUsercode.markers,
+    preference: Object.assign(Object.assign({}, preference), {
+      readOnly
+    }),
+    noLanguageIntellisense: (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === types.enums.LectureType.Test,
+    locale: locale,
+    onLoad: () => setEditorReady(true),
+    onCursor: handleEditorCursor,
+    onSave: handleSave,
+    ref: editorApis
+  }));
+}; //
+
+module.exports = ExerciseFileEditor;

package/cjs/components/material-exercise/exercise-file-editor/ExerciseFileReadOnlyBanner.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Banner for readonly exercise file.
+ */
+declare const ExerciseFileReadOnlyBanner: React.FC;
+export default ExerciseFileReadOnlyBanner;

package/cjs/components/material-exercise/exercise-file-editor/ExerciseFileReadOnlyBanner.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+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 StyledEditorReadOnlyBanner = styled__default["default"].div.withConfig({
+  componentId: "sc-kh9iw2-0"
+})(["flex:0 0 auto;display:flex;align-items:center;margin:0.75rem;padding:0 1rem;height:2rem;border:1px solid ", ";border-radius:2px;"], designTokens.base.color.navy5);
+/**
+ * Banner for readonly exercise file.
+ */
+
+const ExerciseFileReadOnlyBanner = () => {
+  const {
+    readOnlyActiveFile
+  } = React__default["default"].useContext(context.ExerciseContext);
+
+  if (!readOnlyActiveFile) {
+    return null;
+  }
+
+  return React__default["default"].createElement(StyledEditorReadOnlyBanner, null, React__default["default"].createElement(blocks.Text, {
+    size: "tiny",
+    role: "gray3"
+  }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "[\uC77D\uAE30\uC804\uC6A9] \uC774 \uD30C\uC77C\uC740 \uC77D\uAE30\uC804\uC6A9 \uC785\uB2C8\uB2E4."
+  })));
+}; //
+
+module.exports = ExerciseFileReadOnlyBanner;

package/cjs/components/material-exercise/exercise-file-editor/ExerciseMobileFileEditor.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ExerciseMobileFileEditorProps {
+    exerciseImageId: number;
+    exerciseRoomId: number;
+    filename: string;
+}
+declare const ExerciseMobileFileEditor: React.FC<ExerciseMobileFileEditorProps>;
+export default ExerciseMobileFileEditor;

package/cjs/components/material-exercise/exercise-file-editor/index.d.ts

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

package/cjs/components/material-exercise/exercise-file-tabs/ExerciseFileTabs.d.ts

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

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

@@ -0,0 +1,79 @@
+'use strict';
+
+var React = require('react');
+var recoil = require('recoil');
+var styled = require('styled-components');
+require('../../shared/exercise-shimmer/ExerciseFileShimmer.js');
+var ExerciseFileTabsShimmer = require('../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js');
+require('../../shared/exercise-shimmer/ExerciseFileTabShimmer.js');
+require('../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js');
+require('../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.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 }; }
+
+function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, 'default': e }); }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const AsyncFileTabs = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('../../shared/file-tabs/FileTabs.js')); }));
+const StyledFileTabsWrapper = styled__default["default"].div.withConfig({
+  componentId: "sc-11fdoyl-0"
+})(["flex:0 0 3rem;"]);
+
+const ExerciseFileTabs = () => {
+  const {
+    exerciseRoomId,
+    materialExerciseId
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const [activeFilename, setActiveFilename] = recoil.useRecoilState(recoil$1.exerciseActiveFilenameState);
+  const [openedTabs, setOpenedTabs] = recoil.useRecoilState(recoil$1.exerciseFileTabsOpenedState({
+    materialExerciseId,
+    exerciseRoomId
+  }));
+
+  const handleCloseTab = path => {
+    const updatedTabs = openedTabs.filter(tab => tab !== path);
+    setOpenedTabs(updatedTabs);
+
+    if (activeFilename === path) {
+      setActiveFilename(updatedTabs.length > 0 ? updatedTabs[0] : '');
+    }
+  };
+
+  const handleTabOrderChange = (currentIndex, movedIndex) => {
+    const newOpenedTabs = [...openedTabs];
+    const movingTab = newOpenedTabs.splice(currentIndex, 1);
+    newOpenedTabs.splice(movedIndex, 0, ...movingTab);
+    setOpenedTabs(newOpenedTabs);
+  };
+
+  const handleActivePathChange = (path, isDirectory = false) => {
+    if (isDirectory) {
+      return;
+    }
+
+    if (!openedTabs.includes(path)) {
+      setOpenedTabs([...openedTabs, path]);
+    }
+
+    setActiveFilename(path);
+  };
+
+  return React__default["default"].createElement(StyledFileTabsWrapper, null, React__default["default"].createElement(React__default["default"].Suspense, {
+    fallback: React__default["default"].createElement(ExerciseFileTabsShimmer, null)
+  }, React__default["default"].createElement(AsyncFileTabs, {
+    openedTabs: openedTabs,
+    activeTab: activeFilename || undefined,
+    onCloseTab: handleCloseTab,
+    onSelectTab: handleActivePathChange,
+    onTabOrderChange: handleTabOrderChange
+  })));
+};
+
+module.exports = ExerciseFileTabs;

package/cjs/components/material-exercise/exercise-file-tabs/ExerciseFileTabsFileTreeButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Pick<React.RefAttributes<HTMLButtonElement>, "key"> & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

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

@@ -0,0 +1,90 @@
+'use strict';
+
+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);
+
+const ICON_BUTTON_SIZE = '2.25rem';
+const 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, props => props.active ? designTokens.base.color.navy8 : designTokens.base.color.navy8, designTokens.base.color.navy9);
+const ExerciseFileTabsFileTreeButton = React.forwardRef((_, ref) => {
+  const intl = reactIntl.useIntl();
+  const {
+    materialExerciseId
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  const [exerciseFileTreeOpened, setExerciseFileTreeOpened] = recoil.useRecoilState(recoil$1.exerciseFileTreeOpenedState);
+  /**
+   * Handle click.
+   */
+
+  const handleClick = () => {
+    setExerciseFileTreeOpened(prev => !prev);
+  }; //
+  // apply default file tree opened state.
+  //
+
+
+  React__default["default"].useEffect(() => {
+    var _a;
+
+    const 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]); //
+  //
+  //
+
+  const [el] = reactUse.useHover(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
+    })));
+  });
+  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,
+  ko: fileTreeButton_ko
+});
+
+module.exports = ExerciseFileTabsFileTreeButton$1;

package/cjs/components/material-exercise/exercise-file-tabs/ExerciseFileTabsLazy.d.ts

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

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+require('../../shared/exercise-shimmer/ExerciseFileShimmer.js');
+var ExerciseFileTabsShimmer = require('../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js');
+require('../../shared/exercise-shimmer/ExerciseFileTabShimmer.js');
+require('../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js');
+require('../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js');
+var ExerciseFileTabs = require('./ExerciseFileTabs.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ExerciseFileTabsLazy = () => {
+  return React__default["default"].createElement(React__default["default"].Suspense, {
+    fallback: React__default["default"].createElement(ExerciseFileTabsShimmer, null)
+  }, React__default["default"].createElement(ExerciseFileTabs, null));
+};
+
+module.exports = ExerciseFileTabsLazy;

package/cjs/components/material-exercise/exercise-file-tabs/index.d.ts

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

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

@@ -0,0 +1,5 @@
+'use strict';
+
+var phrasesEn = {"exerciseFileTab.fileTreeButton.tooltip.close":"Close Filetree","exerciseFileTab.fileTreeButton.tooltip.open":"Open Filetree"};
+
+module.exports = phrasesEn;

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

@@ -0,0 +1,5 @@
+'use strict';
+
+var phrasesKo = {"exerciseFileTab.fileTreeButton.tooltip.close":"파일 트리 닫기","exerciseFileTab.fileTreeButton.tooltip.open":"파일 트리 열기"};
+
+module.exports = phrasesKo;

package/cjs/components/material-exercise/exercise-file-tree/ExerciseFileTree.d.ts

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