nestiq-component-library 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/components/Button/Button.js +6 -0
  2. package/dist/components/ImageListPopup/ImageListPopup.js +26 -0
  3. package/dist/components/Popup/Popup.js +12 -0
  4. package/dist/index.es.js +7 -17
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/index.js +7 -17
  7. package/dist/index.js.map +1 -1
  8. package/package.json +35 -36
  9. package/rollup.config.mjs +31 -40
  10. package/src/components/ImageListPopup/ImageListPopup.css +49 -107
  11. package/src/components/ImageListPopup/ImageListPopup.tsx +62 -100
  12. package/src/components/Popup/Popup.tsx +28 -28
  13. package/src/index.tsx +3 -3
  14. package/dist/assets/images/blackarrow-Right.svg +0 -3
  15. package/dist/assets/images/blckarrow-Left.svg +0 -3
  16. package/dist/assets/images/icon_close 2.png +0 -0
  17. package/src/assets/images/blackarrow-Right.svg +0 -3
  18. package/src/assets/images/blckarrow-Left.svg +0 -3
package/dist/components/Button/Button.js ADDED
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ var Button = function (_a) {
3
+ var label = _a.label;
4
+ return React.createElement("button", null, label);
5
+ };
6
+ export default Button;
package/dist/components/ImageListPopup/ImageListPopup.js ADDED
@@ -0,0 +1,26 @@
1
+ import React, { useState } from "react";
2
+ import "bootstrap/dist/css/bootstrap.min.css";
3
+ import "./ImageListPopup.css";
4
+ var ImageListPopup = function (_a) {
5
+ var images = _a.images, onClose = _a.onClose;
6
+ var _b = useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
7
+ var handlePrevious = function () {
8
+ setCurrentIndex(function (prevIndex) { return (prevIndex > 0 ? prevIndex - 1 : prevIndex); });
9
+ };
10
+ var handleNext = function () {
11
+ setCurrentIndex(function (prevIndex) {
12
+ return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
13
+ });
14
+ };
15
+ return (React.createElement("div", { className: "popup-overlay" },
16
+ React.createElement("div", { className: "popup-container" },
17
+ React.createElement("div", { className: "popup-header" },
18
+ React.createElement("span", null, images[currentIndex].title),
19
+ React.createElement("button", { className: "btn-close", onClick: onClose })),
20
+ React.createElement("div", { className: "popup-body" },
21
+ React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "img-fluid" })),
22
+ React.createElement("div", { className: "popup-footer" }, images.length > 1 && (React.createElement(React.Fragment, null,
23
+ React.createElement("button", { className: "btn btn-secondary me-2", onClick: handlePrevious }, "Previous"),
24
+ React.createElement("button", { className: "btn btn-secondary", onClick: handleNext }, "Next")))))));
25
+ };
26
+ export default ImageListPopup;
package/dist/components/Popup/Popup.js ADDED
@@ -0,0 +1,12 @@
1
+ import React from "react";
2
+ import closeIcon from "src/assets/images/icon_close 2.png";
3
+ import "./Popup.css";
4
+ var Popup = function (_a) {
5
+ var onCloseClick = _a.onCloseClick, children = _a.children;
6
+ return (React.createElement("div", { className: "popup-overlay" },
7
+ React.createElement("div", { className: "shareSection col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4" },
8
+ React.createElement("div", { className: "end-0 top-0 position-absolute " },
9
+ React.createElement("img", { src: closeIcon, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
10
+ children)));
11
+ };
12
+ export default Popup;
package/dist/index.es.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useState } from 'react';
2
+ import closeIcon from 'src/assets/images/icon_close 2.png';
2
3
  import 'bootstrap/dist/css/bootstrap.min.css';
3
4
 
4
5
  var Button = function (_a) {
@@ -6,8 +7,6 @@ var Button = function (_a) {
6
7
  return React.createElement("button", null, label);
7
8
  };
8
9
 
9
- var closeIcon = "icon_close 2.png";
10
-
11
10
  function styleInject(css, ref) {
12
11
  if ( ref === void 0 ) ref = {};
13
12
  var insertAt = ref.insertAt;
@@ -47,13 +46,9 @@ var Popup = function (_a) {
47
46
  children)));
48
47
  };
49
48
 
50
- var css_248z = ".popup-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10000;\n}\n\n.popup-container {\n background-color: transparent;\n border-radius: 8px;\n max-width: 90%;\n max-height: 90%;\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n}\n\n.popup-header {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n padding: 1rem;\n position: absolute;\n top: 0;\n}\n\n.popup-title {\n color: white;\n font-size: 24px;\n font-weight: bold;\n}\n\n.btn-close {\n position: absolute;\n right: 1rem;\n top: 1rem;\n background: none;\n border: none;\n color: white;\n font-size: 24px;\n cursor: pointer;\n}\n\n.popup-body {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 1rem;\n position: relative;\n flex: 1;\n}\n\n.main-image {\n max-width: 100%;\n max-height: 80vh;\n border-radius: 8px;\n}\n\n.btn-prev,\n.btn-next {\n background: none;\n border: none;\n color: white;\n font-size: 48px;\n cursor: pointer;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.btn-prev {\n left: 10px;\n}\n\n.btn-next {\n right: 10px;\n}\n\n.popup-thumbnails {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n padding: 1rem;\n}\n\n.thumbnail {\n width: 60px;\n height: 60px;\n object-fit: cover;\n border-radius: 8px;\n cursor: pointer;\n opacity: 0.6;\n}\n\n.thumbnail.active {\n border: 2px solid white;\n opacity: 1;\n}\n";
49
+ var css_248z = ".popup-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n background-color: #fff;\r\n border-radius: 8px;\r\n max-width: 90%;\r\n max-height: 90%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.popup-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1rem;\r\n border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.popup-body {\r\n flex: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 1rem;\r\n}\r\n\r\n.popup-body img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n}\r\n\r\n.popup-footer {\r\n padding: 1rem;\r\n text-align: center;\r\n border-top: 1px solid #ddd;\r\n}\r\n";
51
50
  styleInject(css_248z);
52
51
 
53
- var blcIconArrowRight = "blackarrow-Right.svg";
54
-
55
- var blcIconArrowLeft = "blckarrow-Left.svg";
56
-
57
52
  var ImageListPopup = function (_a) {
58
53
  var images = _a.images, onClose = _a.onClose;
59
54
  var _b = useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
@@ -65,21 +60,16 @@ var ImageListPopup = function (_a) {
65
60
  return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
66
61
  });
67
62
  };
