easystatus-react-components - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/cjs/components/banner.js

 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -7,12 +34,24 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.Banner = void 0;
-const react_1 = __importDefault(require("react"));
-const banner_module_css_1 = __importDefault(require("./banner.module.css"));
-const classnames_1 = __importDefault(require("classnames"));
-const Banner = ({ apiKey, variant = 'error' }) => {
-    console.log({ styles: banner_module_css_1.default });
-    const message = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s`;
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(banner_module_css_1.default.container, banner_module_css_1.default[variant]) },
-        react_1.default.createElement("p", { className: banner_module_css_1.default.text }, message)));
+var react_1 = __importDefault(require("react"));
+// import styles from './banner.module.css';
+var styled_components_1 = __importStar(require("styled-components"));
+var _button = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            padding: 12px;\n            position: absolute;\n            top: 0px;\n            width: 100%;\n            margin: 0px;\n            max-width: 1400px;\n            background-color: ", ";\n        "], ["\n            padding: 12px;\n            position: absolute;\n            top: 0px;\n            width: 100%;\n            margin: 0px;\n            max-width: 1400px;\n            background-color: ", ";\n        "])), backgroundColor);
+});
+var _text = styled_components_1.default.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: white;\n    padding: 0px;\n    margin: 0px;\n"], ["\n    color: white;\n    padding: 0px;\n    margin: 0px;\n"])));
+var Banner = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? 'error' : _b;
+    var variantMap = {
+        ERROR: '#c0392b',
+        INFO: '#3498db',
+        SUCCESS: '#2ecc71',
+        WARNING: 'orange'
+    };
+    var backgroundColor = variantMap[variant];
+    var message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s";
+    return (react_1.default.createElement(_button, { backgroundColor: backgroundColor },
+        react_1.default.createElement(_text, null, message)));
 };
 exports.Banner = Banner;
-//# sourceMappingURL=banner.js.map
+var templateObject_1, templateObject_2, templateObject_3;

dist/cjs/components/easy-status.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EasyStatus = void 0;
-const banner_1 = require("./banner");
+var banner_1 = require("./banner");
 exports.EasyStatus = {
     Banner: banner_1.Banner
 };
-//# sourceMappingURL=easy-status.js.map

dist/cjs/components/index.js

@@ -18,2 +18,1 @@ "use strict";
 __exportStar(require("./easy-status"), exports);
-//# sourceMappingURL=index.js.map

dist/cjs/index.js

@@ -18,2 +18,1 @@ "use strict";
 __exportStar(require("./components"), exports);
-//# sourceMappingURL=index.js.map

dist/cjs/stories/components/banner.stories.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -7,4 +18,4 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.Error = void 0;
-const react_1 = __importDefault(require("react"));
-const components_1 = require("../../components");
+var react_1 = __importDefault(require("react"));
+var components_1 = require("../../components");
 exports.default = {
@@ -14,3 +25,3 @@ title: 'Components/Banner',
 };
-const Template = (args) => react_1.default.createElement(components_1.EasyStatus.Banner, Object.assign({}, args));
+var Template = function (args) { return react_1.default.createElement(components_1.EasyStatus.Banner, __assign({}, args)); };
 exports.Error = Template.bind({});
@@ -21,2 +32,1 @@ exports.Error.args = {
 };
-//# sourceMappingURL=banner.stories.js.map

dist/esm/components/banner.js

@@ -0,10 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-import styles from './banner.module.css';
-import classnames from 'classnames';
-export const Banner = ({ apiKey, variant = 'error' }) => {
-    console.log({ styles });
-    const message = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s`;
-    return (React.createElement("div", { className: classnames(styles.container, styles[variant]) },
-        React.createElement("p", { className: styles.text }, message)));
+// import styles from './banner.module.css';
+import styled, { css } from 'styled-components';
+var _button = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            padding: 12px;\n            position: absolute;\n            top: 0px;\n            width: 100%;\n            margin: 0px;\n            max-width: 1400px;\n            background-color: ", ";\n        "], ["\n            padding: 12px;\n            position: absolute;\n            top: 0px;\n            width: 100%;\n            margin: 0px;\n            max-width: 1400px;\n            background-color: ", ";\n        "])), backgroundColor);
+});
+var _text = styled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: white;\n    padding: 0px;\n    margin: 0px;\n"], ["\n    color: white;\n    padding: 0px;\n    margin: 0px;\n"])));
+export var Banner = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? 'error' : _b;
+    var variantMap = {
+        ERROR: '#c0392b',
+        INFO: '#3498db',
+        SUCCESS: '#2ecc71',
+        WARNING: 'orange'
+    };
+    var backgroundColor = variantMap[variant];
+    var message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s";
+    return (React.createElement(_button, { backgroundColor: backgroundColor },
+        React.createElement(_text, null, message)));
 };
