@fibery/ui-kit 1.35.0 → 1.36.1

package/src/new-card-placeholder.tsx

@@ -0,0 +1,231 @@
+import {useFocusOutside} from "@fibery/react/src/use-focus-outside";
+import {css} from "@linaria/core";
+import {styled} from "@linaria/react";
+import cx from "classnames";
+import {CSSProperties, FC, ReactNode, RefObject, useCallback, useEffect, useState} from "react";
+import {AntTransparentInput, AntTransparentTextArea} from "./antd/input";
+import {Box} from "./box";
+import {Button} from "./button/button";
+import {CardContainer, CardSize, titleUnitsContainerClassName} from "./card-container";
+import {space, textStyles, themeVars} from "./design-system";
+import {ignoreEnter} from "./form-utils";
+import {$TSFixMe} from "./tsfixme";
+
+const disabledTextClassName = css`
+  ${{color: themeVars.disabledTextColor}}
+`;
+
+const titleAreaContainerClassName = css`
+  ${{
+    width: "100%",
+  }}
+`;
+
+const AuxWrapper = styled.div<{backgroundColor?: string}>`
+  display: flex;
+  gap: ${space.s4}px;
+  background-color: ${({backgroundColor}) => backgroundColor || ""};
+`;
+
+const singleLineClassName = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const autosize = {
+  minRows: 1,
+  maxRows: 10,
+};
+
+export const outlineNoneClassName = css`
+  ${{outline: "none"}}
+`;
+
+interface NewCardPlaceholderProps {
+  typeTitle?: string;
+  size: CardSize;
+  containerClassName?: string;
+  inputStyle?: CSSProperties;
+  leftContainer?: ReactNode;
+  scrollToInput?: boolean;
+  bypassedRef: RefObject<HTMLDivElement>;
+  referenceSelector?: ReactNode;
+  selectorOpen?: boolean;
+  readOnly?: boolean;
+  onSubmit: (v: {event: $TSFixMe; title: string}) => Promise<void>;
+  onHide: () => void;
+  onHideByEsc?: () => void;
+}
+
+export const NewCardPlaceholder: FC<NewCardPlaceholderProps> = (props) => {
+  const {
+    leftContainer,
+    typeTitle,
+    containerClassName,
+    inputStyle,
+    bypassedRef,
+    onSubmit,
+    onHide,
+    onHideByEsc = onHide,
+    referenceSelector,
+    selectorOpen,
+    readOnly,
+    scrollToInput = true,
+    size,
+  } = props;
+  const [title, setTitle] = useState<string>("");
+
+  const multiline = size !== ":card-size/timeline" && size !== ":card-size/list" && size !== ":card-size/cell";
+  useEffect(() => {
+    if (readOnly) {
+      bypassedRef.current?.focus();
+    }
+  }, [bypassedRef, readOnly]);
+
+  const onChange = useCallback((e: $TSFixMe) => {
+    setTitle(e.target.value);
+    e.stopPropagation();
+  }, []);
+
+  const submit = useCallback(
+    async (event: $TSFixMe) => {
+      setTitle("");
+      try {
+        await onSubmit({event, title});
+      } catch (e) {
+        // pass
+      }
+    },
+    [onSubmit, title]
+  );
+
+  const onPressEnter = useCallback(
+    async (e: $TSFixMe) => {
+      e.stopPropagation();
+      submit(e);
+    },
+    [submit]
+  );
+
+  const onBlur = useCallback(
+    async (e: $TSFixMe) => {
+      if (!selectorOpen) {
+        if (title) {
+          submit(e);
+        }
+        onHide();
+      }
+    },
+    [onHide, selectorOpen, submit, title]
+  );
+
+  const hasTitle = title.length > 0;
+
+  const onKeyDown = useCallback(
+    (e: $TSFixMe) => {
+      ignoreEnter(e);
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        if (hasTitle) {
+          setTitle("");
+        } else {
+          onHideByEsc();
+        }
+      }
+    },
+    [hasTitle, onHideByEsc]
+  );
+
+  const onAddCardButtonClick = useCallback(
+    (e: $TSFixMe) => {
+      submit(e);
+    },
+    [submit]
+  );
+
+  const [containerElement, setContainerElement] = useState<HTMLElement | null>(null);
+
+  const isTitleEmpty = title === "";
+  useEffect(() => {
+    if (containerElement && scrollToInput) {
+      containerElement.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest",
+      });
+    }
+  }, [containerElement, isTitleEmpty, scrollToInput]);
+
+  const {onBlurCapture, onFocusCapture} = useFocusOutside(onBlur);
+
+  const InputComponent = multiline ? AntTransparentTextArea : AntTransparentInput;
+
+  return (
+    <Box
+      focused
+      hovered={false}
+      ref={setContainerElement}
+      className={containerClassName}
+      onBlurCapture={onBlurCapture}
+      onFocusCapture={onFocusCapture}
+    >
+      <CardContainer
+        before={leftContainer && <div>{leftContainer}</div>}
+        title={
+          readOnly ? (
+            <div ref={bypassedRef} tabIndex={0} className={titleUnitsContainerClassName}>
+              <div
+                className={cx(disabledTextClassName, outlineNoneClassName, {
+                  [singleLineClassName]: !multiline,
+                })}
+              >
+                Name will be generated by a formula
+              </div>
+            </div>
+          ) : (
+            <div className={titleAreaContainerClassName}>
+              <InputComponent
+                // @ts-expect-error fix types for ref
+                bypassedRef={bypassedRef}
+                value={title}
+                readOnly={false}
+                onChange={onChange}
+                onPressEnter={onPressEnter}
+                autoFocus={true}
+                onKeyDown={onKeyDown}
+                placeholder={readOnly ? "" : `New ${typeTitle}`}
+                style={{
+                  ...textStyles.regular,
+                  ...inputStyle,
+                }}
+                {...(multiline
+                  ? {
+                      autoSize: autosize,
+                    }
+                  : {})}
+              />
+            </div>
+          )
+        }
+        size={size}
+        after={
+          (referenceSelector || readOnly) && (
+            <AuxWrapper>
+              {referenceSelector && <div>{referenceSelector}</div>}
+              {readOnly && (
+                <div>
+                  <Button style={{width: 40}} size="small" onClick={onAddCardButtonClick}>
+                    Add
+                  </Button>
+                </div>
+              )}
+              {multiline && <div />}
+            </AuxWrapper>
+          )
+        }
+        input={!readOnly}
+      />
+    </Box>
+  );
+};

