diff --git a/src/components/AppView/AppView.stories.mdx b/src/components/AppView/AppView.stories.mdx new file mode 100644 index 0000000..aee0d6e --- /dev/null +++ b/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. + + + +export const Template = (props) => + +# AppView without queue selected + + + + {Template.bind({})} + + + + + diff --git a/src/components/Assignment/Assignment.stories.mdx b/src/components/Assignment/Assignment.stories.mdx new file mode 100644 index 0000000..c83794e --- /dev/null +++ b/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. + + + +export const Template = (props) => + + + + + {Template.bind({})} + + \ No newline at end of file diff --git a/src/components/AuthProvider/AuthProvider.stories.mdx b/src/components/AuthProvider/AuthProvider.stories.mdx new file mode 100644 index 0000000..601e907 --- /dev/null +++ b/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. + + +export const Template = (props) => + + diff --git a/src/components/CurrentBreakPoint/CurrentBreakPoint.stories.mdx b/src/components/CurrentBreakPoint/CurrentBreakPoint.stories.mdx new file mode 100644 index 0000000..8ae90d0 --- /dev/null +++ b/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). + + + ( + + + + ),]} +component={CurrentBreakPoint} /> + +export const Template = (props) => + + + + {Template.bind({})} + + + diff --git a/src/components/DirectoryInformation/DirectoryInformation.stories.mdx b/src/components/DirectoryInformation/DirectoryInformation.stories.mdx new file mode 100644 index 0000000..61c4aa6 --- /dev/null +++ b/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. + + + + +export const Template = (props) => + + + + + {Template.bind({})} + + \ No newline at end of file diff --git a/src/components/EmailHeader/EmailHeader.stories.mdx b/src/components/EmailHeader/EmailHeader.stories.mdx new file mode 100644 index 0000000..50d5e48 --- /dev/null +++ b/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. + + + +export const Template = (props) => + +Default usage, without props. + + + + {Template.bind({})} + + + +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. + + + + {Template.bind({})} + + + +You can add to/cc data by passing `to` and `cc` props. + + + + {Template.bind({})} + + \ No newline at end of file diff --git a/src/components/ItemBodyView/ItemBodyView.stories.mdx b/src/components/ItemBodyView/ItemBodyView.stories.mdx new file mode 100644 index 0000000..3743806 --- /dev/null +++ b/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. + + + + +export const Template = (props) => + +# ItemBodyView Loading Content (Loading) + + + "}, {"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({})} + + + + + diff --git a/src/components/ItemHeaderView/ItemHeaderView.stories.mdx b/src/components/ItemHeaderView/ItemHeaderView.stories.mdx new file mode 100644 index 0000000..921b4e1 --- /dev/null +++ b/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/). + + + +export const Template = (props) => + + + + {Template.bind({})} + + \ No newline at end of file diff --git a/src/components/ItemMetadataView/ItemMetadataView.stories.mdx b/src/components/ItemMetadataView/ItemMetadataView.stories.mdx new file mode 100644 index 0000000..714b3e9 --- /dev/null +++ b/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). + + + +export const Template = (props) => + + + "}, {"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 \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({})} + + + diff --git a/src/components/ItemProvider/AuthProvider.stories.mdx b/src/components/ItemProvider/AuthProvider.stories.mdx new file mode 100644 index 0000000..b8ebee8 --- /dev/null +++ b/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. + + +export const Template = (props) => + + diff --git a/src/components/ItemProvider/ItemProvider.stories.mdx b/src/components/ItemProvider/ItemProvider.stories.mdx new file mode 100644 index 0000000..9f1d7b6 --- /dev/null +++ b/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). + + + + +export const Template = (props) => + + diff --git a/src/components/ItemTable/ItemTable.stories.mdx b/src/components/ItemTable/ItemTable.stories.mdx index 6987d25..c77eabc 100644 --- a/src/components/ItemTable/ItemTable.stories.mdx +++ b/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/). - + export const Template = (props) => diff --git a/src/components/ItemTableAppBar/ItemTableAppBar.stories.mdx b/src/components/ItemTableAppBar/ItemTableAppBar.stories.mdx new file mode 100644 index 0000000..cfa0d4f --- /dev/null +++ b/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. + + + +export const Template = (props) => + +Default + + + + {Template.bind({})} + + + +DarkMode active + + + + {Template.bind({})} + + diff --git a/src/components/ItemTableCell/ItemTableCell.stories.mdx b/src/components/ItemTableCell/ItemTableCell.stories.mdx new file mode 100644 index 0000000..d4d435f --- /dev/null +++ b/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. + + + + ( + + + + ),]} + component={ItemTableCell}/> + +export const Template = (props) => + +## Default Usage + + + + {Template.bind({})} + + + + +## Forwarded TableCell Props +Props can be passed to the TableCell component using the TableCellProps prop. + + + + {Template.bind({})} + + diff --git a/src/components/ItemTableFilter/ItemTableFilter.stories.mdx b/src/components/ItemTableFilter/ItemTableFilter.stories.mdx new file mode 100644 index 0000000..07d3178 --- /dev/null +++ b/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. + + ( + + + + ),]} + component={ItemTableFilter}/> + +export const Template = (props) => + +# Default Usage + + + null + }}> + {Template.bind({})} + + \ No newline at end of file diff --git a/src/components/ItemView/ItemView.stories.mdx b/src/components/ItemView/ItemView.stories.mdx new file mode 100644 index 0000000..9aaa699 --- /dev/null +++ b/src/components/ItemView/ItemView.stories.mdx @@ -0,0 +1,30 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import ItemView from './ItemView'; +import ItemProvider, { useItem, useItemSetter } from "../ItemProvider"; + + +The ItemView is the primary view for an item. It displays the messages and actions in a timeline view. + + + + + +export const Template = () => { + const 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 "}, {"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 \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 setItem = useItemSetter(); + setItem(item); + return( + + + + ); +} + +# ItemView with Valid Item + + + + {Template.bind({})} + + + diff --git a/src/components/ItemViewAppBar/ItemViewAppBar.stories.mdx b/src/components/ItemViewAppBar/ItemViewAppBar.stories.mdx new file mode 100644 index 0000000..6a78e8e --- /dev/null +++ b/src/components/ItemViewAppBar/ItemViewAppBar.stories.mdx @@ -0,0 +1,19 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import ItemViewAppBar from "./ItemViewAppBar"; + +The ItemViewAppBar is the primary toolbar for the [ItemView](/#/Components/ItemView). It displays the item title and action for closing the sidebar. + + + +export const Template = (props) => + +# Default Usage + + + null + }}> + {Template.bind({})} + + \ No newline at end of file diff --git a/src/components/LastUpdatedCell/LastUpdatedCell.stories.mdx b/src/components/LastUpdatedCell/LastUpdatedCell.stories.mdx new file mode 100644 index 0000000..ff532f3 --- /dev/null +++ b/src/components/LastUpdatedCell/LastUpdatedCell.stories.mdx @@ -0,0 +1,37 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import LastUpdatedCell from "./LastUpdatedCell"; + + + +export const Template = (props) => + +# Today + + + + {Template.bind({})} + + + +# Last Week + + + + {Template.bind({})} + + + +# Last Mounth + + + + {Template.bind({})} + + + diff --git a/src/components/LoginForm/LoginForm.stories.mdx b/src/components/LoginForm/LoginForm.stories.mdx new file mode 100644 index 0000000..3e834c4 --- /dev/null +++ b/src/components/LoginForm/LoginForm.stories.mdx @@ -0,0 +1,17 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import LoginForm from "./LoginForm"; + +The LoginForm acts as the only public facing page for the webqueue2. If any part of the app is accessed without access tokens, the user will be redirected here. It takes a username and password, attempts to login and, if successful, sets access tokens and redirects users to webqueue2. + + + +export const Template = (props) => + +# Today + + + + {Template.bind({})} + + + diff --git a/src/components/MessageView/MessageView.stories.mdx b/src/components/MessageView/MessageView.stories.mdx new file mode 100644 index 0000000..f4d9618 --- /dev/null +++ b/src/components/MessageView/MessageView.stories.mdx @@ -0,0 +1,47 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import MessageView from "./MessageView"; + +The MessageView displays an [EmailHeader](/#/Components/EmailHeader) and the content of a message. + + + +export const Template = (props) => + +# Default + + + + {Template.bind({})} + + + +# With Message Data + + + + {Template.bind({})} + + \ No newline at end of file diff --git a/src/components/ParseError/ParseError.stories.mdx b/src/components/ParseError/ParseError.stories.mdx new file mode 100644 index 0000000..3196d03 --- /dev/null +++ b/src/components/ParseError/ParseError.stories.mdx @@ -0,0 +1,24 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import ParseError from "./ParseError"; + +Displays a parsing error. + + + +export const Template = (props) => + +# Today + + + + {Template.bind({})} + + + diff --git a/src/components/PrivateRoute/PrivateRoute.md b/src/components/PrivateRoute/PrivateRoute.stories.mdx similarity index 60% rename from src/components/PrivateRoute/PrivateRoute.md rename to src/components/PrivateRoute/PrivateRoute.stories.mdx index 7f0d5c0..df5a58a 100644 --- a/src/components/PrivateRoute/PrivateRoute.md +++ b/src/components/PrivateRoute/PrivateRoute.stories.mdx @@ -1 +1,9 @@ -The PrivateRoute wraps [React Router](https://reactrouter.com/)'s [Route component](https://reactrouter.com/web/api/Route) and checks for authentication using [AuthProvider](#/Components/AuthProvider). If authentication is valid, the children of the PrivateRoute are rendered. Otherwise, the user is redirected to the login page. \ No newline at end of file +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; + +The PrivateRoute wraps [React Router](https://reactrouter.com/)'s [Route component](https://reactrouter.com/web/api/Route) and checks for authentication using [AuthProvider](#/Components/AuthProvider). If authentication is valid, the children of the PrivateRoute are rendered. Otherwise, the user is redirected to the login page. + + + +export const Template = (props) => + + diff --git a/src/components/QueueSelector/QueueSelector.stories.mdx b/src/components/QueueSelector/QueueSelector.stories.mdx new file mode 100644 index 0000000..ea5d628 --- /dev/null +++ b/src/components/QueueSelector/QueueSelector.stories.mdx @@ -0,0 +1,69 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import QueueSelector from "./QueueSelector"; +import { Box } from '@material-ui/core'; + + +Allows the selection, removal and viewing of active queues. Its extends the [MUI Autocomplete component](https://material-ui.com/components/autocomplete/). + + ( + + + + ),]} + component={QueueSelector}/> + +export const Template = (props) => + +# QueueSelector Default + + + null, + value: [ + { + 'name': 'bidc', + 'number_of_items': 5 + }, + { + 'name': 'epics', + 'number_of_items': 6 + }, + { + 'name': 'wang', + 'number_of_items': 13 + } + ], + setValue:() => null + }}> + {Template.bind({})} + + + +# QueueSelector Open + + + null, + value: [ + { + 'name': 'bidc', + 'number_of_items': 5 + }, + { + 'name': 'epics', + 'number_of_items': 6 + }, + { + 'name': 'wang', + 'number_of_items': 13 + } + ], + setValue:() => null + }}> + {Template.bind({})} + + + diff --git a/src/components/TeamMemberCard/TeamMemberCard.stories.mdx b/src/components/TeamMemberCard/TeamMemberCard.stories.mdx new file mode 100644 index 0000000..40d508f --- /dev/null +++ b/src/components/TeamMemberCard/TeamMemberCard.stories.mdx @@ -0,0 +1,26 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import TeamMemberCard from "./TeamMemberCard"; + + +The TeamMemberCard is used to give a quick summary on people that have worked on webqueue2. It displays a image of the team member, the person's first and last name, a brief professional summary, and a link to their personal portfolio(if applicable). + +If no image is provided the profile image is replaced with the first initial of the team memebers first name. + + + + +export const Template = (props) => + + + +{Template.bind({})} + + + + diff --git a/src/components/TimelineActionCard/TimelineActionCard.stories.mdx b/src/components/TimelineActionCard/TimelineActionCard.stories.mdx new file mode 100644 index 0000000..ef76289 --- /dev/null +++ b/src/components/TimelineActionCard/TimelineActionCard.stories.mdx @@ -0,0 +1,43 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import TimelineActionCard from "./TimelineActionCard"; + + +Renders a card like view for an action with free form text content like an Edit or Reply. + + + +export const Template = (props) => + +# Edit + + + + {Template.bind({})} + + + +# Reply + + + + {Template.bind({})} + + + diff --git a/src/components/TimelineSkeleton/TimelineSkeleton.stories.mdx b/src/components/TimelineSkeleton/TimelineSkeleton.stories.mdx new file mode 100644 index 0000000..0b9469d --- /dev/null +++ b/src/components/TimelineSkeleton/TimelineSkeleton.stories.mdx @@ -0,0 +1,18 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import TimelineSkeleton from "./TimelineSkeleton"; + +Renders a skeleton UI to indicate loading of a timeline item. + + + +export const Template = (props) => + + + + + {Template.bind({})} + + + + + diff --git a/src/components/UserAvatar/UserAvatar.stories.mdx b/src/components/UserAvatar/UserAvatar.stories.mdx new file mode 100644 index 0000000..9311a22 --- /dev/null +++ b/src/components/UserAvatar/UserAvatar.stories.mdx @@ -0,0 +1,40 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import UserAvatar from "./UserAvatar"; + +The UserAvatar displays a graphical representation of a person. + + + +export const Template = (props) => + +## Default Usage +Used without any props, the UserAvatar will display a generic person icon. + + + + {Template.bind({})} + + + +## With A Name +If the `name` prop is passed, the UserAvatar will display the first letter of the name. + + + + {Template.bind({})} + + + +## Other Props +All props other than `name` are passed to the underlying [MUI Avatar component](https://material-ui.com/api/avatar/). + + + + {Template.bind({})} + + \ No newline at end of file diff --git a/src/docs/Team.stories.mdx b/src/docs/Team.stories.mdx new file mode 100644 index 0000000..6a36151 --- /dev/null +++ b/src/docs/Team.stories.mdx @@ -0,0 +1,51 @@ +import { Typography } from "@material-ui/core"; +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import { Box } from '@material-ui/core'; +import TeamMemberCard from "../components/TeamMemberCard/"; +import tylerPicture from "../assets/TeamMemberPictures/Tyler.jpg"; + + + + + + + Hello, my name is Tyler Wright. I am a senior studying web programming and design with a minor in communications from Indianapolis, Indiana. Some of the things that I enjoy outside of web development are cooking, playing video games, and collecting sneakers. I am interested in this project because I want to further develop my front-end web development skills and get a feeling for what it’s like working on projects in a professional setting. + + + When it comes to this project, I hope to create a functional, easy to use, and beautiful front end that helps to make the end user’s experience great. We plan to accomplish this by using React.js which is a technology that is very prevalent in web development currently. By the end of the capstone project hope to have learned new skills that help me post-graduation and experience working in a professional setting. + + + + + + + + I humanize technology, bridging the void between computers and the people using them. + + + I was born legally blind and from early childhood I’ve been drawn to computers. They make the world accessible where it wouldn’t be otherwise. Computers provide infinite possibilities for me to interact with the world and change it. My elementary school pastime was tinkering with tech (and fixing what I broke before my parents found out.) In middle school I started an IT consulting business and by high school I had my first contract work with a growing list of clients. + + + When I started college at Purdue, I’d already spent 8 years studying and working with databases, web servers, file sharing servers, virtualization, containers and orchestration, Linux server administration, network management, staff training and more. I knew how these things worked and where some of the pain points were. I started contributing to open source projects to help smooth those same pain points and found a new passion in technology: user experience and interface design. + + + I started at Purdue in UI/UX. Two years later I transitioned to Cybersecurity, spent some time in Computer Information Technology and landed in Web Development where I am now. This is my fifth and final year at Purdue (I like to call it a victory lap.) While finishing my degree I’m working with Purdue’s Engineering Computer Network advocating for our users and improving our workflow by developing internal tools. My latest project is a new ticketing system built with ReactJS, and Flask-RESTful. + + + When asked what I do, I don’t tell people I work in IT, rather, I tell them I humanize technology. This is because the purpose of IT is not deploying the latest and greatest software, rather, it is about meeting users’ needs and enabling their work. People need to create, communicate and collaborate; their ability to do that work is more important than what systems enable it. + + + I love what I do. I get to advocate for my teammates and the users who rely on us every day. I also love new experiences and I’m looking for those now. Let me know how I can help you and your team get their work done! + + + \ No newline at end of file