@fibery/ui-kit 1.34.8 → 1.36.0

package/src/unit/primitive.tsx

@@ -0,0 +1,167 @@
+import {css} from "@linaria/core";
+import cx from "classnames";
+import {ComponentProps} from "react";
+import {inputOverrides} from "../antd/styles";
+import {border, themeVars} from "../design-system";
+import {
+  basicUnitClassName,
+  bigSizeUnitClassName,
+  bigSizeUnitMinWidthClassName,
+  borderClassName,
+  clickableClassName,
+  fullUnitWrapperClassName,
+  invalidUnitClassName,
+  positionUnitClass,
+  regularSizeUnitClassName,
+  regularSizeUnitMinWidthClassName,
+  textEllipsisClassName,
+  unitDescriptionClassName,
+  unitTitleClassName,
+  unitTooltipTitleClassName,
+  unitWithTitleClassName,
+} from "./styles";
+import {UnitPrimitiveProps} from "./types";
+import {UnitButtonGroup} from "./unit-button-group";
+import {UnitContent} from "./unit-content";
+import {UnitWithTooltip} from "./unit-with-tooltip";
+
+const resetButtonStylesClassName = css`
+  all: unset;
+  background-color: ${themeVars.transparent};
+  --input-focus-border: ${inputOverrides.main["--input-focus-border"]};
+  --input-focus-shadow: ${inputOverrides.main["--input-focus-shadow"]};
+  border-radius: ${border.radius6}px;
+  &:focus {
+    outline: none;
+    ${inputOverrides.focus}
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+    box-shadow: none !important;
+  }
+
+  &:focus-visible {
+    outline: none;
+    ${inputOverrides.focus}
+  }
+`;
+
+const ButtonComponent = (props: ComponentProps<"button">) => {
+  return <button type={"button"} {...props} className={cx(props.className, resetButtonStylesClassName)} />;
+};
+
+const DivComponent = (props: ComponentProps<"div">) => <div {...props} />;
+
+export const UnitPrimitive = ({
+  // Markup
+  overflow = true,
+  inline = true,
+  button = false,
+  multiline = false,
+  // Content
+  children,
+  title,
+  description = null,
+  hint = null,
+  icons,
+  navButton,
+  // Appearance
+  big = false,
+  tooltip = true,
+  header = false,
+  border = true,
+  bgColor = themeVars.transparent,
+  shrinkable = true,
+  clickable = border,
+  setMinWidth = true,
+  // Callback
+  onClick,
+  onKeyDown,
+  invalid,
+  tooltipContent: tooltipChildren,
+}: UnitPrimitiveProps) => {
+  const cutTextInUnit = !multiline && overflow;
+  const unitWrapperStyle = {
+    backgroundColor: bgColor || themeVars.inputDisabledBgColor,
+  };
+
+  const unitWrapperClassName = cx(
+    basicUnitClassName,
+    big ? bigSizeUnitClassName : regularSizeUnitClassName,
+    setMinWidth && (big ? bigSizeUnitMinWidthClassName : regularSizeUnitMinWidthClassName),
+    border && borderClassName,
+    invalid && invalidUnitClassName,
+    clickable && clickableClassName
+  );
+
+  const UnitContentComponent = button ? ButtonComponent : DivComponent;
+
+  const content = (
+    <UnitButtonGroup
+      big={big}
+      inline={inline}
+      style={unitWrapperStyle}
+      className={unitWrapperClassName}
+      unitButton={
+        <UnitContentComponent onKeyDown={onKeyDown} onClick={onClick}>
+          <UnitContent
+            big={big}
+            icons={icons}
+            children={children}
+            contentClassName={cx({[textEllipsisClassName]: cutTextInUnit})}
+            shrinkable={shrinkable}
+          />
+        </UnitContentComponent>
+      }
+      navButton={navButton}
+    />
+  );
+
+  const contentWithTitle = header ? (
+    <div className={unitWithTitleClassName}>
+      <div className={unitTitleClassName}>{title}</div>
+      {content}
+    </div>
+  ) : (
+    content
+  );
+
+  if (tooltip) {
+    const tooltipContent = (
+      <UnitButtonGroup
+        big={big}
+        inline={inline}
+        style={unitWrapperStyle}
+        className={unitWrapperClassName}
+        unitButton={
+          <UnitContentComponent onClick={onClick}>
+            <UnitContent big={big} icons={icons}>
+              {tooltipChildren || children}
+            </UnitContent>
+          </UnitContentComponent>
+        }
+      />
+    );
+    const renderedDescription = (
+      <div>
+        {description && <div className={unitDescriptionClassName}>{description}</div>}
+        <div className={fullUnitWrapperClassName}>{tooltipContent}</div>
+        {hint}
+      </div>
+    );
+
+    return (
+      <div className={positionUnitClass}>
+        <UnitWithTooltip
+          title={<div className={unitTooltipTitleClassName}>{title}</div>}
+          description={renderedDescription}
+        >
+          {contentWithTitle}
+        </UnitWithTooltip>
+      </div>
+    );
+  } else {
+    return <div className={positionUnitClass}>{contentWithTitle}</div>;
+  }
+};

