@fibery/ui-kit 1.17.1 → 1.19.0

package/src/toast/primitives.tsx

@@ -0,0 +1,145 @@
+import {preventDefault} from "@fibery/react/src/prevent-default";
+import {css, cx} from "@linaria/core";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import {ElementRef, forwardRef} from "react";
+import {IconButton} from "../button/icon-button";
+import {border, space, textStyles, themeVars} from "../design-system";
+import CloseIcon from "../icons/react/Close";
+
+export const ToastProvider = ToastPrimitives.Provider;
+
+const viewportCss = css`
+  position: fixed;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  gap: ${space.s16}px;
+  margin: 0;
+  z-index: 1010; // inherited from old toast implementation
+  padding: 0;
+  list-style: none;
+
+  &:not(:empty) {
+    padding: ${space.xl}px; // increased mouse hover area to pause timers of toast
+  }
+`;
+
+export const ToastViewport = forwardRef<
+  ElementRef<typeof ToastPrimitives.Viewport>,
+  ToastPrimitives.ToastViewportProps
+>(({className, ...props}, ref) => {
+  return <ToastPrimitives.Viewport ref={ref} className={cx(viewportCss, className)} {...props} />;
+});
+
+const rootCss = css`
+  user-select: auto !important;
+
+  background-color: ${themeVars.colorBgToastDefault};
+  padding: ${space.m}px ${space.m * 2}px;
+  border-radius: ${border.radius6}px;
+  box-shadow: ${themeVars.shadowModal};
+
+  @keyframes hide {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes slideIn {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes swipeOut {
+    from {
+      transform: translateX(var(--radix-toast-swipe-end-x));
+    }
+    to {
+      transform: translateX(calc(150px + var(--radix-toast-swipe-end-x)));
+      opacity: 0;
+    }
+  }
+
+  &[data-swipe="move"] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  &[data-swipe="cancel"] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    will-change: transform, opacity;
+
+    &[data-state="open"] {
+      animation: slideIn 200ms ease-out;
+    }
+    &[data-state="closed"] {
+      animation: hide 200ms ease-out;
+    }
+
+    &[data-swipe="end"] {
+      animation: swipeOut 200ms ease-out;
+    }
+  }
+`;
+
+export const ToastRoot = forwardRef<ElementRef<typeof ToastPrimitives.Root>, ToastPrimitives.ToastProps>(
+  ({className, ...props}, ref) => {
+    return (
+      <ToastPrimitives.Root
+        ref={ref}
+        className={cx(rootCss, className)}
+        onSwipeStart={preventDefault}
+        onSwipeMove={preventDefault}
+        onSwipeCancel={preventDefault}
+        onSwipeEnd={preventDefault}
+        {...props}
+      />
+    );
+  }
+);
+
+const titleCss = css`
+  ${textStyles.heading5};
+`;
+
+export const ToastTitle = forwardRef<ElementRef<typeof ToastPrimitives.Title>, ToastPrimitives.ToastTitleProps>(
+  ({className, ...props}, ref) => {
+    return <ToastPrimitives.Title ref={ref} className={cx(className, titleCss)} {...props} />;
+  }
+);
+
+const descriptionCss = css`
+  ${textStyles.small};
+  color: ${themeVars.accentTextColor};
+`;
+
+export const ToastSubtitle = forwardRef<
+  ElementRef<typeof ToastPrimitives.Description>,
+  ToastPrimitives.ToastDescriptionProps
+>(({className, ...props}, ref) => {
+  return <ToastPrimitives.Description ref={ref} className={cx(className, descriptionCss)} {...props} />;
+});
+
+export const ToastClose = () => {
+  return (
+    <ToastPrimitives.Close aria-label="Dismiss" asChild>
+      <IconButton>
+        <CloseIcon iconSize={16} />
+      </IconButton>
+    </ToastPrimitives.Close>
+  );
+};

package/src/toast/toast-action.tsx

