@fibery/ui-kit 1.34.8 → 1.36.0

package/src/number-input/styles.ts

@@ -0,0 +1,50 @@
+import {css} from "@linaria/core";
+import {border, space, textStyles, themeVars} from "../design-system";
+
+export const hiddenCss = css`
+  visibility: hidden;
+`;
+
+export const inputStyle = {
+  position: "relative",
+  backgroundColor: themeVars.inputBgColor,
+  border: "none",
+  boxShadow: "inset 0 0 0 1px rgb(0 0 0 / 4%)",
+  borderRadius: border.radius6,
+  ...textStyles.small,
+  padding: `${space.s2}px ${space.s6}px`,
+  margin: 0,
+  outline: "none",
+
+  lineHeight: `20px`,
+
+  "&::placeholder": {
+    color: themeVars.inputPlaceholderTextColor,
+  },
+
+  "&:focus": {
+    boxShadow: `${themeVars.inputBorderFocusColor} inset`,
+  },
+};
+
+export const inputCss = css`
+  ${inputStyle}
+`;
+
+export const textInlineStyle = {
+  textWrap: "normal",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+};
+
+export const textInlineCss = css`
+  ${textInlineStyle}
+`;
+
+export const textAreaCss = css`
+  display: block;
+  resize: none;
+  white-space: pre-wrap;
+  overflow: hidden;
+`;

package/src/number-input/text-area-with-autosize.tsx

@@ -0,0 +1,91 @@
+import {CSSProperties, useCallback, useRef} from "react";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {hiddenCss, inputCss, textAreaCss} from "./styles";
+import {css, cx} from "@linaria/core";
+import {Stack} from "./stack";
+import {invalidInputClass} from "./edit-unit-styles";
+
+export const TextAreaWithAutosize = ({
+  value,
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  autoFocus,
+  placeholder,
+  invalid,
+  ...rest
+}: {
+  value: string | null;
+  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onChange: (value: string | number) => void;
+  placeholder: string;
+  autoFocus: boolean;
+  style?: CSSProperties;
+  width?: number;
+  invalid?: boolean;
+}) => {
+  const handleFocus: React.FocusEventHandler<HTMLTextAreaElement> = useCallback(
+    (e) => {
+      if (onFocus) {
+        onFocus(e);
+      }
+    },
+    [onFocus]
+  );
+
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const initialValue = useRef(value);
+
+  const handleBlur: React.FocusEventHandler<HTMLTextAreaElement> = useCallback(
+    (e) => {
+      if (onBlur) {
+        onBlur(e);
+      }
+    },
+    [onBlur]
+  );
+
+  const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(
+    (e) => {
+      if (onChange) {
+        onChange(e.target.value);
+      }
+    },
+    [onChange]
+  );
+
+  return (
+    <Stack
+      className={css`
+        width: 100%;
+      `}
+      bottom={
+        <div className={cx(inputCss, textAreaCss, hiddenCss)}>
+          {value === null || value === "" || initialValue.current === null || initialValue.current === ""
+            ? placeholder
+            : value}
+        </div>
+      }
+      top={
+        <textarea
+          // Allow textarea to shrink to 1 row if there is only 1 row (otherwise it has min 2 by default)
+          rows={1}
+          autoFocus={autoFocus}
+          ref={inputRef}
+          value={value || ""}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onKeyDown={onKeyDown}
+          placeholder={placeholder}
+          onClick={stopPropagation}
+          {...rest}
+          className={cx(inputCss, textAreaCss, invalid && invalidInputClass)}
+        />
+      }
+    />
+  );
+};

package/src/number-input/text-inline-input-with-autosize.tsx

