[redesign] move docs components to `@graphiql/react` #2582

thomasheyenbrock · 2022-07-22T08:08:16Z

Part of #2325

This PR moves over the "primitive" components that make up the doc explorer:

type and field links
default value
arguments
directives
markdown content

Some more notes:

I didn't work out which parts of the CSS for the docs are now obsolete. Instead we'll remove all the legacy styles in the next PR.
I combined a lot of changesets related to new components added to @graphqil/react into one to have a better overview.

changeset-bot · 2022-07-22T08:08:19Z

⚠️ No Changeset found

Latest commit: 106f521

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes changesets to release 2 packages

Name	Type
@graphiql/react	Minor
graphiql	Patch

Click here to learn what changesets are, and how to add one.

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

codecov · 2022-07-22T08:27:54Z

Codecov Report

Merging #2582 (106f521) into graphiql-v2 (712ac0b) will decrease coverage by 13.00%.
The diff coverage is 31.57%.

@@               Coverage Diff                @@
##           graphiql-v2    #2582       +/-   ##
================================================
- Coverage        69.08%   56.08%   -13.01%     
================================================
  Files               72       88       +16     
  Lines             4215     5192      +977     
  Branches          1379     1633      +254     
================================================
  Hits              2912     2912               
- Misses            1295     2270      +975     
- Partials             8       10        +2

Impacted Files	Coverage Δ
...raphiql-react/src/explorer/components/argument.tsx	`0.00% <0.00%> (ø)`
...aphiql-react/src/explorer/components/directive.tsx	`0.00% <0.00%> (ø)`
...phiql-react/src/explorer/components/field-link.tsx	`0.00% <0.00%> (ø)`
packages/graphiql-react/src/explorer/context.tsx	`8.00% <ø> (ø)`
packages/graphiql-react/src/ui/markdown.tsx	`0.00% <0.00%> (ø)`
...phiql/src/components/DocExplorer/SearchResults.tsx	`0.00% <ø> (ø)`
...ql-react/src/explorer/components/default-value.tsx	`9.09% <9.09%> (ø)`
.../graphiql/src/components/DocExplorer/SchemaDoc.tsx	`64.70% <50.00%> (ø)`
...es/graphiql/src/components/DocExplorer/TypeDoc.tsx	`91.02% <69.23%> (-3.42%)`	⬇️
...s/graphiql/src/components/DocExplorer/FieldDoc.tsx	`92.59% <83.33%> (-4.19%)`	⬇️
... and 17 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 712ac0b...106f521. Read the comment docs.

acao · 2022-07-24T13:46:34Z

this is looking lovely @thomasheyenbrock ! i think the changeset automation/canary release behavior expects a new changest file unfortauntely, so I think you can just delete all of these and consolidate them into a new file

this is exactly where I was hoping for things to go!

acao · 2022-07-24T13:50:18Z

some slight spacing nits -

is there supposed to be this gap on the border? i need to look at the figma

i think offsetting lists and other markdown-defined block elements (quotes, code snippets, etc) might be in order

packages/graphiql-react/src/markdown.ts

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

thomasheyenbrock · 2022-07-25T09:45:48Z

@acao the new docs design is not fully implemented yet 😅 there will be likely two more PRs for this to be done, I just splitted the changes because it would have been too much otherwise.

The comments about @graphiql/toolkit are great but out of scope here. I'll open issues to track these and so that we don't forget 👍

thomasheyenbrock · 2022-07-25T10:01:18Z

@acao regarding changesets, we're not merging this PR into main but into graphiql-v2, so all changesets will accumulate there before we're then actually merging this branch into main.

acao · 2022-07-25T10:11:19Z

Ok it all looks good! Sorry i forgot about that part haha

* move explorer context into folder * move `TypeLink` component to `@graphiql/react` * move `FieldLink` component to `@graphiql/react` * move `DefaultValue` component to `@graphiql/react` * move `Directive` component to `@graphiql/react` * extract `MarkdownContent` component in `@gaphiql/react` * move `Argument` component to `@graphiql/react` * combine and extend changesets

