@fibery/ui-kit 1.18.0 → 1.20.0

package/src/toast/toast-queue.ts

@@ -0,0 +1,117 @@
+import {makePubSub} from "@fibery/helpers/utils/pub-sub";
+import type {ToastProps} from "./toast";
+
+export type AddToastProps = Pick<
+  ToastProps,
+  "type" | "title" | "subTitle" | "icon" | "action" | "duration" | "open"
+> & {
+  id?: string;
+};
+type TypedAddProps = Omit<AddToastProps, "type">;
+
+type QueuedToast = AddToastProps & {
+  id: string;
+};
+
+type ToastQueueOpts = {
+  maxActiveToasts?: number;
+  onToastAdd?: (params: AddToastProps) => void;
+
+  /** Overrides toast props.
+   * This option is added only to support mapping of billing errors as it was done in toast actions.
+   * Ideally this should be removed and billing errors moved to thunk middlewares
+   */
+  transformToast?: (params: AddToastProps) => AddToastProps;
+};
+export const makeToastQueue = ({maxActiveToasts = 1, onToastAdd, transformToast}: ToastQueueOpts = {}) => {
+  const pubSub = makePubSub();
+  let queue: QueuedToast[] = [];
+  let activeToasts: QueuedToast[] = [];
+
+  let count = 0;
+
+  const makeId = () => {
+    return `toast-${count++}`;
+  };
+
+  const updateActiveToasts = () => {
+    const freeSlots = maxActiveToasts - activeToasts.length;
+
+    const newToasts = queue.slice(0, freeSlots);
+    queue = queue.slice(freeSlots);
+
+    activeToasts = activeToasts.concat(newToasts);
+
+    pubSub.publish();
+  };
+
+  /**
+   * Add toast to queue
+   *
+   * Pass custom `id` if you don't want toasts to be duplicated.
+   * If toast with same id already exists it will be closed to display fresh more relevant one
+   */
+  const add = ({id, ...toast}: AddToastProps) => {
+    if (activeToasts.length > 0) {
+      activeToasts[0].open = false;
+    }
+
+    const t: QueuedToast = {
+      id: id || makeId(),
+      ...(transformToast ? transformToast(toast) : toast),
+    };
+
+    onToastAdd?.(t);
+
+    queue.push(t);
+
+    updateActiveToasts();
+
+    return t.id;
+  };
+
+  return {
+    add,
+    /** Mark active toast as closed. Can be used to play exit animation  */
+    close(id: string) {
+      activeToasts = activeToasts.map((t) => (t.id === id ? {...t, open: false} : t));
+
+      pubSub.publish();
+    },
+    /** remove toast from active ones, should be called after exit animation  */
+    remove(id: string) {
+      activeToasts = activeToasts.filter((t) => t.id !== id);
+
+      updateActiveToasts();
+    },
+    getActiveToasts() {
+      return activeToasts;
+    },
+    subscribe: pubSub.subscribe,
+    unsubscribe: pubSub.unsubscribe,
+
+    info(t: TypedAddProps) {
+      return add(t);
+    },
+    success(t: TypedAddProps) {
+      return add({
+        type: "success",
+        ...t,
+      });
+    },
+    error(t: TypedAddProps) {
+      return add({
+        type: "error",
+        ...t,
+      });
+    },
+    loading(t: TypedAddProps) {
+      return add({
+        type: "loading",
+        ...t,
+      });
+    },
+  };
+};
+
+export type ToastQueue = ReturnType<typeof makeToastQueue>;

package/src/toast/toast.tsx

