@fibery/ui-kit 1.35.0 → 1.36.0

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

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

@@ -0,0 +1,156 @@
+import {css, cx} from "@linaria/core";
+import {useCallback, useMemo, useRef, useState} from "react";
+import {formatValue, getStep, parseValue} from "./index";
+import _ from "lodash";
+import {add, sub} from "./decimal";
+import InputNumber from "rc-input-number";
+import {StepButton, ValueWithStepperWrapper} from "./step-button";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {UnitPrimitive} from "../unit/primitive";
+import {Stack} from "./stack";
+import {hiddenCss, inputStyle, textInlineStyle} from "./styles";
+import {invalidInputStyle} from "./edit-unit-styles";
+
+const invalidCss = css``;
+
+const inputCss = css`
+  position: relative;
+  min-width: 36px;
+
+  input {
+    ${{...inputStyle, ...textInlineStyle}}
+  }
+
+  & .rc-input-number-input-wrap {
+    display: grid;
+  }
+
+  & .step-button {
+    z-index: 1;
+  }
+
+  &.${invalidCss} {
+    input {
+      ${invalidInputStyle}
+    }
+  }
+`;
+
+export const NumberInlineInputWithAutosize = ({
+  value,
+  numberFormat,
+  numberPrecision,
+  format = _.identity,
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  autoFocus,
+  placeholder,
+  invalid,
+  ...rest
+}: {
+  value: string | number | null;
+  numberFormat: "Number" | "Money" | "Percent";
+  format?: (value: string | number) => string;
+  numberPrecision: number;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (value: string | number) => void;
+  decimalSeparator?: string;
+  placeholder?: string;
+  autoFocus: boolean;
+  style?: object;
+  width?: number;
+  invalid?: boolean;
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const handleFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      if (onFocus) {
+        onFocus(e);
+      }
+      setIsEditing(true);
+    },
+    [onFocus, setIsEditing]
+  );
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      if (onBlur && e.relatedTarget) {
+        onBlur(e);
+      }
+      setIsEditing(false);
+    },
+    [onBlur]
+  );
+
+  const handleChange = useCallback(
+    (value: string | number | null) => {
+      if (onChange) {
+        onChange(parseValue(value, numberFormat, numberPrecision));
+      }
+    },
+    [onChange, numberFormat, numberPrecision]
+  );
+
+  const handleStep = useCallback(
+    (
+      newValue: string | number,
+      {
+        type,
+      }: {
+        type: "up" | "down";
+      }
+    ) => {
+      inputRef.current?.focus();
+      const step = getStep(numberFormat);
+      if (type === "up") {
+        onChange(add(value, step));
+      } else {
+        onChange(sub(value, step));
+      }
+    },
+    [numberFormat, onChange, value]
+  );
+
+  const formattedValue = useMemo(() => {
+    return formatValue(value, isEditing, numberFormat, format);
+  }, [value, isEditing, numberFormat, format]);
+
+  return (
+    <Stack
+      bottom={
+        <div className={hiddenCss}>
+          <UnitPrimitive invalid={invalid}>
+            <ValueWithStepperWrapper>{formattedValue}</ValueWithStepperWrapper>
+          </UnitPrimitive>
+        </div>
+      }
+      top={
+        <InputNumber
+          // Allow input to shrink (otherwise it has size 20 by default)
+          size={1}
+          autoFocus={autoFocus}
+          ref={inputRef}
+          value={formattedValue}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onKeyDown={onKeyDown}
+          type="text"
+          placeholder={placeholder}
+          upHandler={<StepButton className="step-button" type={"up"} />}
+          downHandler={<StepButton className="step-button" type={"down"} />}
+          onStep={handleStep}
+          onClick={stopPropagation}
+          {...rest}
+          className={cx(inputCss, invalid && invalidCss)}
+        />
+      }
+    />
+  );
+};

package/src/number-input/number-input.tsx

