Implemented JSDocs to Storybook config files.

storybook/DocsTheme.js

@@ -1,9 +1,32 @@
+/**Defines the theme for the documentation */
 import { create } from '@storybook/theming';
 
 export default create({
+	/**
+	 * Set the base styling of the theme
+	 * @type {string}*/
   base: 'light',
+  	/**
+	 * The title of the documentation
+	 * @type {string}
+	 * @example webqueue2 Style Guide
+	 * @default <app name from package.json> + Front End Docs
+	 */
   brandTitle: 'webqueue2 Front End Docs',
+  	/**
+	 * The URL for the website associated with the documentation.
+	 * @type {string}
+	 */
   brandUrl: 'https://engineering.purdue.edu/webqueue/webqueue2/build',
+    	/**
+	 * The the brand icon used in the Storybook sidebar. Can use any common image formats
+	 * @type {string}
+	 */
   brandImage: 'https://github.itap.purdue.edu/ECN/webqueue2-frontend/blob/master/public/logo192.png?raw=true',
+     	/**
+	 * Set the background of the UI.
+	 * @type {string}
+	 * @default 'white'
+	 */
   appBg: 'white'
 });

storybook/main.js

@@ -1,8 +1,18 @@
-
+/**This file is used by Storyboook to determine where to look for stories and what file types can be stories. This is also where you define what addons you want to use. */
 module.exports = {
+     	/**
+	 * Determines where to look for stories and what file types can be stories
+	 * @type {string[]}
+	 * @default
+	 */
   "stories": [
     "../src/**/*.stories.@(js|jsx|ts|tsx|md|mdx)"
   ],
+    	/**
+	 * Define what addons you want to use.
+	 * @type {string[]}
+	 * @default
+	 */
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

storybook/manager.js

@@ -1,6 +1,11 @@
+/**Sets the theme for the Storybook UI */
 import { addons } from '@storybook/addons';
 import DocsTheme from './DocsTheme';
 
 addons.setConfig({
+     	/**
+	 * The the brand icon used in the Storybook sidebar. Can use any common image formats
+	 * @type {Object}
+	 */
   theme: DocsTheme,
-});
+})

storybook/preview.js

@@ -1,12 +1,13 @@
+/**Set globals imputs for ALL stories.  Globals can only be defined here. */
 import React, { useState } from "react";
 import ItemProvider from '../src/components/ItemProvider';
 import { ThemeProvider } from "@material-ui/core/styles";
 import webqueueTheme from "../src/theme";
-import { Paper } from "@material-ui/core";
-
-
-
 
+	/**
+	 * Adds a toolbar item that allow users to toggle dark mode on and off.
+	 * @type {Object}
+	 */
 export const globalTypes = {
   theme: {
     name: 'Set Dark Mode',
@@ -22,17 +23,21 @@ export const globalTypes = {
   },
 };
 
-
+/**Defines global theme ALL stories stories.
+ *  * @type {Object | Function}
+	*/
 const withThemeProvider = (Story, context) => {
-
   const theme = webqueueTheme(context.globals.theme);
   return (
     <ThemeProvider theme={theme} >
       <Story {...context} />
     </ThemeProvider>
   )
 }
-
+/**
+	 * Wraps all sotrys in the defined decorators.
+	 * @type {Array[]}
+	 */
 export const decorators = [
   (Story) => (
     <ItemProvider>
@@ -42,6 +47,9 @@ export const decorators = [
   withThemeProvider
 ];
 
+/**Set of static metadata for a story.  Is also used to define the sort order of the stories and backgrounds for every story.
+ * @type {Object}
+ */
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   options: {