Created Storyboook docs for components

src/components/AppView/AppView.stories.mdx

@@ -0,0 +1,19 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import  AppView  from './AppView';
+
+The primary view for webqueue2.
+
+<Meta title="Components/AppView" component={AppView} />
+
+export const Template = (props) => <AppView {...props} />
+
+# AppView without queue selected
+
+<Canvas>
+  <Story name="Default">
+     {Template.bind({})}
+    </Story>
+</Canvas>
+
+
+

src/components/Assignment/Assignment.stories.mdx

@@ -0,0 +1,20 @@
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import  Assignment  from './Assignment';
+
+Renders a string representation of an assignment with a relative time.
+
+<Meta title="Components/Assignement" component={Assignment} />
+
+export const Template = (props) => <Assignment {...props} />
+
+
+<Canvas>
+  <Story name="Default" args={{
+	datetime: "2020-06-23T13:27:00-0400",
+	by: "campb303",
+	to: "campb303"
+  }}>
+     {Template.bind({})}
+    </Story>
+</Canvas>

src/components/AuthProvider/AuthProvider.stories.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+
+
+The AuthProvider component purpose is to give users access tokens on login and to refresh the tokens at set intervals of time. The users career account login information is used to determine if user can be authenticated.
+<Meta title="Components/AuthProvider" component={AuthProvider} />
+
+export const Template = (props) => <AuthProvider {...props} />
+
+

src/components/CurrentBreakPoint/CurrentBreakPoint.stories.mdx