68
- var handleThumbnailClick = function (index) {
69
- setCurrentIndex(index);
70
- };
71
63
  return (React.createElement("div", { className: "popup-overlay" },
72
64
  React.createElement("div", { className: "popup-container" },
73
65
  React.createElement("div", { className: "popup-header" },
74
- React.createElement("span", { className: "popup-title" }, images[currentIndex].title),
66
+ React.createElement("span", null, images[currentIndex].title),
75
67
  React.createElement("button", { className: "btn-close", onClick: onClose })),
76
68
  React.createElement("div", { className: "popup-body" },
77
- React.createElement("div", { className: "rounded-circle border btn-prev", role: "button", onClick: handlePrevious },
78
- React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
79
- React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "main-image" }),
80
- React.createElement("div", { className: "rounded-circle border btn-next", role: "button", onClick: handleNext },
81
- React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
82
- React.createElement("div", { className: "popup-thumbnails" }, images.map(function (image, index) { return (React.createElement("img", { key: index, src: image.src, alt: image.title, className: "thumbnail ".concat(index === currentIndex ? "active" : ""), onClick: function () { return handleThumbnailClick(index); } })); })))));
69
+ React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "img-fluid" })),
70
+ React.createElement("div", { className: "popup-footer" }, images.length > 1 && (React.createElement(React.Fragment, null,
71
+ React.createElement("button", { className: "btn btn-secondary me-2", onClick: handlePrevious }, "Previous"),
72
+ React.createElement("button", { className: "btn btn-secondary", onClick: handleNext }, "Next")))))));
83
73
  };
84
74
 
