@xyo-network/react-shared 2.26.37 → 2.26.40

package/src/components/BasicHero/index.ts

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

package/src/components/ErrorBoundry.tsx

@@ -0,0 +1,42 @@
+import { Typography } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { Component, ErrorInfo, ReactNode } from 'react'
+
+export interface ErrorBoundaryProps {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+export interface ErrorBoundaryState {
+  error?: Error
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { error: undefined }
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error(`${error}: ${errorInfo}`)
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        this.props.fallback ?? (
+          <FlexCol>
+            <Typography variant="h1">Something went wrong.</Typography>
+            <Typography variant="body1">[{this.state.error?.message}]</Typography>
+          </FlexCol>
+        )
+      )
+    }
+
+    return this.props.children
+  }
+}

package/src/components/JsonRouteWrapper/JsonApiButton.tsx

@@ -0,0 +1,19 @@
+import { ButtonEx, ButtonExProps } from '@xylabs/react-button'
+import { useSearchParams } from 'react-router-dom'
+
+export const JsonApiButton: React.FC<ButtonExProps> = (props) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  return (
+    <ButtonEx
+      marginX={2}
+      variant="outlined"
+      onClick={() => {
+        searchParams.set('json', 'true')
+        setSearchParams(searchParams)
+      }}
+      {...props}
+    >
+      JSON
+    </ButtonEx>
+  )
+}

