docs: update styleguide build and add missing descriptions/examples

fix #64
dictyBase · Nov 30, 2018 · 0f56519 · 0f56519
1 parent 99dd62e
commit 0f56519
Show file tree

Hide file tree

Showing 16 changed files with 16,349 additions and 46,726 deletions.
diff --git a/docs/build/bundle.6afc6367.js → docs/build/bundle.f88a2a79.js b/docs/build/bundle.6afc6367.js → docs/build/bundle.f88a2a79.js
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Genomepage Style Guide</title></head><body><div id="rsg-root"></div><script src="build/bundle.6afc6367.js"></script></body></html>
+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Genomepage Style Guide</title></head><body><div id="rsg-root"></div><script src="build/bundle.f88a2a79.js"></script></body></html>
diff --git a/src/app/routes/Routes.js b/src/app/routes/Routes.js
@@ -12,6 +12,10 @@ import AuthLoader from "features/Authentication/AuthLoader"
 import Logout from "features/Authentication/Logout"
 import PageNotReady from "common/components/PageNotReady"
 
+/**
+ * List of routes used with React Router.
+ */
+
 // Switch is used to only render the first Route that matches the current location
 const Routes = () => (
   <Switch>

diff --git a/src/common/components/ErrorBoundary.js b/src/common/components/ErrorBoundary.js
@@ -4,7 +4,6 @@ import { withStyles } from "@material-ui/core/styles"
 
 import sadDicty from "images/sad-dicty.png"
 
-// eslint-disable-next-line
 const styles = theme => ({
   gridContainer: {
     marginTop: "33px",
@@ -23,6 +22,10 @@ const styles = theme => ({
   },
 })
 
+/**
+ * This is an ErrorBoundary wrapper that catches any JavaScript errors and provides a fallback UI.
+ */
+
 class ErrorBoundary extends Component {
   state = { error: null, errorInfo: null }
 

diff --git a/src/common/components/ErrorPage.js b/src/common/components/ErrorPage.js
@@ -65,7 +65,7 @@ type Props = {
 }
 
 /**
- * General error handling page
+ * General error handling page. It displays different messages based on HTTP status code.
  */
 
 export const ErrorPage = (props: Props) => {

diff --git a/src/common/components/PageHeader.js b/src/common/components/PageHeader.js
@@ -16,6 +16,10 @@ const titleConverter = path => {
   return "Gene Information"
 }
 
+/**
+ * Basic page header for all gene pages.
+ */
+
 const PageHeader = (props: Props) => {
   const { name, match } = props
 

diff --git a/src/common/components/TypographyWrapper.js b/src/common/components/TypographyWrapper.js
@@ -2,6 +2,10 @@
 import React from "react"
 import Typography from "@material-ui/core/Typography"
 
+/**
+ * This is a basic typography wrapper for consistent Material-UI styling.
+ */
+
 const TypographyWrapper = ({ children }: any) => (
   <Typography component="div">{children}</Typography>
 )

diff --git a/src/common/components/panels/LeftDisplay.md b/src/common/components/panels/LeftDisplay.md
@@ -1,3 +1,3 @@
 ```js
-<LeftDisplay title="Molecular Function" />
+<LeftDisplay>Molecular Function</LeftDisplay>
 ```
diff --git a/src/features/Authentication/Login.md b/src/features/Authentication/Login.md
@@ -0,0 +1,10 @@
+```js
+const Provider = require("react-redux").Provider
+const createStore = require("redux").createStore
+const reducers = require("../../app/reducers/rootReducer").default
+
+let store = createStore(reducers)
+;<Provider store={store}>
+  <Login location={{}} />
+</Provider>
+```
diff --git a/src/features/Ontology/InnerGoPanel.md b/src/features/Ontology/InnerGoPanel.md
@@ -1,4 +1,11 @@
 ```js
+const Provider = require("react-redux").Provider
+const createStore = require("redux").createStore
+const reducers = require("../../app/reducers/rootReducer").default
 const data = require("./mockData").data
-;<InnerGoPanel goaData={data} />
+
+let store = createStore(reducers)
+;<Provider store={store}>
+  <InnerGoPanel goaData={data} />
+</Provider>
 ```
diff --git a/src/features/Ontology/OntologyLoader.js b/src/features/Ontology/OntologyLoader.js
@@ -1,3 +1,4 @@
+// @flow
 import React from "react"
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton"
 import AppBar from "@material-ui/core/AppBar"
@@ -22,6 +23,10 @@ const skeletonTheme = createMuiTheme({
   },
 })
 
+/**
+ * Loading screen for GO page
+ */
+
 const OntologyLoader = () => (
   <div>
     <PageHeader />

diff --git a/src/features/Ontology/Table/DisplayTable.md b/src/features/Ontology/Table/DisplayTable.md
@@ -1,4 +1,11 @@
 ```js
+const Provider = require("react-redux").Provider
+const createStore = require("redux").createStore
+const reducers = require("../../../app/reducers/rootReducer").default
 const data = require("../mockData").data
-;<DisplayTable goaData={data} />
+
+let store = createStore(reducers)
+;<Provider store={store}>
+  <DisplayTable goaData={data} />
+</Provider>
 ```
diff --git a/src/features/Summary/Panels/GoaPanelContent.js b/src/features/Summary/Panels/GoaPanelContent.js
@@ -55,6 +55,10 @@ type Props = {
   item: Object,
 }
 
+/**
+ * The content that goes in the right side of the GOA panel on the summary page.
+ */
+
 const GoaPanelContent = (props: Props) => {
   const { item, classes } = props
 

diff --git a/src/features/Summary/SummaryContainer.js b/src/features/Summary/SummaryContainer.js
@@ -33,6 +33,11 @@ type Props = {
   identifier: Boolean,
 }
 
+/**
+ * This is the master container component for the Gene Summary tab.
+ * It generates the list of tabs and panels needed to display and fetches data.
+ */
+
 export class SummaryContainer extends Component<Props> {
   componentDidMount() {
     const { fetchGeneralData, match, identifier } = this.props

diff --git a/src/features/Summary/SummaryLoader.js b/src/features/Summary/SummaryLoader.js
@@ -1,10 +1,15 @@
+// @flow
 import React from "react"
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton"
 import AppBar from "@material-ui/core/AppBar"
 import Tabs from "@material-ui/core/Tabs"
 import Tab from "@material-ui/core/Tab"
 import PageHeader from "common/components/PageHeader"
 
+/**
+ * Loading screen for Summary page
+ */
+
 const SummaryLoader = () => (
   <div>
     <PageHeader />

diff --git a/styleguide.config.js b/styleguide.config.js
@@ -14,6 +14,8 @@ module.exports = {
     "src/common/utils/*.js",
     "src/features/Ontology/utils/*.js",
     "src/features/Ontology/Table/utils/*.js",
+    "src/features/ProteinInformation/*.js",
+    "src/features/ProteinInformation/Tables/*.js",
     "src/styles/*.js",
     "src/index.js",
     "src/registerServiceWorker.js",