@elice/material-runbox 1.230328.0 → 1.230418.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-runbox",
-  "version": "1.230328.0",
+  "version": "1.230418.1",
   "description": "User view and editing components of Elice material runbox",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -29,42 +29,42 @@
     "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
   },
   "peerDependencies": {
-    "@elice/api-client": "1.230306.1",
-    "@elice/blocks": "^1.220803.0",
-    "@elice/design-tokens": "^1.220803.0",
-    "@elice/icons": "^1.220803.0",
-    "@elice/markdown": "^1.220803.0",
     "@elice/material-shared-types": "*",
     "@elice/material-shared-utils": "*",
-    "@elice/types": "^1.230306.0",
-    "@elice/websocket": "^1.220803.0",
+    "@elice/openapi-client-material-runbox": "^1.230417.0",
+    "@elice/runbox-client": "^1.230412.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.10.16",
+    "@mui/lab": "^5.0.0-alpha.112",
+    "@mui/material": "^5.10.16",
+    "@tanstack/react-query": "^4.0.0",
+    "notistack": "^3.0.0",
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
     "react-intl": "^5.0.0",
-    "react-use": "^17.0.0",
-    "styled-components": "^5.2.0"
+    "react-use": "^17.0.0"
   },
   "dependencies": {
     "classnames": "^2.2.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@elice/api-client": "1.230306.1",
-    "@elice/blocks": "^1.220803.0",
-    "@elice/design-tokens": "^1.220803.0",
-    "@elice/icons": "^1.220803.0",
-    "@elice/icons-legacy": "npm:@elice/icons@0.220803.1",
-    "@elice/markdown": "^1.220803.0",
-    "@elice/material-shared-types": "1.230328.0",
-    "@elice/material-shared-utils": "1.230328.0",
-    "@elice/types": "^1.230306.0",
-    "@elice/websocket": "^1.220803.0",
+    "@elice/material-shared-types": "1.230418.1",
+    "@elice/material-shared-utils": "1.230418.1",
+    "@elice/openapi-client-material-runbox": "^1.230417.0",
+    "@elice/runbox-client": "^1.230412.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.10.16",
+    "@mui/lab": "^5.0.0-alpha.112",
+    "@mui/material": "^5.10.16",
+    "@tanstack/react-query": "^4.29.3",
     "@types/classnames": "^2.3.1",
     "@types/react": "~17.0.9",
-    "@types/styled-components": "^5.1.21",
+    "notistack": "^3.0.0",
     "react": "^17.0.2",
     "react-intl": "^5.20.10",
-    "react-use": "^17.2.4",
-    "styled-components": "^5.3.0"
+    "react-use": "^17.2.4"
   },
-  "gitHead": "c24abeffe609385031a77c725bf6e92e47e94b56"
+  "gitHead": "9c1ccec857ef44c667da271e9782ca20ff713390"
 }

package/cjs/components/material-runbox/MaterialRunbox.styled.d.ts

@@ -1 +0,0 @@
-export declare const StyledMaterialRunbox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/cjs/components/material-runbox/MaterialRunbox.styled.js

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const StyledMaterialRunbox = styled__default["default"].div.withConfig({
-  componentId: "sc-2frgib-0"
-})(["display:flex;flex-direction:column;padding-top:0.5rem;width:100%;height:100%;background-color:#fff;"]);
-
-exports.StyledMaterialRunbox = StyledMaterialRunbox;

package/cjs/components/material-runbox/MaterialRunboxContent.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-export declare enum MaterialRunboxStatus {
-    Idle = 0,
-    Connecting = 1,
-    Loading = 2,
-    Done = 3,
-    Disconnected = 4,
-    Terminated = 5,
-    Error = 6
-}
-interface MaterialRunboxContentProps {
-    runboxUrl: string | null;
-    isRunboxTerminated: boolean;
-    isRunboxJoinError: boolean;
-    reconnect: () => void;
-}
-declare const MaterialRunboxContent: React.FC<MaterialRunboxContentProps>;
-export default MaterialRunboxContent;

package/cjs/components/material-runbox/MaterialRunboxContent.js

