[redesign] docs (#2588)

* add icons * add `Button` component to `@graphiql/react` * add explorer section component * redesign `SchemaDocumentation` component * redesign `TypeDocumentation` component * redesign `FieldDocumentation` component * redesign `DocExplorer` component * extend changeset message
graphql · Aug 15, 2022 · fa937dc · fa937dc
1 parent aebfd1a
commit fa937dc
Show file tree

Hide file tree

Showing 40 changed files with 813 additions and 768 deletions.
diff --git a/.changeset/five-pillows-fail.md b/.changeset/five-pillows-fail.md
@@ -3,8 +3,8 @@
 ---
 
 Add new components:
-- UI components (`Dropdown`, `Spinner`, `UnStyledButton` and lots of icon components)
+- UI components (`Button`, `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`, `DocExplorer`, `FieldDocumentation`, `FieldLink`, `SchemaDocumentation`, `Search`, `TypeDocumentation` and `TypeLink`)
+- Docs components (`Argument`, `DefaultValue`, `DeprecationReason`, `Directive`, `DocExplorer`, `ExplorerSection`, `FieldDocumentation`, `FieldLink`, `SchemaDocumentation`, `Search`, `TypeDocumentation` and `TypeLink`)
 - `History` component
diff --git a/.changeset/red-zoos-divide.md b/.changeset/red-zoos-divide.md
@@ -4,3 +4,4 @@
 
 BREAKING: The following exports of the `graphiql` package have been removed:
 - `DocExplorer`: Now exported from `@graphiql/react` as `DocExplorer`
+  - The `schema` prop has been removed, the component now uses the schema provided by the `ExplorerContext`
diff --git a/packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx b/packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx
@@ -1,24 +1,22 @@
 import { render } from '@testing-library/react';
+import { GraphQLSchema } from 'graphql';
 
 import { SchemaContext, SchemaContextType } from '../../../schema';
 import { ExplorerContextProvider } from '../../context';
 import { DocExplorer } from '../doc-explorer';
-import { ExampleSchema } from './example-schema';
 
 const defaultSchemaContext: SchemaContextType = {
   fetchError: null,
   introspect() {},
   isFetching: false,
-  schema: ExampleSchema,
+  schema: new GraphQLSchema({ description: 'GraphQL Schema for testing' }),
   validationErrors: [],
 };
 
-function DocExplorerWithContext(
-  props: React.ComponentProps<typeof DocExplorer>,
-) {
+function DocExplorerWithContext() {
   return (
     <ExplorerContextProvider>
-      <DocExplorer {...props} />
+      <DocExplorer />
     </ExplorerContextProvider>
   );
 }
@@ -45,17 +43,17 @@ describe('DocExplorer', () => {
         <DocExplorerWithContext />
       </SchemaContext.Provider>,
     );
-    const error = container.querySelectorAll('.error-container');
+    const error = container.querySelectorAll('.graphiql-doc-explorer-error');
     expect(error).toHaveLength(1);
-    expect(error[0]).toHaveTextContent('No Schema Available');
+    expect(error[0]).toHaveTextContent('No GraphQL schema available');
   });
   it('renders with schema', () => {
     const { container } = render(
       <SchemaContext.Provider value={defaultSchemaContext}>
         <DocExplorerWithContext />,
       </SchemaContext.Provider>,
     );
-    const error = container.querySelectorAll('.error-container');
+    const error = container.querySelectorAll('.graphiql-doc-explorer-error');
     expect(error).toHaveLength(0);
     expect(
       container.querySelector('.graphiql-markdown-description'),

diff --git a/packages/graphiql-react/src/explorer/components/__tests__/example-schema.ts b/packages/graphiql-react/src/explorer/components/__tests__/example-schema.ts
diff --git a/packages/graphiql-react/src/explorer/components/__tests__/field-documentation.spec.tsx b/packages/graphiql-react/src/explorer/components/__tests__/field-documentation.spec.tsx
@@ -4,8 +4,8 @@ import {
   render,
 } from '@testing-library/react';
 import { GraphQLString, GraphQLObjectType, Kind } from 'graphql';
-import { ExplorerContext, ExplorerFieldDef } from '../../context';
 
+import { ExplorerContext, ExplorerFieldDef } from '../../context';
 import { FieldDocumentation } from '../field-documentation';
 import { mockExplorerContextValue } from './test-utils';
 
@@ -65,12 +65,12 @@ function FieldDocumentationWithContext(props: { field: ExplorerFieldDef }) {
         def: props.field,
       })}
     >
-      <FieldDocumentation />
+      <FieldDocumentation field={props.field} />
     </ExplorerContext.Provider>
   );
 }
 
-describe('FieldDoc', () => {
+describe('FieldDocumentation', () => {
   it('should render a simple string field', () => {
     const { container } = render(
       <FieldDocumentationWithContext
@@ -79,7 +79,7 @@ describe('FieldDoc', () => {
     );
     expect(
       container.querySelector('.graphiql-markdown-description'),
-    ).toHaveTextContent('No Description');
+    ).not.toBeInTheDocument();
     expect(
       container.querySelector('.graphiql-doc-explorer-type-name'),
     ).toHaveTextContent('String');
@@ -96,7 +96,7 @@ describe('FieldDoc', () => {
     );
     expect(
       container.querySelector('.graphiql-markdown-description'),
-    ).toHaveTextContent('No Description');
+    ).not.toBeInTheDocument();
     expect(
       container.querySelector('.graphiql-doc-explorer-type-name'),
     ).toHaveTextContent('String');
@@ -118,7 +118,7 @@ describe('FieldDoc', () => {
   });
 
   it('should render a string field with arguments', () => {
-    const { container } = render(
+    const { container, getByText } = render(
       <FieldDocumentationWithContext
         field={exampleObject.getFields().stringWithArgs}
       />,
@@ -140,7 +140,7 @@ describe('FieldDoc', () => {
       container.querySelectorAll('.graphiql-markdown-deprecation'),
     ).toHaveLength(0);
     // make sure deprecation is present
-    fireEvent.click(container.querySelector('.show-btn'));
+    fireEvent.click(getByText('Show Deprecated Arguments'));
     const deprecationDocs = container.querySelectorAll(
       '.graphiql-markdown-deprecation',
     );