@arcblock/graphql-playground 2.1.58 → 2.1.61

package/lib/GraphqlPlayground.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Basic", {
+  enumerable: true,
+  get: function get() {
+    return _basic.default;
+  }
+});
+Object.defineProperty(exports, "KitchenSink", {
+  enumerable: true,
+  get: function get() {
+    return _kitchenSink.default;
+  }
+});
+Object.defineProperty(exports, "WithCodeExporter", {
+  enumerable: true,
+  get: function get() {
+    return _withCodeExporter.default;
+  }
+});
+Object.defineProperty(exports, "WithHistory", {
+  enumerable: true,
+  get: function get() {
+    return _withHistory.default;
+  }
+});
+Object.defineProperty(exports, "WithQueryComposer", {
+  enumerable: true,
+  get: function get() {
+    return _withQueryComposer.default;
+  }
+});
+exports.default = void 0;
+
+var _basic = _interopRequireDefault(require("./demo/basic"));
+
+var _withHistory = _interopRequireDefault(require("./demo/with-history"));
+
+var _withQueryComposer = _interopRequireDefault(require("./demo/with-query-composer"));
+
+var _withCodeExporter = _interopRequireDefault(require("./demo/with-code-exporter"));
+
+var _kitchenSink = _interopRequireDefault(require("./demo/kitchen-sink"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'UX/GraphQLPlayground',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A GraphQL Playground component built on top of `graphql/graphiql`'
+      }
+    }
+  }
+};
+exports.default = _default;

package/lib/demo/basic.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Basic;
+
+var _ = _interopRequireDefault(require(".."));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const betaQuery = "{\n  getChainInfo {\n    code\n    info {\n      network\n      moniker\n    }\n  }\n}";
+
+function Basic() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      minWidth: '1280px',
+      height: '40vh',
+      border: '1px solid #EEE'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      defaultQuery: betaQuery,
+      endpoint: "https://beta.abtnetwork.io/api/",
+      title: "Beta Chain",
+      enableQueryComposer: false,
+      enableCodeExporter: false,
+      enableHistory: false
+    })
+  });
+}

package/lib/demo/kitchen-sink.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = KitchenSink;
+
+var _ = _interopRequireDefault(require(".."));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const betaQuery = "{\n  getChainInfo {\n    code\n    info {\n      network\n      moniker\n    }\n  }\n}";
+
+function KitchenSink() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      minWidth: '1280px',
+      height: '40vh',
+      border: '1px solid #EEE',
+      marginTop: '16px'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      defaultQuery: betaQuery,
+      endpoint: "https://beta.abtnetwork.io/api/",
+      title: "Beta Chain",
+      enableHistory: true,
+      enableQueryComposer: true,
+      enableCodeExporter: true
+    })
+  });
+}

package/lib/demo/with-code-exporter.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = WithCodeExporter;
+
+var _ = _interopRequireDefault(require(".."));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const betaQuery = "{\n  getChainInfo {\n    code\n    info {\n      network\n      moniker\n    }\n  }\n}";
+
+function WithCodeExporter() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      minWidth: '1280px',
+      height: '40vh',
+      border: '1px solid #EEE',
+      marginTop: '16px'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      defaultQuery: betaQuery,
+      endpoint: "https://beta.abtnetwork.io/api/",
+      title: "Beta Chain",
+      enableQueryComposer: false,
+      enableCodeExporter: true
+    })
+  });
+}

package/lib/demo/with-history.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = WithHistory;
+
+var _ = _interopRequireDefault(require(".."));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const betaQuery = "{\n  getChainInfo {\n    code\n    info {\n      network\n      moniker\n    }\n  }\n}";
+
+function WithHistory() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: '1280px',
+      height: '40vh',
+      border: '1px solid #EEE'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      defaultQuery: betaQuery,
+      endpoint: "https://beta.abtnetwork.io/api/",
+      title: "Beta Chain",
+      enableQueryComposer: false,
+      enableHistory: true
+    })
+  });
+}

package/lib/demo/with-query-composer.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = WithQueryComposer;
+
+var _ = _interopRequireDefault(require(".."));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const betaQuery = "{\n  getChainInfo {\n    code\n    info {\n      network\n      moniker\n    }\n  }\n}";
+
+function WithQueryComposer() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      minWidth: '1280px',
+      height: '40vh',
+      border: '1px solid #EEE'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      defaultQuery: betaQuery,
+      endpoint: "https://beta.abtnetwork.io/api/",
+      title: "Beta Chain",
+      enableQueryComposer: true
+    })
+  });
+}

package/lib/index.js

