Add nukleus code

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["react", "es2015", "stage-0"],
+  "env": {
+    "dist": {
+      "plugins": [["transform-rename-import", { original: './index.scss', replacement: './index.css' }]]
+    }
+  }
+}

.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

.eslintrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+  extends: 'airbnb',
+  env: {
+    browser: true,
+    jest: true
+  },
+  plugins: [
+    'babel',
+    'sorting'
+  ],
+  settings: {
+    'import/resolver': {
+      webpack: 'webpack.config.babel.js'
+    }
+  },
+  parser: 'babel-eslint',
+  rules: {
+    'arrow-body-style': ['error', 'as-needed'],
+    'arrow-parens': ['error', 'as-needed'],
+    'comma-dangle': ['error', 'never'],
+    'max-len': 'off',
+    'no-confusing-arrow': 'off',
+    'no-param-reassign': ['error', {'props': false }],
+    'no-prototype-builtins': 'off', // We don't yet create objects that don't extend from Object.prototype
+    'object-curly-spacing': 'off', // Disabled in favour of babel/object-curly-spacing in order to avoid false positives with es6
+    'quotes': ['error', 'single', {avoidEscape: true}],
+    'space-before-function-paren': ['error', 'always'],
+
+    // React rules
+    'react/jsx-closing-bracket-location': ['error', 'after-props'],
+    'react/self-closing-comp': ['error', {component: true, html: true}],
+    'react/sort-prop-types': 'error',
+    'react/forbid-prop-types': 'off',
+
+    // Plugins
+    'babel/object-curly-spacing': 'error',
+    'import/order': ['error', {'newlines-between': 'always', groups: ['builtin', 'external', 'internal', 'sibling', 'parent', 'index']}],
+    'sorting/sort-object-props': 'error'
+  }
+};

.gitignore

@@ -0,0 +1,40 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Build dirs
+dist

.sass-lint.yml

@@ -0,0 +1,113 @@
+files:
+  include: 'components/**/*.scss'
+  ignore:
+    - 'node_modules/**/*.*'
+options:
+  formatter: stylish
+  merge-default-rules: false
+rules:
+  border-zero: 2
+  brace-style:
+    - 2
+    - allow-single-line: true
+  class-name-format:
+    - 2
+    - convention: camelcase
+      convention-explanation: We use camelCase for class names because we are using CSS Modules.
+  clean-import-paths:
+    - 2
+    - filename-extension: false
+      leading-underscore: false
+  empty-line-between-blocks:
+    - 2
+    - ignore-single-line-rulesets: true
+  extends-before-declarations: 2
+  extends-before-mixins: 2
+  final-newline:
+    - 2
+    - include: true
+  force-attribute-nesting: 2
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
+  function-name-format:
+    - 2
+    - convention: hyphenatedlowercase
+  hex-length:
+    - 2
+    - style: short
+  hex-notation:
+    - 2
+    - style: lowercase
+  id-name-format:
+    - 2
+    - convention: hyphenatedlowercase
+  indentation:
+    - 2
+    - size: 2
+  leading-zero:
+    - 2
+    - include: false
+  mixin-name-format:
+    - 2
+    - convention: hyphenatedlowercase
+  mixins-before-declarations: 2
+  nesting-depth:
+    - 2
+    - max-depth: 4
+  no-css-comments: 2
+  no-debug: 2
+  no-duplicate-properties: 2
+  no-empty-rulesets: 2
+  no-ids: 2
+  no-invalid-hex: 2
+  no-mergeable-selectors: 2
+  no-misspelled-properties:
+    - 2
+    - extra-properties: []
+  no-qualifying-elements:
+    - 0
+    - allow-element-with-attribute: false
+      allow-element-with-class: false
+      allow-element-with-id: false
+  no-trailing-zero: 2
+  no-url-protocols: 2
+  placeholder-in-extend: 0
+  placeholder-name-format:
+    - 2
+    - convention: hyphenatedlowercase
+  property-sort-order:
+    - 0
+    - ignore-custom-properties: false
+  quotes:
+    - 2
+    - style: single
+  shorthand-values: 2
+  single-line-per-selector: 2
+  space-after-bang:
+    - 2
+    - include: false
+  space-after-colon:
+    - 2
+    - include: true
+  space-after-comma: 2
+  space-before-bang:
+    - 2
+    - include: true
+  space-before-brace:
+    - 2
+    - include: true
+  space-before-colon: 0
+  space-between-parens:
+    - 2
+    - include: false
+  trailing-semicolon: 2
+  url-quotes: 0
+  variable-for-property:
+    - 2
+    - properties:
+        - color
+        - font
+  variable-name-format:
+    - 2
+    - convention: hyphenatedlowercase
+  zero-unit: 2

.travis.yml

