grid-styled - npm Package Compare versions

Comparing version 2.0.0-12 to 3.0.0

dist/Box.js

@@ -6,8 +6,6 @@ 'use strict';
 });
-exports.order = exports.flex = undefined;
+exports.order = undefined;
 
-var _react = require('react');
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _react2 = _interopRequireDefault(_react);
-
 var _styledComponents = require('styled-components');
@@ -19,34 +17,29 @@
 
-var _propTypes = require('prop-types');
+var _div = require('./div');
 
-var _tagHoc = require('tag-hoc');
+var _div2 = _interopRequireDefault(_div);
 
-var _tagHoc2 = _interopRequireDefault(_tagHoc);
+var _theme = require('./theme');
 
-var _propTypes2 = require('./propTypes');
+var _theme2 = _interopRequireDefault(_theme);
 
-var _propTypes3 = _interopRequireDefault(_propTypes2);
-
-var _removeProps = require('./remove-props');
-
-var _removeProps2 = _interopRequireDefault(_removeProps);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var flex = exports.flex = (0, _styledSystem.responsiveStyle)('flex');
-var order = exports.order = (0, _styledSystem.responsiveStyle)('order');
+var order = exports.order = (0, _styledSystem.responsiveStyle)({
+  prop: 'order'
+});
 
-var Tag = (0, _tagHoc2.default)(_removeProps2.default);
-var Base = Tag('div');
+var Box = (0, _styledComponents2.default)(_div2.default)([], { boxSizing: 'border-box' }, _styledSystem.width, _styledSystem.space, _styledSystem.fontSize, _styledSystem.color, _styledSystem.flex, order);
 
-var Box = (0, _styledComponents2.default)(Base)([], { boxSizing: 'border-box' }, _styledSystem.width, _styledSystem.space, flex, order);
 Box.displayName = 'Box';
 
-var responsivePropType = (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string, _propTypes.array]);
+Box.defaultProps = {
+  theme: _theme2.default
+};
 
-Box.propTypes = Object.assign({}, _propTypes3.default, {
-  flex: responsivePropType,
-  order: responsivePropType
+Box.propTypes = _extends({}, _styledSystem.propTypes.width, _styledSystem.propTypes.space, _styledSystem.propTypes.fontSize, _styledSystem.propTypes.color, _styledSystem.propTypes.flex, {
+  // hack: the propTypes object should export the responsive type
+  order: _styledSystem.propTypes.width.width
 });
 
 exports.default = Box;

dist/Flex.js

@@ -7,18 +7,6 @@ 'use strict';
 
-var _react = require('react');
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
 var _styledSystem = require('styled-system');
 
-var _propTypes = require('prop-types');
-
-var _propTypes2 = require('./propTypes');
-
-var _propTypes3 = _interopRequireDefault(_propTypes2);
-
 var _Box = require('./Box');
@@ -30,27 +18,8 @@
 
-var wrap = (0, _styledSystem.responsiveStyle)('flex-wrap', 'wrap', 'wrap');
-var direction = (0, _styledSystem.responsiveStyle)('flex-direction', 'direction');
-var align = function align(props) {
-  return (0, _styledSystem.responsiveStyle)('align-items', 'align');
-};
-var justify = function justify(props) {
-  return (0, _styledSystem.responsiveStyle)('justify-content', 'justify');
-};
-var column = function column(props) {
-  return props.column ? 'flex-direction:column;' : null;
-};
+var Flex = _Box2.default.extend([], { display: 'flex' }, _styledSystem.flexWrap, _styledSystem.flexDirection, _styledSystem.alignItems, _styledSystem.justifyContent);
 
-var Flex = (0, _styledComponents2.default)(_Box2.default)([], { display: 'flex' }, wrap, column, direction, align, justify);
 Flex.displayName = 'Flex';
 
-var responsivePropType = (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string, _propTypes.array, _propTypes.bool]);
+Flex.propTypes = _extends({}, _styledSystem.propTypes.flexWrap, _styledSystem.propTypes.flexDirection, _styledSystem.propTypes.alignItems, _styledSystem.propTypes.justifyContent);
 
-Flex.propTypes = Object.assign({}, _propTypes3.default, {
-  wrap: responsivePropType,
-  direction: responsivePropType,
-  align: responsivePropType,
-  justify: responsivePropType,
-  column: _propTypes.bool
-});
-
 exports.default = Flex;

dist/index.js

@@ -16,11 +16,2 @@ 'use strict';
 
-var _Grid = require('./Grid');
-
-Object.defineProperty(exports, 'Grid', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Grid).default;
-  }
-});
-
 var _Flex = require('./Flex');
