initial commit

Author: vincentbollaert

.babelrc

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

.eslintrc

@@ -0,0 +1,15 @@
+extends: airbnb
+rules:
+  max-len: [1, 120, 4]
+  no-multi-spaces: 0
+  react/require-extension: 0
+  react/forbid-prop-types: 0
+  react/jsx-filename-extension: [1, { extensions: [.test.js, .jsx] }]
+  react/require-default-props: 0
+globals:
+  document: true
+  foo: true
+  window: true
+  describe: true
+  it: true
+  expect: true

.yarnclean

@@ -0,0 +1,42 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.*.yml
+*.yml
+
+# misc
+*.gz
+*.md

npm-debug.log

@@ -0,0 +1,45 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'test' ]
+2 info using [email protected]
+3 info using [email protected]
+4 verbose run-script [ 'pretest', 'test', 'posttest' ]
+5 info lifecycle [email protected]~pretest: [email protected]
+6 silly lifecycle [email protected]~pretest: no script for pretest, continuing
+7 info lifecycle [email protected]~test: [email protected]
+8 verbose lifecycle [email protected]~test: unsafe-perm in lifecycle true
+9 verbose lifecycle [email protected]~test: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/vincentbollaert/Sites/open-sauces/super-simple-flex-grid-react/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/git/bin:/usr/local/bin
+10 verbose lifecycle [email protected]~test: CWD: /Users/vincentbollaert/Sites/open-sauces/super-simple-flex-grid-react
+11 silly lifecycle [email protected]~test: Args: [ '-c', 'mocha -w test/helpers/browser.js src/**/*.test.js' ]
+12 silly lifecycle [email protected]~test: Returned: code: 1  signal: null
+13 info lifecycle [email protected]~test: Failed to exec test script
+14 verbose stack Error: [email protected] test: `mocha -w test/helpers/browser.js src/**/*.test.js`
+14 verbose stack Exit status 1
+14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at EventEmitter.emit (events.js:192:7)
+14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at ChildProcess.emit (events.js:192:7)
+14 verbose stack     at maybeClose (internal/child_process.js:890:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
+15 verbose pkgid [email protected]
+16 verbose cwd /Users/vincentbollaert/Sites/open-sauces/super-simple-flex-grid-react
+17 error Darwin 14.5.0
+18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "test"
+19 error node v7.5.0
+20 error npm  v4.1.2
+21 error code ELIFECYCLE
+22 error [email protected] test: `mocha -w test/helpers/browser.js src/**/*.test.js`
+22 error Exit status 1
+23 error Failed at the [email protected] test script 'mocha -w test/helpers/browser.js src/**/*.test.js'.
+23 error Make sure you have the latest version of node.js and npm installed.
+23 error If you do, this is most likely a problem with the super-simple-flex-grid-react package,
+23 error not with npm itself.
+23 error Tell the author that this fails on your system:
+23 error     mocha -w test/helpers/browser.js src/**/*.test.js
+23 error You can get information on how to open an issue for this project with:
+23 error     npm bugs super-simple-flex-grid-react
+23 error Or if that isn't available, you can get their info via:
+23 error     npm owner ls super-simple-flex-grid-react
+23 error There is likely additional logging output above.
+24 verbose exit [ 1, true ]

package.json

@@ -0,0 +1,51 @@
+{
+  "name": "super-simple-flex-grid-react",
+  "version": "1.0.0",
+  "description": "A react super simple flex grid",
+  "main": "src/FlexGrid",
+  "scripts": {
+    "webpack": "webpack-dev-server --progress --watch",
+    "build": "webpack",
+    "test": "mocha -w test/helpers/browser.js src/**/*.test.js"
+  },
+  "repository": "git+https://github.com/open-sauces/super-simple-flex-grid-react.git",
+  "author": "Vincent Bollaert",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/open-sauces/super-simple-flex-grid-react/issues"
+  },
+  "homepage": "https://github.com/open-sauces/super-simple-flex-grid-react#readme",
+  "dependencies": {
+    "babel": "^6.5.2",
+    "babel-core": "^6.22.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-polyfill": "^6.22.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.22.0",
+    "babel-preset-stage-0": "^6.22.0",
+    "chai": "^3.5.0",
+    "chai-enzyme": "^0.6.1",
+    "classnames": "^2.2.5",
+    "css-loader": "^0.26.1",
+    "enzyme": "^2.7.1",
+    "eslint": "^3.13.0",
+    "eslint-config-airbnb": "^14.1.0",
+    "eslint-config-airbnb-base": "^11.0.0",
+    "eslint-import-resolver-webpack": "^0.8.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.10.0",
+    "html-webpack-plugin": "^2.28.0",
+    "jsdom": "^9.10.0",
+    "mocha": "^3.2.0",
+    "postcss-loader": "^1.2.2",
+    "react": "^15.4.2",
+    "react-addons-test-utils": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "sass-loader": "^4.1.1",
+    "style-loader": "^0.13.1",
+    "super-simple-flex-grid": "^1.0.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0"
+  }
+}

