Features/error boundary

src/components/SignIn/SignIn.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import EmailPasswordForm from '../EmailPasswordForm'
 import FormLinks from '../FormLinks'
+import { ErrorBoundary } from '../UI'
 import './SignIn.css'
 
 /**
@@ -25,18 +26,22 @@ export interface ISignInProps {
  *
  * @example
  * <SignIn
- *  className='a6y-react-auth-sign-in-cmp'
+ *  className='a6y-react-auth__sign-in'
  *  onClick={onClick}
  * />
  */
 
 const SignIn = ({
   className = 'a6y-react-auth__sign-in',
   onClick,
-}: ISignInProps): JSX.Element => {
+  apiError,
+}: Props): JSX.Element => {
   return (
     <div className={className}>
-      <EmailPasswordForm onClick={onClick} submitLabel='Sign In' />
+      <ErrorBoundary showError={apiError ? true : false}>
+        {apiError}
+      </ErrorBoundary>
+      <EmailPasswordForm onClick={onClick} />
       <FormLinks />
     </div>
   )

src/components/SignUp/SignUp.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import EmailPasswordForm from '../EmailPasswordForm'
 import FormLinks from '../FormLinks'
+import { ErrorBoundary } from '../UI'
 import './SignUp.css'
 
 /**
@@ -25,18 +26,21 @@ export interface ISignUpProps {
  *
  * @example
  * <SignUp
- *  className='a6y-react-auth-sign-up-cmp'
+ *  className='a6y-react-auth__sign-up'
  *  onClick={onClick}
  * />
  */
 
 const SignUp = ({
   className = 'a6y-react-auth__sign-up',
-  onClick,
-}: ISignUpProps): JSX.Element => {
+  apiError,
+}: Props): JSX.Element => {
   return (
     <div className={className}>
-      <EmailPasswordForm onClick={onClick} submitLabel='Sign Up' />
+      <ErrorBoundary showError={apiError ? true : false}>
+        {apiError}
+      </ErrorBoundary>
+      <EmailPasswordForm />
       <FormLinks />
     </div>
   )

src/components/UI/ErrorBoundary/ErrorBoundary.css

@@ -0,0 +1,34 @@
+.a6y-react-auth__error-boundary, .a6y-react-auth__error-boundary * {
+  font-size: 12px;
+  letter-spacing: normal;
+  line-height: 16px;
+  font-weight: normal;
+}
+
+.a6y-react-auth__error-boundary--primary {
+  padding: 10px 15px;
+}
+
+.a6y-react-auth__error-boundary--primary.a6y-react-auth__error-boundary--warning,
+.a6y-react-auth__error-boundary--primary.a6y-react-auth__error-boundary--warning * {
+  color: #D97706;
+  background-color: #FEF3C7;
+  border: 1px solid #D97706;
+}
+
+.a6y-react-auth__error-boundary--primary.a6y-react-auth__error-boundary--error,
+.a6y-react-auth__error-boundary--primary.a6y-react-auth__error-boundary--error * {
+  color: #DC2626;
+  background-color: #FEE2E2;
+  border: 1px solid #DC2626;
+}
+
+.a6y-react-auth__error-boundary--secondary.a6y-react-auth__error-boundary--warning,
+.a6y-react-auth__error-boundary--secondary.a6y-react-auth__error-boundary--warning * {
+  color: #D97706;
+}
+
+.a6y-react-auth__error-boundary--secondary.a6y-react-auth__error-boundary--error,
+.a6y-react-auth__error-boundary--secondary.a6y-react-auth__error-boundary--error * {
+  color: #DC2626;
+}

src/components/UI/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import './ErrorBoundary.css'
+
+/**
+ * @typedef IErrorBoundaryProps
+ *
+ * @props {string} [className] - the CSS classname
+ * @props {boolean} showError - state which determines if an error message will be displayed
+ * @props {React.ReactNode} children - the error message it can be string or react child with string
+ * @props {string} [style] - the CSS style for error message 'primary' | 'secondary'
+ * @props {string} [status] - the status of message 'warning' | 'error'
+ */
+
+export interface IErrorBoundaryProps {
+  className?: string
+  showError: boolean
+  children: React.ReactNode
+  style?: 'primary' | 'secondary'
+  status?: 'warning' | 'error'
+}
+
+/**
+ * Renders component with API error or Web App error messages
+ *
+ * @param {string} [className] - the CSS classname
+ * @param {boolean} showError - state which determines if an error message will be displayed
+ * @param {React.ReactNode} children - the error message it can be string or react child with string
+ * @param {string} [style] - the CSS style for error message 'primary' | 'secondary'
+ * @param {string} [status] - the status of message 'warning' | 'error'
+ *
+ * @example
+ * <ErrorBoundary className='a6y-react-auth__error-boundary' showError={true}>
+ *    Error message or React child with message
+ * </ErrorBoundary>
+ */
+
+const ErrorBoundary = ({
+  className = 'a6y-react-auth__error-boundary',
+  showError = false,
+  children = 'Ups! Something were wrong',
+  style = 'primary',
+  status = 'error',
+}: IErrorBoundaryProps): JSX.Element => {
+  const classNames = require('classnames')
+  const ErrorBoundaryClass = classNames({
+    [`${className}--${style}`]: showError && style ? true : false,
+    [`${className}--${status}`]: showError && status ? true : false,
+  })
+  return (
+    <div className={className + ' ' + ErrorBoundaryClass}>
+      {showError && children}
+    </div>
+  )
+}
+
+export default ErrorBoundary

src/components/UI/index.tsx

@@ -1,5 +1,6 @@
 import Button from './Button/Button'
 import Input from './Input/Input'
 import Link from './Link/Link'
+import ErrorBoundary from './ErrorBoundary/ErrorBoundary'
 
-export { Button, Input, Link }
+export { Button, Input, Link, ErrorBoundary }

src/tests/components/ErrorBoundary.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { ErrorBoundary } from '../../components/UI'
+
+const ErrorText = 'Error message'
+const ErrorChild = <div className='custom-class'>{ErrorText}</div>
+
+describe(`ErrorBoundary component test`, () => {
+  it('should component rendered properly with status [false]', () => {
+    const rendered = render(
+      <ErrorBoundary showError={false}>{ErrorText}</ErrorBoundary>,
+    )
+    expect(rendered).toBeDefined
+  })
+  it('should component rendered properly with status [true]', () => {
+    const rendered = render(
+      <ErrorBoundary showError={true}>{ErrorText}</ErrorBoundary>,
+    )
+    expect(rendered).toBeDefined
+  })
+  it('should component rendered properly with status [true] and with H1 tag', () => {
+    const rendered = render(
+      <ErrorBoundary showError={true}>
+        <h1>{ErrorText}</h1>
+      </ErrorBoundary>,
+    )
+    expect(rendered).toBeDefined
+  })
+  it('should component rendered properly with status [true] and with react child', () => {
+    const rendered = render(
+      <ErrorBoundary showError={true}>{ErrorChild}</ErrorBoundary>,
+    )
+    expect(rendered).toBeDefined
+  })
+})

stories/components/ErrorBoundary.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Meta } from '@storybook/react'
+import ErrorBoundary from '../../src/components/UI/ErrorBoundary/ErrorBoundary'
+
+export const ErrorBoundaryComponent: React.VFC<unknown> = args => (
+  <ErrorBoundary showError={false} {...args}>
+    Error message
+  </ErrorBoundary>
+)
+
+export default {
+  title: 'Components/ErrorBoundary',
+  component: ErrorBoundary,
+} as Meta