npm - @elice/material-exercise - Versions diffs - 1.230220.1 → 1.230220.2 - Mend

@elice/material-exercise 1.230220.1 → 1.230220.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

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

@@ -46,7 +46,8 @@ const ExerciseRunnerControllerButtonGroup = () => {
   const intl = reactIntl.useIntl();
   const {
-    materialExerciseId
+    materialExerciseId,
+    onCodeHelpRequest
   } = React__default["default"].useContext(context.ExerciseContext);
   const {
     onSubmit,
@@ -54,6 +55,7 @@ const ExerciseRunnerControllerButtonGroup = () => {
     onCancel
   } = React__default["default"].useContext(ExerciseRunnerContext.ExerciseRunnerContext);
   const runnerWebsocketStatus = recoil.useRecoilValue(recoil$1.exerciseRunnerWebSocketStatusQuery);
+  const editorCursorSelectionValue = recoil.useRecoilValue(recoil$1.exerciseFileEditorCursorSelectionValueState);
   const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
   const exerciseRunType = recoil.useRecoilValue(recoil$1.exerciseRunnerRunTypeState);
   const exerciseWithNoGrade = Boolean(exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade);
@@ -239,8 +241,12 @@ const ExerciseRunnerControllerButtonGroup = () => {
   const renderCodeHelpRequestButton = () => {
+    if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
+      return null;
+    }
     return React__default["default"].createElement(ExerciseRunnerControllerCodeHelpRequestButton, {
-      isCodeHelpHidden: isCodeHelpHidden
+      onClick: () => onCodeHelpRequest(editorCursorSelectionValue)
     });
   }; //
   //

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerCodeHelpRequestButton.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react';
-interface ExerciseRunnerControllerCodeHelpRequestButtonProps {
-    isCodeHelpHidden: boolean;
-}
-declare const ExerciseRunnerControllerCodeHelpRequestButton: React.FC<ExerciseRunnerControllerCodeHelpRequestButtonProps>;
+import type { ButtonProps } from '@elice/blocks';
+declare type OmittedButtonProps = Omit<ButtonProps, 'size' | 'role' | 'icon' | 'iconAlign'>;
+declare const ExerciseRunnerControllerCodeHelpRequestButton: React.ForwardRefExoticComponent<OmittedButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default ExerciseRunnerControllerCodeHelpRequestButton;

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

@@ -4,115 +4,106 @@ var React = require('react');
 var reactIntl = require('react-intl');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
-var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
 var materialSharedUtils = require('@elice/material-shared-utils');
-var recoil = require('recoil');
 var styled = require('styled-components');
-var recoil$1 = require('../context/recoil.js');
-var context = require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-const IS_TOOLTIP_OPENED_KEY = 'isTooltipOpened';
-const IS_TOOLTIP_OPENED_VALUE = 'true';
+const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY = 'elice-material-exercise-aibot-tooltip-hidden';
+const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE = 'true';
 const StyledControllerButton = styled__default["default"](blocks.Button).withConfig({
   componentId: "sc-10grd0k-0"
 })(["position:relative;transition:none;"]);
-const StyledCustomTooltip = styled__default["default"].div.withConfig({
-  componentId: "sc-10grd0k-1"
-})(["position:absolute;top:calc(-100% - 1.25rem);left:calc(-100% - 1.5rem);display:flex;align-items:center;gap:0.25rem;padding:0.5rem 0.75rem;border-radius:0.5rem;background-color:", ";"], designTokens.base.color.white);
-const StyledTip = styled__default["default"].svg.withConfig({
-  componentId: "sc-10grd0k-2"
-})(["position:absolute;left:50%;bottom:calc(-0.25rem);transform:rotate(225deg);"]);
-const StyledCustomBadge = styled__default["default"].div.withConfig({
-  componentId: "sc-10grd0k-3"
-})(["padding:0.0625rem 0.25rem;border-radius:0.25rem;background-color:", ";font-size:0.6875rem;"], designTokens.base.color.red7);
-const ExerciseRunnerControllerCodeHelpRequestButton = ({
-  isCodeHelpHidden
-}) => {
-  const {
-    onCodeHelpRequest
-  } = React__default["default"].useContext(context.ExerciseContext);
+const ExerciseRunnerControllerCodeHelpRequestButton = React__default["default"].forwardRef((props, ref) => {
   const {
     orgNameShort
   } = materialSharedUtils.useMaterialConfig();
-  const editorCursorSelectionValue = recoil.useRecoilValue(recoil$1.exerciseFileEditorCursorSelectionValueState);
-  const [isTooltipOpened, setIsTooltipOpened] = React__default["default"].useState(false);
-  const [aiInfo, setAiInfo] = React__default["default"].useState(null); //
+  const [isTooltipHidden, setIsTooltipHidden] = React__default["default"].useState(false); //
   //
   // Get ai info from organization and check all resovle below conditions.
-  // - isEnable is true
-  // - quotaPerDay is upper than zero
-  // - tooltipOpenSession is false
+  // - isEnable is true.
+  // - quotaPerDay is upper than zero.
+  // - tooltip hidden is false.
   React__default["default"].useEffect(() => {
-    void apiClient.getGlobalOrganizationGet({
-      organizationNameShort: orgNameShort
-    }).then(res => {
-      setAiInfo(res.organization.aibotInfo);
-    });
-    const isTooltipOpend = sessionStorage.getItem(IS_TOOLTIP_OPENED_KEY);
+    const isTooltipHidden = sessionStorage.getItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY) === ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE;
-    if (isTooltipOpend === IS_TOOLTIP_OPENED_VALUE) {
-      setIsTooltipOpened(true);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (isTooltipHidden) {
+      setIsTooltipHidden(true);
+      return;
+    }
+    apiClient.getGlobalOrganizationGet({
+      organizationNameShort: orgNameShort
+    }).then(res => {
+      const {
+        aibotInfo
+      } = res.organization;
+      const isHidden = !aibotInfo.isEnabled || aibotInfo.quotaPerDay <= 0;
+      setIsTooltipHidden(isHidden);
+    }).catch(() => {
+      setIsTooltipHidden(true);
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); //
   //
   //
-  if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
-    return null;
-  }
+  /**
+   *
+   */
+  const renderAiBotTooltipTitle = () => {
+    return React__default["default"].createElement(blocks.Flex, {
+      align: "center"
+    }, React__default["default"].createElement(blocks.BadgeNext, {
+      role: "red"
+    }, React__default["default"].createElement(blocks.Text, {
+      role: "white",
+      size: "tiny",
+      bold: true
+    }, "NEW")), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.25
+    }), React__default["default"].createElement(blocks.Text, {
+      role: "gray7",
+      size: "small",
+      bold: true
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp"
+    })), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.25
+    }), React__default["default"].createElement(blocks.IconButton, {
+      size: "tiny",
+      role: "gray6",
+      hasPadding: false,
+      border: false,
+      icon: icons.eilMathsignMultiplyBasic,
+      onClick: () => {
+        sessionStorage.setItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY, ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE);
+        setIsTooltipHidden(true);
+      }
+    }));
+  };
-  return React__default["default"].createElement(StyledControllerButton, {
+  return React__default["default"].createElement(blocks.Tooltip, {
+    placement: "top",
+    dark: false,
+    visible: !isTooltipHidden,
+    title: renderAiBotTooltipTitle()
+  }, React__default["default"].createElement(StyledControllerButton, Object.assign({}, props, {
+    ref: ref,
     size: "tiny",
     role: "darkblue",
     icon: React__default["default"].createElement(blocks.Icon, {
       icon: icons.eilArrowRightwardsBasic
     }),
-    iconAlign: "right",
-    onClick: () => {
-      onCodeHelpRequest(editorCursorSelectionValue);
-    }
-  }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    iconAlign: "right"
+  }), React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "exerciseRunner.controller.buttonGroup.button.helpRequest"
-  }), aiInfo && aiInfo.isEnabled && aiInfo.quotaPerDay > 0 && !isTooltipOpened ? React__default["default"].createElement(StyledCustomTooltip, {
-    onClick: e => {
-      e.stopPropagation();
-    }
-  }, React__default["default"].createElement(StyledCustomBadge, null, React__default["default"].createElement(blocks.Text, {
-    role: "white",
-    size: "tiny"
-  }, "NEW")), React__default["default"].createElement(blocks.Text, {
-    role: "gray7",
-    size: "small"
-  }, React__default["default"].createElement(reactIntl.FormattedMessage, {
-    id: "exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp"
-  })), React__default["default"].createElement(blocks.IconButton, {
-    size: "tiny",
-    hasPadding: false,
-    border: false,
-    icon: icons.eilMathsignMultiplyBasic,
-    onClick: () => {
-      sessionStorage.setItem(IS_TOOLTIP_OPENED_KEY, IS_TOOLTIP_OPENED_VALUE);
-      setIsTooltipOpened(true);
-    }
-  }), React__default["default"].createElement(StyledTip, {
-    viewBox: "0 0 50 50",
-    height: "0.5rem"
-  }, React__default["default"].createElement("path", {
-    d: "M1 50 V10 Q1 1 10 1 H50z",
-    fill: designTokens.base.color.white
-  }))) : null);
-};
+  })));
+});
 module.exports = ExerciseRunnerControllerCodeHelpRequestButton;

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerButtonGroup.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 import 'react-use';
 import 'socket.io-client';
