Merge pull request #61 from stk-dmitry/refactor/remove-deps

Refactor/remove deps

README.md

@@ -15,6 +15,7 @@ npm install reflexer
 ## Grid
 ```js
 import { Grid } from 'reflexer';
+# or import Grid from 'reflexer/lib/Grid';
 
 <Grid fluid?>
   grid reflexer
@@ -26,6 +27,7 @@ import { Grid } from 'reflexer';
 
 ```js
 import { Row } from 'reflexer';
+# or import Row from 'reflexer/lib/Row';
 
 # <params>={{ xs: <value> }} || <params>="<value>"
 
@@ -44,6 +46,7 @@ import { Row } from 'reflexer';
 ## Col
 ```js
 import { Col } from 'reflexer';
+# or import Col from 'reflexer/lib/Col';
 
 # <params>={{ xs: <value | 'auto'> }} || <params>="<value | 'auto'>"
 
@@ -122,6 +125,9 @@ return (
 )
 ```
 
+## Custom tag
+Use `as` from [styled-components](https://www.styled-components.com/docs/api#as-polymorphic-prop)
+
 ## Default params
 ```js
 export const theme = {

lib/Col/index.js

@@ -2,50 +2,27 @@
 
 exports.__esModule = true;
 
-var _templateObject = _taggedTemplateLiteralLoose(['', ''], ['', '']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  ', ';\n  ', ';\n  ', ';\n  ', ';\n  ', ';\n'], ['\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  ', ';\n  ', ';\n  ', ';\n  ', ';\n  ', ';\n']);
 
 var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-var _styled = require('./styled');
+var _helpers = require('../helpers');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
-// $FlowIssues
-
-
-var Styled = (0, _styledComponents2.default)(function (_ref) {
-  var children = _ref.children,
-      basis = _ref.basis,
-      order = _ref.order,
-      offset = _ref.offset,
-      theme = _ref.theme,
-      _ref$as = _ref.as,
-      as = _ref$as === undefined ? 'div' : _ref$as,
-      props = _objectWithoutProperties(_ref, ['children', 'basis', 'order', 'offset', 'theme', 'as']);
-
-  return _react2.default.createElement(as, props, children);
-})(_templateObject, _styled.Col);
-
-var ColElement = function ColElement(props) {
-  return _react2.default.createElement(Styled, props);
-};
-
-ColElement.defaultProps = {
-  as: 'div',
-  order: undefined,
-  offset: undefined,
-  theme: undefined
-};
-
-// $FlowIssues
-exports.default = (0, _styledComponents.withTheme)(ColElement);
+
+exports.default = _styledComponents2.default.div(_templateObject, function (props) {
+  return (0, _helpers.mediaProperty)(props, (0, _helpers.propsChecker)(props, 'colGutter'), 'padding-left');
+}, function (props) {
+  return (0, _helpers.mediaProperty)(props, (0, _helpers.propsChecker)(props, 'colGutter'), 'padding-right');
+}, function (props) {
+  return props.order && (0, _helpers.mediaProperty)(props, props.order, 'order');
+}, function (props) {
+  return props.offset && (0, _helpers.mediaProperty)(props, props.offset, 'margin-left', true);
+}, function (props) {
+  return props.basis && (0, _helpers.checkWidth)(props, props.basis);
+});
 module.exports = exports['default'];

lib/Grid/index.js

@@ -2,45 +2,20 @@
 
 exports.__esModule = true;
 
-var _templateObject = _taggedTemplateLiteralLoose(['', ''], ['', '']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  margin-left: auto;\n  margin-right: auto;\n  ', '\n'], ['\n  margin-left: auto;\n  margin-right: auto;\n  ', '\n']),
+    _templateObject2 = _taggedTemplateLiteralLoose(['\n    ', ';\n    ', ';\n  '], ['\n    ', ';\n    ', ';\n  ']);
 
 var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-var _styled = require('./styled');
+var _helpers = require('../helpers');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
-// $FlowIssues
-
-
-var Styled = (0, _styledComponents2.default)(function (_ref) {
-  var children = _ref.children,
-      fluid = _ref.fluid,
-      _ref$as = _ref.as,
-      as = _ref$as === undefined ? 'div' : _ref$as,
-      props = _objectWithoutProperties(_ref, ['children', 'fluid', 'as']);
-
-  return _react2.default.createElement(as, props, children);
-})(_templateObject, _styled.Grid);
-
-var GridElement = function GridElement(props) {
-  return _react2.default.createElement(Styled, props);
-};
-
-GridElement.defaultProps = {
-  as: 'div',
-  fluid: false
-};
 
-// $FlowIssues
-exports.default = GridElement;
+exports.default = _styledComponents2.default.div(_templateObject, function (props) {
+  return props.fluid && (0, _styledComponents.css)(_templateObject2, (0, _helpers.mediaProperty)(props, (0, _helpers.propsChecker)(props, 'gridFluid'), 'padding-left'), (0, _helpers.mediaProperty)(props, (0, _helpers.propsChecker)(props, 'gridFluid'), 'padding-right'));
+});
 module.exports = exports['default'];

lib/Row/index.js

@@ -2,66 +2,35 @@
 
 exports.__esModule = true;
 
-var _templateObject = _taggedTemplateLiteralLoose(['', ''], ['', '']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
+var _templateObject = _taggedTemplateLiteralLoose(['\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 1 auto;\n  ', ';\n  ', ';\n  ', ';\n  ', ';\n  ', ';\n  ', ';\n  ', ';\n'], ['\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 1 auto;\n  ', ';\n  ', ';\n  ', ';\n  ', ';\n  ', ';\n  ', ';\n  ', ';\n']);
 
 var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-var _styled = require('./styled');
-
-var _const = require('./const');
+var _safeMediaPropertyCheck = require('../safeMediaPropertyCheck');
 
-var consts = _interopRequireWildcard(_const);
+var _safeMediaPropertyCheck2 = _interopRequireDefault(_safeMediaPropertyCheck);
 
 var _helpers = require('../helpers');
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
-// $FlowIssues
-
-
-var Styled = (0, _styledComponents2.default)(function (_ref) {
-  var children = _ref.children,
-      flexDirection = _ref.flexDirection,
-      flexWrap = _ref.flexWrap,
-      justifyContent = _ref.justifyContent,
-      alignItems = _ref.alignItems,
-      alignContent = _ref.alignContent,
-      theme = _ref.theme,
-      _ref$as = _ref.as,
-      as = _ref$as === undefined ? 'div' : _ref$as,
-      props = _objectWithoutProperties(_ref, ['children', 'flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'alignContent', 'theme', 'as']);
-
-  (0, _helpers.validationProps)({
-    flexDirection: flexDirection, flexWrap: flexWrap, justifyContent: justifyContent, alignItems: alignItems, alignContent: alignContent
-  });
-  return _react2.default.createElement(as, props, children);
-})(_templateObject, _styled.Row);
-
-var FlexElement = function FlexElement(props) {
-  return _react2.default.createElement(Styled, props);
-};
-
-FlexElement.defaultProps = {
-  theme: undefined,
-  as: 'div',
-  flexWrap: { xs: consts.flexWrap.wrap },
-  flexDirection: { xs: consts.flexDirection.row },
-  justifyContent: { xs: consts.justifyContent.flexStart },
-  alignItems: { xs: consts.alignItems.stretch },
-  alignContent: { xs: consts.alignContent.stretch }
-};
 
-// $FlowIssues
-exports.default = (0, _styledComponents.withTheme)(FlexElement);
+exports.default = _styledComponents2.default.div(_templateObject, function (props) {
+  return (0, _helpers.mediaProperty)(props, (0, _helpers.propsChecker)(props, 'rowGutter'), 'margin-left');
+}, function (props) {
+  return (0, _helpers.mediaProperty)(props, (0, _helpers.propsChecker)(props, 'rowGutter'), 'margin-right');
+}, function (props) {
+  return (0, _safeMediaPropertyCheck2.default)(props, 'flexDirection', 'flex-direction');
+}, function (props) {
+  return (0, _safeMediaPropertyCheck2.default)(props, 'flexWrap', 'flex-wrap');
+}, function (props) {
+  return (0, _safeMediaPropertyCheck2.default)(props, 'justifyContent', 'justify-content');
+}, function (props) {
+  return (0, _safeMediaPropertyCheck2.default)(props, 'alignItems', 'align-items');
+}, function (props) {
+  return (0, _safeMediaPropertyCheck2.default)(props, 'alignContent', 'align-content');
+});
 module.exports = exports['default'];

lib/helpers.js

@@ -50,7 +50,9 @@ var isObject = exports.isObject = function isObject(object) {
 
 var propsChecker = exports.propsChecker = function propsChecker(props, entity) {
   var newProps = _extends({}, props, {
-    theme: _extends({}, props.theme, { reflexer: _extends({}, theme.reflexer, props.theme.reflexer) })
+    theme: _extends({}, props.theme, {
+      reflexer: _extends({}, theme.reflexer, props.theme.reflexer)
+    })
   });
   return newProps.theme.reflexer[entity];
 };

lib/safeMediaPropertyCheck.js

@@ -0,0 +1,28 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _const = require('./Row/const');
+
+var EnumRow = _interopRequireWildcard(_const);
+
+var _helpers = require('./helpers');
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+var defaultParams = {
+  flexWrap: { xs: EnumRow.flexWrap.wrap },
+  flexDirection: { xs: EnumRow.flexDirection.row },
+  justifyContent: { xs: EnumRow.justifyContent.flexStart },
+  alignItems: { xs: EnumRow.alignItems.stretch },
+  alignContent: { xs: EnumRow.alignContent.stretch }
+};
+
+exports.default = function (props, valueKey, paramsKey, isCheckPecent) {
+  if (Object.prototype.hasOwnProperty.call(props, valueKey)) {
+    return (0, _helpers.mediaProperty)(props, props[valueKey], paramsKey, isCheckPecent);
+  }
+  return (0, _helpers.mediaProperty)(props, defaultParams[valueKey], paramsKey, isCheckPecent);
+};
+
+module.exports = exports['default'];

package.json

@@ -1,10 +1,10 @@
 {
   "name": "reflexer",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "React flexbox grid library",
   "main": "lib/index.js",
   "repository": "[email protected]:stk-dmitry/reflexer.git",
-  "author": "__strelkov <[email protected]>, @recats",
+  "author": "Dmitry Strelkov <[email protected]>",
   "license": "MIT",
   "scripts": {
     "build": "nwb build-react-component",
@@ -38,8 +38,6 @@
     "nwb": "^0.23.0"
   },
   "dependencies": {
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
     "styled-components": "^4.0.0"
   },
   "peerDependencies": {