package/src/components/JsonRouteWrapper/JsonFromUrl.stories.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable deprecation/deprecation */
+/* eslint-disable import/no-deprecated */
+import { ComponentStory, Meta } from '@storybook/react'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { BrowserRouter } from 'react-router-dom'
+
+import { DeprecateStory } from '../../../../../.storybook'
+import { JsonFromUrl } from './JsonFromUrl'
+
+const StorybookEntry: Meta = {
+  args: {
+    apiDomain: 'http://localhost:8081',
+  },
+  component: JsonFromUrl,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/JsonRouteWrapper/JsonFromUrl',
+}
+
+const Template: ComponentStory<typeof JsonFromUrl> = (props) => {
+  return (
+    <>
+      <DeprecateStory />
+      <BrowserRouter>
+        <FlexCol>
+          <JsonFromUrl {...props}></JsonFromUrl>
+        </FlexCol>
+      </BrowserRouter>
+    </>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = { pathname: '/stats' }
+
+const CustomTheme = Template.bind({})
+CustomTheme.args = { pathname: '/stats', theme: 'apathy:inverted' }
+
+const ErrorState = Template.bind({})
+ErrorState.args = { pathname: '/foo' }
+
+export { CustomTheme, Default, ErrorState }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/JsonRouteWrapper/JsonFromUrl.tsx

@@ -0,0 +1,52 @@
+import { ErrorDialog } from '@xylabs/react-dialogs'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { useAsyncEffect } from '@xylabs/react-shared'
+import axios, { AxiosError, AxiosResponse } from 'axios'
+import { lazy, Suspense, useState } from 'react'
+import { ThemeKeys, ThemeObject } from 'react-json-view'
+import { useLocation } from 'react-router-dom'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+const sanitizeUrlForApi = (path: string) => {
+  if (new RegExp(/json$/g).test(path)) {
+    return path.split('json')[0]
+  } else {
+    return path
+  }
+}
+
+export interface JsonFromUrlProps {
+  apiDomain: string
+  pathname?: string
+  theme?: ThemeKeys | ThemeObject
+}
+
+/**  @deprecated - Move to JsonRouteWrapper Component */
+export const JsonFromUrl: React.FC<JsonFromUrlProps> = ({ pathname, apiDomain, ...JsonViewProps }) => {
+  const location = useLocation()
+  const path = pathname ? pathname : location.pathname
+  const [apiResponse, setApiResponse] = useState<AxiosResponse>()
+  const [apiError, setApiError] = useState<AxiosError>()
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useAsyncEffect(async () => {
+    const apiPath = sanitizeUrlForApi(path)
+    const url = `${apiDomain}${apiPath}`
+
+    try {
+      const response = await axios.get(url)
+      setApiResponse(response.data)
+    } catch (err) {
+      setApiError(err as AxiosError)
+    }
+  }, [apiDomain, path])
+
+  return (
+    <>
+      <p>Resource - {sanitizeUrlForApi(path)}</p>
+      <Suspense fallback={<FlexCol />}>{apiResponse && <JsonView src={apiResponse} collapseStringsAfterLength={64} {...JsonViewProps} />}</Suspense>
+      <ErrorDialog title="Error Fetching JSON" error={apiError} open={!!apiError} onAction={() => setApiError(undefined)} />
+    </>
+  )
+}

package/src/components/JsonRouteWrapper/JsonRouteWrapper.stories.tsx

@@ -0,0 +1,68 @@
+import { ComponentMeta, ComponentStory, DecoratorFn } from '@storybook/react'
+import { ButtonEx } from '@xylabs/react-button'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { XyoArchivistApi } from '@xyo-network/api'
+import { BrowserRouter, useSearchParams } from 'react-router-dom'
+
+import { JsonRouteWrapper } from './JsonRouteWrapper'
+
+const JsonDecorator: DecoratorFn = (Story) => (
+  <BrowserRouter>
+    <Story />
+  </BrowserRouter>
+)
+
+const StorybookEntry = {
+  argTypes: {
+    apiDomain: 'https://beta.api.archivist.xyo.network',
+  },
+  component: JsonRouteWrapper,
+  decorators: [JsonDecorator],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/JsonRouteWrapper',
+} as ComponentMeta<typeof JsonRouteWrapper>
+
+const Template: ComponentStory<typeof JsonRouteWrapper> = (props) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const activeJson = searchParams.get('json')
+  return (
+    <FlexCol>
+      <ButtonEx
+        marginY={3}
+        onClick={() => {
+          activeJson === 'true' ? searchParams.delete('json') : searchParams.set('json', 'true')
+          setSearchParams(searchParams)
+        }}
+        variant="outlined"
+      >
+        Toggle JSON Page
+      </ButtonEx>
+      <JsonRouteWrapper {...props}></JsonRouteWrapper>
+    </FlexCol>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {
+  callback: () => new XyoArchivistApi({ apiDomain: 'https://beta.api.archivist.xyo.network' }).archive('temp').block.stats.get(),
+}
+
+const HideBackButton = Template.bind({})
+HideBackButton.args = {
+  callback: () =>
+    new XyoArchivistApi({
+      apiDomain: 'https://beta.api.archivist.xyo.network',
+    })
+      .archive('temp')
+      .block.stats.get(),
+  noBackButton: true,
+}
+
+export { Default, HideBackButton }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/JsonRouteWrapper/JsonRouteWrapper.tsx

@@ -0,0 +1,78 @@
+import { ButtonEx } from '@xylabs/react-button'
+import { ErrorDialog } from '@xylabs/react-dialogs'
+import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { XyoApiError } from '@xyo-network/api'
+import { lazy, Suspense, useState } from 'react'
+import { ReactJsonViewProps } from 'react-json-view'
+import { useSearchParams } from 'react-router-dom'
+
+import { JsonApiButton } from './JsonApiButton'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+export interface JsonFromPromiseProps extends FlexBoxProps {
+  callback: () => Promise<object | undefined>
+  noBackButton?: boolean
+  noJsonButton?: boolean
+  jsonViewProps?: ReactJsonViewProps
+}
+
+export const JsonRouteWrapper: React.FC<JsonFromPromiseProps> = ({ callback, children, noBackButton = false, noJsonButton = false, jsonViewProps, ...props }) => {
+  const [apiResponse, setApiResponse] = useState<object>()
+  const [apiError, setApiError] = useState<XyoApiError>()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const active = !!searchParams.get('json')
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      try {
+        const response = await callback()
+        if (mounted()) {
+          setApiResponse(response)
+        }
+      } catch (ex) {
+        if (mounted()) {
+          const error = ex as XyoApiError
+          if (error.isXyoError) {
+            setApiError(error)
+          } else {
+            throw ex
+          }
+        }
+      }
+    },
+    [callback]
+  )
+
+  return (
+    <FlexCol {...props}>
+      {active ? (
+        <>
+          <Suspense fallback={null}>{apiResponse && <JsonView src={apiResponse} collapseStringsAfterLength={64} {...jsonViewProps} />}</Suspense>
+          {!noBackButton && (
+            <FlexRow marginY={3}>
+              <ButtonEx
+                flexDirection="row"
+                variant="outlined"
+                onClick={() => {
+                  searchParams.delete('json')
+                  setSearchParams(searchParams)
+                }}
+              >
+                Back
+              </ButtonEx>
+            </FlexRow>
+          )}
+          <ErrorDialog title="Error Fetching JSON" error={apiError} open={!!apiError} onAction={() => setApiError(undefined)} />
+        </>
+      ) : (
+        <>
+          {children}
+          {!noJsonButton && <JsonApiButton marginTop={2} />}
+        </>
+      )}
+    </FlexCol>
+  )
+}

package/src/components/JsonRouteWrapper/index.ts

@@ -0,0 +1,3 @@
+export * from './JsonApiButton'
+export * from './JsonFromUrl'
+export * from './JsonRouteWrapper'

package/src/components/ListItemButtonEx.tsx

@@ -0,0 +1,29 @@
+import { ListItemButton, ListItemButtonProps } from '@mui/material'
+import { MouseEvent } from 'react'
+import { NavigateOptions, To, 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) {
+      navigate(to, toOptions)
+    }
+  }
+
+  return <ListItemButton onClick={localOnClick} {...props} />
+}
+
+export const ListItemButtonEx: React.FC<ListItemButtonExProps> = ({ to, ...props }) => {
+  if (to) {
+    return <ListItemButtonExTo to={to} {...props} />
+  } else {
+    return <ListItemButton {...props} />
+  }
+}