@@ -1,305 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var reactIntl = require('react-intl');
-var reactUse = require('react-use');
-var blocks = require('@elice/blocks');
-var icons = require('@elice/icons');
-var websocket = require('./websocket.js');
-var MaterialRunboxContent_styled = require('./MaterialRunboxContent.styled.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/* eslint-disable @typescript-eslint/naming-convention */
-exports.MaterialRunboxStatus = void 0;
-
-(function (MaterialRunboxStatus) {
-  MaterialRunboxStatus[MaterialRunboxStatus["Idle"] = 0] = "Idle";
-  MaterialRunboxStatus[MaterialRunboxStatus["Connecting"] = 1] = "Connecting";
-  MaterialRunboxStatus[MaterialRunboxStatus["Loading"] = 2] = "Loading";
-  MaterialRunboxStatus[MaterialRunboxStatus["Done"] = 3] = "Done";
-  MaterialRunboxStatus[MaterialRunboxStatus["Disconnected"] = 4] = "Disconnected";
-  MaterialRunboxStatus[MaterialRunboxStatus["Terminated"] = 5] = "Terminated";
-  MaterialRunboxStatus[MaterialRunboxStatus["Error"] = 6] = "Error";
-})(exports.MaterialRunboxStatus || (exports.MaterialRunboxStatus = {}));
-
-const MaterialRunboxContent = ({
-  runboxUrl,
-  isRunboxTerminated,
-  isRunboxJoinError,
-  reconnect
-}) => {
-  const intl = reactIntl.useIntl();
-  const [runboxStats, setRunboxStats] = React__default["default"].useState(null);
-  const [isRunboxUrlLoaded, setRunboxUrlLoaded] = React__default["default"].useState(false);
-  const isRunboxUrlLoadedPrev = reactUse.usePrevious(isRunboxUrlLoaded);
-  const [runboxStatus, setRunboxStatus] = React__default["default"].useState(exports.MaterialRunboxStatus.Idle);
-  const isRunboxPreparing = runboxStatus !== exports.MaterialRunboxStatus.Done && runboxStatus !== exports.MaterialRunboxStatus.Terminated;
-  websocket.WSMaterialRunboxStdio.useMessage(message => {
-    if (message.type === 'stats') {
-      setRunboxStats(message.data);
-    }
-  }, {
-    camelize: true
-  });
-
-  const handleReconnect = () => {
-    setRunboxStats(null);
-    setRunboxUrlLoaded(false);
-    reconnect();
-  };
-
-  const handleShare = async () => {
-    if (!runboxUrl) {
-      return;
-    }
-
-    try {
-      await navigator.clipboard.writeText(runboxUrl);
-      blocks.Notification.success(intl.formatMessage({
-        id: 'runbox.share.success'
-      }));
-    } catch (e) {
-      alert(runboxUrl);
-    }
-  }; //
-  // Change `isRunboxUrlLoaded` flag to false, when runbox url removed.
-  //
-
-
-  React__default["default"].useEffect(() => {
-    if (!runboxUrl) {
-      setRunboxUrlLoaded(false);
-    }
-  }, [runboxUrl]); //
-  // Determine runbox status.
-  //
-
-  React__default["default"].useEffect(() => {
-    setRunboxStatus((() => {
-      switch (true) {
-        case isRunboxJoinError:
-          return exports.MaterialRunboxStatus.Error;
-
-        case !runboxUrl && isRunboxTerminated:
-          return exports.MaterialRunboxStatus.Terminated;
-
-        case !runboxUrl && !isRunboxTerminated && isRunboxUrlLoadedPrev:
-          return exports.MaterialRunboxStatus.Disconnected;
-
-        case !runboxUrl && !isRunboxTerminated && !isRunboxUrlLoadedPrev:
-          return exports.MaterialRunboxStatus.Connecting;
-
-        case Boolean(runboxUrl) && !isRunboxUrlLoaded:
-          return exports.MaterialRunboxStatus.Loading;
-
-        case Boolean(runboxUrl) && isRunboxUrlLoaded:
-          return exports.MaterialRunboxStatus.Done;
-
-        default:
-          return exports.MaterialRunboxStatus.Idle;
-      }
-    })());
-  }, [isRunboxJoinError, isRunboxTerminated, isRunboxUrlLoaded, isRunboxUrlLoadedPrev, runboxUrl]);
-  /**
-   * Runbox status message shown at header.
-   */
-
-  const renderRunboxStatusMessage = () => {
-    switch (runboxStatus) {
-      case exports.MaterialRunboxStatus.Idle:
-        return React__default["default"].createElement(reactIntl.FormattedMessage, {
-          id: "runbox.status.idle"
-        });
-
-      case exports.MaterialRunboxStatus.Connecting:
-        return React__default["default"].createElement(reactIntl.FormattedMessage, {
-          id: "runbox.status.connecting"
-        });
-
-      case exports.MaterialRunboxStatus.Loading:
-        return React__default["default"].createElement(reactIntl.FormattedMessage, {
-          id: "runbox.status.loading"
-        });
-
-      case exports.MaterialRunboxStatus.Done:
-        return React__default["default"].createElement(reactIntl.FormattedMessage, {
-          id: "runbox.status.done"
-        });
-
-      case exports.MaterialRunboxStatus.Disconnected:
-        return React__default["default"].createElement(reactIntl.FormattedMessage, {
-          id: "runbox.status.disconnected"
-        });
-
-      case exports.MaterialRunboxStatus.Terminated:
-        return React__default["default"].createElement(reactIntl.FormattedMessage, {
-          id: "runbox.status.terminated"
-        });
-    }
-  };
-  /**
-   * Header of runbox.
-   */
-
-
-  const renderRunboxHeader = () => {
-    const runboxStatsInfo = runboxStats ? React__default["default"].createElement(blocks.LaptopOrLarger, null, React__default["default"].createElement(blocks.Flex, null, React__default["default"].createElement(blocks.Flex, {
-      align: "center"
-    }, React__default["default"].createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray7",
-      bold: true
-    }, "CPU:\u00A0"), React__default["default"].createElement(blocks.Flex, {
-      align: "center",
-      width: "30px"
-    }, React__default["default"].createElement(blocks.AntProgress, {
-      type: "line",
-      percent: runboxStats.cpu.percent,
-      status: 'active',
-      showInfo: false
-    })), React__default["default"].createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray5"
-    }, "\u00A0", `${runboxStats.cpu.percent.toFixed(0)}%`)), React__default["default"].createElement(blocks.Hspace, {
-      width: 1
-    }), React__default["default"].createElement(blocks.Flex, {
-      align: "center"
-    }, React__default["default"].createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray7",
-      bold: true
-    }, "MEM:\u00A0"), React__default["default"].createElement(blocks.Flex, {
-      align: "center",
-      width: "30px"
-    }, React__default["default"].createElement(blocks.AntProgress, {
-      percent: runboxStats.memory.currentBytes / runboxStats.memory.limitBytes * 100,
-      status: 'active',
-      showInfo: false
-    })), React__default["default"].createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray5"
-    }, "\u00A0", `${(runboxStats.memory.currentBytes / 1024 / 1024).toFixed(0)}M / ${(runboxStats.memory.limitBytes / 1024 / 1024).toFixed(0)}M`)), React__default["default"].createElement(blocks.Hspace, {
-      width: 1
-    }), React__default["default"].createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray7",
-      bold: true
-    }, "DISK:\u00A0"), React__default["default"].createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray5"
-    }, `Read ${(runboxStats.block.rxBytes / 1024 / 1024).toFixed(0)}M Write ${(runboxStats.block.txBytes / 1024 / 1024).toFixed(0)}M`), React__default["default"].createElement(blocks.Hspace, {
-      width: 1
-    }), React__default["default"].createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray7",
-      bold: true
-    }, "NET:\u00A0"), React__default["default"].createElement(blocks.Text, {
-      size: "tiny",
-      lineHeight: 1.5,
-      role: "gray5"
-    }, `↓${(runboxStats.network.rxBytes / 1024 / 1024).toFixed(0)}M ↑${(runboxStats.network.txBytes / 1024 / 1024).toFixed(0)}M`), React__default["default"].createElement(blocks.Hspace, {
-      width: 1
-    }))) : null;
-    return React__default["default"].createElement(MaterialRunboxContent_styled.RunboxHeader, null, runboxStatsInfo, React__default["default"].createElement(blocks.Flex, {
-      align: "center"
-    }, React__default["default"].createElement(MaterialRunboxContent_styled.RunboxStatusLight, {
-      status: runboxStatus
-    }), React__default["default"].createElement(blocks.Hspace, {
-      width: 0.5
-    }), React__default["default"].createElement(blocks.Text, {
-      size: "small"
-    }, renderRunboxStatusMessage())), React__default["default"].createElement(blocks.Hspace, {
-      width: 1
-    }), React__default["default"].createElement(blocks.IconButton, {
-      icon: icons.eilShare,
-      role: "greyfb",
-      size: "small",
-      border: true,
-      disabled: isRunboxPreparing,
-      onClick: handleShare
-    }), React__default["default"].createElement(blocks.Hspace, {
-      width: 0.5
-    }), React__default["default"].createElement(blocks.Tooltip, {
-      title: isRunboxPreparing ? intl.formatMessage({
-        id: 'runbox.reloadButton.tooltip'
-      }) : undefined
-    }, React__default["default"].createElement("span", null, React__default["default"].createElement(blocks.IconButton, {
-      icon: icons.eilReset,
-      iconSpin: isRunboxPreparing,
-      role: "greyfb",
-      size: "small",
-      border: true,
-      disabled: isRunboxPreparing,
-      onClick: handleReconnect
-    }))));
-  };
-  /**
-   * Body of runbox.
-   */
-
-
-  const renderRunboxBody = () => {
-    if (runboxStatus === exports.MaterialRunboxStatus.Terminated) {
-      return React__default["default"].createElement(MaterialRunboxContent_styled.RunboxBody, null, React__default["default"].createElement(MaterialRunboxContent_styled.RunboxBodyOverlay, null, React__default["default"].createElement(blocks.Box, null, React__default["default"].createElement(blocks.Text, {
-        size: "small",
-        preWrap: true,
-        lineHeight: 1.5,
-        textAlign: "center"
-      }, React__default["default"].createElement(reactIntl.FormattedMessage, {
-        id: "runbox.overlay.message.terminated"
-      })))));
-    }
-
-    if (runboxStatus === exports.MaterialRunboxStatus.Error) {
-      return React__default["default"].createElement(MaterialRunboxContent_styled.RunboxBody, null, React__default["default"].createElement(MaterialRunboxContent_styled.RunboxBodyOverlay, null, React__default["default"].createElement(blocks.Box, null, React__default["default"].createElement(blocks.Text, {
-        size: "small",
-        preWrap: true,
-        lineHeight: 1.5,
-        textAlign: "center"
-      }, React__default["default"].createElement(reactIntl.FormattedMessage, {
-        id: "runbox.overlay.message.error"
-      })))));
-    }
-
-    return React__default["default"].createElement(MaterialRunboxContent_styled.RunboxBody, null, React__default["default"].createElement(MaterialRunboxContent_styled.RunboxBodyOverlay, {
-      "aria-hidden": !isRunboxPreparing
-    }, React__default["default"].createElement(blocks.Box, null, React__default["default"].createElement(blocks.Spinner, null), React__default["default"].createElement(blocks.Vspace, {
-      height: 1
-    }), React__default["default"].createElement(blocks.Text, {
-      size: "small",
-      preWrap: true,
-      lineHeight: 1.5,
-      textAlign: "center"
-    }, runboxStatus === exports.MaterialRunboxStatus.Disconnected ? React__default["default"].createElement(reactIntl.FormattedMessage, {
-      id: "runbox.overlay.message.disconnected"
-    }) : React__default["default"].createElement(reactIntl.FormattedMessage, {
-      id: "runbox.overlay.message.connecting"
-    })))), runboxUrl ? React__default["default"].createElement(MaterialRunboxContent_styled.RunboxBodyIframe, {
-      src: runboxUrl + '/?folder=/mnt/elice/workspace',
-      title: "material-runbox",
-      onLoad: () => setRunboxUrlLoaded(true),
-      allow: "clipboard-read; clipboard-write; camera *; microphone *"
-    }) : null);
-  }; //
-  //
-  //
-
-
-  return React__default["default"].createElement(React__default["default"].Fragment, null, renderRunboxHeader(), React__default["default"].createElement(blocks.Vspace, {
-    height: 0.5
-  }), renderRunboxBody());
-};
-
-exports["default"] = MaterialRunboxContent;

