Convert Coffeescript to Babelscript and add ESlint

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ['es2015', 'stage-0']
+}

.eslintrc

@@ -0,0 +1,21 @@
+{
+  "parser": "babel-eslint",
+  "extends": [
+    "eslint-config-airbnb",
+  ],
+  "rules": {
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "no-console": [0],
+    "func-names": [0],
+    "semi": [2, "never"],
+    "no-extra-semi": [2],
+    "space-before-function-paren": [2, "always"],
+    "no-else-return": [0],
+    "space-infix-ops": [0],
+    "react/prefer-es6-class": [0],
+    "react/prefer-stateless-function": [0],
+    "no-underscore-dangle": ["error", { "allow": ["_config"] }],
+    "import/no-unresolved": [0],
+    "global-require": [0]
+  }
+}

Makefile

@@ -10,19 +10,15 @@ release-major:
 	@$(call release,major)
 
 build:
-	@$(BIN)/cjsx -cb -o dist/ src/*
-	@$(BIN)/cjsx -cb -o dist/utils src/utils/*
-	@$(BIN)/cjsx -cb -o dist/components src/components/*
+	npm run build
 	@$(BIN)/webpack
 
 watch:
 	@$(BIN)/webpack-dev-server --hot
 
 publish:
 	git push --tags origin HEAD:master
-	@$(BIN)/cjsx -cb -o dist/ src/*
-	@$(BIN)/cjsx -cb -o dist/utils src/utils/*
-	@$(BIN)/cjsx -cb -o dist/components src/components/*
+	npm run build
 	npm publish
 
 publish-gh-pages:

package.json

@@ -15,9 +15,14 @@
     "lodash": "^4.5.0",
     "modularscale": "^1.0.2",
     "object-assign": "^4.0.1",
+    "react": "^0.14.8",
     "shallow-copy": "0.0.1"
   },
   "devDependencies": {
+    "babel-cli": "^6.9.0",
+    "babel-eslint": "^6.0.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-stage-0": "^6.5.0",
     "chai": "^3.0.0",
     "cjsx-loader": "^2.0.1",
     "coffee-loader": "^0.7.2",
@@ -26,6 +31,11 @@
     "coffee-script": "^1.9.3",
     "css-loader": "^0.21.0",
     "deep-equal": "^1.0.0",
+    "eslint": "^2.11.1",
+    "eslint-config-airbnb": "^9.0.1",
+    "eslint-plugin-import": "^1.8.1",
+    "eslint-plugin-jsx-a11y": "^1.2.3",
+    "eslint-plugin-react": "^5.1.1",
     "immutable": "^3.7.3",
     "jquery": "^2.1.4",
     "mkdirp": "^0.5.1",
@@ -67,6 +77,8 @@
     "url": "https://github.com/KyleAMathews/react-typography.git"
   },
   "scripts": {
-    "watch": "./node_modules/.bin/webpack-dev-server --hot"
+    "build": "babel src --out-dir dist/",
+    "lint": "eslint --ext .js,.jsx --ignore-path .gitignore .",
+    "watch": "babel -w src --out-dir dist/"
   }
 }

src/components/GoogleFont.js

@@ -0,0 +1,32 @@
+import React from 'react'
+
+export default options =>
+  React.createClass({
+    displayName: 'GoogleFont',
+
+    render () {
+      // Create family + styles string
+      let fontsStr = ''
+      const fonts = options.googleFonts.map((font) => {
+        let str = ''
+        str += font.name.split(' ').join('+')
+        str += ':'
+        str += font.styles.join(',')
+
+        return str
+      })
+
+      fontsStr = fonts.join('|')
+
+      if (fontsStr) {
+        return React.DOM.link({
+          href: `//fonts.googleapis.com/css?family=${fontsStr}`,
+          rel: 'stylesheet',
+          type: 'text/css',
+        })
+      } else {
+        return null
+      }
+    },
+  })
+

src/components/TypographyStyle.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+// TODO
+// adding or not adding normalize should be an prop
+
+export default styles =>
+  React.createClass({
+    displayName: 'TypographyStyle',
+
+    render () {
+      return React.DOM.style({
+        id: 'typography.js',
+        dangerouslySetInnerHTML: {
+          __html: styles(),
+        },
+      })
+    },
+  })
+

src/index.js

@@ -0,0 +1,112 @@
+import objectAssign from 'object-assign'
+import verticalRhythm from 'compass-vertical-rhythm'
+import ms from 'modularscale'
+import isObject from 'isobject'
+import copy from 'shallow-copy'
+
+import createStyles from './utils/createStyles'
+
+const createStylesString = function (options) {
+  // Create styles for base theme + each subtheme.
+  let vr = verticalRhythm(options)
+  let styles = createStyles(vr, options)
+
+  if ((options.subThemes != null) && isObject(options.subThemes)) {
+    options.subThemes.forEach((name) => {
+      const theme = options.subThemes[name]
+      vr = verticalRhythm(theme)
+      styles += createStyles(vr, theme, name, options)
+    })
+  }
+
+  return styles
+}
+
+const Typography = function (opts) {
+  const defaults = {
+    baseFontSize: '18px',
+    baseLineHeight: '28.5px',
+    modularScales: [
+      {
+        scale: 'octave',
+      },
+      {
+        scale: 'golden',
+        maxWidth: '768px',
+      },
+    ],
+    googleFonts: [],
+    headerFontFamily: `
+      -apple-system, BlinkMacSystemFont,
+      "Segoe UI", "Roboto", "Oxygen",
+      "Ubuntu", "Cantarell", "Fira Sans",
+      "Droid Sans", "Helvetica Neue", sans-serif;`,
+    bodyFontFamily: 'georgia, serif',
+    headerGray: 20,
+    headerGrayHue: 0,
+    bodyGray: 20,
+    bodyGrayHue: 0,
+    headerWeight: 700,
+    bodyWeight: 400,
+    boldWeight: 700,
+    fontFaces: [],
+  }
+
+  const options = objectAssign(defaults, opts)
+
+  if ((options.subThemes != null) && isObject(options.subThemes)) {
+    options.subThemes.forEach((name) => {
+      const theme = options.subThemes[name]
+      options.subThemes[name] = objectAssign(copy(options), theme, { rhythmUnit: 'px' })
+    })
+  }
+
+  const vr = verticalRhythm(options)
+
+  return ({
+    options,
+    GoogleFont: require('./components/GoogleFont')(options),
+    TypographyStyle: require('./components/TypographyStyle')(() => createStylesString(options)),
+    rhythm: vr.rhythm,
+    createStyles () { return createStylesString(options) },
+    fontSizeToPx: vr.adjustFontSizeTo,
+    fontSizeToMS (scaler) {
+      // TODO detect which modular scale to use based on current screen width.
+      // or better, this should just generate styles and insert them in head
+      // with media queries? Perhaps do something similar to CSS Modules
+      // where this just returns a custom class name that you add to your
+      // component.
+      const baseFont = options.baseFontSize.slice(0, -2)
+      const newFontSize = `${ms(scaler, options.modularScales[0].scale) * baseFont}px`
+      return vr.adjustFontSizeTo(newFontSize)
+    },
+    injectStyles () {
+      if (document) {
+        // Replace existing
+        if (document.getElementById('typography.js')) {
+          const styleNode = document.getElementById('typography.js')
+          styleNode.innerHTML = createStylesString(options)
+        } else {
+          const node = document.createElement('style')
+          node.id = 'typography.js'
+          node.innerHTML = createStylesString(options)
+          document.head.appendChild(node)
+        }
+      }
+    },
+  })
+}
+
+export default Typography
+
+/*
+console.log(Typography({
+  baseFontSize: '16px',
+  subThemes: {
+    blog: {
+      baseFontSize: '18px',
+      bodyFontFamily: 'Open Sans',
+    },
+  },
+}).createStyles())
+*/