@elice/material-exercise 1.220803.0

package/es/components/material-exercise/exercise-menu/ExerciseMenuDropdown.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { ButtonMenu } from '@elice/blocks';
+import { eilMoreVertical } from '@elice/icons';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
+import { exerciseUserState, exerciseActiveFilenameState, exerciseRightpaneActiveState } from '../context/recoil.js';
+import '../context/context.js';
+import '../context/recoilTypes.js';
+import { exerciseFileEditorContentChange$ } from '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import ExerciseCodeHistory from '../exercise-code-history/ExerciseCodeHistory.js';
+import ExerciseRoom from '../exercise-room/ExerciseRoom.js';
+import ExerciseSubmitHistory from '../exercise-submit-history/ExerciseSubmitHistory.js';
+
+const ExerciseMenuDropdown = () => {
+  const intl = useIntl();
+  const user = useRecoilValue(exerciseUserState);
+  const activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  const setRightpaneActiveState = useSetRecoilState(exerciseRightpaneActiveState);
+  const [isSubmitHistoryModalOpen, setIsSubmitHistoryModalOpen] = React.useState(false);
+  const [isCodeHistoryModalOpen, setIsCodeHistoryModalOpen] = React.useState(false);
+  const [isExerciseRoomModalOpen, setIsExerciseRoomModalOpen] = React.useState(false);
+  /**
+   *
+   */
+
+  const renderSumbitHistoryModal = () => {
+    if (!isSubmitHistoryModalOpen) {
+      return null;
+    }
+
+    return React.createElement(ExerciseSubmitHistory, {
+      onHide: () => setIsSubmitHistoryModalOpen(false)
+    });
+  };
+  /**
+   *
+   */
+
+
+  const renderCodeHistoryModal = () => {
+    if (!isCodeHistoryModalOpen) {
+      return null;
+    }
+
+    return React.createElement(ExerciseCodeHistory, {
+      onHide: () => setIsCodeHistoryModalOpen(false),
+      onLoadVersionButtonClick: content => {
+        exerciseFileEditorContentChange$.next(content);
+        setIsCodeHistoryModalOpen(false);
+      }
+    });
+  };
+  /**
+   *
+   */
+
+
+  const renderExerciseRoomModal = () => {
+    if (!isExerciseRoomModalOpen) {
+      return null;
+    }
+
+    return React.createElement(ExerciseRoom, {
+      onHide: () => setIsExerciseRoomModalOpen(false)
+    });
+  }; //
+  //
+  //
+
+
+  return React.createElement(React.Fragment, null, React.createElement(ButtonMenu, {
+    menuItemProps: [{
+      label: intl.formatMessage({
+        id: 'exerciseMenu.dropdown.item.environment'
+      }),
+      onClick: () => setRightpaneActiveState('environment')
+    }, {
+      label: intl.formatMessage({
+        id: 'exerciseMenu.dropdown.item.preference'
+      }),
+      onClick: () => setRightpaneActiveState('preference')
+    }, {
+      label: intl.formatMessage({
+        id: 'exerciseMenu.dropdown.item.codeHistory'
+      }),
+      disabled: !user,
+      onClick: () => setIsCodeHistoryModalOpen(true)
+    }, {
+      label: intl.formatMessage({
+        id: 'exerciseMenu.dropdown.item.submitHistory'
+      }),
+      disabled: !user || !activeFilename,
+      onClick: () => setIsSubmitHistoryModalOpen(true)
+    }, {
+      label: intl.formatMessage({
+        id: 'exerciseMenu.dropdown.item.room'
+      }),
+      onClick: () => setIsExerciseRoomModalOpen(true)
+    }],
+    size: "xsmall",
+    placement: "bottom-end",
+    dark: true,
+    shadow: true
+  }, React.createElement(ExerciseMenuButton, {
+    icon: eilMoreVertical,
+    title: intl.formatMessage({
+      id: 'exerciseMenu.dropdown.button.tooltip'
+    })
+  })), renderSumbitHistoryModal(), renderCodeHistoryModal(), renderExerciseRoomModal());
+};
+
+export { ExerciseMenuDropdown as default };

