@xyo-network/react-error 2.38.9

package/dist/esm/components/XyoErrorRender/ErrorAlert.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { AlertProps } from '@mui/material';
+import { XyoError } from '@xyo-network/module';
+export interface XyoErrorAlertProps extends AlertProps {
+    error?: XyoError;
+}
+export declare const XyoErrorAlert: React.FC<XyoErrorAlertProps>;
+//# sourceMappingURL=ErrorAlert.d.ts.map

package/dist/esm/components/XyoErrorRender/ErrorAlert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorAlert.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/ErrorAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,UAAU,EAA0B,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE9C,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,KAAK,CAAC,EAAE,QAAQ,CAAA;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAUtD,CAAA"}

package/dist/esm/components/XyoErrorRender/ErrorAlert.js

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

package/dist/esm/components/XyoErrorRender/ErrorAlert.js.map

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

package/dist/esm/components/XyoErrorRender/Props.d.ts

@@ -0,0 +1,10 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { XyoError } from '@xyo-network/module';
+import { ReactNode } from 'react';
+export interface XyoErrorRenderProps extends FlexBoxProps {
+    xyoError?: XyoError;
+    customError?: ReactNode;
+    noReAuth?: boolean;
+    noErrorDisplay?: boolean;
+}
+//# sourceMappingURL=Props.d.ts.map

package/dist/esm/components/XyoErrorRender/Props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Props.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/Props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB"}

package/dist/esm/components/XyoErrorRender/Props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Props.js.map

package/dist/esm/components/XyoErrorRender/Props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Props.js","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/Props.ts"],"names":[],"mappings":""}

package/dist/esm/components/XyoErrorRender/Render.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { XyoErrorRenderProps } from './Props';
+export declare const XyoErrorRender: React.FC<XyoErrorRenderProps>;
+//# sourceMappingURL=Render.d.ts.map

package/dist/esm/components/XyoErrorRender/Render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Render.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/Render.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAE7C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0BxD,CAAA"}

package/dist/esm/components/XyoErrorRender/Render.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { FlexCol } from '@xylabs/react-flexbox';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { XyoErrorAlert } from './ErrorAlert';
+export const XyoErrorRender = ({ xyoError, noErrorDisplay = false, customError = null, children, ...props }) => {
+    const location = useLocation();
+    useEffect(() => {
+        // ensure we end up at the same place we are now after logging in
+        location.state = {
+            from: {
+                pathname: window.location.pathname,
+            },
+        };
+    }, [location]);
+    if (xyoError) {
+        return (_jsx(FlexCol, { alignItems: "stretch", ...props, children: noErrorDisplay ? (customError) : (_jsx(FlexCol, { alignItems: "center", ...props, children: _jsx(XyoErrorAlert, { error: xyoError }) })) }));
+    }
+    else {
+        return _jsx(_Fragment, { children: children }) ?? null;
+    }
+};
+//# sourceMappingURL=Render.js.map

package/dist/esm/components/XyoErrorRender/Render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Render.js","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/Render.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAG5C,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAAE,QAAQ,EAAE,cAAc,GAAG,KAAK,EAAE,WAAW,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC5I,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,SAAS,CAAC,GAAG,EAAE;QACb,iEAAiE;QACjE,QAAQ,CAAC,KAAK,GAAG;YACf,IAAI,EAAE;gBACJ,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ;aACnC;SACF,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,KAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,YACpC,cAAc,CAAC,CAAC,CAAC,CAChB,WAAW,CACZ,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,IAAC,UAAU,EAAC,QAAQ,KAAK,KAAK,YACpC,KAAC,aAAa,IAAC,KAAK,EAAE,QAAQ,GAAI,GAC1B,CACX,GACO,CACX,CAAA;KACF;SAAM;QACL,OAAO,4BAAG,QAAQ,GAAI,IAAI,IAAI,CAAA;KAC/B;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,4 @@
+export * from './ErrorAlert';
+export * from './Props';
+export * from './Render';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA"}

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

