@arcblock/graphql-playground 2.3.0 → 2.4.2

package/lib/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _axios = _interopRequireDefault(require("axios"));
 
@@ -41,10 +41,14 @@ var _util = require("./util");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["endpoint", "title", "enableCodeExporter", "enableQueryComposer", "enableHistory", "extraCodeSnippets"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 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; }
@@ -258,7 +262,4 @@ GraphQLPlayground.defaultProps = {
   extraHeaders: {}
 };
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "src__Container",
-  componentId: "sc-rvsulm-0"
-})(["display:flex;flex-direction:row;flex:1;overflow:hidden;height:100%;position:relative;@media (max-width:", "px){margin-top:30px;}> .historyPaneWrap{z-index:8 !important;width:320px !important;box-shadow:5px 16px 10px 0 rgba(0,0,0,", ");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:", ";text-transform:uppercase;text-align:left !important;}.doc-explorer-contents{min-height:0;}.history-contents{top:45px !important;background-color:", " !important;border-top:1px solid #e3e3e3 !important;}.history-contents{color:", ";p{border-bottom:1px solid #e3e3e3;}}.docExplorerHide{color:", ";padding:0;cursor:pointer;margin:-7px -8px -6px -12px;opacity:0.75;font-size:18px;}.toolbar-button{cursor:pointer;}.graphiql-container{.title{color:", ";}.topBar{background-image:none;height:45px;border-bottom-width:0;}.docExplorerShow{background:", ";border:none;font-size:14px;color:", ";text-transform:uppercase;&::before{border-color:", ";}}.historyPaneWrap{width:320px !important;background-color:", ";box-shadow:5px 16px 10px 0 rgba(0,0,0,", ");}.search-box{margin-bottom:20px;border-bottom:none;input{height:30px;border-radius:15px;border:solid 1px ", ";padding:6px 24px 8px 30px;}.search-box-clear{right:10px;}&::before{left:10px;}}.variable-editor-title{background:", ";border:none;height:40px;padding-left:20px;&::before{border-left:2px solid ", ";border-top:2px solid ", ";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,", ");}}.CodeMirror,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-foldgutter{background:", ";}.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:", ";box-shadow:-5px 16px 10px 0 rgba(0,0,0,", ");z-index:3;.history-contents{padding-top:12px;.toolbar-button{margin-top:-24px !important;}}}}"], 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);
+const Container = _styled.default.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/graphql-playground",
-  "version": "2.3.0",
+  "version": "2.4.2",
   "description": "A React Component to interact with GraphQL APIs",
   "keywords": [
     "react",
@@ -29,7 +29,9 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.3.0",
+    "@arcblock/ux": "^2.4.2",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
     "axios": "^0.21.4",
     "core-js": "^3.24.1",
     "graphiql": "^1.11.3",
@@ -37,8 +39,7 @@
     "graphiql-explorer": "^0.9.0",
     "graphql": "^16.5.0",
     "react-load-script": "^0.0.6",
-    "react-router-dom": "^6.3.0",
-    "styled-components": "^5.3.5"
+    "react-router-dom": "^6.3.0"
   },
   "peerDependencies": {
     "react": ">=18.1.0"
@@ -51,9 +52,8 @@
     "@babel/core": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
-    "babel-plugin-styled-components": "^1.13.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^24.9.0"
   },
-  "gitHead": "1d17ca422c95117bbf74c199b21692e478aa5003"
+  "gitHead": "6a7e96c930c4ef0dd995bc9383738bb1cdf12844"
 }

package/src/index.js

@@ -3,7 +3,7 @@
 /* eslint-disable no-undef */
 import { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import axios from 'axios';
 import Script from 'react-load-script';
 import GraphiQL from 'graphiql';