85
75
  export { Button, ImageListPopup, Popup };
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../src/assets/images/icon_close 2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg"],"sourcesContent":["export default \"icon_close 2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\""],"names":[],"mappings":";;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;ACzBA,wBAAe;;ACAf,uBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
1
+ {"version":3,"file":"index.es.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
package/dist/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var React = require('react');
4
+ var closeIcon = require('src/assets/images/icon_close 2.png');
4
5
  require('bootstrap/dist/css/bootstrap.min.css');
5
6
 
6
7
  var Button = function (_a) {
@@ -8,8 +9,6 @@ var Button = function (_a) {
8
9
  return React.createElement("button", null, label);
9
10
  };
10
11
 
11
- var closeIcon = "icon_close 2.png";
12
-
13
12
  function styleInject(css, ref) {
14
13
  if ( ref === void 0 ) ref = {};
15
14
  var insertAt = ref.insertAt;
@@ -49,13 +48,9 @@ var Popup = function (_a) {
49
48
  children)));
50
49
  };
51
50
 
52
- var css_248z = ".popup-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10000;\n}\n\n.popup-container {\n background-color: transparent;\n border-radius: 8px;\n max-width: 90%;\n max-height: 90%;\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n}\n\n.popup-header {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n padding: 1rem;\n position: absolute;\n top: 0;\n}\n\n.popup-title {\n color: white;\n font-size: 24px;\n font-weight: bold;\n}\n\n.btn-close {\n position: absolute;\n right: 1rem;\n top: 1rem;\n background: none;\n border: none;\n color: white;\n font-size: 24px;\n cursor: pointer;\n}\n\n.popup-body {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 1rem;\n position: relative;\n flex: 1;\n}\n\n.main-image {\n max-width: 100%;\n max-height: 80vh;\n border-radius: 8px;\n}\n\n.btn-prev,\n.btn-next {\n background: none;\n border: none;\n color: white;\n font-size: 48px;\n cursor: pointer;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.btn-prev {\n left: 10px;\n}\n\n.btn-next {\n right: 10px;\n}\n\n.popup-thumbnails {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n padding: 1rem;\n}\n\n.thumbnail {\n width: 60px;\n height: 60px;\n object-fit: cover;\n border-radius: 8px;\n cursor: pointer;\n opacity: 0.6;\n}\n\n.thumbnail.active {\n border: 2px solid white;\n opacity: 1;\n}\n";
51
+ var css_248z = ".popup-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n background-color: #fff;\r\n border-radius: 8px;\r\n max-width: 90%;\r\n max-height: 90%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.popup-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1rem;\r\n border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.popup-body {\r\n flex: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 1rem;\r\n}\r\n\r\n.popup-body img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n}\r\n\r\n.popup-footer {\r\n padding: 1rem;\r\n text-align: center;\r\n border-top: 1px solid #ddd;\r\n}\r\n";
53
52
  styleInject(css_248z);
54
53
 
55
- var blcIconArrowRight = "blackarrow-Right.svg";
56
-
57
- var blcIconArrowLeft = "blckarrow-Left.svg";
58
-
59
54
  var ImageListPopup = function (_a) {
60
55
  var images = _a.images, onClose = _a.onClose;
61
56
  var _b = React.useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
@@ -67,21 +62,16 @@ var ImageListPopup = function (_a) {
67
62
  return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
68
63
  });
69
64
  };
70
- var handleThumbnailClick = function (index) {
71
- setCurrentIndex(index);
72
- };
73
65
  return (React.createElement("div", { className: "popup-overlay" },
74
66
  React.createElement("div", { className: "popup-container" },
75
67
  React.createElement("div", { className: "popup-header" },
76
- React.createElement("span", { className: "popup-title" }, images[currentIndex].title),
68
+ React.createElement("span", null, images[currentIndex].title),
77
69
  React.createElement("button", { className: "btn-close", onClick: onClose })),
78
70
  React.createElement("div", { className: "popup-body" },
79
- React.createElement("div", { className: "rounded-circle border btn-prev", role: "button", onClick: handlePrevious },
80
- React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
81
- React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "main-image" }),
82
- React.createElement("div", { className: "rounded-circle border btn-next", role: "button", onClick: handleNext },
83
- React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
84
- React.createElement("div", { className: "popup-thumbnails" }, images.map(function (image, index) { return (React.createElement("img", { key: index, src: image.src, alt: image.title, className: "thumbnail ".concat(index === currentIndex ? "active" : ""), onClick: function () { return handleThumbnailClick(index); } })); })))));
71
+ React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "img-fluid" })),
72
+ React.createElement("div", { className: "popup-footer" }, images.length > 1 && (React.createElement(React.Fragment, null,
73
+ React.createElement("button", { className: "btn btn-secondary me-2", onClick: handlePrevious }, "Previous"),
74
+ React.createElement("button", { className: "btn btn-secondary", onClick: handleNext }, "Next")))))));
85
75
  };
