@plurix/ecom-components 1.2.1-commerce.1 → 1.3.0-loyalty.0
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/README.md +76 -76
- package/dist/constants/index.d.ts +0 -1
- package/dist/constants/index.js +2 -3
- package/dist/main.d.ts +0 -2
- package/dist/main.js +8 -10
- package/dist/packages/Carousel/Carousel.js +47 -46
- package/dist/packages/Carousel/components/Bullets.d.ts +2 -1
- package/dist/packages/Carousel/components/Bullets.js +10 -2
- package/dist/packages/Modal/Modal.d.ts +0 -1
- package/dist/packages/Modal/Modal.js +17 -19
- package/package.json +70 -70
- package/dist/hooks/useAnalitcsEvents.d.ts +0 -4
- package/dist/hooks/useAnalitcsEvents.js +0 -11
- package/dist/packages/ChangeOrderModal/ChangeOrderModal.d.ts +0 -14
- package/dist/packages/ChangeOrderModal/ChangeOrderModal.js +0 -78
- package/dist/packages/ChangeOrderModal/api/getProductsSimilars.d.ts +0 -12
- package/dist/packages/ChangeOrderModal/api/getProductsSimilars.js +0 -33
- package/dist/packages/ChangeOrderModal/assets/icons.d.ts +0 -9
- package/dist/packages/ChangeOrderModal/assets/icons.js +0 -72
- package/dist/packages/ChangeOrderModal/components/ModalFooter.d.ts +0 -3
- package/dist/packages/ChangeOrderModal/components/ModalFooter.js +0 -14
- package/dist/packages/ChangeOrderModal/components/ProductSelected.d.ts +0 -14
- package/dist/packages/ChangeOrderModal/components/ProductSelected.js +0 -44
- package/dist/packages/ChangeOrderModal/components/SimilarProductList.d.ts +0 -9
- package/dist/packages/ChangeOrderModal/components/SimilarProductList.js +0 -109
- package/dist/packages/ChangeOrderModal/components/SimilarProducts.d.ts +0 -11
- package/dist/packages/ChangeOrderModal/components/SimilarProducts.js +0 -35
- package/dist/packages/ChangeOrderModal/mocks.d.ts +0 -115
- package/dist/packages/ChangeOrderModal/mocks.js +0 -285
- package/dist/styles/change-order-modal.global.css +0 -1
- package/dist/types/ChangeOrderModal.d.ts +0 -47
- package/dist/types/ChangeOrderModal.js +0 -1
- package/dist/types/global.d.js +0 -1
- package/dist/utils/changerOrderModal.d.ts +0 -8
- package/dist/utils/changerOrderModal.js +0 -31
package/README.md
CHANGED
|
@@ -1,76 +1,76 @@
|
|
|
1
|
-
# @plurix/ecom-components
|
|
2
|
-
|
|
3
|
-
## Dependencies
|
|
4
|
-
|
|
5
|
-
Use `yarn` to install all dependencies and prepare `husky` (used to run scripts in git steps).
|
|
6
|
-
|
|
7
|
-
## Folder Structure
|
|
8
|
-
|
|
9
|
-
- `lib`: files that will be compiled and published in the `@plurix/ecom-components` package
|
|
10
|
-
- `src`: local development
|
|
11
|
-
|
|
12
|
-
## How to Create a New Component in the Package
|
|
13
|
-
|
|
14
|
-
- Create a new folder in `lib/packages`, with your component name. Example: `MyComponent`;
|
|
15
|
-
- Create a `.tsx` file inside this new folder and export a component from there. Example:
|
|
16
|
-
|
|
17
|
-
```tsx
|
|
18
|
-
// lib/packages/MyComponent/MyComponent.tsx
|
|
19
|
-
|
|
20
|
-
export const MyComponent = () => {
|
|
21
|
-
return <h1>My Component</h1>
|
|
22
|
-
}
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
- Export the new component in `lib/main.ts`. Example:
|
|
26
|
-
|
|
27
|
-
```tsx
|
|
28
|
-
// lib/main.ts
|
|
29
|
-
|
|
30
|
-
export { MyComponent } from './packages/MyComponent/MyComponent'
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
- Create a new file called `<component-name>Example.tsx` in `src/examples` and import your component. Example:
|
|
34
|
-
|
|
35
|
-
```tsx
|
|
36
|
-
// src/examples/MyComponentExample.tsx
|
|
37
|
-
|
|
38
|
-
import { MyComponent } from '../../lib/main'
|
|
39
|
-
|
|
40
|
-
export const MyComponentExample = () => {
|
|
41
|
-
return (
|
|
42
|
-
<div className="my-component-example-container">
|
|
43
|
-
<MyComponent />
|
|
44
|
-
</div>
|
|
45
|
-
)
|
|
46
|
-
}
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
- Export the new example component in `src/index.ts`. Example:
|
|
50
|
-
|
|
51
|
-
```tsx
|
|
52
|
-
// src/examples/index.ts
|
|
53
|
-
|
|
54
|
-
export { MyComponentExample } from './MyComponentExample'
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
- Run `yarn dev`;
|
|
58
|
-
- Open the localhost link in the terminal;
|
|
59
|
-
- Choose your component in the sidebar. Now, you can develop your component and test it with `fast refresh`.
|
|
60
|
-
|
|
61
|
-
OBS: If you need to use `css` in your components, create them as `<component-name>.global.css` and import them in your Lib Component. Then, you are able to use that in `VTEX IO` and `VTEX Faststore`.
|
|
62
|
-
|
|
63
|
-

