@xyo-network/react-webapp 2.64.7 → 2.64.9
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/components/Chrome.cjs +2 -2
- package/dist/browser/components/Chrome.cjs.map +1 -1
- package/dist/browser/components/Chrome.js +1 -1
- package/dist/browser/components/Chrome.js.map +1 -1
- package/dist/browser/components/ErrorPage.cjs +2 -2
- package/dist/browser/components/ErrorPage.cjs.map +1 -1
- package/dist/browser/components/ErrorPage.js +1 -1
- package/dist/browser/components/ErrorPage.js.map +1 -1
- package/dist/browser/components/NotFoundPage/Page.cjs +2 -2
- package/dist/browser/components/NotFoundPage/Page.cjs.map +1 -1
- package/dist/browser/components/NotFoundPage/Page.js +1 -1
- package/dist/browser/components/NotFoundPage/Page.js.map +1 -1
- package/dist/browser/components/NotFoundPage/index.cjs +2 -2
- package/dist/browser/components/NotFoundPage/index.cjs.map +1 -1
- package/dist/browser/components/NotFoundPage/index.js +1 -1
- package/dist/browser/components/NotFoundPage/index.js.map +1 -1
- package/dist/browser/components/Page.cjs +2 -2
- package/dist/browser/components/Page.cjs.map +1 -1
- package/dist/browser/components/Page.js +1 -1
- package/dist/browser/components/Page.js.map +1 -1
- package/dist/browser/components/index.cjs +2 -2
- package/dist/browser/components/index.cjs.map +1 -1
- package/dist/browser/components/index.js +1 -1
- package/dist/browser/components/index.js.map +1 -1
- package/dist/browser/index.cjs +2 -2
- package/dist/browser/index.cjs.map +1 -1
- package/dist/browser/index.js +1 -1
- package/dist/browser/index.js.map +1 -1
- package/dist/docs.json +39 -39
- package/dist/node/components/Chrome.cjs +2 -2
- package/dist/node/components/Chrome.cjs.map +1 -1
- package/dist/node/components/Chrome.js +1 -1
- package/dist/node/components/Chrome.js.map +1 -1
- package/dist/node/components/ErrorPage.cjs +2 -2
- package/dist/node/components/ErrorPage.cjs.map +1 -1
- package/dist/node/components/ErrorPage.js +1 -1
- package/dist/node/components/ErrorPage.js.map +1 -1
- package/dist/node/components/NotFoundPage/Page.cjs +2 -2
- package/dist/node/components/NotFoundPage/Page.cjs.map +1 -1
- package/dist/node/components/NotFoundPage/Page.js +1 -1
- package/dist/node/components/NotFoundPage/Page.js.map +1 -1
- package/dist/node/components/NotFoundPage/index.cjs +2 -2
- package/dist/node/components/NotFoundPage/index.cjs.map +1 -1
- package/dist/node/components/NotFoundPage/index.js +1 -1
- package/dist/node/components/NotFoundPage/index.js.map +1 -1
- package/dist/node/components/Page.cjs +2 -2
- package/dist/node/components/Page.cjs.map +1 -1
- package/dist/node/components/Page.js +1 -1
- package/dist/node/components/Page.js.map +1 -1
- package/dist/node/components/index.cjs +2 -2
- package/dist/node/components/index.cjs.map +1 -1
- package/dist/node/components/index.js +1 -1
- package/dist/node/components/index.js.map +1 -1
- package/dist/node/index.cjs +2 -2
- package/dist/node/index.cjs.map +1 -1
- package/dist/node/index.js +1 -1
- package/dist/node/index.js.map +1 -1
- package/package.json +12 -12
- package/src/components/Chrome.stories.tsx +1 -1
- package/src/components/Page.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ErrorPage.tsx","../../../src/components/Page.tsx","../../../src/components/Body.tsx","../../../src/components/lib/cssValues.ts"],"sourcesContent":["import { ButtonEx } from '@xylabs/react-button'\n\nimport { WebAppPage, WebAppPageProps } from './Page'\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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom-6'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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"],"mappings":"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","names":["styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx","jsxs"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ErrorPage.tsx","../../../src/components/Page.tsx","../../../src/components/Body.tsx","../../../src/components/lib/cssValues.ts"],"sourcesContent":["import { ButtonEx } from '@xylabs/react-button'\n\nimport { WebAppPage, WebAppPageProps } from './Page'\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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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"],"mappings":"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","names":["styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx","jsxs"]}
|
|
@@ -32,7 +32,7 @@ var import_react_async_effect = require("@xylabs/react-async-effect");
|
|
|
32
32
|
var import_react_flexbox2 = require("@xylabs/react-flexbox");
|
|
33
33
|
var import_react_pixel = require("@xylabs/react-pixel");
|
|
34
34
|
var import_react_helmet = require("react-helmet");
|
|
35
|
-
var
|
|
35
|
+
var import_react_router_dom = require("react-router-dom");
|
|
36
36
|
|
|
37
37
|
// src/components/Body.tsx
|
|
38
38
|
var import_material = require("@mui/material");
|
|
@@ -157,7 +157,7 @@ var WebAppPage = ({
|
|
|
157
157
|
...props
|
|
158
158
|
}) => {
|
|
159
159
|
const userEvents = (0, import_react_pixel.useUserEvents)();
|
|
160
|
-
const { pathname } = (0,
|
|
160
|
+
const { pathname } = (0, import_react_router_dom.useLocation)();
|
|
161
161
|
(0, import_react_async_effect.useAsyncEffect)(
|
|
162
162
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
163
163
|
async () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/NotFoundPage/Page.tsx","../../../../src/components/Page.tsx","../../../../src/components/Body.tsx","../../../../src/components/lib/cssValues.ts"],"sourcesContent":["import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\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","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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom-6'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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"],"mappings":"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","names":["import_material","import_react_flexbox","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/NotFoundPage/Page.tsx","../../../../src/components/Page.tsx","../../../../src/components/Body.tsx","../../../../src/components/lib/cssValues.ts"],"sourcesContent":["import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\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","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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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"],"mappings":"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","names":["import_material","import_react_flexbox","import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -7,7 +7,7 @@ import { useAsyncEffect } from "@xylabs/react-async-effect";
|
|
|
7
7
|
import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
|
|
8
8
|
import { useUserEvents } from "@xylabs/react-pixel";
|
|
9
9
|
import { Helmet } from "react-helmet";
|
|
10
|
-
import { useLocation } from "react-router-dom
|
|
10
|
+
import { useLocation } from "react-router-dom";
|
|
11
11
|
|
|
12
12
|
// src/components/Body.tsx
|
|
13
13
|
import { styled } from "@mui/material";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/NotFoundPage/Page.tsx","../../../../src/components/Page.tsx","../../../../src/components/Body.tsx","../../../../src/components/lib/cssValues.ts"],"sourcesContent":["import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\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","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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom-6'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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"],"mappings":"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","names":["styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/NotFoundPage/Page.tsx","../../../../src/components/Page.tsx","../../../../src/components/Body.tsx","../../../../src/components/lib/cssValues.ts"],"sourcesContent":["import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\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","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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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"],"mappings":"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","names":["styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx"]}
|
|
@@ -34,7 +34,7 @@ var import_react_async_effect = require("@xylabs/react-async-effect");
|
|
|
34
34
|
var import_react_flexbox2 = require("@xylabs/react-flexbox");
|
|
35
35
|
var import_react_pixel = require("@xylabs/react-pixel");
|
|
36
36
|
var import_react_helmet = require("react-helmet");
|
|
37
|
-
var
|
|
37
|
+
var import_react_router_dom = require("react-router-dom");
|
|
38
38
|
|
|
39
39
|
// src/components/Body.tsx
|
|
40
40
|
var import_material = require("@mui/material");
|
|
@@ -159,7 +159,7 @@ var WebAppPage = ({
|
|
|
159
159
|
...props
|
|
160
160
|
}) => {
|
|
161
161
|
const userEvents = (0, import_react_pixel.useUserEvents)();
|
|
162
|
-
const { pathname } = (0,
|
|
162
|
+
const { pathname } = (0, import_react_router_dom.useLocation)();
|
|
163
163
|
(0, import_react_async_effect.useAsyncEffect)(
|
|
164
164
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
165
165
|
async () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/NotFoundPage/index.ts","../../../../src/components/NotFoundPage/Page.tsx","../../../../src/components/Page.tsx","../../../../src/components/Body.tsx","../../../../src/components/lib/cssValues.ts"],"sourcesContent":["export * from './Page'\n","import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\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","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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom-6'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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"],"mappings":"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","names":["import_material","import_react_flexbox","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/NotFoundPage/index.ts","../../../../src/components/NotFoundPage/Page.tsx","../../../../src/components/Page.tsx","../../../../src/components/Body.tsx","../../../../src/components/lib/cssValues.ts"],"sourcesContent":["export * from './Page'\n","import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\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","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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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"],"mappings":"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","names":["import_material","import_react_flexbox","import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -7,7 +7,7 @@ import { useAsyncEffect } from "@xylabs/react-async-effect";
|
|
|
7
7
|
import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
|
|
8
8
|
import { useUserEvents } from "@xylabs/react-pixel";
|
|
9
9
|
import { Helmet } from "react-helmet";
|
|
10
|
-
import { useLocation } from "react-router-dom
|
|
10
|
+
import { useLocation } from "react-router-dom";
|
|
11
11
|
|
|
12
12
|
// src/components/Body.tsx
|
|
13
13
|
import { styled } from "@mui/material";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/NotFoundPage/Page.tsx","../../../../src/components/Page.tsx","../../../../src/components/Body.tsx","../../../../src/components/lib/cssValues.ts"],"sourcesContent":["import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\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","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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom-6'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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"],"mappings":"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","names":["styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/NotFoundPage/Page.tsx","../../../../src/components/Page.tsx","../../../../src/components/Body.tsx","../../../../src/components/lib/cssValues.ts"],"sourcesContent":["import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\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","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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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"],"mappings":"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","names":["styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx"]}
|
|
@@ -29,7 +29,7 @@ var import_react_async_effect = require("@xylabs/react-async-effect");
|
|
|
29
29
|
var import_react_flexbox2 = require("@xylabs/react-flexbox");
|
|
30
30
|
var import_react_pixel = require("@xylabs/react-pixel");
|
|
31
31
|
var import_react_helmet = require("react-helmet");
|
|
32
|
-
var
|
|
32
|
+
var import_react_router_dom = require("react-router-dom");
|
|
33
33
|
|
|
34
34
|
// src/components/Body.tsx
|
|
35
35
|
var import_material = require("@mui/material");
|
|
@@ -154,7 +154,7 @@ var WebAppPage = ({
|
|
|
154
154
|
...props
|
|
155
155
|
}) => {
|
|
156
156
|
const userEvents = (0, import_react_pixel.useUserEvents)();
|
|
157
|
-
const { pathname } = (0,
|
|
157
|
+
const { pathname } = (0, import_react_router_dom.useLocation)();
|
|
158
158
|
(0, import_react_async_effect.useAsyncEffect)(
|
|
159
159
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
160
160
|
async () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Page.tsx","../../../src/components/Body.tsx","../../../src/components/lib/cssValues.ts"],"sourcesContent":["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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Page.tsx","../../../src/components/Body.tsx","../../../src/components/lib/cssValues.ts"],"sourcesContent":["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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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"],"mappings":"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","names":["import_material","import_react_flexbox","import_jsx_runtime"]}
|
|
@@ -4,7 +4,7 @@ import { useAsyncEffect } from "@xylabs/react-async-effect";
|
|
|
4
4
|
import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
|
|
5
5
|
import { useUserEvents } from "@xylabs/react-pixel";
|
|
6
6
|
import { Helmet } from "react-helmet";
|
|
7
|
-
import { useLocation } from "react-router-dom
|
|
7
|
+
import { useLocation } from "react-router-dom";
|
|
8
8
|
|
|
9
9
|
// src/components/Body.tsx
|
|
10
10
|
import { styled } from "@mui/material";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Page.tsx","../../../src/components/Body.tsx","../../../src/components/lib/cssValues.ts"],"sourcesContent":["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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Page.tsx","../../../src/components/Body.tsx","../../../src/components/lib/cssValues.ts"],"sourcesContent":["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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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 { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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"],"mappings":"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","names":["styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol"]}
|
|
@@ -141,7 +141,7 @@ var import_react_async_effect = require("@xylabs/react-async-effect");
|
|
|
141
141
|
var import_react_flexbox2 = require("@xylabs/react-flexbox");
|
|
142
142
|
var import_react_pixel = require("@xylabs/react-pixel");
|
|
143
143
|
var import_react_helmet = require("react-helmet");
|
|
144
|
-
var
|
|
144
|
+
var import_react_router_dom = require("react-router-dom");
|
|
145
145
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
146
146
|
var WebAppPageRoot = (0, import_material2.styled)(import_react_flexbox2.FlexGrowCol, {
|
|
147
147
|
name: "WebAppPage",
|
|
@@ -172,7 +172,7 @@ var WebAppPage = ({
|
|
|
172
172
|
...props
|
|
173
173
|
}) => {
|
|
174
174
|
const userEvents = (0, import_react_pixel.useUserEvents)();
|
|
175
|
-
const { pathname } = (0,
|
|
175
|
+
const { pathname } = (0, import_react_router_dom.useLocation)();
|
|
176
176
|
(0, import_react_async_effect.useAsyncEffect)(
|
|
177
177
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
178
178
|
async () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/index.ts","../../../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":["export * from './Body'\nexport * from './Chrome'\nexport * from './ErrorPage'\nexport * from './NotFoundPage'\nexport * from './Page'\n","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'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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 { forwardRef, ReactNode } from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage'\n\nexport interface WebAppChromeProps extends FlexBoxProps {\n appName: string\n appbar?: ReactNode\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, 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 <>\n {menuItems}\n <Divider orientation=\"vertical\" />\n </>\n ) : null}\n <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n <ErrorBoundary\n fallbackWithError={(error) => {\n return errorPage ?? <WebAppErrorPage error={error} />\n }}\n >\n {children}\n </ErrorBoundary>\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'\n\nimport { WebAppPage, WebAppPageProps } from './Page'\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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom-6'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\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":["import_material","import_react_flexbox","import_react_helmet","import_material","import_react_flexbox","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_react_shared","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/index.ts","../../../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":["export * from './Body'\nexport * from './Chrome'\nexport * from './ErrorPage'\nexport * from './NotFoundPage'\nexport * from './Page'\n","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'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(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 <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\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 { forwardRef, ReactNode } from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage'\n\nexport interface WebAppChromeProps extends FlexBoxProps {\n appName: string\n appbar?: ReactNode\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, 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 <>\n {menuItems}\n <Divider orientation=\"vertical\" />\n </>\n ) : null}\n <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n <ErrorBoundary\n fallbackWithError={(error) => {\n return errorPage ?? <WebAppErrorPage error={error} />\n }}\n >\n {children}\n </ErrorBoundary>\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'\n\nimport { WebAppPage, WebAppPageProps } from './Page'\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 { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\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 // eslint-disable-next-line react-hooks/exhaustive-deps\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 <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 <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'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\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":["import_material","import_react_flexbox","import_react_helmet","import_material","import_react_flexbox","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_react_shared","import_jsx_runtime"]}
|