Merge pull request #44 from ECN/improve-styleguidist-integration

Improve styleguidist integration

package.json

@@ -21,8 +21,9 @@
   "scripts": {
     "start:frontend": "react-scripts start",
     "start:api": "cd api/ && venv/bin/gunicorn -b 127.0.0.1:5000 api:app",
-    "start:docs": "npx styleguidist server --open",
-    "build": "react-scripts build",
+    "start:docs": "npx styleguidist server --open --config styleguidist/styleguide.config.js",
+    "build:frontend": "react-scripts build",
+    "build:docs": "npx styleguidist build --config styleguidist/styleguide.config.js",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/components/TeamMemberCard/TeamMemberCard.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import { Card, CardHeader, Avatar, IconButton, CardContent, 
+	CardActions, Typography, Link, makeStyles } from '@material-ui/core';
+import WebsiteIcon from '@material-ui/icons/Language';
+import webqueue2Theme from "../../theme";
+
+export default function TeamMemberCard({firstName, lastName, imageUrl, websiteUrl, children}){
+
+	const theme = webqueue2Theme();
+
+	const useStyles = () => makeStyles({
+		"avatarImageLarge": {
+			width: theme.spacing(2),
+			height: theme.spacing(2)
+		}
+	});
+
+	const classes = useStyles()
+
+	const TeamMemberAvatar = () => {
+		return(
+			<Avatar
+				src={imageUrl}
+				className={classes.avatarImageLarge}
+			>
+				{firstName.charAt(0)}
+			</Avatar>
+		);
+	};
+
+	return(
+			<Card>
+				<CardHeader 
+					avatar={<TeamMemberAvatar />}
+					title={`${firstName} ${lastName}`}
+					titleTypographyProps={{
+						variant: "h4"
+					}}
+				/>
+				<CardContent>
+					{children}
+				</CardContent>
+				<CardActions>
+					<Link href={websiteUrl}>
+						<IconButton>
+							<WebsiteIcon />
+						</IconButton>
+					</Link>
+				</CardActions>
+			</Card>
+	);
+};
+
+TeamMemberCard.propTypes = {
+	/** Team member's first name. */
+	"firstName": PropTypes.string.isRequired,
+	/** Team member's last name. */
+	"lastName": PropTypes.string.isRequired,
+	/** Image for user. Can be a URL or image import. */
+	"imageUrl": PropTypes.string,
+	/** Info that appears in the body of the card. */
+	"content": PropTypes.any,
+	/** URL to team member's website. */
+	"websiteUrl": PropTypes.string.isRequired,
+}

src/components/TeamMemberCard/TeamMemberCard.md

@@ -0,0 +1,30 @@
+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. 
+
+```jsx
+import React, { useState } from "react";
+import { Typography } from '@material-ui/core';
+
+<TeamMemberCard 
+	firstName="Jane" 
+	lastName="Doe"
+	websiteUrl="https://lmgtfy.com/?q=jane+doe"
+>
+	<Typography variant="body1" paragraph>
+		Irure ea dolor do duis dolor. Irure nisi mollit magna consectetur tempor consequat nisi aute reprehenderit esse consequat quis. Qui fugiat cupidatat voluptate eiusmod. Veniam quis et nisi qui cupidatat est est elit exercitation et nostrud deserunt ea. Nulla ex voluptate dolor sint nulla culpa culpa ipsum excepteur laborum nostrud ad.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		Mollit dolore dolore sunt ullamco ex esse ad incididunt elit qui non id voluptate dolor. Ullamco veniam minim quis eu consectetur fugiat ullamco qui anim sit dolor. Ullamco exercitation enim ut aliquip amet dolore aliquip do in occaecat nulla dolor laboris consequat.
+	</Typography>
+</TeamMemberCard>
+```
+
+```jsx static
+<TeamMemberCard 
+	firstName="First" 
+	lastName="Last" 
+	websiteUrl="http://something.com/" 
+	imageUrl="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png"
+>
+	Some content here.
+</TeamMemberCard>
+```

src/components/TeamMemberCard/index.js

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

src/docs/Team.md

@@ -0,0 +1,52 @@
+```jsx
+import { Typography } from "@material-ui/core";
+import TeamMemberCard from "../components/TeamMemberCard/";
+import tylerPicture from "../assets/TeamMemberPictures/Tyler.jpg";
+
+<TeamMemberCard 
+	firstName="Tyler" 
+	lastName="Wright" 
+	imageUrl={tylerPicture}
+	websiteUrl="http://tylerjwright.com/"
+>
+	<Typography variant="body1" paragraph>
+		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.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		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.
+	</Typography>
+</TeamMemberCard>
+```
+
+```jsx
+import { Typography } from "@material-ui/core";
+import TeamMemberCard from "../components/TeamMemberCard/";
+import justinPicture from "../assets/TeamMemberPictures/Justin.jpg";
+
+
+<TeamMemberCard 
+	firstName="Justin" 
+	lastName="Campbell" 
+	imageUrl="https://justincampbell.dev/Justin.jpg"
+	websiteUrl="https://justincampbell.dev/"
+>
+	<Typography variant="body1" paragraph>
+		I humanize technology, bridging the void between computers and the people using them.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		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.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		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.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		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.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		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.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		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!
+	</Typography>
+</TeamMemberCard>
+```

styleguidist/styleguide.config.js

@@ -0,0 +1,141 @@
+/**
+ * React-Styleguideist Configuration Settings
+ * @author Justin Campbell <campb303@purdue.edu>
+ * @see https://react-styleguidist.js.org/docs/configuration
+ */
+const path = require('path')
+
+module.exports = {
+	/**
+	 * The title that appears at the top of the navigation bar.
+	 * @type {string}
+	 * @example webqueue2 Style Guide
+	 * @default <app name from package.json> + Style Guide
+	 */
+	title: "webqueue2 Frontend Docs",
+
+	/**
+	 * Style guide version, displayed under the title in the sidebar.
+	 * @type {number}
+	 */
+	version: "0.0.1",
+
+	/**
+	 * Allows components to be grouped into sections with a title and overview content. 
+	 * Sections can also be content only, with no associated components (for example, a textual introduction). 
+	 * Sections can be nested.
+	 * @type {Array}
+	 * @see https://react-styleguidist.js.org/docs/configuration#sections
+	 */
+	sections: [
+		{
+			name: "Getting Started",
+			content: "../src/docs/Introduction.md",
+		},
+		{
+			name: "Team",
+			content: "../src/docs/Team.md",
+		},
+		{
+			name: "Components",
+			components: '../src/components/**/[A-Z]*.js',
+			sectionDepth: 1,
+		}
+	],
+
+	/**
+	 * Defines the initial state of the example code tab.
+	 * @type {string} "collapse" | "hide" | "expand"
+	 * @default "collapse"
+	 */
+	exampleMode: "collapse",
+
+	/**
+	 * Defines the initial state of the methods/props tab.
+	 * @type {string} "collapse" | "hide" | "expand"
+	 * @default "collapse"
+	 */
+	usageMode: "collapse",
+
+	/**
+	 * Render one section or component per page.
+	 * @type {boolean}
+	 * @default false
+	 */
+	pagePerSection: true,
+
+	/**
+	 * Modules that are required for your style guide.
+	 * @type {string[]}
+	 */
+	require: [
+		// Material UI Resources
+		path.join(__dirname, "./material-icon.css"),
+		path.join(__dirname, "./roboto-font.css"),
+	],
+
+	/**
+	 * Change HTML for the style guide app.
+	 * An object with options to add a favicon, meta tags, inline JavaScript or CSS, etc.
+	 * @type {Object | Function}
+	 */
+	template: {
+		favicon: "public/favicon.ico",
+	},
+
+	/**
+	 * Customize styles of any Styleguidist’s component using 
+	 * an object, a function returning said object or a file path 
+	 * to a file exporting said styles.
+	 * @type {Object | String | Function}
+	 */
+	styles: "styleguide.style.js",
+
+	/**
+	 * Customize style guide UI fonts, colors, etc. 
+	 * using a theme object or the path to a file exporting such object.
+	 * @type {Object | String}
+	 */
+	theme: "styleguide.theme.js",
+
+	/**
+	 * Used to specify a default example if a component doesn't have one.
+	 * Use a boolean to use or not use the default example from Styleguidist.
+	 * Use a string to specify the relative path to your own default example
+	 * written in markdown. `__COMPONENET__` will be replaced with the name of 
+	 * the real component at compile time.
+	 * @type {boolean | String}
+	 * @example "./defaultExample.md"
+	 * @example true 
+	 * @default false
+	 */
+	defaultExample: false,
+
+	/**
+	 * Returns the value of the import statement below a components name.
+	 * @function
+	 * @example import ItemTable from ./component/ItemTable/
+	 * @override
+	 */
+	getComponentPathLine(componentPath) {
+		const name = path.basename(componentPath, '.js')
+		const dir = path.dirname(componentPath)
+		return `import ${name} from '${dir}/';`
+	},
+
+	/**
+	 * Path to output directory for styleguidist build.
+	 * Relative to styleguidist config file.
+	 * @type {string}
+	 * @example "./frontend-docs" // webqueue2/styleguidist/frontend-docs
+	 * @default "./styleguide"
+	 */
+	styleguideDir: "./frontend-docs",
+
+	/**
+	 * Defines if the table of contents sections will behave like an accordion.
+	 * @type {string} "collapse" | "expand"
+	 * @default "expand"
+	 */
+	tocMode: "collapse",
+}

styleguidist/styleguide.style.js

@@ -0,0 +1,16 @@
+/**
+ * React-Styleguideist Style Settings
+ * @author Justin Campbell <campb303@purdue.edu>
+ * @see https://github.com/styleguidist/react-styleguidist/tree/master/examples/themed
+ */
+
+module.exports = {
+
+	// Render Area for Componenet Examples
+	Playground: {
+		preview: {
+			backgroundColor: "#efefef",
+			padding: "1em"
+		}
+	},
+}