-//# sourceMappingURL=banner.js.map
+var templateObject_1, templateObject_2, templateObject_3;

dist/esm/components/easy-status.js

 import { Banner } from './banner';
-export const EasyStatus = {
+export var EasyStatus = {
     Banner: Banner
 };
-//# sourceMappingURL=easy-status.js.map

dist/esm/components/index.js

 export * from './easy-status';
-//# sourceMappingURL=index.js.map

dist/esm/index.js

 export * from './components';
-//# sourceMappingURL=index.js.map

dist/esm/stories/components/banner.stories.js

@@ -0,1 +1,12 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React from 'react';
@@ -7,4 +18,4 @@ import { EasyStatus } from '../../components';
 };
-const Template = (args) => React.createElement(EasyStatus.Banner, Object.assign({}, args));
-export const Error = Template.bind({});
+var Template = function (args) { return React.createElement(EasyStatus.Banner, __assign({}, args)); };
+export var Error = Template.bind({});
 Error.args = {
@@ -14,2 +25,1 @@ apiKey: 'sohfidshfohsdo',
 };
-//# sourceMappingURL=banner.stories.js.map

package.json

 {
   "name": "easystatus-react-components",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "This is the component library for EasyStatus",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
   "files": [
     "dist"
   ],
-  "types": "dist/index.d.ts",
   "scripts": {
@@ -36,18 +36,21 @@ "storybook": "start-storybook -p 6006",
     "@types/react": "^18.0.9",
+    "@types/styled-components": "^5.1.25",
     "babel-loader": "^8.2.5",
+    "classnames": "^2.3.1",
     "node-sass": "^7.0.1",
     "postcss": "^8.4.14",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-scripts": "^5.0.1",
+    "rollup": "^2.74.1",
+    "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-typescript2": "^0.31.2",
+    "sass": "^1.52.1",
     "tslib": "^2.4.0",
+    "typed-scss-modules": "^6.4.1",
     "typescript": "^4.6.4",
     "typescript-plugin-css-modules": "^3.4.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "classnames": "^2.3.1",
-    "react-scripts": "^5.0.1",
-    "rollup": "^2.74.1",
-    "rollup-plugin-dts": "^4.2.1",
-    "sass": "^1.52.1"
+    "styled-components": "^5.3.5"
   },
@@ -57,3 +60,9 @@ "peerDependencies": {
     "react-dom": "^18.1.0"
+  },
+  "resolutions": {
+    "styled-components": "^5"
+  },
+  "dependencies": {
+    "styled-components": "^5.3.5"
   }
 }

New 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

Improved metrics

Total package byte prevSize

12632

increased by19.46%

Lines of code

231

increased by83.33%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

32

increased by10.34%

Number of package files

22

decreased by-18.52%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedstyled-components@^5.3.5

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/compat-data@7.26.8(transitive)

• + Added@babel/core@7.26.9(transitive)

• + Added@babel/generator@7.26.9(transitive)

• + Added@babel/helper-annotate-as-pure@7.25.9(transitive)

• + Added@babel/helper-compilation-targets@7.26.5(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-module-transforms@7.26.0(transitive)

• + Added@babel/helper-plugin-utils@7.26.5(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/helper-validator-option@7.25.9(transitive)

• + Added@babel/helpers@7.26.9(transitive)

• + Added@babel/parser@7.26.9(transitive)

• + Added@babel/plugin-syntax-jsx@7.25.9(transitive)

• + Added@babel/template@7.26.9(transitive)

• + Added@babel/traverse@7.26.9(transitive)

• + Added@babel/types@7.26.9(transitive)

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

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

• + Added@emotion/stylis@0.8.5(transitive)

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

• + Added@jridgewell/gen-mapping@0.3.8(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Addedbabel-plugin-styled-components@2.1.4(transitive)

• + Addedbrowserslist@4.24.4(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcaniuse-lite@1.0.30001700(transitive)

• + Addedconvert-source-map@2.0.0(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

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

• + Addeddebug@4.4.0(transitive)

• + Addedelectron-to-chromium@1.5.102(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedgensync@1.0.0-beta.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedjsesc@3.1.0(transitive)

• + Addedjson5@2.2.3(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedlru-cache@5.1.1(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-releases@2.0.19(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpicomatch@2.3.1(transitive)

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

• + Addedreact-is@16.13.119.0.0(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedstyled-components@5.3.11(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedupdate-browserslist-db@1.1.2(transitive)

• + Addedyallist@3.1.1(transitive)