Make design primitives React-independent

[thomasheyenbrock]

The current "reference implementation" of GraphiQL is using React. However, there are a lot of other frameworks and libraries that would benefit from having a GraphQL IDE that can be easily embedded.

A first step towards this could be to extract our design primitives (styles) out of @graphiql/react into a different packages, maybe @graphiql/toolkit or maybe a new dedicated package.

There's not yet any research or alignment of how this would look like and work exactly in code. If you stumble upon this discussion, feel free to drop your needs / ideas / feedback!

[acao]

@thomasheyenbrock a separate package sounds like a great idea as well! @graphiql/design for example, that can be imported by @graphiql/react and/or graphiql

[jonathanawesome]

Pulling design tokens out into a separate package is a great idea and the perfect first step to modularizing the component structure. A typed theme object that, at first, includes a basic set of tokens that could be easily consumable across frameworks may even bring additional folks into the community.

Another idea would be to gather community consensus and publish an svg/icon package that sets a base for visually describing the GraphQL spec. I've been particularly gushy over this bit in the GraphiQL 2.0 design file. Screenshot here for reference:

If we're having a conversation about the reference implementation becoming agnostic, I think the visual language is a wonderful place to start.