@fibery/ui-kit 1.34.8 → 1.36.0

package/src/dropdown-menu/index.tsx

@@ -76,7 +76,6 @@ const dropdownMenuContentStyles = css`
   min-width: 200px;
   box-shadow: ${themeVars.actionMenuShadow};
   border-radius: ${border.radius8}px;
-  backdrop-filter: ${themeVars.effectBgActionsMenu};
   background-color: ${themeVars.colorBgActionsMenu};
 
   @media (prefers-reduced-motion: no-preference) {
@@ -159,8 +158,8 @@ export const Item = styled(DropdownMenuPrimitive.Item)`
 
 export const Separator = styled(DropdownMenuPrimitive.Separator)`
   ${{
-    backgroundColor: themeVars.separatorColor,
-    height: 1,
+    backgroundColor: themeVars.actionMenuSeparatorColor,
+    height: 0.5,
     margin: `${space.s4}px 0`,
   }}
 `;

package/src/emoji-picker/app-icon-picker.tsx

@@ -18,6 +18,7 @@ export type AppIconPickerProps = {
 
   onSelect: (emoji: EmojiItem) => void;
   autoFocus?: boolean;
+  showColorPicker?: boolean;
 };
 export const AppIconPicker: React.FC<AppIconPickerProps> = ({
   onSelect,

package/src/emoji-picker/primitives/emoji.tsx

@@ -3,6 +3,7 @@ import {EmojiItem, EmojiSkin, NativeEmoji} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
 import {themeVars} from "../../design-system";
 import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
+import {useEmojiRenderConfig} from "./render-config-provider";
 
 const emojiWrapperCss = css`
   color: ${themeVars.textColor};
@@ -67,7 +68,7 @@ export const Emoji: FC<EmojiProps> = ({
   showTitle = false,
 }) => {
   const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
-
+  const config = useEmojiRenderConfig();
   if (!emoji) {
     return fallback === "shortcode" ? <>{idOrColons}</> : null;
   }
@@ -95,7 +96,8 @@ export const Emoji: FC<EmojiProps> = ({
     emojiNode = (
       <img
         alt={emoji.name}
-        loading="lazy"
+        loading={config.loading}
+        draggable={config.draggable}
         className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
         src={emoji.imageUrl}
       />

package/src/emoji-picker/primitives/render-config-provider.tsx

@@ -0,0 +1,12 @@
+import {createContext} from "@fibery/react/src/create-context";
+
+type RenderConfig = {loading: "lazy" | "eager"; draggable: "false" | "true"};
+
+const [ValueProvider, useValueCtx] = createContext<RenderConfig>("EmojiRenderConfigProvider", {
+  loading: "lazy",
+  draggable: "false",
+});
+
+export {ValueProvider as EmojiRenderConfigProvider};
+
+export const useEmojiRenderConfig = useValueCtx;

package/src/emoji.tsx

@@ -0,0 +1,30 @@
+import {styled} from "@linaria/react";
+import {themeVars} from "./design-system";
+
+type Props = {
+  symbol: string;
+  label?: string;
+  size?: number;
+  inline?: boolean;
+  onClick?: () => unknown;
+};
+
+const StyledEmoji = styled.span<{size: number; inline: boolean}>`
+  color: ${themeVars.warning};
+  font-size: ${(props) => props.size}em;
+  vertical-align: baseline;
+  line-height: ${(props) => (props.inline ? 1 : "auto")};
+  cursor: ${(props) => (props.onClick ? "pointer" : "inherit")};
+`;
+
+export const Emoji = ({symbol, label = "", size = 1.4, inline = true, onClick}: Props): JSX.Element => {
+  const ariaLabelProps = {
+    ...(label && {label: label}),
+    ...(!label && {"aria-hidden": true}),
+  };
+  return (
+    <StyledEmoji size={size} inline={inline} role="img" onClick={onClick} {...ariaLabelProps}>
+      {symbol}
+    </StyledEmoji>
+  );
+};

package/src/empty-state/empty-state-action.tsx

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

package/src/empty-state/empty-state-emoji.tsx

@@ -0,0 +1,20 @@
+import {css} from "@linaria/core";
+import {Emoji} from "../emoji-picker/emoji";
+
+const emptyStateEmojiCss = css`
+  font-size: 56px;
+  line-height: 70px;
+  letter-spacing: -1.12px;
+`;
+
+const emptyStateCompactEmojiCss = css`
+  font-size: 40px;
+  line-height: 50px;
+  letter-spacing: -0.8px;
+`;
+
+export const EmptyStateEmoji = ({emoji, compact}: {emoji: string; compact?: boolean}) => (
+  <div className={compact ? emptyStateCompactEmojiCss : emptyStateEmojiCss}>
+    <Emoji emoji={emoji} />
+  </div>
+);

package/src/empty-state/empty-state.tsx

@@ -0,0 +1,80 @@
+import {css, cx} from "@linaria/core";
+import {fontWeight, space, textStyles, themeVars} from "../design-system";
+
+const emptyStateCss = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: ${space.s16}px;
+  padding: 0 ${space.s12}px ${space.s48}px ${space.s12}px;
+`;
+
+const stretchCss = css`
+  height: 100%;
+`;
+
+const contentCss = css`
+  display: flex;
+
+  /* Without it description can expand content bigger than parent is (e.g. ErrorPrinter for error stacks) */
+  max-width: 100%;
+
+  flex-direction: column;
+  align-items: center;
+  gap: ${space.s6}px;
+`;
+
+const headingCss = css`
+  ${textStyles.regular};
+  font-weight: ${fontWeight.semibold};
+  color: ${themeVars.textColor};
+  margin: 0;
+`;
+const descriptionCss = css`
+  ${textStyles.regular};
+  color: ${themeVars.accentTextColor};
+  margin: 0;
+
+  /* Without it description can expand content bigger than parent is (e.g. ErrorPrinter for error stacks) */
+  max-width: 100%;
+
+  &[data-compact] {
+    ${textStyles.small};
+    color: ${themeVars.accentTextColor};
+  }
+`;
+
+type EmptyStateProps = {
+  illustration: React.ReactNode;
+  heading: string;
+  description: React.ReactNode;
+  action?: React.ReactNode;
+
+  stretch?: boolean;
+  // TODO: better to use @container size query
+  compact?: boolean;
+};
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  illustration,
+  heading,
+  description,
+  action,
+  stretch,
+  compact = false,
+}) => {
+  return (
+    <div className={cx(emptyStateCss, stretch && stretchCss)}>
+      <div className={contentCss}>
+        {illustration}
+        <h2 className={headingCss}>{heading}</h2>
+        <div data-compact={compact ? "" : undefined} className={descriptionCss}>
+          {description}
+        </div>
+      </div>
+
+      {action}
+    </div>
+  );
+};

