diff --git a/docs/Styleguidist TOC Behavior/with indicator.gif b/docs/Styleguidist TOC Behavior/with indicator.gif new file mode 100644 index 0000000..b7d6898 Binary files /dev/null and b/docs/Styleguidist TOC Behavior/with indicator.gif differ diff --git a/docs/Styleguidist TOC Behavior/without Indicator.gif b/docs/Styleguidist TOC Behavior/without Indicator.gif new file mode 100644 index 0000000..afb405e Binary files /dev/null and b/docs/Styleguidist TOC Behavior/without Indicator.gif differ diff --git a/package.json b/package.json index 4d06f6f..b785b26 100644 --- a/package.json +++ b/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" }, diff --git a/src/assets/TeamMemberPictures/Justin.jpg b/src/assets/TeamMemberPictures/Justin.jpg new file mode 100644 index 0000000..84ad109 Binary files /dev/null and b/src/assets/TeamMemberPictures/Justin.jpg differ diff --git a/src/assets/TeamMemberPictures/Tyler.jpg b/src/assets/TeamMemberPictures/Tyler.jpg new file mode 100644 index 0000000..d919d29 Binary files /dev/null and b/src/assets/TeamMemberPictures/Tyler.jpg differ diff --git a/src/components/TeamMemberCard/TeamMemberCard.js b/src/components/TeamMemberCard/TeamMemberCard.js new file mode 100644 index 0000000..832ac6b --- /dev/null +++ b/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( + + {firstName.charAt(0)} + + ); + }; + + return( + + } + title={`${firstName} ${lastName}`} + titleTypographyProps={{ + variant: "h4" + }} + /> + + {children} + + + + + + + + + + ); +}; + +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, +} \ No newline at end of file diff --git a/src/components/TeamMemberCard/TeamMemberCard.md b/src/components/TeamMemberCard/TeamMemberCard.md new file mode 100644 index 0000000..1554351 --- /dev/null +++ b/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'; + + + + 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. + + + 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. + + +``` + +```jsx static + + Some content here. + +``` \ No newline at end of file diff --git a/src/components/TeamMemberCard/index.js b/src/components/TeamMemberCard/index.js new file mode 100644 index 0000000..d951386 --- /dev/null +++ b/src/components/TeamMemberCard/index.js @@ -0,0 +1,3 @@ +import TeamMemberCard from "./TeamMemberCard"; + +export default TeamMemberCard; \ No newline at end of file diff --git a/docs/Styleguidist/Introduction.md b/src/docs/Introduction.md similarity index 100% rename from docs/Styleguidist/Introduction.md rename to src/docs/Introduction.md diff --git a/src/docs/Team.md b/src/docs/Team.md new file mode 100644 index 0000000..04da19e --- /dev/null +++ b/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"; + + + + 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. + + +``` + +```jsx +import { Typography } from "@material-ui/core"; +import TeamMemberCard from "../components/TeamMemberCard/"; +import justinPicture from "../assets/TeamMemberPictures/Justin.jpg"; + + + + + 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 diff --git a/styleguide.config.js b/styleguide.config.js deleted file mode 100644 index 01cfa6a..0000000 --- a/styleguide.config.js +++ /dev/null @@ -1,44 +0,0 @@ -const path = require('path') -module.exports = { - title: "webqueue2 Frontend Docs", - version: "0.0.1", - - // How the example source code is shown. - // [ "collapse", "expand", "hide" ] - // Default: collapse - exampleMode: "collapse", - - // How methods and props are shown. - // [ "collapse", "expand", "hide" ] - // Default: collapse - usageMode: "collapse", - - // Creates separate pages for top level nav items. - // Default: "false" - pagePerSection: true, - - // Styleguide Includes - require: [ - // Material UI Resources - path.join(__dirname, "docs/Styleguidist/material-icon.css"), - path.join(__dirname, "docs/Styleguidist/roboto-font.css"), - ], - - sections: [ - { - name: "Getting Started", - content: "./docs/Styleguidist/Introduction.md", - }, - { - name: "Components", - components: 'src/components/**/[A-Z]*.js', - } - ], - - template: { - favicon: "public/favicon.ico", - }, - - styles: "styleguide.style.js", - theme: "styleguide.theme.js" -} \ No newline at end of file diff --git a/styleguide.style.js b/styleguide.style.js deleted file mode 100644 index 6d3ec97..0000000 --- a/styleguide.style.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - - // Render Area for Componenet Examples - Playground: { - preview: { - backgroundColor: "#efefef", - padding: "1em" - } - }, -} \ No newline at end of file diff --git a/styleguide.theme.js b/styleguide.theme.js deleted file mode 100644 index a6723fb..0000000 --- a/styleguide.theme.js +++ /dev/null @@ -1,4 +0,0 @@ -// See https://github.com/styleguidist/react-styleguidist/blob/master/src/client/styles/theme.ts -module.exports = { - maxWidth: "1400px", -} \ No newline at end of file diff --git a/docs/Styleguidist/material-icon.css b/styleguidist/material-icon.css similarity index 100% rename from docs/Styleguidist/material-icon.css rename to styleguidist/material-icon.css diff --git a/docs/Styleguidist/roboto-font.css b/styleguidist/roboto-font.css similarity index 100% rename from docs/Styleguidist/roboto-font.css rename to styleguidist/roboto-font.css diff --git a/styleguidist/styleguide.config.js b/styleguidist/styleguide.config.js new file mode 100644 index 0000000..f08f9c1 --- /dev/null +++ b/styleguidist/styleguide.config.js @@ -0,0 +1,141 @@ +/** + * React-Styleguideist Configuration Settings + * @author Justin Campbell + * @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 + 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", +} \ No newline at end of file diff --git a/styleguidist/styleguide.style.js b/styleguidist/styleguide.style.js new file mode 100644 index 0000000..f3852b9 --- /dev/null +++ b/styleguidist/styleguide.style.js @@ -0,0 +1,16 @@ +/** + * React-Styleguideist Style Settings + * @author Justin Campbell + * @see https://github.com/styleguidist/react-styleguidist/tree/master/examples/themed + */ + +module.exports = { + + // Render Area for Componenet Examples + Playground: { + preview: { + backgroundColor: "#efefef", + padding: "1em" + } + }, +} \ No newline at end of file diff --git a/styleguidist/styleguide.theme.js b/styleguidist/styleguide.theme.js new file mode 100644 index 0000000..5ae5611 --- /dev/null +++ b/styleguidist/styleguide.theme.js @@ -0,0 +1,8 @@ +/** + * React-Styleguideist Theme Settings + * @author Justin Campbell + * @see https://github.com/styleguidist/react-styleguidist/tree/master/examples/themed + */ +module.exports = { + maxWidth: "1400px", +} \ No newline at end of file