feat: standalone graphiql docs explorer

.nvmrc

@@ -1 +1 @@
-v14.17.0
+v14.18.0

packages/bruno-app/package.json

@@ -30,6 +30,7 @@
     "idb": "^7.0.0",
     "immer": "^9.0.15",
     "lodash": "^4.17.21",
+    "markdown-it": "^13.0.1",
     "mousetrap": "^1.6.5",
     "nanoid": "3.3.4",
     "next": "12.3.1",

packages/bruno-graphql-docs/package.json

@@ -10,12 +10,23 @@
     "@rollup/plugin-commonjs": "^23.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^9.0.2",
+    "@types/markdown-it": "^12.2.3",
     "@types/react": "^18.0.25",
+    "graphql": "^16.6.0",
+    "markdown-it": "^13.0.1",
+    "postcss": "^8.4.18",
     "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rollup": "3.2.5",
     "rollup-plugin-dts": "^5.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.8.4"
+  },
+  "peerDependencies": {
+    "graphql": "^16.6.0",
+    "markdown-it": "^13.0.1",
+    "react": "^17.0.2"
   }
 }

packages/bruno-graphql-docs/rollup.config.js

@@ -1,13 +1,14 @@
-import resolve from "@rollup/plugin-node-resolve";
+const { nodeResolve } = require("@rollup/plugin-node-resolve");
-import commonjs from "@rollup/plugin-commonjs";
+const commonjs = require("@rollup/plugin-commonjs");
-import typescript from "@rollup/plugin-typescript";
+const typescript = require("@rollup/plugin-typescript");
-import dts from "rollup-plugin-dts";
+const dts = require("rollup-plugin-dts");
-import { terser } from "rollup-plugin-terser";
+const postcss = require("rollup-plugin-postcss");
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+const { terser } = require("rollup-plugin-terser");
+const peerDepsExternal = require('rollup-plugin-peer-deps-external');
 
 const packageJson = require("./package.json");
 
