extract doc-explorer plugin from @graphiql/react and publish as @graphiql/plugin-doc-explorer package (#3916)

* upd

* graphiql-plugin-doc-explorer

* graphiql-plugin-doc-explorer

* rm

* upd

* upd

* upd

* upd

* upd

* upd

* upd

* use graphiql react

* add todos

* upd

* add referencePlugin, schemaReference and setSchemaReference

* onHasCompletion and useCompletion

* upd

* upd

* upd

* upd

* prettier

* use less diff

* try to fix preview

* fix unit tests

* try another approach

* ok, and now let's try .js instead of .cjs

Author: dimaMachina

.changeset/gentle-houses-add.md

@@ -0,0 +1,29 @@
+---
+'@graphiql/plugin-doc-explorer': patch
+'@graphiql/react': minor
+'graphiql': patch
+---
+
+- remove the following exports from `@graphiql/react` and move them in `@graphiql/plugin-doc-explorer` package:
+  - Argument
+  - DefaultValue
+  - DeprecationReason
+  - Directive
+  - DocExplorer
+  - ExplorerContext
+  - ExplorerContextProvider
+  - ExplorerSection
+  - FieldDocumentation
+  - FieldLink
+  - SchemaDocumentation
+  - Search
+  - TypeDocumentation
+  - TypeLink
+  - useExplorerContext
+  - DOC_EXPLORER_PLUGIN
+  - ExplorerContextType
+  - ExplorerFieldDef
+  - ExplorerNavStack
+  - ExplorerNavStackItem
+
+- add new `referencePlugin` prop on `PluginContextProviderProps` component for plugin which is used to display the reference documentation when selecting a type.

.eslintrc.js

@@ -358,6 +358,7 @@ module.exports = {
         ],
         'unicorn/no-length-as-slice-end': 'error',
         'unicorn/prefer-string-replace-all': 'error',
+        'unicorn/prefer-array-some': 'error',
         'unicorn/no-hex-escape': 'off', // TODO: enable
         // doesn't catch a lot of cases; we use ESLint builtin `no-restricted-syntax` to forbid `.keyCode`
         'unicorn/prefer-keyboard-event-key': 'off',

functions/graphql.ts

@@ -10,7 +10,7 @@ import type {
   HandlerContext as NetlifyHandlerContext,
 } from '@netlify/functions';
 
-import { schema } from '../packages/graphiql/test/schema.js';
+import { testSchema } from '../packages/graphiql/test/schema.js';
 import { customExecute } from '../packages/graphiql/test/execute.js';
 
 /**
@@ -57,4 +57,7 @@ export function createHandler<Context extends OperationContext = undefined>(
   };
 }
 
-export const handler = createHandler({ schema, execute: customExecute });
+export const handler = createHandler({
+  schema: testSchema,
+  execute: customExecute,
+});

packages/graphiql-plugin-doc-explorer/README.md

@@ -0,0 +1 @@
+# `@graphiql/plugin-doc-explorer`

packages/graphiql-plugin-doc-explorer/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@graphiql/plugin-doc-explorer",
+  "version": "0.0.0",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/graphql/graphiql",
+    "directory": "packages/graphiql-plugin-doc-explorer"
+  },
+  "homepage": "https://github.com/graphql/graphiql/tree/master/packages/graphiql-plugin-doc-explorer#readme",
+  "bugs": {
+    "url": "https://github.com/graphql/graphiql/issues?q=issue+label:@graphiql/plugin-doc-explorer"
+  },
+  "license": "MIT",
+  "exports": {
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css",
+    ".": "./dist/index.js"
+  },
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "react",
+    "graphql",
+    "graphiql",
+    "plugin",
+    "documentation",
+    "explorer"
+  ],
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "test": "vitest",
+    "types:check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0"
+  },
+  "dependencies": {
+    "react-compiler-runtime": "19.1.0-rc.1",
+    "@graphiql/react": "^0.31.0",
+    "@headlessui/react": "^2.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.4.1",
+    "vite-plugin-dts": "^4.5.3",
+    "babel-plugin-react-compiler": "19.1.0-rc.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "vite": "^6.3.4",
+    "graphql": "^16.9.0"
+  }
+}

packages/graphiql-react/setup-files.ts renamed to packages/graphiql-plugin-doc-explorer/setup-files.ts

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import { GraphQLInt, GraphQLObjectType, GraphQLSchema } from 'graphql';
 import { useContext, useEffect } from 'react';
 
-import { SchemaContext, SchemaContextType } from '../../../schema';
+import { SchemaContext, SchemaContextType } from '@graphiql/react';
 import { ExplorerContext, ExplorerContextProvider } from '../../context';
 import { DocExplorer } from '../doc-explorer';
 

packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx renamed to packages/graphiql-plugin-doc-explorer/src/components/__tests__/doc-explorer.spec.tsx

@@ -10,7 +10,7 @@ import {
   GraphQLUnionType,
 } from 'graphql';
 
-import { SchemaContext } from '../../../schema';
+import { SchemaContext } from '@graphiql/react';
 import { ExplorerContext } from '../../context';
 import { TypeDocumentation } from '../type-documentation';
 import { mockExplorerContextValue, unwrapType } from './test-utils';