@@ -0,0 +1,4 @@
+export * from './ErrorAlert';
+export * from './Props';
+export * from './Render';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA"}

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

@@ -0,0 +1,2 @@
+export * from './XyoErrorRender';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './XyoErrorRender';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@xyo-network/react-error",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "dependencies": {
+    "@xylabs/react-flexbox": "^2.15.1",
+    "tslib": "^2.4.0"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.10.3",
+    "lodash": "^4.17.21",
+    "pako": "^2.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "devDependencies": {
+    "@xyo-network/module": "^2.38.18"
+  },
+  "browser": "dist/esm/index.js",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "browser": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/esm/index.js"
+    },
+    "./dist/docs.json": {
+      "default": "./dist/docs.json"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "lint-pkg": "npmPkgJsonLint .",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/esm/index.d.ts",
+  "version": "2.38.9"
+}

package/src/components/XyoErrorRender/ErrorAlert.tsx

@@ -0,0 +1,18 @@
+import { Alert, AlertProps, AlertTitle, Typography } from '@mui/material'
+import { XyoError } from '@xyo-network/module'
+
+export interface XyoErrorAlertProps extends AlertProps {
+  error?: XyoError
+}
+
+export const XyoErrorAlert: React.FC<XyoErrorAlertProps> = ({ error, ...props }) => {
+  return (
+    <Alert severity="error" {...props}>
+      <AlertTitle>Whoops! Something went wrong</AlertTitle>
+      <Typography variant="caption" mr={0.5} fontWeight="bold">
+        Error:
+      </Typography>
+      <Typography variant="caption">{error?.message}</Typography>
+    </Alert>
+  )
+}

package/src/components/XyoErrorRender/Props.ts

@@ -0,0 +1,10 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+import { XyoError } from '@xyo-network/module'
+import { ReactNode } from 'react'
+
+export interface XyoErrorRenderProps extends FlexBoxProps {
+  xyoError?: XyoError
+  customError?: ReactNode
+  noReAuth?: boolean
+  noErrorDisplay?: boolean
+}

package/src/components/XyoErrorRender/Render.stories.tsx

