docs(MiniModal): update story example, screenshot test

package.json

@@ -35,6 +35,8 @@
     }
   },
   "resolutions": {
-    "selenium-webdriver": "4.0.0-beta.4"
+    "selenium-webdriver": "4.0.0-beta.4",
+    "@storybook/addons": "7.6.18",
+    "react-docgen-typescript": "2.3.0-beta.0"
   }
 }

packages/react-ui-validations/.storybook/decorators/Features/FeatureFlagsDecorator.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { Decorator } from '@storybook/react';
+
+import { ValidationsFeatureFlagsContext } from '../../../src/';
+
+const createFeatureFlagsWithBoolean = (featureFlags: string[]) =>
+  featureFlags.reduce((acc, featureFlag) => {
+    return { ...acc, [featureFlag]: true };
+  }, {});
+
+const FeatureFlagsDecorator: Decorator = (Story, context) => {
+  const { globals } = context;
+  const { activeFeatureFlags }: { [key: string]: string[] } = globals.multiselect;
+  const activeFeatureFlagsWithBoolean =
+    activeFeatureFlags?.length > 0 ? createFeatureFlagsWithBoolean(activeFeatureFlags) : {};
+  return (
+    <ValidationsFeatureFlagsContext.Provider value={{ ...activeFeatureFlagsWithBoolean }}>
+      <Story />
+    </ValidationsFeatureFlagsContext.Provider>
+  );
+};
+
+export default FeatureFlagsDecorator;

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

@@ -0,0 +1,43 @@
+import { AddonConfig, ElementsType } from '../../typings/storybookAddonMultiple';
+import { validationsFeatureFlagsDefault } from '../../src';
+
+const featureFlags = Object.keys(validationsFeatureFlagsDefault).map((featureFlag) => ({
+  value: featureFlag,
+  title: featureFlag,
+}));
+
+const createFeatureFlagsElements = (): ElementsType => {
+  const elements: ElementsType = [
+    {
+      type: 'userDefinedSelect',
+      allowEmpty: true,
+      queryKey: 'activeFeatureFlags',
+      options: featureFlags,
+    },
+    {
+      type: 'singleSelect',
+      queryKey: 'emptyFeatureFlags',
+      options: [
+        {
+          value: 'Фиче-флаги не созданы',
+          title: 'Фиче-флаги не созданы',
+        },
+      ],
+    },
+    { type: 'reset' },
+  ];
+
+  return elements.filter((el) =>
+    featureFlags.length === 0
+      ? 'queryKey' in el && el.queryKey === 'emptyFeatureFlags'
+      : !('queryKey' in el && el.queryKey === 'emptyFeatureFlags'),
+  );
+};
+
+export const featureFlagsConfig: AddonConfig = {
+  featureFlags: {
+    icon: 'flag',
+    viewMode: 'docs',
+    elements: createFeatureFlagsElements(),
+  },
+};

packages/react-ui-validations/.storybook/main.ts

@@ -1,14 +1,34 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
+const isDocsEnv = Boolean(process.env.STORYBOOK_REACT_UI_VALIDATIONS_DOCS);
+
 const config: StorybookConfig = {
-  stories: ['../stories/**/*.stories.tsx'],
-  addons: ['creevey'],
+  stories: ['../stories/**/*.stories.tsx', '../stories/**/*.mdx'],
+  docs: {
+    docsMode: isDocsEnv,
+  },
+  addons: [
+    'creevey',
+    'storybook-addon-multiselect',
+    '@storybook/blocks',
+    '@storybook/addon-docs',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        docsMode: true,
+      },
+    },
+  ],
   framework: {
     name: '@storybook/react-webpack5',
     options: {
+      fastRefresh: true,
       strictMode: true,
     },
   },
+  core: {
+    disableWhatsNewNotifications: true,
+  },
 };
 
 export default config;

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

@@ -3,6 +3,9 @@ import { findAmongParents } from '@skbkontur/react-sorge/lib';
 import { withCreevey } from 'creevey/addon';
 import React from 'react';
 
