@xylabs/react-webapp 7.1.17 → 7.2.0

package/README.md

@@ -1,67 +1,27 @@
-[![logo][]](https://xylabs.com)
-
 # @xylabs/react-webapp
 
-[![npm-badge][]][npm-link]
-[![npm-downloads-badge][]][npm-link]
-[![jsdelivr-badge][]][jsdelivr-link]
-[![npm-license-badge][]](LICENSE)
-
-> XY Labs generalized React library 
-
-## Table of Contents
+[![npm][npm-badge]][npm-link]
 
--   [Description](#description)
--   [Install](#install)
--   [Maintainers](#maintainers)
--   [License](#license)
--   [Credits](#credits)
-
-## Description
-
-Common React code that is used throughout XYO projects that use React.
+> Common React library for all XY Labs projects that use React
 
 ## Install
 
-Using npm:
-
 ```sh
-npm i --save @xylabs/react-webapp
+npm install {{name}}
 ```
 
-Using yarn:
+or
 
 ```sh
-yarn add @xylabs/react-webapp
+yarn add {{name}}
 ```
 
-## Documentation
-[Developer Reference](https://xylabs.github.io/sdk-react)
-
-[Storybook](https://xylabs.github.io/sdk-react/storybook)
-
-## Maintainers
-
--   [Arie Trouw](https://github.com/arietrouw) ([arietrouw.com](https://arietrouw.com))
--   [Matt Jones](https://github.com/jonesmac)
--   [Joel Carter](https://github.com/JoelBCarter)
--   [Jordan Trouw](https://github.com/jordantrouw)
 
 ## License
 
-See the [LICENSE](LICENSE) file for license details
+See the [LICENSE](LICENSE) file for license rights and limitations (LGPL-3.0-only).
 
-## Credits
 
-[Made with 🔥and ❄️ by XY Labs](https://xylabs.com)
-
-[logo]: https://cdn.xy.company/img/brand/XYPersistentCompany_Logo_Icon_Colored.svg
 
 [npm-badge]: https://img.shields.io/npm/v/@xylabs/react-webapp.svg
 [npm-link]: https://www.npmjs.com/package/@xylabs/react-webapp
-
-[npm-downloads-badge]: https://img.shields.io/npm/dw/@xylabs/react-webapp
-[npm-license-badge]: https://img.shields.io/npm/l/@xylabs/react-webapp
-
-[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@xylabs/react-webapp/badge
-[jsdelivr-link]: https://www.jsdelivr.com/package/npm/@xylabs/react-webapp

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xylabs/react-webapp",
-  "version": "7.1.17",
+  "version": "7.2.0",
   "description": "Common React library for all XY Labs projects that use React",
   "keywords": [
     "utility",
@@ -35,56 +35,92 @@
     },
     "./package.json": "./package.json"
   },
-  "module": "dist/browser/index.mjs",
-  "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
   "dependencies": {
-    "@xylabs/react-app-settings": "~7.1.17",
-    "@xylabs/react-appbar": "~7.1.17",
-    "@xylabs/react-async-effect": "~7.1.17",
-    "@xylabs/react-button": "~7.1.17",
-    "@xylabs/react-error": "~7.1.17",
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xylabs/react-pixel": "~7.1.17",
-    "@xylabs/react-shared": "~7.1.17",
-    "@xylabs/sdk-js": "~5.0.80",
-    "react-helmet": "~6.1.0"
+    "@xylabs/react-app-settings": "~7.2.0",
+    "@xylabs/react-appbar": "~7.2.0",
+    "@xylabs/react-async-effect": "~7.2.0",
+    "@xylabs/react-error": "~7.2.0",
+    "@xylabs/react-button": "~7.2.0",
+    "@xylabs/react-flexbox": "~7.2.0",
+    "@xylabs/react-shared": "~7.2.0",
+    "@xylabs/react-pixel": "~7.2.0"
   },
   "devDependencies": {
-    "@mui/icons-material": "~7.3.9",
-    "@mui/material": "~7.3.9",
-    "@storybook/react-vite": "~10.2.16",
+    "@mui/icons-material": "~7.3.10",
+    "@mui/material": "~7.3.10",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": ">=2.7.1 <3",
+    "@react-spring/web": "~10.0.3",
+    "@storybook/react-vite": "~10.3.6",
+    "@types/node": "~25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-helmet": "~6.1.11",
-    "@xylabs/react-button": "~7.1.17",
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xylabs/react-link": "~7.1.17",
-    "@xylabs/react-pixel": "~7.1.17",
-    "@xylabs/ts-scripts-yarn3": "~7.4.9",
-    "@xylabs/tsconfig": "~7.4.9",
-    "@xylabs/tsconfig-dom": "~7.4.9",
-    "@xylabs/tsconfig-react": "~7.4.9",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.1",
-    "storybook": "~10.2.16",
+    "@xylabs/pixel": "^5.1.0",
+    "@xylabs/sdk-js": "~5.1.0",
+    "@xylabs/toolchain": "~7.12.3",
+    "@xylabs/tsconfig": "~7.12.3",
+    "@xylabs/tsconfig-dom": "~7.12.3",
+    "@xylabs/tsconfig-react": "~7.12.3",
+    "async-mutex": ">=0.5.0 <0.6",
+    "bn.js": ">=5.2.3 <5.3",
+    "bowser": ">=2.14.1 <2.15",
+    "buffer": ">=6.0.3 <6.1",
+    "chalk": ">=5.6.2 <5.7",
+    "esbuild": "^0.28.0",
+    "eslint": ">=10.2.1 <11",
+    "ethers": ">=6.16.0 <7",
+    "fast-deep-equal": ">=3.1.3 <3.2",
+    "js-cookie": ">=3.0.5 <3.1",
+    "mixpanel-browser": "^2.78.0",
+    "pako": "~2.1.0",
+    "query-string": "~9.3.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-helmet": "~6.1.0",
+    "react-is": "^19.2.5",
+    "react-router-dom": "~7.14.2",
+    "recharts": "~3.8.1",
+    "spark-md5": ">=3.0.2 <3.1",
+    "storybook": "~10.3.6",
     "typescript": "^5.9.3",
-    "vite": "~7.3.1",
-    "zod": "^4.3.6"
+    "vite": "~8.0.10",
+    "zod": "^4.4.3",
+    "@xylabs/react-link": "~7.2.0"
   },
   "peerDependencies": {
-    "@mui/icons-material": ">=6 <8",
-    "@mui/material": ">=6 <8",
-    "react": "^19",
-    "react-dom": "^19",
-    "react-router-dom": "^7",
-    "zod": "^4"
+    "@mui/icons-material": ">=7.3.10 <7.4",
+    "@mui/material": ">=7.3.10 <7.4",
+    "@opentelemetry/api": ">=1.9.1 <2",
+    "@opentelemetry/sdk-trace-base": ">=2.7.1 <3",
+    "@react-spring/web": ">=10.0.3 <10.1",
+    "@xylabs/pixel": ">=5.1.0 <6",
+    "@xylabs/sdk-js": ">=5.1.0 <5.2",
+    "async-mutex": ">=0.5.0 <1",
+    "bn.js": ">=5.2.3 <6",
+    "bowser": ">=2.14.1 <3",
+    "buffer": ">=6.0.3 <7",
+    "chalk": ">=5.6.2 <6",
+    "ethers": ">=6.16.0 <7",
+    "fast-deep-equal": ">=3.1.3 <4",
+    "js-cookie": ">=3.0.5 <4",
+    "mixpanel-browser": ">=2.78.0 <3",
+    "pako": ">=2.1.0 <2.2",
+    "query-string": ">=9.3.1 <9.4",
+    "react": ">=19.2.5 <20",
+    "react-dom": ">=19.2.5 <20",
+    "react-helmet": ">=6.1.0 <6.2",
+    "react-is": ">=19.2.5 <20",
+    "react-router-dom": ">=7.14.2 <7.15",
+    "recharts": ">=3.8.1 <3.9",
+    "spark-md5": ">=3.0.2 <4",
+    "zod": ">=4.4.3 <5"
   },
   "publishConfig": {
     "access": "public"
   },
   "docs": "dist/docs.json"
-}
+}

package/src/components/Body.tsx

@@ -1,102 +0,0 @@
-import type { Breakpoint } from '@mui/material'
-import { styled } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
-import type { ReactNode } from 'react'
-import React from 'react'
-
-import { fixedContent, scrollableContent } from './lib/index.ts'
-
-const WebAppBodyName = 'WebAppBody'
-const propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])
-const defaultStyledOptions = { shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop) }
-
-const WebAppBodyRoot = styled(FlexGrowCol, {
-  ...defaultStyledOptions,
-  name: WebAppBodyName,
-  slot: 'Root',
-})<WebAppBodyProps>(({
-  spacing, theme, mobileScrollingBreakpoint = 'sm', variant,
-}) => {
-  const scrollable = variant === 'scrollable'
-  return theme.unstable_sx({
-    alignItems: 'stretch',
-    gap: 1,
-    justifyContent: 'flex-start',
-    overflowX: 'visible',
-    overflowY: scrollable ? 'scroll' : 'hidden',
-    paddingY: spacing,
-    [theme.breakpoints.down(mobileScrollingBreakpoint)]: { overflowY: 'scroll' },
-  })
-})
-
-const WebAppBodyBreadcrumb = styled(FlexRow, {
-  ...defaultStyledOptions,
-  name: WebAppBodyName,
-  slot: 'Breadcrumb',
-})<WebAppBodyProps>(({
-  theme, disableBreadcrumbGutter, spacing,
-}) =>
-  theme.unstable_sx({
-    justifyContent: 'start',
-    marginX: disableBreadcrumbGutter ? 0 : spacing,
-  }))
-
-const WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
-  name: WebAppBodyName,
-  slot: 'ScrollableWrapper',
-})<WebAppBodyProps>(() => ({ alignItems: 'stretch' }))
-
-const WebAppBodyScrollable = styled(FlexGrowCol, {
-  ...defaultStyledOptions,
-  name: WebAppBodyName,
-  slot: 'Scrollable',
-})<WebAppBodyProps>(({
-  theme, mobileScrollingBreakpoint = 'sm', variant,
-}) => {
-  const props = variant === 'scrollable' ? scrollableContent : fixedContent
-  return {
-    ...props,
-    alignItems: 'stretch',
-    justifyContent: 'start',
-    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
-      inset: 'unset',
-      position: 'relative',
-    },
-  }
-})
-
-export interface WebAppBodyProps extends FlexBoxProps {
-  breadcrumbs?: ReactNode
-  disableBreadcrumbGutter?: boolean
-  mobileScrollingBreakpoint?: Breakpoint
-  spacing?: string | number
-  variant?: 'scrollable' | 'fixed'
-}
-
-export const WebAppBody: React.FC<WebAppBodyProps> = ({
-  children,
-  breadcrumbs,
-  disableBreadcrumbGutter,
-  mobileScrollingBreakpoint,
-  spacing = 1,
-  variant,
-  ...props
-}) => {
-  return (
-    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>
-      {breadcrumbs
-        ? (
-            <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>
-              {breadcrumbs}
-            </WebAppBodyBreadcrumb>
-          )
-        : null}
-      <WebAppBodyScrollableWrapper>
-        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>
-          {children}
-        </WebAppBodyScrollable>
-      </WebAppBodyScrollableWrapper>
-    </WebAppBodyRoot>
-  )
-}

package/src/components/Chrome.stories.tsx

@@ -1,71 +0,0 @@
-import { Breadcrumbs, List } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { MenuListItemContainer } from '@xylabs/react-appbar'
-import { FlexRow } from '@xylabs/react-flexbox'
-import { LinkEx } from '@xylabs/react-link'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { WebAppChrome } from './Chrome.tsx'
-import type { WebAppPageProps } from './Page.tsx'
-import { WebAppPage } from './Page.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: WebAppChrome,
-  parameters: { docs: { page: null } },
-  title: 'webapp/WebAppChrome',
-} as Meta<typeof WebAppChrome>
-
-const rowArray = [32, 64, 128, 256, 512, 1024]
-
-const Children: React.FC<WebAppPageProps> = props => (
-  <WebAppPage
-    breadcrumbs={(
-      <Breadcrumbs>
-        <LinkEx>BreadCrumbs</LinkEx>
-      </Breadcrumbs>
-    )}
-    {...props}
-  >
-    {rowArray.map((height) => {
-      return (
-        <FlexRow key={height} height={height}>
-          {height}
-        </FlexRow>
-      )
-    })}
-  </WebAppPage>
-)
-
-const Template: StoryFn<typeof WebAppChrome> = (args) => {
-  return (
-    <BrowserRouter>
-      <WebAppChrome
-        menuItems={(
-          <List>
-            <MenuListItemContainer primary="Hello" />
-          </List>
-        )}
-        height="calc(100vh - 2rem)"
-        {...args}
-      >
-      </WebAppChrome>
-    </BrowserRouter>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const DefaultSideBar = Template.bind({})
-DefaultSideBar.args = { children: <Children />, navigationType: 'sidebar' }
-
-const WithFixedSizePage = Template.bind({})
-WithFixedSizePage.args = { children: <Children variant="fixed" />, navigationType: 'sidebar' }
-
-export {
-  Default, DefaultSideBar, WithFixedSizePage,
-}
-
-export default StorybookEntry

package/src/components/Chrome.tsx

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

package/src/components/ErrorPage.tsx

@@ -1,22 +0,0 @@
-import { ButtonEx } from '@xylabs/react-button'
-import React from 'react'
-
-import type { WebAppPageProps } from './Page.tsx'
-import { WebAppPage } from './Page.tsx'
-
-export interface WebAppErrorPageProps extends WebAppPageProps {
-  error?: Error
-}
-
-export const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (
-  <WebAppPage title="Oops! Something went wrong" {...props}>
-    <h1>Oops! Something went wrong!</h1>
-    <p>{`${error}`}</p>
-    <ButtonEx href="/" variant="contained">
-      Homepage
-    </ButtonEx>
-  </WebAppPage>
-)
-
-/** @deprecated use WebAppErrorPage instead */
-export const ErrorPage = WebAppErrorPage

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

@@ -1,21 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { NotFound } from '@xylabs/react-shared'
-import React from 'react'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: NotFound,
-  parameters: { docs: { page: null } },
-  title: 'webapp/NotFound',
-} as Meta<typeof NotFound>
-
-const Template: StoryFn<typeof NotFound> = () => {
-  return <NotFound />
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-export { Default }
-
-export default StorybookEntry

package/src/components/NotFoundPage/Page.tsx

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

package/src/components/NotFoundPage/index.ts

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

package/src/components/Page.tsx

@@ -1,103 +0,0 @@
-import type { ContainerProps } from '@mui/material'
-import { Container, styled } from '@mui/material'
-import { useAsyncEffect } from '@xylabs/react-async-effect'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexGrowCol } from '@xylabs/react-flexbox'
-import { useUserEvents } from '@xylabs/react-pixel'
-import { isDefined } from '@xylabs/sdk-js'
-import type { PropsWithChildren } from 'react'
-import React from 'react'
-import { Helmet } from 'react-helmet'
-import { useLocation } from 'react-router-dom'
-
-import type { WebAppBodyProps } from './Body.tsx'
-import { WebAppBody } from './Body.tsx'
-import { fixedWrap, scrollableWrap } from './lib/index.ts'
-
-const WebAppPageRoot = styled(FlexGrowCol, {
-  name: 'WebAppPage',
-  shouldForwardProp: propName => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',
-  slot: 'Root',
-})<WebAppPageProps>(({
-  theme, mobileScrollingBreakpoint = 'sm', variant,
-}) => {
-  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap
-  return {
-    ...props,
-    alignItems: 'stretch',
-    justifyContent: 'start',
-    maxWidth: '100vw',
-    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
-      inset: 0,
-      position: 'absolute',
-    },
-  }
-})
-
-export interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {
-  container?: ContainerProps['maxWidth'] | 'none'
-  disableGutters?: boolean
-}
-
-export const WebAppPage: React.FC<PropsWithChildren<WebAppPageProps>> = ({
-  disableGutters,
-  disableBreadcrumbGutter,
-  title,
-  container,
-  children,
-  breadcrumbs,
-  mobileScrollingBreakpoint,
-  variant = 'scrollable',
-  ...props
-}) => {
-  const userEvents = useUserEvents()
-  const { pathname } = useLocation()
-
-  useAsyncEffect(
-    async () => {
-      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })
-    },
-    [pathname, title, userEvents],
-  )
-
-  return (
-    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>
-      <Helmet title={title} />
-      {isDefined(container) && container !== 'none'
-        ? (
-            <Container
-              disableGutters={disableGutters}
-              style={{
-                alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start',
-              }}
-              maxWidth={container}
-            >
-              <WebAppBody
-                disableBreadcrumbGutter={disableBreadcrumbGutter}
-                breadcrumbs={breadcrumbs}
-                mobileScrollingBreakpoint={mobileScrollingBreakpoint}
-                variant={variant}
-                {...props}
-              >
-                {children}
-              </WebAppBody>
-            </Container>
-          )
-        : (
-            <WebAppBody
-              disableBreadcrumbGutter={disableBreadcrumbGutter}
-              breadcrumbs={breadcrumbs}
-              mobileScrollingBreakpoint={mobileScrollingBreakpoint}
-              paddingX={disableGutters ? 0 : 1}
-              variant={variant}
-              {...props}
-            >
-              {children}
-            </WebAppBody>
-          )}
-    </WebAppPageRoot>
-  )
-}
-
-/** @deprecated use WebAppPagePage instead */
-export const FlexPage = WebAppPage

package/src/components/index.ts

@@ -1,5 +0,0 @@
-export * from './Body.tsx'
-export * from './Chrome.tsx'
-export * from './ErrorPage.tsx'
-export * from './NotFoundPage/index.ts'
-export * from './Page.tsx'

package/src/components/lib/cssValues.ts

@@ -1,16 +0,0 @@
-import type { CSSProperties } from 'react'
-
-export const scrollableWrap: CSSProperties = {
-  inset: 0,
-  position: 'absolute',
-} as const
-
-export const fixedWrap: CSSProperties = {
-  inset: 'unset',
-  position: 'relative',
-} as const
-
-// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles
-export const scrollableContent: CSSProperties = { ...fixedWrap } as const
-
-export const fixedContent: CSSProperties = { ...scrollableWrap } as const

package/src/components/lib/index.ts

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

package/src/index.ts

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