@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

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

@@ -0,0 +1,217 @@
+/*
+ * 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 { deepMerge, generateID } from "../../../util/helper";
+import { DeepPartial } from "../../../interfaces";
+import { useAlert } from "../Alert/useAlert";
+
+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 { enqueueErrorAlert, enqueueSuccessAlert } = useAlert();
+  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") {
+        enqueueErrorAlert({
+          title: notification.title ?? mergedTranslations.general.error,
+          content: 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") {
+        enqueueSuccessAlert({
+          title: notification.title ?? mergedTranslations.general.success,
+          content: 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/SideSheet/SideSheet.module.scss

@@ -0,0 +1,97 @@
+/*!
+ * 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.
+ */
+
+@use "../../../mixins.module.scss";
+@use "../../../functions" as *;
+
+.slide-in-modal {
+  right: 0;
+  left: auto;
+
+  justify-content: flex-end;
+
+  min-width: 25rem;
+  width: 33vw;
+  max-width: 40rem;
+
+  visibility: visible;
+
+  transform: translate(calc(100% - 0.5rem));
+  @include mixins.transition(transform, 0.5s, ease-in-out);
+
+  &.hide {
+    visibility: hidden;
+  }
+
+  &.visible {
+    visibility: visible;
+    transform: translate(0%);
+
+    #backdrop-slide {
+      background-color: transparent;
+    }
+  }
+}
+
+.handle {
+  position: absolute;
+  top: 13.25rem;
+  left: relativeToBaseFontSize(-1.5);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 1.5rem;
+  height: 2.5rem;
+  padding: 0.5rem 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  background-color: var(--modal-background-color);
+  box-shadow:
+    -4px 4px 5px 0px var(--side-sheet-shadow-color-one),
+    -4px 3px 14px 0px var(--side-sheet-shadow-color-two),
+    -4px 8px 10px 0px var(--side-sheet-shadow-color-two);
+}
+
+.handle-button {
+  transform: rotateY(180deg);
+}
+
+.collapsed-sheet {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0.5rem;
+  height: 100vh;
+  background-color: var(--modal-background-color);
+  box-shadow:
+    0px 4px 5px 0px var(--side-sheet-shadow-color-one),
+    0px 3px 14px 0px var(--side-sheet-shadow-color-two),
+    0px 8px 10px 0px var(--side-sheet-shadow-color-two);
+}
+
+.container {
+  margin-top: 0;
+  width: 50rem;
+  height: 100%;
+  max-height: unset;
+  border-radius: 0;
+  box-shadow:
+    0px 4px 5px 0px var(--side-sheet-shadow-color-one),
+    0px 3px 14px 0px var(--side-sheet-shadow-color-two),
+    0px 8px 10px 0px var(--side-sheet-shadow-color-two);
+}

package/src/components/Notifications/SideSheet/SideSheet.tsx

