@xyo-network/react-webapp 3.0.0 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.mjs.map +1 -1
- package/package.json +20 -20
- package/src/components/Body.tsx +6 -3
- package/src/components/Chrome.stories.tsx +3 -2
- package/src/components/Chrome.tsx +5 -3
- package/src/components/ErrorPage.tsx +2 -1
- package/src/components/NotFoundPage/Page.stories.tsx +1 -1
- package/src/components/NotFoundPage/Page.tsx +2 -1
- package/src/components/Page.tsx +7 -4
- package/src/components/lib/cssValues.ts +1 -1
- package/xy.config.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["import { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib/index.ts'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const scrollable = variant === 'scrollable'\n return theme.unstable_sx({\n alignItems: 'stretch',\n gap: 1,\n justifyContent: 'flex-start',\n overflowX: 'visible',\n overflowY: scrollable ? 'scroll' : 'hidden',\n paddingY: spacing,\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n overflowY: 'scroll',\n },\n })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n theme.unstable_sx({\n justifyContent: 'start',\n marginX: disableBreadcrumbGutter ? 0 : spacing,\n }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n name: WebAppBodyName,\n slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const props = variant === 'scrollable' ? scrollableContent : fixedContent\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 'unset',\n position: 'relative',\n },\n }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n breadcrumbs?: ReactNode\n disableBreadcrumbGutter?: boolean\n mobileScrollingBreakpoint?: Breakpoint\n spacing?: string | number\n variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n children,\n breadcrumbs,\n disableBreadcrumbGutter,\n mobileScrollingBreakpoint,\n spacing = 1,\n variant,\n ...props\n}) => {\n return (\n <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n {breadcrumbs\n ? (\n <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\n )\n : null}\n <WebAppBodyScrollableWrapper>\n <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n {children}\n </WebAppBodyScrollable>\n </WebAppBodyScrollableWrapper>\n </WebAppBodyRoot>\n )\n}\n","import { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n inset: 0,\n position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n inset: 'unset',\n position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = {\n ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n ...scrollableWrap,\n} as const\n","import { Divider, Paper } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { WebAppNavigationType } from '@xyo-network/react-app-settings'\nimport { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport { ErrorBoundary } from '@xyo-network/react-shared'\nimport React, { forwardRef, ReactNode } from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage.tsx'\n\nexport interface WebAppChromeProps extends FlexBoxProps {\n appName: string\n appbar?: ReactNode\n errorBoundary?: boolean\n errorPage?: ReactNode\n footer?: ReactNode\n footerElevation?: number\n menuItems?: ReactNode\n navigationType?: WebAppNavigationType\n}\n\nexport const WebAppChrome = forwardRef<HTMLDivElement, WebAppChromeProps>(\n ({ appName, appbar, children, errorBoundary, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props }, ref) => {\n return (\n <FlexCol id=\"web-chrome-flex\" alignItems=\"stretch\" overflow=\"hidden\" height=\"100vh\" ref={ref} {...props}>\n <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>\n <meta content=\"website\" property=\"og:type\" />\n </Helmet>\n {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}\n <FlexGrowRow id=\"sidebar-nav-flex\" overflow=\"hidden\" alignItems=\"stretch\">\n {navigationType === 'menu'\n ? null\n : (\n <>\n {menuItems}\n <Divider orientation=\"vertical\" />\n </>\n )}\n <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n {errorBoundary\n ? (\n <ErrorBoundary\n fallbackWithError={(error) => {\n return errorPage ?? <WebAppErrorPage error={error} />\n }}\n >\n {children}\n </ErrorBoundary>\n )\n : children}\n </FlexGrowCol>\n </FlexGrowRow>\n <FlexCol id=\"footer-flex\" alignItems=\"stretch\">\n <Paper elevation={footerElevation} square>\n {footer ?? <Footer dynamicHeight />}\n </Paper>\n </FlexCol>\n </FlexCol>\n )\n },\n)\n\nWebAppChrome.displayName = 'WebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\nimport React from 'react'\n\nimport { WebAppPage, WebAppPageProps } from './Page.tsx'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n <h1>Oops! Something went wrong!</h1>\n <p>{`${error}`}</p>\n <ButtonEx href=\"/\" variant=\"contained\">\n Homepage\n </ButtonEx>\n </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport React from 'react'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body.tsx'\nimport { fixedWrap, scrollableWrap } from './lib/index.ts'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n name: 'WebAppPage',\n shouldForwardProp: propName => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n maxWidth: '100vw',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 0,\n position: 'absolute',\n },\n }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n container?: ContainerProps['maxWidth'] | 'none'\n disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({\n disableGutters,\n disableBreadcrumbGutter,\n title,\n container,\n children,\n breadcrumbs,\n mobileScrollingBreakpoint,\n variant = 'scrollable',\n ...props\n}) => {\n const userEvents = useUserEvents()\n const { pathname } = useLocation()\n\n useAsyncEffect(\n async () => {\n await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n },\n [pathname, title, userEvents],\n )\n\n return (\n <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n <Helmet title={title} />\n {container && container !== 'none'\n ? (\n <Container\n disableGutters={disableGutters}\n style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\n maxWidth={container}\n >\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n </Container>\n )\n : (\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n paddingX={disableGutters ? 0 : 1}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n )}\n </WebAppPageRoot>\n )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { WebAppPage, WebAppPageProps } from '../Page.tsx'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n <NotFound />\n </WebAppPage>\n)\n\n/** @deprecated use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":"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","names":["styled","FlexGrowCol","FlexRow","React","scrollableWrap","inset","position","fixedWrap","scrollableContent","fixedContent","WebAppBodyName","propsNotForwarded","Set","defaultStyledOptions","shouldForwardProp","prop","has","WebAppBodyRoot","styled","FlexGrowCol","name","slot","spacing","theme","mobileScrollingBreakpoint","variant","scrollable","unstable_sx","alignItems","gap","justifyContent","overflowX","overflowY","paddingY","breakpoints","down","WebAppBodyBreadcrumb","FlexRow","disableBreadcrumbGutter","marginX","WebAppBodyScrollableWrapper","WebAppBodyScrollable","props","scrollableContent","fixedContent","inset","position","WebAppBody","children","breadcrumbs","Divider","Paper","FlexCol","FlexGrowCol","FlexGrowRow","ApplicationAppBar","SystemToolbar","Footer","ErrorBoundary","React","forwardRef","Helmet","ButtonEx","React","Container","styled","useAsyncEffect","FlexGrowCol","useUserEvents","React","Helmet","useLocation","WebAppPageRoot","styled","FlexGrowCol","name","shouldForwardProp","propName","slot","theme","mobileScrollingBreakpoint","variant","props","scrollableWrap","fixedWrap","alignItems","justifyContent","maxWidth","breakpoints","down","inset","position","WebAppPage","disableGutters","disableBreadcrumbGutter","title","container","children","breadcrumbs","userEvents","useUserEvents","pathname","useLocation","useAsyncEffect","viewContent","path","location","React","Helmet","Container","style","display","flexDirection","flexGrow","WebAppBody","paddingX","FlexPage","WebAppErrorPage","error","props","React","WebAppPage","title","h1","p","ButtonEx","href","variant","ErrorPage","WebAppChrome","forwardRef","appName","appbar","children","errorBoundary","errorPage","footer","footerElevation","menuItems","navigationType","props","ref","React","FlexCol","id","alignItems","overflow","height","Helmet","defaultTitle","titleTemplate","meta","content","property","ApplicationAppBar","systemToolbar","SystemToolbar","undefined","FlexGrowRow","Divider","orientation","FlexGrowCol","justifyContent","ErrorBoundary","fallbackWithError","error","WebAppErrorPage","Paper","elevation","square","Footer","dynamicHeight","displayName","NotFound","React","WebAppNotFoundPage","title","props","React","WebAppPage","NotFound","NotFoundPage"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["import type { Breakpoint } from '@mui/material'\nimport { styled } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nimport { fixedContent, scrollableContent } from './lib/index.ts'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const scrollable = variant === 'scrollable'\n return theme.unstable_sx({\n alignItems: 'stretch',\n gap: 1,\n justifyContent: 'flex-start',\n overflowX: 'visible',\n overflowY: scrollable ? 'scroll' : 'hidden',\n paddingY: spacing,\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n overflowY: 'scroll',\n },\n })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n theme.unstable_sx({\n justifyContent: 'start',\n marginX: disableBreadcrumbGutter ? 0 : spacing,\n }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n name: WebAppBodyName,\n slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const props = variant === 'scrollable' ? scrollableContent : fixedContent\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 'unset',\n position: 'relative',\n },\n }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n breadcrumbs?: ReactNode\n disableBreadcrumbGutter?: boolean\n mobileScrollingBreakpoint?: Breakpoint\n spacing?: string | number\n variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n children,\n breadcrumbs,\n disableBreadcrumbGutter,\n mobileScrollingBreakpoint,\n spacing = 1,\n variant,\n ...props\n}) => {\n return (\n <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n {breadcrumbs\n ? (\n <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\n )\n : null}\n <WebAppBodyScrollableWrapper>\n <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n {children}\n </WebAppBodyScrollable>\n </WebAppBodyScrollableWrapper>\n </WebAppBodyRoot>\n )\n}\n","import type { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n inset: 0,\n position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n inset: 'unset',\n position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = {\n ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n ...scrollableWrap,\n} as const\n","import { Divider, Paper } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport type { WebAppNavigationType } from '@xyo-network/react-app-settings'\nimport { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport { ErrorBoundary } from '@xyo-network/react-shared'\nimport type { ReactNode } from 'react'\nimport React, { forwardRef } from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage.tsx'\n\nexport interface WebAppChromeProps extends FlexBoxProps {\n appName: string\n appbar?: ReactNode\n errorBoundary?: boolean\n errorPage?: ReactNode\n footer?: ReactNode\n footerElevation?: number\n menuItems?: ReactNode\n navigationType?: WebAppNavigationType\n}\n\nexport const WebAppChrome = forwardRef<HTMLDivElement, WebAppChromeProps>(\n ({ appName, appbar, children, errorBoundary, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props }, ref) => {\n return (\n <FlexCol id=\"web-chrome-flex\" alignItems=\"stretch\" overflow=\"hidden\" height=\"100vh\" ref={ref} {...props}>\n <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>\n <meta content=\"website\" property=\"og:type\" />\n </Helmet>\n {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}\n <FlexGrowRow id=\"sidebar-nav-flex\" overflow=\"hidden\" alignItems=\"stretch\">\n {navigationType === 'menu'\n ? null\n : (\n <>\n {menuItems}\n <Divider orientation=\"vertical\" />\n </>\n )}\n <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n {errorBoundary\n ? (\n <ErrorBoundary\n fallbackWithError={(error) => {\n return errorPage ?? <WebAppErrorPage error={error} />\n }}\n >\n {children}\n </ErrorBoundary>\n )\n : children}\n </FlexGrowCol>\n </FlexGrowRow>\n <FlexCol id=\"footer-flex\" alignItems=\"stretch\">\n <Paper elevation={footerElevation} square>\n {footer ?? <Footer dynamicHeight />}\n </Paper>\n </FlexCol>\n </FlexCol>\n )\n },\n)\n\nWebAppChrome.displayName = 'WebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\nimport React from 'react'\n\nimport type { WebAppPageProps } from './Page.tsx'\nimport { WebAppPage } from './Page.tsx'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n <h1>Oops! Something went wrong!</h1>\n <p>{`${error}`}</p>\n <ButtonEx href=\"/\" variant=\"contained\">\n Homepage\n </ButtonEx>\n </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import type { ContainerProps } from '@mui/material'\nimport { Container, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport type { WithChildren } from '@xylabs/react-shared'\nimport React from 'react'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport type { WebAppBodyProps } from './Body.tsx'\nimport { WebAppBody } from './Body.tsx'\nimport { fixedWrap, scrollableWrap } from './lib/index.ts'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n name: 'WebAppPage',\n shouldForwardProp: propName => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n maxWidth: '100vw',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 0,\n position: 'absolute',\n },\n }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n container?: ContainerProps['maxWidth'] | 'none'\n disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({\n disableGutters,\n disableBreadcrumbGutter,\n title,\n container,\n children,\n breadcrumbs,\n mobileScrollingBreakpoint,\n variant = 'scrollable',\n ...props\n}) => {\n const userEvents = useUserEvents()\n const { pathname } = useLocation()\n\n useAsyncEffect(\n async () => {\n await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n },\n [pathname, title, userEvents],\n )\n\n return (\n <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n <Helmet title={title} />\n {container && container !== 'none'\n ? (\n <Container\n disableGutters={disableGutters}\n style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\n maxWidth={container}\n >\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n </Container>\n )\n : (\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n paddingX={disableGutters ? 0 : 1}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n )}\n </WebAppPageRoot>\n )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport type { WebAppPageProps } from '../Page.tsx'\nimport { WebAppPage } from '../Page.tsx'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n <NotFound />\n </WebAppPage>\n)\n\n/** @deprecated use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":"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","names":["styled","FlexGrowCol","FlexRow","React","scrollableWrap","inset","position","fixedWrap","scrollableContent","fixedContent","WebAppBodyName","propsNotForwarded","Set","defaultStyledOptions","shouldForwardProp","prop","has","WebAppBodyRoot","styled","FlexGrowCol","name","slot","spacing","theme","mobileScrollingBreakpoint","variant","scrollable","unstable_sx","alignItems","gap","justifyContent","overflowX","overflowY","paddingY","breakpoints","down","WebAppBodyBreadcrumb","FlexRow","disableBreadcrumbGutter","marginX","WebAppBodyScrollableWrapper","WebAppBodyScrollable","props","scrollableContent","fixedContent","inset","position","WebAppBody","children","breadcrumbs","Divider","Paper","FlexCol","FlexGrowCol","FlexGrowRow","ApplicationAppBar","SystemToolbar","Footer","ErrorBoundary","React","forwardRef","Helmet","ButtonEx","React","Container","styled","useAsyncEffect","FlexGrowCol","useUserEvents","React","Helmet","useLocation","WebAppPageRoot","styled","FlexGrowCol","name","shouldForwardProp","propName","slot","theme","mobileScrollingBreakpoint","variant","props","scrollableWrap","fixedWrap","alignItems","justifyContent","maxWidth","breakpoints","down","inset","position","WebAppPage","disableGutters","disableBreadcrumbGutter","title","container","children","breadcrumbs","userEvents","useUserEvents","pathname","useLocation","useAsyncEffect","viewContent","path","location","React","Helmet","Container","style","display","flexDirection","flexGrow","WebAppBody","paddingX","FlexPage","WebAppErrorPage","error","props","React","WebAppPage","title","h1","p","ButtonEx","href","variant","ErrorPage","WebAppChrome","forwardRef","appName","appbar","children","errorBoundary","errorPage","footer","footerElevation","menuItems","navigationType","props","ref","React","FlexCol","id","alignItems","overflow","height","Helmet","defaultTitle","titleTemplate","meta","content","property","ApplicationAppBar","systemToolbar","SystemToolbar","undefined","FlexGrowRow","Divider","orientation","FlexGrowCol","justifyContent","ErrorBoundary","fallbackWithError","error","WebAppErrorPage","Paper","elevation","square","Footer","dynamicHeight","displayName","NotFound","React","WebAppNotFoundPage","title","props","React","WebAppPage","NotFound","NotFoundPage"]}
|
package/package.json
CHANGED
|
@@ -7,37 +7,37 @@
|
|
|
7
7
|
},
|
|
8
8
|
"bugs": {
|
|
9
9
|
"email": "support@xyo.network",
|
|
10
|
-
"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
|
|
10
|
+
"url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"@mui/icons-material": "^5.16.7",
|
|
14
14
|
"@mui/material": "^5.16.7",
|
|
15
15
|
"@mui/styles": "^5.16.7",
|
|
16
|
-
"@xylabs/react-async-effect": "^4.0.
|
|
17
|
-
"@xylabs/react-button": "^4.0.
|
|
18
|
-
"@xylabs/react-flexbox": "^4.0.
|
|
19
|
-
"@xylabs/react-pixel": "^4.0.
|
|
20
|
-
"@xylabs/react-shared": "^4.0.
|
|
21
|
-
"@xyo-network/react-app-settings": "^3.0.
|
|
22
|
-
"@xyo-network/react-appbar": "^3.0.
|
|
23
|
-
"@xyo-network/react-footer": "^3.0.
|
|
24
|
-
"@xyo-network/react-shared": "^3.0.
|
|
16
|
+
"@xylabs/react-async-effect": "^4.0.3",
|
|
17
|
+
"@xylabs/react-button": "^4.0.3",
|
|
18
|
+
"@xylabs/react-flexbox": "^4.0.3",
|
|
19
|
+
"@xylabs/react-pixel": "^4.0.3",
|
|
20
|
+
"@xylabs/react-shared": "^4.0.3",
|
|
21
|
+
"@xyo-network/react-app-settings": "^3.0.2",
|
|
22
|
+
"@xyo-network/react-appbar": "^3.0.2",
|
|
23
|
+
"@xyo-network/react-footer": "^3.0.2",
|
|
24
|
+
"@xyo-network/react-shared": "^3.0.2",
|
|
25
25
|
"react": "^18.3.1",
|
|
26
26
|
"react-dom": "^18.3.1",
|
|
27
27
|
"react-helmet": "^6.1.0",
|
|
28
28
|
"react-icons": "^5.3.0",
|
|
29
|
-
"react-router-dom": "^6.26.
|
|
29
|
+
"react-router-dom": "^6.26.1"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@storybook/react": "^8.2.9",
|
|
33
33
|
"@types/react-helmet": "^6.1.11",
|
|
34
|
-
"@xylabs/react-button": "^4.0.
|
|
35
|
-
"@xylabs/react-flexbox": "^4.0.
|
|
36
|
-
"@xylabs/react-link": "^4.0.
|
|
37
|
-
"@xylabs/react-pixel": "^4.0.
|
|
38
|
-
"@xylabs/react-shared": "^4.0.
|
|
39
|
-
"@xylabs/ts-scripts-yarn3": "^4.0.0-rc.
|
|
40
|
-
"@xylabs/tsconfig-react": "^4.0.0-rc.
|
|
34
|
+
"@xylabs/react-button": "^4.0.3",
|
|
35
|
+
"@xylabs/react-flexbox": "^4.0.3",
|
|
36
|
+
"@xylabs/react-link": "^4.0.3",
|
|
37
|
+
"@xylabs/react-pixel": "^4.0.3",
|
|
38
|
+
"@xylabs/react-shared": "^4.0.3",
|
|
39
|
+
"@xylabs/ts-scripts-yarn3": "^4.0.0-rc.20",
|
|
40
|
+
"@xylabs/tsconfig-react": "^4.0.0-rc.20",
|
|
41
41
|
"typescript": "^5.5.4"
|
|
42
42
|
},
|
|
43
43
|
"description": "Common React library for all XYO projects that use React",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
},
|
|
68
68
|
"repository": {
|
|
69
69
|
"type": "git",
|
|
70
|
-
"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
|
|
70
|
+
"url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
|
|
71
71
|
},
|
|
72
72
|
"scripts": {
|
|
73
73
|
"lint-pkg": "npmPkgJsonLint .",
|
|
@@ -75,6 +75,6 @@
|
|
|
75
75
|
},
|
|
76
76
|
"sideEffects": false,
|
|
77
77
|
"types": "dist/browser/index.d.ts",
|
|
78
|
-
"version": "3.0.
|
|
78
|
+
"version": "3.0.2",
|
|
79
79
|
"type": "module"
|
|
80
80
|
}
|
package/src/components/Body.tsx
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import { Breakpoint
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
1
|
+
import type { Breakpoint } from '@mui/material'
|
|
2
|
+
import { styled } from '@mui/material'
|
|
3
|
+
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
4
|
+
import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
|
|
5
|
+
import type { ReactNode } from 'react'
|
|
6
|
+
import React from 'react'
|
|
4
7
|
|
|
5
8
|
import { fixedContent, scrollableContent } from './lib/index.ts'
|
|
6
9
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Breadcrumbs, List } from '@mui/material'
|
|
2
|
-
import { Meta, StoryFn } from '@storybook/react'
|
|
2
|
+
import type { Meta, StoryFn } from '@storybook/react'
|
|
3
3
|
import { FlexRow } from '@xylabs/react-flexbox'
|
|
4
4
|
import { LinkEx } from '@xylabs/react-link'
|
|
5
5
|
import { MenuListItemContainer } from '@xyo-network/react-appbar'
|
|
@@ -7,7 +7,8 @@ import React from 'react'
|
|
|
7
7
|
import { BrowserRouter } from 'react-router-dom'
|
|
8
8
|
|
|
9
9
|
import { WebAppChrome } from './Chrome.tsx'
|
|
10
|
-
import {
|
|
10
|
+
import type { WebAppPageProps } from './Page.tsx'
|
|
11
|
+
import { WebAppPage } from './Page.tsx'
|
|
11
12
|
|
|
12
13
|
const StorybookEntry = {
|
|
13
14
|
argTypes: {},
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { Divider, Paper } from '@mui/material'
|
|
2
|
-
import { FlexBoxProps
|
|
3
|
-
import {
|
|
2
|
+
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
3
|
+
import { FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'
|
|
4
|
+
import type { WebAppNavigationType } from '@xyo-network/react-app-settings'
|
|
4
5
|
import { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'
|
|
5
6
|
import { Footer } from '@xyo-network/react-footer'
|
|
6
7
|
import { ErrorBoundary } from '@xyo-network/react-shared'
|
|
7
|
-
import
|
|
8
|
+
import type { ReactNode } from 'react'
|
|
9
|
+
import React, { forwardRef } from 'react'
|
|
8
10
|
import { Helmet } from 'react-helmet'
|
|
9
11
|
|
|
10
12
|
import { WebAppErrorPage } from './ErrorPage.tsx'
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { ButtonEx } from '@xylabs/react-button'
|
|
2
2
|
import React from 'react'
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import type { WebAppPageProps } from './Page.tsx'
|
|
5
|
+
import { WebAppPage } from './Page.tsx'
|
|
5
6
|
|
|
6
7
|
export interface WebAppErrorPageProps extends WebAppPageProps {
|
|
7
8
|
error?: Error
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { NotFound } from '@xyo-network/react-shared'
|
|
2
2
|
import React from 'react'
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import type { WebAppPageProps } from '../Page.tsx'
|
|
5
|
+
import { WebAppPage } from '../Page.tsx'
|
|
5
6
|
|
|
6
7
|
export const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (
|
|
7
8
|
<WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>
|
package/src/components/Page.tsx
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { ContainerProps } from '@mui/material'
|
|
2
|
+
import { Container, styled } from '@mui/material'
|
|
2
3
|
import { useAsyncEffect } from '@xylabs/react-async-effect'
|
|
3
|
-
import { FlexBoxProps
|
|
4
|
+
import type { FlexBoxProps } from '@xylabs/react-flexbox'
|
|
5
|
+
import { FlexGrowCol } from '@xylabs/react-flexbox'
|
|
4
6
|
import { useUserEvents } from '@xylabs/react-pixel'
|
|
5
|
-
import { WithChildren } from '@xylabs/react-shared'
|
|
7
|
+
import type { WithChildren } from '@xylabs/react-shared'
|
|
6
8
|
import React from 'react'
|
|
7
9
|
import { Helmet } from 'react-helmet'
|
|
8
10
|
import { useLocation } from 'react-router-dom'
|
|
9
11
|
|
|
10
|
-
import {
|
|
12
|
+
import type { WebAppBodyProps } from './Body.tsx'
|
|
13
|
+
import { WebAppBody } from './Body.tsx'
|
|
11
14
|
import { fixedWrap, scrollableWrap } from './lib/index.ts'
|
|
12
15
|
|
|
13
16
|
const WebAppPageRoot = styled(FlexGrowCol, {
|
package/xy.config.ts
CHANGED