feat(ValidationContextWrapper): add virtualized wrapper

packages/react-ui-validations/.storybook/preview.tsx

@@ -1,5 +1,3 @@
-import { setFilter } from '@skbkontur/react-props2attrs';
-import { findAmongParents } from '@skbkontur/react-sorge/lib';
 import React from 'react';
 import { Preview } from '@storybook/react';
 import { LIVE_EXAMPLES_ADDON_ID, Config as LiveConfig } from '@skbkontur/storybook-addon-live-examples';
@@ -9,6 +7,7 @@ import styled from 'styled-components';
 import { HandThumbDownIcon } from '@skbkontur/icons/icons/HandThumbDownIcon';
 import { HandThumbUpIcon } from '@skbkontur/icons/icons/HandThumbUpIcon';
 import ThumbUpIcon from '@skbkontur/react-icons/ThumbUp';
+import { FixedSizeList as List } from 'react-window';
 
 import * as Validations from '../src/index';
 import * as ReactUI from '../../react-ui/index';
@@ -19,19 +18,6 @@ import { SpaceFiller } from '../docs/Common/SpaceFiller';
 import FeatureFlagsDecorator from './decorators/Features/FeatureFlagsDecorator';
 import { ThemeDecorator } from './decorators/Theme/ThemeDecorator';
 
