@elice/material-exercise 1.260305.0 → 1.260430.0

package/es/components/material-exercise/exercise-runner/action/ControllerActionCancel.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRawEliceIntl } from '@elice/intl';
+import { LoadingButton } from '@mui/lab';
+import { useControllerActionCancel } from './useControllerActionCancel.js';
+import { useExericseShortcut } from '../../../../hooks/useExericseShortcut.js';
+
+//
+//
+//
+var ControllerActionCancel = function ControllerActionCancel() {
+  var intl = useRawEliceIntl();
+  var _useControllerActionC = useControllerActionCancel(),
+    isHidden = _useControllerActionC.isHidden,
+    isDisabled = _useControllerActionC.isDisabled,
+    isLoading = _useControllerActionC.isLoading,
+    cancel = _useControllerActionC.cancel;
+  //
+  // register the shortcut
+  //
+  useExericseShortcut('RUNNER_CANCEL', cancel);
+  //
+  //
+  //
+  if (isHidden) {
+    return null;
+  }
+  return jsx(LoadingButton, {
+    size: "small",
+    variant: "contained",
+    color: "error",
+    loading: isLoading,
+    disabled: isDisabled,
+    onClick: cancel,
+    children: intl.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.stop'
+    })
+  });
+};
+
+export { ControllerActionCancel as default };

package/es/components/material-exercise/exercise-runner/action/ControllerActionGrade.d.ts

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

package/es/components/material-exercise/exercise-runner/action/ControllerActionGrade.js

@@ -0,0 +1,54 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRawEliceIntl } from '@elice/intl';
+import { LoadingButton } from '@mui/lab';
+import { Tooltip, Box } from '@mui/material';
+import { useControllerActionGrade } from './useControllerActionGrade.js';
+import { useExericseShortcut } from '../../../../hooks/useExericseShortcut.js';
+
+//
+//
+//
+var ControllerActionGrade = function ControllerActionGrade() {
+  var intl = useRawEliceIntl();
+  var _useControllerActionG = useControllerActionGrade(),
+    isHidden = _useControllerActionG.isHidden,
+    isDisabled = _useControllerActionG.isDisabled,
+    isLoading = _useControllerActionG.isLoading,
+    isNoGrade = _useControllerActionG.isNoGrade,
+    grade = _useControllerActionG.grade;
+  //
+  // register the shortcut
+  //
+  useExericseShortcut('RUNNER_SUBMIT_GRADE', grade);
+  //
+  //
+  //
+  if (isHidden) {
+    return null;
+  }
+  return jsx(Tooltip, {
+    title: isNoGrade ? intl.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.submit.tooltip.noSubmit'
+    }) : '',
+    placement: "top",
+    children: jsx(Box, {
+      component: "span",
+      sx: {
+        display: 'inline-flex'
+      },
+      children: jsx(LoadingButton, {
+        size: "small",
+        variant: "contained",
+        color: "info",
+        loading: isLoading,
+        disabled: isDisabled,
+        onClick: grade,
+        children: intl.formatMessage({
+          id: 'exerciseRunner.controller.buttonGroup.button.submit'
+        })
+      })
+    })
+  });
+};
+
+export { ControllerActionGrade as default };

package/es/components/material-exercise/exercise-runner/action/ControllerActionRun.d.ts

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

package/es/components/material-exercise/exercise-runner/action/ControllerActionRun.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRawEliceIntl } from '@elice/intl';
+import { LoadingButton } from '@mui/lab';
+import { useControllerActionRun } from './useControllerActionRun.js';
+import { useExericseShortcut } from '../../../../hooks/useExericseShortcut.js';
+
+//
+//
+//
+var ControllerActionRun = function ControllerActionRun() {
+  var intl = useRawEliceIntl();
+  var _useControllerActionR = useControllerActionRun(),
+    isHidden = _useControllerActionR.isHidden,
+    isDisabled = _useControllerActionR.isDisabled,
+    isLoading = _useControllerActionR.isLoading,
+    run = _useControllerActionR.run;
+  //
+  // register the shortcut
+  //
+  useExericseShortcut('RUNNER_SUBMIT_RUN', run);
+  //
+  //
+  //
+  if (isHidden) {
+    return null;
+  }
+  return jsx(LoadingButton, {
+    size: "small",
+    variant: "contained",
+    color: "primary",
+    loading: isLoading,
+    disabled: isDisabled,
+    onClick: run,
+    children: intl.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.run'
+    })
+  });
+};
+
+export { ControllerActionRun as default };