package/src/not-empty.ts

@@ -0,0 +1,3 @@
+export function notEmpty<TValue>(value: TValue | null | undefined | false): value is TValue {
+  return value !== null && value !== undefined && value !== false;
+}

package/src/notification-dot.tsx

@@ -0,0 +1,23 @@
+import {css} from "@linaria/core";
+import {space, themeVars} from "./design-system";
+
+const activityIndicatorStyle = css`
+  ${{
+    backgroundColor: themeVars.active,
+    borderRadius: "50%",
+    position: "absolute",
+    top: 0,
+  }}
+`;
+
+export const NotificationDot = ({big = true, color = themeVars.active}: {big: boolean; color: string}) => {
+  const size = big ? space.s6 : space.s4;
+  const marginTop = big ? -6 : -1;
+  const marginRight = big ? -1 : 0;
+  return (
+    <div
+      className={activityIndicatorStyle}
+      style={{backgroundColor: color, width: size, height: size, marginTop, marginRight}}
+    />
+  );
+};

package/src/number-input/decimal.js

@@ -0,0 +1,59 @@
+import _ from "lodash";
+
+const isEmpty = (value) => _.isNil(value) || value === "";
+
+const getPrecision = (value) => {
+  if (isEmpty(value)) {
+    return 0;
+  }
+  const [, decimalPart = ""] = String(value).split(".");
+  return decimalPart.length;
+};
+
+const removeTrailingZeros = (value) => {
+  if (isEmpty(value)) {
+    return value;
+  }
+  const hasDecimalPart = value.indexOf(".") > 0;
+  return hasDecimalPart ? _.trimEnd(_.trimEnd(value, "0"), ".") : value;
+};
+
+export const add = _.flow([
+  (first, second) => {
+    const result = Number(first) + Number(second);
+    const maxPrecision = Math.max(getPrecision(first), getPrecision(second));
+    return result.toFixed(maxPrecision);
+  },
+  removeTrailingZeros,
+]);
+
+export const sub = _.flow([
+  (first, second) => {
+    return add(first, -second);
+  },
+  removeTrailingZeros,
+]);
+
+export const multiplyByHundred = _.flow([
+  (value) => {
+    if (isEmpty(value)) {
+      return value;
+    }
+    const result = value * 100;
+    const precision = Math.max(0, getPrecision(value) - 2);
+    return result.toFixed(precision);
+  },
+  removeTrailingZeros,
+]);
+
+export const divideByHundred = _.flow([
+  (value) => {
+    if (isEmpty(value)) {
+      return value;
+    }
+    const result = value / 100;
+    const precision = getPrecision(value) + 2;
+    return result.toFixed(precision);
+  },
+  removeTrailingZeros,
+]);

