@fibery/ui-kit 1.35.0 → 1.36.0

package/src/tab-nav/tab-nav.tsx

@@ -0,0 +1,208 @@
+import {createContext} from "@fibery/react/src/create-context";
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
+import {css, cx} from "@linaria/core";
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuItemProps,
+  NavigationMenuLink,
+  NavigationMenuLinkProps,
+  NavigationMenuList,
+  NavigationMenuListProps,
+  NavigationMenuProps,
+} from "@radix-ui/react-navigation-menu";
+import {forwardRef, ReactNode, RefObject, useLayoutEffect, useRef} from "react";
+import {border, fontWeight, space, textStyles, themeVars} from "../design-system";
+import {ellipsis} from "../styles-utils";
+import {TooltipIfOverflown} from "../tooltip-if-overflown";
+
+const tabNavIndicatorWidth = 100;
+
+const tabNavList = css`
+  display: flex;
+  margin: 0;
+  padding: 0;
+  gap: ${space.s6}px;
+`;
+
+const tabNavItem = css`
+  flex-shrink: 0;
+  padding-top: ${space.s4}px;
+  padding-bottom: ${space.s8}px;
+  max-width: 220px;
+  list-style: none;
+`;
+
+const tabButton = css`
+  all: unset;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 24px;
+  padding: ${space.s4}px ${space.s6}px;
+  box-sizing: border-box;
+  border-radius: ${border.radius6}px;
+  cursor: pointer;
+  user-select: none;
+  color: ${themeVars.accentTextColor};
+  transition-property: border, background-color, color, opacity;
+  transition-duration: 0.15s;
+
+  font-size: ${textStyles.small.fontSize}px;
+  font-weight: ${fontWeight.medium};
+  line-height: 16px;
+
+  &:hover,
+  &:focus-visible {
+    background-color: ${themeVars.colorBgTabHover};
+    color: ${themeVars.textColor};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${themeVars.colorBorderNeutralFocusRing};
+  }
+
+  &[data-active] {
+    color: ${themeVars.textColor};
+  }
+`;
+
+const tabNavButtonText = css`
+  padding: 0 ${space.s4}px;
+`;
+
+const tabNavIndicatorTrack = css`
+  position: relative;
+`;
+
+const tabNavIndicator = css`
+  display: none;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background-color: ${themeVars.colorBgButtonSolidNeutralDefault};
+  height: 2px;
+  width: ${tabNavIndicatorWidth}px;
+`;
+
+const tabNavIndicatorMounted = css`
+  will-change: transition;
+  transition: transform 150ms ease;
+  transform-origin: 0;
+
+  .${tabNavIndicatorTrack}:has([data-active]) & {
+    display: block;
+  }
+`;
+
+const [TabNavIndicatorProvider, useTabNavIndicatorCtx] =
+  createContext<React.RefObject<HTMLDivElement>>("TabNavIndicatorContext");
+
+export type TabNavRootProps = NavigationMenuProps;
+
+export const TabNavRoot = ({className, children, ...props}: NavigationMenuProps) => {
+  const indicatorRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <NavigationMenu className={className} {...props}>
+      <div className={tabNavIndicatorTrack}>
+        <div ref={indicatorRef} className={tabNavIndicator} />
+
+        <TabNavIndicatorProvider value={indicatorRef}>{children}</TabNavIndicatorProvider>
+      </div>
+    </NavigationMenu>
+  );
+};
+
+export const TabNavList = forwardRef<HTMLUListElement, NavigationMenuListProps>(
+  ({className, children, ...props}, ref) => {
+    return (
+      <NavigationMenuList ref={ref} className={cx(className, tabNavList)} {...props}>
+        {children}
+      </NavigationMenuList>
+    );
+  }
+);
+
+const useTabNavIndicator = (
+  {
+    active,
+    itemRef,
+  }: {
+    active?: boolean;
+    itemRef: RefObject<HTMLElement>;
+  },
+  deps: Array<unknown> = []
+) => {
+  const indicatorRef = useTabNavIndicatorCtx();
+
+  useLayoutEffect(() => {
+    if (active && itemRef.current && indicatorRef.current) {
+      indicatorRef.current.style.transform = `translateX(${itemRef.current.offsetLeft}px) scaleX(${
+        itemRef.current.offsetWidth / tabNavIndicatorWidth
+      })`;
+      indicatorRef.current.classList.add(tabNavIndicatorMounted);
+    }
+  }, [
+    active,
+    indicatorRef,
+    itemRef,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    ...deps,
+  ]);
+};
+
+export const TabNavItem = forwardRef<HTMLLIElement, NavigationMenuItemProps & {active?: boolean}>(
+  ({className, children, active, ...props}, forwardedRef) => {
+    const itemRef = useRef(null);
+    const ref = useComposedRefs(itemRef, forwardedRef);
+
+    useTabNavIndicator({active, itemRef}, [children]);
+
+    return (
+      <NavigationMenuItem ref={ref} className={cx(tabNavItem, className)} {...props}>
+        {children}
+      </NavigationMenuItem>
+    );
+  }
+);
+
+export const TabNavLink = forwardRef<
+  HTMLAnchorElement,
+  Omit<NavigationMenuLinkProps, "asChild"> & {
+    before?: ReactNode;
+    after?: ReactNode;
+    itemClassName?: string;
+  }
+>(function TabNavLink({children, className, itemClassName, active, before, after, href, ...linkProps}, forwardedRef) {
+  const renderAsButton = typeof href === "undefined";
+
+  const Component = renderAsButton ? "button" : "a";
+  const btnProps = renderAsButton
+    ? ({type: "button", "aria-current": active ? "true" : undefined} as const)
+    : undefined;
+
+  return (
+    <TooltipIfOverflown title={children}>
+      {({setNode}) => (
+        <TabNavItem className={itemClassName} active={active}>
+          <NavigationMenuLink
+            ref={forwardedRef}
+            className={cx(tabButton, className)}
+            active={active}
+            {...linkProps}
+            asChild
+          >
+            <Component {...btnProps}>
+              {before}
+              <span ref={setNode} className={cx(tabNavButtonText, ellipsis)}>
+                {children}
+              </span>
+              {after}
+            </Component>
+          </NavigationMenuLink>
+        </TabNavItem>
+      )}
+    </TooltipIfOverflown>
+  );
+});