package/es/components/material-exercise/exercise-runner/action/ControllerActionSyncRequest.d.ts

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

package/es/components/material-exercise/exercise-runner/action/ControllerActionSyncRequest.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRawEliceIntl } from '@elice/intl';
+import { LoadingButton } from '@mui/lab';
+import { useControllerActionSyncRequest } from './useControllerActionSyncRequest.js';
+import { useExericseShortcut } from '../../../../hooks/useExericseShortcut.js';
+
+//
+//
+//
+var ControllerActionSyncRequest = function ControllerActionSyncRequest() {
+  var intl = useRawEliceIntl();
+  var _useControllerActionS = useControllerActionSyncRequest(),
+    isHidden = _useControllerActionS.isHidden,
+    isDisabled = _useControllerActionS.isDisabled,
+    isLoading = _useControllerActionS.isLoading,
+    syncRequest = _useControllerActionS.syncRequest;
+  //
+  // register the shortcut
+  //
+  useExericseShortcut('RUNNER_SYNC_REQUEST', syncRequest);
+  //
+  //
+  //
+  if (isHidden) {
+    return null;
+  }
+  return jsx(LoadingButton, {
+    size: "small",
+    variant: "contained",
+    color: "secondary",
+    loading: isLoading,
+    disabled: isDisabled,
+    onClick: syncRequest,
+    children: intl.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.syncRequest'
+    })
+  });
+};
+
+export { ControllerActionSyncRequest as default };

package/es/components/material-exercise/exercise-runner/action/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ControllerActionCancel } from './ControllerActionCancel';
+export { default as ControllerActionGrade } from './ControllerActionGrade';
+export { default as ControllerActionRun } from './ControllerActionRun';
+export { default as ControllerActionSyncRequest } from './ControllerActionSyncRequest';
+export { useControllerActionRun } from './useControllerActionRun';

package/es/components/material-exercise/exercise-runner/action/index.js

@@ -0,0 +1,5 @@
+export { default as ControllerActionCancel } from './ControllerActionCancel.js';
+export { default as ControllerActionGrade } from './ControllerActionGrade.js';
+export { default as ControllerActionRun } from './ControllerActionRun.js';
+export { default as ControllerActionSyncRequest } from './ControllerActionSyncRequest.js';
+export { useControllerActionRun } from './useControllerActionRun.js';

package/es/components/material-exercise/exercise-runner/action/useControllerActionCancel.d.ts

@@ -0,0 +1,14 @@
+export interface UseControllerActionCancelReturn {
+    /** Whether the cancel button should be hidden. */
+    isHidden: boolean;
+    /** Whether the cancel button should be disabled. */
+    isDisabled: boolean;
+    /** Whether the cancel button should show a loading indicator. */
+    isLoading: boolean;
+    /** Cancel the running exercise. */
+    cancel: () => void;
+}
+/**
+ * Provides state and handler for the exercise runner's "cancel" action.
+ */
+export declare const useControllerActionCancel: () => UseControllerActionCancelReturn;

package/es/components/material-exercise/exercise-runner/action/useControllerActionCancel.js

