ui-box - npm Package Compare versions

Comparing version 5.0.0 to 5.0.1

dist/src/box.js

@@ -49,2 +49,1 @@ "use strict";
 exports.default = Box;
-//# sourceMappingURL=box.js.map

dist/src/cache.js

@@ -33,2 +33,1 @@ "use strict";
 exports.clear = clear;
-//# sourceMappingURL=cache.js.map

dist/src/enhance-props.js

@@ -47,2 +47,1 @@ "use strict";
 exports.default = enhanceProps;
-//# sourceMappingURL=enhance-props.js.map

dist/src/enhancers/background.js

@@ -81,2 +81,1 @@ "use strict";
 };
-//# sourceMappingURL=background.js.map

dist/src/enhancers/border-radius.js

@@ -71,2 +71,1 @@ "use strict";
 };
-//# sourceMappingURL=border-radius.js.map

dist/src/enhancers/borders.js

@@ -175,2 +175,1 @@ "use strict";
 };
-//# sourceMappingURL=borders.js.map

dist/src/enhancers/box-shadow.js

@@ -22,2 +22,1 @@ "use strict";
 };
-//# sourceMappingURL=box-shadow.js.map

dist/src/enhancers/dimensions.js

@@ -56,2 +56,1 @@ "use strict";
 };
-//# sourceMappingURL=dimensions.js.map

dist/src/enhancers/flex.js

@@ -155,2 +155,1 @@ "use strict";
 };
-//# sourceMappingURL=flex.js.map

dist/src/enhancers/grid.js

@@ -177,2 +177,1 @@ "use strict";
 };
-//# sourceMappingURL=grid.js.map

dist/src/enhancers/index.js

@@ -53,2 +53,1 @@ "use strict";
 exports.propEnhancers = Object.assign({}, background.propEnhancers, borderRadius.propEnhancers, borders.propEnhancers, boxShadow.propEnhancers, dimensions.propEnhancers, flex.propEnhancers, grid.propEnhancers, interaction.propEnhancers, layout.propEnhancers, list.propEnhancers, opacity.propEnhancers, outline.propEnhancers, overflow.propEnhancers, position.propEnhancers, resize.propEnhancers, spacing.propEnhancers, text.propEnhancers, transform.propEnhancers, transition.propEnhancers);
-//# sourceMappingURL=index.js.map

dist/src/enhancers/interaction.js

@@ -46,2 +46,1 @@ "use strict";
 };
-//# sourceMappingURL=interaction.js.map

dist/src/enhancers/layout.js

@@ -67,2 +67,1 @@ "use strict";
 };
-//# sourceMappingURL=layout.js.map

dist/src/enhancers/list.js

@@ -45,2 +45,1 @@ "use strict";
 };
-//# sourceMappingURL=list.js.map

dist/src/enhancers/opacity.js

@@ -22,2 +22,1 @@ "use strict";
 };
-//# sourceMappingURL=opacity.js.map

dist/src/enhancers/outline.js

@@ -22,2 +22,1 @@ "use strict";
 };
-//# sourceMappingURL=outline.js.map

dist/src/enhancers/overflow.js

@@ -33,2 +33,1 @@ "use strict";
 };
-//# sourceMappingURL=overflow.js.map

dist/src/enhancers/position.js

@@ -51,2 +51,1 @@ "use strict";
 };
-//# sourceMappingURL=position.js.map

dist/src/enhancers/resize.js

@@ -21,2 +21,1 @@ "use strict";
 };
-//# sourceMappingURL=resize.js.map

dist/src/enhancers/spacing.js

@@ -122,2 +122,1 @@ "use strict";
 };
-//# sourceMappingURL=spacing.js.map

dist/src/enhancers/text.js

@@ -154,2 +154,1 @@ "use strict";
 };
-//# sourceMappingURL=text.js.map

dist/src/enhancers/transform.js

@@ -30,2 +30,1 @@ "use strict";
 };
-//# sourceMappingURL=transform.js.map

dist/src/enhancers/transition.js

@@ -54,2 +54,1 @@ "use strict";
 };
-//# sourceMappingURL=transition.js.map

dist/src/expand-aliases.js

@@ -26,2 +26,1 @@ "use strict";
 exports.default = expandAliases;
-//# sourceMappingURL=expand-aliases.js.map

dist/src/get-class-name.js

@@ -35,2 +35,1 @@ "use strict";
 exports.default = getClassName;
-//# sourceMappingURL=get-class-name.js.map

dist/src/get-css.js

@@ -47,2 +47,1 @@ "use strict";
 exports.default = getCss;
-//# sourceMappingURL=get-css.js.map

dist/src/get-safe-value.js

@@ -13,2 +13,1 @@ "use strict";
 exports.default = getSafeValue;
-//# sourceMappingURL=get-safe-value.js.map

