styled-components-modifiers - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

dist/utils/modifiedStyles.js

@@ -8,10 +8,6 @@ 'use strict';
 
-var _lodash = require('lodash.keys');
+var _lodash = require('lodash.isobject');
 
 var _lodash2 = _interopRequireDefault(_lodash);
 
-var _lodash3 = require('lodash.mapvalues');
-
-var _lodash4 = _interopRequireDefault(_lodash3);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,15 +27,7 @@
 
-  var modifierValues = (0, _lodash4.default)(modifierConfig, function (config) {
-    return config(componentProps);
-  });
-
-  var stylesArr = (0, _lodash2.default)(modifierConfig).reduce(function (acc, modifierName) {
-    var config = modifierValues[modifierName];
-    var styles = modifierProps.includes(modifierName) ? config.styles : config.defaultStyles;
-
-    if (process.env.NODE_ENV !== 'production' && config.defaultStyles) {
-      console.warn('The ' + modifierName + ' config contains defaultStyles. This functionality is deprecated and will be removed in version 0.1.0');
-    }
-
-    return styles ? acc.concat([styles]) : acc;
+  var stylesArr = modifierProps.reduce(function (acc, modifierName) {
+    var modifierFunc = modifierConfig[modifierName];
+    var config = modifierFunc(componentProps);
+    var styles = (0, _lodash2.default)(config) ? config.styles : config;
+    return acc.concat(styles);
   }, []);
@@ -46,0 +34,0 @@

package.json

 {
   "name": "styled-components-modifiers",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "A library that enables BEM flavored modifiers to styled components",
@@ -8,3 +8,3 @@ "main": "dist/index.js",
     "type": "git",
-    "url": "git+https://github.com/Decisiv/Development/styled-components-modifiers.git"
+    "url": "https://github.com/Decisiv/styled-components-modifiers.git"
   },
@@ -21,3 +21,5 @@ "keywords": [
   ],
-  "contributors" : [ "UI Platform Development Team at Decisiv, Inc." ],
+  "contributors": [
+    "UI Platform Development Team at Decisiv, Inc."
+  ],
   "scripts": {
@@ -28,6 +30,7 @@ "build": "babel lib -d dist --ignore *__tests__/",
     "prebuild": "npm run build:clean && npm run lint && npm run test",
-    "prepublish": "npm run build",
     "review": "npm run lint && npm test",
     "test": "jest",
-    "test:coverage:report": "opn coverage/lcov-report/index.html"
+    "test:coverage:report": "opn coverage/lcov-report/index.html",
+    "lint:ci": "eslint --format junit -o reports/junit/js-lint-results.xml lib/**",
+    "test:ci": "cross-env JEST_JUNIT_OUTPUT=reports/junit/js-test-results.xml jest --ci --testResultsProcessor='./node_modules/jest-junit'"
   },
@@ -43,4 +46,4 @@ "peerDependencies": {
     "lodash.iserror": "^3.1.1",
+    "lodash.isobject": "^3.0.2",
     "lodash.keys": "^4.2.0",
-    "lodash.mapvalues": "^4.6.0",
     "lodash.uniq": "^4.5.0"
@@ -50,12 +53,14 @@ },
     "babel-cli": "^6.24.1",
-    "babel-eslint": "^7.2.0",
-    "babel-preset-latest": "^6.24.0",
+    "babel-eslint": "^8.0.1",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-stage-0": "^6.24.1",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb-base": "^11.2.0",
+    "cross-env": "^5.0.5",
+    "eslint": "^4.8.0",
+    "eslint-config-airbnb-base": "^12.0.2",
     "eslint-plugin-import": "^2.7.0",
-    "jest": "^20.0.4",
+    "jest": "^21.2.1",
+    "jest-junit": "^3.1.0",
     "opn-cli": "^3.1.0",
-    "prop-types": "^15.5.10",
-    "rimraf": "^2.6.1"
+    "prop-types": "^15.6.0",
+    "rimraf": "^2.6.2"
   },
@@ -62,0 +67,0 @@ "jest": {

README.md

 # Styled Components Modifiers
 
+[![CircleCI master build](https://img.shields.io/circleci/project/github/Decisiv/styled-components-modifiers/master.svg)](https://circleci.com/gh/Decisiv/styled-components-modifiers)
+[![npm version](https://img.shields.io/npm/v/styled-components-modifiers.svg)](https://www.npmjs.com/package/styled-components-modifiers)
+[![npm downloads](https://img.shields.io/npm/dt/styled-components-modifiers.svg)](https://www.npmjs.com/package/styled-components-modifiers)
+
+
 Styled Components are incredibly useful when building an application, but the community lacks guidelines and best practices for how to structure, organize, and modify a component library. Fortunately, the CSS ecosystem has several solutions for this, including the very well-thought-out [Block, Element, Modifier (BEM) conventions](http://getbem.com).
@@ -7,2 +12,18 @@
 
+## Installation
+
+This package is available on npm as `styled-components-modifiers`, and you can find it [here](https://www.npmjs.com/package/styled-components-modifiers).
+
+To install the latest stable version with `yarn`:
+
+```sh
+$ yarn add styled-components-modifiers
+```
+
+...or with `npm`:
+
+```sh
+$ npm install styled-components-modifiers --save
+```
+
 ## Blocks and Elements
@@ -17,3 +38,3 @@
   // Define your Icon styled component (the Element)
-  const Icon = styled(FontAwesome);
+  const Icon = styled(FontAwesome)``;
 
@@ -49,3 +70,3 @@ // Add the Icon as a property of the Button
 
-The core of `styled-components-modifiers` is a modifier configuration object. The _keys_ in this object become the available flags that can be passed to the component's `modifiers`  prop. Each _value_ in the configuration object is a function that returns an object with a `styles` key.
+The core of `styled-components-modifiers` is a modifier configuration object. The _keys_ in this object become the available flags that can be passed to the component's `modifiers`  prop. Each _value_ defines a function that returns a CSS style string.
 
@@ -58,10 +79,9 @@ For our demo, let's first set up a modifier configuration object:
   // Here, we destructure the theme from the argument for use within the modifier styling.
-  disabled: ({ theme }) => ({
-    // The `styles` in a definition are applied any time the modifier is used.
-    styles: `
-      background-color: ${theme.colors.grey_400};
-      color: ${theme.colors.grey_100};
-    `,
-  }),
+  disabled: ({ theme }) => `
+    // These styles are applied any time this modifier is used.
+    background-color: ${theme.colors.chrome_400};
+    color: ${theme.colors.chrome_100};
+  `,
 
+  // Alternatively, you can return an object with your styles under the key `styles`.
   success: ({ theme }) => ({
@@ -73,14 +93,10 @@ styles: `
 
-  warning: ({ theme }) => ({
-    styles: `
-      background-color: ${theme.colors.warning};
-    `,
-  }),
+  warning: ({ theme }) => `
+    background-color: ${theme.colors.warning};
+  `,
 
-  large: () => ({
-    styles: `
-      height: 3em;
-      width: 6em;
-    `,
-  }),
+  large: () => `
+    height: 3em;
+    width: 6em;
+  `,
 };
@@ -96,6 +112,5 @@ ```
 const Button = styled.button`
-  // Any styles that won't change or may be overruled can go
-  // above where you apply the style modifiers.
-  // In BEM, this would be the styles you apply in either the
-  // Block or Element class's primary definition
+  // Any styles that won't change or may be overruled can go above where you
+  // apply the style modifiers. In BEM, these would be the styles you apply in
+  // either the Block or Element class's primary definition
   font-size: 24px;
@@ -115,3 +130,3 @@ padding: 16px
 
-Applying modifiers when rendering the component is as simple as providing a `modifiers` prop. The prop should be an array of strings representing the keys in the modifier configuration object you wish to apply.
+Applying modifiers when rendering the component is as simple as providing a `modifiers` prop. The prop should be an array of strings that correspond to keys in the modifier configuration object applied to the component.
 
@@ -179,2 +194,3 @@ ```jsx
   modifiers: styleModifierPropTypes(MODIFIER_CONFIG),
+
   // You can also validate the responsive modifier flags:
@@ -201,3 +217,3 @@ responsiveModifiers: responsiveStyleModifierPropTypes(MODIFIER_CONFIG),
 
-So, for example, when `Button` receives a prop `size` with a value equal to `medium`, the modifiers `success` and `large` will be applied to the `Button`. If `size` does not match any key in the `responsiveModifiers`, _no_ modifiers will be applied.
+So, for example, when `Button` receives a prop `size` with a value equal to `medium`, the modifiers `success` and `large` will be applied to the `Button`. If `size` does not match any key in the `responsiveModifiers`, _no_ additional modifiers will be applied. Your normal `modifiers` array will still work exactly the same.
 
@@ -222,6 +238,6 @@ Tada! Responsive styling!
 
-We are thankful for any contributions made by the community. By contributing you agree to abide by the Code of Conduct in our [Contributing Guidelines](.github/CONTRIBUTING.md).
+We are thankful for any contributions made by the community. By contributing you agree to abide by the Code of Conduct in our [Contributing Guidelines](https://github.com/Decisiv/styled-components-modifiers/blob/master/.github/CONTRIBUTING.md).
 
 ## License
 
-[MIT](LICENSE)
+[MIT](https://github.com/Decisiv/styled-components-modifiers/blob/master/LICENSE)

Fixed alerts

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

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

Total package byte prevSize

161539

increased by7.81%

Number of package files

11

increased by10%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

234

increased by7.34%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

13

increased by18.18%

Lines of code

175

decreased by-3.85%

Dependency changes

• + Addedlodash.isobject@^3.0.2

• + Addedlodash.isobject@3.0.2(transitive)

• - Removedlodash.mapvalues@^4.6.0

• - Removedlodash.mapvalues@4.6.0(transitive)