@@ -0,0 +1,46 @@
+import { toConsumableArray as _toConsumableArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { EliceWebSocket } from '@elice/websocket';
+import { useRecoilValue } from 'recoil';
+import { ExerciseRunnerContext } from '../ExerciseRunnerContext.js';
+import { exerciseActiveFilenameState, exerciseWebSocketTotalStatusQuery, exerciseRunnerRunningState } from '../../context/recoil.js';
+import { useExerciseFileEditable } from '../../../../hooks/useExerciseFile.js';
+
+//
+//
+//
+/**
+ * Provides state and handler for the exercise runner's "cancel" action.
+ */
+var useControllerActionCancel = function useControllerActionCancel() {
+  var _return = React.useRef({});
+  var _React$useContext = React.useContext(ExerciseRunnerContext),
+    onCancel = _React$useContext.onCancel;
+  var activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  var isFileEditable = useExerciseFileEditable(activeFilename);
+  var runnerWebsocketStatus = useRecoilValue(exerciseWebSocketTotalStatusQuery([].concat(_toConsumableArray(isFileEditable ? ['usercodeEdit'] : []), ['runnerRoom', 'stdio'])));
+  var isRunning = useRecoilValue(exerciseRunnerRunningState);
+  var isConnecting = runnerWebsocketStatus === EliceWebSocket.CONNECTING;
+  var isNotReady = runnerWebsocketStatus !== EliceWebSocket.OPEN;
+  var isHidden = !isRunning;
+  var isDisabled = isHidden || isNotReady || isConnecting;
+  var isLoading = isConnecting;
+  /**
+   *
+   */
+  var cancel = React.useCallback(function () {
+    if (!isDisabled) {
+      onCancel();
+    }
+  }, [isDisabled, onCancel]);
+  //
+  //
+  //
+  _return.current.isHidden = isHidden;
+  _return.current.isDisabled = isDisabled;
+  _return.current.isLoading = isLoading;
+  _return.current.cancel = cancel;
+  return _return.current;
+};
+
+export { useControllerActionCancel };

package/es/components/material-exercise/exercise-runner/action/useControllerActionGrade.d.ts

@@ -0,0 +1,16 @@
+export interface UseControllerActionGradeReturn {
+    /** Whether the grade button should be hidden. */
+    isHidden: boolean;
+    /** Whether the grade button should be disabled. */
+    isDisabled: boolean;
+    /** Whether the grade button should show a loading indicator. */
+    isLoading: boolean;
+    /** Whether grading is disallowed for this exercise (used to show tooltip). */
+    isNoGrade: boolean;
+    /** Submit the exercise to grade. Resolves when the submission completes. */
+    grade: () => Promise<void>;
+}
+/**
+ * Provides state and handler for the exercise runner's "grade" action.
+ */
+export declare const useControllerActionGrade: () => UseControllerActionGradeReturn;

package/es/components/material-exercise/exercise-runner/action/useControllerActionGrade.js

@@ -0,0 +1,68 @@
+import { toConsumableArray as _toConsumableArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { enums } from '@elice/types';
+import { EliceWebSocket } from '@elice/websocket';
+import { useRecoilValue } from 'recoil';
+import { ExerciseRunnerContext } from '../ExerciseRunnerContext.js';
+import { exerciseActiveFilenameState, exerciseWebSocketTotalStatusQuery, exerciseState, exerciseRunnerRunTypeState, exerciseLectureState, exerciseRunnerSubmittingState, exerciseRunnerRunningState } from '../../context/recoil.js';
+import { ExerciseContext } from '../../context/context.js';
+import { useExerciseFileEditable } from '../../../../hooks/useExerciseFile.js';
+
+//
+//
+//
+/**
+ * Provides state and handler for the exercise runner's "grade" action.
+ */
+var useControllerActionGrade = function useControllerActionGrade() {
+  var _return = React.useRef({});
+  var _React$useContext = React.useContext(ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId;
+  var _React$useContext2 = React.useContext(ExerciseRunnerContext),
+    onSubmit = _React$useContext2.onSubmit;
+  var activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  var isFileEditable = useExerciseFileEditable(activeFilename);
+  var runnerWebsocketStatus = useRecoilValue(exerciseWebSocketTotalStatusQuery([].concat(_toConsumableArray(isFileEditable ? ['usercodeEdit'] : []), ['runnerRoom', 'stdio'])));
+  var exercise = useRecoilValue(exerciseState(materialExerciseId));
+  var exerciseRunType = useRecoilValue(exerciseRunnerRunTypeState);
+  var isNoGrade = Boolean(exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade);
+  var lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  var isTestLecture = (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === enums.LectureType.Test;
+  var isTestLectureCompleted = (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) === enums.TestAdmissionStatus.Completed;
+  var isSubmitting = useRecoilValue(exerciseRunnerSubmittingState);
+  var isRunning = useRecoilValue(exerciseRunnerRunningState);
+  var isConnecting = runnerWebsocketStatus === EliceWebSocket.CONNECTING;
+  var isNotReady = runnerWebsocketStatus !== EliceWebSocket.OPEN;
+  var isHidden = isRunning;
+  var isDisabled = isHidden || isNoGrade || isTestLecture && isTestLectureCompleted || isNotReady || isConnecting || isSubmitting;
+  var isLoading = isConnecting || isSubmitting && exerciseRunType === enums.ExerciseRunType.Grade;
+  /**
+   *
+   */
+  var grade = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          if (isDisabled) {
+            _context.n = 1;
+            break;
+          }
+          _context.n = 1;
+          return onSubmit(enums.ExerciseRunType.Grade);
+        case 1:
+          return _context.a(2);
+      }
+    }, _callee);
+  })), [isDisabled, onSubmit]);
+  //
+  //
+  //
+  _return.current.isHidden = isHidden;
+  _return.current.isDisabled = isDisabled;
+  _return.current.isLoading = isLoading;
+  _return.current.isNoGrade = isNoGrade;
+  _return.current.grade = grade;
+  return _return.current;
+};
+
+export { useControllerActionGrade };

