@arcblock/graphql-playground 3.0.42 → 3.1.0

package/lib/index.js

@@ -1,14 +1,14 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
+import { mergeProps as b } from "@arcblock/ux/lib/Util";
 import r from "prop-types";
-import { styled as x } from "@arcblock/ux/lib/Theme";
-import { GraphiQL as h } from "graphiql";
-import { explorerPlugin as g } from "@graphiql/plugin-explorer";
-import { createGraphiQLFetcher as m } from "@graphiql/toolkit";
+import { styled as c, useTheme as g } from "@arcblock/ux/lib/Theme";
+import { GraphiQL as m } from "graphiql";
+import { explorerPlugin as h } from "@graphiql/plugin-explorer";
+import { createGraphiQLFetcher as u } from "@graphiql/toolkit";
 import "graphiql/style.css";
 import "@graphiql/plugin-explorer/style.css";
-import { mergeProps as b } from "@arcblock/ux/lib/Util";
-function p({ ...e }) {
-  const a = Object.assign(
+function i({ ...e }) {
+  const p = g(), a = Object.assign(
     {
       title: "Query",
       defaultQuery: "{}",
@@ -20,29 +20,29 @@ function p({ ...e }) {
       extraHeaders: {}
     },
     e
-  ), o = b(a, p, [
+  ), t = b(a, i, [
     "style",
     "persistentQuery",
     "enableQueryComposer",
     "enableCodeExporter",
     "enableHistory"
-  ]), i = typeof o.extraHeaders == "function" ? o.extraHeaders() : o.extraHeaders || {}, n = m({
-    url: o.endpoint,
-    headers: i
-  }), l = [g()], {
-    endpoint: y,
-    title: f,
-    enableCodeExporter: C,
-    enableQueryComposer: w,
-    enableHistory: $,
-    extraCodeSnippets: k,
-    defaultQuery: d,
-    persistentQuery: Q,
-    ...s
-  } = o;
-  return /* @__PURE__ */ t(c, { ...s, children: /* @__PURE__ */ t(h, { fetcher: n, plugins: l, defaultQuery: d }) });
+  ]), n = typeof t.extraHeaders == "function" ? t.extraHeaders() : t.extraHeaders || {}, d = u({
+    url: t.endpoint,
+    headers: n
+  }), l = [h()], {
+    endpoint: $,
+    title: C,
+    enableCodeExporter: w,
+    enableQueryComposer: k,
+    enableHistory: Q,
+    extraCodeSnippets: v,
+    defaultQuery: s,
+    persistentQuery: H,
+    ...x
+  } = t;
+  return /* @__PURE__ */ o(f, { ...x, children: /* @__PURE__ */ o(m, { fetcher: d, plugins: l, defaultQuery: s, forcedTheme: p.palette.mode }) });
 }
-p.propTypes = {
+i.propTypes = {
   endpoint: r.string.isRequired,
   defaultQuery: r.string,
   title: r.string,
@@ -53,7 +53,7 @@ p.propTypes = {
   extraCodeSnippets: r.array,
   extraHeaders: r.any
 };
-const c = x("div")`
+const f = c("div")`
   display: flex;
   flex-direction: row;
   flex: 1;
@@ -90,7 +90,7 @@ const c = x("div")`
     font-size: 14px;
     font-weight: 900;
     letter-spacing: 2px;
-    color: ${(e) => e.theme.typography.color.gray};
+    color: ${({ theme: e }) => e.palette.text.secondary};
     text-transform: uppercase;
     text-align: left !important;
   }
@@ -100,19 +100,20 @@ const c = x("div")`
   }
   .history-contents {
     top: 45px !important;
-    background-color: ${(e) => e.theme.palette.background.default} !important;
-    border-top: 1px solid #e3e3e3 !important;
+    background-color: ${({ theme: e }) => e.palette.background.default} !important;
+    border-top: 1px solid !important;
+    border-color: ${({ theme: e }) => e.palette.divider} !important;
   }
 
   .history-contents {
-    color: ${(e) => e.theme.typography.color.main};
+    color: ${({ theme: e }) => e.palette.text.primary};
     p {
-      border-bottom: 1px solid #e3e3e3;
+      border-bottom: 1px solid ${({ theme: e }) => e.palette.divider};
     }
   }
 
   .docExplorerHide {
-    color: ${(e) => e.theme.typography.color.main};
+    color: ${({ theme: e }) => e.palette.text.primary};
     padding: 0;
     cursor: pointer;
     margin: -7px -8px -6px -12px;
@@ -126,7 +127,7 @@ const c = x("div")`
 
   .graphiql-container {
     .title {
-      color: ${(e) => e.theme.typography.color.main};
+      color: ${({ theme: e }) => e.palette.text.primary};
     }
 
     .topBar {
@@ -136,20 +137,20 @@ const c = x("div")`
     }
 
     .docExplorerShow {
-      background: ${(e) => e.theme.palette.background.default};
+      background: ${({ theme: e }) => e.palette.background.default};
       border: none;
       font-size: 14px;
-      color: ${(e) => e.theme.typography.color.main};
+      color: ${({ theme: e }) => e.palette.text.primary};
       text-transform: uppercase;
 
       &::before {
-        border-color: ${(e) => e.theme.typography.color.gray};
+        border-color: ${({ theme: e }) => e.palette.divider};
       }
     }
 
     .historyPaneWrap {
       width: 320px !important;
-      background-color: ${(e) => e.theme.palette.background.default};
+      background-color: ${({ theme: e }) => e.palette.background.default};
       box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(e) => e.theme.mode === "light" ? 0.05 : 0.5});
     }
 
@@ -160,7 +161,7 @@ const c = x("div")`
       input {
         height: 30px;
         border-radius: 15px;
-        border: solid 1px ${(e) => e.theme.typography.color.main};
+        border: solid 1px ${({ theme: e }) => e.palette.divider};
         padding: 6px 24px 8px 30px;
       }
 
@@ -174,14 +175,14 @@ const c = x("div")`
     }
 
     .variable-editor-title {
-      background: ${(e) => e.theme.palette.background.default};
+      background: ${({ theme: e }) => e.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};
+        border-left: 2px solid ${({ theme: e }) => e.palette.divider};
+        border-top: 2px solid ${({ theme: e }) => e.palette.divider};
         content: '';
         display: inline-block;
         height: 9px;
@@ -207,7 +208,7 @@ const c = x("div")`
     .CodeMirror-gutters,
     .CodeMirror-linenumber,
     .CodeMirror-foldgutter {
-      background: ${(e) => e.theme.palette.background.default};
+      background: ${({ theme: e }) => e.palette.background.default};
     }
 
     .variable-editor {
@@ -228,8 +229,8 @@ const c = x("div")`
       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});
