@xyo-network/react-shared 2.23.7

package/src/hooks/useFooterOffsetResizer.stories.tsx

@@ -0,0 +1,51 @@
+import { Box, Paper } from '@mui/material'
+import { ComponentStory, Meta } from '@storybook/react'
+import { FlexCol, FlexGrowCol } from '@xylabs/sdk-react'
+import { useRef } from 'react'
+
+import { Footer } from '../components'
+import { useFooterOffsetResizer } from './useFooterOffsetResizer'
+
+const FooterOffsetResizer = () => {
+  const targetElementRef = useRef<HTMLDivElement>()
+
+  useFooterOffsetResizer(targetElementRef)
+
+  return (
+    <>
+      <FlexGrowCol minHeight="97vh">
+        <Box display="flex" flexDirection="column" alignItems="stretch" flexGrow="1" pt={1} px={1} width="100%" ref={targetElementRef}>
+          <FlexGrowCol justifyContent="end">I am visible after resize and padding bottom is updated</FlexGrowCol>
+        </Box>
+      </FlexGrowCol>
+
+      <FlexCol position="fixed" bottom={0} left={0} right={0} alignItems="stretch">
+        <Paper elevation={8}>
+          <Footer footerHtmlElement dynamicHeight width="100%" />
+        </Paper>
+      </FlexCol>
+    </>
+  )
+}
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  component: FooterOffsetResizer,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'hooks/FooterOffsetResizer',
+}
+
+const Template: ComponentStory<typeof FooterOffsetResizer> = () => {
+  return <FooterOffsetResizer />
+}
+
+const Default = Template.bind({})
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/hooks/useFooterOffsetResizer.tsx