@@ -35,38 +26,20 @@
 
-var _Half = require('./Half');
+var _div = require('./div');
 
-Object.defineProperty(exports, 'Half', {
+Object.defineProperty(exports, 'div', {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_Half).default;
+    return _interopRequireDefault(_div).default;
   }
 });
 
-var _Third = require('./Third');
+var _theme = require('./theme');
 
-Object.defineProperty(exports, 'Third', {
+Object.defineProperty(exports, 'theme', {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_Third).default;
+    return _interopRequireDefault(_theme).default;
   }
 });
 
-var _Quarter = require('./Quarter');
-
-Object.defineProperty(exports, 'Quarter', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Quarter).default;
-  }
-});
-
-var _Golden = require('./Golden');
-
-Object.defineProperty(exports, 'Golden', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Golden).default;
-  }
-});
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package.json

 {
   "name": "grid-styled",
-  "version": "2.0.0-12",
+  "version": "3.0.0",
   "description": "Responsive React grid system built with styled-components",
@@ -10,4 +10,4 @@ "main": "dist/index.js",
     "cover": "nyc report --reporter=lcov --reporter=html",
-    "start": "webpack-dev-server",
-    "docs": "NODE_ENV=production webpack -p",
+    "start": "x0 dev docs/App.js",
+    "docs": "x0 build docs/App.js -d docs",
     "icon-dev": "repng docs/Icon.js --dev",
@@ -19,2 +19,3 @@ "icon": "repng docs/Icon.js -d 2000 -w 768 -h 768 -o docs -f icon"
     "styled-components",
+    "styled-system",
     "grid",
@@ -28,5 +29,5 @@ "flexbox",
   "devDependencies": {
+    "@compositor/x0": "^3.1.1",
     "ava": "^0.25.0",
     "babel-cli": "^6.26.0",
-    "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.1",
@@ -36,10 +37,4 @@ "babel-preset-react": "^6.24.1",
     "babel-register": "^6.26.0",
-    "funcup": "^1.0.0-1",
-    "glamor": "^2.20.40",
-    "hidden-styled": "^1.0.0-0",
-    "html-webpack-plugin": "^2.30.1",
     "nyc": "^11.4.1",
-    "raw-loader": "^0.5.1",
     "react": "^16.2.0",
-    "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.2.0",
@@ -49,12 +44,9 @@ "react-live": "^1.9.2",
     "react-x-ray": "^1.0.0-4",
+    "refunk": "^2.2.4",
     "reline": "^1.0.0-beta.3",
-    "repng": "^2.0.0-alpha.1",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.11.1"
+    "repng": "^2.0.0-alpha.1"
   },
   "dependencies": {
-    "prop-types": "^15.6.0",
-    "styled-components": "^3.1.5",
-    "styled-system": "^1.1.1",
-    "tag-hoc": "^1.0.0"
+    "styled-components": ">=2.0 || >=3.0",
+    "styled-system": "^1.1.1"
   },
@@ -61,0 +53,0 @@ "ava": {

README.md

 
 # Grid Styled
 
-Responsive React grid system built with [styled-components](https://github.com/styled-components/styled-components)
+Responsive React grid system built with
+[styled-components][sc] and [styled-system][system]
 
 http://jxnblk.com/grid-styled
 
-[![Build Status](https://travis-ci.org/jxnblk/grid-styled.svg?branch=master)](https://travis-ci.org/jxnblk/grid-styled)
+[![Build Status][build-badge]][build-status]
 
+[build-badge]: https://img.shields.io/travis/jxnblk/grid-styled/master.svg?style=flat-square
+[build-status]: https://travis-ci.org/jxnblk/grid-styled
+
 ## Getting Started
@@ -104,13 +108,3 @@
 
-```jsx
-// Display inline-block grid
-import { Grid } from 'grid-styled'
 
-<div>
-  <Grid width={1/2}>Half</Grid>
-  <Grid width={1/2}>Half</Grid>
-</div>
-```
-
-
 ## `<Box />`
@@ -172,10 +166,2 @@
 
-#### `is` (Component|string)
-
-Sets the underlying HTML element.
-
-```jsx
-<Box is='section' />
-```
-
 ## `<Flex />`
@@ -190,11 +176,4 @@
 - `wrap` (boolean|array) sets `flex-wrap: wrap`
-- `column` (boolean) shortcut for `flex-direction: column`
 
 
-## `<Grid />`
-
-The Grid component extends the Box component and sets display inline-block
-for an alternative to flexbox layout.
-
-
 ## Responsive Styles
@@ -205,3 +184,3 @@
 media query from that breakpoint and up.
-The Box component uses [styled-system](https://github.com/jxnblk/styled-system) for these props.
+The Box component uses [styled-system][system] for these props.
 
@@ -247,5 +226,6 @@ ```jsx
   max-width: 1024px;
-  margin-left: auto;
-  margin-right: auto;
 `
+Container.defaultProps = {
+  mx: 'auto'
+}
 ```
@@ -293,3 +273,3 @@
       space: [ 0, 6, 12, 18, 24 ],
-      breakpoints: [ 32, 48, 64 ]
+      breakpoints: [ '32em', '48em', '64em' ]
     }}>
@@ -303,3 +283,3 @@ <div>
 
-### Breakpoints
+**Breakpoints**
 
@@ -310,11 +290,10 @@ The Grid component uses a mobile-first responsive approach,
 
-To customize, provide an array of numbers that will be converted to ems.
+To customize, provide an array of string values that will be converted to media queries.
 
+**Spacing Scale**
 
-### Spacing Scale
-
 Grid Styled components' margin and padding props use a 4 step spacing scale to help
 keep things aligned and keep layouts consistent.
 
-The default scale is based on an 8px/powers-of-two grid: `[ 0, 8, 16, 32, 64 ]`,
+The default scale is based on an 8px/powers-of-two grid: `[ 0, 4, 8, 16, 32, 64, 128, 256, 512 ]`,
 which helps keep spacing consistent and elements aligned even when nesting components.
@@ -324,6 +303,9 @@
 
+- [styled-system][system]
 - [Rebass](https://github.com/jxnblk/rebass)
-- [styled-system](https://github.com/jxnblk/styled-system)
-- [styled-components](https://github.com/styled-components/styled-components)
+- [styled-components][sc]
 
+[sc]: https://github.com/styled-components/styled-components
+[system]: https://github.com/jxnblk/styled-system
+
 [MIT License](LICENSE.md)

src/Box.js

@@ -1,35 +0,44 @@
-import React from 'react'
 import styled from 'styled-components'
-import { space, width, responsiveStyle } from 'styled-system'
-import { number, string, array, oneOfType } from 'prop-types'
-import tag from 'tag-hoc'
-import propTypes from './propTypes'
-import removeProps from './remove-props'
+import {
+  space,
+  width,
+  flex,
+  color,
+  fontSize,
+  responsiveStyle,
+  propTypes
+} from 'styled-system'
+import div from './div'
+import theme from './theme'
 
-export const flex = responsiveStyle('flex')
-export const order = responsiveStyle('order')
+export const order = responsiveStyle({
+  prop: 'order'
+})
 
-const Tag = tag(removeProps)
-const Base = Tag('div')
-
-const Box = styled(Base)([],
+const Box = styled(div)([],
   { boxSizing: 'border-box' },
   width,
   space,
+  fontSize,
+  color,
   flex,
   order
 )
+
 Box.displayName = 'Box'
 
-const responsivePropType = oneOfType([
-  number,
-  string,
-  array
-])
+Box.defaultProps = {
+  theme
+}
 
-Box.propTypes = Object.assign({}, propTypes, {
-  flex: responsivePropType,
-  order: responsivePropType
-})
+Box.propTypes = {
+  ...propTypes.width,
+  ...propTypes.space,
+  ...propTypes.fontSize,
+  ...propTypes.color,
+  ...propTypes.flex,
+  // hack: the propTypes object should export the responsive type
+  order: propTypes.width.width
+}
 
 export default Box

src/Flex.js

@@ -1,39 +0,27 @@
-import React from 'react'
-import styled from 'styled-components'
-import { responsiveStyle } from 'styled-system'
-import { oneOfType, number, string, array, bool } from 'prop-types'
-import propTypes from './propTypes'
+import {
+  flexWrap,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  propTypes
+} from 'styled-system'
 import Box from './Box'
 
-const wrap = responsiveStyle('flex-wrap', 'wrap', 'wrap')
-const direction = responsiveStyle('flex-direction', 'direction')
-const align = props => responsiveStyle('align-items', 'align')
-const justify = props => responsiveStyle('justify-content', 'justify')
-const column = props => props.column ? `flex-direction:column;` : null
-
-const Flex = styled(Box)([],
+const Flex = Box.extend([],
   { display: 'flex' },
-  wrap,
-  column,
-  direction,
-  align,
-  justify,
+  flexWrap,
+  flexDirection,
+  alignItems,
+  justifyContent,
 )
+
 Flex.displayName = 'Flex'
 
-const responsivePropType = oneOfType([
-  number,
-  string,
-  array,
-  bool
-])
+Flex.propTypes = {
+  ...propTypes.flexWrap,
+  ...propTypes.flexDirection,
+  ...propTypes.alignItems,
+  ...propTypes.justifyContent
+}
 
-Flex.propTypes = Object.assign({}, propTypes, {
-  wrap: responsivePropType,
-  direction: responsivePropType,
-  align: responsivePropType,
-  justify: responsivePropType,
-  column: bool
-})
-
 export default Flex

src/index.js

 export { default as Box } from './Box'
-export { default as Grid } from './Grid'
 export { default as Flex } from './Flex'
-export { default as Half } from './Half'
-export { default as Third } from './Third'
-export { default as Quarter } from './Quarter'
-export { default as Golden } from './Golden'
+export { default as div } from './div'
+export { default as theme } from './theme'

New alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

decreased by-50%

Dev dependency count

16

decreased by-30.43%

Number of low quality alerts

1

decreased by-50%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

21044

decreased by-59.84%

Number of package files

22

decreased by-55.1%

Lines of code

331

decreased by-68.39%

Number of medium maintenance alerts

1

increased byInfinity%

Number of lines in readme file

303

decreased by-5.61%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@emotion/is-prop-valid@1.2.2(transitive)

• + Added@emotion/memoize@0.8.1(transitive)

• + Added@emotion/unitless@0.8.1(transitive)

• + Added@types/stylis@4.2.5(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addednanoid@3.3.8(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.49(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedreact@19.0.0(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedscheduler@0.25.0(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedstyled-components@6.1.15(transitive)

• + Addedstylis@4.3.2(transitive)

• + Addedtslib@2.6.2(transitive)

• - Removedprop-types@^15.6.0

• - Removedtag-hoc@^1.0.0

• - Removedasap@2.0.6(transitive)

• - Removedbase64-js@1.5.1(transitive)

• - Removedbuffer@5.7.1(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcss-to-react-native@2.3.2(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removedhas-flag@1.0.0(transitive)

• - Removedhoist-non-react-statics@2.5.5(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedieee754@1.2.1(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpostcss-value-parser@3.3.1(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedstyled-components@3.4.10(transitive)

• - Removedstylis@3.5.4(transitive)

• - Removedstylis-rule-sheet@0.0.10(transitive)

• - Removedsupports-color@3.2.3(transitive)

• - Removedtag-hoc@1.0.0(transitive)

• - Removedua-parser-js@0.7.40(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedstyled-components@>=2.0 || >=3.0