@xyo-network/react-shared 2.28.8 → 2.29.0-rc.1

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

@@ -1,7 +1,10 @@
-import { Component, ErrorInfo, ReactNode } from 'react';
+import { Component, ErrorInfo, ReactElement, ReactNode } from 'react';
 export interface ErrorBoundaryProps {
     children: ReactNode;
     fallback?: ReactNode;
+    fallbackWithErrorProp?: ReactElement<{
+        error: Error;
+    }>;
 }
 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,EAAgB,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEnF,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IAEnB,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,qBAAqB,CAAC,EAAE,YAAY,CAAC;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAA;CACvD;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;CAkBP"}

package/dist/esm/components/ErrorBoundry.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { FlexCol } from '@xylabs/react-flexbox';
-import { Component } from 'react';
+import { cloneElement, Component } from 'react';
 export class ErrorBoundary extends Component {
     constructor(props) {
         super(props);
@@ -15,6 +15,10 @@ export class ErrorBoundary extends Component {
     }
     render() {
         if (this.state.error) {
+            if (this.props.fallbackWithErrorProp) {
+                const clone = cloneElement(this.props.fallbackWithErrorProp, { error: this.state.error });
+                return clone;
+            }
             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,YAAY,EAAE,SAAS,EAAsC,MAAM,OAAO,CAAA;AAcnF,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,qBAAqB,EAAE;gBACpC,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAA;gBACzF,OAAO,KAAK,CAAA;aACb;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.27.0-rc.3",
     "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.27.0-rc.3",
+    "@xyo-network/react-storybook": "^2.29.0-rc.1"
   },
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
@@ -81,5 +81,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.28.8"
+  "version": "2.29.0-rc.1",
+  "stableVersion": "2.28.10"
 }

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

@@ -1,10 +1,13 @@
 import { Typography } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
-import { Component, ErrorInfo, ReactNode } from 'react'
+import { cloneElement, Component, ErrorInfo, ReactElement, 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
+  fallbackWithErrorProp?: ReactElement<{ error: Error }>
 }
 
 export interface ErrorBoundaryState {
@@ -27,6 +30,10 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
   render() {
     if (this.state.error) {
+      if (this.props.fallbackWithErrorProp) {
+        const clone = cloneElement(this.props.fallbackWithErrorProp, { error: this.state.error })
+        return clone
+      }
       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'