react-empty-states - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/es5/index.js

@@ -1,24 +0,81 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const extractImage = (image) => {
+    if (typeof image === 'string') {
+        return {
+            src: image,
+            srcset: `${image} 1x`
+        };
+    }
+    let x2 = '';
+    if (image.x2) {
+        x2 = `, ${image.x2} 2x`;
+    }
+    let x3 = '';
+    if (image.x3) {
+        x3 = `, ${image.x3} 3x`;
+    }
+    return {
+        src: image.x1,
+        srcset: `${image.x1} 1x ${x2} ${x3}`
+    };
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-var react_1 = __importDefault(require("react"));
-var extractImage_1 = require("./util/extractImage");
-var Button_1 = require("./components/Button");
-var EmptyState_module_scss_1 = __importDefault(require("./EmptyState.module.scss"));
-var Button_2 = require("./components/Button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_2.Button; } });
-var EmptyState = ((function (_a) {
-    var header = _a.header, image = _a.image, children = _a.children, actions = _a.actions;
-    var extractedImage = extractImage_1.extractImage(image);
-    return react_1.default.createElement("div", { className: EmptyState_module_scss_1.default.EmptyState },
-        react_1.default.createElement("img", { src: extractedImage.src, srcSet: extractedImage.srcset }),
-        react_1.default.createElement("h1", null, header),
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".Button-module_Button__3uC_E {\n  margin: 10px 10px 10px 0;\n  background: none;\n  outline: none;\n  border: 1px solid #eee;\n  min-height: 2em;\n  min-width: 10em;\n  padding: 1em 2em;\n  border-radius: 4px;\n  cursor: pointer; }\n  .Button-module_Button__3uC_E:hover {\n    background: #efefef; }\n";
+var styles = {"Button":"Button-module_Button__3uC_E"};
+styleInject(css_248z);
+
+const Button = ({ onClick, children }) => (React__default['default'].createElement("button", { className: styles.Button, onClick: onClick }, children));
+
+var css_248z$1 = ".EmptyState-module_EmptyState___jmRL {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; }\n  .EmptyState-module_EmptyState___jmRL .EmptyState-module_Actions__1IGwY {\n    display: flex; }\n";
+var styles$1 = {"EmptyState":"EmptyState-module_EmptyState___jmRL","Actions":"EmptyState-module_Actions__1IGwY"};
+styleInject(css_248z$1);
+
+const EmptyState = ((({ header, image, children, actions }) => {
+    const extractedImage = extractImage(image);
+    return React__default['default'].createElement("div", { className: styles$1.EmptyState },
+        React__default['default'].createElement("img", { src: extractedImage.src, srcSet: extractedImage.srcset }),
+        React__default['default'].createElement("h1", null, header),
         children,
-        react_1.default.createElement("div", { className: EmptyState_module_scss_1.default.Actions }, actions.map(function (action, i) { return react_1.default.createElement(react_1.default.Fragment, { key: i }, action); })));
+        React__default['default'].createElement("div", { className: styles$1.Actions }, actions.map((action, i) => React__default['default'].createElement(React__default['default'].Fragment, { key: i }, action))));
 }));
-EmptyState.Button = Button_1.Button;
+EmptyState.Button = Button;
+
+exports.Button = Button;
 exports.default = EmptyState;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

dist/es6/index.js

 import React from 'react';
-import { extractImage } from './util/extractImage';
-import { Button } from './components/Button';
-import styles from './EmptyState.module.scss';
-export { Button } from './components/Button';
+
+const extractImage = (image) => {
+    if (typeof image === 'string') {
+        return {
+            src: image,
+            srcset: `${image} 1x`
+        };
+    }
+    let x2 = '';
+    if (image.x2) {
+        x2 = `, ${image.x2} 2x`;
+    }
+    let x3 = '';
+    if (image.x3) {
+        x3 = `, ${image.x3} 3x`;
+    }
+    return {
+        src: image.x1,
+        srcset: `${image.x1} 1x ${x2} ${x3}`
+    };
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".Button-module_Button__3uC_E {\n  margin: 10px 10px 10px 0;\n  background: none;\n  outline: none;\n  border: 1px solid #eee;\n  min-height: 2em;\n  min-width: 10em;\n  padding: 1em 2em;\n  border-radius: 4px;\n  cursor: pointer; }\n  .Button-module_Button__3uC_E:hover {\n    background: #efefef; }\n";
+var styles = {"Button":"Button-module_Button__3uC_E"};
+styleInject(css_248z);
+
+const Button = ({ onClick, children }) => (React.createElement("button", { className: styles.Button, onClick: onClick }, children));
+
+var css_248z$1 = ".EmptyState-module_EmptyState___jmRL {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; }\n  .EmptyState-module_EmptyState___jmRL .EmptyState-module_Actions__1IGwY {\n    display: flex; }\n";
+var styles$1 = {"EmptyState":"EmptyState-module_EmptyState___jmRL","Actions":"EmptyState-module_Actions__1IGwY"};
+styleInject(css_248z$1);
+
 const EmptyState = ((({ header, image, children, actions }) => {
     const extractedImage = extractImage(image);
-    return React.createElement("div", { className: styles.EmptyState },
+    return React.createElement("div", { className: styles$1.EmptyState },
         React.createElement("img", { src: extractedImage.src, srcSet: extractedImage.srcset }),
         React.createElement("h1", null, header),
         children,
-        React.createElement("div", { className: styles.Actions }, actions.map((action, i) => React.createElement(React.Fragment, { key: i }, action))));
+        React.createElement("div", { className: styles$1.Actions }, actions.map((action, i) => React.createElement(React.Fragment, { key: i }, action))));
 }));
 EmptyState.Button = Button;
+
 export default EmptyState;
-//# sourceMappingURL=index.js.map
+export { Button };
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-empty-states",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "a react empty state component",
-  "main": "dist/es5/index.js",
-  "module": "dist/es6/index.js",
-  "types": "dist/es6/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
@@ -16,3 +16,3 @@ "start": "webpack serve --config ./conf/webpack/dev.conf.ts",
     "build": "npm run build-es5 && npm run build-es6",
-    "pack": "rollup -c conf/rollup/es6.js && rollup -c conf/rollup/es5.js",
+    "pack": "rollup -c conf/rollup/es6.js",
     "cov:inst": "nyc instrument --compact false src .instrumented",
@@ -53,2 +53,3 @@ "cov:gen": "nyc npm run test",
     "@typescript-eslint/parser": "^4.14.1",
+    "babel-plugin-transform-scss": "^1.0.9",
     "callbag": "^1.4.0",
@@ -76,3 +77,7 @@ "callbag-common": "^0.1.5",
     "rollup": "^2.38.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.29.0",
     "sass-loader": "^10.1.1",
@@ -79,0 +84,0 @@ "style-loader": "^2.0.0",

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

24917

increased by41.46%

Lines of code

204

increased by29.11%

Worsened metrics

Dev dependency count

60

increased by9.09%

Number of package files

8

decreased by-61.9%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes