@xylabs/react-pixel-debugger 2.19.1 → 3.0.2

package/dist/esm/components/PixelDebugger.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, Card, Divider, Typography, useTheme } from '@mui/material';
-import { ButtonEx } from '@xylabs/react-button';
-import { FlexCol } from '@xylabs/react-flexbox';
-import { DebugUserEventsContext } from '@xylabs/react-pixel';
-import { Portal } from '@xylabs/react-portal';
-import { useContext, useState } from 'react';
-import { usePixelAltSendHandler } from '../hooks';
-export const PixelDebugger = () => {
-    const { isDebugging } = useContext(DebugUserEventsContext);
-    //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
-    const theme = useTheme();
-    const [displayEvents, setDisplayEvents] = useState(false);
-    const [events, setEvents] = useState([]);
-    usePixelAltSendHandler((event, fields) => {
-        setEvents((events) => [{ event, fields }, ...events]);
-    });
-    if (!isDebugging) {
-        return null;
-    }
-    return (_jsx(Portal, { children: _jsx("div", { style: { bottom: 0, left: 0, position: 'fixed', width: 350 }, children: _jsx(Badge, { badgeContent: events.length, color: "primary", sx: { width: '100%' }, children: _jsx(Card, { variant: "outlined", sx: {
-                        backdropFilter: 'blur(16px) saturate(180%)',
-                        backgroundColor: 'rgba(18, 18, 18, .70)',
-                        overflowY: 'auto',
-                        width: '100%',
-                    }, color: theme.palette.primary.main, children: _jsxs(FlexCol, { alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 }, children: [_jsx(FlexCol, { alignItems: "stretch", sx: { flex: '0 1 auto' }, children: _jsx(ButtonEx, { variant: "text", onClick: () => setDisplayEvents(!displayEvents), children: "XY Pixel Debugger" }) }), displayEvents && !!events.length && (_jsx(FlexCol, { alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }, children: events.map((e, index) => (_jsx(PixelEventDetails, { events: events, index: index, ...e }, `${e.event}-${index}`))) })), displayEvents && !events.length && _jsx(Typography, { variant: "subtitle2", children: "No Events" })] }) }) }) }) }));
-};
-const PixelEventDetails = ({ event, fields, index, events }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs(FlexCol, { alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen), children: [_jsx(Typography, { variant: "subtitle2", children: event }), isOpen && (_jsx(Typography, { marginBottom: 0.5, variant: "caption", children: JSON.stringify(fields, null, 2) })), events[index + 1] && _jsx(Divider, {})] }));
-};
-//# sourceMappingURL=PixelDebugger.js.map

package/dist/esm/components/PixelDebugger.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PixelDebugger.js","sourceRoot":"","sources":["../../../src/components/PixelDebugger.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/PixelDebuggerProvider.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { DebugUserEventsContext } from '@xylabs/react-pixel';
-import { useLocalStorage } from '@xylabs/react-shared';
-export const PixelDebuggerProvider = ({ children }) => {
-    const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
-    return _jsx(DebugUserEventsContext.Provider, { value: { isDebugging, setIsDebugging }, children: children });
-};
-//# sourceMappingURL=PixelDebuggerProvider.js.map

package/dist/esm/components/PixelDebuggerProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PixelDebuggerProvider.js","sourceRoot":"","sources":["../../../src/components/PixelDebuggerProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,eAAe,EAAgB,MAAM,sBAAsB,CAAA;AAEpE,MAAM,CAAC,MAAM,qBAAqB,GAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAe,CAAU,kBAAkB,EAAE,KAAK,CAAC,CAAA;IACzF,OAAO,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,YAAG,QAAQ,GAAmC,CAAA;AAC9H,CAAC,CAAA"}

package/dist/esm/components/PixelDebuggerToggle.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormControl, FormLabel, Switch } from '@mui/material';
-import { FlexRow } from '@xylabs/react-flexbox';
-import { DebugUserEventsContext } from '@xylabs/react-pixel';
-import { useContext } from 'react';
-export const PixelDebuggerToggle = ({ ...props }) => {
-    const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext);
-    return (_jsx(FlexRow, { ...props, children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Enable Debugger" }), _jsx(Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })] }) }));
-};
-//# sourceMappingURL=PixelDebuggerToggle.js.map

package/dist/esm/components/PixelDebuggerToggle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PixelDebuggerToggle.js","sourceRoot":"","sources":["../../../src/components/PixelDebuggerToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,MAAM,CAAC,MAAM,mBAAmB,GAA2B,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1E,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAA;IAE1E,OAAO,CACL,KAAC,OAAO,OAAK,KAAK,YAChB,MAAC,WAAW,eACV,KAAC,SAAS,kCAA4B,EACtC,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,GAAI,IACjE,GACN,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA"}

package/dist/esm/hooks/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA"}

package/dist/esm/hooks/usePixelAltSendHandler.js

@@ -1,24 +0,0 @@
-import { XyPixel } from '@xylabs/pixel';
-import { useEffect, useState } from 'react';
-export const usePixelAltSendHandler = (altHandler) => {
-    const [pixelSend, setPixelSend] = useState();
-    useEffect(() => {
-        if (!pixelSend && XyPixel.instance.send) {
-            const oldHandler = XyPixel.instance.send.bind(XyPixel.instance);
-            setPixelSend(oldHandler);
-        }
-        else {
-            XyPixel.instance.send = async (event, fields, eventId) => {
-                altHandler(event, fields);
-                return await pixelSend?.(event, fields, eventId);
-            };
-        }
-        return () => {
-            //restore send on unmount
-            if (pixelSend) {
-                XyPixel.instance.send = pixelSend;
-            }
-        };
-    }, [pixelSend, altHandler]);
-};
-//# sourceMappingURL=usePixelAltSendHandler.js.map

package/dist/esm/hooks/usePixelAltSendHandler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePixelAltSendHandler.js","sourceRoot":"","sources":["../../../src/hooks/usePixelAltSendHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,UAAqE,EAAE,EAAE;IAC9G,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAgC,CAAA;IAC1E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;YACvC,MAAM,UAAU,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;YAC/D,YAAY,CAAC,UAAU,CAAC,CAAA;SACzB;aAAM;YACL,OAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,KAAK,EAAE,KAAa,EAAE,MAAgC,EAAE,OAAgB,EAAE,EAAE;gBAClG,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;gBACzB,OAAO,MAAM,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAA;YAClD,CAAC,CAAA;SACF;QACD,OAAO,GAAG,EAAE;YACV,yBAAyB;YACzB,IAAI,SAAS,EAAE;gBACb,OAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,SAAS,CAAA;aAClC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAA;AAC7B,CAAC,CAAA"}

package/dist/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA"}