From a53dd76854dc7b32fbaf80e7010381906c2974cc Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Fri, 22 Sep 2023 00:37:51 +0530
Subject: [PATCH] chore(#197): ran prettier on packages/bruno-graphql-docs

---
 .../src/components/DocExplorer.tsx            | 49 ++++--------
 .../src/components/DocExplorer/Argument.tsx   |  6 +-
 .../components/DocExplorer/DefaultValue.tsx   |  4 +-
 .../src/components/DocExplorer/FieldDoc.tsx   | 47 +++--------
 .../DocExplorer/MarkdownContent.tsx           | 14 +---
 .../src/components/DocExplorer/SchemaDoc.tsx  |  8 +-
 .../src/components/DocExplorer/SearchBox.tsx  | 12 +--
 .../components/DocExplorer/SearchResults.tsx  | 52 ++++--------
 .../src/components/DocExplorer/TypeDoc.tsx    | 79 ++++++-------------
 .../src/components/DocExplorer/TypeLink.tsx   | 12 +--
 .../src/components/DocExplorer/types.ts       | 24 ++----
 packages/bruno-graphql-docs/src/index.css     | 26 +++---
 packages/bruno-graphql-docs/src/index.ts      |  6 +-
 .../src/utility/debounce.ts                   |  5 +-
 14 files changed, 96 insertions(+), 248 deletions(-)

diff --git a/packages/bruno-graphql-docs/src/components/DocExplorer.tsx b/packages/bruno-graphql-docs/src/components/DocExplorer.tsx
index fcd76a10e..5da0b7c72 100644
--- 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
+          }
+        ])
       });
     }
   }
diff --git a/packages/bruno-graphql-docs/src/components/DocExplorer/Argument.tsx b/packages/bruno-graphql-docs/src/components/DocExplorer/Argument.tsx
index 1ea1b83ea..6a9798051 100644
--- 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>
diff --git a/packages/bruno-graphql-docs/src/components/DocExplorer/DefaultValue.tsx b/packages/bruno-graphql-docs/src/components/DocExplorer/DefaultValue.tsx
index 574dd97b6..e3b0a86ad 100644
--- 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>
     );
   }
diff --git a/packages/bruno-graphql-docs/src/components/DocExplorer/FieldDoc.tsx b/packages/bruno-graphql-docs/src/components/DocExplorer/FieldDoc.tsx
index c77892f07..6cf959e97 100644
--- 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>
diff --git a/packages/bruno-graphql-docs/src/components/DocExplorer/MarkdownContent.tsx b/packages/bruno-graphql-docs/src/components/DocExplorer/MarkdownContent.tsx
index 690d2669c..96aa7ac32 100644
--- 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) }} />;
 }
diff --git a/packages/bruno-graphql-docs/src/components/DocExplorer/SchemaDoc.tsx b/packages/bruno-graphql-docs/src/components/DocExplorer/SchemaDoc.tsx
index 0a873973c..ab5708675 100644
--- 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>
diff --git a/packages/bruno-graphql-docs/src/components/DocExplorer/SearchBox.tsx b/packages/bruno-graphql-docs/src/components/DocExplorer/SearchBox.tsx
index 6f45e54ea..69da18f7f 100644
--- 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);
diff --git a/packages/bruno-graphql-docs/src/components/DocExplorer/SearchResults.tsx b/packages/bruno-graphql-docs/src/components/DocExplorer/SearchResults.tsx
index d8bd30c31..11bd8133f 100644
--- 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;
diff --git a/packages/bruno-graphql-docs/src/components/DocExplorer/TypeDoc.tsx b/packages/bruno-graphql-docs/src/components/DocExplorer/TypeDoc.tsx
index 1f1468e75..6f221d953 100644
--- 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>
   );
 }
diff --git a/packages/bruno-graphql-docs/src/components/DocExplorer/TypeLink.tsx b/packages/bruno-graphql-docs/src/components/DocExplorer/TypeLink.tsx
index cab065f47..e28623471 100644
--- 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>
   );
diff --git a/packages/bruno-graphql-docs/src/components/DocExplorer/types.ts b/packages/bruno-graphql-docs/src/components/DocExplorer/types.ts
index 3922663ff..97cf4ea6f 100644
--- 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;
diff --git a/packages/bruno-graphql-docs/src/index.css b/packages/bruno-graphql-docs/src/index.css
index 7ab0dc9be..12f00a778 100644
--- 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;
diff --git a/packages/bruno-graphql-docs/src/index.ts b/packages/bruno-graphql-docs/src/index.ts
index 88cc2983e..e38befd3c 100644
--- 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 };
diff --git a/packages/bruno-graphql-docs/src/utility/debounce.ts b/packages/bruno-graphql-docs/src/utility/debounce.ts
index 833b8ba15..841c8b231 100644
--- 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) {