@@ -0,0 +1,121 @@
+import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
+import {useControllableState} from "@fibery/react/src/use-controllable-state";
+import {css} from "@linaria/core";
+import {useEffect, useRef} from "react";
+import {space, themeVars} from "../design-system";
+import Spinner from "../icons/react/Spinner";
+import SuccessIcon from "../icons/react/Success";
+import WarningTriangle from "../icons/react/WarningTriangle";
+import {ToastClose, ToastRoot, ToastSubtitle, ToastTitle} from "./primitives";
+import type {ToastActionElement} from "./toast-action";
+
+type ToastType = "info" | "error" | "success" | "loading";
+
+export type ToastProps = {
+  title: React.ReactNode;
+  subTitle?: React.ReactNode;
+  icon?: React.ReactNode;
+  action?: ToastActionElement;
+  duration?: number;
+  dismissable?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+
+  type?: ToastType;
+
+  /** It gets called after exit animation */
+  onHide?: () => void;
+};
+
+const defaultPropsPerType: Record<ToastType, Partial<ToastProps>> = {
+  info: {},
+  error: {
+    icon: <WarningTriangle color={themeVars.textColor} />,
+    duration: 10000,
+    dismissable: true,
+  },
+  loading: {
+    icon: <Spinner color={themeVars.textColor} />,
+  },
+  success: {
+    icon: <SuccessIcon color={themeVars.textColor} />,
+  },
+};
+
+const rootCss = css`
+  box-sizing: border-box;
+  min-height: 44px;
+  min-width: 320px;
+  display: flex;
+  align-items: center;
+  gap: ${space.s12}px;
+`;
+
+const messageCss = css`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  gap: ${space.s4}px;
+`;
+
+const iconCss = css`
+  grid-area: icon;
+`;
+
+export const Toast: React.FC<ToastProps> = (props) => {
+  const defaultProps = defaultPropsPerType[props.type || "info"];
+
+  const {
+    title,
+    subTitle,
+    icon,
+    action,
+    duration = 5000,
+    dismissable,
+    open,
+    onOpenChange,
+    onHide,
+  } = {
+    ...defaultProps,
+    ...props,
+  };
+
+  const [isOpen, setOpen] = useControllableState({value: open, defaultValue: true, onChange: onOpenChange});
+
+  const ref = useRef<HTMLLIElement>(null);
+  const onHideCb = useCallbackRef(onHide);
+
+  useEffect(() => {
+    const toastEl = ref.current;
+    if (!isOpen) {
+      const emergencyTimeout = setTimeout(onHideCb, 400); // just in case if animationend doesn't fire for some reasons or toast got closed before render
+
+      toastEl?.addEventListener("animationend", onHideCb, {
+        // https://github.com/radix-ui/primitives/issues/1020
+        capture: true,
+      });
+
+      return () => {
+        toastEl?.removeEventListener("animationend", onHideCb, {capture: true});
+        clearTimeout(emergencyTimeout);
+      };
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  }, [isOpen, onHideCb]);
+
+  const close = dismissable ? <ToastClose /> : null;
+
+  return (
+    <ToastRoot ref={ref} open={open} duration={duration} className={rootCss} onOpenChange={setOpen}>
+      {icon ? <div className={iconCss}>{icon}</div> : null}
+      <div className={messageCss}>
+        <ToastTitle>{title}</ToastTitle>
+        {subTitle ? <ToastSubtitle>{subTitle}</ToastSubtitle> : null}
+      </div>
+
+      {action}
+      {close}
+    </ToastRoot>
+  );
+};

package/src/toast/toaster.tsx

@@ -0,0 +1,35 @@
+import {useSyncExternalStore} from "react";
+import {createInlineTheme} from "../create-inline-theme";
+import {colors, getThemeColors} from "../design-system";
+import {ThemeProvider, useThemeMode} from "../theme-provider";
+import {ToastViewport} from "./primitives";
+import {Toast} from "./toast";
+import {useToast} from "./toast-provider";
+
+const ToastThemeProvider: React.FC<React.PropsWithChildren> = ({children}) => {
+  const themeMode = useThemeMode();
+  const theme = getThemeColors(colors.brandColors.blue, themeMode === "dark" ? "light" : "dark");
+  const inlineTheme = createInlineTheme(theme, []);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <div style={inlineTheme}>{children}</div>
+    </ThemeProvider>
+  );
+};
+
+export const Toaster: React.FC = () => {
+  const toastQueue = useToast();
+
+  const toasts = useSyncExternalStore(toastQueue.subscribe, toastQueue.getActiveToasts);
+
+  return (
+    <ToastThemeProvider>
+      {toasts.map(({id, open, type = "info", ...toastProps}) => (
+        <Toast key={`${id}-${type}`} type={type} {...toastProps} open={open} onHide={() => toastQueue.remove(id)} />
+      ))}
+
+      <ToastViewport />
+    </ToastThemeProvider>
+  );
+};

