@elice/material-exercise 1.220803.0

package/es/components/material-exercise/MaterialExercise.styled.js

@@ -0,0 +1,68 @@
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import { MATERIAL_DIVIDER_BORDER_VALUE } from '../../constants/stylesheets.js';
+
+const EXERCISE_FILE_TREE_MIN_WIDTH = 128;
+const EXERCISE_PREVIEW_MIN_WIDTH = 128;
+const EXERCISE_RUNNER_MIN_HEIGHT = 128;
+const EXERCISE_HORIZONTAL_RATIO = {
+  FILETREE: 0.15,
+  EDITOR: 0.45,
+  PREVIEW: 0.4
+};
+/**
+ * Wrapper contains:
+ * - FileTree
+ * - FileTabs
+ * - File (Editor)
+ * - Runner
+ */
+
+const StyledExerciseContainer = styled.div.withConfig({
+  componentId: "sc-9joi7g-0"
+})(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;overflow:hidden;"]);
+/**
+ * Wrapper contains:
+ * - FileTree
+ * - FileTabs
+ * - File (Editor)
+ */
+
+const StyledExerciseMain = styled.div.withConfig({
+  componentId: "sc-9joi7g-1"
+})(["flex:1;display:flex;width:100%;min-width:0;min-height:0;"]);
+/**
+ * Wrapper contains:
+ * - FileTabs
+ * - File (Editor)
+ */
+
+const StyledExerciseFileAndTabWrap = styled.div.withConfig({
+  componentId: "sc-9joi7g-2"
+})(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;background-color:", ";"], base.color.navy9);
+const StyledExerciseFileWrap = styled.div.withConfig({
+  componentId: "sc-9joi7g-3"
+})(["flex:1;min-height:0;"]); // ========== Exercise FileTab ==========
+
+const StyledExerciseTabBar = styled.div.withConfig({
+  componentId: "sc-9joi7g-4"
+})(["display:flex;border-bottom:", ";"], MATERIAL_DIVIDER_BORDER_VALUE);
+const StyledExerciseTabsWrap = styled.div.withConfig({
+  componentId: "sc-9joi7g-5"
+})(["flex:1;min-width:0;"]);
+const StyledExerciseTabMenuWrap = styled.div.withConfig({
+  componentId: "sc-9joi7g-6"
+})(["display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;background-color:", ";"], base.color.navy8); // ========== Exercise FileTree ==========
+
+const StyledExerciseFileTreeWrap = styled.div.withConfig({
+  componentId: "sc-9joi7g-7"
+})(["flex:1;display:flex;flex-direction:column;min-width:0;height:100%;border-right:", ";"], MATERIAL_DIVIDER_BORDER_VALUE);
+const StyledxerciseFileTreeContaner = styled.div.withConfig({
+  componentId: "sc-9joi7g-8"
+})(["display:flex;height:100%;max-width:auto;&[aria-hidden='true']{max-width:0;overflow:hidden;}"]); // ========== Exercise Runner ==========
+
+const StyledExerciseRunnerWrap = styled.div.withConfig({
+  componentId: "sc-9joi7g-9"
+})(["width:100%;height:100%;border-top:", ";"], MATERIAL_DIVIDER_BORDER_VALUE);
+
+export { EXERCISE_FILE_TREE_MIN_WIDTH, EXERCISE_HORIZONTAL_RATIO, EXERCISE_PREVIEW_MIN_WIDTH, EXERCISE_RUNNER_MIN_HEIGHT, StyledExerciseContainer, StyledExerciseFileAndTabWrap, StyledExerciseFileTreeWrap, StyledExerciseFileWrap, StyledExerciseMain, StyledExerciseRunnerWrap, StyledExerciseTabBar, StyledExerciseTabMenuWrap, StyledExerciseTabsWrap, StyledxerciseFileTreeContaner };

package/es/components/material-exercise/context/ExerciseIntlProvider.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { MaterialIntlProviderPhrases } from '@elice/material-shared-utils';
+declare type AnyObject = Record<string, any>;
+/**
+ *
+ */
+export declare const withExerciseIntlProvider: <P extends AnyObject>(Component: React.VFC<P>, phrases: MaterialIntlProviderPhrases) => React.VFC<P>;
+/**
+ *
+ */
+export declare const withForwardRefExerciseIntlProvider: <T, P extends AnyObject>(Component: React.ForwardRefExoticComponent<P & React.RefAttributes<T>>, phrases: MaterialIntlProviderPhrases) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+export {};

package/es/components/material-exercise/context/ExerciseIntlProvider.js

@@ -0,0 +1,43 @@
+import React, { forwardRef, useContext } from 'react';
+import { MaterialIntlProvider } from '@elice/material-shared-utils';
+import { ExerciseContext } from './context.js';
+
+//
+//
+
+/**
+ *
+ */
+
+const withExerciseIntlProvider = (Component, phrases) => {
+  return props => {
+    const {
+      locale
+    } = useContext(ExerciseContext);
+    return React.createElement(MaterialIntlProvider, {
+      children: React.createElement(Component, Object.assign({}, props)),
+      locale: locale,
+      phrases: phrases
+    });
+  };
+};
+/**
+ *
+ */
+
+const withForwardRefExerciseIntlProvider = (Component, phrases) => {
+  return forwardRef((props, ref) => {
+    const {
+      locale
+    } = useContext(ExerciseContext);
+    return React.createElement(MaterialIntlProvider, {
+      children: React.createElement(Component, Object.assign({}, props, {
+        ref: ref
+      })),
+      locale: locale,
+      phrases: phrases
+    });
+  });
+};
+
+export { withExerciseIntlProvider, withForwardRefExerciseIntlProvider };

package/es/components/material-exercise/context/ExerciseProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ExerciseProviderDedicatedProps, MaterialExerciseCommonProps } from './types';
+export declare type ExerciseProviderProps = MaterialExerciseCommonProps & Omit<ExerciseProviderDedicatedProps, 'readOnlyActiveFile'>;
+/**
+ * Provider for exercise, which...
+ * - wrapping with `ExerciseContext`
+ * - fetching exercise room
+ * - fetching exercise room id
+ */
+declare const ExerciseProvider: React.FC<ExerciseProviderProps>;
+export default ExerciseProvider;

package/es/components/material-exercise/context/ExerciseProvider.js

@@ -0,0 +1,159 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { useMeasure } from 'react-use';
+import { getOrgMaterialExerciseDefaultRoomGet } from '@elice/api-client';
+import { Flex, Spinner } from '@elice/blocks';
+import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
+import styled from 'styled-components';
+import { ExerciseContext } from './context.js';
+import MaterialExerciseNoImage from './ExerciseProviderNoImage.js';
+import { exerciseUserState, exerciseState, exerciseRoomState, exerciseLectureState, exerciseMultilangLanguagesState, exerciseActiveFilenameState, exerciseContainerSizeState } from './recoil.js';
+
+const RECOIL_RESET_DELAY = 10;
+const StyledMaterialExercise = styled.div.withConfig({
+  componentId: "sc-pj5yv2-0"
+})(["display:flex;width:100%;height:100%;.eb-resizable{height:inherit;}"]);
+/**
+ * Provider for exercise, which...
+ * - wrapping with `ExerciseContext`
+ * - fetching exercise room
+ * - fetching exercise room id
+ */
+
+const ExerciseProvider = _a => {
+  var {
+    children,
+    materialExerciseId,
+    exerciseRoomId,
+    exerciseRoomUserId,
+    onDefaultExerciseRoomIdSet,
+    exerciseImageEmptyOptions
+  } = _a,
+      contextProps = __rest(_a, ["children", "materialExerciseId", "exerciseRoomId", "exerciseRoomUserId", "onDefaultExerciseRoomIdSet", "exerciseImageEmptyOptions"]); // user
+
+
+  const user = useRecoilValue(exerciseUserState); // exercise
+
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const exerciseRoom = useRecoilValue(exerciseRoomState(exerciseRoomId)); // lecture
+
+  const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
+  const resetLecture = useResetRecoilState(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId)); // multilang languages
+
+  const exerciseMultilangLanguages = useRecoilValue(exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id));
+  const resetExerciseMultilangLanguages = useResetRecoilState(exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id)); // etc
+
+  const activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  const setConatinerSize = useSetRecoilState(exerciseContainerSizeState); // wrap container size
+
+  const [wrapElRef, {
+    width,
+    height
+  }] = useMeasure(); //
+  // if exercise room id is not specified, fetch it from server
+  // NOTICE: should not use `exercise.defaultRoom.id`, since will be removed (confrimed by backend-team)
+  //
+
+  React.useEffect(() => {
+    if (exerciseRoomId) {
+      return;
+    }
+
+    getOrgMaterialExerciseDefaultRoomGet({
+      materialExerciseId
+    }).then(res => {
+      if (typeof onDefaultExerciseRoomIdSet === 'function') {
+        onDefaultExerciseRoomIdSet(res.exerciseRoomId);
+      }
+    }).catch(err => {
+      if (typeof contextProps.onError === 'function') {
+        contextProps.onError(err);
+      }
+    });
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [exerciseRoomId, materialExerciseId]); //
+  // reset lecture, after `exercise.lectureId` changed
+  //
+
+  React.useEffect(() => {
+    if (!(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId)) {
+      return;
+    }
+
+    const timeout = window.setTimeout(() => resetLecture(), RECOIL_RESET_DELAY);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [exercise]); //
+  // reset exercise multilang languages, after `exercise.id` changed
+  //
+
+  React.useEffect(() => {
+    if (!(exercise === null || exercise === void 0 ? void 0 : exercise.id)) {
+      return;
+    }
+
+    const timeout = window.setTimeout(() => resetExerciseMultilangLanguages(), RECOIL_RESET_DELAY);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [exercise]); //
+  // update Provider size
+  //
+
+  React.useEffect(() => {
+    if (width && height) {
+      setConatinerSize({
+        width,
+        height
+      });
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [width, height]); //
+  //
+  //
+
+  return React.createElement(StyledMaterialExercise, {
+    ref: wrapElRef,
+    children: (() => {
+      var _a; // render after measure Provider size
+
+
+      if (!width || !height) {
+        return null;
+      } // show spinner before exercise ready
+
+
+      if (!user || !lecture || !exercise || !exerciseRoomId || !exerciseRoom || typeof exerciseMultilangLanguages === 'undefined') {
+        return React.createElement(Flex, {
+          align: "center",
+          justify: "center",
+          width: "100%",
+          height: "100%"
+        }, React.createElement(Spinner, null));
+      } // when exerciseImage is not ready yet
+
+
+      if (exercise.readyExerciseImage === null) {
+        return React.createElement(MaterialExerciseNoImage, Object.assign({}, exerciseImageEmptyOptions, {
+          locale: contextProps.locale
+        }));
+      } // render
+
+
+      return React.createElement(ExerciseContext.Provider, {
+        children: children,
+        value: Object.assign(Object.assign({}, contextProps), {
+          materialExerciseId,
+          exerciseRoomId,
+          exerciseRoomUserId: exerciseRoomUserId !== null && exerciseRoomUserId !== void 0 ? exerciseRoomUserId : user.id,
+          readOnlyActiveFile: !!((_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.readOnlyFilelist.includes(activeFilename || ''))
+        })
+      });
+    })()
+  });
+}; //
+
+export { ExerciseProvider as default };

package/es/components/material-exercise/context/ExerciseProviderNoImage.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface ExerciseProviderNoImageProps {
+    /**  */
+    text?: React.ReactChild;
+    /**  */
+    imageSrc?: string;
+    /**  */
+    buttonText?: React.ReactChild;
+    /**  */
+    onButtonClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**  */
+    locale?: string;
+}
+declare const _default: (props: ExerciseProviderNoImageProps) => JSX.Element;
+export default _default;

package/es/components/material-exercise/context/ExerciseProviderNoImage.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { SafeImage, Box, Text, Button } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { MaterialIntlProvider } from '@elice/material-shared-utils';
+import styled from 'styled-components';
+import phrasesEn from './locales/noImage.en.json.js';
+import phrasesKo from './locales/noImage.ko.json.js';
+
+const StyledProviderNoImage = styled.div.withConfig({
+  componentId: "sc-oaauqc-0"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background-color:", ";"], base.color.navy9);
+
+const ExerciseProviderNoImage = ({
+  text,
+  imageSrc = '',
+  buttonText,
+  onButtonClick
+}) => {
+  const intl = useIntl();
+  return React.createElement(StyledProviderNoImage, null, React.createElement(SafeImage, {
+    src: imageSrc,
+    defaultSrc: "https://static.elice.io/elice-material/exercise/empty-code-purple.png",
+    alt: "empty-exercise-image",
+    tag: "div",
+    height: "4rem",
+    width: "4rem"
+  }), React.createElement(Box, {
+    paddingtop: "2rem",
+    paddingbottom: "2rem"
+  }, React.createElement(Text, {
+    role: "white"
+  }, text || intl.formatMessage({
+    id: 'exerciseContext.provider.noImage.title'
+  }))), React.createElement(Button, {
+    onClick: onButtonClick
+  }, buttonText || intl.formatMessage({
+    id: 'exerciseContext.provider.noImage.button'
+  })));
+}; //
+//
+//
+
+
+var MaterialExerciseNoImage = (props => {
+  return React.createElement(MaterialIntlProvider, {
+    locale: props.locale,
+    phrases: {
+      en: phrasesEn,
+      ko: phrasesKo
+    }
+  }, React.createElement(ExerciseProviderNoImage, Object.assign({}, props)));
+});
+
+export { MaterialExerciseNoImage as default };

package/es/components/material-exercise/context/context.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SetRequired } from 'type-fest';
+import type { ExerciseProviderDedicatedProps, MaterialExerciseCommonProps } from './types';
+declare type MaterialExerciseCommonForContextProps = SetRequired<MaterialExerciseCommonProps, 'exerciseRoomId'>;
+export declare type ExerciseContextValue = MaterialExerciseCommonForContextProps & ExerciseProviderDedicatedProps;
+export declare const ExerciseContext: React.Context<ExerciseContextValue>;
+export {};

package/es/components/material-exercise/context/context.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const ExerciseContext = React.createContext(null);
+
+export { ExerciseContext };

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

@@ -0,0 +1,7 @@
+export * from './recoil';
+export * from './context';
+export * from './types';
+export * from './recoilTypes';
+export * from './subjects';
+export { default as ExerciseProvider } from './ExerciseProvider';
+export type { ExerciseProviderNoImageProps as ExerciseProviderNoImageOptions } from './ExerciseProviderNoImage';

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

@@ -0,0 +1,3 @@
+var phrasesEn = {"exerciseContext.provider.noImage.button":"Create a new image","exerciseContext.provider.noImage.title":"Exercise image is not ready yet."};
+
+export { phrasesEn as default };

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

@@ -0,0 +1,3 @@
+var phrasesKo = {"exerciseContext.provider.noImage.button":"예제 작성","exerciseContext.provider.noImage.title":"실습 코드가 작성되지 않았습니다."};
+
+export { phrasesKo as default };

package/es/components/material-exercise/context/recoil.d.ts

@@ -0,0 +1,144 @@
+import { ExercisePreviewDisplayMode, ExercisePreviewType } from './recoilTypes';
+import type { ArduinoAgentConnectionStatus, ArduinoUploadProgressStatus } from "../../../typings/arduino";
+import type { AtomContainerSizeState, AtomExerciseRoomState, AtomExerciseState, AtomFileEditorCursorState, AtomLectureState, AtomMultilangEnvironmentJson, AtomMultilangEnvironmentState, AtomRunnerRoomConnectionInfoState, AtomRunnerRunTypeState, AtomRunnerStdioFilesState, AtomUserState, AtomVisibilityState, AtomWebSocketStateKey, AtomWebSocketStates } from './recoilTypes';
+/**
+ * Lecture.
+ */
+export declare const exerciseLectureState: (param: number | undefined) => import("recoil").RecoilState<AtomLectureState>;
+/**
+ * Material exercise.
+ */
+export declare const exerciseState: (param: number) => import("recoil").RecoilState<AtomExerciseState>;
+/**
+ * Material exercise room.
+ */
+export declare const exerciseRoomState: (param: number | undefined) => import("recoil").RecoilState<AtomExerciseRoomState>;
+/**
+ * User.
+ */
+export declare const exerciseUserState: import("recoil").RecoilState<AtomUserState>;
+/**
+ *
+ */
+export declare const exerciseFileTabsOpenedState: (param: {
+    materialExerciseId: number;
+    exerciseRoomId: number;
+}) => import("recoil").RecoilState<string[]>;
+/**
+ *
+ */
+export declare const exerciseFileTreeOpenedState: import("recoil").RecoilState<boolean>;
+/**
+ * Editor preference.
+ */
+export declare const exerciseEditorPreferenceState: import("recoil").RecoilState<Required<import("../../shared/monaco-editor").MonacoEditorPreference>>;
+/**
+ *
+ */
+export declare const exercisePreviewTypeState: (param: number) => import("recoil").RecoilValueReadOnly<ExercisePreviewType>;
+/**
+ *
+ */
+export declare const exercisePreviewDisplayModeState: import("recoil").RecoilState<ExercisePreviewDisplayMode>;
+/**
+ *
+ */
+export declare const exerciseRunnerSubmittingState: import("recoil").RecoilState<boolean>;
+/**
+ *
+ */
+export declare const exerciseRunnerRunningState: import("recoil").RecoilState<boolean>;
+/**
+ *
+ */
+export declare const exerciseRunnerRunTypeState: import("recoil").RecoilState<AtomRunnerRunTypeState>;
+/**
+ *
+ */
+export declare const exerciseRunnerRoomConnectionInfoState: import("recoil").RecoilState<AtomRunnerRoomConnectionInfoState>;
+/**
+ *
+ */
+export declare const exerciseRunnerStdioFilesState: import("recoil").RecoilState<AtomRunnerStdioFilesState>;
+/**
+ *
+ */
+export declare const exerciseRunnerWebSocketStatusQuery: import("recoil").RecoilValueReadOnly<number>;
+/**
+ *
+ */
+export declare const exerciseWebsocketStates: import("recoil").RecoilState<AtomWebSocketStates>;
+/**
+ *
+ */
+export declare const exerciseWebsocketQuery: (param: AtomWebSocketStateKey) => import("recoil").RecoilState<number>;
+/**
+ *
+ */
+export declare const exerciseMultilangLanguagesState: (param: number | undefined) => import("recoil").RecoilState<AtomMultilangEnvironmentState>;
+/**
+ *
+ */
+export declare const exerciseMultilangEnvironmentState: (param: {
+    materialExerciseId: number;
+    exerciseRoomId: number;
+}) => import("recoil").RecoilState<AtomMultilangEnvironmentJson>;
+/**
+ * Arduino preference.
+ */
+export declare const exerciseArduinoPreferenceState: import("recoil").RecoilState<Required<{
+    baudRate: number;
+    port: string;
+}>>;
+/**
+ * Arduino ports.
+ */
+export declare const exerciseArduinoPortsState: import("recoil").RecoilState<{
+    Name: string;
+    SerialNumber: string;
+    DeviceClass: string;
+    IsOpen: boolean;
+    IsPrimary: boolean;
+    Baud: number;
+    BufferAlgorithm: string;
+    Ver: string;
+    NetworkPort: boolean;
+    VendorID: string;
+    ProductID: string;
+}[]>;
+/**
+ * Opened arduino port.
+ */
+export declare const exerciseArduinoOpenedPortNameState: import("recoil").RecoilState<string | null>;
+/**
+ * Arduino port open handler.
+ */
+export declare const exerciseArduinoOnSelectPortState: import("recoil").RecoilState<(name: string) => void>;
+/**
+ * Arduino agent connection status.
+ */
+export declare const exerciseArduinoAgentConnectionState: import("recoil").RecoilState<ArduinoAgentConnectionStatus>;
+/**
+ * Arduino upload progress.
+ */
+export declare const exerciseArduinoUploadProgressState: import("recoil").RecoilState<ArduinoUploadProgressStatus>;
+/**
+ *
+ */
+export declare const exerciseActiveFilenameState: import("recoil").RecoilState<string | null>;
+/**
+ *
+ */
+export declare const exerciseRightpaneActiveState: import("recoil").RecoilState<AtomVisibilityState>;
+/**
+ *
+ */
+export declare const exerciseContainerSizeState: import("recoil").RecoilState<AtomContainerSizeState>;
+/**
+ *
+ */
+export declare const exerciseFileEditorCursorState: import("recoil").RecoilState<AtomFileEditorCursorState>;
+/**
+ *
+ */
+export declare const exerciseFileEditorCursorSelectionValueState: import("recoil").RecoilState<string | null>;