+
+
+ );
+ } else if (!schema) {
+ // Schema is null when it explicitly does not exist, typically due to
+ // an error during introspection.
+ content = {'No Schema Available'}
;
+ } else if (navItem.search) {
+ content = (
+
+ {prevName && (
+
+ )}
+
+
+ {navItem.title || navItem.name}
+
+ {this.props.children}
+
+ {shouldSearchBoxAppear && (
+
+
+
+ );
+ }
+
+ return (
+ {'arguments'}
+ {field.args.map((arg: GraphQLArgument) => (
+
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/DocExplorer/MarkdownContent.tsx b/packages/graphiql-2-rfc-context/src/components/DocExplorer/MarkdownContent.tsx
new file mode 100644
index 00000000000..6a4758cc471
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/DocExplorer/MarkdownContent.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2020 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';
+import { Maybe } from '../../types';
+
+const md = new MD();
+
+type MarkdownContentProps = {
+ markdown?: Maybe
+
+ {argsDef}
+ {'type'}
+
+
+ );
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/DocExplorer/SearchBox.tsx b/packages/graphiql-2-rfc-context/src/components/DocExplorer/SearchBox.tsx
new file mode 100644
index 00000000000..429bae16205
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/DocExplorer/SearchBox.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2020 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 (
+
+ );
+ }
+
+ handleChange: ChangeEventHandler
+
+ {'root types'}
+
+ {'query'}
+ {': '}
+
+ {mutationType && (
+
+ {'mutation'}
+ {': '}
+
+ )}
+ {subscriptionType && (
+
+ {'subscription'}
+ {': '}
+
+ )}
+
+
,
+ );
+ }
+
+ if ('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 = (
+
+ {withinType !== type && [
+
+ );
+
+ if (withinType === type) {
+ matchedWithin.push(match);
+ } else {
+ matchedFields.push(match);
+ }
+ });
+ }
+ }
+
+ if (
+ matchedWithin.length + matchedTypes.length + matchedFields.length ===
+ 0
+ ) {
+ return {'No results found.'};
+ }
+
+ if (withinType && matchedTypes.length + matchedFields.length > 0) {
+ return (
+
+ {matchedWithin}
+
+ );
+ }
+
+ return (
+
+
+ {'other results'}
+ {matchedTypes}
+ {matchedFields}
+
+ {matchedWithin}
+ {matchedTypes}
+ {matchedFields}
+
+ );
+ }
+}
+
+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;
+ }
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/DocExplorer/TypeDoc.tsx b/packages/graphiql-2-rfc-context/src/components/DocExplorer/TypeDoc.tsx
new file mode 100644
index 00000000000..642d07a0d1b
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/DocExplorer/TypeDoc.tsx
@@ -0,0 +1,258 @@
+/**
+ * Copyright (c) 2020 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 = (
+
+
+ );
+ }
+
+ // InputObject and Object
+ let fieldsDef;
+ let deprecatedFieldsDef;
+ if ('getFields' in type) {
+ const fieldMap = type.getFields();
+ const fields = Object.keys(fieldMap).map(name => fieldMap[name]);
+ fieldsDef = (
+ {typesTitle}
+ {types.map(subtype => (
+
+
+ ))}
+
+
+ );
+
+ const deprecatedFields = fields.filter(field =>
+ 'isDeprecated' in field ? field.isDeprecated : true,
+ );
+ if (deprecatedFields.length > 0) {
+ deprecatedFieldsDef = (
+ {'fields'}
+ {fields
+ .filter(field =>
+ 'isDeprecated' in field ? !field.isDeprecated : true,
+ )
+ .map(field => (
+
+
+ );
+ }
+ }
+
+ let valuesDef: ReactNode;
+ let deprecatedValuesDef: ReactNode;
+ if (type instanceof GraphQLEnumType) {
+ const values = type.getValues();
+ valuesDef = (
+ {'deprecated fields'}
+ {!this.state.showDeprecated ? (
+
+ ) : (
+ deprecatedFields.map(field => (
+
+
+ );
+
+ const deprecatedValues = values.filter(value => value.isDeprecated);
+ if (deprecatedValues.length > 0) {
+ deprecatedValuesDef = (
+ {'values'}
+ {values
+ .filter(value => !value.isDeprecated)
+ .map(value => (
+
+
+ );
+ }
+ }
+
+ return (
+ {'deprecated values'}
+ {!this.state.showDeprecated ? (
+
+ ) : (
+ deprecatedValues.map(value => (
+
+
+ );
+ }
+
+ handleShowDeprecated = () => this.setState({ showDeprecated: true });
+}
+
+type FieldProps = {
+ type: GraphQLType;
+ field: FieldType;
+ onClickType: OnClickTypeFunction;
+ onClickField: OnClickFieldFunction;
+};
+
+function Field({ type, field, onClickType, onClickField }: FieldProps) {
+ return (
+
+ onClickField(field, type, event)}>
+ {field.name}
+
+ {'args' in field &&
+ field.args &&
+ field.args.length > 0 && [
+ '(',
+
+ {field.args.map(arg => (
+
+ );
+}
+
+type EnumValue = {
+ value: GraphQLEnumValue;
+};
+
+function EnumValue({ value }: EnumValue) {
+ return (
+
+
+ );
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/DocExplorer/TypeLink.tsx b/packages/graphiql-2-rfc-context/src/components/DocExplorer/TypeLink.tsx
new file mode 100644
index 00000000000..b4a40037f72
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/DocExplorer/TypeLink.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2020 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';
+
+import { Maybe } from '../../types';
+
+type TypeLinkProps = {
+ type?: Maybe{value.name}
+ -
+ {operations.map((operation, i) => {
+ const opName = operation.name
+ ? operation.name.value
+ : `
- setHighlight(operation)} + onMouseOut={() => setHighlight(null)} + onMouseUp={() => { + setOptionsOpen(false); + session.executeOperation(operation?.name?.value); + }}> + {opName} + + ); + })} +
+
+ {options}
+
+ );
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/GraphiQL.tsx b/packages/graphiql-2-rfc-context/src/components/GraphiQL.tsx
new file mode 100644
index 00000000000..bec1c11ae2f
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/GraphiQL.tsx
@@ -0,0 +1,796 @@
+/**
+ * Copyright (c) 2020 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, { ComponentType, PropsWithChildren } from 'react';
+import { GraphQLSchema, OperationDefinitionNode, GraphQLType } from 'graphql';
+
+import type { SchemaConfig } from 'graphql-language-service';
+
+import { ExecuteButton } from './ExecuteButton';
+import { ToolbarButton } from './ToolbarButton';
+import { QueryEditor } from './QueryEditor';
+import { VariableEditor } from './VariableEditor';
+import { ResultViewer } from './ResultViewer';
+import { DocExplorer } from './DocExplorer';
+import { QueryHistory } from './QueryHistory';
+import StorageAPI, { Storage } from '../utility/StorageAPI';
+import { VariableToType } from '../utility/getQueryFacts';
+
+import find from '../utility/find';
+import { GetDefaultFieldNamesFn, fillLeafs } from '../utility/fillLeafs';
+
+import {
+ SchemaProvider,
+ SchemaContext,
+} from '../api/providers/GraphiQLSchemaProvider';
+import { EditorsProvider } from '../api/providers/GraphiQLEditorsProvider';
+import {
+ SessionProvider,
+ SessionContext,
+} from '../api/providers/GraphiQLSessionProvider';
+import { getFetcher } from '../api/common';
+
+import { Unsubscribable, Fetcher, ReactNodeLike } from '../types';
+import { Provider, useThemeLayout } from './common/themes/provider';
+import Tabs from './common/Toolbar/Tabs';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../i18n';
+
+const majorVersion = parseInt(React.version.slice(0, 2), 10);
+
+if (majorVersion < 16) {
+ throw Error(
+ [
+ 'GraphiQL 0.18.0 and after is not compatible with React 15 or below.',
+ 'If you are using a CDN source (jsdelivr, unpkg, etc), follow this example:',
+ 'https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html#L49',
+ ].join('\n'),
+ );
+}
+
+declare namespace global {
+ export let g: GraphiQLInternals;
+}
+
+type Formatters = {
+ formatResult: (result: any) => string;
+ formatError: (rawError: Error) => string;
+};
+
+export type Maybe {
+ // this.editorBarComponent = n;
+ // }}
+ // className="editorBar"
+ // onDoubleClick={this.handleResetResize}
+ // onMouseDown={this.handleResizeStart}>
+ //
+
+
+
+
+ );
+
+ const variables = (
+
+
+
+
+ );
+
+ const response = (
+
+
+ <>
+ {this.state.isWaitingForResponse && (
+
+
+ );
+
+ return (
+
+
+
+ {logo}
+ null}
+ />
+ null}
+ title="Show History"
+ label="History"
+ />
+ null}
+ title="Open Documentation Explorer"
+ label="Docs"
+ />
+
+
+ }
+ session={{
+ input: operationEditor,
+ response,
+ console: variables,
+ }}
+ navPanels={[
+ // TODO: rewrite this for plugin API
+ ...(true
+ ? [
+ {
+ key: 'docs',
+ size: 'sidebar' as const,
+ component: (
+
+ {({ schema }) =>
+ ),
+ },
+ ]
+ : []),
+ // TODO: rewrite this for plugin API
+
+ ...(true
+ ? [
+ {
+ key: 'history',
+ size: 'sidebar' as const,
+ component: (
+
+ {session => {
+ return (
+ {
+ if (operation) {
+ session.changeOperation(operation);
+ }
+ if (vars) {
+ session.changeVariables(vars);
+ }
+ }}
+ storage={this._storage}
+ queryID={this._editorQueryID}>
+
+
+ );
+ }}
+
+ ),
+ },
+ ]
+ : []),
+ ]}
+ />
+
+ );
+ }
+
+ /**
+ * Inspect the query, automatically filling in selection sets for non-leaf
+ * fields which do not yet have them.
+ *
+ * @public
+ */
+ public autoCompleteLeafs() {
+ const { insertions, result } = fillLeafs(
+ this.context.schema,
+ this.context?.operation.text,
+ this.props.getDefaultFieldNames,
+ );
+ if (insertions && insertions.length > 0) {
+ // @ts-ignore
+ const editor = this.getQueryEditor();
+ if (editor) {
+ editor.operation(() => {
+ const cursor = editor.getCursor();
+ const cursorIndex = editor.indexFromPos(cursor);
+ editor.setValue(result || '');
+ let added = 0;
+ const markers = insertions.map(({ index, string }) =>
+ editor.markText(
+ editor.posFromIndex(index + added),
+ editor.posFromIndex(index + (added += string.length)),
+ {
+ className: 'autoInsertedLeaf',
+ clearOnEnter: true,
+ title: 'Automatically added leaf fields',
+ },
+ ),
+ );
+ setTimeout(() => markers.forEach(marker => marker.clear()), 7000);
+ let newCursorIndex = cursorIndex;
+ insertions.forEach(({ index, string }) => {
+ if (index < cursorIndex) {
+ newCursorIndex += string.length;
+ }
+ });
+ editor.setCursor(editor.posFromIndex(newCursorIndex));
+ });
+ }
+ }
+ return result;
+ }
+
+ handleClickReference = (_reference: GraphQLType) => {
+ // this.setState({ docExplorerOpen: true }, () => {
+ // if (this.docExplorerComponent) {
+ // this.docExplorerComponent.showDocForReference(reference);
+ // }
+ // });
+ };
+
+ // handleStopQuery = () => {
+ // const subscription = this.state.subscription;
+ // this.setState({
+ // isWaitingForResponse: false,
+ // subscription: null,
+ // });
+ // if (subscription) {
+ // subscription.unsubscribe();
+ // }
+ // };
+
+ handlePrettifyQuery = () => {
+ // const editor = this.getQueryEditor();
+ // const editorContent = editor?.getValue() ?? '';
+ // const prettifiedEditorContent = print(parse(editorContent));
+ // if (prettifiedEditorContent !== editorContent) {
+ // editor?.setValue(prettifiedEditorContent);
+ // }
+ // const variableEditor = this.getVariableEditor();
+ // const variableEditorContent = variableEditor?.getValue() ?? '';
+ // try {
+ // const prettifiedVariableEditorContent = JSON.stringify(
+ // JSON.parse(variableEditorContent),
+ // null,
+ // 2,
+ // );
+ // if (prettifiedVariableEditorContent !== variableEditorContent) {
+ // variableEditor?.setValue(prettifiedVariableEditorContent);
+ // }
+ // } catch {
+ // /* Parsing JSON failed, skip prettification */
+ // }
+ };
+
+ handleMergeQuery = () => {
+ // const editor = this.getQueryEditor() as CodeMirror.Editor;
+ // const query = editor.getValue();
+ // if (!query) {
+ // return;
+ // }
+ // const ast = parse(query);
+ // editor.setValue(print(mergeAST(ast)));
+ };
+ handleCopyQuery = () => {
+ // const editor = this.getQueryEditor();
+ // const query = editor && editor.getValue();
+ // if (!query) {
+ // return;
+ // }
+ // copyToClipboard(query);
+ // if (this.props.onCopyQuery) {
+ // return this.props.onCopyQuery(query);
+ // }
+ };
+ handleEditOperationName = (operationName: string) => {
+ const onEditOperationName = this.props.onEditOperationName;
+ if (onEditOperationName) {
+ onEditOperationName(operationName);
+ }
+ };
+
+ handleHintInformationRender = (elem: HTMLDivElement) => {
+ elem.addEventListener('click', this._onClickHintInformation);
+
+ let onRemoveFn: EventListener;
+ elem.addEventListener(
+ 'DOMNodeRemoved',
+ (onRemoveFn = () => {
+ elem.removeEventListener('DOMNodeRemoved', onRemoveFn);
+ elem.removeEventListener('click', this._onClickHintInformation);
+ }),
+ );
+ };
+
+ private _onClickHintInformation = (
+ event: MouseEvent | React.MouseEvent,
+ ) => {
+ if (
+ event?.currentTarget &&
+ 'className' in event.currentTarget &&
+ event.currentTarget.className === 'typeName'
+ ) {
+ const typeName = event.currentTarget.innerHTML;
+ const schema = this.context.schema;
+ if (schema) {
+ const type = schema.getType(typeName);
+ if (type) {
+ // this.setState({ docExplorerOpen: true }, () => {
+ // if (this.docExplorerComponent) {
+ // this.docExplorerComponent.showDoc(type);
+ // }
+ // });
+ }
+ }
+ }
+ };
+
+ // handleToggleDocs = () => {
+ // if (typeof this.props.onToggleDocs === 'function') {
+ // this.props.onToggleDocs(!this.state.docExplorerOpen);
+ // }
+ // this.setState({ docExplorerOpen: !this.state.docExplorerOpen });
+ // this._storage.set(
+ // 'docExplorerOpen',
+ // JSON.stringify(this.state.docExplorerOpen),
+ // );
+ // };
+
+ // handleToggleHistory = () => {
+ // if (typeof this.props.onToggleHistory === 'function') {
+ // this.props.onToggleHistory(!this.state.historyPaneOpen);
+ // }
+ // this.setState({ historyPaneOpen: !this.state.historyPaneOpen });
+ // this._storage.set(
+ // 'historyPaneOpen',
+ // JSON.stringify(this.state.historyPaneOpen),
+ // );
+ // };
+
+ // private handleResizeStart = (downEvent: React.MouseEvent) => {
+ // if (!this._didClickDragBar(downEvent)) {
+ // return;
+ // }
+
+ // downEvent.preventDefault();
+
+ // const offset = downEvent.clientX - getLeft(downEvent.target as HTMLElement);
+
+ // let onMouseMove: OnMouseMoveFn = moveEvent => {
+ // if (moveEvent.buttons === 0) {
+ // return onMouseUp!();
+ // }
+
+ // const editorBar = this.editorBarComponent as HTMLElement;
+ // const leftSize = moveEvent.clientX - getLeft(editorBar) - offset;
+ // const rightSize = editorBar.clientWidth - leftSize;
+ // this.setState({ editorFlex: leftSize / rightSize });
+ // };
+
+ // let onMouseUp: OnMouseUpFn = () => {
+ // document.removeEventListener('mousemove', onMouseMove!);
+ // document.removeEventListener('mouseup', onMouseUp!);
+ // onMouseMove = null;
+ // onMouseUp = null;
+ // };
+
+ // document.addEventListener('mousemove', onMouseMove);
+ // document.addEventListener('mouseup', onMouseUp);
+ // };
+
+ // handleResetResize = () => {
+ // this.setState({ editorFlex: 1 });
+ // this._storage.set('editorFlex', JSON.stringify(this.state.editorFlex));
+ // };
+
+ // private _didClickDragBar(event: React.MouseEvent) {
+ // // Only for primary unmodified clicks
+ // if (event.button !== 0 || event.ctrlKey) {
+ // return false;
+ // }
+ // let target = event.target as Element;
+ // // Specifically the result window's drag bar.
+ // const resultWindow = this.resultViewerElement;
+ // while (target) {
+ // if (target === resultWindow) {
+ // return true;
+ // }
+ // target = target.parentNode as Element;
+ // }
+ // return false;
+ // }
+
+ // private handleDocsResizeStart: MouseEventHandler<
+ // HTMLDivElement
+ // > = downEvent => {
+ // downEvent.preventDefault();
+
+ // const hadWidth = this.state.docExplorerWidth;
+ // const offset = downEvent.clientX - getLeft(downEvent.target as HTMLElement);
+
+ // let onMouseMove: OnMouseMoveFn = moveEvent => {
+ // if (moveEvent.buttons === 0) {
+ // return onMouseUp!();
+ // }
+
+ // const app = this.graphiqlContainer as HTMLElement;
+ // const cursorPos = moveEvent.clientX - getLeft(app) - offset;
+ // const docsSize = app.clientWidth - cursorPos;
+
+ // if (docsSize < 100) {
+ // this.setState({ docExplorerOpen: false });
+ // } else {
+ // this.setState({
+ // docExplorerOpen: true,
+ // docExplorerWidth: Math.min(docsSize, 650),
+ // });
+ // }
+ // };
+
+ // let onMouseUp: OnMouseUpFn = () => {
+ // if (!this.state.docExplorerOpen) {
+ // this.setState({ docExplorerWidth: hadWidth });
+ // }
+
+ // document.removeEventListener('mousemove', onMouseMove!);
+ // document.removeEventListener('mouseup', onMouseUp!);
+ // onMouseMove = null;
+ // onMouseUp = null;
+ // };
+
+ // document.addEventListener('mousemove', onMouseMove!);
+ // document.addEventListener('mouseup', onMouseUp);
+ // };
+
+ // private handleDocsResetResize = () => {
+ // this.setState({
+ // docExplorerWidth: DEFAULT_DOC_EXPLORER_WIDTH,
+ // });
+ // };
+
+ // private handleVariableResizeStart: MouseEventHandler<
+ // HTMLDivElement
+ // > = downEvent => {
+ // downEvent.preventDefault();
+
+ // let didMove = false;
+ // const wasOpen = this.state.variableEditorOpen;
+ // const hadHeight = this.state.variableEditorHeight;
+ // const offset = downEvent.clientY - getTop(downEvent.target as HTMLElement);
+
+ // let onMouseMove: OnMouseMoveFn = moveEvent => {
+ // if (moveEvent.buttons === 0) {
+ // return onMouseUp!();
+ // }
+
+ // didMove = true;
+
+ // const editorBar = this.editorBarComponent as HTMLElement;
+ // const topSize = moveEvent.clientY - getTop(editorBar) - offset;
+ // const bottomSize = editorBar.clientHeight - topSize;
+ // if (bottomSize < 60) {
+ // this.setState({
+ // variableEditorOpen: false,
+ // variableEditorHeight: hadHeight,
+ // });
+ // } else {
+ // this.setState({
+ // variableEditorOpen: true,
+ // variableEditorHeight: bottomSize,
+ // });
+ // }
+ // };
+
+ // let onMouseUp: OnMouseUpFn = () => {
+ // if (!didMove) {
+ // this.setState({ variableEditorOpen: !wasOpen });
+ // }
+
+ // document.removeEventListener('mousemove', onMouseMove!);
+ // document.removeEventListener('mouseup', onMouseUp!);
+ // onMouseMove = null;
+ // onMouseUp = null;
+ // };
+
+ // document.addEventListener('mousemove', onMouseMove);
+ // document.addEventListener('mouseup', onMouseUp);
+ // };
+}
+
+// // Configure the UI by providing this Component as a child of GraphiQL
+function GraphiQLLogo(props: PropsWithChildren) {
+ return (
+ (props: PropsWithChildren) {
+ return (
+ (props: PropsWithChildren) {
+ return (
+ child: any,
+ component: T,
+): child is T {
+ if (
+ child?.type?.displayName &&
+ child.type.displayName === component.displayName
+ ) {
+ return true;
+ }
+
+ return child.type === component;
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/HeaderEditor.tsx b/packages/graphiql-2-rfc-context/src/components/HeaderEditor.tsx
new file mode 100644
index 00000000000..df4945f8ee9
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/HeaderEditor.tsx
@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) 2020 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 type * as CM from 'codemirror';
+import 'codemirror/addon/hint/show-hint';
+import React from 'react';
+
+import onHasCompletion from '../utility/onHasCompletion';
+import commonKeys from '../utility/commonKeys';
+
+declare module CodeMirror {
+ export interface Editor extends CM.Editor {}
+ export interface ShowHintOptions {
+ completeSingle: boolean;
+ hint: CM.HintFunction | CM.AsyncHintFunction;
+ container: HTMLElement | null;
+ }
+}
+
+type HeaderEditorProps = {
+ value?: string;
+ onEdit: (value: string) => void;
+ readOnly?: boolean;
+ onHintInformationRender: (value: HTMLDivElement) => void;
+ onPrettifyQuery: (value?: string) => void;
+ onMergeQuery: (value?: string) => void;
+ onRunQuery: (value?: string) => void;
+ editorTheme?: string;
+ active?: boolean;
+};
+
+/**
+ * HeaderEditor
+ *
+ * An instance of CodeMirror for editing headers to be passed with the GraphQL request.
+ *
+ * Props:
+ *
+ * - value: The text of the editor.
+ * - onEdit: A function called when the editor changes, given the edited text.
+ * - readOnly: Turns the editor to read-only mode.
+ *
+ */
+export class HeaderEditor extends React.Component {
+ CodeMirror: any;
+ editor: (CM.Editor & { options: any }) | null = null;
+ cachedValue: string;
+ private _node: HTMLElement | null = null;
+ ignoreChangeEvent: boolean = false;
+ constructor(props: HeaderEditorProps) {
+ super(props);
+
+ // Keep a cached version of the value, this cache will be updated when the
+ // editor is updated, which can later be used to protect the editor from
+ // unnecessary updates during the update lifecycle.
+ this.cachedValue = props.value || '';
+ }
+
+ componentDidMount() {
+ // Lazily require to ensure requiring GraphiQL outside of a Browser context
+ // does not produce an error.
+ this.CodeMirror = require('codemirror');
+ require('codemirror/addon/hint/show-hint');
+ require('codemirror/addon/edit/matchbrackets');
+ require('codemirror/addon/edit/closebrackets');
+ require('codemirror/addon/fold/brace-fold');
+ require('codemirror/addon/fold/foldgutter');
+ require('codemirror/addon/lint/lint');
+ require('codemirror/addon/search/searchcursor');
+ require('codemirror/addon/search/jump-to-line');
+ require('codemirror/addon/dialog/dialog');
+ require('codemirror/keymap/sublime');
+
+ const editor = (this.editor = this.CodeMirror(this._node, {
+ value: this.props.value || '',
+ lineNumbers: true,
+ tabSize: 2,
+ mode: 'graphql-headers',
+ theme: this.props.editorTheme || 'graphiql',
+ keyMap: 'sublime',
+ autoCloseBrackets: true,
+ matchBrackets: true,
+ showCursorWhenSelecting: true,
+ readOnly: this.props.readOnly ? 'nocursor' : false,
+ foldGutter: {
+ minFoldSize: 4,
+ },
+ gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+ extraKeys: {
+ 'Cmd-Space': () =>
+ this.editor!.showHint({
+ completeSingle: false,
+ container: this._node,
+ } as CodeMirror.ShowHintOptions),
+ 'Ctrl-Space': () =>
+ this.editor!.showHint({
+ completeSingle: false,
+ container: this._node,
+ } as CodeMirror.ShowHintOptions),
+ 'Alt-Space': () =>
+ this.editor!.showHint({
+ completeSingle: false,
+ container: this._node,
+ } as CodeMirror.ShowHintOptions),
+ 'Shift-Space': () =>
+ this.editor!.showHint({
+ completeSingle: false,
+ container: this._node,
+ } as CodeMirror.ShowHintOptions),
+ 'Cmd-Enter': () => {
+ if (this.props.onRunQuery) {
+ this.props.onRunQuery();
+ }
+ },
+ 'Ctrl-Enter': () => {
+ if (this.props.onRunQuery) {
+ this.props.onRunQuery();
+ }
+ },
+ 'Shift-Ctrl-P': () => {
+ if (this.props.onPrettifyQuery) {
+ this.props.onPrettifyQuery();
+ }
+ },
+
+ 'Shift-Ctrl-M': () => {
+ if (this.props.onMergeQuery) {
+ this.props.onMergeQuery();
+ }
+ },
+
+ ...commonKeys,
+ },
+ }));
+
+ editor.on('change', this._onEdit);
+ editor.on('keyup', this._onKeyUp);
+ editor.on('hasCompletion', this._onHasCompletion);
+ }
+
+ componentDidUpdate(prevProps: HeaderEditorProps) {
+ this.CodeMirror = require('codemirror');
+ if (!this.editor) {
+ return;
+ }
+
+ // Ensure the changes caused by this update are not interpretted as
+ // user-input changes which could otherwise result in an infinite
+ // event loop.
+ this.ignoreChangeEvent = true;
+ if (
+ this.props.value !== prevProps.value &&
+ this.props.value !== this.cachedValue
+ ) {
+ const thisValue = this.props.value || '';
+ this.cachedValue = thisValue;
+ this.editor.setValue(thisValue);
+ }
+ this.ignoreChangeEvent = false;
+ }
+
+ componentWillUnmount() {
+ if (!this.editor) {
+ return;
+ }
+ this.editor.off('change', this._onEdit);
+ this.editor.off('keyup', this._onKeyUp);
+ this.editor.off('hasCompletion', this._onHasCompletion);
+ this.editor = null;
+ }
+
+ render() {
+ return (
+
{`Explorer`}
+ {`Console`}
+
+
+
+ )}
+ {`Extensions`}
+ {`Playground`}
+
+ {props.children || (
+
+ {'Graph'}
+ {'i'}
+ {'QL'}
+
+ )}
+
+ );
+}
+GraphiQLLogo.displayName = 'GraphiQLLogo';
+
+// Configure the UI by providing this Component as a child of GraphiQL
+function GraphiQLToolbar
+ {props.children}
+
+ );
+}
+GraphiQLToolbar.displayName = 'GraphiQLToolbar';
+
+// Configure the UI by providing this Component as a child of GraphiQL
+function GraphiQLFooter{props.children}
;
+}
+GraphiQLFooter.displayName = 'GraphiQLFooter';
+
+const formatSingleError = (error: Error) => ({
+ ...error,
+ // Raise these details even if they're non-enumerable
+ message: error.message,
+ stack: error.stack,
+});
+
+// Determines if the React child is of the same type of the provided React component
+function isChildComponentType {
+ this._node = node as HTMLDivElement;
+ }}
+ />
+ );
+ }
+
+ /**
+ * Public API for retrieving the CodeMirror instance from this
+ * React component.
+ */
+ getCodeMirror() {
+ return this.editor as CM.Editor;
+ }
+
+ /**
+ * Public API for retrieving the DOM client height for this component.
+ */
+ getClientHeight() {
+ return this._node && this._node.clientHeight;
+ }
+
+ private _onKeyUp = (_cm: CodeMirror.Editor, event: KeyboardEvent) => {
+ const code = event.keyCode;
+ if (!this.editor) {
+ return;
+ }
+ if (
+ (code >= 65 && code <= 90) || // letters
+ (!event.shiftKey && code >= 48 && code <= 57) || // numbers
+ (event.shiftKey && code === 189) || // underscore
+ (event.shiftKey && code === 222) // "
+ ) {
+ this.editor.execCommand('autocomplete');
+ }
+ };
+
+ private _onEdit = () => {
+ if (!this.editor) {
+ return;
+ }
+ if (!this.ignoreChangeEvent) {
+ this.cachedValue = this.editor.getValue();
+ if (this.props.onEdit) {
+ this.props.onEdit(this.cachedValue);
+ }
+ }
+ };
+
+ private _onHasCompletion = (
+ instance: CM.Editor,
+ changeObj?: CM.EditorChangeLinkedList,
+ ) => {
+ onHasCompletion(instance, changeObj, this.props.onHintInformationRender);
+ };
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/HistoryQuery.tsx b/packages/graphiql-2-rfc-context/src/components/HistoryQuery.tsx
new file mode 100644
index 00000000000..70e8198540a
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/HistoryQuery.tsx
@@ -0,0 +1,169 @@
+/**
+ * Copyright (c) 2020 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 { QueryStoreItem } from '../utility/QueryStore';
+import { WithTranslation, withTranslation } from 'react-i18next';
+
+export type HandleEditLabelFn = (
+ query?: string,
+ variables?: string,
+ headers?: string,
+ operationName?: string,
+ label?: string,
+ favorite?: boolean,
+) => void;
+
+export type HandleToggleFavoriteFn = (
+ query?: string,
+ variables?: string,
+ headers?: string,
+ operationName?: string,
+ label?: string,
+ favorite?: boolean,
+) => void;
+
+export type HandleSelectQueryFn = (
+ query?: string,
+ variables?: string,
+ headers?: string,
+ operationName?: string,
+ label?: string,
+) => void;
+
+export type HistoryQueryProps = {
+ favorite?: boolean;
+ favoriteSize?: number;
+ handleEditLabel: HandleEditLabelFn;
+ handleToggleFavorite: HandleToggleFavoriteFn;
+ operationName?: string;
+ onSelect: HandleSelectQueryFn;
+} & QueryStoreItem &
+ WithTranslation;
+
+class HistoryQuerySource extends React.Component<
+ HistoryQueryProps,
+ { editable: boolean }
+> {
+ editField: HTMLInputElement | null;
+ constructor(props: HistoryQueryProps) {
+ super(props);
+ this.state = {
+ editable: false,
+ };
+ this.editField = null;
+ }
+
+ render() {
+ const { t } = this.props;
+ const displayName =
+ this.props.label ||
+ this.props.operationName ||
+ this.props.query
+ ?.split('\n')
+ .filter(line => line.indexOf('#') !== 0)
+ .join('');
+ const starIcon = this.props.favorite ? '\u2605' : '\u2606';
+ return (
+
+ {this.state.editable ? (
+ {
+ this.editField = c;
+ }}
+ onBlur={this.handleFieldBlur.bind(this)}
+ onKeyDown={this.handleFieldKeyDown.bind(this)}
+ placeholder={t('Type a label')}
+ />
+ ) : (
+
+ )}
+
+
+
+ );
+ }
+
+ handleClick() {
+ this.props.onSelect(
+ this.props.query,
+ this.props.variables,
+ this.props.headers,
+ this.props.operationName,
+ this.props.label,
+ );
+ }
+
+ handleStarClick(e: React.MouseEvent) {
+ e.stopPropagation();
+ this.props.handleToggleFavorite(
+ this.props.query,
+ this.props.variables,
+ this.props.headers,
+ this.props.operationName,
+ this.props.label,
+ this.props.favorite,
+ );
+ }
+
+ handleFieldBlur(e: React.FocusEvent) {
+ e.stopPropagation();
+ this.setState({ editable: false });
+ this.props.handleEditLabel(
+ this.props.query,
+ this.props.variables,
+ this.props.headers,
+ this.props.operationName,
+ e.target.value,
+ this.props.favorite,
+ );
+ }
+
+ handleFieldKeyDown(e: React.KeyboardEvent) {
+ if (e.keyCode === 13) {
+ e.stopPropagation();
+ this.setState({ editable: false });
+ this.props.handleEditLabel(
+ this.props.query,
+ this.props.variables,
+ this.props.headers,
+ this.props.operationName,
+ e.currentTarget.value,
+ this.props.favorite,
+ );
+ }
+ }
+
+ handleEditClick(e: React.MouseEvent) {
+ e.stopPropagation();
+ this.setState({ editable: true }, () => {
+ if (this.editField) {
+ this.editField.focus();
+ }
+ });
+ }
+}
+
+const HistoryQuery = withTranslation('Toolbar')(HistoryQuerySource);
+export default HistoryQuery;
diff --git a/packages/graphiql-2-rfc-context/src/components/ImagePreview.tsx b/packages/graphiql-2-rfc-context/src/components/ImagePreview.tsx
new file mode 100644
index 00000000000..b06828f9cfa
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/ImagePreview.tsx
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2020 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 PropTypes from 'prop-types';
+
+function tokenToURL(token: any) {
+ if (token.type !== 'string') {
+ return;
+ }
+
+ const value = token.string.slice(1).slice(0, -1).trim();
+
+ try {
+ const location = window.location;
+ return new URL(value, location.protocol + '//' + location.host);
+ } catch (err) {
+ return;
+ }
+}
+
+function isImageURL(url: URL) {
+ return /(bmp|gif|jpeg|jpg|png|svg)$/.test(url.pathname);
+}
+
+type ImagePreviewProps = {
+ token: any;
+};
+
+type ImagePreviewState = {
+ width: number | null;
+ height: number | null;
+ src: string | null;
+ mime: string | null;
+};
+
+export class ImagePreview extends React.Component<
+ ImagePreviewProps,
+ ImagePreviewState
+> {
+ _node: HTMLImageElement | null = null;
+
+ static shouldRender(token: any) {
+ const url = tokenToURL(token);
+ return url ? isImageURL(url) : false;
+ }
+
+ static propTypes = {
+ token: PropTypes.any,
+ };
+
+ state = {
+ width: null,
+ height: null,
+ src: null,
+ mime: null,
+ };
+
+ componentDidMount() {
+ this._updateMetadata();
+ }
+
+ componentDidUpdate() {
+ this._updateMetadata();
+ }
+
+ render() {
+ let dims = null;
+ if (this.state.width !== null && this.state.height !== null) {
+ let dimensions = this.state.width + 'x' + this.state.height;
+ if (this.state.mime !== null) {
+ dimensions += ' ' + this.state.mime;
+ }
+
+ dims = (null);
+ const editorRef = React.useRef();
+ const [ignoreChangeEvent, setIgnoreChangeEvent] = React.useState(false);
+ const cachedValueRef = React.useRef(props.operation ?? '');
+ const session = useSessionContext();
+
+ const { loadEditor } = useEditorsContext();
+
+ // function _onKeyUp(_cm: monaco.editor.IStandaloneCodeEditor, event: KeyboardEvent) {
+ // if (AUTO_COMPLETE_AFTER_KEY.test(event.key) && editorRef.current) {
+ // // @TODO recreat this in monaco
+ // // editorRef.current.execCommand('autocomplete');
+ // }
+ // }
+
+ React.useEffect(() => {
+ require('monaco-graphql/esm/monaco.contribution');
+
+ // Lazily require to ensure requiring GraphiQL outside of a Browser context
+ // does not produce an error.
+ const editor = (editorRef.current = monaco.editor.create(
+ divRef.current as HTMLDivElement,
+ {
+ value: session?.operation?.text ?? '',
+ language: 'graphqlDev',
+ automaticLayout: true,
+ ...props.editorOptions,
+ },
+ ));
+ if (!editor) {
+ return;
+ }
+ loadEditor('operation', editor);
+ editor.onDidChangeModelContent(() => {
+ if (!ignoreChangeEvent) {
+ cachedValueRef.current = editor.getValue();
+ session.changeOperation(cachedValueRef.current);
+ props.onEdit && props.onEdit(cachedValueRef.current);
+ }
+ });
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+ /**
+ * Handle incoming changes via props (quasi-controlled component?)
+ */
+ React.useEffect(() => {
+ setIgnoreChangeEvent(true);
+ const editor = editorRef.current;
+ const op = session?.operation?.text;
+ if (editor && op && op !== cachedValueRef.current) {
+ const thisValue = op || '';
+ cachedValueRef.current = thisValue;
+ editor.setValue(thisValue);
+ }
+ setIgnoreChangeEvent(false);
+ }, [session, session.operation, session.operation.text]);
+
+ React.useEffect(() => {
+ const editor = editorRef.current;
+ if (!editor) {
+ return;
+ }
+ if (props.editorOptions) {
+ editor.updateOptions(props.editorOptions);
+ }
+ }, [props.editorOptions]);
+
+ return (
+ ;
+};
+
+export class QueryHistorySource extends React.Component<
+ QueryHistoryProps,
+ QueryHistoryState
+> {
+ historyStore: QueryStore;
+ favoriteStore: QueryStore;
+
+ constructor(props: QueryHistoryProps) {
+ super(props);
+ this.historyStore = new QueryStore(
+ 'queries',
+ props.storage,
+ MAX_HISTORY_LENGTH,
+ );
+ // favorites are not automatically deleted, so there's no need for a max length
+ this.favoriteStore = new QueryStore('favorites', props.storage, null);
+ const historyQueries = this.historyStore.fetchAll();
+ const favoriteQueries = this.favoriteStore.fetchAll();
+ const queries = historyQueries.concat(favoriteQueries);
+ this.state = { queries };
+ }
+
+ render() {
+ const { t } = this.props;
+ const queries = this.state.queries.slice().reverse();
+ const queryNodes = queries.map((query, i) => {
+ return (
+
+
+ );
+ }
+
+ // Public API
+ updateHistory = (
+ query?: string,
+ variables?: string,
+ headers?: string,
+ operationName?: string,
+ ) => {
+ if (
+ shouldSaveQuery(
+ query,
+ variables,
+ headers,
+ this.historyStore.fetchRecent(),
+ )
+ ) {
+ this.historyStore.push({
+ query,
+ variables,
+ headers,
+ operationName,
+ });
+ const historyQueries = this.historyStore.items;
+ const favoriteQueries = this.favoriteStore.items;
+ const queries = historyQueries.concat(favoriteQueries);
+ this.setState({
+ queries,
+ });
+ }
+ };
+
+ // Public API
+ toggleFavorite: HandleToggleFavoriteFn = (
+ query,
+ variables,
+ headers,
+ operationName,
+ label,
+ favorite,
+ ) => {
+ const item: QueryStoreItem = {
+ query,
+ variables,
+ headers,
+ operationName,
+ label,
+ };
+ if (!this.favoriteStore.contains(item)) {
+ item.favorite = true;
+ this.favoriteStore.push(item);
+ } else if (favorite) {
+ item.favorite = false;
+ this.favoriteStore.delete(item);
+ }
+ this.setState({
+ queries: [...this.historyStore.items, ...this.favoriteStore.items],
+ });
+ };
+
+ // Public API
+ editLabel: HandleEditLabelFn = (
+ query,
+ variables,
+ headers,
+ operationName,
+ label,
+ favorite,
+ ) => {
+ const item = {
+ query,
+ variables,
+ headers,
+ operationName,
+ label,
+ };
+ if (favorite) {
+ this.favoriteStore.edit({ ...item, favorite });
+ } else {
+ this.historyStore.edit(item);
+ }
+ this.setState({
+ queries: [...this.historyStore.items, ...this.favoriteStore.items],
+ });
+ };
+}
+
+export const QueryHistory = withTranslation('Toolbar')(QueryHistorySource);
diff --git a/packages/graphiql-2-rfc-context/src/components/ResultViewer.tsx b/packages/graphiql-2-rfc-context/src/components/ResultViewer.tsx
new file mode 100644
index 00000000000..4ce3ea771f9
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/ResultViewer.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2020 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, { useEffect } from 'react';
+
+import type { EditorOptions } from '../types';
+
+import EditorWrapper from '../components/common/EditorWrapper';
+
+import { useSessionContext } from '../api/providers/GraphiQLSessionProvider';
+import { useEditorsContext } from '../api/providers/GraphiQLEditorsProvider';
+
+export type ResultViewerProps = {
+ editorTheme?: string;
+ editorOptions?: EditorOptions;
+ onMouseUp?: (e: monaco.editor.IEditorMouseEvent) => void;
+ onRenderResults?: (e: monaco.editor.IModelChangedEvent) => void;
+};
+
+export function ResultViewer(props: ResultViewerProps) {
+ const divRef = React.useRef(null);
+ const viewerRef = React.useRef();
+ const session = useSessionContext();
+ const { loadEditor } = useEditorsContext();
+ useEffect(() => {
+ // Lazily require to ensure requiring GraphiQL outside of a Browser context
+ // does not produce an error.
+
+ const viewer = (viewerRef.current = monaco.editor.create(
+ divRef.current as HTMLElement,
+ {
+ value: session.results?.text ?? '',
+ readOnly: true,
+ language: 'json',
+ automaticLayout: true,
+ theme: props.editorTheme,
+ },
+ ));
+ loadEditor('results', viewer);
+ props.onMouseUp && viewer.onMouseUp(props.onMouseUp);
+ props.onRenderResults && viewer.onDidChangeModel(props.onRenderResults);
+ }, []);
+
+ useEffect(() => {
+ if (viewerRef.current) {
+ viewerRef.current.setValue(session.results.text || '');
+ }
+ }, [session.results, session.results.text]);
+
+ React.useEffect(() => {
+ const editor = viewerRef.current;
+ if (!editor) {
+ return;
+ }
+ if (props.editorOptions) {
+ editor.updateOptions(props.editorOptions);
+ }
+ }, [props.editorOptions]);
+ return (
+ ) {
+ if (this._node !== e.target) {
+ e.preventDefault();
+ this.setState({ visible: false });
+ this._release();
+ }
+ }
+
+ handleOpen: MouseEventHandler = e => {
+ preventDefault(e);
+ this.setState({ visible: true });
+ this._subscribe();
+ };
+}
+
+type ToolbarMenuItemProps = {
+ onSelect: () => void;
+ title: string;
+ label: string;
+};
+
+export const ToolbarMenuItem: FC = ({
+ onSelect,
+ title,
+ label,
+}) => {
+ return (
+ {
+ e.currentTarget.className = 'hover';
+ }}
+ onMouseOut={e => {
+ e.currentTarget.className = '';
+ }}
+ onMouseDown={preventDefault}
+ onMouseUp={onSelect}
+ title={title}>
+ {label}
+
+ );
+};
+
+function preventDefault(e: MouseEvent | React.MouseEvent) {
+ e.preventDefault();
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/ToolbarSelect.tsx b/packages/graphiql-2-rfc-context/src/components/ToolbarSelect.tsx
new file mode 100644
index 00000000000..83a74f65f91
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/ToolbarSelect.tsx
@@ -0,0 +1,169 @@
+/**
+ * Copyright (c) 2020 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, { MouseEventHandler } from 'react';
+import PropTypes from 'prop-types';
+
+type ToolbarSelectProps = {
+ title?: string;
+ label?: string;
+ onSelect?: (selection: string) => void;
+};
+
+type ToolbarSelectState = {
+ visible: boolean;
+};
+
+type HasProps = T extends { props: any } ? T : never;
+
+function hasProps(
+ child: Child,
+): child is HasProps {
+ if (!child || typeof child !== 'object' || !('props' in child)) {
+ return false;
+ }
+ return true;
+}
+
+/**
+ * ToolbarSelect
+ *
+ * A select-option style button to use within the Toolbar.
+ *
+ */
+
+export class ToolbarSelect extends React.Component<
+ ToolbarSelectProps,
+ ToolbarSelectState
+> {
+ private _node: HTMLAnchorElement | null = null;
+ private _listener: ((this: Document, ev: MouseEvent) => any) | null = null;
+ constructor(props: ToolbarSelectProps) {
+ super(props);
+ this.state = { visible: false };
+ }
+
+ componentWillUnmount() {
+ this._release();
+ }
+
+ render() {
+ let selectedChild: HasProps | undefined;
+ const visible = this.state.visible;
+ const optionChildren = React.Children.map(
+ this.props.children,
+ (child, i) => {
+ if (!hasProps(child)) {
+ return null;
+ }
+ if (!selectedChild || child.props.selected) {
+ selectedChild = child;
+ }
+ const onChildSelect =
+ child.props.onSelect ||
+ (this.props.onSelect &&
+ this.props.onSelect.bind(null, child.props.value, i));
+ return (
+ ;
+ label: string;
+ selected: boolean;
+ value?: any;
+};
+
+export function ToolbarSelectOption({
+ onSelect,
+ label,
+ selected,
+}: ToolbarSelectOptionProps) {
+ return (
+ {
+ e.currentTarget.className = 'hover';
+ }}
+ onMouseOut={e => {
+ e.currentTarget.className = '';
+ }}
+ onMouseDown={preventDefault}
+ onMouseUp={onSelect}>
+ {label}
+ {selected && (
+
+ )}
+
+ );
+}
+
+ToolbarSelectOption.propTypes = {
+ onSelect: PropTypes.func,
+ selected: PropTypes.bool,
+ label: PropTypes.string,
+ value: PropTypes.any,
+};
+
+function preventDefault(e: any) {
+ e.preventDefault();
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/VariableEditor.tsx b/packages/graphiql-2-rfc-context/src/components/VariableEditor.tsx
new file mode 100644
index 00000000000..d12f078051b
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/VariableEditor.tsx
@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) 2020 GraphQL Contributors.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import { GraphQLType } from 'graphql';
+
+import React from 'react';
+
+import EditorWrapper from '../components/common/EditorWrapper';
+
+import { useEditorsContext } from '../api/providers/GraphiQLEditorsProvider';
+import { useSessionContext } from '../api/providers/GraphiQLSessionProvider';
+
+import type { EditorOptions } from '../types';
+// import useQueryFacts from '../api/hooks/useQueryFacts';
+
+export type VariableEditorProps = {
+ variableToType?: { [variable: string]: GraphQLType };
+ value?: string;
+ readOnly?: boolean;
+ onHintInformationRender: (value: HTMLDivElement) => void;
+ onPrettifyQuery: (value?: string) => void;
+ onMergeQuery: (value?: string) => void;
+ editorTheme?: string;
+ editorOptions?: EditorOptions;
+};
+
+/**
+ * VariableEditor
+ *
+ * An instance of CodeMirror for editing variables defined in QueryEditor.
+ *
+ * Props:
+ *
+ * - variableToType: A mapping of variable name to GraphQLType.
+ * - value: The text of the editor.
+ * - onEdit: A function called when the editor changes, given the edited text.
+ * - readOnly: Turns the editor to read-only mode.
+ *
+ */
+export function VariableEditor(props: VariableEditorProps) {
+ const session = useSessionContext();
+ // const queryFacts = useQueryFacts();
+ const [ignoreChangeEvent, setIgnoreChangeEvent] = React.useState(false);
+ const editorRef = React.useRef();
+ const cachedValueRef = React.useRef(props.value ?? '');
+ const divRef = React.useRef(null);
+ const { loadEditor } = useEditorsContext();
+ // const variableToType = queryFacts?.variableToType
+
+ React.useEffect(() => {
+ // Lazily require to ensure requiring GraphiQL outside of a Browser context
+ // does not produce an error.
+
+ // might need this later
+ // const _onKeyUp = (_cm: CodeMirror.Editor, event: KeyboardEvent) => {
+ // const code = event.keyCode;
+ // if (!editor) {
+ // return;
+ // }
+ // if (
+ // (code >= 65 && code <= 90) || // letters
+ // (!event.shiftKey && code >= 48 && code <= 57) || // numbers
+ // (event.shiftKey && code === 189) || // underscore
+ // (event.shiftKey && code === 222) // "
+ // ) {
+ // editor.execCommand('autocomplete');
+ // }
+ // };
+ const editor = (editorRef.current = monaco.editor.create(
+ divRef.current as HTMLDivElement,
+ {
+ value: session?.variables?.text || '',
+ language: 'json',
+ theme: props?.editorTheme,
+ readOnly: props?.readOnly ?? false,
+ automaticLayout: true,
+ ...props.editorOptions,
+ },
+ ));
+ loadEditor('variables', editor);
+
+ editor.onDidChangeModelContent(() => {
+ if (!ignoreChangeEvent) {
+ cachedValueRef.current = editor.getValue();
+ session.changeVariables(cachedValueRef.current);
+ }
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ React.useEffect(() => {
+ const editor = editorRef.current;
+ if (!editor) {
+ return;
+ }
+
+ // Ensure the changes caused by this update are not interpretted as
+ // user-input changes which could otherwise result in an infinite
+ // event loop.
+ setIgnoreChangeEvent(true);
+ if (session.variables.text !== cachedValueRef.current) {
+ const thisValue = session.variables.text || '';
+ cachedValueRef.current = thisValue;
+ editor.setValue(thisValue);
+ }
+
+ setIgnoreChangeEvent(false);
+ }, [session.variables.text]);
+
+ React.useEffect(() => {
+ const editor = editorRef.current;
+ if (!editor) {
+ return;
+ }
+ if (props.editorOptions) {
+ editor.updateOptions(props.editorOptions);
+ }
+ }, [props.editorOptions]);
+
+ // TODO: for variables linting/etc
+ // React.useEffect(() => {
+ // const editor = editorRef.current;
+ // if (!editor) {
+ // return;
+ // }
+ // if (queryFacts?.variableToType) {
+ // // editor.options.lint.variableToType = queryFacts.variableToType;
+ // // editor.options.hintOptions.variableToType = queryFacts.variableToType;
+ // }
+ // }, [queryFacts, variableToType]);
+
+ return
+
+ );
+
+ const { container, getByRole } = render(
+ {myFragment} ,
+ );
+
+ expect(
+ container.querySelector('.graphiql-container'),
+ ).toBeInTheDocument();
+ expect(container.querySelector('.title')).toBeInTheDocument();
+ expect(getByRole('toolbar')).toBeInTheDocument();
+ });
+
+ it('properly ignores non-override children components', () => {
+ const { container, getByRole } = render(
+
+ ,
+ );
+
+ expect(
+ container.querySelector('.graphiql-container'),
+ ).toBeInTheDocument();
+ expect(container.querySelector('.title')).toBeInTheDocument();
+ expect(getByRole('toolbar')).toBeInTheDocument();
+ });
+
+ it('properly ignores non-override class components', () => {
+ class MyClassComponent {
+ render() {
+ return null;
+ }
+ }
+
+ const { container, getByRole } = render(
+
+ ,
+ );
+
+ expect(
+ container.querySelector('.graphiql-container'),
+ ).toBeInTheDocument();
+ expect(container.querySelector('.title')).toBeInTheDocument();
+ expect(getByRole('toolbar')).toBeInTheDocument();
+ });
+
+ describe('GraphiQL.Logo', () => {
+ it('can be overridden using the exported type', () => {
+ const { container } = render(
+
+ {'My Great Logo'}
+ ,
+ );
+
+ expect(
+ container.querySelector('.graphiql-container'),
+ ).toBeInTheDocument();
+ });
+
+ it('can be overridden using a named component', () => {
+ const WrappedLogo = wrap(
+ {'My Great Logo'} ,
+ );
+ WrappedLogo.displayName = 'GraphiQLLogo';
+
+ const { getByText } = render(
+
+ ,
+ );
+
+ expect(getByText('My Great Logo')).toBeInTheDocument();
+ });
+ });
+
+ describe('GraphiQL.Toolbar', () => {
+ it('can be overridden using the exported type', () => {
+ const { container } = render(
+
+
+
+ ,
+ );
+
+ expect(
+ container.querySelectorAll('[role="toolbar"] .toolbar-button'),
+ ).toHaveLength(1);
+ });
+
+ it('can be overridden using a named component', () => {
+ const WrappedToolbar = wrap(
+
+ ,
+ );
+ WrappedToolbar.displayName = 'GraphiQLToolbar';
+
+ const { container } = render(
+
+ ,
+ );
+
+ expect(container.querySelector('.test-wrapper')).toBeInTheDocument();
+ expect(
+ container.querySelectorAll('[role="toolbar"] button'),
+ ).toHaveLength(1);
+ });
+ });
+
+ describe('GraphiQL.Footer', () => {
+ it('can be overridden using the exported type', () => {
+ const { container } = render(
+
+
+
+ ,
+ );
+
+ expect(container.querySelectorAll('.footer button')).toHaveLength(1);
+ });
+
+ it('can be overridden using a named component', () => {
+ const WrappedFooter = wrap(
+
+ ,
+ );
+ WrappedFooter.displayName = 'GraphiQLFooter';
+
+ const { container } = render(
+
+ ,
+ );
+
+ expect(container.querySelector('.test-wrapper')).toBeInTheDocument();
+ expect(container.querySelectorAll('.footer button')).toHaveLength(1);
+ });
+ });
+ });
+
+ it('readjusts the query wrapper flex style field when the result panel is resized', () => {
+ const spy = jest
+ .spyOn(Element.prototype, 'clientWidth', 'get')
+ .mockReturnValue(900);
+
+ const { container } = render(,
+): HistoryQueryProps {
+ return {
+ ...baseMockProps,
+ ...customProps,
+ };
+}
+
+describe('HistoryQuery', () => {
+ it('renders operationName if label is not provided', () => {
+ const otherMockProps = { operationName: mockOperationName1 };
+ const props = getMockProps(otherMockProps);
+ const { container } = render(,
+ HTMLDivElement
+ > & {
+ sx?: SxStyleProp;
+ innerRef: any;
+ },
+) {
+ const { innerRef, sx, ...rest } = props;
+ return (
+
+ );
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/common/Layout.stories.tsx b/packages/graphiql-2-rfc-context/src/components/common/Layout.stories.tsx
new file mode 100644
index 00000000000..0ef311a954e
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/common/Layout.stories.tsx
@@ -0,0 +1,132 @@
+/** @jsx jsx */
+
+/**
+ * Copyright (c) 2020 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 { jsx } from 'theme-ui';
+import { Nav, NavItem } from './Nav';
+import List, { ListRow } from './List';
+import { useThemeLayout } from './themes/provider';
+import Logo from './Logo';
+
+const explorer = {
+ input: (
+
+ {'Sidebar'}
+
+ ),
+ },
+ {
+ key: 2,
+ size: 'aside',
+ component: (
+
+ {'Woooo'}
+
+ ),
+ },
+ ]}
+ />
+ );
+};
+
+export const WithStringsOnly = () => {
+ const Layout = useThemeLayout();
+ return (
+ ;
+}
+
+interface NavItemProps {
+ label: string;
+ active?: boolean;
+}
+
+export const NavItem = ({
+ active,
+ label,
+ children,
+}: PropsWithChildren) => (
+
+);
+
+export const Nav = ({ children }: NavProps) => {
+ return (
+
+ );
+};
diff --git a/packages/graphiql-2-rfc-context/src/components/common/Resizer/ResizeHandler.tsx b/packages/graphiql-2-rfc-context/src/components/common/Resizer/ResizeHandler.tsx
new file mode 100644
index 00000000000..fc2460bd690
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/common/Resizer/ResizeHandler.tsx
@@ -0,0 +1,93 @@
+/** @jsx jsx */
+
+/**
+ * Copyright (c) 2020 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 { jsx } from 'theme-ui';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ResizeHandlerData, ResizeHandlerProps } from './types';
+
+export const ResizeHandler: React.FC = props => {
+ const { dir, onStart, onEnd, onUpdate, className, style, children } = props;
+
+ const [isDragging, setIsDragging] = useState(false);
+ const listenersRef = useRef(null);
+
+ const handleMouseMove = useCallback(
+ e => {
+ onUpdate(e);
+ },
+ [onUpdate],
+ );
+
+ const cleanMouseListeners = useCallback(() => {
+ const oldRef = listenersRef.current;
+ if (oldRef) {
+ window.removeEventListener('mousemove', oldRef.handleMouseMove);
+ window.removeEventListener('touchmove', oldRef.handleMouseMove);
+ window.removeEventListener('mouseup', oldRef.handleMouseUp);
+ window.removeEventListener('touchend', oldRef.handleMouseUp);
+ }
+ }, []);
+
+ const handleMouseUp = useCallback(
+ e => {
+ setIsDragging(false);
+ cleanMouseListeners();
+ onEnd(e);
+ },
+ [cleanMouseListeners, onEnd],
+ );
+
+ const handleMouseDown = useCallback(
+ e => {
+ setIsDragging(true);
+ cleanMouseListeners();
+
+ listenersRef.current = {
+ handleMouseMove,
+ handleMouseUp,
+ };
+ window.addEventListener('mousemove', handleMouseMove);
+ window.addEventListener('touchmove', handleMouseMove);
+ window.addEventListener('mouseup', handleMouseUp);
+ window.addEventListener('touchend', handleMouseUp);
+
+ onStart(e);
+ },
+ [cleanMouseListeners, handleMouseMove, handleMouseUp, onStart],
+ );
+
+ useEffect(() => {
+ return () => {
+ cleanMouseListeners();
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+ {`Main content`}
+
+);
diff --git a/packages/graphiql-2-rfc-context/src/components/common/Resizer/Resizer.tsx b/packages/graphiql-2-rfc-context/src/components/common/Resizer/Resizer.tsx
new file mode 100644
index 00000000000..f94c25b323e
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/common/Resizer/Resizer.tsx
@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) 2020 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, { useCallback, useRef, useState } from 'react';
+import { ResizeHandler } from './ResizeHandler';
+import { ResizingData, ResizeProps, MEvent } from './types';
+import {
+ getContainerInfo,
+ getContainerMeta,
+ getHandlerInfo,
+ isNil,
+ normalizeMEvent,
+} from './util';
+
+export const Resizer: React.FC = props => {
+ const {
+ border,
+ onStart,
+ onEnd,
+ onUpdate,
+ id,
+ className,
+ style,
+ handlerClassName,
+ handlerStyle: _handlerStyle,
+ handlerWidth: _handlerWidth,
+ handlerOffset: _handlerOffset,
+ handlerZIndex: _handlerZIndex,
+ children,
+ } = props;
+
+ const handlerWidth = isNil(_handlerWidth) ? 16 : (_handlerWidth as number);
+ const handlerOffset = (isNil(_handlerOffset)
+ ? -handlerWidth / 2
+ : _handlerOffset) as number;
+ const handlerZIndex = (isNil(_handlerZIndex) ? 10 : _handlerZIndex) as number;
+
+ const [diffCoord, setDiffCoord] = useState(0);
+ const [oldSize, setOldSize] = useState(null);
+ const oldCoordRef = useRef(null);
+ const boxRef = useRef(null);
+
+ const containerMeta = getContainerMeta({ border });
+
+ const { style: containerStyle } = getContainerInfo({
+ style,
+ containerMeta,
+ diffCoord,
+ oldSize,
+ });
+
+ const { dir, style: handlerStyle } = getHandlerInfo({
+ border,
+ handlerWidth,
+ handlerOffset,
+ handlerStyle: _handlerStyle,
+ });
+
+ const handleStart = useCallback(
+ (_e: MEvent) => {
+ const e = normalizeMEvent(_e);
+
+ const { wh, xy } = containerMeta;
+ const el = boxRef.current;
+ if (!el) {
+ return;
+ }
+
+ const px = window.getComputedStyle(el)[wh] as string;
+
+ setDiffCoord(0);
+ setOldSize(parseInt(px, 10));
+ oldCoordRef.current = e[xy];
+
+ if (onStart) {
+ onStart(e);
+ }
+ },
+ [containerMeta, onStart],
+ );
+
+ const handleEnd = useCallback(
+ (_e: MEvent) => {
+ const e = normalizeMEvent(_e);
+ if (onEnd) {
+ onEnd(e);
+ }
+ },
+ [onEnd],
+ );
+
+ const handleUpdate = useCallback(
+ (_e: MEvent) => {
+ const e = normalizeMEvent(_e);
+
+ const { xy } = containerMeta;
+ if (oldCoordRef.current === null) {
+ return;
+ }
+
+ setDiffCoord(e[xy] - oldCoordRef.current);
+
+ if (onUpdate) {
+ onUpdate(e);
+ }
+ },
+ [containerMeta, onUpdate],
+ );
+
+ return (
+ ;
+ diffCoord: ResizingData['diffCoord'];
+ oldSize: ResizingData['oldSize'];
+}) => {
+ const { wh, sn } = containerMeta;
+ let retStyle: React.CSSProperties = {};
+
+ if (oldSize != null) {
+ retStyle[wh] = oldSize + diffCoord * sn;
+ }
+ retStyle = {
+ ...style,
+ ...retStyle,
+ };
+ return { style: retStyle };
+};
+
+export const getHandlerInfo = ({
+ border,
+ handlerWidth,
+ handlerOffset,
+ handlerStyle,
+}: {
+ border: ResizeProps['border'];
+ handlerWidth: ResizeProps['handlerWidth'];
+ handlerOffset: ResizeProps['handlerOffset'];
+ handlerStyle: ResizeProps['handlerStyle'];
+}) => {
+ let dir: ResizeHandlerProps['dir'];
+ let style: React.CSSProperties = {};
+
+ if (/^(left|right)$/.test(border)) {
+ dir = 'ew';
+ style.width = handlerWidth;
+ style.top = 0;
+ style.bottom = 0;
+ } else {
+ dir = 'ns';
+ style.height = handlerWidth;
+ style.left = 0;
+ style.right = 0;
+ }
+ style[border] = handlerOffset;
+
+ style = { ...style, ...handlerStyle };
+ return { dir, style };
+};
diff --git a/packages/graphiql-2-rfc-context/src/components/common/Toolbar/Content.tsx b/packages/graphiql-2-rfc-context/src/components/common/Toolbar/Content.tsx
new file mode 100644
index 00000000000..067a9fd7757
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/common/Toolbar/Content.tsx
@@ -0,0 +1,28 @@
+/** @jsx jsx */
+
+/**
+ * Copyright (c) 2020 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 { jsx } from 'theme-ui';
+import { DetailedHTMLProps } from 'react';
+
+export type ContentProps = DetailedHTMLProps<
+ React.HTMLAttributes,
+ HTMLDivElement
+>;
+
+const Content = ({ ...props }: ContentProps) => (
+
{dimensions}
;
+ }
+
+ return (
+
+ ![]()
this._updateMetadata()}
+ ref={node => {
+ this._node = node;
+ }}
+ src={tokenToURL(this.props.token)?.href}
+ />
+ {dims}
+
+ );
+ }
+
+ _updateMetadata() {
+ if (!this._node) {
+ return;
+ }
+
+ const width = this._node.naturalWidth;
+ const height = this._node.naturalHeight;
+ const src = this._node.src;
+
+ if (src !== this.state.src) {
+ this.setState({ src });
+ fetch(src, { method: 'HEAD' }).then(response => {
+ this.setState({
+ mime: response.headers.get('Content-Type'),
+ });
+ });
+ }
+
+ if (width !== this.state.width || height !== this.state.height) {
+ this.setState({ height, width });
+ }
+ }
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/QueryEditor.tsx b/packages/graphiql-2-rfc-context/src/components/QueryEditor.tsx
new file mode 100644
index 00000000000..0f6c7fb4deb
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/QueryEditor.tsx
@@ -0,0 +1,118 @@
+/** @jsx jsx */
+/**
+ * Copyright (c) 2020 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 { jsx } from 'theme-ui';
+import { GraphQLType } from 'graphql';
+import type { EditorOptions } from '../types';
+
+import EditorWrapper from '../components/common/EditorWrapper';
+
+import { useSessionContext } from '../api/providers/GraphiQLSessionProvider';
+import { useEditorsContext } from '../api/providers/GraphiQLEditorsProvider';
+
+export type QueryEditorProps = {
+ onEdit?: (value: string) => void;
+ readOnly?: boolean;
+ onHintInformationRender: (elem: HTMLDivElement) => void;
+ onClickReference?: (reference: GraphQLType) => void;
+ editorTheme?: string;
+ operation?: string;
+ editorOptions?: EditorOptions;
+};
+
+/**
+ * GraphQL Operation Editor
+ *
+ * @param props {QueryEditorProps}
+ */
+export function QueryEditor(props: QueryEditorProps) {
+ const divRef = React.useRef
+
+ {t('History')}
+ {this.props.children}
+ - {queryNodes}
{children}
;
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/ToolbarMenu.tsx b/packages/graphiql-2-rfc-context/src/components/ToolbarMenu.tsx
new file mode 100644
index 00000000000..a7af6868252
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/ToolbarMenu.tsx
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2020 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, { FC, MouseEventHandler } from 'react';
+
+type ToolbarMenuProps = {
+ title: string;
+ label: string;
+};
+
+type ToolbarMenuState = {
+ visible: boolean;
+};
+
+/**
+ * ToolbarMenu
+ *
+ * A menu style button to use within the Toolbar.
+ */
+export class ToolbarMenu extends React.Component<
+ ToolbarMenuProps,
+ ToolbarMenuState
+> {
+ private _node: HTMLAnchorElement | null = null;
+ private _listener: this['handleClick'] | null = null;
+
+ constructor(props: ToolbarMenuProps) {
+ super(props);
+ this.state = { visible: false };
+ }
+
+ componentWillUnmount() {
+ this._release();
+ }
+
+ render() {
+ const visible = this.state.visible;
+ return (
+ {
+ if (node) {
+ this._node = node;
+ }
+ }}
+ title={this.props.title}>
+ {this.props.label}
+
+ -
+ {this.props.children}
+
-
+ {optionChildren}
+
{component}
+ );
+
+ it('properly ignores fragments', () => {
+ const myFragment = (
+ -
+
-
+
-
+
-
+
-
+
{c}
);
+
+export const WithFlexChild = () => (
+
+
+);
+
+export const WithStackedRows = () => (
+ -
+
+ {
+ 'Lists are a vertical stack of components and form the basis of most modules. This one is very long'
+ }
+
+
+
+);
diff --git a/packages/graphiql-2-rfc-context/src/components/common/List/index.tsx b/packages/graphiql-2-rfc-context/src/components/common/List/index.tsx
new file mode 100644
index 00000000000..a95c8d21720
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/common/List/index.tsx
@@ -0,0 +1,58 @@
+/** @jsx jsx */
+
+/**
+ * Copyright (c) 2020 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 { jsx, SxStyleProp } from 'theme-ui';
+import { PropsWithChildren } from 'react';
+
+export type ListRowPropTypes = PropsWithChildren<{
+ flex?: boolean;
+ padding?: boolean;
+}>;
+
+const ListRow = ({
+ children,
+ flex = false,
+ padding = false,
+}: ListRowPropTypes) => (
+ -
+
spaces.rowPadding : undefined,
+ minHeight: ({ spaces }) => spaces.rowMinHeight,
+ } as SxStyleProp
+ }>
+ {children}
+
+);
+
+export type ListPropTypes = PropsWithChildren<{}>;
+
+const List = ({ children }: ListPropTypes) => (
+ *:not(:first-of-type)': {
+ borderTop: theme => `1px solid ${theme.colors.border}`,
+ },
+ '> *': {
+ flex: '0 0 auto',
+ },
+ }}>
+ {children}
+
+);
+
+export default List;
+export { ListRow };
diff --git a/packages/graphiql-2-rfc-context/src/components/common/Logo.tsx b/packages/graphiql-2-rfc-context/src/components/common/Logo.tsx
new file mode 100644
index 00000000000..ce42b142429
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/common/Logo.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2020 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';
+
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+
+export default function Logo({ color = 'currentColor', size = 40 }: Props) {
+ return (
+
+ );
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/common/Nav.stories.tsx b/packages/graphiql-2-rfc-context/src/components/common/Nav.stories.tsx
new file mode 100644
index 00000000000..45ac3244fdd
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/common/Nav.stories.tsx
@@ -0,0 +1,28 @@
+/** @jsx jsx */
+
+/**
+ * Copyright (c) 2020 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 { jsx } from 'theme-ui';
+import { NavItem, Nav } from './Nav';
+import { layout } from './themes/decorators';
+
+import Logo from './Logo';
+
+export default { title: 'Navbar', decorators: [layout] };
+
+export const NavBar = () => (
+
+);
diff --git a/packages/graphiql-2-rfc-context/src/components/common/Nav.tsx b/packages/graphiql-2-rfc-context/src/components/common/Nav.tsx
new file mode 100644
index 00000000000..52cfd744e4b
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/common/Nav.tsx
@@ -0,0 +1,66 @@
+/** @jsx jsx */
+
+/**
+ * Copyright (c) 2020 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 { jsx } from 'theme-ui';
+import { PropsWithChildren } from 'react';
+
+import { ReactNodeLike } from '../../types';
+
+interface NavProps {
+ children: Array
+ {isDragging && (
+
+ )}
+ {children}
+
+ );
+};
diff --git a/packages/graphiql-2-rfc-context/src/components/common/Resizer/Resizer.stories.tsx b/packages/graphiql-2-rfc-context/src/components/common/Resizer/Resizer.stories.tsx
new file mode 100644
index 00000000000..65f22fa317b
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/common/Resizer/Resizer.stories.tsx
@@ -0,0 +1,22 @@
+/** @jsx jsx */
+
+/**
+ * Copyright (c) 2020 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 { jsx } from 'theme-ui';
+import { Resizer } from './Resizer';
+
+export default { title: 'Resizer' };
+
+export const resizer = () => (
+
+
+ );
+};
diff --git a/packages/graphiql-2-rfc-context/src/components/common/Resizer/index.ts b/packages/graphiql-2-rfc-context/src/components/common/Resizer/index.ts
new file mode 100644
index 00000000000..71a840cc9be
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/common/Resizer/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2020 GraphQL Contributors.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export * from './Resizer';
diff --git a/packages/graphiql-2-rfc-context/src/components/common/Resizer/types.ts b/packages/graphiql-2-rfc-context/src/components/common/Resizer/types.ts
new file mode 100644
index 00000000000..78a4e229c74
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/common/Resizer/types.ts
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2020 GraphQL Contributors.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export type MEvent = MouseEvent | TouchEvent;
+
+export type RdsMEvent =
+ | MouseEvent
+ | (TouchEvent & {
+ clientX: number;
+ clientY: number;
+ });
+
+export interface ResizeHandlerProps {
+ dir: 'ew' | 'ns';
+ onStart: (e: MEvent) => void;
+ onEnd: (e: MEvent) => void;
+ onUpdate: (e: MEvent) => void;
+ className?: string;
+ style?: React.CSSProperties;
+}
+
+export interface ResizeHandlerData {
+ listenersRef: {
+ handleMouseMove: (e: MEvent) => void;
+ handleMouseUp: (e: MEvent) => void;
+ } | null;
+}
+
+export interface ResizeProps {
+ border: 'top' | 'bottom' | 'left' | 'right';
+ onStart?: ResizeHandlerProps['onStart'];
+ onEnd?: ResizeHandlerProps['onEnd'];
+ onUpdate?: ResizeHandlerProps['onUpdate'];
+ id?: string;
+ className?: string;
+ style?: React.CSSProperties;
+ handlerClassName?: string;
+ handlerStyle?: React.CSSProperties;
+ handlerWidth?: number;
+ handlerOffset?: number;
+ handlerZIndex?: number;
+}
+
+export interface ResizingData {
+ diffCoord: number;
+ oldCorrd: number | null;
+ oldSize: number | null;
+}
diff --git a/packages/graphiql-2-rfc-context/src/components/common/Resizer/util.ts b/packages/graphiql-2-rfc-context/src/components/common/Resizer/util.ts
new file mode 100644
index 00000000000..540728c94bb
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/common/Resizer/util.ts
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2020 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 {
+ ResizeHandlerProps,
+ ResizingData,
+ ResizeProps,
+ MEvent,
+ RdsMEvent,
+} from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const isNil = (v: any) => v === null || v === undefined;
+
+export const normalizeMEvent = (e: MEvent): RdsMEvent => {
+ if ((e as TouchEvent).touches && (e as TouchEvent).touches[0]) {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (e as any).clientX = Math.round((e as TouchEvent).touches[0].clientX);
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (e as any).clientY = Math.round((e as TouchEvent).touches[0].clientY);
+ }
+ return e as RdsMEvent;
+};
+
+export const getContainerMeta = ({
+ border,
+}: {
+ border: ResizeProps['border'];
+}) => {
+ let wh: 'width' | 'height';
+ let xy: 'clientX' | 'clientY';
+ let sn: 1 | -1;
+
+ if (/^(left|right)$/.test(border)) {
+ wh = 'width';
+ xy = 'clientX';
+ sn = border === 'right' ? 1 : -1;
+ } else {
+ wh = 'height';
+ xy = 'clientY';
+ sn = border === 'bottom' ? 1 : -1;
+ }
+ return { wh, xy, sn };
+};
+
+export const getContainerInfo = ({
+ style,
+ containerMeta,
+ diffCoord,
+ oldSize,
+}: {
+ style: ResizeProps['style'];
+ containerMeta: ReturnType spaces.rowPadding,
+ }}
+ />
+);
+
+export default Content;
diff --git a/packages/graphiql-2-rfc-context/src/components/common/Toolbar/Tabs.stories.tsx b/packages/graphiql-2-rfc-context/src/components/common/Toolbar/Tabs.stories.tsx
new file mode 100644
index 00000000000..851c6a0bfd7
--- /dev/null
+++ b/packages/graphiql-2-rfc-context/src/components/common/Toolbar/Tabs.stories.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2020 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 List, { ListRow } from '../List';
+import Tabs from './Tabs';
+import React, { useState } from 'react';
+import { layout } from '../themes/decorators';
+import { ReactNodeLike } from '../../../types';
+
+export default { title: 'Tabbar', decorators: [layout] };
+
+const ManagedTabs = ({
+ tabs,
+ children,
+}: {
+ tabs: Array;
+ children: Array;
+}) => {
+ const [active, setActive] = useState(0);
+ return (
+
+ {children}
+
+ );
+};
+
+export const Tabbar = () => (
+ ,
+ HTMLButtonElement
+>;
+
+const Tab = ({ active, ...props }: TabProps) => (
+
-
+
{'One'}
+{'Two'}
+{'Three'}
+{'With'}
+{'a'}
+{'nested'}
+{'component'}
+
+
+
+
+ {'a'}
+{'b'}
+