graphiql 5: fix GraphiQL 5 feedback (#4026)

* fix GraphiQL 5 feedback

* add deprecated.ts

* add more deprecated

* useExecutionContext

* usePluginContext

* useSchemaContext

* useStorageContext

* useHistoryContext

* useExplorerContext

* upd readme

* upd readme

* upd readme

* polish

* mention never rerender

* upd

* upd

* fix toolbar

* toolbar changes

* upd

* upd

* upd

* upd

* fix graphiql footer overflow

* add changeset

* add changeset

* prettier

Author: dimaMachina

.changeset/tender-years-destroy.md

@@ -0,0 +1,16 @@
+---
+'@graphiql/plugin-doc-explorer': minor
+'@graphiql/plugin-history': minor
+'@graphiql/react': minor
+'graphiql': minor
+---
+
+- deprecate `useExplorerContext`, `useHistoryContext`, `usePrettifyEditors`, `useCopyQuery`, `useMergeQuery`, `useExecutionContext`, `usePluginContext`, `useSchemaContext`, `useStorageContext` hooks
+- fix response editor overflow on `<GraphiQL.Footer />`
+- export `GraphiQLProps` type
+- allow `children: ReactNode` for `<GraphiQL.Toolbar />`
+- change `ToolbarMenu` component:
+  - The `label` and `className` props were removed
+  - The `button` prop should now be a button element
+- document `useGraphiQL` and `useGraphiQLActions` hooks in `@graphiql/react` README.md
+- rename `useThemeStore` to `useTheme`

docs/migration/graphiql-5.0.0.md

@@ -18,3 +18,25 @@
   - `keyMap`. To use Vim or Emacs keybindings in Monaco, you can use community plugins. Monaco Vim: https://github.com/brijeshb42/monaco-vim. Monaco Emacs: https://github.com/aioutecism/monaco-emacs
   - `readOnly`
   - `validationRules`. Use custom GraphQL worker, see https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql#custom-webworker-for-passing-non-static-config-to-worker.'
+
+## `@graphiql/react`
+
+The `ToolbarMenu` component has changed.
+
+- The `label` and `className` props were removed
+- The `button` prop should now be a button element
+
+  ```jsx
+  <ToolbarMenu
+    label="Options"
+    button={
+      <ToolbarButton label="Options">
+        <SettingsIcon className="graphiql-toolbar-icon" aria-hidden="true" />
+      </ToolbarButton>
+    }
+  >
+    <ToolbarMenu.Item onSelect={() => console.log('Clicked!')}>
+      Test
+    </ToolbarMenu.Item>
+  </ToolbarMenu>
+  ```

packages/graphiql-plugin-doc-explorer/src/deprecated.ts

@@ -0,0 +1,13 @@
+import { useDocExplorer, useDocExplorerActions } from './context';
+
+/**
+ * @deprecated Use `useDocExplorerActions` and `useDocExplorer` hooks instead.
+ */
+export function useExplorerContext() {
+  const actions = useDocExplorerActions();
+  const explorerNavStack = useDocExplorer();
+  return {
+    ...actions,
+    explorerNavStack,
+  };
+}

packages/graphiql-plugin-doc-explorer/src/index.ts

@@ -12,3 +12,4 @@ export type {
   DocExplorerNavStack,
   DocExplorerNavStackItem,
 } from './context';
+export * from './deprecated';

packages/graphiql-plugin-history/src/deprecated.ts

@@ -0,0 +1,10 @@
+import { useHistory, useHistoryActions } from './context';
+
+/**
+ * @deprecated Use `useHistoryActions` and `useHistory` hooks instead.
+ */
+export function useHistoryContext() {
+  const actions = useHistoryActions();
+  const items = useHistory();
+  return { ...actions, items };
+}

packages/graphiql-plugin-history/src/index.ts

@@ -12,3 +12,4 @@ export const HISTORY_PLUGIN: GraphiQLPlugin = {
 export { History };
 
 export { HistoryStore, useHistory, useHistoryActions } from './context';
+export * from './deprecated';

packages/graphiql-react/README.md

@@ -74,31 +74,54 @@ text. If you want to use the default fonts you can load them using these files:
 - `@graphiql/react/font/roboto.css`
 - `@graphiql/react/font/fira-code.css`.
 
-You can of course use any other method to load these fonts (for example loading
+You can, of course, use any other method to load these fonts (for example, loading
 them from Google Fonts).
 
 Further details on how to use `@graphiql/react` can be found in the reference
 implementation of a GraphQL IDE - Graph*i*QL - in the
 [`graphiql` package](https://github.com/graphql/graphiql/blob/main/packages/graphiql/src/components/GraphiQL.tsx).
 
-## Available stores
+## Available Stores
 
-There are multiple stores that own different parts of the state that make up a
-complete GraphQL IDE. For each store there is a component
-(`<name>Store`) that makes sure the store is initialized and managed
-properly. These components contains all the logic related to state management.
+GraphiQL uses a set of state management stores, each responsible for a specific part of the IDE's
+behavior. These stores contain all logic related to state management and can be accessed via custom
+React hooks.
 
-In addition, for each store, there is also a hook that
-allows you to consume its current value:
+### Core Hooks
 
-- `useStorage`: Provides a storage API that can be used to persist state in
-  the browser (by default using `localStorage`)
-- `useEditorStore`: Manages all the editors and tabs
-- `useSchemaStore`: Fetches, validates and stores the GraphQL schema
-- `useExecutionStore`: Executes GraphQL requests
+- **`useStorage`**: Provides a storage API that can be used to persist state in the browser (by default using `localStorage`).
+- **`useTheme`**: Manages the current theme and provides a method to update it.
+- **`useGraphiQL`**: Access the current state.
+- **`useGraphiQLActions`**: Trigger actions that mutate the state. This hook **never** rerenders.
 
-All context properties are documented using JSDoc comments. If you're using an
-IDE like VSCode for development these descriptions will show up in auto-complete
+The `useGraphiQLActions` hook **exposes all actions** across store slices.
+The `useGraphiQL` hook **provides access to the following store slices**:
+
+| Store Slice | Responsibilities                                                                 |
+| ----------- | -------------------------------------------------------------------------------- |
+| `editor`    | Manages **query**, **variables**, **headers**, and **response** editors and tabs |
+| `execution` | Handles the execution of GraphQL requests                                        |
+| `plugin`    | Manages plugins and the currently active plugin                                  |
+| `schema`    | Fetches, validates, and stores the GraphQL schema                                |
+
+### Usage Example
+
+```js
+import { useGraphiQL, useGraphiQLActions, useTheme } from '@graphiql/react';
+
+// Get an action to fetch the schema
+const { introspect } = useGraphiQLActions();
+
+// Get the current theme and a method to change it
+const { theme, setTheme } = useTheme();
+
+// Or use a selector to access specific parts of the state
+const schema = useGraphiQL(state => state.schema);
+const currentTheme = useTheme(state => state.theme);
+```
+
+All store properties are documented using TSDoc comments. If you're using an
+IDE like VSCode for development, these descriptions will show up in auto-complete
 tooltips. All these descriptions can also be found in the
 [API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html).
 

packages/graphiql-react/src/components/toolbar-menu/index.css

@@ -1,34 +1,19 @@
 import type { FC, ReactNode } from 'react';
-import { cn } from '../../utility';
-import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+import { Trigger, type DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 import { DropdownMenu } from '../dropdown-menu';
-import { Tooltip } from '../tooltip';
-import './index.css';
 
-interface ToolbarMenuProps {
+interface ToolbarMenuProps extends DropdownMenuProps {
   button: ReactNode;
-  label: string;
 }
 
-const ToolbarMenuRoot: FC<
-  ToolbarMenuProps & {
-    children: ReactNode;
-    className?: string;
-  } & DropdownMenuProps
-> = ({ button, children, label, ...props }) => {
+const ToolbarMenuRoot: FC<ToolbarMenuProps> = ({
+  button,
+  children,
+  ...props
+}) => {
   return (
     <DropdownMenu {...props}>
-      <Tooltip label={label}>
-        <DropdownMenu.Button
-          className={cn(
-            'graphiql-un-styled graphiql-toolbar-menu',
-            props.className,
-          )}
-          aria-label={label}
-        >
-          {button}
-        </DropdownMenu.Button>
-      </Tooltip>
+      <Trigger asChild>{button}</Trigger>
       <DropdownMenu.Content>{children}</DropdownMenu.Content>
     </DropdownMenu>
   );

packages/graphiql-react/src/components/toolbar-menu/index.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable unicorn/prefer-export-from */
+import { useGraphiQL, useGraphiQLActions } from './components';
+import { pick } from './utility';
+import { useStorage } from './stores';
+
+/**
+ * @deprecated Use `const { prettifyEditors } = useGraphiQLActions()` instead.
+ */
+export function usePrettifyEditors() {
+  const { prettifyEditors } = useGraphiQLActions();
+  return prettifyEditors;
+}
+
+/**
+ * @deprecated Use `const { copyQuery } = useGraphiQLActions()` instead.
+ */
+export function useCopyQuery() {
+  const { copyQuery } = useGraphiQLActions();
+  return copyQuery;
+}
+
+/**
+ * @deprecated Use `const { mergeQuery } = useGraphiQLActions()` instead.
+ */
+export function useMergeQuery() {
+  const { mergeQuery } = useGraphiQLActions();
+  return mergeQuery;
+}
+
+/**
+ * @deprecated Use `useGraphiQLActions` and `useGraphiQL` hooks instead.
+ */
+export function useExecutionContext() {
+  const { run, stop } = useGraphiQLActions();
+  const values = useGraphiQL(state => ({
+    isFetching: state.isIntrospecting,
+    isSubscribed: Boolean(state.subscription),
+    operationName: state.operationName,
+  }));
+  return {
+    run,
+    stop,
+    ...values,
+  };
+}
+
+/**
+ * @deprecated Use `useGraphiQLActions` and `useGraphiQL` hooks instead.
+ */
+export function usePluginContext() {
+  const { setVisiblePlugin } = useGraphiQLActions();
+  const values = useGraphiQL(pick('plugins', 'visiblePlugin'));
+  return {
+    setVisiblePlugin,
+    ...values,
+  };
+}
+
+/**
+ * @deprecated Use `useGraphiQLActions` and `useGraphiQL` hooks instead.
+ */
+export function useSchemaContext() {
+  const { introspect } = useGraphiQLActions();
+  const values = useGraphiQL(
+    pick('fetchError', 'isFetching', 'schema', 'validationErrors'),
+  );
+  return {
+    introspect,
+    ...values,
+  };
+}
+
+/**
+ * @deprecated Use `const storage = useStorage()` instead.
+ */
+export const useStorageContext = useStorage;