package/src/components/Pipe.tsx

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

package/src/components/ScrollTableOnSm.tsx

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

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

@@ -0,0 +1,36 @@
+import { Divider, Typography } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { SectionSpacingRow } from './SectionSpacingRow'
+const StorybookEntry = {
+  argTypes: {},
+  component: SectionSpacingRow,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/SectionSpacingRow',
+} as ComponentMeta<typeof SectionSpacingRow>
+
+const Template: ComponentStory<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 }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/SectionSpacingRow/SectionSpacingRow.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from '@mui/material'
+import { FlexBoxProps, FlexGrowRow } from '@xylabs/react-flexbox'
+
+export const SectionSpacingRow: React.FC<FlexBoxProps> = ({ children, sx, ...props }) => {
+  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%"
+      {...props}
+    >
+      {children}
+    </FlexGrowRow>
+  )
+}

package/src/components/SectionSpacingRow/index.ts

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

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

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

@@ -0,0 +1,41 @@
+import { Button, ButtonTypeMap, Typography } from '@mui/material'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+
+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) => (
+          <>
+            <Button variant="contained" color={color}>
+              {color}
+            </Button>
+            &nbsp;
+          </>
+        ))}
+      </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

@@ -0,0 +1,19 @@
+import { Paper, Typography } from '@mui/material'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+
+export const PapersExample: React.FC = ({ ...props }) => {
+  return (
+    <FlexCol {...props}>
+      <Typography variant="subtitle1">Paper</Typography>
+      <FlexRow alignItems="stretch">
+        {Array.from({ length: 5 }, () => undefined).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

@@ -0,0 +1,19 @@
+import { Typography } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+
+import { AppBarsExample } from './AppBars.example'
+import { ButtonsExample } from './Buttons.example'
+import { PapersExample } from './Papers.example'
+import { TextsExample } from './Texts.example'
+
+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

@@ -0,0 +1,25 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { StyleGuideExample } from './StyleGuide.example'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: StyleGuideExample,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/StyleGuide',
+} as ComponentMeta<typeof StyleGuideExample>
+
+const Template: ComponentStory<typeof StyleGuideExample> = () => <StyleGuideExample />
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = []
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

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

@@ -0,0 +1,16 @@
+import { Typography, TypographyVariant } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+
+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

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

package/src/components/TableCell/AddressTableCell.tsx

@@ -0,0 +1,13 @@
+import { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell'
+
+export interface AddressTableCellProps extends EllipsisTableCellProps {
+  archive?: string
+  exploreDomain?: string
+}
+
+export const AddressTableCell: React.FC<AddressTableCellProps> = ({ value, archive, exploreDomain, ...props }) => {
+  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} {...props} />
+}