package/src/number-input/decimal.test.js

@@ -0,0 +1,71 @@
+import {divideByHundred, multiplyByHundred, add, sub} from "./decimal";
+
+describe("decimal", () => {
+  it("multiplyByHundred", () => {
+    expect(multiplyByHundred("")).toEqual("");
+    expect(multiplyByHundred(null)).toEqual(null);
+    expect(multiplyByHundred(undefined)).toEqual(undefined);
+    expect(multiplyByHundred("0")).toEqual("0");
+    expect(multiplyByHundred("1")).toEqual("100");
+    expect(multiplyByHundred("1.1")).toEqual("110");
+    expect(multiplyByHundred("0.1")).toEqual("10");
+    expect(multiplyByHundred("0.1111")).toEqual("11.11");
+
+    // Negative
+    expect(multiplyByHundred("-0")).toEqual("0");
+    expect(multiplyByHundred("-1")).toEqual("-100");
+    expect(multiplyByHundred("-0.1")).toEqual("-10");
+  });
+
+  it("divideByHundred", () => {
+    expect(divideByHundred("")).toEqual("");
+    expect(divideByHundred(null)).toEqual(null);
+    expect(divideByHundred(undefined)).toEqual(undefined);
+    expect(divideByHundred("0")).toEqual("0");
+    expect(divideByHundred("1")).toEqual("0.01");
+    expect(divideByHundred("1.1")).toEqual("0.011");
+    expect(divideByHundred("0.1")).toEqual("0.001");
+    expect(divideByHundred("0.7")).toEqual("0.007");
+
+    // Negative
+    expect(divideByHundred("-1")).toEqual("-0.01");
+    expect(divideByHundred("-0.1")).toEqual("-0.001");
+    expect(divideByHundred("-100")).toEqual("-1");
+  });
+
+  it("add", () => {
+    expect(add("1", "1")).toEqual("2");
+    expect(add("1", "1.1")).toEqual("2.1");
+    expect(add("0.01", "0.99")).toEqual("1");
+    expect(add("0.1", "1.01")).toEqual("1.11");
+
+    // Precision
+    expect(add("0.09", "0.01")).toEqual("0.1");
+    expect(add("0.06", "0.01")).toEqual("0.07");
+
+    // Negative
+    expect(add("-1128", "-9.3")).toEqual("-1137.3");
+    expect(add("11.28", "-9.3")).toEqual("1.98");
+    expect(add("1128", "-0.93")).toEqual("1127.07");
+    expect(add("11.28", "-93")).toEqual("-81.72");
+    expect(add("-11.28", "9.3")).toEqual("-1.98");
+  });
+
+  it("sub", () => {
+    expect(sub("1", "1")).toEqual("0");
+    expect(sub("1.1", "1")).toEqual("0.1");
+    expect(sub("1.1", "0.1")).toEqual("1");
+    expect(sub("2.2", "1.1")).toEqual("1.1");
+
+    // Precision
+    expect(sub("0.04", "0.03")).toEqual("0.01");
+    expect(sub("0.03", "0.01")).toEqual("0.02");
+
+    // Negative
+    expect(sub("-1128", "-9.3")).toEqual("-1118.7");
+    expect(sub("11.28", "-9.3")).toEqual("20.58");
+    expect(sub("1128", "-0.93")).toEqual("1128.93");
+    expect(sub("11.28", "-93")).toEqual("104.28");
+    expect(sub("-11.28", "9.3")).toEqual("-20.58");
+  });
+});

package/src/number-input/edit-unit-styles.ts

@@ -0,0 +1,18 @@
+import {css} from "@linaria/core";
+import {themeVars} from "../design-system";
+
+export const invalidInputStyle = {
+  boxShadow: `0 0 0 1px ${themeVars.warning} inset`,
+
+  "&:hover": {
+    boxShadow: `0 0 0 1px ${themeVars.warning} inset`,
+  },
+
+  "&:focus": {
+    boxShadow: `0 0 0 1px ${themeVars.warning} inset`,
+  },
+};
+
+export const invalidInputClass = css`
+  ${invalidInputStyle}
+`;

