@elice/material-runbox 1.220803.0

package/README.md

@@ -0,0 +1,3 @@
+# elice-material-runbox
+
+User view and editing components of Elice material runbox.

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface MaterialRunboxProps {
+    materialRunboxId: number;
+    locale?: string;
+}
+declare const MaterialRunbox: React.FC<MaterialRunboxProps>;
+export default MaterialRunbox;

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

@@ -0,0 +1,44 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var materialSharedUtils = require('@elice/material-shared-utils');
+var locales = require('./locales.js');
+var MaterialRunboxRunnerRoomWrapper = require('./MaterialRunboxRunnerRoomWrapper.js');
+var MaterialRunbox_styled = require('./MaterialRunbox.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const MaterialRunbox = ({
+  materialRunboxId,
+  locale = 'en'
+}) => {
+  const isReady = materialSharedUtils.useMaterialConfigApiClientUpdate(apiClient.config.init);
+
+  if (!isReady) {
+    return React__default["default"].createElement(blocks.Flex, {
+      justify: "center",
+      align: "center",
+      width: "100%",
+      height: "100%"
+    }, React__default["default"].createElement(blocks.Spinner, {
+      size: "small"
+    }));
+  }
+
+  return React__default["default"].createElement(MaterialRunbox_styled.StyledMaterialRunbox, {
+    key: materialRunboxId
+  }, React__default["default"].createElement(reactIntl.IntlProvider, {
+    locale: locale,
+    defaultLocale: "en",
+    messages: locale in locales ? locales[locale] : locales.en
+  }, React__default["default"].createElement(MaterialRunboxRunnerRoomWrapper, {
+    materialRunboxId: materialRunboxId
+  })));
+};
+
+module.exports = MaterialRunbox;

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

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

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

@@ -0,0 +1,15 @@
+'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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,305 @@
+'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"
+    }) : 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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,50 @@
+'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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,72 @@
+'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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,80 @@
+'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/index.d.ts

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

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

@@ -0,0 +1,15 @@
+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;