@onewelcome/react-lib-components 2.2.0 → 3.0.0

package/src/components/Notifications/NotificationProvider/NotificationContext.tsx

@@ -0,0 +1,221 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useReducer
+} from "react";
+import {
+  Notification,
+  ErrorNotification,
+  SuccessNotification,
+  Translations,
+  AddNotification
+} from "./notification.interfaces";
+import { defaultTranslations } from "./NotificationService";
+import { useSnackbar } from "../Snackbar/useSnackbar";
+import { deepMerge, generateID } from "../../../util/helper";
+import { DeepPartial } from "../../../interfaces";
+
+interface NotificationState {
+  notifications: Notification<ErrorNotification | SuccessNotification>[];
+}
+
+export interface NotificationAction {
+  type: "add" | "remove" | "handled" | "reset";
+  payload?: Notification<ErrorNotification | SuccessNotification> & {
+    id?: string;
+    handled?: boolean;
+  };
+}
+
+const initialState: NotificationState = {
+  notifications: []
+};
+
+export interface NotificationHandlerProps {
+  translations?: DeepPartial<Translations>;
+  dispatchFn: React.Dispatch<NotificationAction>;
+}
+
+export const NotificationHandler = ({
+  translations = {},
+  dispatchFn
+}: NotificationHandlerProps) => {
+  const { enqueueErrorSnackbar, enqueueSuccessSnackbar } = useSnackbar();
+  const {
+    state: { notifications }
+  } = useNotificationContext();
+
+  const mergedTranslations = deepMerge<Translations>(defaultTranslations, translations);
+
+  const determineNotificationMessage = (notification: Notification<ErrorNotification>) => {
+    if (notification.message) {
+      return notification.message;
+    }
+
+    switch (notification.status) {
+      case 500:
+        return mergedTranslations.messages.general;
+      case 400:
+        return mergedTranslations.messages.badRequest;
+      case 401:
+        return mergedTranslations.messages.unauthorized;
+      case 403:
+        return mergedTranslations.messages.forbidden;
+      case 404:
+        return mergedTranslations.messages.notFound;
+      case 502:
+      case 503:
+        return mergedTranslations.messages.unavailable;
+      case 504:
+        return mergedTranslations.messages.timeout;
+      default:
+        return mergedTranslations.messages.general;
+    }
+  };
+
+  useEffect(() => {
+    notifications.forEach(notification => {
+      if (
+        notification.status &&
+        notification.handled &&
+        (notification.status === 401 || notification.status === 403)
+      ) {
+        dispatchFn({ type: "remove", payload: { id: notification.id } });
+      } else if (notification.status && !notification.handled && notification.type === "error") {
+        enqueueErrorSnackbar(
+          notification.title ?? mergedTranslations.general.error,
+          determineNotificationMessage(notification as Notification<ErrorNotification>),
+          {
+            onClose: () => dispatchFn({ type: "remove", payload: { id: notification.id } })
+          }
+        );
+        dispatchFn({ type: "handled", payload: { id: notification.id, handled: true } });
+      } else if (notification.title && !notification.handled && notification.type === "success") {
+        enqueueSuccessSnackbar(
+          notification.title ?? mergedTranslations.general.success,
+          notification.message,
+          {
+            onClose: () => dispatchFn({ type: "remove", payload: { id: notification.id } })
+          }
+        );
+
+        dispatchFn({ type: "handled", payload: { id: notification.id, handled: true } });
+      }
+    });
+  }, [notifications.length]);
+
+  return null;
+};
+
+export const NotificationContext = createContext<{
+  state: NotificationState;
+  dispatch: React.Dispatch<NotificationAction>;
+}>({
+  state: initialState,
+  dispatch: () => undefined
+});
+
+export interface Props {
+  children?: ReactNode;
+  translations?: DeepPartial<Translations>;
+}
+
+export const NotificationProvider = ({ children, translations }: Props) => {
+  const [state, dispatch] = useReducer(notificationReducer, initialState);
+
+  return (
+    <NotificationContext.Provider value={{ state, dispatch }}>
+      {children}
+      <NotificationHandler translations={translations} dispatchFn={dispatch} />
+    </NotificationContext.Provider>
+  );
+};
+
+export const useNotificationContext = () => {
+  const ctx = useContext(NotificationContext);
+
+  const addNotification = useCallback(
+    (notification: AddNotification) => {
+      ctx.dispatch({ type: "add", payload: notification });
+    },
+    [ctx]
+  );
+
+  const removeNotification = useCallback(
+    (id: string) => {
+      ctx.dispatch({ type: "remove", payload: { id } });
+    },
+    [ctx]
+  );
+
+  const resetNotifications = useCallback(() => {
+    ctx.dispatch({ type: "reset" });
+  }, [ctx]);
+
+  return {
+    state: ctx.state,
+    addNotification,
+    removeNotification,
+    resetNotifications
+  };
+};
+
+export const notificationReducer = (
+  state: NotificationState,
+  action: NotificationAction
+): NotificationState => {
+  switch (action.type) {
+    case "add":
+      return {
+        ...state,
+        notifications: [
+          ...state.notifications,
+          {
+            ...action.payload,
+            id: generateID(),
+            handled: false
+          }
+        ]
+      };
+    case "remove":
+      return {
+        ...state,
+        notifications: state.notifications.filter(
+          notification => notification.id !== action.payload?.id
+        )
+      };
+    case "handled":
+      return {
+        ...state,
+        notifications: state.notifications.map(notification =>
+          notification.id === action.payload?.id ? { ...notification, handled: true } : notification
+        )
+      };
+    case "reset":
+      return {
+        ...state,
+        notifications: []
+      };
+    default:
+      return state;
+  }
+};

