├── .gitignore ├── .DS_Store ├── public ├── Logo.png ├── Diagram.png ├── LogoWord.png ├── monarq32.ico ├── readMeImages │ ├── ManifestBuilderPart1.png │ ├── ManifestBuilderPart2.png │ ├── ManifestBuilderPart3.png │ ├── ManifestBuilderPart4.png │ ├── ManifestBuilderPart5.png │ └── ManifestBuilderPart6.png ├── index.js └── highlight.css ├── .babelrc ├── Dockerfile ├── theme.js ├── index.html ├── .eslintrc.json ├── components ├── mainPage │ ├── Footer.jsx │ ├── Bio.jsx │ ├── Header.jsx │ ├── CodeBlockCopy.jsx │ ├── Intro.jsx │ ├── LinkToManifest.jsx │ ├── DeveloperBios.jsx │ ├── NavBar.jsx │ └── HomePage.jsx ├── visualizer │ ├── ConfigVis.jsx │ ├── Tabs.jsx │ ├── Instructions.jsx │ ├── EndpointInput.jsx │ ├── TabsPane.jsx │ ├── Operations.jsx │ └── Visualizer.jsx └── App.jsx ├── LICENSE ├── server └── server.js ├── package.json ├── webpack.config.js ├── .ebextensions └── alb-http-to-https-redirection.config └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MONARQ_home/HEAD/.DS_Store -------------------------------------------------------------------------------- /public/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MONARQ_home/HEAD/public/Logo.png -------------------------------------------------------------------------------- /public/Diagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MONARQ_home/HEAD/public/Diagram.png -------------------------------------------------------------------------------- /public/LogoWord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MONARQ_home/HEAD/public/LogoWord.png -------------------------------------------------------------------------------- /public/monarq32.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MONARQ_home/HEAD/public/monarq32.ico -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": ["@babel/plugin-transform-runtime"], 4 | } 5 | -------------------------------------------------------------------------------- /public/readMeImages/ManifestBuilderPart1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MONARQ_home/HEAD/public/readMeImages/ManifestBuilderPart1.png -------------------------------------------------------------------------------- /public/readMeImages/ManifestBuilderPart2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MONARQ_home/HEAD/public/readMeImages/ManifestBuilderPart2.png -------------------------------------------------------------------------------- /public/readMeImages/ManifestBuilderPart3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MONARQ_home/HEAD/public/readMeImages/ManifestBuilderPart3.png -------------------------------------------------------------------------------- /public/readMeImages/ManifestBuilderPart4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MONARQ_home/HEAD/public/readMeImages/ManifestBuilderPart4.png -------------------------------------------------------------------------------- /public/readMeImages/ManifestBuilderPart5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MONARQ_home/HEAD/public/readMeImages/ManifestBuilderPart5.png -------------------------------------------------------------------------------- /public/readMeImages/ManifestBuilderPart6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oslabs-beta/MONARQ_home/HEAD/public/readMeImages/ManifestBuilderPart6.png -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:14.16 2 | WORKDIR /usr/src/app 3 | COPY . /usr/src/app 4 | RUN npm install 5 | RUN npm run build 6 | EXPOSE 3000 7 | CMD ["node", "./server/server.js"] 8 | -------------------------------------------------------------------------------- /public/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-unused-expressions */ 2 | /* eslint-disable import/extensions */ 3 | import React from "react"; 4 | import ReactDOM from "react-dom"; 5 | import App from "../components/App.jsx"; 6 | import "core-js/stable"; 7 | 8 | require("regenerator-runtime/path").path; 9 | 10 | ReactDOM.render(, document.getElementById("root")); 11 | -------------------------------------------------------------------------------- /theme.js: -------------------------------------------------------------------------------- 1 | import { extendTheme } from "@chakra-ui/react"; 2 | 3 | const theme = extendTheme({ 4 | styles: { 5 | global: {}, 6 | }, 7 | colors: { 8 | brand: { 9 | mainO: "#f7931e", 10 | lightO: "#FBD38D", 11 | darkO: "#DD6B20", 12 | mainBl: "#2C5282", 13 | lightBl: "#BEE3F8", 14 | darkBl: "#2A4365", 15 | mainBr: "#744210", 16 | whiteT: "#EDF2F7", 17 | gray: "#2D3748", 18 | }, 19 | }, 20 | }); 21 | 22 | export default theme; 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | MONARQ 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": [ 7 | "plugin:react/recommended", 8 | "airbnb", 9 | "plugin:prettier/recommended" 10 | ], 11 | "parserOptions": { 12 | "ecmaFeatures": { 13 | "jsx": true 14 | }, 15 | "ecmaVersion": 12, 16 | "sourceType": "module" 17 | }, 18 | "plugins": [ 19 | "react" 20 | ], 21 | "rules": { 22 | "react/jsx-filename-extension": [1, { 23 | "extensions": [".js", ".jsx"]} 24 | ]} 25 | } 26 | -------------------------------------------------------------------------------- /components/mainPage/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Button, Flex, Spacer, Box } from "@chakra-ui/react"; 3 | import { ImLab } from "react-icons/im"; 4 | 5 | const Footer = () => { 6 | const year = new Date(); 7 | return ( 8 | 16 | 17 |

PATH Developers {year.getFullYear()}

18 | 19 | 20 | 21 | 22 | 25 | 26 | 27 | 28 | ); 29 | }; 30 | 31 | export default Footer; 32 | -------------------------------------------------------------------------------- /components/mainPage/Bio.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/destructuring-assignment */ 2 | /* eslint-disable react/prop-types */ 3 | import React from "react"; 4 | import { Button, Flex } from "@chakra-ui/react"; 5 | import { GrLinkedin, GrGithub } from "react-icons/gr"; 6 | 7 | const Bio = (props) => { 8 | return ( 9 | 10 |

{props.name}

11 |

{props.title}

12 | 13 | 16 | 17 | 18 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | export default Bio; 27 | -------------------------------------------------------------------------------- /components/visualizer/ConfigVis.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | import React, { useEffect } from "react"; 3 | import "../../public/highlight.css"; 4 | import hljs from "highlight.js/lib/core"; 5 | import javascript from "highlight.js/lib/languages/javascript"; 6 | 7 | hljs.registerLanguage("javascript", javascript); 8 | 9 | const ConfigVis = (props) => { 10 | const { configString } = props; 11 | const outputArray = [ 12 | `export const manifest = { 13 | ${configString} 14 | }`, 15 | ]; 16 | useEffect(() => { 17 | hljs.highlightAll(); 18 | }, [configString]); 19 | 20 | return ( 21 | 
22 |       
28 |         {outputArray[0]}
29 |       
30 |
31 | ); 32 | }; 33 | export default ConfigVis; 34 | -------------------------------------------------------------------------------- /components/visualizer/Tabs.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | import React from "react"; 3 | import { Button } from "@chakra-ui/react"; 4 | 5 | const Tabs = (props) => { 6 | const { types } = props; 7 | const { setCurrentTab } = props; 8 | const tabsArray = []; 9 | const handleClick = (id) => { 10 | setCurrentTab(id); 11 | }; 12 | 13 | Object.values(types).forEach((type) => { 14 | if (type) { 15 | tabsArray.push( 16 | 27 | ); 28 | } 29 | }); 30 | 31 | return
{tabsArray}
; 32 | }; 33 | 34 | export default Tabs; 35 | -------------------------------------------------------------------------------- /components/mainPage/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { Flex, Spacer, Box, Heading } from "@chakra-ui/react"; 4 | import NavBar from "./NavBar"; 5 | 6 | const Header = () => { 7 | return ( 8 | 14 | 15 | 16 | MONARQ Logo 22 | 23 | 24 | 25 | 26 | MONARQ 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | }; 34 | 35 | export default Header; 36 | -------------------------------------------------------------------------------- /components/mainPage/CodeBlockCopy.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { GridItem, Text, Code } from "@chakra-ui/react"; 3 | 4 | const CodeBlockNPM = () => { 5 | return ( 6 | 21 | 28 | Download the NPM Package 29 | 30 | 36 | npm install monarq 37 | 38 | 39 | ); 40 | }; 41 | 42 | export default CodeBlockNPM; 43 | -------------------------------------------------------------------------------- /components/visualizer/Instructions.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | import React, { useState, useEffect, useImperativeHandle } from "react"; 3 | import { 4 | Box, 5 | Flex, 6 | Button, 7 | } from "@chakra-ui/react"; 8 | 9 | const Instructions = (props) => { 10 | return ( 11 | 12 | A Manifest Object is required in order to use MONARQ. It allows you to specify which REST endpoints you would like to expose, as well as the corresponding GraphQL query/mutation operation that should be executed when a request is received at that endpoint. 13 | Once you are done building your Manifest Object, simply add it into your repository as a manifest.js file. 14 | 15 | 16 | ) 17 | } 18 | 19 | export default Instructions; 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 OSLabs Beta 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /components/visualizer/EndpointInput.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /* eslint-disable react/jsx-boolean-value */ 3 | import React from "react"; 4 | import { Input, Select } from "@chakra-ui/react"; 5 | 6 | const EndpointInput = (props) => { 7 | const { setMethod } = props; 8 | const { setEndpoint } = props; 9 | const methodHandler = (evt) => { 10 | setMethod(evt.target.value); 11 | }; 12 | const endpointHandler = (evt) => { 13 | setEndpoint(evt.target.value); 14 | }; 15 | return ( 16 |
17 | endpointHandler(evt)} 21 | /> 22 | 34 |
35 | ); 36 | }; 37 | export default EndpointInput; 38 | -------------------------------------------------------------------------------- /components/mainPage/Intro.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { GridItem, Text, Heading } from "@chakra-ui/react"; 3 | 4 | const Intro = () => { 5 | return ( 6 | 20 | 27 | Enjoy the benefits of both GraphQL and REST 28 | 29 | 37 | MONARQ is a lightweight NPM package that enables a GraphQL server to accept REST requests 38 | 39 | 40 | ); 41 | }; 42 | 43 | export default Intro; 44 | -------------------------------------------------------------------------------- /components/mainPage/LinkToManifest.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Button, GridItem, Text } from "@chakra-ui/react"; 3 | import { Link } from "react-router-dom"; 4 | 5 | const LinkToManifest = () => { 6 | return ( 7 | 23 | 24 | 31 | Need Help Making Your Manifest Object? 32 | 33 | 43 | 44 | 45 | ); 46 | }; 47 | 48 | export default LinkToManifest; 49 | -------------------------------------------------------------------------------- /public/highlight.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Obsidian style 3 | * ported by Alexander Marenin (http://github.com/ioncreature) 4 | */ 5 | 6 | .hljs { 7 | display: block; 8 | overflow-x: auto; 9 | padding: 0.5em; 10 | background: #282b2e; 11 | } 12 | 13 | .hljs-keyword, 14 | .hljs-selector-tag, 15 | .hljs-literal, 16 | .hljs-selector-id { 17 | color: #93c763; 18 | } 19 | 20 | .hljs-number { 21 | color: #ffcd22; 22 | } 23 | 24 | .hljs { 25 | color: #e0e2e4; 26 | } 27 | 28 | .hljs-attribute { 29 | color: #668bb0; 30 | } 31 | 32 | .hljs-code, 33 | .hljs-class .hljs-title, 34 | .hljs-section { 35 | color: white; 36 | } 37 | 38 | .hljs-regexp, 39 | .hljs-link { 40 | color: #d39745; 41 | } 42 | 43 | .hljs-meta { 44 | color: #557182; 45 | } 46 | 47 | .hljs-tag, 48 | .hljs-name, 49 | .hljs-bullet, 50 | .hljs-subst, 51 | .hljs-emphasis, 52 | .hljs-type, 53 | .hljs-built_in, 54 | .hljs-selector-attr, 55 | .hljs-selector-pseudo, 56 | .hljs-addition, 57 | .hljs-variable, 58 | .hljs-template-tag, 59 | .hljs-template-variable { 60 | color: #8cbbad; 61 | } 62 | 63 | .hljs-string, 64 | .hljs-symbol { 65 | color: #ec7600; 66 | } 67 | 68 | .hljs-comment, 69 | .hljs-quote, 70 | .hljs-deletion { 71 | color: #818e96; 72 | } 73 | 74 | .hljs-selector-class { 75 | color: #A082BD 76 | } 77 | 78 | .hljs-keyword, 79 | .hljs-selector-tag, 80 | .hljs-literal, 81 | .hljs-doctag, 82 | .hljs-title, 83 | .hljs-section, 84 | .hljs-type, 85 | .hljs-name, 86 | .hljs-strong { 87 | font-weight: bold; 88 | } -------------------------------------------------------------------------------- /components/mainPage/DeveloperBios.jsx: -------------------------------------------------------------------------------- 1 | import { Flex } from "@chakra-ui/react"; 2 | import React from "react"; 3 | import Bio from "./Bio"; 4 | 5 | const DeveloperBios = () => { 6 | const outputBios = []; 7 | 8 | const developer = [ 9 | { 10 | name: "Peter Baniuszewicz", 11 | title: "Fullstack Engineer", 12 | linkedIn: "https://www.linkedin.com/in/peterbaniuszewicz/", 13 | github: "https://github.com/Peter-Ba", 14 | }, 15 | 16 | { 17 | name: "Amy Chen", 18 | title: "Fullstack Engineer", 19 | linkedIn: "https://www.linkedin.com/in/amyechen", 20 | github: "https://github.com/designal46", 21 | }, 22 | 23 | { 24 | name: "Tyler Kneidl", 25 | title: "Fullstack Engineer", 26 | linkedIn: "https://www.linkedin.com/in/tylerkneidl/", 27 | github: "https://github.com/tylerkneidl", 28 | }, 29 | 30 | { 31 | name: "Helen Regula", 32 | title: "Fullstack Engineer", 33 | linkedIn: "https://www.linkedin.com/in/helen-regula/", 34 | github: "https://github.com/helenregula", 35 | }, 36 | ]; 37 | 38 | developer.forEach((person) => { 39 | outputBios.push( 40 | 46 | ); 47 | }); 48 | 49 | return ( 50 | 51 | {outputBios} 52 | 53 | ); 54 | }; 55 | 56 | export default DeveloperBios; 57 | -------------------------------------------------------------------------------- /components/mainPage/NavBar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Button } from "@chakra-ui/react"; 3 | import { GrLinkedin, GrGithub, GrMedium } from "react-icons/gr"; 4 | import { ImNpm } from "react-icons/im"; 5 | 6 | 7 | const NavBar = () => { 8 | return ( 9 |
10 | 11 | 20 | 21 | 22 | 31 | 32 | 33 | 42 | 43 | 44 | 53 | 54 |
55 | ); 56 | }; 57 | 58 | export default NavBar; 59 | -------------------------------------------------------------------------------- /components/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { BrowserRouter, Switch, Route } from "react-router-dom"; 3 | import { ChakraProvider, Grid, GridItem } from "@chakra-ui/react"; 4 | import Header from "./mainPage/Header"; 5 | import Footer from "./mainPage/Footer"; 6 | import HomePage from "./mainPage/HomePage"; 7 | import Visualizer from "./visualizer/Visualizer"; 8 | import theme from "../theme"; 9 | 10 | const App = () => { 11 | const [isLoaded, setIsLoaded] = useState(); 12 | 13 | return ( 14 | 15 | 16 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 45 |