Skip to content

[DO NOT MERGE] design preview #2483

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 21 commits into from
Closed

Conversation

thomasheyenbrock
Copy link
Collaborator

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
Copy link

changeset-bot bot commented Jun 6, 2022

🦋 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
Copy link
Contributor

github-actions bot commented Jun 6, 2022

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

@acao
Copy link
Member

acao commented Jun 6, 2022

@thomasheyenbrock and you have canary releases ^^ :)

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

acao commented Jun 8, 2022

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

Comment on lines +83 to +85
if (this.storage) {
this.storage.clear();
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
if (this.storage) {
this.storage.clear();
}
this.storage?.clear();

Comment on lines 83 to 91
<a
href="#"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines 75 to 81
{args.length > 0 ? (
<ExplorerSection title="Arguments">
{args.map(arg => (
<Argument key={arg.name} arg={arg} />
))}
</ExplorerSection>
) : null}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
)}

Comment on lines 82 to 97
{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}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
)
)}

Comment on lines +26 to +28
ChevronDownIcon,
ChevronUpIcon,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@thomasheyenbrock
Copy link
Collaborator Author

@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 😉

@thomasheyenbrock thomasheyenbrock force-pushed the new-design-preview branch 5 times, most recently from 88f818d to e8e08b8 Compare July 1, 2022 10:18
@thomasheyenbrock thomasheyenbrock changed the base branch from main to graphiql-v2 July 4, 2022 14:48
@thomasheyenbrock thomasheyenbrock force-pushed the new-design-preview branch 2 times, most recently from b32018f to 872b930 Compare July 14, 2022 10:23
@thomasheyenbrock 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 thomasheyenbrock changed the base branch from graphiql-v2 to main July 14, 2022 20:01
@thomasheyenbrock 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
* 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 <[email protected]>
* 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
Copy link

codecov bot commented Jul 27, 2022

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
Copy link
Collaborator Author

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.

@thomasheyenbrock thomasheyenbrock deleted the new-design-preview branch July 28, 2022 11:54
@acao
Copy link
Member

acao commented Jul 28, 2022

Marvelous work thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants