add prettier and react version to peerDependencies

Author: osamu38

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-layout-manager",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "Layout manager not to give margins to components",
   "homepage": "http://osamu38.github.io/react-layout-manager",
   "bugs": {
@@ -21,9 +21,7 @@
     "test": "node scripts/test.js --env=jsdom"
   },
   "babel": {
-    "presets": [
-      "react-app"
-    ]
+    "presets": ["react-app"]
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -75,16 +73,12 @@
     "whatwg-fetch": "2.0.3"
   },
   "peerDependencies": {
-    "react": "^15.3.0 || ^17.0.0",
-    "styled-components": "^3.1.6"
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0",
+    "styled-components": "^3.0.0"
   },
   "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,mjs}"
-    ],
-    "setupFiles": [
-      "<rootDir>/config/polyfills.js"
-    ],
+    "collectCoverageFrom": ["src/**/*.{js,jsx,mjs}"],
+    "setupFiles": ["<rootDir>/config/polyfills.js"],
     "testMatch": [
       "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
@@ -94,11 +88,10 @@
     "transform": {
       "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+      "^(?!.*\\.(js|jsx|mjs|css|json)$)":
+        "<rootDir>/config/jest/fileTransform.js"
     },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
-    ],
+    "transformIgnorePatterns": ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"],
     "moduleNameMapper": {
       "^react-native$": "react-native-web"
     },

src/demo/App.js

@@ -97,7 +97,7 @@ function Password() {
   return (
     <RLM {...PasswordStyle}>
       <Label>Password</Label>
-      <Input placeholder="rEaCtLaYoUtMaNaGeR"/>
+      <Input placeholder="rEaCtLaYoUtMaNaGeR" />
     </RLM>
   );
 }
@@ -162,7 +162,7 @@ function PostalCode() {
       {
         breakpoint: 480,
         settings: {
-          width: ['50%', 16, '50%']
+          width: ['50%', 16, '50%'],
         },
       },
     ],
@@ -254,9 +254,7 @@ function Main() {
 
 class App extends Component {
   render() {
-    return (
-      <Main />
-    );
+    return <Main />;
   }
 }
 

src/lib/components/LayoutManager.jsx

@@ -6,8 +6,9 @@ import {
 
 const LayoutManager = styled.div`
   display: block;
-  ${({ wrapVerticalSpace }) => setBottomNegativeMargin(wrapVerticalSpace)}
-  ${(props) => setResponsivePropertyToLayoutManager(props)}
+  ${({ wrapVerticalSpace }) =>
+    setBottomNegativeMargin(wrapVerticalSpace)} ${props =>
+    setResponsivePropertyToLayoutManager(props)};
 `;
 
-export default LayoutManager;
+export default LayoutManager;

src/lib/components/LayoutManagerChild.jsx

@@ -21,7 +21,7 @@ const LayoutManagerChild = styled.div`
   ${({ verticalSpace }) => setVerticalSpace(verticalSpace)}
   ${({ childWidth }) => setWidth(childWidth)}
   ${({ verticalAlign }) => setVerticalAlign(verticalAlign)}
-  ${(props) => setResponsivePropertyToChild(props)}
+  ${props => setResponsivePropertyToChild(props)}
 `;
 
 export default LayoutManagerChild;

src/lib/components/LayoutManagerChildInner.jsx

@@ -8,7 +8,7 @@ import {
 const LayoutManagerChildInner = styled.div`
   ${({ align }) => setAlign(align)}
   ${({ innerWidth }) => setInnerWidth(innerWidth)}
-  ${(props) => setResponsivePropertyToChildInner(props)}
+  ${props => setResponsivePropertyToChildInner(props)}
 `;
 
 export default LayoutManagerChildInner;

src/lib/components/ReactLayoutManager.jsx

@@ -23,7 +23,7 @@ export default class ReactLayoutManager extends Component {
     visible: true,
     wrap: false,
     responsive: [],
-  }
+  };
   render() {
     const {
       children,
@@ -46,15 +46,12 @@ export default class ReactLayoutManager extends Component {
 
     return (
       <LayoutManager
-        {...getLayoutManagerProperty(
-          wrapVerticalSpace,
-          responsive,
-        )}
+        {...getLayoutManagerProperty(wrapVerticalSpace, responsive)}
       >
-        {isArray(children) ?
+        {isArray(children) ? (
           children.map((child, i) => {
             const childrenLength = children.length;
-            const isLastChild = (childrenLength - 1) === i;
+            const isLastChild = childrenLength - 1 === i;
 
             return (
               <LayoutManagerChild
@@ -69,7 +66,7 @@ export default class ReactLayoutManager extends Component {
                   childrenLength,
                   isLastChild,
                   i,
-                  responsive,
+                  responsive
                 )}
                 key={i}
               >
@@ -78,27 +75,23 @@ export default class ReactLayoutManager extends Component {
                     parseInnerWidth,
                     align,
                     i,
-                    responsive,
+                    responsive
                   )}
                   key={i}
                 >
                   {child}
                 </LayoutManagerChildInner>
               </LayoutManagerChild>
             );
-          }) :
-          <LayoutManagerChild
-            childWidth={parseWidth}
-          >
-            <LayoutManagerChildInner
-              innerWidth={parseInnerWidth}
-              align={align}
-            >
+          })
+        ) : (
+          <LayoutManagerChild childWidth={parseWidth}>
+            <LayoutManagerChildInner innerWidth={parseInnerWidth} align={align}>
               {children}
             </LayoutManagerChildInner>
           </LayoutManagerChild>
-        }
+        )}
       </LayoutManager>
     );
   }