-setFilter((fiber) => {
-  // Транслируем все пропы только для контролов
-  const isControlComponent = !!findAmongParents(
-    fiber,
-    (fiberParent) => fiberParent.type && typeof fiberParent.type.__KONTUR_REACT_UI__ === 'string',
-  );
-  if (isControlComponent) {
-    return null;
-  }
-  // Для остальных компонентов ограничиваемся тестовыми идентификаторами
-  return ['data-tid', 'data-testid'];
-});
-
 const isDocsEnv = Boolean(process.env.STORYBOOK_REACT_UI_DOCS);
 
 const preview: Preview = {
@@ -100,6 +86,7 @@ addons.setConfig({
       HandThumbUpIcon,
       ThumbUpIcon,
       SpaceFiller,
+      List,
     },
     decorators: [ThemeDecorator, FeatureFlagsDecorator],
   } as LiveConfig,

packages/react-ui-validations/docs/Pages_NEW/Api.mdx

@@ -155,3 +155,43 @@ type RenderErrorMessage =
 ### `data-tid?: string`
 
 Позволяет задать кастомный `data-tid`, для доступа к содержимому ошибок.
+
+## ValidationListWrapper
+
+Обертка для виртуализированного списка, осуществляет поиск валидаций в "неотрендеренных" контролах.
+
+### `children: React.Node`
+
+Дочерний компонент должен быть ровно один. ValidationListWrapper контролирует его поведение путём передачи
+prop-ов ref и data-tid. Для работы с компонентом используется
+[React.cloneElement()](https://facebook.github.io/react/docs/react-api.html#cloneelement);
+
+### `validationInfos: ?ValidationReader<any[]>`
+
+Результат возвращаемый из функции createValidator передает валидации в ValidationListWrapper. Если на любом уровне, вложенных в объект значений есть невалидное
+
+- список считается невалидным.
+
+### `onValidation?: (index: number | null, validation: Nullable<Validation>) => void`
+
+Колбек для получения индекса невалидной строки и сообщения о невалидности
+
+### `level?: ValidationLevel`
+
+См. [Документацию](https://ui.gitlab-pages.kontur.host/storybook-documentation/?path=/docs/react_ui_validations_displaying-validation-level--docs)
+
+### `behaviour?: ValidationBehaviour`
+
+См. [Документацию](https://ui.gitlab-pages.kontur.host/storybook-documentation/?path=/docs/react_ui_validations_displaying-validation-type--docs)
+
+### `independent?: boolean`
+
+См. [Документацию](https://ui.gitlab-pages.kontur.host/storybook-documentation/?path=/docs/react_ui_validations_validator-independent--docs)
+
+### `scrollToElement?: (index: number) => void`
+
+Колбек, принимающий индекс невалидного элемента для возможности прокрутки к невалидному неотрендеренному элементу
+
+### `data-tid?: string`
+
+Позволяет задать кастомный `data-tid`, для доступа к содержимому ошибок.

packages/react-ui-validations/docs/Pages_NEW/Examples/VirtualizedList/VirtualizedList.docs.stories.tsx

@@ -0,0 +1,172 @@
+import { Meta, Story } from '@skbkontur/react-ui/typings/stories';
+import React from 'react';
+import { Button } from '@skbkontur/react-ui/components/Button';
+import { FixedSizeList as List } from 'react-window';
+import { Gapped, Input, ScrollContainer, Switcher } from '@skbkontur/react-ui';
+
+import {
+  createValidator,
+  ValidationBehaviour,
+  ValidationContainer,
+  ValidationListWrapper,
+  ValidationWrapper,
+} from '../../../../src';
+
+export default {
+  title: 'Examples/Virtualized List example',
+  parameters: { creevey: { skip: true } },
+} as Meta;
+
+interface Data {
+  title: string;
+  value: {
+    subtitle: string;
+    value: string;
+  };
+}
+
+export const VirtualizedListExample: Story = () => {
+  const containerRef = React.useRef<ValidationContainer>(null);
+  const containerVirtualRef = React.useRef<ValidationContainer>(null);
+
+  const listRef = React.useRef<List | null>(null);
+
+  const [firstInvalidRow, setFirstInvalidRow] = React.useState<number | null>(null);
+
+  const [validationType, setValidationType] = React.useState('submit');
+
+  const createItem = (i: number, value: string) => {
+    return {
+      title: `title ${i}`,
+      value: { subtitle: `subtitle ${i}`, value },
+    };
+  };
+
+  const data: Data[] = new Array(100).fill(0).map((_, i) => createItem(i, String(i)));
+
+  const [values, setValues] = React.useState({ array: data });
+
+  const validator = createValidator<{ array: Data[] }>((b) => {
+    b.prop(
+      (x) => x.array,
+      (b) => {
+        b.array(
+          (x) => x,
+          (b) => {
+            b.prop(
+              (x) => x.value,
+              (b) => {
+                b.prop(
+                  (x) => x.subtitle,
+                  (b) => {
+                    b.invalid(() => true, 'invalid sub');
+                  },
+                );
+                b.prop(
+                  (x) => x.value,
+                  (b) => {
+                    b.invalid((x) => parseInt(x) > 40, 'invalid', validationType as ValidationBehaviour);
+                  },
+                );
+              },
+            );
+          },
+        );
+      },
+    );
+  });
+
+  const validationRules = validator(values);
+  const [isValid, setIsValid] = React.useState(true);
+  const [isValidVirtual, setIsValidVirtual] = React.useState(true);
+
+  const handleValidate = async () => {
+    const result = await containerRef.current?.validate();
+    setIsValid(!!result);
+  };
+  const handleValidateVirtual = async () => {
+    const result = await containerVirtualRef.current?.validate();
+    setIsValidVirtual(!!result);
+  };
+
+  const renderRow = (item: Data, index: number, style: any = {}) => (
+    <div style={{ ...style, display: 'flex', alignItems: 'center', gap: 4 }}>
+      <div style={{ padding: 6 }}>
+        <Gapped>
+          <ValidationWrapper
+            validationInfo={validationRules
+              .getNode((x) => x.array)
+              .getNodeByIndex(index)
+              .getNode((x) => x.value.value)
+              .get()}
+          >
+            <Input
+              value={item.value.value}
+              onValueChange={(value) => {
+                setValues({
+                  array: [...values.array.slice(0, index), createItem(index, value), ...values.array.slice(index + 1)],
+                });
+              }}
+            />
+          </ValidationWrapper>
+          {item.title}
+        </Gapped>
+      </div>
+    </div>
+  );
+
+  return (
+    <div>
+      <Gapped>
+        Тип валидации:
+        <Switcher
+          items={['submit', 'lostfocus', 'immediate']}
+          onValueChange={setValidationType}
+          value={validationType}
+        />
+      </Gapped>
+      <div style={{ display: 'flex', gap: 32 }}>
+        <div>
+          <h3>С виртуализацией</h3>
+          <ValidationContainer ref={containerVirtualRef}>
+            <div style={{ display: 'flex', width: '400px', flexDirection: 'column', gap: 16 }}>
+              <ValidationListWrapper
+                validationInfos={validationRules.getNode((x) => x.array).getFirstNodeWithValidation()}
+                onValidation={(index) => setFirstInvalidRow(index)}
+                scrollToElement={(index) => {
+                  listRef.current?.scrollToItem(index, 'center');
+                }}
+              >
+                <List
+                  height={400}
+                  itemCount={values.array.length}
+                  itemSize={42}
+                  width={400}
+                  ref={listRef}
+                  itemData={values.array}
+                  children={({ index, style, data }) => {
+                    return renderRow(data[index], index, style);
+                  }}
+                />
+              </ValidationListWrapper>
+              <Button onClick={handleValidateVirtual}>validate (isValid: {isValidVirtual.toString()})</Button>
+              {firstInvalidRow ? `first invalid row is ${firstInvalidRow}` : null}
+            </div>
+          </ValidationContainer>
+        </div>
+
+        <div>
+          <h3>Без виртуализации</h3>
+          <ValidationContainer ref={containerRef}>
+            <div style={{ display: 'flex', width: '400px', flexDirection: 'column', gap: 16 }}>
+              <ScrollContainer maxHeight={400}>
+                {values.array.map((item, index) => renderRow(item, index))}
+              </ScrollContainer>
+              <Button onClick={handleValidate}>validate (isValid: {isValid.toString()})</Button>
+            </div>
+          </ValidationContainer>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/react-ui-validations/docs/Pages_NEW/Examples/VirtualizedList/VirtualizedList.mdx

@@ -0,0 +1,13 @@
+import { Story } from '@storybook/blocks';
+import * as DocsStories from './VirtualizedList.docs.stories.tsx';
+import { Meta } from '../../../../.storybook/Meta';
+
+<Meta of={DocsStories} />
+
+# Валидация массива
+
+В примере показана валидация с виртуализированным списком и без
+
+### Виртуальный список
+
+<Story of={DocsStories.VirtualizedListExample} />

packages/react-ui-validations/package.json

@@ -75,10 +75,10 @@
     "@skbkontur/storybook-addon-live-examples": "0.0.11",
     "@storybook/addon-a11y": "7.6.18",
     "@storybook/addon-controls": "7.6.18",
+    "@storybook/addon-docs": "7.6.18",
     "@storybook/addon-essentials": "7.6.18",
     "@storybook/addon-interactions": "^7.6.18",
     "@storybook/addon-links": "7.6.18",
-    "@storybook/addon-docs": "7.6.18",
     "@storybook/blocks": "7.6.18",
     "@storybook/react": "7.6.18",
     "@storybook/react-webpack5": "7.6.18",
@@ -91,6 +91,7 @@
     "@types/react-dom": "18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/react-window": "1.8.8",
     "@types/styled-components": "^5.1.34",
     "@types/warning": "^3.0.0",
     "babel-loader": "^9.1.3",
@@ -118,6 +119,7 @@
     "react-hot-loader": "^4.13.1",
     "react-router-dom": "^6.23.1",
     "react-syntax-highlighter": "15.5.0",
+    "react-window": "1.8.10",
     "rimraf": "^5.0.7",
     "rollup": "^4.18.0",
     "rollup-plugin-typescript2": "^0.36.0",