From f2b01d12432db7014efc0a4f81062955eb6de02e Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 3 Oct 2022 23:44:06 +0800 Subject: [PATCH 01/12] Remove unused settings dialog --- src/GraphiQLInterface.tsx | 444 +++++++++++++------------------------- 1 file changed, 155 insertions(+), 289 deletions(-) diff --git a/src/GraphiQLInterface.tsx b/src/GraphiQLInterface.tsx index 6a55f54..8b48d46 100644 --- a/src/GraphiQLInterface.tsx +++ b/src/GraphiQLInterface.tsx @@ -22,15 +22,11 @@ import { HeaderEditor, KeyboardShortcutIcon, MergeIcon, - PlusIcon, PrettifyIcon, QueryEditor, ReloadIcon, ResponseEditor, - SettingsIcon, Spinner, - Tab, - Tabs, ToolbarButton, Tooltip, UnStyledButton, @@ -50,13 +46,8 @@ import { UseVariableEditorArgs, VariableEditor, WriteableEditorProps, -} from "@graphiql/react"; -import React, { - ComponentType, - PropsWithChildren, - ReactNode, - useState, -} from "react"; +} from '@graphiql/react' +import React, { ComponentType, PropsWithChildren, ReactNode, useState } from 'react' export type GraphiQLToolbarConfig = { /** @@ -64,20 +55,20 @@ export type GraphiQLToolbarConfig = { * Note that this will not apply if you provide a completely custom toolbar * (by passing `GraphiQL.Toolbar` as child to the `GraphiQL` component). */ - additionalContent?: React.ReactNode; -}; + additionalContent?: React.ReactNode +} type AddSuffix, Suffix extends string> = { - [Key in keyof Obj as `${string & Key}${Suffix}`]: Obj[Key]; -}; + [Key in keyof Obj as `${string & Key}${Suffix}`]: Obj[Key] +} export type GraphiQLInterfaceProps = WriteableEditorProps & - AddSuffix, "Query"> & - Pick & - AddSuffix, "Variables"> & - AddSuffix, "Headers"> & - Pick & { - children?: ReactNode; + AddSuffix, 'Query'> & + Pick & + AddSuffix, 'Variables'> & + AddSuffix, 'Headers'> & + Pick & { + children?: ReactNode /** * Set the default state for the editor tools. @@ -88,20 +79,20 @@ export type GraphiQLInterfaceProps = WriteableEditorProps & * By default the editor tools are initially shown when at least one of the * editors has contents. */ - defaultEditorToolsVisibility?: boolean | "variables" | "headers"; + defaultEditorToolsVisibility?: boolean | 'variables' | 'headers' /** * Toggle if the headers editor should be shown inside the editor tools. * @default true */ - isHeadersEditorEnabled?: boolean; + isHeadersEditorEnabled?: boolean /** * Toggle if the variables editor should be shown inside the editor tools. * @default true * @addition { Edge & Node } The Graph apps don't need variables editor. */ - isVariablesEditorEnabled?: boolean; + isVariablesEditorEnabled?: boolean /** * Toggle if the variables editor should be shown inside the editor tools. @@ -112,132 +103,106 @@ export type GraphiQLInterfaceProps = WriteableEditorProps & * An object that allows configuration of the toolbar next to the query * editor. */ - toolbar?: GraphiQLToolbarConfig; + toolbar?: GraphiQLToolbarConfig /** * Slot for SavedQueriesToolbar */ - header: ReactNode; - }; + header: ReactNode + } export function GraphiQLInterface(props: GraphiQLInterfaceProps) { - const isHeadersEditorEnabled = props.isHeadersEditorEnabled ?? true; - const isVariablesEditorEnabled = props.isVariablesEditorEnabled ?? true; + const isHeadersEditorEnabled = props.isHeadersEditorEnabled ?? true + const isVariablesEditorEnabled = props.isVariablesEditorEnabled ?? true - const editorContext = useEditorContext({ nonNull: true }); - const executionContext = useExecutionContext({ nonNull: true }); - const schemaContext = useSchemaContext({ nonNull: true }); - const pluginContext = usePluginContext(); + const editorContext = useEditorContext({ nonNull: true }) + const executionContext = useExecutionContext({ nonNull: true }) + const schemaContext = useSchemaContext({ nonNull: true }) + const pluginContext = usePluginContext() - const copy = useCopyQuery({ onCopyQuery: props.onCopyQuery }); - const merge = useMergeQuery(); - const prettify = usePrettifyEditors(); + const copy = useCopyQuery({ onCopyQuery: props.onCopyQuery }) + const merge = useMergeQuery() + const prettify = usePrettifyEditors() - const PluginContent = pluginContext?.visiblePlugin?.content; + const PluginContent = pluginContext?.visiblePlugin?.content const pluginResize = useDragResize({ defaultSizeRelation: 3, - direction: "horizontal", - initiallyHidden: pluginContext?.visiblePlugin ? undefined : "second", + direction: 'horizontal', + initiallyHidden: pluginContext?.visiblePlugin ? undefined : 'second', onHiddenElementChange: (resizableElement) => { - if (resizableElement === "second") { - pluginContext?.setVisiblePlugin(null); + if (resizableElement === 'second') { + pluginContext?.setVisiblePlugin(null) } }, sizeThresholdSecond: 200, - storageKey: "docExplorerFlex", - }); + storageKey: 'docExplorerFlex', + }) const editorResize = useDragResize({ - direction: "horizontal", - storageKey: "editorFlex", - }); + direction: 'horizontal', + storageKey: 'editorFlex', + }) const editorToolsResize = useDragResize({ defaultSizeRelation: 3, - direction: "vertical", + direction: 'vertical', initiallyHidden: (() => { - if ( - props.defaultEditorToolsVisibility === "variables" || - props.defaultEditorToolsVisibility === "headers" - ) { - return undefined; + if (props.defaultEditorToolsVisibility === 'variables' || props.defaultEditorToolsVisibility === 'headers') { + return undefined } - if (typeof props.defaultEditorToolsVisibility === "boolean") { - return props.defaultEditorToolsVisibility ? undefined : "second"; + if (typeof props.defaultEditorToolsVisibility === 'boolean') { + return props.defaultEditorToolsVisibility ? undefined : 'second' } - return editorContext.initialVariables || editorContext.initialHeaders - ? undefined - : "second"; + return editorContext.initialVariables || editorContext.initialHeaders ? undefined : 'second' })(), sizeThresholdSecond: 60, - storageKey: "secondaryEditorFlex", - }); - - const [activeSecondaryEditor, setActiveSecondaryEditor] = useState< - "variables" | "headers" - >(() => { - if ( - props.defaultEditorToolsVisibility === "variables" || - props.defaultEditorToolsVisibility === "headers" - ) { - return props.defaultEditorToolsVisibility; + storageKey: 'secondaryEditorFlex', + }) + + const [activeSecondaryEditor, setActiveSecondaryEditor] = useState<'variables' | 'headers'>(() => { + if (props.defaultEditorToolsVisibility === 'variables' || props.defaultEditorToolsVisibility === 'headers') { + return props.defaultEditorToolsVisibility } - return !editorContext.initialVariables && - editorContext.initialHeaders && - isHeadersEditorEnabled - ? "headers" - : "variables"; - }); - const [showDialog, setShowDialog] = useState< - "settings" | "short-keys" | null - >(null); - - const children = React.Children.toArray(props.children); - - const toolbar = children.find((child) => - isChildComponentType(child, GraphiQLToolbar) - ) || ( + return !editorContext.initialVariables && editorContext.initialHeaders && isHeadersEditorEnabled + ? 'headers' + : 'variables' + }) + const [showDialog, setShowDialog] = useState<'short-keys' | null>(null) + + const children = React.Children.toArray(props.children) + + const toolbar = children.find((child) => isChildComponentType(child, GraphiQLToolbar)) || ( <> - prettify()} - label="Prettify query (Shift-Ctrl-P)" - > + prettify()} label="Prettify query (Shift-Ctrl-P)"> - merge()} - label="Merge fragments into query (Shift-Ctrl-M)" - > + merge()} label="Merge fragments into query (Shift-Ctrl-M)"> copy()} label="Copy query (Shift-Ctrl-C)"> - {props.toolbar?.additionalContent - ? props.toolbar.additionalContent - : null} + {props.toolbar?.additionalContent ? props.toolbar.additionalContent : null} - ); + ) - const footer = children.find((child) => - isChildComponentType(child, GraphiQLFooter) - ); + const footer = children.find((child) => isChildComponentType(child, GraphiQLFooter)) const onClickReference = () => { - if (pluginResize.hiddenElement === "first") { - pluginResize.setHiddenElement(null); + if (pluginResize.hiddenElement === 'first') { + pluginResize.setHiddenElement(null) } - }; + } const modifier = - window.navigator.platform.toLowerCase().indexOf("mac") === 0 ? ( + window.navigator.platform.toLowerCase().indexOf('mac') === 0 ? ( Cmd ) : ( Ctrl - ); + ) - const editorToolsEnabled = isVariablesEditorEnabled || isHeadersEditorEnabled; + const editorToolsEnabled = isVariablesEditorEnabled || isHeadersEditorEnabled return (
@@ -309,11 +274,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { aria-labelledby={`graphiql-session-tab-${editorContext.activeTabIndex}`} >
-
+
@@ -336,11 +297,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { readOnly={props.readOnly} />
-
+
{toolbar}
@@ -353,18 +310,12 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { {isHeadersEditorEnabled ? ( { - if ( - editorToolsResize.hiddenElement === "second" - ) { - editorToolsResize.setHiddenElement(null); + if (editorToolsResize.hiddenElement === 'second') { + editorToolsResize.setHiddenElement(null) } - setActiveSecondaryEditor("variables"); + setActiveSecondaryEditor('variables') }} > Variables @@ -373,18 +324,12 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { {isHeadersEditorEnabled ? ( { - if ( - editorToolsResize.hiddenElement === "second" - ) { - editorToolsResize.setHiddenElement(null); + if (editorToolsResize.hiddenElement === 'second') { + editorToolsResize.setHiddenElement(null) } - setActiveSecondaryEditor("headers"); + setActiveSecondaryEditor('headers') }} > Headers @@ -393,36 +338,24 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
{ editorToolsResize.setHiddenElement( - editorToolsResize.hiddenElement === "second" - ? null - : "second" - ); + editorToolsResize.hiddenElement === 'second' ? null : 'second', + ) }} aria-label={ - editorToolsResize.hiddenElement === "second" - ? "Show editor tools" - : "Hide editor tools" + editorToolsResize.hiddenElement === 'second' ? 'Show editor tools' : 'Hide editor tools' } > - {editorToolsResize.hiddenElement === "second" ? ( - @@ -432,15 +365,11 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
- {pluginContext?.visiblePlugin ? ( -
- ) : null} + {pluginContext?.visiblePlugin ?
: null}
-
- {PluginContent ? : null} -
+
{PluginContent ? : null}
{pluginContext ? pluginContext?.plugins.map((plugin) => { - const isVisible = plugin === pluginContext.visiblePlugin; - const label = `${isVisible ? "Hide" : "Show"} ${ - plugin.title - }`; - const Icon = plugin.icon; + const isVisible = plugin === pluginContext.visiblePlugin + const label = `${isVisible ? 'Hide' : 'Show'} ${plugin.title}` + const Icon = plugin.icon return ( { if (isVisible) { - pluginContext.setVisiblePlugin(null); - pluginResize.setHiddenElement("second"); + pluginContext.setVisiblePlugin(null) + pluginResize.setHiddenElement('second') } else { - pluginContext.setVisiblePlugin(plugin); - pluginResize.setHiddenElement(null); + pluginContext.setVisiblePlugin(plugin) + pluginResize.setHiddenElement(null) } }} aria-label={label} @@ -521,7 +444,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { - ); + ) }) : null}
@@ -533,29 +456,22 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { onClick={() => schemaContext.introspect()} aria-label="Re-fetch GraphQL schema" > -
- setShowDialog(null)} - > + setShowDialog(null)}>
Short Keys
setShowDialog(null)} /> @@ -573,7 +489,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { {modifier} - {" + "} + {' + '} F Search in editor @@ -581,7 +497,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { {modifier} - {" + "} + {' + '} K Search in documentation @@ -589,7 +505,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { {modifier} - {" + "} + {' + '} Enter Execute query @@ -597,9 +513,9 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { Ctrl - {" + "} + {' + '} Shift - {" + "} + {' + '} P Prettify editors @@ -607,9 +523,9 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { Ctrl - {" + "} + {' + '} Shift - {" + "} + {' + '} M Merge fragments definitions into operation definition @@ -617,9 +533,9 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { Ctrl - {" + "} + {' + '} Shift - {" + "} + {' + '} C Copy query @@ -627,9 +543,9 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { Ctrl - {" + "} + {' + '} Shift - {" + "} + {' + '} R Re-fetch schema using introspection @@ -637,117 +553,87 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {

- The editors use{" "} - + The editors use{' '} + CodeMirror Key Maps - {" "} - that add more short keys. This instance of GraphiQL uses{" "} - {props.keyMap || "sublime"}. + {' '} + that add more short keys. This instance of GraphiQL uses {props.keyMap || 'sublime'} + .

- {/* */}
- ); + ) } // Configure the UI by providing this Component as a child of GraphiQL. export function GraphiQLToolbar(props: PropsWithChildren) { // eslint-disable-next-line react/jsx-no-useless-fragment - return <>{props.children}; + return <>{props.children} } -GraphiQLToolbar.displayName = "GraphiQLToolbar"; +GraphiQLToolbar.displayName = 'GraphiQLToolbar' // Configure the UI by providing this Component as a child of GraphiQL. export function GraphiQLFooter(props: PropsWithChildren) { - return
{props.children}
; + return
{props.children}
} -GraphiQLFooter.displayName = "GraphiQLFooter"; +GraphiQLFooter.displayName = 'GraphiQLFooter' // Determines if the React child is of the same type of the provided React component -function isChildComponentType( - child: any, - component: T -): child is T { - if ( - child?.type?.displayName && - child.type.displayName === component.displayName - ) { - return true; +function isChildComponentType(child: any, component: T): child is T { + if (child?.type?.displayName && child.type.displayName === component.displayName) { + return true } - return child.type === component; + return child.type === component } function _UnusedSettingsDialog({ showDialog, setShowDialog, }: { - showDialog: string | null; - setShowDialog: (value: null) => void; + showDialog: string | null + setShowDialog: (value: null) => void }) { - const storageContext = useStorageContext(); - const { theme, setTheme } = useTheme(); + const storageContext = useStorageContext() + const { theme, setTheme } = useTheme() - const [clearStorageStatus, setClearStorageStatus] = useState< - "success" | "error" | null - >(null); + const [clearStorageStatus, setClearStorageStatus] = useState<'success' | 'error' | null>(null) return ( { - setShowDialog(null); - setClearStorageStatus(null); + setShowDialog(null) + setClearStorageStatus(null) }} >
Settings
{ - setShowDialog(null); - setClearStorageStatus(null); + setShowDialog(null) + setClearStorageStatus(null) }} />
Theme
-
- Adjust how the interface looks like. -
+
Adjust how the interface looks like.
- - - @@ -757,51 +643,31 @@ function _UnusedSettingsDialog({
Clear storage
-
- Remove all locally stored data and start fresh. -
+
Remove all locally stored data and start fresh.
) : null}
- ); -} - -function _UnusedSettingsButton({ - setShowDialog, -}: { - setShowDialog: (value: "settings") => void; -}) { - return ( - - setShowDialog("settings")} - aria-label="Open settings dialog" - > - - - ); + ) } From 39f0a06f6c8180454021679fae99ca7286973ca0 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 3 Oct 2022 23:44:17 +0800 Subject: [PATCH 02/12] Export ESM again --- package.json | 12 ++++++++---- vite.config.ts | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index dd004b0..96bda6d 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,18 @@ { "name": "@edgeandnode/graphiql-playground", - "version": "0.1.6", + "version": "0.1.9", "type": "commonjs", - "main": "./dist/index.cjs.js", - "module": "./dist/index.es.js", + "main": "./dist/index.cjs", + "module": "./dist/index.mjs", "types": "./dist/index.d.ts", "exports": { - ".": "./dist/index.cjs.js", + ".": { + "import": "./dist/index.mjs", + "require": "./dist/index.cjs" + }, "./dist/style.css": "./dist/style.css" }, + "sideEffects": false, "publishConfig": { "access": "public" }, diff --git a/vite.config.ts b/vite.config.ts index b9e460e..39d67a3 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -8,7 +8,7 @@ const libraryBuildOptions: BuildOptions = { entry: path.resolve(__dirname, 'src', 'index.tsx'), name: 'GraphiQLPlayground', formats: ['es', 'cjs'], - fileName: (format) => `index.${format}.js`, + fileName: (format) => `index.${format === 'cjs' ? 'cjs' : 'mjs'}`, }, rollupOptions: { external: ['react/jsx-runtime', 'theme-ui/jsx-runtime', '@emotion/react/jsx-runtime'], From 2f8b334ca104b566edd313c2e5025ea866522ca8 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 3 Oct 2022 23:53:20 +0800 Subject: [PATCH 03/12] Remove unused Tabs code --- src/GraphiQLInterface.tsx | 66 ++------------------------------------- 1 file changed, 2 insertions(+), 64 deletions(-) diff --git a/src/GraphiQLInterface.tsx b/src/GraphiQLInterface.tsx index 8b48d46..97315ad 100644 --- a/src/GraphiQLInterface.tsx +++ b/src/GraphiQLInterface.tsx @@ -209,70 +209,8 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
-
- {props.header} - {/* - {editorContext.tabs.length > 1 ? ( - <> - {editorContext.tabs.map((tab, index) => ( - - { - executionContext.stop(); - editorContext.changeTab(index); - }} - > - {tab.title} - - { - if (editorContext.activeTabIndex === index) { - executionContext.stop(); - } - editorContext.closeTab(index); - }} - /> - - ))} - - editorContext.addTab()} - aria-label="Add tab" - > - - - - ) : null} - -
- {editorContext.tabs.length === 1 ? ( - - editorContext.addTab()} - aria-label="Add tab" - > - - - ) : null} -
*/} -
-
+
{props.header}
+
From 4cd959924488da7f98af343af66626c3a9265610 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 3 Oct 2022 23:55:57 +0800 Subject: [PATCH 04/12] Clean up a test leftover --- src/SavedQueriesToolbar/SavedQueriesToolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SavedQueriesToolbar/SavedQueriesToolbar.tsx b/src/SavedQueriesToolbar/SavedQueriesToolbar.tsx index f7e5ecf..d4b35b7 100644 --- a/src/SavedQueriesToolbar/SavedQueriesToolbar.tsx +++ b/src/SavedQueriesToolbar/SavedQueriesToolbar.tsx @@ -98,7 +98,7 @@ export function SavedQueriesToolbar(props: SavedQueri className={props.className} > { From d497d78f74f5843e582bd4fa0a606c2695617503 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 4 Oct 2022 00:43:58 +0800 Subject: [PATCH 05/12] Improve layout --- index.html | 14 +-- src/graphiql-react-properties.css | 14 +-- src/graphiql-styles.css | 184 ++++++++---------------------- src/style-overrides.css | 23 +++- 4 files changed, 76 insertions(+), 159 deletions(-) diff --git a/index.html b/index.html index 0f02a4e..142f1b0 100644 --- a/index.html +++ b/index.html @@ -11,22 +11,14 @@ diff --git a/src/graphiql-react-properties.css b/src/graphiql-react-properties.css index 9073c58..1d37301 100644 --- a/src/graphiql-react-properties.css +++ b/src/graphiql-react-properties.css @@ -14,14 +14,14 @@ reach-portal { --color-base: 0, 0%, 0%; /* Font */ - --font-family: "EuclidCircular", sans-serif; - --font-family-mono: "Fira Code", monospace; + --font-family: 'EuclidCircular', sans-serif; + --font-family-mono: 'Fira Code', monospace; --font-size-hint: calc(12rem / 16); --font-size-inline-code: calc(13rem / 16); --font-size-body: calc(13rem / 16); --font-size-h4: calc(18rem / 16); - --font-size-h3: calc(22rem / 16); - --font-size-h2: calc(29rem / 16); + --font-size-h3: calc(20rem / 16); + --font-size-h2: calc(20rem / 16); --font-weight-regular: 400; --font-weight-medium: 500; --line-height: 1.5; @@ -43,13 +43,12 @@ reach-portal { --border-radius-8: 8px; --border-radius-12: 12px; - --popover-box-shadow: 0px 6px 20px rgba(59, 76, 106, 0.13), - 0px 1.34018px 4.46726px rgba(59, 76, 106, 0.0774939), + --popover-box-shadow: 0px 6px 20px rgba(59, 76, 106, 0.13), 0px 1.34018px 4.46726px rgba(59, 76, 106, 0.0774939), 0px 0.399006px 1.33002px rgba(59, 76, 106, 0.0525061); --popover-border: 1px solid var(--theme-ui-colors-White16); /* Layout */ - --sidebar-width: 44px; + --sidebar-width: 48px; --toolbar-width: 40px; --session-header-height: 51px; } @@ -85,3 +84,4 @@ reach-portal { } } } + diff --git a/src/graphiql-styles.css b/src/graphiql-styles.css index bef7ef0..4d0be26 100644 --- a/src/graphiql-styles.css +++ b/src/graphiql-styles.css @@ -1,4 +1,6 @@ -/* This is graphiql/graphiql.css without the fonts. */ +/* This is graphiql/graphiql.css + - without the fonts + - and without dark mode Custom Properties */ .graphiql-container, .CodeMirror-info, @@ -13,8 +15,8 @@ reach-portal { --color-error: 13, 93%, 58%; --color-neutral: 219, 28%, 32%; --color-base: 219, 28%, 100%; - --font-family: "EuclidCircular", sans-serif; - --font-family-mono: "Fira Code", monospace; + --font-family: 'EuclidCircular', sans-serif; + --font-family-mono: 'Fira Code', monospace; --font-size-hint: 0.75rem; --font-size-inline-code: 0.8125rem; --font-size-body: 0.9375rem; @@ -37,48 +39,13 @@ reach-portal { --border-radius-4: 4px; --border-radius-8: 8px; --border-radius-12: 12px; - --popover-box-shadow: 0px 6px 20px rgba(59, 76, 106, 0.13), - 0px 1.34018px 4.46726px rgba(59, 76, 106, 0.0774939), + --popover-box-shadow: 0px 6px 20px rgba(59, 76, 106, 0.13), 0px 1.34018px 4.46726px rgba(59, 76, 106, 0.0774939), 0px 0.399006px 1.33002px rgba(59, 76, 106, 0.0525061); --popover-border: none; --sidebar-width: 44px; --toolbar-width: 40px; --session-header-height: 51px; } -@media (prefers-color-scheme: dark) { - body:not(.graphiql-light) .graphiql-container, - body:not(.graphiql-light) .CodeMirror-info, - body:not(.graphiql-light) .CodeMirror-lint-tooltip, - body:not(.graphiql-light) reach-portal { - --color-primary: 338, 100%, 67%; - --color-secondary: 243, 100%, 77%; - --color-tertiary: 188, 100%, 44%; - --color-info: 208, 100%, 72%; - --color-success: 158, 100%, 42%; - --color-warning: 30, 100%, 80%; - --color-error: 13, 100%, 58%; - --color-neutral: 219, 29%, 78%; - --color-base: 219, 29%, 18%; - --popover-box-shadow: none; - --popover-border: 1px solid hsl(var(--color-neutral)); - } -} -body.graphiql-dark .graphiql-container, -body.graphiql-dark .CodeMirror-info, -body.graphiql-dark .CodeMirror-lint-tooltip, -body.graphiql-dark reach-portal { - --color-primary: 338, 100%, 67%; - --color-secondary: 243, 100%, 77%; - --color-tertiary: 188, 100%, 44%; - --color-info: 208, 100%, 72%; - --color-success: 158, 100%, 42%; - --color-warning: 30, 100%, 80%; - --color-error: 13, 100%, 58%; - --color-neutral: 219, 29%, 78%; - --color-base: 219, 29%, 18%; - --popover-box-shadow: none; - --popover-border: 1px solid hsl(var(--color-neutral)); -} :is(.graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal), :is(.graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal):is(button) { color: hsla(var(--color-neutral), 1); @@ -87,22 +54,18 @@ body.graphiql-dark reach-portal { font-weight: var(----font-weight-regular); line-height: var(--line-height); } -:is(.graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal) - input { +:is(.graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal) input { color: hsla(var(--color-neutral), 1); font-family: var(--font-family); font-size: var(--font-size-caption); } -:is(.graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal) - input::placeholder { +:is(.graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal) input::placeholder { color: hsla(var(--color-neutral), 0.6); } -:is(.graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal) - a { +:is(.graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal) a { color: hsl(var(--color-primary)); } -:is(.graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal) - a:focus { +:is(.graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal) a:focus { outline: hsl(var(--color-primary)) auto 1px; } .graphiql-un-styled, @@ -247,7 +210,7 @@ button.graphiql-button { animation: flash 0.1s; animation-iteration-count: 1; } -[data-reach-listbox-option][aria-disabled="true"] { +[data-reach-listbox-option][aria-disabled='true'] { opacity: 0.5; } [data-reach-listbox-button] { @@ -260,7 +223,7 @@ button.graphiql-button { cursor: default; user-select: none; } -[data-reach-listbox-button][aria-disabled="true"] { +[data-reach-listbox-button][aria-disabled='true'] { opacity: 0.5; } [data-reach-listbox-arrow] { @@ -446,57 +409,42 @@ button.graphiql-button { > :last-child { margin-bottom: 0; } -:is(.graphiql-markdown-description, .CodeMirror-hint-information-description, .CodeMirror-info - .info-description) - a { +:is(.graphiql-markdown-description, .CodeMirror-hint-information-description, .CodeMirror-info .info-description) a { color: hsl(var(--color-primary)); text-decoration: none; } -:is(.graphiql-markdown-description, .CodeMirror-hint-information-description, .CodeMirror-info - .info-description) +:is(.graphiql-markdown-description, .CodeMirror-hint-information-description, .CodeMirror-info .info-description) a:hover { text-decoration: underline; } -:is(.graphiql-markdown-description, .CodeMirror-hint-information-description, .CodeMirror-info - .info-description) +:is(.graphiql-markdown-description, .CodeMirror-hint-information-description, .CodeMirror-info .info-description) blockquote { border-left: 1.5px solid hsla(var(--color-neutral), 0.4); } -:is(.graphiql-markdown-description, .CodeMirror-hint-information-description, .CodeMirror-info - .info-description) - code, -:is(.graphiql-markdown-description, .CodeMirror-hint-information-description, .CodeMirror-info - .info-description) - pre { +:is(.graphiql-markdown-description, .CodeMirror-hint-information-description, .CodeMirror-info .info-description) code, +:is(.graphiql-markdown-description, .CodeMirror-hint-information-description, .CodeMirror-info .info-description) pre { background-color: hsla(var(--color-neutral), 0.07); color: hsla(var(--color-neutral), 1); } -:is(.graphiql-markdown-description, .CodeMirror-hint-information-description, .CodeMirror-info - .info-description) - > * { +:is(.graphiql-markdown-description, .CodeMirror-hint-information-description, .CodeMirror-info .info-description) > * { margin: var(--px-12) 0; } -:is(.graphiql-markdown-deprecation, .CodeMirror-hint-information-deprecation-reason, .CodeMirror-info - .info-deprecation) +:is(.graphiql-markdown-deprecation, .CodeMirror-hint-information-deprecation-reason, .CodeMirror-info .info-deprecation) a { color: hsl(var(--color-warning)); text-decoration: underline; } -:is(.graphiql-markdown-deprecation, .CodeMirror-hint-information-deprecation-reason, .CodeMirror-info - .info-deprecation) +:is(.graphiql-markdown-deprecation, .CodeMirror-hint-information-deprecation-reason, .CodeMirror-info .info-deprecation) blockquote { border-left: 1.5px solid hsl(var(--color-warning)); } -:is(.graphiql-markdown-deprecation, .CodeMirror-hint-information-deprecation-reason, .CodeMirror-info - .info-deprecation) +:is(.graphiql-markdown-deprecation, .CodeMirror-hint-information-deprecation-reason, .CodeMirror-info .info-deprecation) code, -:is(.graphiql-markdown-deprecation, .CodeMirror-hint-information-deprecation-reason, .CodeMirror-info - .info-deprecation) +:is(.graphiql-markdown-deprecation, .CodeMirror-hint-information-deprecation-reason, .CodeMirror-info .info-deprecation) pre { background-color: hsla(var(--color-warning), 0.15); } -:is(.graphiql-markdown-deprecation, .CodeMirror-hint-information-deprecation-reason, .CodeMirror-info - .info-deprecation) +:is(.graphiql-markdown-deprecation, .CodeMirror-hint-information-deprecation-reason, .CodeMirror-info .info-deprecation) > * { margin: var(--px-8) 0; } @@ -532,7 +480,7 @@ button.graphiql-button { border: 4px solid transparent; border-radius: 100%; border-top: 4px solid hsla(var(--color-neutral), 0.4); - content: ""; + content: ''; display: inline-block; height: 46px; vertical-align: middle; @@ -768,13 +716,13 @@ a.graphiql-doc-explorer-type-name:focus { margin: 0; padding: 0.25rem 0.5rem; } -[data-reach-combobox-option][aria-selected="true"] { +[data-reach-combobox-option][aria-selected='true'] { background: hsl(211, 10%, 95%); } [data-reach-combobox-option]:hover { background: hsl(211, 10%, 92%); } -[data-reach-combobox-option][aria-selected="true"]:hover { +[data-reach-combobox-option][aria-selected='true']:hover { background: hsl(211, 10%, 90%); } [data-suggested-value] { @@ -783,14 +731,13 @@ a.graphiql-doc-explorer-type-name:focus { [data-reach-combobox] { color: hsla(var(--color-neutral), 0.6); } -[data-reach-combobox]:not([data-state="idle"]) { +[data-reach-combobox]:not([data-state='idle']) { border: var(--popover-border); border-radius: var(--border-radius-4); box-shadow: var(--popover-box-shadow); color: hsla(var(--color-neutral), 1); } -[data-reach-combobox]:not([data-state="idle"]) - .graphiql-doc-explorer-search-input { +[data-reach-combobox]:not([data-state='idle']) .graphiql-doc-explorer-search-input { background: hsl(var(--color-base)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -892,14 +839,14 @@ a.graphiql-doc-explorer-field-name:focus { .graphiql-doc-explorer-header:focus-within .graphiql-doc-explorer-title { visibility: hidden; } -.graphiql-doc-explorer-header:focus-within - .graphiql-doc-explorer-back:not(:focus) { +.graphiql-doc-explorer-header:focus-within .graphiql-doc-explorer-back:not(:focus) { color: transparent; } .graphiql-doc-explorer-header-content { - display: flex; - flex-direction: column; min-width: 0; + display: flex; + justify-content: center; + align-items: center; } .graphiql-doc-explorer-search { height: 100%; @@ -1348,7 +1295,7 @@ div.CodeMirror-dragcursors, } } .cm-tab-wrap-hack:after { - content: ""; + content: ''; } span.CodeMirror-selectedtext { background: none; @@ -1471,8 +1418,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket { } .CodeMirror-foldmarker { color: #00f; - text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, - #b9f -1px 1px 2px; + text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px; font-family: arial; line-height: 0.3; cursor: pointer; @@ -1485,10 +1431,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket { cursor: pointer; } .CodeMirror-foldgutter-open:after { - content: "\25be"; + content: '\25be'; } .CodeMirror-foldgutter-folded:after { - content: "\25b8"; + content: '\25b8'; } .CodeMirror-foldgutter { width: var(--px-12); @@ -1601,59 +1547,19 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket { color: hsl(var(--color-error)); } .CodeMirror-lint-mark-error { - background-image: linear-gradient( - 45deg, - transparent 65%, - hsl(var(--color-error)) 80%, - transparent 90% - ), - linear-gradient( - 135deg, - transparent 5%, - hsl(var(--color-error)) 15%, - transparent 25% - ), - linear-gradient( - 135deg, - transparent 45%, - hsl(var(--color-error)) 55%, - transparent 65% - ), - linear-gradient( - 45deg, - transparent 25%, - hsl(var(--color-error)) 35%, - transparent 50% - ); + background-image: linear-gradient(45deg, transparent 65%, hsl(var(--color-error)) 80%, transparent 90%), + linear-gradient(135deg, transparent 5%, hsl(var(--color-error)) 15%, transparent 25%), + linear-gradient(135deg, transparent 45%, hsl(var(--color-error)) 55%, transparent 65%), + linear-gradient(45deg, transparent 25%, hsl(var(--color-error)) 35%, transparent 50%); } .cm-s-graphiql .CodeMirror-lint-mark-warning { color: hsl(var(--color-warning)); } .CodeMirror-lint-mark-warning { - background-image: linear-gradient( - 45deg, - transparent 65%, - hsl(var(--color-warning)) 80%, - transparent 90% - ), - linear-gradient( - 135deg, - transparent 5%, - hsl(var(--color-warning)) 15%, - transparent 25% - ), - linear-gradient( - 135deg, - transparent 45%, - hsl(var(--color-warning)) 55%, - transparent 65% - ), - linear-gradient( - 45deg, - transparent 25%, - hsl(var(--color-warning)) 35%, - transparent 50% - ); + background-image: linear-gradient(45deg, transparent 65%, hsl(var(--color-warning)) 80%, transparent 90%), + linear-gradient(135deg, transparent 5%, hsl(var(--color-warning)) 15%, transparent 25%), + linear-gradient(135deg, transparent 45%, hsl(var(--color-warning)) 55%, transparent 65%), + linear-gradient(45deg, transparent 25%, hsl(var(--color-warning)) 35%, transparent 50%); } .CodeMirror-lint-tooltip { background-color: hsl(var(--color-base)); @@ -2064,7 +1970,7 @@ button.graphiql-tab-add > svg { .graphiql-container .graphiql-horizontal-drag-bar:hover::after { border: var(--px-2) solid hsla(var(--color-neutral), 0.15); border-radius: var(--border-radius-2); - content: ""; + content: ''; display: block; height: 25%; margin: 0 auto; diff --git a/src/style-overrides.css b/src/style-overrides.css index 2368c6a..5996151 100644 --- a/src/style-overrides.css +++ b/src/style-overrides.css @@ -59,13 +59,24 @@ } .graphiql-container .graphiql-sidebar.graphiql-sidebar { - padding: var(--px-8) var(--px-2) var(--px-8) var(--px-2); + padding: 10px 2px 8px 4px; overflow: visible; } .graphiql-sidebar { - & button { + && button { border-radius: 8px; + display: flex; + justify-content: center; + align-items: center; + + & > svg { + width: 20px; + height: 20px; + } + &:not(:first-child) { + margin-top: 8px; + } &:hover { background-color: var(--theme-ui-colors-White4); } @@ -206,3 +217,11 @@ button.graphiql-execute-button { .graphiql-explorer-actions { display: none; } + +.CodeMirror .CodeMirror-sizer { + margin-left: 0; +} + +.graphiql-operation-title-bar.graphiql-operation-title-bar { + margin-top: 16px; +} From fc759a9758562360f4e7a29879f638d4dbe3ce59 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 4 Oct 2022 00:59:49 +0800 Subject: [PATCH 06/12] Fix spacing --- src/style-overrides.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/style-overrides.css b/src/style-overrides.css index 5996151..f28f74c 100644 --- a/src/style-overrides.css +++ b/src/style-overrides.css @@ -192,6 +192,7 @@ button.graphiql-execute-button { .graphiql-session-header { padding-bottom: 8px; + padding-right: 8px; } .CodeMirror-scroll { @@ -215,7 +216,7 @@ button.graphiql-execute-button { } .graphiql-explorer-actions { - display: none; + display: none !important; } .CodeMirror .CodeMirror-sizer { @@ -225,3 +226,8 @@ button.graphiql-execute-button { .graphiql-operation-title-bar.graphiql-operation-title-bar { margin-top: 16px; } + +.graphiql-history-header, +.doc-explorer-title { + padding-top: 5px; +} From 9167cc950f2c71ba2097da292312053bfaac5778 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 4 Oct 2022 01:00:27 +0800 Subject: [PATCH 07/12] Improve spacing again --- src/SavedQueriesToolbar/ActionsMenu.tsx | 2 +- src/SavedQueriesToolbar/DefaultQueryChip.tsx | 10 +++++++++- src/SavedQueriesToolbar/SavedQueriesToolbar.tsx | 2 -- src/SavedQueriesToolbar/SavedQuerySelect.tsx | 8 ++++---- 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/SavedQueriesToolbar/ActionsMenu.tsx b/src/SavedQueriesToolbar/ActionsMenu.tsx index 6438f10..4bc261a 100644 --- a/src/SavedQueriesToolbar/ActionsMenu.tsx +++ b/src/SavedQueriesToolbar/ActionsMenu.tsx @@ -25,7 +25,7 @@ export function ActionsMenu({ children }: ActionsMenuProps) { return ( - diff --git a/src/SavedQueriesToolbar/DefaultQueryChip.tsx b/src/SavedQueriesToolbar/DefaultQueryChip.tsx index 57406bc..c79fd80 100644 --- a/src/SavedQueriesToolbar/DefaultQueryChip.tsx +++ b/src/SavedQueriesToolbar/DefaultQueryChip.tsx @@ -2,7 +2,15 @@ import { BorderRadius, Chip, FontSize, FontWeight, Spacing } from '@edgeandnode/components' -export function DefaultQueryChip() { +export interface DefaultQueryChipProps { + visible: boolean +} +export function DefaultQueryChip({ visible }: DefaultQueryChipProps) { + // We want to preserve the space for the chip even when it's not visible. + if (!visible) { + return
+ } + return ( (props: SavedQueri '*': { boxSizing: 'border-box', }, - pl: Spacing['8px'], width: '100%', }} className={props.className} @@ -141,7 +140,6 @@ export function SavedQueriesToolbar(props: SavedQueri void handleActionSelected('New query')}>New query )} -
setQueryDeletionPending(false)} diff --git a/src/SavedQueriesToolbar/SavedQuerySelect.tsx b/src/SavedQueriesToolbar/SavedQuerySelect.tsx index 4a86928..9c41703 100644 --- a/src/SavedQueriesToolbar/SavedQuerySelect.tsx +++ b/src/SavedQueriesToolbar/SavedQuerySelect.tsx @@ -58,20 +58,20 @@ export function SavedQuerySelect(props: SavedQuerySelectProps) { }, input: { height: '48px', - width: '240px', + width: '220px', textIndent: '0.5em', }, }} /> - {isCurrentDefault && } + - - {/* TODO: Open menu starting from the top — cover the whole input */} + {/* TODO: Carl's redesign for better multichoice menu */} {props.queries.map((query) => { return ( From 02a82c2fc3a8bea8a86db6c205ccb20a6b19ec28 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 4 Oct 2022 01:12:45 +0800 Subject: [PATCH 08/12] Bump version to 0.1.10 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 96bda6d..cf36983 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@edgeandnode/graphiql-playground", - "version": "0.1.9", + "version": "0.1.10", "type": "commonjs", "main": "./dist/index.cjs", "module": "./dist/index.mjs", From fc5c3d26414fea094656352da19cf2917ba81661 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 4 Oct 2022 01:27:46 +0800 Subject: [PATCH 09/12] Bump version to 0.1.11 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cf36983..64fba35 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@edgeandnode/graphiql-playground", - "version": "0.1.10", + "version": "0.1.11", "type": "commonjs", "main": "./dist/index.cjs", "module": "./dist/index.mjs", From fe1e65dd74484e48749d95025eaed556106966ad Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 4 Oct 2022 01:53:59 +0800 Subject: [PATCH 10/12] Lower spacing in SavedQuerySelect --- package.json | 2 +- src/SavedQueriesToolbar/SavedQuerySelect.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 64fba35..e176649 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@edgeandnode/graphiql-playground", - "version": "0.1.11", + "version": "0.1.12", "type": "commonjs", "main": "./dist/index.cjs", "module": "./dist/index.mjs", diff --git a/src/SavedQueriesToolbar/SavedQuerySelect.tsx b/src/SavedQueriesToolbar/SavedQuerySelect.tsx index 9c41703..e476f99 100644 --- a/src/SavedQueriesToolbar/SavedQuerySelect.tsx +++ b/src/SavedQueriesToolbar/SavedQuerySelect.tsx @@ -41,7 +41,7 @@ export function SavedQuerySelect(props: SavedQuerySelectProps) { flexGrow: 0, }} > - + Date: Tue, 4 Oct 2022 14:34:05 +0800 Subject: [PATCH 11/12] Fix DefaultQueryChip spacing --- src/SavedQueriesToolbar/DefaultQueryChip.tsx | 38 ++++++++++---------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/src/SavedQueriesToolbar/DefaultQueryChip.tsx b/src/SavedQueriesToolbar/DefaultQueryChip.tsx index c79fd80..fdf77ed 100644 --- a/src/SavedQueriesToolbar/DefaultQueryChip.tsx +++ b/src/SavedQueriesToolbar/DefaultQueryChip.tsx @@ -6,24 +6,26 @@ export interface DefaultQueryChipProps { visible: boolean } export function DefaultQueryChip({ visible }: DefaultQueryChipProps) { - // We want to preserve the space for the chip even when it's not visible. - if (!visible) { - return
- } - return ( - - Default - + /* We want to preserve the space for the chip even when it's not visible, + and we can't pass `sx.width` to Chip because of the tooltip, thus + we have this container div. */ +
+ {!!visible && ( + + Default + + )} +
) } From 3e3bfd56abc1f190587a4a184f1830ccb1c5a226 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 4 Oct 2022 14:36:17 +0800 Subject: [PATCH 12/12] Bump version to 0.1.13 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e176649..45be6ef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@edgeandnode/graphiql-playground", - "version": "0.1.12", + "version": "0.1.13", "type": "commonjs", "main": "./dist/index.cjs", "module": "./dist/index.mjs",