@xyo-network/react-shared 2.28.8 → 2.28.11

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { AlertProps } from '@mui/material';
+import { XyoApiError } from '@xyo-network/api';
+export interface ApiErrorAlertProps extends AlertProps {
+    call?: XyoApiError;
+}
+declare const ApiErrorAlert: React.FC<ApiErrorAlertProps>;
+export { ApiErrorAlert };
+//# sourceMappingURL=ApiErrorAlert.d.ts.map

package/dist/esm/components/ApiErrorAlert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiErrorAlert.d.ts","sourceRoot":"","sources":["../../../src/components/ApiErrorAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,UAAU,EAA0B,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAW/C,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/esm/components/ApiErrorAlert.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, AlertTitle, Typography } from '@mui/material';
+const ApiErrorAlert = ({ call, ...props }) => {
+    return (_jsxs(Alert, { severity: "error", ...props, children: [_jsx(AlertTitle, { children: "Whoops! Something went wrong" }), _jsx(Typography, { sx: { wordBreak: 'break-all' }, children: call?.config?.url }), _jsx(Typography, { variant: "caption", mr: 0.5, fontWeight: "bold", children: "Error:" }), _jsx(Typography, { variant: "caption", children: call?.message })] }));
+};
+export { ApiErrorAlert };
+//# sourceMappingURL=ApiErrorAlert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiErrorAlert.js","sourceRoot":"","sources":["../../../src/components/ApiErrorAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAOzE,MAAM,aAAa,GAAiC,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACzE,OAAO,CACL,MAAC,KAAK,IAAC,QAAQ,EAAC,OAAO,KAAK,KAAK,aAC/B,KAAC,UAAU,+CAA0C,EACrD,KAAC,UAAU,IAAC,EAAE,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,YAAG,IAAI,EAAE,MAAM,EAAE,GAAG,GAAc,EAC5E,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAE,GAAG,EAAE,UAAU,EAAC,MAAM,uBAE3C,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,YAAE,IAAI,EAAE,OAAO,GAAc,IACpD,CACT,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

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

@@ -2,6 +2,7 @@ import { Component, ErrorInfo, ReactNode } from 'react';
 export interface ErrorBoundaryProps {
     children: ReactNode;
     fallback?: ReactNode;
+    fallbackWithError?: (error: Error) => ReactNode;
 }
 export interface ErrorBoundaryState {
     error?: Error;

package/dist/esm/components/ErrorBoundry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundry.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBoundry.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEvD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,qBAAa,aAAc,SAAQ,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBACtE,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;;;IAI5C,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAIpD,MAAM;CAcP"}
+{"version":3,"file":"ErrorBoundry.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBoundry.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEvD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IAEnB,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,CAAA;CAChD;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,qBAAa,aAAc,SAAQ,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBACtE,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;;;IAI5C,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAIpD,MAAM;CAiBP"}

package/dist/esm/components/ErrorBoundry.js

@@ -15,6 +15,9 @@ export class ErrorBoundary extends Component {
     }
     render() {
         if (this.state.error) {
+            if (this.props.fallbackWithError) {
+                return this.props.fallbackWithError(this.state.error);
+            }
             return (this.props.fallback ?? (_jsxs(FlexCol, { children: [_jsx(Typography, { variant: "h1", children: "Something went wrong." }), _jsxs(Typography, { variant: "body1", children: ["[", this.state.error?.message, "]"] })] })));
         }
         return this.props.children;

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundry.js","sourceRoot":"","sources":["../../../src/components/ErrorBoundry.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAA;AAWvD,MAAM,OAAO,aAAc,SAAQ,SAAiD;IAClF,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,CAAA;IACnC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO,EAAE,KAAK,EAAE,CAAA;IAClB,CAAC;IAED,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QAClD,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,KAAK,SAAS,EAAE,CAAC,CAAA;IACzC,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACpB,OAAO,CACL,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CACrB,MAAC,OAAO,eACN,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,sCAAmC,EAC3D,MAAC,UAAU,IAAC,OAAO,EAAC,OAAO,kBAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,SAAe,IAC9D,CACX,CACF,CAAA;SACF;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IAC5B,CAAC;CACF"}
+{"version":3,"file":"ErrorBoundry.js","sourceRoot":"","sources":["../../../src/components/ErrorBoundry.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAA;AAcvD,MAAM,OAAO,aAAc,SAAQ,SAAiD;IAClF,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,CAAA;IACnC,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO,EAAE,KAAK,EAAE,CAAA;IAClB,CAAC;IAED,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QAClD,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,KAAK,SAAS,EAAE,CAAC,CAAA;IACzC,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACpB,IAAI,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE;gBAChC,OAAO,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;aACtD;YACD,OAAO,CACL,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CACrB,MAAC,OAAO,eACN,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,sCAAmC,EAC3D,MAAC,UAAU,IAAC,OAAO,EAAC,OAAO,kBAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,SAAe,IAC9D,CACX,CACF,CAAA;SACF;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IAC5B,CAAC;CACF"}

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

@@ -1,4 +1,5 @@
 export * from './Ampersand';
+export * from './ApiErrorAlert';
 export * from './BasicHero';
 export * from './ErrorBoundry';
 export * from './JsonRouteWrapper';

package/dist/esm/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}

package/dist/esm/components/index.js

@@ -1,4 +1,5 @@
 export * from './Ampersand';
+export * from './ApiErrorAlert';
 export * from './BasicHero';
 export * from './ErrorBoundry';
 export * from './JsonRouteWrapper';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}

package/package.json

@@ -23,7 +23,7 @@
     "@xylabs/react-link": "^2.14.13",
     "@xylabs/react-quick-tip-button": "^2.14.13",
     "@xylabs/react-shared": "^2.14.13",
-    "@xyo-network/core": "^2.26.18",
+    "@xyo-network/core": "^2.26.20",
     "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -35,9 +35,9 @@
   "devDependencies": {
     "@storybook/react": "^6.5.10",
     "@xylabs/pixel": "^1.4.5",
-    "@xylabs/tsconfig-dom": "^2.5.121",
-    "@xyo-network/api": "^2.26.18",
-    "@xyo-network/react-storybook": "^2.28.8"
+    "@xylabs/tsconfig-dom": "^2.5.123",
+    "@xyo-network/api": "^2.26.20",
+    "@xyo-network/react-storybook": "^2.28.11"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -81,5 +81,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.28.8"
+  "version": "2.28.11"
 }

package/src/components/ApiErrorAlert.tsx

@@ -0,0 +1,21 @@
+import { Alert, AlertProps, AlertTitle, Typography } from '@mui/material'
+import { XyoApiError } from '@xyo-network/api'
+
+export interface ApiErrorAlertProps extends AlertProps {
+  call?: XyoApiError
+}
+
+const ApiErrorAlert: React.FC<ApiErrorAlertProps> = ({ call, ...props }) => {
+  return (
+    <Alert severity="error" {...props}>
+      <AlertTitle>Whoops! Something went wrong</AlertTitle>
+      <Typography sx={{ wordBreak: 'break-all' }}>{call?.config?.url}</Typography>
+      <Typography variant="caption" mr={0.5} fontWeight="bold">
+        Error:
+      </Typography>
+      <Typography variant="caption">{call?.message}</Typography>
+    </Alert>
+  )
+}
+
+export { ApiErrorAlert }

package/src/components/ErrorBoundry.tsx

@@ -4,7 +4,10 @@ import { Component, ErrorInfo, ReactNode } from 'react'
 
 export interface ErrorBoundaryProps {
   children: ReactNode
+  // fallback as a static ReactNode value
   fallback?: ReactNode
+  // fallback element that can receive the error as a prop
+  fallbackWithError?: (error: Error) => ReactNode
 }
 
 export interface ErrorBoundaryState {
@@ -27,6 +30,9 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
   render() {
     if (this.state.error) {
+      if (this.props.fallbackWithError) {
+        return this.props.fallbackWithError(this.state.error)
+      }
       return (
         this.props.fallback ?? (
           <FlexCol>

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './Ampersand'
+export * from './ApiErrorAlert'
 export * from './BasicHero'
 export * from './ErrorBoundry'
 export * from './JsonRouteWrapper'