@elice/material-exercise 1.220803.0

package/es/components/shared/monaco-editor/utils/theme/index.js

@@ -0,0 +1,14 @@
+import { VSCODE_THEMES } from '../../constants/themes/index.js';
+import { convertToMonacoTheme } from './convert.js';
+
+/**
+ * Import theme of vscode.
+ */
+
+async function importTheme(theme) {
+  var _a;
+
+  return ((_a = VSCODE_THEMES.find(t => t.id === theme)) !== null && _a !== void 0 ? _a : VSCODE_THEMES[0]).getTheme().then(themeData => convertToMonacoTheme(themeData));
+}
+
+export { importTheme };

package/es/components/shared/no-vnc/NoVnc.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { GetOrgMaterialExerciseGetResponses } from '@elice/types';
+declare type MaterialExerciseReadyExerciseImage = GetOrgMaterialExerciseGetResponses['materialExercise']['readyExerciseImage'];
+export interface NoVncApis {
+    connect: () => void;
+    disconnect: () => void;
+    reset: () => void;
+}
+export interface NoVncProps {
+    isRunning: boolean;
+    wsUri: string;
+    roomToken: string;
+    readyExerciseImage: NonNullable<MaterialExerciseReadyExerciseImage>;
+    exercisePreviewDisplayModeButton?: JSX.Element;
+    onConnect?: () => void;
+    onDisconnect?: () => void;
+}
+declare const NoVnc: React.ForwardRefExoticComponent<NoVncProps & React.RefAttributes<NoVncApis>>;
+export default NoVnc;

package/es/components/shared/no-vnc/NoVnc.js

