@xyo-network/react-shared 2.26.37 → 2.26.38

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -0,0 +1,100 @@
+import { TableCell, TableCellProps } from '@mui/material'
+import { LinkEx } from '@xylabs/react-link'
+import { useEffect, useRef, useState } from 'react'
+import { To } from 'react-router-dom'
+
+import { getActualPaddingX } from '../../lib'
+import { findParent } from './findParent'
+import { getRemainingRowWidth } from './getRemainingRowWidth'
+import { getSmallestParentWidth } from './getSmallestParentWidth'
+
+export interface EllipsisTableCellProps extends TableCellProps {
+  value?: string
+  to?: To | undefined
+  href?: string | undefined
+}
+
+export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ children, value, to, href, ...props }) => {
+  const [calcCellWidth, setCalcCellWidth] = useState<number>(0)
+  const hashDivRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const currentElement = hashDivRef.current?.parentElement
+    const cell = findParent('td', currentElement)
+    const row = findParent('tr', currentElement)
+
+    const checkWidth = (cell: HTMLElement) => {
+      const smallestParentWidth = getSmallestParentWidth(cell)
+      if (smallestParentWidth && row) {
+        const remainingWidth = getRemainingRowWidth(row)
+        const actualPaddingX = getActualPaddingX(cell)
+        const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX
+        cell.style.width = `${remainderWidth}`
+        setCalcCellWidth(remainderWidth)
+      }
+    }
+
+    const onResize = () => {
+      if (cell) {
+        checkWidth(cell)
+      }
+    }
+
+    if (cell) {
+      checkWidth(cell)
+      window.addEventListener('resize', onResize)
+      row?.addEventListener('resize', onResize)
+    }
+    return () => {
+      window.removeEventListener('resize', onResize)
+      row?.removeEventListener('resize', onResize)
+    }
+  }, [hashDivRef])
+
+  return (
+    <TableCell {...props}>
+      <div ref={hashDivRef}>
+        {children ? (
+          <span
+            style={{
+              display: 'block',
+              maxWidth: calcCellWidth,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {children}
+          </span>
+        ) : href || to ? (
+          <LinkEx
+            style={{
+              display: 'block',
+              maxWidth: calcCellWidth,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+            to={to}
+            href={href}
+            target={href ? '_blank' : undefined}
+          >
+            {value}
+          </LinkEx>
+        ) : (
+          <span
+            style={{
+              display: 'block',
+              maxWidth: calcCellWidth,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {value}
+          </span>
+        )}
+      </div>
+    </TableCell>
+  )
+}

package/src/components/TableCell/HashTableCell.tsx

@@ -0,0 +1,13 @@
+import { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell'
+
+export interface HashTableCellProps extends EllipsisTableCellProps {
+  archive?: string
+  dataType?: 'block' | 'payload'
+  exploreDomain?: string
+  network?: string
+}
+
+export const HashTableCell: React.FC<HashTableCellProps> = ({ value, archive, dataType, network, exploreDomain, ...props }) => {
+  const explorePath = `/archive/${archive}/${dataType}/hash/${value}?network=${network ?? 'main'}`
+  return <EllipsisTableCell value={value} href={exploreDomain ? `${exploreDomain}${explorePath}}` : undefined} to={exploreDomain ? undefined : explorePath} {...props} />
+}

package/src/components/TableCell/findParent.ts

@@ -0,0 +1,10 @@
+export const findParent = (tagName: string, element: HTMLElement | null = null) => {
+  let currentElement = element
+  while (currentElement) {
+    if (currentElement.tagName.toLowerCase() === tagName.toLowerCase()) {
+      return currentElement
+    } else {
+      currentElement = currentElement.parentElement
+    }
+  }
+}

package/src/components/TableCell/getRemainingRowWidth.ts

@@ -0,0 +1,14 @@
+/** @description This is the width of all the cells (except the one passed) in the row combined and the spacing of the main cell */
+export const getRemainingRowWidth = (row: HTMLElement, forCell = 0) => {
+  let width = 0
+  for (let i = 0; i < (row?.childElementCount ?? 0); i++) {
+    const item = row?.children.item(i)
+    if (item) {
+      if (i !== forCell) {
+        width += item?.clientWidth ?? 0
+      }
+    }
+  }
+
+  return width
+}

package/src/components/TableCell/getSmallestParentWidth.ts

@@ -0,0 +1,13 @@
+export const getSmallestParentWidth = (element: HTMLElement, maxDepth = 4) => {
+  let currentElement: HTMLElement | null = element?.parentElement
+  let width = currentElement?.clientWidth ?? screen.width
+  let maxDepthCounter = maxDepth
+  while (currentElement && maxDepthCounter > 0) {
+    if (width > currentElement.clientWidth) {
+      width = currentElement.clientWidth
+    }
+    currentElement = currentElement.parentElement
+    maxDepthCounter--
+  }
+  return width
+}

package/src/components/TableCell/index.ts

@@ -0,0 +1,3 @@
+export * from './AddressTableCell'
+export * from './EllipsisTableCell'
+export * from './HashTableCell'

package/src/components/TypographyEx.tsx

@@ -0,0 +1,12 @@
+import { Typography, TypographyProps } from '@mui/material'
+
+import { useGradientStyles } from '../hooks'
+
+export interface TypographyExProps extends TypographyProps {
+  gradient?: 'text'
+}
+
+export const TypographyEx: React.FC<TypographyExProps> = ({ gradient, ...props }) => {
+  const { classes } = useGradientStyles()
+  return <Typography className={gradient === 'text' ? classes().heading : undefined} {...props} />
+}

package/src/components/index.ts

@@ -0,0 +1,10 @@
+export * from './Ampersand'
+export * from './BasicHero'
+export * from './ErrorBoundry'
+export * from './JsonRouteWrapper'
+export * from './ListItemButtonEx'
+export * from './Pipe'
+export * from './ScrollTableOnSm'
+export * from './SectionSpacingRow'
+export * from './TableCell'
+export * from './TypographyEx'

package/src/contexts/Pixel/Context.ts

@@ -0,0 +1,4 @@
+import { createContextEx } from '../contextEx'
+import { PixelContextState } from './State'
+
+export const PixelContext = createContextEx<PixelContextState>()

package/src/contexts/Pixel/Provider.tsx

@@ -0,0 +1,24 @@
+import { XyPixel } from '@xylabs/pixel'
+import { WithChildren } from '@xylabs/react-shared'
+
+import { PixelContext } from './Context'
+
+export interface PixelProviderProps {
+  id: string
+}
+
+export const PixelProvider: React.FC<WithChildren<PixelProviderProps>> = (props) => {
+  const { children, id } = props
+  XyPixel.init(id)
+
+  return (
+    <PixelContext.Provider
+      value={{
+        pixel: XyPixel.instance,
+        provided: true,
+      }}
+    >
+      {children}
+    </PixelContext.Provider>
+  )
+}

package/src/contexts/Pixel/State.ts

@@ -0,0 +1,7 @@
+import { XyPixel } from '@xylabs/pixel'
+
+import { ContextExState } from '../contextEx'
+
+export interface PixelContextState extends ContextExState {
+  pixel?: XyPixel
+}

package/src/contexts/Pixel/index.ts

@@ -0,0 +1,4 @@
+export * from './Context'
+export * from './Provider'
+export * from './State'
+export * from './use'

package/src/contexts/Pixel/use.ts

@@ -0,0 +1,7 @@
+import { useContextEx } from '../contextEx'
+import { PixelContext } from './Context'
+
+export const usePixel = (required = true) => {
+  const { pixel } = useContextEx(PixelContext, 'Pixel', required)
+  return pixel
+}

package/src/contexts/contextEx/State.ts

@@ -0,0 +1,3 @@
+export interface ContextExState {
+  provided: boolean
+}

package/src/contexts/contextEx/create.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+import { ContextExState } from './State'
+
+export const createContextEx = <T>() => createContext<T & ContextExState>({ provided: false } as T & ContextExState)

package/src/contexts/contextEx/index.ts

@@ -0,0 +1,3 @@
+export * from './create'
+export * from './State'
+export * from './use'

package/src/contexts/contextEx/use.ts

@@ -0,0 +1,11 @@
+import { Context, useContext } from 'react'
+
+import { ContextExState } from './State'
+
+export const useContextEx = <T extends ContextExState>(context: Context<T>, contextName: string, required = true) => {
+  const { provided, ...props } = useContext(context)
+  if (!provided && required) {
+    throw Error(`use${contextName} can not be used outside of a ${contextName}Context when required=true`)
+  }
+  return props
+}

package/src/contexts/index.ts

@@ -0,0 +1,2 @@
+export * from './contextEx'
+export * from './Pixel'

package/src/hooks/GradientStyles/GradientStyle.stories.tsx

@@ -0,0 +1,68 @@
+import { Divider, Typography } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { BrowserRouter } from 'react-router-dom'
+
+import { useGradientStyles } from './GradientStyles'
+
+const GradientTextExample: React.FC<FlexBoxProps> = (props) => {
+  const { classes } = useGradientStyles()
+  const classNames = classes()
+  return (
+    <FlexCol alignItems="stretch" {...props}>
+      <Typography variant="h4" gutterBottom>
+        XYO Network Gradient Text Options
+      </Typography>
+      <Typography variant="subtitle2" gutterBottom paddingTop={3}>
+        Highlight
+      </Typography>
+      <Divider sx={{ marginY: '8px' }} />
+      <Typography variant="h5" gutterBottom>
+        Lorem ipsum dolor sit amet consectetur, <span className={classNames.heading}>adipisicing elit.</span>
+      </Typography>
+      <Typography variant="subtitle2" gutterBottom paddingTop={3}>
+        Body Text
+      </Typography>
+      <Divider sx={{ marginY: '8px' }} />
+      <Typography variant="h5" gutterBottom className={classNames.heading}>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint perspiciatis aliquam consequuntur nisi alias impedit ducimus ipsa voluptas, suscipit ea vel dicta quasi hic,
+        deserunt tempore, natus optio veritatis dolor?
+      </Typography>
+      <Typography variant="subtitle2" gutterBottom paddingTop={3}>
+        Caption
+      </Typography>
+      <Divider sx={{ marginY: '8px' }} />
+      <Typography variant="caption" gutterBottom className={classNames.heading}>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint perspiciatis aliquam consequuntur nisi alias impedit ducimus ipsa voluptas, suscipit ea vel dicta quasi hic,
+        deserunt tempore, natus optio veritatis dolor?
+      </Typography>
+      <Typography variant="subtitle2" gutterBottom paddingTop={3}>
+        Card Border
+      </Typography>
+      <Divider sx={{ marginY: '8px' }} />
+    </FlexCol>
+  )
+}
+
+const StorybookEntry = {
+  argTypes: {},
+  component: GradientTextExample,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/GradientText',
+} as ComponentMeta<typeof GradientTextExample>
+
+const Template: ComponentStory<typeof GradientTextExample> = (args) => (
+  <BrowserRouter>
+    <GradientTextExample {...args}></GradientTextExample>
+  </BrowserRouter>
+)
+
+export const Default = Template.bind({})
+Default.args = {}
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/hooks/GradientStyles/GradientStyles.tsx

@@ -0,0 +1,60 @@
+import { useTheme } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { CSSProperties } from 'react'
+
+export interface GradientStyles {
+  background: CSSProperties
+  border: CSSProperties
+  heading: CSSProperties
+}
+
+export const colorfulGradientLightMode = () => {
+  return {
+    background: {
+      backgroundImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
+    },
+    border: {
+      borderImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
+      borderImageSlice: 1,
+      borderImageSource: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
+      borderRadius: 0,
+      borderStyle: 'solid',
+      borderWidth: '2px',
+    },
+    heading: {
+      WebkitBackgroundClip: 'text',
+      WebkitTextFillColor: 'transparent',
+      background: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
+      display: 'inline-block',
+    },
+  }
+}
+
+export const colorfulGradientDarkMode = () => {
+  return {
+    background: {
+      backgroundImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
+    },
+    border: {
+      borderImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
+      borderImageSlice: 1,
+      borderImageSource: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
+      borderRadius: 0,
+      borderStyle: 'solid',
+      borderWidth: '2px',
+    },
+    heading: {
+      WebkitBackgroundClip: 'text',
+      WebkitTextFillColor: 'transparent',
+      background: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
+      display: 'inline-block',
+    },
+  }
+}
+
+export const useGradientStyles = () => {
+  const theme = useTheme()
+  const styles = theme.palette.mode === 'dark' ? colorfulGradientDarkMode() : colorfulGradientLightMode()
+  const classes = makeStyles(styles)
+  return { classes, styles }
+}

package/src/hooks/GradientStyles/index.ts

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

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './GradientStyles'
+export * from './useIsMobile'
+export * from './useMediaQuery'

package/src/hooks/useIsMobile.ts

@@ -0,0 +1,8 @@
+import { useTheme } from '@mui/material'
+
+import { useMediaQuery } from './useMediaQuery'
+
+export const useIsMobile = () => {
+  const theme = useTheme()
+  return useMediaQuery(theme.breakpoints.down('md'))
+}

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,7 @@
+// eslint-disable-next-line import/no-deprecated
+import { useMediaQuery } from '@mui/material'
+
+// eslint-disable-next-line import/no-deprecated
+export { useMediaQuery }
+
+/* This file only exists to deal with the false positve lint error */

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './components'
+export * from './contexts'
+export * from './hooks'
+export * from './lib'
+export * from './SizeProp'

package/src/lib/assertDefinedEx.ts

@@ -0,0 +1,4 @@
+export const assertDefinedEx = <T>(expr?: T | null, message?: string): T => {
+  if (expr !== null && expr !== undefined) return expr
+  throw Error(message)
+}

package/src/lib/getActualPaddingX.ts

@@ -0,0 +1,61 @@
+export const parseMeausureString = (measure?: string, absolute?: number) => {
+  if (measure !== undefined && measure !== null && measure.length > 0) {
+    if (measure.endsWith('px')) {
+      return parseFloat(measure.substring(0, measure.length - 2))
+    } else if (measure.endsWith('%')) {
+      if (absolute !== undefined) {
+        return (parseFloat(measure.substring(0, measure.length - 1)) / 100) * absolute
+      }
+      throw Error('Error Parsing Measure [missing absolute]')
+    } else if (measure.endsWith('vw')) {
+      return (parseFloat(measure.substring(0, measure.length - 2)) / 100) * window.innerWidth
+    } else if (measure.endsWith('vh')) {
+      return (parseFloat(measure.substring(0, measure.length - 2)) / 100) * window.innerHeight
+    }
+    throw Error(`Error Parsing Measure [${measure}]`)
+  }
+}
+
+export const parsePadding = (padding: string) => {
+  const parts = padding.split(' ')
+  switch (parts.length) {
+    case 4: {
+      return {
+        bottom: parts[2],
+        left: parts[3],
+        right: parts[1],
+        top: parts[0],
+      }
+    }
+    case 3: {
+      return {
+        bottom: parts[2],
+        right: parts[1],
+        top: parts[0],
+      }
+    }
+    case 2: {
+      return {
+        bottom: parts[0],
+        left: parts[1],
+        right: parts[1],
+        top: parts[0],
+      }
+    }
+    case 1: {
+      return {
+        bottom: parts[0],
+        left: parts[0],
+        right: parts[0],
+        top: parts[0],
+      }
+    }
+  }
+}
+
+export const getActualPaddingX = (element: HTMLElement) => {
+  const padding = parsePadding(window.getComputedStyle(element, null).getPropertyValue('padding'))
+  const paddingLeft = parseMeausureString(window.getComputedStyle(element, null).getPropertyValue('padding-left') ?? padding?.left, element.clientWidth) ?? 0
+  const paddingRight = parseMeausureString(window.getComputedStyle(element, null).getPropertyValue('padding-right') ?? padding?.right, element.clientWidth) ?? 0
+  return paddingLeft + paddingRight
+}

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from './assertDefinedEx'
+export * from './getActualPaddingX'
+export * from './networkComponents'

package/src/lib/networkComponents.tsx

@@ -0,0 +1,29 @@
+import BubbleChartRoundedIcon from '@mui/icons-material/BubbleChartRounded'
+import CloudRoundedIcon from '@mui/icons-material/CloudRounded'
+import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded'
+import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded'
+import { SvgIconProps } from '@mui/material'
+import { ReactElement } from 'react'
+
+export type NetworkComponentSlug = 'sentinel' | 'bridge' | 'archivist' | 'diviner'
+
+export interface NetworkComponentDetails {
+  name: string
+  slug: NetworkComponentSlug
+  icon: (props?: SvgIconProps) => ReactElement
+}
+
+export const networkComponents: NetworkComponentDetails[] = [
+  { icon: (props) => <BubbleChartRoundedIcon {...props} />, name: 'Sentinel', slug: 'sentinel' },
+  { icon: (props) => <CloudRoundedIcon {...props} />, name: 'Bridge', slug: 'bridge' },
+  { icon: (props) => <GridViewRoundedIcon {...props} />, name: 'Archivist', slug: 'archivist' },
+  { icon: (props) => <VisibilityRoundedIcon {...props} />, name: 'Diviner', slug: 'diviner' },
+]
+
+export const findNetworkComponentIndex = (slug: string) => {
+  return networkComponents.findIndex((info) => info.slug === slug)
+}
+
+export const findNetworkComponent = (slug: string) => {
+  return networkComponents.find((info) => info.slug === slug)
+}

package/src/types/images.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.svg'
+declare module '*.gif'
+declare module '*.webp'