Removed template from Storyboook files to properly render code snippets

src/components/AppView/AppView.stories.mdx

@@ -5,13 +5,11 @@ 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({})}
+     {args => <AppView {...args} />}
     </Story>
 </Canvas>
 

src/components/Assignment/Assignment.stories.mdx

@@ -6,15 +6,12 @@ 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({})}
+     {args => <Assignment {...args} />}
     </Story>
 </Canvas>

src/components/CurrentBreakPoint/CurrentBreakPoint.stories.mdx

@@ -17,11 +17,9 @@ decorators={[  (Story) => (
     ),]}
 component={CurrentBreakPoint} />
 
-export const Template = (props) => <CurrentBreakPoint {...props} decoratots/>
-
 <Canvas>
   <Story name="Default">
-     {Template.bind({})}
+   {args => <CurrentBreakPoint {...args} />}
     </Story>
 </Canvas>
 

src/components/DirectoryInformation/DirectoryInformation.stories.mdx

@@ -3,12 +3,8 @@ 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:{
@@ -27,6 +23,6 @@ export const Template = (props) => <DirectoryInformation {...props} />
       "Subject": "Upgrade system and Abaqus"
 }
   }}>
-     {Template.bind({})}
+     {args => <DirectoryInformation {...args} />}
     </Story>
   </Canvas>

src/components/EmailHeader/EmailHeader.stories.mdx

@@ -5,13 +5,11 @@ 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({})}
+     {args => <EmailHeader {...args} />}
     </Story>
   </Canvas>
 
@@ -25,7 +23,7 @@ With `datetime`, `from_name` and `from_email` props. When `first_name` is passed
         to:[],
         cc:[]
     }}>
-     {Template.bind({})}
+     {args => <EmailHeader {...args} />}
     </Story>
 </Canvas>
 
@@ -49,6 +47,6 @@ You can add to/cc data by passing `to` and `cc` props.
         }
         ]
     }}>
-     {Template.bind({})}
+        {args => <EmailHeader {...args} />}
     </Story>
 </Canvas>

src/components/ItemBodyView/ItemBodyView.stories.mdx

@@ -14,8 +14,6 @@ The ItemBodyView displays the seven actions possible in an item:
 
 <Meta title="Components/ItemBodyView" component={ItemBodyView} />
 
-export const Template = (props) => <ItemBodyView {...props} />
-
 # ItemBodyView Loading Content (Loading)
 
 <Canvas>
@@ -24,7 +22,7 @@ export const Template = (props) => <ItemBodyView {...props} />
   {"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"},
     loading:true
     }}>
-     {Template.bind({})}
+     {args => <ItemBodyView {...args} />}
     </Story>
   </Canvas>
 
@@ -36,7 +34,7 @@ export const Template = (props) => <ItemBodyView {...props} />
   {"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"},
     loading:false
     }}>
-     {Template.bind({})}
+     {args => <ItemBodyView {...args} />}
     </Story>
   </Canvas>
 

src/components/ItemHeaderView/ItemHeaderView.stories.mdx

@@ -7,12 +7,10 @@ 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({})}
+     {args => <ItemHeaderView {...args} />}
     </Story>
   </Canvas>

src/components/ItemMetadataView/ItemMetadataView.stories.mdx

@@ -5,13 +5,11 @@ The ItemMetadataView displays the metadata for an item as part of the [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({})}
+     {args => <ItemMetadataView {...args} />}
     </Story>
 </Canvas>
 

src/components/ItemProvider/ItemProvider.stories.mdx

@@ -14,6 +14,4 @@ For an in depth explanation of this pattern, see [this GitHub comment](https://g
 
 <Meta title="Components/ItemProvider" />
 
-export const Template = (props) => <ItemProvider {...props} />
-
-
+export const Template = (props) => <ItemProvider {...props} />

src/components/ItemTable/ItemTable.stories.mdx

@@ -6,8 +6,6 @@ It is based on [react-table](https://react-table.tanstack.com/).
 
 <Meta title="Components/ItemTable" component={ItemTable} />
 
-export const Template = (props) => <ItemTable {...props} />
-
 # ItemTable Loading Content (Loading)
 
 <Canvas>
@@ -16,7 +14,7 @@ export const Template = (props) => <ItemTable {...props} />
 	rowCanBeSelected:false,
 	loading:true,
     }}>
-    {Template.bind({})}
+    {args => <ItemTable {...args} />}
    </Story>
   </Canvas>
 
@@ -32,6 +30,6 @@ export const Template = (props) => <ItemTable {...props} />
 	rowCanBeSelected:false,
 	loading:false,
     }}>
-    {Template.bind({})}
+   {args => <ItemTable {...args} />}
    </Story>
     </Canvas>

src/components/ItemTableAppBar/ItemTableAppBar.stories.mdx

@@ -16,6 +16,6 @@ export const Template = (props) => <ItemTableAppBar {...props} />
       title:"webqueue2",
       darkmode:false
   }}>
-     {Template.bind({})}
+     {args => <ItemTableAppBar {...args} />}
     </Story>
 </Canvas>

src/components/ItemTableCell/ItemTableCell.stories.mdx

@@ -14,15 +14,13 @@ decorators={[  (Story) => (
     ),]}
  component={ItemTableCell}/>
 
-export const Template = (props) => <ItemTableCell {...props} />
-
 ## Default Usage
 
 <Canvas>
   <Story name="Default" args={{
       children:"Hello, moto!",
   }}>
-     {Template.bind({})}
+     {args => <ItemTableCell {...args} />}
     </Story>
 </Canvas>
 
@@ -35,6 +33,6 @@ Props can be passed to the TableCell component using the TableCellProps prop.
         children:"Hello, moto!",
         TableCellProps:{ component: Paper, variant: "footer" }
   }}>
-     {Template.bind({})}
+     {args => <ItemTableCell {...args} />}
     </Story>
 </Canvas>

src/components/ItemTableFilter/ItemTableFilter.stories.mdx

@@ -12,15 +12,13 @@ This ItemTableFilter double as a column header and entry box for filtering in a
     ),]}
       component={ItemTableFilter}/>
 
-export const Template = (props) => <ItemTableFilter {...props} />
-
 # Default Usage
 
 <Canvas>
   <Story name="Default" args={{
       label:"Search",
       onChange:() => null
   }}>
-     {Template.bind({})}
+     {args => <ItemTableFilter {...args} />}
     </Story>
 </Canvas>