package/es/components/material-exercise/exercise-menu/ExerciseMenuReset.d.ts

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

package/es/components/material-exercise/exercise-menu/ExerciseMenuReset.js

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { Dialog } from '@elice/blocks';
+import { eilReset } from '@elice/icons';
+import { useRecoilValue } from 'recoil';
+import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
+import 'react-use';
+import 'socket.io-client';
+import { exerciseActiveFilenameState } from '../context/recoil.js';
+import '../context/context.js';
+import '../context/recoilTypes.js';
+import { exerciseFileEditorContentChange$ } from '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import '../../../constants/arduino.js';
+import { useExerciseFileResettable } from '../../../hooks/useExerciseFile.js';
+import '@elice/api-client';
+import '@elice/material-shared-utils';
+import '@elice/websocket';
+import 'humps';
+import 'ot-text-unicode';
+import 'lodash/debounce';
+import 'random-words';
+import 'unicount';
+
+const ExerciseMenuReset = () => {
+  const intl = useIntl();
+  const [isDialogOpen, setDialogOpen] = useState(false);
+  const activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  const isFileResettable = useExerciseFileResettable(activeFilename);
+  /**
+   * Reset the active file.
+   */
+
+  const handleReset = () => {
+    exerciseFileEditorContentChange$.next(null);
+    setDialogOpen(false);
+  };
+  /**
+   * Reset button.
+   */
+
+
+  const renderResetButton = () => {
+    return React.createElement(ExerciseMenuButton, {
+      icon: eilReset,
+      active: isDialogOpen,
+      title: isFileResettable ? intl.formatMessage({
+        id: 'exerciseMenu.reset.button.tooltip.enabled'
+      }) : intl.formatMessage({
+        id: 'exerciseMenu.reset.button.tooltip.disabled'
+      }),
+      disabled: !isFileResettable,
+      onClick: () => setDialogOpen(isOpen => !isOpen)
+    });
+  };
+  /**
+   * Reset confirm dialog.
+   */
+
+
+  const renderResetConfirmDialog = () => {
+    if (!isDialogOpen) {
+      return null;
+    }
+
+    return React.createElement(Dialog, {
+      type: "warning",
+      title: intl.formatMessage({
+        id: 'exerciseMenu.reset.confirmDialog.title'
+      }),
+      body: intl.formatMessage({
+        id: 'exerciseMenu.reset.confirmDialog.body'
+      }),
+      onHide: () => setDialogOpen(false)
+    }, React.createElement(Dialog.CloseButton, {
+      onClick: () => setDialogOpen(false)
+    }, React.createElement(FormattedMessage, {
+      id: "exerciseMenu.reset.confirmDialog.cancel"
+    })), React.createElement(Dialog.ActionButton, {
+      onClick: handleReset
+    }, React.createElement(FormattedMessage, {
+      id: "exerciseMenu.reset.confirmDialog.confirm"
+    })));
+  }; //
+  //
+  //
+
+
+  return React.createElement(React.Fragment, null, renderResetButton(), renderResetConfirmDialog());
+};
+
+export { ExerciseMenuReset as default };

package/es/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.d.ts

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

package/es/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.js