dist/src/index.js

@@ -57,2 +57,1 @@ "use strict";
 exports.clearStyles = clearStyles;
-//# sourceMappingURL=index.js.map

dist/src/prefixer.js

@@ -32,2 +32,1 @@ "use strict";
 exports.default = prefixer;
-//# sourceMappingURL=prefixer.js.map

dist/src/styles.js

@@ -24,2 +24,1 @@ "use strict";
 exports.clear = clear;
-//# sourceMappingURL=styles.js.map

dist/src/types/box-types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=box-types.js.map

dist/src/types/enhancers.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=enhancers.js.map

dist/src/utils/decamelize.js

@@ -13,2 +13,1 @@ "use strict";
 exports.default = decamelize;
-//# sourceMappingURL=decamelize.js.map

dist/src/utils/regex.js

@@ -5,2 +5,1 @@ "use strict";
 exports.unsafeClassNameCharacters = /[^_a-zA-Z0-9-]/g;
-//# sourceMappingURL=regex.js.map

dist/src/utils/safeHref.js

@@ -61,2 +61,1 @@ "use strict";
 exports.extractAnchorProps = extractAnchorProps;
-//# sourceMappingURL=safeHref.js.map

dist/src/utils/split-box-props.js

@@ -12,2 +12,1 @@ "use strict";
 exports.default = splitBoxProps;
-//# sourceMappingURL=split-box-props.js.map

dist/src/utils/split-props.js

@@ -20,2 +20,1 @@ "use strict";
 exports.default = splitProps;
-//# sourceMappingURL=split-props.js.map

dist/src/utils/style-sheet.js

@@ -112,2 +112,1 @@ "use strict";
 exports.default = CustomStyleSheet;
-//# sourceMappingURL=style-sheet.js.map

dist/src/value-to-string.js

@@ -7,2 +7,1 @@ "use strict";
 exports.default = valueToString;
-//# sourceMappingURL=value-to-string.js.map