@@ -0,0 +1,34 @@
+import { MutableRefObject, useLayoutEffect } from 'react'
+
+/**
+ * Useful for calculating the height of the footer and adjusting another element.
+ *
+ * Note: Happens outside of react rendering to prevent needless rerendering
+ */
+
+const useFooterOffsetResizer = (targetElementRef?: MutableRefObject<HTMLElement | undefined>, condition = true) => {
+  useLayoutEffect(() => {
+    const footer = document.getElementById('footer')
+
+    const observer = new ResizeObserver(() => {
+      if (targetElementRef?.current) {
+        const observedHeight = `${footer?.clientHeight}px`
+        targetElementRef.current.style.paddingBottom = observedHeight
+      }
+    })
+
+    if (condition && footer) {
+      observer.observe(footer)
+    } else {
+      observer.disconnect()
+    }
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [condition, targetElementRef])
+
+  return <></>
+}
+
+export { useFooterOffsetResizer }

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 './modules'

package/src/lib/ExplorerMapHashes.ts

@@ -0,0 +1,16 @@
+export const ExplorerMapHashes = {
+  animatedAnswerHashes: [
+    '79af071f451fc7af10d009dc63236ef9a9b211732c1ee0c06f028fcecf2336c5',
+    '531bfba6d8dfefd3bcc888aca54cdbbd4574ed2b3ec551b230845a1f9a608898',
+    'c874412b4faa4947de81372fd1ba12fdd6f43f5e408622b7f357cb2bcb3f17cb',
+    '29d3f8b882c61a82a1a1675782a27e797ea7196f45a23b4409680ab8b8d5f14e',
+    'cfd20f80ac073fd9518f4ef3f43d2a1f5e4e56e40c2677f38d6f6fecd05df60c',
+    '1354fa73497519a39aed19fc99bdbae78a880a1eafb2f7898d607e07db36528d',
+    '1043b0d25eacfc5013ae9dba780305a6fbf01a43543bd871d7c00537fca142a9',
+    '973dfc5df142851ced258d52d0ac2784e814000ac22e35776f772256b0d4dde9',
+    '463808eb74d3d87e6563970e0301a493577f8cd1b501e6e0ffa5e027ad2cea95',
+    '15b21acea2e3fd9d1ace3768a72636ee7bdf67a6f8e0807bfa2273dea2207555',
+    '32d377bfe7ebe382598c54dd13f8af7510e0a1e2fd2e913311fdd58e517e5e2e',
+  ],
+  staticAnswerHash: 'c7bbf61f61cfd4a1b2def160c28136fc1d100d39fbdb67b227a2c6e558d9d3a5',
+}

package/src/lib/archivistPresets.ts

@@ -0,0 +1,50 @@
+import { XyoNetworkNodePayload, XyoNetworkNodePayloadSchema } from '@xyo-network/network'
+
+import { ExplorerMapHashes } from './ExplorerMapHashes'
+
+export interface XyoArchivistPreset extends XyoNetworkNodePayload {
+  explorerMapHashes?: {
+    staticAnswerHash: string
+    animatedAnswerHashes: string[]
+  }
+}
+
+export const findArchivistPreset = (slug: string) => {
+  return (
+    archivistPresets.find((item) => {
+      return item.slug === slug
+    }) ?? archivistPresets[0]
+  )
+}
+
+export const archivistPresets: XyoArchivistPreset[] = [
+  {
+    docs: 'https://beta.archivist.xyo.network/api',
+    explorerMapHashes: ExplorerMapHashes,
+    name: 'XYO Shared Archivist (kerplunk)',
+    schema: XyoNetworkNodePayloadSchema,
+    slug: 'kerplunk-archivist-xyo-network',
+    type: 'archivist',
+    uri: 'https://beta.api.archivist.xyo.network',
+    web: 'https://beta.archivist.xyo.network',
+  },
+  {
+    docs: 'https://archivist.xyo.network/api',
+    explorerMapHashes: ExplorerMapHashes,
+    name: 'XYO Shared Archivist (main)',
+    schema: XyoNetworkNodePayloadSchema,
+    slug: 'main-archivist-xyo-network',
+    type: 'archivist',
+    uri: 'https://api.archivist.xyo.network',
+    web: 'https://archivist.xyo.network',
+  },
+  {
+    docs: 'http://localhost:8080/api',
+    name: 'XYO Shared Archivist (local)',
+    schema: XyoNetworkNodePayloadSchema,
+    slug: 'local-archivist-xyo-network',
+    type: 'archivist',
+    uri: 'http://localhost:8080',
+    web: 'http://localhost:8081',
+  },
+]

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/divinerPresets.ts

@@ -0,0 +1,28 @@
+import { XyoNetworkNodePayload, XyoNetworkNodePayloadSchema } from '@xyo-network/network'
+
+export const findDivinerPreset = (slug: string) => {
+  return (
+    divinerPresets.find((item) => {
+      return item.slug === slug
+    }) ?? divinerPresets[0]
+  )
+}
+
+export const divinerPresets: XyoNetworkNodePayload[] = [
+  {
+    name: 'XYO Location (beta)',
+    schema: XyoNetworkNodePayloadSchema,
+    slug: 'beta-location-diviner-xyo-network',
+    type: 'diviner',
+    uri: 'https://beta.api.location.diviner.xyo.network',
+    web: 'https://beta.explore.xyo.network',
+  },
+  {
+    name: 'XYO Location',
+    schema: XyoNetworkNodePayloadSchema,
+    slug: 'location-diviner-xyo-network',
+    type: 'diviner',
+    uri: 'https://api.location.diviner.xyo.network',
+    web: 'https://explore.xyo.network',
+  },
+]

package/src/lib/index.ts

@@ -0,0 +1,4 @@
+export * from './archivistPresets'
+export * from './assertDefinedEx'
+export * from './divinerPresets'
+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/modules/common/components/BasicHero/BasicHero.stories.tsx

@@ -0,0 +1,58 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { BasicHero } from './BasicHero'
+import BackgroundImage from './default-desktop.svg'
+const StorybookEntry = {
+  argTypes: {},
+  component: BasicHero,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Common/BasicHero',
+} as ComponentMeta<typeof BasicHero>
+
+const Template: ComponentStory<typeof BasicHero> = (args) => (
+  <BrowserRouter>
+    <BasicHero {...args}></BasicHero>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {
+  button1Text: 'Button 1',
+  button1To: '',
+  button2Text: 'Button 2',
+  button2To: '',
+  desc: ' Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus!',
+  gradientTitle: 'dolor',
+  subLinkPath: 'https://medium.com/xyonetwork/xyo-2-0-has-arrived-fe160f8b2928',
+  subLinkText1: 'We just announced XYO 2.0',
+  subLinkText2: 'Read more here.',
+  title: 'Lorem ipsum',
+}
+const WithBackgroundImage = Template.bind({})
+WithBackgroundImage.args = {
+  backgroundImage: BackgroundImage,
+  button1Text: 'Button 1',
+  button1To: '',
+  button2Text: 'Button 2',
+  button2To: '',
+  desc: ' Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus!',
+  gradientTitle: 'dolor',
+  subLinkPath: 'https://medium.com/xyonetwork/xyo-2-0-has-arrived-fe160f8b2928',
+  subLinkText1: 'We just announced XYO 2.0',
+  subLinkText2: 'Read more here.',
+  title: 'Lorem ipsum',
+  title2: 'adipisicing elit.',
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+
+export { Default, WithBackgroundImage }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/modules/common/components/BasicHero/BasicHero.tsx

@@ -0,0 +1,162 @@
+import { Container, Grid, Typography, useTheme } from '@mui/material'
+import { ButtonEx, FlexBoxProps, FlexGrowCol, FlexGrowRow, LinkEx } from '@xylabs/sdk-react'
+import { ReactElement } from 'react'
+
+import { useIsMobile } from '../../hooks'
+import { colorfulGradientDarkMode, colorfulGradientLightMode } from '../GradientText'
+
+export interface BasicHeroProps extends FlexBoxProps {
+  title: string
+  gradientTitle?: string
+  title2?: string
+  desc: string
+  button1Text?: string
+  button2Text?: string
+  button1To?: string
+  button2To?: string
+  button1Href?: string
+  button2Href?: string
+  subLinkText1?: string
+  subLinkText2?: string
+  heroImage?: string
+  subLinkPath?: string
+  subLinkIcon?: ReactElement
+  backgroundColor?: string
+  textColor?: string
+  backgroundImage?: string
+  sx?: Record<string, string>
+}
+
+interface SubLinkSectionProps {
+  subLinkText1?: string
+  subLinkText2?: string
+  subLinkPath?: string
+  subLinkIcon?: ReactElement
+  backgroundImageAlignment?: boolean
+}
+
+interface ButtonSectionProps {
+  href?: string
+  to?: string
+  buttonText?: string
+}
+const SubLinkSection: React.FC<SubLinkSectionProps> = ({ subLinkText1, subLinkText2, subLinkPath, subLinkIcon, backgroundImageAlignment }) => {
+  return (
+    <FlexGrowRow width="100%" sx={{ flexDirection: { md: 'row', xs: 'column' }, justifyContent: { md: backgroundImageAlignment ? 'flex-start' : 'center', xs: 'center' } }}>
+      {subLinkIcon ? <span>{subLinkIcon}&nbsp;</span> : null}
+      <Typography>{subLinkText1}&nbsp;</Typography>
+      <LinkEx href={subLinkPath} underline="always" target="_blank" color="inherit">
+        <Typography>{subLinkText2}</Typography>
+      </LinkEx>
+    </FlexGrowRow>
+  )
+}
+
+const ButtonSection: React.FC<ButtonSectionProps> = ({ href, to, buttonText }) => {
+  const isMobile = useIsMobile()
+  return (
+    <ButtonEx
+      fullWidth={true}
+      marginTop={1}
+      marginBottom={1}
+      marginRight={isMobile ? 2 : 1}
+      marginLeft={isMobile ? 2 : 0}
+      target={href ?? '_blank'}
+      to={to}
+      href={href}
+      color="primary"
+      variant="contained"
+      paddingX={3}
+      sx={{ display: href || to ? 'flex' : 'none' }}
+    >
+      {buttonText}
+    </ButtonEx>
+  )
+}
+
+export const BasicHero: React.FC<BasicHeroProps> = ({
+  backgroundImage,
+  title,
+  gradientTitle,
+  backgroundColor,
+  textColor,
+  desc,
+  heroImage,
+  title2,
+  subLinkText1,
+  subLinkText2,
+  subLinkPath,
+  button1Text,
+  button2Text,
+  button2To,
+  button1To,
+  button2Href,
+  button1Href,
+  subLinkIcon,
+  sx,
+  ...props
+}) => {
+  const isMobile = useIsMobile()
+  const theme = useTheme()
+  const classes = theme.palette.mode === 'dark' ? colorfulGradientDarkMode() : colorfulGradientLightMode()
+  return (
+    <FlexGrowCol
+      sx={{
+        backgroundImage: `url(${backgroundImage})`,
+        backgroundPosition: { lg: 'bottom', md: 'center left', xs: 'top left' },
+        minHeight: {
+          md: '500px',
+          sm: '400px',
+          xs: '200px',
+        },
+        ...(sx ?? {}),
+      }}
+      style={{
+        backgroundColor: backgroundColor ?? '',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        color: textColor ?? '',
+      }}
+      {...props}
+    >
+      <Container>
+        <Grid
+          container
+          justifyContent="center"
+          alignItems="center"
+          sx={{
+            alignItems: { xs: 'center' },
+            justifyContent: { xs: 'center' },
+          }}
+        >
+          <Grid item xs={12} sm={8} md={backgroundImage ? 6 : 8} lg={backgroundImage ? 6 : 8}>
+            <FlexGrowCol paddingY={2} sx={{ alignItems: { xs: backgroundImage && !isMobile ? 'flex-start' : 'center' } }}>
+              <Typography variant="h1" component="h1" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>
+                {title ? <span>{`${title} `}</span> : null}
+                {gradientTitle ? <span className={classes.heading}> {` ${gradientTitle}`}</span> : null}
+                {title2 ? <span>{` ${title2}`}</span> : null}
+              </Typography>
+              <Typography variant="body1" component="h2" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>
+                {desc}
+              </Typography>
+              <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>
+              <SubLinkSection
+                subLinkIcon={subLinkIcon}
+                subLinkText1={subLinkText1}
+                subLinkText2={subLinkText2}
+                subLinkPath={subLinkPath}
+                backgroundImageAlignment={backgroundImage ? true : false}
+              />
+            </FlexGrowCol>
+          </Grid>
+          <Grid item xs={12} md={6}>
+            {heroImage ? <img src={heroImage} width="100%" /> : null}
+          </Grid>
+        </Grid>
+      </Container>
+    </FlexGrowCol>
+  )
+}