@xyo-network/react-shared 7.5.8 → 7.5.12

package/src/components/BasicHero/index.ts

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

package/src/components/Ellipsize.tsx

@@ -1,103 +0,0 @@
-import type {
-  BoxProps, TypographyProps, TypographyTypeMap,
-} from '@mui/material'
-import {
-  Box, styled, Typography,
-} from '@mui/material'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-import { useShareForwardedRef } from '../hooks/index.ts'
-
-/**
- * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
- */
-
-const ComponentName = 'Ellipsize'
-
-export interface EllipsizeRootProps extends BoxProps {
-  beforeLineHeight?: string | number
-}
-
-const EllipsizeRoot = styled(Box, {
-  name: ComponentName,
-  shouldForwardProp: prop => prop !== 'beforeLineHeight',
-  slot: 'Root',
-})<EllipsizeRootProps>(({ beforeLineHeight = 0 }) => ({
-  '&': {
-    // because the cell content ends up absolutely positioned, the cell doesn't know the content height.
-    // the pseudo element with a hidden character establishes the proper height of the content and hides it
-    ':before': {
-      content: "'nbsp;'",
-      display: 'block',
-      // take the pseudo element out of the `display: block` flow so it won't push against our actual content
-      float: 'left',
-      lineHeight: beforeLineHeight,
-      visibility: 'hidden',
-    },
-  },
-}))
-
-const EllipsizeInnerWrap = styled(Box, {
-  name: ComponentName,
-  slot: 'innerWrap',
-})(() => ({ position: 'relative' }))
-
-const EllipsizeContentWrap = styled(Typography, {
-  name: ComponentName,
-  shouldForwardProp: prop => prop !== 'ellipsisPosition',
-  slot: 'contentWrap',
-})<TypographyWithComponentProps>(({
-  theme, ellipsisPosition, fontFamily,
-}) => {
-  return theme.unstable_sx({
-    fontFamily: fontFamily ?? 'monospace',
-    left: 0,
-    overflow: 'hidden',
-    position: 'absolute',
-    right: 0,
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    ...(ellipsisPosition === 'start'
-      ? {
-          direction: 'rtl',
-          textAlign: 'left',
-        }
-      : {}),
-  })
-})
-
-export type TypographyWithComponentProps<D extends React.ElementType = TypographyTypeMap['defaultComponent'], P = {}> = TypographyProps<D, P> & {
-  ellipsisPosition?: 'start' | 'end'
-}
-
-export interface EllipsizeBoxProps extends BoxProps {
-  beforeLineHeight?: number | string
-  disableSharedRef?: boolean
-  ellipsisPosition?: 'start' | 'end'
-  innerWrapProps?: BoxProps
-  typographyProps?: TypographyWithComponentProps
-}
-
-export const EllipsizeBox = ({
-  ref, innerWrapProps, children, ellipsisPosition = 'start', disableSharedRef, typographyProps, ...props
-}: PropsWithChildren<EllipsizeBoxProps>) => {
-  const sharedRef = useShareForwardedRef(ref)
-  const { sx: innerWrapSx, ...remainingInnerWrapProps } = innerWrapProps ?? {}
-
-  return (
-    <EllipsizeRoot ref={sharedRef} {...props}>
-      <EllipsizeInnerWrap
-        {...remainingInnerWrapProps}
-        sx={{
-          alignItems: 'center', display: 'flex', ...innerWrapSx,
-        }}
-      >
-        <EllipsizeContentWrap component="span" ellipsisPosition={ellipsisPosition} variant="body2" {...typographyProps}>
-          {children}
-        </EllipsizeContentWrap>
-      </EllipsizeInnerWrap>
-    </EllipsizeRoot>
-  )
-}
-EllipsizeBox.displayName = 'EllipsizeBox'

package/src/components/LabeledTextFieldWrapper.tsx

@@ -1,20 +0,0 @@
-import type { StackProps } from '@mui/material'
-import { Stack, Typography } from '@mui/material'
-import React from 'react'
-
-export interface LabeledTextFieldWrapperProps extends StackProps {
-  label: string
-}
-
-export const LabeledTextFieldWrapper: React.FC<LabeledTextFieldWrapperProps> = ({
-  children, label, ...props
-}) => {
-  return (
-    <Stack flexDirection="column" {...props}>
-      <Typography gutterBottom variant="caption">
-        {label}
-      </Typography>
-      {children}
-    </Stack>
-  )
-}

package/src/components/ListItemButtonEx.tsx

