feat: add @graphiql/react package

[thomasheyenbrock]

This PR adds a new package @graphiql/react to the monorepo. The idea for this package is to provide all the building blocks (context providers, hooks to work with the state managed by the context, reusable components, etc.) for building a GraphiQL-like UI. The main graphiql package will become the reference implementation for how to use the components from @graphiql/react.

As a first step towards this goal, we add the following to the new package:

• A React context ExplorerContext that shall contain all the state and logic related to the docs/explorer. We wrap with in a component ExplorerContextProvider that has to be rendered at the top of the tree that contains other GraphiQL-components that need to access or change this state.
• For easy access in functional components we provide a hook useExplorerNavStack.
• We also export the context itself, so that we can use consumer components to access the state in legacy class components.

Notes:

• I needed to update the eslint-plugin-react version, otherwise using the plugin:react/jsx-runtime did not work.
• I fixed a minor type issue where GraphQLType was used instead of the SchemaReference type from codemirror-graphql.

[changeset-bot]

🦋 Changeset detected

Latest commit: 6e8a3e5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
graphiql	Minor
@graphiql/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[timsuchanek]

Awesome! I'll have a look in a bit!

Regarding eslint, we should get https://github.com/graphql/graphiql/pulls/B2o5T merged, they might even resolve some issues?

[timsuchanek]

Looks good to me, I like the cleanup around state, not having parent components dealing with child state anymore, but instead using the context.
The only thing is cleaning up the merge conflicts, apart from that good to go!

[codecov]

Codecov Report

Merging #2370 (6e8a3e5) into main (2d91916) will decrease coverage by 0.64%.
The diff coverage is 69.20%.

@@            Coverage Diff             @@
##             main    #2370      +/-   ##
==========================================
- Coverage   65.70%   65.06%   -0.65%     
==========================================
  Files          85       81       -4     
  Lines        5106     5255     +149     
  Branches     1631     1698      +67     
==========================================
+ Hits         3355     3419      +64     
- Misses       1747     1832      +85     
  Partials        4        4              

Impacted Files	Coverage Δ
packages/codemirror-graphql/src/hint.ts	94.73% <ø> (ø)
packages/codemirror-graphql/src/lint.ts	100.00% <ø> (ø)
packages/codemirror-graphql/src/results/mode.ts	47.05% <ø> (ø)
...kages/codemirror-graphql/src/utils/forEachState.ts	100.00% <ø> (ø)
packages/codemirror-graphql/src/utils/hintList.ts	95.65% <ø> (ø)
...ackages/codemirror-graphql/src/utils/info-addon.ts	1.02% <ø> (ø)
...ckages/codemirror-graphql/src/utils/mode-indent.ts	0.00% <0.00%> (ø)
packages/codemirror-graphql/src/variables/hint.ts	89.70% <ø> (ø)
packages/codemirror-graphql/src/variables/mode.ts	79.48% <ø> (ø)
...aphiql/src/components/DocExplorer/DefaultValue.tsx	50.00% <ø> (ø)
... and 85 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c5696df...6e8a3e5. Read the comment docs.

[JoviDeCroock]

Looks great!

[acao]

this is a great start for @graphiql/react! what do you think of moving the DocExplorer components to @graphiql/react workspace as well?

[acao]

hmm, perhaps we should make this a top-level public export in codemirror-graphql to set a good example. @imolorhe does this make sense to you?

[thomasheyenbrock]

As far as I can tell, codemirror-graphql currently doesn't have any top-level imports at all. Happy to follow up on this in another PR if it makes sense to you folks 🤗

[thomasheyenbrock]

what do you think of moving the DocExplorer components to @graphiql/react workspace as well?

Definitely! Will do this in a follow up to not bloat this PR too much 👍

[acao]

this is good to go, exactly the direction we need to move in!