chore(#197): ran prettier on packages/bruno-graphql-docs

2024-12-22 23:02:40 +01:00 · 2023-09-22 00:37:51 +05:30 · 2023-09-22 00:37:51 +05:30 · a53dd76854
commit a53dd76854
parent 67fe264494
14 changed files with 96 additions and 248 deletions
--- a/packages/bruno-graphql-docs/src/components/DocExplorer.tsx
+++ b/packages/bruno-graphql-docs/src/components/DocExplorer.tsx
@ -24,7 +24,7 @@ type NavStackItem = {

 const initialNav: NavStackItem = {
  name: 'Schema',
-  title: 'Documentation Explorer',
+  title: 'Documentation Explorer'
 };

 type DocExplorerProps = {
@ -53,10 +53,7 @@ type DocExplorerState = {
 *     top bar. Typically this will be a "close" button for temporary explorer.
 *
 */
-export class DocExplorer extends React.Component<
-  DocExplorerProps,
-  DocExplorerState
-> {
+export class DocExplorer extends React.Component<DocExplorerProps, DocExplorerState> {
  // handleClickTypeOrField: OnClickTypeFunction | OnClickFieldFunction
  constructor(props: DocExplorerProps) {
    super(props);
@ -64,10 +61,7 @@ export class DocExplorer extends React.Component<
    this.state = { navStack: [initialNav] };
  }

-  shouldComponentUpdate(
-    nextProps: DocExplorerProps,
-    nextState: DocExplorerState,
-  ) {
+  shouldComponentUpdate(nextProps: DocExplorerProps, nextState: DocExplorerState) {
    return (
      this.props.schema !== nextProps.schema ||
      this.state.navStack !== nextState.navStack ||
@ -82,9 +76,7 @@ export class DocExplorer extends React.Component<

    let content;
    if (schemaErrors) {
-      content = (
-        <div className="error-container">{'Error fetching schema'}</div>
-      );
+      content = <div className="error-container">{'Error fetching schema'}</div>;
    } else if (schema === undefined) {
      // Schema is undefined when it is being loaded via introspection.
      content = (
@ -107,9 +99,7 @@ export class DocExplorer extends React.Component<
        />
      );
    } else if (navStack.length === 1) {
-      content = (
-        <SchemaDoc schema={schema} onClickType={this.handleClickType} />
-      );
+      content = <SchemaDoc schema={schema} onClickType={this.handleClickType} />;
    } else if (isType(navItem.def)) {
      content = (
        <TypeDoc
@ -120,17 +110,10 @@ export class DocExplorer extends React.Component<
        />
      );
    } else {
-      content = (
-        <FieldDoc
-          field={navItem.def as FieldType}
-          onClickType={this.handleClickType}
-        />
-      );
+      content = <FieldDoc field={navItem.def as FieldType} onClickType={this.handleClickType} />;
    }

-    const shouldSearchBoxAppear =
-      navStack.length === 1 ||
-      (isType(navItem.def) && 'getFields' in navItem.def);
+    const shouldSearchBoxAppear = navStack.length === 1 || (isType(navItem.def) && 'getFields' in navItem.def);

    let prevName;
    if (navStack.length > 1) {
@ -139,22 +122,18 @@ export class DocExplorer extends React.Component<

    return (
      <div className="graphql-docs-container">
-        <section
-          className="doc-explorer"
-          key={navItem.name}
-          aria-label="Documentation Explorer">
+        <section className="doc-explorer" key={navItem.name} aria-label="Documentation Explorer">
          <div className="doc-explorer-title-bar">
            {prevName && (
              <button
                className="doc-explorer-back"
                onClick={this.handleNavBackClick}
-                aria-label={`Go back to ${prevName}`}>
+                aria-label={`Go back to ${prevName}`}
+              >
                {prevName}
              </button>
            )}
-            <div className="doc-explorer-title">
-              {navItem.title || navItem.name}
-            </div>
+            <div className="doc-explorer-title">{navItem.title || navItem.name}</div>
            <div className="doc-explorer-rhs">{this.props.children}</div>
          </div>
          <div className="doc-explorer-contents">
@ -181,9 +160,9 @@ export class DocExplorer extends React.Component<
        navStack: navStack.concat([
          {
            name: typeOrField.name,
-            def: typeOrField,
-          },
-        ]),
+            def: typeOrField
+          }
+        ])
      });
    }
  }
--- a/packages/bruno-graphql-docs/src/components/DocExplorer/Argument.tsx
+++ b/packages/bruno-graphql-docs/src/components/DocExplorer/Argument.tsx
@ -17,11 +17,7 @@ type ArgumentProps = {
  showDefaultValue?: boolean;
 };

-export default function Argument({
-  arg,
-  onClickType,
-  showDefaultValue,
-}: ArgumentProps) {
+export default function Argument({ arg, onClickType, showDefaultValue }: ArgumentProps) {
  return (
    <span className="arg">
      <span className="arg-name">{arg.name}</span>
--- a/packages/bruno-graphql-docs/src/components/DocExplorer/DefaultValue.tsx
+++ b/packages/bruno-graphql-docs/src/components/DocExplorer/DefaultValue.tsx
@ -26,9 +26,7 @@ export default function DefaultValue({ field }: DefaultValueProps) {
    return (
      <span>
        {' = '}
-        <span className="arg-default-value">
-          {printDefault(astFromValue(field.defaultValue, field.type))}
-        </span>
+        <span className="arg-default-value">{printDefault(astFromValue(field.defaultValue, field.type))}</span>
      </span>
    );
  }
--- a/packages/bruno-graphql-docs/src/components/DocExplorer/FieldDoc.tsx
+++ b/packages/bruno-graphql-docs/src/components/DocExplorer/FieldDoc.tsx
@ -27,37 +27,27 @@ export default function FieldDoc({ field, onClickType }: FieldDocProps) {
      <div id="doc-args" className="doc-category">
        <div className="doc-category-title">{'arguments'}</div>
        {field.args
-          .filter(arg => !arg.deprecationReason)
+          .filter((arg) => !arg.deprecationReason)
          .map((arg: GraphQLArgument) => (
            <div key={arg.name} className="doc-category-item">
              <div>
                <Argument arg={arg} onClickType={onClickType} />
              </div>
-              <MarkdownContent
-                className="doc-value-description"
-                markdown={arg.description}
-              />
+              <MarkdownContent className="doc-value-description" markdown={arg.description} />
              {arg && 'deprecationReason' in arg && (
-                <MarkdownContent
-                  className="doc-deprecation"
-                  markdown={arg?.deprecationReason}
-                />
+                <MarkdownContent className="doc-deprecation" markdown={arg?.deprecationReason} />
              )}
            </div>
          ))}
      </div>
    );
-    const deprecatedArgs = field.args.filter(arg =>
-      Boolean(arg.deprecationReason),
-    );
+    const deprecatedArgs = field.args.filter((arg) => Boolean(arg.deprecationReason));
    if (deprecatedArgs.length > 0) {
      deprecatedArgsDef = (
        <div id="doc-deprecated-args" className="doc-category">
          <div className="doc-category-title">{'deprecated arguments'}</div>
          {!showDeprecated ? (
-            <button
-              className="show-btn"
-              onClick={() => handleShowDeprecated(!showDeprecated)}>
+            <button className="show-btn" onClick={() => handleShowDeprecated(!showDeprecated)}>
              {'Show deprecated arguments...'}
            </button>
          ) : (
@ -66,15 +56,9 @@ export default function FieldDoc({ field, onClickType }: FieldDocProps) {
                <div>
                  <Argument arg={arg} onClickType={onClickType} />
                </div>
-                <MarkdownContent
-                  className="doc-value-description"
-                  markdown={arg.description}
-                />
+                <MarkdownContent className="doc-value-description" markdown={arg.description} />
                {arg && 'deprecationReason' in arg && (
-                  <MarkdownContent
-                    className="doc-deprecation"
-                    markdown={arg?.deprecationReason}
-                  />
+                  <MarkdownContent className="doc-deprecation" markdown={arg?.deprecationReason} />
                )}
              </div>
            ))
@ -85,12 +69,7 @@ export default function FieldDoc({ field, onClickType }: FieldDocProps) {
  }

  let directivesDef;
-  if (
-    field &&
-    field.astNode &&
-    field.astNode.directives &&
-    field.astNode.directives.length > 0
-  ) {
+  if (field && field.astNode && field.astNode.directives && field.astNode.directives.length > 0) {
    directivesDef = (
      <div id="doc-directives" className="doc-category">
        <div className="doc-category-title">{'directives'}</div>
@ -107,15 +86,9 @@ export default function FieldDoc({ field, onClickType }: FieldDocProps) {

  return (
    <div>
-      <MarkdownContent
-        className="doc-type-description"
-        markdown={field?.description || 'No Description'}
-      />
+      <MarkdownContent className="doc-type-description" markdown={field?.description || 'No Description'} />
      {field && 'deprecationReason' in field && (
-        <MarkdownContent
-          className="doc-deprecation"
-          markdown={field?.deprecationReason}
-        />
+        <MarkdownContent className="doc-deprecation" markdown={field?.deprecationReason} />
      )}
      <div className="doc-category">
        <div className="doc-category-title">{'type'}</div>
--- a/packages/bruno-graphql-docs/src/components/DocExplorer/MarkdownContent.tsx
+++ b/packages/bruno-graphql-docs/src/components/DocExplorer/MarkdownContent.tsx
@ -12,7 +12,7 @@ type Maybe<T> = T | null | undefined;

 const md = new MD({
  // render urls as links, à la github-flavored markdown
-  linkify: true,
+  linkify: true
 });

 type MarkdownContentProps = {
@ -20,18 +20,10 @@ type MarkdownContentProps = {
  className?: string;
 };

-export default function MarkdownContent({
-  markdown,
-  className,
-}: MarkdownContentProps) {
+export default function MarkdownContent({ markdown, className }: MarkdownContentProps) {
  if (!markdown) {
    return <div />;
  }

-  return (
-    <div
-      className={className}
-      dangerouslySetInnerHTML={{ __html: md.render(markdown) }}
-    />
-  );
+  return <div className={className} dangerouslySetInnerHTML={{ __html: md.render(markdown) }} />;
 }
--- a/packages/bruno-graphql-docs/src/components/DocExplorer/SchemaDoc.tsx
+++ b/packages/bruno-graphql-docs/src/components/DocExplorer/SchemaDoc.tsx
@ -20,17 +20,13 @@ type SchemaDocProps = {
 export default function SchemaDoc({ schema, onClickType }: SchemaDocProps) {
  const queryType = schema.getQueryType();
  const mutationType = schema.getMutationType && schema.getMutationType();
-  const subscriptionType =
-    schema.getSubscriptionType && schema.getSubscriptionType();
+  const subscriptionType = schema.getSubscriptionType && schema.getSubscriptionType();

  return (
    <div>
      <MarkdownContent
        className="doc-type-description"
-        markdown={
-          schema.description ||
-          'A GraphQL schema provides a root type for each kind of operation.'
-        }
+        markdown={schema.description || 'A GraphQL schema provides a root type for each kind of operation.'}
      />
      <div className="doc-category">
        <div className="doc-category-title">{'root types'}</div>
--- a/packages/bruno-graphql-docs/src/components/DocExplorer/SearchBox.tsx
+++ b/packages/bruno-graphql-docs/src/components/DocExplorer/SearchBox.tsx
@ -21,10 +21,7 @@ type SearchBoxState = {
  value: string;
 };

-export default class SearchBox extends React.Component<
-  SearchBoxProps,
-  SearchBoxState
-> {
+export default class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
  debouncedOnSearch: OnSearchFn;

  constructor(props: SearchBoxProps) {
@ -47,10 +44,7 @@ export default class SearchBox extends React.Component<
          aria-label={this.props.placeholder}
        />
        {this.state.value && (
-          <button
-            className="search-box-clear"
-            onClick={this.handleClear}
-            aria-label="Clear search input">
+          <button className="search-box-clear" onClick={this.handleClear} aria-label="Clear search input">
            {'\u2715'}
          </button>
        )}
@ -58,7 +52,7 @@ export default class SearchBox extends React.Component<
    );
  }

-  handleChange: ChangeEventHandler<HTMLInputElement> = event => {
+  handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
    const value = event.currentTarget.value;
    this.setState({ value });
    this.debouncedOnSearch(value);
--- a/packages/bruno-graphql-docs/src/components/DocExplorer/SearchResults.tsx
+++ b/packages/bruno-graphql-docs/src/components/DocExplorer/SearchResults.tsx
@ -20,15 +20,9 @@ type SearchResultsProps = {
  onClickField: OnClickFieldFunction;
 };

-export default class SearchResults extends React.Component<
-  SearchResultsProps,
-  {}
-> {
+export default class SearchResults extends React.Component<SearchResultsProps, {}> {
  shouldComponentUpdate(nextProps: SearchResultsProps) {
-    return (
-      this.props.schema !== nextProps.schema ||
-      this.props.searchValue !== nextProps.searchValue
-    );
+    return this.props.schema !== nextProps.schema || this.props.searchValue !== nextProps.searchValue;
  }

  render() {
@ -47,15 +41,12 @@ export default class SearchResults extends React.Component<

    // Move the within type name to be the first searched.
    if (withinType) {
-      typeNames = typeNames.filter(n => n !== withinType.name);
+      typeNames = typeNames.filter((n) => n !== withinType.name);
      typeNames.unshift(withinType.name);
    }

    for (const typeName of typeNames) {
-      if (
-        matchedWithin.length + matchedTypes.length + matchedFields.length >=
-        100
-      ) {
+      if (matchedWithin.length + matchedTypes.length + matchedFields.length >= 100) {
        break;
      }

@ -64,21 +55,19 @@ export default class SearchResults extends React.Component<
        matchedTypes.push(
          <div className="doc-category-item" key={typeName}>
            <TypeLink type={type} onClick={onClickType} />
-          </div>,
+          </div>
        );
      }

      if (type && 'getFields' in type) {
        const fields = type.getFields();
-        Object.keys(fields).forEach(fieldName => {
+        Object.keys(fields).forEach((fieldName) => {
          const field = fields[fieldName];
          let matchingArgs;

          if (!isMatch(fieldName, searchValue)) {
            if ('args' in field && field.args.length) {
-              matchingArgs = field.args.filter(arg =>
-                isMatch(arg.name, searchValue),
-              );
+              matchingArgs = field.args.filter((arg) => isMatch(arg.name, searchValue));
              if (matchingArgs.length === 0) {
                return;
              }
@ -89,28 +78,18 @@ export default class SearchResults extends React.Component<

          const match = (
            <div className="doc-category-item" key={typeName + '.' + fieldName}>
-              {withinType !== type && [
-                <TypeLink key="type" type={type} onClick={onClickType} />,
-                '.',
-              ]}
-              <a
-                className="field-name"
-                onClick={event => onClickField(field, type, event)}>
+              {withinType !== type && [<TypeLink key="type" type={type} onClick={onClickType} />, '.']}
+              <a className="field-name" onClick={(event) => onClickField(field, type, event)}>
                {field.name}
              </a>
              {matchingArgs && [
                '(',
                <span key="args">
-                  {matchingArgs.map(arg => (
-                    <Argument
-                      key={arg.name}
-                      arg={arg}
-                      onClickType={onClickType}
-                      showDefaultValue={false}
-                    />
+                  {matchingArgs.map((arg) => (
+                    <Argument key={arg.name} arg={arg} onClickType={onClickType} showDefaultValue={false} />
                  ))}
                </span>,
-                ')',
+                ')'
              ]}
            </div>
          );
@ -124,10 +103,7 @@ export default class SearchResults extends React.Component<
      }
    }

-    if (
-      matchedWithin.length + matchedTypes.length + matchedFields.length ===
-      0
-    ) {
+    if (matchedWithin.length + matchedTypes.length + matchedFields.length === 0) {
      return <span className="doc-alert-text">{'No results found.'}</span>;
    }

@ -156,7 +132,7 @@ export default class SearchResults extends React.Component<

 function isMatch(sourceText: string, searchValue: string) {
  try {
-    const escaped = searchValue.replace(/[^_0-9A-Za-z]/g, ch => '\\' + ch);
+    const escaped = searchValue.replace(/[^_0-9A-Za-z]/g, (ch) => '\\' + ch);
    return sourceText.search(new RegExp(escaped, 'i')) !== -1;
  } catch (e) {
    return sourceText.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
--- a/packages/bruno-graphql-docs/src/components/DocExplorer/TypeDoc.tsx
+++ b/packages/bruno-graphql-docs/src/components/DocExplorer/TypeDoc.tsx
@ -13,7 +13,7 @@ import {
  GraphQLUnionType,
  GraphQLEnumType,
  GraphQLType,
-  GraphQLEnumValue,
+  GraphQLEnumValue
 } from 'graphql';

 import Argument from './Argument';
@ -33,10 +33,7 @@ type TypeDocState = {
  showDeprecated: boolean;
 };

-export default class TypeDoc extends React.Component<
-  TypeDocProps,
-  TypeDocState
-> {
+export default class TypeDoc extends React.Component<TypeDocProps, TypeDocState> {
  constructor(props: TypeDocProps) {
    super(props);
    this.state = { showDeprecated: false };
@ -74,7 +71,7 @@ export default class TypeDoc extends React.Component<
      typesDef = (
        <div id="doc-types" className="doc-category">
          <div className="doc-category-title">{typesTitle}</div>
-          {types.map(subtype => (
+          {types.map((subtype) => (
            <div key={subtype.name} className="doc-category-item">
              <TypeLink type={subtype} onClick={onClickType} />
            </div>
@ -88,27 +85,19 @@ export default class TypeDoc extends React.Component<
    let deprecatedFieldsDef;
    if (type && 'getFields' in type) {
      const fieldMap = type.getFields();
-      const fields = Object.keys(fieldMap).map(name => fieldMap[name]);
+      const fields = Object.keys(fieldMap).map((name) => fieldMap[name]);
      fieldsDef = (
        <div id="doc-fields" className="doc-category">
          <div className="doc-category-title">{'fields'}</div>
          {fields
-            .filter(field => !field.deprecationReason)
-            .map(field => (
-              <Field
-                key={field.name}
-                type={type}
-                field={field}
-                onClickType={onClickType}
-                onClickField={onClickField}
-              />
+            .filter((field) => !field.deprecationReason)
+            .map((field) => (
+              <Field key={field.name} type={type} field={field} onClickType={onClickType} onClickField={onClickField} />
            ))}
        </div>
      );

-      const deprecatedFields = fields.filter(field =>
-        Boolean(field.deprecationReason),
-      );
+      const deprecatedFields = fields.filter((field) => Boolean(field.deprecationReason));
      if (deprecatedFields.length > 0) {
        deprecatedFieldsDef = (
          <div id="doc-deprecated-fields" className="doc-category">
@ -118,7 +107,7 @@ export default class TypeDoc extends React.Component<
                {'Show deprecated fields...'}
              </button>
            ) : (
-              deprecatedFields.map(field => (
+              deprecatedFields.map((field) => (
                <Field
                  key={field.name}
                  type={type}
@ -141,16 +130,14 @@ export default class TypeDoc extends React.Component<
        <div className="doc-category">
          <div className="doc-category-title">{'values'}</div>
          {values
-            .filter(value => Boolean(!value.deprecationReason))
-            .map(value => (
+            .filter((value) => Boolean(!value.deprecationReason))
+            .map((value) => (
              <EnumValue key={value.name} value={value} />
            ))}
        </div>
      );

-      const deprecatedValues = values.filter(value =>
-        Boolean(value.deprecationReason),
-      );
+      const deprecatedValues = values.filter((value) => Boolean(value.deprecationReason));
      if (deprecatedValues.length > 0) {
        deprecatedValuesDef = (
          <div className="doc-category">
@ -160,9 +147,7 @@ export default class TypeDoc extends React.Component<
                {'Show deprecated values...'}
              </button>
            ) : (
-              deprecatedValues.map(value => (
-                <EnumValue key={value.name} value={value} />
-              ))
+              deprecatedValues.map((value) => <EnumValue key={value.name} value={value} />)
            )}
          </div>
        );
@ -173,9 +158,7 @@ export default class TypeDoc extends React.Component<
      <div>
        <MarkdownContent
          className="doc-type-description"
-          markdown={
-            ('description' in type && type.description) || 'No Description'
-          }
+          markdown={('description' in type && type.description) || 'No Description'}
        />
        {type instanceof GraphQLObjectType && typesDef}
        {fieldsDef}
@ -200,9 +183,7 @@ type FieldProps = {
 function Field({ type, field, onClickType, onClickField }: FieldProps) {
  return (
    <div className="doc-category-item">
-      <a
-        className="field-name"
-        onClick={event => onClickField(field, type, event)}>
+      <a className="field-name" onClick={(event) => onClickField(field, type, event)}>
        {field.name}
      </a>
      {'args' in field &&
@ -211,27 +192,19 @@ function Field({ type, field, onClickType, onClickField }: FieldProps) {
          '(',
          <span key="args">
            {field.args
-              .filter(arg => !arg.deprecationReason)
-              .map(arg => (
+              .filter((arg) => !arg.deprecationReason)
+              .map((arg) => (
                <Argument key={arg.name} arg={arg} onClickType={onClickType} />
              ))}
          </span>,
-          ')',
+          ')'
        ]}
      {': '}
      <TypeLink type={field.type} onClick={onClickType} />
      <DefaultValue field={field} />
-      {field.description && (
-        <MarkdownContent
-          className="field-short-description"
-          markdown={field.description}
-        />
-      )}
+      {field.description && <MarkdownContent className="field-short-description" markdown={field.description} />}
      {'deprecationReason' in field && field.deprecationReason && (
-        <MarkdownContent
-          className="doc-deprecation"
-          markdown={field.deprecationReason}
-        />
+        <MarkdownContent className="doc-deprecation" markdown={field.deprecationReason} />
      )}
    </div>
  );
@ -245,16 +218,8 @@ function EnumValue({ value }: EnumValue) {
  return (
    <div className="doc-category-item">
      <div className="enum-value">{value.name}</div>
-      <MarkdownContent
-        className="doc-value-description"
-        markdown={value.description}
-      />
-      {value.deprecationReason && (
-        <MarkdownContent
-          className="doc-deprecation"
-          markdown={value.deprecationReason}
-        />
-      )}
+      <MarkdownContent className="doc-value-description" markdown={value.description} />
+      {value.deprecationReason && <MarkdownContent className="doc-deprecation" markdown={value.deprecationReason} />}
    </div>
  );
 }
--- a/packages/bruno-graphql-docs/src/components/DocExplorer/TypeLink.tsx
+++ b/packages/bruno-graphql-docs/src/components/DocExplorer/TypeLink.tsx
@ -6,12 +6,7 @@
 */

 import React from 'react';
-import {
-  GraphQLList,
-  GraphQLNonNull,
-  GraphQLType,
-  GraphQLNamedType,
-} from 'graphql';
+import { GraphQLList, GraphQLNonNull, GraphQLType, GraphQLNamedType } from 'graphql';
 import { OnClickTypeFunction } from './types';

 type Maybe<T> = T | null | undefined;
@ -47,11 +42,12 @@ function renderType(type: Maybe<GraphQLType>, onClick: OnClickTypeFunction) {
  return (
    <a
      className="type-name"
-      onClick={event => {
+      onClick={(event) => {
        event.preventDefault();
        onClick(type as GraphQLNamedType, event);
      }}
-      href="#">
+      href="#"
+    >
      {type?.name}
    </a>
  );
--- a/packages/bruno-graphql-docs/src/components/DocExplorer/types.ts
+++ b/packages/bruno-graphql-docs/src/components/DocExplorer/types.ts
@ -7,29 +7,17 @@ import {
  GraphQLInterfaceType,
  GraphQLInputObjectType,
  GraphQLType,
-  GraphQLNamedType,
+  GraphQLNamedType
 } from 'graphql';

-export type FieldType =
-  | GraphQLField<{}, {}, {}>
-  | GraphQLInputField
-  | GraphQLArgument;
+export type FieldType = GraphQLField<{}, {}, {}> | GraphQLInputField | GraphQLArgument;

 export type OnClickFieldFunction = (
  field: FieldType,
-  type?:
-    | GraphQLObjectType
-    | GraphQLInterfaceType
-    | GraphQLInputObjectType
-    | GraphQLType,
-  event?: MouseEvent,
+  type?: GraphQLObjectType | GraphQLInterfaceType | GraphQLInputObjectType | GraphQLType,
+  event?: MouseEvent
 ) => void;

-export type OnClickTypeFunction = (
-  type: GraphQLNamedType,
-  event?: MouseEvent<HTMLAnchorElement>,
-) => void;
+export type OnClickTypeFunction = (type: GraphQLNamedType, event?: MouseEvent<HTMLAnchorElement>) => void;

-export type OnClickFieldOrTypeFunction =
-  | OnClickFieldFunction
-  | OnClickTypeFunction;
+export type OnClickFieldOrTypeFunction = OnClickFieldFunction | OnClickTypeFunction;
--- a/packages/bruno-graphql-docs/src/index.css
+++ b/packages/bruno-graphql-docs/src/index.css
@ -25,7 +25,7 @@
 }

 .graphql-docs-container .doc-explorer-back {
-  color: #3B5998;
+  color: #3b5998;
  cursor: pointer;
  margin: -7px 0 -6px -8px;
  overflow-x: hidden;
@ -42,8 +42,8 @@
 }

 .graphql-docs-container .doc-explorer-back:before {
-  border-left: 2px solid #3B5998;
-  border-top: 2px solid #3B5998;
+  border-left: 2px solid #3b5998;
+  border-top: 2px solid #3b5998;
  content: '';
  display: inline-block;
  height: 9px;
@ -74,7 +74,7 @@
  min-width: 300px;
 }

-.graphql-docs-container .doc-type-description p:first-child ,
+.graphql-docs-container .doc-type-description p:first-child,
 .graphql-docs-container .doc-type-description blockquote:first-child {
  margin-top: 0;
 }
@ -100,7 +100,7 @@
 .graphql-docs-container .doc-type-description pre,
 .graphql-docs-container .doc-category code,
 .graphql-docs-container .doc-category pre {
-  --saf-0: rgba(var(--sk_foreground_low,29,28,29),0.13);
+  --saf-0: rgba(var(--sk_foreground_low, 29, 28, 29), 0.13);
  font-size: 12px;
  line-height: 1.50001;
  font-variant-ligatures: none;
@ -118,7 +118,7 @@
  padding: 2px 3px 1px;
  border: 1px solid var(--saf-0);
  border-radius: 3px;
-  background-color: rgba(var(--sk_foreground_min,29,28,29),.04);
+  background-color: rgba(var(--sk_foreground_min, 29, 28, 29), 0.04);
  color: #e01e5a;
  background-color: white;
 }
@ -146,15 +146,15 @@
 }

 .graphql-docs-container .keyword {
-  color: #B11A04;
+  color: #b11a04;
 }

 .graphql-docs-container .type-name {
-  color: #CA9800;
+  color: #ca9800;
 }

 .graphql-docs-container .field-name {
-  color: #1F61A0;
+  color: #1f61a0;
 }

 .graphql-docs-container .field-short-description {
@ -165,11 +165,11 @@
 }

 .graphql-docs-container .enum-value {
-  color: #0B7FC7;
+  color: #0b7fc7;
 }

 .graphql-docs-container .arg-name {
-  color: #8B2BB9;
+  color: #8b2bb9;
 }

 .graphql-docs-container .arg {
@ -189,13 +189,13 @@
 }

 .graphql-docs-container .arg-default-value {
-  color: #43A047;
+  color: #43a047;
 }

 .graphql-docs-container .doc-deprecation {
  background: #fffae8;
  box-shadow: inset 0 0 1px #bfb063;
-  color: #867F70;
+  color: #867f70;
  line-height: 16px;
  margin: 8px -8px;
  max-height: 80px;
--- a/packages/bruno-graphql-docs/src/index.ts
+++ b/packages/bruno-graphql-docs/src/index.ts
@ -1,8 +1,6 @@
-import { DocExplorer } from "./components/DocExplorer";
+import { DocExplorer } from './components/DocExplorer';

 // Todo: Rollup throws error
 import './index.css';

-export {
-  DocExplorer
-}
+export { DocExplorer };
--- a/packages/bruno-graphql-docs/src/utility/debounce.ts
+++ b/packages/bruno-graphql-docs/src/utility/debounce.ts
@ -9,10 +9,7 @@
 * Provided a duration and a function, returns a new function which is called
 * `duration` milliseconds after the last call.
 */
-export default function debounce<F extends (...args: any[]) => any>(
-  duration: number,
-  fn: F,
-) {
+export default function debounce<F extends (...args: any[]) => any>(duration: number, fn: F) {
  let timeout: number | null;
  return function (this: any, ...args: Parameters<F>) {
    if (timeout) {