+      background-color: ${({ theme: e }) => e.palette.background.default};
+      box-shadow: -5px 16px 10px 0 rgba(0, 0, 0, ${({ theme: e }) => e.mode === "light" ? 0.05 : 0.5});
       z-index: 3;
 
       .history-contents {
@@ -242,5 +243,5 @@ const c = x("div")`
   }
 `;
 export {
-  p as default
+  i as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/graphql-playground",
-  "version": "3.0.42",
+  "version": "3.1.0",
   "description": "A React Component to interact with GraphQL APIs",
   "keywords": [
     "react",
@@ -50,5 +50,5 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0"
   },
-  "gitHead": "d17657ac3774ee73a5bfe0eaac30cc9a8fbfe7cf"
+  "gitHead": "3d6b460689cc9015fc66567efc1b868874ceb18b"
 }

package/src/GraphqlPlayground.stories.jsx

@@ -1,3 +1,5 @@
+import ThemeWrapper from './demo/theme-wrapper';
+
 export { default as Basic } from './demo/basic';
 export { default as WithHistory } from './demo/with-history';
 export { default as WithQueryComposer } from './demo/with-query-composer';
@@ -13,4 +15,11 @@ export default {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <ThemeWrapper>
+        <Story />
+      </ThemeWrapper>
+    ),
+  ],
 };

package/src/index.jsx

@@ -1,5 +1,6 @@
+import { mergeProps } from '@arcblock/ux/lib/Util';
 import PropTypes from 'prop-types';
-import { styled } from '@arcblock/ux/lib/Theme';
+import { styled, useTheme } from '@arcblock/ux/lib/Theme';
 import { GraphiQL } from 'graphiql';
 // eslint-disable-next-line import/no-unresolved
 import { explorerPlugin } from '@graphiql/plugin-explorer';
