feat(css): enable using jss instead of using css asset

Author: jedwards1211

.flowconfig

@@ -2,6 +2,7 @@
 <PROJECT_ROOT>/lib/.*
 .*/node_modules/.*/tests?/.*\.json
 .*/node_modules/fbjs/.*
+.*/node_modules/jss/.*
 
 [include]
 ./src

.npmignore

@@ -8,4 +8,5 @@ coverage
 node_modules
 test
 stories
+scripts
 

.storybook/webpack.config.js

@@ -8,6 +8,13 @@
 Not another carousel; a simpler component that animates horizontal slide transitions between steps of a wizard or levels
 of a drilldown.
 
+# Table of Contents
+
+- [Usage](#usage)
+- [Using `react-jss` instead of `react-view-slider.css`](#using-react-jss-instead-of-react-view-slidercss)
+- [Props](#props)
+- [`withTransitionContext`](#withtransitioncontext)
+
 ## Usage
 
 ```sh
@@ -47,6 +54,17 @@ ReactDOM.render(
 )
 ```
 
+## Using `react-jss` instead of `react-view-slider.css`
+
+```js
+import React from 'react'
+import BaseViewSlider from 'react-view-slider'
+import viewSliderStyles from 'react-view-slider/lib/styles'
+import injectSheet from 'react-jss'
+
+const ViewSlider = injectSheet(viewSliderStyles)(BaseViewSlider)
+```
+
 ## Props
 
 ### `renderPage: (props: PageProps) => React.Element<any>` **(required)**
@@ -108,6 +126,17 @@ Any extra class names to add to the inner "viewport" element.
 
 Extra inline styles to add to the inner "viewport" element.
 
+### `classes: {root: string, viewport: string, fillParent: string, page: string}`
+
+The `className`s for the various elements `ViewSlider` renders:
+- `root` is the root `div`
+- `viewport` is the `div` inside `root` that animates horizontally
+- `fillParent` is the `className` applied to the root `div` if the `fillParent` property is `true`
+- `page` is the `className` passed to `renderPage`
+
+By default, they match those in `lib/react-view-slider.css`.
+Otherwise, you can [use `react-jss` to inject `classes`](#using-react-jss-instead-of-react-view-slidercss).
+
 ## `withTransitionContext`
 
 ```js

README.md

@@ -4,21 +4,22 @@
   "description": "animates horizontal slide transitions between steps of a wizard or levels of a drilldown",
   "main": "lib/index.js",
   "scripts": {
-    "lint": "eslint src test stories",
-    "lint:fix": "eslint --fix src test stories",
-    "lint:watch": "esw --watch src test stories",
+    "lint": "eslint src test scripts stories",
+    "lint:fix": "eslint --fix src test scripts stories",
+    "lint:watch": "esw --watch src test scripts stories",
     "flow": "flow",
     "flow:coverage": "for file in src/**.js test/**.js; do echo $file; flow coverage $file; done",
     "flow:watch": "flow-watch -e js,js.flow,flowconfig --ignore lib/ --ignore node_modules/ --watch .flowconfig --watch src/ --watch test/",
     "gen-flow-files": "flow gen-flow-files src/ --out-dir lib",
     "copy-flow-files": "cd src; copy *.js.flow **/*.js.flow ../lib",
-    "build": "rimraf lib && babel src --out-dir lib && node-sass src --output lib",
+    "build:css": "babel-node scripts/buildCss.js",
+    "build": "rimraf lib && npm run build:css && babel src --out-dir lib && npm run copy-flow-files",
     "test": "NODE_ENV=production BABEL_ENV=test nyc --reporter=lcov --reporter=text mocha $npm_package_config_mocha",
     "test:watch": "mocha --watch $npm_package_config_mocha",
     "commitmsg": "validate-commit-msg",
     "precommit": "npm run lint && flow",
     "prepush": "npm test",
-    "prepublish": "npm run lint && flow && npm test && npm run build && npm run copy-flow-files",
+    "prepublish": "rimraf lib && npm run build:css && npm run lint && flow && npm test && babel src --out-dir lib && npm run copy-flow-files",
     "open:coverage": "open coverage/lcov-report/index.html",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post",
     "storybook": "start-storybook -p 6006",
@@ -75,7 +76,6 @@
     "chai": "^3.5.0",
     "copy": "^0.3.0",
     "coveralls": "^2.11.16",
-    "css-loader": "^0.28.4",
     "delay": "^2.0.0",
     "enzyme": "^2.7.0",
     "eslint": "^3.13.1",
@@ -88,19 +88,19 @@
     "istanbul": "^0.4.5",
     "jsdom": "^10.1.0",
     "jsdom-global": "^3.0.2",
+    "jss": "^8.1.0",
+    "jss-nested": "^5.0.0",
     "mocha": "^3.2.0",
-    "node-sass": "^4.5.3",
     "nyc": "^10.1.2",
     "react": "^15.4.2",
     "react-addons-test-utils": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-hot-loader": "^3.0.0-beta.2",
+    "react-jss": "^6.1.1",
     "react-transition-context": "^1.0.0-beta9",
     "rimraf": "^2.5.4",
-    "sass-loader": "^6.0.6",
     "semantic-release": "^6.3.6",
     "sinon": "^2.3.5",
-    "style-loader": "^0.18.2",
     "validate-commit-msg": "^2.8.2"
   },
   "peerDependencies": {

package.json

@@ -0,0 +1,6 @@
+{
+  "env": {
+    "es6": true,
+    "node": true
+  }
+}

scripts/.eslintrc

@@ -0,0 +1,32 @@
+#!/usr/bin/env babel-node
+
+import jss from 'jss'
+import nested from 'jss-nested'
+import fs from 'fs'
+import path from 'path'
+
+jss.use(nested())
+
+import styles from '../src/styles'
+
+const sheet = jss.createStyleSheet(styles)
+
+const src = path.resolve(__dirname, '..', 'src')
+const lib = path.resolve(__dirname, '..', 'lib')
+
+try {
+  fs.statSync(lib)
+} catch (error) {
+  fs.mkdirSync(lib)
+}
+
+fs.writeFileSync(
+  path.resolve(src, 'defaultClasses.js'),
+  '/* eslint-disable */\nmodule.exports = ' + JSON.stringify(sheet.classes) + '\n',
+  'utf8'
+)
+console.error('src/styles.js -> src/defaultClasses.js') // eslint-disable-line no-console
+
+fs.writeFileSync(path.resolve(lib, 'react-view-slider.css'), sheet.toString(), 'utf8')
+console.error('src/styles.js -> lib/react-view-slider.css') // eslint-disable-line no-console
+

scripts/buildCss.js

@@ -1,5 +1,6 @@
 {
   "env": {
-    "es6": true
+    "es6": true,
+    "commonjs": true
   }
 }

src/.eslintrc

@@ -6,6 +6,7 @@ import classNames from 'class-names'
 import Prefixer from 'inline-style-prefixer'
 import getNodeDimensions from 'get-node-dimensions'
 import range from 'lodash.range'
+import defaultClasses from './defaultClasses'
 
 type TransitionState = 'in' | 'out' | 'entering' | 'leaving'
 
@@ -26,6 +27,14 @@ export type DefaultProps = {
   prefixer: Prefixer,
   style: Object,
   viewportStyle: Object,
+  classes: Classes,
+}
+
+export type Classes = {
+  root: string,
+  viewport: string,
+  page: string,
+  fillParent: string,
 }
 
 export type Props = {
@@ -38,6 +47,7 @@ export type Props = {
   prefixer: Prefixer,
   fillParent?: boolean,
   className?: string,
+  classes: Classes,
   style: Object,
   viewportClassName?: string,
   viewportStyle: Object,
@@ -63,6 +73,7 @@ export default class ViewSlider extends Component<DefaultProps, Props, State> {
     prefixer: new Prefixer(),
     style: {},
     viewportStyle: {},
+    classes: defaultClasses,
   }
   state: State = {
     height: undefined,
@@ -134,18 +145,19 @@ export default class ViewSlider extends Component<DefaultProps, Props, State> {
   }
 
   renderPage: (index: number) => React.Element<any> = (index: number): React.Element<any> => {
-    const {fillParent} = this.props
+    const {fillParent, classes} = this.props
     const {activePage, transitioning} = this.state
+
     // when not transitioning, render empty placeholder divs before the active page to push it into the right
     // horizontal position
     if (!transitioning && activePage !== index) {
-      return <div key={index} className="react-view-slider__page"></div>
+      return <div key={index} className={classes.page}></div>
     }
     return this.props.renderPage({
       index,
       key: index,
       active: index === activePage,
-      className: 'react-view-slider__page',
+      className: classes.page,
       transitionState: this.getTransitionState(index),
       style: fillParent ? {left: `${index * 100}%`} : {},
       ref: c => this.pages[index] = c,
@@ -155,13 +167,12 @@ export default class ViewSlider extends Component<DefaultProps, Props, State> {
   render(): React.Element<any> {
     const {
       style, className, viewportClassName, viewportStyle, numPages, prefixer, animateHeight, fillParent,
-      transitionDuration, transitionTimingFunction,
+      transitionDuration, transitionTimingFunction, classes
     } = this.props
     const {activePage, height, transitioning} = this.state
 
-    const finalClassName = classNames(className, 'react-view-slider__root', {
-      'react-view-slider__root--transitioning': transitioning,
-      'react-view-slider__root--fill-parent': fillParent,
+    const finalClassName = classNames(className, classes.root, {
+      [classes.fillParent]: fillParent,
     })
 
     const finalOuterStyle = {
@@ -193,7 +204,7 @@ export default class ViewSlider extends Component<DefaultProps, Props, State> {
           ref={c => this.root = c}
       >
         <div
-            className={classNames(viewportClassName, 'react-view-slider__track')}
+            className={classNames(viewportClassName, classes.viewport)}
             style={prefixer.prefix(finalViewportStyle)}
             ref={c => this.viewport = c}
             onTransitionEnd={this.onTransitionEnd}