@@ -45,16 +45,16 @@ const _excluded = ["endpoint", "title", "enableCodeExporter", "enableQueryCompos
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function HistoryToggleButton() {
   const {
     toggle
@@ -109,59 +109,6 @@ function GraphQLPlayground(props) {
 
   }, []);
 
-  const onInspect = (cm, mousePos) => {
-    const parsedQuery = (0, _graphql.parse)(query || '');
-
-    if (!parsedQuery) {
-      // eslint-disable-next-line quotes
-      console.error("Couldn't parse query document");
-      return;
-    }
-
-    const token = cm.getTokenAt(mousePos);
-    const start = {
-      line: mousePos.line,
-      ch: token.start
-    };
-    const end = {
-      line: mousePos.line,
-      ch: token.end
-    };
-    const relevantMousePos = {
-      start: cm.indexFromPos(start),
-      end: cm.indexFromPos(end)
-    };
-    const position = relevantMousePos;
-    const def = parsedQuery.definitions.find(definition => {
-      if (!definition.loc) {
-        // eslint-disable-next-line no-console
-        console.log('Missing location information for definition');
-        return false;
-      } // eslint-disable-next-line no-shadow
-
-
-      const {
-        start,
-        end
-      } = definition.loc;
-      return start <= position.start && end >= position.end;
-    });
-
-    if (!def) {
-      console.error('Unable to find definition corresponding to mouse position');
-      return;
-    }
-
-    const operationKind = def.kind === 'OperationDefinition' ? def.operation : def.kind === 'FragmentDefinition' ? 'fragment' : 'unknown';
-    const operationName = def.kind === 'OperationDefinition' && !!def.name ? def.name.value : def.kind === 'FragmentDefinition' && !!def.name ? def.name.value : 'unknown';
-    const selector = ".graphiql-explorer-root #".concat(operationKind, "-").concat(operationName);
-    const element = document.querySelector(selector);
-
-    if (element) {
-      element.scrollIntoView();
-    }
-  };
-
   const onEditQuery = newQuery => {
     if (newQuery !== query && newProps.persistentQuery) {
       persistQuery(newQuery);
@@ -230,10 +177,6 @@ function GraphQLPlayground(props) {
         return;
       }
 
-      const editor = graphiql.current.getQueryEditor();
-      editor.setOption('extraKeys', _objectSpread(_objectSpread({}, editor.options.extraKeys || {}), {}, {
-        'Shift-Alt-LeftClick': onInspect
-      }));
       setSchema((0, _graphql.buildClientSchema)(result.data));
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphiql.current]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/graphql-playground",
-  "version": "2.1.58",
+  "version": "2.1.61",
   "description": "A React Component to interact with GraphQL APIs",
   "keywords": [
     "react",
@@ -20,7 +20,7 @@
     "url": "git+https://github.com/ArcBlock/ux.git"
   },
   "scripts": {
-    "lint": "eslint src stories tests",
+    "lint": "eslint src tests",
     "build": "babel src --out-dir lib --copy-files",
     "watch": "babel src --out-dir lib -w --copy-files",
     "precommit": "CI=1 yarn test",
@@ -33,7 +33,7 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.58",
+    "@arcblock/ux": "^2.1.61",
     "axios": "^0.21.2",
     "core-js": "^3.6.4",
     "graphiql": "^1.9.11",
@@ -59,5 +59,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0"
   },
-  "gitHead": "30964d1c8f22b57ed04288d329d488593568ac34"
+  "gitHead": "4859674457581033b59d02723c976fffd3a9c3b3"
 }

package/src/GraphqlPlayground.stories.js

@@ -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: 'UX/GraphQLPlayground',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A GraphQL Playground component built on top of `graphql/graphiql`',
+      },
+    },
+  },
+};

package/src/demo/basic.js

@@ -0,0 +1,26 @@
+import GraphQLPlayground from '..';
+
+const betaQuery = `{
+  getChainInfo {
+    code
+    info {
+      network
+      moniker
+    }
+  }
+}`;
+
+export default function Basic() {
+  return (
+    <div style={{ minWidth: '1280px', height: '40vh', border: '1px solid #EEE' }}>
+      <GraphQLPlayground
+        defaultQuery={betaQuery}
+        endpoint="https://beta.abtnetwork.io/api/"
+        title="Beta Chain"
+        enableQueryComposer={false}
+        enableCodeExporter={false}
+        enableHistory={false}
+      />
+    </div>
+  );
+}

package/src/demo/kitchen-sink.js

@@ -0,0 +1,26 @@
+import GraphQLPlayground from '..';
+
+const betaQuery = `{
+  getChainInfo {
+    code
+    info {
+      network
+      moniker
+    }
+  }
+}`;
+
+export default function KitchenSink() {
+  return (
+    <div style={{ minWidth: '1280px', height: '40vh', border: '1px solid #EEE', marginTop: '16px' }}>
+      <GraphQLPlayground
+        defaultQuery={betaQuery}
+        endpoint="https://beta.abtnetwork.io/api/"
+        title="Beta Chain"
+        enableHistory
+        enableQueryComposer
+        enableCodeExporter
+      />
+    </div>
+  );
+}

