@redneckz/wildless-cms-uni-blocks 0.10.9 → 0.10.10

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -7,15 +7,19 @@ import { getDisabledButtonClasses } from '../../ui-kit/Button/getDisabledButtonC
 import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
 import { CurrencyInput } from '../../ui-kit/CurrencyInput/CurrencyInput';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { getSanitizedValue } from '../../utils/getSanitizedValue';
+import { style } from '../../utils/style';
 import type { CardTransferContent } from './CardTransferContent';
 
-const AMOUNT_KEY = 'amount';
-const FORM_URL = 'https://www.rshb.ru/p2p/';
 const DEFAULT_TITLE = 'Укажите сумму перевода';
 const DEFAULT_LABEL = 'Сумма перевода';
 const DEFAULT_PLACEHOLDER = '1500';
 
+const FORM_URL = 'https://www.rshb.ru/p2p/';
+const AMOUNT_KEY = 'amount';
+const INITIAL_FORM_STATE = {
+  [AMOUNT_KEY]: 1500,
+};
+
 export interface CardTransferProps extends CardTransferContent, UniBlockProps {}
 
 export const CardTransfer = JSX<CardTransferProps>(
@@ -27,9 +31,10 @@ export const CardTransfer = JSX<CardTransferProps>(
     button,
     ...rest
   }) => {
-    const [value, setValue] = useState<string>('');
-    const handleChange = useCallback((_: string) => setValue(_), []);
-    const isDisabled = !Number(getSanitizedValue(value));
+    const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
+
+    const isDisabled = amount <= 0;
+
     const buttonStyle = isDisabled
       ? getDisabledButtonClasses({ version: button?.version })
       : getRegularButtonClasses({ className: 'text-white', version: button?.version });
@@ -37,21 +42,20 @@ export const CardTransfer = JSX<CardTransferProps>(
     const link = useLink();
 
     return (
-      <BlockWrapper className={`p-default flex flex-col items-center ${className}`} {...rest}>
+      <BlockWrapper className={style('p-default flex flex-col items-center', className)} {...rest}>
         {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
         <form className="w-[468px]" method="POST" action={FORM_URL}>
           <CurrencyInput
             name={AMOUNT_KEY}
-            value={value}
-            onChange={handleChange}
-            valid={value === '' || !isDisabled}
+            valid={!isDisabled}
             placeholder={placeholder}
             label={label}
+            {...field(AMOUNT_KEY, { parse: Number, format: String })}
           />
           {button?.text ? (
             <button
               type="submit"
-              className={`w-full p-4 mt-6 ${buttonStyle} `}
+              className={style('w-full p-4 mt-6', buttonStyle)}
               disabled={isDisabled}
               {...link(button)}
             >

package/mobile/src/components/ContentPage/ContentPage.page.json

@@ -17,7 +17,6 @@
   "jsonLd": "json",
   "date": "2022-04-08",
   "style": ["bg-main-divider"],
-  "likeControl": true,
   "slots": {
     "header": [
       {

package/mobile/src/components/Filtration/Filtration.tsx

@@ -24,7 +24,7 @@ export const Filtration: JSXBlock<FiltrationProps> = JSX<FiltrationProps>(
           </div>
           {resetButton ? (
             <div>
-              <Button className="w-72" onClick={reset} {...resetButton} />
+              <Button className="w-72 ml-3" onClick={reset} {...resetButton} />
             </div>
           ) : null}
         </form>

package/mobile/src/components/Filtration/FiltrationContent.ts

@@ -46,7 +46,6 @@ export type StringArray = {
   };
 };
 
-// TODO: Make customizable to implement arbitrary filtration blocks
 export type FiltrationSchema = {
   /** @title Тип недвижимости */
   propertyType?: StringArray;
@@ -62,13 +61,9 @@ export type FiltrationSchema = {
  * @title Кнопка сброса
  */
 export type ResetButton = {
-  /**
-   * @title Текст кнопки
-   */
+  /** @title Текст кнопки */
   text: string;
-  /**
-   * @title Цвет кнопки
-   */
+  /** @title Цвет кнопки */
   version: ButtonVersion;
 };
 

package/mobile/src/components/Filtration/renderFormItem.tsx

@@ -30,7 +30,7 @@ const renderCheckboxes = (key: string, field: FormFieldRegisterer<any>) => (item
           </Text>
         </div>
       ) : null}
-      <SlideCheckboxGroup items={options} multiple {...field(key)} />
+      <SlideCheckboxGroup items={options} multiple {...field<string, string[] | undefined>(key)} />
     </div>
   );
 };

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -5,7 +5,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 import type { CardItem, InsuranceAmountBlockTab } from './InsuranceAmountBlockContent';
 
 export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTab {
@@ -122,7 +122,7 @@ function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
 function renderValueBlock(title: string, sum: number) {
   return (
     <div className="flex flex-col text-left whitespace-pre">
-      <span className="text-h6">{addSpacesBetweenNumbers(sum)} ₽</span>
+      <span className="text-h6">{toLocalNumberFormat(2)(sum)} ₽</span>
       <span className="text-secondary-text text-l mt-1">{title}</span>
     </div>
   );

package/mobile/src/components/OfficeMap/OfficeMap.tsx

@@ -2,17 +2,17 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
+import { OFFICE_MAP } from './mockOfficeMap';
 import { nearbyOffices } from './nearbyOffices';
 import type { OfficeMapContent, WorkScheduleWeek } from './OfficeMapContent';
 import { renderCurrentDaySchedule, renderDay, renderNearbyOffice } from './renderFunctions';
-import { useOfficeMap } from './useOfficeMap';
 
 export interface OfficeMapProps extends OfficeMapContent, UniBlockProps {}
 export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
   // TODO: useOfficeMap endpoint had use /api/v1/branches. This endpoint now is`t correct/
   // TODO: useOfficeMap has return MOCK OBJECT!
   // TODO: Fix this when endpoint /api/v1/branches (or new endpoint) had returning right data
-  const resultOfficeMap = useOfficeMap('000');
+  const resultOfficeMap = OFFICE_MAP;
   const { name, address, gpsLatitude, gpsLongitude, workSchedule } =
     resultOfficeMap as OfficeMapContent;
   const {

package/mobile/src/components/OfficeMap/useOfficeMap.ts

@@ -12,9 +12,7 @@ export function useOfficeMap(regionCode?: string) {
     fetchOfficeMap,
   );
 
-  console.warn('Hook useOfficeMap RETURNs MOCK object for testing', data);
-
-  return OFFICE_MAP;
+  return data || OFFICE_MAP;
 }
 
 function fetchOfficeMap(url?: string) {

package/mobile/src/components/PictureText/PictureText.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 import { Headline } from '../Headline/Headline';
 import type { PictureTextContent } from './PictureTextContent';
 import { renderBenefit } from './renderBenefit';
@@ -54,7 +54,7 @@ function renderValueBlock(title: string, sum = 0, isAnotherBlock = false) {
   return (
     <div className={`flex justify-between items-center gap-2 w-full whitespace-pre ${widthStyle}`}>
       <span className="text-secondary-text text-l-light">{title}</span>
-      <span className="text-primary-main text-h6">{addSpacesBetweenNumbers(sum)} ₽</span>
+      <span className="text-primary-main text-h6">{toLocalNumberFormat(2)(sum)} ₽</span>
     </div>
   );
 }

package/mobile/src/hooks/useForm.ts

@@ -1,15 +1,21 @@
 import { useCallback, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { ControlProps } from '../ui-kit/ControlProps';
 import type { PreventableEvent } from '../ui-kit/PreventableEvent';
+import { identity } from '../utils/identity';
 
-export interface FieldProps<V> {
-  value?: V;
+export interface FieldProps<V> extends ControlProps<V> {
   isDirty?: boolean;
-  onChange?: (value: V) => void;
 }
 
-export type FormFieldRegisterer<FormState> = <N extends keyof FormState>(
+type Options<In, Out> = {
+  parse?: (_: In) => Out;
+  format?: (_: Out) => In;
+};
+
+export type FormFieldRegisterer<FormState> = <N extends keyof FormState, V = FormState[N]>(
   fieldName: N,
-) => FieldProps<FormState[N]>;
+  options?: Options<V, FormState[N]>,
+) => FieldProps<V extends undefined ? FormState[N] : V>;
 
 export const useForm = <FormState extends Record<string, any>>(
   initialState: FormState,
@@ -33,18 +39,20 @@ export const useForm = <FormState extends Record<string, any>>(
   const handlersMap = useRef<Partial<Record<keyof FormState, (value: any) => void>>>({});
 
   const field: FormFieldRegisterer<FormState> = useCallback(
-    (fieldName) => {
+    (fieldName, options) => {
+      const { parse = identity, format = identity } = options || {};
+
       if (!handlersMap.current) {
         handlersMap.current = {};
       }
 
       handlersMap.current[fieldName] ||= (value) => {
-        setFormState((prev) => ({ ...prev, [fieldName]: value }));
+        setFormState((prev) => ({ ...prev, [fieldName]: parse(value) }));
         setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
       };
 
       return {
-        value: formState[fieldName],
+        value: format(formState[fieldName]) as any,
         isDirty: isDirtyForm || dirtyFieldsMap[fieldName],
         onChange: handlersMap.current[fieldName],
       };

package/mobile/src/hooks/useNormalizedInput.ts

@@ -0,0 +1,33 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { InputProps } from '../ui-kit/Input/InputProps';
+
+interface UseNormalizedInputOptions<V, R> {
+  normalize: (v: V | undefined) => V;
+  format?: (v: V | undefined) => R;
+}
+
+export const useNormalizedInput = <V, P extends InputProps<V>, R = V>(
+  props: P,
+  { normalize, format }: UseNormalizedInputOptions<V, R>,
+) => {
+  const { value, onFocus, onBlur, onChange } = props;
+
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = useCallback((e) => {
+    setIsFocused(true);
+    onFocus && onFocus(e);
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+    onChange && onChange(normalize(value));
+    onBlur && onBlur();
+  }, [onChange, value]);
+
+  return {
+    value: (isFocused || !format ? value : format(value)) as R,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+  };
+};

package/mobile/src/hooks/useSWRResource.ts

@@ -2,10 +2,12 @@ import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import type { Fallback } from '../model/Fallback';
 import { fetchJSONUnsafe } from '../utils/fetchJSON';
 
+const EMPTY_VALUE = {};
+
 export function useSWRResource<Data>(filename: string, fallback: Fallback = {}): Data {
   const { data } = useAsyncData<Data>(`/wcms-resources/${filename}.json`, fetchJSONUnsafe, {
     fallback,
   });
 
-  return data || ({} as Data);
+  return data || (EMPTY_VALUE as Data);
 }

package/mobile/src/services/search/useSearch.ts

@@ -6,6 +6,7 @@ import { useDebouncedEffect } from '../../utils/useDebouncedEffect';
 import { CorpusItem, search, SearchIndex } from './search';
 
 const SEARCH_INDEX_FILENAME = 'search.index.json';
+const DEFAULT_BASE_PATH = ['/'];
 
 export type SearchResult = Array<CorpusItem[]>; // List of pages (CorpusItem) per base path from "basePathList"
 
@@ -21,7 +22,7 @@ export interface SearchInputProps {
 }
 
 export const useSearch = ({
-  basePathList = ['/'],
+  basePathList = DEFAULT_BASE_PATH,
   initialQuery = '',
   wasOpened,
 }: SearchParams): [SearchResult | null, SearchInputProps] => {
@@ -35,7 +36,7 @@ export const useSearch = ({
 
   const key = useMemo(
     () => basePathList.map((_) => (wasOpened ? _ : null)), // Load search index on very first search
-    [wasOpened, ...basePathList],
+    [wasOpened, basePathList],
   );
 
   const { data } = useAsyncData(key, fetchSearchIndex);

package/mobile/src/ui-kit/ControlProps.ts

@@ -1,4 +1,4 @@
 export interface ControlProps<T> {
   value?: T;
-  onChange?: (value: T | undefined) => void;
+  onChange?: (value: T) => void;
 }

package/mobile/src/ui-kit/CurrencyInput/CurrencyInput.tsx

@@ -1,39 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { clamp } from '../../utils/clamp';
-import { Input } from '../Input/Input';
-import { adjustValue, localNumberFormat } from './adjustValue';
-import type { CurrencyInputProps } from './CurrencyInputProps';
-
-export const CurrencyInput = JSX<CurrencyInputProps>(
-  ({ className = '', value = '', onChange, minValue = 0, maxValue = 300000, ...inputProps }) => {
-    const handleChange = useCallback(
-      (inputValue: string) => {
-        const adjustedVal = adjustValue(inputValue);
-        const clampVal = getClampValue(adjustedVal, clamp(Number(adjustedVal), minValue, maxValue));
-        onChange && onChange(clampVal);
-      },
-      [onChange],
-    );
-
-    const handleBlur = useCallback(() => {
-      onChange && onChange(localNumberFormat(value));
-    }, [onChange, value]);
-
-    return (
-      <Input
-        className={className}
-        inputClassName="w-full"
-        value={value}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        {...inputProps}
-      >
-        <span className="text-xl-light absolute right-4 bottom-4">₽</span>
-      </Input>
-    );
-  },
-);
-
-const getClampValue = (val: string, clampVal: number): string =>
-  Number(val) === clampVal ? val : String(clampVal);
+import { NumberInput, NumberInputProps } from '../NumberInput/NumberInput';
+import { Text } from '../Text/Text';
+
+export const CurrencyInput = JSX<NumberInputProps>((props) => (
+  <NumberInput {...props} fractionDigits={2}>
+    <div className="absolute right-4 bottom-4">
+      <Text size="text-xl" font="font-light">
+        ₽
+      </Text>
+    </div>
+  </NumberInput>
+));

package/mobile/src/ui-kit/Input/Input.tsx

@@ -1,21 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { style } from '../../utils/style';
+import { Text } from '../Text/Text';
 import type { InputProps } from './InputProps';
 
 export const Input = JSX<InputProps>(
   ({
+    key,
     className = '',
     inputClassName = '',
     id,
     name,
     type = 'text',
     label,
+    placeholder,
     value = '',
     valid = true,
     children,
     onChange,
-    ...inputProps
+    onFocus,
+    onBlur,
+    pattern,
   }) => {
     const handleChange = useCallback(
       (e: { target?: { value?: string } }) => {
@@ -31,21 +36,33 @@ export const Input = JSX<InputProps>(
 
     return (
       <div className={style('relative', className)}>
-        {label ? <label className="block text-m-light mb-2">{label}</label> : null}
-        <input
-          className={style(
-            'w-full border rounded-md text-primary-text outline-none p-4',
-            paddingStyle,
-            validStyle,
-            inputClassName,
-          )}
-          id={id}
-          name={name || id}
-          type={type}
-          value={value}
-          onInput={handleChange as any}
-          {...inputProps}
-        />
+        <label>
+          {label ? (
+            <div className="mb-2">
+              <Text size="text-m" font="font-light">
+                {label}
+              </Text>
+            </div>
+          ) : null}
+          <input
+            key={key}
+            className={style(
+              'w-full border rounded-md text-primary-text outline-none p-4',
+              paddingStyle,
+              validStyle,
+              inputClassName,
+            )}
+            id={id}
+            name={name || id}
+            placeholder={placeholder}
+            type={type}
+            value={value}
+            onInput={handleChange as any}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            pattern={pattern}
+          />
+        </label>
         {children}
       </div>
     );

package/mobile/src/ui-kit/Input/InputProps.ts

@@ -1,7 +1,8 @@
 import type { LabelProps } from '../../model/HeadlineType';
 import type { InputTypes } from '../../model/InputTypes';
+import type { ControlProps } from '../ControlProps';
 
-export type InputProps = LabelProps & {
+export interface InputProps<V = string> extends ControlProps<V>, LabelProps {
   className?: string;
   inputClassName?: string;
   id?: string;
@@ -9,10 +10,8 @@ export type InputProps = LabelProps & {
   type?: InputTypes;
   placeholder?: string;
   pattern?: string;
-  value?: string;
-  onChange?: (value: string) => void;
-  onInput?: (event: any) => void;
   onFocus?: (event: any) => void;
   onBlur?: () => void;
   valid?: boolean;
-};
+  disabled?: boolean;
+}

package/mobile/src/ui-kit/InputRange/InputRange.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useNormalizedInput } from '../../hooks/useNormalizedInput';
 import { clamp } from '../../utils/clamp';
 import { style } from '../../utils/style';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 import { Text } from '../Text/Text';
 import type { InputRangeProps } from './InputRangeProps';
 import { parseDecimal } from './parseDecimal';
@@ -13,8 +14,8 @@ const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
 const DEFAULT_MIN = 1;
 const DEFAULT_MAX = 100;
 
-export const InputRange = JSX<InputRangeProps>(
-  ({
+export const InputRange = JSX<InputRangeProps>((props) => {
+  const {
     className,
     title,
     items = [],
@@ -25,54 +26,47 @@ export const InputRange = JSX<InputRangeProps>(
     value = list[0] || min,
     disabled = false,
     onChange,
-  }) => {
-    const [isFocused, setFocused] = useState(false);
+  } = props;
 
-    const handleChange = useCallback(
-      (e: { target?: { value?: string } }) => {
-        onChange && onChange(parseDecimal(e.target?.value));
-      },
-      [onChange],
-    );
+  const normalizedProps = useNormalizedInput(props, {
+    normalize: (_: number | undefined = 0) =>
+      list.length ? closestValue(list)(_) : clamp(_, min, max),
+    format: toLocalNumberFormat(),
+  });
 
-    const handleFocus = useCallback(() => {
-      setFocused(true);
-    }, []);
+  const handleChange = useCallback(
+    (e: { target?: { value?: string } }) => {
+      onChange && onChange(parseDecimal(e.target?.value));
+    },
+    [onChange],
+  );
 
-    const handleBlur = useCallback(() => {
-      setFocused(false);
-      onChange && onChange(list.length ? closestValue(list)(value) : clamp(value || 0, min, max));
-    }, [onChange, value]);
-
-    return (
-      <div className={className}>
-        <label className="block relative">
-          {title ? (
-            <Text size="text-m" font="font-light" color="text-primary-text">
-              {title}
-            </Text>
-          ) : null}
-          <input
-            className={style(
-              'm-0 mt-2 font-sans text-h3 w-full h-14',
-              'border border-solid border-gray rounded-md outline-none',
-              'p-0 pl-4 box-border',
-              'text-primary-text hover:border-primary-hover focus:border-primary-text',
-              DISABLED_INPUT_CLASSES,
-            )}
-            value={isFocused ? value : addSpacesBetweenNumbers(value)}
-            disabled={disabled}
-            onInput={handleChange as any}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-          {renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })}
-        </label>
-        {renderRangeCaption(items)}
-      </div>
-    );
-  },
-);
+  return (
+    <div className={className}>
+      <label className="block relative">
+        {title ? (
+          <Text size="text-m" font="font-light" color="text-primary-text">
+            {title}
+          </Text>
+        ) : null}
+        <input
+          className={style(
+            'm-0 mt-2 font-sans text-h3 w-full h-14',
+            'border border-solid border-gray rounded-md outline-none',
+            'p-0 pl-4 box-border',
+            'text-primary-text hover:border-primary-hover focus:border-primary-text',
+            DISABLED_INPUT_CLASSES,
+          )}
+          disabled={disabled}
+          onInput={handleChange as any}
+          {...normalizedProps}
+        />
+        {renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })}
+      </label>
+      {renderRangeCaption(items)}
+    </div>
+  );
+});
 
 const closestValue = (list: number[]) => (_: number) =>
   list.reduce((prev, curr) => (Math.abs(curr - _) < Math.abs(prev - _) ? curr : prev));

package/mobile/src/ui-kit/InputRange/InputRangeProps.ts

@@ -1,14 +1,12 @@
+import type { InputProps } from '../Input/InputProps';
 import type { ListContent } from '../List/ListContent';
 
-export interface InputRangeProps extends ListContent {
-  className?: string;
+export interface InputRangeProps extends ListContent, InputProps<number> {
   items?: string[];
   min?: number;
   max?: number;
   list?: number[];
   step?: number;
-  value?: number;
   title?: string;
   disabled?: boolean;
-  onChange?: (value: number) => void;
 }

package/mobile/src/ui-kit/NumberInput/NumberInput.tsx

@@ -0,0 +1,35 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useNormalizedInput } from '../../hooks/useNormalizedInput';
+import { clamp } from '../../utils/clamp';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Input } from '../Input/Input';
+import type { InputProps } from '../Input/InputProps';
+
+export interface NumberInputProps extends InputProps<string> {
+  min?: number;
+  max?: number;
+  defaultValue?: string;
+  fractionDigits?: number;
+}
+
+export const NumberInput = JSX<NumberInputProps>((props) => {
+  const { onChange, min, max, defaultValue = '0', fractionDigits = 0, ...inputProps } = props;
+  const normalizedProps = useNormalizedInput(props, {
+    normalize: (_: string | undefined = defaultValue) =>
+      min && max ? String(clamp(Number(sanitizeNumberStr(_)), min, max)) : sanitizeNumberStr(_),
+    format: toLocalNumberFormat(fractionDigits),
+  });
+
+  const handleChange = useCallback(
+    (_: string) => onChange && onChange(sanitizeNumberStr(_)),
+    [onChange],
+  );
+
+  return <Input onChange={handleChange} {...inputProps} {...normalizedProps} />;
+});
+
+const sanitizeNumberStr = (_ = ''): string =>
+  _.replaceAll(',', '.')
+    .replace(/[^\d.]/g, '')
+    .replace(/([^.]*\.[^.]*)\./, '$1');