package/src/empty-value.tsx

@@ -0,0 +1,21 @@
+import {css, cx} from "@linaria/core";
+import {FC, ReactNode} from "react";
+import {themeVars} from "./design-system";
+import {ellipsis} from "./styles-utils";
+
+interface EmptyValueProps {
+  children?: ReactNode;
+}
+
+export const EmptyValue: FC<EmptyValueProps> = ({children}) => (
+  <span
+    className={cx(
+      css`
+        color: ${themeVars.inputPlaceholderTextColor};
+      `,
+      ellipsis
+    )}
+  >
+    {children}
+  </span>
+);

package/src/errors.ts

@@ -0,0 +1,29 @@
+import {$TSFixMe} from "./tsfixme";
+
+export class MissingArgError extends Error {
+  constructor(arg: string) {
+    super(arg + " arg is missing");
+  }
+}
+
+export const throwError = (message: string): $TSFixMe => {
+  throw new Error(message);
+};
+
+export const throwMissingArgError = (arg: string): $TSFixMe => {
+  throw new MissingArgError(arg);
+};
+
+const stringify = (x: unknown) => {
+  if (x === undefined) {
+    return "undefined";
+  }
+  return JSON.stringify(x);
+};
+
+export const asError = (x: unknown) => {
+  if (x instanceof Error) {
+    return x;
+  }
+  return new Error(`non-error thrown: ${stringify(x)}`);
+};

package/src/favorites-icon.tsx