-};
+}

src/lib/helpers/getProperty.js

@@ -1,7 +1,4 @@
-import {
-  isNumber,
-  isArray,
-} from './type';
+import { isNumber, isArray } from './type';
 import { getUnit } from './util';
 
 function getProperty(property, index) {
@@ -10,20 +7,13 @@ function getProperty(property, index) {
 function getHorizontalSpace(horizontalSpace, childWidth, isLastChild, index) {
   const horizontalSpaceValue = getProperty(horizontalSpace, index);
 
-  if (
-    !horizontalSpaceValue ||
-    String(childWidth) === '100%' ||
-    isLastChild
-  ) {
+  if (!horizontalSpaceValue || String(childWidth) === '100%' || isLastChild) {
     return 0;
   }
   return horizontalSpaceValue;
 }
 function getVerticalSpace(verticalSpace, index) {
-  if (
-    verticalSpace &&
-    index
-  ) {
+  if (verticalSpace && index) {
     return getProperty(verticalSpace, index - 1);
   }
 }
@@ -37,7 +27,10 @@ function getTotalHorizontalSpaces(horizontalSpace, childrenLength) {
   return horizontalSpace * (childrenLength - 1);
 }
 function getChildWidth(width, horizontalSpace, wrap, childrenLength, index) {
-  const totalHorizontalSpaces = getTotalHorizontalSpaces(horizontalSpace, childrenLength);
+  const totalHorizontalSpaces = getTotalHorizontalSpaces(
+    horizontalSpace,
+    childrenLength
+  );
 
   if (wrap) {
     return getProperty(width, index);
@@ -51,16 +44,20 @@ function getChildWidth(width, horizontalSpace, wrap, childrenLength, index) {
       if (fixedWidth.length) {
         const totalFixedWidth = getTotalFixedWidth(fixedWidth);
 
-        return `calc(${width[index]} - ${(totalHorizontalSpaces + totalFixedWidth) / variableWidth.length}px)`;
+        return `calc(${width[index]} - ${(totalHorizontalSpaces +
+          totalFixedWidth) /
+          variableWidth.length}px)`;
       }
-      return `calc(${width[index]} - ${totalHorizontalSpaces / childrenLength}px)`;
+      return `calc(${width[index]} - ${totalHorizontalSpaces /
+        childrenLength}px)`;
     }
     return width[index];
   }
   const isVariableWidth = `${width}`.includes('%');
 
   if (isVariableWidth) {
-    return `calc(${width + getUnit(width)} - ${totalHorizontalSpaces / childrenLength}px)`;
+    return `calc(${width + getUnit(width)} - ${totalHorizontalSpaces /
+      childrenLength}px)`;
   }
   return getProperty(width, index);
 }
@@ -86,14 +83,25 @@ export function getLayoutManagerChildProperty(
   childrenLength,
   isLastChild,
   index,
-  responsive,
+  responsive
 ) {
-  const childWidth = getChildWidth(width, horizontalSpace, wrap, childrenLength, index);
+  const childWidth = getChildWidth(
+    width,
+    horizontalSpace,
+    wrap,
+    childrenLength,
+    index
+  );
 
   return {
     childWidth,
     verticalAlign: getProperty(verticalAlign, index),
-    horizontalSpace: getHorizontalSpace(horizontalSpace, childWidth, isLastChild, index),
+    horizontalSpace: getHorizontalSpace(
+      horizontalSpace,
+      childWidth,
+      isLastChild,
+      index
+    ),
     verticalSpace: getVerticalSpace(verticalSpace, index),
     wrapVerticalSpace,
     isWrap: wrap,
@@ -114,7 +122,12 @@ export function getLayoutManagerChildProperty(
     index,
   };
 }
-export function getLayoutManagerChildInnerProperty(innerWidth, align, index, responsive) {
+export function getLayoutManagerChildInnerProperty(
+  innerWidth,
+  align,
+  index,
+  responsive
+) {
   return {
     innerWidth: getProperty(innerWidth, index),
     align: getProperty(align, index),