@arcblock/graphql-playground 3.4.15 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/graphql-playground",
-  "version": "3.4.15",
+  "version": "3.5.0",
   "description": "A React Component to interact with GraphQL APIs",
   "keywords": [
     "react",
@@ -43,6 +43,9 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
+  "files": [
+    "lib"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -50,5 +53,5 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0"
   },
-  "gitHead": "73039d82d507d9ec5408d8cfc67d9efeffae3e74"
+  "gitHead": "1cfc816004525cf1b352ec2b64d459f4769f0237"
 }

package/src/GraphqlPlayground.stories.jsx

@@ -1,25 +0,0 @@
-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';
-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`',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <ThemeWrapper>
-        <Story />
-      </ThemeWrapper>
-    ),
-  ],
-};

package/src/index.jsx

@@ -1,267 +0,0 @@
-import { mergeProps } from '@arcblock/ux/lib/Util';
-import PropTypes from 'prop-types';
-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';
-import { createGraphiQLFetcher } from '@graphiql/toolkit';
-
-// eslint-disable-next-line import/no-unresolved
-import 'graphiql/style.css';
-// eslint-disable-next-line import/no-unresolved
-import '@graphiql/plugin-explorer/style.css';
-
-export default function GraphQLPlayground({ ...rawProps }) {
-  const theme = useTheme();
-  const props = Object.assign(
-    {
-      title: 'Query',
-      defaultQuery: '{}',
-      persistentQuery: false,
-      enableQueryComposer: true,
-      enableCodeExporter: false,
-      enableHistory: false,
-      extraCodeSnippets: [],
-      extraHeaders: {},
-    },
-    rawProps
-  );
-
-  const newProps = mergeProps(props, GraphQLPlayground, [
-    'style',
-    'persistentQuery',
-    'enableQueryComposer',
-    'enableCodeExporter',
-    'enableHistory',
-  ]);
-  const extraHeaders =
-    typeof newProps.extraHeaders === 'function' ? newProps.extraHeaders() : newProps.extraHeaders || {};
-
-  const fetcher = createGraphiQLFetcher({
-    url: newProps.endpoint,
-    headers: extraHeaders,
-  });
-  const explorer = explorerPlugin();
-  // FIXME: @zhanghan HISTORY_PLUGIN 会导致 webapp 报错，之后再修复
-  // import { HISTORY_PLUGIN } from 'graphiql';
-  const plugins = [explorer];
-  const {
-    endpoint,
-    title,
-    enableCodeExporter,
-    enableQueryComposer,
-    enableHistory,
-    extraCodeSnippets,
-    defaultQuery,
-    persistentQuery,
-    ...rest
-  } = newProps;
-
-  return (
-    <Container {...rest}>
-      <GraphiQL fetcher={fetcher} plugins={plugins} defaultQuery={defaultQuery} forcedTheme={theme.palette.mode} />
-    </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: ${({ theme }) => theme.palette.text.secondary};
-    text-transform: uppercase;
-    text-align: left !important;
-  }
-
-  .doc-explorer-contents {
-    min-height: 0;
-  }
-  .history-contents {
-    top: 45px !important;
-    background-color: ${({ theme }) => theme.palette.background.default} !important;
-    border-top: 1px solid !important;
-    border-color: ${({ theme }) => theme.palette.divider} !important;
-  }
-
-  .history-contents {
-    color: ${({ theme }) => theme.palette.text.primary};
-    p {
-      border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
-    }
-  }
-
-  .docExplorerHide {
-    color: ${({ theme }) => theme.palette.text.primary};
-    padding: 0;
-    cursor: pointer;
-    margin: -7px -8px -6px -12px;
-    opacity: 0.75;
-    font-size: 18px;
-  }
-
-  .toolbar-button {
-    cursor: pointer;
-  }
-
-  .graphiql-container {
-    .title {
-      color: ${({ theme }) => theme.palette.text.primary};
-    }
-
-    .topBar {
-      background-image: none;
-      height: 45px;
-      border-bottom-width: 0;
-    }
-
-    .docExplorerShow {
-      background: ${({ theme }) => theme.palette.background.default};
-      border: none;
-      font-size: 14px;
-      color: ${({ theme }) => theme.palette.text.primary};
-      text-transform: uppercase;
-
-      &::before {
-        border-color: ${({ theme }) => theme.palette.divider};
-      }
-    }
-
-    .historyPaneWrap {
-      width: 320px !important;
-      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)});
-    }
-
-    .search-box {
-      margin-bottom: 20px;
-      border-bottom: none;
-
-      input {
-        height: 30px;
-        border-radius: 15px;
-        border: solid 1px ${({ theme }) => theme.palette.divider};
-        padding: 6px 24px 8px 30px;
-      }
-
-      .search-box-clear {
-        right: 10px;
-      }
-
-      &::before {
-        left: 10px;
-      }
-    }
-
-    .variable-editor-title {
-      background: ${({ theme }) => theme.palette.background.default};
-      border: none;
-      height: 40px;
-      padding-left: 20px;
-
-      &::before {
-        border-left: 2px solid ${({ theme }) => theme.palette.divider};
-        border-top: 2px solid ${({ theme }) => theme.palette.divider};
-        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: ${({ theme }) => 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: ${({ 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 {
-        padding-top: 12px;
-        .toolbar-button {
-          margin-top: -24px !important;
-        }
-      }
-    }
-  }
-`;

package/src/util.js

@@ -1,49 +0,0 @@
-import { parse } from 'graphql';
-
-const hasSubscriptionOperation = (graphQlParams) => {
-  const queryDoc = 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
-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);
-              }
-            }
-          );
-        },
-      };
-    }
-    return fallbackFetcher(params);
-  };
-};

package/vite.config.mjs

@@ -1,29 +0,0 @@
-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,
-  },
-});