@@ -0,0 +1,27 @@
+import { ThemeProvider } from '@material-ui/core/styles';
+import { Paper, makeStyles } from '@material-ui/core';
+import webqueue2Theme from "../../theme.js";
+import CurrentBreakPoint from "./CurrentBreakPoint";
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+
+Displays the MUI theme breakpoints and whether or not they are active. This is a utility component meant to make UI development easier, not as a UI element for production code.
+
+It must be used under a [ThemeProvider](https://material-ui.com/styles/api/#themeprovider).
+
+
+<Meta title="Components/CurrentBreakpoint"
+decorators={[  (Story) => (
+      <Paper>
+        <Story />
+      </Paper>
+    ),]}
+component={CurrentBreakPoint} />
+
+export const Template = (props) => <CurrentBreakPoint {...props} decoratots/>
+
+<Canvas>
+  <Story name="Default">
+     {Template.bind({})}
+    </Story>
+</Canvas>
+

src/components/DirectoryInformation/DirectoryInformation.stories.mdx

@@ -0,0 +1,32 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import  DirectoryInformation  from './DirectoryInformation';
+
+Displays the directory information as a table.
+
+
+<Meta title="Components/DirectoryInformation" component={DirectoryInformation} />
+
+export const Template = (props) => <DirectoryInformation {...props} />
+
+
+<Canvas>
+  <Story name="Loading" args={{
+      section:{
+      "type": "directory_information",
+      "Name": "Heyi Feng",
+      "Login": "feng293",
+      "Computer": "civil4147pc2.ecn",
+      "Location": "HAMP 4147",
+      "Email": "feng293@purdue.edu",
+      "Phone": "5039154835",
+      "Office": "",
+      "UNIX Dir": "None",
+      "Zero Dir": "U=\\\\myhome.itap.purdue.edu\\myhome\\%username%",
+      "User ECNDB": "http://eng.purdue.edu/jump/2e29495",
+      "Host ECNDB": "http://eng.purdue.edu/jump/2eccc3f",
+      "Subject": "Upgrade system and Abaqus"
+}
+  }}>
+     {Template.bind({})}
+    </Story>
+  </Canvas>

src/components/EmailHeader/EmailHeader.stories.mdx

@@ -0,0 +1,54 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import  EmailHeader  from './EmailHeader';
+
+Displays an email header with name, email, time sent, and recipients if present.
+
+<Meta title="Components/EmailHeader" component={EmailHeader} />
+
+export const Template = (props) => <EmailHeader {...props} />
+
+Default usage, without props.
+
+<Canvas>
+  <Story name="Default without props" >
+     {Template.bind({})}
+    </Story>
+  </Canvas>
+
+With `datetime`, `from_name` and `from_email` props. When `first_name` is passed, the [UserAvatar](/?path=/story/authprovider--page) will display the first letter of the name.
+
+<Canvas>
+    <Story name="With `datetime`, `from_name`, and `from_email` props" args={{
+        datetime: "2020-05-11T13:44:12+0000",
+        from_name: "Di Wang",
+        from_email: "wang2039@purdue.edu",
+        to:[],
+        cc:[]
+    }}>
+     {Template.bind({})}
+    </Story>
+</Canvas>
+
+You can add to/cc data by passing `to` and `cc` props.
+
+<Canvas>
+    <Story name="With `to` and `cc` props" args={{
+          datetime: "2020-05-11T13:44:12+0000",
+        from_name: "Di Wang",
+        from_email: "wang2039@purdue.edu",
+        to: [
+        {
+            "name": "'cesite@ecn.purdue.edu'",
+            "email": "cesite@ecn.purdue.edu"
+        }
+        ],
+        cc: [
+        {
+            "name": "Zavattieri, Pablo D",
+            "email": "zavattie@purdue.edu"
+        }
+        ]
+    }}>
+     {Template.bind({})}
+    </Story>
+</Canvas>

src/components/ItemBodyView/ItemBodyView.stories.mdx

@@ -0,0 +1,31 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import  ItemBodyView  from './ItemBodyView';
+
+The ItemBodyView displays the seven actions possible in an item:
+
+- **Directory information**: present when a user submits a ticket from the Contact Us page
+- **Initial Message**: the first message a user sends.
+- **Edit:** an internal note to and from ECN staff.
+- **Status:** an internal summary of the current/next task for the item.
+- **Assignment:** the career account alias for the ECN employee the item is assigned to.
+- **Reply To User:** a message sent from an ECN employee to a user.
+- **Reply To ECN:** a message sent from the user to ECN that has been merged into an existing item.
+
+
+<Meta title="Components/ItemBodyView" component={ItemBodyView} />
+
+export const Template = (props) => <ItemBodyView {...props} />
+
+# ItemBodyView Loading Content (Loading)
+
+<Canvas>
+  <Story name="Loading" args={{
+        item:
+  {"queue": "ce", "number": 100, "lastUpdated": "09-28-20 01:26 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"}, {"type": "X-ECN-Queue-Original-URL", "content": "https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/208-original.txt"}], "content": [{"type": "directory_information", "Name": "Heyi Feng", "Login": "feng293", "Computer": "civil4147pc2.ecn", "Location": "HAMP 4147", "Email": "feng293@purdue.edu", "Phone": "5039154835", "Office": "", "UNIX Dir": "None", "Zero Dir": "U=\\\\myhome.itap.purdue.edu\\myhome\\%username%", "User ECNDB": "http://eng.purdue.edu/jump/2e29495", "Host ECNDB": "http://eng.purdue.edu/jump/2eccc3f", "Subject": "Upgrade system and Abaqus"}, {"type": "assignment", "datetime": "2020-06-23T13:27:00-0400", "by": "campb303", "to": "campb303"}, {"type": "initial_message", "datetime": "2020-06-23T13:25:51-0400", "from_name": "Justin Campbell", "user_email": "campb303@purdue.edu", "to": [{"name": "", "email": "cesite@ecn.purdue.edu"}], "cc": [], "content": ["Testtest\n"]}, {"type": "status", "datetime": "2020-06-23T13:26:55", "by": "campb303", "content": ["Dont Delete\n"]}, {"type": "edit", "datetime": "2020-06-23T13:27:56", "by": "campb303", "content": ["This be an edit my boy\n"]}, {"type": "reply_to_user", "datetime": "2020-06-23T13:28:18", "by": "campb303", "content": ["This be a reply my son\n", "\n", "Justin\n", "ECN\n"]}, {"type": "reply_from_user", "datetime": "2020-06-23T13:30:45-0400", "from_name": "Justin Campbell", "from_email": "campb303@purdue.edu", "cc": [], "content": ["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"]}], "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": "2020-06-23T13:25:51-0400"}
+    }}>
+     {Template.bind({})}
+    </Story>
+  </Canvas>
+
+
+