package/cjs/components/material-runbox/MaterialRunboxContent.styled.d.ts

@@ -1,8 +0,0 @@
-import { MaterialRunboxStatus } from './MaterialRunboxContent';
-export declare const RunboxHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RunboxBody: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RunboxBodyOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RunboxBodyIframe: import("styled-components").StyledComponent<"iframe", any, {}, never>;
-export declare const RunboxStatusLight: import("styled-components").StyledComponent<"span", any, {
-    status: MaterialRunboxStatus;
-}, never>;

package/cjs/components/material-runbox/MaterialRunboxContent.styled.js

@@ -1,50 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
-var MaterialRunboxContent = require('./MaterialRunboxContent.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const RunboxHeader = styled__default["default"].div.withConfig({
-  componentId: "sc-c53ntk-0"
-})(["flex:0 0 2.5rem;display:flex;justify-content:flex-end;align-items:center;padding:0 0.5rem;"]);
-const RunboxBody = styled__default["default"].div.withConfig({
-  componentId: "sc-c53ntk-1"
-})(["position:relative;flex:1;"]);
-const RunboxBodyOverlay = styled__default["default"].div.withConfig({
-  componentId: "sc-c53ntk-2"
-})(["position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;flex:1;width:100%;height:100%;background:rgba(255,255,255,0.8);&[aria-hidden='true']{display:none;}"]);
-const RunboxBodyIframe = styled__default["default"].iframe.withConfig({
-  componentId: "sc-c53ntk-3"
-})(["width:100%;height:100%;border:none;"]);
-const RunboxStatusLight = styled__default["default"].span.withConfig({
-  componentId: "sc-c53ntk-4"
-})(["display:block;width:0.5rem;height:0.5rem;border-radius:50%;background-color:", ";"], props => {
-  switch (props.status) {
-    case MaterialRunboxContent.MaterialRunboxStatus.Loading:
-    case MaterialRunboxContent.MaterialRunboxStatus.Connecting:
-      return designTokens.base.color.yellow3;
-
-    case MaterialRunboxContent.MaterialRunboxStatus.Disconnected:
-      return designTokens.base.color.red7;
-
-    case MaterialRunboxContent.MaterialRunboxStatus.Done:
-      return designTokens.base.color.green7;
-
-    case MaterialRunboxContent.MaterialRunboxStatus.Idle:
-    case MaterialRunboxContent.MaterialRunboxStatus.Terminated:
-    default:
-      return designTokens.base.color.white;
-  }
-});
-
-exports.RunboxBody = RunboxBody;
-exports.RunboxBodyIframe = RunboxBodyIframe;
-exports.RunboxBodyOverlay = RunboxBodyOverlay;
-exports.RunboxHeader = RunboxHeader;
-exports.RunboxStatusLight = RunboxStatusLight;

