@arcblock/graphql-playground 2.13.69 → 3.0.0

package/README.md

@@ -60,7 +60,7 @@ module.exports = graphiql;
 Then, in `gatsby-node.js`, use the mocks:
 
 ```javascript
-const path = require('path');
+const path = require('node:path');
 
 exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
   if (stage === 'build-html') {

package/lib/index.js

@@ -1,222 +1,237 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = GraphQLPlayground;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _axios = _interopRequireDefault(require("axios"));
-var _reactLoadScript = _interopRequireDefault(require("react-load-script"));
-var _graphiql = _interopRequireDefault(require("graphiql"));
-var _graphiqlExplorer = _interopRequireDefault(require("graphiql-explorer"));
-var _graphiqlCodeExporter = _interopRequireDefault(require("graphiql-code-exporter"));
-var _snippets = _interopRequireDefault(require("graphiql-code-exporter/lib/snippets"));
-var _graphql = require("graphql");
-var _react2 = require("@graphiql/react");
-var _reactRouterDom = require("react-router-dom");
-require("graphiql/graphiql.css");
-require("graphiql-code-exporter/CodeExporter.css");
-require("codemirror/theme/neo.css");
-var _Util = require("@arcblock/ux/lib/Util");
-var _util = require("./util");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const _excluded = ["endpoint", "title", "enableCodeExporter", "enableQueryComposer", "enableHistory", "extraCodeSnippets"];
-/* eslint-disable indent */
-/* eslint-disable no-nested-ternary */
-/* eslint-disable no-undef */
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-function HistoryToggleButton() {
-  const {
-    toggle
-  } = (0, _react2.useHistoryContext)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
-    onClick: toggle,
-    label: "History",
-    title: "Show History"
-  });
+import { jsx as i } from "react/jsx-runtime";
+import o from "prop-types";
+import { styled as x } from "@arcblock/ux/lib/Theme";
+import { GraphiQL as h } from "graphiql";
+import { explorerPlugin as m } from "@graphiql/plugin-explorer";
+import { createGraphiQLFetcher as g } from "@graphiql/toolkit";
+import t from "lodash/isUndefined";
+import "graphiql/style.css";
+import "@graphiql/plugin-explorer/style.css";
+import { mergeProps as b } from "@arcblock/ux/lib/Util";
+function a(e) {
+  const r = Object.assign({}, e);
+  t(r.title) && (r.title = "Query"), t(r.defaultQuery) && (r.defaultQuery = "{}"), t(r.persistentQuery) && (r.persistentQuery = !1), t(r.enableQueryComposer) && (r.enableQueryComposer = !0), t(r.enableCodeExporter) && (r.enableCodeExporter = !1), t(r.enableHistory) && (r.enableHistory = !1), t(r.extraCodeSnippets) && (r.extraCodeSnippets = []), t(r.extraHeaders) && (r.extraHeaders = {});
+  const p = b(r, a, [
+    "style",
+    "persistentQuery",
+    "enableQueryComposer",
+    "enableCodeExporter",
+    "enableHistory"
+  ]), n = g({
+    url: p.endpoint
+  }), l = [m()], {
+    endpoint: y,
+    title: f,
+    enableCodeExporter: C,
+    enableQueryComposer: w,
+    enableHistory: $,
+    extraCodeSnippets: Q,
+    defaultQuery: d,
+    extraHeaders: k,
+    persistentQuery: H,
+    ...s
+  } = p;
+  return /* @__PURE__ */ i(c, { ...s, children: /* @__PURE__ */ i(h, { fetcher: n, plugins: l, defaultQuery: d }) });
 }
-function PrettifyButton() {
-  const prettify = (0, _react2.usePrettifyEditors)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
-    onClick: prettify,
-    label: "Prettify",
-    title: "Prettify Query (Shift-Ctrl-P)"
-  });
-}
-function GraphQLPlayground(props) {
-  const newProps = (0, _Util.mergeProps)(props, GraphQLPlayground, ['style', 'persistentQuery', 'enableQueryComposer', 'enableCodeExporter', 'enableHistory']);
-  const location = (0, _reactRouterDom.useLocation)();
-  const navigate = (0, _reactRouterDom.useNavigate)();
-  const graphiql = (0, _react.useRef)(null);
-  const subscriptionClient = (0, _react.useRef)(null);
-  const [schema, setSchema] = (0, _react.useState)(null);
-  const [query, setQuery] = (0, _react.useState)(newProps.defaultQuery || '{}');
-  const [queryComposerIsOpen, setComposerOpen] = (0, _react.useState)(newProps.enableQueryComposer);
-  const [codeExporterIsOpen, setExporterOpen] = (0, _react.useState)(false);
-  const persistQuery = newQuery => {
-    const {
-      pathname,
-      search
-    } = location;
-    const params = (0, _Util.parseQuery)(search);
-    params.query = newQuery;
-    const newUrl = "".concat(pathname, "?").concat((0, _Util.stringifyQuery)(params));
-    navigate(newUrl);
-  };
-  (0, _react.useEffect)(() => {
-    if (newProps.persistentQuery) {
-      const params = (0, _Util.parseQuery)(window.location.search);
-      if (params.query) {
-        setQuery(params.query);
-      } else {
-        persistQuery(query);
+a.propTypes = {
+  endpoint: o.string.isRequired,
+  defaultQuery: o.string,
+  title: o.string,
+  persistentQuery: o.bool,
+  enableQueryComposer: o.bool,
+  enableCodeExporter: o.bool,
+  enableHistory: o.bool,
+  extraCodeSnippets: o.array,
+  extraHeaders: o.any
+};
+const c = x("div")`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
+  height: 100%;
+  position: relative;
+
+  @media (max-width: ${(e) => e.theme.breakpoints.values.md}px) {
+    margin-top: 30px;
+  }
+
+  > .historyPaneWrap {
+    z-index: 8 !important;
+    width: 320px !important;
+    box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(e) => e.theme.mode === "light" ? 0.05 : 0.5});
+    overflow-y: scroll;
+  }
+
+  .doc-explorer-title-bar,
+  .history-title-bar {
+    height: 45px;
+    line-height: 45px;
+    padding: 0px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .doc-explorer-title-bar {
+    padding: 0px 32px;
+  }
+
+  .doc-explorer-title,
+  .history-title {
+    font-size: 14px;
+    font-weight: 900;
+    letter-spacing: 2px;
+    color: ${(e) => e.theme.typography.color.gray};
+    text-transform: uppercase;
+    text-align: left !important;
+  }
+
+  .doc-explorer-contents {
+    min-height: 0;
+  }
+  .history-contents {
+    top: 45px !important;
+    background-color: ${(e) => e.theme.palette.background.default} !important;
+    border-top: 1px solid #e3e3e3 !important;
+  }
+
+  .history-contents {
+    color: ${(e) => e.theme.typography.color.main};
+    p {
+      border-bottom: 1px solid #e3e3e3;
+    }
+  }
+
+  .docExplorerHide {
+    color: ${(e) => e.theme.typography.color.main};
+    padding: 0;
+    cursor: pointer;
+    margin: -7px -8px -6px -12px;
+    opacity: 0.75;
+    font-size: 18px;
+  }
+
+  .toolbar-button {
+    cursor: pointer;
+  }
+
+  .graphiql-container {
+    .title {
+      color: ${(e) => e.theme.typography.color.main};
+    }
+
+    .topBar {
+      background-image: none;
+      height: 45px;
+      border-bottom-width: 0;
+    }
+
+    .docExplorerShow {
+      background: ${(e) => e.theme.palette.background.default};
+      border: none;
+      font-size: 14px;
+      color: ${(e) => e.theme.typography.color.main};
+      text-transform: uppercase;
+
+      &::before {
+        border-color: ${(e) => e.theme.typography.color.gray};
+      }
+    }
+
+    .historyPaneWrap {
+      width: 320px !important;
+      background-color: ${(e) => e.theme.palette.background.default};
+      box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(e) => e.theme.mode === "light" ? 0.05 : 0.5});
+    }
+
+    .search-box {
+      margin-bottom: 20px;
+      border-bottom: none;
+
+      input {
+        height: 30px;
+        border-radius: 15px;
+        border: solid 1px ${(e) => e.theme.typography.color.main};
+        padding: 6px 24px 8px 30px;
+      }
+
+      .search-box-clear {
+        right: 10px;
+      }
+
+      &::before {
+        left: 10px;
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const onEditQuery = newQuery => {
-    if (newQuery !== query && newProps.persistentQuery) {
-      persistQuery(newQuery);
+
+    .variable-editor-title {
+      background: ${(e) => e.theme.palette.background.default};
+      border: none;
+      height: 40px;
+      padding-left: 20px;
+
+      &::before {
+        border-left: 2px solid ${(e) => e.theme.typography.color.gray};
+        border-top: 2px solid ${(e) => e.theme.typography.color.gray};
+        content: '';
+        display: inline-block;
+        height: 9px;
+        margin: 0 5px 1px 0;
+        position: relative;
+        -webkit-transform: rotate(-135deg);
+        transform: rotate(-135deg);
+        width: 9px;
+      }
     }
-    setQuery(newQuery);
-  };
-  const onToggleExplorer = () => {
-    setComposerOpen(!queryComposerIsOpen);
-  };
-  const onToggleCodeExporter = () => setExporterOpen(!codeExporterIsOpen);
-  const ensureSubscriptionClient = () => {
-    if (subscriptionClient.current) {
-      subscriptionClient.current.close();
-      subscriptionClient.current = null;
+
+    .resultWrap {
+      border-left: none;
+      .CodeMirror-gutters {
+        opacity: 0.5;
+      }
+      .CodeMirror-gutter.CodeMirror-foldgutter {
+        box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(e) => e.theme.mode === "light" ? 0.05 : 0.5});
+      }
     }
-    const {
-      endpoint
-    } = newProps;
-    let socketUrl = endpoint.replace(/https?:\/\//, 'ws://');
-    if (endpoint.indexOf('https://') === 0) {
-      socketUrl = socketUrl.replace('ws://', 'wss://');
+
+    .CodeMirror,
+    .CodeMirror-gutters,
+    .CodeMirror-linenumber,
+    .CodeMirror-foldgutter {
+      background: ${(e) => e.theme.palette.background.default};
     }
-    subscriptionClient.current = new AbsintheSocketGraphiql.SubscriptionsClient(localStorage.getItem('websocket') || "".concat(socketUrl, "/socket"), {
-      reconnect: true,
-      connectionParams: {}
-    });
-  };
-  const httpFetcher = async params => {
-    const extraHeaders = typeof newProps.extraHeaders === 'function' ? newProps.extraHeaders() : newProps.extraHeaders || {};
-    const res = await (0, _axios.default)({
-      method: 'post',
-      url: newProps.endpoint,
-      data: params,
-      headers: Object.assign({
-        'Content-Type': 'application/json'
-      }, extraHeaders)
-    });
-    return res.data;
-  };
-  const fetcher = params => {
-    if (params.query.indexOf('subscription') >= 0) {
-      ensureSubscriptionClient();
-
-      // disable subscription in test env
-      if (process.env.NODE_ENV !== 'test') {
-        return (0, _util.graphQLFetcher)(subscriptionClient.current, httpFetcher)(params);
+
+    .variable-editor {
+      .CodeMirror {
+        background: white;
       }
     }
-    return httpFetcher(params);
-  };
-  (0, _react.useEffect)(() => {
-    httpFetcher({
-      query: (0, _graphql.getIntrospectionQuery)()
-    }).then(result => {
-      if (!graphiql.current) {
-        return;
+
+    .CodeMirror-gutters {
+      border-right-width: 0;
+    }
+  }
+
+  .graphiql-exporter-container {
+    width: auto;
+    .historyPaneWrap {
+      position: absolute !important;
+      height: 100%;
+      top: 0;
+      right: 0;
+      background-color: ${(e) => e.theme.palette.background.default};
+      box-shadow: -5px 16px 10px 0 rgba(0, 0, 0, ${(e) => e.theme.mode === "light" ? 0.05 : 0.5});
+      z-index: 3;
+
+      .history-contents {
+        padding-top: 12px;
+        .toolbar-button {
+          margin-top: -24px !important;
+        }
       }
-      setSchema((0, _graphql.buildClientSchema)(result.data));
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [graphiql.current]);
-  const {
-      endpoint,
-      title,
-      enableCodeExporter,
-      enableQueryComposer,
-      enableHistory,
-      extraCodeSnippets
-    } = newProps,
-    rest = _objectWithoutProperties(newProps, _excluded);
-  const snippets = [...extraCodeSnippets, ..._snippets.default];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, _objectSpread(_objectSpread({}, rest), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLoadScript.default, {
-      url: "//cdn.jsdelivr.net/npm/@absinthe/socket-graphiql@0.2.1/compat/umd/index.js"
-    }), enableQueryComposer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiqlExplorer.default, {
-      schema: schema,
-      query: query,
-      onEdit: onEditQuery,
-      onRunOperation: operationName => graphiql.current.handleRunQuery(operationName),
-      explorerIsOpen: queryComposerIsOpen,
-      onToggleExplorer: onToggleExplorer,
-      className: "graphiql-explorer"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_graphiql.default, {
-      ref: graphiql,
-      fetcher: fetcher,
-      schema: schema,
-      query: query,
-      onEditQuery: onEditQuery,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Logo, {
-        children: title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_graphiql.default.Toolbar, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PrettifyButton, {}), enableHistory && /*#__PURE__*/(0, _jsxRuntime.jsx)(HistoryToggleButton, {}), enableQueryComposer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
-          onClick: onToggleExplorer,
-          label: "Query Composer",
-          title: "Toggle Query Composer"
-        }), enableCodeExporter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
-          onClick: onToggleCodeExporter,
-          label: "Code Exporter",
-          title: "Toggle Code Exporter"
-        })]
-      })]
-    }), enableCodeExporter && codeExporterIsOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "graphiql-container graphiql-exporter-container",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiqlCodeExporter.default, {
-        hideCodeExporter: onToggleCodeExporter,
-        snippets: snippets,
-        serverUrl: endpoint,
-        query: query,
-        codeMirrorTheme: "neo"
-      })
-    })]
-  }));
-}
-GraphQLPlayground.propTypes = {
-  endpoint: _propTypes.default.string.isRequired,
-  defaultQuery: _propTypes.default.string,
-  title: _propTypes.default.string,
-  persistentQuery: _propTypes.default.bool,
-  enableQueryComposer: _propTypes.default.bool,
-  enableCodeExporter: _propTypes.default.bool,
-  enableHistory: _propTypes.default.bool,
-  extraCodeSnippets: _propTypes.default.array,
-  extraHeaders: _propTypes.default.any
-};
-GraphQLPlayground.defaultProps = {
-  title: 'Query',
-  defaultQuery: '{}',
-  persistentQuery: false,
-  enableQueryComposer: true,
-  enableCodeExporter: false,
-  enableHistory: false,
-  extraCodeSnippets: [],
-  extraHeaders: {}
+    }
+  }
+`;
+export {
+  a as default
 };
-const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  overflow: hidden;\n  height: 100%;\n  position: relative;\n\n  @media (max-width: ", "px) {\n    margin-top: 30px;\n  }\n\n  > .historyPaneWrap {\n    z-index: 8 !important;\n    width: 320px !important;\n    box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ", ");\n    overflow-y: scroll;\n  }\n\n  .doc-explorer-title-bar,\n  .history-title-bar {\n    height: 45px;\n    line-height: 45px;\n    padding: 0px 8px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .doc-explorer-title-bar {\n    padding: 0px 32px;\n  }\n\n  .doc-explorer-title,\n  .history-title {\n    font-size: 14px;\n    font-weight: 900;\n    letter-spacing: 2px;\n    color: ", ";\n    text-transform: uppercase;\n    text-align: left !important;\n  }\n\n  .doc-explorer-contents {\n    min-height: 0;\n  }\n  .history-contents {\n    top: 45px !important;\n    background-color: ", " !important;\n    border-top: 1px solid #e3e3e3 !important;\n  }\n\n  .history-contents {\n    color: ", ";\n    p {\n      border-bottom: 1px solid #e3e3e3;\n    }\n  }\n\n  .docExplorerHide {\n    color: ", ";\n    padding: 0;\n    cursor: pointer;\n    margin: -7px -8px -6px -12px;\n    opacity: 0.75;\n    font-size: 18px;\n  }\n\n  .toolbar-button {\n    cursor: pointer;\n  }\n\n  .graphiql-container {\n    .title {\n      color: ", ";\n    }\n\n    .topBar {\n      background-image: none;\n      height: 45px;\n      border-bottom-width: 0;\n    }\n\n    .docExplorerShow {\n      background: ", ";\n      border: none;\n      font-size: 14px;\n      color: ", ";\n      text-transform: uppercase;\n\n      &::before {\n        border-color: ", ";\n      }\n    }\n\n    .historyPaneWrap {\n      width: 320px !important;\n      background-color: ", ";\n      box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ", ");\n    }\n\n    .search-box {\n      margin-bottom: 20px;\n      border-bottom: none;\n\n      input {\n        height: 30px;\n        border-radius: 15px;\n        border: solid 1px ", ";\n        padding: 6px 24px 8px 30px;\n      }\n\n      .search-box-clear {\n        right: 10px;\n      }\n\n      &::before {\n        left: 10px;\n      }\n    }\n\n    .variable-editor-title {\n      background: ", ";\n      border: none;\n      height: 40px;\n      padding-left: 20px;\n\n      &::before {\n        border-left: 2px solid ", ";\n        border-top: 2px solid ", ";\n        content: '';\n        display: inline-block;\n        height: 9px;\n        margin: 0 5px 1px 0;\n        position: relative;\n        -webkit-transform: rotate(-135deg);\n        transform: rotate(-135deg);\n        width: 9px;\n      }\n    }\n\n    .resultWrap {\n      border-left: none;\n      .CodeMirror-gutters {\n        opacity: 0.5;\n      }\n      .CodeMirror-gutter.CodeMirror-foldgutter {\n        box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ", ");\n      }\n    }\n\n    .CodeMirror,\n    .CodeMirror-gutters,\n    .CodeMirror-linenumber,\n    .CodeMirror-foldgutter {\n      background: ", ";\n    }\n\n    .variable-editor {\n      .CodeMirror {\n        background: white;\n      }\n    }\n\n    .CodeMirror-gutters {\n      border-right-width: 0;\n    }\n  }\n\n  .graphiql-exporter-container {\n    width: auto;\n    .historyPaneWrap {\n      position: absolute !important;\n      height: 100%;\n      top: 0;\n      right: 0;\n      background-color: ", ";\n      box-shadow: -5px 16px 10px 0 rgba(0, 0, 0, ", ");\n      z-index: 3;\n\n      .history-contents {\n        padding-top: 12px;\n        .toolbar-button {\n          margin-top: -24px !important;\n        }\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.values.md, props => props.theme.mode === 'light' ? 0.05 : 0.5, props => props.theme.typography.color.gray, props => props.theme.palette.background.default, props => props.theme.typography.color.main, props => props.theme.typography.color.main, props => props.theme.typography.color.main, props => props.theme.palette.background.default, props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5, props => props.theme.typography.color.main, props => props.theme.palette.background.default, props => props.theme.typography.color.gray, props => props.theme.typography.color.gray, props => props.theme.mode === 'light' ? 0.05 : 0.5, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5);

package/lib/util.js

@@ -1,47 +1,26 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.graphQLFetcher = void 0;
-var _graphql = require("graphql");
-const hasSubscriptionOperation = graphQlParams => {
-  const queryDoc = (0, _graphql.parse)(graphQlParams.query);
-  for (const definition of queryDoc.definitions) {
-    if (definition.kind === 'OperationDefinition') {
-      if (definition.operation === 'subscription') {
-        return true;
-      }
-    }
-  }
-  return false;
-};
-
-// eslint-disable-next-line import/prefer-default-export
-const graphQLFetcher = (subscriptionsClient, fallbackFetcher) => {
-  let activeSubscriptionId = null;
-  return params => {
-    if (subscriptionsClient && activeSubscriptionId !== null) {
-      subscriptionsClient.unsubscribe(activeSubscriptionId);
-    }
-    if (subscriptionsClient && hasSubscriptionOperation(params)) {
-      return {
-        subscribe(observer) {
-          observer.next('Your subscription data will appear here after server publication!');
-          activeSubscriptionId = subscriptionsClient.subscribe({
-            query: params.query,
-            variables: params.variables
-          }, (error, result) => {
-            if (error) {
-              observer.error(error);
-            } else {
-              observer.next(result);
-            }
-          });
+import { parse as f } from "graphql";
+const a = (e) => {
+  const t = f(e.query);
+  for (const r of t.definitions)
+    if (r.kind === "OperationDefinition" && r.operation === "subscription")
+      return !0;
+  return !1;
+}, s = (e, t) => {
+  let r = null;
+  return (i) => (e && r !== null && e.unsubscribe(r), e && a(i) ? {
+    subscribe(n) {
+      n.next("Your subscription data will appear here after server publication!"), r = e.subscribe(
+        {
+          query: i.query,
+          variables: i.variables
+        },
+        (u, o) => {
+          u ? n.error(u) : n.next(o);
         }
-      };
+      );
     }
-    return fallbackFetcher(params);
-  };
+  } : t(i));
+};
+export {
+  s as graphQLFetcher
 };
-exports.graphQLFetcher = graphQLFetcher;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/graphql-playground",
-  "version": "2.13.69",
+  "version": "3.0.0",
   "description": "A React Component to interact with GraphQL APIs",
   "keywords": [
     "react",
@@ -18,8 +18,8 @@
   "scripts": {
     "lint": "eslint src tests --ext js --ext jsx",
     "lint:fix": "npm run lint -- --fix",
-    "build": "babel src --out-dir lib --copy-files --no-copy-ignored",
-    "watch": "babel src --out-dir lib -w --copy-files --no-copy-ignored",
+    "build": "vite build",
+    "watch": "vite build --watch",
     "precommit": "CI=1 npm run lint",
     "prepush": "CI=1 npm run lint",
     "prepublish": "npm run build",
@@ -30,31 +30,24 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "axios": "^1.7.5",
-    "core-js": "^3.25.5",
-    "graphiql": "^1.11.5",
-    "graphiql-code-exporter": "^3.0.3",
-    "graphiql-explorer": "^0.9.0",
-    "graphql": "^16.6.0",
-    "react-load-script": "^0.0.6"
+    "@graphiql/plugin-explorer": "^4.0.6",
+    "axios": "^1.10.0",
+    "graphiql": "^4.1.2",
+    "graphql": "^16.11.0"
   },
   "peerDependencies": {
-    "@arcblock/ux": "^2.11.48",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "react": "^18.2.0",
+    "@arcblock/ux": "workspace:*",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.19.3",
-    "@babel/preset-env": "^7.19.3",
-    "@babel/preset-react": "^7.18.6",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0"
   },
-  "gitHead": "d8a03a6d869bf5f7be34b448463a07c435b21cea"
+  "gitHead": "b001c32ca85d40d8a0784ca581bfd54d90550b24"
 }

package/src/GraphqlPlayground.stories.jsx

@@ -0,0 +1,16 @@
+export { default as Basic } from './demo/basic';
+export { default as WithHistory } from './demo/with-history';
+export { default as WithQueryComposer } from './demo/with-query-composer';
+export { default as WithCodeExporter } from './demo/with-code-exporter';
+export { default as KitchenSink } from './demo/kitchen-sink';
+
+export default {
+  title: 'Data Display/GraphQLPlayground',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A GraphQL Playground component built on top of `graphql/graphiql`',
+      },
+    },
+  },
+};

package/src/index.jsx

@@ -0,0 +1,275 @@
+import PropTypes from 'prop-types';
+import { styled } from '@arcblock/ux/lib/Theme';
+import { GraphiQL } from 'graphiql';
+// eslint-disable-next-line import/no-unresolved
+import { explorerPlugin } from '@graphiql/plugin-explorer';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import isUndefined from 'lodash/isUndefined';
+
+// eslint-disable-next-line import/no-unresolved
+import 'graphiql/style.css';
+// eslint-disable-next-line import/no-unresolved
+import '@graphiql/plugin-explorer/style.css';
+
+import { mergeProps } from '@arcblock/ux/lib/Util';
+
+export default function GraphQLPlayground(rawProps) {
+  const props = Object.assign({}, rawProps);
+  if (isUndefined(props.title)) {
+    props.title = 'Query';
+  }
+  if (isUndefined(props.defaultQuery)) {
+    props.defaultQuery = '{}';
+  }
+  if (isUndefined(props.persistentQuery)) {
+    props.persistentQuery = false;
+  }
+  if (isUndefined(props.enableQueryComposer)) {
+    props.enableQueryComposer = true;
+  }
+  if (isUndefined(props.enableCodeExporter)) {
+    props.enableCodeExporter = false;
+  }
+  if (isUndefined(props.enableHistory)) {
+    props.enableHistory = false;
+  }
+  if (isUndefined(props.extraCodeSnippets)) {
+    props.extraCodeSnippets = [];
+  }
+  if (isUndefined(props.extraHeaders)) {
+    props.extraHeaders = {};
+  }
+  const newProps = mergeProps(props, GraphQLPlayground, [
+    'style',
+    'persistentQuery',
+    'enableQueryComposer',
+    'enableCodeExporter',
+    'enableHistory',
+  ]);
+
+  const fetcher = createGraphiQLFetcher({
+    url: newProps.endpoint,
+  });
+  const explorer = explorerPlugin();
+  const plugins = [explorer];
+
+  const {
+    endpoint,
+    title,
+    enableCodeExporter,
+    enableQueryComposer,
+    enableHistory,
+    extraCodeSnippets,
+    defaultQuery,
+    extraHeaders,
+    persistentQuery,
+    ...rest
+  } = newProps;
+
+  return (
+    <Container {...rest}>
+      <GraphiQL fetcher={fetcher} plugins={plugins} defaultQuery={defaultQuery} />
+    </Container>
+  );
+}
+
+GraphQLPlayground.propTypes = {
+  endpoint: PropTypes.string.isRequired,
+  defaultQuery: PropTypes.string,
+  title: PropTypes.string,
+  persistentQuery: PropTypes.bool,
+  enableQueryComposer: PropTypes.bool,
+  enableCodeExporter: PropTypes.bool,
+  enableHistory: PropTypes.bool,
+  extraCodeSnippets: PropTypes.array,
+  extraHeaders: PropTypes.any,
+};
+
+const Container = styled('div')`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
+  height: 100%;
+  position: relative;
+
+  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
+    margin-top: 30px;
+  }
+
+  > .historyPaneWrap {
+    z-index: 8 !important;
+    width: 320px !important;
+    box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
+    overflow-y: scroll;
+  }
+
+  .doc-explorer-title-bar,
+  .history-title-bar {
+    height: 45px;
+    line-height: 45px;
+    padding: 0px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .doc-explorer-title-bar {
+    padding: 0px 32px;
+  }
+
+  .doc-explorer-title,
+  .history-title {
+    font-size: 14px;
+    font-weight: 900;
+    letter-spacing: 2px;
+    color: ${(props) => props.theme.typography.color.gray};
+    text-transform: uppercase;
+    text-align: left !important;
+  }
+
+  .doc-explorer-contents {
+    min-height: 0;
+  }
+  .history-contents {
+    top: 45px !important;
+    background-color: ${(props) => props.theme.palette.background.default} !important;
+    border-top: 1px solid #e3e3e3 !important;
+  }
+
+  .history-contents {
+    color: ${(props) => props.theme.typography.color.main};
+    p {
+      border-bottom: 1px solid #e3e3e3;
+    }
+  }
+
+  .docExplorerHide {
+    color: ${(props) => props.theme.typography.color.main};
+    padding: 0;
+    cursor: pointer;
+    margin: -7px -8px -6px -12px;
+    opacity: 0.75;
+    font-size: 18px;
+  }
+
+  .toolbar-button {
+    cursor: pointer;
+  }
+
+  .graphiql-container {
+    .title {
+      color: ${(props) => props.theme.typography.color.main};
+    }
+
+    .topBar {
+      background-image: none;
+      height: 45px;
+      border-bottom-width: 0;
+    }
+
+    .docExplorerShow {
+      background: ${(props) => props.theme.palette.background.default};
+      border: none;
+      font-size: 14px;
+      color: ${(props) => props.theme.typography.color.main};
+      text-transform: uppercase;
+
+      &::before {
+        border-color: ${(props) => props.theme.typography.color.gray};
+      }
+    }
+
+    .historyPaneWrap {
+      width: 320px !important;
+      background-color: ${(props) => props.theme.palette.background.default};
+      box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
+    }
+
+    .search-box {
+      margin-bottom: 20px;
+      border-bottom: none;
+
+      input {
+        height: 30px;
+        border-radius: 15px;
+        border: solid 1px ${(props) => props.theme.typography.color.main};
+        padding: 6px 24px 8px 30px;
+      }
+
+      .search-box-clear {
+        right: 10px;
+      }
+
+      &::before {
+        left: 10px;
+      }
+    }
+
+    .variable-editor-title {
+      background: ${(props) => props.theme.palette.background.default};
+      border: none;
+      height: 40px;
+      padding-left: 20px;
+
+      &::before {
+        border-left: 2px solid ${(props) => props.theme.typography.color.gray};
+        border-top: 2px solid ${(props) => props.theme.typography.color.gray};
+        content: '';
+        display: inline-block;
+        height: 9px;
+        margin: 0 5px 1px 0;
+        position: relative;
+        -webkit-transform: rotate(-135deg);
+        transform: rotate(-135deg);
+        width: 9px;
+      }
+    }
+
+    .resultWrap {
+      border-left: none;
+      .CodeMirror-gutters {
+        opacity: 0.5;
+      }
+      .CodeMirror-gutter.CodeMirror-foldgutter {
+        box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
+      }
+    }
+
+    .CodeMirror,
+    .CodeMirror-gutters,
+    .CodeMirror-linenumber,
+    .CodeMirror-foldgutter {
+      background: ${(props) => props.theme.palette.background.default};
+    }
+
+    .variable-editor {
+      .CodeMirror {
+        background: white;
+      }
+    }
+
+    .CodeMirror-gutters {
+      border-right-width: 0;
+    }
+  }
+
+  .graphiql-exporter-container {
+    width: auto;
+    .historyPaneWrap {
+      position: absolute !important;
+      height: 100%;
+      top: 0;
+      right: 0;
+      background-color: ${(props) => props.theme.palette.background.default};
+      box-shadow: -5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
+      z-index: 3;
+
+      .history-contents {
+        padding-top: 12px;
+        .toolbar-button {
+          margin-top: -24px !important;
+        }
+      }
+    }
+  }
+`;

package/vite.config.mjs

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+import react from '@vitejs/plugin-react';
+import noBundlePlugin from 'vite-plugin-no-bundle';
+import fg from 'fast-glob';
+
+export default defineConfig({
+  plugins: [
+    react({ jsxRuntime: 'automatic' }),
+    svgr({
+      include: ['**/*.svg', '**/*.svg?react'],
+    }),
+    noBundlePlugin({
+      root: 'src',
+      copy: ['**/*.png', '**/*.gif', '**/*.jpg', '**/*.jpeg', '**/*.d.ts'],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: fg.sync('src/**/*.{tsx,ts,jsx,js}', {
+        ignore: ['**/stories/**', '**/demo/**', '**/*.d.ts', '**/*.stories.*'],
+      }),
+      formats: ['es'],
+      fileName: (format, entryName) => `${entryName}.js`,
+    },
+    outDir: 'lib',
+    emptyOutDir: true,
+  },
+});

package/src/index.js

@@ -1,404 +0,0 @@
-/* eslint-disable indent */
-/* eslint-disable no-nested-ternary */
-/* eslint-disable no-undef */
-import { useEffect, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@arcblock/ux/lib/Theme';
-import axios from 'axios';
-import Script from 'react-load-script';
-import GraphiQL from 'graphiql';
-import QueryComposer from 'graphiql-explorer';
-import CodeExporter from 'graphiql-code-exporter';
-import CodeExporterSnippets from 'graphiql-code-exporter/lib/snippets';
-import { buildClientSchema, getIntrospectionQuery } from 'graphql';
-import { useHistoryContext, usePrettifyEditors } from '@graphiql/react';
-
-import { useNavigate, useLocation } from 'react-router-dom';
-import 'graphiql/graphiql.css';
-
-import 'graphiql-code-exporter/CodeExporter.css';
-import 'codemirror/theme/neo.css';
-
-import { mergeProps, parseQuery, stringifyQuery } from '@arcblock/ux/lib/Util';
-import { graphQLFetcher } from './util';
-
-function HistoryToggleButton() {
-  const { toggle } = useHistoryContext();
-  return <GraphiQL.Button onClick={toggle} label="History" title="Show History" />;
-}
-
-function PrettifyButton() {
-  const prettify = usePrettifyEditors();
-  return <GraphiQL.Button onClick={prettify} label="Prettify" title="Prettify Query (Shift-Ctrl-P)" />;
-}
-
-export default function GraphQLPlayground(props) {
-  const newProps = mergeProps(props, GraphQLPlayground, [
-    'style',
-    'persistentQuery',
-    'enableQueryComposer',
-    'enableCodeExporter',
-    'enableHistory',
-  ]);
-
-  const location = useLocation();
-  const navigate = useNavigate();
-  const graphiql = useRef(null);
-  const subscriptionClient = useRef(null);
-  const [schema, setSchema] = useState(null);
-  const [query, setQuery] = useState(newProps.defaultQuery || '{}');
-  const [queryComposerIsOpen, setComposerOpen] = useState(newProps.enableQueryComposer);
-  const [codeExporterIsOpen, setExporterOpen] = useState(false);
-
-  const persistQuery = (newQuery) => {
-    const { pathname, search } = location;
-    const params = parseQuery(search);
-    params.query = newQuery;
-    const newUrl = `${pathname}?${stringifyQuery(params)}`;
-    navigate(newUrl);
-  };
-
-  useEffect(() => {
-    if (newProps.persistentQuery) {
-      const params = parseQuery(window.location.search);
-      if (params.query) {
-        setQuery(params.query);
-      } else {
-        persistQuery(query);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onEditQuery = (newQuery) => {
-    if (newQuery !== query && newProps.persistentQuery) {
-      persistQuery(newQuery);
-    }
-    setQuery(newQuery);
-  };
-
-  const onToggleExplorer = () => {
-    setComposerOpen(!queryComposerIsOpen);
-  };
-
-  const onToggleCodeExporter = () => setExporterOpen(!codeExporterIsOpen);
-
-  const ensureSubscriptionClient = () => {
-    if (subscriptionClient.current) {
-      subscriptionClient.current.close();
-      subscriptionClient.current = null;
-    }
-
-    const { endpoint } = newProps;
-    let socketUrl = endpoint.replace(/https?:\/\//, 'ws://');
-    if (endpoint.indexOf('https://') === 0) {
-      socketUrl = socketUrl.replace('ws://', 'wss://');
-    }
-
-    subscriptionClient.current = new AbsintheSocketGraphiql.SubscriptionsClient(
-      localStorage.getItem('websocket') || `${socketUrl}/socket`,
-      { reconnect: true, connectionParams: {} }
-    );
-  };
-
-  const httpFetcher = async (params) => {
-    const extraHeaders =
-      typeof newProps.extraHeaders === 'function' ? newProps.extraHeaders() : newProps.extraHeaders || {};
-
-    const res = await axios({
-      method: 'post',
-      url: newProps.endpoint,
-      data: params,
-      headers: Object.assign(
-        {
-          'Content-Type': 'application/json',
-        },
-        extraHeaders
-      ),
-    });
-
-    return res.data;
-  };
-
-  const fetcher = (params) => {
-    if (params.query.indexOf('subscription') >= 0) {
-      ensureSubscriptionClient();
-
-      // disable subscription in test env
-      if (process.env.NODE_ENV !== 'test') {
-        return graphQLFetcher(subscriptionClient.current, httpFetcher)(params);
-      }
-    }
-
-    return httpFetcher(params);
-  };
-
-  useEffect(() => {
-    httpFetcher({
-      query: getIntrospectionQuery(),
-    }).then((result) => {
-      if (!graphiql.current) {
-        return;
-      }
-      setSchema(buildClientSchema(result.data));
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [graphiql.current]);
-
-  const { endpoint, title, enableCodeExporter, enableQueryComposer, enableHistory, extraCodeSnippets, ...rest } =
-    newProps;
-  const snippets = [...extraCodeSnippets, ...CodeExporterSnippets];
-
-  return (
-    <Container {...rest}>
-      <Script url="//cdn.jsdelivr.net/npm/@absinthe/socket-graphiql@0.2.1/compat/umd/index.js" />
-      {enableQueryComposer && (
-        <QueryComposer
-          schema={schema}
-          query={query}
-          onEdit={onEditQuery}
-          onRunOperation={(operationName) => graphiql.current.handleRunQuery(operationName)}
-          explorerIsOpen={queryComposerIsOpen}
-          onToggleExplorer={onToggleExplorer}
-          className="graphiql-explorer"
-        />
-      )}
-      <GraphiQL ref={graphiql} fetcher={fetcher} schema={schema} query={query} onEditQuery={onEditQuery}>
-        <GraphiQL.Logo>{title}</GraphiQL.Logo>
-        <GraphiQL.Toolbar>
-          <PrettifyButton />
-          {enableHistory && <HistoryToggleButton />}
-          {enableQueryComposer && (
-            <GraphiQL.Button onClick={onToggleExplorer} label="Query Composer" title="Toggle Query Composer" />
-          )}
-          {enableCodeExporter && (
-            <GraphiQL.Button onClick={onToggleCodeExporter} label="Code Exporter" title="Toggle Code Exporter" />
-          )}
-        </GraphiQL.Toolbar>
-      </GraphiQL>
-      {enableCodeExporter && codeExporterIsOpen && (
-        <div className="graphiql-container graphiql-exporter-container">
-          <CodeExporter
-            hideCodeExporter={onToggleCodeExporter}
-            snippets={snippets}
-            serverUrl={endpoint}
-            query={query}
-            codeMirrorTheme="neo"
-          />
-        </div>
-      )}
-    </Container>
-  );
-}
-
-GraphQLPlayground.propTypes = {
-  endpoint: PropTypes.string.isRequired,
-  defaultQuery: PropTypes.string,
-  title: PropTypes.string,
-  persistentQuery: PropTypes.bool,
-  enableQueryComposer: PropTypes.bool,
-  enableCodeExporter: PropTypes.bool,
-  enableHistory: PropTypes.bool,
-  extraCodeSnippets: PropTypes.array,
-  extraHeaders: PropTypes.any,
-};
-
-GraphQLPlayground.defaultProps = {
-  title: 'Query',
-  defaultQuery: '{}',
-  persistentQuery: false,
-  enableQueryComposer: true,
-  enableCodeExporter: false,
-  enableHistory: false,
-  extraCodeSnippets: [],
-  extraHeaders: {},
-};
-
-const Container = styled('div')`
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  overflow: hidden;
-  height: 100%;
-  position: relative;
-
-  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
-    margin-top: 30px;
-  }
-
-  > .historyPaneWrap {
-    z-index: 8 !important;
-    width: 320px !important;
-    box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
-    overflow-y: scroll;
-  }
-
-  .doc-explorer-title-bar,
-  .history-title-bar {
-    height: 45px;
-    line-height: 45px;
-    padding: 0px 8px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .doc-explorer-title-bar {
-    padding: 0px 32px;
-  }
-
-  .doc-explorer-title,
-  .history-title {
-    font-size: 14px;
-    font-weight: 900;
-    letter-spacing: 2px;
-    color: ${(props) => props.theme.typography.color.gray};
-    text-transform: uppercase;
-    text-align: left !important;
-  }
-
-  .doc-explorer-contents {
-    min-height: 0;
-  }
-  .history-contents {
-    top: 45px !important;
-    background-color: ${(props) => props.theme.palette.background.default} !important;
-    border-top: 1px solid #e3e3e3 !important;
-  }
-
-  .history-contents {
-    color: ${(props) => props.theme.typography.color.main};
-    p {
-      border-bottom: 1px solid #e3e3e3;
-    }
-  }
-
-  .docExplorerHide {
-    color: ${(props) => props.theme.typography.color.main};
-    padding: 0;
-    cursor: pointer;
-    margin: -7px -8px -6px -12px;
-    opacity: 0.75;
-    font-size: 18px;
-  }
-
-  .toolbar-button {
-    cursor: pointer;
-  }
-
-  .graphiql-container {
-    .title {
-      color: ${(props) => props.theme.typography.color.main};
-    }
-
-    .topBar {
-      background-image: none;
-      height: 45px;
-      border-bottom-width: 0;
-    }
-
-    .docExplorerShow {
-      background: ${(props) => props.theme.palette.background.default};
-      border: none;
-      font-size: 14px;
-      color: ${(props) => props.theme.typography.color.main};
-      text-transform: uppercase;
-
-      &::before {
-        border-color: ${(props) => props.theme.typography.color.gray};
-      }
-    }
-
-    .historyPaneWrap {
-      width: 320px !important;
-      background-color: ${(props) => props.theme.palette.background.default};
-      box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
-    }
-
-    .search-box {
-      margin-bottom: 20px;
-      border-bottom: none;
-
-      input {
-        height: 30px;
-        border-radius: 15px;
-        border: solid 1px ${(props) => props.theme.typography.color.main};
-        padding: 6px 24px 8px 30px;
-      }
-
-      .search-box-clear {
-        right: 10px;
-      }
-
-      &::before {
-        left: 10px;
-      }
-    }
-
-    .variable-editor-title {
-      background: ${(props) => props.theme.palette.background.default};
-      border: none;
-      height: 40px;
-      padding-left: 20px;
-
-      &::before {
-        border-left: 2px solid ${(props) => props.theme.typography.color.gray};
-        border-top: 2px solid ${(props) => props.theme.typography.color.gray};
-        content: '';
-        display: inline-block;
-        height: 9px;
-        margin: 0 5px 1px 0;
-        position: relative;
-        -webkit-transform: rotate(-135deg);
-        transform: rotate(-135deg);
-        width: 9px;
-      }
-    }
-
-    .resultWrap {
-      border-left: none;
-      .CodeMirror-gutters {
-        opacity: 0.5;
-      }
-      .CodeMirror-gutter.CodeMirror-foldgutter {
-        box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
-      }
-    }
-
-    .CodeMirror,
-    .CodeMirror-gutters,
-    .CodeMirror-linenumber,
-    .CodeMirror-foldgutter {
-      background: ${(props) => props.theme.palette.background.default};
-    }
-
-    .variable-editor {
-      .CodeMirror {
-        background: white;
-      }
-    }
-
-    .CodeMirror-gutters {
-      border-right-width: 0;
-    }
-  }
-
-  .graphiql-exporter-container {
-    width: auto;
-    .historyPaneWrap {
-      position: absolute !important;
-      height: 100%;
-      top: 0;
-      right: 0;
-      background-color: ${(props) => props.theme.palette.background.default};
-      box-shadow: -5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
-      z-index: 3;
-
-      .history-contents {
-        padding-top: 12px;
-        .toolbar-button {
-          margin-top: -24px !important;
-        }
-      }
-    }
-  }
-`;