package/es/components/material-exercise/exercise-runner/action/useControllerActionRun.d.ts

@@ -0,0 +1,14 @@
+export interface UseControllerActionRunReturn {
+    /** Whether the run button should be hidden. */
+    isHidden: boolean;
+    /** Whether the run button should be disabled. */
+    isDisabled: boolean;
+    /** Whether the run button should show a loading indicator. */
+    isLoading: boolean;
+    /** Submit the exercise to run. Resolves when the submission completes. */
+    run: () => Promise<void>;
+}
+/**
+ * Provides state and handler for the exercise runner's "run" action.
+ */
+export declare const useControllerActionRun: () => UseControllerActionRunReturn;

package/es/components/material-exercise/exercise-runner/action/useControllerActionRun.js

@@ -0,0 +1,59 @@
+import { toConsumableArray as _toConsumableArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { enums } from '@elice/types';
+import { EliceWebSocket } from '@elice/websocket';
+import { useRecoilValue } from 'recoil';
+import { ExerciseRunnerContext } from '../ExerciseRunnerContext.js';
+import { exerciseActiveFilenameState, exerciseWebSocketTotalStatusQuery, exerciseRunnerRunTypeState, exerciseRunnerSubmittingState, exerciseRunnerRunningState } from '../../context/recoil.js';
+import { useExerciseFileEditable } from '../../../../hooks/useExerciseFile.js';
+
+//
+//
+//
+/**
+ * Provides state and handler for the exercise runner's "run" action.
+ */
+var useControllerActionRun = function useControllerActionRun() {
+  var _return = React.useRef({});
+  var _React$useContext = React.useContext(ExerciseRunnerContext),
+    onSubmit = _React$useContext.onSubmit;
+  var activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  var isFileEditable = useExerciseFileEditable(activeFilename);
+  var runnerWebsocketStatus = useRecoilValue(exerciseWebSocketTotalStatusQuery([].concat(_toConsumableArray(isFileEditable ? ['usercodeEdit'] : []), ['runnerRoom', 'stdio'])));
+  var exerciseRunType = useRecoilValue(exerciseRunnerRunTypeState);
+  var isSubmitting = useRecoilValue(exerciseRunnerSubmittingState);
+  var isRunning = useRecoilValue(exerciseRunnerRunningState);
+  var isConnecting = runnerWebsocketStatus === EliceWebSocket.CONNECTING;
+  var isNotReady = runnerWebsocketStatus !== EliceWebSocket.OPEN;
+  var isHidden = isRunning;
+  var isDisabled = isHidden || isNotReady || isConnecting || isSubmitting;
+  var isLoading = isConnecting || isSubmitting && exerciseRunType === enums.ExerciseRunType.Run;
+  /**
+   *
+   */
+  var run = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          if (isDisabled) {
+            _context.n = 1;
+            break;
+          }
+          _context.n = 1;
+          return onSubmit(enums.ExerciseRunType.Run);
+        case 1:
+          return _context.a(2);
+      }
+    }, _callee);
+  })), [isDisabled, onSubmit]);
+  //
+  //
+  //
+  _return.current.isHidden = isHidden;
+  _return.current.isDisabled = isDisabled;
+  _return.current.isLoading = isLoading;
+  _return.current.run = run;
+  return _return.current;
+};
+
+export { useControllerActionRun };

