Merge pull request #223 from ECN/enhancement-modularize-itemtableappb…

…ar-actions Enhancement modularize itemtableappbar actions
ECN · Jul 16, 2021 · a4de881 · a4de881
2 parents fd194f5 + 5443366
commit a4de881
Show file tree

Hide file tree

Showing 19 changed files with 2,778 additions and 2,474 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,12 +50,12 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.1.20",
-    "@storybook/addon-docs": "^6.1.20",
-    "@storybook/addon-essentials": "^6.1.20",
-    "@storybook/addon-links": "^6.1.20",
-    "@storybook/node-logger": "^6.1.20",
+    "@storybook/addon-actions": "6.1.20",
+    "@storybook/addon-docs": "6.1.20",
+    "@storybook/addon-essentials": "6.1.20",
+    "@storybook/addon-links": "6.1.20",
+    "@storybook/node-logger": "6.1.20",
     "@storybook/preset-create-react-app": "^3.1.6",
-    "@storybook/react": "^6.1.20"
+    "@storybook/react": "6.1.20"
   }
 }
diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js
@@ -3,13 +3,17 @@ import PropTypes from "prop-types";
 import { Box, makeStyles, Paper, Typography, useTheme } from "@material-ui/core";
 import { Route } from "react-router-dom";
 import clsx from "clsx";
+import ItemTableAppBarAction from "../ItemTableAppBarAction";
+import DarkModeIcon from '@material-ui/icons/Brightness4';
+import LightModeIcon from '@material-ui/icons/Brightness7';
+import LogoutIcon from '@material-ui/icons/ExitToApp';
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 import ItemTableAppBar from "../ItemTableAppBar/";
 import ItemTable from "../ItemTable/";
 import ItemViewAppBar from "../ItemViewAppBar/";
 import ItemView from "../ItemView/";
 import QueueSelector from "../QueueSelector/";
 import { useToken } from "../AuthProvider/";
-import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 
 export default function AppView({ setDarkMode }) {
 	// Create stateful variables.
@@ -144,10 +148,24 @@ export default function AppView({ setDarkMode }) {
 		);
 	}
 
