adjust @graphiql/plugin-explorer styles (#3633)

.changeset/cuddly-plants-report.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-explorer': minor
+---
+
+adjust `@graphiql/plugin-explorer` styles

packages/graphiql-plugin-explorer/README.md

@@ -9,34 +9,35 @@ GraphiQL UI.
 Use your favorite package manager to install the package:
 
 ```sh
-npm i -S @graphiql/plugin-explorer
+npm install @graphiql/plugin-explorer
 ```
 
 The following packages are peer dependencies, so make sure you have them
 installed as well:
 
 ```sh
-npm i -S react react-dom graphql
+npm install react react-dom graphql
 ```
 
 ## Usage
 
 ```jsx
-import { explorerPlugin } from '@graphiql/plugin-explorer';
-import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { GraphiQL } from 'graphiql';
-
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { explorerPlugin } from '@graphiql/plugin-explorer';
 import 'graphiql/graphiql.css';
 import '@graphiql/plugin-explorer/dist/style.css';
 
 const fetcher = createGraphiQLFetcher({
   url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
 });
 
-// pass the explorer props here if you want
+// Pass the explorer props here if you want
 const explorer = explorerPlugin();
 
-return <GraphiQL fetcher={fetcher} plugins={[explorer]} />;
+function GraphiQLWithExplorer() {
+  return <GraphiQL fetcher={fetcher} plugins={[explorer]} />;
+}
 ```
 
 ## CDN bundles

packages/graphiql-plugin-explorer/package.json

@@ -44,6 +44,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.6.3",
-    "vite": "^4.3.9"
+    "vite": "^4.3.9",
+    "vite-plugin-svgr": "^3.2.0"
   }
 }

packages/graphiql-plugin-explorer/src/graphiql-explorer.d.ts

@@ -42,7 +42,7 @@ declare module 'graphiql-explorer' {
       string2: string;
       variable: string;
       atom: string;
-    } | null;
+    };
     arrowOpen?: ReactNode;
     arrowClosed?: ReactNode;
     checkboxChecked?: ReactNode;
@@ -51,8 +51,8 @@ declare module 'graphiql-explorer' {
       explorerActionsStyle?: CSSProperties;
       buttonStyle?: CSSProperties;
       actionButtonStyle?: CSSProperties;
-    } | null;
-    showAttribution: boolean;
+    };
+    showAttribution?: boolean;
     hideActions?: boolean;
     externalFragments?: FragmentDefinitionNode[];
   };

packages/graphiql-plugin-explorer/src/index.css

@@ -4,6 +4,10 @@
   width: unset !important;
 }
 
+.docExplorerWrap svg {
+  display: unset;
+}
+
 .doc-explorer-title {
   font-size: var(--font-size-h2);
   font-weight: var(--font-weight-medium);
@@ -19,20 +23,42 @@
   padding: 0 !important;
 }
 
