overhaul READMEs and add migratio guide for graphiql@2

.changeset/chilly-radios-tap.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+BREAKING: The `onHasCompletion` export has been removed as it is only meant to be used internally.

.changeset/five-pillows-fail.md

@@ -0,0 +1,11 @@
+---
+'@graphiql/react': minor
+---
+
+Add new components:
+- UI components (`Button`, `ButtonGroup`, `Dialog`, `Menu`, `Spinner`, `Tab`, `Tabs`, `Tooltip`, `UnStyledButton` and lots of icon components)
+- Editor components (`QueryEditor`, `VariableEditor`, `HeaderEditor` and `ResponseEditor`)
+- Toolbar components (`ExecuteButton`, `ToolbarButton`, `ToolbarMenu` and `ToolbarSelect`)
+- Docs components (`Argument`, `DefaultValue`, `DeprecationReason`, `Directive`, `DocExplorer`, `ExplorerSection`, `FieldDocumentation`, `FieldLink`, `SchemaDocumentation`, `Search`, `TypeDocumentation` and `TypeLink`)
+- `History` component
+- A `GraphiQLProvider` component that renders all other existing provider components from `@graphiql/react` for ease of use

.changeset/fresh-seals-attack.md

@@ -0,0 +1,8 @@
+---
+'@graphiql/react': minor
+---
+
+BREAKING: Add a new context provider for plugins. This induces changes to the following other contexts and their provider components:
+- The property `isVisible` and the methods `hide` and `show` of the `ExplorerContext` have been removed. Also, the property `isVisible` and the methods `hide`, `show` and `toggle` of the `HistoryContext` have been removed. Visibility state of plugins is now part of the `PluginContext` using the `visiblePlugin` property. The visibility state can be altered using the `setVisiblePlugin` method of the `PluginContext`.
+- The `isVisible` prop of the `ExplorerContextProvider` has been removed. For controlling the visibility state of plugins you can now use the `visiblePlugin` prop of the `PluginContextProvider`.
+- The `onToggle` prop of the `HistoryContextProvider` and the `onToggleVisibility` prop of the `ExplorerContextProvider` have been removed. For listening on visibility changes for any plugin you can now use the `onTogglePluginVisibility` prop of the `PluginContextProvider`.

.changeset/gentle-forks-rule.md

@@ -0,0 +1,10 @@
+---
+'codemirror-graphql': major
+---
+
+BREAKING: Change the implementation of the info popup when hovering items in the code editor:
+- For fields the type prefix was removed, i.e. `MyType.myField` -> `myField`
+- For args, the type and field was removed, i.e. `MyType.myField(myArg: MyArgType)` -> `myArg: MyArgType`
+- The DOM structure of the info tooltip changed to enable more flexible styling:
+  - The first section (i.e. the clickable parts like type and field name) are wrapped in an additional div
+  - The markdown content for deprecation reasons is wrapped in an additional div

.changeset/green-mayflies-notice.md

@@ -0,0 +1,5 @@
+---
+'graphiql': major
+---
+
+BREAKING: The `GraphiQL` component does no longer set a property `g` on the `window` object.

.changeset/lazy-clouds-lay.md

@@ -0,0 +1,5 @@
+---
+'graphiql': major
+---
+
+BREAKING: Implement a new design for the GraphiQL UI. This changes both DOM structure and class names. We consider this a breaking change as custom GraphQL IDEs built on top of GraphiQL relied on these internals, e.g. overriding styles using certain class names.

.changeset/mighty-cobras-occur.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+BREAKING: The `ResponseTooltip` prop of the `ResponseEditor` has been renamed to `responseTooltip`

.changeset/ninety-pumpkins-reflect.md

@@ -0,0 +1,5 @@
+---
+'graphiql': minor
+---
+
+GraphiQL now ships with a dark theme. By default the interface respects the system settings, the theme can also be explicitly chosen via the new settings dialog.

.changeset/ninety-tips-thank.md

