[redesign] layout for editor components (#2515)

* add icons to `@graphiql/react`

* add `UnstyledButton` ui component

* implement new design for editors layout

* rename `Unstyled` to `UnStyled` for spell checking

* remove unused class and whitespace in `className`

* make tiny change for deploy preview 🤞

* this will do it, i think?

Co-authored-by: Rikki Schulte <[email protected]>

Author: thomasheyenbrock

.changeset/long-gorillas-act.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add `UnStyledButton` UI component

.changeset/nice-garlics-help.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add some neat svg icons to `@graphiql/react`

packages/graphiql-react/package.json

@@ -54,6 +54,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "typescript": "^4.6.3",
-    "vite": "^2.9.5"
+    "vite": "^2.9.5",
+    "vite-plugin-react-svg": "^0.2.0"
   }
 }

packages/graphiql-react/src/editor/components/header-editor.tsx

@@ -3,20 +3,11 @@ import { useHeaderEditor, UseHeaderEditorArgs } from '../header-editor';
 import '../style/codemirror.css';
 import '../style/fold.css';
 
-type HeaderEditorProps = UseHeaderEditorArgs & { active?: boolean };
+type HeaderEditorProps = UseHeaderEditorArgs & { isHidden?: boolean };
 
-export function HeaderEditor({ active, ...hookArgs }: HeaderEditorProps) {
+export function HeaderEditor({ isHidden, ...hookArgs }: HeaderEditorProps) {
   const ref = useHeaderEditor(hookArgs);
   return (
-    <div
-      className="codemirrorWrap"
-      // This horrible hack is necessary because a simple display none toggle
-      // causes one of the editors' gutters to break otherwise.
-      style={{
-        position: active ? 'relative' : 'absolute',
-        visibility: active ? 'visible' : 'hidden',
-      }}
-      ref={ref}
-    />
+    <div className={`graphiql-editor${isHidden ? ' hidden' : ''}`} ref={ref} />
   );
 }

packages/graphiql-react/src/editor/components/query-editor.tsx

@@ -10,7 +10,5 @@ import '../style/auto-insertion.css';
 
 export function QueryEditor(props: UseQueryEditorArgs) {
   const ref = useQueryEditor(props);
-  return (
-    <section className="query-editor" aria-label="Query Editor" ref={ref} />
-  );
+  return <div className="graphiql-editor" ref={ref} />;
 }

packages/graphiql-react/src/editor/components/variable-editor.tsx

@@ -6,21 +6,12 @@ import '../style/lint.css';
 import '../style/hint.css';
 
 type VariableEditorProps = UseVariableEditorArgs & {
-  active?: boolean;
+  isHidden?: boolean;
 };
 
-export function VariableEditor({ active, ...hookArgs }: VariableEditorProps) {
+export function VariableEditor({ isHidden, ...hookArgs }: VariableEditorProps) {
   const ref = useVariableEditor(hookArgs);
   return (
-    <div
-      className="codemirrorWrap"
-      // This horrible hack is necessary because a simple display none toggle
-      // causes one of the editors' gutters to break otherwise.
-      style={{
-        position: active ? 'relative' : 'absolute',
-        visibility: active ? 'visible' : 'hidden',
-      }}
-      ref={ref}
-    />
+    <div className={`graphiql-editor${isHidden ? ' hidden' : ''}`} ref={ref} />
   );
 }

packages/graphiql-react/src/editor/style/codemirror.css

@@ -34,6 +34,9 @@
  */
 
 .cm-s-graphiql {
+  /* Default to punctuation */
+  color: var(--color-neutral-60);
+
   /* OperationType, `fragment`, `on` */
   & .cm-keyword {
     color: var(--color-pink);

packages/graphiql-react/src/icons/chevron-down.svg

@@ -0,0 +1,18 @@
+import _ChevronDownIcon from './chevron-down.svg';
+import _ChevronUpIcon from './chevron-up.svg';
+
+export const ChevronDownIcon = generateIcon(
+  _ChevronDownIcon,
+  'chevron down icon',
+);
+export const ChevronUpIcon = generateIcon(_ChevronUpIcon, 'chevron up icon');
+
+function generateIcon(RawComponent: any, title: string) {
+  const WithTitle = function IconComponent(
+    props: JSX.IntrinsicElements['svg'],
+  ) {
+    return <RawComponent {...props} title={title} />;
+  };
+  Object.defineProperty(WithTitle, 'name', { value: RawComponent.name });
+  return WithTitle;
+}

packages/graphiql-react/src/icons/chevron-up.svg

@@ -33,6 +33,7 @@ export {
   useHistoryContext,
   useSelectHistoryItem,
 } from './history';
+export * from './icons';
 export {
   SchemaContext,
   SchemaContextProvider,
@@ -43,6 +44,7 @@ export {
   StorageContextProvider,
   useStorageContext,
 } from './storage';
+export * from './ui';
 export { useDragResize } from './utility/resize';
 
 export type {

packages/graphiql-react/src/icons/index.tsx

@@ -41,8 +41,10 @@
   --px-16: 16px;
 
   /* Border radius */
+  --border-radius-2: 2px;
   --border-radius-4: 4px;
   --border-radius-8: 8px;
+  --border-radius-12: 12px;
 
   /* Box shadow */
   --box-shadow: 0px 6px 20px rgba(59, 76, 106, 0.13),

packages/graphiql-react/src/index.ts

@@ -0,0 +1,13 @@
+button.graphiql-un-styled {
+  all: unset;
+  border-radius: var(--border-radius-4);
+  cursor: pointer;
+
+  &:active {
+    background-color: var(--color-neutral-7);
+  }
+
+  &:focus {
+    outline: var(--color-neutral-15) auto 1px;
+  }
+}

packages/graphiql-react/src/style/root.css

@@ -0,0 +1,10 @@
+import './button.css';
+
+export function UnStyledButton(props: JSX.IntrinsicElements['button']) {
+  return (
+    <button
+      {...props}
+      className={`graphiql-un-styled ${props.className || ''}`.trim()}
+    />
+  );
+}

packages/graphiql-react/src/ui/button.css

@@ -0,0 +1 @@
+export * from './button';

packages/graphiql-react/src/ui/button.tsx

@@ -1 +1 @@
-// / <reference types="vite/client" />
+/// <reference types="vite/client" />

packages/graphiql-react/src/ui/index.ts

@@ -1,8 +1,16 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import reactSvgPlugin from 'vite-plugin-react-svg';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    reactSvgPlugin({
+      defaultExport: 'component',
+      expandProps: 'end',
+      titleProp: true,
+    }),
+  ],
   esbuild: {
     // We use function names for generating readable error messages, so we want
     // them to be preserved when building and minifying.

packages/graphiql-react/src/vite-env.d.ts

@@ -1,4 +1,6 @@
 import {
+  ChevronDownIcon,
+  ChevronUpIcon,
   EditorContext,
   EditorContextProvider,
   ExecutionContext,
@@ -13,6 +15,7 @@ import {
   SchemaContextProvider,
   StorageContext,
   StorageContextProvider,
+  UnStyledButton,
   useAutoCompleteLeafs,
   useCopyQuery,
   useDragResize,
@@ -54,6 +57,8 @@ import type {
 import React, { useEffect, useRef, useState } from 'react';
 
 export {
+  ChevronDownIcon,
+  ChevronUpIcon,
   EditorContext,
   EditorContextProvider,
   ExecutionContext,
@@ -68,6 +73,7 @@ export {
   SchemaContextProvider,
   StorageContext,
   StorageContextProvider,
+  UnStyledButton,
   useAutoCompleteLeafs,
   useCopyQuery,
   useDragResize,

packages/graphiql-react/vite.config.ts

@@ -33,12 +33,12 @@ describe('GraphiQL On Initialization', () => {
       '.graphiql-container',
       '.topBarWrap',
       '.editorWrap',
-      '.queryWrap',
-      '.resultWrap',
-      '.variable-editor',
+      '.graphiql-editors',
+      '.graphiql-response',
+      '.graphiql-editor-tool',
     ];
     cy.visit(`/`);
-    cy.get('.query-editor').contains('# Welcome to GraphiQL');
+    cy.get('.graphiql-query-editor').contains('# Welcome to GraphiQL');
     containers.forEach(cSelector => cy.get(cSelector).should('be.visible'));
   });
 

packages/graphiql/__mocks__/@graphiql/react.tsx

@@ -4,7 +4,9 @@ describe('Tabs', () => {
     cy.get('#session-tab-0').should('have.text', '<untitled>');
 
     // Enter a query without operation name
-    cy.get('.query-editor textarea').type('{id', { force: true }).wait(500);
+    cy.get('.graphiql-query-editor textarea')
+      .type('{id', { force: true })
+      .wait(500);
     cy.get('#session-tab-0').should('have.text', '<untitled>');
 
     // Run the query
@@ -14,19 +16,19 @@ describe('Tabs', () => {
     cy.get('.tab-add').click();
 
     // Enter a query
-    cy.get('.query-editor textarea')
+    cy.get('.graphiql-query-editor textarea')
       .type('query Foo {image', { force: true })
       .wait(500);
     cy.get('#session-tab-1').should('have.text', 'Foo');
 
     // Enter variables
-    cy.get('.variable-editor textarea')
+    cy.get('.graphiql-editor-tool textarea')
       .eq(0)
       .type('{"someVar":42', { force: true });
 
     // Enter headers
-    cy.contains('Request Headers').click();
-    cy.get('.variable-editor textarea')
+    cy.contains('Headers').click();
+    cy.get('.graphiql-editor-tool textarea')
       .eq(1)
       .type('{"someHeader":"someValue"', { force: true });
 

packages/graphiql/cypress/integration/init.spec.ts

@@ -68,14 +68,14 @@ Cypress.Commands.add('visitWithOp', ({ query, variables, variablesString }) => {
 Cypress.Commands.add(
   'assertHasValues',
   ({ query, variables, variablesString, headersString, response }: Op) => {
-    cy.get('.query-editor').should(element => {
+    cy.get('.graphiql-query-editor').should(element => {
       expect(normalize(element.get(0).innerText)).to.equal(
         codeWithLineNumbers(query),
       );
     });
     if (typeof variables !== 'undefined') {
-      cy.contains('Query Variables').click();
-      cy.get('.variable-editor .codemirrorWrap')
+      cy.contains('Variables').click();
+      cy.get('.graphiql-editor-tool .graphiql-editor')
         .eq(0)
         .should(element => {
           expect(normalize(element.get(0).innerText)).to.equal(
@@ -84,8 +84,8 @@ Cypress.Commands.add(
         });
     }
     if (typeof variablesString !== 'undefined') {
-      cy.contains('Query Variables').click();
-      cy.get('.variable-editor .codemirrorWrap')
+      cy.contains('Variables').click();
+      cy.get('.graphiql-editor-tool .graphiql-editor')
         .eq(0)
         .should(element => {
           expect(normalize(element.get(0).innerText)).to.equal(
@@ -94,8 +94,8 @@ Cypress.Commands.add(
         });
     }
     if (typeof headersString !== 'undefined') {
-      cy.contains('Request Headers').click();
-      cy.get('.variable-editor .codemirrorWrap')
+      cy.contains('Headers').click();
+      cy.get('.graphiql-editor-tool .graphiql-editor')
         .eq(1)
         .should(element => {
           expect(normalize(element.get(0).innerText)).to.equal(

packages/graphiql/cypress/integration/tabs.spec.ts

@@ -11,8 +11,10 @@ import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import '@graphiql/react/font/roboto.css';
 import '@graphiql/react/font/fira-code.css';
 import '@graphiql/react/dist/style.css';
+import './style.css';
+
+// Legacy styles
 import './css/app.css';
-import './css/loading.css';
 import './css/doc-explorer.css';
 import './css/history.css';
 

packages/graphiql/cypress/support/commands.ts

@@ -60,11 +60,7 @@ export function DocExplorer(props: DocExplorerProps) {
     );
   } else if (isFetching) {
     // Schema is undefined when it is being loaded via introspection.
-    content = (
-      <div className="spinner-container">
-        <div className="spinner" />
-      </div>
-    );
+    content = <div className="graphiql-spinner" />;
   } else if (!schema) {
     // Schema is null when it explicitly does not exist, typically due to
     // an error during introspection.