@elice/material-exercise 1.260910.0 → 1.260915.0-edsmigration.0

package/es/components/shared/image-viewer/ImageViewerContent.js

@@ -0,0 +1,85 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useTheme, useMediaQuery, Stack, Typography } from '@elice/eds-material';
+import { FormattedMessage } from '@elice/intl';
+import { Error } from '@mui/icons-material';
+import { imageViewerClasses } from './image-viewer.classes.js';
+
+//
+//
+//
+var StyledImage = /*#__PURE__*/_styled("img", {
+  target: "e14qn5i10"
+})("position:absolute;top:", function (_ref) {
+  var isMobileSize = _ref.isMobileSize;
+  return "calc(50% + ".concat(isMobileSize ? 1.75 : 2, "rem)");
+}, ";left:50%;height:", function (_ref2) {
+  var isZoomIn = _ref2.isZoomIn;
+  return isZoomIn ? '100%' : null;
+}, ";max-width:", function (_ref3) {
+  var isZoomIn = _ref3.isZoomIn;
+  return isZoomIn ? '100%' : null;
+}, ";max-height:", function (_ref4) {
+  var isMobileSize = _ref4.isMobileSize;
+  return "calc(100% - ".concat(isMobileSize ? 3.5 : 4, "rem)");
+}, ";transform:translate(-50%, -50%);object-fit:contain;cursor:", function (_ref5) {
+  var isZoomIn = _ref5.isZoomIn;
+  return isZoomIn ? 'zoom-out' : 'zoom-in';
+}, ";");
+//
+//
+//
+var ImageViewerContent = function ImageViewerContent(_ref6) {
+  var isZoomIn = _ref6.isZoomIn,
+    image = _ref6.image,
+    onZoomIn = _ref6.onZoomIn;
+  var theme = useTheme();
+  var isMobileSize = useMediaQuery(theme.breakpoints.down('sm'));
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isError = _React$useState2[0],
+    setIsError = _React$useState2[1];
+  /**
+   * handle when image load is failed.
+   */
+  var handleError = function handleError() {
+    setIsError(true);
+  };
+  //
+  //
+  //
+  if (isError) {
+    return jsxs(Stack, {
+      sx: {
+        color: 'white',
+        alignItems: 'center',
+        gap: '0.5rem'
+      },
+      children: [jsx(Error, {
+        fontSize: "large",
+        color: "inherit"
+      }), jsx(Typography, {
+        variant: "subtitle1",
+        color: "inherit",
+        sx: {
+          fontWeight: 700
+        },
+        children: jsx(FormattedMessage, {
+          id: "content.error"
+        })
+      })]
+    });
+  }
+  return jsx(StyledImage, Object.assign({}, image, {
+    className: imageViewerClasses.content,
+    loading: "eager",
+    isZoomIn: isZoomIn,
+    isMobileSize: isMobileSize,
+    onClick: onZoomIn,
+    onError: handleError
+  }));
+};
+
+export { ImageViewerContent as default };

package/es/components/shared/image-viewer/ImageViewerToolbar.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+import type { ImageProps } from './ImageViewer';
+interface ImageViewerToolbarProps {
+    image: ImageProps | null;
+    isOpen: boolean;
+    isZoomIn: boolean;
+    onClose: () => void;
+    onZoomIn: () => void;
+}
+declare const ImageViewerToolbar: React.FC<ImageViewerToolbarProps>;
+export default ImageViewerToolbar;

package/es/components/shared/image-viewer/ImageViewerToolbar.js

