Support fractional

README.md

@@ -1,8 +1,15 @@
-# CSS box model 📦
+# `css-box-model` 📦
 
-> Get detailed [CSS Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) information about a [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)
+Get accurate and well named [CSS Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) information about a [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element).
 
-This library is useful for when you need to obtain detailed positioning information about an element. Any time you are using [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) you might want to consider using `css-box-model` instead to get more detailed information.
+[![Build Status](https://travis-ci.org/alexreardon/css-box-model.svg?branch=master)](https://travis-ci.org/alexreardon/css-box-model)
+[![npm](https://img.shields.io/npm/v/css-box-model.svg)](https://www.npmjs.com/package/css-box-model)
+[![dependencies](https://david-dm.org/alexreardon/css-box-model.svg)](https://david-dm.org/alexreardon/css-box-model)
+[![Downloads per month](https://img.shields.io/npm/dm/css-box-model.svg)](https://www.npmjs.com/package/css-box-model)
+[![min](https://img.shields.io/bundlephobia/min/css-box-model.svg)](https://www.npmjs.com/package/css-box-model)
+[![minzip](https://img.shields.io/bundlephobia/minzip/css-box-model.svg)](https://www.npmjs.com/package/css-box-model)
+
+Any time you are using [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) you might want to consider using `css-box-model` instead to get more detailed box model information.
 
 ## Usage
 
@@ -19,39 +26,24 @@ const box: BoxModel = getBox(el);
 ## Installation
 
 ```bash
+## yarn
 yarn add css-box-model
+
+# npm
+npm install css-box-model --save
 ```
 
 ## The [CSS Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
 
+![the box model](https://user-images.githubusercontent.com/2182637/46847224-f8a23e80-ce2e-11e8-80d6-0ca62a1871a7.png)
+
 | Box type    | Composition                         |
 | ----------- | ----------------------------------- |
 | Margin box  | margin + border + padding + content |
 | Border box  | border + padding + content          |
 | Padding box | padding + content                   |
 | Content box | content                             |
 
-```
-------------------------------------
-|              MARGIN              |  (marginBox)
-|  ------------------------------  |
-|  |           BORDER           |  |  (borderBox)
-|  |  ------------------------  |  |
-|  |  |       PADDING        |  |  |  (paddingBox)
-|  |  |  ------------------  |  |  |
-|  |  |  |    CONTENT     |  |  |  |  (contentBox)
-|  |  |  |                |  |  |  |
-|  |  |  |                |  |  |  |
-|  |  |  |                |  |  |  |
-|  |  |  ------------------  |  |  |
-|  |  |                      |  |  |
-|  |  ------------------------  |  |
-|  |                            |  |
-|  ------------------------------  |
-|                                  |
-| ---------------------------------|
-```
-
 This our returned `BoxModel`:
 
 ```js
@@ -134,7 +126,7 @@ const getWindowScroll = (): Position => ({
 
 > `(borderBox: AnyRectType, styles: CSSStyleDeclaration) => BoxModel`
 
-This will do the box model calculations without needing to read from the DOM. This is useful if you have already got a `ClientRect` and `CSSStyleDeclaration` as we do not need to recompute it.
+This will do the box model calculations without needing to read from the DOM. This is useful if you have already got a `ClientRect` / `DOMRect` and a `CSSStyleDeclaration` as then we can skip computing these values.
 
 ```js
 const el: HTMLElement = document.getElementById('app');
@@ -154,7 +146,7 @@ type AnyRectType = ClientRect | DOMRect | Rect | Spacing;
 
 > `({ borderBox, margin, border, padding }: CreateBoxArgs) => BoxModel`
 
-Allows you to create a `BoxModel` by passing in a `Rect` like shape and optionally your own `margin`, `border` and or `padding`.
+Allows you to create a `BoxModel` by passing in a `Rect` like shape (`AnyRectType`) and optionally your own `margin`, `border` and or `padding`.
 
 ```js
 type CreateBoxArgs = {|
@@ -182,11 +174,15 @@ const padding: Spacing = {
 const box: BoxModel = createBox({ borderBox, padding });
 ```
 
+## Utility API
+
+> Functions to help you interact with the objects we provide
+
 ### `getRect`
 
 > `(spacing: AnyRectType) => Rect`
 
-Given any `Rect` like shape, return a `Rect`
+Given any `Rect` like shape, return a `Rect`. Accepts any object that has `top`, `right`, `bottom` and `right` (eg `ClientRect`, `DOMRect`);
 
 ```js
 const spacing: Spacing = {
@@ -214,3 +210,81 @@ console.log(rect);
 }
 */
 ```
+
+### `expand`
+
+Used to expand a `Spacing`
+
+```js
+(target: Spacing, expandBy: Spacing) => Spacing;
+```
+
+```js
+const original: Spacing = {
+  top: 10,
+  left: 11,
+  right: 21,
+  bottom: 22,
+};
+
+const expandBy: Spacing = {
+  top: 1,
+  left: 2,
+  right: 3,
+  bottom: 4,
+};
+
+const expanded: Spacing = expand(original, expandBy);
+
+console.log(expanded);
+
+/*
+{
+  // pulled back
+  top: 8,
+  left: 8
+  // pushed forward
+  bottom: 22,
+  right: 22,
+}
+*/
+```
+
+### `shrink`
+
+Used to shrink a `Spacing`
+
+```js
+(target: Spacing, shrinkBy: Spacing) => Spacing;
+```
+
+```js
+const original: Spacing = {
+  top: 10,
+  left: 10,
+  right: 20,
+  bottom: 20,
+};
+
+const shrinkBy: Spacing = {
+  top: 2,
+  left: 2,
+  right: 2,
+  bottom: 2,
+};
+
+const smaller: Spacing = shrink(original, shrinkBy);
+
+console.log(smaller);
+
+/*
+{
+  // pushed forward
+  top: 12,
+  left: 12
+  // pulled back
+  bottom: 18,
+  right: 18,
+}
+*/
+```

babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: ['@babel/flow', ['@babel/env', { loose: true }]],
+  plugins: [
+    // used for stripping out the `invariant` messages in production builds
+    'dev-expression',
+  ],
+  comments: false,
+};

package.json

@@ -1,12 +1,25 @@
 {
   "name": "css-box-model",
   "version": "1.0.0",
-  "description": "Returns the css box model for a HTMLElement",
+  "description": "Get accurate and well named css box model information about an Element 📦",
   "author": "Alex Reardon <[email protected]>",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/atlassian/react-beautiful-dnd.git"
+  },
+  "bugs": {
+    "url": "https://github.com/atlassian/react-beautiful-dnd/issues"
+  },
   "keywords": [
     "css",
     "box model",
+    "css box model",
+    "getBoundingClientRect",
+    "DOMRect",
+    "ClientRect",
+    "Rect",
+    "Spacing",
     "DOM"
   ],
   "files": [
@@ -28,20 +41,24 @@
     "prepublishOnly": "yarn build"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-flow": "^6.23.0",
-    "flow-bin": "^0.75.0",
-    "jest": "^23.2.0",
-    "prettier": "1.13.7",
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-flow": "^7.0.0",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-jest": "^23.6.0",
+    "babel-plugin-dev-expression": "^0.2.1",
+    "flow-bin": "^0.83.0",
+    "jest": "^23.6.0",
+    "prettier": "1.14.3",
     "rimraf": "^2.6.2",
-    "rollup": "^0.62.0",
-    "rollup-plugin-babel": "^3.0.5",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-uglify": "^4.0.0"
+    "rollup": "^0.66.6",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-replace": "^2.1.0",
+    "rollup-plugin-uglify": "^6.0.0"
+  },
+  "dependencies": {
+    "tiny-invariant": "^1.0.1"
   }
 }

rollup.config.js

@@ -1,24 +1,28 @@
-// @flow
 import babel from 'rollup-plugin-babel';
 import commonjs from 'rollup-plugin-commonjs';
 import replace from 'rollup-plugin-replace';
 import { uglify } from 'rollup-plugin-uglify';
+import resolve from 'rollup-plugin-node-resolve';
 
 const input = 'src/index.js';
+const excludeAllExternals = id => !id.startsWith('.') && !id.startsWith('/');
+const extensions = ['.js', '.jsx'];
 
 export default [
   // ESM build
   {
     input,
     output: {
       file: 'dist/css-box-model.esm.js',
-      format: 'es',
+      format: 'esm',
     },
+    external: excludeAllExternals,
     plugins: [babel()],
   },
   // CommonJS build
   {
     input,
+    external: excludeAllExternals,
     output: {
       file: 'dist/css-box-model.cjs.js',
       format: 'cjs',
@@ -34,10 +38,11 @@ export default [
       name: 'cssBoxModel',
     },
     plugins: [
-      // Setting development env before running babel etc
-      replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
       babel(),
+      // used to include tiny-invariant
+      resolve({ extensions }),
       commonjs({ include: 'node_modules/**' }),
+      replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
     ],
   },
   // Universal module definition (UMD) build (production)
@@ -49,10 +54,11 @@ export default [
       name: 'cssBoxModel',
     },
     plugins: [
-      // Setting production env before running babel etc
-      replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
       babel(),
+      // used to include tiny-invariant
+      resolve({ extensions }),
       commonjs({ include: 'node_modules/**' }),
+      replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
       uglify(),
     ],
   },