@storybook/theming - npm Package Compare versions

Comparing version 5.2.0-alpha.24 to 5.2.0-alpha.25

dist/index.d.ts

@@ -12,1 +12,2 @@ import { CreateStyled } from '@emotion/styled';
 export * from './ensure';
+export { lightenColor as lighten, darkenColor as darken } from './utils';

dist/index.js

@@ -17,3 +17,5 @@ "use strict";
   createGlobal: true,
-  createReset: true
+  createReset: true,
+  lighten: true,
+  darken: true
 };
@@ -32,2 +34,14 @@ Object.defineProperty(exports, "createGlobal", {
 });
+Object.defineProperty(exports, "lighten", {
+  enumerable: true,
+  get: function get() {
+    return _utils.lightenColor;
+  }
+});
+Object.defineProperty(exports, "darken", {
+  enumerable: true,
+  get: function get() {
+    return _utils.darkenColor;
+  }
+});
 exports.styled = void 0;
@@ -130,2 +144,4 @@
 
+var _utils = require("./utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -132,0 +148,0 @@

dist/utils.d.ts

 export declare const mkColor: (color: string) => {
     color: string;
 };
+export declare const lightenColor: (color: string) => string;
+export declare const darkenColor: (color: string) => string;

dist/utils.js

 "use strict";
 
+require("core-js/modules/es.symbol");
+
+require("core-js/modules/es.symbol.description");
+
+require("core-js/modules/es.symbol.iterator");
+
+require("core-js/modules/es.array.concat");
+
+require("core-js/modules/es.array.iterator");
+
 require("core-js/modules/es.object.define-property");
 
+require("core-js/modules/es.object.to-string");
+
+require("core-js/modules/es.string.iterator");
+
+require("core-js/modules/web.dom-collections.iterator");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mkColor = void 0;
+exports.darkenColor = exports.lightenColor = exports.mkColor = void 0;
 
+var _polished = require("polished");
+
+var _clientLogger = require("@storybook/client-logger");
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 var mkColor = function mkColor(color) {
@@ -14,4 +36,60 @@ return {
   };
+}; // Check if it is a string. This is for the sake of warning users
+// and the successive guarding logics that use String methods.
+
+
+exports.mkColor = mkColor;
+
+var isColorString = function isColorString(color) {
+  if (typeof color !== 'string') {
+    _clientLogger.logger.warn("Color passed to theme object should be a string. Instead " + "".concat(color, "(").concat(_typeof(color), ") was passed."));
+
+    return false;
+  }
+
+  return true;
+}; // Passing arguments that can't be converted to RGB such as linear-gradient
+// to library polished's functions such as lighten or darken throws the error
+// that crashes the entire storybook. It needs to be guarded when arguments
+// of those functions are from user input.
+
+
+var isValidColorForPolished = function isValidColorForPolished(color) {
+  return !/(gradient|var|calc)/.test(color);
 };
 
-exports.mkColor = mkColor;
+var applyPolished = function applyPolished(type, color) {
+  if (type === 'darken') {
+    return (0, _polished.rgba)("".concat((0, _polished.darken)(1, color)), 0.95);
+  }
+
+  if (type === 'lighten') {
+    return (0, _polished.rgba)("".concat((0, _polished.lighten)(1, color)), 0.95);
+  }
+
+  return color;
+};
+
+var colorFactory = function colorFactory(type) {
+  return function (color) {
+    if (!isColorString(color)) {
+      return color;
+    }
+
+    if (!isValidColorForPolished(color)) {
+      return color;
+    } // Guard anything that is not working with polished.
+
+
+    try {
+      return applyPolished(type, color);
+    } catch (error) {
+      return color;
+    }
+  };
+};
+
+var lightenColor = colorFactory('lighten');
+exports.lightenColor = lightenColor;
+var darkenColor = colorFactory('darken');
+exports.darkenColor = darkenColor;

package.json

 {
   "name": "@storybook/theming",
-  "version": "5.2.0-alpha.24",
+  "version": "5.2.0-alpha.25",
   "description": "Core Storybook Components",
@@ -26,3 +26,3 @@ "keywords": [
     "@emotion/styled": "^10.0.7",
-    "@storybook/client-logger": "5.2.0-alpha.24",
+    "@storybook/client-logger": "5.2.0-alpha.25",
     "common-tags": "^1.8.0",
@@ -45,3 +45,3 @@ "core-js": "^3.0.1",
   },
-  "gitHead": "64b7eff80642c641c94dc4fd1218d69844107e95"
+  "gitHead": "deeab2f588403553089c07bfc36db432a1de3304"
 }

src/index.ts

@@ -16,1 +16,3 @@ import emotionStyled, { CreateStyled } from '@emotion/styled';
 export * from './ensure';
+
+export { lightenColor as lighten, darkenColor as darken } from './utils';

src/utils.ts

@@ -0,1 +1,59 @@
+import { rgba, lighten, darken } from 'polished';
+
+import { logger } from '@storybook/client-logger';
+
 export const mkColor = (color: string) => ({ color });
+
+// Check if it is a string. This is for the sake of warning users
+// and the successive guarding logics that use String methods.
+const isColorString = (color: string) => {
+  if (typeof color !== 'string') {
+    logger.warn(
+      `Color passed to theme object should be a string. Instead ` +
+        `${color}(${typeof color}) was passed.`
+    );
+    return false;
+  }
+
+  return true;
+};
+
+// Passing arguments that can't be converted to RGB such as linear-gradient
+// to library polished's functions such as lighten or darken throws the error
+// that crashes the entire storybook. It needs to be guarded when arguments
+// of those functions are from user input.
+const isValidColorForPolished = (color: string) => {
+  return !/(gradient|var|calc)/.test(color);
+};
+
+const applyPolished = (type: string, color: string) => {
+  if (type === 'darken') {
+    return rgba(`${darken(1, color)}`, 0.95);
+  }
+
+  if (type === 'lighten') {
+    return rgba(`${lighten(1, color)}`, 0.95);
+  }
+
+  return color;
+};
+
+const colorFactory = (type: string) => (color: string) => {
+  if (!isColorString(color)) {
+    return color;
+  }
+
+  if (!isValidColorForPolished(color)) {
+    return color;
+  }
+
+  // Guard anything that is not working with polished.
+  try {
+    return applyPolished(type, color);
+  } catch (error) {
+    return color;
+  }
+};
+
+export const lightenColor = colorFactory('lighten');
+export const darkenColor = colorFactory('darken');

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

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

87770

increased by11.45%

Number of package files

50

increased by4.17%

Lines of code

2630

increased by9.26%

Dependency changes

• + Added@storybook/client-logger@5.2.0-alpha.25(transitive)

• - Removed@storybook/client-logger@5.2.0-alpha.24(transitive)

• Updated@storybook/client-logger@5.2.0-alpha.25