package/src/unit/required-indicator.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.6 11.4C8.6 11.7314 8.33136 12 8 12C7.66863 12 7.4 11.7314 7.4 11.4V9.44852L6.02009 10.8284C5.78578 11.0627 5.40587 11.0627 5.17157 10.8284C4.93725 10.5941 4.93725 10.2142 5.17157 9.9799L6.55147 8.6H4.6C4.26863 8.6 4 8.33136 4 8C4 7.66863 4.26863 7.4 4.6 7.4H6.55147L5.17157 6.0201C4.93725 5.78579 4.93725 5.40589 5.17157 5.17157C5.40587 4.93727 5.78578 4.93726 6.02009 5.17157L7.4 6.55148V4.6C7.4 4.26863 7.66863 4 8 4C8.33136 4 8.6 4.26863 8.6 4.6V6.55147L9.97989 5.17157C10.2142 4.93727 10.5941 4.93726 10.8284 5.17157C11.0627 5.40588 11.0627 5.78579 10.8284 6.0201L9.44852 7.4H11.4C11.7314 7.4 12 7.66863 12 8C12 8.33136 11.7314 8.6 11.4 8.6H9.44852L10.8284 9.9799C11.0627 10.2142 11.0627 10.5941 10.8284 10.8284C10.5941 11.0627 10.2142 11.0627 9.97989 10.8284L8.6 9.44853V11.4Z" fill="#4065DD"/>
+</svg>

package/src/unit/styles.ts

@@ -0,0 +1,165 @@
+import {css} from "@linaria/core";
+import {space, textStyles, themeVars} from "../../src/design-system";
+
+export const textEllipsisClassName = css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const basicUnitClassName = css`
+  border-radius: ${space.s4 + space.s1}px;
+  border: none;
+`;
+
+export const alignCenterClassName = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+`;
+
+export const regularTextUnitSize = textStyles.regular.fontSize + space.s8;
+export const smallTextUnitSize = textStyles.small.fontSize + space.s8;
+
+export const bigSizeUnitClassName = css`
+  ${textStyles.regular}
+  line-height: ${regularTextUnitSize}px;
+`;
+
+export const bigSizeUnitMinWidthClassName = css`
+  min-width: ${regularTextUnitSize + space.s4}px;
+  justify-content: center;
+`;
+
+export const regularSizeUnitClassName = css`
+  ${textStyles.small}
+  line-height: ${smallTextUnitSize}px;
+`;
+
+export const regularSizeUnitMinWidthClassName = css`
+  min-width: ${smallTextUnitSize + space.s4}px;
+  justify-content: center;
+`;
+
+export const unitTitleClassName = css`
+  ${textStyles.heading7}
+  padding-bottom: ${space.s2}px;
+  padding-top: ${space.s6}px;
+`;
+
+export const unitTooltipTitleClassName = css`
+  margin-bottom: ${space.s4}px;
+`;
+
+export const unitWithTitleClassName = css`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  line-height: 1.2;
+  width: 100%;
+`;
+
+export const invalidUnitClassName = css``;
+export const invalidUnitClassNameInForm = css``;
+
+export const borderClassName = css`
+  position: relative;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    box-shadow: ${themeVars.inputBorderColor} inset;
+    mix-blend-mode: ${themeVars.inputBorderBlendMode};
+    border-radius: ${space.s4 + space.s1}px;
+    pointer-events: none;
+  }
+
+  &:hover::before {
+    box-shadow: ${themeVars.inputBorderHoverColor} inset;
+  }
+
+  &:focus::before {
+    box-shadow: ${themeVars.inputBorderFocusColor} inset;
+  }
+
+  &.${invalidUnitClassName} {
+    padding-left: 20px;
+    &:has(button) {
+      padding-left: 0;
+    }
+    & button {
+      padding-left: 20px;
+    }
+
+    &::before {
+      box-shadow: none;
+      border: 1px solid ${themeVars.colorBorderButtonOutlineAccentDefault};
+    }
+
+    &:hover::before {
+      box-shadow: none;
+      border: 1px solid ${themeVars.colorBorderReactionsSelectedHover};
+    }
+
+    &:focus::before {
+      box-shadow: ${themeVars.inputBorderFocusColor} inset;
+      border: none;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      width: 20px;
+      left: 4px;
+      right: 0;
+      bottom: 0;
+      background-image: url("./required-indicator.svg");
+      background-repeat: no-repeat;
+      background-size: 16px 16px;
+      background-position: center;
+      pointer-events: none;
+    }
+  }
+`;
+
+export const clickableClassName = css`
+  cursor: pointer;
+`;
+
+export const basicUnitContentClassName = css`
+  padding-left: ${space.s4}px;
+  padding-right: ${space.s4}px;
+`;
+
+export const unitContentContainerClassName = css`
+  overflow: hidden;
+`;
+
+export const unitDescriptionClassName = css`
+  margin-bottom: ${space.s4}px;
+`;
+
+export const fullUnitWrapperClassName = css`
+  display: flex;
+  align-items: center;
+  padding: ${space.s6}px;
+  border-radius: ${space.s4 + space.s1}px;
+  background-color: ${themeVars.cardBg};
+  margin-bottom: ${space.s4}px;
+`;
+
+// Makes unit shown on top of card link(see CardContainer) thus allows to interact with unit. E.g. show tooltip or hidden link.
+export const positionUnitClass = css`
+  line-height: 0;
+  position: relative;
+`;

package/src/unit/types.ts

@@ -0,0 +1,31 @@
+import {KeyboardEvent, ReactNode} from "react";
+
+export type UnitPrimitiveProps = {
+  // Markup
+  overflow?: boolean;
+  inline?: boolean;
+  button?: boolean;
+  multiline?: boolean; // Not sure if we need it
+  renderAsDiv?: boolean;
+  // Content
+  children?: ReactNode;
+  title?: string;
+  description?: ReactNode;
+  icons?: React.ReactNodeArray;
+  hint?: ReactNode;
+  navButton?: ReactNode;
+  // Appearance
+  big?: boolean;
+  tooltip?: boolean;
+  header?: boolean;
+  border?: boolean;
+  bgColor?: string | null | undefined;
+  shrinkable?: boolean;
+  clickable?: boolean;
+  setMinWidth?: boolean;
+  // Callbacks
+  onKeyDown?: (e: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  invalid?: boolean;
+  tooltipContent?: ReactNode;
+};

package/src/unit/unit-button-group.tsx

@@ -0,0 +1,38 @@
+import {Children, cloneElement, ReactNode} from "react";
+import {space} from "../design-system";
+import {IconButtonProps} from "../button/icon-button";
+import {getHeight} from "./unit-content-layout";
+
+export const UnitButtonGroup = ({
+  big,
+  inline,
+  style,
+  className,
+  unitButton,
+  navButton,
+}: {
+  big: boolean;
+  inline: boolean;
+  style: React.CSSProperties;
+  className: string;
+  unitButton?: ReactNode;
+  navButton?: ReactNode;
+}) => {
+  const navButtonNode = navButton && (Children.only(navButton) as React.ReactElement<IconButtonProps>);
+  const navButtonSize = getHeight(big) + 2 * space.s2;
+  return (
+    <div
+      style={{
+        display: inline ? `inline-flex` : `flex`,
+        ...style,
+      }}
+      className={className}
+    >
+      {unitButton}
+      {navButtonNode &&
+        cloneElement(navButtonNode, {
+          style: {...navButtonNode.props.style, width: navButtonSize, height: navButtonSize},
+        })}
+    </div>
+  );
+};

package/src/unit/unit-content-layout.tsx

@@ -0,0 +1,37 @@
+import {styled} from "@linaria/react";
+import {space} from "../design-system";
+import {regularTextUnitSize, smallTextUnitSize} from "./styles";
+
+type Props = {
+  big: boolean;
+  iconsLength: number;
+  hasChildren: boolean;
+  shrinkable?: boolean;
+};
+
+export const getHeight = (big: boolean) => {
+  return big ? regularTextUnitSize : smallTextUnitSize;
+};
+
+const getUnitGridTemplateRows = ({big, iconsLength}: Props) => {
+  if (iconsLength === 0) {
+    return "auto";
+  }
+  return `minmax(${getHeight(big)}px, max-content)`;
+};
+
+const getUnitGridTemplateColumns = ({big, iconsLength, shrinkable = true, hasChildren}: Props) => {
+  if (iconsLength === 0) {
+    return shrinkable ? "auto" : "minmax(max-content, max-content)";
+  }
+  return `repeat(${iconsLength}, minmax(${getHeight(big)}px, max-content)) ${
+    hasChildren ? (shrinkable ? `minmax(auto, 1fr)` : `minmax(max-content, max-content)`) : ""
+  }`;
+};
+
+export const UnitContentLayout = styled.div<Props>`
+  padding: ${space.s2}px;
+  display: grid;
+  grid-template-rows: ${getUnitGridTemplateRows};
+  grid-template-columns: ${getUnitGridTemplateColumns};
+`;

package/src/unit/unit-content.tsx

@@ -0,0 +1,37 @@
+import {alignCenterClassName, basicUnitContentClassName, unitContentContainerClassName} from "./styles";
+import {ReactNode} from "react";
+import {cx} from "@linaria/core";
+import {UnitContentLayout} from "./unit-content-layout";
+
+type Props = {
+  big: boolean;
+  icons?: React.ReactNodeArray;
+  children?: ReactNode;
+  contentClassName?: string;
+  shrinkable?: boolean;
+};
+
+export const UnitContent = ({big, icons, children, contentClassName, shrinkable}: Props) => {
+  return (
+    <UnitContentLayout
+      big={big}
+      hasChildren={Boolean(children)}
+      iconsLength={icons ? icons.length : 0}
+      shrinkable={shrinkable}
+    >
+      {icons
+        ? icons.map((icon, index) => (
+            <div key={index} className={alignCenterClassName}>
+              {icon}
+            </div>
+          ))
+        : null}
+
+      {children && (
+        <div className={unitContentContainerClassName}>
+          <div className={cx(basicUnitContentClassName, contentClassName)}>{children}</div>
+        </div>
+      )}
+    </UnitContentLayout>
+  );
+};

package/src/unit/unit-with-title.tsx

@@ -0,0 +1,8 @@
+import {unitTitleClassName, unitWithTitleClassName} from "./styles";
+
+export const UnitWithTitle = ({children, title}: {title: React.ReactNode; children: React.ReactElement}) => (
+  <div className={unitWithTitleClassName}>
+    <div className={unitTitleClassName}>{title}</div>
+    {children}
+  </div>
+);

package/src/unit/unit-with-tooltip.tsx

@@ -0,0 +1,60 @@
+import {tooltipDelay} from "../../src/design-system";
+import {Tooltip} from "../tooltip";
+import {useRef, useState} from "react";
+
+export const UnitWithTooltip = ({
+  children,
+  title,
+  description,
+}: {
+  children: React.ReactElement;
+  title: React.ReactNode;
+  description: React.ReactNode;
+}) => {
+  const [shouldDisplayTooltip, setShouldDisplayTooltip] = useState(false);
+  const unitElementRef = useRef<HTMLDivElement>(null);
+  const isHoveredRef = useRef(false);
+  const checkHoveredStateTimeoutId = useRef<ReturnType<typeof setTimeout> | null>();
+
+  const onMouseEnter = () => {
+    isHoveredRef.current = true;
+
+    checkHoveredStateTimeoutId.current = setTimeout(() => {
+      checkHoveredStateTimeoutId.current = null;
+      // onMouseLeave works unreliably in Safari, IE on scroll
+      // Sometimes it was not fired leaving tooltip displayed
+      // Had to use additional way to validate if we are still over unit
+      if (isHoveredRef.current && unitElementRef.current && unitElementRef.current.matches(":hover")) {
+        setShouldDisplayTooltip(true);
+        const intervalId = setInterval(() => {
+          if (isHoveredRef.current && unitElementRef.current) {
+            if (!unitElementRef.current.matches(":hover")) {
+              isHoveredRef.current = false;
+              setShouldDisplayTooltip(false);
+              clearInterval(intervalId);
+            }
+          } else {
+            clearInterval(intervalId);
+          }
+        }, 250);
+      }
+    }, tooltipDelay.enter);
+  };
+
+  const onMouseLeave = () => {
+    isHoveredRef.current = false;
+    if (checkHoveredStateTimeoutId.current) {
+      clearTimeout(checkHoveredStateTimeoutId.current);
+      checkHoveredStateTimeoutId.current = null;
+    }
+    setShouldDisplayTooltip(false);
+  };
+
+  return (
+    <Tooltip visible={shouldDisplayTooltip} title={title} description={description} side="bottom" align="start">
+      <div ref={unitElementRef} onMouseDown={onMouseLeave} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+        {children}
+      </div>
+    </Tooltip>
+  );
+};

package/src/use-is-support-hover.ts

@@ -0,0 +1,5 @@
+import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
+
+export function useIsSupportHover() {
+  return !useIsMediaQueryMatched("(any-hover: none)");
+}

package/src/use-long-press.tsx

@@ -0,0 +1,79 @@
+import {useCallback, useRef} from "react";
+import {$TSFixMe} from "./tsfixme";
+
+function on<T extends Window | Document | HTMLElement | EventTarget>(
+  obj: T | null,
+  // eslint-disable-next-line @typescript-eslint/ban-types,@typescript-eslint/no-explicit-any
+  ...args: Parameters<T["addEventListener"]> | [string, Function | null, ...any]
+): void {
+  if (obj && obj.addEventListener) {
+    obj.addEventListener(...(args as Parameters<HTMLElement["addEventListener"]>));
+  }
+}
+
+export function off<T extends Window | Document | HTMLElement | EventTarget>(
+  obj: T | null,
+  // eslint-disable-next-line @typescript-eslint/ban-types,@typescript-eslint/no-explicit-any
+  ...args: Parameters<T["removeEventListener"]> | [string, Function | null, ...any]
+): void {
+  if (obj && obj.removeEventListener) {
+    obj.removeEventListener(...(args as Parameters<HTMLElement["removeEventListener"]>));
+  }
+}
+
+interface Options {
+  isPreventDefault?: boolean;
+  delay?: number;
+}
+
+const preventContextMenu = (e: Event) => {
+  e.preventDefault();
+};
+
+export const useLongPress = (
+  callback: (e: TouchEvent | MouseEvent) => void,
+  {isPreventDefault = true, delay = 300}: Options = {}
+) => {
+  const timeout = useRef<number | undefined>();
+  const target = useRef<EventTarget>();
+  const called = useRef<boolean>(false);
+
+  const start = useCallback(
+    (event: TouchEvent | MouseEvent) => {
+      // prevent ghost click on mobile devices
+      if (isPreventDefault && event.target) {
+        on(document, "contextmenu", preventContextMenu);
+        target.current = event.target;
+      }
+      timeout.current = window.setTimeout(() => {
+        called.current = true;
+        callback(event);
+      }, delay);
+    },
+    [callback, delay, isPreventDefault]
+  );
+
+  const clear = useCallback(
+    (e: $TSFixMe) => {
+      // clearTimeout and removeEventListener
+      timeout.current && window.clearTimeout(timeout.current);
+
+      if (isPreventDefault && target.current) {
+        if (called.current) {
+          e.preventDefault();
+        }
+        off(document, "contextmenu", preventContextMenu);
+      }
+      called.current = false;
+    },
+    [isPreventDefault]
+  );
+
+  return {
+    onMouseDown: (e: $TSFixMe) => start(e),
+    onTouchStart: (e: $TSFixMe) => start(e),
+    onMouseUp: clear,
+    onMouseLeave: clear,
+    onTouchEnd: clear,
+  } as const;
+};

package/src/use-me.tsx

@@ -0,0 +1,11 @@
+import {createContext} from "@fibery/react/src/create-context";
+
+type Me = {
+  id: string;
+  name: string;
+  isAdmin: boolean;
+};
+
+const [MeProvider, useMe] = createContext<Me>("Me");
+
+export {MeProvider, useMe};

package/src/use-navigation.tsx

@@ -0,0 +1,11 @@
+import {createContext} from "@fibery/react/src/create-context";
+import type {History} from "history";
+
+type Navigation = {
+  resolveUpgradeLocation: () => {href: string; state: unknown};
+  history: History;
+};
+
+const [NavigationProvider, useNavigation] = createContext<Navigation>("Navigation");
+
+export {NavigationProvider, useNavigation};