@@ -0,0 +1,25 @@
+language: node_js
+deploy:
+  provider: npm
+  email: [email protected]
+  api_key:
+    secure: Le1Tgu1xoHXKqXVko2l4/Jp7o3xdRSi8nSYjlMfhyPvRSh1EFoWB4+200cE37Kca40Ix6x4KHDHOiuY67hLHQ5yXAuYk9GzMzdxBuEUiUsw4D8S1RlhK+i573LKlcuzLL9XQ0CHLR87g8yIz11PyrENkVenCELC1zO49KkuZZxBaxGZeTGxQG+r091iDqjzqgAUUVkty6m56H+70uL+brSt0hTVhawRBHa7tCFhXUTIAPqxkhtnunvv2Qd7VSM7X7LcmBt+ZTJ/dmYlDyvqaDdBxrSsK6n+VDKvB5/hQoKPjf6Xo/tMWfeL20HqfRPEFIF6+rOiiVVa+tHcwN6hEteBAvCBUr9ItBSPFP8FOeEQn1lBjOYozXvnMDm6nonddqJWDeq441+jnX3Hi9zVNtUIUzTNXxLlx44ONUhyx2PBTy/DnR8ETf2SULIBDfxSMGlEzyydYK6PbFBZtvHCxrCgY/D3CgO/54ZO5dThsU4J92qP7vU+f6BpwZk1TB/CuY+HnSE82RnJ8jqbeOALKu+qnaYiOc7EDHCAnh5UtX/scpZ16yYepluODJqGCEHgmaRSzGzsEw4x2zIXmAKjiZGWtME4U4KTkUNrbuBOvEd1cuVixFU+vOGuqvYAuoMGfb7y3+a0b9UAvukVz+qqyK+z3Kb7FtIfGVtaQxpQ0vt4=
+  on:
+    tags: true
+    branch: master
+    repo: kununu/nukleus
+notifications:
+  email: false
+node_js:
+  - "6"
+cache:
+  directories:
+    - node_modules
+install:
+  - npm install --ignore-scripts
+script:
+  - npm run lint
+  - npm run test
+  - cd docs
+  - npm i
+  - npm run lint

README.md

@@ -0,0 +1,34 @@
+# nukleus
+
+## kununu's shared ui components.
+
+### Install and run
+
+```bash
+npm install --ignore-scripts
+npm start
+```
+Open [http://localhost:3000/playground](http://localhost:3000/playground).
+
+The `--ignore-scripts` argument is given since we are running a `prepublish` script we just wish to run before publishing and not after installing. You can read more here https://github.com/npm/npm/issues/3059
+
+If you omit the argument, the installation will go through but you'll receive and error related to the `prepublish` script that (as intented) exits with status 1.
+
+As for npm@5, this behaviour should change so we can get rid of the `in-publish` package.
+
+### Test
+
+In order to run the tests, run `npm run test`.
+
+There could be two reasons why the tests are failing: either your component broke or was modified on purpose.
+In the latter case, you will just need to update the snapshot.
+
+## Publish a new version
+
+In order to update the npm version we must create and push a new tag. Pushing a new tag will cause Travis to automatically publish the new npm version ([docs](https://docs.travis-ci.com/user/deployment/npm)).
+
+```bash
+# Do the following on the master branch
+git tag -a vX.Y.Z -m "<what changed in this version>"
+git push --tags
+```

components/CheckboxGroup/index.jsx

@@ -0,0 +1,99 @@
+import React, {Component, PropTypes} from 'react';
+
+import styles from './index.scss';
+
+export default class CheckboxGroup extends Component {
+  static propTypes = {
+    checkboxes: PropTypes.array.isRequired,
+    heading: PropTypes.string,
+    headingStyle: PropTypes.string,
+    inputStyle: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    query: PropTypes.object
+  };
+
+  static defaultProps = {
+    headingStyle: 'control-label',
+    inputStyle: 'inline',
+    query: {}
+  };
+
+  state = {
+    checkboxes: this.props.checkboxes || []
+  };
+
+  componentWillMount () {
+    const {query, name} = this.props;
+    if (!query[name]) return;
+    this.updateValue(this.getCheckboxesToUpdate(query[name]), 'checked');
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const {query, name} = nextProps;
+    // We do not yet control the state when the query does not change,
+    // for instance when updates are triggered by tweaking with other components.
+    if (nextProps.query === this.props.query) return;
+    if (!query[name]) {
+      this.updateValue(this.state.checkboxes, 'unchecked');
+    } else {
+      this.updateValue(this.getCheckboxesToUpdate(query[name]), 'checked');
+    }
+  }
+
+  onChange (checkbox) {
+    this.updateValue([checkbox]);
+  }
+
+  getCheckboxesToUpdate (newCheckboxes) {
+    return this.state.checkboxes.filter(checkbox => [].concat(newCheckboxes).some(value => value === checkbox.value));
+  }
+
+  updateValue (newCheckboxes, status = 'toggle') {
+    this.setState({
+      checkboxes: this.state.checkboxes.map(checkbox => {
+        if (newCheckboxes.some(newCheckbox => newCheckbox === checkbox)) {
+          /* eslint-disable sorting/sort-object-props */
+          const newStatus = {
+            checked: true,
+            unchecked: false,
+            toggle: !checkbox.isChecked
+          }[status];
+          /* eslint-enable sorting/sort-object-props */
+          return {
+            ...checkbox,
+            isChecked: newStatus
+          };
+        }
+        return checkbox;
+      })
+    });
+  }
+
+  render () {
+    const {checkboxes} = this.state;
+
+    return (
+      <div className={`${styles[this.props.inputStyle]} form-group`}>
+        {this.props.heading && <div className={this.props.headingStyle}>{this.props.heading}</div>}
+
+        <div className={styles.inputContainer}>
+          {checkboxes.map((checkbox, key) =>
+            <div className={`checkbox ${styles.checkbox}`} key={key}>
+              <input
+                className="form-control"
+                id={`${this.props.name}${checkbox.id}`}
+                name={this.props.name}
+                key={checkbox.id}
+                value={checkbox.value}
+                type="checkbox"
+                checked={checkbox.isChecked}
+                onChange={() => this.onChange(checkbox)} />
+
+              <label htmlFor={`${this.props.name}${checkbox.id}`}>{checkbox.label}</label>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}