init react-styled-box

.gitignore

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

LICENSE

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

README.md

@@ -0,0 +1,48 @@
+# react-styled-box
+
+#### What is it ?
+
+This is a simple `styled.div` component, that makes your basic positioning of elements faster. 
+Instead of writing of all of the "styled" components upfront you can prototype the layout faster with this ready `<Box>`.
+
+#### How it works ?
+
+```js
+
+<Box flexDirection="column">
+  <Box flexDirection="row">
+    <span> header </span>
+    <span> header 2 </span>
+  </Box>
+
+  <Box flexGrow={1}>
+    <Box margin={10} padding="10px 0 0 0">
+      Item one
+    </Box>
+    <Box margin={10} padding="10px 0 0 0">
+      Item two
+    </Box>
+  </Box>
+</Box>
+
+```
+
+#### What does it support ?
+
+```js
+const propTypes = {
+  display: PropTypes.oneOf(['block', 'inline-block', 'inline', 'flex', 'inline-flex']),
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  flexDirection: Flex(PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse'])),
+  flexWrap: Flex(PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse'])),
+  justifyContent: Flex(PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'])),
+  alignItems: Flex(PropTypes.oneOf(['flex-start', 'flex-end',  'center', 'baseline', 'stretch'])),
+  alignContent: Flex(PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'])),
+  order: Flex(PropTypes.number),
+  flex: Flex(PropTypes.string),
+  alignSelf: Flex(PropTypes.oneOf(['auto', 'flex-start', 'flex-end',  'center', 'baseline', 'stretch'])),
+};
+```

lib/react-styled-box.js

@@ -0,0 +1,101 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('styled-components'), require('prop-types')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'styled-components', 'prop-types'], factory) :
+	(factory((global.window = global.window || {}),global.styled,global.PropTypes));
+}(this, (function (exports,styled,PropTypes) { 'use strict';
+
+styled = styled && 'default' in styled ? styled['default'] : styled;
+PropTypes = PropTypes && 'default' in PropTypes ? PropTypes['default'] : PropTypes;
+
+function toCss(props, propTypes, propsMap) {
+  return Object.keys(propTypes).filter(function (k) {
+    return props[k];
+  }).map(function (k) {
+    return propsMap[k].name + ': ' + propsMap[k].apply(props[k]) + ';';
+  }).join('');
+}
+
+function Flex(validator) {
+  return function (props, propName, componentName) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!props[propName]) {
+        return null;
+      }
+
+      if (props['display'] !== 'flex' && props['display'] !== 'inline-flex') {
+        return new Error('The property "' + propName + '" in ' + componentName + ' is available only when is display={/flex|inline-flex/}.');
+      }
+
+      for (var _len = arguments.length, rest = Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+        rest[_key - 3] = arguments[_key];
+      }
+
+      return validator.apply(undefined, [props, propName, componentName].concat(rest));
+    }
+
+    return null;
+  };
+}
+
+function ind(p) {
+  return p;
+}
+
+function defaultPx(prop) {
+  return typeof prop === 'number' ? prop + 'px' : prop;
+}
+
+var _templateObject = _taggedTemplateLiteral(['\n', '\n'], ['\n', '\n']);
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var propsMap = {
+  display: { name: 'display', apply: ind },
+  margin: { name: 'margin', apply: defaultPx },
+  padding: { name: 'padding', apply: defaultPx },
+  width: { name: 'width', apply: defaultPx },
+  height: { name: 'height', apply: defaultPx },
+  flexDirection: { name: 'flex-direction', apply: ind },
+  flexWrap: { name: 'flex-wrap', apply: ind },
+  justifyContent: { name: 'justify-content', apply: ind },
+  alignItems: { name: 'align-items', apply: ind },
+  alignContent: { name: 'align-content', apply: ind },
+  order: { name: 'order', apply: ind },
+  flexGrow: { name: 'flex-grow', apply: ind },
+  flexShrink: { name: 'flex-shrink', apply: ind },
+  flexBasis: { name: 'flex-basis', apply: ind },
+  flex: { name: 'flex', apply: ind },
+  alignSelf: { name: 'align-self', apply: ind }
+};
+
+var propTypes = {
+  display: PropTypes.oneOf(['block', 'inline-block', 'inline', 'flex', 'inline-flex']),
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  flexDirection: Flex(PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse'])),
+  flexWrap: Flex(PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse'])),
+  justifyContent: Flex(PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'])),
+  alignItems: Flex(PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'baseline', 'stretch'])),
+  alignContent: Flex(PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'])),
+  order: Flex(PropTypes.number),
+  flex: Flex(PropTypes.string),
+  alignSelf: Flex(PropTypes.oneOf(['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch']))
+};
+
+var Box = styled.div(_templateObject, function (props) {
+  return toCss(props, propTypes, propsMap);
+});
+Box.displayName = 'Box';
+Box.propTypes = propTypes;
+Box.defaultProps = {
+  display: 'flex'
+};
+
+exports.Box = Box;
+exports['default'] = Box;
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+})));

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-styled-box",
+  "version": "0.0.1",
+  "description": "Styled component with simple mapping to basic position oriented styles",
+  "author": "Piotr Tomasz Monarski",
+  "license": "MIT",
+  "main": "lib/react-styled-box.js",
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "prop-types": "^15.5.10",
+    "rollup": "^0.43.0",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "styled-components": "^2.1.1"
+  },
+  "peerDependencies": {
+    "styled-components": "^2.1.1",
+    "prop-types": "^15.5.10"
+  },
+  "keywords": [
+    "react",
+    "styled-components",
+    "component",
+    "styled",
+    "flexbox",
+    "box"
+  ],
+  "babel": {
+    "presets": [
+      [
+        "es2015",
+        {
+          "modules": false
+        }
+      ]
+    ]
+  }
+}