@@ -0,0 +1,20 @@
+import {Action as RadixToastAction, type ToastActionProps} from "@radix-ui/react-toast";
+import {ElementRef, forwardRef} from "react";
+import {ButtonProps} from "../button/button";
+import {Button} from "../button";
+import {useTheme} from "../theme-provider";
+
+export const ToastAction = forwardRef<
+  ElementRef<typeof RadixToastAction>,
+  ButtonProps & {altText: ToastActionProps["altText"]}
+>(({children, altText, ...props}, ref) => {
+  const theme = useTheme();
+  return (
+    <RadixToastAction ref={ref} altText={altText} asChild>
+      <Button color={theme.textColor} {...props}>
+        {children}
+      </Button>
+    </RadixToastAction>
+  );
+});
+export type ToastActionElement = React.ReactElement<typeof ToastAction>;

package/src/toast/toast-queue.tsx

@@ -0,0 +1,121 @@
+import {makePubSub} from "@fibery/helpers/utils/pub-sub";
+import type {ToastProps} from "./toast";
+
+type AddToastProps = Pick<ToastProps, "type" | "title" | "subTitle" | "icon" | "action" | "autoClose" | "open"> & {
+  id?: string;
+};
+type TypedAddProps = Omit<AddToastProps, "type">;
+
+type QueuedToast = AddToastProps & {
+  id: string;
+};
+
+type ToastQueueOpts = {
+  maxActiveToasts?: number;
+};
+export const makeToastQueue = ({maxActiveToasts = 1}: 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();
+  };
+
+  const closeActive = (id: string) => {
+    activeToasts = activeToasts.map((t) => (t.id === id ? {...t, open: false} : t));
+  };
+
+  const removeFromQueue = (id: string) => {
+    queue = queue.filter((queued) => queued.id !== id);
+  };
+
+  /**
+   * 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, {replace = true} = {}) => {
+    if (
+      id &&
+      !replace &&
+      (queue.some((queued) => queued.id === id) || activeToasts.some((active) => active.id === id))
+    ) {
+      return id;
+    }
+
+    if (id && replace) {
+      closeActive(id);
+      removeFromQueue(id);
+    }
+
+    const t: QueuedToast = {
+      id: id || makeId(),
+      ...toast,
+    };
+
+    queue.push(t);
+
+    updateActiveToasts();
+
+    return t.id;
+  };
+
+  return {
+    add,
+    /** close active toast, play exit animation  */
+    close(id: string) {
+      closeActive(id);
+      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,114 @@
+import {useControllableState} from "@fibery/react/src/use-controllable-state";
+import {css} from "@linaria/core";
+import {useState} 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;
+  autoClose?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+
+  type?: ToastType;
+
+  /** Is called on exit animation end */
+  onRemove?: () => void;
+};
+
+const defaultPropsPerType: Record<ToastType, Partial<ToastProps>> = {
+  info: {},
+  error: {
+    icon: <WarningTriangle color={themeVars.textColor} />,
+    autoClose: false,
+  },
+  loading: {
+    icon: <Spinner color={themeVars.textColor} />,
+  },
+  success: {
+    icon: <SuccessIcon color={themeVars.textColor} />,
+  },
+};
+
+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> = (props) => {
+  const defaultProps = defaultPropsPerType[props.type || "info"];
+
+  const {
+    title,
+    subTitle,
+    icon,
+    action,
+    autoClose = true,
+    open,
+    onOpenChange,
+    onRemove,
+  } = {
+    ...defaultProps,
+    ...props,
+  };
+
+  const [isOpen, setOpen] = useControllableState({value: open, defaultValue: true, onChange: onOpenChange});
+
+  const [noReducedMotion] = useState(() => matchMedia("(prefers-reduced-motion: no-preference)").matches);
+
+  const close = autoClose ? null : <ToastClose />;
+
+  const onCloseProps = noReducedMotion
+    ? {
+        onOpenChange: setOpen,
+        // https://github.com/radix-ui/primitives/issues/1020
+        onAnimationEndCapture() {
+          if (!isOpen) {
+            onRemove?.();
+          }
+        },
+      }
+    : {
+        onOpenChange(v: boolean) {
+          setOpen(v);
+          if (!v) {
+            onRemove?.();
+          }
+        },
+      };
+
+  return (
+    <ToastRoot open={open} duration={autoClose ? 5000 : Infinity} className={rootCss} {...onCloseProps}>
+      {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,72 @@
+import {createContext} from "@fibery/react/src/create-context";
+import React, {useEffect, useSyncExternalStore} from "react";
+import {createInlineTheme} from "../create-inline-theme";
+import {colors, getThemeColors} from "../design-system";
+import {ThemeProvider, useThemeMode} from "../theme-provider";
+import {ToastProvider, ToastViewport} from "./primitives";
+import {Toast} from "./toast";
+import type {ToastQueue} from "./toast-queue";
+import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
+import {reactNodeToString} from "@fibery/react/src/react-node-to-string";
+
+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>
+  );
+};
+
+const [Provider, useCtx] = createContext<ToastQueue>("ToastQueue");
+
+type OnTrackToast = (args: {title: string; type: string}) => void;
+const TrackToast: React.FC<
+  React.PropsWithChildren<{title: React.ReactNode; type: string; onTrackToast: OnTrackToast}>
+> = ({title, type, onTrackToast, children}) => {
+  const onTrackCb = useCallbackRef(onTrackToast);
+  useEffect(() => {
+    onTrackCb({title: reactNodeToString(title), type});
+  }, [onTrackCb, title, type]);
+
+  return children as JSX.Element;
+};
+
+export const Toaster: React.FC<React.PropsWithChildren<{toastQueue: ToastQueue; onTrackToast: OnTrackToast}>> = ({
+  toastQueue,
+  children,
+  onTrackToast,
+}) => {
+  const toasts = useSyncExternalStore(toastQueue.subscribe, toastQueue.getActiveToasts);
+
+  return (
+    <Provider value={toastQueue}>
+      <ToastProvider>
+        {children}
+
+        <ToastThemeProvider>
+          {toasts.map(({id, open = true, ...toastProps}) => (
+            <TrackToast key={id} title={toastProps.title} type={toastProps.type || "info"} onTrackToast={onTrackToast}>
+              <Toast
+                {...toastProps}
+                open={open}
+                onOpenChange={(v) => {
+                  if (!v) {
+                    toastQueue.close(id);
+                  }
+                }}
+                onRemove={() => toastQueue.remove(id)}
+              />
+            </TrackToast>
+          ))}
+
+          <ToastViewport />
+        </ToastThemeProvider>
+      </ToastProvider>
+    </Provider>
+  );
+};
+export const useToast = useCtx;

package/src/tooltip.tsx

@@ -1,7 +1,7 @@
 import {css, cx} from "@linaria/core";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import {forwardRef, type ReactNode, type SyntheticEvent} from "react";
-import {border, fontWeight, lineHeight, space, themeVars, tooltipDelay} from "./designSystem";
+import {border, fontWeight, lineHeight, space, themeVars, tooltipDelay} from "./design-system";
 
 const preventDefaultAndStopPropagation = (e: SyntheticEvent) => {
   e.preventDefault();
@@ -93,7 +93,7 @@ export const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps> =
   <TooltipPrimitive.Provider disableHoverableContent skipDelayDuration={150} {...props} />
 );
 
-export type TooltipProps = Omit<React.ComponentPropsWithoutRef<"button">, "title"> & {
+export type TooltipProps = Omit<TooltipPrimitive.TooltipTriggerProps, "title"> & {
   title?: ReactNode;
   description?: ReactNode;
   content?: ReactNode;
@@ -115,7 +115,7 @@ export type TooltipProps = Omit<React.ComponentPropsWithoutRef<"button">, "title
  * NOTE:
  * When used together with other triggers (Collapsible, ActionsMenu...) of radix-based component it might
  * overwrite [data-state] attribute of trigger element and make styling a bit harder. As a workaround you might:
- * 1. Make sure that Tooltip is the lowest trigger. Usually we don't care about data-state of tooltip's trigger  (e.g. `<CollapsibleTrigger asChilde><Tooltip><Button/></Tooltip></CollapsibleTrigger>`)
+ * 1. Make sure that Tooltip is the lowest trigger. Usually we don't care about data-state of tooltip's trigger  (e.g. `<CollapsibleTrigger asChild><Tooltip><Button/></Tooltip></CollapsibleTrigger>`)
  * 2. Use controlled state of components and add classes for open states
  *
  * Ref: https://github.com/radix-ui/primitives/issues/602

package/src/BackButton.tsx

@@ -1,3 +0,0 @@
-import {BackButton} from "./Button/BackButton";
-
-export {BackButton};

package/src/Button.tsx

@@ -1,3 +0,0 @@
-import {Button} from "./Button/button";
-
-export {Button};

package/src/Select/components.tsx

@@ -1,90 +0,0 @@
-import React, {ReactNode} from "react";
-import {css} from "@linaria/core";
-import {components} from "react-windowed-select";
-import RemoveIcon from "../icons/react/Remove";
-import {ClearIndicatorProps, DropdownIndicatorProps, GroupBase, MultiValueRemoveProps, OptionProps} from "react-select";
-import {Button} from "../Button/button";
-import {space, themeVars} from "../designSystem";
-import ArrowCollapseVertical from "../icons/react/ArrowCollapseVertical";
-import {expanderExpandedStyle, expanderStyle} from "./styles";
-import cn from "classnames";
-
-export const Option = <
-  TOption,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<TOption> = GroupBase<TOption>
->({
-  children,
-  ...props
-}: OptionProps<TOption, IsMulti, Group>) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const {onMouseMove, onMouseOver, ...rest} = props.innerProps;
-  const newProps = Object.assign(props, {innerProps: rest});
-  return <components.Option {...newProps}>{children}</components.Option>;
-};
-
-export function DropdownIndicator<
-  TOption,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<TOption> = GroupBase<TOption>
->(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
-  if (props.selectProps.isDisabled) {
-    return null;
-  }
-  return (
-    <div className={cn(expanderStyle, props.selectProps.menuIsOpen && expanderExpandedStyle)}>
-      <ArrowCollapseVertical color={themeVars.disabledTextColor} />
-    </div>
-  );
-}
-
-export function ClearIndicator<
-  TOption,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<TOption> = GroupBase<TOption>
->({
-  innerProps,
-  selectProps,
-}: ClearIndicatorProps<TOption, IsMulti, Group> | MultiValueRemoveProps<TOption, IsMulti, Group>) {
-  if (selectProps.isDisabled) {
-    return null;
-  }
-  return (
-    <div {...innerProps}>
-      <Button borderless Icon={RemoveIcon} disabled={selectProps.isDisabled} size={":button-size/super-small"} />
-    </div>
-  );
-}
-
-export const NoOptionsMessage = ({children}: {children: ReactNode}) => {
-  return (
-    <div
-      className={css`
-        ${{
-          paddingLeft: space.l + 2,
-          paddingRight: space.l + 2,
-          paddingTop: space.m,
-          paddingBottom: space.m,
-        }}
-      `}
-    >
-      {children}
-    </div>
-  );
-};
-
-const groupDividerContainerStyle = css`
-  padding: ${space.l}px 0;
-  box-sizing: content-box;
-`;
-
-const groupDividerStyle = css`
-  width: 100%;
-  border-top: 1px solid #eeeff1;
-`;
-
-export const GroupDivider = () => (
-  <div className={groupDividerContainerStyle}>
-    <div className={groupDividerStyle}></div>
-  </div>
-);