@xylabs/react-pixel-debugger 7.1.9 → 7.1.11
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/browser/components/PixelDebugger.stories.d.ts +1 -1
- package/dist/browser/components/PixelDebuggerProvider.d.ts +2 -2
- package/dist/browser/components/PixelDebuggerProvider.d.ts.map +1 -1
- package/dist/browser/index.mjs +1 -1
- package/dist/browser/index.mjs.map +1 -1
- package/package.json +20 -20
- package/src/components/PixelDebugger.stories.tsx +1 -1
- package/src/components/PixelDebugger.tsx +1 -1
- package/src/components/PixelDebuggerProvider.tsx +2 -2
|
@@ -2,7 +2,7 @@ import type { Meta } from '@storybook/react-vite';
|
|
|
2
2
|
import type { BusyBoxProps } from '@xylabs/react-flexbox';
|
|
3
3
|
import { PixelDebuggerToggle } from './PixelDebuggerToggle.tsx';
|
|
4
4
|
declare const StorybookEntry: Meta<typeof PixelDebuggerToggle>;
|
|
5
|
-
declare const Default: import(".store/storybook-virtual-
|
|
5
|
+
declare const Default: import(".store/storybook-virtual-880380e42c/package/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, BusyBoxProps>;
|
|
6
6
|
export { Default };
|
|
7
7
|
export default StorybookEntry;
|
|
8
8
|
//# sourceMappingURL=PixelDebugger.stories.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { PropsWithChildren } from 'react';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
export declare const PixelDebuggerProvider: React.FC<
|
|
3
|
+
export declare const PixelDebuggerProvider: React.FC<PropsWithChildren>;
|
|
4
4
|
//# sourceMappingURL=PixelDebuggerProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PixelDebuggerProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebuggerProvider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PixelDebuggerProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PixelDebuggerProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAI7D,CAAA"}
|
package/dist/browser/index.mjs
CHANGED
|
@@ -87,7 +87,7 @@ var PixelDebugger = () => {
|
|
|
87
87
|
overflowY: "auto",
|
|
88
88
|
userSelect: "none"
|
|
89
89
|
},
|
|
90
|
-
children: events.map((e, index) => /* @__PURE__ */ jsx(PixelEventDetails, { events, index, ...e }, `${e.event}
|
|
90
|
+
children: events.map((e, index) => /* @__PURE__ */ jsx(PixelEventDetails, { events, index, ...e }, `${e.event}`))
|
|
91
91
|
}
|
|
92
92
|
),
|
|
93
93
|
displayEvents && events.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "No Events" })
|
|
@@ -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}
|
|
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 type { JsonObject } from '@xylabs/object'\nimport { XyPixel } from '@xylabs/pixel'\nimport { useEffect, useState } from 'react'\n\nexport const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {\n const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()\n useEffect(() => {\n if (!pixelSend && XyPixel.instance.send) {\n const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)\n // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\n setPixelSend(oldHandler)\n } else {\n XyPixel.instance.send = async (event: string, fields?: JsonObject, eventId?: string) => {\n altHandler(event, fields)\n return await pixelSend?.(event, fields, eventId)\n }\n }\n return () => {\n // restore send on unmount\n if (pixelSend) {\n XyPixel.instance.send = pixelSend\n }\n }\n }, [pixelSend, 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":["useState","useState","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.1.
|
|
3
|
+
"version": "7.1.11",
|
|
4
4
|
"description": "Common React library for all XY Labs projects that use React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"utility",
|
|
@@ -41,27 +41,27 @@
|
|
|
41
41
|
"packages/*"
|
|
42
42
|
],
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@xylabs/pixel": "~5.0.
|
|
45
|
-
"@xylabs/react-button": "~7.1.
|
|
46
|
-
"@xylabs/react-flexbox": "~7.1.
|
|
47
|
-
"@xylabs/react-pixel": "~7.1.
|
|
48
|
-
"@xylabs/react-portal": "~7.1.
|
|
49
|
-
"@xylabs/react-shared": "~7.1.
|
|
44
|
+
"@xylabs/pixel": "~5.0.64",
|
|
45
|
+
"@xylabs/react-button": "~7.1.11",
|
|
46
|
+
"@xylabs/react-flexbox": "~7.1.11",
|
|
47
|
+
"@xylabs/react-pixel": "~7.1.11",
|
|
48
|
+
"@xylabs/react-portal": "~7.1.11",
|
|
49
|
+
"@xylabs/react-shared": "~7.1.11"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@mui/material": "~7.3.
|
|
53
|
-
"@storybook/react-vite": "~10.1
|
|
54
|
-
"@types/react": "^19.2.
|
|
55
|
-
"@xylabs/object": "~5.0.
|
|
56
|
-
"@xylabs/ts-scripts-yarn3": "~7.2
|
|
57
|
-
"@xylabs/tsconfig": "~7.2
|
|
58
|
-
"@xylabs/tsconfig-dom": "~7.2
|
|
59
|
-
"@xylabs/tsconfig-react": "~7.2
|
|
60
|
-
"react": "^19.2.
|
|
61
|
-
"react-dom": "^19.2.
|
|
62
|
-
"storybook": "~10.1
|
|
52
|
+
"@mui/material": "~7.3.7",
|
|
53
|
+
"@storybook/react-vite": "~10.2.1",
|
|
54
|
+
"@types/react": "^19.2.10",
|
|
55
|
+
"@xylabs/object": "~5.0.64",
|
|
56
|
+
"@xylabs/ts-scripts-yarn3": "~7.3.2",
|
|
57
|
+
"@xylabs/tsconfig": "~7.3.2",
|
|
58
|
+
"@xylabs/tsconfig-dom": "~7.3.2",
|
|
59
|
+
"@xylabs/tsconfig-react": "~7.3.2",
|
|
60
|
+
"react": "^19.2.4",
|
|
61
|
+
"react-dom": "^19.2.4",
|
|
62
|
+
"storybook": "~10.2.1",
|
|
63
63
|
"typescript": "^5.9.3",
|
|
64
|
-
"vite": "~7.
|
|
64
|
+
"vite": "~7.3.1"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
67
|
"@mui/material": ">=6 <8",
|
|
@@ -71,4 +71,4 @@
|
|
|
71
71
|
"publishConfig": {
|
|
72
72
|
"access": "public"
|
|
73
73
|
}
|
|
74
|
-
}
|
|
74
|
+
}
|
|
@@ -62,7 +62,7 @@ export const PixelDebugger: React.FC = () => {
|
|
|
62
62
|
>
|
|
63
63
|
{events.map((e, index) => (
|
|
64
64
|
|
|
65
|
-
<PixelEventDetails key={`${e.event}
|
|
65
|
+
<PixelEventDetails key={`${e.event}`} events={events} index={index} {...e} />
|
|
66
66
|
))}
|
|
67
67
|
</FlexCol>
|
|
68
68
|
)}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { DebugUserEventsContext } from '@xylabs/react-pixel'
|
|
2
|
-
import type { WithChildren } from '@xylabs/react-shared'
|
|
3
2
|
import { useLocalStorage } from '@xylabs/react-shared'
|
|
3
|
+
import type { PropsWithChildren } from 'react'
|
|
4
4
|
import React, { useMemo } from 'react'
|
|
5
5
|
|
|
6
|
-
export const PixelDebuggerProvider: React.FC<
|
|
6
|
+
export const PixelDebuggerProvider: React.FC<PropsWithChildren> = ({ children }) => {
|
|
7
7
|
const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)
|
|
8
8
|
const value = useMemo(() => ({ isDebugging, setIsDebugging }), [isDebugging, setIsDebugging])
|
|
9
9
|
return <DebugUserEventsContext value={value}>{children}</DebugUserEventsContext>
|