Resolving linting issues

Signed-off-by: Joe Fusco <[email protected]>

package.json

@@ -6,7 +6,8 @@
 		"start": "wp-scripts start",
 		"format": "wp-scripts format",
 		"format:src": "wp-scripts format ./src",
-		"lint:js": "wp-scripts lint-js",
+		"lint:js": "wp-scripts lint-js ./src",
+		"lint:js:fix": "wp-scripts lint-js --fix ./src",
 		"lint:js:src": "wp-scripts lint-js ./src"
 	},
 	"devDependencies": {

src/App.jsx

@@ -2,11 +2,11 @@ import { EditorDrawer } from './components/EditorDrawer';
 import { Editor } from './components/Editor';
 
 export function App() {
-    return (
-      <div className='AppRoot'>
-        <EditorDrawer>
-          <Editor />
-        </EditorDrawer>
-      </div>
-    );
-};
+	return (
+		<div className="AppRoot">
+			<EditorDrawer>
+				<Editor />
+			</EditorDrawer>
+		</div>
+	);
+}

src/components/Editor.jsx

@@ -1,27 +1,26 @@
+/* global WPGRAPHQL_IDE_DATA */
 import { GraphiQL } from 'graphiql';
 import 'graphiql/graphiql.min.css';
 
-const fetcher = async (graphQLParams) => {
-    const { graphqlEndpoint } = WPGRAPHQL_IDE_DATA;
+const fetcher = async ( graphQLParams ) => {
+	const { graphqlEndpoint } = WPGRAPHQL_IDE_DATA;
 
-    const response = await fetch(graphqlEndpoint, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(graphQLParams),
-        credentials: 'same-origin' // or 'include' if your endpoint is on a different domain
-    });
+	const response = await fetch( graphqlEndpoint, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify( graphQLParams ),
+		credentials: 'same-origin', // or 'include' if your endpoint is on a different domain
+	} );
 
-    return response.json();
+	return response.json();
 };
 
 export function Editor() {
-    return (
-        <>
-            <GraphiQL
-                fetcher={fetcher}
-            />
-        </>
-    )
-}
+	return (
+		<>
+			<GraphiQL fetcher={ fetcher } />
+		</>
+	);
+}

src/components/EditorDrawer.jsx

@@ -1,21 +1,20 @@
 import { Drawer as VaulDrawer } from 'vaul';
 
-export function EditorDrawer({ shouldScaleBackground = false, children }) {
+export function EditorDrawer( { shouldScaleBackground = false, children } ) {
 	const buttonLabel = 'GraphQL IDE';
 
-    return (
+	return (
 		<div className="EditorDrawerRoot">
-			<VaulDrawer.Root shouldScaleBackground={shouldScaleBackground}>
+			<VaulDrawer.Root shouldScaleBackground={ shouldScaleBackground }>
 				<VaulDrawer.Trigger className="EditorDrawerButton">
-					<span className="ab-icon" aria-hidden="true"></span>{buttonLabel}
+					<span className="ab-icon" aria-hidden="true"></span>
+					{ buttonLabel }
 				</VaulDrawer.Trigger>
 				<VaulDrawer.Portal>
-					<VaulDrawer.Content>
-						{children}
-					</VaulDrawer.Content>
+					<VaulDrawer.Content>{ children }</VaulDrawer.Content>
 					<VaulDrawer.Overlay />
 				</VaulDrawer.Portal>
 			</VaulDrawer.Root>
 		</div>
-    );
-};
+	);
+}

src/index.js

@@ -1,21 +1,22 @@
+/* global WPGRAPHQL_IDE_DATA */
 import { createRoot } from '@wordpress/element';
 import { App } from './App';
 
 /**
  * Get the ID of the HTML element where the React app will be placed.
  *
- * @const {string} rootElementId - The ID of the HTML element.
+ * @constant {string} rootElementId - The ID of the HTML element.
  *
  * Localized in wpgraphql-ide.php
  */
 const { rootElementId } = WPGRAPHQL_IDE_DATA;
 
-const rootElement = document.getElementById(rootElementId);
+const rootElement = document.getElementById( rootElementId );
 
-if (rootElement) {
-    const root = createRoot(rootElement);
-    root.render(<App />);
+if ( rootElement ) {
+	const root = createRoot( rootElement );
+	root.render( <App /> );
 }
 
 // Expose app as a global variable to utilize in gutenberg.
-window.WPGraphQLIDE = App;
+window.WPGraphQLIDE = App;