package/src/components/Notifications/NotificationProvider/NotificationService.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { Translations } from "./notification.interfaces";
+
+export const defaultTranslations: Translations = {
+  general: {
+    error: "Error",
+    success: "Success"
+  },
+  messages: {
+    general: "Something went wrong. Please try again later.",
+    badRequest: "Bad request",
+    unauthorized: "You are not authorized to perform this action.",
+    forbidden: "You are not allowed to perform this action.",
+    notFound: "The requested resource could not be found.",
+    timeout: "The request timed out.",
+    unavailable: "The server is currently unavailable. Please try again later."
+  }
+};

package/src/components/Notifications/NotificationProvider/notification.interfaces.ts

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+export interface ErrorNotification extends NotificationType {
+  response?: string;
+  type: "error";
+}
+
+export interface SuccessNotification extends NotificationType {
+  response?: string;
+  type: "success";
+}
+
+interface NotificationType {
+  type: "error" | "success";
+  status: HttpStatuses;
+}
+
+export type HttpStatuses = 200 | 500 | 400 | 401 | 403 | 404 | 501 | 502 | 503 | 504;
+
+export interface AddNotification {
+  type: "error" | "success";
+  status: HttpStatuses;
+  title?: string;
+  message?: string;
+}
+
+export interface RemoveNotification {
+  id: string;
+}
+
+export interface Notification<T extends NotificationType> {
+  id?: string;
+  type?: T["type"];
+  status?: HttpStatuses;
+  title?: string;
+  message?: string;
+  handled?: boolean;
+}
+
+export interface Translations {
+  general: {
+    error: string;
+    success: string;
+  };
+  messages: {
+    general: string;
+    badRequest: string;
+    unauthorized: string;
+    forbidden: string;
+    notFound: string;
+    timeout: string;
+    unavailable: string;
+  };
+}

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -18,14 +18,21 @@
 @use "../../../../mixins.module.scss";
 
 .snackbar {
-  padding: 1rem 1.25rem;
+  padding: 0.5rem 1rem;
   border-radius: var(--snackbar-border-radius);
   display: flex;
+  gap: 0.5rem;
+  align-items: center;
   width: 100%;
   box-sizing: border-box;
   @include mixins.transition(height, 0.2s, ease-in-out);
   flex-grow: 0;
 
+  &.has-title {
+    align-items: flex-start;
+    padding: 1rem;
+  }
+
   &.info {
     background-color: var(--snackbar-info-background-color);
   }
@@ -38,72 +45,94 @@
     background-color: var(--snackbar-error-background-color);
   }
 