package/cjs/components/material-runbox/MaterialRunboxRunnerRoomWrapper.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface MaterialRunboxRunnerRoomWrapperProps {
-    materialRunboxId: number;
-}
-declare const MaterialRunboxRunnerRoomWrapper: React.FC<MaterialRunboxRunnerRoomWrapperProps>;
-export default MaterialRunboxRunnerRoomWrapper;

package/cjs/components/material-runbox/MaterialRunboxRunnerRoomWrapper.js

@@ -1,72 +0,0 @@
-'use strict';
-
-var React = require('react');
-var apiClient = require('@elice/api-client');
-var materialSharedUtils = require('@elice/material-shared-utils');
-var MaterialRunboxStdioWrapper = require('./MaterialRunboxStdioWrapper.js');
-var websocket = require('./websocket.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const MaterialRunboxRunnerRoomWrapper = ({
-  materialRunboxId
-}) => {
-  const {
-    apiWsOriginUrl
-  } = materialSharedUtils.useMaterialConfig();
-  const abortCtrlRef = React__default["default"].useRef(new AbortController());
-  const [runboxRunningId, setRunboxRunningId] = React__default["default"].useState();
-  const [isRunboxJoinError, setRunboxJoinError] = React__default["default"].useState(false);
-  const [isRunboxRunningCanceling, setRunboxRunningCanceling] = React__default["default"].useState(false);
-  /**
-   * Resolve runner room token.
-   */
-
-  const resolveRunnerRoomToken = React__default["default"].useCallback(async () => {
-    setRunboxJoinError(false);
-    abortCtrlRef.current.abort();
-    abortCtrlRef.current = new AbortController();
-    return apiClient.postOrgRunnerRoomMaterialRunboxJoin({
-      materialRunboxId
-    }, {
-      signal: abortCtrlRef.current.signal
-    }).then(res => {
-      setRunboxJoinError(false);
-      setRunboxRunningId(res.runboxRunningId);
-      return res.roomToken;
-    }).catch(err => {
-      setRunboxJoinError(true);
-      throw err;
-    });
-  }, [materialRunboxId]);
-  /**
-   * Reconnect runbox.
-   */
-
-  const reconnectRunnerRoomWebSocket = React__default["default"].useCallback(async () => {
-    if (!runboxRunningId) {
-      return;
-    }
-
-    setRunboxRunningCanceling(true);
-    return apiClient.postOrgMaterialRunboxRunboxRunningCancel({
-      runboxRunningId
-    }).then(() => setRunboxRunningCanceling(false)).catch(() => setRunboxRunningCanceling(false));
-  }, [runboxRunningId]); //
-  //
-  //
-
-  return React__default["default"].createElement(websocket.WSMaterialRunboxRunnerRoom.Provider, {
-    enable: !isRunboxRunningCanceling,
-    endpoint: `${apiWsOriginUrl}/runner_room`,
-    tokenProvider: resolveRunnerRoomToken,
-    connectionTimeout: 8000
-  }, React__default["default"].createElement(MaterialRunboxStdioWrapper, {
-    isRunboxJoinError: isRunboxJoinError,
-    reconnectRunnerRoomWebSocket: reconnectRunnerRoomWebSocket
-  }));
-};
-
-module.exports = MaterialRunboxRunnerRoomWrapper;