@@ -0,0 +1,152 @@
+/* eslint-disable import/no-internal-modules */
+import { Typography } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { XyoError, XyoErrorSchema } from '@xyo-network/module'
+import { useArchive } from '@xyo-network/react-archive'
+import { useArchivistApi } from '@xyo-network/react-archivist-api'
+import { AuthStatusIconButton } from '@xyo-network/react-auth'
+import { archivistApiDecorator, authDecorator } from '@xyo-network/react-storybook'
+import axios, { AxiosResponse } from 'axios'
+import { useState } from 'react'
+
+import { XyoErrorRender } from './Render'
+
+const StorybookEntry = {
+  argTypes: {
+    authState: {
+      jwtToken: 'badToken',
+      loggedInAccount: 'none@none.com',
+    },
+  },
+  component: XyoErrorRender,
+  decorators: [authDecorator],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'auth-service/XyoApiErrorRender',
+} as ComponentMeta<typeof XyoErrorRender>
+
+const TemplateStats: ComponentStory<typeof XyoErrorRender> = () => {
+  const [xyoError, setXyoError] = useState<XyoError>()
+  const [stats, setStats] = useState<{ count: number }>()
+  const { api } = useArchivistApi()
+  const { archive } = useArchive()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      try {
+        const response = await api?.archive(archive).block.stats.get()
+        setStats(response)
+        setXyoError(undefined)
+      } catch (ex) {
+        const error = ex as Error
+        setXyoError({ message: error.message, schema: XyoErrorSchema, sources: [] })
+      }
+    },
+    [api, archive],
+  )
+
+  return (
+    <>
+      <AuthStatusIconButton />
+      <XyoErrorRender xyoError={xyoError}>
+        <p>Stats: {stats?.count}</p>
+      </XyoErrorRender>
+    </>
+  )
+}
+
+const Template401: ComponentStory<typeof XyoErrorRender> = () => {
+  const [xyoError, setXyoError] = useState<XyoError>()
+  const [response, setResponse] = useState<AxiosResponse>()
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useAsyncEffect(async () => {
+    try {
+      const response = await axios.get('http://httpstat.us/401')
+      setResponse(response)
+      setXyoError(undefined)
+    } catch (ex) {
+      const error = ex as Error
+      setXyoError({ message: error.message, schema: XyoErrorSchema, sources: [] })
+    }
+  }, [])
+
+  return (
+    <>
+      <XyoErrorRender xyoError={xyoError}>
+        <FlexCol>
+          <AuthStatusIconButton />
+          <pre>{JSON.stringify(response, null, 2)}</pre>
+        </FlexCol>
+      </XyoErrorRender>
+    </>
+  )
+}
+
+const Template500: ComponentStory<typeof XyoErrorRender> = () => {
+  const [xyoError, setXyoError] = useState<XyoError>()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      try {
+        await axios.get('http://httpstat.us/500')
+        setXyoError(undefined)
+      } catch (ex) {
+        const error = ex as Error
+        setXyoError({ message: error.message, schema: XyoErrorSchema, sources: [] })
+      }
+    },
+    [],
+  )
+
+  return (
+    <XyoErrorRender xyoError={xyoError}>
+      <Typography>I should never show</Typography>
+    </XyoErrorRender>
+  )
+}
+
+const Template404: ComponentStory<typeof XyoErrorRender> = () => {
+  const [xyoError, setXyoError] = useState<XyoError>()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      try {
+        await axios.get('https://beta.xyo.network/somelongstringthatisntarealhashbutcouldbe')
+        setXyoError(undefined)
+      } catch (ex) {
+        const error = ex as Error
+        setXyoError({ message: error.message, schema: XyoErrorSchema, sources: [] })
+      }
+    },
+    [],
+  )
+
+  return (
+    <XyoErrorRender xyoError={xyoError}>
+      <Typography>I should never show</Typography>
+    </XyoErrorRender>
+  )
+}
+
+TemplateStats.decorators = [archivistApiDecorator]
+Template401.decorators = [archivistApiDecorator]
+Template500.decorators = [archivistApiDecorator]
+
+const AuthRequired = TemplateStats.bind({})
+const UnAuthedFallback = Template401.bind({})
+const Server404 = Template404.bind({})
+const Server500 = Template500.bind({})
+
+export { AuthRequired, Server404, Server500, UnAuthedFallback }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/XyoErrorRender/Render.tsx

@@ -0,0 +1,34 @@
+import { FlexCol } from '@xylabs/react-flexbox'
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+import { XyoErrorAlert } from './ErrorAlert'
+import { XyoErrorRenderProps } from './Props'
+
+export const XyoErrorRender: React.FC<XyoErrorRenderProps> = ({ xyoError, noErrorDisplay = false, customError = null, children, ...props }) => {
+  const location = useLocation()
+  useEffect(() => {
+    // ensure we end up at the same place we are now after logging in
+    location.state = {
+      from: {
+        pathname: window.location.pathname,
+      },
+    }
+  }, [location])
+
+  if (xyoError) {
+    return (
+      <FlexCol alignItems="stretch" {...props}>
+        {noErrorDisplay ? (
+          customError
+        ) : (
+          <FlexCol alignItems="center" {...props}>
+            <XyoErrorAlert error={xyoError} />
+          </FlexCol>
+        )}
+      </FlexCol>
+    )
+  } else {
+    return <>{children}</> ?? null
+  }
+}

package/src/components/XyoErrorRender/index.ts

@@ -0,0 +1,3 @@
+export * from './ErrorAlert'
+export * from './Props'
+export * from './Render'

package/src/components/index.ts

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

package/src/index.ts

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