Add styleguide to workspace

- Move OperatorUI theme
- Move OperatorUI TimeAgo, Tooltip, Logo & Image
- Move OperatorUI shared cards

operator_ui/__tests__/components/KeyValueList.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from 'enzyme'
-import KeyValueList from 'components/KeyValueList'
+import KeyValueList from '@chainlink/styleguide/components/KeyValueList'
 
 describe('components/KeyValueList', () => {
   it('can display a title', () => {

operator_ui/package.json

@@ -24,6 +24,7 @@
     "@babel/preset-stage-2": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
     "@babel/register": "^7.0.0",
+    "@chainlink/styleguide": "0.0.0",
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.1",
     "@types/node": "^11.9.5",

operator_ui/src/components/Cards/TokenBalance.js

@@ -2,9 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import numeral from 'numeral'
 import { BigNumber } from 'bignumber.js'
-import StyledTooltip from 'components/Tooltip'
 import Typography from '@material-ui/core/Typography'
-import PaddedCard from 'components/PaddedCard'
+import PaddedCard from '@chainlink/styleguide/components/PaddedCard'
+import Tooltip from '@chainlink/styleguide/components/Tooltip'
 
 const WEI_PER_TOKEN = new BigNumber(10 ** 18)
 
@@ -44,9 +44,9 @@ const TokenBalance = props => {
         {props.title}
       </Typography>
       <Typography variant="body1" color="textSecondary">
-        <StyledTooltip title={tooltip} placement="left">
+        <Tooltip title={tooltip} placement="left">
           <span>{val}</span>
-        </StyledTooltip>
+        </Tooltip>
       </Typography>
     </PaddedCard>
   )

operator_ui/src/components/Dashboards/RecentActivity.js

@@ -10,9 +10,9 @@ import TableRow from '@material-ui/core/TableRow'
 import Button from 'components/Button'
 import CardContent from '@material-ui/core/CardContent'
 import Card from '@material-ui/core/Card'
+import TimeAgo from '@chainlink/styleguide/components/TimeAgo'
 import ReactStaticLinkComponent from 'components/ReactStaticLinkComponent'
 import Link from 'components/Link'
-import TimeAgo from 'components/TimeAgo'
 import StatusIcon from 'components/JobRuns/StatusIcon'
 import NoContentLogo from 'components/Logos/NoContent'
 

operator_ui/src/components/JobRuns/List.js

@@ -1,16 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 import { withStyles } from '@material-ui/core/styles'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import Typography from '@material-ui/core/Typography'
 import TableRow from '@material-ui/core/TableRow'
 import TableCell from '@material-ui/core/TableCell'
 import Card from '@material-ui/core/Card'
+import TimeAgo from '@chainlink/styleguide/components/TimeAgo'
 import Link from 'components/Link'
-import TimeAgo from 'components/TimeAgo'
 import ReactStaticLinkComponent from '../ReactStaticLinkComponent'
-import classNames from 'classnames'
 import Button from 'components/Button'
 import titleize from 'utils/titleize'
 

operator_ui/src/components/JobRuns/StatusCard.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
-import PaddedCard from 'components/PaddedCard'
+import PaddedCard from '@chainlink/styleguide/components/PaddedCard'
 import StatusIcon from 'components/JobRuns/StatusIcon'
 import Typography from '@material-ui/core/Typography'
 import classNames from 'classnames'

operator_ui/src/components/Jobs/List.js

@@ -9,10 +9,10 @@ import TableHead from '@material-ui/core/TableHead'
 import TableRow from '@material-ui/core/TableRow'
 import TablePagination from '@material-ui/core/TablePagination'
 import Typography from '@material-ui/core/Typography'
+import TimeAgo from '@chainlink/styleguide/components/TimeAgo'
 import { formatInitiators } from 'utils/jobSpecInitiators'
 import TableButtons, { FIRST_PAGE } from 'components/TableButtons'
 import Link from 'components/Link'
-import TimeAgo from 'components/TimeAgo'
 
 const renderBody = (jobs, error) => {
   if (error) {

operator_ui/src/components/Jobs/RecentlyCreated.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
 import Typography from '@material-ui/core/Typography'
 import Grid from '@material-ui/core/Grid'
 import TableCell from '@material-ui/core/TableCell'
 import TableRow from '@material-ui/core/TableRow'
-import TimeAgo from 'components/TimeAgo'
+import SimpleListCard from '@chainlink/styleguide/components/Cards/SimpleList'
+import SimpleListCardItem from '@chainlink/styleguide/components/Cards/SimpleListItem'
+import TimeAgo from '@chainlink/styleguide/components/TimeAgo'
 import Link from 'components/Link'
-import SimpleListCard from 'components/Cards/SimpleList'
-import SimpleListCardItem from 'components/Cards/SimpleListItem'
-import { withStyles } from '@material-ui/core/styles'
 
 const styles = () => ({
   block: { display: 'block' },

operator_ui/src/components/Jobs/RegionalNav.js

@@ -12,7 +12,7 @@ import Link from 'components/Link'
 import ReactStaticLinkComponent from 'components/ReactStaticLinkComponent'
 import CopyJobSpec from 'components/CopyJobSpec'
 import ErrorMessage from 'components/Notifications/DefaultError'
-import TimeAgo from 'components/TimeAgo'
+import TimeAgo from '@chainlink/styleguide/components/TimeAgo'
 import jobSpecDefinition from 'utils/jobSpecDefinition'
 import { isWebInitiator } from 'utils/jobSpecInitiators'
 import { fetchJob, createJobRun } from 'actions'

operator_ui/src/components/Logos/Hexagon.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Logo from '../Logo'
+import Logo from '@chainlink/styleguide/components/Logo'
 import src from '../../images/icon-logo-blue.svg'
 
 const Hexagon = props => {

operator_ui/src/components/Logos/Main.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Logo from '../Logo'
+import Logo from '@chainlink/styleguide/components/Logo'
 import src from '../../images/chainlink-operator-logo.svg'
 
 const Main = props => {

operator_ui/src/components/Logos/NoContent.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Logo from '../Logo'
+import Logo from '@chainlink/styleguide/components/Logo'
 import src from '../../images/no-activity-icon.svg'
 
 const NoContent = props => {

operator_ui/src/containers/Configuration.js

@@ -4,8 +4,8 @@ import { useHooks, useEffect } from 'use-react-hooks'
 import { connect } from 'react-redux'
 import Grid from '@material-ui/core/Grid'
 import Typography from '@material-ui/core/Typography'
-import PaddedCard from 'components/PaddedCard'
-import KeyValueList from 'components/KeyValueList'
+import PaddedCard from '@chainlink/styleguide/components/PaddedCard'
+import KeyValueList from '@chainlink/styleguide/components/KeyValueList'
 import Content from 'components/Content'
 import DeleteJobRuns from 'containers/Configuration/DeleteJobRuns'
 import { fetchConfiguration } from 'actions'

operator_ui/src/containers/Configuration/DeleteJobRuns.js

@@ -3,7 +3,7 @@ import { withStyles } from '@material-ui/core/styles'
 import { useHooks, useState } from 'use-react-hooks'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import PaddedCard from 'components/PaddedCard'
+import PaddedCard from '@chainlink/styleguide/components/PaddedCard'
 import Divider from '@material-ui/core/Divider'
 import Typography from '@material-ui/core/Typography'
 import Button from 'components/Button'

operator_ui/src/containers/JobRuns/ShowJson.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import { useHooks, useEffect } from 'use-react-hooks'
 import { withStyles } from '@material-ui/core/styles'
 import Grid from '@material-ui/core/Grid'
-import PaddedCard from 'components/PaddedCard'
+import PaddedCard from '@chainlink/styleguide/components/PaddedCard'
 import PrettyJson from 'components/PrettyJson'
 import matchRouteAndMapDispatchToProps from 'utils/matchRouteAndMapDispatchToProps'
 import { fetchJobRun } from 'actions'

operator_ui/src/containers/Jobs/Show.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Grid from '@material-ui/core/Grid'
 import Card from '@material-ui/core/Card'
+import KeyValueList from '@chainlink/styleguide/components/KeyValueList'
+import CardTitle from '@chainlink/styleguide/components/Cards/Title'
 import JobRunsList from 'components/JobRuns/List'
-import KeyValueList from 'components/KeyValueList'
 import Content from 'components/Content'
 import RegionalNav from 'components/Jobs/RegionalNav'
-import CardTitle from 'components/Cards/Title'
 import { fetchJob } from 'actions'
 import jobSelector from 'selectors/job'
 import jobRunsByJobIdSelector from 'selectors/jobRunsByJobId'

operator_ui/src/containers/Transactions/Show.js

@@ -2,8 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { useHooks, useEffect } from 'use-react-hooks'
+import KeyValueList from '@chainlink/styleguide/components/KeyValueList'
 import Content from 'components/Content'
-import KeyValueList from 'components/KeyValueList'
 import { fetchTransaction } from 'actions'
 import transactionSelector from 'selectors/transaction'
 import matchRouteAndMapDispatchToProps from 'utils/matchRouteAndMapDispatchToProps'

operator_ui/src/index.js

@@ -5,9 +5,8 @@ import JavascriptTimeAgo from 'javascript-time-ago'
 import en from 'javascript-time-ago/locale/en'
 import { AppContainer } from 'react-hot-loader'
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
-
-import App from 'App'
-import theme from 'theme'
+import theme from '@chainlink/styleguide/theme'
+import App from './App'
 
 promiseFinally.shim(Promise)
 

operator_ui/support/test-helpers/mountWithTheme.js

@@ -9,7 +9,7 @@ import {
   createMuiTheme,
   createGenerateClassName
 } from '@material-ui/core/styles'
-import theme from 'theme'
+import theme from '@chainlink/styleguide/theme'
 import createStore from 'connectors/redux'
 
 const sheetsRegistry = new SheetsRegistry()

package.json

@@ -6,10 +6,10 @@
     "evm/box",
     "operator_ui",
     "integration",
+    "styleguide",
     "examples/*"
   ],
   "scripts": {
-    "styleguide": "start-storybook -p 9001 -c styleguide",
     "lint:fix": "eslint --fix --color --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "lint:styleguide": "eslint --color --ext .js --ext .jsx --ext .ts --ext .tsx ./styleguide",
     "lint:operator-ui": "eslint --color --ext .js --ext .jsx --ext .ts --ext .tsx ./gui",
@@ -27,7 +27,6 @@
     "@babel/preset-stage-2": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
     "@babel/register": "^7.0.0",
-    "@storybook/react": "4.0.9",
     "@types/mocha": "^5.2.0",
     "@typescript-eslint/parser": "^1.6.0",
     "babel-eslint": "^10.0.1",
@@ -60,7 +59,6 @@
     "solc": "0.4.24",
     "solidity-cborutils": "^1.0.4",
     "solium-plugin-zeppelin": "^0.0.2",
-    "storybook-addon-material-ui": "^0.9.0-alpha.16",
     "truffle": "^5.0.1",
     "truffle-contract": "^4.0.11",
     "truffle-flattener": "^1.3.0",

styleguide/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'

styleguide/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react'
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /\.stories\.js$/)
+function loadStories() {
+  req.keys().forEach(filename => req(filename))
+}
+
+configure(loadStories, module)

styleguide/README.md

@@ -0,0 +1,5 @@
+# Chainlink Styleguide
+
+```bash
+yarn workspace @chainlink/styleguide run start
+```

operator_ui/src/components/Cards/SimpleList.js → styleguide/components/Cards/SimpleList.jsx

@@ -2,14 +2,14 @@ import React from 'react'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import Card from '@material-ui/core/Card'
-import CardTitle from 'components/Cards/Title'
+import CardTitle from './Title'
 
 const SimpleList = ({ children, title }) => {
   return (
     <Card>
       <CardTitle>{title}</CardTitle>
 
-      <Table style={{tableLayout: 'fixed'}}>
+      <Table style={{ tableLayout: 'fixed' }}>
         <TableBody>{children}</TableBody>
       </Table>
     </Card>

operator_ui/src/components/KeyValueList.js → styleguide/components/KeyValueList.jsx

@@ -7,8 +7,8 @@ import TableCell from '@material-ui/core/TableCell'
 import TableHead from '@material-ui/core/TableHead'
 import TableRow from '@material-ui/core/TableRow'
 import Typography from '@material-ui/core/Typography'
-import CardTitle from 'components/Cards/Title'
 import { titleCase } from 'change-case'
+import CardTitle from './Cards/Title'
 
 const renderKey = (k, titleize) => (titleize ? titleCase(k) : k)
 

operator_ui/src/components/Logo.js → styleguide/components/Logo.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import pick from 'lodash/pick'
-import Image from './Image'
 import { withStyles } from '@material-ui/core/styles'
+import Image from './Image'
 
 const styles = theme => {
   return {

operator_ui/src/components/TimeAgo.js → styleguide/components/TimeAgo.jsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import TimeAgoNoTooltip from 'react-time-ago/no-tooltip'
-import StyledTooltip from 'components/Tooltip'
+import Tooltip from './Tooltip'
 
 const TimeAgo = ({ children }) => (
-  <StyledTooltip title={children}>
+  <Tooltip title={children}>
     <span>
       <TimeAgoNoTooltip tooltip={false}>
         {Date.parse(children)}
       </TimeAgoNoTooltip>
     </span>
-  </StyledTooltip>
+  </Tooltip>
 )
 
 export default TimeAgo

operator_ui/src/components/Tooltip.js → styleguide/components/Tooltip.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
-import Tooltip from '@material-ui/core/Tooltip'
+import MuiTooltip from '@material-ui/core/Tooltip'
 
 const styles = theme => ({
   lightTooltip: {
@@ -11,12 +11,12 @@ const styles = theme => ({
   }
 })
 
-const StyledTooltip = ({ title, children, classes }) => {
+const Tooltip = ({ title, children, classes }) => {
   return (
-    <Tooltip title={title} classes={{ tooltip: classes.lightTooltip }}>
+    <MuiTooltip title={title} classes={{ tooltip: classes.lightTooltip }}>
       {children}
-    </Tooltip>
+    </MuiTooltip>
   )
 }
 
-export default withStyles(styles)(StyledTooltip)
+export default withStyles(styles)(Tooltip)

styleguide/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@chainlink/styleguide",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "start-storybook -p 9001",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {
+    "react-time-ago": "^3.0.3",
+    "prop-types": "^15.6.2",
+    "lodash": "^4.17.0",
+    "bignumber.js": "^8.0.1",
+    "numeral": "^2.0.6",
+    "change-case": "^3.0.2"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^4.0.0",
+    "@storybook/addon-links": "^4.0.0",
+    "@storybook/addons": "^4.0.0",
+    "@storybook/react": "^4.0.0",
+    "storybook-addon-material-ui": "^0.9.0-alpha.16"
+  }
+}

styleguide/stories/buttons/index.js → styleguide/stories/buttons.stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react'
 import { muiTheme } from 'storybook-addon-material-ui'
 import { createMuiTheme } from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button'
-import theme from '../../../operator_ui/src/theme'
+import theme from '../theme'
 
 const customTheme = createMuiTheme(theme)