package/src/number-input/index.js

@@ -0,0 +1,191 @@
+import _ from "lodash";
+import {bool, func, number, object, oneOf, oneOfType, string} from "prop-types";
+import {useCallback, useMemo, useState, useEffect} from "react";
+import {AntInputNumber} from "../antd/input-number";
+import {Tooltip} from "../tooltip";
+import {add, divideByHundred, multiplyByHundred, sub} from "./decimal";
+
+const isEmpty = (value) => _.isNil(value) || value === "";
+
+export const getStep = (numberFormat) => {
+  if (numberFormat === "Percent") {
+    return 0.01;
+  }
+  return 1;
+};
+
+export const formatValue = (value, isEditing, numberFormat, format) => {
+  const externalizeNumber = (numberFormat, value) => {
+    if (numberFormat === "Percent") {
+      return multiplyByHundred(value);
+    }
+    return value;
+  };
+
+  const externalizeValue = (value) => {
+    return isEditing ? externalizeNumber(numberFormat, value) : value;
+  };
+
+  const maybeFormat = (value) => {
+    return isEditing ? value : format(value);
+  };
+
+  if (isEmpty(value)) {
+    return value;
+  }
+  return _.flow([externalizeValue, maybeFormat])(value);
+};
+
+export const parseValue = (value, numberFormat, numberPrecision) => {
+  const parse = (value) => {
+    const parseInteger = (x) => {
+      const parsed = parseInt(x);
+      return isNaN(parsed) ? null : parsed;
+    };
+    const parseDecimal = (x) => {
+      const parsed = parseFloat(x);
+      return isNaN(parsed) ? null : parsed;
+    };
+
+    const parseStrategy = numberPrecision === 0 ? parseInteger : parseDecimal;
+    return parseStrategy(value);
+  };
+
+  const internalizeNumber = (value) => {
+    if (isEmpty(value)) {
+      return value;
+    }
+    if (numberFormat === "Percent") {
+      return divideByHundred(value);
+    }
+    return value;
+  };
+
+  const toString = (value) => {
+    return isEmpty(value) ? value : String(value);
+  };
+
+  if (isEmpty(value)) {
+    return null;
+  }
+  return _.flow([parse, internalizeNumber, toString])(value);
+};
+
+const propTypes = {
+  value: oneOfType([string, number]),
+  numberFormat: oneOf(["Number", "Money", "Percent"]),
+  numberPrecision: number,
+  decimalSeparator: string,
+  format: func,
+  onFocus: func,
+  onBlur: func,
+  onChange: func,
+  onKeyDown: func,
+  autoFocus: bool,
+  placeholder: string,
+  style: object,
+  disabled: bool,
+  showTooltip: bool,
+  controls: bool,
+};
+
+const defaultProps = {
+  format: _.identity,
+};
+
+export const InputNumber = (props) => {
+  const {value, numberFormat, numberPrecision, format, onFocus, onBlur, onChange, showTooltip = true, ...rest} = props;
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+  const handleFocus = useCallback(
+    (e) => {
+      if (onFocus) {
+        onFocus(e);
+      }
+      setIsEditing(true);
+    },
+    [onFocus, setIsEditing]
+  );
+
+  const handleBlur = useCallback(
+    (e) => {
+      if (onBlur) {
+        onBlur(e);
+      }
+      setIsEditing(false);
+    },
+    [onBlur, setIsEditing]
+  );
+
+  const handleChange = useCallback(
+    (value) => {
+      if (onChange) {
+        onChange(parseValue(value, numberFormat, numberPrecision));
+      }
+    },
+    [onChange, numberFormat, numberPrecision]
+  );
+
+  const handleStep = useCallback(
+    (newValue, {type}) => {
+      const step = getStep(numberFormat);
+
+      if (type === "up") {
+        onChange(add(value, step));
+      } else {
+        onChange(sub(value, step));
+      }
+    },
+    [value, numberFormat, onChange]
+  );
+
+  let formattedValue = useMemo(() => {
+    return formatValue(value, isEditing, numberFormat, format);
+  }, [value, isEditing, numberFormat, format]);
+
+  const onTooltipVisibleChange = useCallback(
+    (visible) => {
+      if (!showTooltip || isEditing || !formattedValue) {
+        return setTooltipVisible(false);
+      }
+      return setTooltipVisible(visible);
+    },
+    [isEditing, showTooltip, formattedValue]
+  );
+  useEffect(() => {
+    if (tooltipVisible && (!showTooltip || isEditing || !formattedValue)) {
+      setTooltipVisible(false);
+    }
+  }, [formattedValue, isEditing, showTooltip, tooltipVisible]);
+
+  return (
+    <Tooltip title={formattedValue} onVisibleChange={onTooltipVisibleChange} visible={tooltipVisible}>
+      <span>
+        <AntInputNumber
+          className={rest.className}
+          value={formattedValue}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onStep={handleStep}
+          {...rest}
+        />
+      </span>
+    </Tooltip>
+  );
+};
+
+InputNumber.propTypes = propTypes;
+InputNumber.defaultProps = defaultProps;
+
+export const InputNumberField = (props) => {
+  const {input, ...rest} = props;
+  const {value, onBlur, ...inputRest} = input;
+
+  const handleBlur = useCallback(() => {
+    onBlur(isEmpty(value) ? null : value);
+  }, [onBlur, value]);
+
+  return <InputNumber value={value} onBlur={handleBlur} {...inputRest} {...rest} />;
+};

