@elice/material-exercise 1.220803.0

package/es/components/shared/file-viewer/FileViewerNonViewable.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Button, Vspace, Text, Icon } from '@elice/blocks';
+import { eilDownload } from '@elice/icons';
+import { MaterialIntlProvider } from '@elice/material-shared-utils';
+import FileSaver from 'file-saver';
+import styled from 'styled-components';
+import FileIcon from '../file-icon/FileIcon.js';
+import phrasesEn from './locales/nonViewable.en.json.js';
+import phrasesKo from './locales/nonViewable.ko.json.js';
+
+const StyledContainer = styled.div.withConfig({
+  componentId: "sc-l8149y-0"
+})(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;"]);
+const StyledContainerContent = styled.div.withConfig({
+  componentId: "sc-l8149y-1"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem 1.5rem;width:100%;max-width:20rem;height:100%;text-align:center;"]);
+const StyledButton = styled(Button).withConfig({
+  componentId: "sc-l8149y-2"
+})(["display:block;margin:0 auto;"]);
+const StyledButtonsWrap = styled.div.withConfig({
+  componentId: "sc-l8149y-3"
+})(["text-align:center;> *{margin-bottom:0.5rem;&:last-child{margin-bottom:0;}}"]);
+
+const FileViewerNonViewable = ({
+  filename,
+  fileurl,
+  onTextViewerClick
+}) => {
+  /**
+   * Handle download button click.
+   */
+  const handleDownloadClick = () => {
+    if (!fileurl) {
+      return;
+    }
+
+    fetch(fileurl).then(res => res.blob()).then(blob => FileSaver.saveAs(blob, filename)).catch(() => {
+      const win = window.open(fileurl, '_blank');
+
+      if (win) {
+        win.focus();
+      }
+    });
+  };
+  /**
+   * Download button.
+   */
+
+
+  const renderFileViewerDownloadButton = () => {
+    if (!fileurl) {
+      return null;
+    }
+
+    return React.createElement(StyledButton, {
+      size: "small",
+      icon: React.createElement(Icon, {
+        icon: eilDownload
+      }),
+      onClick: handleDownloadClick
+    }, React.createElement(FormattedMessage, {
+      id: "fileViewer.nonViewable.downloadButton"
+    }));
+  };
+  /**
+   * Link for enable text editor.
+   */
+
+
+  const renderFileViewerTextEditorLink = () => {
+    if (!fileurl || typeof onTextViewerClick !== 'function') {
+      return null;
+    }
+
+    return React.createElement(Text, {
+      role: "gray5",
+      size: "tiny",
+      hoverable: true,
+      onClick: onTextViewerClick
+    }, React.createElement(FormattedMessage, {
+      id: "fileViewer.nonViewable.openViaTextEditor"
+    }));
+  }; //
+  //
+  //
+
+
+  return React.createElement(StyledContainer, null, React.createElement(StyledContainerContent, null, React.createElement(FileIcon, {
+    filename: filename,
+    width: "3rem",
+    height: "3rem"
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Text, {
+    role: "white"
+  }, filename), React.createElement(Vspace, {
+    height: 0.75
+  }), React.createElement(Text, {
+    role: "gray3",
+    size: "tiny",
+    lineHeight: 1.5,
+    wordBreak: "keep-all"
+  }, React.createElement(FormattedMessage, {
+    id: "fileViewer.nonViewable.content"
+  })), React.createElement(Vspace, {
+    height: 2
+  }), React.createElement(StyledButtonsWrap, null, renderFileViewerDownloadButton(), renderFileViewerTextEditorLink())));
+}; //
+//
+//
+
+
+var FileViewerNonViewable$1 = (props => {
+  return React.createElement(MaterialIntlProvider, {
+    locale: props.locale,
+    phrases: {
+      en: phrasesEn,
+      ko: phrasesKo
+    }
+  }, React.createElement(FileViewerNonViewable, Object.assign({}, props)));
+});
+
+export { FileViewerNonViewable$1 as default };

package/es/components/shared/file-viewer/FileViewerText.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FileViewerBaseProps } from './FileViewer';
+declare const FileViewerText: React.VFC<FileViewerBaseProps>;
+export default FileViewerText;

package/es/components/shared/file-viewer/FileViewerText.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useRecoilValue } from 'recoil';
+import { exerciseEditorPreferenceState } from '../../material-exercise/context/recoil.js';
+import '../../material-exercise/context/context.js';
+import '../../material-exercise/context/recoilTypes.js';
+import '../../material-exercise/context/subjects.js';
+import '../../material-exercise/context/ExerciseProvider.js';
+import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
+import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
+import '../exercise-shimmer/ExerciseFileTabShimmer.js';
+import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
+import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
+import MonacoEditorLazy from '../monaco-editor/MonacoEditorLazy.js';
+import '../monaco-editor/MonacoEditorPerferenceForm.js';
+import 'monaco-editor/esm/vs/editor/editor.api';
+import '../monaco-editor/constants/monaco/preferences.js';
+
+const FileViewerText = ({
+  filename,
+  fileurl,
+  locale
+}) => {
+  const preference = useRecoilValue(exerciseEditorPreferenceState);
+  const [content, setContent] = React.useState(null);
+  React.useEffect(() => {
+    if (!fileurl) {
+      return;
+    }
+
+    fetch(fileurl).then(res => res.text()).then(setContent).catch(err => console.error(err));
+  }, [fileurl]); //
+  //
+  //
+
+  if (content === null) {
+    return React.createElement(ExerciseFileShimmer, null);
+  }
+
+  return React.createElement(MonacoEditorLazy, {
+    filename: filename,
+    defaultValue: content,
+    preference: Object.assign(Object.assign({}, preference), {
+      readOnly: true
+    }),
+    noLanguageIntellisense: true,
+    locale: locale
+  });
+};
+
+export { FileViewerText as default };

package/es/components/shared/file-viewer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FileViewer } from './FileViewer';
+export type { FileViewerBaseProps } from './FileViewer';

package/es/components/shared/file-viewer/locales/en.json.js

@@ -0,0 +1,3 @@
+var phrasesEn = {"fileViewer.readOnlyBanner.content":"Previewing via file editor.","fileViewer.readOnlyBanner.downloadButton":"Download File"};
+
+export { phrasesEn as default };

package/es/components/shared/file-viewer/locales/ko.json.js

@@ -0,0 +1,3 @@
+var phrasesKo = {"fileViewer.readOnlyBanner.content":"파일 에디터를 통해 미리보기 중 입니다.","fileViewer.readOnlyBanner.downloadButton":"파일 다운로드"};
+
+export { phrasesKo as default };

package/es/components/shared/file-viewer/locales/nonViewable.en.json.js

@@ -0,0 +1,3 @@
+var phrasesEn = {"fileViewer.nonViewable.content":"The file is not displayed in the editor because it is either binary or not supported.","fileViewer.nonViewable.downloadButton":"Download File","fileViewer.nonViewable.openViaTextEditor":"Open via Editor"};
+
+export { phrasesEn as default };

package/es/components/shared/file-viewer/locales/nonViewable.ko.json.js

@@ -0,0 +1,3 @@
+var phrasesKo = {"fileViewer.nonViewable.content":"해당 파일은 바이너리 파일이거나 지원하지 않는 파일이기 때문에 에디터에 표시되지 않습니다.","fileViewer.nonViewable.downloadButton":"파일 다운로드","fileViewer.nonViewable.openViaTextEditor":"텍스트 에디터로 열기"};
+
+export { phrasesKo as default };

package/es/components/shared/material-modal/MaterialModal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface MaterialModalProps {
+    title: string;
+    footer?: React.ReactChild;
+    onHide?: () => void;
+}
+declare const MaterialModal: React.FC<MaterialModalProps>;
+export default MaterialModal;

package/es/components/shared/material-modal/MaterialModal.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useKeyPressEvent } from 'react-use';
+import { BorderlessDialog } from '@elice/blocks';
+import { eilMathsignMultiplyBasic } from '@elice/icons';
+import { StyledModalWrapper, StyledModalHeader, StyledModalBody, StyledModalFooter, StyledCloseButton } from './MaterialModal.styled.js';
+
+const MaterialModal = ({
+  children,
+  title,
+  footer,
+  onHide
+}) => {
+  useKeyPressEvent('Escape', () => {
+    if (typeof onHide === 'function') {
+      onHide();
+    }
+  });
+
+  const renderCloseButton = () => {
+    if (!onHide) {
+      return null;
+    }
+
+    return React.createElement(StyledCloseButton, {
+      transparent: true,
+      border: false,
+      icon: eilMathsignMultiplyBasic,
+      onClick: onHide
+    });
+  };
+
+  return React.createElement(BorderlessDialog, null, React.createElement(StyledModalWrapper, null, React.createElement(StyledModalHeader, null, title, renderCloseButton()), React.createElement(StyledModalBody, null, children), footer && React.createElement(StyledModalFooter, null, footer)));
+};
+
+export { MaterialModal as default };

