@xyo-network/react-shared 7.5.8 → 7.5.11

package/src/components/bigint/FixedPointPopover.tsx

@@ -1,27 +0,0 @@
-import {
-  FormHelperText, Popover, type PopoverProps, TextField,
-} from '@mui/material'
-import React from 'react'
-
-export interface FixedPointPopoverProps extends PopoverProps {
-  fixedPoint?: number
-  minFixedPoint?: number
-  onFixedPointChange?: (value: number) => void
-}
-
-export const FixedPointPopover: React.FC<FixedPointPopoverProps> = ({
-  fixedPoint, minFixedPoint: minimumPoint, onFixedPointChange, ...props
-}) => {
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const fixedPointInteger = Number.parseInt(event.target.value, 10)
-    if (Number.isNaN(fixedPointInteger)) return
-    onFixedPointChange?.(fixedPointInteger)
-  }
-
-  return (
-    <Popover slotProps={{ paper: { sx: { p: 2 } } }} {...props}>
-      <TextField slotProps={{ htmlInput: { min: minimumPoint } }} value={fixedPoint} onChange={handleChange} type="number" />
-      <FormHelperText>Set the Fixed Point</FormHelperText>
-    </Popover>
-  )
-}

package/src/components/bigint/Input.stories.tsx

@@ -1,79 +0,0 @@
-import { Button, Typography } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { FlexCol } from '@xylabs/react-flexbox'
-import React, { useState } from 'react'
-
-import { BigIntInput } from './Input.ts'
-
-export default { title: 'Input/Bigint/WithFormControl', component: BigIntInput.WithFormControl } as Meta<typeof BigIntInput.WithFormControl>
-
-const Template: StoryFn<typeof BigIntInput.WithFormControl> = ({ textFieldProps, ...args }) => {
-  const [bigIntString, setBigIntString] = useState<string>()
-  const [bigIntFormattedString, setBigIntFormattedString] = useState<string>()
-  const [resetValue, setResetValue] = useState(0)
-
-  const onChangeFixedPoint = (value?: bigint) => {
-    setBigIntString(value?.toString())
-  }
-
-  const onChangeFormatted = (value?: string) => {
-    setBigIntFormattedString(value)
-  }
-
-  return (
-    <FlexCol alignItems="start" gap={2}>
-      <Button variant="contained" onClick={() => setResetValue(resetValue + 1)}>Reset</Button>
-      <BigIntInput.WithFormControl
-        textFieldProps={{
-          ...textFieldProps, resetValue, onChangeFixedPoint, onChangeFormatted,
-        }}
-        {...args}
-      />
-      {bigIntString
-        ? (
-            <Typography>
-              BigInt:
-              {' '}
-              {bigIntString}
-            </Typography>
-          )
-        : null}
-      {bigIntFormattedString
-        ? (
-            <Typography>
-              BigIntFormattedString:
-              {' '}
-              {bigIntFormattedString}
-            </Typography>
-          )
-        : null}
-    </FlexCol>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithDefaultFixedPoint = Template.bind({})
-WithDefaultFixedPoint.args = {
-  textFieldProps: {
-    helperText: 'Enter Amount', hideAdornment: true, defaultRawValue: '1', defaultFixedPoint: 0,
-  },
-}
-
-const WithDefaultValue = Template.bind({})
-WithDefaultValue.args = {
-  textFieldProps: {
-    helperText: 'Enter Amount', hideAdornment: true, defaultRawValue: '1.4',
-  },
-}
-
-const WithHiddenAdornment = Template.bind({})
-WithHiddenAdornment.args = { textFieldProps: { hideAdornment: true } }
-
-const WithHelperText = Template.bind({})
-WithHelperText.args = { textFieldProps: { helperText: 'Enter Amount', hideAdornment: true } }
-
-export {
-  Default, WithDefaultFixedPoint, WithDefaultValue, WithHelperText, WithHiddenAdornment,
-}

package/src/components/bigint/Input.ts

@@ -1,6 +0,0 @@
-import { BigIntTextField, WithFormControl } from './TextField.tsx'
-
-export const BigIntInput = {
-  TextField: BigIntTextField,
-  WithFormControl,
-}

package/src/components/bigint/InputAdornment.tsx

@@ -1,44 +0,0 @@
-import type { InputAdornmentProps } from '@mui/material'
-import {
-  Avatar, IconButton, InputAdornment,
-} from '@mui/material'
-import React, { useRef, useState } from 'react'
-
-import { FixedPointPopover } from './FixedPointPopover.tsx'
-
-export interface FixedPointInputAdornmentProps extends InputAdornmentProps {
-  fixedPoint?: number
-  minFixedPoint?: number
-  onFixedPointChange?: (value: number) => void
-}
-
-export const FixedPointInputAdornment: React.FC<FixedPointInputAdornmentProps> = ({
-  fixedPoint, minFixedPoint, onFixedPointChange, ...props
-}) => {
-  const ref = useRef<HTMLButtonElement>(null)
-  const [open, setOpen] = useState(false)
-
-  return (
-    <InputAdornment {...props}>
-      <FixedPointPopover
-        anchorEl={ref.current}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-        fixedPoint={fixedPoint}
-        minFixedPoint={minFixedPoint}
-        onClose={() => setOpen(false)}
-        onFixedPointChange={onFixedPointChange}
-        open={open}
-      />
-      <IconButton size="small" ref={ref} onClick={() => setOpen(!open)}>
-        <Avatar sx={{
-          fontSize: '.75rem',
-          height: '20px',
-          width: '20px',
-        }}
-        >
-          {fixedPoint}
-        </Avatar>
-      </IconButton>
-    </InputAdornment>
-  )
-}

package/src/components/bigint/TextField.tsx

@@ -1,128 +0,0 @@
-import type {
-  FormControlProps,
-  TextFieldProps,
-} from '@mui/material'
-import {
-  FormControl, FormHelperText, TextField,
-} from '@mui/material'
-import { isDefined, toFixedPoint } from '@xylabs/sdk-js'
-import type { FocusEventHandler } from 'react'
-import React, {
-  useEffect, useMemo, useState,
-} from 'react'
-
-import { formatBigIntInput } from './helpers/index.ts'
-import { FixedPointInputAdornment } from './InputAdornment.tsx'
-
-export type BigIntTextFieldProps = TextFieldProps & {
-  defaultFixedPoint?: number
-  defaultRawValue?: string
-  hideAdornment?: boolean
-  onChangeFixedPoint?: (value?: bigint) => void
-  onChangeFormatted?: (value?: string) => void
-  resetValue?: number
-}
-
-export const BigIntTextField: React.FC<BigIntTextFieldProps> = ({
-  defaultFixedPoint = 18, defaultRawValue, helperText, hideAdornment, onChangeFixedPoint, onChangeFormatted, onChange, resetValue, ...props
-}) => {
-  const [rawValue, setRawValue] = useState<string>('')
-  const [fixedPoint, setFixedPoint] = useState(defaultFixedPoint)
-  const [error, setError] = useState<Error>()
-
-  const [previousResetValue, setPreviousResetValue] = useState(resetValue)
-  if (resetValue !== previousResetValue) {
-    setPreviousResetValue(resetValue)
-    setRawValue('')
-  }
-
-  const [previousDefaultRawValue, setPreviousDefaultRawValue] = useState(defaultRawValue)
-  if (defaultRawValue !== previousDefaultRawValue) {
-    setPreviousDefaultRawValue(defaultRawValue)
-    if (isDefined(defaultRawValue)) {
-      const formattedValue = formatBigIntInput(defaultRawValue)
-      if (formattedValue) setRawValue(formattedValue)
-    }
-  }
-
-  const handleChange: FocusEventHandler<HTMLTextAreaElement> = (event) => {
-    // run standard callback with raw event
-    onChange?.(event)
-
-    const formattedValue = formatBigIntInput(event.target.value)
-    if (isDefined(formattedValue)) {
-      // if value was formatted, update the state and run the formatted change callback
-      setRawValue(formattedValue)
-      onChangeFormatted?.(formattedValue)
-    }
-  }
-
-  const onFixedPointChange = (fixedPoint: number) => setFixedPoint(fixedPoint)
-
-  useEffect(() => {
-    // on value or point changes, run the bigInt callback
-    const bigIntValue = () => {
-      if (rawValue) {
-        const fixedValue = toFixedPoint(rawValue, fixedPoint)
-        setError(undefined)
-        try {
-          return fixedValue
-        } catch (e) {
-          console.error(e)
-          setError(e as Error)
-          return
-        }
-      } else {
-        return
-      }
-    }
-    onChangeFixedPoint?.(bigIntValue())
-  }, [fixedPoint, onChangeFixedPoint, rawValue])
-
-  // prevent the fixed point from being less than the number of decimal places
-  const minFixedPoint = rawValue.split('.')[1]?.length
-
-  const resolvedHelperText = useMemo(() => {
-    if (error) return 'Cannot convert to BigInt'
-    return helperText ?? 'Enter a number'
-  }, [helperText, error])
-
-  return (
-    <>
-      <TextField
-        onChange={handleChange}
-        type="string"
-        error={Boolean(error)}
-        slotProps={{
-          htmlInput: { pattern: '[0-9]*[.]?[0-9]*' },
-          input: {
-            startAdornment: (hideAdornment
-              ? null
-              : (
-                  <FixedPointInputAdornment
-                    position="start"
-                    fixedPoint={fixedPoint}
-                    minFixedPoint={minFixedPoint}
-                    onFixedPointChange={onFixedPointChange}
-                  />
-                )
-            ),
-          },
-        }}
-        value={rawValue}
-        {...props}
-      />
-      <FormHelperText>{resolvedHelperText}</FormHelperText>
-    </>
-  )
-}
-
-export interface InputWithFormControlProps extends FormControlProps {
-  textFieldProps?: BigIntTextFieldProps
-}
-
-export const WithFormControl: React.FC<InputWithFormControlProps> = ({ textFieldProps, ...props }) => (
-  <FormControl {...props}>
-    <BigIntTextField {...textFieldProps} />
-  </FormControl>
-)

package/src/components/bigint/helpers/formatBigIntInput.ts

@@ -1,11 +0,0 @@
-/**
- * Format a raw input string (i.e. Change event from input type=text)
- * Designed to filter out non-digits and extra decimals
- **/
-export const formatBigIntInput = (rawValue: string) => {
-  // remove all alpha characters but allow decimals
-  const filteredValue = rawValue.replaceAll(/[^\d.]/g, '')
-  // only allow one decimal point
-  if (filteredValue.split('.').length > 2) return
-  return filteredValue
-}

package/src/components/bigint/helpers/index.ts

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

package/src/components/bigint/index.ts

@@ -1,5 +0,0 @@
-export * from './FixedPointPopover.tsx'
-export * from './helpers/index.ts'
-export * from './Input.ts'
-export * from './InputAdornment.tsx'
-export * from './TextField.tsx'

package/src/components/index.ts

@@ -1,19 +0,0 @@
-export * from './Ampersand.tsx'
-export * from './BasicHero/index.ts'
-export * from './bigint/index.ts'
-export * from './Ellipsize.tsx'
-export * from './LabeledTextFieldWrapper.tsx'
-export * from './ListItemButtonEx.tsx'
-export * from './LoadResult.tsx'
-export * from './NotFound.tsx'
-export * from './Pipe.tsx'
-export * from './pluginValidation/index.ts'
-export * from './ScrollTableOnSm.tsx'
-export * from './SectionSpacingRow/index.ts'
-export * from './TableCell/index.ts'
-export * from './ThemeTokenAvatar/index.ts'
-export * from './ThemeTokenAvatarGroup/index.ts'
-export * from './TokenBar/index.ts'
-export * from './TokenData/index.ts'
-export * from './TokenSummary/index.ts'
-export * from './TypographyEx.tsx'

package/src/components/pluginValidation/DataMissing.tsx

@@ -1,16 +0,0 @@
-import type { AlertProps } from '@mui/material'
-import { Alert, AlertTitle } from '@mui/material'
-import React from 'react'
-
-export interface PayloadDataMissingProps extends AlertProps {
-  alertBody?: string
-}
-
-export const PayloadDataMissing: React.FC<PayloadDataMissingProps> = ({ alertBody, ...props }) => {
-  return (
-    <Alert severity="warning" {...props}>
-      <AlertTitle>Missing Data</AlertTitle>
-      {alertBody ?? 'Payload is missing required data to render correctly'}
-    </Alert>
-  )
-}

package/src/components/pluginValidation/index.ts

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

package/src/contexts/ListMode/Context.ts

@@ -1,5 +0,0 @@
-import { createContextEx } from '@xylabs/react-shared'
-
-import type { ListModeContextState } from './State.ts'
-
-export const ListModeContext = createContextEx<ListModeContextState>()

package/src/contexts/ListMode/Provider.tsx

@@ -1,29 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import React, { useMemo, useState } from 'react'
-
-import type { ListMode } from '../../models/index.ts'
-import { ListModeContext } from './Context.ts'
-import type { ListModeContextState } from './State.ts'
-
-export interface ListModeProviderProps {
-  defaultListMode?: ListMode
-}
-
-export const ListModeProvider: React.FC<PropsWithChildren<ListModeProviderProps>> = ({ children, defaultListMode }) => {
-  const [listMode, setListMode] = useState(defaultListMode ?? 'default')
-
-  const value: ListModeContextState = useMemo(() => ({
-    listMode,
-    provided: true,
-    setListMode,
-  }), [listMode,
-    setListMode])
-
-  return (
-    <ListModeContext
-      value={value}
-    >
-      {children}
-    </ListModeContext>
-  )
-}

package/src/contexts/ListMode/State.ts

@@ -1,9 +0,0 @@
-import type { ContextExState } from '@xylabs/react-shared'
-import type { Dispatch } from 'react'
-
-import type { ListMode } from '../../models/index.ts'
-
-export type ListModeContextState = ContextExState<{
-  listMode: ListMode
-  setListMode?: Dispatch<ListMode>
-}>

package/src/contexts/ListMode/index.ts

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

package/src/contexts/ListMode/use.ts

@@ -1,7 +0,0 @@
-import { useContextEx } from '@xylabs/react-shared'
-
-import { ListModeContext } from './Context.ts'
-
-export const useListMode = (required = false) => {
-  return useContextEx(ListModeContext, 'ListMode', required)
-}

package/src/contexts/diviner/Context.ts

@@ -1,4 +0,0 @@
-import type { EmptyObject } from '@xylabs/react-shared'
-import { createContextEx } from '@xylabs/react-shared'
-
-export const ResolvedDivinerContext = <T extends EmptyObject>() => createContextEx<T>()

package/src/contexts/diviner/Provider.tsx

@@ -1,45 +0,0 @@
-import { useResetState } from '@xylabs/react-hooks'
-import type { ContextExProviderProps } from '@xylabs/react-shared'
-import type { Context, PropsWithChildren } from 'react'
-import React, { useMemo } from 'react'
-
-import type { ResolvedDivinerState } from './State.ts'
-
-export interface DivinerProviderProps<D> extends ContextExProviderProps, PropsWithChildren {
-  context: Context<ResolvedDivinerState<D>>
-  diviner?: D
-}
-
-/** Exposes a resolved diviner */
-export const ResolvedDivinerProvider = <D,>({
-  diviner: divinerProp, required = false, children, context: Context,
-}: DivinerProviderProps<D>) => {
-  const [diviner, setDiviner] = useResetState<D | undefined>(divinerProp)
-
-  const value: ResolvedDivinerState<D> = useMemo(() => {
-    const resolveDiviner = () => {
-      if (divinerProp) {
-        return diviner === divinerProp ? diviner : undefined
-      } else {
-        return diviner
-      }
-    }
-    return {
-      diviner: resolveDiviner(),
-      provided: true,
-      setDiviner,
-    }
-  }, [setDiviner, divinerProp, diviner])
-
-  return (
-    <Context
-      value={value}
-    >
-      {diviner
-        ? children
-        : required
-          ? null
-          : children}
-    </Context>
-  )
-}

package/src/contexts/diviner/State.ts

@@ -1,7 +0,0 @@
-import type { ContextExState } from '@xylabs/react-shared'
-import type { Dispatch, SetStateAction } from 'react'
-
-export type ResolvedDivinerState<T> = ContextExState<{
-  diviner?: T
-  setDiviner?: Dispatch<SetStateAction<T | undefined>>
-}>

package/src/contexts/diviner/index.ts

@@ -1,3 +0,0 @@
-export * from './Context.ts'
-export * from './Provider.tsx'
-export * from './State.ts'

package/src/contexts/index.ts

@@ -1,2 +0,0 @@
-export * from './diviner/index.ts'
-export * from './ListMode/index.ts'

package/src/global.d.ts

@@ -1 +0,0 @@
-import '@mui/material/themeCssVarsAugmentation'

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

@@ -1,66 +0,0 @@
-import { Divider, Typography } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { useGradientStyles } from './GradientStyles.tsx'
-
-const GradientTextExample: React.FC<FlexBoxProps> = (props) => {
-  const styles = useGradientStyles()
-  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 style={styles.heading}>adipisicing elit.</span>
-      </Typography>
-      <Typography variant="subtitle2" gutterBottom paddingTop={3}>
-        Body Text
-      </Typography>
-      <Divider sx={{ marginY: '8px' }} />
-      <Typography variant="h5" gutterBottom style={styles.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 style={styles.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 Meta<typeof GradientTextExample>
-
-const Template: StoryFn<typeof GradientTextExample> = args => (
-  <BrowserRouter>
-    <GradientTextExample {...args}></GradientTextExample>
-  </BrowserRouter>
-)
-
-export const Default = Template.bind({})
-Default.args = {}
-
-export default StorybookEntry

package/src/hooks/GradientStyles/GradientStyles.tsx

@@ -1,54 +0,0 @@
-import { useIsDark } from '@xylabs/react-theme'
-import type { 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 dark = useIsDark()
-  const styles = dark ? colorfulGradientDarkMode() : colorfulGradientLightMode()
-  return styles
-}

package/src/hooks/GradientStyles/index.ts

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

package/src/hooks/index.ts

@@ -1,5 +0,0 @@
-export * from './GradientStyles/index.ts'
-export * from './payload/index.ts'
-export * from './useDataState.ts'
-export * from './useMediaQuery.ts'
-export * from './useShareForwardRef.ts'

package/src/hooks/payload/index.ts

@@ -1,4 +0,0 @@
-export * from './types/index.ts'
-export * from './useBoundWitnessValidate.tsx'
-export * from './usePayloadHash.tsx'
-export * from './usePayloadValidate.tsx'

package/src/hooks/payload/types/ValidatedResponse.ts

@@ -1,3 +0,0 @@
-import type { Payload } from '@xyo-network/payload-model'
-
-export type ValidatedResponse<T extends Payload = Payload> = { errors?: Error[]; payload?: T }

package/src/hooks/payload/types/index.ts

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

package/src/hooks/payload/useBoundWitnessValidate.tsx

@@ -1,29 +0,0 @@
-import { usePromise } from '@xylabs/react-promise'
-import { assertEx } from '@xylabs/sdk-js'
-import type { BoundWitness } from '@xyo-network/boundwitness-model'
-import { BoundWitnessValidator } from '@xyo-network/boundwitness-validator'
-import { isAnyPayload } from '@xyo-network/payload-model'
-
-import type { ValidatedResponse } from './types/index.ts'
-
-export const useValidateBoundWitness = (input?: string): ValidatedResponse<BoundWitness> => {
-  const [output, validationError] = usePromise(async () => {
-    if (!input) return
-
-    const object = JSON.parse(input)
-    const validPayload = assertEx(isAnyPayload(object) ? object : null, () => 'Invalid payload')
-
-    const errors = await new BoundWitnessValidator(validPayload as BoundWitness).validate()
-    return {
-      payload: validPayload as BoundWitness,
-      errors,
-    }
-  }, [input])
-
-  const { payload, errors } = output ?? {}
-
-  return {
-    payload,
-    errors: [validationError, ...errors ?? []].filter<Error>(error => !!error),
-  }
-}