* [redesign]: editor in new design (#2513) * add postcss config to allow nesting * avoid processing css from `@graphiql/react` with postcss * add css files for default fonts * add long description with markdown to dev schema * rewrite completion tooltip * move editor css to @graphiql/react * git mv editor components to `@graphiql/react` * adjust editor components after moving to `@graphiql/react` * move styles for auto-inserted leads * make dynamic padding more resilient and add explanatory comment * add extra color to avoid conflicts * colocate markdown and deprecation styles * add changesets * fix spell checking * add changeset for graphiql@2 * don't enter pre-release mode in changeset * more elaborate changeset message * [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]> * set default background color for editors (#2528) * set default background colors via css variables (#2530) * move editor styles to `@graphiql/react` (#2532) * refresh editor after hiding (#2537) * add caller argument to editor hooks (#2538) * implement footer in new design (#2540) * [redesign] implement new toolbar design (#2524) * implement new toolbar design * add `caller` argument for better errors * [redesign] implement sidebar (#2543) * implement sidebar in new design * simplify callback * [redesign] implement new design for history plugin (#2571) * add icons * don't invoce callback when programmatically change resizable element * implement history in new design * visually separate favourite history items * add save button when editing history label * add changeset * add missing changesets in retrospect * fix typos * fix e2e tests * remove input outline * add prerelease versions * fix opening doc explorer when clicking references (#2578) * extract loading spinner to `@graphiql/react` (#2581) * [redesign] move docs components to `@graphiql/react` (#2582) * move explorer context into folder * move `TypeLink` component to `@graphiql/react` * move `FieldLink` component to `@graphiql/react` * move `DefaultValue` component to `@graphiql/react` * move `Directive` component to `@graphiql/react` * extract `MarkdownContent` component in `@gaphiql/react` * move `Argument` component to `@graphiql/react` * combine and extend changesets * add `Search` component to `@graphiql/react` (#2586) * move remaining doc explorer component to `@graphiql/react` (#2587) * [redesign] docs (#2588) * add icons * add `Button` component to `@graphiql/react` * add explorer section component * redesign `SchemaDocumentation` component * redesign `TypeDocumentation` component * redesign `FieldDocumentation` component * redesign `DocExplorer` component * extend changeset message * move tab components to `@graphiql/react` (#2591) * [redesign] implement new design for tabs (#2592) * implement new design for tabs * add back `tab` role * increment versions from release * [redesign] add settings dialog (#2595) * add `Dialog` component to `@graphiql/react` * add a `clear` method to the `Storage` type * add success and failure states to `Button` component * add settings dialog * make sure to show dialog above editor scrollbars * [redesign] add dark mode (#2596) * add `ButtonGroup` component to `@graphiql/react` * dark mode * add back styles for editor search (#2599) * add a dialog that shows all available shortkeys (#2601) * add a dialog that shows all available shortkeys * use table in short key dialog * add shortkey for introspection * add link to codemirror keymaps * make dropdown menu accessible (#2627) * fix doc explorer style regressions (#2630) * fix selector specificity for link styling * leverage nesting * fix hiding the headline on focus * ensure correct focus outlines and remove visited styles * increment next versions * adds styles to contain the result window above any footer content (#2621) * adds styles to contain the result window above any footer content * simplifies flex value * use hsl values and reduce number of CSS variables (#2637) * rename CSS variables for colors (#2641) * forward refs and props for UI components (#2628) * [redesign] implement toolbar menu and select in new design (#2631) * implement toolbar menu in new design * implement `ToolbarListbox` in new design * better tooltips * [v2] cleanup `GraphiQL` component (#2632) * remove deprecated class methods * remove utilities * remove ref forwarding * refactor inner class component to a function component * merge main component with context consumer component * remove component statics * refactor outer component to be a class component * remove comments * add changeset * remove legacy exports * [v2] add provider component and deduplicate prop type definitions (#2650) * add `GraphiQLProvider` to `@graphiql/react` and include `StorageContextProvider` * add `HistoryContextProvider` to `GraphiQLProvider` * add `EditorContextProvider` to `GraphiQLProvider` * add `SchemaContextProvider` to `GraphiQLProvider` * add `ExecutionContextProvider` to `GraphiQLProvider` * move `ExplorerContextProvider` to `GraphiQLProvider` * declare props for `GraphiQLInterface` * reuse prop definitions from editor components * merge props for default state of editor tools * rename prop for toggling headers editor * re-export GraphiQL provider * add documention for `@graphiql/react` (#2657) * add JSDocs for component props and hooks * add JSDocs for context types * add README for `@graphiql/react` * [v2] add plugin api for docs and history (#2674) * add plugin api for docs and history * throw error when plugin has no title * make popover styles look good in dark mode (#2682) * add example for `graphiql-explorer` (#2683) * don't pass `shouldPersistHeaders` to fetcher anymore (#2684) * bump preview versions * overhaul READMEs and add migratio guide for `graphiql@2` Co-authored-by: Rikki Schulte <[email protected]> Co-authored-by: Jonathan Brennan <[email protected]>

* move explorer context into folder * move `TypeLink` component to `@graphiql/react` * move `FieldLink` component to `@graphiql/react` * move `DefaultValue` component to `@graphiql/react` * move `Directive` component to `@graphiql/react` * extract `MarkdownContent` component in `@gaphiql/react` * move `Argument` component to `@graphiql/react` * combine and extend changesets

thomasheyenbrock added 5 commits July 22, 2022 09:15

move explorer context into folder

e4cc573

move TypeLink component to @graphiql/react

c674b6c

move FieldLink component to @graphiql/react

d386bf4

move DefaultValue component to @graphiql/react

5312eab

move Directive component to @graphiql/react

6a00550

thomasheyenbrock force-pushed the feat/docs-components branch from 2c65d68 to 6dab532 Compare July 22, 2022 08:24

thomasheyenbrock added 3 commits July 22, 2022 10:29

extract MarkdownContent component in @gaphiql/react

cf4f47c

move Argument component to @graphiql/react

ae54ede

combine and extend changesets

106f521

thomasheyenbrock force-pushed the feat/docs-components branch from 6dab532 to 106f521 Compare July 22, 2022 08:30

acao reviewed Jul 24, 2022

View reviewed changes

packages/graphiql-react/src/markdown.ts Show resolved Hide resolved

acao reviewed Jul 24, 2022

View reviewed changes

packages/graphiql-react/src/ui/markdown.css Show resolved Hide resolved

thomasheyenbrock mentioned this pull request Jul 25, 2022

custom markdown renderer #2584

Open

acao approved these changes Jul 25, 2022

View reviewed changes

thomasheyenbrock merged commit 0786115 into graphiql-v2 Jul 25, 2022

thomasheyenbrock deleted the feat/docs-components branch July 25, 2022 11:59

thomasheyenbrock mentioned this pull request Jul 25, 2022

graphiql@2 #2523

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[redesign] move docs components to `@graphiql/react` #2582

[redesign] move docs components to `@graphiql/react` #2582

thomasheyenbrock commented Jul 22, 2022

changeset-bot bot commented Jul 22, 2022 •

edited

Loading

codecov bot commented Jul 22, 2022 •

edited

Loading

acao commented Jul 24, 2022 •

edited

Loading

acao commented Jul 24, 2022 •

edited

Loading

thomasheyenbrock commented Jul 25, 2022

thomasheyenbrock commented Jul 25, 2022

acao commented Jul 25, 2022

[redesign] move docs components to @graphiql/react #2582

[redesign] move docs components to @graphiql/react #2582

Conversation

thomasheyenbrock commented Jul 22, 2022

changeset-bot bot commented Jul 22, 2022 • edited Loading

⚠️ No Changeset found

codecov bot commented Jul 22, 2022 • edited Loading

Codecov Report

acao commented Jul 24, 2022 • edited Loading

acao commented Jul 24, 2022 • edited Loading

thomasheyenbrock commented Jul 25, 2022

thomasheyenbrock commented Jul 25, 2022

acao commented Jul 25, 2022

[redesign] move docs components to `@graphiql/react` #2582

[redesign] move docs components to `@graphiql/react` #2582

changeset-bot bot commented Jul 22, 2022 •

edited

Loading

codecov bot commented Jul 22, 2022 •

edited

Loading

acao commented Jul 24, 2022 •

edited

Loading

acao commented Jul 24, 2022 •

edited

Loading