package/es/components/shared/material-modal/MaterialModal.styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Text } from '@elice/blocks';
+export declare const StyledModalWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalHeader: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
+export declare const StyledModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalFooter: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>>, any, {}, never>;

package/es/components/shared/material-modal/MaterialModal.styled.js

@@ -0,0 +1,21 @@
+import { Text, Flex, IconButton } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+
+const StyledModalWrapper = styled.div.withConfig({
+  componentId: "sc-1ej7kso-0"
+})(["position:relative;display:flex;flex-flow:column nowrap;width:90vw;height:90vh;padding:0;background-color:", ";border-radius:0.375rem;"], base.color.gray8);
+const StyledModalHeader = styled(Text).withConfig({
+  componentId: "sc-1ej7kso-1"
+})(["flex:0 1 auto;width:100%;height:3.25rem;min-height:3.25rem;line-height:3.25rem;border-top-left-radius:0.375rem;border-top-right-radius:0.375rem;border-bottom:1px solid ", ";text-align:center;color:", ";"], base.color.navy9, base.color.white);
+const StyledModalBody = styled.div.withConfig({
+  componentId: "sc-1ej7kso-2"
+})(["position:relative;flex:1 1 auto;width:100%;height:80%;"]);
+const StyledModalFooter = styled(Flex).withConfig({
+  componentId: "sc-1ej7kso-3"
+})(["flex:0 1 auto;width:100%;height:3.75rem;min-height:3.75rem;border-bottom-left-radius:0.375rem;border-bottom-right-radius:0.375rem;border-top:1px solid ", ";padding:0.5rem 1.5rem;overflow:hidden;text-align:right;align-items:center;justify-content:flex-end;"], base.color.navy9);
+const StyledCloseButton = styled(IconButton).withConfig({
+  componentId: "sc-1ej7kso-4"
+})(["position:absolute;top:0;right:0;color:", " !important;"], base.color.gray4);
+
+export { StyledCloseButton, StyledModalBody, StyledModalFooter, StyledModalHeader, StyledModalWrapper };