@@ -0,0 +1,87 @@
+// eslint-disable-next-line no-restricted-imports
+import {ButtonSize} from "@fibery/ui-kit/src/button/base-button";
+import {css} from "@linaria/core";
+import cn from "classnames";
+import {MouseEvent, useState} from "react";
+import {IconButton} from "./button/icon-button";
+import {makeButtonColors} from "./button/make-button-colors";
+import Favorites from "./icons/react/Favorites";
+import FavoritesCheckedIcon from "./icons/react/FavoritesChecked";
+import {useTheme} from "./theme-provider";
+
+const checkedStyle = css``;
+
+const animationStyle = css`
+  @keyframes favoritesAnimation {
+    0% {
+      transform: scale(1);
+    }
+    15% {
+      transform: scale(1.1);
+    }
+    85% {
+      transform: scale(0.75);
+    }
+    85% {
+      transform: scale(0.8);
+    }
+  }
+  animation: favoritesAnimation 0.2s ease-in 1;
+`;
+
+const uncheckedStyle = css`
+  transition: transform 0.2s ease-in;
+`;
+
+interface FavoritesIconProps {
+  className?: string;
+  color?: string;
+  checked?: boolean;
+  containerSize?: number;
+  onFocus?: () => void;
+  onClick?: () => void;
+  onChange: (e: MouseEvent<HTMLButtonElement>) => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  size?: ButtonSize;
+}
+
+export const FavoritesIcon = ({
+  size,
+  checked,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onClick,
+  className,
+  onChange,
+}: FavoritesIconProps) => {
+  const [animate, setAnimate] = useState(false);
+
+  const handleChange = (e: MouseEvent<HTMLButtonElement>) => {
+    onChange(e);
+    setAnimate(!checked);
+  };
+
+  const theme = useTheme();
+
+  return (
+    <div
+      className={cn(checked ? checkedStyle : uncheckedStyle, checked && animate ? animationStyle : null, className)}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onFocus={onFocus}
+      onClick={onClick}
+    >
+      <IconButton
+        style={checked ? makeButtonColors(theme.favoritesIconColor, "ghost") : {}}
+        size={size || "medium"}
+        onClick={handleChange}
+        color="neutral"
+        variant="ghost"
+      >
+        {checked ? <FavoritesCheckedIcon /> : <Favorites />}
+      </IconButton>
+    </div>
+  );
+};

package/src/features.tsx

@@ -0,0 +1,10 @@
+import {useContext, createContext} from "react";
+
+const featuresContext = createContext<unknown>({} as unknown);
+
+export function FeaturesProvider({children, value}: {children: React.ReactNode; value: unknown}) {
+  return <featuresContext.Provider value={value}>{children}</featuresContext.Provider>;
+}
+export function useFeatures<T = unknown>() {
+  return useContext(featuresContext) as T;
+}

package/src/fibermoji-placeholder.tsx

