@elice/material-exercise 1.220803.0

package/es/components/material-exercise/exercise-file-tree/ExerciseFileTree.js

@@ -0,0 +1,372 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { postOrgMaterialExerciseExerciseRoomUserFileAdd, postOrgMaterialExerciseExerciseRoomUserFileDirectoryAdd, postOrgMaterialExerciseExerciseRoomUserFileDelete, postOrgMaterialExerciseExerciseRoomUserFileDirectoryDelete, postOrgMaterialExerciseExerciseRoomUserFileMove, postOrgMaterialExerciseExerciseRoomUserFileDirectoryMove, getOrgMaterialExerciseExerciseRoomGet } from '@elice/api-client';
+import { Flex, Notification } from '@elice/blocks';
+import { enums } from '@elice/types';
+import { camelize } from 'humps';
+import { useRecoilValue, useRecoilState } from 'recoil';
+import styled from 'styled-components';
+import '../../shared/exercise-shimmer/ExerciseFileShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTabShimmer.js';
+import ExerciseFileTreeListShimmer from '../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
+import { MATERIAL_DIVIDER_BORDER_VALUE } from '../../../constants/stylesheets.js';
+import { exerciseState, exerciseRoomState, exerciseMultilangLanguagesState, exerciseMultilangEnvironmentState, exerciseFileTabsOpenedState, exerciseActiveFilenameState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import { withExerciseIntlProvider } from '../context/ExerciseIntlProvider.js';
+import phrasesEn from './locales/en.json.js';
+import phrasesKo from './locales/ko.json.js';
+
+const AsyncFileTree = React.lazy(() => import('../../shared/file-tree/FileTree.js'));
+const AsyncFileTreeList = React.lazy(() => import('../../shared/file-tree/FileTreeList.js'));
+const AsyncFileTreeToolbar = React.lazy(() => import('../../shared/file-tree/FileTreeToolbar.js'));
+const StyledFileTreeDivider = styled.hr.withConfig({
+  componentId: "sc-107xvf5-0"
+})(["margin:0;width:100%;height:1px;border:0;border-bottom:", ";"], MATERIAL_DIVIDER_BORDER_VALUE);
+var MaterialExerciseFileError;
+
+(function (MaterialExerciseFileError) {
+  MaterialExerciseFileError["InsufficientPermission"] = "insufficient_permission";
+  MaterialExerciseFileError["NotFoundExerciseRoom"] = "not_found_exercise_room";
+  MaterialExerciseFileError["NotFoundPath"] = "not_found_path";
+  MaterialExerciseFileError["NotFoundCurrentFilename"] = "not_found_current_filename";
+  MaterialExerciseFileError["InvalidParameter"] = "invalid_parameter";
+  MaterialExerciseFileError["OverwriteExistingOne"] = "overwrite_existing_one";
+  MaterialExerciseFileError["InvalidParameterCombination"] = "invalid_parameter_combination";
+  MaterialExerciseFileError["ResultingFilenameUnderCurrentFilename"] = "resulting_filename_under_current_filename";
+  MaterialExerciseFileError["UsableSizeExceed"] = "usable_size_exceed";
+  MaterialExerciseFileError["SubFileOrPathExist"] = "sub_file_or_path_exist";
+})(MaterialExerciseFileError || (MaterialExerciseFileError = {}));
+
+const ExerciseFileTree = () => {
+  var _a, _b, _c, _d;
+
+  const intl = useIntl();
+  const {
+    exerciseRoomId,
+    materialExerciseId,
+    locale,
+    onError
+  } = React.useContext(ExerciseContext); // exercise state
+
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const [exerciseRoom, setExerciseRoom] = useRecoilState(exerciseRoomState(exerciseRoomId)); // multi lang states
+
+  const multilangLanguages = useRecoilValue(exerciseMultilangLanguagesState(materialExerciseId));
+  const multilangEnvironment = useRecoilValue(exerciseMultilangEnvironmentState({
+    materialExerciseId,
+    exerciseRoomId
+  }));
+  const [openedTabs, setOpenedTabs] = useRecoilState(exerciseFileTabsOpenedState({
+    materialExerciseId,
+    exerciseRoomId
+  }));
+  const [activeFilename, setActiveFilename] = useRecoilState(exerciseActiveFilenameState);
+  const [activePath, setActivePath] = React.useState(activeFilename || '');
+  const [apiStatus, setApiStatus] = React.useState('idle'); // activeFilename update effect
+
+  React.useEffect(() => {
+    var _a, _b, _c;
+
+    if ((exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.MultiLanguage && multilangLanguages && multilangEnvironment && multilangLanguages[multilangEnvironment['language']]) {
+      const filename = (_a = multilangLanguages[multilangEnvironment['language']].initialOpenFilelist[0]) !== null && _a !== void 0 ? _a : null;
+      setActiveFilename(filename);
+    } else {
+      const filename = (_c = (_b = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _b === void 0 ? void 0 : _b.initialOpenFilelist[0]) !== null && _c !== void 0 ? _c : null;
+      setActiveFilename(filename);
+    }
+  }, [exercise, multilangLanguages, multilangEnvironment, setActiveFilename]);
+  React.useEffect(() => {
+    if (activeFilename) {
+      setActivePath(activeFilename);
+    }
+  }, [activeFilename]);
+
+  const multilanguageFilelistFilter = filelist => {
+    if (!filelist || !exercise) {
+      return [];
+    }
+
+    if (exercise.envType === enums.ExerciseEnvType.MultiLanguage) {
+      if (!multilangLanguages || !multilangEnvironment) {
+        return [];
+      }
+
+      if (!multilangLanguages[multilangEnvironment.language]) {
+        return [];
+      }
+
+      return filelist.filter(filepath => filepath.startsWith(multilangLanguages[multilangEnvironment.language].rootDir));
+    } else {
+      return filelist;
+    }
+  };
+
+  const handleActivePathChange = (path, isDirectory = false) => {
+    if (!isDirectory) {
+      if (!openedTabs.includes(path)) {
+        setOpenedTabs([...openedTabs, path]);
+      }
+
+      setActiveFilename(path);
+    }
+
+    setActivePath(path);
+  };
+
+  const doGetOrgMaterialExerciseExerciseRoomGet = async () => {
+    try {
+      const {
+        exerciseRoom
+      } = await getOrgMaterialExerciseExerciseRoomGet({
+        exerciseRoomId
+      });
+      setExerciseRoom(exerciseRoom);
+    } catch (error) {
+      console.error(error);
+      Notification.error(intl.formatMessage({
+        id: 'materialExercise.exerciseFileTree.fetchRoom.failure'
+      }));
+    }
+  };
+
+  const handleError = error => {
+    var _a, _b, _c;
+
+    let message;
+    let failMessage;
+
+    switch ((_a = error.detail) === null || _a === void 0 ? void 0 : _a.failCode) {
+      case MaterialExerciseFileError.InsufficientPermission:
+      case MaterialExerciseFileError.NotFoundExerciseRoom:
+      case MaterialExerciseFileError.NotFoundPath:
+      case MaterialExerciseFileError.NotFoundCurrentFilename:
+      case MaterialExerciseFileError.InvalidParameter:
+      case MaterialExerciseFileError.OverwriteExistingOne:
+      case MaterialExerciseFileError.InvalidParameterCombination:
+      case MaterialExerciseFileError.ResultingFilenameUnderCurrentFilename:
+      case MaterialExerciseFileError.UsableSizeExceed:
+      case MaterialExerciseFileError.SubFileOrPathExist:
+        message = error.detail.failCode ? `materialExercise.exerciseFileTree.errorCode.${camelize(error.detail.failCode)}` : 'materialExercise.exerciseFileTree.errorCode.unknown';
+        failMessage = error.detail.failMessage;
+        break;
+
+      default:
+        message = ((_b = error.detail) === null || _b === void 0 ? void 0 : _b.failCode) ? error.detail.failCode : `materialExercise.exerciseFileTree.errorCode.unknown`;
+        failMessage = (_c = error.detail) === null || _c === void 0 ? void 0 : _c.failMessage;
+    }
+
+    Notification.error(intl.formatMessage({
+      id: message
+    }) + `${failMessage ? ` (${failMessage})` : ''}`);
+
+    if (typeof onError === 'function') {
+      onError(error);
+    }
+  };
+
+  const handleFileAdd = async ({
+    path,
+    emptyFileWithName,
+    userFile
+  }) => {
+    setApiStatus('pending');
+    return postOrgMaterialExerciseExerciseRoomUserFileAdd({
+      exerciseRoomId,
+      path,
+      emptyFileWithName,
+      userFile
+    }).then(doGetOrgMaterialExerciseExerciseRoomGet).then(() => setApiStatus('resolved')).catch(error => {
+      setApiStatus('rejected');
+      handleError(error);
+
+      if (typeof onError === 'function') {
+        onError(error);
+      }
+    });
+  };
+
+  const handleDirectoryAdd = async ({
+    name,
+    path,
+    overwrite
+  }) => {
+    setApiStatus('pending');
+    return postOrgMaterialExerciseExerciseRoomUserFileDirectoryAdd({
+      exerciseRoomId,
+      path,
+      name
+    }).then(doGetOrgMaterialExerciseExerciseRoomGet).then(() => setApiStatus('resolved')).catch(error => {
+      setApiStatus('rejected');
+      handleError(error);
+
+      if (typeof onError === 'function') {
+        onError(error);
+      }
+    });
+  };
+
+  const handleFileDelete = async path => {
+    setApiStatus('pending');
+    return postOrgMaterialExerciseExerciseRoomUserFileDelete({
+      exerciseRoomId,
+      filename: path
+    }).then(doGetOrgMaterialExerciseExerciseRoomGet).then(() => {
+      setApiStatus('resolved');
+      setActiveFilename(openedTabs[0]);
+      setOpenedTabs(openedTabs => openedTabs.filter(openTab => openTab !== path));
+    }).catch(error => {
+      setApiStatus('rejected');
+      handleError(error);
+
+      if (typeof onError === 'function') {
+        onError(error);
+      }
+    });
+  };
+
+  const handleDirectoryDelete = async path => {
+    setApiStatus('pending');
+    return postOrgMaterialExerciseExerciseRoomUserFileDirectoryDelete({
+      exerciseRoomId,
+      filename: path
+    }).then(doGetOrgMaterialExerciseExerciseRoomGet).then(() => setApiStatus('resolved')).catch(error => {
+      setApiStatus('rejected');
+      handleError(error);
+
+      if (typeof onError === 'function') {
+        onError(error);
+      }
+    });
+  };
+
+  const handleFileMove = async ({
+    currentFilename,
+    newName,
+    newPath
+  }) => {
+    setApiStatus('pending');
+    postOrgMaterialExerciseExerciseRoomUserFileMove({
+      exerciseRoomId,
+      currentFilename,
+      newName,
+      newPath
+    }).then(() => {
+      const parsedPath = (newPath ? newPath + '/' : '') + newName; // set activeFilename
+
+      setActiveFilename(parsedPath); // set openedTabs
+
+      if (openedTabs.includes(currentFilename)) {
+        // replace
+        setOpenedTabs(openedTabs => openedTabs.map(openedTab => openedTab === currentFilename ? parsedPath : openedTab));
+      } else {
+        // add new
+        setOpenedTabs(openedTabs => [...openedTabs, parsedPath]);
+      }
+    }).then(doGetOrgMaterialExerciseExerciseRoomGet).then(() => setApiStatus('resolved')).catch(error => {
+      setApiStatus('rejected');
+      handleError(error);
+
+      if (typeof onError === 'function') {
+        onError(error);
+      }
+    });
+  };
+
+  const handleDirectoryMove = async ({
+    currentFilename,
+    newName,
+    newPath
+  }) => {
+    setApiStatus('pending');
+    postOrgMaterialExerciseExerciseRoomUserFileDirectoryMove({
+      exerciseRoomId,
+      currentFilename,
+      newName,
+      newPath
+    }).then(doGetOrgMaterialExerciseExerciseRoomGet).then(() => setApiStatus('resolved')).catch(error => {
+      setApiStatus('rejected');
+      handleError(error);
+
+      if (typeof onError === 'function') {
+        onError(error);
+      }
+    });
+  };
+
+  const handleFilesUpload = ({
+    files,
+    path
+  }) => {
+    setApiStatus('pending');
+    Promise.all(Array.from(files).map(file => {
+      return postOrgMaterialExerciseExerciseRoomUserFileAdd({
+        exerciseRoomId,
+        path,
+        userFile: file
+      });
+    })).then(doGetOrgMaterialExerciseExerciseRoomGet).then(() => setApiStatus('resolved')).catch(error => {
+      setApiStatus('rejected');
+      handleError(error);
+
+      if (typeof onError === 'function') {
+        onError(error);
+      }
+    });
+  }; //
+  //
+  //
+
+
+  if (!exercise || !exerciseRoom) {
+    return null;
+  }
+
+  return React.createElement(Flex, {
+    column: true,
+    height: "100%",
+    auto: true,
+    overflowy: "auto"
+  }, React.createElement(React.Suspense, {
+    fallback: React.createElement(ExerciseFileTreeListShimmer, null)
+  }, React.createElement(AsyncFileTree
+  /** custom styles */
+  , {
+    /** custom styles */
+    style: {
+      flex: 'auto'
+    },
+
+    /** controlled state */
+    activePath: activePath,
+
+    /** filelist */
+    exerciseRoomFilelist: multilanguageFilelistFilter(exerciseRoom.filelist),
+    imageFilelist: multilanguageFilelistFilter((_b = (_a = exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.filelist) !== null && _b !== void 0 ? _b : []),
+    hiddenFilelist: multilanguageFilelistFilter((_c = exercise.readyExerciseImage) === null || _c === void 0 ? void 0 : _c.hiddenFilelist),
+    readOnlyFilelist: multilanguageFilelistFilter((_d = exercise.readyExerciseImage) === null || _d === void 0 ? void 0 : _d.readOnlyFilelist),
+
+    /** handler functions */
+    onActivePathChange: handleActivePathChange,
+    onFileAdd: handleFileAdd,
+    onDirectoryAdd: handleDirectoryAdd,
+    onFileDelete: handleFileDelete,
+    onDirectoryDelete: handleDirectoryDelete,
+    onFileMove: handleFileMove,
+    onDirectoryMove: handleDirectoryMove,
+    onFilesUpload: handleFilesUpload,
+    loading: apiStatus === 'pending',
+    locale: locale
+  }, React.createElement(AsyncFileTreeToolbar, null), React.createElement(StyledFileTreeDivider, null), React.createElement(AsyncFileTreeList, null))));
+};
+
+var ExerciseFileTree$1 = withExerciseIntlProvider(ExerciseFileTree, {
+  en: phrasesEn,
+  ko: phrasesKo
+});
+
+export { ExerciseFileTree$1 as default };

package/es/components/material-exercise/exercise-file-tree/ExerciseFileTreeLazy.d.ts

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

package/es/components/material-exercise/exercise-file-tree/ExerciseFileTreeLazy.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import '../../shared/exercise-shimmer/ExerciseFileShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTabShimmer.js';
+import ExerciseFileTreeListShimmer from '../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
+import ExerciseFileTree from './ExerciseFileTree.js';
+
+const ExerciseFileTreeLazy = () => {
+  return React.createElement(React.Suspense, {
+    fallback: React.createElement(ExerciseFileTreeListShimmer, null)
+  }, React.createElement(ExerciseFileTree, null));
+};
+
+export { ExerciseFileTreeLazy as default };

package/es/components/material-exercise/exercise-file-tree/index.d.ts

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

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

@@ -0,0 +1,3 @@
+var phrasesEn = {"exerciseFileTree.errorCode.insufficientPermission":"[Error] Insufficient Permission","exerciseFileTree.errorCode.invalidParameter":"[Error] Invalid Parameter","exerciseFileTree.errorCode.invalidParameterCombination":"[Error] Invalid Parameter Combination","exerciseFileTree.errorCode.notFoundCurrentFilename":"[Error] Not Found Current Filename","exerciseFileTree.errorCode.notFoundExerciseRoom":"[Error] Not Found ExerciseRoom","exerciseFileTree.errorCode.notFoundPath":"[Error] Not Found Path","exerciseFileTree.errorCode.overwriteExistingOne":"[Error] Overwrite Existing One","exerciseFileTree.errorCode.resultingFilenameUnderCurrentFilename":"[Error] Resulting Filename Under Current Filename","exerciseFileTree.errorCode.subFileOrPathExist":"[Error] Sub File Or Path Exist","exerciseFileTree.errorCode.unknown":"[Error] An unkown error has occurred.","exerciseFileTree.errorCode.usableSizeExceed":"[Error] Usable Size Exceed","exerciseFileTree.fetchRoom.failure":"Failed to fetch exercise room."};
+
+export { phrasesEn as default };

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

@@ -0,0 +1,3 @@
+var phrasesKo = {"exerciseFileTree.errorCode.insufficientPermission":"[Error] 권한이 없습니다.","exerciseFileTree.errorCode.invalidParameter":"[Error] 파라미터가 올바르지 않습니다.","exerciseFileTree.errorCode.invalidParameterCombination":"[Error] 파라미터 조합이 올바르지 않습니다.","exerciseFileTree.errorCode.notFoundCurrentFilename":"[Error] 파일을 찾을 수 없습니다.","exerciseFileTree.errorCode.notFoundExerciseRoom":"[Error] 실습방을 찾을 수 없습니다.","exerciseFileTree.errorCode.notFoundPath":"[Error] 해당 경로를 찾을 수 없습니다.","exerciseFileTree.errorCode.overwriteExistingOne":"[Error] 덮어쓰기가 불가능합니다.","exerciseFileTree.errorCode.resultingFilenameUnderCurrentFilename":"[Error] 같은 경로에 디렉토리를 옮길 수 없습니다.","exerciseFileTree.errorCode.subFileOrPathExist":"[Error] 디렉토리를 삭제하지 못했습니다. 디렉토리가 비어있어야 삭제할 수 있습니다.","exerciseFileTree.errorCode.unknown":"[Error] 알수 없는 에러가 발생하였습니다.","exerciseFileTree.errorCode.usableSizeExceed":"[Error] 허용된 용량을 초과하였습니다.","exerciseFileTree.fetchRoom.failure":"실습을 가져오는데 실패했습니다."};
+
+export { phrasesKo as default };

package/es/components/material-exercise/exercise-file-viewer/ExerciseFileViewer.d.ts

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

package/es/components/material-exercise/exercise-file-viewer/ExerciseFileViewer.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useRecoilValue } from 'recoil';
+import ExerciseFileShimmer from '../../shared/exercise-shimmer/ExerciseFileShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTabShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
+import FileViewer from '../../shared/file-viewer/FileViewer.js';
+import { useMaterialExerciseFileUrl } from '../../../hooks/useMaterialExerciseFileUrl.js';
+import { exerciseState, exerciseActiveFilenameState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+
+const ExerciseFileViewer = () => {
+  const {
+    materialExerciseId,
+    exerciseRoomId,
+    locale
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  const activeFileUrl = useMaterialExerciseFileUrl({
+    filename: activeFilename,
+    exercise,
+    exerciseRoomId
+  }); //
+  //
+  //
+
+  if (!activeFilename) {
+    return React.createElement(ExerciseFileShimmer, null);
+  }
+
+  return React.createElement(FileViewer, {
+    key: activeFileUrl,
+    filename: activeFilename,
+    fileurl: activeFileUrl,
+    locale: locale
+  });
+};
+
+export { ExerciseFileViewer as default };

package/es/components/material-exercise/exercise-file-viewer/index.d.ts

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

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

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

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { base } from '@elice/design-tokens';
+import { enums } from '@elice/types';
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+import { exerciseState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import { withExerciseIntlProvider } from '../context/ExerciseIntlProvider.js';
+import phrasesEn from './locales/en.json.js';
+import phrasesKo from './locales/ko.json.js';
+import ExerciseMenuArduinoSettings from './ExerciseMenuArduinoSettings.js';
+import ExerciseMenuDropdown from './ExerciseMenuDropdown.js';
+import ExerciseMenuReset from './ExerciseMenuReset.js';
+import ExerciseMenuStdioFileBrowser from './ExerciseMenuStdioFileBrowser.js';
+
+const StyledExerciseMenuWrapper = styled.div.withConfig({
+  componentId: "sc-1gf6m87-0"
+})(["display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;height:2.25rem;background-color:", ";"], base.color.navy8);
+
+const ExerciseMenu = () => {
+  const {
+    materialExerciseId
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.Arduino; //
+  //
+  //
+
+  return React.createElement(StyledExerciseMenuWrapper, null, isArduinoExercise ? React.createElement(ExerciseMenuArduinoSettings, null) : React.createElement(ExerciseMenuStdioFileBrowser, null), React.createElement(ExerciseMenuReset, null), React.createElement(ExerciseMenuDropdown, null));
+};
+
+var ExerciseMenu$1 = withExerciseIntlProvider(ExerciseMenu, {
+  en: phrasesEn,
+  ko: phrasesKo
+});
+
+export { ExerciseMenu$1 as default };

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

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

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import { Popover, Text, Flex, IconButton } from '@elice/blocks';
+import { eilMathsignMultiplyBasic, eilMaterialTypeArduino } from '@elice/icons';
+import { useRecoilValue, useRecoilState } from 'recoil';
+import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
+import { ARDUINO_BAUD_RATES } from '../../../constants/arduino.js';
+import { getDisplayName } from '../../../utils/arduino.js';
+import { exerciseArduinoPortsState, exerciseArduinoPreferenceState, exerciseArduinoOpenedPortNameState, exerciseArduinoOnSelectPortState } from '../context/recoil.js';
+import '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import { StyledFilePopoverContent, StyledFilePopoverHeader, StyledFilePopoverBody, StyledFilePopoverBodyList, StyledPreferenceBodyItem, StyledSelect } from './ExerciseMenuStdioFileBrowser.styled.js';
+
+const ExerciseMenuArduinoSettings = () => {
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef(null);
+  const ports = useRecoilValue(exerciseArduinoPortsState);
+  const [preference, setPreference] = useRecoilState(exerciseArduinoPreferenceState);
+  const openedPort = useRecoilValue(exerciseArduinoOpenedPortNameState);
+  const onSelectPort = useRecoilValue(exerciseArduinoOnSelectPortState);
+  /**
+   * List of stdio files.
+   */
+
+  const renderStdioFileList = () => {
+    return React.createElement(StyledFilePopoverBodyList, null, React.createElement(StyledPreferenceBodyItem, null, React.createElement(Text, {
+      role: "gray3",
+      block: true,
+      size: "small"
+    }, "\uC804\uC1A1 \uC18D\uB3C4"), React.createElement(StyledSelect, {
+      value: preference.baudRate,
+      size: "small",
+      width: "xsmall",
+      onChange: value => {
+        setPreference(Object.assign(Object.assign({}, preference), {
+          baudRate: value
+        }));
+      }
+    }, ARDUINO_BAUD_RATES.map(baudRate => React.createElement("option", {
+      key: baudRate,
+      value: baudRate
+    }, baudRate)))), React.createElement(StyledPreferenceBodyItem, null, React.createElement(Text, {
+      role: "gray3",
+      block: true,
+      size: "small"
+    }, "\uC7A5\uCE58"), React.createElement(StyledSelect, {
+      value: openedPort !== null && openedPort !== void 0 ? openedPort : '',
+      size: "small",
+      width: "xsmall",
+      onChange: value => {
+        onSelectPort(value);
+      }
+    }, ports.length === 0 ? React.createElement("option", {
+      value: "",
+      disabled: true
+    }, "\uC7A5\uCE58 \uC5C6\uC74C") : React.createElement("option", {
+      value: "",
+      disabled: true
+    }, "\uC7A5\uCE58 \uC120\uD0DD"), ports.map(port => React.createElement("option", {
+      key: port.Name,
+      value: port.Name
+    }, `${getDisplayName(port)}@${port.Name}`)))));
+  };
+  /**
+   * Popover header.
+   */
+
+
+  const renderStdioFilePopoverHeader = () => {
+    return React.createElement(StyledFilePopoverHeader, null, React.createElement(Text, {
+      role: "white",
+      bold: true
+    }, React.createElement(Flex, {
+      align: "center"
+    }, "\uC544\uB450\uC774\uB178 \uC124\uC815")), 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: eilMaterialTypeArduino,
+      title: "\uC544\uB450\uC774\uB178 \uC124\uC815",
+      active: open,
+      onClick: () => setOpen(prev => !prev),
+      ref: anchorRef
+    });
+  }; //
+  //
+  //
+
+
+  return React.createElement(React.Fragment, null, renderStdioFilePopover(), renderStdioFilePopoverToggleButton());
+};
+
+export { ExerciseMenuArduinoSettings as default };

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

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