diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..7a56b73 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" + } \ No newline at end of file diff --git a/src/.eslintrc.json b/src/.eslintrc.json index bffb357..4d765f2 100644 --- a/src/.eslintrc.json +++ b/src/.eslintrc.json @@ -1,3 +1,3 @@ { - "extends": "next/core-web-vitals" + "extends": ["next/core-web-vitals", "prettier"] } diff --git a/src/.gitignore b/src/.gitignore index c87c9b3..46f26a8 100644 --- a/src/.gitignore +++ b/src/.gitignore @@ -33,4 +33,4 @@ yarn-error.log* # typescript *.tsbuildinfo -next-env.d.ts +next-env.d.ts \ No newline at end of file diff --git a/src/.prettierrc.json b/src/.prettierrc.json new file mode 100644 index 0000000..123d3e8 --- /dev/null +++ b/src/.prettierrc.json @@ -0,0 +1,7 @@ +{ + "semi": true, + "trailingComma": "es5", + "singleQuote": true, + "tabWidth": 2, + "useTabs": false +} diff --git a/src/README.md b/src/README.md index 99dda1a..fb27022 100644 --- a/src/README.md +++ b/src/README.md @@ -1,11 +1,12 @@ # GraphQL Dashboard ## Development + For development run `yarn dev` and make sure that a backend is running at http://localhost:54321/graphql. Example backends can be found under `/examples.` ## Production + We use next.js as a static site generater. Run `yarn build` to generate the static assets. The backend, which is responsible for authentication and authorization, will serve these static files. - diff --git a/src/assets/caretDown.tsx b/src/assets/caretDown.tsx index f21a4b2..f43a6f0 100644 --- a/src/assets/caretDown.tsx +++ b/src/assets/caretDown.tsx @@ -1,21 +1,21 @@ -function CaretDown(props: any) { - return ( - - - - ) -} - -export default CaretDown \ No newline at end of file +function CaretDown(props: any) { + return ( + + + + ); +} + +export default CaretDown; diff --git a/src/components/commandBubble.module.css b/src/components/commandBubble.module.css index a295dc2..788abc1 100644 --- a/src/components/commandBubble.module.css +++ b/src/components/commandBubble.module.css @@ -1,6 +1,6 @@ .openClosedSwitch { - padding: 1.5rem 2ch; - opacity: 0.75; + padding: 1.5rem 2ch; + opacity: 0.75; min-width: 10ch; cursor: pointer; transition: all 0.25s 0s ease-in-out; @@ -27,7 +27,7 @@ } .bubble:hover { - box-shadow: -8px 10px 12px 4px rgba(0, 0, 0, 0.18); + box-shadow: -8px 10px 12px 4px rgba(0, 0, 0, 0.18); transform: scale(1.01); } @@ -45,7 +45,7 @@ opacity: 0.5; } -.title { +.title { flex-grow: 0; margin: 1.5rem; transform: translate(0, 2px); @@ -77,10 +77,10 @@ .bubbleContent { max-height: 0px; transition: max-height 0.5s 0s ease; - overflow: hidden; + overflow: hidden; } .open .bubbleContent { - height: fit-content; + height: fit-content; max-height: 500px; -} \ No newline at end of file +} diff --git a/src/components/commandBubble.tsx b/src/components/commandBubble.tsx index c49a11e..f9a4804 100644 --- a/src/components/commandBubble.tsx +++ b/src/components/commandBubble.tsx @@ -1,10 +1,10 @@ -import { GraphQLArgument } from "graphql"; -import { Maybe } from "graphql/jsutils/Maybe"; -import { useState } from "react"; -import CaretDown from "../assets/caretDown"; -import styles from "./commandBubble.module.css"; -import InputBox from "./inputBox"; -import { argumentsToInputType } from "./inputType"; +import { GraphQLArgument } from 'graphql'; +import { Maybe } from 'graphql/jsutils/Maybe'; +import { useState } from 'react'; +import CaretDown from '../assets/caretDown'; +import styles from './commandBubble.module.css'; +import InputBox from './inputBox'; +import { argumentsToInputType } from './inputType'; type Props = { title: string; @@ -17,12 +17,12 @@ export default function CommandBubble({ title, titleWidthInCh, description, - input + input, }: Props) { let [isOpen, toggleOpen] = useState(false); return ( -
-
toggleOpen(o => !o)}> +
+
toggleOpen((o) => !o)}>
!("fields" in f)).map((f) => f.name.length) + ...input.fields.filter((f) => !('fields' in f)).map((f) => f.name.length) ); } @@ -16,7 +16,8 @@ export default function InputBox({ input, labelLength }: Props) { if (!input) { return null; } - if ("fields" in input) { // ComplexInput + if ('fields' in input) { + // ComplexInput let labelLength = calculateLabelLength(input); return (
@@ -26,7 +27,8 @@ export default function InputBox({ input, labelLength }: Props) { ))}
); - } else { // ScalarInput + } else { + // ScalarInput return (
argumentToInputType(f))} - } - throw new Error("unexpected type"); + if (type instanceof GraphQLScalarType) { + return { name: arg.name }; + } + if (type instanceof GraphQLInputObjectType) { + return { + name: arg.name, + fields: Object.values(type.getFields()).map((f) => + argumentToInputType(f) + ), + }; + } + if (type instanceof GraphQLList) { + return { name: arg.name }; + } + throw new Error('unexpected type'); } -function argumentsToInputType(args: readonly GraphQLArgument[]): InputType | null { - if (args.length == 0) { - return null; - } - if (args.length > 1) { - return {name: "input", fields: args.map(a => argumentToInputType(a))} - } - return argumentToInputType(args[0]); +function argumentsToInputType( + args: readonly GraphQLArgument[] +): InputType | null { + if (args.length == 0) { + return null; + } + if (args.length > 1) { + return { + name: 'input', + fields: args.map((a) => argumentToInputType(a)), + }; + } + return argumentToInputType(args[0]); } -export type {InputType, ComplexInput}; -export {argumentsToInputType}; \ No newline at end of file +export type { InputType, ComplexInput }; +export { argumentsToInputType }; diff --git a/src/components/mutations.tsx b/src/components/mutations.tsx index 3444a68..a78b154 100644 --- a/src/components/mutations.tsx +++ b/src/components/mutations.tsx @@ -1,16 +1,16 @@ -import { useEffect, useState } from "react"; -import { GraphQLField } from "graphql"; -import { getSchema } from "../schema/GetSchema"; -import CommandBubble from "./commandBubble"; +import { useEffect, useState } from 'react'; +import { GraphQLField } from 'graphql'; +import { getSchema } from '../schema/GetSchema'; +import CommandBubble from './commandBubble'; export default function Mutations() { const [mutations, setMutations] = useState[]>([]); useEffect(() => { const load = async () => { - const schema = await getSchema("/graphql"); + const schema = await getSchema('/graphql'); // TODO: Check for errors - const mutations = schema?.getMutationType()?.getFields(); + const mutations = schema?.getMutationType()?.getFields(); setMutations(Object.values(mutations!)); }; @@ -21,7 +21,15 @@ export default function Mutations() { return ( <>

Mutations:

- {mutations.map((m) => )} + {mutations.map((m) => ( + + ))} ); } diff --git a/src/next.config.js b/src/next.config.js index ed41eb2..c8e8dd2 100644 --- a/src/next.config.js +++ b/src/next.config.js @@ -2,11 +2,13 @@ const nextConfig = { reactStrictMode: true, rewrites: () => { - return [{ - source: "/graphql", - destination: "http://localhost:54321/graphql" - }] - } -} + return [ + { + source: '/graphql', + destination: 'http://localhost:5252/graphql', + }, + ]; + }, +}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/src/package.json b/src/package.json index 924723c..851e9fe 100644 --- a/src/package.json +++ b/src/package.json @@ -6,7 +6,9 @@ "dev": "next dev", "build": "next build && next export", "start": "next start", - "lint": "next lint" + "lint": "next lint", + "format": "prettier --check --ignore-path .gitignore .", + "format:fix": "prettier --write --ignore-path .gitignore ." }, "dependencies": { "@next/font": "13.1.0", @@ -15,8 +17,10 @@ "@types/react-dom": "18.0.9", "eslint": "8.30.0", "eslint-config-next": "13.1.0", + "eslint-config-prettier": "^8.6.0", "graphql": "^16.6.0", "next": "13.1.0", + "prettier": "^2.8.1", "react": "18.2.0", "react-dom": "18.2.0", "typescript": "4.9.4" diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index c055f25..766bf32 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,6 +1,6 @@ -import '../styles/globals.css' -import type { AppProps } from 'next/app' +import '../styles/globals.css'; +import type { AppProps } from 'next/app'; export default function App({ Component, pageProps }: AppProps) { - return + return ; } diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 54e8bf3..e1e9cbb 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,4 +1,4 @@ -import { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( @@ -9,5 +9,5 @@ export default function Document() { - ) + ); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 80b42b4..c603588 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,23 +1,22 @@ -import Head from "next/head"; +import Head from 'next/head'; -import { Martel_Sans } from "@next/font/google"; -import Mutations from "../components/mutations"; +import { Martel_Sans } from '@next/font/google'; +import Mutations from '../components/mutations'; -const martel = Martel_Sans({ subsets: ['latin'], weight: "400" }) - +const martel = Martel_Sans({ subsets: ['latin'], weight: '400' }); -export default function Home() { - const maxTitleLength = 13 +export default function Home() { + const maxTitleLength = 13; return ( <> GraphQL Dashboard - +
- +
); diff --git a/src/schema/GetSchema.ts b/src/schema/GetSchema.ts index f347512..46df468 100644 --- a/src/schema/GetSchema.ts +++ b/src/schema/GetSchema.ts @@ -1,20 +1,20 @@ -import { getIntrospectionQuery, parse, buildClientSchema } from 'graphql' - -export async function getSchema(endpoint: string) { - const { data } = await ( - await fetch(endpoint, { - method: 'POST', - body: JSON.stringify({ - query: getIntrospectionQuery(), - operationName: 'IntrospectionQuery', - variables: {} - }), - headers: { - 'Content-Type': 'application/json', - 'Accept': 'application/json' - } - }) - ).json() - - return buildClientSchema(data); -} \ No newline at end of file +import { getIntrospectionQuery, parse, buildClientSchema } from 'graphql'; + +export async function getSchema(endpoint: string) { + const { data } = await ( + await fetch(endpoint, { + method: 'POST', + body: JSON.stringify({ + query: getIntrospectionQuery(), + operationName: 'IntrospectionQuery', + variables: {}, + }), + headers: { + 'Content-Type': 'application/json', + Accept: 'application/json', + }, + }) + ).json(); + + return buildClientSchema(data); +} diff --git a/src/styles/globals.css b/src/styles/globals.css index 80dde9f..baba308 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,4 +1,6 @@ -*, *::before, *::after { +*, +*::before, +*::after { box-sizing: border-box; } @@ -6,7 +8,8 @@ margin: 0; } -html, body { +html, +body { height: 100%; } @@ -15,16 +18,29 @@ body { -webkit-font-smoothing: antialiased; } -img, picture, video, canvas, svg { +img, +picture, +video, +canvas, +svg { display: block; max-width: 100%; } -input, button, textarea, select { +input, +button, +textarea, +select { font: inherit; } -p, h1, h2, h3, h4, h5, h6 { +p, +h1, +h2, +h3, +h4, +h5, +h6 { overflow-wrap: break-word; } @@ -32,12 +48,10 @@ p, h1, h2, h3, h4, h5, h6 { isolation: isolate; } - main { - padding: 20ch; + padding: 20ch; } h1 { - margin-bottom: 1ch + margin-bottom: 1ch; } - diff --git a/src/yarn.lock b/src/yarn.lock index 9ab2dd1..af4ff97 100644 --- a/src/yarn.lock +++ b/src/yarn.lock @@ -597,6 +597,11 @@ eslint-config-next@13.1.0: eslint-plugin-react "^7.31.7" eslint-plugin-react-hooks "^4.5.0" +eslint-config-prettier@^8.6.0: + version "8.6.0" + resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.6.0.tgz#dec1d29ab728f4fa63061774e1672ac4e363d207" + integrity sha512-bAF0eLpLVqP5oEVUFKpMA+NnRFICwn9X8B5jrR9FcqnYBuPbqWEjTEspPWMj5ye6czoSLDweCzSo3Ko7gGrZaA== + eslint-import-resolver-node@^0.3.6: version "0.3.6" resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd" @@ -1525,6 +1530,11 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== +prettier@^2.8.1: + version "2.8.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.1.tgz#4e1fd11c34e2421bc1da9aea9bd8127cd0a35efc" + integrity sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg== + prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"