86
76
 
87
77
  exports.Button = Button;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/assets/images/icon_close 2.png","../node_modules/style-inject/dist/style-inject.es.js","../src/assets/images/blackarrow-Right.svg","../src/assets/Images/blckarrow-Left.svg"],"sourcesContent":["export default \"icon_close 2.png\"","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","export default \"blackarrow-Right.svg\"","export default \"blckarrow-Left.svg\""],"names":[],"mappings":";;;;;;;;;;AAAA,gBAAe;;ACAf,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;ACzBA,wBAAe;;ACAf,uBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
1
+ {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
package/package.json CHANGED
@@ -1,36 +1,35 @@
1
- {
2
- "name": "nestiq-component-library",
3
- "version": "1.0.6",
4
- "type": "module",
5
- "description": "",
6
- "main": "dist/index.js",
7
- "module": "dist/index.es.js",
8
- "scripts": {
9
- "test": "echo \"Error: no test specified\" && exit 1",
10
- "build": "rollup -c"
11
- },
12
- "keywords": [],
13
- "author": "",
14
- "license": "ISC",
15
- "dependencies": {
16
- "react": "^18.3.1",
17
- "react-dom": "^18.3.1"
18
- },
19
- "devDependencies": {
20
- "@rollup/plugin-commonjs": "^26.0.1",
21
- "@rollup/plugin-image": "^3.0.3",
22
- "@rollup/plugin-node-resolve": "^15.2.3",
23
- "@rollup/plugin-url": "^8.0.2",
24
- "@types/react": "^18.3.3",
25
- "@types/react-dom": "^18.3.0",
26
- "rollup": "^4.18.0",
27
- "rollup-plugin-copy": "^3.5.0",
28
- "rollup-plugin-postcss": "^4.0.2",
29
- "rollup-plugin-typescript2": "^0.36.0",
30
- "typescript": "^5.4.5"
31
- },
32
- "peerDependencies": {
33
- "react": "^18.3.1",
34
- "react-dom": "^18.3.1"
35
- }
36
- }
1
+ {
2
+ "name": "nestiq-component-library",
3
+ "version": "1.0.7",
4
+ "type": "module",
5
+ "description": "",
6
+ "main": "dist/index.js",
7
+ "module": "dist/index.es.js",
8
+ "scripts": {
9
+ "test": "echo \"Error: no test specified\" && exit 1",
10
+ "build": "rollup -c"
11
+ },
12
+ "keywords": [],
13
+ "author": "",
14
+ "license": "ISC",
15
+ "dependencies": {
16
+ "react": "^18.3.1",
17
+ "react-dom": "^18.3.1"
18
+ },
19
+ "devDependencies": {
20
+ "@rollup/plugin-commonjs": "^26.0.1",
21
+ "@rollup/plugin-image": "^3.0.3",
22
+ "@rollup/plugin-node-resolve": "^15.2.3",
23
+ "@rollup/plugin-url": "^8.0.2",
24
+ "@types/react": "^18.3.3",
25
+ "@types/react-dom": "^18.3.0",
26
+ "rollup": "^4.18.0",
27
+ "rollup-plugin-postcss": "^4.0.2",
28
+ "rollup-plugin-typescript2": "^0.36.0",
29
+ "typescript": "^5.4.5"
30
+ },
31
+ "peerDependencies": {
32
+ "react": "^18.3.1",
33
+ "react-dom": "^18.3.1"
34
+ }
35
+ }
package/rollup.config.mjs CHANGED
@@ -1,40 +1,31 @@
1
- import typescript from "rollup-plugin-typescript2";
2
- import url from "@rollup/plugin-url";
3
- import postcss from "rollup-plugin-postcss";
4
- import copy from 'rollup-plugin-copy';
5
- import pkg from "./package.json" assert { type: "json" };
6
-
7
- export default {
8
- input: "src/index.tsx",
9
- output: [
10
- {
11
- file: pkg.main,
12
- format: "cjs",
13
- sourcemap: true,
14
- },
15
- {
16
- file: pkg.module,
17
- format: "es",
18
- sourcemap: true,
19
- },
20
- ],
21
- external: ["react", "react-dom"],
22
- plugins: [
23
- typescript(),
24
- postcss({
25
- extensions: [".css"],
26
- }),
27
- url({
28
- include: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.gif'],
29
- limit: 0,
30
- emitFiles: true,
31
- fileName: '[name][extname]',
32
- destDir: 'dist/assets/images',
33
- }),
34
- copy({
35
- targets: [
36
- { src: 'src/assets/images/*', dest: 'dist/assets/images' }
37
- ]
38
- })
39
- ],
40
- };
1
+ import typescript from "rollup-plugin-typescript2";
2
+ import url from "@rollup/plugin-url";
3
+ import postcss from "rollup-plugin-postcss";
4
+ import pkg from "./package.json" assert { type: "json" };
5
+
6
+ export default {
7
+ input: "src/index.tsx",
8
+ output: [
9
+ {
10
+ file: pkg.main,
11
+ format: "cjs",
12
+ sourcemap: true,
13
+ },
14
+ {
15
+ file: pkg.module,
16
+ format: "es",
17
+ sourcemap: true,
18
+ },
19
+ ],
20
+ external: ["react", "react-dom"],
21
+ plugins: [
22
+ typescript(),
23
+ postcss({
24
+ extensions: [".css"],
25
+ }),
26
+ url({
27
+ include: ["**/*.svg", "**/*.png", "**/*.jpg", "**/*.jpeg", "**/*.gif"],
28
+ limit: 0,
29
+ }),
30
+ ],
31
+ };
package/src/components/ImageListPopup/ImageListPopup.css CHANGED
@@ -1,107 +1,49 @@
1
- .popup-overlay {
2
- position: fixed;
3
- top: 0;
4
- left: 0;
5
- right: 0;
6
- bottom: 0;
7
- background-color: rgba(0, 0, 0, 0.7);
8
- display: flex;
9
- justify-content: center;
10
- align-items: center;
11
- z-index: 10000;
12
- }
13
-
14
- .popup-container {
15
- background-color: transparent;
16
- border-radius: 8px;
17
- max-width: 90%;
18
- max-height: 90%;
19
- display: flex;
20
- flex-direction: column;
21
- align-items: center;
22
- position: relative;
23
- }
24
-
25
- .popup-header {
26
- display: flex;
27
- justify-content: center;
28
- align-items: center;
29
- width: 100%;
30
- padding: 1rem;
31
- position: absolute;
32
- top: 0;
33
- }
34
-
35
- .popup-title {
36
- color: white;
37
- font-size: 24px;
38
- font-weight: bold;
39
- }
40
-
41
- .btn-close {
42
- position: absolute;
43
- right: 1rem;
44
- top: 1rem;
45
- background: none;
46
- border: none;
47
- color: white;
48
- font-size: 24px;
49
- cursor: pointer;
50
- }
51
-
52
- .popup-body {
53
- display: flex;
54
- justify-content: center;
55
- align-items: center;
56
- padding: 1rem;
57
- position: relative;
58
- flex: 1;
59
- }
60
-
61
- .main-image {
62
- max-width: 100%;
63
- max-height: 80vh;
64
- border-radius: 8px;
65
- }
66
-
67
- .btn-prev,
68
- .btn-next {
69
- background: none;
70
- border: none;
71
- color: white;
72
- font-size: 48px;
73
- cursor: pointer;
74
- position: absolute;
75
- top: 50%;
76
- transform: translateY(-50%);
77
- }
78
-
79
- .btn-prev {
80
- left: 10px;
81
- }
82
-
83
- .btn-next {
84
- right: 10px;
85
- }
86
-
87
- .popup-thumbnails {
88
- display: flex;
89
- justify-content: center;
90
- align-items: center;
91
- gap: 10px;
92
- padding: 1rem;
93
- }
94
-
95
- .thumbnail {
96
- width: 60px;
97
- height: 60px;
98
- object-fit: cover;
99
- border-radius: 8px;
100
- cursor: pointer;
101
- opacity: 0.6;
102
- }
103
-
104
- .thumbnail.active {
105
- border: 2px solid white;
106
- opacity: 1;
107
- }
1
+ .popup-overlay {
2
+ position: fixed;
3
+ top: 0;
4
+ left: 0;
5
+ right: 0;
6
+ bottom: 0;
7
+ background-color: rgba(0, 0, 0, 0.5);
8
+ display: flex;
9
+ justify-content: center;
10
+ align-items: center;
11
+ z-index: 10000;
12
+ }
13
+
14
+ .popup-container {
15
+ background-color: #fff;
16
+ border-radius: 8px;
17
+ max-width: 90%;
18
+ max-height: 90%;
19
+ overflow: hidden;
20
+ display: flex;
21
+ flex-direction: column;
22
+ }
23
+
24
+ .popup-header {
25
+ display: flex;
26
+ justify-content: space-between;
27
+ align-items: center;
28
+ padding: 1rem;
29
+ border-bottom: 1px solid #ddd;
30
+ }
31
+
32
+ .popup-body {
33
+ flex: 1;
34
+ display: flex;
35
+ justify-content: center;
36
+ align-items: center;
37
+ padding: 1rem;
38
+ }
39
+
40
+ .popup-body img {
41
+ max-width: 100%;
42
+ max-height: 100%;
43
+ }
44
+
45
+ .popup-footer {
46
+ padding: 1rem;
47
+ text-align: center;
48
+ border-top: 1px solid #ddd;
49
+ }
package/src/components/ImageListPopup/ImageListPopup.tsx CHANGED
@@ -1,100 +1,62 @@
1
- import React, { useState } from "react";
2
- import "bootstrap/dist/css/bootstrap.min.css";
3
- import "./ImageListPopup.css";
4
- import blcIconArrowRight from "../../assets/images/blackarrow-Right.svg";
5
- import blcIconArrowLeft from "../../assets/Images/blckarrow-Left.svg";
6
-
7
- interface Image {
8
- src: string;
9
- title: string;
10
- }
11
-
12
- interface ImageListPopupProps {
13
- images: Image[];
14
- onClose: () => void;
15
- }
16
-
17
- const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
18
- const [currentIndex, setCurrentIndex] = useState(0);
19
-
20
- const handlePrevious = () => {
21
- setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
22
- };
23
-
24
- const handleNext = () => {
25
- setCurrentIndex((prevIndex) =>
26
- prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
27
- );
28
- };
29
-
30
- const handleThumbnailClick = (index: number) => {
31
- setCurrentIndex(index);
32
- };
33
-
34
- return (
35
- <div className="popup-overlay">
36
- <div className="popup-container">
37
- <div className="popup-header">
38
- <span className="popup-title">{images[currentIndex].title}</span>
39
- <button className="btn-close" onClick={onClose}></button>
40
- </div>
41
- <div className="popup-body">
42
- <div
43
- className="rounded-circle border btn-prev"
44
- role="button"
45
- onClick={handlePrevious}
46
- >
47
- <img
48
- src={blcIconArrowLeft}
49
- className="blackArrow"
50
- alt="Left Arrow"
51
- ></img>
52
- </div>
53
- {/*<button*/}
54
- {/* className="btn-prev"*/}
55
- {/* onClick={handlePrevious}*/}
56
- {/* disabled={currentIndex === 0}*/}
57
- {/*>*/}
58
- {/* &lt;*/}
59
- {/*</button>*/}
60
- <img
61
- src={images[currentIndex].src}
62
- alt={images[currentIndex].title}
63
- className="main-image"
64
- />
65
- <div
66
- className="rounded-circle border btn-next"
67
- role="button"
68
- onClick={handleNext}
69
- >
70
- <img
71
- src={blcIconArrowRight}
72
- className="blackArrow"
73
- alt="Right Arrow"
74
- ></img>
75
- </div>
76
- {/*<button*/}
77
- {/* className="btn-next"*/}
78
- {/* onClick={handleNext}*/}
79
- {/* disabled={currentIndex === images.length - 1}*/}
80
- {/*>*/}
81
- {/* &gt;*/}
82
- {/*</button>*/}
83
- </div>
84
- <div className="popup-thumbnails">
85
- {images.map((image, index) => (
86
- <img
87
- key={index}
88
- src={image.src}
89
- alt={image.title}
90
- className={`thumbnail ${index === currentIndex ? "active" : ""}`}
91
- onClick={() => handleThumbnailClick(index)}
92
- />
93
- ))}
94
- </div>
95
- </div>
96
- </div>
97
- );
98
- };
99
-
100
- export default ImageListPopup;
1
+ import React, { useState } from "react";
2
+ import "bootstrap/dist/css/bootstrap.min.css";
3
+ import "./ImageListPopup.css";
4
+
5
+ interface Image {
6
+ src: string;
7
+ title: string;
8
+ }
9
+
10
+ interface ImageListPopupProps {
11
+ images: Image[];
12
+ onClose: () => void;
13
+ }
14
+
15
+ const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
16
+ const [currentIndex, setCurrentIndex] = useState(0);
17
+
18
+ const handlePrevious = () => {
19
+ setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
20
+ };
21
+
22
+ const handleNext = () => {
23
+ setCurrentIndex((prevIndex) =>
24
+ prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
25
+ );
26
+ };
27
+
28
+ return (
29
+ <div className="popup-overlay">
30
+ <div className="popup-container">
31
+ <div className="popup-header">
32
+ <span>{images[currentIndex].title}</span>
33
+ <button className="btn-close" onClick={onClose}></button>
34
+ </div>
35
+ <div className="popup-body">
36
+ <img
37
+ src={images[currentIndex].src}
38
+ alt={images[currentIndex].title}
39
+ className="img-fluid"
40
+ />
41
+ </div>
42
+ <div className="popup-footer">
43
+ {images.length > 1 && (
44
+ <>
45
+ <button
46
+ className="btn btn-secondary me-2"
47
+ onClick={handlePrevious}
48
+ >
49
+ Previous
50
+ </button>
51
+ <button className="btn btn-secondary" onClick={handleNext}>
52
+ Next
53
+ </button>
54
+ </>
55
+ )}
56
+ </div>
57
+ </div>
58
+ </div>
59
+ );
60
+ };
61
+
62
+ export default ImageListPopup;
package/src/components/Popup/Popup.tsx CHANGED
@@ -1,28 +1,28 @@
1
- import React from "react";
2
- import closeIcon from "../../assets/images/icon_close 2.png";
3
- import "./Popup.css";
4
-
5
- interface PopupProps {
6
- children: React.ReactNode;
7
- onCloseClick: () => void;
8
- }
9
-
10
- const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
11
- return (
12
- <div className="popup-overlay">
13
- <div className="shareSection col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
14
- <div className="end-0 top-0 position-absolute ">
15
- <img
16
- src={closeIcon}
17
- alt="close"
18
- className="closeIcon me-2"
19
- onClick={onCloseClick}
20
- />
21
- </div>
22
- {children}
23
- </div>
24
- </div>
25
- );
26
- };
27
-
28
- export default Popup;
1
+ import React from "react";
2
+ import closeIcon from "src/assets/images/icon_close 2.png";
3
+ import "./Popup.css";
4
+
5
+ interface PopupProps {
6
+ children: React.ReactNode;
7
+ onCloseClick: () => void;
8
+ }
9
+
10
+ const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
11
+ return (
12
+ <div className="popup-overlay">
13
+ <div className="shareSection col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
14
+ <div className="end-0 top-0 position-absolute ">
15
+ <img
16
+ src={closeIcon}
17
+ alt="close"
18
+ className="closeIcon me-2"
19
+ onClick={onCloseClick}
20
+ />
21
+ </div>
22
+ {children}
23
+ </div>
24
+ </div>
25
+ );
26
+ };
27
+
28
+ export default Popup;
package/src/index.tsx CHANGED
@@ -1,3 +1,3 @@
1
- export { default as Button } from "./components/Button/Button";
2
- export { default as Popup } from "./components/Popup/Popup";
3
- export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
1
+ export { default as Button } from "./components/Button/Button";
2
+ export { default as Popup } from "./components/Popup/Popup";
3
+ export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
package/dist/assets/images/blackarrow-Right.svg DELETED
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
2
- <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
3
- </svg>
package/dist/assets/images/blckarrow-Left.svg DELETED
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
2
- <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
3
- </svg>
package/dist/assets/images/icon_close 2.png DELETED
Binary file
package/src/assets/images/blackarrow-Right.svg DELETED
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
2
- <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
3
- </svg>
package/src/assets/images/blckarrow-Left.svg DELETED
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
2
- <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
3
- </svg>