rollup.config.js

@@ -0,0 +1,25 @@
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+
+export default {
+  entry: 'src/index.js',
+  format: 'umd',
+  exports: 'named',
+  moduleName: 'window',
+  plugins: [
+    resolve({
+      customResolveOptions: {
+        moduleDirectory: 'node_modules',
+      },
+    }),
+    babel({
+      exclude: 'node_modules/**',
+    }),
+  ],
+  globals: {
+    'styled-components': 'styled',
+    'prop-types': 'PropTypes',
+  },
+  external: ['styled-components', 'prop-types'],
+  dest: 'lib/react-styled-box.js',
+};

src/helpers.js

@@ -0,0 +1,29 @@
+export function toCss(props, propTypes, propsMap) {
+  return Object.keys(propTypes)
+    .filter((k) => props[k] )
+    .map((k) => `${propsMap[k].name}: ${propsMap[k].apply(props[k])};`)
+    .join('');
+}
+
+export function Flex(validator) {
+  return function (props, propName, componentName, ...rest) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!props[propName]) {
+        return null;
+      }
+
+      if (props['display'] !== 'flex' && props['display'] !== 'inline-flex'){
+        return new Error(`The property "${propName}" in ${componentName} is available only when is display={/flex|inline-flex/}.`);
+      }
+      return validator(props, propName, componentName, ...rest);
+    }
+
+    return null;
+  };
+}
+
+export function ind (p) { return p; }
+
+export function defaultPx(prop) {
+  return typeof prop === 'number' ? `${prop}px` : prop;
+}

src/index.js

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import { toCss, Flex, ind, defaultPx } from './helpers';
+
+
+const propsMap = {
+  display: { name: 'display', apply: ind },
+  margin: { name: 'margin', apply: defaultPx },
+  padding: { name: 'padding', apply: defaultPx },
+  width: { name: 'width', apply: defaultPx },
+  height: { name: 'height', apply: defaultPx },
+  flexDirection: { name: 'flex-direction', apply: ind },
+  flexWrap: { name: 'flex-wrap', apply: ind },
+  justifyContent: { name: 'justify-content', apply: ind },
+  alignItems: { name: 'align-items', apply: ind },
+  alignContent: { name: 'align-content', apply: ind },
+  order: { name: 'order', apply: ind },
+  flexGrow: { name: 'flex-grow', apply: ind },
+  flexShrink: { name: 'flex-shrink', apply: ind },
+  flexBasis: { name: 'flex-basis', apply: ind },
+  flex: { name: 'flex', apply: ind },
+  alignSelf: { name: 'align-self', apply: ind },
+};
+
+const propTypes = {
+  display: PropTypes.oneOf(['block', 'inline-block', 'inline', 'flex', 'inline-flex']),
+  margin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  flexDirection: Flex(PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse'])),
+  flexWrap: Flex(PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse'])),
+  justifyContent: Flex(PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'])),
+  alignItems: Flex(PropTypes.oneOf(['flex-start', 'flex-end',  'center', 'baseline', 'stretch'])),
+  alignContent: Flex(PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'])),
+  order: Flex(PropTypes.number),
+  flex: Flex(PropTypes.string),
+  alignSelf: Flex(PropTypes.oneOf(['auto', 'flex-start', 'flex-end',  'center', 'baseline', 'stretch'])),
+};
+
+export const Box = styled.div`
+${(props) => toCss(props, propTypes, propsMap)}
+`;
+Box.displayName = 'Box';
+Box.propTypes = propTypes;
+Box.defaultProps = {
+  display: 'flex',
+};
+
+export default Box;