Add example and update linter (#11)

rogebrd · Oct 19, 2020 · e1feb3c · e1feb3c
1 parent 37a0a2d
commit e1feb3c
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 11 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
-dist/
+dist/
+docs/
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,6 +6,7 @@ module.exports = {
   },
   extends: [
     'airbnb-base',
+    'plugin:jsdoc/recommended',
   ],
   parserOptions: {
     ecmaVersion: 12,
@@ -14,4 +15,7 @@ module.exports = {
   rules: {
     'import/extensions': 0,
   },
+  plugins: [
+    'jsdoc',
+  ],
 };
diff --git a/.jsdoc.json b/.jsdoc.json
@@ -7,6 +7,7 @@
     "opts": {
         "destination": "docs",
         "readme": "./README.md",
-        "recurse": true
+        "recurse": true,
+        "tutorials": "./examples"
     }
 }
diff --git a/README.md b/README.md
@@ -1,9 +1,15 @@
 [![Logo][logo]][repo]
 
 [![npm](https://img.shields.io/npm/v/dropbox-oauth-popup)](https://www.npmjs.com/package/dropbox-oauth-popup)
+![npm](https://img.shields.io/npm/dy/dropbox-oauth-popup)
+![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hy/dropbox-oauth-popup)
+![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/rogebrd/dropbox-oauth-popup/dropbox)
+
 
 This is a simple addition built onto the [Dropbox SDK][sdk] that allows for OAuth in the browser to be done via a popup window.
 
+You can view our documentation on [GitHub Pages][documentation].
+
 ## Usage
 
 1. Create a new instance of the `DropboxPopup` class
@@ -35,7 +41,7 @@ npm install --save-dev dropbox-oauth-popup
 Or you can use it directly in your browser be including the following tag
 
 ```
-<script src="https://cdn.jsdelivr.net/npm/dropbox-oauth-popup@1.2.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/dropbox-oauth-popup@1.3.0"></script>
 ```
 
 ## License
@@ -45,4 +51,5 @@ This package is distributed under the MIT license, please see [LICENSE][license]
 [logo]: https://repository-images.githubusercontent.com/304185097/6579e180-0fd1-11eb-9d46-91db905a363a
 [repo]: https://github.com/rogebrd/dropbox-oauth-popup
 [sdk]: https://github.com/dropbox/dropbox-sdk-js
+[documentation]: https://rogebrd.github.io/dropbox-oauth-popup
 [license]: https://github.com/rogebrd/dropbox-oauth-popup/blob/main/LICENSE
diff --git a/examples/browser.html b/examples/browser.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@7/dist/polyfill.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dropbox/dist/Dropbox-sdk.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dropboxPopup.js"></script>
+</head>
+
+<body>
+    <div>
+        <h1>Dropbox OAuth Popup Window</h1>
+        <p>
+            See the Dropbox OAuth Popup Window in action by clicking the run example button.
+            This example will authenticate with your Dropbox account and use the token to fetch
+            the current account using the `users.getCurrentAccount` endpoint. (Note, nothing is
+            saved on our end, this is just a demo.)
+        </p>
+        <p>See the code on <a
+                href="https://github.com/rogebrd/dropbox-oauth-popup/blob/main/examples/browser.html">GitHub</a></p>
+        <button onclick="runAuth()">Run Example</button>
+        <p id="result"></p>
+        <script>
+            const popup = new DropboxPopup({
+                clientId: 'a04f1ghft6a45rn',
+                clientSecret: 'tbjemcamktbyiy9',
+                redirectUri: 'https://rogebrd.github.io/dropbox-oauth-popup/tutorial-browser.html'
+            });
+            function runAuth() {
+                document.getElementById("result").innerHTML = "Waiting for auth...";
+                popup.authUser((auth) => {
+                    const dbx = new Dropbox.Dropbox(auth);
+                    dbx.usersGetCurrentAccount()
+                        .then((response) => {
+                            document.getElementById("result").innerHTML = response.result;
+                        })
+                        .catch((error) => {
+                            document.getElementById("result").innerHTML = error;
+                        });
+                });
+            }
+        </script>
+    </div>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dropbox-oauth-popup",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "registry": "npm",
   "description": "This is a simple addition built onto the Dropbox SDK that allows for OAuth in the browser to be done via a popup window.",
   "homepage": "https://github.com/rogebrd/dropbox-oauth-popup",
@@ -13,7 +13,8 @@
     "build": "rollup -c",
     "lint": "eslint *.js .",
     "lint-fix": "eslint *.js . --fix",
-    "generate-docs": "jsdoc -c ./.jsdoc.json"
+    "generate-docs": "jsdoc -c ./.jsdoc.json",
+    "clean": "rm -rf docs dist"
   },
   "devDependencies": {
     "@babel/core": "^7.12.0",
@@ -22,6 +23,7 @@
     "eslint": "^7.11.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsdoc": "^30.6.5",
     "express": "^4.17.1",
     "jsdoc": "^3.6.6",
     "rollup": "^2.30.0",
@@ -57,4 +59,4 @@
     "front-end",
     "window"
   ]
-}
+}
diff --git a/src/dropboxPopup.js b/src/dropboxPopup.js
@@ -23,10 +23,10 @@ const popupName = 'Dropbox OAuth';
 /**
  * @class DropboxPopup
  * @classdesc The DropboxPopup class is to provide a simple popup window to preform OAuth in.
- * @arg {Object} options
- * @arg {String} [options.clientId] - The client id for your app.
- * @arg {String} [options.clientSecret] - The client secret for your app.
- * @arg {String} [options.redirectUri] - The redirect Uri to return to once auth is complete.
+ * @param {object} options
+ * @param {string} [options.clientId] - The client id for your app.
+ * @param {string} [options.clientSecret] - The client secret for your app.
+ * @param {string} [options.redirectUri] - The redirect Uri to return to once auth is complete.
  */
 export default class DropboxPopup {
   constructor(options) {
@@ -42,6 +42,7 @@ export default class DropboxPopup {
 
   /**
    * The main function to handle authentication via a popup window.
+   *
    * @param {Function} callback - The callback function which will utilize the DropboxAuth object.
    * @returns {void}
    */
@@ -58,8 +59,9 @@ export default class DropboxPopup {
 
   /**
    * The function in charge of handling the redirect once the popup has completed.
+   *
    * @param {MessageEvent} event - The incoming message from the popup window.
-   * @return {void}
+   * @returns {void}
    */
   handleRedirect(event) {
     const { data } = event;
-Original file line number
+Diff line change
@@ -1 +1,2 @@
-    dist/
+    dist/
+    docs/