Reformat Styleguidist config files with JSDoc

styleguide.config.js

@@ -1,29 +1,63 @@
+/**
+ * React-Styleguideist Configuration Settings
+ * @author Justin Campbell <campb303@purdue.edu>
+ * @see https://react-styleguidist.js.org/docs/configuration
+ */
 const path = require('path')
+
 module.exports = {
+	/**
+	 * The title that appears at the top of the navigation bar.
+	 * @type {string}
+	 * @example webqueue2 Style Guide
+	 * @default <app name from package.json> + Style Guide
+	 */
 	title: "webqueue2 Frontend Docs",
+
+	/**
+	 * Style guide version, displayed under the title in the sidebar.
+	 * @type {number}
+	 */
 	version: "0.0.1",
 
-	// How the example source code is shown.
-	// [ "collapse", "expand", "hide" ]
-	// Default: collapse
+	/**
+	 * Defines the initial state of the example code tab.
+	 * @type {string} "collapse" | "hide" | "expand"
+	 * @default "collapse"
+	 */
 	exampleMode: "collapse",
 
-	// How methods and props are shown.
-	// [ "collapse", "expand", "hide" ]
-	// Default: collapse
+	/**
+	 * Defines the initial state of the methods/props tab.
+	 * @type {string} "collapse" | "hide" | "expand"
+	 * @default "collapse"
+	 */
 	usageMode: "collapse",
 
-	// Creates separate pages for top level nav items.
-	// Default: "false"
+	/**
+	 * Render one section or component per page.
+	 * @type {boolean}
+	 * @default false
+	 */
 	pagePerSection: true,
 
-	// Styleguide Includes
+	/**
+	 * Modules that are required for your style guide.
+	 * @type {string[]}
+	 */
 	require: [
 		// Material UI Resources
 		path.join(__dirname, "docs/Styleguidist/material-icon.css"),
 		path.join(__dirname, "docs/Styleguidist/roboto-font.css"),
 	],
 
+	/**
+	 * Allows components to be grouped into sections with a title and overview content. 
+	 * Sections can also be content only, with no associated components (for example, a textual introduction). 
+	 * Sections can be nested.
+	 * @type {Array}
+	 * @see https://react-styleguidist.js.org/docs/configuration#sections
+	 */
 	sections: [
 		{
 			name: "Getting Started",
@@ -35,10 +69,27 @@ module.exports = {
 		}
 	],
 
+	/**
+	 * Change HTML for the style guide app.
+	 * An object with options to add a favicon, meta tags, inline JavaScript or CSS, etc.
+	 * @type {Object | Function}
+	 */
 	template: {
 		favicon: "public/favicon.ico",
 	},
 
+	/**
+	 * Customize styles of any Styleguidist’s component using 
+	 * an object, a function returning said object or a file path 
+	 * to a file exporting said styles.
+	 * @type {Object | String | Function}
+	 */
 	styles: "styleguide.style.js",
+
+	/**
+	 * Customize style guide UI fonts, colors, etc. 
+	 * using a theme object or the path to a file exporting such object.
+	 * @type {Object | String}
+	 */
 	theme: "styleguide.theme.js"
 }

styleguide.style.js

@@ -1,3 +1,9 @@
+/**
+ * React-Styleguideist Style Settings
+ * @author Justin Campbell <campb303@purdue.edu>
+ * @see https://github.com/styleguidist/react-styleguidist/tree/master/examples/themed
+ */
+
 module.exports = {
 
 	// Render Area for Componenet Examples

styleguide.theme.js

@@ -1,4 +1,8 @@
-// See https://github.com/styleguidist/react-styleguidist/blob/master/src/client/styles/theme.ts
+/**
+ * React-Styleguideist Theme Settings
+ * @author Justin Campbell <campb303@purdue.edu>
+ * @see https://github.com/styleguidist/react-styleguidist/tree/master/examples/themed
+ */
 module.exports = {
 	maxWidth: "1400px",
 }