@@ -0,0 +1,76 @@
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { FaIcon } from '@elice/eds-kit';
+import { styled, Toolbar, Fade, Typography, Stack, Tooltip, IconButton } from '@elice/eds-material';
+import { useIntl } from '@elice/intl';
+import { faMagnifyingGlassMinus, faMagnifyingGlassPlus, faXmarkLarge } from '@fortawesome/pro-regular-svg-icons';
+import { imageViewerClasses } from './image-viewer.classes.js';
+
+var _templateObject;
+//
+//
+//
+var StyledToolbar = styled(Toolbar)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  background: ", ";\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette.common.black;
+});
+//
+//
+//
+var ImageViewerToolbar = function ImageViewerToolbar(_ref2) {
+  var isOpen = _ref2.isOpen,
+    isZoomIn = _ref2.isZoomIn,
+    image = _ref2.image,
+    onClose = _ref2.onClose,
+    onZoomIn = _ref2.onZoomIn;
+  var intl = useIntl();
+  //
+  //
+  //
+  return jsx(Fade, {
+    unmountOnExit: true,
+    "in": isOpen,
+    children: jsxs(StyledToolbar, {
+      className: imageViewerClasses.toolbar,
+      children: [jsx("div", {
+        children: (image === null || image === void 0 ? void 0 : image.alt) && jsx(Typography, {
+          color: "white",
+          children: image.alt
+        })
+      }), jsxs(Stack, {
+        direction: "row",
+        sx: {
+          gap: '0.5rem',
+          color: 'white'
+        },
+        children: [jsx(Tooltip, {
+          title: intl.formatMessage({
+            id: "button.".concat(isZoomIn ? 'zoom_out' : 'zoom_in')
+          }),
+          children: jsx(IconButton, {
+            color: "inherit",
+            onClick: onZoomIn,
+            children: isZoomIn ? jsx(FaIcon, {
+              icon: faMagnifyingGlassMinus
+            }) : jsx(FaIcon, {
+              icon: faMagnifyingGlassPlus
+            })
+          })
+        }), jsx(Tooltip, {
+          title: intl.formatMessage({
+            id: 'button.close'
+          }),
+          children: jsx(IconButton, {
+            color: "inherit",
+            onClick: onClose,
+            children: jsx(FaIcon, {
+              icon: faXmarkLarge
+            })
+          })
+        })]
+      })]
+    })
+  });
+};
+
+export { ImageViewerToolbar as default };

package/es/components/shared/image-viewer/image-viewer.classes.d.ts

@@ -0,0 +1,14 @@
+export interface ImageViewerClasses {
+    /** Styles applied to the viewer modal element. */
+    modal: string;
+    /** Styles applied to the viewer toolbar element. */
+    toolbar: string;
+    /** Styles applied to the viewer image element. */
+    content: string;
+}
+/**
+ * Cloned from `@elice/mui-elements` (EDS 슬리밍으로 eds-kit 에서 제외된 컴포넌트, PLAT-3580).
+ * `generateUtilityClasses('EliceMuiImageViewer', [...])` 산출물과 동일한 문자열을 하드코딩해
+ * `@mui/utils` phantom 의존을 제거한다.
+ */
+export declare const imageViewerClasses: ImageViewerClasses;

package/es/components/shared/image-viewer/image-viewer.classes.js

@@ -0,0 +1,18 @@
+//
+//
+//
+//
+//
+//
+/**
+ * Cloned from `@elice/mui-elements` (EDS 슬리밍으로 eds-kit 에서 제외된 컴포넌트, PLAT-3580).
+ * `generateUtilityClasses('EliceMuiImageViewer', [...])` 산출물과 동일한 문자열을 하드코딩해
+ * `@mui/utils` phantom 의존을 제거한다.
+ */
+var imageViewerClasses = {
+  modal: 'EliceMuiImageViewer-modal',
+  toolbar: 'EliceMuiImageViewer-toolbar',
+  content: 'EliceMuiImageViewer-content'
+};
+
+export { imageViewerClasses };

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

@@ -0,0 +1,3 @@
+export { default as ImageViewer } from './ImageViewer';
+export * from './image-viewer.classes';
+export type { ImageViewerProps } from './ImageViewer';

package/es/components/shared/image-viewer/index.js

@@ -0,0 +1,2 @@
+export { default as ImageViewer } from './ImageViewer.js';
+export { imageViewerClasses } from './image-viewer.classes.js';

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

@@ -0,0 +1,3 @@
+var messagesEn = {"button.close":"Close","button.zoom_in":"Zoom in","button.zoom_out":"Zoom out","content.error":"The image failed to load."};
+
+export { messagesEn as default };

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