@@ -0,0 +1,225 @@
+import React from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { Popover, Flex, Text, Hspace, NotificationCount, IconButton, Icon, Vspace } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { eilMathsignMultiplyBasic, eilAttachment, eilFolder, eilDownload } from '@elice/icons';
+import { useRecoilValue } from 'recoil';
+import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
+import { exerciseRunnerStdioFilesState } from '../context/recoil.js';
+import '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import { StyledFilePopoverContent, StyledFilePopoverHeader, StyledFilePopoverBody, StyledMenuButtonFileCount, StyledFilePopoverBodyList, StyledFilePopoverBodyListItem, StyledFilePopoverBodyListItemContentFile, StyledFilePopoverBodyListItemDownloadButton, StyledFilePopoverBodyListItemContentImageWrap, StyledFilePopoverBodyListItemContentImage } from './ExerciseMenuStdioFileBrowser.styled.js';
+
+const IMAGE_NEW_WIN_IFRAME_STYLE = 'border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;';
+
+const ExerciseMenuStdioFileBrowser = () => {
+  const intl = useIntl();
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef(null);
+  const stdioFiles = useRecoilValue(exerciseRunnerStdioFilesState);
+  /**
+   * Open image as new window.
+   */
+
+  const handleImageFileClick = e => {
+    e.preventDefault();
+    const win = window.open('about:blank', e.currentTarget.target);
+
+    if (win) {
+      // since `Not allowed to navigate top frame to data URL:` error thrown by browser,
+      // use iframe to display image at new window.
+      win.document.write(`<iframe src="${e.currentTarget.href}" frameborder="0" style="${IMAGE_NEW_WIN_IFRAME_STYLE}" allowfullscreen></iframe>`);
+      win.focus();
+    }
+  }; //
+  // Open stdio file browser, on file changes.
+  //
+
+
+  React.useEffect(() => {
+    if (stdioFiles && stdioFiles.length > 0) {
+      setOpen(true);
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [stdioFiles]);
+  /**
+   * Image type stdio file.
+   */
+
+  const renderStdioFileListItemImage = (key, f) => {
+    var _a;
+
+    const ext = (_a = f.mime) === null || _a === void 0 ? void 0 : _a.split('/').pop();
+    const filename = ext ? `image_output.${ext}` : 'image_output';
+    return React.createElement(StyledFilePopoverBodyListItem, {
+      key: key
+    }, React.createElement(StyledFilePopoverBodyListItemContentImageWrap, {
+      href: f.data,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: handleImageFileClick
+    }, React.createElement(StyledFilePopoverBodyListItemContentImage, {
+      src: f.data,
+      alt: filename
+    })), React.createElement(StyledFilePopoverBodyListItemDownloadButton, {
+      href: f.data,
+      download: filename
+    }, React.createElement(Icon, {
+      icon: eilDownload
+    })));
+  };
+  /**
+   * File type stdio file.
+   */
+
+
+  const renderStdioFileListFile = (key, f) => {
+    const size = (f.data.length / 1024).toFixed(2);
+    return React.createElement(StyledFilePopoverBodyListItem, {
+      key: key
+    }, React.createElement(StyledFilePopoverBodyListItemContentFile, null, React.createElement(Text, {
+      children: f.filename,
+      role: "white",
+      size: "small"
+    }), React.createElement(Text, {
+      children: `${size} KB`,
+      role: "gray4",
+      size: "tiny"
+    })), React.createElement(StyledFilePopoverBodyListItemDownloadButton, {
+      href: f.data,
+      download: f.filename
+    }, React.createElement(Icon, {
+      icon: eilDownload
+    })));
+  };
+  /**
+   * Empty list of stdio files.
+   */
+
+
+  const renderStdioFileListEmpty = () => {
+    return React.createElement(Flex, {
+      column: true,
+      align: "center",
+      width: "100%",
+      paddingy: "1.5rem"
+    }, React.createElement(Icon, {
+      icon: eilFolder,
+      size: "jumbo",
+      color: base.color.navy3
+    }), React.createElement(Vspace, {
+      height: 0.5
+    }), React.createElement(Text, {
+      role: "navy",
+      size: "small",
+      textAlign: "center",
+      preWrap: true
+    }, React.createElement(FormattedMessage, {
+      id: "exerciseMenu.stdioFileBrowser.popover.body.placeholder"
+    })));
+  };
+  /**
+   * List of stdio files.
+   */
+
+
+  const renderStdioFileList = () => {
+    if (!stdioFiles || !stdioFiles.length) {
+      return renderStdioFileListEmpty();
+    }
+
+    return React.createElement(StyledFilePopoverBodyList, null, stdioFiles.map((f, index) => {
+      switch (f.type) {
+        case 'image':
+          return renderStdioFileListItemImage(index, f);
+
+        case 'file':
+          return renderStdioFileListFile(index, f);
+
+        default:
+          return null;
+      }
+    }));
+  };
+  /**
+   * Popover header.
+   */
+
+
+  const renderStdioFilePopoverHeader = () => {
+    return React.createElement(StyledFilePopoverHeader, null, React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Text, {
+      role: "white",
+      size: "small",
+      bold: true
+    }, React.createElement(FormattedMessage, {
+      id: "exerciseMenu.stdioFileBrowser.popover.header"
+    })), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(NotificationCount, {
+      role: "white",
+      value: stdioFiles.length
+    })), React.createElement(IconButton, {
+      icon: eilMathsignMultiplyBasic,
+      role: "white",
+      size: "micro",
+      border: false,
+      transparent: true,
+      onClick: () => setOpen(false)
+    }));
+  };
+  /**
+   * Popover body.
+   */
+
+
+  const renderStdioFilePopoverBody = () => {
+    return React.createElement(StyledFilePopoverBody, {
+      children: renderStdioFileList()
+    });
+  };
+  /**
+   * Popover.
+   */
+
+
+  const renderStdioFilePopover = () => {
+    return React.createElement(Popover, {
+      open: open,
+      anchorEl: anchorRef.current,
+      placement: "bottom-end",
+      style: {
+        zIndex: 99
+      }
+    }, React.createElement(StyledFilePopoverContent, null, renderStdioFilePopoverHeader(), renderStdioFilePopoverBody()));
+  };
+  /**
+   * Popover toggle button.
+   */
+
+
+  const renderStdioFilePopoverToggleButton = () => {
+    return React.createElement(ExerciseMenuButton, {
+      icon: eilAttachment,
+      active: open,
+      title: intl.formatMessage({
+        id: 'exerciseMenu.stdioFileBrowser.button.tooltip'
+      }),
+      onClick: () => setOpen(prev => !prev),
+      ref: anchorRef
+    }, React.createElement(StyledMenuButtonFileCount, {
+      role: "white",
+      value: stdioFiles.length
+    }));
+  }; //
+  //
+  //
+
+
+  return React.createElement(React.Fragment, null, renderStdioFilePopover(), renderStdioFilePopoverToggleButton());
+};
+
+export { ExerciseMenuStdioFileBrowser as default };

