@xyo-network/react-webapp 2.25.30 → 2.25.31

package/dist/esm/components/WebAppChrome.d.ts

@@ -5,5 +5,6 @@ export interface WebAppChromeProps extends FlexBoxProps {
     footer?: ReactNode;
     appbar?: ReactNode;
     errorPage?: ReactNode;
+    footerElevation?: number;
 }
 export declare const WebAppChrome: React.FC<WebAppChromeProps>;

package/dist/esm/components/WebAppChrome.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CssBaseline } from '@mui/material';
+import { CssBaseline, Paper } from '@mui/material';
 import { FlexCol, FlexGrowCol, InvertableThemeProvider } from '@xylabs/sdk-react';
 import { ApplicationAppBar } from '@xyo-network/react-appbar';
 import { ErrorBoundary, ErrorPage, Footer, useAppSettings } from '@xyo-network/react-shared';
 import { appThemeOptions, partialDarkThemeOptions } from '@xyo-network/react-theme';
 import { Helmet } from 'react-helmet';
-export const WebAppChrome = ({ errorPage, appbar, footer, children, appName, ...props }) => {
+export const WebAppChrome = ({ footerElevation = 4, errorPage, appbar, footer, children, appName, ...props }) => {
     const { darkMode } = useAppSettings();
-    return (_jsxs(InvertableThemeProvider, { dark: darkMode, options: appThemeOptions, darkOptions: partialDarkThemeOptions, children: [_jsx(CssBaseline, {}), _jsx(Helmet, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: _jsx("meta", { content: "website", property: "og:type" }) }), _jsxs(FlexCol, { alignItems: "stretch", height: "100vh", ...props, children: [appbar ?? _jsx(ApplicationAppBar, {}), _jsx(FlexGrowCol, { overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch", children: _jsx(ErrorBoundary, { fallback: errorPage ?? _jsx(ErrorPage, {}), children: children }) }), footer ?? _jsx(Footer, { dynamicHeight: true })] })] }));
+    return (_jsxs(InvertableThemeProvider, { dark: darkMode, options: appThemeOptions, darkOptions: partialDarkThemeOptions, children: [_jsx(CssBaseline, {}), _jsx(Helmet, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: _jsx("meta", { content: "website", property: "og:type" }) }), _jsxs(FlexCol, { alignItems: "stretch", height: "100vh", ...props, children: [appbar ?? _jsx(ApplicationAppBar, {}), _jsx(FlexGrowCol, { overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch", children: _jsx(ErrorBoundary, { fallback: errorPage ?? _jsx(ErrorPage, {}), children: children }) }), _jsx(Paper, { elevation: footerElevation, square: true, children: footer ?? _jsx(Footer, { dynamicHeight: true }) })] })] }));
 };
 //# sourceMappingURL=WebAppChrome.js.map

package/dist/esm/components/WebAppChrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"WebAppChrome.js","sourceRoot":"","sources":["../../../src/components/WebAppChrome.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAgB,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AAC/F,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC5F,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AAEnF,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AASrC,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACtH,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAA;IAErC,OAAO,CACL,MAAC,uBAAuB,IAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,uBAAuB,aACrG,KAAC,WAAW,KAAG,EACf,KAAC,MAAM,IAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,YAC7D,eAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,GACtC,EACT,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,KAAK,KAAK,aACnD,MAAM,IAAI,KAAC,iBAAiB,KAAG,EAChC,KAAC,WAAW,IAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,YAC7E,KAAC,aAAa,IAAC,QAAQ,EAAE,SAAS,IAAI,KAAC,SAAS,KAAG,YAAG,QAAQ,GAAiB,GACnE,EACb,MAAM,IAAI,KAAC,MAAM,IAAC,aAAa,SAAG,IAC3B,IACc,CAC3B,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"WebAppChrome.js","sourceRoot":"","sources":["../../../src/components/WebAppChrome.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAgB,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AAC/F,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC5F,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AAEnF,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAUrC,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3I,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAA;IAErC,OAAO,CACL,MAAC,uBAAuB,IAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,uBAAuB,aACrG,KAAC,WAAW,KAAG,EACf,KAAC,MAAM,IAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,YAC7D,eAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,GACtC,EACT,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,KAAK,KAAK,aACnD,MAAM,IAAI,KAAC,iBAAiB,KAAG,EAChC,KAAC,WAAW,IAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,YAC7E,KAAC,aAAa,IAAC,QAAQ,EAAE,SAAS,IAAI,KAAC,SAAS,KAAG,YAAG,QAAQ,GAAiB,GACnE,EACd,KAAC,KAAK,IAAC,SAAS,EAAE,eAAe,EAAE,MAAM,kBACtC,MAAM,IAAI,KAAC,MAAM,IAAC,aAAa,SAAG,GAC7B,IACA,IACc,CAC3B,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -12,9 +12,9 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.8.0",
-    "@mui/lab": "^5.0.0-alpha.83",
-    "@mui/material": "^5.8.1",
+    "@mui/icons-material": "^5.8.2",
+    "@mui/lab": "^5.0.0-alpha.84",
+    "@mui/material": "^5.8.2",
     "@mui/styles": "^5.8.0",
     "@xylabs/pixel": "^1.3.7",
     "@xylabs/sdk-js": "^2.5.5",
@@ -22,19 +22,19 @@
     "@xyo-network/api": "^2.20.38",
     "@xyo-network/core": "^2.20.38",
     "@xyo-network/network": "^2.20.38",
-    "@xyo-network/react-appbar": "^2.25.30",
-    "@xyo-network/react-shared": "^2.25.30",
-    "@xyo-network/react-theme": "^2.25.30",
+    "@xyo-network/react-appbar": "^2.25.31",
+    "@xyo-network/react-shared": "^2.25.31",
+    "@xyo-network/react-theme": "^2.25.31",
     "lodash": "^4.17.21",
     "luxon": "^2.4.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-helmet": "^6.1.0",
-    "react-icons": "^4.3.1",
+    "react-icons": "^4.4.0",
     "react-json-view": "^1.21.3",
     "react-router-dom": "^6.3.0",
     "tslib": "^2.4.0",
-    "typedoc": "^0.22.15"
+    "typedoc": "^0.22.16"
   },
   "description": "Common React library for all XYO projects that use React",
   "devDependencies": {
@@ -115,6 +115,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.30",
+  "version": "2.25.31",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/WebAppChrome.stories.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable import/no-internal-modules */
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FlexCol } from '@xylabs/sdk-react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { FlexPage } from '../../../shared/src'
+import { WebAppChrome } from './WebAppChrome'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: WebAppChrome,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'webapp/WebAppChrome',
+} as ComponentMeta<typeof WebAppChrome>
+
+const Template: ComponentStory<typeof WebAppChrome> = (args) => {
+  return (
+    <FlexCol height="80vh" alignItems="stretch" overflow="hidden">
+      <BrowserRouter>
+        <WebAppChrome {...args}>
+          <FlexPage />
+        </WebAppChrome>
+      </BrowserRouter>
+    </FlexCol>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/WebAppChrome.tsx

@@ -1,4 +1,4 @@
-import { CssBaseline } from '@mui/material'
+import { CssBaseline, Paper } from '@mui/material'
 import { FlexBoxProps, FlexCol, FlexGrowCol, InvertableThemeProvider } from '@xylabs/sdk-react'
 import { ApplicationAppBar } from '@xyo-network/react-appbar'
 import { ErrorBoundary, ErrorPage, Footer, useAppSettings } from '@xyo-network/react-shared'
@@ -11,9 +11,10 @@ export interface WebAppChromeProps extends FlexBoxProps {
   footer?: ReactNode
   appbar?: ReactNode
   errorPage?: ReactNode
+  footerElevation?: number
 }
 
-export const WebAppChrome: React.FC<WebAppChromeProps> = ({ errorPage, appbar, footer, children, appName, ...props }) => {
+export const WebAppChrome: React.FC<WebAppChromeProps> = ({ footerElevation = 4, errorPage, appbar, footer, children, appName, ...props }) => {
   const { darkMode } = useAppSettings()
 
   return (
@@ -27,7 +28,9 @@ export const WebAppChrome: React.FC<WebAppChromeProps> = ({ errorPage, appbar, f
         <FlexGrowCol overflow="hidden" justifyContent="flex-start" alignItems="stretch">
           <ErrorBoundary fallback={errorPage ?? <ErrorPage />}>{children}</ErrorBoundary>
         </FlexGrowCol>
-        {footer ?? <Footer dynamicHeight />}
+        <Paper elevation={footerElevation} square>
+          {footer ?? <Footer dynamicHeight />}
+        </Paper>
       </FlexCol>
     </InvertableThemeProvider>
   )