@fibery/ui-kit 1.35.0 → 1.36.1

package/src/toast/toast.tsx

@@ -1,18 +1,20 @@
 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 {css, cx} from "@linaria/core";
+import {useEffect, useRef, useCallback} 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 CheckCircleFilled from "../icons/react/CheckCircleFilled";
+import AlertTriangle from "../icons/react/AlertTriangle";
 import {ToastClose, ToastRoot, ToastSubtitle, ToastTitle} from "./primitives";
 import type {ToastActionElement} from "./toast-action";
+import {iconSizeVar} from "../icons/Icon";
 
 type ToastType = "info" | "error" | "success" | "loading";
 
 export type ToastProps = {
   title: React.ReactNode;
+  variant?: "line" | "card";
   subTitle?: React.ReactNode;
   icon?: React.ReactNode;
   action?: ToastActionElement;
@@ -30,7 +32,7 @@ export type ToastProps = {
 const defaultPropsPerType: Record<ToastType, Partial<ToastProps>> = {
   info: {},
   error: {
-    icon: <WarningTriangle color={themeVars.textColor} />,
+    icon: <AlertTriangle color={themeVars.warning} />,
     duration: 10000,
     dismissable: true,
   },
@@ -38,7 +40,7 @@ const defaultPropsPerType: Record<ToastType, Partial<ToastProps>> = {
     icon: <Spinner color={themeVars.textColor} />,
   },
   success: {
-    icon: <SuccessIcon color={themeVars.textColor} />,
+    icon: <CheckCircleFilled color={themeVars.success} />,
   },
 };
 
@@ -46,9 +48,21 @@ const rootCss = css`
   box-sizing: border-box;
   min-height: 44px;
   min-width: 320px;
+  max-width: min(calc(100vw - 40px), 400px);
+`;
+
+const rootLineCss = css`
   display: flex;
   align-items: center;
   gap: ${space.s12}px;
+  padding: ${space.s12}px ${space.s16}px;
+`;
+
+const cartCardCss = css`
+  display: flex;
+  flex-direction: column;
+  gap: ${space.s8}px;
+  padding: ${space.s12}px;
 `;
 
 const messageCss = css`
@@ -71,10 +85,11 @@ export const Toast: React.FC<ToastProps> = (props) => {
     icon,
     action,
     duration = 5000,
-    dismissable,
+    dismissable = true,
     open,
     onOpenChange,
     onHide,
+    variant = "line",
   } = {
     ...defaultProps,
     ...props,
@@ -105,17 +120,64 @@ export const Toast: React.FC<ToastProps> = (props) => {
   }, [isOpen, onHideCb]);
 
   const close = dismissable ? <ToastClose /> : null;
+  const onEscapeKeyDown = useCallback((evt: KeyboardEvent) => {
+    if (
+      evt.target &&
+      evt.target instanceof Element &&
+      (evt.target.tagName === "INPUT" || evt.target.tagName === "TEXTAREA")
+    ) {
+      evt.preventDefault();
+    }
+  }, []);
 
   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
+      onEscapeKeyDown={onEscapeKeyDown}
+      type="background"
+      ref={ref}
+      open={open}
+      duration={duration}
+      className={cx(rootCss, variant === "card" ? cartCardCss : rootLineCss)}
+      onOpenChange={setOpen}
+    >
+      {variant === "card" ? (
+        <>
+          {icon || close ? (
+            <div
+              className={css`
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+              `}
+            >
+              <div
+                className={css`
+                  ${iconSizeVar}: ${space.s16}px;
+                `}
+              >
+                {icon}
+              </div>
+              <div>{close}</div>
+            </div>
+          ) : null}
+          <div className={messageCss}>
+            <ToastTitle>{title}</ToastTitle>
+            {subTitle ? <ToastSubtitle>{subTitle}</ToastSubtitle> : null}
+          </div>
+          {action}
+        </>
+      ) : (
+        <>
+          {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

@@ -1,23 +1,8 @@
 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>
-  );
-};
-
 const viewportId = "toast-viewport";
 
 export const Toaster: React.FC = () => {
@@ -27,7 +12,7 @@ export const Toaster: React.FC = () => {
   const bottomOffset = useSyncExternalStore(toastQueue.subscribe, toastQueue.getBottomOffset);
 
   return (
-    <ToastThemeProvider>
+    <>
       {toasts.map(({id, open, type = "info", ...toastProps}) => (
         <Toast
           key={`${id}-${type}`}
@@ -47,6 +32,6 @@ export const Toaster: React.FC = () => {
       ))}
 
       <ToastViewport id={viewportId} style={{bottom: bottomOffset}} />
-    </ToastThemeProvider>
+    </>
   );
 };

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

@@ -1,6 +1,17 @@
-const charLimit = 60;
+const trimDynamicToastText = (str: string, charLimit: number) =>
+  str.length > charLimit ? `${str.slice(0, charLimit)}…` : str;
 
-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}` : ""}`;
+export const toastifyItemName = ({
+  prefix,
+  name,
+  postfix,
+  charLimit = 60,
+}: {
+  prefix?: string;
+  name?: string;
+  postfix?: string;
+  charLimit?: number;
+}) =>
+  `${prefix ? `${prefix} ` : ""}"${name ? trimDynamicToastText(name, charLimit) : "Untitled"}"${
+    postfix ? ` ${postfix}` : ""
+  }`;

package/src/tooltip.tsx

@@ -33,6 +33,9 @@ export const tooltipStyle = css`
   padding: ${space.s6}px ${space.s8}px;
   border-radius: ${border.radius6}px;
   box-shadow: ${themeVars.actionMenuShadow};
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: break-word;
   @keyframes zoomIn {
     from {
       opacity: 0;

package/src/type-badge-box.tsx

@@ -0,0 +1,42 @@
+import {makeAbbreviation} from "./type-badge";
+import {css, cx} from "@linaria/core";
+import {space} from "./design-system";
+import {ReactNode} from "react";
+
+type Props = {
+  width: number;
+  height: number;
+  typeObject: {title: string};
+  children: ReactNode;
+};
+
+export const TypeBadgeBox = ({width, height, typeObject, children}: Props) => {
+  const abbr = makeAbbreviation(typeObject.title);
+
+  return (
+    <div
+      style={{width, height}}
+      className={cx(
+        css`
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          & > div {
+            padding-left: ${space.s2}px;
+            padding-right: ${space.s1}px;
+            overflow: hidden;
+          }
+        `,
+        abbr.length > 1 &&
+          css`
+            & > div {
+              mask-image: linear-gradient(90deg, #000 60%, rgba(0, 0, 0, 0.4));
+            }
+          `
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/type-badge.tsx

@@ -0,0 +1,315 @@
+import {css} from "@linaria/core";
+import cx from "classnames";
+import _ from "lodash";
+import {CSSProperties, forwardRef, memo, ReactNode} from "react";
+import {a11yColor} from "./a11y-color";
+import {
+  border,
+  colors,
+  fontWeight,
+  getDarkenColor,
+  getTextColor,
+  getThemeValue,
+  opacity,
+  space,
+  textStyles,
+  transition,
+} from "./design-system";
+import {useTheme} from "./theme-provider";
+import {Tooltip} from "./tooltip";
+
+const typeBadgeStaticStyle = {
+  display: "inline-grid",
+  ...textStyles.heading6,
+  fontSize: 11,
+  letterSpacing: 1.5,
+  lineHeight: 1.24,
+  outline: "none",
+  whiteSpace: "nowrap",
+  transition: `box-shadow ${transition}`,
+  opacity: 0.95,
+  borderWidth: 1,
+  borderStyle: "solid",
+};
+
+export const normalTypeBadgeStyleObject = {
+  ...typeBadgeStaticStyle,
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: space.s4,
+  paddingRight: space.s4,
+  borderRadius: border.radius4,
+};
+
+export const normalTypeBadgeStaticStyle = css`
+  ${normalTypeBadgeStyleObject}
+`;
+
+const bigTypeBadgeStaticStyle = css`
+  ${{
+    ...typeBadgeStaticStyle,
+    fontSize: 12,
+    lineHeight: 1,
+    fontWeight: fontWeight.medium,
+    letterSpacing: 2,
+    paddingTop: space.s4,
+    paddingBottom: space.s4,
+    paddingLeft: space.s6 + 2, //compensate letter spacing
+    paddingRight: space.s6,
+    borderRadius: border.radius6 - 1,
+  }}
+`;
+
+const compactTypeBadgeStaticStyle = css`
+  ${{
+    ...typeBadgeStaticStyle,
+    display: "grid",
+    lineHeight: 1.1,
+    paddingTop: 1,
+    paddingBottom: 1,
+    paddingLeft: space.s4 + 1,
+    paddingRight: space.s4,
+    borderRadius: border.radius4,
+  }}
+`;
+
+const abbrStaticStyle = {
+  paddingLeft: space.s2 + 1,
+  paddingRight: space.s2,
+  textAlign: "center",
+};
+
+const abbrCompactStyle = css`
+  ${{
+    ...abbrStaticStyle,
+    minWidth: 16,
+  }}
+`;
+
+const abbrVerticalCompactStyle = css`
+  padding-right: 1px;
+  padding-top: ${space.s2 + 1}px;
+  padding-bottom: ${space.s2}px;
+  padding-left: 1px;
+  writing-mode: vertical-lr;
+  text-align: center;
+  min-height: 16px;
+`;
+
+const colorProp = "--fibery-type-badge-color";
+const colorVar = `var(${colorProp})`;
+const colorDarkProp = "--fibery-type-badge-color-dark";
+const colorDarkVar = `var(${colorDarkProp})`;
+const colorBackgroundProp = "--fibery-type-badge-background-color";
+const colorBackgroundVar = `var(${colorBackgroundProp})`;
+const colorBorderProp = "--fibery-type-badge-border-color";
+const colorBorderVar = `var(${colorBorderProp})`;
+
+const typeBadgeStyle = css`
+  ${{
+    color: colorVar,
+    backgroundColor: colorBackgroundVar,
+    borderColor: colorBorderVar,
+  }}
+`;
+
+const selectedStyle = css`
+  box-shadow: 0 0 0 2px ${colorDarkVar};
+`;
+
+const clickableStyle = css`
+  cursor: pointer;
+`;
+const fadedStyle = css`
+  opacity: ${opacity.opacity25};
+`;
+
+export const makeDescription = (typeObject: {description?: string | null}): string | null => {
+  return typeObject.description || null;
+};
+
+export const makeAbbreviation = (title = "") =>
+  title
+    .split(" ")
+    .map((word) => word[0])
+    .join("");
+
+type TypeBadgeProps = {
+  color: string;
+  onMouseDown?: () => void;
+  onMouseEnter?: React.MouseEventHandler;
+  onMouseLeave?: React.MouseEventHandler;
+  onClick?: () => void;
+  children: ReactNode;
+  selected?: boolean;
+  abbr?: boolean;
+  compact?: boolean;
+  tooltip?: ReactNode;
+  faded?: boolean;
+  big?: boolean;
+  vertical?: boolean;
+  className?: string;
+  noTooltip?: boolean; // pass true to force disable tooltip for abbr
+};
+
+export const TypeBadge = memo(
+  forwardRef<HTMLDivElement | HTMLButtonElement, TypeBadgeProps>(function TypeBadge(
+    {
+      color,
+      onMouseDown,
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+      children,
+      selected,
+      abbr,
+      compact,
+      tooltip,
+      faded = false,
+      big = false,
+      vertical = false,
+      className,
+      noTooltip,
+    },
+    ref
+  ) {
+    const TagName = onClick ? "button" : "div";
+    const title =
+      _.isString(children) && abbr ? (
+        noTooltip ? (
+          makeAbbreviation(children)
+        ) : (
+          <Tooltip title={tooltip || children} side="bottom">
+            <span>{makeAbbreviation(children)}</span>
+          </Tooltip>
+        )
+      ) : (
+        children
+      );
+
+    const theme = useTheme();
+
+    const textBadgeColor = getThemeValue(theme.mode, {
+      dark: a11yColor(getTextColor(color), getDarkenColor(color), 12),
+      light: a11yColor(getTextColor(color), getDarkenColor(color), 12),
+      light2: a11yColor(getTextColor(color), getDarkenColor(color), 12),
+    });
+
+    const backgroundBadgeColor = getThemeValue(theme.mode, {
+      dark: getDarkenColor(color),
+      light: color,
+      light2: color,
+    });
+
+    const style = {
+      [colorProp]: color ? textBadgeColor : colors.inversedTextColor,
+      //[colorProp]: color ? getTextColor(color) : colors.inversedTextColor,
+      [colorBackgroundProp]: backgroundBadgeColor || colors.shades.opacity25,
+      //[colorBackgroundProp]: color || colors.shades.opacity25,
+      [colorBorderProp]: backgroundBadgeColor,
+      [colorDarkProp]: getDarkenColor(color),
+    } as CSSProperties;
+
+    return (
+      <TagName
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ref={ref}
+        style={style}
+        className={cx(
+          typeBadgeStyle,
+          big ? bigTypeBadgeStaticStyle : compact ? compactTypeBadgeStaticStyle : normalTypeBadgeStaticStyle,
+          {
+            [abbrCompactStyle]: abbr && !vertical,
+            [abbrVerticalCompactStyle]: abbr && vertical,
+            [selectedStyle]: selected,
+            [clickableStyle]: onClick,
+            [fadedStyle]: faded,
+          },
+          className
+        )}
+        onMouseDown={onMouseDown}
+        onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {title}
+      </TagName>
+    );
+  })
+);
+
+type TypeObjectInfo = {
+  title: string;
+  pluralTitle?: string;
+  singularTitle?: string;
+  color: string;
+  description?: string | null;
+};
+
+const getTypeObjectTitleForm = (typeObject: TypeObjectInfo, form: "singular" | "plural") =>
+  form === "singular" ? typeObject.singularTitle : typeObject.pluralTitle;
+
+type TypeObjectBadgeParams = {
+  typeObject: TypeObjectInfo;
+  onMouseDown?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  onClick?: () => void;
+  abbr?: boolean;
+  compact?: boolean;
+  vertical?: boolean;
+  form?: "singular" | "plural";
+  className?: string;
+  big?: boolean;
+  selected?: boolean;
+  faded?: boolean;
+  tooltip?: boolean;
+};
+
+export const TypeObjectBadge = forwardRef<HTMLDivElement | HTMLButtonElement, TypeObjectBadgeParams>(
+  (
+    {
+      typeObject,
+      onMouseDown,
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+      abbr,
+      compact,
+      vertical,
+      form,
+      className,
+      big,
+      selected,
+      faded,
+      tooltip = true,
+    },
+    ref
+  ) => {
+    const typeTitle = String(form ? getTypeObjectTitleForm(typeObject, form) : typeObject.title);
+    const caption = abbr ? makeAbbreviation(typeTitle) : typeTitle;
+
+    return (
+      <TypeBadge
+        ref={ref}
+        color={typeObject.color}
+        abbr={abbr}
+        compact={compact}
+        vertical={vertical}
+        className={className}
+        big={big}
+        selected={selected}
+        onClick={onClick}
+        onMouseDown={onMouseDown}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        faded={faded}
+      >
+        <Tooltip title={typeTitle} disabled={!tooltip} description={makeDescription(typeObject)} side="bottom">
+          <span>{caption}</span>
+        </Tooltip>
+      </TypeBadge>
+    );
+  }
+);

package/src/unit/as-string.tsx

@@ -0,0 +1 @@
+export const asString = (something: unknown) => (typeof something === "string" ? something : JSON.stringify(something));

package/src/unit/index.tsx

@@ -0,0 +1,55 @@
+import {CardSize} from "../card-container";
+import {themeVars} from "../design-system";
+import {UnitPrimitive} from "./primitive";
+import {UnitPrimitiveProps} from "./types";
+
+// Try not to use UnitPrimitive directly, rather define a pattern of usage, and create own unit with the pattern.
+
+export const BasicUnit = ({
+  renderAsDiv = false,
+  onKeyDown,
+  ...props
+}: UnitPrimitiveProps & {readOnly: boolean; size: CardSize}) => {
+  if (props.size === ":card-size/cell") {
+    const bgColor = props.bgColor || themeVars.transparent;
+    return (
+      <UnitPrimitive
+        onKeyDown={onKeyDown}
+        bgColor={bgColor}
+        border={false}
+        button={false}
+        header={false}
+        tooltip={false}
+        setMinWidth={false}
+        big
+        {...props}
+      />
+    );
+  }
+
+  const bgColor = props.bgColor || props.readOnly ? themeVars.inputDisabledBgColor : themeVars.transparent;
+  return (
+    <UnitPrimitive
+      bgColor={bgColor}
+      onKeyDown={onKeyDown}
+      border={!props.readOnly}
+      button={renderAsDiv === true ? false : !props.readOnly || Boolean(props.onClick)}
+      header={props.size === ":card-size/full"}
+      tooltip={props.tooltip ?? props.size !== ":card-size/full"}
+      clickable={!props.readOnly}
+      {...props}
+    />
+  );
+};
+
+export const CellUnit = (props: UnitPrimitiveProps) => {
+  return <UnitPrimitive big={true} tooltip={false} {...props} />;
+};
+
+export const OptionUnit = (props: UnitPrimitiveProps) => {
+  return <UnitPrimitive big={true} tooltip={false} {...props} />;
+};
+
+export const HistoryUnit = (props: UnitPrimitiveProps & {size: CardSize}) => {
+  return <UnitPrimitive big={props.size === ":card-size/cell"} bgColor={themeVars.unitBg} border={false} {...props} />;
+};

package/src/unit/loading-unit-value.tsx

@@ -0,0 +1,13 @@
+import {css} from "@linaria/core";
+import {LoadingSausage, LoadingSausageProps} from "../loading-sausage";
+
+export const unitTextHeight = 8;
+export const LoadingUnitValue = (props: LoadingSausageProps) => (
+  <div
+    className={css`
+      display: inline-flex;
+    `}
+  >
+    <LoadingSausage {...props} height={unitTextHeight} />
+  </div>
+);

package/src/unit/maybe-unit-value.tsx

@@ -0,0 +1,9 @@
+import {LoadingUnitValue} from "./loading-unit-value";
+
+interface MaybeUnitValueProps {
+  value?: string;
+}
+
+export const MaybeUnitValue: React.FC<MaybeUnitValueProps> = ({value}) => {
+  return value === undefined ? <LoadingUnitValue minWidth={18} maxWidth={18} /> : <>{value}</>;
+};