package/es/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.styled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const StyledMenuButtonFileCount: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").NotificationCountProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledFilePopoverContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFilePopoverHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFilePopoverBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFilePopoverBodyList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const StyledFilePopoverBodyListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const StyledFilePopoverBodyListItemDownloadButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const StyledFilePopoverBodyListItemContentFile: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFilePopoverBodyListItemContentImageWrap: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const StyledFilePopoverBodyListItemContentImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const StyledPreferenceBodyItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSelect: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").SelectProps & import("react").RefAttributes<HTMLSelectElement>>, any, {}, never>;

package/es/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.styled.js

@@ -0,0 +1,42 @@
+import { NotificationCount, Select } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+
+const StyledMenuButtonFileCount = styled(NotificationCount).withConfig({
+  componentId: "sc-9mtuee-0"
+})(["position:absolute;top:0.2rem;right:0.2rem;padding:0;min-width:0.625rem;height:0.625rem;font-size:0.5rem;"]);
+const StyledFilePopoverContent = styled.div.withConfig({
+  componentId: "sc-9mtuee-1"
+})(["display:flex;flex-direction:column;padding:0;width:252px;min-height:178px;max-height:383px;border-radius:8px;background-color:", ";overflow:hidden;"], base.color.navy6);
+const StyledFilePopoverHeader = styled.div.withConfig({
+  componentId: "sc-9mtuee-2"
+})(["flex:0 0 2.5rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;color:white;background-color:", ";"], base.color.navy7);
+const StyledFilePopoverBody = styled.div.withConfig({
+  componentId: "sc-9mtuee-3"
+})(["flex:1;overflow-x:hidden;overflow-y:auto;"]);
+const StyledFilePopoverBodyList = styled.ul.withConfig({
+  componentId: "sc-9mtuee-4"
+})(["margin:0;padding:0.5rem;width:100%;height:100%;"]);
+const StyledFilePopoverBodyListItem = styled.li.withConfig({
+  componentId: "sc-9mtuee-5"
+})(["display:flex;margin-bottom:0.5rem;border-radius:0.5rem;background-color:", ";overflow:hidden;&:last-of-type{margin-bottom:0;}"], base.color.navy5);
+const StyledFilePopoverBodyListItemDownloadButton = styled.a.withConfig({
+  componentId: "sc-9mtuee-6"
+})(["display:flex;align-items:center;justify-content:center;padding:0.75rem;color:", ";font-size:1rem;background-color:", ";"], base.color.white, base.color.primary5);
+const StyledFilePopoverBodyListItemContentFile = styled.div.withConfig({
+  componentId: "sc-9mtuee-7"
+})(["flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 0.5rem;"]);
+const StyledFilePopoverBodyListItemContentImageWrap = styled.a.withConfig({
+  componentId: "sc-9mtuee-8"
+})(["display:flex;padding:0.5rem;flex:1 1 0;background:", ";"], base.color.white);
+const StyledFilePopoverBodyListItemContentImage = styled.img.withConfig({
+  componentId: "sc-9mtuee-9"
+})(["width:100%;max-height:128px;object-fit:contain;"]);
+const StyledPreferenceBodyItem = styled.div.withConfig({
+  componentId: "sc-9mtuee-10"
+})(["display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}"]);
+const StyledSelect = styled(Select).withConfig({
+  componentId: "sc-9mtuee-11"
+})(["> div{background:", " !important;border-color:", " !important;}select{padding:0 !important;height:2rem !important;color:#fff !important;> option{background:", " !important;}}"], base.color.navy8, base.color.navy7, base.color.navy8);
+
+export { StyledFilePopoverBody, StyledFilePopoverBodyList, StyledFilePopoverBodyListItem, StyledFilePopoverBodyListItemContentFile, StyledFilePopoverBodyListItemContentImage, StyledFilePopoverBodyListItemContentImageWrap, StyledFilePopoverBodyListItemDownloadButton, StyledFilePopoverContent, StyledFilePopoverHeader, StyledMenuButtonFileCount, StyledPreferenceBodyItem, StyledSelect };

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

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

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