@@ -0,0 +1,265 @@
+import React, { forwardRef } from 'react';
+import { useMeasure, useMount, useUnmount, useUpdateEffect } from 'react-use';
+import { Text } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { eilViewMaximize, eilViewMinimize } from '@elice/icons';
+import RFB_decoders_copy_rect from '@novnc/novnc/core/decoders/copyrect';
+import RFB_decoders_hextile from '@novnc/novnc/core/decoders/hextile';
+import RFB_decoders_raw from '@novnc/novnc/core/decoders/raw';
+import RFB_decoders_rre from '@novnc/novnc/core/decoders/rre';
+import RFB_decoders_tight from '@novnc/novnc/core/decoders/tight';
+import RFB_decoders_tight_png from '@novnc/novnc/core/decoders/tightpng';
+import { encodings } from '@novnc/novnc/core/encodings';
+import RFB from '@novnc/novnc/core/rfb';
+import styled from 'styled-components';
+import ExerciseMenuButton from '../exercise-menu-button/ExerciseMenuButton.js';
+import PreviewContainer from '../preview-container/PreviewContainer.js';
+
+//
+//
+
+const VNC_BACKGROUND_COLOR = base.color.navy7;
+const StyledHeaderTitle = styled.div.withConfig({
+  componentId: "sc-1duy62f-0"
+})(["flex:1;"]);
+const StyledHeaderButtonGroup = styled.div.withConfig({
+  componentId: "sc-1duy62f-1"
+})(["flex:0 0 auto;display:flex;align-items:center;"]);
+const StyledVncWrap = styled.div.withConfig({
+  componentId: "sc-1duy62f-2"
+})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:", ";overflow:hidden;"], VNC_BACKGROUND_COLOR);
+const StyledNoVncContainer = styled.div.withConfig({
+  componentId: "sc-1duy62f-3"
+})([""]);
+const StyledNoVnc = styled.div.withConfig({
+  componentId: "sc-1duy62f-4"
+})(["position:relative;left:50%;top:50%;transform-origin:center center;transform:translate(-50%,-50%);"]); //
+//
+//
+
+const NoVnc = forwardRef(({
+  isRunning = false,
+  wsUri,
+  roomToken,
+  readyExerciseImage,
+  exercisePreviewDisplayModeButton = null,
+  onConnect,
+  onDisconnect
+}, ref) => {
+  const vncRfb = React.useRef(null);
+  const vncElRef = React.useRef(null);
+  const [vncWrapRef, {
+    width,
+    height
+  }] = useMeasure();
+  const [isVncScaledFromLocal, setVncScaledFromLocal] = React.useState(true);
+  /**
+   * Default size of VNC from exericse image.
+   */
+
+  const vncDefaultSize = React.useMemo(() => {
+    var _a, _b;
+
+    return {
+      width: (_a = readyExerciseImage === null || readyExerciseImage === void 0 ? void 0 : readyExerciseImage.defaultVncWidth) !== null && _a !== void 0 ? _a : 300,
+      height: (_b = readyExerciseImage === null || readyExerciseImage === void 0 ? void 0 : readyExerciseImage.defaultVncHeight) !== null && _b !== void 0 ? _b : 300
+    };
+  }, [readyExerciseImage]);
+  /**
+   * Transform scale to fit VNC to VNC wrap.
+   */
+
+  const vncTransformScale = React.useMemo(() => Math.min(width / vncDefaultSize.width, height / vncDefaultSize.height), [width, height, vncDefaultSize.width, vncDefaultSize.height]);
+  /**
+   * Element style of VNC and VNC wrap.
+   */
+
+  const vncElementStyle = React.useMemo(() => ({
+    width: `${(vncDefaultSize.width * vncTransformScale).toFixed(3)}px`,
+    height: `${(vncDefaultSize.height * vncTransformScale).toFixed(3)}px`
+  }), [vncDefaultSize.width, vncDefaultSize.height, vncTransformScale]);
+  /**
+   * Connect VNC.
+   */
+
+  const connect = React.useCallback(() => {
+    if (!vncElRef.current || !wsUri || !roomToken) {
+      return;
+    }
+
+    const vncUrl = `${wsUri}/client/vnc/${roomToken}`; // The RFB object represents a single connection to a VNC server.
+    // It communicates using a WebSocket that must provide a standard RFB protocol stream.
+    // -ref: https://github.com/novnc/noVNC/blob/master/docs/API.md#rfb-1
+
+    vncRfb.current = new RFB(vncElRef.current, vncUrl, {
+      wsProtocols: ['binary']
+    }); // ==============================
+    // VNC options
+    // ref: https://github.com/novnc/noVNC/blob/master/docs/API.md#properties
+    // ==============================
+    // Is a boolean indicating if the remote session should be clipped to its container.
+    // When disabled scrollbars will be shown to handle the resulting overflow.
+
+    vncRfb.current.clipViewport = false; // Is a boolean indicating if the remote session should be scaled locally so it fits its container.
+    // When disabled it will be centered if the remote session is smaller than its container,
+    // or handled according to `clipViewport` if it is larger.
+
+    vncRfb.current.scaleViewport = isVncScaledFromLocal; // NOTE: select one of `scaleViewport` or `resizeSession`, not both
+    // Is a boolean indicating if a request to resize the remote session should be sent
+    // whenever the container changes dimensions.
+
+    vncRfb.current.resizeSession = !isVncScaledFromLocal; // NOTE: select one of `scaleViewport` or `resizeSession`, not both
+    // Is a boolean indicating whether a dot cursor should be shown instead of a zero-sized
+    // or fully-transparent cursor if the server sets such invisible cursor.
+
+    vncRfb.current.showDotCursor = true; // Is a valid CSS background style value indicating
+    // which background style should be applied to the element containing the remote session screen.
+
+    vncRfb.current.background = VNC_BACKGROUND_COLOR; // ==============================
+    // VNC events
+    // ref: https://github.com/novnc/noVNC/blob/master/docs/API.md#events
+    // ==============================
+    // The connect event is fired when the RFB object has completed the connection and handshaking with the server.
+    // - ref: https://github.com/novnc/noVNC/blob/master/docs/API.md#connect
+
+    vncRfb.current.addEventListener('connect', () => {
+      if (typeof onConnect === 'function') {
+        onConnect();
+      }
+    }); // The disconnect event is fired when the RFB object disconnects.
+    // - ref: https://github.com/novnc/noVNC/blob/master/docs/API.md#disconnect
+
+    vncRfb.current.addEventListener('disconnect', () => {
+      if (typeof onDisconnect === 'function') {
+        onDisconnect();
+      }
+    });
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [wsUri, roomToken, isVncScaledFromLocal]);
+  /**
+   * Disconnect VNC.
+   */
+
+  const disconnect = React.useCallback(() => {
+    var _a;
+
+    if (typeof ((_a = vncRfb.current) === null || _a === void 0 ? void 0 : _a.disconnect) === 'function') {
+      vncRfb.current.disconnect();
+      vncRfb.current = null;
+    }
+
+    if (vncElRef.current) {
+      vncElRef.current.innerHTML = '';
+    }
+  }, []);
+  /**
+   * Reset VNC.
+   * - note: https://www.notion.so/elice/elice-runner-v3-forwarder-4907ba8546274956b2f55c586df1641a#d61df659d91644db85a52fc148a69e13
+   */
+
+  const reset = React.useCallback(() => {
+    if (!vncRfb.current) {
+      return;
+    } //
+    // FIXME: This code accesses to the internal of noVNC
+    //
+
+
+    vncRfb.current._rfbConnectionState = 'connecting';
+    vncRfb.current._rfbInitState = 'ProtocolVersion';
+    vncRfb.current._rfbTightVNC = false;
+    vncRfb.current._capabilities = {
+      power: false
+    };
+    vncRfb.current._supportsFence = false;
+    vncRfb.current._supportsContinuousUpdates = false;
+    vncRfb.current._enabledContinuousUpdates = false;
+    vncRfb.current._supportsSetDesktopSize = false;
+    vncRfb.current._screenID = 0;
+    vncRfb.current._screenFlags = 0;
+    vncRfb.current._qemuExtKeyEventSupported = false;
+    vncRfb.current._flushing = false;
+    vncRfb.current._FBU = {
+      rects: 0,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      encoding: null
+    };
+    vncRfb.current._decoders = {};
+    vncRfb.current._decoders[encodings.encodingRaw] = new RFB_decoders_raw();
+    vncRfb.current._decoders[encodings.encodingCopyRect] = new RFB_decoders_copy_rect();
+    vncRfb.current._decoders[encodings.encodingRRE] = new RFB_decoders_rre();
+    vncRfb.current._decoders[encodings.encodingHextile] = new RFB_decoders_hextile();
+    vncRfb.current._decoders[encodings.encodingTight] = new RFB_decoders_tight();
+    vncRfb.current._decoders[encodings.encodingTightPNG] = new RFB_decoders_tight_png();
+
+    vncRfb.current._sock.flush();
+
+    vncRfb.current._sock._allocateBuffers();
+
+    vncRfb.current._sock._rQi = 0;
+    vncRfb.current._sock._rQlen = 0; //
+    // FIXME: This code accesses to the internal of noVNC
+    //
+  }, []); //
+  // Connect or disconnect VNC.
+  //
+
+  useMount(connect);
+  useUnmount(disconnect); //
+  // Update VNC scale config.
+  //
+
+  useUpdateEffect(() => {
+    if (!vncRfb.current) {
+      return;
+    }
+
+    vncRfb.current.scaleViewport = isVncScaledFromLocal;
+    vncRfb.current.resizeSession = !isVncScaledFromLocal;
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isVncScaledFromLocal]); //
+  //
+  //
+
+  React.useImperativeHandle(ref, () => ({
+    connect,
+    disconnect,
+    reset
+  }), [connect, disconnect, reset]);
+  /**
+   * Header.
+   */
+
+  const renderVncHeader = () => {
+    return React.createElement(React.Fragment, null, React.createElement(StyledHeaderTitle, null, React.createElement(Text, {
+      role: "white",
+      size: "tiny"
+    }, "\uC2E4\uD589 \uACB0\uACFC")), React.createElement(StyledHeaderButtonGroup, null, React.createElement(ExerciseMenuButton, {
+      icon: isVncScaledFromLocal ? eilViewMaximize : eilViewMinimize,
+      title: isRunning ? '실행 중에는 비율을 변경할 수 없습니다' : isVncScaledFromLocal ? '확대하여 보기' : '원본 비율로 보기',
+      disabled: isRunning,
+      onClick: () => setVncScaledFromLocal(prev => !prev)
+    }), React.isValidElement(exercisePreviewDisplayModeButton) ? React.cloneElement(exercisePreviewDisplayModeButton, {
+      disabled: isRunning
+    }) : null));
+  }; //
+  //
+  //
+
+
+  return React.createElement(PreviewContainer, {
+    header: renderVncHeader()
+  }, React.createElement(StyledVncWrap, {
+    ref: vncWrapRef
+  }, React.createElement(StyledNoVncContainer, {
+    style: vncElementStyle
+  }, React.createElement(StyledNoVnc, {
+    style: vncElementStyle,
+    ref: vncElRef
+  }))));
+});
+
+export { NoVnc as default };

package/es/components/shared/no-vnc/NoVncLazy.d.ts

@@ -0,0 +1,3 @@
+import type { default as NoVnc } from './NoVnc';
+declare const NoVncLazy: typeof NoVnc;
+export default NoVncLazy;

package/es/components/shared/no-vnc/NoVncLazy.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+
+const AsyncNoVnc = React.lazy(() => import('./NoVnc.js'));
+const NoVncLazy = forwardRef((props, ref) => {
+  return React.createElement(React.Suspense, {
+    fallback: null
+  }, React.createElement(AsyncNoVnc, Object.assign({}, props, {
+    ref: ref
+  })));
+});
+
+export { NoVncLazy as default };

package/es/components/shared/no-vnc/index.d.ts

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

package/es/components/shared/preview-container/PreviewContainer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface PreviewContainerProps {
+    children?: React.ReactNode;
+    header?: React.ReactNode;
+}
+export declare const PREVIEW_CONTAINER_HEADER_HEIGHT = 36;
+export declare const PREVIEW_CONTAINER_HEADER_PADDING_TOP_BOTTOM = 4;
+declare const PreviewContainer: React.ForwardRefExoticComponent<PreviewContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default PreviewContainer;

package/es/components/shared/preview-container/PreviewContainer.js

@@ -0,0 +1,26 @@
+import React, { forwardRef } from 'react';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+
+const PREVIEW_CONTAINER_HEADER_HEIGHT = 36; // 2.25rem
+
+const PREVIEW_CONTAINER_HEADER_PADDING_TOP_BOTTOM = 4; // 0.25rem
+
+const StyledPreviewContainer = styled.div.withConfig({
+  componentId: "sc-1oi07w2-0"
+})(["display:flex;flex-direction:column;width:100%;height:100%;background-color:", ";overflow:hidden;"], base.color.white);
+const StyledPreviewHeader = styled.div.withConfig({
+  componentId: "sc-1oi07w2-1"
+})(["flex:0 0 ", "px;display:flex;align-items:center;padding:", "px 0.5rem;border-bottom:1px solid ", ";background-color:", ";"], PREVIEW_CONTAINER_HEADER_HEIGHT, PREVIEW_CONTAINER_HEADER_PADDING_TOP_BOTTOM, base.color.navy7, base.color.navy8);
+const PreviewContainer = forwardRef(({
+  children,
+  header
+}, ref) => {
+  return React.createElement(StyledPreviewContainer, {
+    ref: ref
+  }, React.createElement(StyledPreviewHeader, {
+    children: header
+  }), children);
+});
+
+export { PREVIEW_CONTAINER_HEADER_HEIGHT, PREVIEW_CONTAINER_HEADER_PADDING_TOP_BOTTOM, PreviewContainer as default };

package/es/components/shared/preview-container/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PreviewContainer, PREVIEW_CONTAINER_HEADER_HEIGHT, PREVIEW_CONTAINER_HEADER_PADDING_TOP_BOTTOM, } from './PreviewContainer';
+export type { PreviewContainerProps } from './PreviewContainer';