src/components/ItemHeaderView/ItemHeaderView.stories.mdx

@@ -0,0 +1,18 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import  ItemHeaderView  from './ItemHeaderView';
+
+The ItemHeader displays item metadata for items of selected queues and allows for filtering by field and opening an item by clicking. Items are passed in as a required parameter. It is to be used with the [ItemTableAppBar](/#/Components/ItemTableAppBar).
+
+It is based on [react-table](https://react-table.tanstack.com/).
+
+<Meta title="Components/ItemHeaderView" component={ItemHeaderView} />
+
+export const Template = (props) => <ItemHeaderView {...props} />
+
+<Canvas>
+  <Story name="Default" args={{
+      data:[{"queue": "ce", "number": 9, "lastUpdated": "09-11-20 12:14 PM", "isLocked": false, "userEmail": "lslusher@purdue.edu", "userName": "Slusher, Laura M", "userAlias": "lslusher", "assignedTo": "bekuma", "subject": "RE: New laptop", "status": "waiting on reply/time to call", "priority": "deploy", "department": "che", "building": "frny", "dateReceived": "2020-03-12T18:07:27+0000"}, {"queue": "ce", "number": 42, "lastUpdated": "09-11-20 12:14 PM", "isLocked": false, "userEmail": "feng293@purdue.edu", "userName": "", "userAlias": "feng293", "assignedTo": "schmid22", "subject": "Upgrade system and Abaqus", "status": "", "priority": "", "department": "", "building": "", "dateReceived": "2020-05-14T10:21:32-0400"}, {"queue": "ce", "number": 51, "lastUpdated": "09-11-20 12:14 PM", "isLocked": false, "userEmail": "jclauso@purdue.edu", "userName": "", "userAlias": "jclauso", "assignedTo": "schmid22", "subject": "ECN privileges for future grad student", "status": "Waiting for reply", "priority": "", "department": "", "building": "", "dateReceived": "2020-05-14T15:03:07-0400"}]
+  }} >
+     {Template.bind({})}
+    </Story>
+  </Canvas>

src/components/ItemMetadataView/ItemMetadataView.stories.mdx

@@ -0,0 +1,17 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import ItemMetadataView from "./ItemMetadataView";
+
+The ItemMetadataView displays the metadata for an item as part of the [ItemView](/#/Components/ItemView).
+
+<Meta title="Components/ItemMetadataView" component={ItemMetadataView} />
+
+export const Template = (props) => <ItemMetadataView {...props} />
+
+<Canvas>
+  <Story name="Default" args={{
+      item:{"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"}
+  }}>
+     {Template.bind({})}
+    </Story>
+</Canvas>
+

src/components/ItemProvider/AuthProvider.stories.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+
+
+The AuthProvider component purpose is to give users access tokens on login and to refresh the tokens at set intervals of time. The users career account login information is used to determine if user can be authenticated.
+<Meta title="AuthProvider" component={AuthProvider} />
+
+export const Template = (props) => <AuthProvider {...props} />
+
+

src/components/ItemProvider/ItemProvider.stories.mdx

@@ -0,0 +1,19 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+
+Utility component that uses [React Contexts](https://reactjs.org/docs/context.html) [React Stateful Variables](https://reactjs.org/docs/hooks-state.html) to provide global access to the active item object.
+
+Two functions are exported:
+
+Function | Descrioption
+- | -
+`useItem` | Returns a reference to the state variable holding the current Item. Defaults to `false`.
+`useItemSetter` | Returns a reference to the state variable update function.
+
+For an in depth explanation of this pattern, see [this GitHub comment](https://github.itap.purdue.edu/ECN/webqueue2/issues/15#issuecomment-341).
+
+
+<Meta title="Components/ItemProvider" />
+
+export const Template = (props) => <ItemProvider {...props} />
+
+

src/components/ItemTable/ItemTable.stories.mdx

@@ -4,7 +4,7 @@ import  ItemTable  from './ItemTable';
 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. Items are passed in as a required parameter. It is to be used with the [ItemTableAppBar](/#/Components/ItemTableAppBar).
 It is based on [react-table](https://react-table.tanstack.com/).
 
-<Meta title="ItemTable" component={ItemTable} />
+<Meta title="Components/ItemTable" component={ItemTable} />
 
 export const Template = (props) => <ItemTable {...props} />
 

src/components/ItemTableAppBar/ItemTableAppBar.stories.mdx

@@ -0,0 +1,32 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import ItemTableAppBar from "./ItemTableAppBar";
+import { ThemeProvider } from "@material-ui/styles";
+
+
+The ItemTableAppBar is the primary toolbar for the [ItemTable](/#/Components/ItemTable). It displays the application title and application wide actions.
+
+<Meta title="Components/ItemTableAppBar" component={ItemTableAppBar}  />
+
+export const Template = (props) => <ItemTableAppBar {...props} />
+
+Default
+
+<Canvas>
+  <Story name="Default" args={{
+      title:"webqueue2",
+      darkmode:false
+  }}>
+     {Template.bind({})}
+    </Story>
+</Canvas>
+
+DarkMode active
+
+<Canvas>
+  <Story name="Dark Mode active" args={{
+      title:"webqueue2",
+      darkmode:true
+  }}>
+     {Template.bind({})}
+    </Story>
+</Canvas>

src/components/ItemTableCell/ItemTableCell.stories.mdx

@@ -0,0 +1,40 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import ItemTableCell from "./ItemTableCell";
+import { Paper } from '@material-ui/core';
+
+The ItemTableCell wraps an [MUI TableCell](https://material-ui.com/api/table-cell/) and adds styling.
+
+
+
+<Meta title="Components/ItemTableCell"
+decorators={[  (Story) => (
+      <Paper>
+        <Story />
+      </Paper>
+    ),]}
+ component={ItemTableCell}/>
+
+export const Template = (props) => <ItemTableCell {...props} />
+
+## Default Usage
+
+<Canvas>
+  <Story name="Default" args={{
+      children:"Hello, moto!",
+  }}>
+     {Template.bind({})}
+    </Story>
+</Canvas>
+
+
+## Forwarded TableCell Props
+Props can be passed to the TableCell component using the TableCellProps prop.
+
+<Canvas>
+  <Story name="With Forwarded props" args={{
+        children:"Hello, moto!",
+        TableCellProps:{ component: Paper, variant: "footer" }
+  }}>
+     {Template.bind({})}
+    </Story>
+</Canvas>

src/components/ItemTableFilter/ItemTableFilter.stories.mdx

@@ -0,0 +1,26 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import ItemTableFilter from "./ItemTableFilter";
+import { Box } from '@material-ui/core';
+
+This ItemTableFilter double as a column header and entry box for filtering in a column. At its core, it is a input element of type search.
+
+<Meta title="Components/ItemTableFilter"
+      decorators={[  (Story) => (
+      <Box width="25%">
+            <Story/>
+      </Box>
+    ),]}
+      component={ItemTableFilter}/>
+
+export const Template = (props) => <ItemTableFilter {...props} />
+
+# Default Usage
+
+<Canvas>
+  <Story name="Default" args={{
+      label:"Search",
+      onChange:() => null
+  }}>
+     {Template.bind({})}
+    </Story>
+</Canvas>