@@ -1,30 +0,0 @@
-import type { ListItemButtonProps } from '@mui/material'
-import { ListItemButton } from '@mui/material'
-import type { MouseEvent } from 'react'
-import React from 'react'
-import type { NavigateOptions, To } from 'react-router-dom'
-import { useNavigate } from 'react-router-dom'
-
-export interface ListItemButtonExProps extends ListItemButtonProps {
-  target?: string
-  to?: To
-  toOptions?: NavigateOptions
-}
-
-export const ListItemButtonExTo: React.FC<ListItemButtonExProps> = ({
-  to, toOptions, onClick, ...props
-}) => {
-  const navigate = useNavigate()
-  const localOnClick = (event: MouseEvent<HTMLDivElement>) => {
-    onClick?.(event)
-    if (to) {
-      void navigate(to, toOptions)
-    }
-  }
-
-  return <ListItemButton onClick={localOnClick} {...props} />
-}
-
-export const ListItemButtonEx: React.FC<ListItemButtonExProps> = ({ to, ...props }) => {
-  return to ? <ListItemButtonExTo to={to} {...props} /> : <ListItemButton {...props} />
-}

package/src/components/LoadResult.stories.tsx

@@ -1,33 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { LoadResult } from './LoadResult.tsx'
-
-const StorybookEntry: Meta = {
-  argTypes: {},
-  component: LoadResult,
-  parameters: { docs: { page: null } },
-  title: 'webapp/LoadResult',
-}
-
-const Template: StoryFn<typeof LoadResult> = (props) => {
-  return <LoadResult {...props} />
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const NotFound = Template.bind({})
-NotFound.args = { notFound: true }
-
-const ApiError = Template.bind({})
-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 default StorybookEntry

package/src/components/LoadResult.tsx

@@ -1,27 +0,0 @@
-import { FlexGrowRow } from '@xylabs/react-flexbox'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-import { NotFound } from './NotFound.tsx'
-
-export interface LoadResultProps<T> {
-  /** @deprecated - use error prop */
-  apiError?: Error
-  /** Defer error handling to the children and load them */
-  error?: boolean
-  notFound: boolean
-  searchResult: T | undefined
-}
-
-export function LoadResult<T>(props: PropsWithChildren<LoadResultProps<T>>) {
-  const {
-    notFound, error, searchResult, children,
-  } = props
-  if (notFound) {
-    return <NotFound />
-  }
-  if (error) {
-    return <>{children}</>
-  }
-  return searchResult === undefined ? <FlexGrowRow busy minHeight="50px" /> : <>{children}</>
-}

package/src/components/NotFound.tsx

@@ -1,16 +0,0 @@
-import { Typography } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexGrowCol } from '@xylabs/react-flexbox'
-import React from 'react'
-
-/** @deprecated use from @@xylabs/react-shared instead */
-export const NotFound: React.FC<FlexBoxProps> = (props) => {
-  return (
-    <FlexGrowCol {...props}>
-      <Typography variant="h2">Sorry!</Typography>
-      <Typography marginY={3} variant="body2">
-        {'Can\'t find anything here'}
-      </Typography>
-    </FlexGrowCol>
-  )
-}

package/src/components/Pipe.tsx

@@ -1,11 +0,0 @@
-import type { TypographyProps } from '@mui/material'
-import { Typography } from '@mui/material'
-import React from 'react'
-
-export const Pipe: React.FC<TypographyProps> = (props) => {
-  return (
-    <Typography marginX={1} component="span" {...props}>
-      |
-    </Typography>
-  )
-}

package/src/components/ScrollTableOnSm.tsx

@@ -1,13 +0,0 @@
-import { styled } from '@mui/material'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-
-const StyledScrollTableOnSm = styled('div')(({ theme }) => ({
-  [theme.breakpoints.down('md')]: { overflowX: 'scroll' },
-  display: 'flex',
-  flexGrow: 1,
-}))
-
-const ScrollTableOnSm: React.FC<PropsWithChildren> = ({ children }) => <StyledScrollTableOnSm>{children}</StyledScrollTableOnSm>
-
-export { ScrollTableOnSm }

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

@@ -1,32 +0,0 @@
-import { Divider, Typography } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { SectionSpacingRow } from './SectionSpacingRow.tsx'
-const StorybookEntry = {
-  argTypes: {},
-  component: SectionSpacingRow,
-  parameters: { docs: { page: null } },
-  title: 'shared/SectionSpacingRow',
-} as Meta<typeof SectionSpacingRow>
-
-const Template: StoryFn<typeof SectionSpacingRow> = args => (
-  <BrowserRouter>
-    <Typography variant="subtitle2">No Spacing</Typography>
-    <Typography textAlign="center">Hello World</Typography>
-    <Divider />
-    <Typography variant="subtitle2">With Spacing</Typography>
-    <SectionSpacingRow {...args}>Hello World</SectionSpacingRow>
-  </BrowserRouter>
-)
-
-const Default = Template.bind({})
-Default.args = {}
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-
-export { Default }
-
-export default StorybookEntry

