@xyo-network/react-webapp 2.26.36 → 2.26.39

package/dist/docs.json

@@ -10,7 +10,7 @@
 			"fileName": "index.ts",
 			"line": 1,
 			"character": 0,
-			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/3b6a925/packages/webapp/src/index.ts#L1"
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/413a933/packages/webapp/src/index.ts#L1"
 		}
 	]
 }

package/package.json

@@ -18,10 +18,10 @@
     "@xylabs/react-link": "^2.14.10",
     "@xylabs/react-pixel": "^2.14.10",
     "@xylabs/react-shared": "^2.14.10",
-    "@xyo-network/react-app-settings": "^2.26.36",
-    "@xyo-network/react-appbar": "^2.26.36",
-    "@xyo-network/react-footer": "^2.26.36",
-    "@xyo-network/react-shared": "^2.26.36",
+    "@xyo-network/react-app-settings": "^2.26.39",
+    "@xyo-network/react-appbar": "^2.26.39",
+    "@xyo-network/react-footer": "^2.26.39",
+    "@xyo-network/react-shared": "^2.26.39",
     "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -86,5 +86,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.36"
+  "version": "2.26.39"
 }

package/src/components/Chrome.stories.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable import/no-internal-modules */
+import { Breadcrumbs, List } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { LinkEx } from '@xylabs/react-link'
+import { SiteMenuListItem } from '@xyo-network/react-appbar'
+import { BrowserRouter } from 'react-router-dom'
+
+import { WebAppChrome } from './Chrome'
+import { WebAppPage } from './Page'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: WebAppChrome,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'webapp/WebAppChrome',
+} as ComponentMeta<typeof WebAppChrome>
+
+const rowArray = [32, 64, 128, 256, 512, 1024]
+
+const Template: ComponentStory<typeof WebAppChrome> = (args) => {
+  return (
+    <FlexCol height="80vh" alignItems="stretch" overflow="hidden">
+      <BrowserRouter>
+        <WebAppChrome
+          menuItems={
+            <List>
+              <SiteMenuListItem primary="Hello" />
+            </List>
+          }
+          {...args}
+        >
+          <WebAppPage
+            breadcrumbs={
+              <Breadcrumbs>
+                <LinkEx>BreadCrumbs</LinkEx>
+              </Breadcrumbs>
+            }
+          >
+            {rowArray.map((height) => {
+              return (
+                <FlexRow key={height} height={height}>
+                  {height}
+                </FlexRow>
+              )
+            })}
+          </WebAppPage>
+        </WebAppChrome>
+      </BrowserRouter>
+    </FlexCol>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const DefaultSideBar = Template.bind({})
+DefaultSideBar.args = { navigationType: 'sidebar' }
+
+export { Default, DefaultSideBar }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Chrome.tsx

@@ -0,0 +1,47 @@
+import { Divider, Paper } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import { WebAppNavigationType } from '@xyo-network/react-app-settings'
+import { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'
+import { Footer } from '@xyo-network/react-footer'
+import { ErrorBoundary } from '@xyo-network/react-shared'
+import { ReactNode } from 'react'
+import { Helmet } from 'react-helmet'
+
+import { WebAppErrorPage } from './ErrorPage'
+
+export interface WebAppChromeProps extends FlexBoxProps {
+  appName: string
+  footer?: ReactNode
+  appbar?: ReactNode
+  errorPage?: ReactNode
+  footerElevation?: number
+  navigationType?: WebAppNavigationType
+  menuItems?: ReactNode
+}
+
+export const WebAppChrome: React.FC<WebAppChromeProps> = ({ menuItems, navigationType = 'menu', footerElevation = 4, errorPage, appbar, footer, children, appName, ...props }) => {
+  return (
+    <FlexCol alignItems="stretch" overflow="hidden" height="100vh" {...props}>
+      <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>
+        <meta content="website" property="og:type" />
+      </Helmet>
+      {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}
+      <FlexGrowRow overflow="hidden" alignItems="stretch">
+        {navigationType !== 'menu' ? (
+          <>
+            {menuItems}
+            <Divider orientation="vertical" />
+          </>
+        ) : null}
+        <FlexGrowCol justifyContent="flex-start" alignItems="stretch">
+          <ErrorBoundary fallback={errorPage ?? <WebAppErrorPage />}>{children}</ErrorBoundary>
+        </FlexGrowCol>
+      </FlexGrowRow>
+      <FlexCol alignItems="stretch">
+        <Paper elevation={footerElevation} square>
+          {footer ?? <Footer dynamicHeight />}
+        </Paper>
+      </FlexCol>
+    </FlexCol>
+  )
+}

package/src/components/ErrorPage.tsx

@@ -0,0 +1,15 @@
+import { ButtonEx } from '@xylabs/react-button'
+
+import { WebAppPage, WebAppPageProps } from './Page'
+
+export const WebAppErrorPage: React.FC<WebAppPageProps> = (props) => (
+  <WebAppPage title="Oops! Something went wrong" {...props}>
+    <h1>Oops! Something went wrong!</h1>
+    <ButtonEx href="/" variant="contained">
+      Homepage
+    </ButtonEx>
+  </WebAppPage>
+)
+
+/** @deprecated use WebAppErrorPage instead */
+export const ErrorPage = WebAppErrorPage

package/src/components/NotFoundPage/NotFound.tsx

@@ -0,0 +1,15 @@
+import { Typography } from '@mui/material'
+import { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'
+
+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>
+  )
+}
+
+export { NotFound }

package/src/components/NotFoundPage/Page.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { NotFound } from './NotFound'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: NotFound,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'webapp/NotFound',
+} as ComponentMeta<typeof NotFound>
+
+const Template: ComponentStory<typeof NotFound> = () => {
+  return <NotFound />
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/NotFoundPage/Page.tsx

@@ -0,0 +1,11 @@
+import { WebAppPage, WebAppPageProps } from '../Page'
+import { NotFound } from './NotFound'
+
+export const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (
+  <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>
+    <NotFound />
+  </WebAppPage>
+)
+
+/** @deprecated  use WebAppNotFoundPage instead */
+export const NotFoundPage = WebAppNotFoundPage

package/src/components/NotFoundPage/index.ts

@@ -0,0 +1,2 @@
+export * from './NotFound'
+export * from './Page'

package/src/components/Page.tsx

@@ -0,0 +1,56 @@
+import { Container, ContainerProps } from '@mui/material'
+import { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
+import { useUserEvents } from '@xylabs/react-pixel'
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { ReactNode } from 'react'
+import { Helmet } from 'react-helmet'
+import { useLocation } from 'react-router-dom'
+export interface WebAppPageProps extends FlexBoxProps {
+  container?: ContainerProps['maxWidth'] | 'none'
+  disableGutters?: boolean
+  breadcrumbs?: ReactNode
+  disableBreadcrumbGutter?: boolean
+  spacing?: string | number
+}
+
+export const WebAppPage: React.FC<WebAppPageProps> = ({ spacing = 1, disableBreadcrumbGutter, disableGutters, title, container, breadcrumbs, children, ...props }) => {
+  const userEvents = useUserEvents()
+  const { pathname } = useLocation()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })
+    },
+    [pathname, title, userEvents]
+  )
+
+  const Body: React.FC<FlexBoxProps> = (props) => (
+    <FlexGrowCol gap={1} paddingY={spacing} justifyContent="flex-start" alignItems="stretch" {...props}>
+      <FlexRow justifyContent="flex-start" marginX={disableBreadcrumbGutter ? 0 : spacing}>
+        {breadcrumbs}
+      </FlexRow>
+      {children}
+    </FlexGrowCol>
+  )
+
+  return (
+    <FlexGrowCol alignItems="stretch" justifyContent="flex-start" minHeight={0} maxWidth="100vw" overflow="visible scroll">
+      <Helmet title={title} />
+      {container && container !== 'none' ? (
+        <Container
+          disableGutters={disableGutters}
+          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}
+          maxWidth={container}
+        >
+          <Body {...props} />
+        </Container>
+      ) : (
+        <Body paddingX={disableGutters ? 0 : 1} {...props} />
+      )}
+    </FlexGrowCol>
+  )
+}
+
+/** @deprecated use WebAppPagePage instead */
+export const FlexPage = WebAppPage

