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

package/src/components/OfficeServicesBlock/OfficeServicesBlock.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { OfficeServicesBlock } from './OfficeServicesBlock';
 
 export default {

package/src/components/ParagraphBlock/ParagraphBlock.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { ParagraphBlock } from './ParagraphBlock';
 
 const DEFAULT_CLASS_NAME = 'col-span-12 w-full';

package/src/components/PictureText/PictureText.fixture.tsx

@@ -1,5 +1,6 @@
-import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
 import { PictureText } from './PictureText';
 import type { PictureTextContent } from './PictureTextContent';
 

package/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/src/components/ProductBlock/ProductBlock.fixture.mobile.tsx

@@ -1,5 +1,6 @@
-import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductBlock } from './ProductBlock';

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -1,5 +1,6 @@
-import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { BackwardButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductBlock } from './ProductBlock';

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -1,5 +1,6 @@
-import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductGallery } from './ProductGallery';
 

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -1,5 +1,6 @@
-import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductTile } from './ProductTile';
 import type { Benefit, ProductTileContent } from './ProductTileContent';

package/src/components/PromoTile/PromoTile.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { getCurrentDate } from '../../utils/getCurrentDate';
 import { PromoTile } from './PromoTile';
 

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo';
 

package/src/components/RichTextBlock/RichTextBlock.fixture.mobile.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { RichTextBlock } from './RichTextBlock';
 import type { RichTextBlockContent } from './RichTextBlockContent';
 

package/src/components/RichTextBlock/RichTextBlock.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { RichTextBlock } from './RichTextBlock';
 import type { RichTextBlockContent } from './RichTextBlockContent';
 

package/src/components/RollupItem/RollupItem.fixture.mobile.tsx

@@ -1,7 +1,8 @@
+import '../../setup-fixture';
+
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { BlockDef } from '../../model/ContentPageDef';
 import { Blocks } from '../Blocks.mobile';
-
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture.mobile';
 import { RollupItem } from './RollupItem.mobile';
 

package/src/components/RollupItem/RollupItem.fixture.tsx

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { Blocks } from '../Blocks';
 import { RollupItem } from '../RollupItem/RollupItem';

package/src/components/SafeDepositRental/SafeDepositRental.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { SafeDepositRental } from './SafeDepositRental';
 
 export default {

package/src/components/StepsBlock/StepsBlock.fixture.mobile.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { StepsBlock } from './StepsBlock';
 import type { Step } from './StepsBlockContent';
 

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import type { StepsBlockProps } from './StepsBlock';
 import { StepsBlock } from './StepsBlock';
 import type { DefaultStep, Step } from './StepsBlockContent';

package/src/components/SwipeListControlBlock/SwipeListControlBlock.fixture.tsx

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { Blocks } from '../Blocks';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';

package/src/components/Tabs/Tabs.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { Tabs } from './Tabs';
 
 export default {

package/src/components/TariffsTable/TariffsTable.fixture.mobile.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { TARIFFS_TABLE_FIXTURE_EXAMPLE } from './dataFixture';
 import { TariffsTable } from './TariffsTable';
 

package/src/components/TariffsTable/TariffsTable.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import {
   columns,
   columnsTable,

package/src/components/TextBlock/TextBlock.fixture.mobile.tsx

@@ -1,5 +1,6 @@
-import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
 import { TextBlock } from './TextBlock';
 import type { TextBlockContent } from './TextBlockContent';
 

package/src/components/TextBlock/TextBlock.fixture.tsx

@@ -1,5 +1,6 @@
-import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
 import { TextBlock } from './TextBlock';
 import type { TextBlockContent } from './TextBlockContent';
 

package/src/components/Tile/Tile.fixture.tsx

@@ -1,5 +1,6 @@
-import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
 import { Tile } from './Tile';
 import type { TileContent } from './TileContent';
 

package/src/components/VerticalLayout/VerticalLayout.fixture.mobile.tsx

@@ -1,6 +1,7 @@
+import '../../setup-fixture';
+
 import { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import type { Picture } from '../../model/Picture';
-import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
 import type { TextBlockContent } from '../TextBlock/TextBlockContent';

package/src/components/VerticalLayout/VerticalLayout.fixture.tsx

@@ -1,5 +1,6 @@
-import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import '../../setup-fixture';
+
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { Blocks } from '../Blocks';
 import { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';

package/src/components/Video/Video.fixture.tsx

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import { Video } from './Video';
 import { VideoContent } from './VideoContent';
 

package/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/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/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/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/src/ui-kit/Button/Button.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+
 import { Img } from '../Img/Img';
 import { Button } from './Button';
 

package/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/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/src/ui-kit/Heading/Heading.fixture.mobile.tsx

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import { Heading } from './Heading';
 
 export default {

package/src/ui-kit/Heading/Heading.fixture.tsx

@@ -1,3 +1,5 @@
+import '../../setup-fixture';
+
 import { Heading } from './Heading';
 
 export default {

package/src/ui-kit/Icon/Icon.fixture.tsx

@@ -1,5 +1,6 @@
-import { IconMap } from '../../icons/IconName';
 import '../../setup-fixture';
+
+import { IconMap } from '../../icons/IconName';
 import { Icon } from './Icon';
 
 export default {

package/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/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;
+}