@@ -0,0 +1,3 @@
+var messagesKo = {"button.close":"닫기","button.zoom_in":"확대","button.zoom_out":"축소","content.error":"이미지를 불러오지 못했습니다."};
+
+export { messagesKo as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-exercise",
-  "version": "1.260910.0",
+  "version": "1.260915.0-edsmigration.0",
   "description": "User view and editing components of Elice material exercise",
   "repository": {
     "type": "git",
@@ -21,12 +21,12 @@
     "@elice/api-client": "^1",
     "@elice/blocks": "^1",
     "@elice/design-tokens": "^1",
+    "@elice/eds-kit": "^1.260911.0",
+    "@elice/eds-material": "^1.260911.0",
     "@elice/icons": "^1",
     "@elice/intl": "^0",
     "@elice/markdown": "^1",
     "@elice/mcu-bridge": "^1",
-    "@elice/mui-elements": "^5",
-    "@elice/mui-system": "^5",
     "@elice/types": "^1",
     "@elice/utils": "^1",
     "@elice/websocket": "^1",
@@ -34,16 +34,15 @@
     "@emotion/styled": "^11.10.0",
     "@fortawesome/pro-regular-svg-icons": "^6",
     "@fortawesome/pro-solid-svg-icons": "^6",
-    "@mui/icons-material": "^5.10.16",
-    "@mui/lab": "^5.0.0-alpha.112",
-    "@mui/material": "^5.10.16",
+    "@mui/icons-material": "^9.1.0",
+    "@mui/material": "^9.1.0",
     "humps": "^2.0.1",
     "lodash": "^4.17.21",
     "overlay-kit": "^1.8.0",
-    "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+    "react": "^18.0.0 || ^19.0.0",
     "react-use": "^17.0.0",
-    "@elice/material-shared-types": "1.260910.0",
-    "@elice/material-shared-utils": "1.260910.0"
+    "@elice/material-shared-types": "1.260915.0-edsmigration.0",
+    "@elice/material-shared-utils": "1.260915.0-edsmigration.0"
   },
   "dependencies": {
     "@novnc/novnc": "^1.3.0",
@@ -76,12 +75,12 @@
     "@elice/api-client": "1.260529.0",
     "@elice/blocks": "1.260723.0",
     "@elice/design-tokens": "^1.220803.0",
+    "@elice/eds-kit": "1.260911.0",
+    "@elice/eds-material": "1.260911.0",
     "@elice/icons": "^1.230814.0",
     "@elice/intl": "0.260526.0",
     "@elice/markdown": "1.241015.0",
     "@elice/mcu-bridge": "^1.260514.0",
-    "@elice/mui-elements": "5.251204.0",
-    "@elice/mui-system": "5.251204.0",
     "@elice/rollup-config": "^1.260406.0",
     "@elice/types": "1.260608.0",
     "@elice/utils": "^1.250930.0",
@@ -91,9 +90,9 @@
     "@emotion/styled": "^11.10.0",
     "@fortawesome/pro-regular-svg-icons": "^6.4.2",
     "@fortawesome/pro-solid-svg-icons": "^6.4.2",
-    "@mui/icons-material": "^5.10.16",
-    "@mui/lab": "^5.0.0-alpha.112",
-    "@mui/material": "^5.10.16",
+    "@mui/icons-material": "9.1.0",
+    "@mui/material": "9.1.0",
+    "@mui/system": "9.1.0",
     "@types/classnames": "^2.3.1",
     "@types/color": "^3.0.3",
     "@types/file-saver": "^2.0.5",
@@ -118,8 +117,8 @@
     "rollup": "^4.0.0",
     "typescript": "~5.9.3",
     "vite": "^4.4.9",
-    "@elice/material-shared-types": "1.260910.0",
-    "@elice/material-shared-utils": "1.260910.0"
+    "@elice/material-shared-types": "1.260915.0-edsmigration.0",
+    "@elice/material-shared-utils": "1.260915.0-edsmigration.0"
   },
   "scripts": {
     "start": "run-s watch",