-export default [
+module.exports = [
   {
     input: "src/index.ts",
     output: [
@@ -23,12 +24,23 @@ export default [
       },
     ],
     plugins: [
+      postcss({
+        minimize: true,
+				extensions: ['.css']
+      }),
       peerDepsExternal(),
-      resolve(),
+      nodeResolve({
+        extensions: ['.css']
+      }),
       commonjs(),
       typescript({ tsconfig: "./tsconfig.json" }),
-      terser(),
+      terser()
     ],
-    external: ["react", "react-dom", "styled-components"]
+    external: ["react", "react-dom", "index.css"]
+  },
+  {
+    input: "dist/esm/index.d.ts",
+    output: [{ file: "dist/index.d.ts", format: "esm" }],
+    plugins: [dts.default()],
   }
 ];

packages/bruno-graphql-docs/src/GraphDocs.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-class GraphDocs extends React.Component {
-  render() {
-    return "Graphql Docs Explorer"
-  }
-}
-
-export default GraphDocs;

packages/bruno-graphql-docs/src/components/DocExplorer.tsx

@@ -0,0 +1,233 @@
+/**
+ *  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, { ReactNode } from 'react';
+import { GraphQLSchema, isType, GraphQLNamedType, GraphQLError } from 'graphql';
+import { FieldType } from './DocExplorer/types';
+
+import FieldDoc from './DocExplorer/FieldDoc';
+import SchemaDoc from './DocExplorer/SchemaDoc';
+import SearchBox from './DocExplorer/SearchBox';
+import SearchResults from './DocExplorer/SearchResults';
+import TypeDoc from './DocExplorer/TypeDoc';
+
+type NavStackItem = {
+  name: string;
+  title?: string;
+  search?: string;
+  def?: GraphQLNamedType | FieldType;
+};
+
+const initialNav: NavStackItem = {
+  name: 'Schema',
+  title: 'Documentation Explorer',
+};
+
+type DocExplorerProps = {
+  schema?: GraphQLSchema | null;
+  schemaErrors?: readonly GraphQLError[];
+  children?: ReactNode | null;
+};
+
+type DocExplorerState = {
+  navStack: NavStackItem[];
+};
+
+/**
+ * DocExplorer
+ *
+ * Shows documentations for GraphQL definitions from the schema.
+ *
+ * Props:
+ *
+ *   - schema: A required GraphQLSchema instance that provides GraphQL document
+ *     definitions.
+ *
+ * Children:
+ *
+ *   - Any provided children will be positioned in the right-hand-side of the
+ *     top bar. Typically this will be a "close" button for temporary explorer.
+ *
+ */
+export class DocExplorer extends React.Component<
+  DocExplorerProps,
+  DocExplorerState
+> {
+  // handleClickTypeOrField: OnClickTypeFunction | OnClickFieldFunction
+  constructor(props: DocExplorerProps) {
+    super(props);
+
+    this.state = { navStack: [initialNav] };
+  }
+
+  shouldComponentUpdate(
+    nextProps: DocExplorerProps,
+    nextState: DocExplorerState,
+  ) {
+    return (
+      this.props.schema !== nextProps.schema ||
+      this.state.navStack !== nextState.navStack ||
+      this.props.schemaErrors !== nextProps.schemaErrors
+    );
+  }
+
+  render() {
+    const { schema, schemaErrors } = this.props;
+    const navStack = this.state.navStack;
+    const navItem = navStack[navStack.length - 1];
+
+    let content;
+    if (schemaErrors) {
+      content = (
+        <div className="error-container">{'Error fetching schema'}</div>
+      );
+    } else if (schema === undefined) {
+      // Schema is undefined when it is being loaded via introspection.
+      content = (
+        <div className="spinner-container">
+          <div className="spinner" />
+        </div>
+      );
+    } else if (!schema) {
+      // Schema is null when it explicitly does not exist, typically due to
+      // an error during introspection.
+      content = <div className="error-container">{'No Schema Available'}</div>;
+    } else if (navItem.search) {
+      content = (
+        <SearchResults
+          searchValue={navItem.search}
+          withinType={navItem.def as GraphQLNamedType}
+          schema={schema}
+          onClickType={this.handleClickType}
+          onClickField={this.handleClickField}
+        />
+      );
+    } else if (navStack.length === 1) {
+      content = (
+        <SchemaDoc schema={schema} onClickType={this.handleClickType} />
+      );
+    } else if (isType(navItem.def)) {
+      content = (
+        <TypeDoc
+          schema={schema}
+          type={navItem.def}
+          onClickType={this.handleClickType}
+          onClickField={this.handleClickField}
+        />
+      );
+    } else {
+      content = (
+        <FieldDoc
+          field={navItem.def as FieldType}
+          onClickType={this.handleClickType}
+        />
+      );
+    }
+
+    const shouldSearchBoxAppear =
+      navStack.length === 1 ||
+      (isType(navItem.def) && 'getFields' in navItem.def);
+
+    let prevName;
+    if (navStack.length > 1) {
+      prevName = navStack[navStack.length - 2].name;
+    }
+
+    return (
+      <div className="graphql-docs-container">
+        <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}`}>
+                {prevName}
+              </button>
+            )}
+            <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">
+            {shouldSearchBoxAppear && (
+              <SearchBox
+                value={navItem.search}
+                placeholder={`Search ${navItem.name}...`}
+                onSearch={this.handleSearch}
+              />
+            )}
+            {content}
+          </div>
+        </section>
+      </div>
+    );
+  }
+
+  // Public API
+  showDoc(typeOrField: GraphQLNamedType | FieldType) {
+    const navStack = this.state.navStack;
+    const topNav = navStack[navStack.length - 1];
+    if (topNav.def !== typeOrField) {
+      this.setState({
+        navStack: navStack.concat([
+          {
+            name: typeOrField.name,
+            def: typeOrField,
+          },
+        ]),
+      });
+    }
+  }
+
+  // Public API
+  showDocForReference(reference: any) {
+    if (reference && reference.kind === 'Type') {
+      this.showDoc(reference.type);
+    } else if (reference.kind === 'Field') {
+      this.showDoc(reference.field);
+    } else if (reference.kind === 'Argument' && reference.field) {
+      this.showDoc(reference.field);
+    } else if (reference.kind === 'EnumValue' && reference.type) {
+      this.showDoc(reference.type);
+    }
+  }
+
+  // Public API
+  showSearch(search: string) {
+    const navStack = this.state.navStack.slice();
+    const topNav = navStack[navStack.length - 1];
+    navStack[navStack.length - 1] = { ...topNav, search };
+    this.setState({ navStack });
+  }
+
+  reset() {
+    this.setState({ navStack: [initialNav] });
+  }
+
+  handleNavBackClick = () => {
+    if (this.state.navStack.length > 1) {
+      this.setState({ navStack: this.state.navStack.slice(0, -1) });
+    }
+  };
+
+  handleClickType = (type: GraphQLNamedType) => {
+    this.showDoc(type);
+  };
+
+  handleClickField = (field: FieldType) => {
+    this.showDoc(field);
+  };
+
+  handleSearch = (value: string) => {
+    this.showSearch(value);
+  };
+}

packages/bruno-graphql-docs/src/components/DocExplorer/Argument.tsx

@@ -0,0 +1,33 @@
+/**
+ *  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 { GraphQLArgument } from 'graphql';
+import TypeLink from './TypeLink';
+import DefaultValue from './DefaultValue';
+import { OnClickTypeFunction } from './types';
+
+type ArgumentProps = {
+  arg: GraphQLArgument;
+  onClickType: OnClickTypeFunction;
+  showDefaultValue?: boolean;
+};
+
+export default function Argument({
+  arg,
+  onClickType,
+  showDefaultValue,
+}: ArgumentProps) {
+  return (
+    <span className="arg">
+      <span className="arg-name">{arg.name}</span>
+      {': '}
+      <TypeLink type={arg.type} onClick={onClickType} />
+      {showDefaultValue !== false && <DefaultValue field={arg} />}
+    </span>
+  );
+}

packages/bruno-graphql-docs/src/components/DocExplorer/DefaultValue.tsx

@@ -0,0 +1,37 @@
+/**
+ *  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 { astFromValue, print, ValueNode } from 'graphql';
+import { FieldType } from './types';
+
+const printDefault = (ast?: ValueNode | null): string => {
+  if (!ast) {
+    return '';
+  }
+  return print(ast);
+};
+
+type DefaultValueProps = {
+  field: FieldType;
+};
+
+export default function DefaultValue({ field }: DefaultValueProps) {
+  // field.defaultValue could be null or false, so be careful here!
+  if ('defaultValue' in field && field.defaultValue !== undefined) {
+    return (
+      <span>
+        {' = '}
+        <span className="arg-default-value">
+          {printDefault(astFromValue(field.defaultValue, field.type))}
+        </span>
+      </span>
+    );
+  }
+
+  return null;
+}

packages/bruno-graphql-docs/src/components/DocExplorer/Directive.tsx

@@ -0,0 +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 React from 'react';
+import { DirectiveNode } from 'graphql';
+
+type DirectiveProps = {
+  directive: DirectiveNode;
+};
+
+export default function Directive({ directive }: DirectiveProps) {
+  return (
+    <span className="doc-category-item" id={directive.name.value}>
+      {'@'}
+      {directive.name.value}
+    </span>
+  );
+}

packages/bruno-graphql-docs/src/components/DocExplorer/FieldDoc.tsx

@@ -0,0 +1,129 @@
+/**
+ *  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 Argument from './Argument';
+import Directive from './Directive';
+import MarkdownContent from './MarkdownContent';
+import TypeLink from './TypeLink';
+import { GraphQLArgument, DirectiveNode } from 'graphql';
+import { OnClickTypeFunction, FieldType } from './types';
+
+type FieldDocProps = {
+  field?: FieldType;
+  onClickType: OnClickTypeFunction;
+};
+
+export default function FieldDoc({ field, onClickType }: FieldDocProps) {
+  const [showDeprecated, handleShowDeprecated] = React.useState(false);
+  let argsDef;
+  let deprecatedArgsDef;
+  if (field && 'args' in field && field.args.length > 0) {
+    argsDef = (
+      <div id="doc-args" className="doc-category">
+        <div className="doc-category-title">{'arguments'}</div>
+        {field.args
+          .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}
+              />
+              {arg && 'deprecationReason' in arg && (
+                <MarkdownContent
+                  className="doc-deprecation"
+                  markdown={arg?.deprecationReason}
+                />
+              )}
+            </div>
+          ))}
+      </div>
+    );
+    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)}>
+              {'Show deprecated arguments...'}
+            </button>
+          ) : (
+            deprecatedArgs.map((arg, i) => (
+              <div key={i}>
+                <div>
+                  <Argument arg={arg} onClickType={onClickType} />
+                </div>
+                <MarkdownContent
+                  className="doc-value-description"
+                  markdown={arg.description}
+                />
+                {arg && 'deprecationReason' in arg && (
+                  <MarkdownContent
+                    className="doc-deprecation"
+                    markdown={arg?.deprecationReason}
+                  />
+                )}
+              </div>
+            ))
+          )}
+        </div>
+      );
+    }
+  }
+
+  let directivesDef;
+  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>
+        {field.astNode.directives.map((directive: DirectiveNode) => (
+          <div key={directive.name.value} className="doc-category-item">
+            <div>
+              <Directive directive={directive} />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <MarkdownContent
+        className="doc-type-description"
+        markdown={field?.description || 'No Description'}
+      />
+      {field && 'deprecationReason' in field && (
+        <MarkdownContent
+          className="doc-deprecation"
+          markdown={field?.deprecationReason}
+        />
+      )}
+      <div className="doc-category">
+        <div className="doc-category-title">{'type'}</div>
+        <TypeLink type={field?.type} onClick={onClickType} />
+      </div>
+      {argsDef}
+      {directivesDef}
+      {deprecatedArgsDef}
+    </div>
+  );
+}

packages/bruno-graphql-docs/src/components/DocExplorer/MarkdownContent.tsx

@@ -0,0 +1,37 @@
+/**
+ *  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 MD from 'markdown-it';
+
+type Maybe<T> = T | null | undefined;
+
+const md = new MD({
+  // render urls as links, à la github-flavored markdown
+  linkify: true,
+});
+
+type MarkdownContentProps = {
+  markdown?: Maybe<string>;
+  className?: string;
+};
+
+export default function MarkdownContent({
+  markdown,
+  className,
+}: MarkdownContentProps) {
+  if (!markdown) {
+    return <div />;
+  }
+
+  return (
+    <div
+      className={className}
+      dangerouslySetInnerHTML={{ __html: md.render(markdown) }}
+    />
+  );
+}

packages/bruno-graphql-docs/src/components/DocExplorer/SchemaDoc.tsx

@@ -0,0 +1,59 @@
+/**
+ *  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 TypeLink from './TypeLink';
+import MarkdownContent from './MarkdownContent';
+import { GraphQLSchema } from 'graphql';
+import { OnClickTypeFunction } from './types';
+
+type SchemaDocProps = {
+  schema: GraphQLSchema;
+  onClickType: OnClickTypeFunction;
+};
+
+// Render the top level Schema
+export default function SchemaDoc({ schema, onClickType }: SchemaDocProps) {
+  const queryType = schema.getQueryType();
+  const mutationType = schema.getMutationType && schema.getMutationType();
+  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.'
+        }
+      />
+      <div className="doc-category">
+        <div className="doc-category-title">{'root types'}</div>
+        <div className="doc-category-item">
+          <span className="keyword">{'query'}</span>
+          {': '}
+          <TypeLink type={queryType} onClick={onClickType} />
+        </div>
+        {mutationType && (
+          <div className="doc-category-item">
+            <span className="keyword">{'mutation'}</span>
+            {': '}
+            <TypeLink type={mutationType} onClick={onClickType} />
+          </div>
+        )}
+        {subscriptionType && (
+          <div className="doc-category-item">
+            <span className="keyword">{'subscription'}</span>
+            {': '}
+            <TypeLink type={subscriptionType} onClick={onClickType} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

packages/bruno-graphql-docs/src/components/DocExplorer/SearchBox.tsx

@@ -0,0 +1,71 @@
+/**
+ *  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, { ChangeEventHandler } from 'react';
+
+import debounce from '../../utility/debounce';
+
+type OnSearchFn = (value: string) => void;
+
+type SearchBoxProps = {
+  value?: string;
+  placeholder: string;
+  onSearch: OnSearchFn;
+};
+
+type SearchBoxState = {
+  value: string;
+};
+
+export default class SearchBox extends React.Component<
+  SearchBoxProps,
+  SearchBoxState
+> {
+  debouncedOnSearch: OnSearchFn;
+
+  constructor(props: SearchBoxProps) {
+    super(props);
+    this.state = { value: props.value || '' };
+    this.debouncedOnSearch = debounce(200, this.props.onSearch);
+  }
+
+  render() {
+    return (
+      <label className="search-box">
+        <div className="search-box-icon" aria-hidden="true">
+          {'\u26b2'}
+        </div>
+        <input
+          value={this.state.value}
+          onChange={this.handleChange}
+          type="text"
+          placeholder={this.props.placeholder}
+          aria-label={this.props.placeholder}
+        />
+        {this.state.value && (
+          <button
+            className="search-box-clear"
+            onClick={this.handleClear}
+            aria-label="Clear search input">
+            {'\u2715'}
+          </button>
+        )}
+      </label>
+    );
+  }
+
+  handleChange: ChangeEventHandler<HTMLInputElement> = event => {
+    const value = event.currentTarget.value;
+    this.setState({ value });
+    this.debouncedOnSearch(value);
+  };
+
+  handleClear = () => {
+    this.setState({ value: '' });
+    this.props.onSearch('');
+  };
+}

packages/bruno-graphql-docs/src/components/DocExplorer/SearchResults.tsx

@@ -0,0 +1,164 @@
+/**
+ *  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, { ReactNode } from 'react';
+import { GraphQLSchema, GraphQLNamedType } from 'graphql';
+
+import Argument from './Argument';
+import TypeLink from './TypeLink';
+import { OnClickFieldFunction, OnClickTypeFunction } from './types';
+
+type SearchResultsProps = {
+  schema: GraphQLSchema;
+  withinType?: GraphQLNamedType;
+  searchValue: string;
+  onClickType: OnClickTypeFunction;
+  onClickField: OnClickFieldFunction;
+};
+
+export default class SearchResults extends React.Component<
+  SearchResultsProps,
+  {}
+> {
+  shouldComponentUpdate(nextProps: SearchResultsProps) {
+    return (
+      this.props.schema !== nextProps.schema ||
+      this.props.searchValue !== nextProps.searchValue
+    );
+  }
+
+  render() {
+    const searchValue = this.props.searchValue;
+    const withinType = this.props.withinType;
+    const schema = this.props.schema;
+    const onClickType = this.props.onClickType;
+    const onClickField = this.props.onClickField;
+
+    const matchedWithin: ReactNode[] = [];
+    const matchedTypes: ReactNode[] = [];
+    const matchedFields: ReactNode[] = [];
+
+    const typeMap = schema.getTypeMap();
+    let typeNames = Object.keys(typeMap);
+
+    // Move the within type name to be the first searched.
+    if (withinType) {
+      typeNames = typeNames.filter(n => n !== withinType.name);
+      typeNames.unshift(withinType.name);
+    }
+
+    for (const typeName of typeNames) {
+      if (
+        matchedWithin.length + matchedTypes.length + matchedFields.length >=
+        100
+      ) {
+        break;
+      }
+
+      const type = typeMap[typeName];
+      if (withinType !== type && isMatch(typeName, searchValue)) {
+        matchedTypes.push(
+          <div className="doc-category-item" key={typeName}>
+            <TypeLink type={type} onClick={onClickType} />
+          </div>,
+        );
+      }
+
+      if (type && 'getFields' in type) {
+        const fields = type.getFields();
+        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),
+              );
+              if (matchingArgs.length === 0) {
+                return;
+              }
+            } else {
+              return;
+            }
+          }
+
+          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)}>
+                {field.name}
+              </a>
+              {matchingArgs && [
+                '(',
+                <span key="args">
+                  {matchingArgs.map(arg => (
+                    <Argument
+                      key={arg.name}
+                      arg={arg}
+                      onClickType={onClickType}
+                      showDefaultValue={false}
+                    />
+                  ))}
+                </span>,
+                ')',
+              ]}
+            </div>
+          );
+
+          if (withinType === type) {
+            matchedWithin.push(match);
+          } else {
+            matchedFields.push(match);
+          }
+        });
+      }
+    }
+
+    if (
+      matchedWithin.length + matchedTypes.length + matchedFields.length ===
+      0
+    ) {
+      return <span className="doc-alert-text">{'No results found.'}</span>;
+    }
+
+    if (withinType && matchedTypes.length + matchedFields.length > 0) {
+      return (
+        <div>
+          {matchedWithin}
+          <div className="doc-category">
+            <div className="doc-category-title">{'other results'}</div>
+            {matchedTypes}
+            {matchedFields}
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="doc-search-items">
+        {matchedWithin}
+        {matchedTypes}
+        {matchedFields}
+      </div>
+    );
+  }
+}
+
+function isMatch(sourceText: string, searchValue: string) {
+  try {
+    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;
+  }
+}

packages/bruno-graphql-docs/src/components/DocExplorer/TypeDoc.tsx

@@ -0,0 +1,260 @@
+/**
+ *  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, { ReactNode } from 'react';
+import {
+  GraphQLSchema,
+  GraphQLObjectType,
+  GraphQLInterfaceType,
+  GraphQLUnionType,
+  GraphQLEnumType,
+  GraphQLType,
+  GraphQLEnumValue,
+} from 'graphql';
+
+import Argument from './Argument';
+import MarkdownContent from './MarkdownContent';
+import TypeLink from './TypeLink';
+import DefaultValue from './DefaultValue';
+import { FieldType, OnClickTypeFunction, OnClickFieldFunction } from './types';
+
+type TypeDocProps = {
+  schema: GraphQLSchema;
+  type: GraphQLType;
+  onClickType: OnClickTypeFunction;
+  onClickField: OnClickFieldFunction;
+};
+
+type TypeDocState = {
+  showDeprecated: boolean;
+};
+
+export default class TypeDoc extends React.Component<
+  TypeDocProps,
+  TypeDocState
+> {
+  constructor(props: TypeDocProps) {
+    super(props);
+    this.state = { showDeprecated: false };
+  }
+
+  shouldComponentUpdate(nextProps: TypeDocProps, nextState: TypeDocState) {
+    return (
+      this.props.type !== nextProps.type ||
+      this.props.schema !== nextProps.schema ||
+      this.state.showDeprecated !== nextState.showDeprecated
+    );
+  }
+
+  render() {
+    const schema = this.props.schema;
+    const type = this.props.type;
+    const onClickType = this.props.onClickType;
+    const onClickField = this.props.onClickField;
+
+    let typesTitle: string | null = null;
+    let types: readonly (GraphQLObjectType | GraphQLInterfaceType)[] = [];
+    if (type instanceof GraphQLUnionType) {
+      typesTitle = 'possible types';
+      types = schema.getPossibleTypes(type);
+    } else if (type instanceof GraphQLInterfaceType) {
+      typesTitle = 'implementations';
+      types = schema.getPossibleTypes(type);
+    } else if (type instanceof GraphQLObjectType) {
+      typesTitle = 'implements';
+      types = type.getInterfaces();
+    }
+
+    let typesDef;
+    if (types && types.length > 0) {
+      typesDef = (
+        <div id="doc-types" className="doc-category">
+          <div className="doc-category-title">{typesTitle}</div>
+          {types.map(subtype => (
+            <div key={subtype.name} className="doc-category-item">
+              <TypeLink type={subtype} onClick={onClickType} />
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    // InputObject and Object
+    let fieldsDef;
+    let deprecatedFieldsDef;
+    if (type && 'getFields' in type) {
+      const fieldMap = type.getFields();
+      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}
+              />
+            ))}
+        </div>
+      );
+
+      const deprecatedFields = fields.filter(field =>
+        Boolean(field.deprecationReason),
+      );
+      if (deprecatedFields.length > 0) {
+        deprecatedFieldsDef = (
+          <div id="doc-deprecated-fields" className="doc-category">
+            <div className="doc-category-title">{'deprecated fields'}</div>
+            {!this.state.showDeprecated ? (
+              <button className="show-btn" onClick={this.handleShowDeprecated}>
+                {'Show deprecated fields...'}
+              </button>
+            ) : (
+              deprecatedFields.map(field => (
+                <Field
+                  key={field.name}
+                  type={type}
+                  field={field}
+                  onClickType={onClickType}
+                  onClickField={onClickField}
+                />
+              ))
+            )}
+          </div>
+        );
+      }
+    }
+
+    let valuesDef: ReactNode;
+    let deprecatedValuesDef: ReactNode;
+    if (type instanceof GraphQLEnumType) {
+      const values = type.getValues();
+      valuesDef = (
+        <div className="doc-category">
+          <div className="doc-category-title">{'values'}</div>
+          {values
+            .filter(value => Boolean(!value.deprecationReason))
+            .map(value => (
+              <EnumValue key={value.name} value={value} />
+            ))}
+        </div>
+      );
+
+      const deprecatedValues = values.filter(value =>
+        Boolean(value.deprecationReason),
+      );
+      if (deprecatedValues.length > 0) {
+        deprecatedValuesDef = (
+          <div className="doc-category">
+            <div className="doc-category-title">{'deprecated values'}</div>
+            {!this.state.showDeprecated ? (
+              <button className="show-btn" onClick={this.handleShowDeprecated}>
+                {'Show deprecated values...'}
+              </button>
+            ) : (
+              deprecatedValues.map(value => (
+                <EnumValue key={value.name} value={value} />
+              ))
+            )}
+          </div>
+        );
+      }
+    }
+
+    return (
+      <div>
+        <MarkdownContent
+          className="doc-type-description"
+          markdown={
+            ('description' in type && type.description) || 'No Description'
+          }
+        />
+        {type instanceof GraphQLObjectType && typesDef}
+        {fieldsDef}
+        {deprecatedFieldsDef}
+        {valuesDef}
+        {deprecatedValuesDef}
+        {!(type instanceof GraphQLObjectType) && typesDef}
+      </div>
+    );
+  }
+
+  handleShowDeprecated = () => this.setState({ showDeprecated: true });
+}
+
+type FieldProps = {
+  type: GraphQLType;
+  field: FieldType;
+  onClickType: OnClickTypeFunction;
+  onClickField: OnClickFieldFunction;
+};
+
+function Field({ type, field, onClickType, onClickField }: FieldProps) {
+  return (
+    <div className="doc-category-item">
+      <a
+        className="field-name"
+        onClick={event => onClickField(field, type, event)}>
+        {field.name}
+      </a>
+      {'args' in field &&
+        field.args &&
+        field.args.length > 0 && [
+          '(',
+          <span key="args">
+            {field.args
+              .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}
+        />
+      )}
+      {'deprecationReason' in field && field.deprecationReason && (
+        <MarkdownContent
+          className="doc-deprecation"
+          markdown={field.deprecationReason}
+        />
+      )}
+    </div>
+  );
+}
+
+type EnumValue = {
+  value: GraphQLEnumValue;
+};
+
+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}
+        />
+      )}
+    </div>
+  );
+}

packages/bruno-graphql-docs/src/components/DocExplorer/TypeLink.tsx

@@ -0,0 +1,58 @@
+/**
+ *  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 {
+  GraphQLList,
+  GraphQLNonNull,
+  GraphQLType,
+  GraphQLNamedType,
+} from 'graphql';
+import { OnClickTypeFunction } from './types';
+
+type Maybe<T> = T | null | undefined;
+
+type TypeLinkProps = {
+  type?: Maybe<GraphQLType>;
+  onClick?: OnClickTypeFunction;
+};
+
+export default function TypeLink(props: TypeLinkProps) {
+  const onClick = props.onClick ? props.onClick : () => null;
+  return renderType(props.type, onClick);
+}
+
+function renderType(type: Maybe<GraphQLType>, onClick: OnClickTypeFunction) {
+  if (type instanceof GraphQLNonNull) {
+    return (
+      <span>
+        {renderType(type.ofType, onClick)}
+        {'!'}
+      </span>
+    );
+  }
+  if (type instanceof GraphQLList) {
+    return (
+      <span>
+        {'['}
+        {renderType(type.ofType, onClick)}
+        {']'}
+      </span>
+    );
+  }
+  return (
+    <a
+      className="type-name"
+      onClick={event => {
+        event.preventDefault();
+        onClick(type as GraphQLNamedType, event);
+      }}
+      href="#">
+      {type?.name}
+    </a>
+  );
+}

packages/bruno-graphql-docs/src/components/DocExplorer/types.ts

@@ -0,0 +1,35 @@
+import { MouseEvent } from 'react';
+import {
+  GraphQLField,
+  GraphQLInputField,
+  GraphQLArgument,
+  GraphQLObjectType,
+  GraphQLInterfaceType,
+  GraphQLInputObjectType,
+  GraphQLType,
+  GraphQLNamedType,
+} from 'graphql';
+
+export type FieldType =
+  | GraphQLField<{}, {}, {}>
+  | GraphQLInputField
+  | GraphQLArgument;
+
+export type OnClickFieldFunction = (
+  field: FieldType,
+  type?:
+    | GraphQLObjectType
+    | GraphQLInterfaceType
+    | GraphQLInputObjectType
+    | GraphQLType,
+  event?: MouseEvent,
+) => void;
+
+export type OnClickTypeFunction = (
+  type: GraphQLNamedType,
+  event?: MouseEvent<HTMLAnchorElement>,
+) => void;
+
+export type OnClickFieldOrTypeFunction =
+  | OnClickFieldFunction
+  | OnClickTypeFunction;

packages/bruno-graphql-docs/src/index.css

@@ -0,0 +1,298 @@
+.graphql-docs-container .doc-explorer {
+  background: white;
+}
+
+.graphql-docs-container .doc-explorer-title-bar,
+.graphql-docs-container .history-title-bar {
+  cursor: default;
+  display: flex;
+  height: 34px;
+  line-height: 14px;
+  padding: 8px 8px 5px;
+  position: relative;
+  user-select: none;
+}
+
+.graphql-docs-container .doc-explorer-title,
+.graphql-docs-container .history-title {
+  flex: 1;
+  font-weight: bold;
+  overflow-x: hidden;
+  padding: 10px 0 10px 10px;
+  text-align: center;
+  text-overflow: ellipsis;
+  user-select: text;
+  white-space: nowrap;
+}
+
+.graphql-docs-container .doc-explorer-back {
+  color: #3B5998;
+  cursor: pointer;
+  margin: -7px 0 -6px -8px;
+  overflow-x: hidden;
+  padding: 17px 12px 16px 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: 0;
+  border: 0;
+  line-height: 14px;
+}
+
+.doc-explorer-narrow .doc-explorer-back {
+  width: 0;
+}
+
+.graphql-docs-container .doc-explorer-back:before {
+  border-left: 2px solid #3B5998;
+  border-top: 2px solid #3B5998;
+  content: '';
+  display: inline-block;
+  height: 9px;
+  margin: 0 3px -1px 0;
+  position: relative;
+  transform: rotate(-45deg);
+  width: 9px;
+}
+
+.graphql-docs-container .doc-explorer-rhs {
+  position: relative;
+}
+
+.graphql-docs-container .doc-explorer-contents,
+.graphql-docs-container .history-contents {
+  background-color: #ffffff;
+  border-top: 1px solid #d6d6d6;
+  bottom: 0;
+  left: 0;
+  overflow-y: auto;
+  padding: 20px 15px;
+  position: absolute;
+  right: 0;
+  top: 47px;
+}
+
+.graphql-docs-container .doc-explorer-contents {
+  min-width: 300px;
+}
+
+.graphql-docs-container .doc-type-description p:first-child ,
+.graphql-docs-container .doc-type-description blockquote:first-child {
+  margin-top: 0;
+}
+
+.graphql-docs-container .doc-explorer-contents a {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.graphql-docs-container .doc-explorer-contents a:hover {
+  text-decoration: underline;
+}
+
+.graphql-docs-container .doc-value-description > :first-child {
+  margin-top: 4px;
+}
+
+.graphql-docs-container .doc-value-description > :last-child {
+  margin-bottom: 4px;
+}
+
+.graphql-docs-container .doc-type-description code,
+.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);
+  font-size: 12px;
+  line-height: 1.50001;
+  font-variant-ligatures: none;
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  word-break: normal;
+  -webkit-tab-size: 4;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+.graphql-docs-container .doc-type-description code,
+.graphql-docs-container .doc-category code {
+  padding: 2px 3px 1px;
+  border: 1px solid var(--saf-0);
+  border-radius: 3px;
+  background-color: rgba(var(--sk_foreground_min,29,28,29),.04);
+  color: #e01e5a;
+  background-color: white;
+}
+
+.graphql-docs-container .doc-category {
+  margin: 20px 0;
+}
+
+.graphql-docs-container .doc-category-title {
+  border-bottom: 1px solid #e0e0e0;
+  color: #777;
+  cursor: default;
+  font-size: 14px;
+  font-variant: small-caps;
+  font-weight: bold;
+  letter-spacing: 1px;
+  margin: 0 -15px 10px 0;
+  padding: 10px 0;
+  user-select: none;
+}
+
+.graphql-docs-container .doc-category-item {
+  margin: 12px 0;
+  color: #555;
+}
+
+.graphql-docs-container .keyword {
+  color: #B11A04;
+}
+
+.graphql-docs-container .type-name {
+  color: #CA9800;
+}
+
+.graphql-docs-container .field-name {
+  color: #1F61A0;
+}
+
+.graphql-docs-container .field-short-description {
+  color: #666;
+  margin-left: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.graphql-docs-container .enum-value {
+  color: #0B7FC7;
+}
+
+.graphql-docs-container .arg-name {
+  color: #8B2BB9;
+}
+
+.graphql-docs-container .arg {
+  display: block;
+  margin-left: 1em;
+}
+
+.graphql-docs-container .arg:first-child:last-child,
+.graphql-docs-container .arg:first-child:nth-last-child(2),
+.graphql-docs-container .arg:first-child:nth-last-child(2) ~ .arg {
+  display: inherit;
+  margin: inherit;
+}
+
+.graphql-docs-container .arg:first-child:nth-last-child(2):after {
+  content: ', ';
+}
+
+.graphql-docs-container .arg-default-value {
+  color: #43A047;
+}
+
+.graphql-docs-container .doc-deprecation {
+  background: #fffae8;
+  box-shadow: inset 0 0 1px #bfb063;
+  color: #867F70;
+  line-height: 16px;
+  margin: 8px -8px;
+  max-height: 80px;
+  overflow: hidden;
+  padding: 8px;
+  border-radius: 3px;
+}
+
+.graphql-docs-container .doc-deprecation:before {
+  content: 'Deprecated:';
+  color: #c79b2e;
+  cursor: default;
+  display: block;
+  font-size: 9px;
+  font-weight: bold;
+  letter-spacing: 1px;
+  line-height: 1;
+  padding-bottom: 5px;
+  text-transform: uppercase;
+  user-select: none;
+}
+
+.graphql-docs-container .doc-deprecation > :first-child {
+  margin-top: 0;
+}
+
+.graphql-docs-container .doc-deprecation > :last-child {
+  margin-bottom: 0;
+}
+
+.graphql-docs-container .show-btn {
+  -webkit-appearance: initial;
+  display: block;
+  border-radius: 3px;
+  border: solid 1px #ccc;
+  text-align: center;
+  padding: 8px 12px 10px;
+  width: 100%;
+  box-sizing: border-box;
+  background: #fbfcfc;
+  color: #555;
+  cursor: pointer;
+}
+
+.graphql-docs-container .search-box {
+  border-bottom: 1px solid #d3d6db;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  margin: -15px -15px 12px 0;
+  position: relative;
+}
+
+.graphql-docs-container .search-box-icon {
+  cursor: pointer;
+  display: block;
+  font-size: 24px;
+  transform: rotate(-45deg);
+  user-select: none;
+}
+
+.graphql-docs-container .search-box .search-box-clear {
+  background-color: #d0d0d0;
+  border-radius: 12px;
+  color: #fff;
+  cursor: pointer;
+  font-size: 11px;
+  padding: 1px 5px 2px;
+  position: absolute;
+  right: 3px;
+  user-select: none;
+  border: 0;
+}
+
+.graphql-docs-container .search-box .search-box-clear:hover {
+  background-color: #b9b9b9;
+}
+
+.graphql-docs-container .search-box > input {
+  border: none;
+  box-sizing: border-box;
+  font-size: 14px;
+  outline: none;
+  padding: 6px 24px 8px 20px;
+  width: 100%;
+}
+
+.graphql-docs-container .error-container {
+  font-weight: bold;
+  left: 0;
+  letter-spacing: 1px;
+  opacity: 0.5;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  text-transform: uppercase;
+  top: 50%;
+  transform: translate(0, -50%);
+}

packages/bruno-graphql-docs/src/index.ts

@@ -1,5 +1,8 @@
-import GraphDocs from "./GraphDocs";
+import { DocExplorer } from "./components/DocExplorer";
+
+// Todo: Rollup throws error
+import './index.css';
 
 export {
-  GraphDocs
+  DocExplorer
 }

packages/bruno-graphql-docs/src/utility/debounce.ts

@@ -0,0 +1,26 @@
+/**
+ *  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.
+ */
+
+/**
+ * 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,
+) {
+  let timeout: number | null;
+  return function (this: any, ...args: Parameters<F>) {
+    if (timeout) {
+      window.clearTimeout(timeout);
+    }
+    timeout = window.setTimeout(() => {
+      timeout = null;
+      fn.apply(this, args);
+    }, duration);
+  };
+}