package/src/toast/utils/toastify-item-name.ts

@@ -0,0 +1,6 @@
+const charLimit = 60;
+
+const trimDynamicToastText = (str: string) => (str.length > charLimit ? `${str.slice(0, 60)}...` : str);
+
+export const toastifyItemName = ({prefix, name, postfix}: {prefix?: string; name?: string; postfix?: string}) =>
+  `${prefix ? `${prefix} ` : ""}"${name ? trimDynamicToastText(name) : "Untitled"}"${postfix ? ` ${postfix}` : ""}`;

package/src/tooltip.tsx

@@ -27,7 +27,7 @@ const tooltipStyle = css`
   min-height: 30px;
   max-width: 300px;
   background-color: ${themeVars.tooltipBgColor};
-  padding: ${space.s}px ${space.m}px;
+  padding: ${space.s6}px ${space.s8}px;
   border-radius: ${border.radius6}px;
   box-shadow: ${themeVars.actionMenuShadow};
 
@@ -132,7 +132,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
         </>
       ),
       side,
-      sideOffset = space.xs,
+      sideOffset = space.s4,
       align,
       alignOffset,
       instant,

package/src/Select/custom-select-partials/option.tsx

@@ -1,92 +0,0 @@
-import {OptionProps} from "react-select";
-import {components} from "react-windowed-select";
-import {GroupBase} from "../index";
-import {css, cx} from "@linaria/core";
-import {border, layout, space, textStyles, themeVars, transition} from "../../design-system";
-import {useMemo} from "react";
-
-export const OptionNulledStyles = {
-  height: layout.menuItemHeight,
-};
-const OptionWrapperClass = css`
-  max-width: 100%;
-  flex-basis: 100%;
-  display: flex;
-  align-items: center;
-  align-content: center;
-  ${{...textStyles.regular}};
-  color: ${themeVars.textColor};
-  background: ${themeVars.colorBgSelectOptionDefault};
-  border-radius: ${border.radius6}px;
-  padding: 0 ${space.s}px;
-  column-gap: ${space.xs}px;
-  transition: background-color ${transition}, color ${transition};
-`;
-const OptionRootClass = css`
-  padding: 0 ${space.s}px ${space.xxs}px;
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  cursor: pointer;
-  &:hover {
-    .${OptionWrapperClass} {
-      background: ${themeVars.colorBgSelectOptionDefaultHover};
-    }
-  }
-`;
-
-const DisabledOptionClass = css`
-  cursor: not-allowed;
-  .${OptionWrapperClass} {
-    > * {
-      opacity: ${themeVars.opacitySelectOptionDisabled};
-    }
-    background: ${themeVars.colorBgSelectOptionDisabled};
-  }
-  &:hover {
-    .${OptionWrapperClass} {
-      background: ${themeVars.colorBgSelectOptionDisabled};
-    }
-  }
-`;
-const SelectedOptionClass = css`
-  cursor: default;
-  .${OptionWrapperClass} {
-    background: ${themeVars.colorBgSelectOptionSelected};
-  }
-  &:hover {
-    .${OptionWrapperClass} {
-      background: ${themeVars.colorBgSelectOptionSelectedHover};
-    }
-  }
-  &.${DisabledOptionClass} {
-    background: ${themeVars.colorBgSelectOptionSelectedDisabled};
-    &:hover {
-      background: ${themeVars.colorBgSelectOptionSelectedDisabled};
-    }
-  }
-`;
-export function Option<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
-  props: OptionProps<Option, IsMulti, Group>
-) {
-  const {children, ...rest} = props;
-  const {isDisabled, isFocused} = rest;
-  const className = useMemo(
-    () =>
-      cx(
-        rest.innerProps.className,
-        OptionRootClass,
-        isFocused && SelectedOptionClass, //do not use isSelected as flag to determine if item is selected. It is not always true, bug
-        isDisabled && DisabledOptionClass
-      ),
-    [rest.innerProps.className, isDisabled, isFocused]
-  );
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const {onMouseMove, onMouseOver, ...truncatedProps} = rest.innerProps;
-  const newProps = Object.assign(rest, {innerProps: truncatedProps});
-  return (
-    <components.Option {...newProps} className={className}>
-      <div className={OptionWrapperClass}>{children}</div>
-    </components.Option>
-  );
-}

package/src/icons/ast/RicheditorMarkHighlight.ts

@@ -1,8 +0,0 @@
-
-// This icon file is generated automatically.
-
-import { IconDefinition } from '../types';
-
-const RicheditorMarkHighlight: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"d":"m5.07 16.9.898-.625h2.418c.643 0 1.197-.177 1.66-.607.15-.14.135-.377-.012-.522L5.23 10.438c-.156-.153-.408-.154-.535.023-.34.476-.509 1.087-.509 1.698v2.37l-.89.873c-.382.39-.17.154-.597.624 1.517.595 2.37.874 2.37.874ZM10.653 14.177c.255.25.51.25.764 0l5.997-7.786a1.474 1.474 0 0 0 0-1.746l-1.909-1.87a1.247 1.247 0 0 0-1.781 0l-7.61 6.313c-.255.249-.255.498 0 .748l4.54 4.341Z"},"children":[]}]}],"metadata":""}]},"name":"richeditor-mark-highlight"};
-
-export default RicheditorMarkHighlight;

package/src/icons/react/RicheditorMarkHighlight.tsx

@@ -1,12 +0,0 @@
-// This icon file is generated automatically.
-
-import RicheditorMarkHighlightSvg from '../ast/RicheditorMarkHighlight';
-import { Icon } from '../Icon';
-import { IconBaseProps } from '../types';
-
-const RicheditorMarkHighlight = (
-  props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={RicheditorMarkHighlightSvg} />;
-
-RicheditorMarkHighlight.displayName = 'RicheditorMarkHighlight';
-export default RicheditorMarkHighlight;

package/src/toast/index.tsx

@@ -1,47 +0,0 @@
-import {css} from "@linaria/core";
-import {ToastRoot, ToastTitle, ToastSubtitle, ToastClose, ToastAction} from "./primitives";
-import {space} from "../design-system";
-
-export {ToastProvider, ToastViewport, ToastAction} from "./primitives";
-
-export type ToastProps = {
-  title: React.ReactNode;
-  subTitle?: React.ReactNode;
-  icon?: React.ReactNode;
-  action?: React.ReactElement<typeof ToastAction>;
-  autoClose?: boolean;
-};
-
-const rootCss = css`
-  min-width: 320px;
-  display: flex;
-  align-items: center;
-  gap: ${space.l}px;
-`;
-
-const messageCss = css`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  gap: ${space.xs}px;
-`;
-
-const iconCss = css`
-  grid-area: icon;
-`;
-export const Toast: React.FC<ToastProps> = ({title, subTitle, icon, action, autoClose = true}) => {
-  const close = autoClose ? null : <ToastClose />;
-
-  return (
-    <ToastRoot duration={autoClose ? 5000 : Infinity} className={rootCss}>
-      {icon ? <div className={iconCss}>{icon}</div> : null}
-      <div className={messageCss}>
-        <ToastTitle>{title}</ToastTitle>
-        {subTitle ? <ToastSubtitle>{subTitle}</ToastSubtitle> : null}
-      </div>
-
-      {action}
-      {close}
-    </ToastRoot>
-  );
-};