package/es/components/shared/material-modal/index.d.ts

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

package/es/components/shared/monaco-editor/MonacoEditor.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import type { MonacoEditorPreference } from './constants';
+import type { MonacoEditorMarker } from './editor-hooks';
+/** Has editor undo/redo history? */
+declare type MonacoEditorApiHasHistory = () => boolean;
+/** Get current monaco editor model. */
+declare type MonacoEditorApiGetMonacoModel = () => monaco.editor.ITextModel | null;
+/** Clear editor undo/redo history. */
+declare type MonacoEditorApiClearHistory = () => void;
+/** Get current value of editor. */
+declare type MonacoEditorApiGetValue = () => string;
+/** Get value in range of editor. */
+declare type MonacoEditorApiGetValueInRange = (from: number, to: number) => string;
+/** Set (overwrite) value to editor. */
+declare type MonacoEditorApiSetValue = (value: string) => void;
+/** Insert value at specific position. */
+declare type MonacoEditorApiInsertValue = (index: number, value: string) => void;
+/** Remove value at specific range. */
+declare type MonacoEditorApiRemoveValue = (from: number, to: number) => void;
+/** Set selection of editor with specific range. */
+declare type MonacoEditorApiSetSelection = (from: number, to: number) => void;
+/** Scroll editor to specific `scrollTop`. */
+declare type MonacoEditorApiScrollTo = (scrollTop: number) => void;
+/** API of CodeEditorNext. */
+export interface MonacoEditorApis {
+    editor: monaco.editor.IStandaloneCodeEditor | null;
+    getMonacoModel: MonacoEditorApiGetMonacoModel;
+    hasHistory: MonacoEditorApiHasHistory;
+    clearHistory: MonacoEditorApiClearHistory;
+    getValue: MonacoEditorApiGetValue;
+    getValueInRange: MonacoEditorApiGetValueInRange;
+    setValue: MonacoEditorApiSetValue;
+    insertValue: MonacoEditorApiInsertValue;
+    removeValue: MonacoEditorApiRemoveValue;
+    setSelection: MonacoEditorApiSetSelection;
+    scrollTo: MonacoEditorApiScrollTo;
+}
+/** Props of MonacoEditor. */
+export interface MonacoEditorProps {
+    /** Default value of editor. */
+    defaultValue: string;
+    /**
+     * File name.
+     *
+     * @note file should be managed independently
+     * by adding prefix (e.g. exerciseRoomId or version)
+     * not to share doc with other mounted MonacoEditors.
+     */
+    filename: string;
+    /** Preference of monaco editor. */
+    preference?: Partial<MonacoEditorPreference>;
+    /** Markers of editor. Used at code sharing feature. */
+    markers?: MonacoEditorMarker[];
+    /** Fixed width of editor. Default is `100%`. */
+    width?: React.CSSProperties['width'];
+    /** Fixed height of editor. Default is `100%`. */
+    height?: React.CSSProperties['height'];
+    /** Disable intellisense of editor. */
+    noLanguageIntellisense?: boolean;
+    /** Locale of editor. */
+    locale?: string;
+    /** On editor initialized. */
+    onLoad?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
+    /** On editor value has been changed. */
+    onChange?: (changes: string) => void;
+    /** On file saved event emitted. (Ctrl + S) */
+    onSave?: (content: string) => void;
+    /** On cursor of editor has been moved. */
+    onCursor?: (range: {
+        from: number;
+        to: number;
+    }) => void;
+    /** On editor scrolled. */
+    onScroll?: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    /** On theme of editor has been changed. */
+    onThemeChange?: (theme: string) => void;
+}
+/**
+ *
+ */
+declare const MonacoEditor: React.ForwardRefExoticComponent<MonacoEditorProps & React.RefAttributes<MonacoEditorApis>>;
+export default MonacoEditor;