@@ -0,0 +1,60 @@
+import {CSSProperties, useRef} from "react";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {Stack} from "./stack";
+import {cx} from "@linaria/core";
+import {hiddenCss, inputCss, textInlineCss} from "./styles";
+import {invalidInputClass} from "./edit-unit-styles";
+
+export const TextInlineInputWithAutosize = ({
+  value,
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  autoFocus,
+  placeholder,
+  invalid,
+  ...rest
+}: {
+  value: string | null;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+  onChange: (value: string | number) => void;
+  placeholder: string;
+  autoFocus: boolean;
+  style?: CSSProperties;
+  width?: number;
+  invalid?: boolean;
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  let hiddenValue = placeholder || "";
+  if (value && value.length > hiddenValue.length - 1) {
+    hiddenValue = value;
+  }
+
+  return (
+    <Stack
+      bottom={<div className={cx(inputCss, textInlineCss, hiddenCss)}>{hiddenValue}</div>}
+      top={
+        <input
+          // Allow input to shrink (otherwise it has size 20 by default)
+          size={1}
+          autoFocus={autoFocus}
+          ref={inputRef}
+          value={value || ""}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onChange={(e) => onChange?.(e.target.value)}
+          onKeyDown={onKeyDown}
+          type="text"
+          placeholder={placeholder}
+          onClick={stopPropagation}
+          {...rest}
+          className={cx(inputCss, invalid && invalidInputClass)}
+        />
+      }
+    />
+  );
+};

package/src/online-users.tsx

@@ -0,0 +1,238 @@
+import {css, cx} from "@linaria/core";
+import _ from "lodash";
+import {useEffect, useRef, useState} from "react";
+import {AvatarImage} from "./avatar";
+import {getObjectColorMemoized, space, themeVars, tooltipDelay} from "./design-system";
+import {Popup} from "./popup";
+import {Tooltip} from "./tooltip";
+
+const offset = [0, space.s6] as [number, number];
+
+export const avatarClassName = css`
+  border-radius: 100%;
+  background-color: ${themeVars.actionMenuBg};
+  position: relative;
+  border-color: transparent;
+  transition: all 0.25s ease-in;
+  cursor: default;
+  user-select: none;
+`;
+
+const popupContainerClassName = css`
+  z-index: 10001;
+`;
+
+const popupClassName = css`
+  max-width: 360px;
+  padding: ${space.s8}px;
+  max-height: calc(100vh - ${2 * space.s48}px);
+  scrollbar-gutter: stable;
+  overflow-y: auto;
+`;
+
+export const userClassName = css`
+  all: unset;
+  margin-left: -4px;
+  &:first-of-type {
+    margin-left: 0;
+  }
+`;
+
+const userClassNameHover = css`
+  &:hover {
+    cursor: default;
+    position: relative;
+  }
+`;
+
+const moreParticipantsClassName = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: ${themeVars.textColor};
+  background-color: ${themeVars.badgeBgColor};
+  border: 1px solid ${themeVars.commentBubbleBg};
+  margin-left: -${space.s6}px;
+  border-radius: 50%;
+  position: relative;
+`;
+
+// 3 users + more
+export const maxVisibleUsers = 6;
+
+export function OnlineUsers({
+  users,
+}: {
+  users: Array<{
+    id: string;
+    avatarUrl?: string | null;
+    hasAccess?: boolean;
+    isFollowed?: boolean;
+    name: string;
+    callBack?: () => void | null;
+  }>;
+}) {
+  const [triggerElement, setTriggerElement] = useState<HTMLButtonElement | null>(null);
+  const [hover, setHover] = useState(false);
+  const timeoutId = useRef<number>();
+  const hideTooltip = () => {
+    window.clearTimeout(timeoutId.current);
+    setHover(false);
+  };
+  const showTooltip = () => {
+    clearTimeout(timeoutId.current);
+    timeoutId.current = window.setTimeout(() => {
+      setHover(true);
+    }, tooltipDelay.enter);
+  };
+  const [visible, setVisible] = useState(false);
+
+  const usersCount = users.length;
+  const ref = useRef<HTMLButtonElement>(null);
+  const onHide = () => {
+    setVisible(false);
+    triggerElement?.focus();
+  };
+  const onShow = () => {
+    setVisible(true);
+  };
+  useEffect(() => {
+    setTriggerElement(ref.current);
+  }, []);
+  useEffect(() => {
+    if (usersCount < maxVisibleUsers + 1) {
+      setVisible(false);
+    }
+  }, [usersCount]);
+
+  return (
+    <>
+      <div
+        className={css`
+          all: unset;
+          display: flex;
+          flex-direction: row-reverse;
+        `}
+      >
+        <div
+          className={cx(
+            userClassName,
+            users.length > maxVisibleUsers
+              ? css`
+                  display: block;
+                `
+              : css`
+                  display: none;
+                `
+          )}
+        >
+          <Tooltip title="Show all" visible={hover && !visible} side={"bottom"}>
+            <button
+              onMouseEnter={showTooltip}
+              onMouseLeave={hideTooltip}
+              ref={ref}
+              onClick={() => {
+                if (visible) {
+                  onHide();
+                } else {
+                  onShow();
+                }
+              }}
+              type="button"
+              className={moreParticipantsClassName}
+            >
+              <div>{usersCount - maxVisibleUsers + 1}</div>
+            </button>
+          </Tooltip>
+        </div>
+
+        {_.take(users, users.length === maxVisibleUsers ? maxVisibleUsers : maxVisibleUsers - 1).map(
+          ({avatarUrl, hasAccess, name, callBack, isFollowed}, index) => {
+            const tooltipDescription = callBack ? "Click to follow" : "";
+            const tooltipTitle = hasAccess ? name : "Private User";
+            const userBorderColor = getObjectColorMemoized(name);
+            return (
+              <div key={index} className={cx(userClassName, userClassNameHover)}>
+                <Tooltip
+                  title={tooltipTitle}
+                  description={isFollowed ? "Click to unfollow" : tooltipDescription}
+                  side={"bottom"}
+                  sideOffset={space.s4}
+                >
+                  <div
+                    className={avatarClassName}
+                    style={{
+                      border: isFollowed
+                        ? `1px solid ${themeVars.commentBubbleBg}`
+                        : `1px solid ${themeVars.commentBubbleBg}`,
+                      outline: isFollowed ? `2px solid ${userBorderColor}` : `0px solid ${themeVars.commentBubbleBg}`,
+                    }}
+                    onClick={() => {
+                      if (callBack) {
+                        callBack();
+                      }
+                    }}
+                  >
+                    <AvatarImage size={22} disableNativeTitle title={name} avatarUrl={avatarUrl} />
+                  </div>
+                </Tooltip>
+              </div>
+            );
+          }
+        )}
+      </div>
+      {Boolean(triggerElement) && users.length > maxVisibleUsers && (
+        <Popup
+          offset={offset}
+          popupContainerClassName={popupContainerClassName}
+          popupClassName={popupClassName}
+          placement="bottom"
+          renderInPortal
+          open={visible}
+          onOpen={() => onShow()}
+          onClose={() => onHide()}
+          trigger={<></>}
+          triggerDomElement={triggerElement}
+        >
+          <ul
+            className={css`
+              all: unset;
+              color: ${themeVars.textColor};
+            `}
+          >
+            {users.map(({avatarUrl, name, callBack}, index) => (
+              <li
+                className={css`
+                  display: flex;
+                  gap: ${space.s6}px;
+                  align-items: center;
+                  padding-bottom: ${space.s6}px;
+                  &:last-of-type {
+                    padding-bottom: 0;
+                  }
+                `}
+                key={index}
+              >
+                <div
+                  onClick={() => {
+                    if (callBack) {
+                      callBack();
+                    }
+                  }}
+                  className={css`
+                    user-select: none;
+                  `}
+                >
+                  <AvatarImage size={20} disableNativeTitle title={name} avatarUrl={avatarUrl} />
+                </div>
+                <div>{name}</div>
+              </li>
+            ))}
+          </ul>
+        </Popup>
+      )}
+    </>
+  );
+}

package/src/palette.ts

@@ -1,4 +1,5 @@
 export const slate = {
+  slateBase: "hsl(0, 0%, 99%)",
   slate1: "hsl(206, 30%, 99%)",
   slate2: "hsl(210, 17%, 98%)",
   slate3: "hsl(209, 13%, 95%)",
@@ -14,6 +15,7 @@ export const slate = {
 } as const;
 
 export const slateDark = {
+  slateBase: "hsl(0, 0%, 3%)",
   slate1: "hsl(200, 7%, 9%)",
   slate2: "hsl(195, 7%, 11%)",
   slate3: "hsl(197, 7%, 14%)",
@@ -28,36 +30,6 @@ export const slateDark = {
   slate12: "hsl(210, 6%, 93%)",
 } as const;
 
-export const sage = {
-  sage1: "hsl(155, 30%, 99%)",
-  sage2: "hsl(150, 17%, 98%)",
-  sage3: "hsl(151, 11%, 95%)",
-  sage4: "hsl(151, 9%, 93%)",
-  sage5: "hsl(151, 8%, 91%)",
-  sage6: "hsl(152, 7%, 88%)",
-  sage7: "hsl(153, 7%, 85%)",
-  sage8: "hsl(154, 6%, 78%)",
-  sage9: "hsl(155, 4%, 56%)",
-  sage10: "hsl(154, 3%, 52%)",
-  sage11: "hsl(155, 3%, 43%)",
-  sage12: "hsl(155, 24%, 9%)",
-} as const;
-
-export const sageDark = {
-  sage1: "hsl(160, 7%, 8%)",
-  sage2: "hsl(150, 7%, 11%)",
-  sage3: "hsl(150, 7%, 13%)",
-  sage4: "hsl(150, 6%, 15%)",
-  sage5: "hsl(150, 6%, 17%)",
-  sage6: "hsl(150, 6%, 20%)",
-  sage7: "hsl(150, 5%, 24%)",
-  sage8: "hsl(150, 5%, 31%)",
-  sage9: "hsl(155, 6%, 42%)",
-  sage10: "hsl(153, 5%, 48%)",
-  sage11: "hsl(155, 5%, 62%)",
-  sage12: "hsl(155, 6%, 93%)",
-} as const;
-
 export const teal = {
   teal1: "hsl(165, 60%, 99%)",
   teal2: "hsl(169, 65%, 97%)",

package/src/platform.ts

@@ -0,0 +1,4 @@
+import {UAParser} from "ua-parser-js";
+
+export const isMac = navigator.platform.startsWith("Mac");
+export const isMobile = new UAParser(navigator.userAgent).getDevice().type === "mobile";