@@ -10,9 +11,8 @@ 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 theme = useTheme();
   const props = Object.assign(
     {
       title: 'Query',
@@ -59,7 +59,7 @@ export default function GraphQLPlayground({ ...rawProps }) {
 
   return (
     <Container {...rest}>
-      <GraphiQL fetcher={fetcher} plugins={plugins} defaultQuery={defaultQuery} />
+      <GraphiQL fetcher={fetcher} plugins={plugins} defaultQuery={defaultQuery} forcedTheme={theme.palette.mode} />
     </Container>
   );
 }
@@ -113,7 +113,7 @@ const Container = styled('div')`
     font-size: 14px;
     font-weight: 900;
     letter-spacing: 2px;
-    color: ${(props) => props.theme.typography.color.gray};
+    color: ${({ theme }) => theme.palette.text.secondary};
     text-transform: uppercase;
     text-align: left !important;
   }
@@ -123,19 +123,20 @@ const Container = styled('div')`
   }
   .history-contents {
     top: 45px !important;
-    background-color: ${(props) => props.theme.palette.background.default} !important;
-    border-top: 1px solid #e3e3e3 !important;
+    background-color: ${({ theme }) => theme.palette.background.default} !important;
+    border-top: 1px solid !important;
+    border-color: ${({ theme }) => theme.palette.divider} !important;
   }
 
   .history-contents {
-    color: ${(props) => props.theme.typography.color.main};
+    color: ${({ theme }) => theme.palette.text.primary};
     p {
-      border-bottom: 1px solid #e3e3e3;
+      border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
     }
   }
 
   .docExplorerHide {
-    color: ${(props) => props.theme.typography.color.main};
+    color: ${({ theme }) => theme.palette.text.primary};
     padding: 0;
     cursor: pointer;
     margin: -7px -8px -6px -12px;
@@ -149,7 +150,7 @@ const Container = styled('div')`
 
   .graphiql-container {
     .title {
-      color: ${(props) => props.theme.typography.color.main};
+      color: ${({ theme }) => theme.palette.text.primary};
     }
 
     .topBar {
@@ -159,20 +160,20 @@ const Container = styled('div')`
     }
 
     .docExplorerShow {
-      background: ${(props) => props.theme.palette.background.default};
+      background: ${({ theme }) => theme.palette.background.default};
       border: none;
       font-size: 14px;
-      color: ${(props) => props.theme.typography.color.main};
+      color: ${({ theme }) => theme.palette.text.primary};
       text-transform: uppercase;
 
       &::before {
-        border-color: ${(props) => props.theme.typography.color.gray};
+        border-color: ${({ theme }) => theme.palette.divider};
       }
     }
 
     .historyPaneWrap {
       width: 320px !important;
-      background-color: ${(props) => props.theme.palette.background.default};
+      background-color: ${({ theme }) => theme.palette.background.default};
       box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
     }
 
@@ -183,7 +184,7 @@ const Container = styled('div')`
       input {
         height: 30px;
         border-radius: 15px;
-        border: solid 1px ${(props) => props.theme.typography.color.main};
+        border: solid 1px ${({ theme }) => theme.palette.divider};
         padding: 6px 24px 8px 30px;
       }
 
@@ -197,14 +198,14 @@ const Container = styled('div')`
     }
 
     .variable-editor-title {
-      background: ${(props) => props.theme.palette.background.default};
+      background: ${({ theme }) => 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};
+        border-left: 2px solid ${({ theme }) => theme.palette.divider};
+        border-top: 2px solid ${({ theme }) => theme.palette.divider};
         content: '';
         display: inline-block;
         height: 9px;
@@ -230,7 +231,7 @@ const Container = styled('div')`
     .CodeMirror-gutters,
     .CodeMirror-linenumber,
     .CodeMirror-foldgutter {
-      background: ${(props) => props.theme.palette.background.default};
+      background: ${({ theme }) => theme.palette.background.default};
     }
 
     .variable-editor {
@@ -251,8 +252,8 @@ const Container = styled('div')`
       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)});
+      background-color: ${({ theme }) => theme.palette.background.default};
+      box-shadow: -5px 16px 10px 0 rgba(0, 0, 0, ${({ theme }) => (theme.mode === 'light' ? 0.05 : 0.5)});
       z-index: 3;
 
       .history-contents {