src/FlexGrid/FlexCell/FlexCell.jsx

@@ -0,0 +1,90 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import classList from 'super-simple-flex-grid/src/style.scss';
+
+const testClassList = prop => ({
+  center: 'test-center',
+  centerH: 'test-center-h',
+  centerV: 'test-center-v',
+  startH: 'test-start-h',
+  endH: 'test-end-h',
+  startV: 'test-start-v',
+  endV: 'test-end-v',
+  spaceAround: 'test-space-around',
+  spaceBetween: 'test-space-between',
+  grow: `test-grow-${prop}`,
+  shrink: 'test-shrink',
+  ellipsis: 'test-ellipsis',
+  noMargin: 'test-no-margin',
+});
+
+const FlexCell = ({
+  customClass,
+  children,
+  center,
+  centerH,
+  centerV,
+  startH,
+  startV,
+  endH,
+  endV,
+  spaceAround,
+  spaceBetween,
+  grow,
+  shrink,
+  ellipsis,
+  noMargin,
+}) => {
+  const flexCellClass = 'flex-row__cell';
+  const setClass = modifier => `${flexCellClass}--${modifier}`;
+
+  const flexCellClassWithModifier = classnames(flexCellClass, {
+    [customClass]: customClass,
+    [setClass(classList.center       || testClassList().center)]: center,
+    [setClass(classList.centerH      || testClassList().centerH)]: centerH,
+    [setClass(classList.centerV      || testClassList().centerV)]: centerV,
+    [setClass(classList.startH       || testClassList().startH)]: startH,
+    [setClass(classList.endH         || testClassList().endH)]: endH,
+    [setClass(classList.startV       || testClassList().startV)]: startV,
+    [setClass(classList.endV         || testClassList().endV)]: endV,
+    [setClass(classList.spaceAround  || testClassList().spaceAround)]: spaceAround,
+    [setClass(classList.spaceBetween || testClassList().spaceBetween)]: spaceBetween,
+    [setClass(`${classList.grow      || testClassList(grow).grow}`)]: grow,
+    [setClass(classList.shrink       || testClassList().shrink)]: shrink,
+    [setClass(classList.ellipsis     || testClassList().ellipsis)]: ellipsis,
+    [setClass(classList.noMargin     || testClassList().noMargin)]: noMargin,
+  });
+
+  return (
+    <div className={flexCellClassWithModifier}>
+      {!ellipsis && children}
+      {
+        ellipsis &&
+        <div className={`${flexCellClass}--${classnames(classList.ellipsisContent)}`}>
+          {children}
+        </div>
+      }
+    </div>
+  );
+};
+
+FlexCell.propTypes = {
+  customClass: PropTypes.string,
+  children: PropTypes.any,
+  center: PropTypes.bool,
+  centerH: PropTypes.bool,
+  centerV: PropTypes.bool,
+  startH: PropTypes.bool,
+  startV: PropTypes.bool,
+  endH: PropTypes.bool,
+  endV: PropTypes.bool,
+  spaceAround: PropTypes.bool,
+  spaceBetween: PropTypes.bool,
+  grow: PropTypes.string,
+  shrink: PropTypes.bool,
+  ellipsis: PropTypes.bool,
+  noMargin: PropTypes.bool,
+};
+
+export { testClassList };
+export default FlexCell;

