Improve styleguidist integration

src/App.js

@@ -2,10 +2,10 @@ import React, { useState } from "react";
 import { ThemeProvider } from "@material-ui/core/styles";
 import webqueueTheme from "./theme";
 import { Box, makeStyles } from "@material-ui/core";
-import CustomAppBar from "./CustomAppBar";
+import ItemTableAppBar from "./components/ItemTableAppBar/";
 import ItemTable from "./components/ItemTable/";
-import ItemViewAppBar from "./ItemViewAppBar";
-import ItemView from "./ItemView";
+import ItemViewAppBar from "./components/ItemViewAppBar/";
+import ItemView from "./components/ItemView/";
 import clsx from "clsx";
 
 const testItem = {"queue": "ce", "number": 100, "lastUpdated": "07-23-20 10:11 PM", "headers": [{"type": "Merged-Time", "content": "Tue, 23 Jun 2020 13:31:53 -0400"}, {"type": "Merged-By", "content": "campb303"}, {"type": "QTime", "content": "1"}, {"type": "QTime-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "QTime-Updated-By", "content": "campb303"}, {"type": "Time", "content": "1"}, {"type": "Time-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "Time-Updated-By", "content": "campb303"}, {"type": "Replied-Time", "content": "Tue, 23 Jun 2020 13:28:48 -0400"}, {"type": "Replied-By", "content": "campb303"}, {"type": "Edited-Time", "content": "Tue, 23 Jun 2020 13:27:56 -0400"}, {"type": "Edited-By", "content": "campb303"}, {"type": "QAssigned-To", "content": "campb303"}, {"type": "QAssigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "QAssigned-To-Updated-By", "content": "campb303"}, {"type": "Assigned-To", "content": "campb303"}, {"type": "Assigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "Assigned-To-Updated-By", "content": "campb303"}, {"type": "QStatus", "content": "Dont Delete"}, {"type": "QStatus-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "QStatus-Updated-By", "content": "campb303"}, {"type": "Status", "content": "Dont Delete"}, {"type": "Status-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "Status-Updated-By", "content": "campb303"}, {"type": "Date", "content": "Tue, 23 Jun 2020 13:25:51 -0400"}, {"type": "From", "content": "Justin Campbell <campb303@purdue.edu>"}, {"type": "Message-ID", "content": "<911CE050-3240-4980-91DD-9C3EBB8DBCF8@purdue.edu>"}, {"type": "Subject", "content": "Beepboop"}, {"type": "To", "content": "cesite@ecn.purdue.edu"}, {"type": "Content-Type", "content": "text/plain; charset=\"utf-8\""}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/208-original.txt"}], "content": ["Testtest\n", "\n", "*** Status updated by: campb303 at: 6/23/2020 13:26:55 ***\n", "Dont Delete\n", "*** Edited by: campb303 at: 06/23/20 13:27:56 ***\n", "\n", "This be an edit my boy\n", "\n", "\n", "\n", "*** Replied by: campb303 at: 06/23/20 13:28:18 ***\n", "\n", "This be a reply my son\n", "\n", "Justin\n", "ECN\n", "\n", "=== Additional information supplied by user ===\n", "\n", "Subject: Re: Beepboop\n", "From: Justin Campbell <campb303@purdue.edu>\n", "Date: Tue, 23 Jun 2020 13:30:45 -0400\n", "X-ECN-Queue-Original-Path: /home/pier/e/queue/Attachments/inbox/2020-06-23/212-original.txt\n", "X-ECN-Queue-Original-URL: https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/212-original.txt\n", "\n", "Huzzah!\n", "\n", "===============================================\n"], "isLocked": "ce 100 is locked by knewell using qvi", "userEmail": "campb303@purdue.edu", "userName": "Justin Campbell", "userAlias": "campb303", "assignedTo": "campb303", "subject": "Beepboop", "status": "Dont Delete", "priority": "", "department": "", "building": "", "dateReceived": "Tue, 23 Jun 2020 13:25:51 -0400"}
@@ -55,7 +55,7 @@ function App(){
 		<ThemeProvider theme={theme}>
 			<Box display="flex">
 				<Box className={classes.leftCol}>
-					<CustomAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
+					<ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
 					<ItemTable setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
 				</Box>
 				<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>

src/ItemMetadataView.js → src/components/ItemMetadataView/ItemMetadataView.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types'
 import { makeStyles, Grid, Paper } from '@material-ui/core';
 import { Alert } from '@material-ui/lab'
 
@@ -40,4 +41,9 @@ export default function ItemMetadataView({item}){
 			</Grid>
 		</>
 	);
-}
+}
+
+ItemMetadataView.propTypes = {
+	/** The item to be displayed. */
+	"item": PropTypes.object.isRequired
+};

src/components/ItemMetadataView/ItemMetadataView.md

@@ -0,0 +1,14 @@
+The ItemMetadataView displays the metadata for an item as part of the [ItemView](/#/Components/ItemView). 
+
+```jsx
+import Paper from "@material-ui/core";
+import ItemMetadataView from "./ItemMetadataView";
+
+<div style={{backgroundColor: "white", padding: "1em", borderRadius: "1rem"}}>
+    <ItemMetadataView item={demoItem} />
+</div>
+```
+
+```jsx static
+<ItemMetadataView item={activeItem} />
+```

src/components/ItemMetadataView/index.js

@@ -0,0 +1,3 @@
+import ItemMetadataView from "./ItemMetadataView";
+
+export default ItemMetadataView;

src/components/ItemTable/ItemTable.md

@@ -1,4 +1,4 @@
-The ItemTable is the primary view for webqueue2. It displays item metadata for items of selected queues and allows for filtering by field and opening an item by clicking. By default, it is pre-configured to fetch data from the webqueue2 API. 
+The ItemTable is the primary view for webqueue2. It displays item metadata for items of selected queues and allows for filtering by field and opening an item by clicking. By default, it is pre-configured to fetch data from the webqueue2 API. It is to be used with the [ItemTableAppBar](/#/Components/ItemTableAppBar).
 
 It is based on [material-table](https://material-table.com/).
 ```jsx

src/CustomAppBar.js → src/components/ItemTableAppBar/ItemTableAppBar.js

@@ -1,11 +1,11 @@
 import React from "react";
+import PropTypes from 'prop-types';
 import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom} from "@material-ui/core"
-import MenuIcon from "@material-ui/icons/Menu";
 import DarkModeIcon from '@material-ui/icons/Brightness4';
 import LightModeIcon from '@material-ui/icons/Brightness7';
 
 
-export default function CustomAppBar(props){
+export default function ItemTableAppBar(props){
 	const useStyles = makeStyles((theme) => ({
 		menuButton: {
 			marginLeft: theme.spacing(2),
@@ -36,12 +36,23 @@ export default function CustomAppBar(props){
 							{props.darkMode ? <DarkModeIcon /> : <LightModeIcon />}
 						</IconButton>
 					</Tooltip>
-
-					<IconButton edge="end" className={classes.menuButton} color="inherit" aria-label="menu">
-						<MenuIcon />
-					</IconButton>
 				</Toolbar>
 			</AppBar>
 		</>
 	);
-}
+};
+
+ItemTableAppBar.propTypes = {
+	/** The title of the app bar. */
+	"title": PropTypes.string,
+	/** Function to toggle darkMode. */
+	"setDarkMode": PropTypes.func.isRequired,
+	/** State variable for darkMode */
+	"darkMode": PropTypes.bool.isRequired,
+	/** The webqueue2 MUI theme. */
+	"theme": PropTypes.object.isRequired
+};
+
+ItemTableAppBar.defaultProps = {
+	"title": ""
+};

src/components/ItemTableAppBar/ItemTableAppBar.md

@@ -0,0 +1,16 @@
+The ItemTableAppBar is the primary toolbar for the [ItemTable](/#/Components/ItemTable). It displays the application title and application wide actions.
+
+```jsx
+import React, { useState } from "react";
+import webqueue2Theme from "../../theme.js";
+
+const [darkMode, setDarkMode] = useState(false);
+
+const theme = webqueue2Theme(darkMode);
+
+<ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme} />
+```
+
+```jsx static
+<ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme} />
+```

src/components/ItemTableAppBar/index.js

@@ -0,0 +1,3 @@
+import ItemTableAppBar from "./ItemTableAppBar";
+
+export default ItemTableAppBar;

src/ItemView.js → src/components/ItemView/ItemView.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import PropTypes from "prop-types";
 import { Paper, Typography, makeStyles } from '@material-ui/core';
-import ItemMetadataView from "./ItemMetadataView"
+import ItemMetadataView from "../ItemMetadataView/"
 
-function ItemView(props){
+export default function ItemView(props){
 
 	const useStyles = makeStyles((theme) => ({
 		"paperPadding": {
@@ -24,6 +25,9 @@ return(
 			)): "" }
 		</Paper>
 	);
-}
+};
 
-export default ItemView;
+ItemView.propTypes = {
+	/** The item to be viewed. */
+	"activeItem": PropTypes.object.isRequired
+};

src/components/ItemView/ItemView.md

@@ -0,0 +1,18 @@
+The ItemView is the primary view for an iten. It displays the messages and actions in a timeline view.
+
+```jsx
+import React, { useState } from "react";
+
+const demoItem = {"queue": "ce", "number": 100, "lastUpdated": "07-23-20 10:11 PM", "headers": [{"type": "Merged-Time", "content": "Tue, 23 Jun 2020 13:31:53 -0400"}, {"type": "Merged-By", "content": "campb303"}, {"type": "QTime", "content": "1"}, {"type": "QTime-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "QTime-Updated-By", "content": "campb303"}, {"type": "Time", "content": "1"}, {"type": "Time-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "Time-Updated-By", "content": "campb303"}, {"type": "Replied-Time", "content": "Tue, 23 Jun 2020 13:28:48 -0400"}, {"type": "Replied-By", "content": "campb303"}, {"type": "Edited-Time", "content": "Tue, 23 Jun 2020 13:27:56 -0400"}, {"type": "Edited-By", "content": "campb303"}, {"type": "QAssigned-To", "content": "campb303"}, {"type": "QAssigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "QAssigned-To-Updated-By", "content": "campb303"}, {"type": "Assigned-To", "content": "campb303"}, {"type": "Assigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "Assigned-To-Updated-By", "content": "campb303"}, {"type": "QStatus", "content": "Dont Delete"}, {"type": "QStatus-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "QStatus-Updated-By", "content": "campb303"}, {"type": "Status", "content": "Dont Delete"}, {"type": "Status-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "Status-Updated-By", "content": "campb303"}, {"type": "Date", "content": "Tue, 23 Jun 2020 13:25:51 -0400"}, {"type": "From", "content": "Justin Campbell <campb303@purdue.edu>"}, {"type": "Message-ID", "content": "<911CE050-3240-4980-91DD-9C3EBB8DBCF8@purdue.edu>"}, {"type": "Subject", "content": "Beepboop"}, {"type": "To", "content": "cesite@ecn.purdue.edu"}, {"type": "Content-Type", "content": "text/plain; charset=\"utf-8\""}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/208-original.txt"}], "content": ["Testtest\n", "\n", "*** Status updated by: campb303 at: 6/23/2020 13:26:55 ***\n", "Dont Delete\n", "*** Edited by: campb303 at: 06/23/20 13:27:56 ***\n", "\n", "This be an edit my boy\n", "\n", "\n", "\n", "*** Replied by: campb303 at: 06/23/20 13:28:18 ***\n", "\n", "This be a reply my son\n", "\n", "Justin\n", "ECN\n", "\n", "=== Additional information supplied by user ===\n", "\n", "Subject: Re: Beepboop\n", "From: Justin Campbell <campb303@purdue.edu>\n", "Date: Tue, 23 Jun 2020 13:30:45 -0400\n", "X-ECN-Queue-Original-Path: /home/pier/e/queue/Attachments/inbox/2020-06-23/212-original.txt\n", "X-ECN-Queue-Original-URL: https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/212-original.txt\n", "\n", "Huzzah!\n", "\n", "===============================================\n"], "isLocked": "ce 100 is locked by knewell using qvi", "userEmail": "campb303@purdue.edu", "userName": "Justin Campbell", "userAlias": "campb303", "assignedTo": "campb303", "subject": "Beepboop", "status": "Dont Delete", "priority": "", "department": "", "building": "", "dateReceived": "Tue, 23 Jun 2020 13:25:51 -0400"};
+
+
+const [activeItem, setActiveItem] = useState({});
+const [sidebarOpen, setSidebarOpen] = useState(false);
+
+
+<ItemView activeItem={demoItem} setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
+```
+
+```jsx static
+<ItemView activeItem={activeItem} setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
+```

src/components/ItemView/index.js

@@ -0,0 +1,3 @@
+import ItemView from "./ItemView";
+
+export default ItemView;

src/ItemViewAppBar.js → src/components/ItemViewAppBar/ItemViewAppBar.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom} from "@material-ui/core"
 import CloseItemViewIcon from '@material-ui/icons/ChevronRight';
 
@@ -36,4 +37,17 @@ export default function ItemViewAppBar(props){
 			</AppBar>
 		</>
 	);
-}
+}
+
+ItemViewAppBar.propTypes = {
+	/** The webqueue2 MUI theme. */
+	"theme": PropTypes.object.isRequired,
+	/** Function to toggle sidebar open. */
+	"setSidebarOpen": PropTypes.func.isRequired,
+	/** The title of the app bar. */
+	"title": PropTypes.string
+};
+
+ItemViewAppBar.defaultProps = {
+	"title": ""
+};

src/components/ItemViewAppBar/ItemViewAppBar.md

@@ -0,0 +1,17 @@
+The ItemViewAppBar is the primary toolbar for the [ItemView](/#/Components/ItemView). It displays the item title and action for closing the sidebar.
+
+```jsx
+import React, { useState } from "react";
+import ItemViewAppBar from "./ItemViewAppBar";
+import webqueue2Theme from "../../theme.js";
+
+const theme = webqueue2Theme(false);
+
+const [sidebarOpen, setSidebarOpen] = useState(false);
+
+<ItemViewAppBar title="ce 100" setSidebarOpen={setSidebarOpen} theme={theme} />
+```
+
+```jsx static
+<ItemViewAppBar title={"ce 100"} setSidebarOpen={someFunc} theme={theme} />
+```

src/components/ItemViewAppBar/index.js

@@ -0,0 +1,3 @@
+import ItemViewAppBar from "./ItemViewAppBar";
+
+export default ItemViewAppBar;

src/components/TeamMemberCard/TeamMemberCard.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types'
 import { Card, CardHeader, Avatar, IconButton, CardContent, 
-	CardActions, Typography, Link, makeStyles } from '@material-ui/core';
+	CardActions, Link, makeStyles } from '@material-ui/core';
 import WebsiteIcon from '@material-ui/icons/Language';
 import webqueue2Theme from "../../theme";
 

styleguidist/styleguide.config.js

@@ -119,8 +119,7 @@ module.exports = {
 	 */
 	getComponentPathLine(componentPath) {
 		const name = path.basename(componentPath, '.js')
-		const dir = path.dirname(componentPath)
-		return `import ${name} from '${dir}/';`
+		return `import ${name} from './components/${name}/';`
 	},
 
 	/**