package/src/table.tsx

@@ -0,0 +1,91 @@
+import {PureComponent, ReactNode} from "react";
+import {border, space, themeVars} from "./design-system";
+import {css, cx} from "@linaria/core";
+
+const tableStyle = css`
+  ${{
+    backgroundColor: themeVars.transparent,
+    paddingTop: space.s12,
+    paddingBottom: space.s12,
+    paddingLeft: space.s6,
+    paddingRight: space.s6,
+  }}
+`;
+
+export class Table extends PureComponent<{children: ReactNode}> {
+  render() {
+    const {children} = this.props;
+    return <div className={tableStyle}>{children}</div>;
+  }
+}
+
+const rowStyle = css`
+  ${{
+    display: "grid",
+    gridTemplateColumns: "1fr minmax(140px, 7fr) 3fr minmax(140px, 3fr) 32px",
+    borderRadius: border.radius6,
+    padding: space.s6,
+    paddingLeft: space.s12,
+    marginBottom: space.s8,
+    alignItems: "center",
+    color: themeVars.textColor,
+  }}
+`;
+
+const cellSingleLineStyle = css`
+  ${{
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+  }}
+`;
+
+const selectedRowStyle = css`
+  ${{
+    background: themeVars.unitBg,
+    "&:hover": {
+      background: themeVars.unitBg,
+    },
+  }}
+`;
+
+export class Row extends PureComponent<{
+  children: ReactNode;
+  className?: string;
+  selected?: boolean;
+  onClick?: React.MouseEventHandler;
+}> {
+  render() {
+    const {children, className, selected, onClick} = this.props;
+    return (
+      <div className={cx(rowStyle, selected && selectedRowStyle, className)} onClick={onClick}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export const cellClassName = css`
+  ${{
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    paddingTop: space.s4,
+    paddingBottom: space.s4,
+  }}
+`;
+
+export class Cell extends PureComponent<{
+  children: ReactNode;
+  className?: string;
+  nowrap?: boolean;
+}> {
+  render() {
+    const {children, className, nowrap} = this.props;
+    return (
+      <div className={cx(cellClassName, className)}>
+        {nowrap ? <div className={cellSingleLineStyle}>{children}</div> : children}
+      </div>
+    );
+  }
+}

package/src/toast/primitives.tsx

@@ -8,9 +8,8 @@ import CloseIcon from "../icons/react/Close";
 
 const viewportCss = css`
   position: fixed;
-  left: 50%;
+  right: 0;
   bottom: 0;
-  transform: translateX(-50%);
 
   display: flex;
   flex-direction: column-reverse;
@@ -24,7 +23,7 @@ const viewportCss = css`
   transition: bottom ${transition}; // bottom may change dynamically
 
   &:not(:empty) {
-    padding: ${space.s24}px; // increased mouse hover area to pause timers of toast
+    margin: ${space.s24}px;
   }
 `;
 
@@ -38,10 +37,9 @@ export const ToastViewport = forwardRef<
 const rootCss = css`
   user-select: auto !important;
 
-  background-color: ${themeVars.colorBgToastDefault};
-  padding: ${space.s12}px ${space.s8 * 2}px;
+  background-color: ${themeVars.colorBgPopup};
+  box-shadow: ${themeVars.shadowPopup};
   border-radius: ${border.radius6}px;
-  box-shadow: ${themeVars.shadowModal};
 
   will-change: opacity;
 
@@ -128,7 +126,8 @@ export const ToastRoot = forwardRef<ElementRef<typeof ToastPrimitives.Root>, Toa
 );
 
 const titleCss = css`
-  ${textStyles.heading5};
+  ${textStyles.regular};
+  word-break: break-word;
 `;
 
 export const ToastTitle = forwardRef<ElementRef<typeof ToastPrimitives.Title>, ToastPrimitives.ToastTitleProps>(

package/src/toast/toast-action.tsx

@@ -3,6 +3,8 @@ import {Action as RadixToastAction, type ToastActionProps} from "@radix-ui/react
 import {ElementRef, forwardRef} from "react";
 import {ButtonProps, Button} from "../button/button";
 import {space} from "../design-system";
+import {makeButtonColors} from "../button/make-button-colors";
+import {useTheme} from "../theme-provider";
 
 const toastActionCss = css`
   margin-top: -${space.s4}px;
@@ -10,13 +12,17 @@ const toastActionCss = css`
   flex-shrink: 0;
 `;
 
+export {RadixToastAction};
+
 export const ToastAction = forwardRef<
   ElementRef<typeof RadixToastAction>,
   ButtonProps & {altText: ToastActionProps["altText"]}
 >(({children, altText, ...props}, ref) => {
+  const theme = useTheme();
+  const buttonColors = theme.mode === "dark" ? makeButtonColors(theme.textColor, "outline") : {};
   return (
     <RadixToastAction className={toastActionCss} ref={ref} altText={altText} asChild>
-      <Button variant="outline" color="neutral" {...props}>
+      <Button style={buttonColors} variant="outline" color="neutral" {...props}>
         {children}
       </Button>
     </RadixToastAction>

package/src/toast/toast-queue.ts

@@ -3,7 +3,7 @@ import type {ToastProps} from "./toast";
 
 export type AddToastProps = Pick<
   ToastProps,
-  "type" | "title" | "subTitle" | "icon" | "action" | "duration" | "open" | "dismissable"
+  "type" | "title" | "subTitle" | "icon" | "action" | "duration" | "open" | "dismissable" | "variant"
 > & {
   id?: string;
 };

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>
+  );
+};