@fibery/ui-kit 1.40.3 → 1.41.0

package/src/number-input/{number-inline-input-with-autosize.tsx → number-input-inline-with-autosize.tsx}

@@ -1,7 +1,6 @@
 import {css, cx} from "@linaria/core";
 import {useCallback, useMemo, useRef, useState} from "react";
-import {formatValue, getStep, parseValue} from "./index";
-import _ from "lodash";
+import identity from "lodash/identity";
 import {add, sub} from "./decimal";
 import InputNumber from "rc-input-number";
 import {StepButton, ValueWithStepperWrapper} from "./step-button";
@@ -10,6 +9,8 @@ import {UnitPrimitive} from "../unit/primitive";
 import {Stack} from "./stack";
 import {hiddenCss, inputStyle, textInlineStyle} from "./styles";
 import {invalidInputStyle} from "./edit-unit-styles";
+import {NumberInputProps, Value} from "./types";
+import {formatValue, getStep, parseValue} from "./utils";
 
 const invalidCss = css``;
 
@@ -36,35 +37,25 @@ const inputCss = css`
   }
 `;
 
-export const NumberInlineInputWithAutosize = ({
+type Props = NumberInputProps & {
+  width?: number;
+  invalid?: boolean;
+};
+
+export const NumberInputInlineWithAutosize = ({
   value,
   numberFormat,
   numberPrecision,
-  format = _.identity,
-  onFocus,
-  onBlur,
-  onChange,
-  onKeyDown,
+  format = identity,
   autoFocus,
   placeholder,
   invalid,
+  onFocus,
+  onBlur,
+  onChange = () => {},
+  onKeyDown,
   ...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;
-}) => {
+}: Props) => {
   const [isEditing, setIsEditing] = useState(false);
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(
     (e) => {
@@ -89,30 +80,18 @@ export const NumberInlineInputWithAutosize = ({
   );
 
   const handleChange = useCallback(
-    (value: string | number | null) => {
-      if (onChange) {
-        onChange(parseValue(value, numberFormat, numberPrecision));
-      }
+    (value: Value) => {
+      onChange(parseValue(value, numberFormat, numberPrecision));
     },
     [onChange, numberFormat, numberPrecision]
   );
 
   const handleStep = useCallback(
-    (
-      newValue: string | number,
-      {
-        type,
-      }: {
-        type: "up" | "down";
-      }
-    ) => {
+    (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));
-      }
+      const nextValue = type === "up" ? add(value, step) : sub(value, step);
+      onChange(nextValue);
     },
     [numberFormat, onChange, value]
   );

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

@@ -0,0 +1,118 @@
+import {textStyles, themeVars} from "../../src/design-system";
+import {css} from "@linaria/core";
+import {ComponentProps, forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from "react";
+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";
+import {formatValue, getStep, parseValue} from "./utils";
+import {NumberInputProps} from "./types";
+
+const invalidCss = css``;
+
+const inputContainerCss = css`
+  position: relative;
+  input {
+    background-color: ${themeVars.transparent};
+    ${textStyles.regular}
+    outline: none;
+    width: 100%;
+    border: none;
+    text-align: right;
+    &::placeholder {
+      color: ${themeVars.inputPlaceholderTextColor};
+    }
+  }
+
+  &.${invalidCss} {
+    ${invalidInputStyle}
+  }
+`;
+
+type Props = ComponentProps<typeof InputNumber> &
+  NumberInputProps & {
+    valueWrapperClassName?: string;
+    invalid?: boolean;
+  };
+
+export const NumberInputInline = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      value,
+      numberFormat,
+      numberPrecision,
+      format,
+      autoFocus,
+      placeholder,
+      valueWrapperClassName,
+      invalid,
+      onFocus,
+      onBlur,
+      onChange = () => {},
+      onKeyDown,
+      ...rest
+    },
+    ref
+  ) => {
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const [inputContainerRef, setInputContainerRef] = useState<HTMLDivElement | null>(null);
+
+    useImperativeHandle(ref, () => inputRef.current!, []);
+
+    const handleBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        if (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);
+        const nextValue = type === "up" ? add(value, step) : sub(value, step);
+        onChange(nextValue);
+      },
+      [numberFormat, onChange, value]
+    );
+
+    const formattedValue = useMemo(() => {
+      const isEditing = true;
+      return formatValue(value, isEditing, numberFormat, format);
+    }, [value, numberFormat, format]);
+
+    return (
+      <div ref={setInputContainerRef} className={cx(valueWrapperClassName, inputContainerCss, invalid && invalidCss)}>
+        <InputNumber
+          autoFocus={autoFocus}
+          ref={inputRef}
+          value={formattedValue}
+          type="text"
+          placeholder={placeholder}
+          upHandler={<StepButton type={"up"} />}
+          downHandler={<StepButton type={"down"} />}
+          onFocus={onFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onKeyDown={onKeyDown}
+          onStep={handleStep}
+          onClick={stopPropagation}
+          {...rest}
+        />
+      </div>
+    );
+  }
+);

package/src/number-input/{index.test.js → number-input.test.tsx}

@@ -1,17 +1,14 @@
 import {useState} from "react";
-import {ThemeProvider} from "../theme-provider";
-import {InputNumber} from "./index";
+import {NumberInput} from "./number-input";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import {TooltipProvider} from "../tooltip";
 
-describe("InputNumber", () => {
-  const theme = {opacity: {}};
-
+describe("number input", () => {
   const getArrowUp = () => screen.getByRole("button", {name: "Increase Value"});
   const getArrowDown = () => screen.getByRole("button", {name: "Decrease Value"});
 
-  const makePercentFormatter = (precision) =>
+  const makePercentFormatter = (precision: number) =>
     jest.fn().mockImplementation((value) => {
       const formatter = new Intl.NumberFormat("en-US", {
         style: "percent",
@@ -26,17 +23,17 @@ describe("InputNumber", () => {
     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>
+        <TooltipProvider>
+          <NumberInput
+            data-testid="test-input"
+            value={0.01}
+            numberFormat={"Percent"}
+            numberPrecision={2}
+            decimalSeparator="."
+            format={formatPercent}
+            onChange={() => {}}
+          />
+        </TooltipProvider>
       );
 
       expect(screen.getByTestId("test-input")).toHaveDisplayValue("1.00%");
@@ -45,20 +42,19 @@ describe("InputNumber", () => {
     it("editing without percent format, applies percent format after blur", async () => {
       const formatPercent = makePercentFormatter(2);
       const Demo = () => {
-        const [value, setValue] = useState(null);
+        const [value, setValue] = useState<string | null>(null);
         return (
-          <ThemeProvider theme={theme}>
-            <TooltipProvider>
-              <InputNumber
-                data-testid="test-input"
-                value={value}
-                numberFormat={"Percent"}
-                numberPrecision={2}
-                format={formatPercent}
-                onChange={setValue}
-              />
-            </TooltipProvider>
-          </ThemeProvider>
+          <TooltipProvider>
+            <NumberInput
+              data-testid="test-input"
+              value={value}
+              numberFormat={"Percent"}
+              numberPrecision={2}
+              decimalSeparator="."
+              format={formatPercent}
+              onChange={setValue}
+            />
+          </TooltipProvider>
         );
       };
       render(<Demo />);
@@ -75,20 +71,19 @@ describe("InputNumber", () => {
     it("arrows increase/decrease by one percent", async () => {
       const formatPercent = makePercentFormatter(2);
       const Demo = () => {
-        const [value, setValue] = useState(0.05);
+        const [value, setValue] = useState<string | number | null>(0.05);
         return (
-          <ThemeProvider theme={theme}>
-            <TooltipProvider>
-              <InputNumber
-                data-testid="test-input"
-                value={value}
-                numberFormat={"Percent"}
-                numberPrecision={2}
-                format={formatPercent}
-                onChange={setValue}
-              />
-            </TooltipProvider>
-          </ThemeProvider>
+          <TooltipProvider>
+            <NumberInput
+              data-testid="test-input"
+              value={value}
+              numberFormat={"Percent"}
+              numberPrecision={2}
+              decimalSeparator="."
+              format={formatPercent}
+              onChange={setValue}
+            />
+          </TooltipProvider>
         );
       };
 

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

@@ -1,133 +1,75 @@
-import {textStyles, themeVars} from "../../src/design-system";
-import {css} from "@linaria/core";
-import {ComponentProps, forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from "react";
-import {formatValue, getStep, parseValue} from "./index";
-import _ from "lodash";
+import {useCallback, useMemo, useState} from "react";
+import {AntInputNumber} from "../antd/input-number";
 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";
+import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
+import {NumberInputProps} from "./types";
+import {formatValue, getStep, isEmpty, parseValue} from "./utils";
 
-const invalidCss = css``;
+export const NumberInput = ({
+  className,
+  value,
+  numberFormat,
+  numberPrecision,
+  format,
+  onFocus,
+  onBlur,
+  onChange = () => {},
+  ...rest
+}: NumberInputProps) => {
+  const [isEditing, setIsEditing] = useState(false);
 
-const inputContainerCss = css`
-  position: relative;
-  input {
-    background-color: ${themeVars.transparent};
-    ${textStyles.regular}
-    outline: none;
-    width: 100%;
-    border: none;
-    text-align: right;
-    &::placeholder {
-      color: ${themeVars.inputPlaceholderTextColor};
-    }
-  }
+  const handleFocus = composeEventHandlers(onFocus, () => setIsEditing(true));
+  const handleBlur = composeEventHandlers(onBlur, () => setIsEditing(false));
 
-  &.${invalidCss} {
-    ${invalidInputStyle}
-  }
-`;
-
-type NumberFormat = "Number" | "Money" | "Percent";
-
-type Props = ComponentProps<typeof InputNumber> & {
-  value: string | number | null;
-  numberFormat: NumberFormat;
-  format?: (value: string | number) => string;
-  numberPrecision: number;
-  placeholder: string;
-  autoFocus: boolean;
-  valueWrapperClassName?: string;
-  decimalSeparator?: string;
-  invalid?: boolean;
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  onChange: (value: string | number | null) => void;
-};
+  const handleChange = useCallback(
+    (value: string | number | null) => {
+      const nextValue = parseValue(value, numberFormat, numberPrecision);
+      onChange(nextValue);
+    },
+    [onChange, numberFormat, numberPrecision]
+  );
 
-export const NumberInlineInput = forwardRef<HTMLInputElement, Props>(
-  (
-    {
-      value,
-      numberFormat,
-      numberPrecision,
-      format = _.identity,
-      onFocus,
-      onBlur,
-      onChange,
-      onKeyDown,
-      autoFocus,
-      placeholder,
-      valueWrapperClassName,
-      invalid,
-      ...rest
+  const handleStep = useCallback(
+    (newValue: string | number, {type}: {type: "up" | "down"}) => {
+      const step = getStep(numberFormat);
+      const nextValue = type === "up" ? add(value, step) : sub(value, step);
+      onChange(nextValue);
     },
-    ref
-  ) => {
-    const inputRef = useRef<HTMLInputElement | null>(null);
-    const [inputContainerRef, setInputContainerRef] = useState<HTMLDivElement | null>(null);
+    [value, numberFormat, onChange]
+  );
 
-    useImperativeHandle(ref, () => inputRef.current!, []);
+  const formattedValue = useMemo(() => {
+    return formatValue(value, isEditing, numberFormat, format);
+  }, [value, isEditing, numberFormat, format]);
 
-    const handleBlur = useCallback(
-      (e: React.FocusEvent<HTMLInputElement>) => {
-        if (e.relatedTarget && inputContainerRef && !inputContainerRef.contains(e.relatedTarget)) {
-          onBlur?.(e);
-        }
-      },
-      [inputContainerRef, onBlur]
-    );
+  return (
+    <AntInputNumber
+      className={className}
+      value={formattedValue}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onChange={handleChange}
+      onStep={handleStep}
+      {...rest}
+    />
+  );
+};
+
+type FieldProp = "value" | "onFocus" | "onBlur" | "onChange";
 
-    const handleChange = useCallback(
-      (value: string | number | null) => {
-        if (onChange) {
-          onChange(parseValue(value, numberFormat, numberPrecision));
-        }
-      },
-      [onChange, numberFormat, numberPrecision]
-    );
+type NumberInputFieldProps = {
+  input: Pick<NumberInputProps, FieldProp> & {
+    onBlur: (value: string | number | null) => void;
+  };
+} & Omit<NumberInputProps, FieldProp>;
 
-    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]
-    );
+export const NumberInputField = (props: NumberInputFieldProps) => {
+  const {input, ...rest} = props;
+  const {value, onBlur, ...inputRest} = input;
 
-    const formattedValue = useMemo(() => {
-      const isEditing = true;
-      return formatValue(value, isEditing, numberFormat, format);
-    }, [value, numberFormat, format]);
+  const handleBlur = useCallback(() => {
+    onBlur(isEmpty(value) ? null : value);
+  }, [onBlur, value]);
 
-    return (
-      <div ref={setInputContainerRef} className={cx(valueWrapperClassName, inputContainerCss, invalid && invalidCss)}>
-        <InputNumber
-          autoFocus={autoFocus}
-          ref={inputRef}
-          value={formattedValue}
-          type="text"
-          placeholder={placeholder}
-          upHandler={<StepButton type={"up"} />}
-          downHandler={<StepButton type={"down"} />}
-          onFocus={onFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={onKeyDown}
-          onStep={handleStep}
-          onClick={stopPropagation}
-          {...rest}
-        />
-      </div>
-    );
-  }
-);
+  return <NumberInput value={value} onBlur={handleBlur} {...inputRest} {...rest} />;
+};

package/src/number-input/types.ts

@@ -0,0 +1,19 @@
+export type NumberFormat = "Number" | "Money" | "Percent";
+
+export type Value = number | string | null | undefined;
+
+export type NumberInputProps = {
+  value: Value;
+  numberFormat: NumberFormat;
+  numberPrecision: number;
+  decimalSeparator: string;
+  format?: (value: Value) => string;
+  controls?: boolean;
+  onChange?: (value: string | null) => void;
+} & Pick<
+  React.ComponentProps<"input">,
+  "className" | "autoFocus" | "placeholder" | "style" | "disabled" | "onFocus" | "onBlur" | "onKeyDown"
+> & {
+    // TODO: coming from and, get rid of it after migrating from ant
+    wrapClassName?: string;
+  };

package/src/number-input/utils.ts

@@ -0,0 +1,61 @@
+import {NumberFormat, Value} from "./types";
+import {divideByHundred, multiplyByHundred} from "./decimal";
+
+export const isEmpty = (value: Value) => {
+  return value === null || value === undefined || value === "";
+};
+
+export const getStep = (numberFormat: NumberFormat) => {
+  return numberFormat === "Percent" ? 0.01 : 1;
+};
+
+export const formatValue = (
+  value: Value,
+  isEditing: boolean,
+  numberFormat: NumberFormat,
+  format?: (value: Value) => string
+) => {
+  if (isEmpty(value)) {
+    return value;
+  }
+
+  const externalize = (value: Value): Value => {
+    if (isEditing) {
+      return numberFormat === "Percent" ? multiplyByHundred(value) : value;
+    }
+    return value;
+  };
+
+  const maybeFormat = (value: Value) => {
+    if (isEditing || !format) {
+      return value;
+    }
+    return format(value);
+  };
+
+  return maybeFormat(externalize(value));
+};
+
+export const parseValue = (value: Value, numberFormat: NumberFormat, numberPrecision: number): string | null => {
+  if (isEmpty(value)) {
+    return null;
+  }
+
+  const parse = (value: Value) => {
+    const parsed = numberPrecision === 0 ? parseInt(value as string) : parseFloat(value as string);
+    return isNaN(parsed) ? null : parsed;
+  };
+
+  const internalizeNumber = (value: number | null) => {
+    if (value === null) {
+      return value;
+    }
+    return numberFormat === "Percent" ? divideByHundred(value) : value;
+  };
+
+  const toString = (value: number | null) => {
+    return value === null ? value : String(value);
+  };
+
+  return toString(internalizeNumber(parse(value)));
+};

package/src/online-users.tsx

@@ -1,5 +1,5 @@
 import {css, cx} from "@linaria/core";
-import _ from "lodash";
+import take from "lodash/take";
 import {useEffect, useRef, useState} from "react";
 import {AvatarImage} from "./avatar";
 import {getObjectColorMemoized, space, themeVars, tooltipDelay} from "./design-system";
@@ -148,7 +148,7 @@ export function OnlineUsers({
           </Tooltip>
         </div>
 
-        {_.take(users, users.length === maxVisibleUsers ? maxVisibleUsers : maxVisibleUsers - 1).map(
+        {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";