@fibery/ui-kit 1.35.0 → 1.36.1

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

package/src/field-container.tsx

@@ -0,0 +1,213 @@
+import {css, cx} from "@linaria/core";
+import {styled} from "@linaria/react";
+import {FC, PropsWithChildren, ReactNode, useEffect, useRef, useState} from "react";
+import screenfull from "screenfull";
+import {border, space, textStyles, themeVars} from "./design-system";
+import {IconButton} from "./button/icon-button";
+import FocusModeIcon from "./icons/react/FocusMode";
+import FocusModeOffIcon from "./icons/react/FocusModeOff";
+import {Tooltip} from "./tooltip";
+import {CollapsibleSection} from "./collapsible-section";
+
+const labelStyle = css`
+  ${{...textStyles.heading6}};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+type Props = {
+  label?: string;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  onCollapseChange?: (collapsed: boolean) => void;
+  children: ReactNode;
+};
+
+export const FieldContainer = ({label, collapsible = false, collapsed, onCollapseChange, children}: Props) => {
+  return (
+    <CollapsibleSection
+      label={label ? <div className={labelStyle}>{label}</div> : undefined}
+      collapsible={collapsible}
+      collapsed={collapsed}
+      collapsedDefault={true}
+      onCollapsedChange={onCollapseChange}
+    >
+      <div
+        className={
+          label &&
+          css`
+            margin-top: ${space.s12}px;
+          `
+        }
+      >
+        {children}
+      </div>
+    </CollapsibleSection>
+  );
+};
+
+const fullscreenModeContainerStyle = css`
+  background: ${themeVars.panelBg};
+  padding: ${space.s8}px ${space.s6 + space.s12}px;
+`;
+
+const fullscreenModeContentStyle = css`
+  margin: auto;
+  max-width: 1400px;
+`;
+
+const fullscreenButton = css`
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 1;
+`;
+
+const fullscreenWithOptionsButton = css`
+  &.${fullscreenButton} {
+    right: 46px;
+  }
+`;
+
+export const FieldFullscreenSupportContainer: FC<
+  PropsWithChildren<{
+    label?: string;
+    description?: ReactNode;
+    withOptions?: boolean;
+    disabled?: boolean;
+    onToggleFullscreenMode: (isFullscreen: boolean) => void;
+    fullScreenButtonPosition?: {top: number; right: number};
+  }>
+> = ({
+  label,
+  onToggleFullscreenMode,
+  withOptions = false,
+  disabled = false,
+  children,
+  description,
+  fullScreenButtonPosition,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  function toggleFullscreen() {
+    if (!screenfull.element) {
+      screenfull.request(ref.current || undefined).catch((err) => {
+        alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+      });
+    } else {
+      screenfull.exit();
+    }
+  }
+
+  useEffect(() => {
+    const listener = () => {
+      setIsFullscreen(Boolean(screenfull.element));
+      onToggleFullscreenMode(Boolean(screenfull.element));
+    };
+    if (screenfull.isEnabled) {
+      screenfull.on("change", listener);
+    }
+    return () => {
+      if (screenfull.isEnabled) {
+        screenfull.off("change", listener);
+      }
+    };
+  }, [onToggleFullscreenMode]);
+
+  const fullscreen = (
+    <div className={cx(fullscreenButton, withOptions && fullscreenWithOptionsButton)} style={fullScreenButtonPosition}>
+      {disabled ? (
+        <IconButton
+          disabled={disabled}
+          className={isFullscreen ? "actions-visible" : "actions-hidden"}
+          size={"small"}
+          onClick={toggleFullscreen}
+        >
+          {isFullscreen ? <FocusModeOffIcon /> : <FocusModeIcon />}
+        </IconButton>
+      ) : (
+        <Tooltip side="bottom" title={isFullscreen ? "Exit full screen" : "Full screen"}>
+          <IconButton
+            className={isFullscreen ? "actions-visible" : "actions-hidden"}
+            size={"small"}
+            onClick={toggleFullscreen}
+          >
+            {isFullscreen ? <FocusModeOffIcon /> : <FocusModeIcon />}
+          </IconButton>
+        </Tooltip>
+      )}
+    </div>
+  );
+  return (
+    <div className={cx(isFullscreen && fullscreenModeContainerStyle)} ref={ref}>
+      <div
+        className={cx(
+          css`
+            position: relative;
+          `,
+          isFullscreen && fullscreenModeContentStyle
+        )}
+      >
+        <FieldContainer label={label}>
+          {description ?? null}
+          <div
+            className={css`
+              position: relative;
+            `}
+          >
+            {screenfull.isEnabled ? fullscreen : null}
+            {children}
+          </div>
+        </FieldContainer>
+      </div>
+    </div>
+  );
+};
+
+const fieldStackStyle = css`
+  ${{
+    display: "grid",
+    gridGap: space.s16,
+    padding: space.s20,
+    borderRadius: border.radius6,
+  }}
+`;
+
+export const FieldListContainerNoBg: FC<PropsWithChildren> = (props) => {
+  const {children} = props;
+  return <div className={fieldStackStyle}>{children}</div>;
+};
+
+const checkboxFieldContainerStyle = css`
+  ${{
+    display: "grid",
+    gridGap: space.s8,
+    gridTemplateColumns: "auto 1fr",
+    cursor: "pointer",
+  }}
+`;
+
+const checkboxFieldLabelStyle = css`
+  ${{
+    ...textStyles.heading6,
+    paddingTop: space.s2,
+  }}
+`;
+
+export const CheckboxFieldContainer = ({label, children}: {label?: string; children: ReactNode}) => {
+  return (
+    <div>
+      <label className={checkboxFieldContainerStyle}>
+        <div>{children}</div>
+        {label && <div className={checkboxFieldLabelStyle}>{label}</div>}
+      </label>
+    </div>
+  );
+};
+
+export const FieldCard = styled.div`
+  background-color: ${themeVars.actionMenuBg};
+  border-radius: ${border.radius6}px;
+`;