@onewelcome/react-lib-components 6.7.1 → 7.0.0

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

@@ -1,161 +0,0 @@
-/*
- * 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, { useContext, useEffect, useRef } from "react";
-import { IconButton } from "../../../Button/IconButton";
-import { Icon, Icons } from "../../../Icon/Icon";
-import { Variant, Actions } from "../interfaces";
-import classes from "./SnackbarItem.module.scss";
-import readyclasses from "../../../../readyclasses.module.scss";
-import { useAnimation } from "../../../../hooks/useAnimation";
-import { Typography } from "../../../Typography/Typography";
-import { SnackbarContext } from "../SnackbarProvider/SnackbarStateProvider";
-
-const textColor = "var(--snackbar-text-color)";
-
-/**
- * @deprecated
- */
-export interface Props {
-  id: string;
-  title?: string;
-  duration: number;
-  variant: Variant;
-  className?: string;
-  onClose: (key: string) => void;
-  closeButtonTitle: string;
-  content?: string;
-  actions?: Actions;
-}
-
-const useRegisterSnackbarHeight = (
-  singleSnackbarRef: React.RefObject<HTMLDivElement>,
-  snackbarId: string
-) => {
-  const ctx = useContext(SnackbarContext);
-
-  useEffect(() => {
-    if (singleSnackbarRef.current) {
-      ctx.setSnackbarHeight(snackbarId, singleSnackbarRef.current.getBoundingClientRect().height);
-    }
-  }, [singleSnackbarRef.current]);
-};
-
-/**
- * @deprecated
- */
-export const SnackbarItem = ({
-  id,
-  title,
-  duration,
-  variant,
-  content,
-  className,
-  actions = [],
-  onClose,
-  closeButtonTitle
-}: Props) => {
-  const timerHandler = useRef<ReturnType<typeof setTimeout>>();
-  const onAnimationEnd = () => onClose(id);
-  const { ref, animationStarted, startAnimation } = useAnimation<HTMLDivElement>(onAnimationEnd);
-  const hasOnlyTitle = !content && !!title;
-  const renderTitle = title && !hasOnlyTitle;
-  const renderContentOrTitleOnly = content || hasOnlyTitle;
-
-  useRegisterSnackbarHeight(ref, id);
-
-  useEffect(() => {
-    timerHandler.current = setTimeout(() => startAnimation(), duration);
-    return () => {
-      timerHandler.current && clearTimeout(timerHandler.current);
-    };
-  }, []);
-
-  const onMouseEnter = () => {
-    timerHandler.current && clearTimeout(timerHandler.current);
-  };
-
-  const onMouseLeave = () => {
-    timerHandler.current = setTimeout(() => startAnimation(), duration);
-  };
-
-  const getVariantIcon = () => {
-    if (variant === "error") {
-      return Icons.Error;
-    }
-
-    if (variant === "warning") {
-      return Icons.Warning;
-    }
-
-    return variant === "success" ? Icons.CheckmarkCircleAlt : Icons.InfoCircle;
-  };
-
-  const actionButtons = actions.map((actionProp, index) => (
-    <button
-      key={index}
-      {...actionProp}
-      onClick={e => {
-        onClose(id);
-        actionProp.onClick?.(e);
-      }}
-      className={classes["action-button"]}
-    >
-      {actionProp.label}
-    </button>
-  ));
-
-  const snackbarClasses = [
-    classes["snackbar"],
-    classes[variant],
-    animationStarted ? readyclasses["slide-out"] : readyclasses["slide-in"],
-    className ?? ""
-  ].join(" ");
-
-  return (
-    <div
-      ref={ref}
-      aria-live="polite"
-      className={snackbarClasses}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
-      <div className={classes["outer-content-wrapper"]}>
-        <Icon icon={getVariantIcon()} className={classes["icon"]} />
-        <div className={classes["content-wrapper"]}>
-          {renderTitle && (
-            <Typography className={classes["title"]} variant="body-bold" tag="span">
-              {title}
-            </Typography>
-          )}
-          {renderContentOrTitleOnly && (
-            <Typography className={classes["content"]} variant="body">
-              {hasOnlyTitle ? title : content}
-            </Typography>
-          )}
-        </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.tsx

@@ -1,219 +0,0 @@
-/*
- * 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, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { SnackbarContextProvider } from "./SnackbarStateProvider";
-import {
-  Actions,
-  EnqueueSnackbarProps,
-  SnackbarOptionsProps,
-  Variant,
-  isNewEnqueueSnackbarInterface
-} from "../interfaces";
-import { Placement, SnackbarContainer } from "../SnackbarContainer/SnackbarContainer";
-import { generateID } from "../../../../util/helper";
-import { SnackbarItem } from "../SnackbarItem/SnackbarItem";
-import { useGetDomRoot } from "../../../../hooks/useGetDomRoot";
-
-/** Short msg is when only title is provided. Long one when content or/and actions are provided (or type is error). */
-interface Duration {
-  long: number;
-  short: number;
-}
-
-/**
- * @deprecated
- */
-export interface Props {
-  closeButtonTitle: string;
-  children?: ReactNode;
-  placement?: Placement;
-  stackSize?: number;
-  domRoot?: HTMLElement;
-  autoHideDuration?: Duration;
-  className?: string;
-}
-
-/**
- * @deprecated
- */
-export interface Item {
-  id: string;
-  title?: string;
-  duration: number;
-  className?: string;
-  height: number;
-  variant: Variant;
-  content?: string;
-  actions?: Actions;
-  onClose?: () => void;
-}
-
-/**
- * @deprecated
- */
-export const SnackbarProvider = (
-  {
-    closeButtonTitle,
-    placement = { vertical: "bottom", horizontal: "center" },
-    autoHideDuration = { long: 8000, short: 4000 },
-    stackSize = 3,
-    domRoot,
-    children,
-    className
-  }: Props = { closeButtonTitle: "" }
-) => {
-  const [snackbars, setSnackbars] = useState<Item[]>([]);
-  const wrappingDivRef = useRef(null);
-  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
-
-  const addSnackbar = (item: Item) => {
-    setSnackbars(items => [...items, item]);
-  };
-
-  const setSnackbarHeight = (id: string, height: number) => {
-    const newSnackbarsState = snackbars.map(snackbar => {
-      if (snackbar.id !== id) {
-        return snackbar;
-      }
-
-      return { ...snackbar, height };
-    });
-
-    setSnackbars(newSnackbarsState);
-  };
-
-  const getDuration = (variant: Variant, actions?: Actions, content?: string) => {
-    const hasError = variant === "error";
-    const hasContentOrActions = content ?? actions;
-    if (hasError || hasContentOrActions) {
-      return autoHideDuration.long;
-    }
-    return autoHideDuration.short;
-  };
-
-  const enqueueSnackbar = (
-    propsOrTitle: EnqueueSnackbarProps | string | undefined,
-    content?: string,
-    options: SnackbarOptionsProps = {}
-  ): void => {
-    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
-    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
-    const {
-      variant = "info",
-      actions,
-      duration = getDuration(variant, actions, props.content),
-      onClose
-    } = props;
-    const item: Item = {
-      title: props.title,
-      content: props.content,
-      variant,
-      className: props.className,
-      actions,
-      duration,
-      height: 0,
-      id: generateID(15, props.title),
-      onClose
-    };
-    addSnackbar(item);
-  };
-
-  const mapToNewInterface = (
-    title?: string,
-    content?: string,
-    options: SnackbarOptionsProps = {}
-  ): EnqueueSnackbarProps => {
-    return {
-      title,
-      content,
-      ...options
-    };
-  };
-
-  const enqueueSuccessSnackbar = (
-    propsOrTitle: EnqueueSnackbarProps | string | undefined,
-    content?: string,
-    options: SnackbarOptionsProps = {}
-  ): void => {
-    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
-    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
-    enqueueSnackbar({ ...props, variant: "success" });
-  };
-
-  const enqueueErrorSnackbar = (
-    propsOrTitle: EnqueueSnackbarProps | string | undefined,
-    content?: string,
-    options: SnackbarOptionsProps = {}
-  ): void => {
-    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
-    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
-    enqueueSnackbar({ ...props, variant: "error" });
-  };
-
-  const enqueueWarningSnackbar = (
-    propsOrTitle: EnqueueSnackbarProps | string | undefined,
-    content?: string,
-    options: SnackbarOptionsProps = {}
-  ): void => {
-    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
-    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
-    enqueueSnackbar({ ...props, variant: "warning" });
-  };
-
-  const onItemClosed = (id: string) => {
-    setSnackbars(items => [...items].filter(item => item.id !== id));
-  };
-
-  const snackbarList = snackbars.map((item, index) =>
-    index < stackSize ? (
-      <SnackbarItem
-        {...item}
-        key={item.id}
-        className={item.className}
-        onClose={() => {
-          onItemClosed(item.id);
-          item.onClose?.();
-        }}
-        closeButtonTitle={closeButtonTitle}
-      />
-    ) : null
-  );
-
-  const snackbarPortal = createPortal(
-    <SnackbarContainer placement={placement} className={className}>
-      {snackbarList}
-    </SnackbarContainer>,
-    root
-  );
-
-  return (
-    <SnackbarContextProvider
-      initialState={{
-        enqueueSnackbar,
-        enqueueSuccessSnackbar,
-        enqueueErrorSnackbar,
-        enqueueWarningSnackbar,
-        setSnackbarHeight,
-        snackbars
-      }}
-    >
-      {children}
-      <div ref={wrappingDivRef}>{snackbarPortal}</div>
-    </SnackbarContextProvider>
-  );
-};

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

@@ -1,57 +0,0 @@
-/*
- * 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, { createContext } from "react";
-import { DeprecatedEnqueueSnackbarType } from "../interfaces";
-import { Item } from "./SnackbarProvider";
-
-/**
- * @deprecated
- */
-interface SnackbarContextProps {
-  enqueueSnackbar: DeprecatedEnqueueSnackbarType;
-  enqueueSuccessSnackbar: DeprecatedEnqueueSnackbarType;
-  enqueueWarningSnackbar: DeprecatedEnqueueSnackbarType;
-  enqueueErrorSnackbar: DeprecatedEnqueueSnackbarType;
-  setSnackbarHeight: (id: string, height: number) => void;
-  snackbars: Item[];
-}
-
-/**
- * @deprecated
- */
-const SnackbarContext = createContext<SnackbarContextProps>({
-  enqueueSnackbar: () => null,
-  enqueueSuccessSnackbar: () => null,
-  enqueueErrorSnackbar: () => null,
-  enqueueWarningSnackbar: () => null,
-  setSnackbarHeight: () => null,
-  snackbars: []
-});
-
-interface Props {
-  initialState: SnackbarContextProps;
-  children?: React.ReactNode;
-}
-
-/**
- * @deprecated
- */
-const SnackbarContextProvider = ({ children, initialState }: Props) => {
-  return <SnackbarContext.Provider value={initialState}>{children}</SnackbarContext.Provider>;
-};
-
-export { SnackbarContextProvider, SnackbarContext, SnackbarContextProps };

package/src/components/Notifications/Snackbar/interfaces.ts

@@ -1,62 +0,0 @@
-/*
- * 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 { ButtonHTMLAttributes } from "react";
-
-/**
- * @deprecated
- */
-export type Variant = "info" | "success" | "error" | "warning";
-
-/**
- * @deprecated
- */
-export type Actions = (ButtonHTMLAttributes<HTMLButtonElement> & { label: string })[];
-
-/**
- * @deprecated
- */
-export interface SnackbarOptionsProps {
-  actions?: Actions;
-  className?: string;
-  variant?: Variant;
-  duration?: number;
-  onClose?: () => void;
-}
-
-/**
- * @deprecated
- */
-export interface EnqueueSnackbarProps extends SnackbarOptionsProps {
-  title?: string;
-  content?: string;
-}
-
-/**
- * @deprecated
- */
-export type DeprecatedEnqueueSnackbarType = (
-  propsOrTitle: EnqueueSnackbarProps | string | undefined,
-  content?: string,
-  options?: SnackbarOptionsProps
-) => void;
-
-/**
- * @deprecated
- */
-export function isNewEnqueueSnackbarInterface(args: unknown): args is EnqueueSnackbarProps {
-  return args !== null && typeof args === "object" && ("title" in args || "content" in args);
-}

package/src/components/StatusIndicator/StatusIndicator.module.scss

@@ -1,43 +0,0 @@
-/*!
- * 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.
- */
-
-.status-indicator {
-  display: flex;
-  align-items: center;
-}
-
-.status-badge {
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-right: 0.5rem;
-  border-radius: 50%;
-}
-
-.active {
-  background-color: var(--success);
-}
-
-.error {
-  background-color: var(--error);
-}
-
-.neutral {
-  background-color: var(--greyed-out);
-}
-
-.warning {
-  background-color: var(--warning);
-}

package/src/components/StatusIndicator/StatusIndicator.tsx

@@ -1,44 +0,0 @@
-/*
- * 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, ComponentPropsWithRef, ReactNode } from "react";
-import { Typography, Props as TypographyProps } from "../Typography/Typography";
-import classes from "./StatusIndicator.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  children?: ReactNode;
-  status: "active" | "error" | "neutral" | "warning";
-  badgeProps?: ComponentPropsWithRef<"div">;
-  typographyProps?: TypographyProps;
-}
-
-const StatusIndicatorComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, status, badgeProps, typographyProps, ...rest }: Props,
-  ref
-) => {
-  return (
-    <div {...rest} className={classes["status-indicator"]} ref={ref}>
-      <div
-        className={`${classes["status-badge"]} ${classes[status]} ${badgeProps?.className ?? ""}`}
-      />
-      <Typography {...typographyProps} spacing={{ margin: "0" }} variant="body" tag="div">
-        {typographyProps?.children ?? children}
-      </Typography>
-    </div>
-  );
-};
-
-export const StatusIndicator = React.forwardRef(StatusIndicatorComponent);