move remaining doc explorer component to @graphiql/react (#2587)

Author: thomasheyenbrock

.changeset/five-pillows-fail.md

@@ -6,5 +6,5 @@ Add new components:
 - UI components (`Dropdown`, `Spinner`, `UnStyledButton` and lots of icon components)
 - Editor components (`QueryEditor`, `VariableEditor`, `HeaderEditor` and `ResponseEditor`)
 - Toolbar components (`ExecuteButton` and `ToolbarButton`)
-- Docs components (`Argument`, `DefaultValue`, `Directive`, `FieldLink`, `Search` and `TypeLink`)
+- Docs components (`Argument`, `DefaultValue`, `Directive`, `DocExplorer`, `FieldDocumentation`, `FieldLink`, `SchemaDocumentation`, `Search`, `TypeDocumentation` and `TypeLink`)
 - `History` component

.changeset/red-zoos-divide.md

@@ -0,0 +1,6 @@
+---
+'graphiql': major
+---
+
+BREAKING: The following exports of the `graphiql` package have been removed:
+- `DocExplorer`: Now exported from `@graphiql/react` as `DocExplorer`

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

@@ -1,19 +1,9 @@
-/**
- *  Copyright (c) 2021 GraphQL Contributors.
- *
- *  This source code is licensed under the MIT license found in the
- *  LICENSE file in the root directory of this source tree.
- */
-import React from 'react';
 import { render } from '@testing-library/react';
-import {
-  ExplorerContextProvider,
-  SchemaContext,
-  SchemaContextType,
-} from '@graphiql/react';
 
-import { DocExplorer } from '../DocExplorer';
-import { ExampleSchema } from './ExampleSchema';
+import { SchemaContext, SchemaContextType } from '../../../schema';
+import { ExplorerContextProvider } from '../../context';
+import { DocExplorer } from '../doc-explorer';
+import { ExampleSchema } from './example-schema';
 
 const defaultSchemaContext: SchemaContextType = {
   fetchError: null,

packages/graphiql/src/components/__tests__/ExampleSchema.ts renamed to packages/graphiql-react/src/explorer/components/__tests__/example-schema.ts

@@ -11,10 +11,7 @@ import {
 export const ExampleInterface = new GraphQLInterfaceType({
   name: 'exampleInterface',
   fields: {
-    name: {
-      name: 'nameField',
-      type: GraphQLString,
-    },
+    name: { type: GraphQLString },
   },
 });
 
@@ -31,29 +28,17 @@ export const ExampleUnionType1 = new GraphQLObjectType({
   name: 'Union_Type_1',
   interfaces: [ExampleInterface],
   fields: {
-    name: {
-      name: 'nameField',
-      type: GraphQLString,
-    },
-    enum: {
-      name: 'enumField',
-      type: ExampleEnum,
-    },
+    name: { type: GraphQLString },
+    enum: { type: ExampleEnum },
   },
 });
 
 export const ExampleUnionType2 = new GraphQLObjectType({
   name: 'Union_Type_2',
   interfaces: [ExampleInterface],
   fields: {
-    name: {
-      name: 'nameField',
-      type: GraphQLString,
-    },
-    string: {
-      name: 'stringField',
-      type: GraphQLString,
-    },
+    name: { type: GraphQLString },
+    string: { type: GraphQLString },
   },
 });
 
@@ -66,26 +51,15 @@ export const ExampleQuery = new GraphQLObjectType({
   name: 'Query',
   description: 'Query description\n Second line',
   fields: {
-    string: {
-      name: 'exampleString',
-      type: GraphQLString,
-    },
-    union: {
-      name: 'exampleUnion',
-      type: ExampleUnion,
-    },
+    string: { type: GraphQLString },
+    union: { type: ExampleUnion },
     fieldWithArgs: {
-      name: 'exampleWithArgs',
       type: GraphQLString,
       args: {
-        stringArg: {
-          name: 'exampleStringArg',
-          type: GraphQLString,
-        },
+        stringArg: { type: GraphQLString },
       },
     },
     deprecatedField: {
-      name: 'booleanField',
       type: GraphQLBoolean,
       deprecationReason: 'example deprecation reason',
     },

packages/graphiql/src/components/DocExplorer/__tests__/FieldDoc.spec.tsx renamed to packages/graphiql-react/src/explorer/components/__tests__/field-documentation.spec.tsx

@@ -1,20 +1,12 @@
-/**
- *  Copyright (c) 2021 GraphQL Contributors.
- *
- *  This source code is licensed under the MIT license found in the
- *  LICENSE file in the root directory of this source tree.
- */
-
-import { ExplorerContext, ExplorerFieldDef } from '@graphiql/react';
 import {
   // @ts-expect-error
   fireEvent,
   render,
 } from '@testing-library/react';
 import { GraphQLString, GraphQLObjectType, Kind } from 'graphql';
-import React from 'react';
+import { ExplorerContext, ExplorerFieldDef } from '../../context';
 
-import FieldDoc from '../FieldDoc';
+import { FieldDocumentation } from '../field-documentation';
 import { mockExplorerContextValue } from './test-utils';
 
 const exampleObject = new GraphQLObjectType({
@@ -65,22 +57,24 @@ const exampleObject = new GraphQLObjectType({
   },
 });
 
-function FieldDocWithContext(props: { field: ExplorerFieldDef }) {
+function FieldDocumentationWithContext(props: { field: ExplorerFieldDef }) {
   return (
     <ExplorerContext.Provider
       value={mockExplorerContextValue({
         name: props.field.name,
         def: props.field,
       })}>
-      <FieldDoc />
+      <FieldDocumentation />
     </ExplorerContext.Provider>
   );
 }
 
 describe('FieldDoc', () => {
   it('should render a simple string field', () => {
     const { container } = render(
-      <FieldDocWithContext field={exampleObject.getFields().string} />,
+      <FieldDocumentationWithContext
+        field={exampleObject.getFields().string}
+      />,
     );
     expect(
       container.querySelector('.graphiql-markdown-description'),
@@ -95,7 +89,9 @@ describe('FieldDoc', () => {
 
   it('should re-render on field change', () => {
     const { container, rerender } = render(
-      <FieldDocWithContext field={exampleObject.getFields().string} />,
+      <FieldDocumentationWithContext
+        field={exampleObject.getFields().string}
+      />,
     );
     expect(
       container.querySelector('.graphiql-markdown-description'),
@@ -108,7 +104,9 @@ describe('FieldDoc', () => {
     ).not.toBeInTheDocument();
 
     rerender(
-      <FieldDocWithContext field={exampleObject.getFields().stringWithArgs} />,
+      <FieldDocumentationWithContext
+        field={exampleObject.getFields().stringWithArgs}
+      />,
     );
     expect(
       container.querySelector('.graphiql-doc-explorer-type-name'),
@@ -120,7 +118,9 @@ describe('FieldDoc', () => {
 
   it('should render a string field with arguments', () => {
     const { container } = render(
-      <FieldDocWithContext field={exampleObject.getFields().stringWithArgs} />,
+      <FieldDocumentationWithContext
+        field={exampleObject.getFields().stringWithArgs}
+      />,
     );
     expect(
       container.querySelector('.graphiql-doc-explorer-type-name'),
@@ -149,7 +149,7 @@ describe('FieldDoc', () => {
 
   it('should render a string field with directives', () => {
     const { container } = render(
-      <FieldDocWithContext
+      <FieldDocumentationWithContext
         field={exampleObject.getFields().stringWithDirective}
       />,
     );

packages/graphiql/src/components/DocExplorer/__tests__/TypeDoc.spec.tsx renamed to packages/graphiql-react/src/explorer/components/__tests__/type-documentation.spec.tsx

@@ -1,29 +1,22 @@
-/**
- *  Copyright (c) 2021 GraphQL Contributors.
- *
- *  This source code is licensed under the MIT license found in the
- *  LICENSE file in the root directory of this source tree.
- */
-
-import { ExplorerContext, SchemaContext } from '@graphiql/react';
 import {
   // @ts-expect-error
   fireEvent,
   render,
 } from '@testing-library/react';
 import { GraphQLNamedType } from 'graphql';
-import React from 'react';
 
+import { SchemaContext } from '../../../schema';
+import { ExplorerContext } from '../../context';
+import { TypeDocumentation } from '../type-documentation';
 import {
-  ExampleSchema,
+  ExampleEnum,
   ExampleQuery,
+  ExampleSchema,
   ExampleUnion,
-  ExampleEnum,
-} from '../../__tests__/ExampleSchema';
-import TypeDoc from '../TypeDoc';
+} from './example-schema';
 import { mockExplorerContextValue, unwrapType } from './test-utils';
 
-function TypeDocWithContext(props: { type: GraphQLNamedType }) {
+function TypeDocumentationWithContext(props: { type: GraphQLNamedType }) {
   return (
     <SchemaContext.Provider
       value={{
@@ -40,15 +33,17 @@ function TypeDocWithContext(props: { type: GraphQLNamedType }) {
           name: unwrapType(props.type).name,
           def: props.type,
         })}>
-        <TypeDoc />
+        <TypeDocumentation />
       </ExplorerContext.Provider>
     </SchemaContext.Provider>
   );
 }
 
 describe('TypeDoc', () => {
   it('renders a top-level query object type', () => {
-    const { container } = render(<TypeDocWithContext type={ExampleQuery} />);
+    const { container } = render(
+      <TypeDocumentationWithContext type={ExampleQuery} />,
+    );
     const description = container.querySelectorAll(
       '.graphiql-markdown-description',
     );
@@ -66,7 +61,9 @@ describe('TypeDoc', () => {
   });
 
   it('renders deprecated fields when you click to see them', () => {
-    const { container } = render(<TypeDocWithContext type={ExampleQuery} />);
+    const { container } = render(
+      <TypeDocumentationWithContext type={ExampleQuery} />,
+    );
     let cats = container.querySelectorAll('.doc-category-item');
     expect(cats).toHaveLength(3);
 
@@ -83,14 +80,18 @@ describe('TypeDoc', () => {
   });
 
   it('renders a Union type', () => {
-    const { container } = render(<TypeDocWithContext type={ExampleUnion} />);
+    const { container } = render(
+      <TypeDocumentationWithContext type={ExampleUnion} />,
+    );
     expect(container.querySelector('.doc-category-title')).toHaveTextContent(
       'possible types',
     );
   });
 
   it('renders an Enum type', () => {
-    const { container } = render(<TypeDocWithContext type={ExampleEnum} />);
+    const { container } = render(
+      <TypeDocumentationWithContext type={ExampleEnum} />,
+    );
     expect(container.querySelector('.doc-category-title')).toHaveTextContent(
       'values',
     );
@@ -101,7 +102,7 @@ describe('TypeDoc', () => {
 
   it('shows deprecated enum values on click', () => {
     const { getByText, container } = render(
-      <TypeDocWithContext type={ExampleEnum} />,
+      <TypeDocumentationWithContext type={ExampleEnum} />,
     );
     const showBtn = getByText('Show deprecated values...');
     expect(showBtn).toBeInTheDocument();

packages/graphiql/src/components/DocExplorer.tsx renamed to packages/graphiql-react/src/explorer/components/doc-explorer.tsx

@@ -1,22 +1,13 @@
-/**
- *  Copyright (c) 2021 GraphQL Contributors.
- *
- *  This source code is licensed under the MIT license found in the
- *  LICENSE file in the root directory of this source tree.
- */
-
-import {
-  Search,
-  Spinner,
-  useExplorerContext,
-  useSchemaContext,
-} from '@graphiql/react';
 import { GraphQLSchema, isType } from 'graphql';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
-import FieldDoc from './DocExplorer/FieldDoc';
-import SchemaDoc from './DocExplorer/SchemaDoc';
-import TypeDoc from './DocExplorer/TypeDoc';
+import { useSchemaContext } from '../../schema';
+import { Spinner } from '../../ui';
+import { useExplorerContext } from '../context';
+import { FieldDocumentation } from './field-documentation';
+import { SchemaDocumentation } from './schema-documentation';
+import { Search } from './search';
+import { TypeDocumentation } from './type-documentation';
 
 type DocExplorerProps = {
   onClose?(): void;
@@ -30,21 +21,16 @@ type DocExplorerProps = {
   schema?: GraphQLSchema | null;
 };
 
-/**
- * DocExplorer
- *
- * Shows documentations for GraphQL definitions from the schema.
- *
- */
 export function DocExplorer(props: DocExplorerProps) {
   const {
     fetchError,
     isFetching,
     schema: schemaFromContext,
     validationErrors,
-  } = useSchemaContext({ nonNull: true });
+  } = useSchemaContext({ nonNull: true, caller: DocExplorer });
   const { explorerNavStack, hide, pop } = useExplorerContext({
     nonNull: true,
+    caller: DocExplorer,
   });
 
   const navItem = explorerNavStack[explorerNavStack.length - 1];
@@ -69,11 +55,11 @@ export function DocExplorer(props: DocExplorerProps) {
     // an error during introspection.
     content = <div className="error-container">No Schema Available</div>;
   } else if (explorerNavStack.length === 1) {
-    content = <SchemaDoc />;
+    content = <SchemaDocumentation />;
   } else if (isType(navItem.def)) {
-    content = <TypeDoc />;
+    content = <TypeDocumentation />;
   } else if (navItem.def) {
-    content = <FieldDoc />;
+    content = <FieldDocumentation />;
   }
 
   let prevName;