@xyo-network/react-webapp 2.26.32 → 2.26.35

package/README.md

@@ -10,7 +10,8 @@
 [![codeclimate-badge][]][codeclimate-link]
 [![snyk-badge][]][snyk-link]
 
-> The XYO Foundation provides this source code available in our efforts to advance the understanding of the XYO Procotol and its possible uses.
+> The XYO Foundation provides this source code available in our efforts to
+> advance the understanding of the XYO Procotol and its possible uses.
 
 ## Table of Contents
 

package/dist/docs.json

@@ -2,6 +2,15 @@
 	"id": 0,
 	"name": "@xyo-network/react-webapp",
 	"kind": 1,
+	"kindString": "Project",
 	"flags": {},
-	"originalName": ""
+	"originalName": "",
+	"sources": [
+		{
+			"fileName": "index.ts",
+			"line": 1,
+			"character": 0,
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/7efa6fa/packages/webapp/src/index.ts#L1"
+		}
+	]
 }

package/package.json

@@ -12,16 +12,16 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@mui/material": "^5.9.1",
+    "@mui/material": "^5.9.2",
     "@xylabs/react-button": "^2.14.10",
     "@xylabs/react-flexbox": "^2.14.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.32",
-    "@xyo-network/react-appbar": "^2.26.32",
-    "@xyo-network/react-footer": "^2.26.32",
-    "@xyo-network/react-shared": "^2.26.32",
+    "@xyo-network/react-app-settings": "^2.26.35",
+    "@xyo-network/react-appbar": "^2.26.35",
+    "@xyo-network/react-footer": "^2.26.35",
+    "@xyo-network/react-shared": "^2.26.35",
     "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -35,7 +35,7 @@
     "@babel/preset-env": "^7.18.9",
     "@storybook/react": "^6.5.9",
     "@types/react-helmet": "^6.1.5",
-    "@xylabs/tsconfig": "^1.0.14"
+    "@xylabs/tsconfig-dom": "^2.5.3"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -86,5 +86,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.32"
+  "version": "2.26.35"
 }

package/babel.config.json

@@ -1,5 +0,0 @@
-{
-    "presets": [
-        "@babel/preset-env"
-    ]
-}

package/src/components/Chrome.stories.tsx

@@ -1,67 +0,0 @@
-/* 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

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

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

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

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

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

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

package/src/components/Page.tsx

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

@@ -1,37 +0,0 @@
-/* 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

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

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

package/src/index.ts

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