package/es/components/shared/web-browser/WebBrowser.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface WebBrowserApis {
+    navigate: (newUrl: string) => void;
+    reload: () => void;
+}
+export interface WebBrowserProps {
+    httpUri: string;
+    menuButtons?: React.ReactChild;
+}
+declare const WebBrowser: React.ForwardRefExoticComponent<WebBrowserProps & React.RefAttributes<WebBrowserApis>>;
+export default WebBrowser;

package/es/components/shared/web-browser/WebBrowser.js

@@ -0,0 +1,163 @@
+import React, { forwardRef } from 'react';
+import { Flex } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { eilRetry, eilNewWindow } from '@elice/icons';
+import styled from 'styled-components';
+import ExerciseMenuButton from '../exercise-menu-button/ExerciseMenuButton.js';
+import PreviewContainer, { PREVIEW_CONTAINER_HEADER_HEIGHT, PREVIEW_CONTAINER_HEADER_PADDING_TOP_BOTTOM } from '../preview-container/PreviewContainer.js';
+
+const WEB_BROWSER_URL_INPUT_HEIGHT = PREVIEW_CONTAINER_HEADER_HEIGHT - PREVIEW_CONTAINER_HEADER_PADDING_TOP_BOTTOM * 2;
+const StyledHeaderUrlInput = styled.input.withConfig({
+  componentId: "sc-1c55yq-0"
+})(["flex:1;min-width:0;height:", "px;padding:0.25rem 0.5rem;color:", ";background:", ";border:0;border-radius:0.25rem;&:active,&:focus{outline:none;}"], WEB_BROWSER_URL_INPUT_HEIGHT, base.color.white, base.color.navy6);
+const StyledIframe = styled.iframe.withConfig({
+  componentId: "sc-1c55yq-1"
+})(["flex:1;width:100%;height:100%;min-height:0;border:0;"]);
+const WebBrowser = forwardRef(({
+  httpUri,
+  menuButtons = null
+}, ref) => {
+  const [url, setUrl] = React.useState('');
+  const [inputUrl, setInputUrl] = React.useState('');
+  const iframeRef = React.useRef(null);
+  const iframeSrc = React.useMemo(() => {
+    try {
+      const urlObj = new URL(url);
+      urlObj.searchParams.set('_', Date.now().toString());
+      return urlObj.href;
+    } catch (_) {
+      return '';
+    }
+  }, [url]);
+  /**
+   * Navigate browser.
+   */
+
+  const navigate = React.useCallback(newUrl => {
+    if (newUrl) {
+      setUrl(newUrl);
+    }
+  }, []);
+  /**
+   * Reload browser.
+   */
+
+  const reload = React.useCallback(() => {
+    if (iframeRef.current) {
+      // eslint-disable-next-line no-self-assign
+      iframeRef.current.src = iframeRef.current.src;
+    }
+  }, []);
+  /**
+   * New window open click.
+   */
+
+  const handleNewWindowClick = () => {
+    const win = window.open(url, '_blank');
+
+    if (win) {
+      win.focus();
+    }
+  };
+  /**
+   * Handle url input change.
+   */
+
+
+  const handleUrlInputChange = e => {
+    const value = e.target.value; // prevent removal of origin url (props.httpUri)
+
+    setInputUrl(value.startsWith(httpUri) ? value : httpUri);
+  };
+  /**
+   * Handle url input Enter key down.
+   */
+
+
+  const handleUrlInputKeyDown = e => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      navigate(inputUrl);
+    }
+  };
+  /**
+   * Handle iframe load.
+   */
+
+
+  const handleIframeLoad = () => {
+    var _a, _b, _c;
+
+    try {
+      const iframeUrl = (_c = (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.location) === null || _c === void 0 ? void 0 : _c.href;
+
+      if (iframeUrl) {
+        setInputUrl(iframeUrl);
+      }
+    } catch (err) {// SecurityError : can be raised on the cross-origin environment!
+      // do nothing.
+    }
+  }; //
+  // Change url on new httpUri provided.
+  //
+
+
+  React.useEffect(() => {
+    setUrl(httpUri);
+    setInputUrl(httpUri);
+  }, [httpUri]); //
+  //
+  //
+
+  React.useImperativeHandle(ref, () => ({
+    navigate,
+    reload
+  }), [navigate, reload]);
+  /**
+   * Browser header.
+   */
+
+  const renderBrowserHeader = () => {
+    return React.createElement(React.Fragment, null, React.createElement(Flex, {
+      marginright: "0.25rem"
+    }, React.createElement(ExerciseMenuButton, {
+      icon: eilRetry,
+      title: "\uC0C8\uB85C\uACE0\uCE68",
+      placement: "bottom-start",
+      onClick: reload
+    })), React.createElement(StyledHeaderUrlInput, {
+      value: inputUrl,
+      onChange: handleUrlInputChange,
+      onKeyDown: handleUrlInputKeyDown
+    }), React.createElement(Flex, {
+      marginleft: "0.25rem"
+    }, React.createElement(ExerciseMenuButton, {
+      icon: eilNewWindow,
+      title: "\uC0C8\uCC3D\uC73C\uB85C \uC5F4\uAE30",
+      placement: "bottom-end",
+      onClick: handleNewWindowClick
+    }), menuButtons));
+  };
+  /**
+   * Browser content.
+   */
+
+
+  const renderBrowserBody = () => {
+    return React.createElement(StyledIframe, {
+      src: iframeSrc,
+      title: url,
+      onLoad: handleIframeLoad,
+      ref: iframeRef
+    });
+  }; //
+  //
+  //
+
+
+  return React.createElement(PreviewContainer, {
+    header: renderBrowserHeader()
+  }, renderBrowserBody());
+});
+
+export { WebBrowser as default };

package/es/components/shared/web-browser/index.d.ts

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

package/es/components/shared/xterm/Xterm.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Terminal } from 'xterm';
+import 'xterm/css/xterm.css';
+interface TtySize {
+    cols: number;
+    rows: number;
+}
+export interface XtermApis {
+    blur: Terminal['blur'];
+    focus: Terminal['focus'];
+    reset: Terminal['reset'];
+    write: Terminal['write'];
+    fit: () => void;
+    writeEmphasized: (message: string) => void;
+    writeSystem: (message: string) => void;
+}
+export interface XtermProps {
+    /** Is code running? */
+    isRunning: boolean;
+    /** Font size of terminal. */
+    fontSize?: number;
+    /** When true, do not display system messages like "코드가 실행중입니다" */
+    suppressSystemMessage?: boolean;
+    /** Locale. */
+    locale?: string;
+    /** Send input. */
+    onInputRequest: (input: string) => void;
+    /** Send TTY resize. */
+    onTtyResizeRequest: (ttySize: TtySize) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<XtermProps & React.RefAttributes<XtermApis>>;
+export default _default;