@mailstep/design-system 0.1.25-beta.14 → 0.1.25-beta.16
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.
- package/package.json +16 -16
- package/ui/Blocks/ImageList/ImageList.js +1 -1
- package/ui/Blocks/ImageList/ImageList.js.map +1 -1
- package/ui/Blocks/LightBox/LightBox.js +30 -14
- package/ui/Blocks/LightBox/LightBox.js.map +1 -1
- package/ui/dts/Blocks/LightBox/LightBox.d.ts +0 -1
- package/ui/Blocks/LightBox/styles.js +0 -10
- package/ui/Blocks/LightBox/styles.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mailstep/design-system",
|
|
3
|
-
"version": "0.1.25-beta.
|
|
3
|
+
"version": "0.1.25-beta.16",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./ui/index.js",
|
|
@@ -76,26 +76,26 @@
|
|
|
76
76
|
"webpack": "^5.82.1"
|
|
77
77
|
},
|
|
78
78
|
"peerDependencies": {
|
|
79
|
-
"@fortawesome/fontawesome-svg-core": "6.3.0",
|
|
80
|
-
"@fortawesome/free-brands-svg-icons": "6.1.1",
|
|
81
|
-
"@fortawesome/pro-duotone-svg-icons": "6.0.0",
|
|
82
|
-
"@fortawesome/pro-light-svg-icons": "6.0.0",
|
|
83
|
-
"@fortawesome/pro-regular-svg-icons": "6.0.0",
|
|
84
|
-
"@fortawesome/pro-solid-svg-icons": "6.3.0",
|
|
85
|
-
"@fortawesome/react-fontawesome": "0.2.0",
|
|
86
|
-
"@xstyled/styled-components": "3.8.0",
|
|
87
|
-
"lodash": "4.17.21",
|
|
88
|
-
"react": "18.2.0",
|
|
89
|
-
"react-dom": "18.2.0",
|
|
79
|
+
"@fortawesome/fontawesome-svg-core": "^6.3.0",
|
|
80
|
+
"@fortawesome/free-brands-svg-icons": "^6.1.1",
|
|
81
|
+
"@fortawesome/pro-duotone-svg-icons": "^6.0.0",
|
|
82
|
+
"@fortawesome/pro-light-svg-icons": "^6.0.0",
|
|
83
|
+
"@fortawesome/pro-regular-svg-icons": "^6.0.0",
|
|
84
|
+
"@fortawesome/pro-solid-svg-icons": "^6.3.0",
|
|
85
|
+
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
86
|
+
"@xstyled/styled-components": "^3.8.0",
|
|
87
|
+
"lodash": "^4.17.21",
|
|
88
|
+
"react": "^18.2.0",
|
|
89
|
+
"react-dom": "^18.2.0",
|
|
90
90
|
"react-image": "^4.1.0",
|
|
91
91
|
"react-router": "^5.1.2",
|
|
92
92
|
"react-router-dom": "^5.1.2",
|
|
93
93
|
"react-toastify": "^9.1.3",
|
|
94
|
-
"react-use-draggable-scroll": "0.4.7",
|
|
95
|
-
"styled-components": "5.3.10",
|
|
96
|
-
"swiper": "11.0.3",
|
|
94
|
+
"react-use-draggable-scroll": "^0.4.7",
|
|
95
|
+
"styled-components": "^5.3.10",
|
|
96
|
+
"swiper": "^11.0.3",
|
|
97
97
|
"tslib": "^2.6.2",
|
|
98
|
-
"typescript": "5.
|
|
98
|
+
"typescript": "^5.0.4"
|
|
99
99
|
},
|
|
100
100
|
"resolutions": {
|
|
101
101
|
"jackspeak": "2.1.1"
|
|
@@ -17,7 +17,7 @@ var ImageList = function (_a) {
|
|
|
17
17
|
return (jsxs(x.div, { display: "flex", alignItems: "flex-end", children: [jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled }), images && (jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
|
|
18
18
|
var _a, _b;
|
|
19
19
|
return (jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onOpenLightBox: onOpenLightBox(index), isDisabled: isDisabled }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
|
|
20
|
-
}) }))),
|
|
20
|
+
}) }))), jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
export { ImageList };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageList.js","sources":["../../../../packages/ui/Blocks/ImageList/ImageList.tsx"],"sourcesContent":["import { __assign } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport LightBox
|
|
1
|
+
{"version":3,"file":"ImageList.js","sources":["../../../../packages/ui/Blocks/ImageList/ImageList.tsx"],"sourcesContent":["import { __assign } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport { LightBox } from '../LightBox/LightBox';\nimport { useLightBox } from '../LightBox/hooks/useLightBox';\nimport { AddPhoto } from './components/AddPhoto';\nimport { ImageElement } from './components/ImageElement';\nimport { x } from '@xstyled/styled-components';\nimport { ImageListContainer } from './styles';\nexport var ImageList = function (_a) {\n var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, isDisabled = _a.isDisabled;\n var ref = useRef();\n var events = useDraggable(ref, { isMounted: !!(images === null || images === void 0 ? void 0 : images.length) }).events;\n var _b = useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;\n return (_jsxs(x.div, { display: \"flex\", alignItems: \"flex-end\", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled }), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {\n var _a, _b;\n return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onOpenLightBox: onOpenLightBox(index), isDisabled: isDisabled }, (_b = item.id) !== null && _b !== void 0 ? _b : index));\n }) }))), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));\n};\n//# sourceMappingURL=ImageList.js.map"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAUU,IAAC,SAAS,GAAG,UAAU,EAAE,EAAE;AACrC,IAAI,IAAI,aAAa,GAAG,EAAE,CAAC,aAAa,EAAE,aAAa,GAAG,EAAE,CAAC,aAAa,EAAE,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,mBAAmB,GAAG,EAAE,CAAC,mBAAmB,EAAE,MAAM,GAAG,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU,CAAC;AAC7M,IAAI,IAAI,GAAG,GAAG,MAAM,EAAE,CAAC;AACvB,IAAI,IAAI,MAAM,GAAG,YAAY,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC;AAC5H,IAAI,IAAI,EAAE,GAAG,WAAW,EAAE,EAAE,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,eAAe,GAAG,EAAE,CAAC,eAAe,EAAE,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;AACzK,IAAI,QAAQA,IAAK,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,CAACC,GAAI,CAAC,QAAQ,EAAE,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,KAAKA,GAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,UAAU,IAAI,EAAE,KAAK,EAAE;AAC1Q,oBAAoB,IAAI,EAAE,EAAE,EAAE,CAAC;AAC/B,oBAAoB,QAAQA,GAAI,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,aAAa,EAAE,aAAa,KAAK,IAAI,IAAI,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,EAAE;AACzV,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAEA,GAAI,CAAC,QAAQ,EAAE,EAAE,YAAY,EAAE,YAAY,KAAK,IAAI,IAAI,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,YAAY,CAAC,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAClT;;;;"}
|
|
@@ -1,19 +1,35 @@
|
|
|
1
|
-
import { jsx,
|
|
2
|
-
import Button from '../../Elements/Button/Button.js';
|
|
3
|
-
import { Modal } from '../Modal/Modal.js';
|
|
4
|
-
import 'react';
|
|
5
|
-
import 'swiper/css';
|
|
6
|
-
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
7
|
-
import { Container, Image, ButtonContainer } from './styles.js';
|
|
1
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
8
2
|
|
|
3
|
+
// import { Button } from '../../Elements/Button'
|
|
4
|
+
// import Modal from '../Modal'
|
|
5
|
+
// import 'swiper/css'
|
|
6
|
+
// import { Swiper, SwiperSlide } from 'swiper/react'
|
|
7
|
+
// import { Container, Image, ButtonContainer } from './styles'
|
|
9
8
|
var LightBox = function (_a) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
_a.isLightBoxOpen; _a.onCloseLightBox; _a.lightBoxAction; _a.lightBoxActionTitle; _a.images; _a.initialSlide;
|
|
10
|
+
return jsx(Fragment, { children: "LightBox" });
|
|
11
|
+
// if (!images?.length) return null
|
|
12
|
+
//
|
|
13
|
+
// return (
|
|
14
|
+
// <Modal isShown={isLightBoxOpen} onClose={onCloseLightBox} mobileFullscreen miniCloseBtn withCloseIcon>
|
|
15
|
+
// <Swiper initialSlide={initialSlide} slidesPerView={1} autoHeight>
|
|
16
|
+
// {images.map((item) => (
|
|
17
|
+
// <SwiperSlide key={item.id}>
|
|
18
|
+
// <Container>
|
|
19
|
+
// <Image src={item.originalUrl ?? item.url} loading="lazy" alt="" />
|
|
20
|
+
// {!!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (
|
|
21
|
+
// <ButtonContainer>
|
|
22
|
+
// <Button onClick={lightBoxAction(item.id)} appearance="primaryLight">
|
|
23
|
+
// {lightBoxActionTitle}
|
|
24
|
+
// </Button>
|
|
25
|
+
// </ButtonContainer>
|
|
26
|
+
// )}
|
|
27
|
+
// </Container>
|
|
28
|
+
// </SwiperSlide>
|
|
29
|
+
// ))}
|
|
30
|
+
// </Swiper>
|
|
31
|
+
// </Modal>
|
|
32
|
+
// )
|
|
17
33
|
};
|
|
18
34
|
|
|
19
35
|
export { LightBox };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LightBox.js","sources":["../../../../packages/ui/Blocks/LightBox/LightBox.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"LightBox.js","sources":["../../../../packages/ui/Blocks/LightBox/LightBox.tsx"],"sourcesContent":["import { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n// import { Button } from '../../Elements/Button'\n// import Modal from '../Modal'\n// import 'swiper/css'\n// import { Swiper, SwiperSlide } from 'swiper/react'\n// import { Container, Image, ButtonContainer } from './styles'\nexport var LightBox = function (_a) {\n var isLightBoxOpen = _a.isLightBoxOpen, onCloseLightBox = _a.onCloseLightBox, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;\n return _jsx(_Fragment, { children: \"LightBox\" });\n // if (!images?.length) return null\n //\n // return (\n // <Modal isShown={isLightBoxOpen} onClose={onCloseLightBox} mobileFullscreen miniCloseBtn withCloseIcon>\n // <Swiper initialSlide={initialSlide} slidesPerView={1} autoHeight>\n // {images.map((item) => (\n // <SwiperSlide key={item.id}>\n // <Container>\n // <Image src={item.originalUrl ?? item.url} loading=\"lazy\" alt=\"\" />\n // {!!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (\n // <ButtonContainer>\n // <Button onClick={lightBoxAction(item.id)} appearance=\"primaryLight\">\n // {lightBoxActionTitle}\n // </Button>\n // </ButtonContainer>\n // )}\n // </Container>\n // </SwiperSlide>\n // ))}\n // </Swiper>\n // </Modal>\n // )\n};\n//# sourceMappingURL=LightBox.js.map"],"names":["_jsx","_Fragment"],"mappings":";;AACA;AACA;AACA;AACA;AACA;AACU,IAAC,QAAQ,GAAG,UAAU,EAAE,EAAE;AACpC,IAAyB,EAAE,CAAC,cAAc,CAAC,CAAmB,EAAE,CAAC,eAAe,CAAC,CAAkB,EAAE,CAAC,cAAc,CAAC,CAAuB,EAAE,CAAC,mBAAmB,CAAC,CAAU,EAAE,CAAC,MAAM,CAAC,CAAM,EAAE,CAAC,YAAY,CAAwC;AACpP,IAAI,OAAOA,GAAI,CAACC,QAAS,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { __makeTemplateObject } from 'tslib';
|
|
2
|
-
import styled from '@xstyled/styled-components';
|
|
3
|
-
|
|
4
|
-
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n position: relative;\n"], ["\n width: 100%;\n height: 100%;\n position: relative;\n"])));
|
|
5
|
-
var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
|
|
6
|
-
var ButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n justify-content: center;\n position: absolute;\n bottom: -60px;\n"], ["\n width: 100%;\n display: flex;\n justify-content: center;\n position: absolute;\n bottom: -60px;\n"])));
|
|
7
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
8
|
-
|
|
9
|
-
export { ButtonContainer, Container, Image };
|
|
10
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/LightBox/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled from '@xstyled/styled-components';\nexport var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n width: 100%;\\n height: 100%;\\n position: relative;\\n\"], [\"\\n width: 100%;\\n height: 100%;\\n position: relative;\\n\"])));\nexport var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n width: 100%;\\n height: 100%;\\n\"], [\"\\n width: 100%;\\n height: 100%;\\n\"])));\nexport var ButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n width: 100%;\\n display: flex;\\n justify-content: center;\\n position: absolute;\\n bottom: -60px;\\n\"], [\"\\n width: 100%;\\n display: flex;\\n justify-content: center;\\n position: absolute;\\n bottom: -60px;\\n\"])));\nvar templateObject_1, templateObject_2, templateObject_3;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":";;;AAEU,IAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,CAAC,4DAA4D,CAAC,EAAE,CAAC,4DAA4D,CAAC,CAAC,CAAC,EAAE;AACvN,IAAC,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,CAAC,qCAAqC,CAAC,EAAE,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE;AACrK,IAAC,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,CAAC,2GAA2G,CAAC,EAAE,CAAC,2GAA2G,CAAC,CAAC,CAAC,EAAE;AACrU,IAAI,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB;;;;"}
|