@@ -0,0 +1,152 @@
+import {textStyles, themeVars} from "../../src/design-system";
+import {css} from "@linaria/core";
+import {useCallback, useMemo, useRef, useState, useImperativeHandle, forwardRef} from "react";
+import {formatValue, getStep, parseValue} from "./index";
+import _ from "lodash";
+import {add, sub} from "./decimal";
+import InputNumber from "rc-input-number";
+import {StepButton} from "./step-button";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import cx from "classnames";
+import {invalidInputStyle} from "./edit-unit-styles";
+
+const invalidClassName = css``;
+
+export const inputContainerClassName = css`
+  position: relative;
+  input {
+    background-color: ${themeVars.transparent};
+    ${textStyles.regular}
+    outline: none;
+    width: 100%;
+    border: none;
+    text-align: right;
+    &::placeholder {
+      color: ${themeVars.inputPlaceholderTextColor};
+    }
+  }
+
+  &.${invalidClassName} {
+    ${invalidInputStyle}
+  }
+`;
+
+export const NumberInlineInput = forwardRef<
+  HTMLInputElement,
+  {
+    value: string | number | null;
+    numberFormat: "Number" | "Money" | "Percent";
+    format?: (value: string | number) => string;
+    numberPrecision: number;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onChange: (value: string | number) => void;
+    placeholder: string;
+    autoFocus: boolean;
+    style: object;
+    width?: number;
+    valueWrapperClassName?: string;
+    decimalSeparator?: string;
+    invalid?: boolean;
+  }
+>(
+  (
+    {
+      value,
+      numberFormat,
+      numberPrecision,
+      format = _.identity,
+      onFocus,
+      onBlur,
+      onChange,
+      onKeyDown,
+      autoFocus,
+      placeholder,
+      valueWrapperClassName,
+      invalid,
+      ...rest
+    },
+    ref
+  ) => {
+    const isEditing = true;
+    const handleFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(
+      (e) => {
+        if (onFocus) {
+          onFocus(e);
+        }
+      },
+      [onFocus]
+    );
+
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const [inputContainerRef, setInputContainerRef] = useState<HTMLDivElement | null>(null);
+
+    const handleBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(
+      (e) => {
+        if (onBlur && e.relatedTarget && inputContainerRef && !inputContainerRef.contains(e.relatedTarget)) {
+          onBlur(e);
+        }
+      },
+      [inputContainerRef, onBlur]
+    );
+
+    const handleChange = useCallback(
+      (value: string | number | null) => {
+        if (onChange) {
+          onChange(parseValue(value, numberFormat, numberPrecision));
+        }
+      },
+      [onChange, numberFormat, numberPrecision]
+    );
+
+    const handleStep = useCallback(
+      (
+        newValue: string | number,
+        {
+          type,
+        }: {
+          type: "up" | "down";
+        }
+      ) => {
+        inputRef.current?.focus();
+        const step = getStep(numberFormat);
+        if (type === "up") {
+          onChange(add(value, step));
+        } else {
+          onChange(sub(value, step));
+        }
+      },
+      [numberFormat, onChange, value]
+    );
+    useImperativeHandle(ref, () => inputRef.current!, []);
+
+    const formattedValue = useMemo(() => {
+      return formatValue(value, isEditing, numberFormat, format);
+    }, [value, isEditing, numberFormat, format]);
+
+    return (
+      <div
+        ref={setInputContainerRef}
+        className={cx(valueWrapperClassName, inputContainerClassName, invalid && invalidClassName)}
+      >
+        <InputNumber
+          autoFocus={autoFocus}
+          ref={inputRef}
+          value={formattedValue}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onKeyDown={onKeyDown}
+          type="text"
+          placeholder={placeholder}
+          upHandler={<StepButton type={"up"} />}
+          downHandler={<StepButton type={"down"} />}
+          onStep={handleStep}
+          onClick={stopPropagation}
+          {...rest}
+        />
+      </div>
+    );
+  }
+);