prefer React.FC type when declaring React components (#3939)

* 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

* use FC type

* use FC type

* use FC type

* use FC type

* use FC type

* use FC type

* use FC type

* use FC type

* upd

* Delete .changeset/gentle-houses-add.md

* fix

* tiny fix

Author: dimaMachina

.changeset/five-wasps-rule.md

@@ -0,0 +1,10 @@
+---
+'@graphiql/plugin-code-exporter': patch
+'@graphiql/plugin-doc-explorer': patch
+'@graphiql/plugin-explorer': patch
+'@graphiql/plugin-history': patch
+'@graphiql/react': patch
+'graphiql': patch
+---
+
+prefer `React.FC` type when declaring React components

package.json

@@ -14,6 +14,7 @@
   },
   "packageManager": "yarn@1.22.22",
   "scripts": {
+    "types:check": "turbo run types:check",
     "dev:graphiql": "turbo run dev --filter=graphiql...",
     "build": "yarn build-clean && yarn tsc && yarn build:nontsc",
     "build-bundles": "yarn prebuild-bundles && yarn wsrun:noexamples --stages build-bundles",

packages/graphiql-plugin-code-exporter/src/index.tsx

@@ -1,5 +1,5 @@
 import { useOperationsEditorState, type GraphiQLPlugin } from '@graphiql/react';
-import React from 'react';
+import React, { FC } from 'react';
 import GraphiQLCodeExporter, {
   GraphiQLCodeExporterProps,
 } from 'graphiql-code-exporter';
@@ -9,7 +9,9 @@ import './index.css';
 
 type GraphiQLCodeExporterPluginProps = Omit<GraphiQLCodeExporterProps, 'query'>;
 
-function GraphiQLCodeExporterPlugin(props: GraphiQLCodeExporterPluginProps) {
+const GraphiQLCodeExporterPlugin: FC<
+  GraphiQLCodeExporterPluginProps
+> = props => {
   const [operationsString] = useOperationsEditorState();
   return (
     <GraphiQLCodeExporter
@@ -18,7 +20,7 @@ function GraphiQLCodeExporterPlugin(props: GraphiQLCodeExporterPluginProps) {
       query={operationsString}
     />
   );
-}
+};
 
 export function codeExporterPlugin(
   props: GraphiQLCodeExporterPluginProps,

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

@@ -1,7 +1,6 @@
 import { render } from '@testing-library/react';
 import { GraphQLInt, GraphQLObjectType, GraphQLSchema } from 'graphql';
-import { useContext, useEffect } from 'react';
-
+import { FC, useContext, useEffect } from 'react';
 import { SchemaContext, SchemaContextType } from '@graphiql/react';
 import { ExplorerContext, ExplorerContextProvider } from '../../context';
 import { DocExplorer } from '../doc-explorer';
@@ -31,6 +30,8 @@ const defaultSchemaContext: SchemaContextType = {
   isFetching: false,
   schema: makeSchema(),
   validationErrors: [],
+  schemaReference: null!,
+  setSchemaReference: null!,
 };
 
 const withErrorSchemaContext: SchemaContextType = {
@@ -39,15 +40,17 @@ const withErrorSchemaContext: SchemaContextType = {
   isFetching: false,
   schema: new GraphQLSchema({ description: 'GraphQL Schema for testing' }),
   validationErrors: [],
+  schemaReference: null!,
+  setSchemaReference: null!,
 };
 
-function DocExplorerWithContext() {
+const DocExplorerWithContext: FC = () => {
   return (
     <ExplorerContextProvider>
       <DocExplorer />
     </ExplorerContextProvider>
   );
-}
+};
 
 describe('DocExplorer', () => {
   it('renders spinner when the schema is loading', () => {

packages/graphiql-plugin-doc-explorer/src/components/__tests__/field-documentation.spec.tsx

@@ -1,6 +1,6 @@
+import { FC } from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { GraphQLString, GraphQLObjectType, Kind } from 'graphql';
-
 import { ExplorerContext, ExplorerFieldDef } from '../../context';
 import { FieldDocumentation } from '../field-documentation';
 import { mockExplorerContextValue } from './test-utils';
@@ -53,7 +53,9 @@ const exampleObject = new GraphQLObjectType({
   },
 });
 
-function FieldDocumentationWithContext(props: { field: ExplorerFieldDef }) {
+const FieldDocumentationWithContext: FC<{
+  field: ExplorerFieldDef;
+}> = props => {
   return (
     <ExplorerContext.Provider
       value={mockExplorerContextValue({
@@ -64,7 +66,7 @@ function FieldDocumentationWithContext(props: { field: ExplorerFieldDef }) {
       <FieldDocumentation field={props.field} />
     </ExplorerContext.Provider>
   );
-}
+};
 
 describe('FieldDocumentation', () => {
   it('should render a simple string field', () => {

packages/graphiql-plugin-doc-explorer/src/components/__tests__/type-documentation.spec.tsx

@@ -1,3 +1,4 @@
+import { FC } from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import {
   GraphQLBoolean,
@@ -9,13 +10,12 @@ import {
   GraphQLString,
   GraphQLUnionType,
 } from 'graphql';
-
 import { SchemaContext } from '@graphiql/react';
 import { ExplorerContext } from '../../context';
 import { TypeDocumentation } from '../type-documentation';
 import { mockExplorerContextValue, unwrapType } from './test-utils';
 
-function TypeDocumentationWithContext(props: { type: GraphQLNamedType }) {
+const TypeDocumentationWithContext: FC<{ type: GraphQLNamedType }> = props => {
   return (
     <SchemaContext.Provider
       value={{
@@ -24,6 +24,8 @@ function TypeDocumentationWithContext(props: { type: GraphQLNamedType }) {
         isFetching: false,
         schema: ExampleSchema,
         validationErrors: [],
+        schemaReference: null!,
+        setSchemaReference: null!,
       }}
     >
       <ExplorerContext.Provider
@@ -36,7 +38,7 @@ function TypeDocumentationWithContext(props: { type: GraphQLNamedType }) {
       </ExplorerContext.Provider>
     </SchemaContext.Provider>
   );
-}
+};
 
 describe('TypeDocumentation', () => {
   it('renders a top-level query object type', () => {

packages/graphiql-plugin-doc-explorer/src/components/__tests__/type-link.spec.tsx

@@ -1,15 +1,13 @@
 import { fireEvent, render } from '@testing-library/react';
 import { GraphQLNonNull, GraphQLList, GraphQLString } from 'graphql';
-import { ComponentProps } from 'react';
-
 import { ExplorerContext } from '../../context';
 import { TypeLink } from '../type-link';
 import { mockExplorerContextValue, unwrapType } from './test-utils';
 
 const nonNullType = new GraphQLNonNull(GraphQLString);
 const listType = new GraphQLList(GraphQLString);
 
-function TypeLinkWithContext(props: ComponentProps<typeof TypeLink>) {
+const TypeLinkWithContext: typeof TypeLink = props => {
   return (
     <ExplorerContext.Provider
       value={mockExplorerContextValue({
@@ -30,7 +28,7 @@ function TypeLinkWithContext(props: ComponentProps<typeof TypeLink>) {
       </ExplorerContext.Consumer>
     </ExplorerContext.Provider>
   );
-}
+};
 
 describe('TypeLink', () => {
   it('should render a string', () => {

packages/graphiql-plugin-doc-explorer/src/components/argument.tsx

@@ -1,10 +1,9 @@
+import { FC } from 'react';
 import { GraphQLArgument } from 'graphql';
-
+import { MarkdownContent } from '@graphiql/react';
 import { DefaultValue } from './default-value';
 import { TypeLink } from './type-link';
-
 import './argument.css';
-import { MarkdownContent } from '@graphiql/react';
 
 type ArgumentProps = {
   /**
@@ -25,7 +24,11 @@ type ArgumentProps = {
   inline?: boolean;
 };
 
-export function Argument({ arg, showDefaultValue, inline }: ArgumentProps) {
+export const Argument: FC<ArgumentProps> = ({
+  arg,
+  showDefaultValue,
+  inline,
+}) => {
   const definition = (
     <span>
       <span className="graphiql-doc-explorer-argument-name">{arg.name}</span>
@@ -55,4 +58,4 @@ export function Argument({ arg, showDefaultValue, inline }: ArgumentProps) {
       ) : null}
     </div>
   );
-}
+};

packages/graphiql-plugin-doc-explorer/src/components/default-value.tsx

@@ -1,7 +1,6 @@
+import { FC } from 'react';
 import { astFromValue, print, ValueNode } from 'graphql';
-
 import { ExplorerFieldDef } from '../context';
-
 import './default-value.css';
 
 const printDefault = (ast?: ValueNode | null): string => {
@@ -18,7 +17,7 @@ type DefaultValueProps = {
   field: ExplorerFieldDef;
 };
 
-export function DefaultValue({ field }: DefaultValueProps) {
+export const DefaultValue: FC<DefaultValueProps> = ({ field }) => {
   if (!('defaultValue' in field) || field.defaultValue === undefined) {
     return null;
   }
@@ -34,4 +33,4 @@ export function DefaultValue({ field }: DefaultValueProps) {
       </span>
     </>
   );
-}
+};

packages/graphiql-plugin-doc-explorer/src/components/deprecation-reason.tsx

@@ -1,16 +1,16 @@
+import { FC } from 'react';
 import { MarkdownContent } from '@graphiql/react';
-
 import './deprecation-reason.css';
 
 type DeprecationReasonProps = {
   /**
-   * The deprecation reason as markdown string.
+   * The deprecation reason as Markdown string.
    */
   children?: string | null;
   preview?: boolean;
 };
 
-export function DeprecationReason(props: DeprecationReasonProps) {
+export const DeprecationReason: FC<DeprecationReasonProps> = props => {
   return props.children ? (
     <div className="graphiql-doc-explorer-deprecation">
       <div className="graphiql-doc-explorer-deprecation-label">Deprecated</div>
@@ -22,4 +22,4 @@ export function DeprecationReason(props: DeprecationReasonProps) {
       </MarkdownContent>
     </div>
   ) : null;
-}
+};

packages/graphiql-plugin-doc-explorer/src/components/directive.tsx

@@ -1,5 +1,5 @@
+import { FC } from 'react';
 import { DirectiveNode } from 'graphql';
-
 import './directive.css';
 
 type DirectiveProps = {
@@ -9,10 +9,10 @@ type DirectiveProps = {
   directive: DirectiveNode;
 };
 
-export function Directive({ directive }: DirectiveProps) {
+export const Directive: FC<DirectiveProps> = ({ directive }) => {
   return (
     <span className="graphiql-doc-explorer-directive">
       @{directive.name.value}
     </span>
   );
-}
+};

packages/graphiql-plugin-doc-explorer/src/components/doc-explorer.tsx

@@ -1,16 +1,14 @@
 import { isType } from 'graphql';
-import { ReactNode } from 'react';
-
+import { FC, ReactNode } from 'react';
 import { ChevronLeftIcon, Spinner, useSchemaContext } from '@graphiql/react';
 import { useExplorerContext } from '../context';
 import { FieldDocumentation } from './field-documentation';
 import { SchemaDocumentation } from './schema-documentation';
 import { Search } from './search';
 import { TypeDocumentation } from './type-documentation';
-
 import './doc-explorer.css';
 
-export function DocExplorer() {
+export const DocExplorer: FC = () => {
   const { fetchError, isFetching, schema, validationErrors } = useSchemaContext(
     { nonNull: true, caller: DocExplorer },
   );
@@ -84,4 +82,4 @@ export function DocExplorer() {
       <div className="graphiql-doc-explorer-content">{content}</div>
     </section>
   );
-}
+};

packages/graphiql-plugin-doc-explorer/src/components/field-documentation.tsx

@@ -1,6 +1,5 @@
 import { GraphQLArgument } from 'graphql';
-import { useState } from 'react';
-
+import { FC, useState } from 'react';
 import { Button, MarkdownContent } from '@graphiql/react';
 import { ExplorerFieldDef } from '../context';
 import { Argument } from './argument';
@@ -16,27 +15,27 @@ type FieldDocumentationProps = {
   field: ExplorerFieldDef;
 };
 
-export function FieldDocumentation(props: FieldDocumentationProps) {
+export const FieldDocumentation: FC<FieldDocumentationProps> = ({ field }) => {
   return (
     <>
-      {props.field.description ? (
+      {field.description ? (
         <MarkdownContent type="description">
-          {props.field.description}
+          {field.description}
         </MarkdownContent>
       ) : null}
       <DeprecationReason preview={false}>
-        {props.field.deprecationReason}
+        {field.deprecationReason}
       </DeprecationReason>
       <ExplorerSection title="Type">
-        <TypeLink type={props.field.type} />
+        <TypeLink type={field.type} />
       </ExplorerSection>
-      <Arguments field={props.field} />
-      <Directives field={props.field} />
+      <Arguments field={field} />
+      <Directives field={field} />
     </>
   );
-}
+};
 
-function Arguments({ field }: { field: ExplorerFieldDef }) {
+const Arguments: FC<{ field: ExplorerFieldDef }> = ({ field }) => {
   const [showDeprecated, setShowDeprecated] = useState(false);
   const handleShowDeprecated = () => {
     setShowDeprecated(true);
@@ -80,11 +79,11 @@ function Arguments({ field }: { field: ExplorerFieldDef }) {
       ) : null}
     </>
   );
-}
+};
 
-function Directives({ field }: { field: ExplorerFieldDef }) {
-  const directives = field.astNode?.directives || [];
-  if (!directives || directives.length === 0) {
+const Directives: FC<{ field: ExplorerFieldDef }> = ({ field }) => {
+  const directives = field.astNode?.directives;
+  if (!directives?.length) {
     return null;
   }
   return (
@@ -96,4 +95,4 @@ function Directives({ field }: { field: ExplorerFieldDef }) {
       ))}
     </ExplorerSection>
   );
-}
+};