phx-react 1.3.1837 → 1.3.1839
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/dist/cjs/components/Modal/Modal.d.ts +1 -1
- package/dist/cjs/components/Modal/Modal.js +53 -19
- package/dist/cjs/components/Modal/Modal.js.map +1 -1
- package/dist/cjs/components/Onboarding/contexts/onboarding-context.d.ts +63 -0
- package/dist/cjs/components/Onboarding/contexts/onboarding-context.js +282 -0
- package/dist/cjs/components/Onboarding/contexts/onboarding-context.js.map +1 -0
- package/dist/cjs/components/Onboarding/contexts/style.d.ts +1 -0
- package/dist/cjs/components/Onboarding/contexts/style.js +77 -0
- package/dist/cjs/components/Onboarding/contexts/style.js.map +1 -0
- package/dist/cjs/components/Onboarding/hooks/use-onboarding-init.d.ts +7 -0
- package/dist/cjs/components/Onboarding/hooks/use-onboarding-init.js +19 -0
- package/dist/cjs/components/Onboarding/hooks/use-onboarding-init.js.map +1 -0
- package/dist/cjs/components/Onboarding/index.d.ts +3 -0
- package/dist/cjs/components/Onboarding/index.js +7 -0
- package/dist/cjs/components/Onboarding/index.js.map +1 -0
- package/dist/cjs/components/Onboarding/modal-slides/modal-slides.d.ts +10 -0
- package/dist/cjs/components/Onboarding/modal-slides/modal-slides.js +59 -0
- package/dist/cjs/components/Onboarding/modal-slides/modal-slides.js.map +1 -0
- package/dist/cjs/components/Onboarding/onbroading-demo.d.ts +9 -0
- package/dist/cjs/components/Onboarding/onbroading-demo.js +208 -0
- package/dist/cjs/components/Onboarding/onbroading-demo.js.map +1 -0
- package/dist/cjs/components/Slider/index.d.ts +2 -0
- package/dist/cjs/components/Slider/index.js +6 -0
- package/dist/cjs/components/Slider/index.js.map +1 -0
- package/dist/cjs/components/Slider/phx-slider-item.d.ts +6 -0
- package/dist/cjs/components/Slider/phx-slider-item.js +38 -0
- package/dist/cjs/components/Slider/phx-slider-item.js.map +1 -0
- package/dist/cjs/components/Slider/phx-slider.d.ts +18 -0
- package/dist/cjs/components/Slider/phx-slider.js +168 -0
- package/dist/cjs/components/Slider/phx-slider.js.map +1 -0
- package/dist/cjs/components/Slider/ultis/create-animate.d.ts +17 -0
- package/dist/cjs/components/Slider/ultis/create-animate.js +38 -0
- package/dist/cjs/components/Slider/ultis/create-animate.js.map +1 -0
- package/dist/cjs/index.d.ts +2 -0
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/Modal/Modal.d.ts +1 -1
- package/dist/esm/components/Modal/Modal.js +54 -20
- package/dist/esm/components/Modal/Modal.js.map +1 -1
- package/dist/esm/components/Onboarding/contexts/onboarding-context.d.ts +63 -0
- package/dist/esm/components/Onboarding/contexts/onboarding-context.js +276 -0
- package/dist/esm/components/Onboarding/contexts/onboarding-context.js.map +1 -0
- package/dist/esm/components/Onboarding/contexts/style.d.ts +1 -0
- package/dist/esm/components/Onboarding/contexts/style.js +74 -0
- package/dist/esm/components/Onboarding/contexts/style.js.map +1 -0
- package/dist/esm/components/Onboarding/hooks/use-onboarding-init.d.ts +7 -0
- package/dist/esm/components/Onboarding/hooks/use-onboarding-init.js +15 -0
- package/dist/esm/components/Onboarding/hooks/use-onboarding-init.js.map +1 -0
- package/dist/esm/components/Onboarding/index.d.ts +3 -0
- package/dist/esm/components/Onboarding/index.js +4 -0
- package/dist/esm/components/Onboarding/index.js.map +1 -0
- package/dist/esm/components/Onboarding/modal-slides/modal-slides.d.ts +10 -0
- package/dist/esm/components/Onboarding/modal-slides/modal-slides.js +54 -0
- package/dist/esm/components/Onboarding/modal-slides/modal-slides.js.map +1 -0
- package/dist/esm/components/Onboarding/onbroading-demo.d.ts +9 -0
- package/dist/esm/components/Onboarding/onbroading-demo.js +203 -0
- package/dist/esm/components/Onboarding/onbroading-demo.js.map +1 -0
- package/dist/esm/components/Slider/index.d.ts +2 -0
- package/dist/esm/components/Slider/index.js +2 -0
- package/dist/esm/components/Slider/index.js.map +1 -0
- package/dist/esm/components/Slider/phx-slider-item.d.ts +6 -0
- package/dist/esm/components/Slider/phx-slider-item.js +33 -0
- package/dist/esm/components/Slider/phx-slider-item.js.map +1 -0
- package/dist/esm/components/Slider/phx-slider.d.ts +18 -0
- package/dist/esm/components/Slider/phx-slider.js +164 -0
- package/dist/esm/components/Slider/phx-slider.js.map +1 -0
- package/dist/esm/components/Slider/ultis/create-animate.d.ts +17 -0
- package/dist/esm/components/Slider/ultis/create-animate.js +34 -0
- package/dist/esm/components/Slider/ultis/create-animate.js.map +1 -0
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"onboarding-context.js","sourceRoot":"","sources":["../../../../../src/components/Onboarding/contexts/onboarding-context.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styleOnboarding = "\n.driver-popover-footer button {\n all: unset;\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n padding: 6px 12px;\n font-weight: 400 !important;\n text-decoration: none;\n text-shadow: 1px 1px 0 #fff;\n background-color: #fff;\n color: rgb(3 7 18 / 1);\n font-size: 14px;\n line-height: normal;\n font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,\n Roboto, Helvetica Neue, sans-serif;\n cursor: pointer;\n outline: 0;\n border: 1px solid rgb(209 213 219 / 1);\n border-radius: 8px;\n transition-duration: 0.3s;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter;\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.driver-popover-footer button:active {\n --tw-shadow: 0rem 0.125rem 0.1rem 0rem #0004 inset;\n --tw-shadow-colored: inset 0rem 0.125rem 0.1rem 0rem var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n padding-top: 0.3rem;\n padding-bottom: 0.2rem;\n background-color: rgb(229 231 235 / 1);\n border-bottom-color: rgb(209 213 219 / 1);\n transition-timing-function: cubic-bezier(0.4, 0.36, 0, 1);\n}\n.driver-popover {\n font-weight: 400 !important;\n font-size: 14px;\n line-height: normal;\n font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,\n Roboto, Helvetica Neue, sans-serif;\n border-radius: 12px;\n color: #fff;\n background-color: rgb(0 0 0 / 1);\n}\n\n.driver-popover-title {\n font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,\n Roboto, Helvetica Neue, sans-serif;\n}\n.driver-popover .driver-popover-arrow-side-left.driver-popover-arrow {\n border-left-color: rgb(0 0 0 / 1);\n}\n\n.driver-popover .driver-popover-arrow-side-right.driver-popover-arrow {\n border-right-color: rgb(0 0 0 / 1);\n}\n\n.driver-popover .driver-popover-arrow-side-top.driver-popover-arrow {\n border-top-color: rgb(0 0 0 / 1);\n}\n\n.driver-popover .driver-popover-arrow-side-bottom.driver-popover-arrow {\n border-bottom-color: rgb(0 0 0 / 1);\n}\n";
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
export const styleOnboarding = `
|
|
2
|
+
.driver-popover-footer button {
|
|
3
|
+
all: unset;
|
|
4
|
+
display: flex;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
align-items: center;
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
padding: 6px 12px;
|
|
9
|
+
font-weight: 400 !important;
|
|
10
|
+
text-decoration: none;
|
|
11
|
+
text-shadow: 1px 1px 0 #fff;
|
|
12
|
+
background-color: #fff;
|
|
13
|
+
color: rgb(3 7 18 / 1);
|
|
14
|
+
font-size: 14px;
|
|
15
|
+
line-height: normal;
|
|
16
|
+
font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,
|
|
17
|
+
Roboto, Helvetica Neue, sans-serif;
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
outline: 0;
|
|
20
|
+
border: 1px solid rgb(209 213 219 / 1);
|
|
21
|
+
border-radius: 8px;
|
|
22
|
+
transition-duration: 0.3s;
|
|
23
|
+
transition-property: color, background-color, border-color,
|
|
24
|
+
text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
|
|
25
|
+
backdrop-filter;
|
|
26
|
+
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
27
|
+
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
28
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
|
|
29
|
+
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.driver-popover-footer button:active {
|
|
33
|
+
--tw-shadow: 0rem 0.125rem 0.1rem 0rem #0004 inset;
|
|
34
|
+
--tw-shadow-colored: inset 0rem 0.125rem 0.1rem 0rem var(--tw-shadow-color);
|
|
35
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
|
|
36
|
+
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
37
|
+
padding-top: 0.3rem;
|
|
38
|
+
padding-bottom: 0.2rem;
|
|
39
|
+
background-color: rgb(229 231 235 / 1);
|
|
40
|
+
border-bottom-color: rgb(209 213 219 / 1);
|
|
41
|
+
transition-timing-function: cubic-bezier(0.4, 0.36, 0, 1);
|
|
42
|
+
}
|
|
43
|
+
.driver-popover {
|
|
44
|
+
font-weight: 400 !important;
|
|
45
|
+
font-size: 14px;
|
|
46
|
+
line-height: normal;
|
|
47
|
+
font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,
|
|
48
|
+
Roboto, Helvetica Neue, sans-serif;
|
|
49
|
+
border-radius: 12px;
|
|
50
|
+
color: #fff;
|
|
51
|
+
background-color: rgb(0 0 0 / 1);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.driver-popover-title {
|
|
55
|
+
font-family: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,
|
|
56
|
+
Roboto, Helvetica Neue, sans-serif;
|
|
57
|
+
}
|
|
58
|
+
.driver-popover .driver-popover-arrow-side-left.driver-popover-arrow {
|
|
59
|
+
border-left-color: rgb(0 0 0 / 1);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.driver-popover .driver-popover-arrow-side-right.driver-popover-arrow {
|
|
63
|
+
border-right-color: rgb(0 0 0 / 1);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.driver-popover .driver-popover-arrow-side-top.driver-popover-arrow {
|
|
67
|
+
border-top-color: rgb(0 0 0 / 1);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.driver-popover .driver-popover-arrow-side-bottom.driver-popover-arrow {
|
|
71
|
+
border-bottom-color: rgb(0 0 0 / 1);
|
|
72
|
+
}
|
|
73
|
+
`;
|
|
74
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../../../src/components/Onboarding/contexts/style.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE9B,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { IPHXOnboardingFlow } from '../contexts/onboarding-context';
|
|
2
|
+
/**
|
|
3
|
+
* Đăng ký danh sách flows vào OnboardingProvider.
|
|
4
|
+
* Gọi hook này một lần trong component gốc của mỗi module.
|
|
5
|
+
* @param flows Danh sách flows cần đăng ký
|
|
6
|
+
*/
|
|
7
|
+
export declare const usePHXOnboardingInit: (flows: Array<IPHXOnboardingFlow>) => void;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useEffect } from 'react';
|
|
3
|
+
import { usePHXOnboarding } from '../contexts/onboarding-context';
|
|
4
|
+
/**
|
|
5
|
+
* Đăng ký danh sách flows vào OnboardingProvider.
|
|
6
|
+
* Gọi hook này một lần trong component gốc của mỗi module.
|
|
7
|
+
* @param flows Danh sách flows cần đăng ký
|
|
8
|
+
*/
|
|
9
|
+
export const usePHXOnboardingInit = (flows) => {
|
|
10
|
+
const { registerFlow } = usePHXOnboarding();
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
flows.map((flow) => registerFlow(flow));
|
|
13
|
+
}, [registerFlow]);
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=use-onboarding-init.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-onboarding-init.js","sourceRoot":"","sources":["../../../../../src/components/Onboarding/hooks/use-onboarding-init.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAsB,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AAErF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAE,EAAE;IACvE,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAA;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAA;IACzC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;AACpB,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Onboarding/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IPHXOnboardingSlideStep } from '../contexts/onboarding-context';
|
|
3
|
+
export interface PHXOnboardingModalProps {
|
|
4
|
+
show: boolean;
|
|
5
|
+
slides: Array<IPHXOnboardingSlideStep>;
|
|
6
|
+
hasTours: boolean;
|
|
7
|
+
onHide(): void;
|
|
8
|
+
onStartTour(): void;
|
|
9
|
+
}
|
|
10
|
+
export declare const PHXOnboardingModal: React.FC<PHXOnboardingModalProps>;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { PHXSlider } from '../../Slider';
|
|
4
|
+
import { PHXBox } from '../../Box';
|
|
5
|
+
import { PHXHorizontalStack } from '../../HorizontalStack';
|
|
6
|
+
import { PHXButton } from '../../Button';
|
|
7
|
+
import { PHXModal } from '../../Modal';
|
|
8
|
+
export const PHXOnboardingModal = ({ hasTours, onHide, onStartTour, show, slides, }) => {
|
|
9
|
+
const sliderRef = useRef(null);
|
|
10
|
+
const [currentIndex, setCurrentIndex] = useState(0);
|
|
11
|
+
// Derive from state — triggers re-render when index changes
|
|
12
|
+
const isFirstSlide = currentIndex === 0;
|
|
13
|
+
const isLastSlide = currentIndex === slides.length - 1;
|
|
14
|
+
/**
|
|
15
|
+
* Goes to previous slide
|
|
16
|
+
* @returns
|
|
17
|
+
*/
|
|
18
|
+
const goToPrevious = () => {
|
|
19
|
+
var _a;
|
|
20
|
+
if (isFirstSlide)
|
|
21
|
+
return;
|
|
22
|
+
(_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.prev();
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Goes to next slide
|
|
26
|
+
* @returns
|
|
27
|
+
*/
|
|
28
|
+
const goToNext = () => {
|
|
29
|
+
var _a;
|
|
30
|
+
if (isLastSlide)
|
|
31
|
+
return;
|
|
32
|
+
(_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.next();
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* Reset slider to first slide when modal opens
|
|
36
|
+
* @returns
|
|
37
|
+
*/
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
var _a;
|
|
40
|
+
if (show) {
|
|
41
|
+
(_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.goTo(0);
|
|
42
|
+
setCurrentIndex(0);
|
|
43
|
+
}
|
|
44
|
+
}, [show]);
|
|
45
|
+
const customFooterComponent = (React.createElement(PHXBox, { fullWidth: true, p: 'snappy' },
|
|
46
|
+
React.createElement(PHXHorizontalStack, { fullWidth: true, items: 'center', justify: 'between' },
|
|
47
|
+
isFirstSlide ? (React.createElement("span", null)) : (React.createElement(PHXButton, { onClick: goToPrevious, secondary: true }, "Quay l\u1EA1i")),
|
|
48
|
+
React.createElement(PHXHorizontalStack, { gapX: 'tight', items: 'center' },
|
|
49
|
+
React.createElement(PHXButton, { onClick: onHide, secondary: true }, "B\u1ECF qua"),
|
|
50
|
+
isLastSlide ? (hasTours ? (React.createElement(PHXButton, { onClick: onStartTour, primary: true }, "B\u1EAFt \u0111\u1EA7u Tour")) : (React.createElement(PHXButton, { onClick: onHide, primary: true }, "Ho\u00E0n t\u1EA5t"))) : (React.createElement(PHXButton, { onClick: goToNext, primary: true }, "Ti\u1EBFp theo"))))));
|
|
51
|
+
return (React.createElement(PHXModal, { customFooter: customFooterComponent, inCard: false, onHide: onHide, show: show, size: 'large-plus', title: 'H\u01B0\u1EDBng d\u1EABn s\u1EED d\u1EE5ng' },
|
|
52
|
+
React.createElement(PHXSlider, { ref: sliderRef, enableNavigate: false, gap: 0, onIndexChange: setCurrentIndex, perView: 1 }, slides.map((slideItem) => (React.createElement("img", { key: slideItem.id, alt: slideItem.title, src: slideItem.image }))))));
|
|
53
|
+
};
|
|
54
|
+
//# sourceMappingURL=modal-slides.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-slides.js","sourceRoot":"","sources":["../../../../../src/components/Onboarding/modal-slides/modal-slides.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IPHXOnboardingFlow } from './contexts/onboarding-context';
|
|
3
|
+
export declare const slidesOnlyFlow: IPHXOnboardingFlow;
|
|
4
|
+
export declare const tourOnlyFlow: IPHXOnboardingFlow;
|
|
5
|
+
export declare const slidesAndTourFlow: IPHXOnboardingFlow;
|
|
6
|
+
/**
|
|
7
|
+
* Demo cách sử dụng Onboarding
|
|
8
|
+
*/
|
|
9
|
+
export default function OnboardingDemo(): React.JSX.Element;
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { PHXOnboardingProvider, usePHXOnboarding } from './contexts/onboarding-context';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { usePHXOnboardingInit } from './hooks/use-onboarding-init';
|
|
5
|
+
import { PHXBadge } from '../Badge';
|
|
6
|
+
import { PHXTextV2 } from '../TextV2';
|
|
7
|
+
import { PHXButton } from '../Button';
|
|
8
|
+
import { PHXCard } from '../Card';
|
|
9
|
+
import { PHXBox } from '../Box';
|
|
10
|
+
import { PHXHorizontalStack } from '../HorizontalStack';
|
|
11
|
+
import { PHXBlockStack } from '../BlockStack';
|
|
12
|
+
const sharedSlides = [
|
|
13
|
+
{
|
|
14
|
+
id: 1,
|
|
15
|
+
image: 'https://cdn.dribbble.com/userupload/43777200/file/original-b6b996f3118cec5deba3cf770e2943f8.png?resize=1024x768&vertical=center',
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
id: 2,
|
|
19
|
+
image: 'https://cdn.dribbble.com/userupload/16613267/file/original-46564ba6e70008893ec7c252183d4376.png?resize=1024x768&vertical=center',
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
id: 3,
|
|
23
|
+
image: 'https://cdn.dribbble.com/userupload/11165677/file/original-8f6d2e9ce6891d724ff10cf478b6e1a7.png?resize=1024x763&vertical=center',
|
|
24
|
+
},
|
|
25
|
+
];
|
|
26
|
+
// ─── Demo Flow 1: Chỉ có Slides (không có Tour) ───────────────────────────────
|
|
27
|
+
export const slidesOnlyFlow = {
|
|
28
|
+
name: 'demo-slides-only',
|
|
29
|
+
slides: sharedSlides,
|
|
30
|
+
// steps: undefined → không có tour
|
|
31
|
+
};
|
|
32
|
+
// ─── Demo Flow 2: Chỉ có Tour (không có Slides) ───────────────────────────────
|
|
33
|
+
export const tourOnlyFlow = {
|
|
34
|
+
name: 'demo-tour-only',
|
|
35
|
+
// slides: undefined → không có slides
|
|
36
|
+
steps: [
|
|
37
|
+
{
|
|
38
|
+
element: '#tour-step-1',
|
|
39
|
+
popover: {
|
|
40
|
+
title: 'Bước 1: Tìm kiếm',
|
|
41
|
+
description: 'Sử dụng thanh tìm kiếm để nhanh chóng tìm nội dung cần thiết.',
|
|
42
|
+
side: 'bottom',
|
|
43
|
+
align: 'start',
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
element: '#tour-step-2',
|
|
48
|
+
popover: {
|
|
49
|
+
title: 'Bước 2: Bộ lọc',
|
|
50
|
+
description: 'Áp dụng bộ lọc để thu hẹp kết quả theo ngày, loại hoặc trạng thái.',
|
|
51
|
+
side: 'bottom',
|
|
52
|
+
align: 'center',
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
element: '#tour-step-3',
|
|
57
|
+
popover: {
|
|
58
|
+
title: 'Bước 3: Tạo mới',
|
|
59
|
+
description: 'Nhấn nút này để tạo chiến dịch hoặc nội dung mới.',
|
|
60
|
+
side: 'left',
|
|
61
|
+
align: 'center',
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
};
|
|
66
|
+
// ─── Demo Flow 3: Cả Slides lẫn Tour ─────────────────────────────────────────
|
|
67
|
+
export const slidesAndTourFlow = {
|
|
68
|
+
name: 'demo-slides-and-tour',
|
|
69
|
+
slides: [
|
|
70
|
+
{
|
|
71
|
+
id: 1,
|
|
72
|
+
title: 'Tổng quan hệ thống',
|
|
73
|
+
description: 'Xem qua các tính năng chính trước khi hướng dẫn chi tiết.',
|
|
74
|
+
content: 'Phần hướng dẫn này sẽ giới thiệu tổng quan rồi dẫn bạn qua từng tính năng cụ thể trên giao diện thật.',
|
|
75
|
+
image: 'https://cdn.dribbble.com/userupload/15135632/file/original-00d7aa66ca52d41e6fdaeaefc96af599.png?resize=1024x768&vertical=center',
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
id: 2,
|
|
79
|
+
title: 'Sẵn sàng bắt đầu?',
|
|
80
|
+
description: 'Nhấn "Bắt đầu Tour" để xem hướng dẫn trực tiếp trên màn hình.',
|
|
81
|
+
content: 'Tour sẽ dẫn bạn qua từng thành phần quan trọng. Bạn có thể đóng bất cứ lúc nào.',
|
|
82
|
+
image: 'https://cdn.dribbble.com/userupload/43777200/file/original-b6b996f3118cec5deba3cf770e2943f8.png?resize=1024x768&vertical=center',
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
steps: [
|
|
86
|
+
{
|
|
87
|
+
element: '#combo-step-1',
|
|
88
|
+
popover: {
|
|
89
|
+
title: 'Bảng điều khiển',
|
|
90
|
+
description: 'Đây là trung tâm điều hành. Mọi thứ bắt đầu từ đây.',
|
|
91
|
+
side: 'right',
|
|
92
|
+
align: 'start',
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
element: '#combo-step-2',
|
|
97
|
+
popover: {
|
|
98
|
+
title: 'Danh sách chiến dịch',
|
|
99
|
+
description: 'Xem toàn bộ chiến dịch đang hoạt động và đã lưu trữ.',
|
|
100
|
+
side: 'bottom',
|
|
101
|
+
align: 'center',
|
|
102
|
+
},
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
element: '#combo-step-3',
|
|
106
|
+
popover: {
|
|
107
|
+
title: 'Tạo chiến dịch mới',
|
|
108
|
+
description: 'Nhấn đây để bắt đầu một chiến dịch hoàn toàn mới.',
|
|
109
|
+
side: 'left',
|
|
110
|
+
align: 'end',
|
|
111
|
+
},
|
|
112
|
+
},
|
|
113
|
+
],
|
|
114
|
+
};
|
|
115
|
+
const demoFlows = [slidesOnlyFlow, tourOnlyFlow, slidesAndTourFlow];
|
|
116
|
+
/**
|
|
117
|
+
* Demo OnBroading
|
|
118
|
+
*/
|
|
119
|
+
function DemoContent() {
|
|
120
|
+
usePHXOnboardingInit(demoFlows);
|
|
121
|
+
const { getFlowStatus, resetStatusOnboarding, startFlow } = usePHXOnboarding();
|
|
122
|
+
const demos = [
|
|
123
|
+
{
|
|
124
|
+
flowName: 'demo-slides-only',
|
|
125
|
+
badge: 'Slides Only',
|
|
126
|
+
badgeColor: '#3b82f6',
|
|
127
|
+
title: 'Chỉ có Slides',
|
|
128
|
+
description: 'Hiển thị modal giới thiệu tổng quan với nhiều trang slide. Không có tour hướng dẫn trực tiếp trên màn hình.',
|
|
129
|
+
features: ['✅ Modal slides', '❌ Không có Tour'],
|
|
130
|
+
buttonLabel: 'Mở Slides',
|
|
131
|
+
elements: null,
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
flowName: 'demo-tour-only',
|
|
135
|
+
badge: 'Tour Only',
|
|
136
|
+
badgeColor: '#10b981',
|
|
137
|
+
title: 'Chỉ có Tour',
|
|
138
|
+
description: 'Hướng dẫn trực tiếp từng thành phần trên giao diện thật. Không có modal slides giới thiệu.',
|
|
139
|
+
features: ['❌ Không có Slides', '✅ Tour trực tiếp'],
|
|
140
|
+
buttonLabel: 'Bắt đầu Tour',
|
|
141
|
+
elements: [
|
|
142
|
+
{ id: 'tour-step-1', label: '🔍 Tìm kiếm' },
|
|
143
|
+
{ id: 'tour-step-2', label: '🗂 Bộ lọc' },
|
|
144
|
+
{ id: 'tour-step-3', label: '➕ Tạo mới' },
|
|
145
|
+
],
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
flowName: 'demo-slides-and-tour',
|
|
149
|
+
badge: 'Slides + Tour',
|
|
150
|
+
badgeColor: '#8b5cf6',
|
|
151
|
+
title: 'Slides & Tour kết hợp',
|
|
152
|
+
description: 'Mở slides giới thiệu tổng quan trước. Sau đó có nút "Bắt đầu Tour" để chuyển sang hướng dẫn chi tiết.',
|
|
153
|
+
features: ['✅ Modal slides', '✅ Tour trực tiếp'],
|
|
154
|
+
buttonLabel: 'Bắt đầu',
|
|
155
|
+
elements: [
|
|
156
|
+
{ id: 'combo-step-1', label: '🏠 Dashboard' },
|
|
157
|
+
{ id: 'combo-step-2', label: '📋 Chiến dịch' },
|
|
158
|
+
{ id: 'combo-step-3', label: '🆕 Tạo mới' },
|
|
159
|
+
],
|
|
160
|
+
},
|
|
161
|
+
];
|
|
162
|
+
return (React.createElement("div", { className: 'mx-auto max-w-6xl' },
|
|
163
|
+
React.createElement("div", { className: 'mb-12' },
|
|
164
|
+
React.createElement("h1", { className: 'mb-3 text-3xl font-bold text-slate-900' }, "Onboarding Demo"),
|
|
165
|
+
React.createElement("p", { className: 'text-base text-slate-500' }, "3 tr\u01B0\u1EDDng h\u1EE3p: ch\u1EC9 slides, ch\u1EC9 tour, v\u00E0 k\u1EBFt h\u1EE3p c\u1EA3 hai.")),
|
|
166
|
+
React.createElement("div", { className: 'grid gap-6 [grid-template-columns:repeat(auto-fit,minmax(280px,1fr))]' }, demos.map((demo) => {
|
|
167
|
+
const status = getFlowStatus(demo.flowName);
|
|
168
|
+
return (React.createElement(PHXCard, { key: demo.flowName },
|
|
169
|
+
React.createElement(PHXBadge, { text: demo.badge, type: 'success' }),
|
|
170
|
+
React.createElement(PHXBlockStack, { gap: 'base' },
|
|
171
|
+
React.createElement(PHXTextV2, { size: 'body', color: 'primary', lineHeight: 'loose' }, demo.title),
|
|
172
|
+
React.createElement(PHXTextV2, { size: 'caption', lineHeight: 'base' }, demo.description),
|
|
173
|
+
React.createElement("ul", { className: 'flex flex-col gap-3' }, demo.features.map((feature) => (React.createElement(PHXTextV2, { size: 'caption', key: feature },
|
|
174
|
+
"\u2022 ",
|
|
175
|
+
feature))))),
|
|
176
|
+
React.createElement("div", { className: 'flex flex-col gap-1 mt-5 rounded-lg bg-slate-50 p-3 text-xs text-slate-500' },
|
|
177
|
+
React.createElement("span", { className: 'mb-1 font-semibold text-slate-600' }, "Tr\u1EA1ng th\u00E1i (in-memory):"),
|
|
178
|
+
React.createElement(PHXHorizontalStack, { gapX: 'base', items: 'center' },
|
|
179
|
+
"Slides:",
|
|
180
|
+
' ',
|
|
181
|
+
React.createElement(PHXBox, { pt: 'atomic' },
|
|
182
|
+
React.createElement(PHXTextV2, { color: status.slidesCompleted ? 'success' : 'default', size: 'caption', weight: 'bold' }, status.slidesCompleted ? '✅ Đã xem' : '⏳ Chưa xem'))),
|
|
183
|
+
React.createElement(PHXBox, { pt: 'atomic' },
|
|
184
|
+
React.createElement(PHXHorizontalStack, { gapX: 'base', items: 'center' },
|
|
185
|
+
"Tour:",
|
|
186
|
+
' ',
|
|
187
|
+
React.createElement(PHXTextV2, { color: 'success', size: 'caption', weight: 'bold' }, status.toursCompleted ? '✅ Đã hoàn thành' : '⏳ Chưa làm')))),
|
|
188
|
+
demo.elements && (React.createElement("div", { className: 'flex flex-wrap gap-2 border-t border-slate-100 pt-4' }, demo.elements.map((el) => (React.createElement("div", { key: el.id, id: el.id, className: 'cursor-default rounded-lg border border-slate-200 bg-slate-50 px-3.5 py-1.5 text-sm font-medium text-slate-600' }, el.label))))),
|
|
189
|
+
React.createElement("div", { className: 'mt-5 flex flex-col gap-2' },
|
|
190
|
+
React.createElement(PHXButton, { id: `btn-${demo.flowName}`, primary: true, onClick: () => {
|
|
191
|
+
resetStatusOnboarding(demo.flowName);
|
|
192
|
+
startFlow(demo.flowName);
|
|
193
|
+
} }, demo.buttonLabel))));
|
|
194
|
+
}))));
|
|
195
|
+
}
|
|
196
|
+
/**
|
|
197
|
+
* Demo cách sử dụng Onboarding
|
|
198
|
+
*/
|
|
199
|
+
export default function OnboardingDemo() {
|
|
200
|
+
return (React.createElement(PHXOnboardingProvider, null,
|
|
201
|
+
React.createElement(DemoContent, null)));
|
|
202
|
+
}
|
|
203
|
+
//# sourceMappingURL=onbroading-demo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"onbroading-demo.js","sourceRoot":"","sources":["../../../../src/components/Onboarding/onbroading-demo.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import React, { useEffect, useRef } from 'react';
|
|
3
|
+
export const PHXSliderItem = ({ children, onWidthChange }) => {
|
|
4
|
+
const observerRef = useRef(null);
|
|
5
|
+
const prevWidthRef = useRef(0);
|
|
6
|
+
const containerRef = useRef(null);
|
|
7
|
+
/**
|
|
8
|
+
* Callback when observer get the width of children
|
|
9
|
+
* @param entries
|
|
10
|
+
*/
|
|
11
|
+
const handleObserver = (entries) => {
|
|
12
|
+
for (const entry of entries) {
|
|
13
|
+
if (prevWidthRef.current !== entry.contentRect.width) {
|
|
14
|
+
onWidthChange === null || onWidthChange === void 0 ? void 0 : onWidthChange(entry.contentRect.width);
|
|
15
|
+
prevWidthRef.current = entry.contentRect.width;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Observes the width of the child element
|
|
21
|
+
* @returns
|
|
22
|
+
*/
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
observerRef.current = new ResizeObserver(handleObserver);
|
|
25
|
+
observerRef.current.observe(containerRef.current);
|
|
26
|
+
return () => {
|
|
27
|
+
var _a;
|
|
28
|
+
(_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
29
|
+
};
|
|
30
|
+
}, []);
|
|
31
|
+
return (React.createElement("div", { ref: containerRef, className: 'shrink-0 [&_img]:pointer-events-none [&_img]:block', style: { width: 'var(--phx-slider-item-width)' } }, children));
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=phx-slider-item.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"phx-slider-item.js","sourceRoot":"","sources":["../../../../src/components/Slider/phx-slider-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,EAAE,EAAiB,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAO/D,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;IACnF,MAAM,WAAW,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAA;IACvD,MAAM,YAAY,GAAG,MAAM,CAAS,CAAC,CAAC,CAAA;IACtC,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACjD;;;OAGG;IACH,MAAM,cAAc,GAAG,CAAC,OAAmC,EAAE,EAAE;QAC7D,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;YAC5B,IAAI,YAAY,CAAC,OAAO,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;gBACrD,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;gBACxC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAA;YAChD,CAAC;QACH,CAAC;IACH,CAAC,CAAA;IACD;;;OAGG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,cAAc,CAAC,CAAA;QACxD,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAQ,CAAC,CAAA;QAElD,OAAO,GAAG,EAAE;;YACV,MAAA,WAAW,CAAC,OAAO,0CAAE,UAAU,EAAE,CAAA;QACnC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,6BACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,oDAAoD,EAC9D,KAAK,EAAE,EAAE,KAAK,EAAE,8BAA8B,EAAE,IAE/C,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface PHXSliderProps {
|
|
4
|
+
perView?: number;
|
|
5
|
+
gap?: number;
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
onIndexChange?(index: number): void;
|
|
8
|
+
enableNavigate?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface PHXSliderRef {
|
|
11
|
+
prev(): void;
|
|
12
|
+
next(): void;
|
|
13
|
+
goTo(index: number): void;
|
|
14
|
+
currentIndex: number;
|
|
15
|
+
isFirstSlide: boolean;
|
|
16
|
+
isLastSlide: boolean;
|
|
17
|
+
}
|
|
18
|
+
export declare const PHXSlider: React.ForwardRefExoticComponent<PHXSliderProps & React.RefAttributes<PHXSliderRef>>;
|