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

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

@@ -5,22 +5,22 @@ const items = ['List Item #1', 'List Item #2', 'List Item #3', 'List Item #4'];
 
 export default {
   'primary dotted (default)': (
-    <div className="bg-white p-12">
+    <div className="bg-white p-default">
       <List items={items} listItemSize="L" />
     </div>
   ),
   'primary w/o dots': (
-    <div className="bg-white p-12">
+    <div className="bg-white p-default">
       <List items={items} isDotted={false} />
     </div>
   ),
   'secondary dotted': (
-    <div className="group bg-primary-main p-12" data-ver="secondary">
+    <div className="group bg-primary-main p-default" data-ver="secondary">
       <List items={items} />
     </div>
   ),
   'secondary w/o dots': (
-    <div className="bg-primary-main p-12" data-ver="secondary">
+    <div className="bg-primary-main p-default" data-ver="secondary">
       <List items={items} isDotted={false} />
     </div>
   ),

package/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/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/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)}
         />
       ))}

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

@@ -21,7 +21,7 @@ const HTML = `
 
 export default {
   default: (
-    <section className="p-12">
+    <section className="p-default">
       <RichText __html={HTML} />
     </section>
   ),

package/src/ui-kit/Select/Select.tsx

@@ -1,58 +1,53 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '../../hooks/useBool';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { LabelProps } from '../../model/HeadlineType';
 import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 
-export interface OptionProps {
+export interface Option {
   key: string;
-  text: string;
+  text?: string;
 }
 
 export type SelectProps = LabelProps & {
   className?: string;
-  value?: OptionProps;
-  onChange: (value: OptionProps) => void;
-  options: OptionProps[];
+  options?: Option[];
+  value?: Option;
+  valid?: boolean;
   isBorder?: boolean;
   placeholder?: string;
-  valid?: boolean;
-  onValidate?: (value: string) => void;
+  onChange?: (value: Option) => void;
 };
 
 export const Select = JSX<SelectProps>(
   ({
     className = '',
-    isBorder = true,
     label,
     options = [],
     value,
-    onChange,
-    placeholder = '',
     valid = true,
-    onValidate,
+    isBorder = true,
+    placeholder = '',
+    onChange,
   }) => {
-    const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
-    const [isOpen, setIsOpen] = useState(false);
-    const handleClickOutside = useCallback(() => setIsOpen(false), []);
-    const wrapperRef = useOutsideClick<HTMLDivElement>(handleClickOutside);
-
-    const choiceOption = (option: OptionProps) => {
-      setSelectedItem(option);
-      setIsOpen(false);
-      onChange(option);
-      onValidate && onValidate(option.text);
-    };
+    const [isOpen, { setFalse: close, toggle }] = useBool();
+    const wrapperRef = useOutsideClick<HTMLDivElement>(close);
 
-    const isSelected = (option: OptionProps) => Boolean(option.key === selectedItem.key);
+    const handleChange = useCallback(
+      (option: Option) => {
+        close();
+        onChange && onChange(option);
+      },
+      [onChange],
+    );
 
-    useEffect(() => {
-      setSelectedItem(value || { key: '', text: '' });
-    }, [value]);
+    const isSelected = (option: Option) => option.key === value?.key;
 
     return (
-      <div className={`${className}`} ref={wrapperRef}>
+      <div className={className} ref={wrapperRef}>
         {label ? (
           <div className="mb-2">
             <Text size="text-m" color="text-primary-text" font="font-light">
@@ -60,28 +55,28 @@ export const Select = JSX<SelectProps>(
             </Text>
           </div>
         ) : null}
-        <div className={`relative ${isOpen ? 'z-20' : 'z-10'}`}>
+        <div className={style('relative', isOpen ? 'z-20' : 'z-10')}>
           <div
-            className={`text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
-            ${getBorderStyle(isBorder, valid)}`}
-            onClick={() => setIsOpen(!isOpen)}
+            className={style(
+              'text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer',
+              getBorderStyle(isBorder, valid),
+            )}
+            onClick={toggle}
           >
             <p className="p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap">
-              {selectedItem?.text || placeholder}
+              {formatOption(value) || placeholder}
             </p>
             <Icon
+              className={style('absolute right-3', isOpen ? '' : 'rotate-180')}
               name="ArrowUpIcon"
               width="16"
               height="16"
-              className={`absolute right-3 ${isOpen ? '' : 'rotate-180'}`}
             />
           </div>
           {options?.length ? (
-            <div className={`h-0 ${renderOptionsStyle(isOpen)}`}>
-              <div
-                className={`bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`}
-              >
-                {options.map(renderOption(choiceOption, isOpen, isSelected))}
+            <div className={style('h-0', isOpen ? '' : 'overflow-hidden')}>
+              <div className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+                {options.map(renderOption(handleChange, isOpen, isSelected))}
               </div>
             </div>
           ) : null}
@@ -91,37 +86,35 @@ export const Select = JSX<SelectProps>(
   },
 );
 
-const renderOptionsStyle = (isOpen: boolean) => (isOpen ? '' : 'overflow-hidden');
-
 const renderOption =
   (
-    choiceOption: (option: OptionProps) => void,
+    handleChange: (option: Option) => void,
     isOpen: boolean,
-    isSelected: (option: OptionProps) => boolean,
+    isSelected: (option: Option) => boolean,
   ) =>
-  (option: OptionProps, i: number) => {
-    return (
+  (option: Option, i: number) =>
+    (
       <div
         key={String(i)}
         onClick={() => {
-          choiceOption(option);
+          handleChange(option);
         }}
         className="flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11 relative"
       >
-        <span className="min-h-6">{option.text}</span>
+        <span className="min-h-6">{formatOption(option)}</span>
         <Icon
           name="DoneSimpleIcon"
           width="16"
           height="16"
-          className={['absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden'].join(
-            ' ',
-          )}
+          className={style('absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden')}
         />
       </div>
     );
-  };
 
-const getBorderStyle = (isBorder: boolean, valid: boolean) => `
-  ${isBorder ? 'border rounded-md hover:border-primary-hover' : ''} ${
-  valid ? ' border-gray' : 'border-error'
-} `;
+const formatOption = (_?: Option): string => _?.text || _?.key || '';
+
+const getBorderStyle = (isBorder: boolean, valid: boolean) =>
+  style(
+    isBorder ? 'border rounded-md hover:border-primary-hover' : '',
+    valid ? ' border-gray' : 'border-error',
+  );

package/src/ui-kit/SlideCheckbox/SlideCheckbox.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { Text } from '../Text/Text';
 
 interface SlideCheckboxProps {
@@ -12,25 +13,25 @@ export const SlideCheckbox = JSX<SlideCheckboxProps>(
     <div
       role={type}
       aria-checked={value}
-      className="flex justify-start items-center w-full cursor-pointer mb-4"
+      className="flex justify-start items-center w-full cursor-pointer mb-3"
       onClick={() => onChange && onChange(!value)}
     >
       <div
-        className={`relative flex-shrink-0 duration-300 w-9 h-5 mr-3 rounded-2xl ${
-          value ? 'bg-primary-main' : 'bg-main-divider'
-        }`}
+        className={style(
+          'relative flex-shrink-0 duration-300 w-9 h-5 mr-3 rounded-2xl',
+          value ? 'bg-primary-main' : 'bg-main-divider',
+        )}
       >
         <div
-          className={`absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full ${
-            value ? 'left-[50%]' : 'left-[5%]'
-          }`}
+          className={style(
+            'absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full',
+            value ? 'left-[50%]' : 'left-[5%]',
+          )}
         />
       </div>
-      <div>
-        <Text size="text-m" font="font-light" color="text-primary-text">
-          {text}
-        </Text>
-      </div>
+      <Text size="text-l" font="font-light" color="text-primary-text">
+        {text}
+      </Text>
     </div>
   ),
 );

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

@@ -3,7 +3,7 @@ import { Tags } from './Tags';
 const tags = ['Tag #1', 'Tag #2', 'Tag #3', 'Tag #4'];
 
 export default (
-  <div className="bg-white p-12">
+  <div className="bg-white p-default">
     <Tags tags={tags} />
   </div>
 );

package/src/validation/and.ts

@@ -0,0 +1,6 @@
+import { ValidationInfo, Validator } from './validator';
+
+export const and =
+  (...validators: Validator[]): Validator =>
+  (data) =>
+    validators.flatMap((_) => _(data)) as ValidationInfo;

package/src/validation/objectValidator.ts

@@ -0,0 +1,10 @@
+import { ValidationInfo, Validator } from './validator';
+
+export const objectValidator =
+  <VMap extends Record<string, Validator>>(validatorsMap: VMap) =>
+  <O extends Partial<{ [P in keyof VMap]: Parameters<VMap[P]>[0] }>>(o: O): ValidationInfo =>
+    (o &&
+      (Object.entries(validatorsMap).flatMap(([key, validator]) =>
+        validator(o[key]),
+      ) as ValidationInfo)) ||
+    [];

package/src/validation/pattern.ts

@@ -0,0 +1,4 @@
+import { validator } from './validator';
+
+export const pattern = (regexp: RegExp) =>
+  validator((_) => typeof _ === 'string' && regexp.test(_));

package/src/validation/required.ts

@@ -0,0 +1,3 @@
+import { validator } from './validator';
+
+export const required = validator((_) => _ !== null && _ !== undefined && _ !== '');

package/src/validation/validator.ts

@@ -0,0 +1,21 @@
+type ValidationMessage = string;
+
+type ValidationSuccess = [];
+type ValidationErr = [ValidationMessage, ...ValidationMessage[]];
+
+export type ValidationInfo = ValidationSuccess | ValidationErr;
+
+export type Validator<T = any> = (_: T) => ValidationInfo;
+
+export const isValidationSuccess = (info: ValidationInfo): info is ValidationSuccess =>
+  !info?.length;
+export const isValidationErr = (info: ValidationInfo): info is ValidationErr =>
+  Boolean(info?.length);
+
+type Predicate<T = any> = (_: T) => boolean;
+
+export const validator =
+  <T = any>(predicate: Predicate<T>) =>
+  (message: string): Validator<T> =>
+  (_) =>
+    predicate(_) ? [] : [message];

package/src/validation/withValidator.ts

@@ -0,0 +1,21 @@
+import { ValidationInfo, Validator } from './validator';
+
+interface FieldProps<V> {
+  value?: V;
+  isDirty?: boolean;
+}
+
+export const withValidator = <V, P extends FieldProps<V> = FieldProps<V>>(
+  props: P,
+  validator: Validator<V | undefined>,
+): P & { errors?: ValidationInfo; error?: ValidationInfo[0] } => {
+  const { value, isDirty } = props;
+
+  const errors: ValidationInfo = isDirty ? validator(value) : [];
+
+  return {
+    ...props,
+    errors,
+    error: errors[0],
+  };
+};