package.json

 {
   "name": "ui-box",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Blazing Fast React UI Primitive",
@@ -5,0 +5,0 @@ "contributors": [

README.md

@@ -8,5 +8,5 @@ <div align="center">
 	<br>
-  <a href="https://circleci.com/gh/segmentio/ui-box/tree/master">
-    <img src="https://circleci.com/gh/segmentio/ui-box/tree/master.svg?style=svg" alt="Build Status">
-  </a>
+    <a href="https://github.com/segmentio/ui-box/actions">
+    <img src="https://github.com/segmentio/ui-box/actions/workflows/ci.yml/badge.svg">
+    </a>
   <br>
@@ -31,17 +31,14 @@ <br>
 ```jsx
-import Box from 'ui-box'
+import Box from "ui-box";
 
 function Button(props) {
-  return (
-    <Box
-      is="button"
-      padding="10px"
-      background="red"
-      {...props}
-    />
-  )
+  return <Box is="button" padding="10px" background="red" {...props} />;
 }
 
 function Example() {
-  return <Button disabled margin="10px">Hi</Button>
+  return (
+    <Button disabled margin="10px">
+      Hi
+    </Button>
+  );
 }
@@ -63,4 +60,7 @@ ```
 E.g:
+
 ```jsx
-<Box is={Link} to="/login">Login</Box>
+<Box is={Link} to="/login">
+  Login
+</Box>
 ```
@@ -84,144 +84,144 @@
 
-* `alignContent`
-* `alignItems`
-* `alignSelf`
-* `background`
-* `backgroundBlendMode`
-* `backgroundClip`
-* `backgroundColor`
-* `backgroundImage`
-* `backgroundOrigin`
-* `backgroundPosition`
-* `backgroundRepeat`
-* `backgroundSize`
-* `border`
-* `borderBottom`
-* `borderBottomColor`
-* `borderBottomLeftRadius`
-* `borderBottomRightRadius`
-* `borderBottomStyle`
-* `borderBottomWidth`
-* `borderColor`
-* `borderLeft`
-* `borderLeftColor`
-* `borderLeftStyle`
-* `borderLeftWidth`
-* `borderRadius`
-* `borderRight`
-* `borderRightColor`
-* `borderRightStyle`
-* `borderRightWidth`
-* `borderStyle`
-* `borderTop`
-* `borderTopColor`
-* `borderTopLeftRadius`
-* `borderTopRightRadius`
-* `borderTopStyle`
-* `borderTopWidth`
-* `borderWidth`
-* `bottom`
-* `boxShadow`
-* `boxSizing` - Set to `border-box` by default.
-* `clear`
-* `color`
-* `columnGap`
-* `cursor`
-* `display`
-* `flex`
-* `flexBasis`
-* `flexDirection`
-* `flexFlow`
-* `flexGrow`
-* `flexShrink`
-* `flexWrap`
-* `float`
-* `font`
-* `fontFamily`
-* `fontSize`
-* `fontStyle`
-* `fontVariant`
-* `fontWeight`
-* `gap`
-* `grid`
-* `gridArea`
-* `gridAutoColumns`
-* `gridAutoFlow`
-* `gridAutoRows`
-* `gridColumn`
-* `gridColumnEnd`
-* `gridColumnGap`
-* `gridColumnStart`
-* `gridGap`
-* `gridRow`
-* `gridRowEnd`
-* `gridRowGap`
-* `gridRowStart`
-* `gridTemplate`
-* `gridTemplateAreas`
-* `gridTemplateColumns`
-* `gridTemplateRows`
-* `height`
-* `justifyContent`
-* `justifyItems`
-* `justifySelf`
-* `left`
-* `letterSpacing`
-* `lineHeight`
-* `listStyle`
-* `listStyleImage`
-* `listStylePosition`
-* `listStyleType`
-* `margin`
-* `marginBottom`
-* `marginLeft`
-* `marginRight`
-* `marginTop`
-* `marginX` - Sets `marginLeft` and `marginRight` to the same value.
-* `marginY` - Sets `marginTop` and `marginBottom` to the same value.
-* `maxHeight`
-* `maxWidth`
-* `minHeight`
-* `minWidth`
-* `opacity`
-* `order`
-* `outline`
-* `overflow`
-* `overflowX`
-* `overflowY`
-* `padding`
-* `paddingBottom`
-* `paddingLeft`
-* `paddingRight`
-* `paddingTop`
-* `paddingX` - Sets `paddingLeft` and `paddingRight` to the same value.
-* `paddingY` - Sets `paddingTop` and `paddingBottom` to the same value.
-* `placeContent`
-* `placeItems`
-* `placeSelf`
-* `pointerEvents`
-* `position`
-* `resize`
-* `right`
-* `rowGap`
-* `textAlign`
-* `textDecoration`
-* `textOverflow`
-* `textShadow`
-* `textTransform`
-* `top`
-* `transform`
-* `transformOrigin`
-* `transition`
-* `transitionDelay`
-* `transitionDuration`
-* `transitionProperty`
-* `transitionTimingFunction`
-* `userSelect`
-* `verticalAlign`
-* `visibility`
-* `whiteSpace`
-* `width`
-* `wordBreak`
-* `wordWrap`
-* `zIndex`
+- `alignContent`
+- `alignItems`
+- `alignSelf`
+- `background`
+- `backgroundBlendMode`
+- `backgroundClip`
+- `backgroundColor`
+- `backgroundImage`
+- `backgroundOrigin`
+- `backgroundPosition`
+- `backgroundRepeat`
+- `backgroundSize`
+- `border`
+- `borderBottom`
+- `borderBottomColor`
+- `borderBottomLeftRadius`
+- `borderBottomRightRadius`
+- `borderBottomStyle`
+- `borderBottomWidth`
+- `borderColor`
+- `borderLeft`
+- `borderLeftColor`
+- `borderLeftStyle`
+- `borderLeftWidth`
+- `borderRadius`
+- `borderRight`
+- `borderRightColor`
+- `borderRightStyle`
+- `borderRightWidth`
+- `borderStyle`
+- `borderTop`
+- `borderTopColor`
+- `borderTopLeftRadius`
+- `borderTopRightRadius`
+- `borderTopStyle`
+- `borderTopWidth`
+- `borderWidth`
+- `bottom`
+- `boxShadow`
+- `boxSizing` - Set to `border-box` by default.
+- `clear`
+- `color`
+- `columnGap`
+- `cursor`
+- `display`
+- `flex`
+- `flexBasis`
+- `flexDirection`
+- `flexFlow`
+- `flexGrow`
+- `flexShrink`
+- `flexWrap`
+- `float`
+- `font`
+- `fontFamily`
+- `fontSize`
+- `fontStyle`
+- `fontVariant`
+- `fontWeight`
+- `gap`
+- `grid`
+- `gridArea`
+- `gridAutoColumns`
+- `gridAutoFlow`
+- `gridAutoRows`
+- `gridColumn`
+- `gridColumnEnd`
+- `gridColumnGap`
+- `gridColumnStart`
+- `gridGap`
+- `gridRow`
+- `gridRowEnd`
+- `gridRowGap`
+- `gridRowStart`
+- `gridTemplate`
+- `gridTemplateAreas`
+- `gridTemplateColumns`
+- `gridTemplateRows`
+- `height`
+- `justifyContent`
+- `justifyItems`
+- `justifySelf`
+- `left`
+- `letterSpacing`
+- `lineHeight`
+- `listStyle`
+- `listStyleImage`
+- `listStylePosition`
+- `listStyleType`
+- `margin`
+- `marginBottom`
+- `marginLeft`
+- `marginRight`
+- `marginTop`
+- `marginX` - Sets `marginLeft` and `marginRight` to the same value.
+- `marginY` - Sets `marginTop` and `marginBottom` to the same value.
+- `maxHeight`
+- `maxWidth`
+- `minHeight`
+- `minWidth`
+- `opacity`
+- `order`
+- `outline`
+- `overflow`
+- `overflowX`
+- `overflowY`
+- `padding`
+- `paddingBottom`
+- `paddingLeft`
+- `paddingRight`
+- `paddingTop`
+- `paddingX` - Sets `paddingLeft` and `paddingRight` to the same value.
+- `paddingY` - Sets `paddingTop` and `paddingBottom` to the same value.
+- `placeContent`
+- `placeItems`
+- `placeSelf`
+- `pointerEvents`
+- `position`
+- `resize`
+- `right`
+- `rowGap`
+- `textAlign`
+- `textDecoration`
+- `textOverflow`
+- `textShadow`
+- `textTransform`
+- `top`
+- `transform`
+- `transformOrigin`
+- `transition`
+- `transitionDelay`
+- `transitionDuration`
+- `transitionProperty`
+- `transitionTimingFunction`
+- `userSelect`
+- `verticalAlign`
+- `visibility`
+- `whiteSpace`
+- `width`
+- `wordBreak`
+- `wordWrap`
+- `zIndex`
 
@@ -284,18 +284,18 @@ ##### Other props
 
-* `background`
-* `borderRadius`
-* `borders`
-* `boxShadow`
-* `dimensions`
-* `flex`
-* `interaction`
-* `layout`
-* `list`
-* `opacity`
-* `overflow`
-* `position`
-* `spacing`
-* `text`
-* `transform`
-* `transition`
+- `background`
+- `borderRadius`
+- `borders`
+- `boxShadow`
+- `dimensions`
+- `flex`
+- `interaction`
+- `layout`
+- `list`
+- `opacity`
+- `overflow`
+- `position`
+- `spacing`
+- `text`
+- `transform`
+- `transition`
 
@@ -307,4 +307,4 @@ ### Classname prefix
 ```js
-import { setClassNamePrefix } from 'ui-box'
-setClassNamePrefix('📦')
+import { setClassNamePrefix } from "ui-box";
+setClassNamePrefix("📦");
 ```
@@ -317,6 +317,6 @@
 ```js
-import { configureSafeHref } from 'ui-box'
+import { configureSafeHref } from "ui-box";
 configureSafeHref({
   enabled: true, // the default behavior
-})
+});
 ```
@@ -335,3 +335,5 @@
 ```jsx
-<Box is="a" href="javascript:alert('hi')" allowUnsafeHref>This is unsafe</Box>
+<Box is="a" href="javascript:alert('hi')" allowUnsafeHref>
+  This is unsafe
+</Box>
 ```
@@ -344,12 +346,17 @@
 For example:
+
 ```js
-'use strict'
-const React = require('react')
-const ReactDOMServer = require('react-dom/server')
-const {default: Box, extractStyles} = require('.')
+"use strict";
+const React = require("react");
+const ReactDOMServer = require("react-dom/server");
+const { default: Box, extractStyles } = require(".");
 
-const element = React.createElement(Box, {margin: '10px', color: 'red'}, 'hi')
+const element = React.createElement(
+  Box,
+  { margin: "10px", color: "red" },
+  "hi"
+);
 
-const html = ReactDOMServer.renderToString(element)
-const {styles, cache} = extractStyles()
+const html = ReactDOMServer.renderToString(element);
+const { styles, cache } = extractStyles();
 
@@ -375,4 +382,4 @@ const page = `
 </html>
-`
-console.log(page)
+`;
+console.log(page);
 ```
@@ -382,8 +389,8 @@
 
-* `yarn dev` starts the development Storybook at http://localhost:9009/.
-* `yarn test` runs the linter, unit tests and code coverage.
-* `yarn ava -w` runs the unit tests in watch mode.
-* `yarn ava -u` updates the snapshot tests.
-* `yarn build` transpiles the JavaScript files.
-* `yarn release` releases a new version (requires `np` to be installed globally).
+- `yarn dev` starts the development Storybook at http://localhost:9009/.
+- `yarn test` runs the linter, unit tests and code coverage.
+- `yarn ava -w` runs the unit tests in watch mode.
+- `yarn ava -u` updates the snapshot tests.
+- `yarn build` transpiles the JavaScript files.
+- `yarn release` releases a new version (requires `np` to be installed globally).
 
@@ -390,0 +397,0 @@ ## License

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

391

increased by1.82%

Worsened metrics

Total package byte prevSize

104333

decreased by-36.75%

Number of package files

81

decreased by-32.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes