Initial commit with instructions

.eslintrc

@@ -0,0 +1,29 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  },
+  "globals": {
+    "chrome": "readonly"
+  },
+  "ignorePatterns": ["watch.js", "dist/**"]
+}

.github/workflows/build.yml

@@ -0,0 +1,24 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Build Test
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        cache: 'yarn'
+    - run: yarn install
+    - run: yarn build

.github/workflows/greetings.yml

@@ -0,0 +1,16 @@
+name: Greetings
+
+on: [pull_request_target, issues]
+
+jobs:
+  greeting:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+    - uses: actions/first-interaction@v1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        issue-message: 'Thank you for your contribution. We will check and reply to you as soon as possible.'
+        pr-message: 'Thank you for your contribution. We will check and reply to you as soon as possible.'

.gitignore

@@ -0,0 +1,16 @@
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# build
+/dist
+
+# etc
+.DS_Store
+.env.local
+.idea
+
+#generated manifest
+public/manifest.json

.nvmrc

@@ -0,0 +1 @@
+16.16.0

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "requirePragma": false,
+  "arrowParens": "always"
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Seo Jong Hak
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,104 @@
+<div align="center">
+<img src="public/icon-128.png" alt="logo"/>
+<h1>Apollo Sandbox - Chrome Extension</h1>
+
+![](https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=black)
+![](https://img.shields.io/badge/Typescript-3178C6?style=flat-square&logo=typescript&logoColor=white)
+![](https://badges.aleen42.com/src/vitejs.svg)
+
+</div>
+
+## Intro
+
+Add a private Chrome Devtools panel for querying any GraphQL endpoint.
+
+## Features
+
+- [Chrome Extension Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/)
+- [React 18](https://reactjs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Jest](https://jestjs.io/)
+- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
+- [Vite](https://vitejs.dev/)
+- [SASS](https://sass-lang.com/)
+- [ESLint](https://eslint.org/)
+- [Prettier](https://prettier.io/)
+
+## Installation
+
+1. Clone this repository for each graphql endpoint you'd like to use.
+2. Change `name` and `description` in package.json - **The manifest will pull in those values and use them for the Chrome Extention**
+3. Run `yarn` or `npm i`
+4. Run `yarn dev` or `npm run dev`
+5. Load the xxtension in Chrome
+   1. Launch chrome://extensions
+   2. Enable Developer Mode
+   3. Click `Load unpacked extension`
+   4. Select the `dist` folder in this project (after dev or build)
+6. If you want to build in production, run `yarn build` or `npm run build`.
+
+Open Devtools, select the Apollo Sandbox panel, and enter the graphql endpoint you'd like to query.
+
+## Contentful Endpoint
+
+```bash
+https://graphql.contentful.com/content/v1/spaces/{SPACE}
+# or for an environment
+https://graphql.contentful.com/content/v1/spaces/{SPACE}/environments/{ENVIRONMENT}
+```
+
+Add these header keys:
+
+| Header Key    | Value                       |
+| ------------- | --------------------------- |
+| Authorization | Bearer {{CONTENTFUL_TOKEN}} |
+
+After saving, open Settings ⚙️
+
+Add Environment Variables:
+
+```JSON
+{
+  "CONTENTFUL_TOKEN": // YOUR_CONTENT_DELIVERY_GRAPHQL_TOKEN
+}
+```
+
+## Shopify Endpoint
+
+```bash
+https://{store_name}.myshopify.com/api/2022-07/graphql.json
+```
+
+Add these header keys:
+
+| Header Key                        | Value                |
+| --------------------------------- | -------------------- |
+| X-Shopify-Storefront-Access-Token | {{STOREFRONT_TOKEN}} |
+
+After saving, open Settings ⚙️
+
+Add Environment Variables:
+
+```JSON
+{
+  "STOREFRONT_TOKEN": // YOUR_STOREFRONT_TOKEN
+}
+```
+
+Verify the variables are activated in the Headers tab underneath the Query section
+
+## Notes
+
+To change the name of the panel, open `pages/devtools/index.ts` and replace "Apollo Sandbox" with the new name:
+
+```JS
+try {
+  chrome.devtools.panels.create(
+    "Apollo Sandbox",
+    "icon-34.png",
+    "src/pages/panel/index.html"
+  );
+} catch (e) {
+  console.error(e);
+}
+```