@operational/utils - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0-alpha.fa791335

lib/color.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var colorCalculator = require("tinycolor2");
-var getBrightestColor = function (colors) {
-    return colors.reduce(function (acc, curr) {
-        if (curr.l > acc.l) {
-            return curr;
-        }
-        return acc;
-    });
-};
-exports.readableTextColor = function (backgroundColor, workingColors) {
-    var backgroundHsl = colorCalculator(backgroundColor).toHsl();
-    var workingColorHsls = workingColors.map(function (color) { return colorCalculator(color).toHsl(); });
+const colorCalculator = require("tinycolor2");
+const getBrightestColor = (colors) => colors.reduce((acc, curr) => {
+    if (curr.l > acc.l) {
+        return curr;
+    }
+    return acc;
+});
+exports.readableTextColor = (backgroundColor, workingColors) => {
+    const backgroundHsl = colorCalculator(backgroundColor).toHsl();
+    const workingColorHsls = workingColors.map(color => colorCalculator(color).toHsl());
     // For reasonably saturated colors on the bright side, still pick the lightest color.
@@ -21,27 +19,20 @@ if (backgroundHsl.s > 0.4 && backgroundHsl.l < 0.75) {
 };
-exports.darken = function (color, percentage) {
-    return colorCalculator(color)
-        .darken(percentage)
-        .toString();
-};
-exports.lighten = function (color, percentage) {
-    return colorCalculator(color)
-        .lighten(percentage)
-        .toString();
-};
-exports.getBrightness = function (color) {
-    var c = colorCalculator(color);
+exports.darken = (color, percentage) => colorCalculator(color)
+    .darken(percentage)
+    .toString();
+exports.lighten = (color, percentage) => colorCalculator(color)
+    .lighten(percentage)
+    .toString();
+exports.getBrightness = (color) => {
+    const c = colorCalculator(color);
     return c.getBrightness();
 };
-exports.setBrightness = function (color, targetBrightness) {
-    var c = colorCalculator(color);
-    var brightness = c.getBrightness();
-    return c.brighten(targetBrightness / brightness * 100 - 100).toString();
+exports.setBrightness = (color, targetBrightness) => {
+    const c = colorCalculator(color);
+    const brightness = c.getBrightness();
+    return c.brighten((targetBrightness / brightness) * 100 - 100).toString();
 };
-exports.transparentize = function (color) { return function (percentage) {
-    return (function (_a) {
-        var r = _a.r, g = _a.g, b = _a.b;
-        return "rgba(" + r + ", " + g + ", " + b + ", " + 255 * (100 - percentage) / 100 + ")";
-    })(colorCalculator(color).toRgb());
-}; };
+exports.transparentize = (color) => (percentage) => (({ r, g, b }) => {
+    return `rgba(${r}, ${g}, ${b}, ${(255 * (100 - percentage)) / 100})`;
+})(colorCalculator(color).toRgb());
 //# sourceMappingURL=color.js.map

lib/colorAssigner.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorAssigner = function (palette) {
+exports.colorAssigner = (palette) => {
     if (palette.length === 0) {
         throw new Error("No color palette defined");
     }
-    var assigned = {};
-    var usedColors = [];
-    var getColor = function (key) {
+    const assigned = {};
+    const usedColors = [];
+    const getColor = (key) => {
         return assigned[key];
     };
-    var nextColor = function () {
+    const nextColor = () => {
         // Count how many times each colour has been used
-        var usageCount = palette.reduce(function (memo, color) {
+        const usageCount = palette.reduce((memo, color) => {
             memo[color] = 0;
             return memo;
         }, {});
-        usedColors.forEach(function (color) {
+        usedColors.forEach((color) => {
             usageCount[color] += 1;
         });
-        var min = palette.reduce(function (memo, color) {
+        const min = palette.reduce((memo, color) => {
             return memo ? Math.min(memo, usageCount[color]) : usageCount[color];
         }, undefined);
         // Find a color with the minimum usage count
-        return palette.find(function (color) {
+        return palette.find((color) => {
             return usageCount[color] === min;
         });
     };
-    var assignColor = function (key) {
-        var color = nextColor();
+    const assignColor = (key) => {
+        const color = nextColor();
         assigned[key] = color;
@@ -35,3 +35,3 @@ usedColors.push(color);
     };
-    return function (key) {
+    return (key) => {
         return getColor(key) || assignColor(key);
@@ -38,0 +38,0 @@ };

lib/d3.js

@@ -8,11 +8,7 @@ "use strict";
  */
-exports.handleWithD3Element = function (handler) {
-    return function (datum) {
-        var args = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            args[_i - 1] = arguments[_i];
-        }
-        handler.apply(void 0, [datum, this].concat(args));
+exports.handleWithD3Element = (handler) => {
+    return function (datum, ...args) {
+        handler(datum, this, ...args);
     };
 };
 //# sourceMappingURL=d3.js.map

lib/index.d.ts

@@ -1,4 +0,5 @@
-export { fadeIn, resetTransform, spin, baseStylesheet, injectStylesheet } from "./styles";
-export { readableTextColor, darken, lighten, transparentize, setBrightness, getBrightness } from "./color";
-export { handleWithD3Element } from "./d3";
-export { colorAssigner } from "./colorAssigner";
+export * from "./styles";
+export * from "./color";
+export * from "./d3";
+export * from "./colorAssigner";
+export * from "./text";

lib/index.js

 "use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
 Object.defineProperty(exports, "__esModule", { value: true });
-var styles_1 = require("./styles");
-exports.fadeIn = styles_1.fadeIn;
-exports.resetTransform = styles_1.resetTransform;
-exports.spin = styles_1.spin;
-exports.baseStylesheet = styles_1.baseStylesheet;
-exports.injectStylesheet = styles_1.injectStylesheet;
-var color_1 = require("./color");
-exports.readableTextColor = color_1.readableTextColor;
-exports.darken = color_1.darken;
-exports.lighten = color_1.lighten;
-exports.transparentize = color_1.transparentize;
-exports.setBrightness = color_1.setBrightness;
-exports.getBrightness = color_1.getBrightness;
-var d3_1 = require("./d3");
-exports.handleWithD3Element = d3_1.handleWithD3Element;
-var colorAssigner_1 = require("./colorAssigner");
-exports.colorAssigner = colorAssigner_1.colorAssigner;
+__export(require("./styles"));
+__export(require("./color"));
+__export(require("./d3"));
+__export(require("./colorAssigner"));
+__export(require("./text"));
 //# sourceMappingURL=index.js.map

lib/styles.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var glamor_1 = require("glamor");
-var color_1 = require("./color");
-exports.baseStylesheet = function (theme) { return "\n* {\n  box-sizing: border-box;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: " + theme.fontFamily + ";\n  font-size: 13px;\n  height: 100%;\n}\n\nbody {\n  background-color: " + theme.colors.background + ";\n}\n\na:link,\na:visited {\n  color: " + theme.colors.info + ";\n}\n\na:hover: {\n  color: " + color_1.darken(theme.colors.info, 5) + ";\n}\n"; };
-exports.injectStylesheet = function (cssString) {
+const glamor_1 = require("glamor");
+const color_1 = require("./color");
+exports.baseStylesheet = (theme) => `
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: ${theme.fontFamily};
+  font-size: 13px;
+  height: 100%;
+}
+
+body {
+  background-color: ${theme.colors.background};
+}
+
+a:link,
+a:visited {
+  color: ${theme.colors.info};
+}
+
+a:hover: {
+  color: ${color_1.darken(theme.colors.info, 5)};
+}
+`;
+exports.injectStylesheet = (cssString) => {
     if (!document) {
         return;
     }
-    var styleEl = document.createElement("style");
+    const styleEl = document.createElement("style");
     styleEl.innerHTML = cssString;
@@ -12,0 +38,0 @@ document.head.appendChild(styleEl);

package.json

 {
   "name": "@operational/utils",
-  "version": "0.2.2",
+  "version": "0.3.0-alpha.fa791335",
   "description": "A collection of utilities used within the Contiamo UI suite",
@@ -14,34 +14,15 @@ "main": "./lib/index.js",
   "scripts": {
-    "package": "rm -rf lib && tsc -d",
-    "package:watch": "rm -rf lib && tsc -d -w",
+    "package": "rimraf lib && tsc",
+    "package:watch": "rimraf lib && tsc -w",
     "test": "jest",
-    "test:u": "jest -u",
-    "lint": "tslint './src/**/*.{ts,tsx}' --fix",
-    "prettier": "prettier './src/**/*.{ts,tsx}' --write"
+    "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@operational/theme": "^0.2.2",
+    "@operational/theme": "^0.3.0-alpha.fa791335",
+    "glamor": "^2.20.40",
     "tinycolor2": "^1.4.1"
   },
-  "devDependencies": {
-    "@types/core-js": "0.9.43",
-    "@types/d3-ease": "1.0.7",
-    "@types/d3-scale": "1.0.10",
-    "@types/d3-selection": "1.1.0",
-    "@types/d3-shape": "1.2.1",
-    "@types/d3-transition": "1.1.0",
-    "@types/jest": "20.0.8",
-    "@types/node": "8.0.27",
-    "@types/tinycolor2": "1.4.0",
-    "jest": "21.2.1",
-    "prettier": "1.8.2",
-    "ts-jest": "21.0.0",
-    "tslint": "5.9.1",
-    "tslint-config-airbnb": "5.8.0",
-    "tslint-config-prettier": "1.12.0",
-    "typescript": "2.8.3"
-  },
   "jest": {
     "setupFiles": [
-      "./test-polyfills.js"
+      "../../test-polyfills.js"
     ],
@@ -55,7 +36,12 @@ "moduleFileExtensions": [
     "transform": {
-      "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+      "\\.(ts|tsx)$": "<rootDir>/../../node_modules/ts-jest/preprocessor.js"
     },
-    "testRegex": "/__tests__/.*\\.(ts|tsx|js|jsx)$",
-    "mapCoverage": true
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "testRegex": "/__tests__/.*\\.(ts|tsx|js|jsx)$"
+  },
+  "devDependencies": {
+    "prettier": "^1.13.4"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25598

increased by80.66%

Dev dependency count

1

decreased by-93.75%

Number of package files

40

increased by110.53%

Lines of code

468

increased by161.45%

Worsened metrics

Dependency count

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedglamor@^2.20.40

• + Added@operational/theme@0.3.0(transitive)

• + Addedasap@2.0.6(transitive)

• + Addedbowser@1.9.4(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcss-in-js-utils@2.0.1(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedglamor@2.20.40(transitive)

• + Addedhyphenate-style-name@1.1.0(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedinline-style-prefixer@3.0.8(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedthrough@2.3.8(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• - Removed@operational/theme@0.2.2(transitive)

• Updated@operational/theme@^0.3.0-alpha.fa791335