@xyo-network/react-shared 3.0.2 → 3.0.4

package/src/components/BasicHero/BasicHero.stories.tsx

@@ -7,11 +7,7 @@ import BackgroundImage from './default-desktop.svg'
 const StorybookEntry = {
   argTypes: {},
   component: BasicHero,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/BasicHero',
 } as Meta<typeof BasicHero>
 

package/src/components/BasicHero/BasicHero.tsx

@@ -1,4 +1,6 @@
-import { Container, Grid, Typography } from '@mui/material'
+import {
+  Container, Grid, Typography,
+} from '@mui/material'
 import { ButtonEx } from '@xylabs/react-button'
 import type { FlexBoxProps } from '@xylabs/react-flexbox'
 import { FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'
@@ -43,11 +45,16 @@ interface ButtonSectionProps {
   href?: string
   to?: string
 }
-const SubLinkSection: React.FC<SubLinkSectionProps> = ({ backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2 }) => {
+const SubLinkSection: React.FC<SubLinkSectionProps> = ({
+  backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2,
+}) => {
   return (
     <FlexGrowRow
       width="100%"
-      sx={{ flexDirection: { md: 'row', xs: 'column' }, justifyContent: { md: backgroundImageAlignment ? 'flex-start' : 'center', xs: 'center' } }}
+      sx={{
+        flexDirection: { md: 'row', xs: 'column' },
+        justifyContent: { md: backgroundImageAlignment ? 'flex-start' : 'center', xs: 'center' },
+      }}
     >
       {subLinkIcon
         ? (
@@ -68,7 +75,9 @@ const SubLinkSection: React.FC<SubLinkSectionProps> = ({ backgroundImageAlignmen
   )
 }
 
-const ButtonSection: React.FC<ButtonSectionProps> = ({ href, to, buttonText }) => {
+const ButtonSection: React.FC<ButtonSectionProps> = ({
+  href, to, buttonText,
+}) => {
   const isMobile = useIsSmall()
   return (
     <ButtonEx
@@ -118,7 +127,9 @@ export const BasicHero: React.FC<BasicHeroProps> = ({
     <FlexGrowCol
       sx={{
         backgroundImage: `url(${backgroundImage})`,
-        backgroundPosition: { lg: 'bottom', md: 'center left', xs: 'top left' },
+        backgroundPosition: {
+          lg: 'bottom', md: 'center left', xs: 'top left',
+        },
         minHeight: {
           md: '500px',
           sm: '400px',
@@ -165,7 +176,11 @@ export const BasicHero: React.FC<BasicHeroProps> = ({
               <Typography variant="body1" component="h2" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>
                 {desc}
               </Typography>
-              <FlexGrowRow sx={{ flexDirection: { lg: 'row', xs: 'column' } }} width="100%" marginTop={1}>
+              <FlexGrowRow
+                sx={{ flexDirection: { lg: 'row', xs: 'column' } }}
+                width="100%"
+                marginTop={1}
+              >
                 <ButtonSection href={button1Href} to={button1To} buttonText={button1Text} />
                 <ButtonSection href={button2Href} to={button2To} buttonText={button2Text} />
               </FlexGrowRow>

package/src/components/Ellipsize.tsx

@@ -1,7 +1,13 @@
-import type { BoxProps, TypographyProps, TypographyTypeMap } from '@mui/material'
-import { Box, styled, Typography } from '@mui/material'
+import type {
+  BoxProps, TypographyProps, TypographyTypeMap,
+} from '@mui/material'
+import {
+  Box, styled, Typography,
+} from '@mui/material'
 import type { WithChildren } from '@xylabs/react-shared'
-import React, { forwardRef, useCallback, useState } from 'react'
+import React, {
+  forwardRef, useCallback, useState,
+} from 'react'
 
 import { useShareForwardedRef } from '../hooks/index.ts'
 
@@ -38,15 +44,15 @@ const EllipsizeRoot = styled(Box, {
 const EllipsizeInnerWrap = styled(Box, {
   name: ComponentName,
   slot: 'innerWrap',
-})(() => ({
-  position: 'relative',
-}))
+})(() => ({ position: 'relative' }))
 
 const EllipsizeContentWrap = styled(Typography, {
   name: ComponentName,
   shouldForwardProp: prop => prop !== 'ellipsisPosition',
   slot: 'contentWrap',
-})<TypographyWithComponentProps>(({ theme, ellipsisPosition, fontFamily }) => {
+})<TypographyWithComponentProps>(({
+  theme, ellipsisPosition, fontFamily,
+}) => {
   return theme.unstable_sx({
     fontFamily: fontFamily ?? 'monospace',
     left: 0,
@@ -87,7 +93,9 @@ export interface EllipsizeBoxProps extends BoxProps {
 }
 
 export const EllipsizeBox = forwardRef<HTMLDivElement, WithChildren<EllipsizeBoxProps>>(
-  ({ children, ellipsisPosition = 'start', disableSharedRef, typographyProps, ...props }, ref) => {
+  ({
+    children, ellipsisPosition = 'start', disableSharedRef, typographyProps, ...props
+  }, ref) => {
     // Allow syncing of :before pseudo element height with contentWrapHeight
     const { contentWrapRef, contentWrapHeight } = useClientHeight()
     const sharedRef = useShareForwardedRef(ref)

package/src/components/LabeledTextFieldWrapper.tsx

@@ -6,7 +6,9 @@ export interface LabeledTextFieldWrapperProps extends StackProps {
   label: string
 }
 
-export const LabeledTextFieldWrapper: React.FC<LabeledTextFieldWrapperProps> = ({ children, label, ...props }) => {
+export const LabeledTextFieldWrapper: React.FC<LabeledTextFieldWrapperProps> = ({
+  children, label, ...props
+}) => {
   return (
     <Stack flexDirection="column" {...props}>
       <Typography gutterBottom variant="caption">

package/src/components/ListItemButtonEx.tsx

@@ -11,7 +11,9 @@ export interface ListItemButtonExProps extends ListItemButtonProps {
   toOptions?: NavigateOptions
 }
 
-export const ListItemButtonExTo: React.FC<ListItemButtonExProps> = ({ to, toOptions, onClick, ...props }) => {
+export const ListItemButtonExTo: React.FC<ListItemButtonExProps> = ({
+  to, toOptions, onClick, ...props
+}) => {
   const navigate = useNavigate()
   const localOnClick = (event: MouseEvent<HTMLDivElement>) => {
     onClick?.(event)

package/src/components/LoadResult.stories.tsx

@@ -6,11 +6,7 @@ import { LoadResult } from './LoadResult.tsx'
 const StorybookEntry: Meta = {
   argTypes: {},
   component: LoadResult,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'webapp/LoadResult',
 }
 
@@ -30,6 +26,8 @@ ApiError.args = { children: <h1>Shown in case of error</h1>, error: true }
 const SearchResult = Template.bind({})
 SearchResult.args = { children: <h1>Shown when there is a valid result</h1>, searchResult: 'foo' }
 
-export { ApiError, Default, NotFound, SearchResult }
+export {
+  ApiError, Default, NotFound, SearchResult,
+}
 
 export default StorybookEntry

package/src/components/LoadResult.tsx

@@ -14,7 +14,9 @@ export interface LoadResultProps<T> {
 }
 
 export function LoadResult<T>(props: PropsWithChildren<LoadResultProps<T>>) {
-  const { notFound, error, searchResult, children } = props
+  const {
+    notFound, error, searchResult, children,
+  } = props
   if (notFound) {
     return <NotFound />
   }

package/src/components/ScrollTableOnSm.tsx

@@ -3,9 +3,7 @@ import type { WithChildren } from '@xylabs/react-shared'
 import React from 'react'
 
 const StyledScrollTableOnSm = styled('div')(({ theme }) => ({
-  [theme.breakpoints.down('md')]: {
-    overflowX: 'scroll',
-  },
+  [theme.breakpoints.down('md')]: { overflowX: 'scroll' },
   display: 'flex',
   flexGrow: 1,
 }))

package/src/components/SectionSpacingRow/SectionSpacingRow.stories.tsx

@@ -7,11 +7,7 @@ import { SectionSpacingRow } from './SectionSpacingRow.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: SectionSpacingRow,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/SectionSpacingRow',
 } as Meta<typeof SectionSpacingRow>
 

package/src/components/SectionSpacingRow/SectionSpacingRow.tsx

@@ -3,7 +3,9 @@ import type { FlexBoxProps } from '@xylabs/react-flexbox'
 import { FlexGrowRow } from '@xylabs/react-flexbox'
 import React, { forwardRef } from 'react'
 
-export const SectionSpacingRow = forwardRef<HTMLDivElement, FlexBoxProps>(({ children, sx, ...props }, ref) => {
+export const SectionSpacingRow = forwardRef<HTMLDivElement, FlexBoxProps>(({
+  children, sx, ...props
+}, ref) => {
   const theme = useTheme()
   return (
     <FlexGrowRow

package/src/components/StyleGuide/AppBars.example.tsx

@@ -1,5 +1,7 @@
 import { Menu as MenuIcon } from '@mui/icons-material'
-import { Button, IconButton, Toolbar, Typography } from '@mui/material'
+import {
+  Button, IconButton, Toolbar, Typography,
+} from '@mui/material'
 import { AppBarEx } from '@xylabs/react-appbar'
 import { FlexCol } from '@xylabs/react-flexbox'
 import React from 'react'

package/src/components/StyleGuide/StyleGuide.stories.tsx

@@ -6,11 +6,7 @@ import { StyleGuideExample } from './StyleGuide.example.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: StyleGuideExample,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/StyleGuide',
 } as Meta<typeof StyleGuideExample>
 

package/src/components/TableCell/AddressTableCell.tsx

@@ -11,7 +11,9 @@ export interface AddressTableCellProps extends Omit<EllipsisTableCellProps, 'ref
   link?: boolean
 }
 
-const AddressTableCell = forwardRef<HTMLElement, AddressTableCellProps>(({ value, archive, exploreDomain, link, ...props }, ref) => {
+const AddressTableCell = forwardRef<HTMLElement, AddressTableCellProps>(({
+  value, archive, exploreDomain, link, ...props
+}, ref) => {
   const href = exploreDomain && archive ? `${exploreDomain}/archive/${archive}/address/${value}` : undefined
   const to = exploreDomain === undefined && archive ? `/archive/${archive}/address/${value}` : undefined
 

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -10,9 +10,7 @@ const EllipsisTableCellRoot = styled(TableCell, {
   name: 'EllipsisTableCell',
   shouldForwardProp: prop => prop !== 'width',
   slot: 'Root',
-})(({ width = '100%' }) => ({
-  width,
-}))
+})(({ width = '100%' }) => ({ width }))
 
 export interface EllipsisTableCellProps extends Omit<TableCellProps, 'ref'> {
   href?: string
@@ -29,7 +27,9 @@ export interface EllipsisTableCellProps extends Omit<TableCellProps, 'ref'> {
 }
 
 export const EllipsisTableCellWithRef = forwardRef<HTMLElement, EllipsisTableCellProps>(
-  ({ children, href, link = false, to, value, ...props }, ref) => {
+  ({
+    children, href, link = false, to, value, ...props
+  }, ref) => {
     const data = useMemo(() => {
       if (children) {
         return children

package/src/components/TableCell/EllipsisTableCellDeprecated.tsx

@@ -1,7 +1,9 @@
 import type { TableCellProps } from '@mui/material'
 import { TableCell, useTheme } from '@mui/material'
 import { LinkEx } from '@xylabs/react-link'
-import React, { useEffect, useRef, useState } from 'react'
+import React, {
+  useEffect, useRef, useState,
+} from 'react'
 import type { To } from 'react-router-dom'
 
 import { getActualPaddingX } from '../../lib/index.ts'
@@ -17,7 +19,9 @@ export interface EllipsisTableCellProps extends TableCellProps {
 }
 
 /** @deprecated - use new EllipsisTableCell */
-export const EllipsisTableCellDeprecated: React.FC<EllipsisTableCellProps> = ({ children, value, to, forCell, href, ...props }) => {
+export const EllipsisTableCellDeprecated: React.FC<EllipsisTableCellProps> = ({
+  children, value, to, forCell, href, ...props
+}) => {
   const [calcCellWidth, setCalcCellWidth] = useState<number>(0)
   const hashDivRef = useRef<HTMLDivElement>(null)
   const theme = useTheme()

package/src/components/TableCell/EllipsizeTableCell.stories.tsx

@@ -1,5 +1,9 @@
-import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
-import type { Decorator, Meta, StoryFn } from '@storybook/react'
+import {
+  Table, TableBody, TableCell, TableHead, TableRow,
+} from '@mui/material'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
@@ -96,4 +100,6 @@ WithMultiple.args = {}
 const WithMultipleRows = TemplateWithMultipleRows.bind({})
 WithMultipleRows.args = {}
 
-export { Default, WithMultiple, WithMultipleRows }
+export {
+  Default, WithMultiple, WithMultipleRows,
+}

package/src/components/TableCell/HashTableCell.tsx

@@ -13,7 +13,9 @@ export interface HashTableCellProps extends EllipsisTableCellProps {
   onHashClick?: (value: Hash) => void
 }
 
-export const HashTableCell: React.FC<HashTableCellProps> = ({ value, archive, dataType, network, exploreDomain, onHashClick, ...props }) => {
+export const HashTableCell: React.FC<HashTableCellProps> = ({
+  value, archive, dataType, network, exploreDomain, onHashClick, ...props
+}) => {
   const ref = useRef<HTMLTableCellElement | null>(null)
   const [tableCellRef, dispatch] = useEvent<HTMLTableCellElement>(undefined, ref)
   const hashPath = `/${dataType}/hash/${value}?network=${network ?? 'main'}`

package/src/components/ThemeTokenAvatar/ThemeTokenAvatar.stories.tsx

@@ -7,11 +7,7 @@ import { ThemeTokenAvatar } from './ThemeTokenAvatar.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: ThemeTokenAvatar,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/ThemeTokenAvatar',
 } as Meta<typeof ThemeTokenAvatar>
 

package/src/components/ThemeTokenAvatarGroup/ThemeTokenAvatarGroup.stories.tsx

@@ -7,11 +7,7 @@ import { ThemeTokenAvatarGroup } from './ThemeTokenAvatarGroup.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: ThemeTokenAvatarGroup,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/ThemeTokenAvatarGroup',
 } as Meta<typeof ThemeTokenAvatarGroup>
 

package/src/components/TokenBar/TokenBar.stories.tsx

@@ -7,11 +7,7 @@ import { TokenBar } from './TokenBar.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: TokenBar,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/TokenBar',
 } as Meta<typeof TokenBar>
 
@@ -25,7 +21,9 @@ const WithData = Template.bind({})
 WithData.args = { text1: 'Hello', text2: 'World' }
 
 const WithSuffixes = Template.bind({})
-WithSuffixes.args = { text1: 'ETH', text2: '0.062342', text2Suffix: <QuickTipButton title="0.06234298345834958" /> }
+WithSuffixes.args = {
+  text1: 'ETH', text2: '0.062342', text2Suffix: <QuickTipButton title="0.06234298345834958" />,
+}
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore

package/src/components/TokenBar/TokenBar.tsx

@@ -12,7 +12,9 @@ export interface TokenBarProps extends PaperProps {
   text2Suffix?: ReactNode
 }
 
-export const TokenBar: React.FC<TokenBarProps> = ({ text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props }) => {
+export const TokenBar: React.FC<TokenBarProps> = ({
+  text1, text1Props, text1Suffix, text2, text2Props, text2Suffix, ...props
+}) => {
   return (
     <Paper elevation={0} className="TokenBar-root" {...props}>
       <FlexRow justifyContent="space-between">

package/src/components/TokenData/useGetTokenData.tsx

@@ -1,5 +1,6 @@
 import { TokenData } from './TokenData.ts'
 
+// eslint-disable-next-line @eslint-react/hooks-extra/ensure-custom-hooks-using-other-hooks
 export const useGetTokenData = (symbols: (string | undefined)[]) => {
   return symbols?.map((symbol) => {
     const additionalTokenData = TokenData.find(x => x.tokenSymbol === symbol)

package/src/components/TokenSummary/TokenSummary.stories.tsx

@@ -8,11 +8,7 @@ import { TokenSummary } from './TokenSummary.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: TokenSummary,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/TokenSummary',
 } as Meta<typeof TokenSummary>
 

package/src/components/TokenSummary/TokenSummary.tsx

@@ -12,7 +12,9 @@ export interface TokenSummaryProps extends CardHeaderProps {
   symbolElement?: ReactNode
 }
 
-export const TokenSummary: React.FC<TokenSummaryProps> = ({ icon, symbol, symbolElement, children, ...props }) => {
+export const TokenSummary: React.FC<TokenSummaryProps> = ({
+  icon, symbol, symbolElement, children, ...props
+}) => {
   return (
     <>
       <CardHeader

package/src/contexts/ListMode/Provider.tsx

@@ -11,9 +11,11 @@ export interface ListModeProviderProps {
 export const ListModeProvider: React.FC<WithChildren<ListModeProviderProps>> = ({ children, defaultListMode }) => {
   const [listMode, setListMode] = useState(defaultListMode ?? 'default')
 
-  const value = useMemo(() => ({ listMode,
+  const value = useMemo(() => ({
+    listMode,
     provided: true,
-    setListMode }), [listMode,
+    setListMode,
+  }), [listMode,
     setListMode])
 
   return (

package/src/contexts/diviner/Provider.tsx

@@ -1,6 +1,8 @@
 import type { WithChildren } from '@xylabs/react-shared'
 import type { Context } from 'react'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, {
+  useEffect, useMemo, useState,
+} from 'react'
 
 import type { ContextExProviderProps } from '../contextEx/index.ts'
 import type { ResolvedDivinerState } from './State.ts'
@@ -11,7 +13,9 @@ export interface DivinerProviderProps<D> extends ContextExProviderProps, WithChi
 }
 
 /** Exposes a resolved diviner */
-export const ResolvedDivinerProvider = <D,>({ diviner: divinerProp, required = false, children, context }: DivinerProviderProps<D>) => {
+export const ResolvedDivinerProvider = <D,>({
+  diviner: divinerProp, required = false, children, context,
+}: DivinerProviderProps<D>) => {
   const [diviner, setDiviner] = useState<D | undefined>(divinerProp)
 
   useEffect(() => {
@@ -28,9 +32,11 @@ export const ResolvedDivinerProvider = <D,>({ diviner: divinerProp, required = f
         return diviner
       }
     }
-    return { diviner: resolveDiviner(),
+    return {
+      diviner: resolveDiviner(),
       provided: true,
-      setDiviner }
+      setDiviner,
+    }
   }, [
     setDiviner, divinerProp])
 

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

@@ -51,11 +51,7 @@ const GradientTextExample: React.FC<FlexBoxProps> = (props) => {
 const StorybookEntry = {
   argTypes: {},
   component: GradientTextExample,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/GradientText',
 } as Meta<typeof GradientTextExample>
 

package/src/hooks/GradientStyles/GradientStyles.tsx

@@ -10,9 +10,7 @@ export interface GradientStyles {
 
 export const colorfulGradientLightMode = () => {
   return {
-    background: {
-      backgroundImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
-    },
+    background: { backgroundImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)' },
     border: {
       borderImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
       borderImageSlice: 1,
@@ -32,9 +30,7 @@ export const colorfulGradientLightMode = () => {
 
 export const colorfulGradientDarkMode = () => {
   return {
-    background: {
-      backgroundImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
-    },
+    background: { backgroundImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)' },
     border: {
       borderImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
       borderImageSlice: 1,

package/src/lib/networkComponents.tsx

@@ -19,12 +19,24 @@ export interface NetworkComponentDetails {
 }
 
 export const networkComponents: NetworkComponentDetails[] = [
-  { icon: props => <HubRoundedIcon {...props} />, name: 'Node', slug: 'node' },
-  { icon: props => <TimerRoundedIcon {...props} />, name: 'Sentinel', slug: 'sentinel' },
-  { icon: props => <InsertLinkRoundedIcon {...props} />, name: 'Bridge', slug: 'bridge' },
-  { icon: props => <Inventory2RoundedIcon {...props} />, name: 'Archivist', slug: 'archivist' },
-  { icon: props => <BubbleChartRoundedIcon {...props} />, name: 'Diviner', slug: 'diviner' },
-  { icon: props => <VisibilityRoundedIcon {...props} />, name: 'Witness', slug: 'witness' },
+  {
+    icon: props => <HubRoundedIcon {...props} />, name: 'Node', slug: 'node',
+  },
+  {
+    icon: props => <TimerRoundedIcon {...props} />, name: 'Sentinel', slug: 'sentinel',
+  },
+  {
+    icon: props => <InsertLinkRoundedIcon {...props} />, name: 'Bridge', slug: 'bridge',
+  },
+  {
+    icon: props => <Inventory2RoundedIcon {...props} />, name: 'Archivist', slug: 'archivist',
+  },
+  {
+    icon: props => <BubbleChartRoundedIcon {...props} />, name: 'Diviner', slug: 'diviner',
+  },
+  {
+    icon: props => <VisibilityRoundedIcon {...props} />, name: 'Witness', slug: 'witness',
+  },
 ]
 
 export const findNetworkComponentIndex = (slug: string) => {

package/src/lib/xyo.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @stylistic/max-len */
 import type { SvgIconProps } from '@mui/material'
 import { SvgIcon } from '@mui/material'
 import React from 'react'

package/xy.config.ts

@@ -1,9 +1,7 @@
 import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
 const config: XyTsupConfig = {
   compile: {
-    browser: {
-      src: true,
-    },
+    browser: { src: true },
     node: {},
     neutral: {},
   },