src/FlexGrid/FlexCell/FlexCell.test.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import chai, { expect } from 'chai';
+import { shallow } from 'enzyme';
+import chaiEnzyme from 'chai-enzyme';
+
+import FlexCell, { testClassList } from './FlexCell';
+
+chai.use(chaiEnzyme());
+
+
+describe('<FlexCell />', () => {
+  const baseElementClass = 'flex-row__cell';
+  const baseElementSelector = `.${baseElementClass}`;
+  const determineElementClass = modifier => `${baseElementClass} ${baseElementClass}--${modifier}`;
+
+  it('Renders children prop', () => {
+    const childProp = 'Child';
+    const wrapper = shallow(<FlexCell>{childProp}</FlexCell>);
+    expect(wrapper.find(baseElementSelector)).to.have.text(childProp);
+  });
+
+  it('Renders center prop', () => {
+    const wrapper = shallow(<FlexCell center />);
+    expect(wrapper.find(baseElementSelector)).to.have.className(determineElementClass(testClassList().center));
+  });
+
+  it('Renders centerH prop', () => {
+    const wrapper = shallow(<FlexCell centerH />);
+    expect(wrapper.find(baseElementSelector)).to.have.className(determineElementClass(testClassList().centerH));
+  });
+
+  it('Renders centerV prop', () => {
+    const wrapper = shallow(<FlexCell centerV />);
+    expect(wrapper.find(baseElementSelector)).to.have.className(determineElementClass(testClassList().centerV));
+  });
+
+  it('Renders startH prop', () => {
+    const wrapper = shallow(<FlexCell startH />);
+    expect(wrapper.find(baseElementSelector)).to.have.className(determineElementClass(testClassList().startH));
+  });
+
+  it('Renders endH prop', () => {
+    const wrapper = shallow(<FlexCell endH />);
+    expect(wrapper.find(baseElementSelector)).to.have.className(determineElementClass(testClassList().endH));
+  });
+
+  it('Renders startV prop', () => {
+    const wrapper = shallow(<FlexCell startV />);
+    expect(wrapper.find(baseElementSelector)).to.have.className(determineElementClass(testClassList().startV));
+  });
+
+  it('Renders endV prop', () => {
+    const wrapper = shallow(<FlexCell endV />);
+    expect(wrapper.find(baseElementSelector)).to.have.className(determineElementClass(testClassList().endV));
+  });
+
+  it('Renders spaceAround prop', () => {
+    const wrapper = shallow(<FlexCell spaceAround />);
+    expect(wrapper.find(baseElementSelector)).to.have.className(determineElementClass(testClassList().spaceAround));
+  });
+
+  it('Renders spaceBetween prop', () => {
+    const wrapper = shallow(<FlexCell spaceBetween />);
+    expect(wrapper.find(baseElementSelector)).to.have.className(determineElementClass(testClassList().spaceBetween));
+  });
+
+  it('Renders grow prop', () => {
+    const wrapper = shallow(<FlexCell grow={'2'} />);
+    expect(wrapper.find(baseElementSelector)).to.have.className(determineElementClass(testClassList(2).grow));
+  });
+
+  it('Renders shrink prop', () => {
+    const wrapper = shallow(<FlexCell shrink />);
+    expect(wrapper.find(baseElementSelector)).to.have.className(determineElementClass(testClassList().shrink));
+  });
+
+  it('Renders ellipsis prop', () => {
+    const wrapper = shallow(<FlexCell ellipsis />);
+    expect(wrapper.find(baseElementSelector)).to.have.className(determineElementClass(testClassList().ellipsis));
+  });
+
+  it('Renders noMargin prop', () => {
+    const wrapper = shallow(<FlexCell noMargin />);
+    expect(wrapper.find(baseElementSelector)).to.have.className(determineElementClass(testClassList().noMargin));
+  });
+});

src/FlexGrid/FlexRow/FlexRow.jsx

@@ -0,0 +1,21 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+
+const FlexRow = ({ children, customClass }) => {
+  const flexRowClass = classnames('flex-row', {
+    [customClass]: customClass,
+  });
+
+  return (
+    <div className={flexRowClass}>
+      {children}
+    </div>
+  );
+};
+
+FlexRow.propTypes = {
+  children: PropTypes.any,
+  customClass: PropTypes.string,
+};
+
+export default FlexRow;

src/FlexGrid/FlexRow/FlexRow.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import chai, { expect } from 'chai';
+import { shallow } from 'enzyme';
+import chaiEnzyme from 'chai-enzyme';
+import FlexRow from './FlexRow';
+
+chai.use(chaiEnzyme());
+
+
+describe('<FlexRow />', () => {
+  const elementSelector = '.flex-row';
+
+  it('Renders children prop', () => {
+    const childProp = 'Child';
+    const wrapper = shallow(<FlexRow>{childProp}</FlexRow>);
+    expect(wrapper.find(elementSelector)).to.have.text(childProp);
+  });
+
+  it('Renders customClass prop', () => {
+    const customClass = 'custom-class';
+    const wrapper = shallow(<FlexRow customClass={customClass} />);
+    expect(wrapper.find(elementSelector)).to.have.className(customClass);
+  });
+});

src/FlexGrid/index.js

@@ -0,0 +1,2 @@
+export { default as FlexRow } from './FlexRow/FlexRow';
+export { default as FlexCell } from './FlexCell/FlexCell';