+	const darkMode = theme.palette.type === "dark"
+	const itemtableappbarActions = [
+		<ItemTableAppBarAction
+			title={"Turn " + (theme.palette.type ? "off" : "on") + " dark mode"}
+			onClick={_ => setDarkMode(!darkMode)}
+			icon={darkMode ? <DarkModeIcon /> : <LightModeIcon />}
+		/>,
+		<ItemTableAppBarAction
+			title="Logout"
+			onClick={_ => alert("Hazzah!")}
+			icon={<LogoutIcon />}
+		/>
+	]
+
 	return (
 		<Box component={Paper} display="flex" square elevation={0}>
 			<Box className={classes.leftCol}>
-				<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
+				<ItemTableAppBar title="webqueue2" actions={itemtableappbarActions} />
 				<QueueSelector
 					open={queueSelectorOpen}
 					setOpen={setQueueSelectorOpen}

diff --git a/src/components/AppView/AppView.stories.mdx b/src/components/AppView/AppView.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import AppView from './AppView';
 
-<Meta 
+<Meta
     title="Components/AppView" 
     component={AppView}
     argTypes={{

diff --git a/src/components/Assignment/Assignment.stories.mdx b/src/components/Assignment/Assignment.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import Assignment from './Assignment';
 
-<Meta 
+<Meta
     title="Components/Assignment" 
     component={Assignment}
     argTypes={{

diff --git a/src/components/AuthProvider/AuthProvider.stories.mdx b/src/components/AuthProvider/AuthProvider.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import AuthProvider from "./AuthProvider";
 
-<Meta 
+<Meta
     title="Components/AuthProvider" 
     component={AuthProvider}
 />

diff --git a/src/components/CurrentBreakPoint/CurrentBreakPoint.stories.mdx b/src/components/CurrentBreakPoint/CurrentBreakPoint.stories.mdx
@@ -4,7 +4,7 @@ import webqueue2Theme from "../../theme.js";
 import CurrentBreakPoint from "./CurrentBreakPoint";
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 
-<Meta 
+<Meta
     title="Components/CurrentBreakpoint"
     component={CurrentBreakPoint}
 />

diff --git a/src/components/DirectoryInformation/DirectoryInformation.stories.mdx b/src/components/DirectoryInformation/DirectoryInformation.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import  DirectoryInformation  from './DirectoryInformation';
 
-<Meta 
+<Meta
     title="Components/DirectoryInformation" 
     component={DirectoryInformation}
     argTypes={{

diff --git a/src/components/EmailHeader/EmailHeader.stories.mdx b/src/components/EmailHeader/EmailHeader.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import  EmailHeader  from './EmailHeader';
 
-<Meta 
+<Meta
     title="Components/EmailHeader" 
     component={EmailHeader}
     argTypes={{

diff --git a/src/components/ItemBodyView/ItemBodyView.stories.mdx b/src/components/ItemBodyView/ItemBodyView.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import ItemBodyView from './ItemBodyView';
 
-<Meta 
+<Meta
     title="Components/ItemBodyView" 
     component={ItemBodyView}
     argTypes={{

diff --git a/src/components/ItemHeaderView/ItemHeaderView.stories.mdx b/src/components/ItemHeaderView/ItemHeaderView.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import ItemHeaderView from './ItemHeaderView';
 
-<Meta 
+<Meta
     title="Components/ItemHeaderView" 
     component={ItemHeaderView}
     argTypes={{

diff --git a/src/components/ItemMetadataView/ItemMetadataView.stories.mdx b/src/components/ItemMetadataView/ItemMetadataView.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import ItemMetadataView from "./ItemMetadataView";
 
-<Meta 
+<Meta
     title="Components/ItemMetadataView" 
     component={ItemMetadataView}
     argTypes={{

diff --git a/src/components/ItemProvider/ItemProvider.stories.mdx b/src/components/ItemProvider/ItemProvider.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import ItemProvider from "./ItemProvider";
 
-<Meta 
+<Meta
     title="Components/ItemProvider" 
     component={ItemProvider}
 />

diff --git a/src/components/ItemTable/ItemTable.stories.mdx b/src/components/ItemTable/ItemTable.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import ItemTable from './ItemTable';
 
-<Meta 
+<Meta
     title="Components/ItemTable"
     component={ItemTable}
     argTypes={{

diff --git a/src/components/ItemTableAppBar/ItemTableAppBar.js b/src/components/ItemTableAppBar/ItemTableAppBar.js
@@ -1,11 +1,10 @@
 import React from "react";
 import PropTypes from 'prop-types';
-import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom, useTheme} from "@material-ui/core"
-import DarkModeIcon from '@material-ui/icons/Brightness4';
-import LightModeIcon from '@material-ui/icons/Brightness7';
+import {makeStyles, Typography, AppBar, Toolbar, useTheme} from "@material-ui/core"
+import ItemTableAppBarAction from "../ItemTableAppBarAction";
 
 
-export default function ItemTableAppBar({ title, setDarkMode }){
+export default function ItemTableAppBar({ title, actions }){
 
 	const theme = useTheme();
 	const useStyles = makeStyles((theme) => ({
@@ -17,9 +16,6 @@ export default function ItemTableAppBar({ title, setDarkMode }){
 		},
 	}));
 	const classes = useStyles(theme);
-	const darkMode = theme.palette.type === "dark"
-
-	const toggleDarkMode = () => setDarkMode(!darkMode);
 
 	return(
 		<>
@@ -29,15 +25,7 @@ export default function ItemTableAppBar({ title, setDarkMode }){
 						{title}
 					</Typography>
 
-					<Tooltip title={"Turn " + (darkMode ? "off" : "on") + " dark mode"} 
-						arrow 
-						onClick={toggleDarkMode} 
-						TransitionComponent={Zoom}
-					>
-						<IconButton color="inherit">
-							{darkMode ? <DarkModeIcon /> : <LightModeIcon />}
-						</IconButton>
-					</Tooltip>
+					{actions}
 				</Toolbar>
 			</AppBar>
 		</>
@@ -47,10 +35,11 @@ export default function ItemTableAppBar({ title, setDarkMode }){
 ItemTableAppBar.propTypes = {
 	/** The title of the app bar. */
 	"title": PropTypes.string,
-	/** Function to toggle darkMode. */
-	"setDarkMode": PropTypes.func.isRequired,
+	/** Array of <a href="/?path=/docs/components-itemtableappbaraction">ItemTableAppBarActions</a>. */
+	"actions": PropTypes.arrayOf(ItemTableAppBarAction),
 };
 
 ItemTableAppBar.defaultProps = {
-	"title": ""
+	"title": "",
+	"actions": []
 };
diff --git a/src/components/ItemTableAppBar/ItemTableAppBar.stories.mdx b/src/components/ItemTableAppBar/ItemTableAppBar.stories.mdx
@@ -1,11 +1,14 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import ItemTableAppBar from "./ItemTableAppBar";
+import ItemTableAppBarAction from "../ItemTableAppBarAction";
+import Filter1Icon from '@material-ui/icons/Filter1';
+import Filter2Icon from '@material-ui/icons/Filter2';
 
-<Meta 
+<Meta
     title="Components/ItemTableAppBar" 
     component={ItemTableAppBar}
     argsTypes={{
-        setDarkMode: {
+        actions: {
             control: {
                 type: "object"
             }
@@ -20,7 +23,31 @@ The ItemTableAppBar is the primary toolbar for the [ItemTable](/?path=/docs/comp
         name="Default" 
         args={{
             title:"webqueue2",
-            setDarkMode: _ => alert("Use the darkmode toggle in the toolbar above.")
+        }}
+    >
+        { args => <ItemTableAppBar {...args} /> }
+    </Story>
+</Canvas>
+
+Actions can be added to the ItemTableAppBar by passing an array of [ItemTableAppBarAction](/?path=/docs/components-itemtableappbaraction) components to the `action` prop. They'll be rendered from left to right in the order their passed.
+
+<Canvas>
+    <Story
+        name="With Actions" 
+        args={{
+            title:"webqueue2",
+            actions: [
+                <ItemTableAppBarAction 
+                    title="First Action" 
+                    onClick={_ => alert("You've triggered to the first aciton,")}
+                    icon={<Filter1Icon />}
+                />,
+                <ItemTableAppBarAction 
+                    title="Second Action" 
+                    onClick={_ => alert("You've triggered to the second aciton,")}
+                    icon={<Filter2Icon />}
+                />
+            ]
         }}
     >
         { args => <ItemTableAppBar {...args} /> }

diff --git a/src/components/ItemTableAppBarAction/ItemTableAppBarAction.js b/src/components/ItemTableAppBarAction/ItemTableAppBarAction.js
@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import {Tooltip, IconButton, Zoom} from "@material-ui/core"
+import DefaultIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+
+export default function ItemTableAppBarAction({title, onClick, icon}) {
+	return (
+		<Tooltip title={title} 
+			arrow 
+			onClick={onClick} 
+			TransitionComponent={Zoom}
+		>
+			<IconButton color="inherit">
+				{icon}
+			</IconButton>
+		</Tooltip>
+	);
+}
+
+ItemTableAppBarAction.propTypes = {
+	/** The title of the action. */
+	"title": PropTypes.string,
+	/** Callback for clicking on action. */
+	"onClick": PropTypes.func.isRequired,
+	/** MUI Icon to go inside an <a href="https://material-ui.com/api/icon-button/">IconButton</a>. */
+	"icon": PropTypes.node
+};
+
+ItemTableAppBarAction.defaultProps = {
+	"title": "",
+	"icon": <DefaultIcon />
+};
diff --git a/src/components/ItemTableAppBarAction/ItemTableAppBarAction.stories.mdx b/src/components/ItemTableAppBarAction/ItemTableAppBarAction.stories.mdx
@@ -0,0 +1,58 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import ItemTableAppBarAction from "./ItemTableAppBarAction";
+import NotificationImportantIcon from '@material-ui/icons/NotificationImportant';
+import ItemTableAppBar from "../ItemTableAppBar";
+
+<Meta
+    title="Components/ItemTableAppBarAction" 
+    component={ItemTableAppBarAction}
+    argsTypes={{
+        onClick: {
+            control: {
+                type: "object"
+            }
+        },
+        icon: {
+            control: {
+                type: "object"
+            }
+        }
+    }}
+/>
+
+The ItemTableAppBarAction provides clickable toggles for global controls like dark mode and logout inside the [ItemTableAppBar](/?path=/docs/components-itemtableappbar). It accepts a title, an `onClick` function and an [MUI Icon](https://material-ui.com/components/material-icons/) element.
+
+<Canvas>
+    <Story
+        name="Default" 
+        args={{
+            title:"Alert User",
+            onClick: _ => alert("The British are coming!"),
+            icon: <NotificationImportantIcon />
+        }}
+    >
+        { args => <ItemTableAppBarAction {...args} /> }
+    </Story>
+</Canvas>
+
+To use the ItemTableAppBarAction in the [ItemTableAppBar](/?path=/docs/components-itemtableappbar), put one or more ItemTableAppBarActions in an array and pass that array to the [ItemTableAppBar](/?path=/docs/components-itemtableappbar).
+
+<Canvas>
+    <Story
+        name="Used In ItemTableAppBar" 
+        args={{
+            title:"Alert User",
+            onClick: _ => alert("The British are coming!"),
+            icon: <NotificationImportantIcon />
+        }}
+    >
+        { args => (
+            <ItemTableAppBar
+                title="webqueue2"
+                actions={[<ItemTableAppBarAction {...args} />]}
+            />
+        )}
+    </Story>
+</Canvas>
+
+<ArgsTable of={ItemTableAppBarAction} />
diff --git a/src/components/ItemTableAppBarAction/index.js b/src/components/ItemTableAppBarAction/index.js
@@ -0,0 +1 @@
+export { default } from "./ItemTableAppBarAction";