JSS Styles rework (#139)

Replace SASS with JSS.

.babelrc

@@ -5,6 +5,7 @@
       "stage-2"
     ],
     "plugins": [
+      "transform-decorators-legacy",
       ["transform-runtime", {
         "helpers": true,
         "polyfill": false,

jest.config.js

@@ -7,8 +7,8 @@ module.exports = {
     'node_modules'
   ],
   moduleNameMapper: {
-    'balloon-css': '<rootDir>/src/__mocks__/styleMock.js',
-    '\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
+    '\\.styles$': '<rootDir>/src/__mocks__/stylesMock.js',
+    '\\.(css|scss)$': 'identity-obj-proxy',
     '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/src/__mocks__/fileMock.js'
   },
   moduleFileExtensions: [

package.json

@@ -49,10 +49,12 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
+    "color": "^1.0.3",
     "copy-to-clipboard": "^3.0.6",
     "history": "^4.6.1",
     "js-yaml": "^3.8.4",
     "json-schema-ref-parser": "^3.1.2",
+    "jss": "^7.1.7",
     "lodash": "^4.17.4",
     "markdown-it": "^8.3.1",
     "prop-types": "^15.5.8",
@@ -62,6 +64,7 @@
     "react-document-title": "^2.0.2",
     "react-dom": "^15.5.4",
     "react-json-view": "^1.8.4",
+    "react-jss": "^6.1.1",
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",
     "react-scrollable-anchor": "^0.4.2",
@@ -72,14 +75,14 @@
     "babel-eslint": "^7.2.1",
     "babel-jest": "^20.0.3",
     "babel-loader": "^7.0.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.5.2",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.23.0",
     "babel-preset-stage-2": "^6.24.1",
     "babel-regenerator-runtime": "^6.5.0",
     "babel-runtime": "^6.23.0",
-    "balloon-css": "^0.4.0",
     "css-loader": "^0.28.4",
     "eslint": "^4.0.0",
     "eslint-config-standard": "^10.2.1",
@@ -90,16 +93,16 @@
     "eslint-plugin-react": "^7.0.1",
     "eslint-plugin-standard": "^3.0.1",
     "file-loader": "^0.11.2",
+    "font-loader": "^0.1.2",
     "fs-extra": "^3.0.1",
     "html-webpack-plugin": "^2.28.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^20.0.4",
     "json-loader": "^0.5.4",
-    "node-sass": "^4.5.1",
     "react-addons-perf": "^15.4.2",
     "react-dev-utils": "^3.0.0",
     "react-test-renderer": "^15.5.4",
     "rimraf": "^2.6.1",
-    "sass-loader": "^6.0.3",
     "style-loader": "^0.18.2",
     "transform-runtime": "^0.0.0",
     "url-loader": "^0.5.9",

src/__mocks__/stylesMock.js

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const styles = (Target) => (props) => <Target {...{ ...props, classes: {} }} />

src/components/BodyContent/BodyContent.js

@@ -1,13 +1,12 @@
 import React, { Component } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-
 import BodySchema from '../BodySchema/BodySchema'
 import BodySchemaSwitcher from '../BodySchemaSwitcher/BodySchemaSwitcher'
 import Example from '../Example/Example'
+import { styles } from './BodyContent.styles'
 
-import './BodyContent.scss'
-
+@styles
 export default class BodyContent extends Component {
   constructor (props) {
     super(props)
@@ -21,11 +20,11 @@ export default class BodyContent extends Component {
   }
 
   render () {
-    const { schema, examples } = this.props
+    const { schema, examples, classes } = this.props
     const { tab, index } = this.state
 
     return (
-      <div className='body-content'>
+      <div className={classes.bodyContent}>
         {schema && this.renderTabs(schema, examples)}
         {tab === 'schema' && this.renderSchema(schema, index)}
         {tab === 'example' && this.renderExamples(examples)}
@@ -35,8 +34,10 @@ export default class BodyContent extends Component {
 
   renderTabs (includeSchema, includeExample) {
     const currentTab = this.state.tab
+    const { classes } = this.props
+
     return (
-      <div className='body-content-tabs'>
+      <div className={classes.tabs}>
         {includeSchema && this.renderSchemaTab(currentTab)}
         {includeExample && this.renderExamplesTab(currentTab)}
       </div>
@@ -109,5 +110,6 @@ export default class BodyContent extends Component {
 
 BodyContent.propTypes = {
   schema: PropTypes.array,
-  examples: PropTypes.array
+  examples: PropTypes.array,
+  classes: PropTypes.object
 }

src/components/BodyContent/BodyContent.styles.js

@@ -0,0 +1,31 @@
+import { createSheet } from '../../theme'
+
+export const styles = createSheet(() => ({
+  'bodyContent': {
+    display: 'table',
+    width: '100%',
+    border: '2px solid black',
+    padding: '10px',
+    boxSizing: 'border-box'
+  },
+
+  'tabs': {
+    position: 'relative',
+    top: '2px',
+
+    '& > div': {
+      display: 'inline-block',
+      padding: '10px 20px 10px 0',
+      borderLeft: 'none',
+      cursor: 'pointer',
+
+      '&$active': {
+        fontWeight: 'bold',
+        borderBottom: 'none',
+        textDecoration: 'underline'
+      }
+    }
+  },
+
+  'active': {}
+}))

src/components/BodySchema/BodySchema.js

@@ -2,11 +2,10 @@ import React, { Component } from 'react'
 import createFragment from 'react-addons-create-fragment'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-
 import Property from '../Property/Property'
+import { styles } from './BodySchema.styles'
 
-import './BodySchema.scss'
-
+@styles
 export default class BodySchema extends Component {
   constructor (props) {
     super(props)
@@ -19,16 +18,15 @@ export default class BodySchema extends Component {
   }
 
   render () {
-    const { properties, styleVariation } = this.props
+    const { properties, styleVariation, classes } = this.props
 
     if (!properties) {
       return null
     }
-
     const { expandedProp } = this.state
 
     return (
-      <table className={classNames('body-schema', `body-schema--${styleVariation}`)}>
+      <table className={classNames(classes.bodySchema, classes[styleVariation])}>
         <tbody>
           {properties.map((property, i) => {
             const isLast = (properties.length === i + 1)
@@ -79,11 +77,13 @@ export default class BodySchema extends Component {
     const { styleVariation } = this.props
     const nextStyleVariation = (styleVariation === 'even') ? 'odd' : 'even'
 
+    // FIXME: this is not componentized
     return (
       <tr className='body-schema-subset'>
         <td colSpan='100'>
           {isArray && <div>Array [</div>}
           <BodySchema
+            {...this.props}
             key={`${property.name}-properties`}
             properties={property.properties}
             styleVariation={nextStyleVariation}
@@ -117,5 +117,6 @@ BodySchema.propTypes = {
   styleVariation: PropTypes.oneOf([
     'odd',
     'even'
-  ])
+  ]),
+  classes: PropTypes.object
 }

src/components/BodySchema/BodySchema.styles.js

@@ -0,0 +1,17 @@
+import { createSheet } from '../../theme'
+
+export const styles = createSheet(() => ({
+  'bodySchema': {
+    width: '100%',
+    borderSpacing: '0',
+    padding: '10px 50px 10px 20px',
+    boxSizing: 'border-box'
+  },
+
+  'even': {
+    backgroundColor: 'rgb(27, 37, 52)'
+  },
+  'odd': {
+    backgroundColor: 'rgb(14, 24, 39)'
+  }
+}))

src/components/BodySchemaSwitcher/BodySchemaSwitcher.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { styles } from './BodySchemaSwitcher.styles'
 
-import './BodySchemaSwitcher.scss'
-
+@styles
 export default class BodySchemaSwitcher extends Component {
   constructor (props) {
     super(props)
@@ -17,12 +17,12 @@ export default class BodySchemaSwitcher extends Component {
   }
 
   render () {
-    const { options } = this.props
+    const { options, classes } = this.props
 
     return (
-      <form className='body-schema-switcher-form'>
+      <form>
         <label>This schema can be fulfilled by multiple options: </label>
-        <select onChange={this.handleChange}>
+        <select className={classes.select} onChange={this.handleChange}>
           {options.map(
             (option, i) => <option key={i} value={i}>{`Option ${i + 1}`}</option>
           )}
@@ -34,5 +34,6 @@ export default class BodySchemaSwitcher extends Component {
 
 BodySchemaSwitcher.propTypes = {
   options: PropTypes.array.isRequired,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  classes: PropTypes.object
 }

src/components/BodySchemaSwitcher/BodySchemaSwitcher.styles.js

@@ -0,0 +1,12 @@
+import { createSheet } from '../../theme'
+
+export const styles = createSheet(() => ({
+  'select': {
+    background: 'transparent',
+    color: 'white',
+    border: '1px solid white',
+    borderRadius: '5px',
+    marginLeft: '15px',
+    fontSize: 'medium'
+  }
+}))

src/components/ContentContainer/ContentContainer.js

@@ -1,18 +1,21 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { styles } from './ContentContainer.styles'
 
-import './ContentContainer.scss'
-
+@styles
 export default class ContentContainer extends Component {
   render () {
+    const { classes } = this.props
+
     return (
-      <div className='content-container'>
+      <div className={classes.contentContainer}>
         {this.props.children}
       </div>
     )
   }
 }
 
 ContentContainer.propTypes = {
-  children: PropTypes.any
+  children: PropTypes.any,
+  classes: PropTypes.object
 }

src/components/ContentContainer/ContentContainer.styles.js

@@ -0,0 +1,7 @@
+import { createSheet } from '../../theme'
+
+export const styles = createSheet(() => ({
+  'contentContainer': {
+    padding: '20px'
+  }
+}))