package/src/components/SectionSpacingRow/SectionSpacingRow.tsx

@@ -1,26 +0,0 @@
-import { useTheme } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexGrowRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-export const SectionSpacingRow = ({
-  ref, children, sx, ...props
-}: FlexBoxProps) => {
-  const theme = useTheme()
-  return (
-    <FlexGrowRow
-      sx={{
-        paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },
-        paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },
-        ...sx,
-      }}
-      width="100%"
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </FlexGrowRow>
-  )
-}
-
-SectionSpacingRow.displayName = 'SectionSpacingRow'

package/src/components/SectionSpacingRow/index.ts

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

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

@@ -1,29 +0,0 @@
-import { Menu as MenuIcon } from '@mui/icons-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'
-
-export const AppBarsExample = () => {
-  const contextToolbar = (
-    <Toolbar disableGutters>
-      <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
-        <MenuIcon />
-      </IconButton>
-      <Typography variant="h6" color="inherit" component="div">
-        Photos
-      </Typography>
-    </Toolbar>
-  )
-
-  const systemToolbar = <Button variant="contained">Get Started</Button>
-
-  return (
-    <FlexCol alignItems="stretch">
-      <Typography variant="subtitle1">App Bar</Typography>
-      <AppBarEx elevation={0} contextToolbar={contextToolbar} systemToolbar={systemToolbar} />
-    </FlexCol>
-  )
-}

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

@@ -1,46 +0,0 @@
-import type { ButtonTypeMap } from '@mui/material'
-import { Button, Typography } from '@mui/material'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import React, { Fragment } from 'react'
-
-const colors = ['primary', 'secondary'] as ButtonTypeMap['props']['color'][]
-const variants = ['text', 'contained', 'outlined'] as ButtonTypeMap['props']['variant'][]
-
-export const ButtonsExample: React.FC = ({ ...props }) => {
-  return (
-    <FlexCol {...props} alignItems="stretch">
-      <Typography variant="subtitle1">Buttons</Typography>
-      <Typography variant="subtitle2">Buttons</Typography>
-      <FlexRow alignItems="stretch" mb={2}>
-        {colors.map(color => (
-          <Fragment key={color}>
-            <Button variant="contained" color={color}>
-              {color}
-            </Button>
-            &nbsp;
-          </Fragment>
-        ))}
-      </FlexRow>
-      {variants.map(variant => (
-        <FlexCol key={`btn-${variant}`} alignItems="stretch" mb={2}>
-          <Typography variant="subtitle2">
-            <span style={{ textTransform: 'capitalize' }}>{variant}</span>
-            {' '}
-            Buttons
-          </Typography>
-          <FlexRow alignItems="stretch">
-            <Button variant={variant}>Button</Button>
-&nbsp;
-            <Button variant={variant} disabled>
-              Disabled
-            </Button>
-            &nbsp;
-            <Button variant={variant} href="#href">
-              Link
-            </Button>
-          </FlexRow>
-        </FlexCol>
-      ))}
-    </FlexCol>
-  )
-}

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

@@ -1,23 +0,0 @@
-import { Paper, Typography } from '@mui/material'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-export const PapersExample: React.FC = ({ ...props }) => {
-  return (
-    <FlexCol {...props}>
-      <Typography variant="subtitle1">Paper</Typography>
-      <FlexRow alignItems="stretch">
-        {Array.from({ length: 5 }).map((_, index) => (
-          <FlexCol key={`paper-${index}`} marginRight={2}>
-            <Paper key={`paper-${index}`} elevation={index * 2} color="secondary">
-              <Typography margin={1}>
-                Elevation-
-                {index * 3}
-              </Typography>
-            </Paper>
-          </FlexCol>
-        ))}
-      </FlexRow>
-    </FlexCol>
-  )
-}

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

@@ -1,20 +0,0 @@
-import { Typography } from '@mui/material'
-import { FlexCol } from '@xylabs/react-flexbox'
-import React from 'react'
-
-import { AppBarsExample } from './AppBars.example.tsx'
-import { ButtonsExample } from './Buttons.example.tsx'
-import { PapersExample } from './Papers.example.tsx'
-import { TextsExample } from './Texts.example.tsx'
-
-export const StyleGuideExample: React.FC = () => {
-  return (
-    <FlexCol alignItems="stretch">
-      <Typography variant="h5">XYO Network Style Guide</Typography>
-      <AppBarsExample />
-      <ButtonsExample />
-      <PapersExample />
-      <TextsExample />
-    </FlexCol>
-  )
-}

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