package/es/components/material-exercise/exercise-runner/action/useControllerActionSyncRequest.d.ts

@@ -0,0 +1,15 @@
+export interface UseControllerActionSyncRequestReturn {
+    /** Whether the sync-request button should be hidden. */
+    isHidden: boolean;
+    /** Whether the sync-request button should be disabled. */
+    isDisabled: boolean;
+    /** Whether the sync-request button should show a loading indicator. */
+    isLoading: boolean;
+    /** Request the runner to sync the latest user code. */
+    syncRequest: () => void;
+}
+/**
+ * Provides state and handler for the exercise runner's "sync request" action,
+ * and forwards file-editor save actions to the same handler.
+ */
+export declare const useControllerActionSyncRequest: () => UseControllerActionSyncRequestReturn;

package/es/components/material-exercise/exercise-runner/action/useControllerActionSyncRequest.js

@@ -0,0 +1,62 @@
+import { toConsumableArray as _toConsumableArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { EliceWebSocket } from '@elice/websocket';
+import { useRecoilValue } from 'recoil';
+import { ExerciseRunnerContext } from '../ExerciseRunnerContext.js';
+import { ExerciseContext } from '../../context/context.js';
+import { exerciseActiveFilenameState, exerciseWebSocketTotalStatusQuery, exerciseState, exerciseRunnerRunningState } from '../../context/recoil.js';
+import { useExerciseFileEditable } from '../../../../hooks/useExerciseFile.js';
+import { exerciseFileEditorSaveAction$ } from '../../context/subjects.js';
+
+//
+//
+//
+/**
+ * Provides state and handler for the exercise runner's "sync request" action,
+ * and forwards file-editor save actions to the same handler.
+ */
+var useControllerActionSyncRequest = function useControllerActionSyncRequest() {
+  var _a;
+  var _return = React.useRef({});
+  var _React$useContext = React.useContext(ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId;
+  var _React$useContext2 = React.useContext(ExerciseRunnerContext),
+    onSyncRequest = _React$useContext2.onSyncRequest;
+  var activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  var isFileEditable = useExerciseFileEditable(activeFilename);
+  var runnerWebsocketStatus = useRecoilValue(exerciseWebSocketTotalStatusQuery([].concat(_toConsumableArray(isFileEditable ? ['usercodeEdit'] : []), ['runnerRoom', 'stdio'])));
+  var exercise = useRecoilValue(exerciseState(materialExerciseId));
+  var isRunning = useRecoilValue(exerciseRunnerRunningState);
+  var isConnecting = runnerWebsocketStatus === EliceWebSocket.CONNECTING;
+  var isNotReady = runnerWebsocketStatus !== EliceWebSocket.OPEN;
+  var isHidden = !isRunning || !((_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.httpPort);
+  var isDisabled = isHidden || isNotReady || isConnecting;
+  var isLoading = isConnecting;
+  /**
+   *
+   */
+  var syncRequest = React.useCallback(function () {
+    if (!isDisabled) {
+      onSyncRequest();
+    }
+  }, [isDisabled, onSyncRequest]);
+  //
+  //
+  //
+  React.useEffect(function () {
+    var saveActionSub = exerciseFileEditorSaveAction$.subscribe(syncRequest);
+    return function () {
+      saveActionSub.unsubscribe();
+    };
+  }, [syncRequest]);
+  //
+  //
+  //
+  _return.current.isHidden = isHidden;
+  _return.current.isDisabled = isDisabled;
+  _return.current.isLoading = isLoading;
+  _return.current.syncRequest = syncRequest;
+  return _return.current;
+};
+
+export { useControllerActionSyncRequest };

package/es/components/material-exercise/exercise-runner/arduino/ArduinoConnectionGuideDialog.d.ts

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

package/es/components/material-exercise/exercise-runner/arduino/ArduinoConnectionGuideDialog.js

@@ -0,0 +1,148 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRawEliceIntl } from '@elice/intl';
+import { usePermissionPhase } from '@elice/mcu-bridge';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import Alert from '@mui/material/Alert';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { useArduinoBridge } from './_context.js';
+import ArduinoConnectionGuideDialogNativeMock from './ArduinoConnectionGuideDialogNativeMock.js';
+import ArduinoConnectionGuideDialogSteps from './ArduinoConnectionGuideDialogSteps.js';
+
+//
+//
+//
+var ACCENT = '#7353ea';
+var PREVIEW_BG = '#f6f8fb';
+var PREVIEW_BORDER = '#e9ebf0';
+//
+//
+//
+var ArduinoConnectionGuideDialog = function ArduinoConnectionGuideDialog() {
+  var intl = useRawEliceIntl();
+  var phase = usePermissionPhase();
+  var _useArduinoBridge = useArduinoBridge(),
+    connectionIntent = _useArduinoBridge.connectionIntent;
+  var open = phase === 'requesting';
+  var isUpload = connectionIntent === 'upload';
+  /**
+   *
+   */
+  var renderTitle = function renderTitle() {
+    return intl.formatMessage({
+      id: isUpload ? 'exerciseRunner.arduino.connectGuide.title.upload' : 'exerciseRunner.arduino.connectGuide.title.connect'
+    });
+  };
+  /**
+   *
+   */
+  var renderUploadNotice = function renderUploadNotice() {
+    if (!isUpload) {
+      return null;
+    }
+    return jsx(Alert, {
+      severity: "info",
+      variant: "outlined",
+      icon: false,
+      children: intl.formatMessage({
+        id: 'exerciseRunner.arduino.connectGuide.upload.note'
+      })
+    });
+  };
+  /**
+   *
+   */
+  var renderPreview = function renderPreview() {
+    return jsxs(Stack, {
+      alignItems: "center",
+      spacing: 1.25,
+      sx: {
+        bgcolor: PREVIEW_BG,
+        border: "1px solid ".concat(PREVIEW_BORDER),
+        borderRadius: '10px',
+        p: '14px'
+      },
+      children: [jsxs(Stack, {
+        direction: "row",
+        spacing: 0.75,
+        alignItems: "center",
+        sx: {
+          color: ACCENT
+        },
+        children: [jsx(ArrowUpwardIcon, {
+          sx: {
+            fontSize: 11
+          }
+        }), jsx(Typography, {
+          sx: {
+            fontSize: 12,
+            fontWeight: 700,
+            letterSpacing: '-.01em',
+            color: ACCENT
+          },
+          children: intl.formatMessage({
+            id: 'exerciseRunner.arduino.connectGuide.preview.label'
+          })
+        })]
+      }), jsx(ArduinoConnectionGuideDialogNativeMock, {})]
+    });
+  };
+  /**
+   *
+   */
+  var renderActions = function renderActions() {
+    return jsx(DialogActions, {
+      sx: {
+        justifyContent: 'flex-start',
+        px: 3,
+        py: 2
+      },
+      children: jsx(Typography, {
+        variant: "caption",
+        color: "text.secondary",
+        children: intl.formatMessage({
+          id: 'exerciseRunner.arduino.connectGuide.footer'
+        })
+      })
+    });
+  };
+  //
+  //
+  //
+  // No onClose: open state is fully derived from the picker phase.
+  return jsxs(Dialog, {
+    disableEnforceFocus: true,
+    hideBackdrop: true,
+    fullWidth: true,
+    open: open,
+    maxWidth: "sm",
+    sx: {
+      pointerEvents: 'none'
+    },
+    PaperProps: {
+      sx: {
+        pointerEvents: 'auto'
+      }
+    },
+    children: [jsx(DialogTitle, {
+      children: renderTitle()
+    }), jsx(DialogContent, {
+      children: jsxs(Stack, {
+        spacing: 2,
+        children: [renderUploadNotice(), jsx(Typography, {
+          variant: "body2",
+          color: "text.secondary",
+          children: intl.formatMessage({
+            id: 'exerciseRunner.arduino.connectGuide.body'
+          })
+        }), renderPreview(), jsx(ArduinoConnectionGuideDialogSteps, {})]
+      })
+    }), renderActions()]
+  });
+};
+
+export { ArduinoConnectionGuideDialog as default };

package/es/components/material-exercise/exercise-runner/arduino/ArduinoConnectionGuideDialogNativeMock.d.ts

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