@xylabs/sdk-react 2.9.16 → 2.9.17

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

@@ -2,7 +2,8 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { PixelApi, XyPixel } from '@xylabs/pixel'
 import { useEffect } from 'react'
 
-import { PixelDebuggerToggle } from './index'
+import { PixelDebugger, PixelDebuggerToggle } from './index'
+import { PixelDebuggerProvider } from './PixelDebuggerProvider'
 
 const StorybookEntry = {
   argTypes: {},
@@ -21,10 +22,10 @@ const Template: ComponentStory<typeof PixelDebuggerToggle> = (args) => {
     XyPixel.init('storybookPixel')
   }, [])
   return (
-    <div>
+    <PixelDebuggerProvider>
       <PixelDebuggerToggle {...args} />
-      <div id="pixelPortal" />
-    </div>
+      <PixelDebugger />
+    </PixelDebuggerProvider>
   )
 }
 

package/src/components/Pixel/PixelDebugger.tsx

@@ -1,12 +1,15 @@
 import { Badge, Card, Divider, Typography, useTheme } from '@mui/material'
-import { useState } from 'react'
+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)
@@ -16,42 +19,48 @@ export const PixelDebugger: React.FC = () => {
     setEvents((events) => [{ event, fields }, ...events])
   })
 
+  if (!isDebugging) {
+    return null
+  }
+
   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} />
-                ))}
+    <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 && <Typography variant="subtitle2">No Events</Typography>}
-          </FlexCol>
-        </Card>
-      </Badge>
-    </div>
+              {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>
   )
 }
 

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

@@ -1,24 +1,18 @@
 import { FormControl, FormLabel, Switch } from '@mui/material'
+import { useContext } from 'react'
 
-import { useLocalStorage } from '../../hooks'
+import { DebugUserEventsContext } from '../../contexts'
 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)
+  const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext)
 
   return (
     <FlexRow {...props}>
       <FormControl>
         <FormLabel>Enable Debugger</FormLabel>
-        <Switch checked={showDebugger} onClick={() => setDebugger(!showDebugger)} />
+        <Switch checked={isDebugging} onClick={() => setIsDebugging(!isDebugging)} />
       </FormControl>
-      {showDebugger && (
-        <Portal target="#pixelPortal">
-          <PixelDebugger />
-        </Portal>
-      )}
     </FlexRow>
   )
 }

package/src/components/Pixel/index.ts

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

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 }