chili-ui 0.0.1

package/leda/components/NumericRange/helpers.ts

@@ -0,0 +1,38 @@
+/* eslint-disable react/prop-types */
+
+import { isString, isBoolean } from 'lodash';
+import type { NumericRangeProps } from './types';
+
+export const getName = (name?: string | [string | undefined, string | undefined]): [string | undefined, string | undefined] => {
+  if (isString(name)) return [`${name}-from`, `${name}-to`];
+
+  if (Array.isArray(name) && name.length === 2) return name;
+
+  return [undefined, undefined];
+};
+
+export const getPlaceholder = (placeholder?: string | [string | undefined, string | undefined]): [string | undefined, string | undefined] => {
+  if (Array.isArray(placeholder)) return placeholder;
+  if (isString(placeholder)) return [placeholder, placeholder];
+  return [undefined, undefined];
+};
+
+export const getRequired = (isRequired?: boolean | [boolean, boolean]): [boolean, boolean] => {
+  if (Array.isArray(isRequired)) return isRequired;
+  if (isBoolean(isRequired)) return [isRequired, isRequired];
+  return [false, false];
+};
+
+export const getDisabled = (isDisabled?: boolean | [boolean, boolean]): [boolean, boolean] => {
+  if (Array.isArray(isDisabled)) return isDisabled;
+  if (isBoolean(isDisabled)) return [isDisabled, isDisabled];
+  return [false, false];
+};
+
+export const getControlledValue = (value: NumericRangeProps['value']): [number | null, number | null] | undefined => {
+  if (value === undefined) return undefined;
+
+  if (value === null) return [null, null];
+
+  return value;
+};

package/leda/components/NumericRange/index.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import * as React from 'react';
+import { isNil } from 'lodash';
+import { COMPONENTS_NAMESPACES } from '../../constants';
+import {
+  getClassNames, useElement, useProps, useTheme, useValue,
+} from '../../utils';
+import { Div } from '../Div';
+import { NumericTextBox } from '../NumericTextBox';
+import {
+  createNumericChangeHandler,
+} from './handlers';
+import {
+  getPlaceholder, getRequired, getDisabled, getName, getControlledValue,
+} from './helpers';
+import type { NumericRangeProps, NumericRangeState } from './types';
+
+export const NumericRange = React.forwardRef((props: NumericRangeProps, ref?: React.Ref<HTMLElement>): React.ReactElement => {
+  const {
+    className,
+    form,
+    format,
+    inputsRender,
+    isDisabled,
+    isRequired: isRequiredProp,
+    isValid,
+    max,
+    min,
+    name: nameProp,
+    onBlur,
+    onChange,
+    onFocus,
+    placeholder: placeholderProp,
+    shouldTrimTrailingZeros,
+    step,
+    theme: themeProp,
+    thousandsSeparator,
+    value: valueProp,
+    wrapperRender,
+    ...restProps
+  } = useProps(props);
+  // returns value from props or from state, setUncontrolledState works only in uncontrolled mode
+  const [value, setUncontrolledValue] = useValue<NumericRangeState['value']>(getControlledValue(valueProp), [null, null]);
+
+  const theme = useTheme(themeProp, COMPONENTS_NAMESPACES.numericRange);
+
+  const placeholder = getPlaceholder(placeholderProp);
+
+  const required = getRequired(isRequiredProp);
+
+  const disabled = getDisabled(isDisabled);
+
+  const name = getName(nameProp);
+
+  const commonProps = {
+    form,
+    format,
+    step,
+    onBlur,
+    onFocus,
+    isValid,
+    shouldTrimTrailingZeros,
+    thousandsSeparator,
+  };
+
+  const handleChange = createNumericChangeHandler({
+    value,
+    setValue: setUncontrolledValue,
+    name: nameProp,
+    onChange,
+    format,
+    thousandsSeparator,
+  });
+
+  const wrapperClassNames = getClassNames(
+    theme.wrapper,
+    className,
+  );
+
+  const Wrapper = useElement(
+    'Wrapper',
+    Div,
+    wrapperRender,
+    props,
+    { value },
+  );
+
+  return (
+    <Wrapper
+      {...restProps}
+      className={wrapperClassNames}
+      ref={ref}
+    >
+      <NumericTextBox
+        inputRender={Array.isArray(inputsRender) ? inputsRender[0] : undefined}
+        isDisabled={disabled[0]}
+        isRequired={required[0]}
+        max={isNil(value[1]) ? max : value[1]}
+        min={min}
+        name={name[0]}
+        onChange={handleChange('from')}
+        placeholder={placeholder[0]}
+        theme={theme.to}
+        value={value[0]}
+        {...commonProps}
+      />
+      <Div className={theme.delimiter}>&mdash;</Div>
+      <NumericTextBox
+        inputRender={Array.isArray(inputsRender) ? inputsRender[1] : undefined}
+        isDisabled={disabled[1]}
+        isRequired={required[1]}
+        max={max}
+        min={isNil(value[0]) ? min : value[0]}
+        name={name[1]}
+        onChange={handleChange('to')}
+        placeholder={placeholder[1]}
+        theme={theme.from}
+        value={value[1]}
+        {...commonProps}
+      />
+    </Wrapper>
+  );
+}) as React.FC<NumericRangeProps>;
+
+NumericRange.displayName = 'NumericRange';