-.graphiql-explorer-root > div:first-child {
-  padding-left: var(--px-8);
-  overflow: hidden !important;
+.graphiql-explorer-root > div > div {
+  border-color: hsla(
+    var(--color-neutral),
+    var(--alpha-background-heavy)
+  ) !important;
+  padding-top: var(--px-16);
 }
 
 .graphiql-explorer-root input {
-  background: hsl(var(--color-base));
+  background: unset;
 }
 
 .graphiql-explorer-root select {
-  background-color: hsl(var(--color-base));
+  background: hsl(var(--color-base)) !important;
   border: 1px solid hsla(var(--color-neutral), var(--alpha-secondary));
   border-radius: var(--border-radius-4);
-  color: hsl(var(--color-neutral));
-  margin: 0 var(--px-4);
+  color: hsl(var(--color-neutral)) !important;
+  margin: 0 var(--px-8);
   padding: var(--px-4) var(--px-6);
 }
+
+.graphiql-operation-title-bar .toolbar-button {
+  line-height: 0;
+  margin-left: var(--px-8);
+  color: hsla(var(--color-neutral), var(--alpha-secondary, 0.6));
+  font-size: var(--font-size-h3);
+  vertical-align: middle;
+}
+
+.graphiql-explorer-graphql-arguments input {
+  line-height: 0;
+}
+
+.graphiql-explorer-actions {
+  border-color: hsla(
+    var(--color-neutral),
+    var(--alpha-background-heavy)
+  ) !important;
+}

packages/graphiql-plugin-explorer/src/index.tsx

@@ -1,3 +1,4 @@
+import React, { CSSProperties, useCallback } from 'react';
 import {
   GraphiQLPlugin,
   useEditorContext,
@@ -10,7 +11,11 @@ import {
   Explorer as GraphiQLExplorer,
   GraphiQLExplorerProps,
 } from 'graphiql-explorer';
-import React, { useCallback } from 'react';
+
+import ArrowIcon from './icons/arrow.svg';
+import FolderPlusIcon from './icons/folder-plus.svg';
+import CheckboxUncheckedIcon from './icons/checkbox-unchecked.svg';
+import CheckboxCheckedIcon from './icons/checkbox-checked.svg';
 
 import './graphiql-explorer.d.ts';
 import './index.css';
@@ -29,92 +34,31 @@ const colors = {
   atom: 'hsl(var(--color-tertiary))',
 };
 
+/* eslint-disable @arthurgeron/react-usememo/require-usememo */
 const arrowOpen = (
-  <svg
-    viewBox="0 -4 13 15"
-    style={{
-      color: 'hsla(var(--color-neutral), var(--alpha-tertiary, 0.4))',
-      marginRight: 'var(--px-4)',
-      height: 'var(--px-16)',
-      width: 'var(--px-16)',
-    }}
-  >
-    <path
-      d="M3.35355 6.85355L6.14645 9.64645C6.34171 9.84171 6.65829 9.84171 6.85355 9.64645L9.64645 6.85355C9.96143 6.53857 9.73835 6 9.29289 6L3.70711 6C3.26165 6 3.03857 6.53857 3.35355 6.85355Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-const arrowClosed = (
-  <svg
-    viewBox="0 -2 13 15"
-    style={{
-      color: 'hsla(var(--color-neutral), var(--alpha-tertiary, 0.4))',
-      marginRight: 'var(--px-4)',
-      height: 'var(--px-16)',
-      width: 'var(--px-16)',
-    }}
-  >
-    <path
-      d="M6.35355 11.1464L9.14645 8.35355C9.34171 8.15829 9.34171 7.84171 9.14645 7.64645L6.35355 4.85355C6.03857 4.53857 5.5 4.76165 5.5 5.20711V10.7929C5.5 11.2383 6.03857 11.4614 6.35355 11.1464Z"
-      fill="currentColor"
-    />
-  </svg>
+  <ArrowIcon style={{ width: 'var(--px-16)', transform: 'rotate(90deg)' }} />
 );
-
+const arrowClosed = <ArrowIcon style={{ width: 'var(--px-16)' }} />;
 const checkboxUnchecked = (
-  <svg
-    viewBox="0 0 15 15"
-    style={{
-      color: 'hsla(var(--color-neutral), var(--alpha-tertiary, 0.4))',
-      marginRight: 'var(--px-4)',
-      height: 'var(--px-16)',
-      width: 'var(--px-16)',
-    }}
-  >
-    <circle cx="7.5" cy="7.5" r="6" stroke="currentColor" fill="none" />
-  </svg>
+  <CheckboxUncheckedIcon style={{ marginRight: 'var(--px-4)' }} />
 );
-
 const checkboxChecked = (
-  <svg
-    viewBox="0 0 15 15"
-    style={{
-      color: 'hsl(var(--color-info))',
-      marginRight: 'var(--px-4)',
-      height: 'var(--px-16)',
-      width: 'var(--px-16)',
-    }}
-  >
-    <circle cx="7.5" cy="7.5" r="7.5" fill="currentColor" />
-    <path
-      d="M4.64641 7.00106L6.8801 9.23256L10.5017 5.61325"
-      fill="none"
-      stroke="white"
-      strokeWidth="1.5"
-    />
-  </svg>
+  <CheckboxCheckedIcon
+    style={{ fill: 'hsl(var(--color-info))', marginRight: 'var(--px-4)' }}
+  />
 );
+/* eslint-enable @arthurgeron/react-usememo/require-usememo */
 
-const styles = {
+const styles: Record<string, CSSProperties> = {
   buttonStyle: {
-    backgroundColor: 'transparent',
-    border: 'none',
-    color: 'hsla(var(--color-neutral), var(--alpha-secondary, 0.6))',
     cursor: 'pointer',
-    fontSize: '1em',
+    fontSize: '2em',
+    lineHeight: 0,
   },
   explorerActionsStyle: {
-    padding: 'var(--px-8) var(--px-4)',
-  },
-  actionButtonStyle: {
-    backgroundColor: 'transparent',
-    border: 'none',
-    color: 'hsla(var(--color-neutral), var(--alpha-secondary, 0.6))',
-    cursor: 'pointer',
-    fontSize: '1em',
+    paddingTop: 'var(--px-16)',
   },
+  actionButtonStyle: {},
 };
 
 export type GraphiQLExplorerPluginProps = Omit<
@@ -163,32 +107,11 @@ function ExplorerPlugin(props: GraphiQLExplorerPluginProps) {
 }
 
 export function explorerPlugin(
-  props: GraphiQLExplorerPluginProps,
+  props?: GraphiQLExplorerPluginProps,
 ): GraphiQLPlugin {
   return {
     title: 'GraphiQL Explorer',
-    icon: () => (
-      <svg height="1em" strokeWidth="1.5" viewBox="0 0 24 24" fill="none">
-        <path
-          d="M18 6H20M22 6H20M20 6V4M20 6V8"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M21.4 20H2.6C2.26863 20 2 19.7314 2 19.4V11H21.4C21.7314 11 22 11.2686 22 11.6V19.4C22 19.7314 21.7314 20 21.4 20Z"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M2 11V4.6C2 4.26863 2.26863 4 2.6 4H8.77805C8.92127 4 9.05977 4.05124 9.16852 4.14445L12.3315 6.85555C12.4402 6.94876 12.5787 7 12.722 7H14"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    ),
+    icon: FolderPlusIcon,
     content: () => <ExplorerPlugin {...props} />,
   };
 }

packages/graphiql-plugin-explorer/src/vite-env.d.ts

@@ -1 +1,7 @@
+declare module '*.svg' {
+  import { FC, SVGProps } from 'react';
+  const ReactComponent: FC<SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
+
 /// <reference types="vite/client" />

packages/graphiql-plugin-explorer/vite.config.ts

@@ -1,11 +1,20 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
 import packageJSON from './package.json';
 
 const IS_UMD = process.env.UMD === 'true';
 
 export default defineConfig({
-  plugins: [react({ jsxRuntime: 'classic' })],
+  plugins: [
+    react({ jsxRuntime: 'classic' }),
+    svgr({
+      exportAsDefault: true,
+      svgrOptions: {
+        titleProp: true,
+      },
+    }),
+  ],
   build: {
     // avoid clean cjs/es builds
     emptyOutDir: !IS_UMD,