@fibery/ui-kit 1.34.8 → 1.36.0

package/src/avatar.tsx

@@ -0,0 +1,262 @@
+import {css} from "@linaria/core";
+import _ from "lodash";
+import {CSSProperties, FC, memo, useCallback, useState} from "react";
+import {getDarkenColor, getObjectColorMemoized, textStyles, themeVars} from "./design-system";
+import {FibermojiPlaceholder} from "./fibermoji-placeholder";
+import {getShiftStyle} from "./icons/get-shift-style";
+import {useFeatures} from "./features";
+
+const preservedNameEmojis = ["🤖", "👻", "🧮", "🪄", "🔌", "🔗", "🔒"];
+
+export const abbreviateName = (name?: string) => {
+  if (name === undefined) {
+    return "…";
+  }
+  if (preservedNameEmojis.includes(name)) {
+    return name;
+  }
+  const filteredName = (name || "").replace(/[!~.\-@[\]]/g, "").trim();
+  const match = filteredName.match(/\p{Letter}[\p{Letter} ]+/gu);
+  const processedName = match ? match[0] : "";
+  const parts = processedName.split(" ").filter((part) => part !== "");
+  let result;
+  if (parts.length === 1) {
+    result = processedName.slice(0, 2);
+  } else {
+    result = parts
+      .filter((part, index) => index < 2)
+      .map((part) => {
+        return part[0].toUpperCase();
+      })
+      .join("");
+  }
+  return result || "?";
+};
+
+export const getContainerStyle = _.memoize((containerSize) => {
+  return {
+    width: containerSize,
+    height: containerSize,
+    lineHeight: `${containerSize}px`,
+  };
+});
+
+const statusIconPositionByIndex = [
+  {bottom: 0, right: 0},
+  {top: 0, right: 0},
+  {bottom: 0, left: 0},
+  {top: 0, left: 0},
+];
+
+const getStatusIconStyle = _.memoize(
+  (size, index): CSSProperties => {
+    const iconSize = Math.ceil(size / 2);
+    const position = statusIconPositionByIndex[index];
+
+    return {
+      fontSize: iconSize,
+      lineHeight: `${iconSize}px`,
+      width: iconSize,
+      height: iconSize,
+      position: "absolute",
+      color: themeVars.textColor,
+      ...position,
+      textShadow: "-1px 0 0 white, 1px 0 0 white, 0 1px 0 white, 0 -1px 0 white",
+    };
+  },
+  (size, index) => {
+    return `${size}_${index}`;
+  }
+);
+
+const imageStyle = css`
+  ${{
+    position: "absolute",
+    left: 0,
+    objectFit: "cover",
+  }}
+`;
+
+const EMOJI_BY_BADGE = {
+  sick: "🌡",
+  vacation: "🌴",
+  dayon: "💻",
+};
+function getAvatarUrl(url: string, size: number) {
+  if (!url) {
+    return url;
+  }
+  const urlObject = new URL(url, window.origin);
+  urlObject.searchParams.set("width", `${size}`);
+  urlObject.searchParams.set("height", `${size}`);
+  return urlObject.toString();
+}
+
+interface AvatarImageProps {
+  size: number;
+  containerSize?: number;
+  title?: string;
+  badges?: ("sick" | "vacation" | "dayon")[];
+  avatarUrl?: string | null;
+  radius?: number;
+  backgroundColor?: string;
+  disableNativeTitle?: boolean;
+  placeholder?: React.ReactNode;
+}
+/**
+ *
+ * @type {React.NamedExoticComponent<{readonly badges?: *, readonly backgroundColor?: *, readonly size?: *, readonly avatarUrl?: *, readonly disableNativeTitle?: *, readonly title?: *, readonly radius?: *, readonly containerSize?: *}>}
+ */
+export const AvatarImage: FC<AvatarImageProps> = memo(function AvatarImage({
+  size,
+  containerSize,
+  title,
+  badges,
+  avatarUrl,
+  radius,
+  backgroundColor,
+  disableNativeTitle = false,
+  placeholder,
+}) {
+  const [fetchState, setFetchState] = useState(":fetch-state/start");
+  const onError = useCallback(() => {
+    setFetchState(":fetch-state/error");
+  }, []);
+  const onLoad = useCallback(() => {
+    setFetchState(":fetch-state/success");
+  }, []);
+  return (
+    <div style={{width: containerSize, height: containerSize, lineHeight: 0}}>
+      <div
+        style={{
+          width: size,
+          height: size,
+          position: "relative",
+          ...getShiftStyle({containerSize, elementSize: size}),
+        }}
+      >
+        {avatarUrl && fetchState !== ":fetch-state/error" && (
+          <img
+            draggable={false}
+            className={imageStyle}
+            style={{
+              width: size,
+              height: size,
+              borderRadius: radius ?? "50%",
+            }}
+            src={getAvatarUrl(avatarUrl, size)}
+            alt={fetchState === ":fetch-state/success" ? title : ""}
+            title={disableNativeTitle ? undefined : title}
+            onLoad={onLoad}
+            onError={onError}
+          />
+        )}
+        {(!avatarUrl || fetchState !== ":fetch-state/success") &&
+          (placeholder || (
+            <AvatarPlaceholder size={size} title={title} radius={radius} backgroundColor={backgroundColor} />
+          ))}
+        {badges &&
+          badges.map((badge, index) => {
+            return (
+              <div key={index} style={getStatusIconStyle(size, index)}>
+                {EMOJI_BY_BADGE[badge]}
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+});
+
+const avatarPlaceholderStaticClassName = css`
+  ${textStyles.regular}
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: -0.2px;
+`;
+
+const getAvatarPlaceholderStyle = ({
+  size,
+  backgroundColor,
+  radius,
+}: {
+  size: number;
+  backgroundColor: string;
+  radius?: number;
+}) => ({
+  backgroundColor: getDarkenColor(backgroundColor),
+  color: themeVars.whiteColor,
+  lineHeight: `${size}px`,
+  fontSize: size / 2.222222,
+  width: size,
+  height: size,
+  borderRadius: radius ?? "50%",
+});
+
+interface AvatarPlaceholderProps {
+  size: number;
+  title?: string;
+  radius?: number;
+  backgroundColor?: string;
+}
+
+export const AvatarPlaceholder: FC<AvatarPlaceholderProps> = memo(function AvatarPlaceholder(props) {
+  const features = useFeatures<{enableFibermojiAvatars: boolean}>();
+  if (features.enableFibermojiAvatars) {
+    return <FibermojiPlaceholder {...props} />;
+  }
+
+  const {size, title, radius, backgroundColor = getObjectColorMemoized(title)} = props;
+  return (
+    <div
+      className={avatarPlaceholderStaticClassName}
+      style={getAvatarPlaceholderStyle({size, backgroundColor, radius})}
+    >
+      {abbreviateName(title)}
+    </div>
+  );
+});
+
+const getNullUserAvatarContainerStyle = ({containerSize}: {containerSize: number}) => ({
+  width: containerSize,
+  height: containerSize,
+});
+
+const getNullUserAvatarStyle = ({size, containerSize}: {size: number; containerSize: number}): CSSProperties => {
+  const diff = containerSize - size;
+  const sizeShift = diff ? diff / 2 : 0;
+  return {
+    width: size,
+    height: size,
+    position: "relative",
+    display: "block",
+    top: sizeShift,
+    left: sizeShift,
+  };
+};
+
+const magicCoefficient = 4.5;
+
+interface NullUserAvatarProps {
+  size: number;
+  containerSize: number;
+}
+
+export const NullUserAvatar: FC<NullUserAvatarProps> = memo(function NullUserAvatar({size, containerSize}) {
+  const dashSize = (Math.PI * size) / magicCoefficient / 12;
+  return (
+    <div style={getNullUserAvatarContainerStyle({containerSize})}>
+      <svg viewBox={`0 0 ${size} ${size}`} style={getNullUserAvatarStyle({size, containerSize})}>
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={size / 2 - 1}
+          fill={themeVars.transparent}
+          strokeWidth={1}
+          stroke={themeVars.inputPlaceholderTextColor}
+          strokeDasharray={`${dashSize} ${dashSize}`}
+        />
+      </svg>
+    </div>
+  );
+});

package/src/axis-header.tsx

@@ -0,0 +1,160 @@
+import {css} from "@linaria/core";
+import {styled} from "@linaria/react";
+import cn from "classnames";
+import {FC, ReactNode} from "react";
+import {getThemeValue, layout, opacity, border, space, textStyles, themeVars} from "./design-system";
+import {useTheme} from "./theme-provider";
+
+const axisItemStyle = css`
+  ${{
+    display: "grid",
+    gridGap: space.s6,
+    minHeight: layout.itemHeight,
+    alignItems: "center",
+    paddingLeft: space.s8,
+    paddingRight: space.s8,
+    borderRadius: border.radius6,
+    width: "100%",
+    ...textStyles.heading5,
+  }}
+`;
+
+const axisItemStyleX = css`
+  grid-template-columns: auto 1fr auto;
+`;
+const axisItemStyleY = css`
+  grid-template-columns: auto auto auto 1fr;
+`;
+const axisItemHighlightedStyle = css`
+  grid-template-columns: auto 1fr auto;
+`;
+
+const dimensionToItemStyle = {x: axisItemStyleX, y: axisItemStyleY};
+
+const axisItemStyleCollapsed = css`
+  ${{
+    paddingRight: 0,
+    width: `${layout.itemHeight + space.s8 * 2}px`,
+  }}
+`;
+
+function getAdditionalClassName({
+  dimension,
+  collapsed,
+  highlighted,
+}: {
+  dimension: "x" | "y";
+  collapsed?: boolean;
+  highlighted?: boolean;
+}) {
+  if (collapsed && dimension === "x") {
+    return axisItemStyleCollapsed;
+  }
+  if (highlighted) {
+    return axisItemHighlightedStyle;
+  }
+  return dimensionToItemStyle[dimension];
+}
+
+const mainContainerWrapperStyle = {
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  cursor: "pointer",
+  textOverflow: "ellipsis",
+  opacity: 1,
+};
+const mainContainerWrapperClassName = css`
+  ${mainContainerWrapperStyle}
+`;
+
+const mainContainerWrapperCollapsedClassName = css`
+  ${{
+    ...mainContainerWrapperStyle,
+    textOverflow: "ellipsis",
+    opacity: opacity.opacity40,
+  }}
+`;
+
+const leftContainerWrapperStyle = css`
+  cursor: pointer;
+`;
+
+const StyledDiv = styled.div<{backgroundColor?: string}>`
+  display: flex;
+  flex-direction: column;
+  background-color: ${({backgroundColor = "transparent"}) => backgroundColor};
+`;
+
+interface AxisHeaderProps {
+  className?: string;
+  dimension: "x" | "y";
+  collapsed?: boolean;
+  highlighted?: boolean;
+  showLeftContainerWhenCollapsed?: boolean;
+  bottomContainer?: ReactNode;
+  leftContainer?: ReactNode;
+  rightContainer?: ReactNode;
+  children: ReactNode;
+  onCollapse?: () => void;
+}
+
+export const AxisHeader: FC<AxisHeaderProps> = ({
+  className,
+  dimension,
+  leftContainer,
+  children,
+  rightContainer,
+  bottomContainer,
+  collapsed,
+  highlighted,
+  showLeftContainerWhenCollapsed,
+  onCollapse,
+}) => {
+  const theme = useTheme();
+  const backgroundColor = getThemeValue(theme.mode, {
+    dark: themeVars.panelContentBg,
+    light: themeVars.panelContentBg,
+  });
+
+  const leftContainerWrapper = (
+    <div onClick={onCollapse} className={leftContainerWrapperStyle}>
+      {leftContainer}
+    </div>
+  );
+
+  const rightContainerWrapper = <div>{rightContainer}</div>;
+
+  const mainContainerWrapper = (
+    <div
+      onClick={onCollapse}
+      className={collapsed ? mainContainerWrapperCollapsedClassName : mainContainerWrapperClassName}
+    >
+      {children}
+    </div>
+  );
+  return (
+    <StyledDiv data-testid={`axis-header-${dimension}`} backgroundColor={backgroundColor} className={cn(className)}>
+      <div
+        className={cn(axisItemStyle, getAdditionalClassName({dimension, highlighted, collapsed}))}
+        style={{
+          background: highlighted ? themeVars.actionMenuHover : backgroundColor,
+        }}
+      >
+        {collapsed ? (
+          showLeftContainerWhenCollapsed ? (
+            leftContainerWrapper
+          ) : (
+            mainContainerWrapper
+          )
+        ) : (
+          <>
+            {leftContainerWrapper}
+            {mainContainerWrapper}
+            {rightContainerWrapper}
+          </>
+        )}
+      </div>
+      {bottomContainer}
+    </StyledDiv>
+  );
+};

package/src/badge.tsx

@@ -0,0 +1,39 @@
+import {ReactNode, forwardRef} from "react";
+import {css, cx} from "@linaria/core";
+import {border, space, textStyles, themeVars} from "./design-system";
+
+type Props = {
+  children: ReactNode;
+  kind?: "success" | "error" | "default";
+};
+
+export const Badge = forwardRef<HTMLSpanElement, Props>(({children, kind, ...otherProps}, ref) => {
+  return (
+    <span
+      ref={ref}
+      {...otherProps}
+      className={cx(
+        css`
+          ${textStyles.heading7}
+          position: relative;
+          top: -1px;
+          padding: ${space.s2}px ${space.s6}px;
+          background: ${themeVars.badgeBgColor};
+          border-radius: ${border.radius12}px;
+        `,
+        kind === "success" &&
+          css`
+            color: ${themeVars.colorTextBadgeSuccess};
+            background: ${themeVars.colorBgBadgeSuccess};
+          `,
+        kind === "error" &&
+          css`
+            color: ${themeVars.colorTextBadgeError};
+            background: ${themeVars.colorBgBadgeError};
+          `
+      )}
+    >
+      {children}
+    </span>
+  );
+});

package/src/board-table-loader.tsx

@@ -0,0 +1,106 @@
+import {css, cx} from "@linaria/core";
+import {FC, ReactNode} from "react";
+import {Box} from "./box";
+import {AxisHeader} from "./axis-header";
+import {defaultLoaderDelay, Delayed} from "./delayed";
+import {layout, space} from "./design-system";
+import {LoadingSausage, LoadingSausageList} from "./loading-sausage";
+
+const style = css`
+  ${{
+    display: "grid",
+    padding: "6px 4px 4px 4px",
+    flex: 1,
+    flexGrow: 1,
+    minHeight: "100%",
+  }}
+`;
+
+const loaderStyle = css`
+  ${{
+    gridTemplateColumns: `repeat(6, minmax(${layout.columnMinWidth}px, 1fr))`,
+    gridTemplateRows: "min-content",
+  }}
+`;
+const compactLoaderStyle = css`
+  ${{
+    gridTemplateColumns: `repeat(3, minmax(${layout.columnMinWidth}px, 1fr))`,
+  }}
+`;
+
+const headerStyle = css`
+  ${{
+    paddingBottom: space.s6,
+  }}
+`;
+
+const cellStyle = css`
+  ${{
+    paddingLeft: space.s8,
+    paddingRight: space.s8,
+    paddingTop: space.s4,
+  }}
+`;
+
+const AxisLoaderWrapper: FC<{children?: ReactNode}> = ({children}) => (
+  <div className={headerStyle}>
+    <AxisHeader dimension="x">{children}</AxisHeader>
+  </div>
+);
+
+const CellLoaderWrapper: FC<{children: ReactNode; compact?: boolean}> = ({compact = false}) => (
+  <div className={cellStyle}>
+    <LoadingSausageList minAmount={0} maxAmount={compact ? 1 : 4} WrapperComponent={CardLoaderWrapper} />
+  </div>
+);
+
+const CompactCellLoaderWrapper: FC<{children: ReactNode}> = (props) => <CellLoaderWrapper {...props} compact />;
+
+const CardLoaderWrapper: FC = () => (
+  <div
+    className={css`
+      ${{marginBottom: space.s6}}
+    `}
+  >
+    <Box hovered={false}>
+      <LoadingSausage />
+      <LoadingSausage />
+    </Box>
+  </div>
+);
+
+interface BoardTableLoaderProps {
+  compact?: boolean;
+  delay?: number;
+}
+
+export const BoardTableLoader: FC<BoardTableLoaderProps> = ({compact, delay = defaultLoaderDelay}) => (
+  <Delayed delayMs={delay}>
+    <div className={cx(style, loaderStyle, compact && compactLoaderStyle)}>
+      <LoadingSausageList amount={compact ? 3 : 6} WrapperComponent={AxisLoaderWrapper} />
+      <LoadingSausageList
+        amount={compact ? 3 : 6}
+        WrapperComponent={compact ? CompactCellLoaderWrapper : CellLoaderWrapper}
+      />
+    </div>
+  </Delayed>
+);
+
+export const BoardTableLoaderWithoutX: FC<BoardTableLoaderProps> = ({compact, delay = defaultLoaderDelay}) => (
+  <Delayed delayMs={delay}>
+    <div className={style}>
+      <div
+        className={css`
+          ${{padding: space.s8}}
+        `}
+      >
+        <LoadingSausageList
+          amount={compact ? 1 : undefined}
+          minAmount={3}
+          maxAmount={7}
+          WrapperComponent={CardLoaderWrapper}
+        />
+      </div>
+    </div>
+  </Delayed>
+);