@@ -1,21 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { StyleGuideExample } from './StyleGuide.example.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: StyleGuideExample,
-  parameters: { docs: { page: null } },
-  title: 'shared/StyleGuide',
-} as Meta<typeof StyleGuideExample>
-
-const Template: StoryFn<typeof StyleGuideExample> = () => <StyleGuideExample />
-
-const Default = Template.bind({})
-Default.args = {}
-Default.decorators = []
-
-export { Default }
-
-export default StorybookEntry

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

@@ -1,34 +0,0 @@
-import type { TypographyVariant } from '@mui/material'
-import { Typography } from '@mui/material'
-import { FlexCol } from '@xylabs/react-flexbox'
-import React from 'react'
-
-export const TextsExample = () => {
-  const variantList: TypographyVariant[] = [
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'subtitle1',
-    'subtitle2',
-    'body1',
-    'body2',
-    'button',
-    'caption',
-    'overline',
-  ]
-
-  return (
-    <FlexCol>
-      {variantList.map(variant => (
-        <Typography key={variant} variant={variant}>
-          {variant}
-          {' '}
-          - XYO Network
-        </Typography>
-      ))}
-    </FlexCol>
-  )
-}

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

@@ -1,3 +0,0 @@
-import { createContext } from 'react'
-
-export const VariantContext = createContext('main')

package/src/components/TableCell/AddressTableCell.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-
-import type { EllipsisTableCellProps } from './EllipsisTableCell.tsx'
-import { EllipsisTableCell } from './EllipsisTableCell.tsx'
-
-export interface AddressTableCellProps extends EllipsisTableCellProps {
-  /** @deprecated - archives are no longer supported */
-  archive?: string
-  /** @deprecated - use events instead */
-  exploreDomain?: string
-  link?: boolean
-}
-
-const AddressTableCell = ({
-  ref, value, archive, exploreDomain, link, ...props
-}: AddressTableCellProps) => {
-  const href = exploreDomain && archive ? `${exploreDomain}/archive/${archive}/address/${value}` : undefined
-  const to = exploreDomain === undefined && archive ? `/archive/${archive}/address/${value}` : undefined
-
-  return <EllipsisTableCell value={value} href={href} to={to} ref={ref} link={link} {...props} />
-}
-
-AddressTableCell.displayName = 'AddressTableCell'
-export { AddressTableCell }

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -1,58 +0,0 @@
-import type { TableCellProps } from '@mui/material'
-import { styled, TableCell } from '@mui/material'
-import { asLinkHrefOrToProps, LinkEx } from '@xylabs/react-link'
-import React, { useMemo } from 'react'
-import type { To } from 'react-router-dom'
-
-import { EllipsizeBox } from '../Ellipsize.tsx'
-
-const EllipsisTableCellRoot = styled(TableCell, {
-  name: 'EllipsisTableCell',
-  shouldForwardProp: prop => prop !== 'width',
-  slot: 'Root',
-})(({ width = '100%' }) => ({ width }))
-
-export interface EllipsisTableCellProps extends TableCellProps {
-  href?: string
-  link?: boolean
-  to?: To
-  value?: string
-  /**
-   * Width of the table cell.
-   *
-   * Note: When using percentages, this value can be different than what you expect
-   * if used on a cell that is not the first cell in the first row.
-   */
-  width?: string | number
-}
-
-export const EllipsisTableCellWithRef = ({
-  ref, children, href, link = false, to, value, ...props
-}: EllipsisTableCellProps) => {
-  const data = useMemo(() => {
-    if (children) {
-      return children
-    }
-    if (href || link || to) {
-      return (
-        <LinkEx title={value} {...asLinkHrefOrToProps({ to, href })} target={href ? '_blank' : undefined}>
-          {value}
-        </LinkEx>
-      )
-    }
-    return value
-  }, [children, href, link, to, value])
-  return (
-    <EllipsisTableCellRoot {...props}>
-      <EllipsizeBox
-        ref={ref}
-        sx={{ cursor: link || to || href ? 'pointer' : 'inherit' }}
-      >
-        {data}
-      </EllipsizeBox>
-    </EllipsisTableCellRoot>
-  )
-}
-
-EllipsisTableCellWithRef.displayName = 'EllipsisTableCell'
-export const EllipsisTableCell = EllipsisTableCellWithRef