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

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

@@ -0,0 +1,51 @@
+import '../../setup-fixture';
+import { RichTextBlock } from './RichTextBlock';
+import type { RichTextBlockContent } from './RichTextBlockContent';
+
+const HTML = `
+  <p class="h1">Заголовок 1</p>
+  <p class="h2">Заголовок 2</p>
+  <p class="h3">Заголовок 3</p>
+  <p class="h4">Заголовок 4</p>
+  <p class="h5">Заголовок 5</p>
+  <p class="h6">Заголовок 6</p>
+  <p>Параграф, в котором много текста и даже <a href="#">ссылка</a></p>
+  <p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>
+  <ul>
+    <li>Список с точками</li>
+    <li>Список с точками</li>
+  </ul>
+  <ol>
+    <li>Нумерованный список</li>
+    <li>Нумерованный список</li>
+  </ol>
+`;
+
+export const RICH_TEXT_SEPARATOR: RichTextBlockContent = {
+  __html:
+    '<table>' +
+    '<thead><tr><th><p>Полное наименование организации</p></th><th><p>Адрес (место нахождения)</p></th><th><p>Доля участия</p></th></tr></thead>' +
+    '<tbody>' +
+    '<tr><td><p><a href="rshb.ru">Акционерное общество «Национальное бюро кредитных историй»</p></a></td>' +
+    '<td><p>Россия, г. Москва, Скатертный пер., д. 20, стр.1</p></td><td><p>0,5%</p></td></tr>' +
+    '<tr><td><p><a href="rshb.ru">Акционерное общество\n' +
+    '«Негосударственный пенсионный фонд\n' +
+    '«Первый национальный пенсионный фонд»</p></td><td><p>Россия, г. Москва, ул. Большая Дмитровка,\n' +
+    'д. 23, стр.1</a></p></td><td><p>2,2%</p></td></tr>' +
+    '</tbody>' +
+    '</table>',
+  richVersion: 'horizontal-separator',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <RichTextBlock className="col-span-12" __html={HTML} />
+    </div>
+  ),
+  'horizontal-separator': (
+    <div className="container grid grid-cols-12">
+      <RichTextBlock className="col-span-12" {...RICH_TEXT_SEPARATOR} />
+    </div>
+  ),
+};

package/src/components/SafeDepositRental/WrapperSelect.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { OptionProps, Select } from '../../ui-kit/Select/Select';
+import { Option, Select } from '../../ui-kit/Select/Select';
 import { Currency } from '../ExchangeRateTile/CurrencyProps';
 
 interface WrapperSelectProps {
@@ -14,7 +14,7 @@ interface WrapperSelectProps {
 
 export const WrapperSelect = JSX<WrapperSelectProps>(
   ({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
-    const dataFormat: OptionProps[] = data
+    const dataFormat: Option[] = data
       .filter(Boolean)
       .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
     const selectedObj = dataFormat.find((_) => _.key === selected);

package/src/components/SafeDepositRental/useGetRegions.ts

@@ -9,8 +9,10 @@ export interface Region {
   name?: string;
 }
 
+const EMPTY_VALUE = [];
+
 export function useGetRegions(): Region[] {
   const { data } = useAsyncData<Region[]>(REGIONS_URL, fetchJSONUnsafe);
 
-  return data || [];
+  return data || EMPTY_VALUE;
 }

package/src/components/TariffsTable/TariffsTable.tsx

@@ -46,7 +46,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     return (
       <BlockWrapper
-        className={`p-12 overflow-hidden relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`}
+        className={`p-default overflow-hidden relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`}
         {...rest}
       >
         {renderTitle({ title, description })}

package/src/components/TariffsTable/TariffsTable.ui.json

@@ -11,6 +11,9 @@
               "image": {
                 "ui:field": "picture"
               },
+              "dataUrl": {
+                "ui:widget": "sourceBook"
+              },
               "buttons": {
                 "items": {
                   "icon": {

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;
 }