diff --git a/packages/components/package.json b/packages/components/package.json index c1dbacd1..91868633 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -27,7 +27,8 @@ "prepublish": "yarn build" }, "dependencies": { - "@layer5/sistent-svg": "^0.14.2" + "@layer5/sistent-svg": "^0.14.2", + "react-error-boundary": "^4.0.11" }, "devDependencies": { "@emotion/react": "^11.11.1", diff --git a/packages/components/src/base/Link/Link.tsx b/packages/components/src/base/Link/Link.tsx new file mode 100644 index 00000000..76b6e405 --- /dev/null +++ b/packages/components/src/base/Link/Link.tsx @@ -0,0 +1,5 @@ +import { Link as MuiLink, LinkProps as MuiLinkProps } from '@mui/material'; + +export function Link(props: MuiLinkProps): JSX.Element { + return ; +} diff --git a/packages/components/src/base/Link/index.tsx b/packages/components/src/base/Link/index.tsx new file mode 100644 index 00000000..61fe08c6 --- /dev/null +++ b/packages/components/src/base/Link/index.tsx @@ -0,0 +1 @@ +export { Link } from './Link'; diff --git a/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx b/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx index f4bf27df..22daafe4 100644 --- a/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/components/src/custom/ErrorBoundary/ErrorBoundary.tsx @@ -1,88 +1,106 @@ -/* -import { - ErrorBoundaryProps, - FallbackProps, - ErrorBoundary as ReactErrorBoundary -} from 'react-error-boundary'; -import { Button } from '../../base/Button'; -import React from 'react'; +import { styled } from '@mui/system'; +import React, { ComponentType, ReactNode } from 'react'; +import { FallbackProps, ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'; +import { Box } from '../../base/Box'; +import { Link } from '../../base/Link'; +import { Typography } from '../../base/Typography'; +import { BLACK, KEPPEL } from '../../theme/colors'; -function Fallback({ error, resetErrorBoundary }: FallbackProps): JSX.Element { - if (error instanceof Error) { - // Check if error is an instance of Error - return ( -
-

Uh-oh!😔 Please pardon the mesh.

-
- {error.message} -
- -
- ); - } else { - // Handle the case where error is not an instance of Error - return ( -
-

Uh-oh!😔 An unknown error occurred.

- +const ErrorMessage = styled(Typography)(() => ({ + color: BLACK, + fontWeight: 'normal', + marginTop: '2px', + marginBottom: '2px', + fontSize: '1.15rem' +})); + +const StyledLink = styled(Link)(() => ({ + color: KEPPEL, + textDecoration: 'underline', + cursor: 'pointer' +})); + +interface FallbackComponentProps extends FallbackProps { + resetErrorBoundary: () => void; + children?: ReactNode; +} + +function Fallback({ error, children }: FallbackComponentProps): JSX.Element { + return ( +
+

Uh-oh!😔 Please pardon the mesh.

+
+ {(error as Error).message}
- ); - } + + We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't + work, please check out our support channels{' '} + + Discuss Forum + {' '} + {' or '} + + Slack + + + {children} +
+ ); } -function reportError(error: Error, info: React.ErrorInfo): void { - // This is where you'd send the error to Sentry, etc. +const reportError = (error: Error, info: { componentStack: string }): void => { + // This is where you'd send the error to Sentry, etc console.log('Error Caught Inside Boundary --reportError', error, 'Info', info); +}; + +interface ErrorBoundaryProps { + children: ReactNode; } -function ErrorBoundary({ children, ...props }: ErrorBoundaryProps): JSX.Element { +export const ErrorBoundary: React.FC = ({ children }) => { return ( - + {children} ); -} - -function withErrorBoundary

( - Component: React.ComponentType

, - errorHandlingProps: ErrorBoundaryProps | null -): JSX.Element { - const WrappedWithErrorBoundary = (props: P): JSX.Element => ( - - - - ); - - return WrappedWithErrorBoundary; -} +}; -interface Props { - children: React.ReactNode; +interface WithErrorBoundaryProps { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + Component: ComponentType; + errorHandlingProps?: ErrorBoundaryProps; } -function withSuppressedErrorBoundary

( - Component: React.ComponentType

-): JSX.Element { - const WrappedWithErrorBoundary = (props: P & Props): JSX.Element => ( - null}> - +export const WithErrorBoundary: React.FC = ({ + Component, + errorHandlingProps = { children: null } +}: WithErrorBoundaryProps): JSX.Element => { + return ( + + ); +}; - return WrappedWithErrorBoundary; +interface WithSuppressedErrorBoundaryProps { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + Component: ComponentType; } -export { ErrorBoundary, withErrorBoundary, withSuppressedErrorBoundary }; -*/ +export const withSuppressedErrorBoundary: React.FC = ({ + Component +}: WithSuppressedErrorBoundaryProps): JSX.Element => { + return ( + + + + ); +}; diff --git a/packages/components/src/custom/ErrorBoundary/index.tsx b/packages/components/src/custom/ErrorBoundary/index.tsx index ffc92554..d1a114da 100644 --- a/packages/components/src/custom/ErrorBoundary/index.tsx +++ b/packages/components/src/custom/ErrorBoundary/index.tsx @@ -1 +1 @@ -// export { ErrorBoundary, withErrorBoundary, withSuppressedErrorBoundary } from './ErrorBoundary'; +export { ErrorBoundary, WithErrorBoundary, withSuppressedErrorBoundary } from './ErrorBoundary'; diff --git a/yarn.lock b/yarn.lock index 92226747..911e9c99 100644 --- a/yarn.lock +++ b/yarn.lock @@ -894,6 +894,7 @@ __metadata: notistack: ^3.0.1 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 + react-error-boundary: ^4.0.11 tsup: ^7.2.0 typescript: ^5.0.2 peerDependencies: @@ -8347,6 +8348,17 @@ __metadata: languageName: node linkType: hard +"react-error-boundary@npm:^4.0.11": + version: 4.0.11 + resolution: "react-error-boundary@npm:4.0.11" + dependencies: + "@babel/runtime": ^7.12.5 + peerDependencies: + react: ">=16.13.1" + checksum: b3c157fea4e8f78411e9aa0fbf5241f6907b66ede1cd8b7bb22faaeb0339ebeb3dc8e63bf90ef3f740bfa8fd994ca6edf975089cd371b664ad6c2735e7512d38 + languageName: node + linkType: hard + "react-is@npm:^16.13.1, react-is@npm:^16.7.0": version: 16.13.1 resolution: "react-is@npm:16.13.1"