+import { featureFlagsConfig } from './featureFlagsConfig/featureFlagsConfig';
+import FeatureFlagsDecorator from './decorators/Features/FeatureFlagsDecorator';
+
 setFilter((fiber) => {
   // Транслируем все пропы только для контролов
   const isControlComponent = !!findAmongParents(
@@ -22,11 +25,19 @@ export const decorators = [
       <Story />
     </div>
   ),
+  FeatureFlagsDecorator,
   withCreevey(),
 ];
 
 export const parameters = {
   creevey: {
     captureElement: '#test-element',
   },
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: ['FeatureFlags validations'],
+    },
+  },
+  multiselect: featureFlagsConfig,
 };

packages/react-ui-validations/.storybook/webpack.config.js

@@ -9,7 +9,11 @@ module.exports = async ({ config }) => {
 
   config.entry.unshift('core-js/stable');
 
+  // storybook's rule for css doesn't handle .mdx
+  const filteredStorybooksWebpackRules = (config.module.rules || []).filter((r) => r.test && r.test.test('.mdx'));
+
   config.module.rules = [
+    ...filteredStorybooksWebpackRules,
     {
       test: /\.(ts|tsx)$/,
       exclude: /node_modules/,

packages/react-ui-validations/docs/Pages/Examples/CustomControls/CustomControls.md

@@ -5,10 +5,10 @@
 Для этого в таком контроле/обёртке необходимо обеспечить следующие пропы:
 
 1. `ref` - DOM элемент нужен для правильной авто-прокрутки страницы до элемента с ошибкой ([подробнее](#/scroll-to-validation)).
-1. `error` - сеттит true, для соответствующего уровня валидации.
-1. `warning` - сеттит true, для соответствующего уровня валидации.
-1. `onBlur` - обеспечивает работу зависимых валидаций ([подробнее](#/dependent-validation)).
-1. `onChange` - отслеживается начало процесса ввода данных.
+2. `error` - сеттит true, для соответствующего уровня валидации.
+3. `warning` - сеттит true, для соответствующего уровня валидации.
+4. `onBlur` - обеспечивает работу зависимых валидаций ([подробнее](#/dependent-validation)).
+5. `onChange` - отслеживается начало процесса ввода данных.
 
 В типах их можно представить так:
 
@@ -20,8 +20,8 @@
         onChange?: React.ChangeEventHandler<Elem>;
     }
 
-Для контролов `react-ui` также прокидывается проп `onValueChange`. Чтобы избежать предупреждения в консоле (`Unknown event handler property 'onValueChange'`), этот проп можно "вырезать" из пропов (см. пример). 
+Для контролов `react-ui` также прокидывается проп `onValueChange`. Чтобы избежать предупреждения в консоле (`Unknown event handler property 'onValueChange'`), этот проп можно "вырезать" из пропов (см. пример).
 
 ### Пример
-    
+
     !!DemoWithCode!!./CustomControls

packages/react-ui-validations/package.json

@@ -18,6 +18,7 @@
     "deploy:docs": "gh-pages -a -d dist -r git@github.com:skbkontur/react-ui-validations.git",
     "storybook": "node ../../scripts/patch-node-options.js \"cross-env STORYBOOK_REACT_UI_TEST=true storybook dev -p 6060\"",
     "storybook:build": "node ../../scripts/patch-node-options.js \"cross-env STORYBOOK_REACT_UI_TEST=true storybook build -o .storybook/build --quiet\"",
+    "storybook:docs": "node ../../scripts/patch-node-options.js \"cross-env STORYBOOK_REACT_UI_VALIDATIONS_DOCS=false storybook dev --docs -p 6061\"",
     "storybook:serve": "serve -l 6060 .storybook/build",
     "start:docs": "node ../../scripts/patch-node-options.js \"webpack-dev-server --config webpack.docs.config.js --hot \"",
     "lint": "npm-run-all --continue-on-error --parallel lint:*",
@@ -71,6 +72,8 @@
     "@skbkontur/react-props2attrs": "0.1.3",
     "@skbkontur/react-sorge": "0.2.1",
     "@storybook/addon-docs": "7.6.18",
+    "@storybook/blocks": "7.6.18",
+    "@storybook/components": "7.6.18",
     "@storybook/react": "7.6.18",
     "@storybook/react-webpack5": "7.6.18",
     "@testing-library/jest-dom": "6.4.5",
@@ -116,6 +119,7 @@
     "serve": "^13.0.2",
     "shelljs": "^0.8.3",
     "storybook": "7.6.18",
+    "storybook-addon-multiselect": "^2.0.1",
     "string-replace-loader": "^3.1.0",
     "style-loader": "^4.0.0",
     "styled-components": "^6.1.11",

packages/react-ui-validations/stories/docs/FeatureFlags.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="FeatureFlags validations" />
+
+# Feature flags validations
+
+Включение и отключение отдельных фич через ValidationsFeatureFlagsContext
+
+## Нет доступных фиче-флагов

packages/react-ui-validations/typings/storybookAddonMultiple.d.ts

@@ -0,0 +1,55 @@
+// нужно для типизации конфига при использовании аддона storybook-addon-multiselect, при импорте библиотеки появляется ошибка ts.
+import { ReactNode } from 'react';
+import { API } from '@storybook/manager-api';
+
+export type AddonConfig = AddonDisabled | Addon;
+
+export type AddonDisabled = {
+  disable: boolean;
+};
+
+export type Addon = { [key: string]: AddonEntry };
+
+export type ElementsType = Array<Reset | SingleSelect | MultiSelect>;
+
+export type AddonEntry = {
+  name?: string;
+  description?: string;
+  icon?: ReactNode;
+  elements: ElementsType;
+  viewMode?: 'story' | 'docs' | 'both';
+};
+
+export type Reset = {
+  type: 'reset';
+};
+
+export type SelectSharedProps = {
+  title?: string;
+  allowEmpty?: boolean;
+  queryKey: string;
+  localStorageKey?: string;
+};
+
+export type SingleSelectOnChange = (value: string | undefined, storybookApi: API) => string | undefined;
+export type SingleSelect = SelectSharedProps & {
+  type: 'singleSelect';
+  options: Option[];
+  defaultValue?: string;
+  onChange?: string | SingleSelectOnChange;
+};
+
+export type MultiSelectOnChange = (value: string[], storybookApi: API) => string[];
+export type MultiSelect = SelectSharedProps & {
+  type: 'multiSelect' | 'userDefinedSelect';
+  options: Option[];
+  defaultValues?: string[];
+  onChange?: string | MultiSelectOnChange;
+};
+
+export type Option = {
+  value: string;
+  title: ReactNode;
+  right?: ReactNode;
+  icon?: ReactNode;
+};

packages/react-ui/.babelrc.js

@@ -1,3 +1,5 @@
+const isDocsEnv = Boolean(process.env.STORYBOOK_REACT_UI_DOCS);
+
 module.exports = {
   assumptions: {
     setPublicClassFields: true,
@@ -12,5 +14,8 @@ module.exports = {
   plugins: [
     ['@babel/plugin-transform-runtime', { useESModules: true, version: '7.16.5' }],
     ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ...(isDocsEnv
+      ? [['transform-react-remove-prop-types', { mode: 'remove', ignoreFilenames: ['node_modules'] }]]
+      : []),
   ],
 };

packages/react-ui/.creevey/config.js

@@ -1,9 +1,9 @@
 const path = require('path');
 
 const axios = require('axios');
-const { hybridStoriesProvider } = require('creevey');
 
 require('dotenv').config({ path: '../../.env' });
+const { hybridStoriesProvider } = require('creevey');
 
 /**
  * Debuggin instructions: https://wiki.skbkontur.ru/pages/viewpage.action?pageId=418699157