package/src/number-input/index.test.js

@@ -0,0 +1,106 @@
+import {useState} from "react";
+import {ThemeProvider} from "../theme-provider";
+import {InputNumber} from "./index";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {TooltipProvider} from "../tooltip";
+
+describe("InputNumber", () => {
+  const theme = {opacity: {}};
+
+  const getArrowUp = () => screen.getByRole("button", {name: "Increase Value"});
+  const getArrowDown = () => screen.getByRole("button", {name: "Decrease Value"});
+
+  const makePercentFormatter = (precision) =>
+    jest.fn().mockImplementation((value) => {
+      const formatter = new Intl.NumberFormat("en-US", {
+        style: "percent",
+        useGrouping: true,
+        minimumFractionDigits: precision,
+        maximumFractionDigits: precision,
+      });
+      return formatter.format(value);
+    });
+
+  describe("percent format", () => {
+    it("renders in percent format", () => {
+      const formatPercent = makePercentFormatter(2);
+      render(
+        <ThemeProvider theme={theme}>
+          <TooltipProvider>
+            <InputNumber
+              data-testid="test-input"
+              value={0.01}
+              numberFormat={"Percent"}
+              numberPrecision={2}
+              format={formatPercent}
+            />
+          </TooltipProvider>
+        </ThemeProvider>
+      );
+
+      expect(screen.getByTestId("test-input")).toHaveDisplayValue("1.00%");
+    });
+
+    it("editing without percent format, applies percent format after blur", async () => {
+      const formatPercent = makePercentFormatter(2);
+      const Demo = () => {
+        const [value, setValue] = useState(null);
+        return (
+          <ThemeProvider theme={theme}>
+            <TooltipProvider>
+              <InputNumber
+                data-testid="test-input"
+                value={value}
+                numberFormat={"Percent"}
+                numberPrecision={2}
+                format={formatPercent}
+                onChange={setValue}
+              />
+            </TooltipProvider>
+          </ThemeProvider>
+        );
+      };
+      render(<Demo />);
+      const testInput = screen.getByTestId("test-input");
+      expect(testInput).toHaveDisplayValue("");
+
+      await userEvent.type(testInput, "1");
+      expect(testInput).toHaveDisplayValue("1");
+
+      await userEvent.tab();
+      expect(testInput).toHaveDisplayValue("1.00%");
+    });
+
+    it("arrows increase/decrease by one percent", async () => {
+      const formatPercent = makePercentFormatter(2);
+      const Demo = () => {
+        const [value, setValue] = useState(0.05);
+        return (
+          <ThemeProvider theme={theme}>
+            <TooltipProvider>
+              <InputNumber
+                data-testid="test-input"
+                value={value}
+                numberFormat={"Percent"}
+                numberPrecision={2}
+                format={formatPercent}
+                onChange={setValue}
+              />
+            </TooltipProvider>
+          </ThemeProvider>
+        );
+      };
+
+      render(<Demo />);
+
+      await userEvent.click(getArrowUp());
+      await userEvent.tab();
+      expect(screen.getByTestId("test-input")).toHaveDisplayValue("6.00%");
+
+      await userEvent.click(getArrowDown());
+      await userEvent.tab();
+      expect(screen.getByTestId("test-input")).toHaveDisplayValue("5.00%");
+    });
+  });
+});