package/cjs/components/material-runbox/MaterialRunboxStdioWrapper.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface MaterialRunboxStdioWrapperProps {
-    isRunboxJoinError: boolean;
-    reconnectRunnerRoomWebSocket: () => Promise<void>;
-}
-declare const MaterialRunboxStdioWrapper: React.FC<MaterialRunboxStdioWrapperProps>;
-export default MaterialRunboxStdioWrapper;

package/cjs/components/material-runbox/MaterialRunboxStdioWrapper.js

@@ -1,80 +0,0 @@
-'use strict';
-
-var React = require('react');
-var MaterialRunboxContent = require('./MaterialRunboxContent.js');
-var websocket = require('./websocket.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const RECONNECT_DELAY = 500;
-
-const MaterialRunboxStdioWrapper = ({
-  isRunboxJoinError,
-  reconnectRunnerRoomWebSocket
-}) => {
-  const [roomToken, setRoomToken] = React__default["default"].useState('');
-  const [wsUri, setWsUri] = React__default["default"].useState('');
-  const [runboxUrl, setRunboxUrl] = React__default["default"].useState(null);
-  const [isRunboxTerminated, setRunboxTerminated] = React__default["default"].useState(false);
-  const {
-    close: closeRunnerRoom
-  } = websocket.WSMaterialRunboxRunnerRoom.useControls();
-  const runnerRoomWsStatus = websocket.WSMaterialRunboxRunnerRoom.useReadyState();
-  /**
-   * Reconnect runbox.
-   */
-
-  const reconnect = () => {
-    setRunboxUrl(null);
-    setRunboxTerminated(false);
-    setTimeout(() => void reconnectRunnerRoomWebSocket(), RECONNECT_DELAY);
-  }; //
-  //
-  //
-
-
-  websocket.WSMaterialRunboxRunnerRoom.useMessage(message => {
-    switch (message.type) {
-      case 'ROOM_PREPARED':
-        setRoomToken(message.data.roomToken);
-        setWsUri(message.data.forwarder.wsUri);
-        setRunboxUrl(message.data.forwarder.httpUri);
-        break;
-
-      case 'EXECUTE_DONE':
-        closeRunnerRoom();
-        setRunboxTerminated(true);
-        break;
-    }
-  }, {
-    camelize: true
-  }); //
-  // Remove runbox url, when websocket is not open state.
-  //
-
-  React__default["default"].useEffect(() => {
-    if (runnerRoomWsStatus !== WebSocket.OPEN) {
-      setRunboxUrl(null);
-    }
-  }, [runnerRoomWsStatus]); //
-  //
-  //
-
-  const isReady = Boolean(wsUri) && Boolean(roomToken);
-  return React__default["default"].createElement(websocket.WSMaterialRunboxStdio.Provider, {
-    enable: isReady,
-    endpoint: `${wsUri}/client/stdio`,
-    tokenProvider: async () => roomToken,
-    maxRetries: 5,
-    heartAttack: true
-  }, isReady ? React__default["default"].createElement(MaterialRunboxContent["default"], {
-    runboxUrl: runboxUrl,
-    isRunboxJoinError: isRunboxJoinError,
-    isRunboxTerminated: isRunboxTerminated,
-    reconnect: reconnect
-  }) : null);
-};
-
-module.exports = MaterialRunboxStdioWrapper;

package/cjs/components/material-runbox/locales.d.ts

@@ -1,15 +0,0 @@
-export declare const en: {
-    'runbox.status.idle': string;
-    'runbox.status.connecting': string;
-    'runbox.status.loading': string;
-    'runbox.status.done': string;
-    'runbox.status.disconnected': string;
-    'runbox.status.terminated': string;
-    'runbox.reloadButton.tooltip': string;
-    'runbox.overlay.message.terminated': string;
-    'runbox.overlay.message.error': string;
-    'runbox.overlay.message.disconnected': string;
-    'runbox.overlay.message.connecting': string;
-    'runbox.share.success': string;
-};
-export declare const ko: typeof en;