package/src/demo/with-code-exporter.js

@@ -0,0 +1,25 @@
+import GraphQLPlayground from '..';
+
+const betaQuery = `{
+  getChainInfo {
+    code
+    info {
+      network
+      moniker
+    }
+  }
+}`;
+
+export default function WithCodeExporter() {
+  return (
+    <div style={{ minWidth: '1280px', height: '40vh', border: '1px solid #EEE', marginTop: '16px' }}>
+      <GraphQLPlayground
+        defaultQuery={betaQuery}
+        endpoint="https://beta.abtnetwork.io/api/"
+        title="Beta Chain"
+        enableQueryComposer={false}
+        enableCodeExporter
+      />
+    </div>
+  );
+}

package/src/demo/with-history.js

@@ -0,0 +1,25 @@
+import GraphQLPlayground from '..';
+
+const betaQuery = `{
+  getChainInfo {
+    code
+    info {
+      network
+      moniker
+    }
+  }
+}`;
+
+export default function WithHistory() {
+  return (
+    <div style={{ width: '1280px', height: '40vh', border: '1px solid #EEE' }}>
+      <GraphQLPlayground
+        defaultQuery={betaQuery}
+        endpoint="https://beta.abtnetwork.io/api/"
+        title="Beta Chain"
+        enableQueryComposer={false}
+        enableHistory
+      />
+    </div>
+  );
+}

package/src/demo/with-query-composer.js

@@ -0,0 +1,24 @@
+import GraphQLPlayground from '..';
+
+const betaQuery = `{
+  getChainInfo {
+    code
+    info {
+      network
+      moniker
+    }
+  }
+}`;
+
+export default function WithQueryComposer() {
+  return (
+    <div style={{ minWidth: '1280px', height: '40vh', border: '1px solid #EEE' }}>
+      <GraphQLPlayground
+        defaultQuery={betaQuery}
+        endpoint="https://beta.abtnetwork.io/api/"
+        title="Beta Chain"
+        enableQueryComposer
+      />
+    </div>
+  );
+}

package/src/index.js

@@ -10,7 +10,7 @@ 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, parse } from 'graphql';
+import { buildClientSchema, getIntrospectionQuery } from 'graphql';
 import { useHistoryContext, usePrettifyEditors } from '@graphiql/react';
 
 import { useHistory } from 'react-router-dom';
@@ -69,60 +69,6 @@ export default function GraphQLPlayground(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const onInspect = (cm, mousePos) => {
-    const parsedQuery = parse(query || '');
-
-    if (!parsedQuery) {
-      // eslint-disable-next-line quotes
-      console.error("Couldn't parse query document");
-      return;
-    }
-
-    const token = cm.getTokenAt(mousePos);
-    const start = { line: mousePos.line, ch: token.start };
-    const end = { line: mousePos.line, ch: token.end };
-    const relevantMousePos = {
-      start: cm.indexFromPos(start),
-      end: cm.indexFromPos(end),
-    };
-
-    const position = relevantMousePos;
-
-    const def = parsedQuery.definitions.find((definition) => {
-      if (!definition.loc) {
-        // eslint-disable-next-line no-console
-        console.log('Missing location information for definition');
-        return false;
-      }
-
-      // eslint-disable-next-line no-shadow
-      const { start, end } = definition.loc;
-      return start <= position.start && end >= position.end;
-    });
-
-    if (!def) {
-      console.error('Unable to find definition corresponding to mouse position');
-      return;
-    }
-
-    const operationKind =
-      def.kind === 'OperationDefinition' ? def.operation : def.kind === 'FragmentDefinition' ? 'fragment' : 'unknown';
-
-    const operationName =
-      def.kind === 'OperationDefinition' && !!def.name
-        ? def.name.value
-        : def.kind === 'FragmentDefinition' && !!def.name
-        ? def.name.value
-        : 'unknown';
-
-    const selector = `.graphiql-explorer-root #${operationKind}-${operationName}`;
-
-    const element = document.querySelector(selector);
-    if (element) {
-      element.scrollIntoView();
-    }
-  };
-
   const onEditQuery = (newQuery) => {
     if (newQuery !== query && newProps.persistentQuery) {
       persistQuery(newQuery);
@@ -193,13 +139,6 @@ export default function GraphQLPlayground(props) {
       if (!graphiql.current) {
         return;
       }
-
-      const editor = graphiql.current.getQueryEditor();
-      editor.setOption('extraKeys', {
-        ...(editor.options.extraKeys || {}),
-        'Shift-Alt-LeftClick': onInspect,
-      });
-
       setSchema(buildClientSchema(result.data));
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps