@xylabs/sdk-react 2.12.12 → 2.13.3

package/src/components/Identicon.tsx

@@ -1,83 +0,0 @@
-import md5 from 'md5'
-import React, { useEffect, useRef } from 'react'
-
-import { FlexBoxProps, FlexRow } from './FlexBox'
-
-const range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {
-  return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
-}
-
-export interface IdenticonProps extends FlexBoxProps {
-  bg?: string
-  className?: string
-  count?: number
-  fg?: string
-  iconPadding?: number
-  palette?: string[]
-  size?: number
-  value?: string
-}
-
-const updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: IdenticonProps) => {
-  const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props
-  let { fg } = props
-  const hash = md5(value)
-  const block = Math.floor(size / count)
-  const hashcolor = hash.slice(0, 6)
-
-  const current = canvas.current
-
-  if (!current) {
-    return
-  }
-
-  if (palette && palette.length) {
-    const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))
-    fg = palette[index]
-  }
-
-  current.width = block * count + iconPadding
-  current.height = block * count + iconPadding
-  const arr = hash.split('').map((el) => {
-    const parsedEl = parseInt(el, 16)
-    if (parsedEl < 8) {
-      return 0
-    } else {
-      return 1
-    }
-  })
-
-  const map = []
-
-  map[0] = map[4] = arr.slice(0, 5)
-  map[1] = map[3] = arr.slice(5, 10)
-  map[2] = arr.slice(10, 15)
-
-  const ctx = current.getContext('2d')
-  if (ctx) {
-    ctx.imageSmoothingEnabled = false
-    ctx.clearRect(0, 0, current.width, current.height)
-
-    map.forEach((row, i) => {
-      row.forEach((el, j) => {
-        if (el) {
-          ctx.fillStyle = fg ? fg : '#' + hashcolor
-          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)
-        } else {
-          ctx.fillStyle = bg
-          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)
-        }
-      })
-    })
-  }
-}
-
-export const Identicon: React.FC<IdenticonProps> = ({ size = 400, className = 'identicon', bg, count, fg, iconPadding, palette, value, ...props }) => {
-  const canvas = useRef<HTMLCanvasElement>(null)
-
-  useEffect(() => {
-    updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value })
-  })
-
-  return <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>
-}

package/src/components/InvertableThemeProvider/InvertableTheme.tsx

@@ -1,9 +0,0 @@
-import { ThemeOptions } from '@mui/material'
-
-interface InvertableTheme {
-  options: ThemeOptions
-  lightOptions?: ThemeOptions
-  darkOptions?: ThemeOptions
-}
-
-export type { InvertableTheme }

package/src/components/InvertableThemeProvider/InvertableThemeContext.tsx

@@ -1,9 +0,0 @@
-import { createContext } from 'react'
-
-import { InvertableTheme } from './InvertableTheme'
-
-const InvertableThemeContext = createContext<InvertableTheme>({
-  options: {},
-})
-
-export { InvertableThemeContext }

package/src/components/InvertableThemeProvider/InvertableThemeProvider.stories.tsx

@@ -1,71 +0,0 @@
-import { Box, CssBaseline, Typography, useTheme } from '@mui/material'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-
-import { InvertableThemeProvider } from './InvertableThemeProvider'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: InvertableThemeProvider,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'Components/InvertableThemeProvider',
-} as ComponentMeta<typeof InvertableThemeProvider>
-
-const Template: ComponentStory<typeof InvertableThemeProvider> = (args) => <InvertableThemeProvider {...args}></InvertableThemeProvider>
-
-const ThemeEnabledComponent = () => {
-  const theme = useTheme()
-  return (
-    <>
-      <CssBaseline />
-      <Box sx={{ backgroundColor: theme.palette.background.default }}>
-        <Box padding={3} border={`1px dotted ${theme.palette.divider}`}>
-          <Typography variant="h3">marginBottom of {theme.spacing(4)}</Typography>
-          <Typography variant="h4" color={theme.palette.primary.main}>
-            Color: {theme.palette.primary.main}
-          </Typography>
-          <Typography variant="h4" color={theme.palette.secondary.main}>
-            Color: {theme.palette.secondary.main}
-          </Typography>
-        </Box>
-      </Box>
-    </>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {
-  children: <ThemeEnabledComponent />,
-}
-
-const DarkThemeEnabled = Template.bind({})
-DarkThemeEnabled.args = {
-  children: <ThemeEnabledComponent />,
-  dark: true,
-  darkTheme: {
-    palette: {
-      background: {
-        default: '#303030',
-        paper: '#424242',
-      },
-      mode: 'dark',
-      primary: {
-        main: '#ebebfb',
-      },
-      secondary: {
-        main: '#ffb300',
-      },
-      text: {
-        primary: '#ebebfb',
-      },
-    },
-  },
-}
-
-export { DarkThemeEnabled, Default }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/InvertableThemeProvider/InvertableThemeProvider.tsx

@@ -1,75 +0,0 @@
-import { responsiveFontSizes, ScopedCssBaseline, Theme, ThemeProvider } from '@mui/material'
-import { createTheme, ThemeOptions } from '@mui/material/styles'
-import cloneDeep from 'lodash/cloneDeep'
-import merge from 'lodash/merge'
-import React, { useContext } from 'react'
-
-import { InvertableThemeContext } from './InvertableThemeContext'
-import { InvertableThemeProviderProps } from './InvertableThemeProviderProps'
-
-export const resolveThemeColors = (options: ThemeOptions) => {
-  const theme = createTheme(options)
-  return merge({}, options, {
-    palette: {
-      text: {
-        primary: theme.palette?.getContrastText(theme.palette.primary.main),
-        secondary: theme.palette?.getContrastText(theme.palette.secondary.main),
-      },
-    },
-  })
-}
-
-export const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = ({
-  options,
-  children,
-  dark,
-  resolve = false,
-  scoped = false,
-  invert = false,
-  noResponsiveFonts,
-  // eslint-disable-next-line deprecation/deprecation
-  darkTheme,
-  darkOptions,
-  lightOptions,
-}) => {
-  const parentContext = useContext(InvertableThemeContext)
-  const clonedOptions = cloneDeep(options ?? parentContext.options ?? {})
-  const clonedDarkOptions = cloneDeep(darkOptions ?? darkTheme ?? parentContext.darkOptions)
-  const clonedLightOptions = cloneDeep(lightOptions ?? parentContext.lightOptions)
-
-  clonedOptions.palette = clonedOptions.palette ?? {}
-
-  if (invert) {
-    clonedOptions.palette.mode = clonedOptions.palette.mode === 'dark' ? 'light' : 'dark'
-  }
-
-  if (dark !== undefined) {
-    clonedOptions.palette.mode = dark ? 'dark' : 'light'
-  }
-
-  const modeOptions = clonedOptions.palette.mode === 'dark' ? clonedDarkOptions : clonedLightOptions
-
-  let themeOptions = merge({}, clonedOptions, modeOptions)
-
-  if (resolve) {
-    themeOptions = resolveThemeColors(themeOptions)
-  }
-
-  const theme: Theme = noResponsiveFonts ? createTheme(themeOptions) : responsiveFontSizes(createTheme(themeOptions))
-
-  const Provider: React.FC = () => {
-    return (
-      <InvertableThemeContext.Provider value={{ darkOptions: clonedDarkOptions, lightOptions: clonedLightOptions, options: clonedOptions }}>
-        <ThemeProvider theme={theme}>{children}</ThemeProvider>
-      </InvertableThemeContext.Provider>
-    )
-  }
-
-  return scoped ? (
-    <ScopedCssBaseline>
-      <Provider />
-    </ScopedCssBaseline>
-  ) : (
-    <Provider />
-  )
-}

package/src/components/InvertableThemeProvider/InvertableThemeProviderProps.ts

@@ -1,20 +0,0 @@
-import { ThemeOptions } from '@mui/material'
-import { ReactNode } from 'react'
-
-interface InvertableThemeProviderProps {
-  dark?: boolean
-  scoped?: boolean
-  invert?: boolean
-  noResponsiveFonts?: boolean
-  options?: ThemeOptions
-  /**
-   * @deprecated use darkOptions instead
-   */
-  darkTheme?: ThemeOptions
-  darkOptions?: ThemeOptions
-  lightOptions?: ThemeOptions
-  resolve?: boolean
-  children?: ReactNode
-}
-
-export type { InvertableThemeProviderProps }

package/src/components/InvertableThemeProvider/index.ts

@@ -1,2 +0,0 @@
-export * from './InvertableThemeProvider'
-export * from './InvertableThemeProviderProps'

package/src/components/LinkEx/LinkEx.tsx

@@ -1,18 +0,0 @@
-import { Link, LinkProps } from '@mui/material'
-import React from 'react'
-import { Link as RouterLink, To } from 'react-router-dom'
-
-export interface LinkExProps extends LinkProps {
-  to?: To
-}
-
-export const LinkEx: React.FC<LinkExProps> = ({ to, ...props }) => {
-  if (to) {
-    return <Link rel="noopener noreferrer" component={RouterLink} to={to} {...props} />
-  } else {
-    return <Link {...props} />
-  }
-}
-
-/** @deprecated use LinkEx instead */
-export const LinkToEx = LinkEx

package/src/components/LinkEx/index.ts

@@ -1 +0,0 @@
-export * from './LinkEx'

package/src/components/MenuEx.tsx

@@ -1,13 +0,0 @@
-import { Menu, MenuProps, PaletteMode, useTheme } from '@mui/material'
-import merge from 'lodash/merge'
-
-export interface MenuExProps extends MenuProps {
-  colorize?: 'primary' | 'secondary'
-  mode?: PaletteMode
-}
-
-export const MenuEx: React.FC<MenuExProps> = ({ MenuListProps = {}, mode = 'light', colorize, ...props }) => {
-  const theme = useTheme()
-  const colorizeMenuListProps = colorize ? { sx: { backgroundColor: theme.palette[colorize][mode] } } : {}
-  return <Menu MenuListProps={merge(MenuListProps, colorizeMenuListProps)} {...props} />
-}

package/src/components/NumberStatus/NumberStatus.stories.tsx

@@ -1,81 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-
-import { NumberStatus } from './NumberStatus'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: NumberStatus,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'Components/NumberStatus',
-} as ComponentMeta<typeof NumberStatus>
-
-const NumberStatusTemplate: ComponentStory<typeof NumberStatus> = (args) => <NumberStatus {...args}></NumberStatus>
-
-const Default = NumberStatusTemplate.bind({})
-Default.args = {
-  title: 'Default',
-  value: 100,
-}
-
-const Default6Digits = NumberStatusTemplate.bind({})
-Default6Digits.args = {
-  title: 'Default-6',
-  value: 334455,
-}
-
-const Default10Digits = NumberStatusTemplate.bind({})
-Default10Digits.args = {
-  title: 'Default-10',
-  value: 334455667788,
-}
-
-const Small = NumberStatusTemplate.bind({})
-Small.args = {
-  size: 'small',
-  title: 'Small',
-  value: 100,
-}
-
-const Small6Digits = NumberStatusTemplate.bind({})
-Small6Digits.args = {
-  size: 'small',
-  title: 'Small-6',
-  value: 334455,
-}
-
-const Small10Digits = NumberStatusTemplate.bind({})
-Small10Digits.args = {
-  size: 'small',
-  title: 'Small-10',
-  value: 334455667788,
-}
-
-const Large = NumberStatusTemplate.bind({})
-Large.args = {
-  size: 'large',
-  title: 'Large',
-  value: 100,
-}
-
-const Large6Digits = NumberStatusTemplate.bind({})
-Large6Digits.args = {
-  size: 'large',
-  title: 'Large-6',
-  value: 334455,
-}
-
-const Large10Digits = NumberStatusTemplate.bind({})
-Large10Digits.args = {
-  size: 'large',
-  title: 'Large-10',
-  value: 334455667788,
-}
-
-export { Default, Default6Digits, Default10Digits, Large, Large6Digits, Large10Digits, Small, Small6Digits, Small10Digits }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/NumberStatus/NumberStatus.tsx

@@ -1,69 +0,0 @@
-import { useTheme } from '@mui/material'
-import numeral from 'numeral'
-import React from 'react'
-
-import { ButtonEx } from '../ButtonEx'
-import { FlexCol, FlexGrowRow } from '../FlexBox'
-import { NumberStatusProps } from './NumberStatusProps'
-
-const NumberStatus: React.FC<NumberStatusProps> = ({
-  error,
-  format = '0[.]0a',
-  color = 'primary',
-  title,
-  value,
-  size,
-  fontSize,
-  rounded = false,
-  autoWidth = false,
-  style,
-  ...props
-}) => {
-  const theme = useTheme()
-  const palette = color === 'inherit' ? undefined : theme.palette[color]
-
-  const bgColorTop = palette?.dark ?? theme.palette.background.paper
-  const bgColorBottom = palette?.main ?? theme.palette.background.default
-
-  const sizePixels = size === 'large' ? 96 : size === 'small' ? 64 : 80
-
-  const calcFontSize = fontSize ?? sizePixels * 0.2
-
-  return (
-    <ButtonEx
-      size={size}
-      padding={0}
-      style={{
-        borderRadius: rounded ? theme.shape.borderRadius : 0,
-        overflow: rounded ? 'hidden' : undefined,
-        ...style,
-      }}
-      {...props}
-    >
-      <FlexCol alignItems="stretch" height={sizePixels} width={autoWidth ? '100%' : sizePixels} busy={value === undefined && !error}>
-        <FlexGrowRow
-          bgcolor={bgColorTop}
-          color={theme.palette.getContrastText(bgColorTop)}
-          fontSize={calcFontSize}
-          fontFamily="Source Code Pro,monospace"
-          alignItems="center"
-          height={sizePixels * 0.75}
-        >
-          {numeral(value).format(format)}
-        </FlexGrowRow>
-        <FlexGrowRow
-          bgcolor={bgColorBottom}
-          borderTop="1px"
-          color={theme.palette.getContrastText(bgColorBottom)}
-          fontSize={sizePixels * 0.12}
-          fontFamily={theme.typography.fontFamily}
-          height={sizePixels * 0.25}
-        >
-          {title}
-        </FlexGrowRow>
-      </FlexCol>
-    </ButtonEx>
-  )
-}
-
-export { NumberStatus }

package/src/components/NumberStatus/NumberStatusProps.ts

@@ -1,15 +0,0 @@
-import { ButtonExProps } from '../ButtonEx'
-
-interface NumberStatusProps extends ButtonExProps {
-  autoWidth?: boolean
-  error?: Error
-  fontSize?: number
-  format?: string
-  shorten?: string | boolean
-  title?: string
-  value?: number | string
-  width?: number
-  rounded?: boolean
-}
-
-export type { NumberStatusProps }

package/src/components/NumberStatus/index.ts

@@ -1,2 +0,0 @@
-export * from './NumberStatus'
-export * from './NumberStatusProps'

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

@@ -1,38 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { PixelApi, XyPixel } from '@xylabs/pixel'
-import { useEffect } from 'react'
-
-import { PixelDebugger, PixelDebuggerToggle } from './index'
-import { PixelDebuggerProvider } from './PixelDebuggerProvider'
-
-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 (
-    <PixelDebuggerProvider>
-      <PixelDebuggerToggle {...args} />
-      <PixelDebugger />
-    </PixelDebuggerProvider>
-  )
-}
-
-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

@@ -1,75 +0,0 @@
-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

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

package/src/components/Pixel/PixelDebuggerToggle.tsx

@@ -1,18 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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

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

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