package/src/components/ResultLoader.stories.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable import/no-internal-modules */
+import { ComponentStory, Meta } from '@storybook/react'
+import { AxiosError } from 'axios'
+
+import { ResultLoader } from './ResultLoader'
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  component: ResultLoader,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'webapp/ResultLoader',
+}
+
+const Template: ComponentStory<typeof ResultLoader> = (props) => {
+  return <ResultLoader {...props} />
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const NotFound = Template.bind({})
+NotFound.args = { notFound: true }
+
+const ApiError = Template.bind({})
+ApiError.args = { apiError: new AxiosError(), children: <h1>Shown in case of error</h1> }
+
+const SearchResult = Template.bind({})
+SearchResult.args = { children: <h1>Shown when there is a valid result</h1>, searchResult: 'foo' }
+
+export { ApiError, Default, NotFound, SearchResult }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/ResultLoader.tsx

@@ -0,0 +1,27 @@
+import { FlexGrowRow } from '@xylabs/react-flexbox'
+import { AxiosError } from 'axios'
+import { PropsWithChildren } from 'react'
+
+import { NotFound } from './NotFoundPage'
+
+export interface HandleItemDetailLoadingProps<T> {
+  apiError: AxiosError | undefined
+  notFound: boolean
+  searchResult: T | undefined
+}
+
+export function ResultLoader<T>(props: PropsWithChildren<HandleItemDetailLoadingProps<T>>) {
+  const { notFound, apiError, searchResult, children } = props
+  if (notFound) {
+    return <NotFound />
+  }
+  // Defer error handling to the children
+  if (apiError) {
+    return <>{children}</>
+  }
+  if (searchResult === undefined) {
+    return <FlexGrowRow busy minHeight="50px" />
+  } else {
+    return <>{children}</>
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from './Chrome'
+export * from './ErrorPage'
+export * from './NotFoundPage'
+export * from './Page'
+export * from './ResultLoader'

package/src/index.ts

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