diff --git a/.changeset/five-pillows-fail.md b/.changeset/five-pillows-fail.md index 36a2d2bb204..279cab609e3 100644 --- a/.changeset/five-pillows-fail.md +++ b/.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 diff --git a/.changeset/red-zoos-divide.md b/.changeset/red-zoos-divide.md new file mode 100644 index 00000000000..689ea91d859 --- /dev/null +++ b/.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` diff --git a/packages/graphiql/src/components/__tests__/DocExplorer.spec.tsx b/packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx similarity index 81% rename from packages/graphiql/src/components/__tests__/DocExplorer.spec.tsx rename to packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx index c72cb11d279..cd4d339e9a4 100644 --- a/packages/graphiql/src/components/__tests__/DocExplorer.spec.tsx +++ b/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, diff --git a/packages/graphiql/src/components/__tests__/ExampleSchema.ts b/packages/graphiql-react/src/explorer/components/__tests__/example-schema.ts similarity index 67% rename from packages/graphiql/src/components/__tests__/ExampleSchema.ts rename to packages/graphiql-react/src/explorer/components/__tests__/example-schema.ts index fdf379ba2ab..0154642af5e 100644 --- a/packages/graphiql/src/components/__tests__/ExampleSchema.ts +++ b/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,14 +28,8 @@ 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 }, }, }); @@ -46,14 +37,8 @@ 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', }, diff --git a/packages/graphiql/src/components/DocExplorer/__tests__/FieldDoc.spec.tsx b/packages/graphiql-react/src/explorer/components/__tests__/field-documentation.spec.tsx similarity index 85% rename from packages/graphiql/src/components/DocExplorer/__tests__/FieldDoc.spec.tsx rename to packages/graphiql-react/src/explorer/components/__tests__/field-documentation.spec.tsx index 1ee3fd537b3..49d4de603b7 100644 --- a/packages/graphiql/src/components/DocExplorer/__tests__/FieldDoc.spec.tsx +++ b/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,14 +57,14 @@ const exampleObject = new GraphQLObjectType({ }, }); -function FieldDocWithContext(props: { field: ExplorerFieldDef }) { +function FieldDocumentationWithContext(props: { field: ExplorerFieldDef }) { return ( - + ); } @@ -80,7 +72,9 @@ function FieldDocWithContext(props: { field: ExplorerFieldDef }) { describe('FieldDoc', () => { it('should render a simple string field', () => { const { container } = render( - , + , ); expect( container.querySelector('.graphiql-markdown-description'), @@ -95,7 +89,9 @@ describe('FieldDoc', () => { it('should re-render on field change', () => { const { container, rerender } = render( - , + , ); expect( container.querySelector('.graphiql-markdown-description'), @@ -108,7 +104,9 @@ describe('FieldDoc', () => { ).not.toBeInTheDocument(); rerender( - , + , ); 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( - , + , ); 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( - , ); diff --git a/packages/graphiql/src/components/DocExplorer/__tests__/TypeDoc.spec.tsx b/packages/graphiql-react/src/explorer/components/__tests__/type-documentation.spec.tsx similarity index 80% rename from packages/graphiql/src/components/DocExplorer/__tests__/TypeDoc.spec.tsx rename to packages/graphiql-react/src/explorer/components/__tests__/type-documentation.spec.tsx index 1f58346f827..011ed7959d0 100644 --- a/packages/graphiql/src/components/DocExplorer/__tests__/TypeDoc.spec.tsx +++ b/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 ( - + ); @@ -47,7 +40,9 @@ function TypeDocWithContext(props: { type: GraphQLNamedType }) { describe('TypeDoc', () => { it('renders a top-level query object type', () => { - const { container } = render(); + const { container } = render( + , + ); const description = container.querySelectorAll( '.graphiql-markdown-description', ); @@ -65,7 +60,9 @@ describe('TypeDoc', () => { }); it('renders deprecated fields when you click to see them', () => { - const { container } = render(); + const { container } = render( + , + ); let cats = container.querySelectorAll('.doc-category-item'); expect(cats).toHaveLength(3); @@ -82,14 +79,18 @@ describe('TypeDoc', () => { }); it('renders a Union type', () => { - const { container } = render(); + const { container } = render( + , + ); expect(container.querySelector('.doc-category-title')).toHaveTextContent( 'possible types', ); }); it('renders an Enum type', () => { - const { container } = render(); + const { container } = render( + , + ); expect(container.querySelector('.doc-category-title')).toHaveTextContent( 'values', ); @@ -100,7 +101,7 @@ describe('TypeDoc', () => { it('shows deprecated enum values on click', () => { const { getByText, container } = render( - , + , ); const showBtn = getByText('Show deprecated values...'); expect(showBtn).toBeInTheDocument(); diff --git a/packages/graphiql/src/components/DocExplorer.tsx b/packages/graphiql-react/src/explorer/components/doc-explorer.tsx similarity index 80% rename from packages/graphiql/src/components/DocExplorer.tsx rename to packages/graphiql-react/src/explorer/components/doc-explorer.tsx index 7cf6b55211a..19530708b52 100644 --- a/packages/graphiql/src/components/DocExplorer.tsx +++ b/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 =
No Schema Available
; } else if (explorerNavStack.length === 1) { - content = ; + content = ; } else if (isType(navItem.def)) { - content = ; + content = ; } else if (navItem.def) { - content = ; + content = ; } let prevName; diff --git a/packages/graphiql/src/components/DocExplorer/FieldDoc.tsx b/packages/graphiql-react/src/explorer/components/field-documentation.tsx similarity index 78% rename from packages/graphiql/src/components/DocExplorer/FieldDoc.tsx rename to packages/graphiql-react/src/explorer/components/field-documentation.tsx index 7b4bac6bfb6..ec4ef2bd303 100644 --- a/packages/graphiql/src/components/DocExplorer/FieldDoc.tsx +++ b/packages/graphiql-react/src/explorer/components/field-documentation.tsx @@ -1,23 +1,18 @@ -/** - * 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 { isType } from 'graphql'; +import { useState } from 'react'; -import { - Argument, - Directive, - MarkdownContent, - TypeLink, - useExplorerContext, -} from '@graphiql/react'; -import { DirectiveNode, isType } from 'graphql'; -import React from 'react'; +import { MarkdownContent } from '../../ui'; +import { useExplorerContext } from '../context'; +import { Argument } from './argument'; +import { Directive } from './directive'; +import { TypeLink } from './type-link'; -export default function FieldDoc() { - const { explorerNavStack } = useExplorerContext({ nonNull: true }); - const [showDeprecated, handleShowDeprecated] = React.useState(false); +export function FieldDocumentation() { + const { explorerNavStack } = useExplorerContext({ + nonNull: true, + caller: FieldDocumentation, + }); + const [showDeprecated, handleShowDeprecated] = useState(false); const navItem = explorerNavStack[explorerNavStack.length - 1]; const field = navItem.def; @@ -64,7 +59,7 @@ export default function FieldDoc() { directivesDef = (
directives
- {field.astNode.directives.map((directive: DirectiveNode) => ( + {field.astNode.directives.map(directive => (
diff --git a/packages/graphiql/src/components/DocExplorer/SchemaDoc.tsx b/packages/graphiql-react/src/explorer/components/schema-documentation.tsx similarity index 73% rename from packages/graphiql/src/components/DocExplorer/SchemaDoc.tsx rename to packages/graphiql-react/src/explorer/components/schema-documentation.tsx index c1ca10232dc..5143b1c6be3 100644 --- a/packages/graphiql/src/components/DocExplorer/SchemaDoc.tsx +++ b/packages/graphiql-react/src/explorer/components/schema-documentation.tsx @@ -1,16 +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 { useSchemaContext } from '../../schema'; +import { MarkdownContent } from '../../ui'; +import { TypeLink } from './type-link'; -import { MarkdownContent, TypeLink, useSchemaContext } from '@graphiql/react'; -import React from 'react'; - -// Render the top level Schema -export default function SchemaDoc() { - const { schema } = useSchemaContext({ nonNull: true }); +export function SchemaDocumentation() { + const { schema } = useSchemaContext({ + nonNull: true, + caller: SchemaDocumentation, + }); if (!schema) { return null; diff --git a/packages/graphiql/src/components/DocExplorer/TypeDoc.tsx b/packages/graphiql-react/src/explorer/components/type-documentation.tsx similarity index 89% rename from packages/graphiql/src/components/DocExplorer/TypeDoc.tsx rename to packages/graphiql-react/src/explorer/components/type-documentation.tsx index e01002ba215..c2fa3de32a1 100644 --- a/packages/graphiql/src/components/DocExplorer/TypeDoc.tsx +++ b/packages/graphiql-react/src/explorer/components/type-documentation.tsx @@ -1,20 +1,3 @@ -/** - * 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 { - Argument, - DefaultValue, - ExplorerFieldDef, - FieldLink, - MarkdownContent, - TypeLink, - useExplorerContext, - useSchemaContext, -} from '@graphiql/react'; import { GraphQLEnumValue, GraphQLInterfaceType, @@ -26,11 +9,25 @@ import { isObjectType, isUnionType, } from 'graphql'; -import React, { ReactNode, useState } from 'react'; +import { ReactNode, useState } from 'react'; + +import { useSchemaContext } from '../../schema'; +import { MarkdownContent } from '../../ui'; +import { ExplorerFieldDef, useExplorerContext } from '../context'; +import { Argument } from './argument'; +import { DefaultValue } from './default-value'; +import { FieldLink } from './field-link'; +import { TypeLink } from './type-link'; -export default function TypeDoc() { - const { schema } = useSchemaContext({ nonNull: true }); - const { explorerNavStack } = useExplorerContext({ nonNull: true }); +export function TypeDocumentation() { + const { schema } = useSchemaContext({ + nonNull: true, + caller: TypeDocumentation, + }); + const { explorerNavStack } = useExplorerContext({ + nonNull: true, + caller: TypeDocumentation, + }); const [showDeprecated, setShowDeprecated] = useState(false); const navItem = explorerNavStack[explorerNavStack.length - 1]; diff --git a/packages/graphiql-react/src/explorer/index.ts b/packages/graphiql-react/src/explorer/index.ts index dc36b0a19f4..64d236b2fe8 100644 --- a/packages/graphiql-react/src/explorer/index.ts +++ b/packages/graphiql-react/src/explorer/index.ts @@ -1,8 +1,12 @@ export { Argument } from './components/argument'; export { DefaultValue } from './components/default-value'; export { Directive } from './components/directive'; +export { DocExplorer } from './components/doc-explorer'; +export { FieldDocumentation } from './components/field-documentation'; export { FieldLink } from './components/field-link'; +export { SchemaDocumentation } from './components/schema-documentation'; export { Search } from './components/search'; +export { TypeDocumentation } from './components/type-documentation'; export { TypeLink } from './components/type-link'; export { ExplorerContext, diff --git a/packages/graphiql-react/src/index.ts b/packages/graphiql-react/src/index.ts index 24a53cf3c42..ff3bfc18637 100644 --- a/packages/graphiql-react/src/index.ts +++ b/packages/graphiql-react/src/index.ts @@ -26,10 +26,14 @@ export { Argument, DefaultValue, Directive, + DocExplorer, ExplorerContext, ExplorerContextProvider, + FieldDocumentation, FieldLink, + SchemaDocumentation, Search, + TypeDocumentation, TypeLink, useExplorerContext, } from './explorer'; diff --git a/packages/graphiql/__mocks__/@graphiql/react.tsx b/packages/graphiql/__mocks__/@graphiql/react.tsx index ec2c82931bc..8b369e50c83 100644 --- a/packages/graphiql/__mocks__/@graphiql/react.tsx +++ b/packages/graphiql/__mocks__/@graphiql/react.tsx @@ -15,9 +15,11 @@ export { Argument, ChevronDownIcon, ChevronUpIcon, + CloseIcon, CopyIcon, DefaultValue, Directive, + DocExplorer, DocsIcon, Dropdown, EditorContext, @@ -27,6 +29,7 @@ export { ExecutionContextProvider, ExplorerContext, ExplorerContextProvider, + FieldDocumentation, FieldLink, History, HistoryContext, @@ -34,20 +37,26 @@ export { HistoryIcon, ImagePreview, KeyboardShortcutIcon, - onHasCompletion, + MagnifyingGlassIcon, MarkdownContent, MergeIcon, + onHasCompletion, + PenIcon, PlayIcon, PrettifyIcon, SchemaContext, SchemaContextProvider, + SchemaDocumentation, Search, SettingsIcon, Spinner, + StarFilledIcon, + StarIcon, StopIcon, StorageContext, StorageContextProvider, ToolbarButton, + TypeDocumentation, TypeLink, UnStyledButton, useAutoCompleteLeafs, diff --git a/packages/graphiql/src/components/DocExplorer/__tests__/test-utils.ts b/packages/graphiql/src/components/DocExplorer/__tests__/test-utils.ts deleted file mode 100644 index 2657315225d..00000000000 --- a/packages/graphiql/src/components/DocExplorer/__tests__/test-utils.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ExplorerContextType, ExplorerNavStackItem } from '@graphiql/react'; -import { GraphQLNamedType, GraphQLType } from 'graphql'; - -export function mockExplorerContextValue( - navStackItem: ExplorerNavStackItem, -): ExplorerContextType { - return { - explorerNavStack: [navStackItem], - hide() {}, - isVisible: true, - pop() {}, - push() {}, - reset() {}, - show() {}, - showSearch() {}, - }; -} - -export function unwrapType(type: GraphQLType): GraphQLNamedType { - return 'ofType' in type ? unwrapType(type.ofType) : type; -} diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx index 52eb919edb3..20431ac6a12 100644 --- a/packages/graphiql/src/components/GraphiQL.tsx +++ b/packages/graphiql/src/components/GraphiQL.tsx @@ -25,6 +25,7 @@ import { ChevronDownIcon, ChevronUpIcon, CopyIcon, + DocExplorer, DocsIcon, EditorContextProvider, ExecuteButton, @@ -71,7 +72,6 @@ import type { } from '@graphiql/react'; import { ToolbarMenu, ToolbarMenuItem } from './ToolbarMenu'; -import { DocExplorer } from './DocExplorer'; import find from '../utility/find'; import { formatError, formatResult } from '@graphiql/toolkit'; diff --git a/packages/graphiql/src/index.tsx b/packages/graphiql/src/index.tsx index b46f214e1b4..3c33a188ebc 100644 --- a/packages/graphiql/src/index.tsx +++ b/packages/graphiql/src/index.tsx @@ -30,11 +30,6 @@ export type { Storage, SyncFetcherResult, } from '@graphiql/toolkit'; -/** - * Components - */ - -export { DocExplorer } from './components/DocExplorer'; /** * Toolbar