@knocklabs/react 0.6.2 → 0.7.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/CHANGELOG.md +12 -0
- package/dist/cjs/index.css +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/modules/guide/components/Banner/Banner.js +2 -0
- package/dist/cjs/modules/guide/components/Banner/Banner.js.map +1 -0
- package/dist/cjs/modules/guide/components/Card/Card.js +2 -0
- package/dist/cjs/modules/guide/components/Card/Card.js.map +1 -0
- package/dist/cjs/modules/guide/components/Modal/Modal.js +2 -0
- package/dist/cjs/modules/guide/components/Modal/Modal.js.map +1 -0
- package/dist/cjs/modules/guide/components/helpers.js +2 -0
- package/dist/cjs/modules/guide/components/helpers.js.map +1 -0
- package/dist/esm/index.mjs +47 -38
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/modules/guide/components/Banner/Banner.mjs +133 -0
- package/dist/esm/modules/guide/components/Banner/Banner.mjs.map +1 -0
- package/dist/esm/modules/guide/components/Card/Card.mjs +145 -0
- package/dist/esm/modules/guide/components/Card/Card.mjs.map +1 -0
- package/dist/esm/modules/guide/components/Modal/Modal.mjs +147 -0
- package/dist/esm/modules/guide/components/Modal/Modal.mjs.map +1 -0
- package/dist/esm/modules/guide/components/helpers.mjs +15 -0
- package/dist/esm/modules/guide/components/helpers.mjs.map +1 -0
- package/dist/index.css +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/modules/guide/components/Banner/Banner.d.ts +46 -0
- package/dist/types/modules/guide/components/Banner/Banner.d.ts.map +1 -0
- package/dist/types/modules/guide/components/Banner/index.d.ts +2 -0
- package/dist/types/modules/guide/components/Banner/index.d.ts.map +1 -0
- package/dist/types/modules/guide/components/Card/Card.d.ts +51 -0
- package/dist/types/modules/guide/components/Card/Card.d.ts.map +1 -0
- package/dist/types/modules/guide/components/Card/index.d.ts +2 -0
- package/dist/types/modules/guide/components/Card/index.d.ts.map +1 -0
- package/dist/types/modules/guide/components/Modal/Modal.d.ts +64 -0
- package/dist/types/modules/guide/components/Modal/Modal.d.ts.map +1 -0
- package/dist/types/modules/guide/components/Modal/index.d.ts +2 -0
- package/dist/types/modules/guide/components/Modal/index.d.ts.map +1 -0
- package/dist/types/modules/guide/components/helpers.d.ts +2 -0
- package/dist/types/modules/guide/components/helpers.d.ts.map +1 -0
- package/dist/types/modules/guide/components/index.d.ts +4 -0
- package/dist/types/modules/guide/components/index.d.ts.map +1 -0
- package/dist/types/modules/guide/components/types.d.ts +14 -0
- package/dist/types/modules/guide/components/types.d.ts.map +1 -0
- package/dist/types/modules/guide/index.d.ts +2 -0
- package/dist/types/modules/guide/index.d.ts.map +1 -0
- package/package.json +8 -4
@@ -0,0 +1,133 @@
|
|
1
|
+
import { useGuide as g } from "@knocklabs/react-core";
|
2
|
+
import i from "clsx";
|
3
|
+
import t from "react";
|
4
|
+
import { maybeNavigateToUrlWithDelay as N } from "../helpers.mjs";
|
5
|
+
/* empty css */
|
6
|
+
const f = "banner", s = ({
|
7
|
+
children: e,
|
8
|
+
className: n,
|
9
|
+
...a
|
10
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner", n), ...a }, e);
|
11
|
+
s.displayName = "BannerView.Root";
|
12
|
+
const m = ({
|
13
|
+
children: e,
|
14
|
+
className: n,
|
15
|
+
...a
|
16
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner__message", n), ...a }, e);
|
17
|
+
m.displayName = "BannerView.Content";
|
18
|
+
const d = ({
|
19
|
+
title: e,
|
20
|
+
className: n,
|
21
|
+
...a
|
22
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner__title", n), ...a }, e);
|
23
|
+
d.displayName = "BannerView.Title";
|
24
|
+
const u = ({
|
25
|
+
body: e,
|
26
|
+
className: n,
|
27
|
+
...a
|
28
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner__body", n), dangerouslySetInnerHTML: {
|
29
|
+
__html: e
|
30
|
+
}, ...a });
|
31
|
+
u.displayName = "BannerView.Body";
|
32
|
+
const y = ({
|
33
|
+
children: e,
|
34
|
+
className: n,
|
35
|
+
...a
|
36
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-banner__actions", n), ...a }, e);
|
37
|
+
y.displayName = "BannerView.Actions";
|
38
|
+
const _ = ({
|
39
|
+
text: e,
|
40
|
+
action: n,
|
41
|
+
className: a,
|
42
|
+
...r
|
43
|
+
}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-banner__action", a), ...r }, e);
|
44
|
+
_.displayName = "BannerView.PrimaryButton";
|
45
|
+
const b = ({
|
46
|
+
text: e,
|
47
|
+
action: n,
|
48
|
+
className: a,
|
49
|
+
...r
|
50
|
+
}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-banner__action knock-guide-banner__action--secondary", a), ...r }, e);
|
51
|
+
b.displayName = "BannerView.SecondaryButton";
|
52
|
+
const p = ({
|
53
|
+
className: e,
|
54
|
+
...n
|
55
|
+
}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-banner__close", e), ...n }, /* @__PURE__ */ t.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none" }, /* @__PURE__ */ t.createElement("g", { fill: "#60646C", fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ t.createElement("path", { d: "M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z" }), /* @__PURE__ */ t.createElement("path", { d: "M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z" }))));
|
56
|
+
p.displayName = "BannerView.DismissButton";
|
57
|
+
const k = ({
|
58
|
+
content: e,
|
59
|
+
colorMode: n = "light",
|
60
|
+
onDismiss: a,
|
61
|
+
onButtonClick: r
|
62
|
+
}) => /* @__PURE__ */ t.createElement(s, { "data-knock-color-mode": n }, /* @__PURE__ */ t.createElement(m, null, /* @__PURE__ */ t.createElement(d, { title: e.title }), /* @__PURE__ */ t.createElement(u, { body: e.body })), /* @__PURE__ */ t.createElement(y, null, e.secondary_button && /* @__PURE__ */ t.createElement(b, { text: e.secondary_button.text, action: e.secondary_button.action, onClick: (c) => {
|
63
|
+
if (r) {
|
64
|
+
const {
|
65
|
+
text: l,
|
66
|
+
action: o
|
67
|
+
} = e.secondary_button;
|
68
|
+
r(c, {
|
69
|
+
name: "secondary_button",
|
70
|
+
text: l,
|
71
|
+
action: o
|
72
|
+
});
|
73
|
+
}
|
74
|
+
} }), e.primary_button && /* @__PURE__ */ t.createElement(_, { text: e.primary_button.text, action: e.primary_button.action, onClick: (c) => {
|
75
|
+
if (r) {
|
76
|
+
const {
|
77
|
+
text: l,
|
78
|
+
action: o
|
79
|
+
} = e.primary_button;
|
80
|
+
r(c, {
|
81
|
+
name: "primary_button",
|
82
|
+
text: l,
|
83
|
+
action: o
|
84
|
+
});
|
85
|
+
}
|
86
|
+
} }), e.dismissible && /* @__PURE__ */ t.createElement(p, { onClick: a })));
|
87
|
+
k.displayName = "BannerView.Default";
|
88
|
+
const B = ({
|
89
|
+
guideKey: e,
|
90
|
+
onButtonClick: n
|
91
|
+
}) => {
|
92
|
+
const {
|
93
|
+
guide: a,
|
94
|
+
step: r,
|
95
|
+
colorMode: c
|
96
|
+
} = g({
|
97
|
+
key: e,
|
98
|
+
type: f
|
99
|
+
});
|
100
|
+
return t.useEffect(() => {
|
101
|
+
r && r.markAsSeen();
|
102
|
+
}, [r]), !a || !r ? null : /* @__PURE__ */ t.createElement(k, { content: r.content, colorMode: c, onDismiss: () => r.markAsArchived(), onButtonClick: (l, o) => {
|
103
|
+
const E = {
|
104
|
+
...o,
|
105
|
+
type: "button_click"
|
106
|
+
};
|
107
|
+
return r.markAsInteracted({
|
108
|
+
metadata: E
|
109
|
+
}), n ? n(l, {
|
110
|
+
button: o,
|
111
|
+
step: r,
|
112
|
+
guide: a
|
113
|
+
}) : N(o.action);
|
114
|
+
} });
|
115
|
+
};
|
116
|
+
B.displayName = "Banner";
|
117
|
+
const w = {};
|
118
|
+
Object.assign(w, {
|
119
|
+
Default: k,
|
120
|
+
Root: s,
|
121
|
+
Content: m,
|
122
|
+
Title: d,
|
123
|
+
Body: u,
|
124
|
+
Actions: y,
|
125
|
+
PrimaryButton: _,
|
126
|
+
SecondaryButton: b,
|
127
|
+
DismissButton: p
|
128
|
+
});
|
129
|
+
export {
|
130
|
+
B as Banner,
|
131
|
+
w as BannerView
|
132
|
+
};
|
133
|
+
//# sourceMappingURL=Banner.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Banner.mjs","sources":["../../../../../../src/modules/guide/components/Banner/Banner.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n ButtonContent,\n TargetButton,\n TargetButtonWithGuideContext,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"banner\";\n\nconst Root: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-banner\", className)} {...props}>\n {children}\n </div>\n );\n};\nRoot.displayName = \"BannerView.Root\";\n\nconst Content: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-banner__message\", className)} {...props}>\n {children}\n </div>\n );\n};\nContent.displayName = \"BannerView.Content\";\n\nconst Title: React.FC<\n { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-banner__title\", className)} {...props}>\n {title}\n </div>\n );\n};\nTitle.displayName = \"BannerView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n body,\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(\"knock-guide-banner__body\", className)}\n dangerouslySetInnerHTML={{ __html: body }}\n {...props}\n />\n );\n};\nBody.displayName = \"BannerView.Body\";\n\nconst Actions: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-banner__actions\", className)} {...props}>\n {children}\n </div>\n );\n};\nActions.displayName = \"BannerView.Actions\";\n\nconst PrimaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button\n className={clsx(\"knock-guide-banner__action\", className)}\n {...props}\n >\n {text}\n </button>\n );\n};\nPrimaryButton.displayName = \"BannerView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button\n className={clsx(\n \"knock-guide-banner__action knock-guide-banner__action--secondary\",\n className,\n )}\n {...props}\n >\n {text}\n </button>\n );\n};\nSecondaryButton.displayName = \"BannerView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n className,\n ...props\n}) => {\n return (\n <button className={clsx(\"knock-guide-banner__close\", className)} {...props}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n >\n <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n </g>\n </svg>\n </button>\n );\n};\nDismissButton.displayName = \"BannerView.DismissButton\";\n\ntype BannerContent = {\n title: string;\n body: string;\n primary_button?: ButtonContent;\n secondary_button?: ButtonContent;\n dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n content: BannerContent;\n colorMode?: ColorMode;\n onDismiss?: () => void;\n onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({ content, colorMode = \"light\", onDismiss, onButtonClick }) => {\n return (\n <Root data-knock-color-mode={colorMode}>\n <Content>\n <Title title={content.title} />\n <Body body={content.body} />\n </Content>\n <Actions>\n {content.secondary_button && (\n <SecondaryButton\n text={content.secondary_button.text}\n action={content.secondary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.secondary_button!;\n onButtonClick(e, { name: \"secondary_button\", text, action });\n }\n }}\n />\n )}\n\n {content.primary_button && (\n <PrimaryButton\n text={content.primary_button.text}\n action={content.primary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.primary_button!;\n onButtonClick(e, { name: \"primary_button\", text, action });\n }\n }}\n />\n )}\n\n {content.dismissible && <DismissButton onClick={onDismiss} />}\n </Actions>\n </Root>\n );\n};\nDefaultView.displayName = \"BannerView.Default\";\n\ntype BannerProps = {\n guideKey?: string;\n onButtonClick?: (\n e: React.MouseEvent,\n target: TargetButtonWithGuideContext,\n ) => void;\n};\n\nexport const Banner: React.FC<BannerProps> = ({ guideKey, onButtonClick }) => {\n const { guide, step, colorMode } = useGuide({\n key: guideKey,\n type: MESSAGE_TYPE,\n });\n\n React.useEffect(() => {\n if (step) step.markAsSeen();\n }, [step]);\n\n if (!guide || !step) return null;\n\n return (\n <DefaultView\n content={step.content as BannerContent}\n colorMode={colorMode}\n onDismiss={() => step.markAsArchived()}\n onButtonClick={(e, button) => {\n const metadata = { ...button, type: \"button_click\" };\n step.markAsInteracted({ metadata });\n\n return onButtonClick\n ? onButtonClick(e, { button, step, guide })\n : maybeNavigateToUrlWithDelay(button.action);\n }}\n />\n );\n};\nBanner.displayName = \"Banner\";\n\nexport const BannerView = {} as {\n Default: typeof DefaultView;\n Root: typeof Root;\n Content: typeof Content;\n Title: typeof Title;\n Body: typeof Body;\n Actions: typeof Actions;\n PrimaryButton: typeof PrimaryButton;\n SecondaryButton: typeof SecondaryButton;\n DismissButton: typeof DismissButton;\n};\n\nObject.assign(BannerView, {\n Default: DefaultView,\n Root,\n Content,\n Title,\n Body,\n Actions,\n PrimaryButton,\n SecondaryButton,\n DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","secondary_button","e","name","primary_button","dismissible","Banner","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","BannerView","Object","assign","Default"],"mappings":"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"}
|
@@ -0,0 +1,145 @@
|
|
1
|
+
import { useGuide as w } from "@knocklabs/react-core";
|
2
|
+
import i from "clsx";
|
3
|
+
import t from "react";
|
4
|
+
import { maybeNavigateToUrlWithDelay as f } from "../helpers.mjs";
|
5
|
+
/* empty css */
|
6
|
+
const C = "card", o = ({
|
7
|
+
children: e,
|
8
|
+
className: a,
|
9
|
+
...r
|
10
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card", a), ...r }, e);
|
11
|
+
o.displayName = "CardView.Root";
|
12
|
+
const s = ({
|
13
|
+
children: e,
|
14
|
+
className: a,
|
15
|
+
...r
|
16
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card__message", a), ...r }, e);
|
17
|
+
s.displayName = "CardView.Content";
|
18
|
+
const N = ({
|
19
|
+
children: e,
|
20
|
+
className: a,
|
21
|
+
...r
|
22
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card__header", a), ...r }, e);
|
23
|
+
N.displayName = "CardView.Header";
|
24
|
+
const g = ({
|
25
|
+
headline: e,
|
26
|
+
className: a,
|
27
|
+
...r
|
28
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card__headline", a), ...r }, e);
|
29
|
+
g.displayName = "CardView.Headline";
|
30
|
+
const m = ({
|
31
|
+
title: e,
|
32
|
+
className: a,
|
33
|
+
...r
|
34
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card__title", a), ...r }, e);
|
35
|
+
m.displayName = "CardView.Title";
|
36
|
+
const u = ({
|
37
|
+
body: e,
|
38
|
+
className: a,
|
39
|
+
...r
|
40
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card__body", a), dangerouslySetInnerHTML: {
|
41
|
+
__html: e
|
42
|
+
}, ...r });
|
43
|
+
u.displayName = "CardView.Body";
|
44
|
+
const y = ({
|
45
|
+
children: e,
|
46
|
+
className: a,
|
47
|
+
...r
|
48
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: i("knock-guide-card__actions", a), ...r }, e);
|
49
|
+
y.displayName = "CardView.Actions";
|
50
|
+
const _ = ({
|
51
|
+
text: e,
|
52
|
+
action: a,
|
53
|
+
className: r,
|
54
|
+
...n
|
55
|
+
}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-card__action", r), ...n }, e);
|
56
|
+
_.displayName = "CardView.PrimaryButton";
|
57
|
+
const p = ({
|
58
|
+
text: e,
|
59
|
+
action: a,
|
60
|
+
className: r,
|
61
|
+
...n
|
62
|
+
}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-card__action knock-guide-card__action--secondary", r), ...n }, e);
|
63
|
+
p.displayName = "CardView.SecondaryButton";
|
64
|
+
const k = ({
|
65
|
+
className: e,
|
66
|
+
...a
|
67
|
+
}) => /* @__PURE__ */ t.createElement("button", { className: i("knock-guide-card__close", e), ...a }, /* @__PURE__ */ t.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none" }, /* @__PURE__ */ t.createElement("g", { fill: "#60646C", fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ t.createElement("path", { d: "M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z" }), /* @__PURE__ */ t.createElement("path", { d: "M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z" }))));
|
68
|
+
k.displayName = "CardView.DismissButton";
|
69
|
+
const E = ({
|
70
|
+
content: e,
|
71
|
+
colorMode: a = "light",
|
72
|
+
onDismiss: r,
|
73
|
+
onButtonClick: n
|
74
|
+
}) => /* @__PURE__ */ t.createElement(o, { "data-knock-color-mode": a }, /* @__PURE__ */ t.createElement(s, null, /* @__PURE__ */ t.createElement(N, null, /* @__PURE__ */ t.createElement(g, { headline: e.headline }), e.dismissible && /* @__PURE__ */ t.createElement(k, { onClick: r })), /* @__PURE__ */ t.createElement(m, { title: e.title }), /* @__PURE__ */ t.createElement(u, { body: e.body })), /* @__PURE__ */ t.createElement(y, null, e.primary_button && /* @__PURE__ */ t.createElement(_, { text: e.primary_button.text, action: e.primary_button.action, onClick: (d) => {
|
75
|
+
if (n) {
|
76
|
+
const {
|
77
|
+
text: l,
|
78
|
+
action: c
|
79
|
+
} = e.primary_button;
|
80
|
+
n(d, {
|
81
|
+
name: "primary_button",
|
82
|
+
text: l,
|
83
|
+
action: c
|
84
|
+
});
|
85
|
+
}
|
86
|
+
} }), e.secondary_button && /* @__PURE__ */ t.createElement(p, { text: e.secondary_button.text, action: e.secondary_button.action, onClick: (d) => {
|
87
|
+
if (n) {
|
88
|
+
const {
|
89
|
+
text: l,
|
90
|
+
action: c
|
91
|
+
} = e.secondary_button;
|
92
|
+
n(d, {
|
93
|
+
name: "secondary_button",
|
94
|
+
text: l,
|
95
|
+
action: c
|
96
|
+
});
|
97
|
+
}
|
98
|
+
} })));
|
99
|
+
E.displayName = "CardView.Default";
|
100
|
+
const h = ({
|
101
|
+
guideKey: e,
|
102
|
+
onButtonClick: a
|
103
|
+
}) => {
|
104
|
+
const {
|
105
|
+
guide: r,
|
106
|
+
step: n,
|
107
|
+
colorMode: d
|
108
|
+
} = w({
|
109
|
+
key: e,
|
110
|
+
type: C
|
111
|
+
});
|
112
|
+
return t.useEffect(() => {
|
113
|
+
n && n.markAsSeen();
|
114
|
+
}, [n]), !r || !n ? null : /* @__PURE__ */ t.createElement(E, { content: n.content, colorMode: d, onDismiss: () => n.markAsArchived(), onButtonClick: (l, c) => {
|
115
|
+
const b = {
|
116
|
+
...c,
|
117
|
+
type: "button_click"
|
118
|
+
};
|
119
|
+
return n.markAsInteracted({
|
120
|
+
metadata: b
|
121
|
+
}), a ? a(l, {
|
122
|
+
button: c,
|
123
|
+
step: n,
|
124
|
+
guide: r
|
125
|
+
}) : f(c.action);
|
126
|
+
} });
|
127
|
+
};
|
128
|
+
h.displayName = "Card";
|
129
|
+
const v = {};
|
130
|
+
Object.assign(v, {
|
131
|
+
Default: E,
|
132
|
+
Root: o,
|
133
|
+
Content: s,
|
134
|
+
Title: m,
|
135
|
+
Body: u,
|
136
|
+
Actions: y,
|
137
|
+
PrimaryButton: _,
|
138
|
+
SecondaryButton: p,
|
139
|
+
DismissButton: k
|
140
|
+
});
|
141
|
+
export {
|
142
|
+
h as Card,
|
143
|
+
v as CardView
|
144
|
+
};
|
145
|
+
//# sourceMappingURL=Card.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Card.mjs","sources":["../../../../../../src/modules/guide/components/Card/Card.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n ButtonContent,\n TargetButton,\n TargetButtonWithGuideContext,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"card\";\n\nconst Root: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card\", className)} {...props}>\n {children}\n </div>\n );\n};\nRoot.displayName = \"CardView.Root\";\n\nconst Content: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__message\", className)} {...props}>\n {children}\n </div>\n );\n};\nContent.displayName = \"CardView.Content\";\n\nconst Header: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__header\", className)} {...props}>\n {children}\n </div>\n );\n};\nHeader.displayName = \"CardView.Header\";\n\nconst Headline: React.FC<\n { headline: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ headline, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__headline\", className)} {...props}>\n {headline}\n </div>\n );\n};\nHeadline.displayName = \"CardView.Headline\";\n\nconst Title: React.FC<\n { title: string } & React.ComponentPropsWithRef<\"div\">\n> = ({ title, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__title\", className)} {...props}>\n {title}\n </div>\n );\n};\nTitle.displayName = \"CardView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n body,\n className,\n ...props\n}) => {\n return (\n <div\n className={clsx(\"knock-guide-card__body\", className)}\n dangerouslySetInnerHTML={{ __html: body }}\n {...props}\n />\n );\n};\nBody.displayName = \"CardView.Body\";\n\nconst Actions: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-card__actions\", className)} {...props}>\n {children}\n </div>\n );\n};\nActions.displayName = \"CardView.Actions\";\n\nconst PrimaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button className={clsx(\"knock-guide-card__action\", className)} {...props}>\n {text}\n </button>\n );\n};\nPrimaryButton.displayName = \"CardView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button\n className={clsx(\n \"knock-guide-card__action knock-guide-card__action--secondary\",\n className,\n )}\n {...props}\n >\n {text}\n </button>\n );\n};\nSecondaryButton.displayName = \"CardView.SecondaryButton\";\n\nconst DismissButton: React.FC<React.ComponentPropsWithRef<\"button\">> = ({\n className,\n ...props\n}) => {\n return (\n <button className={clsx(\"knock-guide-card__close\", className)} {...props}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n >\n <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n </g>\n </svg>\n </button>\n );\n};\nDismissButton.displayName = \"CardView.DismissButton\";\n\ntype CardContent = {\n headline: string;\n title: string;\n body: string;\n primary_button?: ButtonContent;\n secondary_button?: ButtonContent;\n dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n content: CardContent;\n colorMode?: ColorMode;\n onDismiss?: () => void;\n onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({ content, colorMode = \"light\", onDismiss, onButtonClick }) => {\n return (\n <Root data-knock-color-mode={colorMode}>\n <Content>\n <Header>\n <Headline headline={content.headline} />\n {content.dismissible && <DismissButton onClick={onDismiss} />}\n </Header>\n\n <Title title={content.title} />\n <Body body={content.body} />\n </Content>\n <Actions>\n {content.primary_button && (\n <PrimaryButton\n text={content.primary_button.text}\n action={content.primary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.primary_button!;\n onButtonClick(e, { name: \"primary_button\", text, action });\n }\n }}\n />\n )}\n\n {content.secondary_button && (\n <SecondaryButton\n text={content.secondary_button.text}\n action={content.secondary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.secondary_button!;\n onButtonClick(e, { name: \"secondary_button\", text, action });\n }\n }}\n />\n )}\n </Actions>\n </Root>\n );\n};\nDefaultView.displayName = \"CardView.Default\";\n\ntype CardProps = {\n guideKey?: string;\n onButtonClick?: (\n e: React.MouseEvent,\n target: TargetButtonWithGuideContext,\n ) => void;\n};\n\nexport const Card: React.FC<CardProps> = ({ guideKey, onButtonClick }) => {\n const { guide, step, colorMode } = useGuide({\n key: guideKey,\n type: MESSAGE_TYPE,\n });\n\n React.useEffect(() => {\n if (step) step.markAsSeen();\n }, [step]);\n\n if (!guide || !step) return null;\n\n return (\n <DefaultView\n content={step.content as CardContent}\n colorMode={colorMode}\n onDismiss={() => step.markAsArchived()}\n onButtonClick={(e, button) => {\n const metadata = { ...button, type: \"button_click\" };\n step.markAsInteracted({ metadata });\n\n return onButtonClick\n ? onButtonClick(e, { button, step, guide })\n : maybeNavigateToUrlWithDelay(button.action);\n }}\n />\n );\n};\nCard.displayName = \"Card\";\n\nexport const CardView = {} as {\n Default: typeof DefaultView;\n Root: typeof Root;\n Content: typeof Content;\n Headline: typeof Headline;\n Title: typeof Title;\n Body: typeof Body;\n Actions: typeof Actions;\n PrimaryButton: typeof PrimaryButton;\n SecondaryButton: typeof SecondaryButton;\n DismissButton: typeof DismissButton;\n};\n\nObject.assign(CardView, {\n Default: DefaultView,\n Root,\n Content,\n Title,\n Body,\n Actions,\n PrimaryButton,\n SecondaryButton,\n DismissButton,\n});\n"],"names":["MESSAGE_TYPE","Root","children","className","props","React","clsx","displayName","Content","Header","Headline","headline","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","DismissButton","DefaultView","content","colorMode","onDismiss","onButtonClick","dismissible","primary_button","e","name","secondary_button","Card","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","CardView","Object","assign","Default"],"mappings":"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"}
|
@@ -0,0 +1,147 @@
|
|
1
|
+
import { useGuide as M } from "@knocklabs/react-core";
|
2
|
+
import * as i from "@radix-ui/react-dialog";
|
3
|
+
import n from "clsx";
|
4
|
+
import t from "react";
|
5
|
+
import { maybeNavigateToUrlWithDelay as b } from "../helpers.mjs";
|
6
|
+
/* empty css */
|
7
|
+
const V = "modal", s = ({
|
8
|
+
children: e,
|
9
|
+
onOpenChange: a,
|
10
|
+
...o
|
11
|
+
}) => /* @__PURE__ */ t.createElement(i.Root, { defaultOpen: !0, onOpenChange: a, ...o }, /* @__PURE__ */ t.createElement(i.Portal, null, e));
|
12
|
+
s.displayName = "ModalView.Root";
|
13
|
+
const u = t.forwardRef(({
|
14
|
+
className: e,
|
15
|
+
...a
|
16
|
+
}, o) => /* @__PURE__ */ t.createElement(i.Overlay, { className: n("knock-guide-modal__overlay", e), ref: o, ...a }));
|
17
|
+
u.displayName = "ModalView.Overlay";
|
18
|
+
const y = t.forwardRef(({
|
19
|
+
children: e,
|
20
|
+
className: a,
|
21
|
+
...o
|
22
|
+
}, l) => /* @__PURE__ */ t.createElement(i.Content, { className: n("knock-guide-modal", a), ref: l, ...o }, e));
|
23
|
+
y.displayName = "ModalView.Content";
|
24
|
+
const w = ({
|
25
|
+
children: e,
|
26
|
+
className: a,
|
27
|
+
...o
|
28
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: n("knock-guide-modal__header", a), ...o }, e);
|
29
|
+
w.displayName = "ModalView.Header";
|
30
|
+
const _ = ({
|
31
|
+
title: e,
|
32
|
+
className: a,
|
33
|
+
...o
|
34
|
+
}) => /* @__PURE__ */ t.createElement(i.Title, { className: n("knock-guide-modal__title", a), ...o }, e);
|
35
|
+
_.displayName = "ModalView.Title";
|
36
|
+
const p = ({
|
37
|
+
body: e,
|
38
|
+
className: a,
|
39
|
+
...o
|
40
|
+
}) => /* @__PURE__ */ t.createElement(i.Description, { className: n("knock-guide-modal__body", a), dangerouslySetInnerHTML: {
|
41
|
+
__html: e
|
42
|
+
}, ...o });
|
43
|
+
p.displayName = "ModalView.Body";
|
44
|
+
const E = ({
|
45
|
+
children: e,
|
46
|
+
className: a,
|
47
|
+
...o
|
48
|
+
}) => /* @__PURE__ */ t.createElement("div", { className: n("knock-guide-modal__actions", a), ...o }, e);
|
49
|
+
E.displayName = "ModalView.Actions";
|
50
|
+
const k = ({
|
51
|
+
text: e,
|
52
|
+
action: a,
|
53
|
+
className: o,
|
54
|
+
...l
|
55
|
+
}) => /* @__PURE__ */ t.createElement("button", { className: n("knock-guide-modal__action", o), ...l }, e);
|
56
|
+
k.displayName = "ModalView.PrimaryButton";
|
57
|
+
const f = ({
|
58
|
+
text: e,
|
59
|
+
action: a,
|
60
|
+
className: o,
|
61
|
+
...l
|
62
|
+
}) => /* @__PURE__ */ t.createElement("button", { className: n("knock-guide-modal__action knock-guide-modal__action--secondary", o), ...l }, e);
|
63
|
+
f.displayName = "ModalView.SecondaryButton";
|
64
|
+
const N = ({
|
65
|
+
className: e,
|
66
|
+
...a
|
67
|
+
}) => /* @__PURE__ */ t.createElement(i.Close, { className: n("knock-guide-modal__close", e), ...a }, /* @__PURE__ */ t.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", fill: "none" }, /* @__PURE__ */ t.createElement("g", { fill: "#60646C", fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ t.createElement("path", { d: "M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z" }), /* @__PURE__ */ t.createElement("path", { d: "M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z" }))));
|
68
|
+
N.displayName = "ModalView.Close";
|
69
|
+
const g = ({
|
70
|
+
content: e,
|
71
|
+
colorMode: a = "light",
|
72
|
+
onOpenChange: o,
|
73
|
+
onDismiss: l,
|
74
|
+
onButtonClick: c
|
75
|
+
}) => /* @__PURE__ */ t.createElement(s, { onOpenChange: o }, /* @__PURE__ */ t.createElement(u, null), /* @__PURE__ */ t.createElement(y, { "data-knock-color-mode": a, onPointerDownOutside: l }, /* @__PURE__ */ t.createElement(w, null, /* @__PURE__ */ t.createElement(_, { title: e.title }), e.dismissible && /* @__PURE__ */ t.createElement(N, { onClick: l })), /* @__PURE__ */ t.createElement(p, { body: e.body }), /* @__PURE__ */ t.createElement(E, null, e.secondary_button && /* @__PURE__ */ t.createElement(f, { text: e.secondary_button.text, action: e.secondary_button.action, onClick: (d) => {
|
76
|
+
if (c) {
|
77
|
+
const {
|
78
|
+
text: r,
|
79
|
+
action: m
|
80
|
+
} = e.secondary_button;
|
81
|
+
c(d, {
|
82
|
+
name: "secondary_button",
|
83
|
+
text: r,
|
84
|
+
action: m
|
85
|
+
});
|
86
|
+
}
|
87
|
+
} }), e.primary_button && /* @__PURE__ */ t.createElement(k, { text: e.primary_button.text, action: e.primary_button.action, onClick: (d) => {
|
88
|
+
if (c) {
|
89
|
+
const {
|
90
|
+
text: r,
|
91
|
+
action: m
|
92
|
+
} = e.primary_button;
|
93
|
+
c(d, {
|
94
|
+
name: "primary_button",
|
95
|
+
text: r,
|
96
|
+
action: m
|
97
|
+
});
|
98
|
+
}
|
99
|
+
} }))));
|
100
|
+
g.displayName = "ModalView.Default";
|
101
|
+
const v = ({
|
102
|
+
guideKey: e,
|
103
|
+
onButtonClick: a
|
104
|
+
}) => {
|
105
|
+
const {
|
106
|
+
guide: o,
|
107
|
+
step: l,
|
108
|
+
colorMode: c
|
109
|
+
} = M({
|
110
|
+
key: e,
|
111
|
+
type: V
|
112
|
+
});
|
113
|
+
return t.useEffect(() => {
|
114
|
+
l && l.markAsSeen();
|
115
|
+
}, [l]), !o || !l ? null : /* @__PURE__ */ t.createElement(g, { content: l.content, colorMode: c, onDismiss: () => l.markAsArchived(), onButtonClick: (d, r) => {
|
116
|
+
const m = {
|
117
|
+
...r,
|
118
|
+
type: "button_click"
|
119
|
+
};
|
120
|
+
return l.markAsInteracted({
|
121
|
+
metadata: m
|
122
|
+
}), a ? a(d, {
|
123
|
+
button: r,
|
124
|
+
step: l,
|
125
|
+
guide: o
|
126
|
+
}) : b(r.action);
|
127
|
+
} });
|
128
|
+
};
|
129
|
+
v.displayName = "Modal";
|
130
|
+
const h = {};
|
131
|
+
Object.assign(h, {
|
132
|
+
Default: g,
|
133
|
+
Root: s,
|
134
|
+
Overlay: u,
|
135
|
+
Content: y,
|
136
|
+
Title: _,
|
137
|
+
Body: p,
|
138
|
+
Actions: E,
|
139
|
+
PrimaryButton: k,
|
140
|
+
SecondaryButton: f,
|
141
|
+
Close: N
|
142
|
+
});
|
143
|
+
export {
|
144
|
+
v as Modal,
|
145
|
+
h as ModalView
|
146
|
+
};
|
147
|
+
//# sourceMappingURL=Modal.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Modal.mjs","sources":["../../../../../../src/modules/guide/components/Modal/Modal.tsx"],"sourcesContent":["import { ColorMode, useGuide } from \"@knocklabs/react-core\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { maybeNavigateToUrlWithDelay } from \"../helpers\";\nimport {\n ButtonContent,\n TargetButton,\n TargetButtonWithGuideContext,\n} from \"../types\";\n\nimport \"./styles.css\";\n\nconst MESSAGE_TYPE = \"modal\";\n\ntype RootProps = Omit<\n React.ComponentPropsWithoutRef<typeof Dialog.Root>,\n \"modal\"\n> &\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>;\n\nconst Root = ({ children, onOpenChange, ...props }: RootProps) => {\n return (\n <Dialog.Root defaultOpen onOpenChange={onOpenChange} {...props}>\n <Dialog.Portal>{children}</Dialog.Portal>\n </Dialog.Root>\n );\n};\nRoot.displayName = \"ModalView.Root\";\n\ntype OverlayProps = React.ComponentPropsWithoutRef<typeof Dialog.Overlay> &\n React.ComponentPropsWithRef<\"div\">;\ntype OverlayRef = React.ElementRef<\"div\">;\n\nconst Overlay = React.forwardRef<OverlayRef, OverlayProps>(\n ({ className, ...props }, forwardedRef) => {\n return (\n <Dialog.Overlay\n className={clsx(\"knock-guide-modal__overlay\", className)}\n ref={forwardedRef}\n {...props}\n />\n );\n },\n);\nOverlay.displayName = \"ModalView.Overlay\";\n\ntype ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Content> &\n React.ComponentPropsWithRef<\"div\">;\ntype ContentRef = React.ElementRef<\"div\">;\n\nconst Content = React.forwardRef<ContentRef, ContentProps>(\n ({ children, className, ...props }, forwardedRef) => {\n return (\n <Dialog.Content\n className={clsx(\"knock-guide-modal\", className)}\n ref={forwardedRef}\n {...props}\n >\n {children}\n </Dialog.Content>\n );\n },\n);\nContent.displayName = \"ModalView.Content\";\n\nconst Header: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-modal__header\", className)} {...props}>\n {children}\n </div>\n );\n};\nHeader.displayName = \"ModalView.Header\";\n\ntype TitleProps = React.ComponentPropsWithoutRef<typeof Dialog.Title> &\n React.ComponentPropsWithRef<\"div\"> & {\n title: string;\n };\n\nconst Title = ({ title, className, ...props }: TitleProps) => {\n return (\n <Dialog.Title\n className={clsx(\"knock-guide-modal__title\", className)}\n {...props}\n >\n {title}\n </Dialog.Title>\n );\n};\nTitle.displayName = \"ModalView.Title\";\n\nconst Body: React.FC<{ body: string } & React.ComponentPropsWithRef<\"div\">> = ({\n body,\n className,\n ...props\n}) => {\n return (\n <Dialog.Description\n className={clsx(\"knock-guide-modal__body\", className)}\n dangerouslySetInnerHTML={{ __html: body }}\n {...props}\n />\n );\n};\nBody.displayName = \"ModalView.Body\";\n\nconst Actions: React.FC<\n React.PropsWithChildren<React.ComponentPropsWithRef<\"div\">>\n> = ({ children, className, ...props }) => {\n return (\n <div className={clsx(\"knock-guide-modal__actions\", className)} {...props}>\n {children}\n </div>\n );\n};\nActions.displayName = \"ModalView.Actions\";\n\nconst PrimaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button className={clsx(\"knock-guide-modal__action\", className)} {...props}>\n {text}\n </button>\n );\n};\nPrimaryButton.displayName = \"ModalView.PrimaryButton\";\n\nconst SecondaryButton: React.FC<\n ButtonContent & React.ComponentPropsWithRef<\"button\">\n> = ({ text, action, className, ...props }) => {\n return (\n <button\n className={clsx(\n \"knock-guide-modal__action knock-guide-modal__action--secondary\",\n className,\n )}\n {...props}\n >\n {text}\n </button>\n );\n};\nSecondaryButton.displayName = \"ModalView.SecondaryButton\";\n\ntype CloseProps = React.ComponentPropsWithoutRef<typeof Dialog.Close> &\n React.ComponentPropsWithRef<\"button\">;\n\nconst Close = ({ className, ...props }: CloseProps) => {\n return (\n <Dialog.Close\n className={clsx(\"knock-guide-modal__close\", className)}\n {...props}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"18\"\n height=\"18\"\n fill=\"none\"\n >\n <g fill=\"#60646C\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n <path d=\"M14.03 3.97a.75.75 0 0 1 0 1.06l-9 9a.75.75 0 0 1-1.06-1.06l9-9a.75.75 0 0 1 1.06 0Z\" />\n <path d=\"M3.97 3.97a.75.75 0 0 1 1.06 0l9 9a.75.75 0 1 1-1.06 1.06l-9-9a.75.75 0 0 1 0-1.06Z\" />\n </g>\n </svg>\n </Dialog.Close>\n );\n};\nClose.displayName = \"ModalView.Close\";\n\ntype ModalContent = {\n title: string;\n body: string;\n primary_button?: ButtonContent;\n secondary_button?: ButtonContent;\n dismissible?: boolean;\n};\n\nconst DefaultView: React.FC<{\n content: ModalContent;\n colorMode?: ColorMode;\n onOpenChange?: (open: boolean) => void;\n onDismiss?: () => void;\n onButtonClick?: (e: React.MouseEvent, button: TargetButton) => void;\n}> = ({\n content,\n colorMode = \"light\",\n onOpenChange,\n onDismiss,\n onButtonClick,\n}) => {\n return (\n <Root onOpenChange={onOpenChange}>\n <Overlay />\n {/* Must pass color mode to content for css variables to be set properly */}\n <Content\n data-knock-color-mode={colorMode}\n onPointerDownOutside={onDismiss}\n >\n <Header>\n <Title title={content.title} />\n {content.dismissible && <Close onClick={onDismiss} />}\n </Header>\n\n <Body body={content.body} />\n\n <Actions>\n {content.secondary_button && (\n <SecondaryButton\n text={content.secondary_button.text}\n action={content.secondary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.secondary_button!;\n onButtonClick(e, { name: \"secondary_button\", text, action });\n }\n }}\n />\n )}\n {content.primary_button && (\n <PrimaryButton\n text={content.primary_button.text}\n action={content.primary_button.action}\n onClick={(e) => {\n if (onButtonClick) {\n const { text, action } = content.primary_button!;\n onButtonClick(e, { name: \"primary_button\", text, action });\n }\n }}\n />\n )}\n </Actions>\n </Content>\n </Root>\n );\n};\nDefaultView.displayName = \"ModalView.Default\";\n\ntype ModalProps = {\n guideKey?: string;\n onButtonClick?: (\n e: React.MouseEvent,\n target: TargetButtonWithGuideContext,\n ) => void;\n};\n\nexport const Modal: React.FC<ModalProps> = ({ guideKey, onButtonClick }) => {\n const { guide, step, colorMode } = useGuide({\n key: guideKey,\n type: MESSAGE_TYPE,\n });\n\n React.useEffect(() => {\n if (step) step.markAsSeen();\n }, [step]);\n\n if (!guide || !step) return null;\n\n return (\n <DefaultView\n content={step.content as ModalContent}\n colorMode={colorMode}\n onDismiss={() => step.markAsArchived()}\n onButtonClick={(e, button) => {\n const metadata = { ...button, type: \"button_click\" };\n step.markAsInteracted({ metadata });\n\n return onButtonClick\n ? onButtonClick(e, { button, step, guide })\n : maybeNavigateToUrlWithDelay(button.action);\n }}\n />\n );\n};\nModal.displayName = \"Modal\";\n\nexport const ModalView = {} as {\n Default: typeof DefaultView;\n Root: typeof Root;\n Overlay: typeof Overlay;\n Content: typeof Content;\n Title: typeof Title;\n Body: typeof Body;\n Actions: typeof Actions;\n PrimaryButton: typeof PrimaryButton;\n SecondaryButton: typeof SecondaryButton;\n Close: typeof Close;\n};\n\nObject.assign(ModalView, {\n Default: DefaultView,\n Root,\n Overlay,\n Content,\n Title,\n Body,\n Actions,\n PrimaryButton,\n SecondaryButton,\n Close,\n});\n"],"names":["MESSAGE_TYPE","Root","children","onOpenChange","props","React","Dialog","displayName","Overlay","forwardRef","className","forwardedRef","clsx","Content","Header","Title","title","Body","body","__html","Actions","PrimaryButton","text","action","SecondaryButton","Close","DefaultView","content","colorMode","onDismiss","onButtonClick","dismissible","secondary_button","e","name","primary_button","Modal","guideKey","guide","step","useGuide","key","type","useEffect","markAsSeen","markAsArchived","button","metadata","markAsInteracted","maybeNavigateToUrlWithDelay","ModalView","Object","assign","Default"],"mappings":"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"}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
const r = (o) => {
|
2
|
+
let t;
|
3
|
+
try {
|
4
|
+
t = new URL(o);
|
5
|
+
} catch {
|
6
|
+
return !1;
|
7
|
+
}
|
8
|
+
return t.protocol === "http:" || t.protocol === "https:";
|
9
|
+
}, i = (o, t = 200) => {
|
10
|
+
window != null && window.location && r(o) && setTimeout(() => window.location.assign(o), t);
|
11
|
+
};
|
12
|
+
export {
|
13
|
+
i as maybeNavigateToUrlWithDelay
|
14
|
+
};
|
15
|
+
//# sourceMappingURL=helpers.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"helpers.mjs","sources":["../../../../../src/modules/guide/components/helpers.ts"],"sourcesContent":["const isValidHttpUrl = (input: string) => {\n let url;\n\n try {\n url = new URL(input);\n } catch (_) {\n return false;\n }\n\n return url.protocol === \"http:\" || url.protocol === \"https:\";\n};\n\nexport const maybeNavigateToUrlWithDelay = (\n url: string,\n delay: number = 200,\n) => {\n if (!window?.location) return;\n if (!isValidHttpUrl(url)) return;\n\n setTimeout(() => window.location.assign(url), delay);\n};\n"],"names":["isValidHttpUrl","input","url","URL","protocol","maybeNavigateToUrlWithDelay","delay","window","location","setTimeout","assign"],"mappings":"AAAA,MAAMA,IAAiBA,CAACC,MAAkB;AACpCC,MAAAA;AAEA,MAAA;AACI,IAAAA,IAAA,IAAIC,IAAIF,CAAK;AAAA,UACT;AACH,WAAA;AAAA,EAAA;AAGT,SAAOC,EAAIE,aAAa,WAAWF,EAAIE,aAAa;AACtD,GAEaC,IAA8BA,CACzCH,GACAI,IAAgB,QACb;AACC,EAACC,yBAAQC,YACRR,EAAeE,CAAG,KAEvBO,WAAW,MAAMF,OAAOC,SAASE,OAAOR,CAAG,GAAGI,CAAK;AACrD;"}
|