Merge pull request #2 from appirio-tech/dev

Updated dev

Author: krispenney

.babelrc

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

.editorconfig

@@ -0,0 +1,16 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.jade]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1 @@
+node_modules/*

.eslintrc.json

@@ -0,0 +1,57 @@
+{
+  "rules": {
+    "indent": [2, 2],
+    "quotes": [2, "single"],
+    "linebreak-style": [2, "unix"],
+    "semi": [2, "never"],
+    "no-console": 0,
+    "prefer-const": 2,
+    "no-const-assign": 2,
+    "no-var": 2,
+    "object-shorthand": 2,
+    "quote-props": [2, "as-needed", { "keywords": true }],
+    "prefer-arrow-callback": 2,
+    "arrow-spacing": 2,
+    "camelcase": 2,
+    "new-cap": 2,
+    "one-var": [2, "never"],
+    "eqeqeq": 2,
+    "comma-style": 2,
+    "no-nested-ternary": 2,
+    "no-unneeded-ternary": 2,
+    "react/jsx-uses-vars": 2,
+    "react/jsx-no-bind": 2,
+    "react/prefer-es6-class": [2, "always"],
+    "react/jsx-pascal-case": 2,
+    "react/jsx-closing-bracket-location": 2,
+    "jsx-quotes": [2, "prefer-double"],
+    "react/jsx-boolean-value": 2,
+    "react/wrap-multilines": 2,
+    "react/self-closing-comp": 2,
+    "react/no-is-mounted": 2
+  },
+  "globals": {
+    "React": true,
+    "_": true
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "jquery": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true,
+      "blockBindings": true
+    }
+  },
+  "extends": "eslint:recommended",
+  "plugins": [
+    "react"
+  ]
+}

.travis.yml

@@ -1,8 +1,10 @@
 language: node_js
 node_js:
 - 5.2.0
-before_install:
+install:
 - npm install
+script:
+- npm run lint
 sudo: false
 before_deploy:
 - npm-prepublish --verbose

README.md

@@ -1,17 +1,100 @@
-# Appirio File Uploader
+# React Components
 
-## Using the repo in your app
+This repository is used to distribute reusable React components.
 
-## Install
+## Installation
 
-```shell
-npm install appirio-tech-react-components
+We use node 5.x and npm 3.x, so you may need to download a new version of node. The easiest way is to download [nvm](https://github.com/creationix/nvm). We have a `.nvmrc` file in the root of the project, so you can just run `nvm use` to switch to the correct version of node.
+
+Install dependencies by running the following in the root of the project:
+ - `npm i`
+ - **Note:** You must use npm 3. Type `npm -v` to ensure you have a 3.x version.
+
+## NPM Commands
+- To run locally, run `npm run dev` and head to `localhost:8080`
+- To create the build: `npm run build`
+- To run the test runner: `TODO: need to update`
+- To make sure your code passes linting: `npm run lint`
+
+## Recommended Developer Tools
+
+Syntax highlighting for ES6 and React JSX
+- Install [babel](https://packagecontrol.io/packages/Babel) via the package manager in Sublime Text
+  - **Note:** Sublime Text 3 is required for this plugin
+- Set the plugin as the default syntax for a particular extension
+  - Open a file with the `.js` extension
+  - Select `View` from the menu
+  - Then `Syntax -> Open all with current extension as...`
+  - Then `Babel -> JavaScript (Babel)`
+  - Repeat for any other extensions, e.g. `.jsx`
+
+Recommended Theme
+- Install [Oceanic Next Color Theme](https://github.com/voronianski/oceanic-next-color-scheme) via the Sublime Text package manager.
+- Add the following to `Sublime Text -> Preferences -> Settings-User` (`⌘ + ,` on Mac)
+```
+{
+  "color_scheme": "Packages/Oceanic Next Color Scheme/Oceanic Next.tmTheme",
+  "theme": "Oceanic Next.sublime-theme"
+}
 ```
 
-## Developing
+Code expander
+- Examples:
+  - `div.cool-class` becomes `<div className="cool-class"></div>`
+  - `a` becomes `<a href=""></a>`
+- Install [Emmet](https://github.com/sergeche/emmet-sublime) via Sublime Text package manager
+- Configure Emmet to work with React, e.g. classes expand to `className` instead of `class`
+- Follow the instructions under [Get Emmet working](http://www.nitinh.com/2015/02/setting-sublime-text-react-jsx-development/)
+  - **Note:** Add the last snippet of code to `reg_replace.sublime-settings` by navigating to  `Sublime Text -> Preferences -> Package Settings -> Reg Replace -> Settings-User`
+
+JavaScript linting
+- `npm run lint` will lint your files for you. Please make sure all `.jsx` and `.js` code passes linting, otherwise the Travis build will fail.
+
+Automatic JavaScript linting in Sublime Text
+- Install [SublimeLinter](http://sublimelinter.readthedocs.org/en/latest/installation.html) following the instructions under "Installing via Package Control"
+- Install [SublimeLinter-eslint](https://github.com/roadhump/SublimeLinter-eslint) with the package manager. The package is called `SublimeLinter-contrib-eslint`
+
+## Contributing
 
-```shell
-nvm use
-npm install
-npm run example
+### Pull Requests
+
+To contribute to the repository, please create a feature branch off of the dev branch. Once you're finished working on the feature, make a pull request to merge it into dev. Please make sure that every pull request has passed the build checks, which appear just before the "Merge pull request" button in github.
+
+### Code Style
+
+JavaScript
+  - Please use ES2015 syntax whenever possible
+  - Specific rules are enforced via `.eslintrc.json`
+  - Run `npm run lint` to check your code against the linter
+
+SCSS Files
+  - This repository uses flexbox for arranging content
+  - The use of any extra CSS libraries should be discussed with the team
+  - Use SCSS syntax, but do not overly nest
+  - Use variables, mixins, and classes as much as possible from our [style guide](https://github.com/appirio-tech/styles)
+  - When adding media queries, nest them inside the element, rather than creating a new section
+  ```
+  .box {
+    height: 50px;
+    width: 50px;
+    @media screen and (min-width: 768px) {
+      height: 100px;
+      width: 100px;
+    }
+    
+    .inside-box {
+      font-size: 14px;
+      @media screen and (min-width: 768px) {
+        font-size: 18px;
+      }
+    }
+  }
+  ```
+
+## Using the react-components repository in your app
+
+## Install
+
+```
+npm install appirio-tech-react-components
 ```

components/ExampleNav/ExampleNavContainer.coffee

@@ -15,7 +15,8 @@ navs =
     'ImageViewerHeaderExamples'
     'ImageViewerExamples'
     'LoaderExamples',
-    'PanelExamples'
+    'PanelExamples',
+    'StandardListItemExamples'
   ]
   ManageSteps: [
     'ManageStepsExamples'
@@ -46,4 +47,4 @@ container =
     else
       createElement ExampleNav, { links, onBack }
 
-module.exports = createClass(container)
+module.exports = createClass(container)

components/ExampleTest/ExampleTest.jsx

@@ -0,0 +1,15 @@
+export default function ExampleTest(props) {
+  const row = (value, index) =>
+    <li key={index}>{value}</li>
+
+  return (
+    <ul>
+      { props.values.map(row) }
+    </ul>
+  )
+}
+
+ExampleTest.propTypes = {
+}
+
+module.exports = ExampleTest

components/ExampleTest/ExampleTest.spec.js

@@ -0,0 +1,25 @@
+import chai from 'chai'
+import cheerio from 'cheerio'
+import { createElement } from 'react'
+import { renderToStaticMarkup as render } from 'react/lib/ReactDOMServer'
+
+import ExampleTest from './ExampleTest.jsx'
+
+chai.should()
+
+describe('Manage Steps View', () => {
+  describe('Savings label', () => {
+    it('displays as savings when savings exist', () => {
+      const props = {
+        values: ['hello', 'world']
+      }
+
+      const html = render(createElement(ExampleTest, props))
+      const $ = cheerio.load(html)
+      const items = $('li')
+
+      items.length.should.equal(2)
+      items.html().should.equal('hello')
+    })
+  })
+})

components/Panel/Panel.jsx

@@ -1,43 +1,57 @@
+import { PropTypes, Component } from 'react'
+
 require('./Panel.scss')
-var React = require('react')
 
-var Panel = {
-  getInitialState: function() {
-    return {expanded: true};
-  },
-  handleClick: function(event) {
+class Panel extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = { expanded: true }
+
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  handleClick(event) {
     if (this.props.expandTrigger && event.target.className.indexOf(this.props.expandTrigger) !== -1) {
-      this.setState({expanded: !this.state.expanded});
+      this.setState({expanded: !this.state.expanded})
     }
-  },
-  render: function() {
-    var header = <div className="panel-header" onClick={this.handleClick}>
-      {
-        React.Children.map(this.props.children, function(child) {
+  }
+
+  render() {
+    const header = (
+      <div className="panel-header" onClick={this.handleClick}>
+        {this.props.children.map(child => {
           if (child.props.className === 'panel-header')
-            return child.props.children;
-
-        })
-      }
-    </div>
-    var body = <div className="panel-body">
-      {
-        React.Children.map(this.props.children, function(child) {
+            return child.props.children
+        })}
+      </div>
+    )
+
+    let body = (
+      <div className="panel-body">
+        {this.props.children.map((child) => {
           if (child.props.className === 'panel-body')
-            return child.props.children;
+            return child.props.children
+        })}
+      </div>
+    )
 
-        })
-      }
-    </div>
-    if(this.state.expanded === false) {
-      body = null;
+    if (!this.state.expanded) {
+      body = null
     }
-    var dom = <div className="panel">
-      {header}
-      {body}
-    </div>
-    return dom;
+
+    return (
+      <div className="panel">
+        {header}
+        {body}
+      </div>
+    )
   }
 }
 
-module.exports = React.createClass(Panel)
+Panel.propTypes = {
+  children     : PropTypes.array.isRequired,
+  expandTrigger: PropTypes.string
+}
+
+export default Panel