@elice/material-exercise 1.240401.0 → 1.240508.0-globalization.1

package/cjs/components/material-exercise/exercise-room/locales/th.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messageTh = {"materialExerciseExerciseRoom.create":"ห้องปฏิบัติการใหม่","materialExerciseExerciseRoom.create.failure":"มีปัญหาเกิดขึ้นในการสร้างห้องปฏิบัติการใหม่ ค่ะ.","materialExerciseExerciseRoom.create.success":"ห้องปฏิบัติการใหม่ถูกสร้างขึ้นแล้วครับ.","materialExerciseExerciseRoom.defaultExerciseRoomDescription":"ห้องปฏิบัติการนั้นถูกตั้งค่าให้เปิดโดยค่าเริ่มต้นแล้วค่ะ.","materialExerciseExerciseRoom.description":"ติวเตอร์, สร้างห้องปฏิบัติการกับเพื่อนๆ เพื่อสร้างสภาพแวดล้อมในการฝึกฝนของคุณเองสิ ","materialExerciseExerciseRoom.detail.addUsers.label":"สมาชิกเชิญชวน","materialExerciseExerciseRoom.detail.addUsers.placeholder":"ค้นหาชื่อผู้ใช้ที่ต้องการเชิญลงชื่อที่นี่.","materialExerciseExerciseRoom.detail.copy":"คัดลอก","materialExerciseExerciseRoom.detail.copy.success":"ลิงก์ที่แชร์ถูกคัดลอกแล้วครับ.","materialExerciseExerciseRoom.detail.footer.button.open.description":"ห้องปฏิบัติการนั้นถูกตั้งค่าให้เปิดโดยค่าเริ่มต้นแล้วค่ะ.","materialExerciseExerciseRoom.detail.footer.description":"ห้องปฏิบัติการนั้นถูกตั้งค่าให้เปิดโดยค่าเริ่มต้นแล้วค่ะ.","materialExerciseExerciseRoom.detail.sharelink.label":"ลิงก์แชร์","materialExerciseExerciseRoom.detail.table.body.add":"เชิญ","materialExerciseExerciseRoom.detail.table.head.permission":"สิทธิ์","materialExerciseExerciseRoom.detail.table.head.users":"สมาชิก","materialExerciseExerciseRoom.detail.title.label":"หัวข้อ","materialExerciseExerciseRoom.detail.title.placeholder":"โปรดใส่หัวข้อ","materialExerciseExerciseRoom.exerciseRoom.name":"ชื่อห้องปฏิบัติการ","materialExerciseExerciseRoom.exerciseRoom.defaultName":"ไม่มีหัวเรื่อง ({date})","materialExerciseExerciseRoom.exerciseRoom.participants":"สมาชิก","materialExerciseExerciseRoom.exerciseRoom.publicPermission":"สิทธิของฉัน","materialExerciseExerciseRoom.exerciseRoom.publicPermission.nothing":"ไม่มีสิทธิ์","materialExerciseExerciseRoom.exerciseRoom.publicPermission.owner":"ผู้สร้าง","materialExerciseExerciseRoom.exerciseRoom.publicPermission.read":"โหมดอ่านอย่างเดียว","materialExerciseExerciseRoom.exerciseRoom.publicPermission.readWrite":"แก้ไข","materialExerciseExerciseRoom.exit":"ปิด","materialExerciseExerciseRoom.leave":"ออกจากห้องปฏิบัติการ","materialExerciseExerciseRoom.leave.dialog.body":"เขียนโค้ดทั้งหมดที่คุณเขียนจะหายไป คุณแน่ใจว่าต้องการออกจากห้องปฏิบัติการนี้หรือไม่?","materialExerciseExerciseRoom.leave.dialog.title":"ออกจากห้องปฏิบัติการ","materialExerciseExerciseRoom.open":"เปิดห้องปฏิบัติการ","materialExerciseExerciseRoom.selected":"(ห้องปฏิบัติการที่เปิดอยู่)","materialExerciseExerciseRoom.setDefaultExerciseRoom":"ตั้งค่าเป็นห้องฝึกฝนหลัก","materialExerciseExerciseRoom.title":"ห้องปฏิบัติการ"};
+
+exports.default = messageTh;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunner.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { type WithIntlComponentBuilderProps } from '@elice/intl';
 export interface ExerciseRunnerProps {
     exercisePreview?: React.ReactNode;
 }