-import { exerciseRunnerWebSocketStatusQuery, exerciseState, exerciseRunnerRunTypeState, exerciseLectureState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseArduinoUploadProgressState, exerciseArduinoOpenedPortNameState } from '../context/recoil.js';
+import { exerciseRunnerWebSocketStatusQuery, exerciseFileEditorCursorSelectionValueState, exerciseState, exerciseRunnerRunTypeState, exerciseLectureState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseArduinoUploadProgressState, exerciseArduinoOpenedPortNameState } from '../context/recoil.js';
 import { ExerciseContext } from '../context/context.js';
 import '../context/recoilTypes.js';
 import { exerciseFileEditorSaveAction$ } from '../context/subjects.js';
@@ -39,7 +39,8 @@ const ExerciseRunnerControllerButtonGroup = () => {
   const intl = useIntl();
   const {
-    materialExerciseId
+    materialExerciseId,
+    onCodeHelpRequest
   } = React.useContext(ExerciseContext);
   const {
     onSubmit,
@@ -47,6 +48,7 @@ const ExerciseRunnerControllerButtonGroup = () => {
     onCancel
   } = React.useContext(ExerciseRunnerContext);
   const runnerWebsocketStatus = useRecoilValue(exerciseRunnerWebSocketStatusQuery);
+  const editorCursorSelectionValue = useRecoilValue(exerciseFileEditorCursorSelectionValueState);
   const exercise = useRecoilValue(exerciseState(materialExerciseId));
   const exerciseRunType = useRecoilValue(exerciseRunnerRunTypeState);
   const exerciseWithNoGrade = Boolean(exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade);
@@ -232,8 +234,12 @@ const ExerciseRunnerControllerButtonGroup = () => {
   const renderCodeHelpRequestButton = () => {
+    if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
+      return null;
+    }
     return React.createElement(ExerciseRunnerControllerCodeHelpRequestButton, {
-      isCodeHelpHidden: isCodeHelpHidden
+      onClick: () => onCodeHelpRequest(editorCursorSelectionValue)
     });
   }; //
   //

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerCodeHelpRequestButton.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react';
-interface ExerciseRunnerControllerCodeHelpRequestButtonProps {
-    isCodeHelpHidden: boolean;
-}
-declare const ExerciseRunnerControllerCodeHelpRequestButton: React.FC<ExerciseRunnerControllerCodeHelpRequestButtonProps>;
+import type { ButtonProps } from '@elice/blocks';
+declare type OmittedButtonProps = Omit<ButtonProps, 'size' | 'role' | 'icon' | 'iconAlign'>;
+declare const ExerciseRunnerControllerCodeHelpRequestButton: React.ForwardRefExoticComponent<OmittedButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default ExerciseRunnerControllerCodeHelpRequestButton;

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerCodeHelpRequestButton.js CHANGED Viewed

@@ -1,111 +1,102 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { getGlobalOrganizationGet } from '@elice/api-client';
-import { Button, Icon, Text, IconButton } from '@elice/blocks';
-import { base } from '@elice/design-tokens';
-import { eilArrowRightwardsBasic, eilMathsignMultiplyBasic } from '@elice/icons';
+import { Button, Tooltip, Flex, BadgeNext, Text, Hspace, IconButton, Icon } from '@elice/blocks';
+import { eilMathsignMultiplyBasic, eilArrowRightwardsBasic } from '@elice/icons';
 import { useMaterialConfig } from '@elice/material-shared-utils';
-import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
-import { exerciseFileEditorCursorSelectionValueState } from '../context/recoil.js';
-import { ExerciseContext } from '../context/context.js';
-import '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
-const IS_TOOLTIP_OPENED_KEY = 'isTooltipOpened';
-const IS_TOOLTIP_OPENED_VALUE = 'true';
+const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY = 'elice-material-exercise-aibot-tooltip-hidden';
+const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE = 'true';
 const StyledControllerButton = styled(Button).withConfig({
   componentId: "sc-10grd0k-0"
 })(["position:relative;transition:none;"]);
-const StyledCustomTooltip = styled.div.withConfig({
-  componentId: "sc-10grd0k-1"
-})(["position:absolute;top:calc(-100% - 1.25rem);left:calc(-100% - 1.5rem);display:flex;align-items:center;gap:0.25rem;padding:0.5rem 0.75rem;border-radius:0.5rem;background-color:", ";"], base.color.white);
-const StyledTip = styled.svg.withConfig({
-  componentId: "sc-10grd0k-2"
-})(["position:absolute;left:50%;bottom:calc(-0.25rem);transform:rotate(225deg);"]);
-const StyledCustomBadge = styled.div.withConfig({
-  componentId: "sc-10grd0k-3"
-})(["padding:0.0625rem 0.25rem;border-radius:0.25rem;background-color:", ";font-size:0.6875rem;"], base.color.red7);
-const ExerciseRunnerControllerCodeHelpRequestButton = ({
-  isCodeHelpHidden
-}) => {
-  const {
-    onCodeHelpRequest
-  } = React.useContext(ExerciseContext);
+const ExerciseRunnerControllerCodeHelpRequestButton = React.forwardRef((props, ref) => {
   const {
     orgNameShort
   } = useMaterialConfig();
-  const editorCursorSelectionValue = useRecoilValue(exerciseFileEditorCursorSelectionValueState);
-  const [isTooltipOpened, setIsTooltipOpened] = React.useState(false);
-  const [aiInfo, setAiInfo] = React.useState(null); //
+  const [isTooltipHidden, setIsTooltipHidden] = React.useState(false); //
   //
   // Get ai info from organization and check all resovle below conditions.
-  // - isEnable is true
-  // - quotaPerDay is upper than zero
-  // - tooltipOpenSession is false
+  // - isEnable is true.
+  // - quotaPerDay is upper than zero.
+  // - tooltip hidden is false.
   React.useEffect(() => {
-    void getGlobalOrganizationGet({
-      organizationNameShort: orgNameShort
-    }).then(res => {
-      setAiInfo(res.organization.aibotInfo);
-    });
-    const isTooltipOpend = sessionStorage.getItem(IS_TOOLTIP_OPENED_KEY);
+    const isTooltipHidden = sessionStorage.getItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY) === ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE;
-    if (isTooltipOpend === IS_TOOLTIP_OPENED_VALUE) {
-      setIsTooltipOpened(true);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (isTooltipHidden) {
+      setIsTooltipHidden(true);
+      return;
+    }
+    getGlobalOrganizationGet({
+      organizationNameShort: orgNameShort
+    }).then(res => {
+      const {
+        aibotInfo
+      } = res.organization;
+      const isHidden = !aibotInfo.isEnabled || aibotInfo.quotaPerDay <= 0;
+      setIsTooltipHidden(isHidden);
+    }).catch(() => {
+      setIsTooltipHidden(true);
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); //
   //
   //
-  if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
-    return null;
-  }
+  /**
+   *
+   */
+  const renderAiBotTooltipTitle = () => {
+    return React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(BadgeNext, {
+      role: "red"
+    }, React.createElement(Text, {
+      role: "white",
+      size: "tiny",
+      bold: true
+    }, "NEW")), React.createElement(Hspace, {
+      width: 0.25
+    }), React.createElement(Text, {
+      role: "gray7",
+      size: "small",
+      bold: true
+    }, React.createElement(FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp"
+    })), React.createElement(Hspace, {
+      width: 0.25
+    }), React.createElement(IconButton, {
+      size: "tiny",
+      role: "gray6",
+      hasPadding: false,
+      border: false,
+      icon: eilMathsignMultiplyBasic,
+      onClick: () => {
+        sessionStorage.setItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY, ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE);
+        setIsTooltipHidden(true);
+      }
+    }));
+  };
-  return React.createElement(StyledControllerButton, {
+  return React.createElement(Tooltip, {
+    placement: "top",
+    dark: false,
+    visible: !isTooltipHidden,
+    title: renderAiBotTooltipTitle()
+  }, React.createElement(StyledControllerButton, Object.assign({}, props, {
+    ref: ref,
     size: "tiny",
     role: "darkblue",
     icon: React.createElement(Icon, {
       icon: eilArrowRightwardsBasic
     }),
-    iconAlign: "right",
-    onClick: () => {
-      onCodeHelpRequest(editorCursorSelectionValue);
-    }
-  }, React.createElement(FormattedMessage, {
+    iconAlign: "right"
+  }), React.createElement(FormattedMessage, {
     id: "exerciseRunner.controller.buttonGroup.button.helpRequest"
-  }), aiInfo && aiInfo.isEnabled && aiInfo.quotaPerDay > 0 && !isTooltipOpened ? React.createElement(StyledCustomTooltip, {
-    onClick: e => {
-      e.stopPropagation();
-    }
-  }, React.createElement(StyledCustomBadge, null, React.createElement(Text, {
-    role: "white",
-    size: "tiny"
-  }, "NEW")), React.createElement(Text, {
-    role: "gray7",
-    size: "small"
-  }, React.createElement(FormattedMessage, {
-    id: "exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp"
-  })), React.createElement(IconButton, {
-    size: "tiny",
-    hasPadding: false,
-    border: false,
-    icon: eilMathsignMultiplyBasic,
-    onClick: () => {
-      sessionStorage.setItem(IS_TOOLTIP_OPENED_KEY, IS_TOOLTIP_OPENED_VALUE);
-      setIsTooltipOpened(true);
-    }
-  }), React.createElement(StyledTip, {
-    viewBox: "0 0 50 50",
-    height: "0.5rem"
-  }, React.createElement("path", {
-    d: "M1 50 V10 Q1 1 10 1 H50z",
-    fill: base.color.white
-  }))) : null);
-};
+  })));
+});
 export { ExerciseRunnerControllerCodeHelpRequestButton as default };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-exercise",
-  "version": "1.230220.1",
+  "version": "1.230220.2",
   "description": "User view and editing components of Elice material exercise",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -79,8 +79,8 @@
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.220803.0",
     "@elice/markdown": "^1.220803.0",
-    "@elice/material-shared-types": "1.230220.1",
-    "@elice/material-shared-utils": "1.230220.1",
+    "@elice/material-shared-types": "1.230220.2",
+    "@elice/material-shared-utils": "1.230220.2",
     "@elice/types": "1.230215.1",
     "@elice/websocket": "^1.220803.0",
     "@types/classnames": "^2.3.1",
@@ -102,5 +102,5 @@
     "recoil": "^0.6.1",
     "styled-components": "^5.2.0"
   },
-  "gitHead": "f8c978d25b5efb10d7c75a2023e9a32ca864754b"
+  "gitHead": "f49499e86ce2ccbea6a1b83e070649a3167f8074"
 }