@@ -0,0 +1,13 @@
+---
+'@graphiql/toolkit': minor
+---
+
+BREAKING: Don't pass `shouldPersistHeaders` anymore when invoking the fetcher function. This value can be looked up by consuming the `EditorContext`:
+```js
+import { useEditorContext } from '@graphiql/react';
+
+function MyComponent() {
+  const { shouldPersistHeaders } = useEditorContext();
+  // Do things...
+}
+```

.changeset/pre.json

@@ -0,0 +1,17 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "example-monaco-graphql-react-vite": "0.0.0",
+    "codemirror-graphql": "2.0.0-next.3",
+    "graphiql": "2.0.0-next.3",
+    "@graphiql/react": "1.0.0-next.3",
+    "@graphiql/toolkit": "1.0.0-next.3",
+    "graphql-language-service": "5.0.6",
+    "graphql-language-service-cli": "3.3.0",
+    "graphql-language-service-server": "2.8.0",
+    "monaco-graphql": "1.1.2",
+    "vscode-graphql": "0.6.0"
+  },
+  "changesets": []
+}

.changeset/real-waves-enjoy.md

@@ -0,0 +1,33 @@
+---
+'graphiql': major
+---
+
+BREAKING: The following static properties of the `GraphiQL` component have been removed:
+- `GraphiQL.formatResult`: You can use the function `formatResult` from `@graphiql/toolkit` instead.
+- `GraphiQL.formatError`: You can use the function `formatError` from `@graphiql/toolkit` instead.
+- `GraphiQL.QueryEditor`: You can use the `QueryEditor` component from `@graphiql/react` instead.
+- `GraphiQL.VariableEditor`: You can use the `VariableEditor` component from `@graphiql/react` instead.
+- `GraphiQL.HeaderEditor`: You can use the `HeaderEditor` component from `@graphiql/react` instead.
+- `GraphiQL.ResultViewer`: You can use the `ResponseEditor` component from `@graphiql/react` instead.
+- `GraphiQL.Button`: You can use the `ToolbarButton` component from `@graphiql/react` instead.
+- `GraphiQL.ToolbarButton`: This exposed the same component as `GraphiQL.Button`.
+- `GraphiQL.Menu`: You can use the `ToolbarMenu` component from `@graphiql/react` instead.
+- `GraphiQL.MenuItem`: You can use the `ToolbarMenu.Item` component from `@graphiql/react` instead.
+- `GraphiQL.Group`: Grouping multiple buttons side-by-side is not provided out-of-the box anymore in the new GraphiQL UI. If you want to implement a similar feature in the new vertical toolbar you can do so by adding your own styles for your custom toolbar elements. Example:
+  ```jsx
+  import { GraphiQL } from "graphiql";
+  function CustomGraphiQL() {
+    return (
+      <GraphiQL>
+        <GraphiQL.Toolbar>
+          {/* Add custom styles for your buttons using the given class */}
+          <div className="button-group">
+            <button>1</button>
+            <button>2</button>
+            <button>3</button>
+          </div>
+        </GraphiQL.Toolbar>
+      </GraphiQL>
+    );
+  }
+  ```

.changeset/red-zoos-divide.md

@@ -0,0 +1,25 @@
+---
+'graphiql': major
+---
+
+BREAKING: The following exports of the `graphiql` package have been removed:
+- `DocExplorer`: Now exported from `@graphiql/react` as `DocExplorer`
+  - The `schema` prop has been removed, the component now uses the schema provided by the `ExplorerContext`
+- `fillLeafs`: Now exported from `@graphiql/toolkit` as `fillLeafs`
+- `getSelectedOperationName`: Now exported from `@graphiql/toolkit` as `getSelectedOperationName`
+- `mergeAst`: Now exported from `@graphiql/toolkit` as `mergeAst`
+- `onHasCompletion`: Now exported from `@graphiql/react` as `onHasCompletion`
+- `QueryEditor`: Now exported from `@graphiql/react` as `QueryEditor`
+- `ToolbarMenu`: Now exported from `@graphiql/react` as `ToolbarMenu`
+- `ToolbarMenuItem`: Now exported from `@graphiql/react` as `ToolbarMenu.Item`
+- `ToolbarSelect`: Now exported from `@graphiql/react` as `ToolbarListbox`
+- `ToolbarSelectOption`: Now exported from `@graphiql/react` as `ToolbarListbox.Option`
+- `VariableEditor`: Now exported from `@graphiql/react` as `VariableEditor`
+- type `Fetcher`: Now exported from `@graphiql/toolkit`
+- type `FetcherOpts`: Now exported from `@graphiql/toolkit`
+- type `FetcherParams`: Now exported from `@graphiql/toolkit`
+- type `FetcherResult`: Now exported from `@graphiql/toolkit`
+- type `FetcherReturnType`: Now exported from `@graphiql/toolkit`
+- type `Observable`: Now exported from `@graphiql/toolkit`
+- type `Storage`: Now exported from `@graphiql/toolkit`
+- type `SyncFetcherResult`: Now exported from `@graphiql/toolkit`

