@xylabs/react-pixel-debugger 7.1.17 → 7.2.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 +6 -46
- package/dist/browser/hooks/usePixelAltSendHandler.d.ts.map +1 -1
- package/dist/browser/index.mjs +12 -14
- package/dist/browser/index.mjs.map +1 -1
- package/package.json +60 -32
- package/src/PixelEvent.ts +0 -4
- package/src/components/PixelDebugger.stories.tsx +0 -38
- package/src/components/PixelDebugger.tsx +0 -93
- package/src/components/PixelDebuggerProvider.tsx +0 -10
- package/src/components/PixelDebuggerToggle.tsx +0 -20
- package/src/components/index.ts +0 -3
- package/src/global.d.ts +0 -1
- package/src/hooks/index.ts +0 -1
- package/src/hooks/usePixelAltSendHandler.ts +0 -25
- package/src/index.ts +0 -3
package/README.md
CHANGED
|
@@ -1,67 +1,27 @@
|
|
|
1
|
-
[![logo][]](https://xylabs.com)
|
|
2
|
-
|
|
3
1
|
# @xylabs/react-pixel-debugger
|
|
4
2
|
|
|
5
|
-
[![npm-badge]
|
|
6
|
-
[![npm-downloads-badge][]][npm-link]
|
|
7
|
-
[![jsdelivr-badge][]][jsdelivr-link]
|
|
8
|
-
[![npm-license-badge][]](LICENSE)
|
|
9
|
-
|
|
10
|
-
> XY Labs generalized React library
|
|
11
|
-
|
|
12
|
-
## Table of Contents
|
|
3
|
+
[![npm][npm-badge]][npm-link]
|
|
13
4
|
|
|
14
|
-
|
|
15
|
-
- [Install](#install)
|
|
16
|
-
- [Maintainers](#maintainers)
|
|
17
|
-
- [License](#license)
|
|
18
|
-
- [Credits](#credits)
|
|
19
|
-
|
|
20
|
-
## Description
|
|
21
|
-
|
|
22
|
-
Common React code that is used throughout XYO projects that use React.
|
|
5
|
+
> Common React library for all XY Labs projects that use React
|
|
23
6
|
|
|
24
7
|
## Install
|
|
25
8
|
|
|
26
|
-
Using npm:
|
|
27
|
-
|
|
28
9
|
```sh
|
|
29
|
-
npm
|
|
10
|
+
npm install {{name}}
|
|
30
11
|
```
|
|
31
12
|
|
|
32
|
-
|
|
13
|
+
or
|
|
33
14
|
|
|
34
15
|
```sh
|
|
35
|
-
yarn add
|
|
16
|
+
yarn add {{name}}
|
|
36
17
|
```
|
|
37
18
|
|
|
38
|
-
## Documentation
|
|
39
|
-
[Developer Reference](https://xylabs.github.io/sdk-react)
|
|
40
|
-
|
|
41
|
-
[Storybook](https://xylabs.github.io/sdk-react/storybook)
|
|
42
|
-
|
|
43
|
-
## Maintainers
|
|
44
|
-
|
|
45
|
-
- [Arie Trouw](https://github.com/arietrouw) ([arietrouw.com](https://arietrouw.com))
|
|
46
|
-
- [Matt Jones](https://github.com/jonesmac)
|
|
47
|
-
- [Joel Carter](https://github.com/JoelBCarter)
|
|
48
|
-
- [Jordan Trouw](https://github.com/jordantrouw)
|
|
49
19
|
|
|
50
20
|
## License
|
|
51
21
|
|
|
52
|
-
See the [LICENSE](LICENSE) file for license
|
|
22
|
+
See the [LICENSE](LICENSE) file for license rights and limitations (LGPL-3.0-only).
|
|
53
23
|
|
|
54
|
-
## Credits
|
|
55
24
|
|
|
56
|
-
[Made with 🔥and ❄️ by XY Labs](https://xylabs.com)
|
|
57
|
-
|
|
58
|
-
[logo]: https://cdn.xy.company/img/brand/XYPersistentCompany_Logo_Icon_Colored.svg
|
|
59
25
|
|
|
60
26
|
[npm-badge]: https://img.shields.io/npm/v/@xylabs/react-pixel-debugger.svg
|
|
61
27
|
[npm-link]: https://www.npmjs.com/package/@xylabs/react-pixel-debugger
|
|
62
|
-
|
|
63
|
-
[npm-downloads-badge]: https://img.shields.io/npm/dw/@xylabs/react-pixel-debugger
|
|
64
|
-
[npm-license-badge]: https://img.shields.io/npm/l/@xylabs/react-pixel-debugger
|
|
65
|
-
|
|
66
|
-
[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@xylabs/react-pixel-debugger/badge
|
|
67
|
-
[jsdelivr-link]: https://www.jsdelivr.com/package/npm/@xylabs/react-pixel-debugger
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePixelAltSendHandler.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePixelAltSendHandler.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,sBAAsB,GAAI,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,
|
|
1
|
+
{"version":3,"file":"usePixelAltSendHandler.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePixelAltSendHandler.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,sBAAsB,GAAI,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,SAiB3G,CAAA"}
|
package/dist/browser/index.mjs
CHANGED
|
@@ -10,29 +10,27 @@ import { ButtonEx } from "@xylabs/react-button";
|
|
|
10
10
|
import { FlexCol } from "@xylabs/react-flexbox";
|
|
11
11
|
import { DebugUserEventsContext } from "@xylabs/react-pixel";
|
|
12
12
|
import { Portal } from "@xylabs/react-portal";
|
|
13
|
-
import { use, useState
|
|
13
|
+
import { use, useState } from "react";
|
|
14
14
|
|
|
15
15
|
// src/hooks/usePixelAltSendHandler.ts
|
|
16
16
|
import { XyPixel } from "@xylabs/pixel";
|
|
17
|
-
import { useEffect,
|
|
17
|
+
import { useEffect, useRef } from "react";
|
|
18
18
|
var usePixelAltSendHandler = (altHandler) => {
|
|
19
|
-
const
|
|
19
|
+
const pixelSendRef = useRef(void 0);
|
|
20
20
|
useEffect(() => {
|
|
21
|
-
if (
|
|
22
|
-
|
|
23
|
-
setPixelSend(oldHandler);
|
|
24
|
-
} else {
|
|
21
|
+
if (XyPixel.instance.send) {
|
|
22
|
+
pixelSendRef.current = XyPixel.instance.send.bind(XyPixel.instance);
|
|
25
23
|
XyPixel.instance.send = async (event, fields, eventId) => {
|
|
26
24
|
altHandler(event, fields);
|
|
27
|
-
return await
|
|
25
|
+
return await pixelSendRef.current?.(event, fields, eventId);
|
|
28
26
|
};
|
|
29
27
|
}
|
|
30
28
|
return () => {
|
|
31
|
-
if (
|
|
32
|
-
XyPixel.instance.send =
|
|
29
|
+
if (pixelSendRef.current) {
|
|
30
|
+
XyPixel.instance.send = pixelSendRef.current;
|
|
33
31
|
}
|
|
34
32
|
};
|
|
35
|
-
}, [
|
|
33
|
+
}, [altHandler]);
|
|
36
34
|
};
|
|
37
35
|
|
|
38
36
|
// src/components/PixelDebugger.tsx
|
|
@@ -40,8 +38,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
40
38
|
var PixelDebugger = () => {
|
|
41
39
|
const { isDebugging } = use(DebugUserEventsContext);
|
|
42
40
|
const theme = useTheme();
|
|
43
|
-
const [displayEvents, setDisplayEvents] =
|
|
44
|
-
const [events, setEvents] =
|
|
41
|
+
const [displayEvents, setDisplayEvents] = useState(false);
|
|
42
|
+
const [events, setEvents] = useState([]);
|
|
45
43
|
usePixelAltSendHandler((event, fields) => {
|
|
46
44
|
setEvents((events2) => [{ event, fields }, ...events2]);
|
|
47
45
|
});
|
|
@@ -105,7 +103,7 @@ var PixelEventDetails = ({
|
|
|
105
103
|
index,
|
|
106
104
|
events
|
|
107
105
|
}) => {
|
|
108
|
-
const [isOpen, setIsOpen] =
|
|
106
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
109
107
|
return /* @__PURE__ */ jsxs(FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [
|
|
110
108
|
/* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: event }),
|
|
111
109
|
isOpen && /* @__PURE__ */ jsx(Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/PixelDebugger.tsx","../../src/hooks/usePixelAltSendHandler.ts","../../src/components/PixelDebuggerProvider.tsx","../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import {\n Badge, Card, Divider, Typography, useTheme,\n} from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport React, { use, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks/index.ts'\nimport type { PixelEvent } from '../PixelEvent.ts'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = use(DebugUserEventsContext)\n // TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents(events => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{\n bottom: 0, left: 0, position: 'fixed', width: 350,\n }}\n >\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.vars.palette.primary.main}\n >\n <FlexCol\n alignItems=\"stretch\"\n sx={{ flexFlow: 'column', maxHeight: 400 }}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && events.length > 0 && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{\n cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none',\n }}\n >\n {events.map((e, index) => (\n\n <PixelEventDetails key={`${e.event}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && events.length === 0 && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({\n event, fields, index, events,\n}) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n","import { XyPixel } from '@xylabs/pixel'\nimport type { JsonObject } from '@xylabs/sdk-js'\nimport { useEffect,
|
|
1
|
+
{"version":3,"sources":["../../src/components/PixelDebugger.tsx","../../src/hooks/usePixelAltSendHandler.ts","../../src/components/PixelDebuggerProvider.tsx","../../src/components/PixelDebuggerToggle.tsx"],"sourcesContent":["import {\n Badge, Card, Divider, Typography, useTheme,\n} from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { Portal } from '@xylabs/react-portal'\nimport React, { use, useState } from 'react'\n\nimport { usePixelAltSendHandler } from '../hooks/index.ts'\nimport type { PixelEvent } from '../PixelEvent.ts'\n\nexport const PixelDebugger: React.FC = () => {\n const { isDebugging } = use(DebugUserEventsContext)\n // TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand\n const theme = useTheme()\n const [displayEvents, setDisplayEvents] = useState(false)\n const [events, setEvents] = useState<PixelEvent[]>([])\n\n usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {\n setEvents(events => [{ event, fields }, ...events])\n })\n\n if (!isDebugging) {\n return null\n }\n\n return (\n <Portal>\n <div style={{\n bottom: 0, left: 0, position: 'fixed', width: 350,\n }}\n >\n <Badge badgeContent={events.length} color=\"primary\" sx={{ width: '100%' }}>\n <Card\n variant=\"outlined\"\n sx={{\n backdropFilter: 'blur(16px) saturate(180%)',\n backgroundColor: 'rgba(18, 18, 18, .70)',\n overflowY: 'auto',\n width: '100%',\n }}\n color={theme.vars.palette.primary.main}\n >\n <FlexCol\n alignItems=\"stretch\"\n sx={{ flexFlow: 'column', maxHeight: 400 }}\n >\n <FlexCol alignItems=\"stretch\" sx={{ flex: '0 1 auto' }}>\n <ButtonEx variant=\"text\" onClick={() => setDisplayEvents(!displayEvents)}>\n XY Pixel Debugger\n </ButtonEx>\n </FlexCol>\n {displayEvents && events.length > 0 && (\n <FlexCol\n alignItems=\"stretch\"\n alignContent=\"start\"\n padding={2}\n sx={{\n cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none',\n }}\n >\n {events.map((e, index) => (\n\n <PixelEventDetails key={`${e.event}`} events={events} index={index} {...e} />\n ))}\n </FlexCol>\n )}\n {displayEvents && events.length === 0 && <Typography variant=\"subtitle2\">No Events</Typography>}\n </FlexCol>\n </Card>\n </Badge>\n </div>\n </Portal>\n )\n}\n\nconst PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({\n event, fields, index, events,\n}) => {\n const [isOpen, setIsOpen] = useState(false)\n return (\n <FlexCol alignItems=\"stretch\" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>\n <Typography variant=\"subtitle2\">{event}</Typography>\n {isOpen && (\n <Typography marginBottom={0.5} variant=\"caption\">\n {JSON.stringify(fields, null, 2)}\n </Typography>\n )}\n {events[index + 1] && <Divider />}\n </FlexCol>\n )\n}\n","import { XyPixel } from '@xylabs/pixel'\nimport type { JsonObject } from '@xylabs/sdk-js'\nimport { useEffect, useRef } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const pixelSendRef = useRef<typeof XyPixel.instance.send>(undefined)\n useEffect(() => {\n if (XyPixel.instance.send) {\n pixelSendRef.current = XyPixel.instance.send.bind(XyPixel.instance)\n XyPixel.instance.send = async (event: string, fields?: JsonObject, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSendRef.current?.(event, fields, eventId)\n }\n }\n return () => {\n // restore send on unmount\n if (pixelSendRef.current) {\n XyPixel.instance.send = pixelSendRef.current\n }\n }\n }, [altHandler])\n}\n","import { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport { useLocalStorage } from '@xylabs/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React, { useMemo } from 'react'\n\nexport const PixelDebuggerProvider: React.FC<PropsWithChildren> = ({ children }) => {\n const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)\n const value = useMemo(() => ({ isDebugging, setIsDebugging }), [isDebugging, setIsDebugging])\n return <DebugUserEventsContext value={value}>{children}</DebugUserEventsContext>\n}\n","import {\n FormControl, FormLabel, Switch,\n} from '@mui/material'\nimport type { BusyBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport { DebugUserEventsContext } from '@xylabs/react-pixel'\nimport React, { use } from 'react'\n\nexport const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {\n const { setIsDebugging, isDebugging } = use(DebugUserEventsContext)\n\n return (\n <FlexRow {...props}>\n <FormControl>\n <FormLabel>Enable Debugger</FormLabel>\n <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />\n </FormControl>\n </FlexRow>\n )\n}\n"],"mappings":"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","names":["events","DebugUserEventsContext","jsx","DebugUserEventsContext","use","jsx","jsxs"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xylabs/react-pixel-debugger",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.2.0",
|
|
4
4
|
"description": "Common React library for all XY Labs projects that use React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"utility",
|
|
@@ -31,48 +31,76 @@
|
|
|
31
31
|
},
|
|
32
32
|
"./package.json": "./package.json"
|
|
33
33
|
},
|
|
34
|
-
"module": "./dist/browser/index.mjs",
|
|
35
|
-
"types": "dist/browser/index.d.ts",
|
|
36
34
|
"files": [
|
|
37
35
|
"dist",
|
|
38
|
-
"
|
|
39
|
-
],
|
|
40
|
-
"workspaces": [
|
|
41
|
-
"packages/*"
|
|
36
|
+
"README.md"
|
|
42
37
|
],
|
|
43
38
|
"dependencies": {
|
|
44
|
-
"@xylabs/
|
|
45
|
-
"@xylabs/react-
|
|
46
|
-
"@xylabs/react-
|
|
47
|
-
"@xylabs/react-
|
|
48
|
-
"@xylabs/react-portal": "~7.
|
|
49
|
-
"@xylabs/react-shared": "~7.1.17"
|
|
39
|
+
"@xylabs/react-button": "~7.2.0",
|
|
40
|
+
"@xylabs/react-flexbox": "~7.2.0",
|
|
41
|
+
"@xylabs/react-pixel": "~7.2.0",
|
|
42
|
+
"@xylabs/react-shared": "~7.2.0",
|
|
43
|
+
"@xylabs/react-portal": "~7.2.0"
|
|
50
44
|
},
|
|
51
45
|
"devDependencies": {
|
|
52
|
-
"@mui/material": "~7.3.
|
|
53
|
-
"@
|
|
46
|
+
"@mui/material": "~7.3.10",
|
|
47
|
+
"@opentelemetry/api": "^1.9.1",
|
|
48
|
+
"@opentelemetry/sdk-trace-base": ">=2.7.1 <3",
|
|
49
|
+
"@storybook/react-vite": "~10.3.6",
|
|
50
|
+
"@types/node": "~25.6.0",
|
|
54
51
|
"@types/react": "^19.2.14",
|
|
55
|
-
"@xylabs/
|
|
56
|
-
"@xylabs/
|
|
57
|
-
"@xylabs/
|
|
58
|
-
"@xylabs/tsconfig
|
|
59
|
-
"@xylabs/tsconfig-
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
52
|
+
"@xylabs/pixel": "~5.1.0",
|
|
53
|
+
"@xylabs/sdk-js": "^5.1.0",
|
|
54
|
+
"@xylabs/toolchain": "~7.12.3",
|
|
55
|
+
"@xylabs/tsconfig": "~7.12.3",
|
|
56
|
+
"@xylabs/tsconfig-dom": "~7.12.3",
|
|
57
|
+
"@xylabs/tsconfig-react": "~7.12.3",
|
|
58
|
+
"async-mutex": ">=0.5.0 <0.6",
|
|
59
|
+
"bn.js": ">=5.2.3 <5.3",
|
|
60
|
+
"bowser": ">=2.14.1 <2.15",
|
|
61
|
+
"buffer": ">=6.0.3 <6.1",
|
|
62
|
+
"chalk": ">=5.6.2 <5.7",
|
|
63
|
+
"esbuild": "^0.28.0",
|
|
64
|
+
"eslint": ">=10.2.1 <11",
|
|
65
|
+
"ethers": ">=6.16.0 <7",
|
|
66
|
+
"fast-deep-equal": ">=3.1.3 <3.2",
|
|
67
|
+
"js-cookie": ">=3.0.5 <3.1",
|
|
68
|
+
"mixpanel-browser": "^2.78.0",
|
|
69
|
+
"pako": "~2.1.0",
|
|
70
|
+
"query-string": "~9.3.1",
|
|
71
|
+
"react": "^19.2.5",
|
|
72
|
+
"react-dom": "^19.2.5",
|
|
73
|
+
"react-router-dom": "^7.14.2",
|
|
74
|
+
"spark-md5": ">=3.0.2 <3.1",
|
|
75
|
+
"storybook": "~10.3.6",
|
|
64
76
|
"typescript": "^5.9.3",
|
|
65
|
-
"vite": "~
|
|
66
|
-
"zod": "^4.3
|
|
77
|
+
"vite": "~8.0.10",
|
|
78
|
+
"zod": "^4.4.3"
|
|
67
79
|
},
|
|
68
80
|
"peerDependencies": {
|
|
69
|
-
"@mui/material": ">=
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
81
|
+
"@mui/material": ">=7.3.10 <7.4",
|
|
82
|
+
"@opentelemetry/api": ">=1.9.1 <2",
|
|
83
|
+
"@opentelemetry/sdk-trace-base": ">=2.7.1 <3",
|
|
84
|
+
"@xylabs/pixel": ">=5.1.0 <5.2",
|
|
85
|
+
"@xylabs/sdk-js": ">=5.1.0 <6",
|
|
86
|
+
"async-mutex": ">=0.5.0 <1",
|
|
87
|
+
"bn.js": ">=5.2.3 <6",
|
|
88
|
+
"bowser": ">=2.14.1 <3",
|
|
89
|
+
"buffer": ">=6.0.3 <7",
|
|
90
|
+
"chalk": ">=5.6.2 <6",
|
|
91
|
+
"ethers": ">=6.16.0 <7",
|
|
92
|
+
"fast-deep-equal": ">=3.1.3 <4",
|
|
93
|
+
"js-cookie": ">=3.0.5 <4",
|
|
94
|
+
"mixpanel-browser": ">=2.78.0 <3",
|
|
95
|
+
"pako": ">=2.1.0 <2.2",
|
|
96
|
+
"query-string": ">=9.3.1 <9.4",
|
|
97
|
+
"react": ">=19.2.5 <20",
|
|
98
|
+
"react-dom": ">=19.2.5 <20",
|
|
99
|
+
"react-router-dom": ">=7.14.2 <8",
|
|
100
|
+
"spark-md5": ">=3.0.2 <4",
|
|
101
|
+
"zod": ">=4.4.3 <5"
|
|
74
102
|
},
|
|
75
103
|
"publishConfig": {
|
|
76
104
|
"access": "public"
|
|
77
105
|
}
|
|
78
|
-
}
|
|
106
|
+
}
|
package/src/PixelEvent.ts
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryFn } from '@storybook/react-vite'
|
|
2
|
-
import { PixelApi, XyPixel } from '@xylabs/pixel'
|
|
3
|
-
import type { BusyBoxProps } from '@xylabs/react-flexbox'
|
|
4
|
-
import React, { useMemo, useState } from 'react'
|
|
5
|
-
|
|
6
|
-
import { PixelDebugger } from './PixelDebugger.tsx'
|
|
7
|
-
import { PixelDebuggerProvider } from './PixelDebuggerProvider.tsx'
|
|
8
|
-
import { PixelDebuggerToggle } from './PixelDebuggerToggle.tsx'
|
|
9
|
-
|
|
10
|
-
const StorybookEntry = {
|
|
11
|
-
argTypes: {},
|
|
12
|
-
component: PixelDebuggerToggle,
|
|
13
|
-
parameters: { docs: { page: null } },
|
|
14
|
-
title: 'pixel-debugger/PixelDebuggerToggle',
|
|
15
|
-
} as Meta<typeof PixelDebuggerToggle>
|
|
16
|
-
|
|
17
|
-
const Template: StoryFn<typeof PixelDebuggerToggle> = (args: BusyBoxProps) => {
|
|
18
|
-
const [pixel, setPixel] = useState<XyPixel>()
|
|
19
|
-
useMemo(() => {
|
|
20
|
-
XyPixel.selectApi(new PixelApi('local'))
|
|
21
|
-
setPixel(XyPixel.init('storybookPixel'))
|
|
22
|
-
}, [])
|
|
23
|
-
return pixel
|
|
24
|
-
? (
|
|
25
|
-
<PixelDebuggerProvider>
|
|
26
|
-
<PixelDebuggerToggle {...args} />
|
|
27
|
-
<PixelDebugger />
|
|
28
|
-
</PixelDebuggerProvider>
|
|
29
|
-
)
|
|
30
|
-
: <div>Loading Pixel...</div>
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const Default = Template.bind({})
|
|
34
|
-
Default.args = {}
|
|
35
|
-
|
|
36
|
-
export { Default }
|
|
37
|
-
|
|
38
|
-
export default StorybookEntry
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Badge, Card, Divider, Typography, useTheme,
|
|
3
|
-
} from '@mui/material'
|
|
4
|
-
import { ButtonEx } from '@xylabs/react-button'
|
|
5
|
-
import { FlexCol } from '@xylabs/react-flexbox'
|
|
6
|
-
import { DebugUserEventsContext } from '@xylabs/react-pixel'
|
|
7
|
-
import { Portal } from '@xylabs/react-portal'
|
|
8
|
-
import React, { use, useState } from 'react'
|
|
9
|
-
|
|
10
|
-
import { usePixelAltSendHandler } from '../hooks/index.ts'
|
|
11
|
-
import type { PixelEvent } from '../PixelEvent.ts'
|
|
12
|
-
|
|
13
|
-
export const PixelDebugger: React.FC = () => {
|
|
14
|
-
const { isDebugging } = use(DebugUserEventsContext)
|
|
15
|
-
// TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
|
|
16
|
-
const theme = useTheme()
|
|
17
|
-
const [displayEvents, setDisplayEvents] = useState(false)
|
|
18
|
-
const [events, setEvents] = useState<PixelEvent[]>([])
|
|
19
|
-
|
|
20
|
-
usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {
|
|
21
|
-
setEvents(events => [{ event, fields }, ...events])
|
|
22
|
-
})
|
|
23
|
-
|
|
24
|
-
if (!isDebugging) {
|
|
25
|
-
return null
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
return (
|
|
29
|
-
<Portal>
|
|
30
|
-
<div style={{
|
|
31
|
-
bottom: 0, left: 0, position: 'fixed', width: 350,
|
|
32
|
-
}}
|
|
33
|
-
>
|
|
34
|
-
<Badge badgeContent={events.length} color="primary" sx={{ width: '100%' }}>
|
|
35
|
-
<Card
|
|
36
|
-
variant="outlined"
|
|
37
|
-
sx={{
|
|
38
|
-
backdropFilter: 'blur(16px) saturate(180%)',
|
|
39
|
-
backgroundColor: 'rgba(18, 18, 18, .70)',
|
|
40
|
-
overflowY: 'auto',
|
|
41
|
-
width: '100%',
|
|
42
|
-
}}
|
|
43
|
-
color={theme.vars.palette.primary.main}
|
|
44
|
-
>
|
|
45
|
-
<FlexCol
|
|
46
|
-
alignItems="stretch"
|
|
47
|
-
sx={{ flexFlow: 'column', maxHeight: 400 }}
|
|
48
|
-
>
|
|
49
|
-
<FlexCol alignItems="stretch" sx={{ flex: '0 1 auto' }}>
|
|
50
|
-
<ButtonEx variant="text" onClick={() => setDisplayEvents(!displayEvents)}>
|
|
51
|
-
XY Pixel Debugger
|
|
52
|
-
</ButtonEx>
|
|
53
|
-
</FlexCol>
|
|
54
|
-
{displayEvents && events.length > 0 && (
|
|
55
|
-
<FlexCol
|
|
56
|
-
alignItems="stretch"
|
|
57
|
-
alignContent="start"
|
|
58
|
-
padding={2}
|
|
59
|
-
sx={{
|
|
60
|
-
cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none',
|
|
61
|
-
}}
|
|
62
|
-
>
|
|
63
|
-
{events.map((e, index) => (
|
|
64
|
-
|
|
65
|
-
<PixelEventDetails key={`${e.event}`} events={events} index={index} {...e} />
|
|
66
|
-
))}
|
|
67
|
-
</FlexCol>
|
|
68
|
-
)}
|
|
69
|
-
{displayEvents && events.length === 0 && <Typography variant="subtitle2">No Events</Typography>}
|
|
70
|
-
</FlexCol>
|
|
71
|
-
</Card>
|
|
72
|
-
</Badge>
|
|
73
|
-
</div>
|
|
74
|
-
</Portal>
|
|
75
|
-
)
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
const PixelEventDetails: React.FC<PixelEvent & { events: PixelEvent[]; index: number }> = ({
|
|
79
|
-
event, fields, index, events,
|
|
80
|
-
}) => {
|
|
81
|
-
const [isOpen, setIsOpen] = useState(false)
|
|
82
|
-
return (
|
|
83
|
-
<FlexCol alignItems="stretch" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>
|
|
84
|
-
<Typography variant="subtitle2">{event}</Typography>
|
|
85
|
-
{isOpen && (
|
|
86
|
-
<Typography marginBottom={0.5} variant="caption">
|
|
87
|
-
{JSON.stringify(fields, null, 2)}
|
|
88
|
-
</Typography>
|
|
89
|
-
)}
|
|
90
|
-
{events[index + 1] && <Divider />}
|
|
91
|
-
</FlexCol>
|
|
92
|
-
)
|
|
93
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { DebugUserEventsContext } from '@xylabs/react-pixel'
|
|
2
|
-
import { useLocalStorage } from '@xylabs/react-shared'
|
|
3
|
-
import type { PropsWithChildren } from 'react'
|
|
4
|
-
import React, { useMemo } from 'react'
|
|
5
|
-
|
|
6
|
-
export const PixelDebuggerProvider: React.FC<PropsWithChildren> = ({ children }) => {
|
|
7
|
-
const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)
|
|
8
|
-
const value = useMemo(() => ({ isDebugging, setIsDebugging }), [isDebugging, setIsDebugging])
|
|
9
|
-
return <DebugUserEventsContext value={value}>{children}</DebugUserEventsContext>
|
|
10
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
FormControl, FormLabel, Switch,
|
|
3
|
-
} from '@mui/material'
|
|
4
|
-
import type { BusyBoxProps } from '@xylabs/react-flexbox'
|
|
5
|
-
import { FlexRow } from '@xylabs/react-flexbox'
|
|
6
|
-
import { DebugUserEventsContext } from '@xylabs/react-pixel'
|
|
7
|
-
import React, { use } from 'react'
|
|
8
|
-
|
|
9
|
-
export const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {
|
|
10
|
-
const { setIsDebugging, isDebugging } = use(DebugUserEventsContext)
|
|
11
|
-
|
|
12
|
-
return (
|
|
13
|
-
<FlexRow {...props}>
|
|
14
|
-
<FormControl>
|
|
15
|
-
<FormLabel>Enable Debugger</FormLabel>
|
|
16
|
-
<Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />
|
|
17
|
-
</FormControl>
|
|
18
|
-
</FlexRow>
|
|
19
|
-
)
|
|
20
|
-
}
|
package/src/components/index.ts
DELETED
package/src/global.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '@mui/material/themeCssVarsAugmentation'
|
package/src/hooks/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './usePixelAltSendHandler.ts'
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { XyPixel } from '@xylabs/pixel'
|
|
2
|
-
import type { JsonObject } from '@xylabs/sdk-js'
|
|
3
|
-
import { useEffect, useState } from 'react'
|
|
4
|
-
|
|
5
|
-
export const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {
|
|
6
|
-
const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
if (!pixelSend && XyPixel.instance.send) {
|
|
9
|
-
const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)
|
|
10
|
-
// eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
|
|
11
|
-
setPixelSend(oldHandler)
|
|
12
|
-
} else {
|
|
13
|
-
XyPixel.instance.send = async (event: string, fields?: JsonObject, eventId?: string) => {
|
|
14
|
-
altHandler(event, fields)
|
|
15
|
-
return await pixelSend?.(event, fields, eventId)
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
return () => {
|
|
19
|
-
// restore send on unmount
|
|
20
|
-
if (pixelSend) {
|
|
21
|
-
XyPixel.instance.send = pixelSend
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}, [pixelSend, altHandler])
|
|
25
|
-
}
|
package/src/index.ts
DELETED