@@ -0,0 +1,180 @@
+import _ from "lodash";
+import {css} from "@linaria/core";
+import {FC, useEffect, useRef} from "react";
+import {textStyles} from "./design-system";
+import {useFeatures} from "./features";
+
+const preservedNameEmojis = ["🤖", "👻", "🧮", "🪄", "🔌", "🔗", "🔒"];
+
+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 || "?";
+};
+
+const cyrb53 = (str: string, seed = 0) => {
+  let h1 = 0xdeadbeef ^ seed;
+  let h2 = 0x41c6ce57 ^ seed;
+  for (let i = 0, ch; i < str.length; i++) {
+    ch = str.charCodeAt(i);
+    h1 = Math.imul(h1 ^ ch, 2654435761);
+    h2 = Math.imul(h2 ^ ch, 1597334677);
+  }
+  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
+  h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
+  h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+  return 4294967296 * (2097151 & h2) + (h1 >>> 0);
+};
+
+// [fg, bg]
+const colors = [
+  ["#8B0000", "linear-gradient(180deg, #FEC8CD 0%, #FD9EA6 100%)"],
+  ["#922D00", "linear-gradient(180deg, #FFDBC3 0%, #FFBF94 100%)"],
+  ["#6D4702", "linear-gradient(180deg, #FFEEB8 0%, #FFE180 100%)"],
+  ["#195C08", "linear-gradient(180deg, #BDF2BD 0%, #89E789 100%)"],
+  ["#025849", "linear-gradient(180deg, #BFF3E9 0%, #7FE8D4 100%)"],
+  ["#003A99", "linear-gradient(180deg, #B8DDFF 0%, #A0D0FF 100%)"],
+  ["#3B158C", "linear-gradient(180deg, #D9CBFF 0%, #CCB9FF 100%)"],
+  ["#8A1245", "linear-gradient(180deg, #FFD1E5 0%, #FFAED0 100%)"],
+];
+
+const mouths = [
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 16" fill="none"><path d="M28.4821 4C30.78 4 32.7026 5.86498 31.7509 7.87572C30.9368 9.59547 29.584 11.1761 27.7682 12.4853C24.6471 14.7357 20.4139 16 16 16C11.5861 16 7.3529 14.7357 4.23177 12.4853C2.41601 11.1761 1.06315 9.59547 0.249133 7.87572C-0.702621 5.86498 1.22002 4 3.51791 4L28.4821 4Z" fill="currentColor"/></svg>`,
+  `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" viewBox="0 0 32 16" fill="none"><ellipse cx="16" cy="10" rx="8" ry="6" fill="currentColor"/></svg>`,
+  `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" viewBox="0 0 32 16" fill="none"><g clip-path="url(#clip0_31_1134)"><path d="M4.23177 12.4853C2.41601 11.1761 1.06315 9.59547 0.249133 7.87572C-0.702621 5.86498 1.22002 4 3.51791 4L7 4C7.55229 4 8 4.44772 8 5V13.0522C8 13.7579 7.28869 14.2398 6.6548 13.9296C5.79179 13.5074 4.97984 13.0247 4.23177 12.4853Z" fill="currentColor"/><path d="M31.7509 7.87572C30.9369 9.59547 29.584 11.1761 27.7682 12.4853C27.0202 13.0247 26.2082 13.5074 25.3452 13.9296C24.7113 14.2398 24 13.7579 24 13.0522L24 5C24 4.44772 24.4477 4 25 4L28.4821 4C30.78 4 32.7026 5.86498 31.7509 7.87572Z" fill="currentColor"/><path d="M16 16C14.564 16 13.1472 15.8662 11.7816 15.6082C11.3227 15.5215 11 15.1143 11 14.6473V5C11 4.44772 11.4477 4 12 4L20 4C20.5523 4 21 4.44772 21 5V14.6473C21 15.1143 20.6773 15.5215 20.2184 15.6082C18.8528 15.8662 17.436 16 16 16Z" fill="currentColor"/></g><defs><clipPath id="clip0_31_1134"><rect width="32" height="16" fill="white"/></clipPath></defs></svg>`,
+];
+
+const getColors = _.memoize((v: string) => {
+  const idx = Math.floor((cyrb53(v) / Math.pow(2, 53)) * colors.length);
+  return colors[idx];
+});
+
+const getMouth = _.memoize((v: string) => {
+  const salted = v + "::mouth"; // made mouths independent of colors
+  const idx = Math.floor((cyrb53(salted) / Math.pow(2, 53)) * mouths.length);
+  return mouths[idx];
+});
+
+interface FibermojiPlaceholderProps {
+  size: number;
+  title?: string;
+  radius?: number;
+  backgroundColor?: string;
+}
+
+export const FibermojiPlaceholder: FC<FibermojiPlaceholderProps> = ({size, radius = "50%", title}) => {
+  const eyes = useRef<HTMLDivElement>(null);
+
+  const [fg, bg] = getColors(title ?? "unknown");
+  const mouth = getMouth(title ?? "unknown");
+  const letters = abbreviateName(title).split("");
+
+  const features = useFeatures<{enableAnimatedAvatarPlaceholders: boolean}>();
+
+  useEffect(() => {
+    const listener = (event: MouseEvent) => {
+      if (!eyes.current) {
+        return;
+      }
+
+      const reduceMotion = window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
+      if (reduceMotion || !features.enableAnimatedAvatarPlaceholders) {
+        return;
+      }
+
+      const rect = eyes.current.getBoundingClientRect();
+      const ourX = rect.left + rect.width / 2;
+      const ourY = rect.top + rect.height / 2;
+      const mouseX = event.clientX;
+      const mouseY = event.clientY;
+      const vecX = mouseX - ourX;
+      const vecY = mouseY - ourY;
+      const vecLen = Math.sqrt(vecX * vecX + vecY * vecY);
+      const normalizedVecX = vecX / vecLen;
+      const normalizedVecY = vecY / vecLen;
+      const shiftDistance = size * 0.1;
+      const shiftX = normalizedVecX * shiftDistance;
+      const shiftY = normalizedVecY * shiftDistance;
+      eyes.current.style.transform = `translate(${shiftX}px, ${shiftY}px)`;
+    };
+
+    window.addEventListener("mousemove", listener);
+    return () => window.removeEventListener("mousemove", listener);
+  }, [size, features]);
+
+  return (
+    <div
+      className={css`
+        position: relative;
+      `}
+      style={{
+        width: size,
+        height: size,
+        borderRadius: radius,
+        background: bg,
+        color: fg,
+      }}
+    >
+      <div
+        ref={eyes}
+        className={css`
+          ${textStyles.regular}
+          text-transform: uppercase;
+          font-weight: 500;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        `}
+        style={{
+          gap: size * 0.1,
+          lineHeight: `${size * 0.9}px`,
+          fontSize: size * 0.5,
+          color: fg,
+        }}
+      >
+        {letters.map((letter, index) => (
+          <span key={index}>{letter}</span>
+        ))}
+      </div>
+      <div
+        className={css`
+          position: absolute;
+          line-height: 0;
+          opacity: 0.3;
+          & > svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+          }
+        `}
+        style={{
+          width: size * 0.4,
+          height: size * 0.2,
+          left: size * 0.3,
+          bottom: size * 0.1,
+        }}
+        dangerouslySetInnerHTML={{__html: mouth}}
+      />
+    </div>
+  );
+};