.changeset/rude-houses-kiss.md

@@ -0,0 +1,5 @@
+---
+'graphiql': major
+---
+
+BREAKING: The `GraphiQL` component has been refactored to be a function component. Attaching a ref to this component will no longer provide access to props, state or class methods. In order to interact with or change `GraphiQL` state you need to use the contexts and hooks provided by the `@graphiql/react` package. More details and examples can be found in the migration guide.

.changeset/spotty-boxes-shout.md

@@ -0,0 +1,21 @@
+---
+'graphiql': major
+---
+
+BREAKING: The following props of the `GraphiQL` component have been changed:
+- The props `defaultVariableEditorOpen` and `defaultSecondaryEditorOpen` have been merged into one prop `defaultEditorToolsVisibility`. The default behavior if this prop is not passed is that the editor tools are shown if at least one of the secondary editors has contents. You can pass the following values to the prop:
+  - Passing `false` hides the editor tools.
+  - Passing `true` shows the editor tools.
+  - Passing `"variables"` explicitly shows the variables editor.
+  - Passing `"headers"` explicitly shows the headers editor.
+- The props `docExplorerOpen`, `onToggleDocs` and `onToggleHistory` have been removed. They are replaced by the more generic props `visiblePlugin` (for controlling which plugin is visible) and `onTogglePluginVisibility` (which is called each time the visibility of any plugin changes).
+- The `headerEditorEnabled` prop has been renamed to `isHeadersEditorEnabled`.
+- The `ResultsTooltip` prop has been renamed to `responseTooltip`.
+- Tabs are now always enabled. The `tabs` prop has therefore been replaced with a prop `onTabChange`. If you used the `tabs` prop before to pass this function you can change your implementation like so:
+  ```diff
+  <GraphiQL
+  -  tabs={{ onTabChange: (tabState) => {/* do something */} }}
+  +  onTabChange={(tabState) => {/* do something */}}
+  />
+  ```
+

.changeset/tender-impalas-provide.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/toolkit': minor
+---
+
+Add a `clear` method to `Storage` classes

README.md

@@ -2,7 +2,7 @@
 
 # GraphQL IDE Monorepo
 