package/leda/components/NumericRange/theme.ts

@@ -0,0 +1,10 @@
+import { defaultNumericTextBoxTheme } from '../NumericTextBox/theme';
+
+/* eslint-disable key-spacing */
+export const defaultNumericRangeTheme = {
+  delimiter: 'ld-numeric-range-delimiter',
+  from:      defaultNumericTextBoxTheme,
+  to:        defaultNumericTextBoxTheme,
+  wrapper:  'ld-numeric-range-wrapper',
+};
+/* eslint-enable key-spacing */

package/leda/components/NumericRange/types.ts

@@ -0,0 +1,70 @@
+import type * as React from 'react';
+import type { CustomRender } from '../../commonTypes';
+import type { COMPONENTS_NAMESPACES } from '../../constants';
+import type { PartialGlobalDefaultTheme } from '../../utils/useTheme';
+import type { BlurEvent, FocusEvent, NumericTextBoxProps } from '../NumericTextBox/types';
+import type { DivProps } from '../Div';
+
+export interface LabelProps {
+  className?: string,
+  children?: React.ReactNode,
+}
+
+export interface NumericRangeState {
+  value: [number | null, number | null],
+}
+
+export interface RangeChangeEvent {
+  component: {
+    name?: string | [string | undefined, string | undefined],
+    value: [number | null, number | null],
+    formattedValue: [string, string],
+  },
+}
+
+export interface NumericRangeProps {
+  /** CSS class names */
+  className?: string,
+  /** Format, see formatting.md */
+  format?: string,
+  /** Form name, is required for validation */
+  form?: string,
+  /** Input fields customizators, [render, render] */
+  inputsRender?: [NumericTextBoxProps['inputRender'] | null, NumericTextBoxProps['inputRender'] | null],
+  /** Disabled state */
+  isDisabled?: boolean | [boolean, boolean],
+  /** Shows if the field is required  */
+  isRequired?: boolean | [boolean, boolean],
+  /** Control valid state */
+  isValid?: boolean,
+  /** Max range value */
+  max?: number,
+  /** Min range value */
+  min?: number,
+  /** Numerics names */
+  name?: string | [string | undefined, string | undefined],
+  /** Change handler */
+  onChange?: (event: RangeChangeEvent) => void,
+  /** Blur handler, comes from NumericTextBox unchanged */
+  onBlur?: (event: BlurEvent) => void,
+  /** Focus handler, comes from NumericTextBox unchanged */
+  onFocus?: (event: FocusEvent) => void,
+  /** Placeholders */
+  placeholder?: [string | undefined, string | undefined] | string,
+  /** Ref */
+  ref?: React.Ref<HTMLElement>,
+  /** To trim or not to trim */
+  shouldTrimTrailingZeros?: boolean,
+  /** How much the value is increased/decreased on mouse events */
+  step?: number,
+  /** A space by default: 1 000 000.00 */
+  thousandsSeparator?: string,
+  /** Theme */
+  theme?: PartialGlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.numericRange],
+  /** Values */
+  value?: [number | null, number | null] | null,
+  /** Wrapper customizator */
+  wrapperRender?: CustomRender<NumericRangeProps, NumericRangeState, DivProps>,
+  /** _css-class-names */
+  [x: string]: unknown,
+}

package/leda/components/NumericTextBox/NumericTextBox.test.tsx

