├── .babelrc
├── .eslintrc.json
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── build
    ├── demo.js
    └── index.html
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── Container.jsx
    ├── container.test.js
    ├── demo
    │   └── index.js
    └── index.js
└── webpack.config.demo.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["env", "react"]
3 | }


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "airbnb",
 3 |   "env": {
 4 |     "jest": true,
 5 |     "node": true
 6 |   },
 7 |   "rules":{
 8 |     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
 9 |   }
10 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src/
2 | build/
3 | .babelrc
4 | .travis.yml
5 | index.html
6 | webpack.config.demo.js


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |  - "node"


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Steven Akins
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-styled-flexbox
  2 | 
  3 | Effortlessly add flexbox styles to your components using minimal code.
  4 | 
  5 | [![Build Status](https://travis-ci.org/snikas/react-styled-flexbox.png?branch=master)](https://travis-ci.org/snikas/react-styled-flexbox)
  6 | 
  7 | ## Installation
  8 | 
  9 | ##### NPM
 10 | 
 11 | `npm install react-styled-flexbox --save`
 12 | 
 13 | ##### Yarn
 14 | 
 15 | `yarn add react-styled-flexbox`
 16 | 
 17 | ## API
 18 | 
 19 | ```html
 20 | import FlexContainer from 'react-styled-flexbox';
 21 | 
 22 | <FlexContainer>
 23 |   <div>I'm on the left!</div>
 24 |   <div>I'm on the right!</div>
 25 | </FlexContainer>
 26 | ```
 27 | 
 28 | By default FlexContainer will render a div with `'display: flex'` and default flexbox style rules.
 29 | 
 30 | If you want to add additional flexbox rules to your FlexContainer you can pass in options set to true.
 31 | 
 32 | ```html
 33 | <FlexContainer directionColumn={true}>
 34 |   <div>I'm on the top!</div>
 35 |   <div>I'm underneath!</div>
 36 | </FlexContainer>
 37 | ```
 38 | 
 39 | ## Options
 40 | 
 41 | #### inline-flex:
 42 | 
 43 | * inline
 44 | 
 45 | #### flex-direction:
 46 | 
 47 | * directionRowReverse
 48 | * directionColumn
 49 | * directionColumnReverse
 50 | 
 51 | #### flex-wrap:
 52 | 
 53 | * wrapWrap
 54 | * wrapWrapReverse
 55 | 
 56 | #### align-items:
 57 | 
 58 | * itemsFlexStart
 59 | * itemsFlexEnd
 60 | * itemsCenter
 61 | * itemsBaseline
 62 | 
 63 | #### align-content:
 64 | 
 65 | * contentFlexStart
 66 | * contentFlexEnd
 67 | * contentCenter
 68 | * contentSpaceBetween
 69 | * contentSpaceAround
 70 | 
 71 | #### justify-content:
 72 | 
 73 | * justifySpaceBetween
 74 | * justifySpaceAround
 75 | * justifyFlexEnd
 76 | * justifyCenter
 77 | 
 78 | If you are not familiar with the flexible box model please review the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
 79 | 
 80 | ## License
 81 | MIT License
 82 | 
 83 | Copyright (c) 2017 Raycom Media, Inc.
 84 | 
 85 | Permission is hereby granted, free of charge, to any person obtaining a copy
 86 | of this software and associated documentation files (the "Software"), to deal
 87 | in the Software without restriction, including without limitation the rights
 88 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 89 | copies of the Software, and to permit persons to whom the Software is
 90 | furnished to do so, subject to the following conditions:
 91 | 
 92 | The above copyright notice and this permission notice shall be included in all
 93 | copies or substantial portions of the Software.
 94 | 
 95 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 96 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 97 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 98 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 99 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
100 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
101 | SOFTWARE.
102 | 
103 | 


--------------------------------------------------------------------------------
/build/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <title>Reflex</title>
 5 |     <meta charset="utf-8">
 6 |     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
 7 |   </head>
 8 |   <body>
 9 |     <div id="root"></div>
10 |   <script type="text/javascript" src="demo.js"></script></body>
11 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <title>Reflex</title>
 5 |     <meta charset="utf-8">
 6 |     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
 7 |   </head>
 8 |   <body>
 9 |     <div id="root"></div>
10 |   </body>
11 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-styled-flexbox",
 3 |   "version": "2.0.0",
 4 |   "description": "A Flexbox React component harnessing the power of styled-components",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "compile": "rimraf lib/* && babel src -d lib",
 8 |     "build:demo": "npm run clean:demo && cross-env NODE_ENV=production webpack --config webpack.config.demo.js",
 9 |     "clean:demo": "rimraf build",
10 |     "prepublishOnly": "npm run compile",
11 |     "test": "jest && ./node_modules/.bin/eslint ./src/Container.jsx"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/snikas/react-styled-flexbox.git"
16 |   },
17 |   "keywords": [
18 |     "react",
19 |     "reactjs",
20 |     "react-component",
21 |     "flex",
22 |     "flexbox",
23 |     "styled-components"
24 |   ],
25 |   "author": {
26 |     "name": "Steven Akins",
27 |     "company": "PureCars / Raycom Media"
28 |   },
29 |   "license": "MIT",
30 |   "bugs": {
31 |     "url": "https://github.com/snikas/react-styled-flexbox/issues"
32 |   },
33 |   "homepage": "https://github.com/snikas/react-styled-flexbox#readme",
34 |   "devDependencies": {
35 |     "babel-cli": "^6.24.1",
36 |     "babel-core": "^6.25.0",
37 |     "babel-jest": "^21.2.0",
38 |     "babel-loader": "^7.1.0",
39 |     "babel-preset-env": "^1.5.2",
40 |     "babel-preset-es2015": "^6.24.1",
41 |     "babel-preset-react": "^6.24.1",
42 |     "cross-env": "^5.0.1",
43 |     "enzyme": "^3.3.0",
44 |     "enzyme-adapter-react-16": "^1.1.1",
45 |     "eslint": "^4.11.0",
46 |     "eslint-config-airbnb": "^16.1.0",
47 |     "eslint-plugin-import": "^2.8.0",
48 |     "eslint-plugin-jsx-a11y": "^6.0.2",
49 |     "eslint-plugin-react": "^7.4.0",
50 |     "html-webpack-plugin": "^2.29.0",
51 |     "jest": "^21.2.1",
52 |     "react": "16.x",
53 |     "react-dom": "16.x",
54 |     "rimraf": "^2.6.1",
55 |     "styled-components": "^3.3.2",
56 |     "webpack": "^3.0.0"
57 |   },
58 |   "peerDependencies": {
59 |     "react": "16.x",
60 |     "styled-components": "^3.3.2"
61 |   },
62 |   "dependencies": {
63 |     "humps": "^2.0.1"
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/Container.jsx:
--------------------------------------------------------------------------------
 1 | import 'react';
 2 | import styled from 'styled-components';
 3 | import { decamelize } from 'humps';
 4 | 
 5 | /**
 6 |  * React container component using css flexbox
 7 |  * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
 8 |  * VALID PROPS
 9 |  * inline
10 |  * directionRowReverse
11 |  * directionColumn
12 |  * directionColumnReverse
13 |  * wrapWrap
14 |  * wrapWrapReverse
15 |  * itemsFlexStart
16 |  * itemsFlexEnd
17 |  * itemsCenter
18 |  * itemsBaseline
19 |  * contentFlexStart
20 |  * contentFlexEnd
21 |  * contentCenter
22 |  * contentSpaceBetween
23 |  * contentSpaceAround
24 |  * justifySpaceBetween
25 |  * justifySpaceAround
26 |  * justifyFlexEnd
27 |  * justifyCenter
28 |  */
29 | 
30 | const getRule = (ruleName, defaultRule) => (props) => {
31 |   const foundRule = Object.keys(props).find(key => key.startsWith(ruleName));
32 |   if (!foundRule || !props[foundRule]) {
33 |     return defaultRule;
34 |   }
35 |   const [, ...rule] = decamelize(foundRule, { separator: '-' }).split('-');
36 |   return rule.join('-');
37 | };
38 | 
39 | const FlexContainer = styled.div`
40 |   display: ${props => (props.inline ? 'inline-flex' : 'flex')};
41 |   flex-direction: ${getRule('direction', 'row')};
42 |   flex-wrap: ${getRule('wrap', 'nowrap')};
43 |   justify-content: ${getRule('justify', 'flex-start')};
44 |   align-items: ${getRule('items', 'stretch')};
45 |   align-content: ${getRule('content', 'stretch')};
46 | `;
47 | 
48 | export default FlexContainer;
49 | 


--------------------------------------------------------------------------------
/src/container.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { configure, shallow } from 'enzyme';
 3 | import Adapter from 'enzyme-adapter-react-16';
 4 | import FlexContainer from './';
 5 | 
 6 | configure({ adapter: new Adapter() });
 7 | 
 8 | test('Test is running', () => {
 9 |   const component = shallow(<FlexContainer />);
10 |   expect(component).toBeDefined();
11 | });
12 | 


--------------------------------------------------------------------------------
/src/demo/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from 'react-dom';
 3 | import 'styled-components';
 4 | import FlexContainer from '../Container.jsx';
 5 | 
 6 | const FlexDiv = FlexContainer.extend`
 7 |   background: green;
 8 |   color: white;
 9 |   flex-basis: 45%;
10 | `;
11 | 
12 | const App = () => (
13 |   <div>
14 |   <FlexContainer
15 |     justifySpaceBetween
16 |     style={{
17 |       height: '100vh',
18 |     }}
19 |   >
20 |     <FlexDiv
21 |       justifyCenter
22 |       itemsCenter
23 |       contentCenter
24 |     >
25 |       1
26 |     </FlexDiv>
27 |     <FlexDiv
28 |       justifyCenter
29 |       itemsCenter
30 |       contentCenter
31 |     >
32 |       2
33 |     </FlexDiv>
34 |   </FlexContainer>
35 |   <FlexContainer
36 |     justifySpaceBetween
37 |     style={{
38 |       height: '100vh',
39 |     }}
40 |   >
41 |     <FlexDiv
42 |       justifyCenter
43 |       itemsCenter
44 |       contentCenter
45 |     >
46 |       1
47 |     </FlexDiv>
48 |     <FlexDiv
49 |       justifyCenter
50 |       itemsCenter
51 |       contentCenter
52 |     >
53 |       2
54 |     </FlexDiv>
55 |   </FlexContainer>
56 |   </div>
57 | );
58 | 
59 | render(<App />, document.getElementById('root'));
60 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import FlexContainer from './Container';
2 | 
3 | export default FlexContainer;
4 | 


--------------------------------------------------------------------------------
/webpack.config.demo.js:
--------------------------------------------------------------------------------
 1 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 2 | const path = require('path')
 3 | const webpack = require('webpack')
 4 | 
 5 | module.exports = {
 6 |   entry: './src/demo/index',
 7 |   output: {
 8 |     filename: 'demo.js',
 9 |     path: path.resolve(__dirname, 'build')
10 |   },
11 |   plugins: [
12 |     new HtmlWebpackPlugin({
13 |       filename: 'index.html',
14 |       inject: true,
15 |       template: './index.html'
16 |     }),
17 |   ],
18 |   module : {
19 |     loaders : [
20 |       {
21 |         test: /\.js$/,
22 |         loaders: ['babel-loader'],
23 |         include: path.join(__dirname, 'src/demo/')
24 |       },
25 |     ]
26 |   }
27 | };


--------------------------------------------------------------------------------