[DO NOT MERGE] design preview by thomasheyenbrock · Pull Request #2483 · graphql/graphiql

thomasheyenbrock · 2022-06-06T17:41:05Z

The purpose of this PR is just to generate a stable Netlify preview deployment that shows the latest efforts on the new design implementation.

changeset-bot · 2022-06-06T17:41:10Z

🦋 Changeset detected

Latest commit: 5a1b425

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

This PR includes changesets to release 3 packages

Name	Type
@graphiql/react	Minor
codemirror-graphql	Major
graphiql	Major

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

github-actions · 2022-06-06T17:44:40Z

The latest changes of this PR are not available as canary, since there are no linked changesets for this PR.

acao · 2022-06-06T20:03:13Z

@thomasheyenbrock and you have canary releases ^^ :)

acao · 2022-06-08T12:49:52Z

@thomasheyenbrock the canary release tags change on every push fyi! They contain the applicable git short SHA

dimaMachina · 2022-06-08T21:50:15Z

+    if (this.storage) {
+      this.storage.clear();
+    }


Suggested change

if (this.storage) {

this.storage.clear();

}

this.storage?.clear();

dimaMachina · 2022-06-08T21:53:29Z

+            <a
+              href="#"


I guess for accessibility will be better to use button instead a

dimaMachina · 2022-06-08T21:56:56Z

+      {args.length > 0 ? (
+        <ExplorerSection title="Arguments">
+          {args.map(arg => (
+            <Argument key={arg.name} arg={arg} />
+          ))}
+        </ExplorerSection>
+      ) : null}


Suggested change

{args.length > 0 ? (

<ExplorerSection title="Arguments">

{args.map(arg => (

<Argument key={arg.name} arg={arg} />

))}

</ExplorerSection>

) : null}

{args.length > 0 && (

<ExplorerSection title="Arguments">

{args.map(arg => (

<Argument key={arg.name} arg={arg} />

))}

</ExplorerSection>

)}

dimaMachina · 2022-06-08T21:58:11Z

+      {deprecatedArgs.length > 0 ? (
+        showDeprecated || args.length === 0 ? (
+          <ExplorerSection title="Deprecated Arguments">
+            {deprecatedArgs.map(arg => (
+              <Argument key={arg.name} arg={arg} />
+            ))}
+          </ExplorerSection>
+        ) : (
+          <Button
+            onClick={() => {
+              setShowDeprecated(true);
+            }}>
+            Show deprecated arguments
+          </Button>
+        )
+      ) : null}


Suggested change

{deprecatedArgs.length > 0 ? (

showDeprecated || args.length === 0 ? (

<ExplorerSection title="Deprecated Arguments">

{deprecatedArgs.map(arg => (

<Argument key={arg.name} arg={arg} />

))}

</ExplorerSection>

) : (

<Button

onClick={() => {

setShowDeprecated(true);

}}>

Show deprecated arguments

</Button>

)

) : null}

{deprecatedArgs.length > 0 && (

showDeprecated || args.length === 0 ? (

<ExplorerSection title="Deprecated Arguments">

{deprecatedArgs.map(arg => (

<Argument key={arg.name} arg={arg} />

))}

</ExplorerSection>

) : (

<Button

onClick={() => {

setShowDeprecated(true);

}}>

Show deprecated arguments

</Button>

)

)}

dimaMachina · 2022-06-08T22:04:16Z

+  ChevronDownIcon,
+  ChevronUpIcon,


A tip, normally you don't need to have 2 same icons, you can use CSS for rotate your icon :)

thomasheyenbrock · 2022-06-09T14:15:18Z

@B2o5T thanks for reviewing this 🙏 I'll probably split this huge PR up into smaller increments though to make the individual changes even more reviewable 😉

* 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

* 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 <rikki.schulte@gmail.com>

* implement new toolbar design * add `caller` argument for better errors

* implement sidebar in new design * simplify callback

* 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

* 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 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

codecov · 2022-07-27T13:06:30Z

Codecov Report

Merging #2483 (5a1b425) into main (2d91916) will decrease coverage by 8.33%.
The diff coverage is 6.15%.

@@            Coverage Diff             @@
##             main    #2483      +/-   ##
==========================================
- Coverage   65.70%   57.36%   -8.34%     
==========================================
  Files          85       91       +6     
  Lines        5106     5320     +214     
  Branches     1631     1699      +68     
==========================================
- Hits         3355     3052     -303     
- Misses       1747     2250     +503     
- Partials        4       18      +14

Impacted Files	Coverage Δ
packages/codemirror-graphql/src/lint.ts	`100.00% <ø> (ø)`
packages/codemirror-graphql/src/results/mode.ts	`47.05% <ø> (ø)`
packages/codemirror-graphql/src/utils/hintList.ts	`95.65% <ø> (ø)`
...ckages/codemirror-graphql/src/utils/mode-indent.ts	`0.00% <0.00%> (ø)`
packages/codemirror-graphql/src/variables/mode.ts	`79.48% <ø> (ø)`
packages/graphiql-react/src/editor/completion.ts	`0.00% <0.00%> (ø)`
...hiql-react/src/editor/components/header-editor.tsx	`0.00% <0.00%> (ø)`
...phiql-react/src/editor/components/query-editor.tsx	`0.00% <0.00%> (ø)`
...ql-react/src/editor/components/response-editor.tsx	`0.00% <0.00%> (ø)`
...ql-react/src/editor/components/variable-editor.tsx	`0.00% <0.00%> (ø)`
... and 141 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 e98f360...5a1b425. Read the comment docs.

