@xylabs/sdk-react 2.9.14 → 2.9.19

package/src/components/Pixel/PixelDebugger.tsx

@@ -0,0 +1,85 @@
+import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'
+import { useContext, useState } from 'react'
+
+import { DebugUserEventsContext } from '../../contexts'
+import { ButtonEx } from '../ButtonEx'
+import { FlexCol } from '../FlexBox'
+import { Portal } from '../Portal'
+import { usePixelAltSendHandler } from './hooks'
+import { PixelEvent } from './models'
+
+export const PixelDebugger: React.FC = () => {
+  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<PixelEvent[]>([])
+
+  usePixelAltSendHandler((event: string, fields?: Record<string, unknown>) => {
+    setEvents((events) => [{ event, fields }, ...events])
+  })
+
+  if (!isDebugging) {
+    return null
+  }
+
+  return (
+    <Portal>
+      <div style={{ bottom: 0, left: 0, position: 'fixed', width: 350 }}>
+        <Badge badgeContent={events.length} color="primary" sx={{ width: '100%' }}>
+          <Card
+            variant="outlined"
+            sx={{
+              backdropFilter: 'blur(16px) saturate(180%)',
+              backgroundColor: 'rgba(18, 18, 18, .70)',
+              overflowY: 'auto',
+              width: '100%',
+            }}
+            color={theme.palette.primary.main}
+          >
+            <FlexCol alignItems="stretch" sx={{ flexFlow: 'column', maxHeight: 400 }}>
+              <FlexCol alignItems="stretch" sx={{ flex: '0 1 auto' }}>
+                <ButtonEx variant="text" onClick={() => setDisplayEvents(!displayEvents)}>
+                  XY Pixel Debugger
+                </ButtonEx>
+              </FlexCol>
+              {displayEvents && !!events.length && (
+                <FlexCol
+                  alignItems="stretch"
+                  alignContent="start"
+                  padding={2}
+                  sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}
+                >
+                  {events.map((e, index) => (
+                    <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />
+                  ))}
+                </FlexCol>
+              )}
+              {displayEvents && !events.length && <Typography variant="subtitle2">No Events</Typography>}
+            </FlexCol>
+          </Card>
+        </Badge>
+      </div>
+    </Portal>
+  )
+}
+
+const PixelEventDetails: React.FC<PixelEvent & { index: number; events: PixelEvent[] }> = ({
+  event,
+  fields,
+  index,
+  events,
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  return (
+    <FlexCol alignItems="stretch" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>
+      <Typography variant="subtitle2">{event}</Typography>
+      {isOpen && (
+        <Typography marginBottom={0.5} variant="caption">
+          {JSON.stringify(fields, null, 2)}
+        </Typography>
+      )}
+      {events[index + 1] && <Divider />}
+    </FlexCol>
+  )
+}

package/src/components/Pixel/PixelDebuggerProvider.tsx

@@ -0,0 +1,11 @@
+import { DebugUserEventsContext } from '../../contexts'
+import { useLocalStorage } from '../../hooks'
+
+export const PixelDebuggerProvider: React.FC = ({ children }) => {
+  const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)
+  return (
+    <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>
+      {children}
+    </DebugUserEventsContext.Provider>
+  )
+}

package/src/components/Pixel/PixelDebuggerToggle.tsx

@@ -0,0 +1,18 @@
+import { FormControl, FormLabel, Switch } from '@mui/material'
+import { useContext } from 'react'
+
+import { DebugUserEventsContext } from '../../contexts'
+import { BusyBoxProps, FlexRow } from '../FlexBox'
+
+export const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {
+  const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)
+
+  return (
+    <FlexRow {...props}>
+      <FormControl>
+        <FormLabel>Enable Debugger</FormLabel>
+        <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />
+      </FormControl>
+    </FlexRow>
+  )
+}

package/src/components/Pixel/hooks/index.ts

@@ -0,0 +1,23 @@
+import { XyPixel } from '@xylabs/pixel'
+import { useEffect, useState } from 'react'
+
+export const usePixelAltSendHandler = (altHandler: (event: string, fields?: Record<string, unknown>) => void) => {
+  const [pixelSend, setPixelSend] = useState<typeof XyPixel.instance.send>()
+  useEffect(() => {
+    if (!pixelSend && XyPixel.instance.send) {
+      const oldHandler = XyPixel.instance.send.bind(XyPixel.instance)
+      setPixelSend(oldHandler)
+    } else {
+      XyPixel.instance.send = async (event: string, fields?: Record<string, unknown>) => {
+        altHandler(event, fields)
+        return await pixelSend?.(event, fields)
+      }
+    }
+    return () => {
+      //restore send on unmount
+      if (pixelSend) {
+        XyPixel.instance.send = pixelSend
+      }
+    }
+  }, [pixelSend, altHandler])
+}

package/src/components/Pixel/index.ts

@@ -0,0 +1,3 @@
+export * from './PixelDebugger'
+export * from './PixelDebuggerProvider'
+export * from './PixelDebuggerToggle'

package/src/components/Pixel/models/index.ts

@@ -0,0 +1,4 @@
+export interface PixelEvent {
+  event: string
+  fields?: unknown
+}

package/src/components/index.ts

@@ -17,6 +17,7 @@ export * from './FlexBox'
 export * from './InvertableThemeProvider'
 export * from './LinkEx'
 export * from './NumberStatus'
+export * from './Pixel'
 export * from './Portal'
 export * from './QuickTipButton'
 export * from './RichResult'

package/src/contexts/UserEvents/Context.ts

@@ -4,6 +4,18 @@ import { createContext } from 'react'
 interface Props {
   userEvents?: UserEventHandler<unknown>
 }
-
 const UserEventsContext = createContext<Props>({})
-export { UserEventsContext }
+
+interface DebuggingProps {
+  isDebugging: boolean
+  setIsDebugging: (value: boolean) => void
+}
+
+const DebugUserEventsContext = createContext<DebuggingProps>({
+  isDebugging: false,
+  setIsDebugging: (value) => {
+    console.warn('set is debugging is not set', value)
+  },
+})
+
+export { DebugUserEventsContext, UserEventsContext }

package/src/contexts/UserEvents/index.ts

@@ -1,3 +1,2 @@
-import { UserEventsContext } from './Context'
+export * from './Context'
 export * from './Loader'
-export { UserEventsContext }

package/src/hooks/useLocalStorage.ts

@@ -14,10 +14,8 @@ export const useLocalStorage = <T>(key: string, defaultValue: T): [T, (value: T)
   })
 
   const setValue = (value: T) => {
-    console.log('setValue', value)
     setStoredValue(value)
     setLocalStorageObject(key, value)
-    console.log('getValue from ls', getLocalStorageObject(key))
   }
 
   return [storedValue, setValue]