@redneckz/wildless-cms-uni-blocks 0.10.4 → 0.10.6

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

@@ -1,42 +1,76 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
-import { List } from '../../ui-kit/List/List';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import type { TextBlockContent } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
 export const TextBlock = JSX<TextBlockProps>(
-  ({ title, description, iconVersion, image, className = '', items, isDotted = true }) => {
+  ({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => {
     return (
-      <section
-        className={`font-sans px-4 py-[18px] flex flex-col bg-white group-data-secondary:bg-primary-main ${className}`}
+      <BlockWrapper
+        className={style(
+          'px-9 py-4 flex gap-3 bg-white group-data-secondary:bg-primary-main/10',
+          className,
+        )}
+        {...rest}
       >
-        {iconVersion === 'small' ? renderIcon() : null}
+        {iconVersion === 'small' ? <div className="mt-1">{renderIcon()}</div> : null}
         {iconVersion === 'big' ? renderImage(image) : null}
-        <div className="py-0.5 text-secondary-text group-data-secondary:text-white">
-          {title ? <div className={`text-l font-medium mb-1`}>{title}</div> : null}
-          {description ? <div className={`text-s `}>{description}</div> : null}
-          {items?.length ? (
-            <List className="mt-1 text-m" items={items} isDotted={isDotted} />
+        <div className="flex flex-col w-fit gap-3">
+          {title ? (
+            <Text
+              size="text-l"
+              font="font-medium"
+              color="text-primary-text group-data-secondary:text-white"
+            >
+              {title}
+            </Text>
           ) : null}
+          {description ? renderDescription(description) : null}
+          {items?.length ? renderList(items, true) : null}
+          {__html ? <RichText __html={__html} /> : null}
         </div>
-      </section>
+      </BlockWrapper>
     );
   },
 );
 
-function renderIcon() {
+const renderIcon = () => (
+  <div
+    className={`rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main`}
+  >
+    i
+  </div>
+);
+
+const renderImage = (image?: Picture) =>
+  image?.src ? <Img className="h-fit" image={image} /> : null;
+
+const renderDescription = (description: string) => (
+  <Paragraph size="text-s" color="text-secondary-text group-data-secondary:text-white">
+    {description}
+  </Paragraph>
+);
+
+const renderList = (items: string[], bullets: boolean) => {
+  const listStyle = bullets ? 'list-disc pl-6' : '';
+
   return (
-    <div className="mb-3">
-      <div className="rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main">
-        i
-      </div>
-    </div>
+    <ul className={style('text-secondary-text group-data-secondary:text-white/80', listStyle)}>
+      {items.map((_, i) => (
+        <li key={`listItem-${i}`}>
+          <Text size="text-s" font="font-light">
+            {_}
+          </Text>
+        </li>
+      ))}
+    </ul>
   );
-}
-
-function renderImage(image?: Picture) {
-  return image?.src ? <Img className="pb-3 mr-auto" image={image} /> : null;
-}
+};

package/mobile/src/components/TextBlock/TextBlockContent.ts

@@ -1,4 +1,3 @@
-import type { BulletsProps } from '../../model/Bullets';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -18,7 +17,6 @@ export type TextBlockContent = UniBlockContent &
   HeadlineCommonProps &
   RichTextProps &
   ImageContent &
-  ListContent &
-  BulletsProps & {
+  ListContent & {
     iconVersion?: TextBlockIconVersion;
   };

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

@@ -35,7 +35,7 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
         className={style(
           'relative',
           'flex flex-col [&>*]:max-w-full',
-          isPadding ? 'p-12' : '',
+          isPadding ? 'p-default' : '',
           gapStyles[gap],
           align && alignStyle[align],
           className,

package/mobile/src/hooks/useForm.ts

@@ -1,29 +1,77 @@
 import { useCallback, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { PreventableEvent } from '../ui-kit/PreventableEvent';
 
-export type FormElementRegisterer = ReturnType<typeof useForm>['register'];
+export interface FieldProps<V> {
+  value?: V;
+  isDirty?: boolean;
+  onChange?: (value: V) => void;
+}
+
+export type FormFieldRegisterer<FormState> = <N extends keyof FormState>(
+  fieldName: N,
+) => FieldProps<FormState[N]>;
 
 export const useForm = <FormState extends Record<string, any>>(
-  initialState: Partial<FormState> = {},
-) => {
-  const [formState, setFormState] = useState<Partial<FormState>>(initialState);
+  initialState: FormState,
+  onSubmit?: (_: FormState) => void,
+): [
+  FormState,
+  {
+    isDirty: boolean;
+    field: FormFieldRegisterer<FormState>;
+    reset: () => void;
+    onSubmit: (e: PreventableEvent) => void;
+  },
+] => {
+  const [formState, setFormState] = useState<FormState>(initialState);
+
+  const [isDirtyForm, setDirtyForm] = useState(false);
+  const [dirtyFieldsMap, setDirtyFieldsMap] = useState<Partial<Record<keyof FormState, boolean>>>(
+    {},
+  );
 
-  const handlersMap = useRef<Partial<Record<keyof FormState, () => void>>>({});
+  const handlersMap = useRef<Partial<Record<keyof FormState, (value: any) => void>>>({});
 
-  const register = <FieldName extends keyof FormState>(fieldName: FieldName) => {
+  const field: FormFieldRegisterer<FormState> = (fieldName) => {
     if (!handlersMap.current) {
-      return {};
+      handlersMap.current = {};
     }
 
-    const handler = (value?: FormState[FieldName]) => {
+    handlersMap.current[fieldName] ||= (value) => {
       setFormState((prev) => ({ ...prev, [fieldName]: value }));
+      setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
     };
 
-    handlersMap.current[fieldName] ||= handler;
-
-    return { value: formState?.[fieldName], onChange: handlersMap.current[fieldName] };
+    return {
+      value: formState[fieldName],
+      isDirty: isDirtyForm || dirtyFieldsMap[fieldName],
+      onChange: handlersMap.current[fieldName],
+    };
   };
 
-  const resetForm = useCallback(() => setFormState({}), []);
+  const reset = useCallback(() => {
+    setFormState(initialState);
+    setDirtyForm(false);
+    setDirtyFieldsMap({});
+  }, [initialState]);
+
+  const handleSubmit = useCallback(
+    (e: PreventableEvent) => {
+      e.preventDefault();
+
+      setDirtyForm(true);
+      onSubmit && onSubmit(formState);
+    },
+    [onSubmit, formState],
+  );
 
-  return { formState, register, resetForm };
+  return [
+    formState,
+    {
+      isDirty: isDirtyForm || Object.values(dirtyFieldsMap).some(Boolean),
+      field,
+      reset,
+      onSubmit: handleSubmit,
+    },
+  ];
 };

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

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { style } from '../../utils/style';
+import type { PreventableEvent } from '../PreventableEvent';
 import { SVG } from '../SVG';
 import type { CheckboxProps } from './CheckboxProps';
 
@@ -13,39 +15,51 @@ const CHECK_PATHS = [
 ];
 
 export const Checkbox = JSX<CheckboxProps>(
-  ({ className, text, checked, disabled, isRadio, onChange }) => {
+  ({ className, value, text, disabled, isRadio, onChange }) => {
+    const handleChange = useCallback(
+      (e: PreventableEvent) => {
+        e.preventDefault();
+        onChange && onChange(!value);
+      },
+      [onChange, value],
+    );
+
+    const icon = isRadio ? (
+      <div className="absolute left-1 w-3 h-3 rounded-full bg-primary-main" />
+    ) : (
+      <SVG
+        paths={CHECK_PATHS}
+        className="absolute left-1 ml-px block"
+        width="11"
+        height="9"
+        fill="white"
+        viewBox="0 0 11 9"
+      />
+    );
+
     return (
       <div className={className}>
-        <label className="flex items-center relative cursor-pointer group/box">
-          <input
+        <label
+          className="flex items-center relative cursor-pointer group/box"
+          onClick={handleChange}
+        >
+          <div
             className={style(
-              'peer appearance-none w-5 h-5 border-solid cursor-pointer checked:border-primary-main m-0',
-              isRadio
-                ? 'rounded-full border-2'
-                : 'rounded checked:bg-primary-main disabled:bg-main-disabled border',
-              checked ? 'border-black' : 'border-gray',
-              disabled ? '' : 'group-hover/box:border-primary-hover',
+              'appearance-none w-5 h-5 border-solid cursor-pointer m-0',
+              isRadio ? 'rounded-full border-2' : checkboxStyle(value),
+              value ? 'border-primary-main' : 'border-gray',
+              disabled ? 'bg-main-disabled' : 'group-hover/box:border-primary-hover',
             )}
-            type="checkbox"
-            onChange={(e) => onChange && onChange(e.target.checked as boolean)}
-            checked={checked}
-            disabled={disabled}
+            role="checkbox"
+            aria-checked={Boolean(value)}
+            aria-disabled={Boolean(disabled)}
           />
-          {isRadio ? (
-            <div className="left-1 w-3 h-3 rounded-full bg-primary-main hidden absolute peer-checked:block" />
-          ) : (
-            <SVG
-              paths={CHECK_PATHS}
-              className="hidden absolute left-1 ml-px peer-checked:block"
-              width="11"
-              height="9"
-              fill="white"
-              viewBox="0 0 11 9"
-            />
-          )}
+          {value ? icon : null}
           {text ? <span className="font-sans ml-3 text-l-light">{text}</span> : null}
         </label>
       </div>
     );
   },
 );
+
+const checkboxStyle = (value?: boolean) => style('rounded border', value ? 'bg-primary-main' : '');

package/mobile/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -1,8 +1,8 @@
 export interface CheckboxProps {
+  className?: string;
+  value?: boolean;
   text?: string;
-  checked?: boolean;
   disabled?: boolean;
-  className?: string;
   isRadio?: boolean;
   onChange?: (value: boolean) => void;
 }

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

@@ -0,0 +1,64 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { LinkCommonProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
+import { CloseButton } from '../Dialog/CloseButton';
+import { useDialogProps } from '../Dialog/useDialogProps';
+import { LinkWrapper } from '../LinkWrapper/LinkWrapper';
+import { Paragraph } from '../Paragraph/Paragraph';
+
+export interface CookiePopupProps {
+  termLink?: LinkCommonProps;
+  personalDataPolicyLink?: LinkCommonProps;
+}
+
+export const COOKIE_DIALOG_ID = 'cookie';
+export const LOCAL_STORAGE_NAME = 'cookieClose';
+
+export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicyLink }) => {
+  const { isOpened, onClose } = useDialogProps(
+    COOKIE_DIALOG_ID,
+    !globalThis.localStorage?.getItem(LOCAL_STORAGE_NAME),
+  );
+
+  const handleClose = useCallback(() => {
+    globalThis.localStorage?.setItem(LOCAL_STORAGE_NAME, 'true');
+
+    onClose && onClose();
+  }, [onClose]);
+
+  return isOpened ? (
+    <div className="container z-40 fixed bottom-0 left-0 right-0 pointer-events-none">
+      <div className="bg-white m-6 p-6 rounded-md flex items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+        <div className="flex-1">
+          <Paragraph size="text-s-light" color="text-primary-text">
+            АО «Россельхозбанк» использует
+            <LinkWrapper
+              isRemote
+              className={style(getStyleLinkWrapper(termLink?.href))}
+              {...termLink}
+            >
+              cookie
+            </LinkWrapper>
+            (файлы с данными о прошлых посещениях сайта) для персонализации сервисов и удобства
+            пользователей. Вы можете запретить сохранение cookie в настройках своего браузера.
+            <LinkWrapper
+              isRemote
+              className={style(getStyleLinkWrapper(personalDataPolicyLink?.href))}
+              {...personalDataPolicyLink}
+            >
+              Обработка Ваших персональных данных
+            </LinkWrapper>
+            производится в соответствии с требованиями Федерального закона от 27.07.2006 № 152-Ф3 «О
+            персональных данных».
+          </Paragraph>
+        </div>
+        <div className="w-24 flex justify-end">
+          <CloseButton className="bg-main-gray rounded-md" onClick={handleClose} />
+        </div>
+      </div>
+    </div>
+  ) : null;
+});
+
+const getStyleLinkWrapper = (href?: string) => ['inline mx-1', href ? 'text-green-dark' : ''];

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

@@ -1,38 +1,30 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { clamp } from '../../utils/clamp';
-import { adjustValue, localNumberFormat } from './adjustValue';
 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 = '', onChange, minValue = 0, maxValue = 300000, ...inputProps }) => {
+  ({ className = '', value = '', onChange, minValue = 0, maxValue = 300000, ...inputProps }) => {
     const handleChange = useCallback(
       (inputValue: string) => {
-        if (!onChange) {
-          return;
-        }
         const adjustedVal = adjustValue(inputValue);
         const clampVal = getClampValue(adjustedVal, clamp(Number(adjustedVal), minValue, maxValue));
-        onChange(String(clampVal));
+        onChange && onChange(clampVal);
       },
       [onChange],
     );
 
-    const handleBlur = useCallback(
-      (inputValue: string) => {
-        if (!onChange) {
-          return;
-        }
-        onChange(localNumberFormat(inputValue));
-      },
-      [onChange],
-    );
+    const handleBlur = useCallback(() => {
+      onChange && onChange(localNumberFormat(value));
+    }, [onChange, value]);
 
     return (
       <Input
         className={className}
         inputClassName="w-full"
+        value={value}
         onChange={handleChange}
         onBlur={handleBlur}
         {...inputProps}

package/mobile/src/ui-kit/Dialog/CloseButton.tsx

@@ -11,7 +11,7 @@ interface CloseButtonProps {
 export const CloseButton = JSX<CloseButtonProps>(({ className, onClick }) => (
   <button
     className={style(
-      'visible peer-placeholder-shown:invisible w-6 h-6 p-1 bg-transparent border-none',
+      'flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none',
       className,
     )}
     onClick={onClick}

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

@@ -36,7 +36,7 @@ export const Dialog = JSX<DialogProps>(({ className, isOpened, head, children, o
     >
       <div className="relative container pb-12 min-h-full">
         <div className="sticky bg-white pt-6 top-0">
-          <CloseButton className="absolute top-3 -right-6" onClick={onClose} />
+          <CloseButton className="absolute top-10 -right-12" onClick={onClose} />
           {head}
         </div>
         {children}

package/mobile/src/ui-kit/Dialog/useDialogProps.ts

@@ -7,8 +7,9 @@ import { useDialogHandlers } from './useDialogHandlers';
 
 export function useDialogProps(
   id: string,
+  initOpen = false,
 ): DialogProps & DialogInitialParams & { wasOpened: boolean } {
-  const [isOpened, { setTrue: open, setFalse: close }] = useBool();
+  const [isOpened, { setTrue: open, setFalse: close }] = useBool(initOpen);
   const [params, setParams] = useState<DialogInitialParams>({ id });
 
   const wasOpened = useRef(isOpened);

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { style } from '../../utils/style';
 import type { InputProps } from './InputProps';
 
 export const Input = JSX<InputProps>(
@@ -14,44 +15,35 @@ export const Input = JSX<InputProps>(
     valid = true,
     children,
     onChange,
-    onBlur,
     ...inputProps
   }) => {
     const handleChange = useCallback(
-      (e) => {
-        const validInputValue = e.target.validity.valid ? (e.target.value as string) : value;
-        onChange(validInputValue);
+      (e: { target?: { value?: string } }) => {
+        onChange && onChange(e.target?.value || '');
       },
       [onChange],
     );
 
-    const handleBlur = useCallback(
-      (e) => {
-        if (!onBlur) {
-          return;
-        }
-        const validInputValue = e.target.validity.valid ? (e.target.value as string) : value;
-        onBlur(validInputValue);
-      },
-      [onBlur],
-    );
-
     const paddingStyle = children ? 'pr-8' : '';
     const validStyle = valid
       ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
       : 'border-error';
 
     return (
-      <div className={`relative ${className}`}>
+      <div className={style('relative', className)}>
         {label ? <label className="block text-m-light mb-2">{label}</label> : null}
         <input
-          className={`w-full border rounded-md text-primary-text outline-none p-4 ${paddingStyle} ${validStyle} ${inputClassName}`}
+          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}
-          onChange={handleChange}
-          onBlur={handleBlur}
+          onInput={handleChange as any}
           {...inputProps}
         />
         {children}

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

@@ -10,7 +10,9 @@ export type InputProps = LabelProps & {
   placeholder?: string;
   pattern?: string;
   value?: string;
-  onChange: (value: string) => void;
-  onBlur?: (value: string) => void;
+  onChange?: (value: string) => void;
+  onInput?: (event: any) => void;
+  onFocus?: (event: any) => void;
+  onBlur?: () => void;
   valid?: boolean;
 };

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

@@ -7,16 +7,19 @@ interface LinkWrapperProps {
   className?: string;
   href?: string;
   target?: Target;
+  isRemote?: boolean;
 }
 
-export const LinkWrapper = JSX<LinkWrapperProps>(({ className = '', href, target, children }) => {
-  const link = useLink();
-  const linkProps = link({ href, target });
-  const Tag = href ? 'a' : 'div';
+export const LinkWrapper = JSX<LinkWrapperProps>(
+  ({ className = '', href, target, isRemote = false, children }) => {
+    const link = useLink({ isRemote });
+    const linkProps = link({ href, target });
+    const Tag = href ? 'a' : 'div';
 
-  return (
-    <Tag className={style('block', className)} {...(href ? linkProps : {})}>
-      {children}
-    </Tag>
-  );
-});
+    return (
+      <Tag className={style('block', className)} {...(href ? linkProps : {})}>
+        {children}
+      </Tag>
+    );
+  },
+);

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

@@ -0,0 +1,19 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { Input } from '../Input/Input';
+import type { InputProps } from '../Input/InputProps';
+import { normalizePhone } from './normalizePhone';
+
+export const PhoneInput = JSX<InputProps>(({ children, onChange, ...inputProps }) => {
+  const handleChange = useCallback(
+    ({ target: { value } }: { target: { value?: string } }) =>
+      onChange && onChange(normalizePhone(value || '')),
+    [onChange],
+  );
+
+  return (
+    <Input onInput={handleChange} onFocus={handleChange} {...inputProps}>
+      {children}
+    </Input>
+  );
+});

package/mobile/src/ui-kit/PhoneInput/normalizePhone.ts

@@ -0,0 +1,23 @@
+const isPlaceholder = (_: string) => _ === '_';
+const isDigit = (_: string) => /\d/.test(_);
+const isWildcard = (_: string) => isPlaceholder(_) || isDigit(_);
+
+const phonePattern = [...'+7 (___) ___-__-__'];
+
+const firstPlaceholderIndex = phonePattern.findIndex(isPlaceholder);
+const phoneWildcardIndicies = phonePattern.map((_, i) =>
+  isWildcard(_) ? phonePattern.slice(0, i).filter(isWildcard).length : -1,
+);
+
+export function normalizePhone(phone: string): string {
+  const phoneNumbers = phone.replace(/\D/g, '');
+  const applyPlaceholder = (_: string, i: number) =>
+    isDigit(_) ? _ : phoneNumbers.charAt(phoneWildcardIndicies[i]) || _;
+
+  const result = phonePattern.map(applyPlaceholder);
+  const resultLength = phoneWildcardIndicies.indexOf(phoneNumbers.length - 1) + 1;
+
+  return (
+    resultLength ? result.slice(0, Math.max(firstPlaceholderIndex, resultLength)) : result
+  ).join('');
+}

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

@@ -27,7 +27,7 @@ export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
           key={String(id)}
           isRadio
           text={text}
-          checked={checkedItem === id}
+          value={checkedItem === id}
           onChange={() => onChangeCheckedItem && onChangeCheckedItem(id)}
         />
       ))}