-> **Security Notice:** All versions of `graphiql` < `1.4.7` are vulnerable to an XSS attack in cases where the GraphQL server to which the GraphiQL web app connects is not trusted. Learn more [in the graphiql `security` docs directory](https://github.com/graphql/graphiql/blob/main/docs/security)
+> **Security Notice:** All versions of `graphiql` < `1.4.7` are vulnerable to an XSS attack in cases where the GraphQL server to which the GraphiQL web app connects is not trusted. Learn more [in the graphiql `security` docs directory](docs/security)
 
 > **Looking for the [GraphiQL Docs?](packages/graphiql/README.md)**: This is the root of the monorepo! The full GraphiQL docs are located at [`packages/graphiql`](packages/graphiql)
 
@@ -31,22 +31,8 @@ The purpose of this monorepo is to give the GraphQL Community:
 - an example of how to use this ecosystem with GraphiQL.
 - examples of how to implement or extend GraphiQL.
 
-### Latest Stable Ecosystem
-
-`[email protected]` and ecosystem are organized as below. Any further changes to `[email protected]` are made against `1.0.0` branch
-
-![Diagram of the current Monorepo and third party ecosystem](https://raw.githubusercontent.com/graphql/graphiql/main/resources/images/current-ecosystem.jpg)
-
-### Proposed Ecosystem
-
-As we re-write for `[email protected]` ecosystem, this monorepo will contain a sdk and plugins.
-
-![Diagram of the proposed Monorepo and third party ecosystem](https://raw.githubusercontent.com/graphql/graphiql/main/resources/images/proposed-ecosystem.jpg)
-
 ## [`graphiql`](packages/graphiql#readme)
 
-> **Breaking Changes & Improvements:** several interfaces are being dropped for new ones are arriving for GraphiQL 1.0.0! Read more in [this issue](https://github.com/graphql/graphiql/issues/1165)
-
 <!-- prettier-ignore -->
 > [![NPM](https://img.shields.io/npm/v/graphiql.svg)](https://npmjs.com/graphiql)
 > ![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/graphiql)
@@ -55,21 +41,14 @@ As we re-write for `[email protected]` ecosystem, this monorepo will contain a sdk an
 > ![npm bundle size (version)](https://img.shields.io/bundlephobia/min/graphiql/latest)
 > ![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/graphiql/latest)
 
-![Screenshot of GraphiQL with Doc Explorer Open](https://raw.githubusercontent.com/graphql/graphiql/main/packages/graphiql/resources/graphiql.jpg)
+![Screenshot of GraphiQL with Doc Explorer Open](packages/graphiql/resources/graphiql.jpg)
 
 _/ˈɡrafək(ə)l/_ A graphical interactive in-browser GraphQL IDE. [Try the live demo](http://graphql.org/swapi-graphql). We also have [a demo using our latest netlify build](http://graphiql-test.netlify.com) for the `main` branch.
 
 The GraphiQL IDE, implemented in React, currently using [GraphQL mode for CodeMirror](packages/codemirror-graphql#readme) & [GraphQL Language Service](packages/graphql-language-service#readme).
 
 **Learn more about [GraphiQL in `packages/graphiql/README.md`](packages/graphiql#readme)**
 
-### How To Setup/Implement GraphiQL
-
-[codesandbox.io graphiql example](https://codesandbox.io/s/graphiql-js-example-oc851)
-[stackblitz.com graphiql example](https://stackblitz.com/edit/react-ts-jpnmod)
-
-**The [GraphiQL Readme](packages/graphiql#readme) explains** some of the ways to implement GraphiQL, and we also have the [examples](examples) directory as well!
-
 ## [`monaco-graphql`](packages/monaco-graphql#readme)
 
 [![NPM](https://img.shields.io/npm/v/monaco-graphql.svg)](https://npmjs.com/monaco-graphql)

babel.config.js

@@ -23,6 +23,11 @@ module.exports = {
   ],
   env: {
     test: {
+      presets: [
+        [require.resolve('@babel/preset-env'), envConfig],
+        [require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
+        require.resolve('@babel/preset-typescript'),
+      ],
       plugins: [require.resolve('babel-plugin-macros')],
     },
     development: {

custom-words.txt

@@ -63,9 +63,11 @@ yoshiakis
 // packages and tools
 argparse
 browserslist
+bundlephobia
 changesets
 codemirror
 codesandbox
+combobox
 commitlint
 cosmicconfig
 dompurify
@@ -81,6 +83,7 @@ manypkg
 markdownit
 meros
 nullthrows
+onegraph
 openvsx
 ovsx
 picomatch
@@ -107,23 +110,30 @@ eslintignore
 filesfor
 flowtests
 foldgutter
+foldmarker
 ghapi
 graphqlconfig
 graphqlrc
 graphqls
+invalidchar
 languageservice
+linenumber
 linenumbers
 linkify
+listbox
 listvalues
+matchingbracket
 modulemap
 myschema
 newhope
 nocheck
 nocursor
+nonmatchingbracket
 nrtbf
 nulltype
 nvim
 objectvalues
+orche
 outdir
 outlineable
 postbuild
@@ -148,7 +158,9 @@ websockets
 
 
 // fonts
+fira
 menlo
+roboto
 
 // locations
 givatayim
@@ -186,6 +198,7 @@ paas
 //   these pop up when writing "GraphQL___"
 qlapi
 qlid
+qlide
 
 // other
 architecting