@factorearth/component-library 5.5.10-alpha.0 → 5.5.11-alpha.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.
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { getFeedback } from "@sentry/react";
|
|
3
2
|
import { ButtonProps } from "./Button";
|
|
3
|
+
import { buildFeedbackIntegration } from "@sentry-internal/feedback";
|
|
4
|
+
export type FeedbackIntegration = ReturnType<typeof buildFeedbackIntegration>;
|
|
4
5
|
interface ReportABugButtonProps extends ButtonProps {
|
|
5
|
-
getFeedbackFn: () =>
|
|
6
|
+
getFeedbackFn: () => FeedbackIntegration | undefined;
|
|
6
7
|
}
|
|
7
8
|
export declare function ReportABugButton(props: ReportABugButtonProps): React.JSX.Element;
|
|
8
9
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReportABugButton.js","sourceRoot":"","sources":["../../../lib/Atoms/Buttons/ReportABugButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"ReportABugButton.js","sourceRoot":"","sources":["../../../lib/Atoms/Buttons/ReportABugButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAQ/C,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC5D,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACrE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAA8C,CAAC;IAEvF,SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,aAAa,EAAE,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,QAAQ,EAAE,CAAC;YACd,MAAM,WAAW,GAAG,QAAQ,CAAC,QAAQ,CAAC,yBAAyB,EAAE,EAAE,CAAC,CAAC;YACrE,OAAO,WAAW,CAAC;QACpB,CAAC;QACD,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACf,OAAO,CACN,oBAAC,MAAM,IACN,EAAE,EAAC,wBAAwB,EAC3B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAE,oBAAC,KAAK,IAAC,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,QAAQ,GAAI,KAC3C,SAAS,GACrB,CACF,CAAC;AACH,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Colors } from "../../Theme/types";
|
|
3
|
-
import * as FiIcons from
|
|
3
|
+
import * as FiIcons from "react-icons/fi";
|
|
4
|
+
import { FeedbackIntegration } from "Atoms/Buttons/ReportABugButton";
|
|
4
5
|
interface Page {
|
|
5
6
|
title: string;
|
|
6
7
|
"page-summary": string;
|
|
@@ -21,7 +22,7 @@ interface TutorialModalProps extends React.DetailedHTMLProps<React.HTMLAttribute
|
|
|
21
22
|
colors: Colors;
|
|
22
23
|
setOpen: (open: any) => void;
|
|
23
24
|
page: Page;
|
|
24
|
-
|
|
25
|
+
getFeedbackFn: () => FeedbackIntegration | undefined;
|
|
25
26
|
}
|
|
26
27
|
export declare const Tutorial: (props: TutorialModalProps) => React.JSX.Element;
|
|
27
28
|
export {};
|
|
@@ -2,73 +2,69 @@ import styled from "@emotion/styled";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { FiX } from "react-icons/fi";
|
|
4
4
|
import Accordion from "../../Atoms/Accordion/Accordion";
|
|
5
|
-
import { Button } from "../../Atoms/Buttons/Button";
|
|
6
5
|
import { Typography } from "../../Atoms/Typography/Typography";
|
|
7
|
-
import {
|
|
6
|
+
import { ReportABugButton } from "Atoms/Buttons/ReportABugButton";
|
|
8
7
|
const TutorialOverlay = styled.div `
|
|
9
8
|
background-color: ${({ colors }) => `${colors.background.secondary}90`};
|
|
10
9
|
position: absolute;
|
|
11
10
|
z-index: 1000;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
11
|
+
display: flex;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
height: 100vh;
|
|
14
|
+
width: 100vw;
|
|
15
|
+
top: 0;
|
|
16
|
+
left: 0;
|
|
18
17
|
`;
|
|
19
18
|
const TutorialWrapper = styled.div `
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
19
|
+
background-color: ${({ colors }) => colors.background.primary};
|
|
20
|
+
color: ${({ colors }) => colors.text.primary};
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
align-items: flex-start;
|
|
24
|
+
gap: 16px;
|
|
25
|
+
align-self: stretch;
|
|
26
|
+
height: 500px;
|
|
27
|
+
width: 500px;
|
|
28
|
+
border-radius: 4px;
|
|
30
29
|
box-shadow: ${({ colors }) => `${colors.background.secondary} 0px 5px 15px`};
|
|
31
|
-
|
|
30
|
+
margin-top: calc(50vh - 250px);
|
|
32
31
|
`;
|
|
33
32
|
//I used the calc above because `align-items: center` had no affect when applied to the TutorialOverlay styled div
|
|
34
33
|
const HelpHeader = styled.div `
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
34
|
+
display: flex;
|
|
35
|
+
flex-direction: column;
|
|
36
|
+
align-items: flex-start;
|
|
37
|
+
gap: 16px;
|
|
38
|
+
align-self: stretch;
|
|
39
|
+
padding: 24px;
|
|
40
|
+
box-shadow: ${({ colors }) => `${colors.background.secondary} 0px 3px 5px`};
|
|
42
41
|
`;
|
|
43
42
|
const TitleAndExit = styled.div `
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
display: flex;
|
|
44
|
+
justify-content: space-between;
|
|
45
|
+
align-items: center;
|
|
46
|
+
align-self: stretch;
|
|
48
47
|
`;
|
|
49
48
|
const ScrollableArea = styled.div `
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
overflow: scroll;
|
|
50
|
+
overflow-x: hidden;
|
|
52
51
|
`;
|
|
53
52
|
const ContentContainer = styled.div `
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
padding: 0px 24px;
|
|
54
|
+
width: 90%;
|
|
56
55
|
`;
|
|
57
56
|
const ContactContainer = styled.div `
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
57
|
+
background-color: ${({ colors }) => colors.background.tertiary};
|
|
58
|
+
color: ${({ colors }) => colors.text.primary};
|
|
59
|
+
display: flex;
|
|
60
|
+
padding: 24px 16px;
|
|
61
|
+
flex-direction: column;
|
|
62
|
+
align-items: center;
|
|
63
|
+
gap: 16px;
|
|
64
|
+
align-self: stretch;
|
|
66
65
|
`;
|
|
67
|
-
;
|
|
68
|
-
;
|
|
69
|
-
;
|
|
70
66
|
export const Tutorial = (props) => {
|
|
71
|
-
const { colors, page, setOpen,
|
|
67
|
+
const { colors, page, setOpen, getFeedbackFn, ...htmlProps } = props;
|
|
72
68
|
return (React.createElement(TutorialOverlay, { colors: colors, onClick: () => setOpen(""), "data-testid": "overlay-background" },
|
|
73
69
|
React.createElement(TutorialWrapper, { colors: colors, onClick: (e) => e.stopPropagation(), ...htmlProps, "data-testid": "overlay-wrapper" },
|
|
74
70
|
React.createElement(HelpHeader, { colors: colors },
|
|
@@ -78,16 +74,17 @@ export const Tutorial = (props) => {
|
|
|
78
74
|
React.createElement(Typography, { textColor: colors.text.primary, content: page["page-summary"], variant: "Paragraphy Body" })),
|
|
79
75
|
React.createElement(ScrollableArea, { colors: colors },
|
|
80
76
|
React.createElement(ContentContainer, { colors: colors },
|
|
81
|
-
page["user-flows"].length > 0 && React.createElement(React.Fragment, null,
|
|
77
|
+
page["user-flows"].length > 0 && (React.createElement(React.Fragment, null,
|
|
82
78
|
React.createElement(Typography, { textColor: colors.text.primary, content: "Common User Flows", variant: "Heading 4", style: { paddingBottom: "8px" } }),
|
|
83
|
-
page["user-flows"].map((flow) => React.createElement(Accordion, { colors: colors, dropdownContent: flow }))),
|
|
84
|
-
page.features.length > 0 && React.createElement(React.Fragment, null,
|
|
79
|
+
page["user-flows"].map((flow) => (React.createElement(Accordion, { colors: colors, dropdownContent: flow }))))),
|
|
80
|
+
page.features.length > 0 && (React.createElement(React.Fragment, null,
|
|
85
81
|
React.createElement(Typography, { textColor: colors.text.primary, content: "Page Features", variant: "Heading 4", style: { paddingBottom: "8px" } }),
|
|
86
|
-
page.features.length > 0 &&
|
|
82
|
+
page.features.length > 0 &&
|
|
83
|
+
page.features.map((feature) => (React.createElement(Accordion, { colors: colors, dropdownContent: feature })))))),
|
|
87
84
|
React.createElement(ContactContainer, { colors: colors },
|
|
88
85
|
React.createElement(Typography, { textColor: colors.text.primary, content: "Please ask further questions, or reach out for additional support by emailing", variant: "Label" }),
|
|
89
86
|
React.createElement(Typography, { textColor: colors.text.primary, content: "devs@factorearth.com", variant: "Heading 4" }),
|
|
90
|
-
React.createElement(
|
|
87
|
+
React.createElement(ReportABugButton, { colorPalette: colors, getFeedbackFn: getFeedbackFn, variant: "filled" }))))));
|
|
91
88
|
};
|
|
92
89
|
//test with interaction test that when the user clicks the x oor outside the tutorial it closes, then when the open button is clicked it opens
|
|
93
90
|
//# sourceMappingURL=Tutorial.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tutorial.js","sourceRoot":"","sources":["../../../lib/Organisms/Tutorial/Tutorial.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Tutorial.js","sourceRoot":"","sources":["../../../lib/Organisms/Tutorial/Tutorial.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAE/D,OAAO,EAAuB,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAoB;qBACjC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,IAAI;;;;;;;;;CAStE,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAoB;qBACjC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO;UACpD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;;;;;;;;;eAS9B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,eAAe;;CAE3E,CAAC;AACF,kHAAkH;AAElH,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAoB;;;;;;;eAOlC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,cAAc;CAC1E,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAoB;;;;;CAKlD,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAoB;;;CAGpD,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAoB;;;CAGtD,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAoB;qBAClC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ;UACrD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;;;;;;;CAO5C,CAAC;AA+BF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAyB,EAAE,EAAE;IACrD,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAErE,OAAO,CACN,oBAAC,eAAe,IACf,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,iBACd,oBAAoB;QAEhC,oBAAC,eAAe,IACf,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,KAC/B,SAAS,iBACD,iBAAiB;YAE7B,oBAAC,UAAU,IAAC,MAAM,EAAE,MAAM;gBACzB,oBAAC,YAAY,IAAC,MAAM,EAAE,MAAM;oBAC3B,oBAAC,UAAU,IACV,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,EAC9B,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,OAAO,EAAE,WAAW,GACnB;oBACF,oBAAC,GAAG,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAc,QAAQ,GAAG,CACpD;gBACf,oBAAC,UAAU,IACV,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,EAC9B,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,EAC7B,OAAO,EAAE,iBAAiB,GACzB,CACU;YACb,oBAAC,cAAc,IAAC,MAAM,EAAE,MAAM;gBAC7B,oBAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM;oBAC9B,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CACjC;wBACC,oBAAC,UAAU,IACV,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,EAC9B,OAAO,EAAE,mBAAmB,EAC5B,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,GAC9B;wBACD,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACjC,oBAAC,SAAS,IAAC,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,IAAI,GAAI,CACpD,CAAC,CACA,CACH;oBACA,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5B;wBACC,oBAAC,UAAU,IACV,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,EAC9B,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,GAC9B;wBACD,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;4BACxB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC9B,oBAAC,SAAS,IAAC,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,OAAO,GAAI,CACvD,CAAC,CACD,CACH,CACiB;gBACnB,oBAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM;oBAC/B,oBAAC,UAAU,IACV,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,EAC9B,OAAO,EACN,+EAA+E,EAEhF,OAAO,EAAE,OAAO,GACf;oBACF,oBAAC,UAAU,IACV,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,EAC9B,OAAO,EAAE,sBAAsB,EAC/B,OAAO,EAAE,WAAW,GACnB;oBACF,oBAAC,gBAAgB,IAChB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,aAAa,EACrB,OAAO,EAAC,QAAQ,GACtB,CACgB,CACH,CACA,CACD,CAClB,CAAC;AACH,CAAC,CAAC;AAEF,8IAA8I"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@factorearth/component-library",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.11-alpha.0",
|
|
4
4
|
"description": " A storybook component library for FactorEarth",
|
|
5
5
|
"author": "madtrx <marlin.makori@gmail.com>",
|
|
6
6
|
"homepage": "https://github.com/FactorEarth/RecordMiddleware#readme",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"access": "public",
|
|
47
47
|
"registry": "https://registry.npmjs.org/"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "46bedeb34a3e063e2245be3cb429ea987718c0bb",
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@emotion/react": "^11.13.0",
|
|
52
52
|
"@emotion/styled": "^11.13.0",
|