|
|
64
|
-
|
|
65
|
-
## Publishing
|
|
66
|
-
|
|
67
|
-
- After finishing your component changes, upgrade the package version in `package.json` and create an entry in `CHANGELOG.md`.
|
|
68
|
-
- Commit and push your changes to the remote repository. It will run the husky scripts: commitlint, prettier, lint, tests, and build.
|
|
69
|
-
- After all scripts pass successfully, run `npm publish` in your terminal.
|
|
70
|
-
- Copy the published version from your terminal and install it in another repository.
|
|
71
|
-
- You can import the new component by using:
|
|
72
|
-
|
|
73
|
-
```tsx
|
|
74
|
-
import { MyComponent } from '@plurix/ecom-components'
|
|
75
|
-
import '@plurix/ecom-components/dist/styles/my-component.global.css' // If you are using css
|
|
76
|
-
```
|
|
1
|
+
# @plurix/ecom-components
|
|
2
|
+
|
|
3
|
+
## Dependencies
|
|
4
|
+
|
|
5
|
+
Use `yarn` to install all dependencies and prepare `husky` (used to run scripts in git steps).
|
|
6
|
+
|
|
7
|
+
## Folder Structure
|
|
8
|
+
|
|
9
|
+
- `lib`: files that will be compiled and published in the `@plurix/ecom-components` package
|
|
10
|
+
- `src`: local development
|
|
11
|
+
|
|
12
|
+
## How to Create a New Component in the Package
|
|
13
|
+
|
|
14
|
+
- Create a new folder in `lib/packages`, with your component name. Example: `MyComponent`;
|
|
15
|
+
- Create a `.tsx` file inside this new folder and export a component from there. Example:
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
// lib/packages/MyComponent/MyComponent.tsx
|
|
19
|
+
|
|
20
|
+
export const MyComponent = () => {
|
|
21
|
+
return <h1>My Component</h1>
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
- Export the new component in `lib/main.ts`. Example:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
// lib/main.ts
|
|
29
|
+
|
|
30
|
+
export { MyComponent } from './packages/MyComponent/MyComponent'
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
- Create a new file called `<component-name>Example.tsx` in `src/examples` and import your component. Example:
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
// src/examples/MyComponentExample.tsx
|
|
37
|
+
|
|
38
|
+
import { MyComponent } from '../../lib/main'
|
|
39
|
+
|
|
40
|
+
export const MyComponentExample = () => {
|
|
41
|
+
return (
|
|
42
|
+
<div className="my-component-example-container">
|
|
43
|
+
<MyComponent />
|
|
44
|
+
</div>
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
- Export the new example component in `src/index.ts`. Example:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
// src/examples/index.ts
|
|
53
|
+
|
|
54
|
+
export { MyComponentExample } from './MyComponentExample'
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
- Run `yarn dev`;
|
|
58
|
+
- Open the localhost link in the terminal;
|
|
59
|
+
- Choose your component in the sidebar. Now, you can develop your component and test it with `fast refresh`.
|
|
60
|
+
|
|
61
|
+
OBS: If you need to use `css` in your components, create them as `<component-name>.global.css` and import them in your Lib Component. Then, you are able to use that in `VTEX IO` and `VTEX Faststore`.
|
|
62
|
+
|
|
63
|
+

|
|
64
|
+
|
|
65
|
+
## Publishing
|
|
66
|
+
|
|
67
|
+
- After finishing your component changes, upgrade the package version in `package.json` and create an entry in `CHANGELOG.md`.
|
|
68
|
+
- Commit and push your changes to the remote repository. It will run the husky scripts: commitlint, prettier, lint, tests, and build.
|
|
69
|
+
- After all scripts pass successfully, run `npm publish` in your terminal.
|
|
70
|
+
- Copy the published version from your terminal and install it in another repository.
|
|
71
|
+
- You can import the new component by using:
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import { MyComponent } from '@plurix/ecom-components'
|
|
75
|
+
import '@plurix/ecom-components/dist/styles/my-component.global.css' // If you are using css
|
|
76
|
+
```
|
package/dist/constants/index.js
CHANGED
package/dist/main.d.ts
CHANGED
|
@@ -6,5 +6,3 @@ export { Tour } from './packages/Tour/Tour';
|
|
|
6
6
|
export { Regionalization } from './packages/Regionalization/Regionalization';
|
|
7
7
|
export * from './packages/Regionalization/types';
|
|
8
8
|
export { Modal } from './packages/Modal/Modal';
|
|
9
|
-
export * from './types/ChangeOrderModal';
|
|
10
|
-
export { ChangeOrderModal } from './packages/ChangeOrderModal/ChangeOrderModal';
|
package/dist/main.js
CHANGED
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
import { CartClubAlert as e } from "./packages/CartClubAlert/CartClubAlert.js";
|
|
2
2
|
import { Carousel as p } from "./packages/Carousel/Carousel.js";
|
|
3
|
-
import { Coupons as
|
|
4
|
-
import { Onboarding as
|
|
3
|
+
import { Coupons as m } from "./packages/Coupons/Coupons.js";
|
|
4
|
+
import { Onboarding as a } from "./packages/Onboarding/Onboarding.js";
|
|
5
5
|
import { Tour as n } from "./packages/Tour/Tour.js";
|
|
6
|
-
import { Regionalization as
|
|
7
|
-
import { Modal as
|
|
8
|
-
import { ChangeOrderModal as b } from "./packages/ChangeOrderModal/ChangeOrderModal.js";
|
|
6
|
+
import { Regionalization as u } from "./packages/Regionalization/Regionalization.js";
|
|
7
|
+
import { Modal as b } from "./packages/Modal/Modal.js";
|
|
9
8
|
export {
|
|
10
9
|
p as Carousel,
|
|
11
10
|
e as CartClubAlert,
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
d as Regionalization,
|
|
11
|
+
m as Coupons,
|
|
12
|
+
b as Modal,
|
|
13
|
+
a as Onboarding,
|
|
14
|
+
u as Regionalization,
|
|
17
15
|
n as Tour
|
|
18
16
|
};
|
|
@@ -1,76 +1,76 @@
|
|
|
1
|
-
import { jsx as s, Fragment as w, jsxs as
|
|
2
|
-
import { Children as _, useState as u, useRef as
|
|
1
|
+
import { jsx as s, Fragment as w, jsxs as L } from "react/jsx-runtime";
|
|
2
|
+
import { Children as _, useState as u, useRef as $, useEffect as z } from "react";
|
|
3
3
|
import G from "./components/Bullets.js";
|
|
4
|
-
import
|
|
5
|
-
import { DefaultProps as
|
|
4
|
+
import x from "./components/Arrows.js";
|
|
5
|
+
import { DefaultProps as k } from "./utils/defaultProps.js";
|
|
6
6
|
/* empty css */const X = ({
|
|
7
|
-
children:
|
|
7
|
+
children: S,
|
|
8
8
|
id: m,
|
|
9
9
|
bullet: c,
|
|
10
10
|
arrow: r,
|
|
11
11
|
qtyItems: l,
|
|
12
12
|
gapItems: v = 4,
|
|
13
|
-
itemWidthProp:
|
|
13
|
+
itemWidthProp: a = 0,
|
|
14
14
|
isMobile: p
|
|
15
15
|
}) => {
|
|
16
|
-
const C = _.toArray(
|
|
16
|
+
const C = _.toArray(S), [A, W] = u(0), [g, D] = u(0), [E, M] = u(a), [F, I] = u(null), n = $(null), i = $(null), f = {
|
|
17
17
|
bullets: {
|
|
18
|
-
|
|
18
|
+
...k.styles.bullets,
|
|
19
19
|
...c == null ? void 0 : c.style
|
|
20
20
|
},
|
|
21
21
|
arrows: {
|
|
22
|
-
|
|
22
|
+
...k.styles.arrows,
|
|
23
23
|
...r == null ? void 0 : r.style
|
|
24
24
|
}
|
|
25
25
|
}, h = () => {
|
|
26
26
|
if (n.current) {
|
|
27
|
-
const
|
|
28
|
-
I(`${j}/${
|
|
27
|
+
const e = n.current.scrollWidth, t = n.current.scrollLeft, o = n.current.offsetWidth, d = Math.ceil(e / o), j = Math.round(t / (e / d) - 0.3) + 1;
|
|
28
|
+
I(`${j}/${d}`);
|
|
29
29
|
}
|
|
30
30
|
}, Q = () => {
|
|
31
31
|
if (n.current && i.current) {
|
|
32
|
-
const
|
|
33
|
-
|
|
32
|
+
const e = i.current.clientWidth, t = n.current.scrollLeft, o = Math.round(t / e);
|
|
33
|
+
D(o);
|
|
34
34
|
}
|
|
35
|
-
},
|
|
35
|
+
}, y = (e) => {
|
|
36
36
|
if (n.current && i.current) {
|
|
37
|
-
const
|
|
38
|
-
|
|
37
|
+
const t = i.current.clientWidth;
|
|
38
|
+
e === "prev" && (n.current.scrollLeft -= t), e === "next" && (n.current.scrollLeft += t);
|
|
39
39
|
}
|
|
40
|
-
},
|
|
40
|
+
}, N = () => {
|
|
41
41
|
if (n.current && i.current) {
|
|
42
|
-
const
|
|
43
|
-
W(l ? Math.ceil(C.length - l) :
|
|
42
|
+
const e = i.current.clientWidth, t = n.current.offsetWidth, o = n.current.scrollWidth, d = Math.round((o - t) / e);
|
|
43
|
+
W(l ? Math.ceil(C.length - l) : d);
|
|
44
44
|
}
|
|
45
|
-
}, R = (
|
|
45
|
+
}, R = (e) => {
|
|
46
46
|
if (n.current && i.current) {
|
|
47
|
-
const
|
|
48
|
-
n.current.scrollLeft =
|
|
47
|
+
const t = i.current.clientWidth;
|
|
48
|
+
n.current.scrollLeft = t * e;
|
|
49
49
|
}
|
|
50
|
-
},
|
|
51
|
-
if (n.current &&
|
|
52
|
-
const o = n.current.offsetWidth /
|
|
53
|
-
|
|
50
|
+
}, B = (e) => {
|
|
51
|
+
if (n.current && a === 0) {
|
|
52
|
+
const o = n.current.offsetWidth / e;
|
|
53
|
+
M(o);
|
|
54
54
|
}
|
|
55
55
|
}, V = {
|
|
56
|
-
width: `${
|
|
56
|
+
width: `${a || (E < 150 ? 150 : 226)}px`
|
|
57
57
|
};
|
|
58
58
|
return typeof window < "u" && window.addEventListener("resize", () => {
|
|
59
|
-
h(),
|
|
59
|
+
h(), N(), l && B(l);
|
|
60
60
|
}), z(() => {
|
|
61
|
-
var
|
|
62
|
-
l &&
|
|
61
|
+
var e;
|
|
62
|
+
l && B(l), N(), h(), (e = n.current) == null || e.addEventListener("scroll", () => {
|
|
63
63
|
h(), Q();
|
|
64
64
|
});
|
|
65
|
-
}, [n]), /* @__PURE__ */ s(w, { children: /* @__PURE__ */
|
|
66
|
-
/* @__PURE__ */
|
|
65
|
+
}, [n]), /* @__PURE__ */ s(w, { children: /* @__PURE__ */ L("div", { id: "carousel", "data-testid": "Carousel", children: [
|
|
66
|
+
/* @__PURE__ */ L("div", { className: "carousel-content", children: [
|
|
67
67
|
(r == null ? void 0 : r.isVisible) && /* @__PURE__ */ s("div", { className: "carousel-arrow-button-prev", children: /* @__PURE__ */ s(
|
|
68
|
-
|
|
68
|
+
x,
|
|
69
69
|
{
|
|
70
70
|
position: "prev",
|
|
71
71
|
style: f.arrows,
|
|
72
72
|
iconColor: r.iconColor || "#ccc",
|
|
73
|
-
onClick: () =>
|
|
73
|
+
onClick: () => y("prev")
|
|
74
74
|
}
|
|
75
75
|
) }),
|
|
76
76
|
/* @__PURE__ */ s(
|
|
@@ -79,7 +79,7 @@ import { DefaultProps as $ } from "./utils/defaultProps.js";
|
|
|
79
79
|
ref: n,
|
|
80
80
|
className: "carousel-container",
|
|
81
81
|
id: `carousel-container-tracking${m ? "-" + m : ""}`,
|
|
82
|
-
children: C.map((
|
|
82
|
+
children: C.map((e, t) => /* @__PURE__ */ s(
|
|
83
83
|
"div",
|
|
84
84
|
{
|
|
85
85
|
className: "container-item",
|
|
@@ -90,38 +90,39 @@ import { DefaultProps as $ } from "./utils/defaultProps.js";
|
|
|
90
90
|
marginBottom: `${p ? v : 0}px`
|
|
91
91
|
},
|
|
92
92
|
ref: i,
|
|
93
|
-
children:
|
|
93
|
+
children: e
|
|
94
94
|
},
|
|
95
|
-
|
|
95
|
+
t
|
|
96
96
|
))
|
|
97
97
|
}
|
|
98
98
|
),
|
|
99
99
|
r != null && r.isVisible ? /* @__PURE__ */ s("div", { className: "carousel-arrow-button-next", children: /* @__PURE__ */ s(
|
|
100
|
-
|
|
100
|
+
x,
|
|
101
101
|
{
|
|
102
102
|
position: "next",
|
|
103
103
|
style: f.arrows,
|
|
104
104
|
iconColor: r.iconColor || "#ccc",
|
|
105
|
-
onClick: () =>
|
|
105
|
+
onClick: () => y("next")
|
|
106
106
|
}
|
|
107
107
|
) }) : ""
|
|
108
108
|
] }),
|
|
109
109
|
(c == null ? void 0 : c.numeric) && /* @__PURE__ */ s("div", { className: "numeric-bullets", children: F }),
|
|
110
|
-
c != null && c.isVisible ? /* @__PURE__ */ s("div", { className: "bullets-container", children: Array.from({ length:
|
|
111
|
-
(
|
|
110
|
+
c != null && c.isVisible ? /* @__PURE__ */ s("div", { className: "bullets-container", children: Array.from({ length: A + 1 }, (e, t) => t + 1).map(
|
|
111
|
+
(e, t) => /* @__PURE__ */ s(
|
|
112
112
|
G,
|
|
113
113
|
{
|
|
114
114
|
onClick: () => {
|
|
115
|
-
R(
|
|
115
|
+
R(t);
|
|
116
116
|
},
|
|
117
|
-
index:
|
|
117
|
+
index: t,
|
|
118
118
|
style: {
|
|
119
119
|
...f.bullets,
|
|
120
120
|
transition: "all 0.8s ease-out",
|
|
121
|
-
backgroundColor: `${
|
|
122
|
-
}
|
|
121
|
+
backgroundColor: `${g === t ? (c == null ? void 0 : c.bulletEnableColor) || "#ff0000" : (c == null ? void 0 : c.bulletDisableColor) || "#ccc"}`
|
|
122
|
+
},
|
|
123
|
+
isActive: g === t
|
|
123
124
|
},
|
|
124
|
-
|
|
125
|
+
t
|
|
125
126
|
)
|
|
126
127
|
) }) : ""
|
|
127
128
|
] }) });
|
|
@@ -2,6 +2,7 @@ interface Props {
|
|
|
2
2
|
index: number;
|
|
3
3
|
onClick: () => void;
|
|
4
4
|
style: object;
|
|
5
|
+
isActive: boolean;
|
|
5
6
|
}
|
|
6
|
-
declare const Bullets: ({ index, onClick, style }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare const Bullets: ({ index, onClick, style, isActive }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
7
8
|
export default Bullets;
|
|
@@ -1,5 +1,13 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
const u = ({ index: t, onClick:
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
const u = ({ index: t, onClick: a, style: e, isActive: o }) => /* @__PURE__ */ r(
|
|
3
|
+
"button",
|
|
4
|
+
{
|
|
5
|
+
style: e,
|
|
6
|
+
onClick: a,
|
|
7
|
+
"data-active": o
|
|
8
|
+
},
|
|
9
|
+
t
|
|
10
|
+
);
|
|
3
11
|
export {
|
|
4
12
|
u as default
|
|
5
13
|
};
|
|
@@ -1,31 +1,30 @@
|
|
|
1
1
|
import { jsx as o, jsxs as i } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as s, useEffect as
|
|
3
|
-
import { ArrowIcon as
|
|
4
|
-
import { CloseIcon as
|
|
5
|
-
import { HAS_WINDOW as
|
|
6
|
-
/* empty css */const
|
|
2
|
+
import { useRef as s, useEffect as h } from "react";
|
|
3
|
+
import { ArrowIcon as b } from "../../assets/svgs/ArrowIcon.js";
|
|
4
|
+
import { CloseIcon as g } from "../../assets/svgs/CloseIcon.js";
|
|
5
|
+
import { HAS_WINDOW as k } from "../../constants/index.js";
|
|
6
|
+
/* empty css */const O = (p) => {
|
|
7
7
|
const {
|
|
8
8
|
isOpen: r,
|
|
9
|
-
setIsOpen:
|
|
9
|
+
setIsOpen: w,
|
|
10
10
|
children: L,
|
|
11
11
|
className: N,
|
|
12
12
|
title: d,
|
|
13
13
|
titleAction: a,
|
|
14
14
|
hasTitleArrow: x,
|
|
15
15
|
Footer: m,
|
|
16
|
-
hideHeader:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
if (v)
|
|
16
|
+
hideHeader: C
|
|
17
|
+
} = p, t = s(null), n = s(null), l = s(null), u = () => w(!1);
|
|
18
|
+
return h(() => {
|
|
19
|
+
if (k)
|
|
21
20
|
return r ? window.document.body.classList.add("no-scroll") : window.document.body.classList.remove("no-scroll"), () => {
|
|
22
21
|
window.document.body.classList.remove("no-scroll");
|
|
23
22
|
};
|
|
24
|
-
}, [r]),
|
|
23
|
+
}, [r]), h(() => {
|
|
25
24
|
n.current && t.current && (t.current.style.maxHeight = `calc(100% - 56px - ${n.current.offsetHeight}px)`);
|
|
26
25
|
const c = (e) => {
|
|
27
|
-
var
|
|
28
|
-
l.current && (e == null ? void 0 : e.target) instanceof Node && !((
|
|
26
|
+
var f;
|
|
27
|
+
l.current && (e == null ? void 0 : e.target) instanceof Node && !((f = l.current) != null && f.contains(e == null ? void 0 : e.target)) && u();
|
|
29
28
|
};
|
|
30
29
|
return r ? document.addEventListener("mousedown", c) : document.removeEventListener("mousedown", c), () => {
|
|
31
30
|
document.removeEventListener("mousedown", c);
|
|
@@ -37,10 +36,10 @@ import { HAS_WINDOW as v } from "../../constants/index.js";
|
|
|
37
36
|
"data-testid": "modal-container",
|
|
38
37
|
className: N,
|
|
39
38
|
children: /* @__PURE__ */ o("div", { id: "modal-content-container", children: /* @__PURE__ */ i("div", { id: "modal-content", ref: l, children: [
|
|
40
|
-
!
|
|
39
|
+
!C && /* @__PURE__ */ i("header", { children: [
|
|
41
40
|
a ? /* @__PURE__ */ i("button", { onClick: a, className: "modal-title", children: [
|
|
42
41
|
x && /* @__PURE__ */ o(
|
|
43
|
-
|
|
42
|
+
b,
|
|
44
43
|
{
|
|
45
44
|
rotate: "Left",
|
|
46
45
|
color: "var(--color-support-links)"
|
|
@@ -48,9 +47,8 @@ import { HAS_WINDOW as v } from "../../constants/index.js";
|
|
|
48
47
|
),
|
|
49
48
|
d
|
|
50
49
|
] }) : /* @__PURE__ */ o("h2", { className: "modal-title", children: d }),
|
|
51
|
-
/* @__PURE__ */ o("button", { onClick:
|
|
50
|
+
/* @__PURE__ */ o("button", { onClick: u, className: "modal-close", children: /* @__PURE__ */ o(g, { color: "var(--color-main)" }) })
|
|
52
51
|
] }),
|
|
53
|
-
u && u,
|
|
54
52
|
/* @__PURE__ */ o("div", { id: "modal-scroll", ref: t, children: L }),
|
|
55
53
|
m && /* @__PURE__ */ o("footer", { className: "modal-footer", ref: n, children: m })
|
|
56
54
|
] }) })
|
|
@@ -58,5 +56,5 @@ import { HAS_WINDOW as v } from "../../constants/index.js";
|
|
|
58
56
|
) : null;
|
|
59
57
|
};
|
|
60
58
|
export {
|
|
61
|
-
|
|
59
|
+
O as Modal
|
|
62
60
|
};
|
package/package.json
CHANGED
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@plurix/ecom-components",
|
|
3
|
-
"author": "Plurix",
|
|
4
|
-
"private": false,
|
|
5
|
-
"version": "1.
|
|
6
|
-
"type": "module",
|
|
7
|
-
"main": "dist/main.js",
|
|
8
|
-
"types": "dist/main.d.ts",
|
|
9
|
-
"files": [
|
|
10
|
-
"dist"
|
|
11
|
-
],
|
|
12
|
-
"repository": {
|
|
13
|
-
"type": "git",
|
|
14
|
-
"url": "https://github.com/plurix-ecommerce/ecom-components"
|
|
15
|
-
},
|
|
16
|
-
"sideEffects": [
|
|
17
|
-
"**/*.css"
|
|
18
|
-
],
|
|
19
|
-
"scripts": {
|
|
20
|
-
"dev": "vite",
|
|
21
|
-
"build": "tsc --p ./tsconfig-build.json && vite build",
|
|
22
|
-
"format": "prettier --write .",
|
|
23
|
-
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
24
|
-
"prepare": "husky install",
|
|
25
|
-
"preview": "vite preview",
|
|
26
|
-
"test": "jest"
|
|
27
|
-
},
|
|
28
|
-
"peerDependencies": {
|
|
29
|
-
"react": "^18.2.0",
|
|
30
|
-
"react-dom": "^18.2.0"
|
|
31
|
-
},
|
|
32
|
-
"devDependencies": {
|
|
33
|
-
"@babel/preset-env": "^7.24.5",
|
|
34
|
-
"@babel/preset-react": "^7.24.1",
|
|
35
|
-
"@commitlint/cli": "^17.4.2",
|
|
36
|
-
"@commitlint/config-conventional": "^17.4.2",
|
|
37
|
-
"@jest/globals": "^29.7.0",
|
|
38
|
-
"@testing-library/jest-dom": "^6.4.5",
|
|
39
|
-
"@testing-library/react": "^15.0.7",
|
|
40
|
-
"@types/jest": "^29.5.12",
|
|
41
|
-
"@types/node": "^20.11.30",
|
|
42
|
-
"@types/react": "^18.2.71",
|
|
43
|
-
"@types/react-dom": "^18.2.22",
|
|
44
|
-
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
|
45
|
-
"@typescript-eslint/parser": "^6.21.0",
|
|
46
|
-
"@vitejs/plugin-react": "^4.2.1",
|
|
47
|
-
"eslint": "^8.57.0",
|
|
48
|
-
"eslint-plugin-react-hooks": "^4.6.0",
|
|
49
|
-
"eslint-plugin-react-refresh": "^0.4.6",
|
|
50
|
-
"glob": "^10.3.10",
|
|
51
|
-
"husky": "^9.0.11",
|
|
52
|
-
"identity-obj-proxy": "^3.0.0",
|
|
53
|
-
"jest": "^29.7.0",
|
|
54
|
-
"jest-environment-jsdom": "^29.7.0",
|
|
55
|
-
"jest-svg-transformer": "^1.0.0",
|
|
56
|
-
"prettier": "^2.2.1",
|
|
57
|
-
"react": "^18.2.0",
|
|
58
|
-
"react-dom": "^18.2.0",
|
|
59
|
-
"rollup-plugin-delete": "^2.0.0",
|
|
60
|
-
"ts-jest": "^29.1.2",
|
|
61
|
-
"typescript": "^5.4.3",
|
|
62
|
-
"vite": "^4.5.3",
|
|
63
|
-
"vite-plugin-dts": "^3.7.3",
|
|
64
|
-
"vite-plugin-lib-inject-css": "^2.0.1"
|
|
65
|
-
},
|
|
66
|
-
"dependencies": {
|
|
67
|
-
"@acctglobal/skeleton": "^1.0.0",
|
|
68
|
-
"axios": "^1.
|
|
69
|
-
}
|
|
70
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@plurix/ecom-components",
|
|
3
|
+
"author": "Plurix",
|
|
4
|
+
"private": false,
|
|
5
|
+
"version": "1.3.0-loyalty.0",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "dist/main.js",
|
|
8
|
+
"types": "dist/main.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist"
|
|
11
|
+
],
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://github.com/plurix-ecommerce/ecom-components"
|
|
15
|
+
},
|
|
16
|
+
"sideEffects": [
|
|
17
|
+
"**/*.css"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"dev": "vite",
|
|
21
|
+
"build": "tsc --p ./tsconfig-build.json && vite build",
|
|
22
|
+
"format": "prettier --write .",
|
|
23
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
24
|
+
"prepare": "husky install",
|
|
25
|
+
"preview": "vite preview",
|
|
26
|
+
"test": "jest"
|
|
27
|
+
},
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"react": "^18.2.0",
|
|
30
|
+
"react-dom": "^18.2.0"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@babel/preset-env": "^7.24.5",
|
|
34
|
+
"@babel/preset-react": "^7.24.1",
|
|
35
|
+
"@commitlint/cli": "^17.4.2",
|
|
36
|
+
"@commitlint/config-conventional": "^17.4.2",
|
|
37
|
+
"@jest/globals": "^29.7.0",
|
|
38
|
+
"@testing-library/jest-dom": "^6.4.5",
|
|
39
|
+
"@testing-library/react": "^15.0.7",
|
|
40
|
+
"@types/jest": "^29.5.12",
|
|
41
|
+
"@types/node": "^20.11.30",
|
|
42
|
+
"@types/react": "^18.2.71",
|
|
43
|
+
"@types/react-dom": "^18.2.22",
|
|
44
|
+
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
|
45
|
+
"@typescript-eslint/parser": "^6.21.0",
|
|
46
|
+
"@vitejs/plugin-react": "^4.2.1",
|
|
47
|
+
"eslint": "^8.57.0",
|
|
48
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
|
49
|
+
"eslint-plugin-react-refresh": "^0.4.6",
|
|
50
|
+
"glob": "^10.3.10",
|
|
51
|
+
"husky": "^9.0.11",
|
|
52
|
+
"identity-obj-proxy": "^3.0.0",
|
|
53
|
+
"jest": "^29.7.0",
|
|
54
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
55
|
+
"jest-svg-transformer": "^1.0.0",
|
|
56
|
+
"prettier": "^2.2.1",
|
|
57
|
+
"react": "^18.2.0",
|
|
58
|
+
"react-dom": "^18.2.0",
|
|
59
|
+
"rollup-plugin-delete": "^2.0.0",
|
|
60
|
+
"ts-jest": "^29.1.2",
|
|
61
|
+
"typescript": "^5.4.3",
|
|
62
|
+
"vite": "^4.5.3",
|
|
63
|
+
"vite-plugin-dts": "^3.7.3",
|
|
64
|
+
"vite-plugin-lib-inject-css": "^2.0.1"
|
|
65
|
+
},
|
|
66
|
+
"dependencies": {
|
|
67
|
+
"@acctglobal/skeleton": "^1.0.0",
|
|
68
|
+
"axios": "^1.5.1"
|
|
69
|
+
}
|
|
70
|
+
}
|