-  & + & {
-    margin-top: 0.5rem;
-  }
-
-  .container {
-    flex: 1;
+  &.warning {
+    background-color: var(--snackbar-warning-background-color);
   }
 
-  .headline {
-    display: flex;
-    color: var(--snackbar-text-color);
+  & + & {
+    margin-top: 0.5rem;
   }
 
   #close-btn {
     color: var(--snackbar-text-color);
-
-    &:hover,
-    &:focus {
-      border-color: var(--snackbar-text-color);
+    align-self: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    flex-shrink: 0;
+    border: 0;
+
+    span {
+      font-size: 0.875rem;
     }
 
-    &:active {
-      border-color: transparent;
+    &:not(:disabled):hover,
+    &:not(:disabled):focus {
+      background-color: var(--color-black10);
+    }
 
-      &:after {
-        top: 0;
-        height: 100%;
-        background-color: var(--snackbar-text-color);
-      }
+    &:not(:disabled):active {
+      background-color: var(--color-black20);
     }
   }
 
   .icon {
     color: var(--snackbar-text-color);
-    margin-top: 0.5rem;
-    font-size: 1.25rem;
+    font-size: 1rem;
     line-height: var(--default-line-height);
+    display: flex;
   }
 
   .title {
     color: var(--snackbar-text-color);
     flex: 1;
-    margin: calc(0.5rem - 0.125rem) 1.25rem 0 0.75rem;
+    font-size: 0.875rem;
+    line-height: var(--default-line-height);
+    margin-bottom: 0.25rem;
+    margin-top: -2.5px;
+    display: block;
+  }
+
+  .content-wrapper {
+    flex-grow: 1;
+  }
+
+  &.has-title .content-wrapper {
+    width: 12.5rem;
+  }
+
+  @media screen and (min-width: 37.5em) {
+    &:not(.has-title) .content {
+      white-space: nowrap;
+    }
   }
 
   .content {
-    margin: 0.25rem 0.75rem 0 0.75rem;
     color: var(--snackbar-text-color);
+    font-size: 0.875rem;
+    margin-bottom: 0;
+    line-height: var(--default-line-height);
   }
 
   .actions {
-    margin: 0.5rem 0.75rem 0 0.75rem;
     text-align: right;
+    align-self: center;
   }
 
   .action-button {
     border-width: var(--button-border-width);
     border-style: var(--button-border-style);
     border-radius: var(--button-border-radius);
-    font-size: var(--button-font-size);
+    white-space: nowrap;
+    font-size: 0.875rem;
     line-height: var(--button-font-size);
-    font-weight: 700;
+    font-weight: 400;
     margin: 0;
     padding: 0.625rem 1.25rem;
     cursor: pointer;
-    transition: color, background-color, border-color 0.2s ease-in-out;
+    transition:
+      color,
+      background-color,
+      border-color 0.2s ease-in-out;
     font-family: var(--font-family);
     color: var(--snackbar-text-color);
     background-color: transparent;
@@ -118,36 +147,18 @@
 
     &:not(:disabled):hover,
     &:not(:disabled):focus {
-      border-color: var(--snackbar-text-color);
-    }
-
-    &:active {
-      position: relative;
-      border: 0 transparent;
-      padding: calc(0.625rem + var(--button-border-width))
-        calc(1.25rem + var(--button-border-width));
-
-      &:after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--snackbar-text-color);
-        border-radius: var(--button-border-radius);
-        filter: opacity(0.1);
-      }
+      background-color: var(--color-black10);
     }
 
-    & + .action-button {
-      margin-left: 1rem;
+    &:not(:disabled):active {
+      background-color: var(--color-black20);
     }
   }
 }
 
 @media only screen and (min-width: 37.5em) {
   .snackbar {
-    width: 37.5rem;
+    width: min-content;
+    min-width: 25rem;
   }
 }

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.test.tsx

@@ -32,7 +32,7 @@ describe("SnackbarItem", () => {
   it("renders without crashing", () => {
     const { container } = render(<SnackbarItem {...initParams} />);
 
-    expect(container).toHaveTextContent(initParams.title);
+    expect(container).toHaveTextContent(initParams.title!);
     const contentDiv = container.querySelector(".content");
     expect(contentDiv).toBeNull();
     const actionsDiv = container.querySelector(".actions");

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -28,9 +28,10 @@ const textColor = "var(--snackbar-text-color)";
 
 export interface Props {
   id: string;
-  title: string;
+  title?: string;
   duration: number;
   variant: Variant;
+  className?: string;
   onClose: (key: string) => void;
   closeButtonTitle: string;
   content?: string;
@@ -56,6 +57,7 @@ export const SnackbarItem = ({
   duration,
   variant,
   content,
+  className,
   actions = [],
   onClose,
   closeButtonTitle
@@ -85,7 +87,12 @@ export const SnackbarItem = ({
     if (variant === "error") {
       return Icons.Error;
     }
-    return variant === "success" ? Icons.CheckmarkCircleBreakout : Icons.InfoCircle;
+
+    if (variant === "warning") {
+      return Icons.Warning;
+    }
+
+    return variant === "success" ? Icons.CheckmarkCircleAlt : Icons.InfoCircle;
   };
 
   const actionButtons = actions.map((actionProp, index) => (
@@ -102,37 +109,43 @@ export const SnackbarItem = ({
     </button>
   ));
 
+  const snackbarClasses = [
+    classes["snackbar"],
+    classes[variant],
+    animationStarted ? readyclasses["slide-out"] : readyclasses["slide-in"],
+    title ? classes["has-title"] : "",
+    className ?? ""
+  ].join(" ");
+
   return (
     <div
       ref={ref}
       aria-live="polite"
-      className={`${classes["snackbar"]} ${classes[variant]} ${
-        animationStarted ? readyclasses["slide-out"] : readyclasses["slide-in"]
-      }`}
+      className={snackbarClasses}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
       <Icon icon={getVariantIcon()} className={classes["icon"]} />
-      <div className={classes["container"]}>
-        <div className={classes["headline"]}>
-          <Typography className={classes["title"]} variant="h4" tag="span">
+      <div className={classes["content-wrapper"]}>
+        {title && (
+          <Typography className={classes["title"]} variant="body-bold" tag="span">
             {title}
           </Typography>
-          <IconButton
-            id={classes["close-btn"]}
-            onClick={() => startAnimation()}
-            title={closeButtonTitle}
-          >
-            <Icon icon={Icons.Times} color={textColor} />
-          </IconButton>
-        </div>
-        {!!content && (
+        )}
+        {content && (
           <Typography className={classes["content"]} variant="body">
             {content}
           </Typography>
         )}
-        {actionButtons.length > 0 && <div className={classes["actions"]}>{actionButtons}</div>}
       </div>
+      {actionButtons.length > 0 && <div className={classes["actions"]}>{actionButtons}</div>}
+      <IconButton
+        id={classes["close-btn"]}
+        onClick={() => startAnimation()}
+        title={closeButtonTitle}
+      >
+        <Icon icon={Icons.Times} color={textColor} />
+      </IconButton>
     </div>
   );
 };

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.test.tsx

@@ -55,9 +55,22 @@ const infoProps = {
   }
 };
 
+const warningProps = {
+  title: "warning title",
+  options: {
+    duration: 10,
+    onClose: jest.fn()
+  }
+};
+
 const renderSnackbarProvider = (props?: Partial<Props>) => {
   const AppComponent = () => {
-    const { enqueueSuccessSnackbar, enqueueErrorSnackbar, enqueueSnackbar } = useSnackbar();
+    const {
+      enqueueSuccessSnackbar,
+      enqueueErrorSnackbar,
+      enqueueSnackbar,
+      enqueueWarningSnackbar
+    } = useSnackbar();
     const [index, setIndex] = useState(0);
     return (
       <div>
@@ -89,6 +102,15 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
         >
           Info
         </button>
+        <button
+          data-testid="show-warning"
+          onClick={() => {
+            enqueueWarningSnackbar(warningProps.title + index, undefined, warningProps.options);
+            setIndex(index + 1);
+          }}
+        >
+          Warning
+        </button>
       </div>
     );
   };
@@ -102,12 +124,14 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
   const showSuccessSnackbarBtn = getByTestId(queries.container, "show-success");
   const showErrorSnackbarBtn = getByTestId(queries.container, "show-error");
   const showInfoSnackbarBtn = getByTestId(queries.container, "show-info");
+  const showWarningSnackbarBtn = getByTestId(queries.container, "show-warning");
 
   return {
     ...queries,
     showSuccessSnackbarBtn,
     showErrorSnackbarBtn,
-    showInfoSnackbarBtn
+    showInfoSnackbarBtn,
+    showWarningSnackbarBtn
   };
 };
 
@@ -119,14 +143,17 @@ describe("SnackbarProvider", () => {
   });
 
   it("should stack 3 snackbars at one time", async () => {
-    const { showSuccessSnackbarBtn } = renderSnackbarProvider();
+    const { showSuccessSnackbarBtn, showWarningSnackbarBtn } = renderSnackbarProvider();
 
     await userEvent.click(showSuccessSnackbarBtn);
-    await userEvent.click(showSuccessSnackbarBtn);
+    await userEvent.click(showWarningSnackbarBtn);
     await userEvent.click(showSuccessSnackbarBtn);
     await userEvent.click(showSuccessSnackbarBtn);
 
-    expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
+    await waitFor(() => {
+      expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(2);
+      expect(getAllByText(document.body, new RegExp(warningProps.title))).toHaveLength(1);
+    });
   });
 
   it("should render 3 variants of snackbars", async () => {