@@ -0,0 +1,114 @@
+/*
+ * 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, {
+  ForwardRefRenderFunction,
+  TransitionEventHandler,
+  useState,
+  useRef,
+  useCallback,
+  useEffect
+} from "react";
+import { Props as ModalProps, Modal } from "../Modal/Modal";
+import classes from "./SideSheet.module.scss";
+import { IconButton } from "../../Button/IconButton";
+import { Icon, Icons } from "../../Icon/Icon";
+
+export interface Props extends Omit<ModalProps, "hideBackdrop" | "disableBackdrop"> {
+  handleButtonProps?: {
+    onOpen: () => void;
+    onClose: () => void;
+    title?: string;
+  };
+}
+
+const SideSheetComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, id, open, handleButtonProps, ...rest }: Props,
+  ref
+) => {
+  const [classHideOnTransition, setClassHideOnTransition] = useState<string>("hide");
+  const [controlledOpen, setControlledOpen] = useState(false);
+  const containerRef = useRef(null);
+  const handleTitle = handleButtonProps?.title ?? "Side sheet handle";
+  const handleButtonStyle = {
+    width: "1.5rem",
+    height: "3.5rem",
+    borderTopLeftRadius: "4px",
+    borderBottomLeftRadius: "4px"
+  };
+
+  const onTransitionEnd: TransitionEventHandler<HTMLDivElement> = useCallback(
+    e => {
+      if (e.target === containerRef.current) {
+        setClassHideOnTransition(prev => (prev ? "" : "hide"));
+        if (!open && controlledOpen) {
+          setControlledOpen(false);
+        }
+      }
+    },
+    [open]
+  );
+
+  useEffect(() => {
+    open && setControlledOpen(open);
+  }, [open]);
+
+  return (
+    <>
+      {handleButtonProps && !open && (
+        <div className={classes["collapsed-sheet"]}>
+          <div className={classes["handle"]}>
+            <IconButton
+              style={handleButtonStyle}
+              className={classes["handle-button"]}
+              onClick={handleButtonProps.onOpen}
+              title={handleTitle}
+            >
+              <Icon size="0.9rem" icon={Icons.SideSheetHandle} />
+            </IconButton>
+          </div>
+        </div>
+      )}
+      <Modal
+        {...rest}
+        id={id}
+        open={controlledOpen}
+        className={`${classes["slide-in-modal"]} ${open ? classes["visible"] : ""} ${
+          !open ? classes[classHideOnTransition] : ""
+        }`}
+        containerProps={{ className: classes["container"] }}
+        hideBackdrop={true}
+        onTransitionEnd={onTransitionEnd}
+        ref={ref ?? containerRef}
+      >
+        {handleButtonProps && (
+          <div className={classes["handle"]}>
+            <IconButton
+              style={handleButtonStyle}
+              title={handleTitle}
+              onClick={handleButtonProps.onClose}
+            >
+              <Icon size="0.9rem" icon={Icons.SideSheetHandle} />
+            </IconButton>
+          </div>
+        )}
+        {children}
+      </Modal>
+    </>
+  );
+};
+
+export const SideSheet = React.forwardRef(SideSheetComponent);

package/src/components/Notifications/SideSheet/SideSheetActions/SideSheetActions.tsx

@@ -0,0 +1,18 @@
+/*
+ * 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 { BaseModalActions as SideSheetActions } from "../../BaseModal/BaseModalActions/BaseModalActions";
+export type { Props } from "../../BaseModal/BaseModalActions/BaseModalActions";

package/src/components/Notifications/SideSheet/SideSheetContent/SideSheetContent.module.scss

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+.side-sheet-content {
+  padding: 1.5rem;
+}

package/src/components/Notifications/SideSheet/SideSheetContent/SideSheetContent.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 from "react";
+import { BaseModalContent, Props } from "../../BaseModal/BaseModalContent/BaseModalContent";
+import classes from "./SideSheetContent.module.scss";
+
+export const SideSheetContent: React.FC<Props> = ({ className, ...rest }) => (
+  <BaseModalContent {...rest} className={`${classes["side-sheet-content"]} ${className}`} />
+);
+
+export type { Props } from "../../BaseModal/BaseModalContent/BaseModalContent";

package/src/components/Notifications/SideSheet/SideSheetHeader/SideSheetHeader.module.scss

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+.side-sheet-header {
+  padding: 1rem 1.5rem;
+}

package/src/components/Notifications/SideSheet/SideSheetHeader/SideSheetHeader.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 from "react";
+import { BaseModalHeader, Props } from "../../BaseModal/BaseModalHeader/BaseModalHeader";
+import classes from "./SideSheetHeader.module.scss";
+
+export const SideSheetHeader: React.FC<Props> = ({ className, ...rest }) => (
+  <BaseModalHeader {...rest} className={`${classes["side-sheet-header"]} ${className}`} />
+);
+
+export type { Props } from "../../BaseModal/BaseModalHeader/BaseModalHeader";

package/src/components/Notifications/SlideInModal/SlideInModal.module.scss

@@ -0,0 +1,54 @@
+/*!
+ * 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.
+ */
+
+@use "../../../mixins.module.scss";
+
+.slide-in-modal {
+  justify-content: flex-end;
+
+  visibility: visible;
+
+  transform: translate(120%);
+  @include mixins.transition(transform, 0.5s, ease-in-out);
+
+  &.hide {
+    visibility: hidden;
+  }
+
+  &.visible {
+    visibility: visible;
+    transform: translate(0%);
+
+    #backdrop-slide {
+      background-color: transparent;
+    }
+  }
+}
+
+#backdrop-slide {
+  background-color: transparent;
+}
+
+@media only screen and (min-width: 50rem) {
+  .container {
+    margin-top: 0;
+    width: 50rem;
+    height: 100%;
+    max-height: unset;
+    border-radius: 0;
+    box-shadow: 0 1.875rem 3.125rem var(--modal-shadow-color);
+  }
+}