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

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

@@ -7,17 +7,11 @@ const image: Picture = {
   src: 'bank-card.png',
   format: 'webp',
   size: {
-    width: 43,
-    height: 43,
+    width: 56,
+    height: 56,
   },
 };
 
-const items = [
-  'Вклады до 1,4 млн застрахованы',
-  'Вклады до 1,4 млн застрахованы',
-  'Вклады до 1,4 млн застрахованы',
-];
-
 export const TEXT_BLOCK: TextBlockContent = {
   title: 'Все карты Россельхозбанка работают',
   description:
@@ -25,58 +19,57 @@ export const TEXT_BLOCK: TextBlockContent = {
     "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
 };
 
+const items = ['one', 'two'];
 export default {
-  'private clients': (
+  default: (
     <div className="container grid grid-cols-12">
-      <div className="col-span-12">
-        <div className="flex flex-col gap-1.5" data-theme="pc">
-          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="big" image={image} />
-          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="none" />
-          <TextBlock
-            description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
-            version="primary"
-          />
-          <TextBlock title="Все карты Россельхозбанка работают" version="primary" />
-          <TextBlock
-            title="Все карты Россельхозбанка работают"
-            version="primary"
-            iconVersion="small"
-            items={items}
-          />
-          <TextBlock
-            title="Все карты Россельхозбанка работают"
-            description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
-            version="secondary"
-            iconVersion="small"
-            items={items}
-          />
-        </div>
-      </div>
+      <TextBlock className="col-span-12" {...TEXT_BLOCK} />
+    </div>
+  ),
+  'small-icon': (
+    <div className="container grid grid-cols-12">
+      <TextBlock className="col-span-12" {...TEXT_BLOCK} iconVersion="small" />
+    </div>
+  ),
+  'big-icon': (
+    <div className="container grid grid-cols-12">
+      <TextBlock className="col-span-12" {...TEXT_BLOCK} iconVersion="big" image={image} />
+    </div>
+  ),
+  'secondary-small': (
+    <div className="container grid grid-cols-12">
+      <TextBlock
+        data-theme="pc"
+        className="col-span-12"
+        {...TEXT_BLOCK}
+        version="secondary"
+        iconVersion="small"
+      />
+    </div>
+  ),
+  'image-list': (
+    <div className="container grid grid-cols-12">
+      <TextBlock
+        className="col-span-12"
+        {...TEXT_BLOCK}
+        iconVersion="big"
+        image={image}
+        items={items}
+        description=""
+      />
     </div>
   ),
-  'business clients': (
+  business: (
     <div className="container grid grid-cols-12">
-      <div className="col-span-12">
-        <div className="flex flex-col gap-1.5" data-theme="bc">
-          <TextBlock
-            className="flex flex-col"
-            {...TEXT_BLOCK}
-            version="primary"
-            iconVersion="small"
-          />
-          <TextBlock {...TEXT_BLOCK} iconVersion="small" version="secondary" />
-        </div>
+      <div data-theme="bc" className="col-span-12">
+        <TextBlock {...TEXT_BLOCK} iconVersion="small" />
       </div>
     </div>
   ),
   'ecosystem own': (
     <div className="container grid grid-cols-12">
-      <div className="col-span-12">
-        <div className="flex flex-col gap-1.5" data-theme="eo">
-          <TextBlock {...TEXT_BLOCK} iconVersion="small" version="primary" />
-          <TextBlock {...TEXT_BLOCK} iconVersion="small" version="secondary" />
-        </div>
+      <div data-theme="eo" className="col-span-12">
+        <TextBlock {...TEXT_BLOCK} iconVersion="small" />
       </div>
     </div>
   ),

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

@@ -20,7 +20,7 @@ export const TEXT_BLOCK: TextBlockContent = {
 };
 
 export default {
-  'private clients': (
+  default: (
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
         <div className="flex flex-col gap-6" data-theme="pc">

package/src/components/TextBlock/TextBlock.tsx

@@ -6,22 +6,35 @@ import { Img } from '../../ui-kit/Img/Img';
 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>(
-  ({ className = '', title, description, iconVersion, image, __html, ...rest }) => {
+  ({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => {
     return (
       <BlockWrapper
-        className={`px-9 py-4 flex gap-3 bg-white group-data-secondary:bg-primary-main/10' ${className}`}
+        className={style(
+          'px-9 py-4 flex gap-3 bg-white group-data-secondary:bg-primary-main/10',
+          className,
+        )}
         {...rest}
       >
         {iconVersion === 'small' ? <div className="mt-1">{renderIcon()}</div> : null}
         {iconVersion === 'big' ? renderImage(image) : null}
-        <div>
-          {title ? renderTitle(title) : null}
-          {description ? <div className="mt-1">{renderDescription(description)}</div> : null}
+        <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>
       </BlockWrapper>
@@ -37,16 +50,27 @@ const renderIcon = () => (
   </div>
 );
 
-const renderImage = (image?: Picture) => (image?.src ? <Img image={image} /> : null);
-
-const renderTitle = (title: string) => (
-  <Text size="text-l" font="font-medium" color="text-primary-text group-data-secondary:text-white">
-    {title}
-  </Text>
-);
+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 (
+    <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>
+  );
+};

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

@@ -0,0 +1,90 @@
+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';
+import { VerticalLayout } from '../VerticalLayout/VerticalLayout';
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
+
+const image: Picture = {
+  src: 'bank-card.png',
+  format: 'webp',
+  size: {
+    width: 48,
+    height: 48,
+  },
+};
+
+export const TEXT_BLOCK: TextBlockContent = {
+  title: 'Все карты Россельхозбанка работают',
+  description:
+    /* eslint-disable max-len */
+    "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
+};
+
+const items = ['one', 'two'];
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <VerticalLayout
+        className="col-span-12"
+        gap="XL"
+        align="left"
+        version="secondary"
+        isTheme={false}
+        block={{
+          type: 'VerticalLayout',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE },
+            { type: 'ProductTile', content: PRODUCT_TILE },
+          ],
+        }}
+        options={options}
+      />
+      <VerticalLayout
+        className="col-span-12"
+        gap="M"
+        align="left"
+        version="primary"
+        isPadding={true}
+        isInnerPadding={false}
+        isTheme={false}
+        block={{
+          type: 'VerticalLayout',
+          blocks: [
+            {
+              type: 'Headline',
+              content: { title: 'Преимущества вкладов от Россельхозбанка', headlineVersion: 'XS' },
+            },
+            {
+              type: 'TextBlock',
+              content: { ...TEXT_BLOCK, iconVersion: 'small' },
+            },
+            {
+              type: 'TextBlock',
+              content: { ...TEXT_BLOCK, iconVersion: 'big', image },
+            },
+            {
+              type: 'TextBlock',
+              content: { ...TEXT_BLOCK, iconVersion: 'big', image },
+            },
+            {
+              type: 'TextBlock',
+              content: { ...TEXT_BLOCK, iconVersion: 'big', image, items },
+            },
+
+            {
+              type: 'TextBlock',
+              content: { ...TEXT_BLOCK, iconVersion: 'none' },
+            },
+          ],
+        }}
+        options={options}
+      />
+    </div>
+  ),
+};

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