@@ -0,0 +1,467 @@
+import React from 'react';
+import {
+  fireEvent, render, screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  NumericTextBox,
+} from './index';
+
+describe('NumericTextBox SNAPSHOTS', () => {
+  it('should render', () => {
+    const wrapper = render((
+      <NumericTextBox />
+    ));
+
+    expect(wrapper.container).toMatchSnapshot();
+  });
+
+  describe('controllable mode', () => {
+    it('should render format', () => {
+      const wrapper = render((
+        <NumericTextBox format="#,## %" value={0.235813} />
+      ));
+
+      expect(screen.getByRole('textbox')).toHaveValue('0,24 %');
+
+      expect(wrapper.container).toMatchSnapshot();
+
+      wrapper.rerender((
+        <NumericTextBox format="#,#### ₽" value={0.235813} />
+      ));
+
+      // todo fix precision
+      expect(screen.getByRole('textbox')).toHaveValue('0,2359 ₽');
+
+      expect(wrapper.container).toMatchSnapshot();
+    });
+
+    it('should render min', () => {
+      // todo: починить снапшоты, они просто зависают
+      const wrapper = render((
+        <NumericTextBox min={-2} />
+      ));
+
+      screen.getByRole('textbox').focus();
+
+      Array(9).fill(0).forEach(() => {
+        fireEvent.keyDown(screen.getByRole('textbox'), {
+          key: 'ArrowDown',
+        });
+      });
+
+      screen.getByRole('textbox').blur();
+
+      expect(screen.getByRole('textbox')).toHaveValue('-2');
+
+      expect(wrapper.container).toMatchSnapshot();
+
+      wrapper.rerender((
+        <NumericTextBox format="#,#" min={-6.2} />
+      ));
+
+      screen.getByRole('textbox').focus();
+
+      Array(9).fill(0).forEach(() => {
+        fireEvent.keyDown(screen.getByRole('textbox'), {
+          key: 'ArrowDown',
+        });
+      });
+
+      screen.getByRole('textbox').blur();
+
+      expect(screen.getByRole('textbox')).toHaveValue('-6,2');
+
+      expect(wrapper.container).toMatchSnapshot();
+    });
+
+    it('should render max', () => {
+      // todo: починить снапшоты, они просто зависают
+      const wrapper = render((
+        <NumericTextBox format="#,#" max={7.3} />
+      ));
+
+      screen.getByRole('textbox').focus();
+
+      Array(9).fill(0).forEach(() => {
+        fireEvent.keyDown(screen.getByRole('textbox'), {
+          key: 'ArrowUp',
+        });
+      });
+
+      screen.getByRole('textbox').blur();
+
+      expect(screen.getByRole('textbox')).toHaveValue('7,3');
+
+      expect(wrapper.container).toMatchSnapshot();
+
+      wrapper.rerender((
+        <NumericTextBox format="#,#" max={10.4} />
+      ));
+
+      screen.getByRole('textbox').focus();
+
+      Array(9).fill(0).forEach(() => {
+        fireEvent.keyDown(screen.getByRole('textbox'), {
+          key: 'ArrowUp',
+        });
+      });
+
+      screen.getByRole('textbox').blur();
+
+      expect(screen.getByRole('textbox')).toHaveValue('10,4');
+    });
+
+    it('should render step', () => {
+      // todo: починить снапшоты, они просто зависают
+      const wrapper = render((
+        <NumericTextBox min={0} step={2} />
+      ));
+
+      screen.getByRole('textbox').focus();
+
+      fireEvent.keyDown(screen.getByRole('textbox'), {
+        key: 'ArrowUp',
+      });
+
+      screen.getByRole('textbox').blur();
+
+      expect(screen.getByRole('textbox')).toHaveValue('2');
+
+      expect(wrapper.container).toMatchSnapshot();
+
+      wrapper.rerender((
+        <NumericTextBox min={0} step={0.1} format="#,#" />
+      ));
+
+      screen.getByRole('textbox').focus();
+
+      fireEvent.keyDown(screen.getByRole('textbox'), {
+        key: 'ArrowDown',
+      });
+
+      screen.getByRole('textbox').blur();
+
+      expect(screen.getByRole('textbox')).toHaveValue('1,9');
+
+      expect(wrapper.container).toMatchSnapshot();
+    });
+
+    it('should render value', () => {
+      const wrapper = render((
+        <NumericTextBox format="#,## %" value={0.235813} />
+      ));
+
+      expect(screen.getByRole('textbox')).toHaveValue('0,24 %');
+
+      expect(wrapper.container).toMatchSnapshot();
+
+      wrapper.rerender((
+        <NumericTextBox format="#,## %" value={0.687421} />
+      ));
+
+      expect(screen.getByRole('textbox')).toHaveValue('0,69 %');
+
+      expect(wrapper.container).toMatchSnapshot();
+    });
+  });
+
+  describe('different component states', () => {
+    it('should render placeholder', () => {
+      const placeholder = 'placeholder';
+
+      const wrapper = render((
+        <NumericTextBox placeholder={placeholder} />
+      ));
+
+      expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', placeholder);
+
+      expect(wrapper.container).toMatchSnapshot();
+    });
+  });
+});
+
+describe('NumericTextBox HANDLERS', () => {
+  it('should trigger onBlur', () => {
+    const handleBlur = jest.fn();
+
+    render((
+      <NumericTextBox onBlur={handleBlur} />
+    ));
+
+    screen.getByRole('textbox').focus();
+    screen.getByRole('textbox').blur();
+
+    expect(handleBlur).toHaveBeenCalled();
+  });
+
+  it('should trigger onChange', () => {
+    const handleChange = jest.fn();
+
+    render((
+      <NumericTextBox onChange={handleChange} />
+    ));
+
+    userEvent.type(screen.getByRole('textbox'), '25');
+
+    expect(handleChange).toHaveBeenCalled();
+
+    expect(screen.getByRole('textbox')).toHaveValue('25');
+  });
+
+  it('should trigger onFocus', () => {
+    const handleFocus = jest.fn();
+
+    render((
+      <NumericTextBox onFocus={handleFocus} />
+    ));
+
+    screen.getByRole('textbox').focus();
+
+    expect(handleFocus).toHaveBeenCalled();
+  });
+
+  it('should have correct event format in onChange', () => {
+    const handleChange = jest.fn();
+
+    render((
+      <NumericTextBox name="test" onChange={handleChange} />
+    ));
+
+    userEvent.type(screen.getByRole('textbox'), '25');
+
+    expect(handleChange).toHaveBeenCalled();
+
+    const [[changeEvent]] = handleChange.mock.calls;
+
+    expect(changeEvent.target.name).toEqual('test');
+    expect(changeEvent.target.value).toEqual('25');
+  });
+
+  it('should have correct event format in onBlur', () => {
+    const handleBlur = jest.fn();
+
+    render((
+      <NumericTextBox value={25} name="test" onBlur={handleBlur} />
+    ));
+
+    screen.getByRole('textbox').focus();
+    screen.getByRole('textbox').blur();
+
+    expect(handleBlur).toHaveBeenCalled();
+
+    const [[blurEvent]] = handleBlur.mock.calls;
+
+    expect(blurEvent.target.name).toEqual('test');
+    expect(blurEvent.target.value).toEqual('25');
+  });
+
+  describe('different ways to change value', () => {
+    it('should change value by clicking upper spinner', () => {
+      render((
+        <NumericTextBox defaultValue={0} />
+      ));
+
+      expect(screen.getByRole('textbox')).toHaveValue('0');
+
+      const element = document.querySelector('span.numeric-text-box-arrow-up');
+
+      if (element) {
+        userEvent.click(element);
+      }
+
+      expect(screen.getByRole('textbox')).toHaveValue('1');
+    });
+
+    it('should change value by clicking lower spinner', () => {
+      render((
+        <NumericTextBox defaultValue={0} />
+      ));
+
+      expect(screen.getByRole('textbox')).toHaveValue('0');
+
+      const element = document.querySelector('span.numeric-text-box-arrow-down');
+
+      if (element) {
+        userEvent.click(element);
+      }
+
+      expect(screen.getByRole('textbox')).toHaveValue('-1');
+    });
+
+    it('should change value by input numbers', () => {
+      render((
+        <NumericTextBox defaultValue={0} />
+      ));
+
+      expect(screen.getByRole('textbox')).toHaveValue('0');
+
+      userEvent.type(screen.getByRole('textbox'), '25');
+
+      screen.getByRole('textbox').click();
+
+      expect(screen.getByRole('textbox')).toHaveValue('25');
+    });
+  });
+
+  it('should round value according to current format', () => {
+    render((
+      <NumericTextBox format="#,## %" value={0.235813} />
+    ));
+
+    expect(screen.getByRole('textbox')).toHaveValue('0,24 %');
+  });
+
+  it('should change format onFocus', () => {
+    render((
+      <NumericTextBox format="#,## %" value={0.235813} />
+    ));
+
+    expect(screen.getByRole('textbox')).toHaveValue('0,24 %');
+
+    screen.getByRole('textbox').focus();
+
+    expect(screen.getByRole('textbox')).toHaveValue('0,24');
+  });
+
+  it('should change format onBlur', () => {
+    render((
+      <NumericTextBox format="#,## %" value={0.235813} />
+    ));
+
+    expect(screen.getByRole('textbox')).toHaveValue('0,24 %');
+
+    screen.getByRole('textbox').focus();
+
+    expect(screen.getByRole('textbox')).toHaveValue('0,24');
+
+    screen.getByRole('textbox').blur();
+
+    expect(screen.getByRole('textbox')).toHaveValue('0,24 %');
+  });
+});
+
+describe('NumericTextBox ATTRIBUTES', () => {
+  describe('format', () => {
+    it('should have number format', () => {
+      render((
+        <NumericTextBox format="#,##" value={0.235813} />
+      ));
+
+      expect(screen.getByRole('textbox')).toHaveValue('0,24');
+    });
+
+    it('should have currency format', () => {
+      render((
+        <NumericTextBox format="#,## ₽" value={0.235813} />
+      ));
+
+      expect(screen.getByRole('textbox')).toHaveValue('0,24 ₽');
+    });
+
+    it('should have percent format', () => {
+      render((
+        <NumericTextBox format="#,## %" value={0.235813} />
+      ));
+
+      expect(screen.getByRole('textbox')).toHaveValue('0,24 %');
+    });
+
+    it('should have custom format', () => {
+      render((
+        <NumericTextBox format="#,####### tests" value={1080.235813} />
+      ));
+
+      expect(screen.getByRole('textbox')).toHaveValue('1 080,2358130 tests');
+    });
+  });
+});
+
+describe('NumericTextBox VALIDATION', () => {
+  it('should be invalid if value passes validation and vice versa', () => {
+    const handleBlur = jest.fn();
+
+    const validator = (value: string): boolean => value.toString().length >= 4;
+
+    render((
+      <NumericTextBox isRequired form="test" name="test" onBlur={handleBlur} validator={validator} invalidMessage="message" />
+    ));
+
+    screen.getByRole('textbox').focus();
+
+    userEvent.type(screen.getByRole('textbox'), '25');
+
+    expect(screen.getByRole('textbox')).toHaveValue('25');
+
+    screen.getByRole('textbox').blur();
+
+    expect(handleBlur).toHaveBeenCalledTimes(1);
+
+    const [[firstEvent]] = handleBlur.mock.calls;
+
+    expect(firstEvent.target.name).toEqual('test');
+    expect(firstEvent.target.value).toEqual('25');
+
+    expect(firstEvent.component.name).toEqual('test');
+    expect(firstEvent.component.value).toEqual(25);
+    expect(firstEvent.component.formattedValue).toEqual('25');
+    expect(firstEvent.component.isValid).toBeFalsy();
+
+    expect(screen.getByRole('textbox')).toBeInvalid();
+
+    expect(document.querySelector('span.invalid-message-item')).toHaveTextContent('message');
+
+    handleBlur.mockReset();
+
+    screen.getByRole('textbox').focus();
+
+    userEvent.type(screen.getByRole('textbox'), '2552');
+
+    expect(screen.getByRole('textbox')).toHaveValue('2552');
+
+    screen.getByRole('textbox').blur();
+
+    expect(screen.getByRole('textbox')).toHaveValue('2 552');
+
+    expect(handleBlur).toHaveBeenCalledTimes(1);
+
+    const [[secondEvent]] = handleBlur.mock.calls;
+
+    expect(secondEvent.target.name).toEqual('test');
+    expect(secondEvent.target.value).toEqual('2 552');
+
+    expect(secondEvent.component.name).toEqual('test');
+    expect(secondEvent.component.value).toEqual(2552);
+    expect(secondEvent.component.formattedValue).toEqual('2 552');
+    expect(secondEvent.component.isValid).toBeTruthy();
+
+    expect(screen.getByRole('textbox')).toBeValid();
+
+    expect(document.querySelector('span.invalid-message-item')).toBeNull();
+  });
+
+  it('should be invalid if component is isRequired, value is empty and onBlur was called', async () => {
+    const handleBlur = jest.fn();
+
+    render((
+      <NumericTextBox isRequired form="test" name="test" onBlur={handleBlur} />
+    ));
+
+    screen.getByRole('textbox').focus();
+    screen.getByRole('textbox').blur();
+
+    const [[event]] = handleBlur.mock.calls;
+
+    expect(event.target.name).toEqual('test');
+    expect(event.target.value).toEqual('');
+
+    expect(event.component.name).toEqual('test');
+    expect(event.component.value).toBeNull();
+    expect(event.component.formattedValue).toEqual('');
+    expect(event.component.isValid).toBeFalsy();
+
+    expect(screen.getByRole('textbox')).toBeInvalid();
+
+    expect(document.querySelector('div.numeric-text-box-input-wrapper')).toHaveClass('danger');
+  });
+});