-declare const _default: React.VFC<ExerciseRunnerProps>;
+declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<ExerciseRunnerProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
 export default _default;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunner.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var reactUse = require('react-use');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
+var intl = require('@elice/intl');
 var types = require('@elice/types');
 var recoil = require('recoil');
 var styled = require('styled-components');
@@ -30,11 +30,11 @@ require('lodash/debounce');
 require('random-words');
 require('unicount');
 var useStdioTextConcator = require('../../../hooks/useStdioTextConcator.js');
-var ExerciseIntlProvider = require('../context/ExerciseIntlProvider.js');
-var en = require('./locales/en.json.js');
-var ko = require('./locales/ko.json.js');
 var ExerciseRunnerContext = require('./ExerciseRunnerContext.js');
 var ExerciseRunnerController = require('./ExerciseRunnerController.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
+var th = require('./locales/th.json.js');
 
 const EXERCISE_RUNNER_HORIZONTAL_RATIO = {
   PREVIEW: 0.3,
@@ -47,10 +47,10 @@ const StyledExerciseRunner = styled.div.withConfig({
  *
  */
 const ExerciseRunner = ({
-  exercisePreview
+  exercisePreview,
+  __intl
 }) => {
   var _a, _b, _c;
-  const intl = reactIntl.useIntl();
   const {
     onCodeHelpRequest
   } = React.useContext(context.ExerciseContext);
@@ -182,10 +182,10 @@ const ExerciseRunner = ({
       case 'insufficient_permission':
         setRunnerSubmitErrorDialog({
           code: err.detail.failCode,
-          message: intl.formatMessage({
+          message: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.body.commonError'
           }),
-          action: intl.formatMessage({
+          action: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.action.reload'
           }),
           onAction: () => window.location.reload()
@@ -194,10 +194,10 @@ const ExerciseRunner = ({
       case 'invalid_room_token':
         setRunnerSubmitErrorDialog({
           code: err.detail.failCode,
-          message: intl.formatMessage({
+          message: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.body.networkError'
           }),
-          action: intl.formatMessage({
+          action: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.action.reload'
           }),
           onAction: () => window.location.reload()
@@ -206,10 +206,10 @@ const ExerciseRunner = ({
       case 'not_for_submit_grade':
         setRunnerSubmitErrorDialog({
           code: err.detail.failCode,
-          message: intl.formatMessage({
+          message: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.body.notForSubmitGrade'
           }),
-          action: intl.formatMessage({
+          action: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.action.confirm'
           })
         });
@@ -217,10 +217,10 @@ const ExerciseRunner = ({
       case 'expired_exercise_image':
         setRunnerSubmitErrorDialog({
           code: err.detail.failCode,
-          message: intl.formatMessage({
+          message: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.body.expiredExerciseImage'
           }),
-          action: intl.formatMessage({
+          action: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.action.reload'
           }),
           onAction: () => window.location.reload()
@@ -230,10 +230,10 @@ const ExerciseRunner = ({
       case 'try_again':
         setRunnerSubmitErrorDialog({
           code: err.detail.failCode,
-          message: intl.formatMessage({
+          message: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.body.notPreparedRoom'
           }),
-          action: intl.formatMessage({
+          action: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.action.confirm'
           })
         });
@@ -241,10 +241,10 @@ const ExerciseRunner = ({
       case 'room_is_busy':
         setRunnerSubmitErrorDialog({
           code: err.detail.failCode,
-          message: intl.formatMessage({
+          message: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.body.roomIsBusy'
           }),
-          action: intl.formatMessage({
+          action: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.action.confirm'
           })
         });
@@ -252,10 +252,10 @@ const ExerciseRunner = ({
       case 'exceed_submit_grade_limit':
         setRunnerSubmitErrorDialog({
           code: err.detail.failCode,
-          message: intl.formatMessage({
+          message: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.body.exceedSubmitGradeLimit'
           }),
-          action: intl.formatMessage({
+          action: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.action.confirm'
           })
         });
@@ -263,10 +263,10 @@ const ExerciseRunner = ({
       default:
         setRunnerSubmitErrorDialog({
           code: ((_b = err === null || err === void 0 ? void 0 : err.detail) === null || _b === void 0 ? void 0 : _b.failCode) || 'unknown',
-          message: intl.formatMessage({
+          message: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.body.unknown'
           }),
-          action: intl.formatMessage({
+          action: __intl.formatMessage({
             id: 'exerciseRunner.submitErrorDialog.action.confirm'
           })
         });
@@ -484,7 +484,7 @@ const ExerciseRunner = ({
     }
     return React.createElement(blocks.Dialog, {
       type: "error",
-      title: intl.formatMessage({
+      title: __intl.formatMessage({
         id: 'exerciseRunner.submitErrorDialog.title'
       }),
       body: `${runnerSubmitErrorDialog.message}\n(error code: ${runnerSubmitErrorDialog.code})`,
@@ -502,7 +502,7 @@ const ExerciseRunner = ({
   //
   //
   //
-  return React.createElement(StyledExerciseRunner, null, React.createElement(ExerciseRunnerContext.ExerciseRunnerContext.Provider, {
+  return React.createElement(intl.RawEliceIntlProvider, Object.assign({}, __intl), React.createElement(StyledExerciseRunner, null, React.createElement(ExerciseRunnerContext.ExerciseRunnerContext.Provider, {
     value: {
       onSubmit: handleRunnerSubmit,
       onCancel: handleRunnerCancel,
@@ -514,11 +514,8 @@ const ExerciseRunner = ({
       minHeight: 0
     },
     overflow: "hidden"
-  }, renderPreview(), renderXterm(), renderRunnerSubmitErrorDialog())));
+  }, renderPreview(), renderXterm(), renderRunnerSubmitErrorDialog()))));
 };
-var ExerciseRunner$1 = ExerciseIntlProvider.withExerciseIntlProvider(ExerciseRunner, {
-  en: en.default,
-  ko: ko.default
-});
+var ExerciseRunner$1 = new intl.IntlComponentBuilder(ExerciseRunner).add('en', en.default).add('ko', ko.default).add('th', th.default).build();
 
 exports.default = ExerciseRunner$1;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerArduinoAgentModal.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
 var icons = require('@elice/icons');
+var intl = require('@elice/intl');
 var FileSaver = require('file-saver');
 var recoil = require('recoil');
 var recoil$1 = require('../context/recoil.js');
@@ -20,7 +20,7 @@ const ARDUINO_AGENT_MAC_DOWNLOAD_URL = 'https://eli.so/arduino-agent-mac';
 const ARDUINO_AGENT_WIN_DOWNLOAD_URL = 'https://eli.so/arduino-agent-win';
 const ARDUINO_AGENT_MANUAL_URL = 'https://eli.so/arduino-faq';
 const ExerciseRunnerControllerArduinoAgentModal = () => {
-  const intl = reactIntl.useIntl();
+  const intl$1 = intl.useRawEliceIntl();
   const [open, setOpen] = recoil.useRecoilState(recoil$1.exerciseArduinoAgentModalState);
   React.useEffect(() => {
     const isConfirmed = localStorage.getItem(ELICE_MATERIAL_EXERCISE_ARDUINO_AGENT_MODAL_KEY) === ELICE_MATERIAL_EXERCISE_ARDUINO_AGENT_MODAL_VALUE;
@@ -39,15 +39,15 @@ const ExerciseRunnerControllerArduinoAgentModal = () => {
     return React.createElement(React.Fragment, null, React.createElement(blocks.Text, {
       bold: true,
       role: "gray0"
-    }, React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.arduino.agent.instruction.install"
+    }, intl$1.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.install'
     })), React.createElement(blocks.Vspace, {
       height: 0.25
     }), React.createElement(blocks.Text, {
       role: "navy",
       size: "small"
-    }, React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.arduino.agent.instruction.install.detail"
+    }, intl$1.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.install.detail'
     })), React.createElement(blocks.Vspace, {
       height: 0.75
     }), React.createElement(blocks.Flex, null, React.createElement(blocks.Button, {
@@ -59,8 +59,8 @@ const ExerciseRunnerControllerArduinoAgentModal = () => {
       }),
       iconAlign: "left",
       onClick: () => handleDownload(ARDUINO_AGENT_WIN_DOWNLOAD_URL)
-    }, React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.arduino.agent.instruction.install.window"
+    }, intl$1.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.install.window'
     })), React.createElement(blocks.Hspace, {
       width: 0.75
     }), React.createElement(blocks.Button, {
@@ -71,24 +71,26 @@ const ExerciseRunnerControllerArduinoAgentModal = () => {
       }),
       iconAlign: "left",
       onClick: () => handleDownload(ARDUINO_AGENT_MAC_DOWNLOAD_URL)
-    }, React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.arduino.agent.instruction.install.mac"
+    }, intl$1.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.install.mac'
     }))));
   };
   const renderAgentConnectionInstruction = () => {
     return React.createElement(React.Fragment, null, React.createElement(blocks.Text, {
       role: "gray0",
       bold: true
-    }, React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.arduino.agent.instruction.connect"
+    }, intl$1.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.connect'
+    }), intl$1.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.connect'
     })), React.createElement(blocks.Vspace, {
       height: 0.25
     }), React.createElement(blocks.Text, {
       role: "navy",
       size: "small",
       lineHeight: 1.6
-    }, React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.arduino.agent.instruction.connect.detail"
+    }, intl$1.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.connect.detail'
     })), React.createElement(blocks.Vspace, {
       height: 0.75
     }), React.createElement(blocks.Button, {
@@ -99,8 +101,8 @@ const ExerciseRunnerControllerArduinoAgentModal = () => {
       size: "tiny",
       role: "secondary",
       onClick: () => window.open(ARDUINO_AGENT_MANUAL_URL)
-    }, React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.arduino.agent.instruction.connect.button"
+    }, intl$1.formatMessage({
+      id: 'exerciseRunner.controller.arduino.agent.instruction.connect.button'
     })));
   };
   if (!open) {
@@ -108,11 +110,11 @@ const ExerciseRunnerControllerArduinoAgentModal = () => {
   }
   return React.createElement(blocks.Modal, {
     theme: "dark",
-    title: intl.formatMessage({
+    title: intl$1.formatMessage({
       id: 'exerciseRunner.controller.arduino.agent.title'
     }),
     footerButtons: [{
-      label: intl.formatMessage({
+      label: intl$1.formatMessage({
         id: 'exerciseRunner.controller.arduino.agent.instruction.close'
       }),
       onClick: handleClose

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerArduinoStatusMessage.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
+var intl = require('@elice/intl');
 var recoil = require('recoil');
 var styled = require('styled-components');
 var arduino = require('../../../utils/arduino.js');
@@ -19,7 +19,7 @@ const StyledMessageWrapper = styled(blocks.Flex).withConfig({
   componentId: "sc-19z7lun-0"
 })(["height:1rem;"]);
 const ExerciseRunnerControllerArduinoStatusMessage = () => {
-  const intl = reactIntl.useIntl();
+  const intl$1 = intl.useRawEliceIntl();
   const ports = recoil.useRecoilValue(recoil$1.exerciseArduinoPortsState);
   const [message, setMessage] = React.useState('');
   const [status, setStatus] = React.useState('error');
@@ -29,21 +29,21 @@ const ExerciseRunnerControllerArduinoStatusMessage = () => {
   React.useEffect(() => {
     if (arduinoAgentConnectionStatus === 'disconnected') {
       setStatus('error');
-      setMessage(intl.formatMessage({
+      setMessage(intl$1.formatMessage({
         id: 'exerciseRunner.controller.arduino.connectionStatus.disconnected'
       }));
       return;
     }
     if (arduinoAgentConnectionStatus === 'connecting') {
       setStatus('warning');
-      setMessage(intl.formatMessage({
+      setMessage(intl$1.formatMessage({
         id: 'exerciseRunner.controller.arduino.connectionStatus.connecting'
       }));
       return;
     }
     if (arduinoAgentConnectionStatus === 'reconnecting') {
       setStatus('warning');
-      setMessage(intl.formatMessage({
+      setMessage(intl$1.formatMessage({
         id: 'exerciseRunner.controller.arduino.connectionStatus.reconnecting'
       }));
       return;
@@ -51,7 +51,7 @@ const ExerciseRunnerControllerArduinoStatusMessage = () => {
     // Arduino agent is connected.
     if (arduinoOpenedPort === '' && arduinoUploadProgress === 'ready') {
       setStatus('error');
-      setMessage(intl.formatMessage({
+      setMessage(intl$1.formatMessage({
         id: 'exerciseRunner.controller.arduino.connectionStatus.noDevice'
       }));
       return;
@@ -61,7 +61,7 @@ const ExerciseRunnerControllerArduinoStatusMessage = () => {
       case 'receivedHex':
       case 'starting':
       case 'busy':
-        setMessage(intl.formatMessage({
+        setMessage(intl$1.formatMessage({
           id: 'exerciseRunner.controller.arduino.connectionStatus.uploading'
         }));
         return;
@@ -71,19 +71,19 @@ const ExerciseRunnerControllerArduinoStatusMessage = () => {
       default:
         const device = arduino.getPortFromName(ports, arduinoOpenedPort);
         if (device) {
-          setMessage(intl.formatMessage({
+          setMessage(intl$1.formatMessage({
             id: 'exerciseRunner.controller.arduino.connectionStatus.connectedDevice'
           }, {
             device: arduino.getDisplayName(device)
           }));
         } else {
-          setMessage(intl.formatMessage({
+          setMessage(intl$1.formatMessage({
             id: 'exerciseRunner.controller.arduino.connectionStatus.connected'
           }));
         }
         return;
     }
-  }, [intl, arduinoOpenedPort, arduinoUploadProgress, arduinoAgentConnectionStatus, ports]);
+  }, [intl$1, arduinoOpenedPort, arduinoUploadProgress, arduinoAgentConnectionStatus, ports]);
   //
   //
   //

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerButtonGroup.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
+var intl = require('@elice/intl');
 var types = require('@elice/types');
 var websocket = require('@elice/websocket');
 var recoil = require('recoil');
@@ -39,7 +39,7 @@ const StyledControllerButtonGroup = styled.div.withConfig({
 })(["display:flex;flex-direction:row;align-items:center;> ", ",> ", "{margin-right:0.5rem;&:last-child{margin-right:0;}}"], StyledControllerButtonWrap, StyledControllerButton);
 const ExerciseRunnerControllerButtonGroup = () => {
   var _a;
-  const intl = reactIntl.useIntl();
+  const intl$1 = intl.useRawEliceIntl();
   const {
     materialExerciseId,
     onCodeHelpRequest
@@ -149,10 +149,10 @@ const ExerciseRunnerControllerButtonGroup = () => {
       loading: isConnecting || isSubmitting && exerciseRunType === types.enums.ExerciseRunType.Run,
       disabled: isSubmitRunDisabled,
       onClick: handleSubmitRun
-    }, isArduinoExercise ? React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.buttonGroup.button.compile"
-    }) : React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.buttonGroup.button.run"
+    }, isArduinoExercise ? intl$1.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.compile'
+    }) : intl$1.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.run'
     }));
   };
   /**
@@ -163,7 +163,7 @@ const ExerciseRunnerControllerButtonGroup = () => {
       return null;
     }
     return React.createElement(blocks.Tooltip, {
-      title: exerciseWithNoGrade ? intl.formatMessage({
+      title: exerciseWithNoGrade ? intl$1.formatMessage({
         id: 'exerciseRunner.controller.buttonGroup.button.submit.tooltip.noSubmit'
       }) : undefined,
       placement: "top",
@@ -174,8 +174,8 @@ const ExerciseRunnerControllerButtonGroup = () => {
       loading: isConnecting || isSubmitting && exerciseRunType === types.enums.ExerciseRunType.Grade,
       disabled: isSubmitGradeDisabled,
       onClick: handleSubmitGrade
-    }, React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.buttonGroup.button.submit"
+    }, intl$1.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.submit'
     }))));
   };
   /**
@@ -191,8 +191,8 @@ const ExerciseRunnerControllerButtonGroup = () => {
       loading: isConnecting,
       disabled: isCancelDisabled,
       onClick: handleCancel
-    }, React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.buttonGroup.button.stop"
+    }, intl$1.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.stop'
     }));
   };
   /**
@@ -208,8 +208,8 @@ const ExerciseRunnerControllerButtonGroup = () => {
       loading: isConnecting,
       disabled: isSyncRequestDisabled,
       onClick: handleSyncRequest
-    }, React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.buttonGroup.button.syncRequest"
+    }, intl$1.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.syncRequest'
     }));
   };
   /**

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerCodeHelpRequestButton.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
 var icons = require('@elice/icons');
+var intl = require('@elice/intl');
 var recoil = require('recoil');
 var styled = require('styled-components');
 var recoil$1 = require('../context/recoil.js');
@@ -20,6 +20,7 @@ const StyledControllerButton = styled(blocks.Button).withConfig({
   componentId: "sc-10grd0k-0"
 })(["position:relative;transition:none;"]);
 const ExerciseRunnerControllerCodeHelpRequestButton = React.forwardRef((props, ref) => {
+  const intl$1 = intl.useRawEliceIntl();
   const [isTooltipHidden, setIsTooltipHidden] = React.useState(false);
   const isAibotInfoEnabled = recoil.useRecoilValue(recoil$1.exerciseAibotInfoEnableState);
   //
@@ -53,8 +54,8 @@ const ExerciseRunnerControllerCodeHelpRequestButton = React.forwardRef((props, r
       role: "gray9",
       size: "small",
       bold: true
-    }, React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp"
+    }, intl$1.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp'
     })), React.createElement(blocks.Hspace, {
       width: 0.625
     }), React.createElement(blocks.IconButton, {
@@ -82,8 +83,8 @@ const ExerciseRunnerControllerCodeHelpRequestButton = React.forwardRef((props, r
       icon: icons.eilArrowRightwardsBasic
     }),
     iconAlign: "right"
-  }), React.createElement(reactIntl.FormattedMessage, {
-    id: "exerciseRunner.controller.buttonGroup.button.helpRequest"
+  }), intl$1.formatMessage({
+    id: 'exerciseRunner.controller.buttonGroup.button.helpRequest'
   }))) : null;
 });
 

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerRunningInfo.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var reactUse = require('react-use');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
+var intl = require('@elice/intl');
 var types = require('@elice/types');
 var recoil = require('recoil');
 var styled = require('styled-components');
@@ -33,7 +33,7 @@ const StyledRunnerInfoContent = styled.span.withConfig({
 //
 //
 const ExerciseRunnerControllerRunningInfo = () => {
-  const intl = reactIntl.useIntl();
+  const intl$1 = intl.useRawEliceIntl();
   const {
     materialExerciseId,
     exerciseRoomId,
@@ -100,7 +100,7 @@ const ExerciseRunnerControllerRunningInfo = () => {
       if (typeof onError === 'function') {
         onError(err);
       }
-      blocks.Notification.error(intl.formatMessage({
+      blocks.Notification.error(intl$1.formatMessage({
         id: 'exerciseRunner.controller.runningInfo.error.fetch'
       }));
     });
@@ -140,13 +140,12 @@ const ExerciseRunnerControllerRunningInfo = () => {
     return React.createElement(React.Fragment, null, React.createElement(blocks.Flex, {
       column: true,
       justify: "center"
-    }, React.createElement(StyledRunnerInfoTitle, null, React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.runningInfo.lastSubmitScore"
-    })), React.createElement(StyledRunnerInfoContent, null, typeof (exerciseLastSubmit === null || exerciseLastSubmit === void 0 ? void 0 : exerciseLastSubmit.score) === 'string' ? React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.runningInfo.score",
-      values: {
-        score: exerciseLastSubmit.score
-      }
+    }, React.createElement(StyledRunnerInfoTitle, null, intl$1.formatMessage({
+      id: 'exerciseRunner.controller.runningInfo.lastSubmitScore'
+    })), React.createElement(StyledRunnerInfoContent, null, typeof (exerciseLastSubmit === null || exerciseLastSubmit === void 0 ? void 0 : exerciseLastSubmit.score) === 'string' ? intl$1.formatMessage({
+      id: 'exerciseRunner.controller.runningInfo.score'
+    }, {
+      score: exerciseLastSubmit.score
     }) : '--')), React.createElement(StyledHr, {
       color: designTokens.base.color.navy6,
       vertical: true,
@@ -164,30 +163,28 @@ const ExerciseRunnerControllerRunningInfo = () => {
     return React.createElement(blocks.Flex, {
       column: true,
       justify: "center"
-    }, React.createElement(StyledRunnerInfoTitle, null, (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) ? React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.runningInfo.lastRunningDatetime"
-    }) : React.createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.runningInfo.lastSubmitDatetime"
+    }, React.createElement(StyledRunnerInfoTitle, null, (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) ? intl$1.formatMessage({
+      id: 'exerciseRunner.controller.runningInfo.lastRunningDatetime'
+    }) : intl$1.formatMessage({
+      id: 'exerciseRunner.controller.runningInfo.lastSubmitDatetime'
     })), React.createElement(StyledRunnerInfoContent, null, (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) ?
     // last running
-    (exerciseLastRunning === null || exerciseLastRunning === void 0 ? void 0 : exerciseLastRunning.createdDatetime) ? React.createElement(reactIntl.FormattedDate, {
-      value: exerciseLastRunning.createdDatetime,
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit"
+    (exerciseLastRunning === null || exerciseLastRunning === void 0 ? void 0 : exerciseLastRunning.createdDatetime) ? intl$1.formatDate(exerciseLastRunning.createdDatetime, {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
     }) : '--' :
     // last submit
-    (exerciseLastSubmit === null || exerciseLastSubmit === void 0 ? void 0 : exerciseLastSubmit.createdDatetime) ? React.createElement(reactIntl.FormattedDate, {
-      value: exerciseLastSubmit.createdDatetime,
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit"
+    (exerciseLastSubmit === null || exerciseLastSubmit === void 0 ? void 0 : exerciseLastSubmit.createdDatetime) ? intl$1.formatDate(exerciseLastSubmit.createdDatetime, {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
     }) : '--'));
   };
   //

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusMessage.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
+var intl = require('@elice/intl');
 var websocket = require('@elice/websocket');
 var recoil = require('recoil');
 var styled = require('styled-components');
@@ -19,6 +19,7 @@ const StyledMessageWrapper = styled(blocks.Flex).withConfig({
   componentId: "sc-1yqi8o2-0"
 })(["height:1rem;"]);
 const ExerciseRunnerControllerStatusMessage = () => {
+  const intl$1 = intl.useRawEliceIntl();
   const websocketStatus = recoil.useRecoilValue(recoil$1.exerciseRunnerWebSocketStatusQuery);
   /**
    * Websocket state message.
@@ -26,17 +27,17 @@ const ExerciseRunnerControllerStatusMessage = () => {
   const getWebsocketStateMessage = () => {
     switch (websocketStatus) {
       case websocket.EliceWebSocket.OPEN:
-        return React.createElement(reactIntl.FormattedMessage, {
-          id: "exerciseRunner.controller.statusMessage.open"
+        return intl$1.formatMessage({
+          id: 'exerciseRunner.controller.statusMessage.open'
         });
       case websocket.EliceWebSocket.CLOSED:
-        return React.createElement(reactIntl.FormattedMessage, {
-          id: "exerciseRunner.controller.statusMessage.closed"
+        return intl$1.formatMessage({
+          id: 'exerciseRunner.controller.statusMessage.closed'
         });
       case websocket.EliceWebSocket.CONNECTING:
       default:
-        return React.createElement(reactIntl.FormattedMessage, {
-          id: "exerciseRunner.controller.statusMessage.connecting"
+        return intl$1.formatMessage({
+          id: 'exerciseRunner.controller.statusMessage.connecting'
         });
     }
   };