thomasheyenbrock · 2022-07-28T11:54:25Z

All changes have been split up and reviewed incrementally. We collected all of them on the graphiql-v2 branch, this PR is basically succeeded by #2523.

acao · 2022-07-28T12:01:50Z

Marvelous work thank you!

thomasheyenbrock force-pushed the new-design-preview branch from 6149161 to 0038367 Compare June 6, 2022 18:55

thomasheyenbrock force-pushed the new-design-preview branch 2 times, most recently from a1854d6 to 1ba9df2 Compare June 7, 2022 02:53

dimaMachina reviewed Jun 8, 2022

View reviewed changes

thomasheyenbrock added the do not merge label Jun 14, 2022

thomasheyenbrock force-pushed the new-design-preview branch from 992c78a to 241bfd1 Compare June 14, 2022 08:58

thomasheyenbrock force-pushed the new-design-preview branch 5 times, most recently from 88f818d to e8e08b8 Compare July 1, 2022 10:18

thomasheyenbrock changed the base branch from main to graphiql-v2 July 4, 2022 14:48

thomasheyenbrock force-pushed the graphiql-v2 branch from 4951554 to 3529c06 Compare July 6, 2022 09:28

thomasheyenbrock force-pushed the new-design-preview branch from 0716006 to 21072e4 Compare July 6, 2022 09:33

thomasheyenbrock force-pushed the graphiql-v2 branch from aeba740 to 392e02a Compare July 13, 2022 12:30

thomasheyenbrock force-pushed the new-design-preview branch 2 times, most recently from b32018f to 872b930 Compare July 14, 2022 10:23

thomasheyenbrock changed the base branch from graphiql-v2 to feat/history July 14, 2022 10:23

Base automatically changed from feat/history to graphiql-v2 July 14, 2022 19:58

thomasheyenbrock changed the base branch from graphiql-v2 to main July 14, 2022 20:01

thomasheyenbrock force-pushed the new-design-preview branch from 1fcd6b3 to e937c06 Compare July 14, 2022 20:13

thomasheyenbrock force-pushed the new-design-preview branch 2 times, most recently from 085e0c4 to a76dc32 Compare July 26, 2022 11:16

thomasheyenbrock and others added 20 commits July 27, 2022 13:43

set default background color for editors (#2528)

acdf35c

set default background colors via css variables (#2530)

b4bc9db

move editor styles to @graphiql/react (#2532)

49ab37a

refresh editor after hiding (#2537)

72dbc31

add caller argument to editor hooks (#2538)

d5fbce2

implement footer in new design (#2540)

f2cf66a

[redesign] implement new toolbar design (#2524)

b5d150e

* implement new toolbar design * add `caller` argument for better errors

[redesign] implement sidebar (#2543)

52e13e3

* implement sidebar in new design * simplify callback

add prerelease versions

7c23a5a

fix opening doc explorer when clicking references (#2578)

cddd647

extract loading spinner to @graphiql/react (#2581)

d52f346

add Search component to @graphiql/react (#2586)

b395315

move remaining doc explorer component to @graphiql/react (#2587)

28d0dcc

move tab components to @graphiql/react

e42ef57

implement new design for tabs

2ae4173

thomasheyenbrock force-pushed the new-design-preview branch from a76dc32 to e4c787d Compare July 27, 2022 13:02

wip

5a1b425

thomasheyenbrock force-pushed the new-design-preview branch from e4c787d to 5a1b425 Compare July 27, 2022 13:43

thomasheyenbrock closed this Jul 28, 2022

thomasheyenbrock deleted the new-design-preview branch July 28, 2022 11:54

Conversation

thomasheyenbrock commented Jun 6, 2022

Uh oh!

changeset-bot Bot commented Jun 6, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jun 6, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

acao commented Jun 6, 2022

Uh oh!

acao commented Jun 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dimaMachina Jun 8, 2022

Choose a reason for hiding this comment

Uh oh!

dimaMachina Jun 8, 2022

Choose a reason for hiding this comment

Uh oh!

dimaMachina Jun 8, 2022

Choose a reason for hiding this comment

Uh oh!

dimaMachina Jun 8, 2022

Choose a reason for hiding this comment

Uh oh!

dimaMachina Jun 8, 2022

Choose a reason for hiding this comment

Uh oh!

thomasheyenbrock commented Jun 9, 2022

Uh oh!

codecov Bot commented Jul 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

thomasheyenbrock commented Jul 28, 2022

Uh oh!

acao commented Jul 28, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot Bot commented Jun 6, 2022 •

edited

Loading

github-actions Bot commented Jun 6, 2022 •

edited

Loading

acao commented Jun 8, 2022 •

edited

Loading

codecov Bot commented Jul 27, 2022 •

edited

Loading