@@ -0,0 +1,3 @@
+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"};
+
+export { phrasesEn as default };

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

@@ -0,0 +1,3 @@
+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":"파일"};
+
+export { phrasesKo as default };

package/es/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/es/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdown.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Dropdown } from '@elice/blocks';
+import { useRecoilValue, useRecoilState } from 'recoil';
+import { exerciseMultilangLanguagesState, exerciseMultilangEnvironmentState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+
+const ExerciseMultilangDropdown = () => {
+  const {
+    materialExerciseId,
+    exerciseRoomId
+  } = React.useContext(ExerciseContext);
+  const multilangLanguages = useRecoilValue(exerciseMultilangLanguagesState(materialExerciseId));
+  const [multilangEnvironment, setMultilangEnvironment] = useRecoilState(exerciseMultilangEnvironmentState({
+    materialExerciseId,
+    exerciseRoomId
+  })); //
+  //
+  //
+
+  if (!multilangLanguages || !Object.keys(multilangLanguages !== null && multilangLanguages !== void 0 ? multilangLanguages : {}).length || !multilangEnvironment) {
+    return null;
+  }
+
+  return React.createElement(Dropdown, {
+    type: "dark",
+    size: "tiny",
+    border: true,
+    placement: "bottom-end",
+    value: multilangEnvironment.language,
+    onChange: language => setMultilangEnvironment({
+      language
+    })
+  }, Object.keys(multilangLanguages).map(lang => React.createElement("option", {
+    key: lang,
+    value: lang
+  }, multilangLanguages[lang].label)));
+};
+
+export { ExerciseMultilangDropdown as default };

package/es/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/es/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdownLazy.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ExerciseMultilangDropdown from './ExerciseMultilangDropdown.js';
+
+const ExerciseMultilangDropdownLazy = () => {
+  return React.createElement(React.Suspense, {
+    fallback: null
+  }, React.createElement(ExerciseMultilangDropdown, null));
+};
+
+export { ExerciseMultilangDropdownLazy as default };

package/es/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/es/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/es/components/material-exercise/exercise-preview/ExercisePreview.d.ts

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