@xylabs/sdk-react 2.9.12 → 2.9.16

package/src/components/Pixel/PixelDebugger.stories.tsx

@@ -0,0 +1,37 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { PixelApi, XyPixel } from '@xylabs/pixel'
+import { useEffect } from 'react'
+
+import { PixelDebuggerToggle } from './index'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: PixelDebuggerToggle,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Components/PixelDebuggerToggle',
+} as ComponentMeta<typeof PixelDebuggerToggle>
+
+const Template: ComponentStory<typeof PixelDebuggerToggle> = (args) => {
+  useEffect(() => {
+    XyPixel.selectApi(new PixelApi('local'))
+    XyPixel.init('storybookPixel')
+  }, [])
+  return (
+    <div>
+      <PixelDebuggerToggle {...args} />
+      <div id="pixelPortal" />
+    </div>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Pixel/PixelDebugger.tsx

@@ -0,0 +1,76 @@
+import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'
+import { useState } from 'react'
+
+import { ButtonEx } from '../ButtonEx'
+import { FlexCol } from '../FlexBox'
+import { usePixelAltSendHandler } from './hooks'
+import { PixelEvent } from './models'
+
+export const PixelDebugger: React.FC = () => {
+  //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])
+  })
+
+  return (
+    <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>
+  )
+}
+
+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/PixelDebuggerToggle.tsx

@@ -0,0 +1,24 @@
+import { FormControl, FormLabel, Switch } from '@mui/material'
+
+import { useLocalStorage } from '../../hooks'
+import { BusyBoxProps, FlexRow } from '../FlexBox'
+import { Portal } from '../Portal'
+import { PixelDebugger } from './PixelDebugger'
+
+export const PixelDebuggerToggle: React.FC<BusyBoxProps> = ({ ...props }) => {
+  const [showDebugger, setDebugger] = useLocalStorage<boolean>('isDebuggingPixel', false)
+
+  return (
+    <FlexRow {...props}>
+      <FormControl>
+        <FormLabel>Enable Debugger</FormLabel>
+        <Switch checked={showDebugger} onClick={() => setDebugger(!showDebugger)} />
+      </FormControl>
+      {showDebugger && (
+        <Portal target="#pixelPortal">
+          <PixelDebugger />
+        </Portal>
+      )}
+    </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,2 @@
+export * from './PixelDebugger'
+export * from './PixelDebuggerToggle'

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

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

package/src/components/Portal/Portal.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+import { PortalProps } from './PortalProps'
+
+export const Portal: React.FC<PortalProps> = ({ children, className, el = 'div', target = 'body' }: PortalProps) => {
+  const [container] = useState(document.createElement(el))
+  if (className) {
+    container.classList.add(className)
+  }
+  useEffect(() => {
+    const targetElement = document.querySelector(target)
+    if (!targetElement) {
+      console.warn(`Unable to find target element: ${target}`)
+    }
+    targetElement?.appendChild(container)
+    return () => {
+      targetElement?.removeChild(container)
+    }
+  }, [container, target])
+
+  return createPortal(children, container)
+}

package/src/components/Portal/PortalProps.ts

@@ -0,0 +1,6 @@
+export interface PortalProps {
+  children: React.ReactNode
+  className?: string
+  el?: string
+  target?: string
+}

package/src/components/Portal/index.ts

@@ -0,0 +1,2 @@
+export * from './Portal'
+export * from './PortalProps'

package/src/components/index.ts

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

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]