@skbkontur/react-ui 0.0.0-a59755ee68 → 0.0.0-a6f09fbded

package/lib/withClassWrapper.d.ts

@@ -1,67 +1,67 @@
-import React from 'react';
-import { ReactUIComponentWithRef } from './forwardRefAndName';
-/**
- * HOC for moving from Class to Functional components.
- *
- * Used to remove distinctions between Class and Functional refs.
- *
- * @param RFC Functional component wrapped in forwardRefAndName.
- * @returns Class component that wraps Functional component.
- */
-export declare function withClassWrapper<T, P>(RFC: ReactUIComponentWithRef<T, P>): {
-    new (props: P): {
-        instancePropertiesRef: React.RefObject<T>;
-        componentDidMount(): void;
-        render(): React.JSX.Element;
-        context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    new (props: P, context: any): {
-        instancePropertiesRef: React.RefObject<T>;
-        componentDidMount(): void;
-        render(): React.JSX.Element;
-        context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    __KONTUR_REACT_UI__: string;
-    displayName: string;
-    FC: ReactUIComponentWithRef<T, P>;
-    contextType?: React.Context<any> | undefined;
-};
-export interface InstanceRefType<T> {
-    instanceRef: React.MutableRefObject<T>;
-}
+import React from 'react';
+import type { ReactUIComponentWithRef } from './forwardRefAndName';
+/**
+ * HOC for moving from Class to Functional components.
+ *
+ * Used to remove distinctions between Class and Functional refs.
+ *
+ * @param RFC Functional component wrapped in forwardRefAndName.
+ * @returns Class component that wraps Functional component.
+ */
+export declare function withClassWrapper<T, P>(RFC: ReactUIComponentWithRef<T, P>): {
+    new (props: P): {
+        instancePropertiesRef: React.RefObject<T>;
+        componentDidMount(): void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: P, context: any): {
+        instancePropertiesRef: React.RefObject<T>;
+        componentDidMount(): void;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    __KONTUR_REACT_UI__: string;
+    displayName: string;
+    FC: ReactUIComponentWithRef<T, P>;
+    contextType?: React.Context<any> | undefined;
+};
+export interface InstanceRefType<T> {
+    instanceRef: React.MutableRefObject<T>;
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "0.0.0-a59755ee68",
+  "version": "0.0.0-a6f09fbded",
   "description": "UI Components",
   "main": "cjs/index.js",
   "module": "index.js",
   "sideEffects": false,
-  "homepage": "https://tech.skbkontur.ru/react-ui/unstable/0.0.0-a59755ee68/",
+  "homepage": "https://tech.skbkontur.ru/kontur-ui/",
   "repository": {
     "type": "git",
     "url": "git@github.com:skbkontur/retail-ui.git"
@@ -14,7 +14,7 @@
     "url": "https://github.com/skbkontur/retail-ui/issues"
   },
   "scripts": {
-    "prebuild": "run-s clean build:types",
+    "prebuild": "run-s clean \"build:types\"",
     "build:types": "tsc -p ./prod.tsconfig.json --emitDeclarationOnly --diagnostics --outDir build",
     "build:cjs": "cross-env BABEL_ENV=cjs node scripts/build",
     "build:esm": "node scripts/build",
@@ -22,17 +22,16 @@
     "clean": "git clean -fdxqe node_modules",
     "prerelease": "node scripts/publish/prepublish && yarn build",
     "release": "npm publish ./build --workspaces=false",
-    "postrelease": "yarn deploy",
-    "predeploy": "rimraf .styleguide/deploy && yarn run styleguide:build",
-    "deploy": "gh-pages -a -d .styleguide/deploy -r git@github.com:skbkontur/react-ui.git",
-    "storybook": "node ../../scripts/patch-node-options.js \"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-build": "node ../../scripts/patch-node-options.js \"cross-env STORYBOOK_REACT_UI_DOCS=true storybook build --docs -o .storybook/build --quiet\"",
-    "storybook:test": "node ../../scripts/patch-node-options.js \"cross-env STORYBOOK_REACT_UI_TEST=true storybook dev --ci -p 6060\"",
-    "storybook:docs": "node ../../scripts/patch-node-options.js \"cross-env STORYBOOK_REACT_UI_DOCS=true storybook dev --docs -p 6061\"",
-    "storybook:serve": "serve -l 6060 .storybook/build",
-    "styleguide": "node ../../scripts/patch-node-options.js \"styleguidist server --config .styleguide/config/dev.config.js\"",
-    "styleguide:build": "node ../../scripts/patch-node-options.js \"node .styleguide/build\"",
+    "build-old-docs": "rimraf .styleguide/deploy && yarn run styleguide:build",
+    "deploy-old-docs": "gh-pages -a -d .styleguide/deploy -r git@github.com:skbkontur/react-ui.git",
+    "storybook": "storybook dev -p 6060",
+    "storybook:build": "cross-env STORYBOOK_REACT_UI_TEST=true storybook build -o .storybook/build --quiet",
+    "storybook:docs-build": "cross-env STORYBOOK_REACT_UI_DOCS=true storybook build --docs -c .storybook-docs -o .storybook/build --quiet",
+    "storybook:test": "cross-env STORYBOOK_REACT_UI_TEST=true storybook dev --ci -p 6060",
+    "storybook:docs": "cross-env STORYBOOK_REACT_UI_DOCS=true storybook dev --docs -p 6061 -c .storybook-docs",
+    "storybook:serve": "yarn serve -l 6060 .storybook/build",
+    "styleguide": "styleguidist server --config .styleguide/config/dev.config.js",
+    "styleguide:build": "node .styleguide/build",
     "lint": "run-p -c lint:*",
     "lint:eslint": "cross-env TIMING=1 yarn eslint ./",
     "lint:tsc": "tsc --noEmit --diagnostics",
@@ -43,6 +42,7 @@
     "test": "jest --detectOpenHandles",
     "test:watch": "yarn test --watch",
     "creevey": "node ../../scripts/creevey-prepare.js .creevey/config.mts && cross-env BABEL_ENV=cjs creevey -c .creevey/config.mts",
+    "creevey:ci": "start-server-and-test storybook:serve http://localhost:6060 creevey",
     "creevey:update": "cross-env BABEL_ENV=cjs creevey -c .creevey/config.mts --update",
     "creevey:ui": "yarn creevey --ui",
     "report:eslint": "yarn eslint -f eslint-html-reporter/reporter.js -o reports/eslint/index.html"
@@ -52,15 +52,14 @@
     "@babel/runtime": "^7.24.6",
     "@emotion/css": "^11.11.2",
     "@skbkontur/global-object": "^0.4.4",
+    "@skbkontur/react-imask": "^7.6.4",
     "eventemitter3": "^5.0.1",
     "invariant": "^2.2.4",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "normalize-wheel": "^1.0.1",
-    "prop-types": "^15.8.1",
     "react-focus-lock": "2.11.2",
-    "react-imask": "7.6.1",
     "react-input-mask": "2.0.4",
     "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
@@ -78,9 +77,7 @@
     "@babel/preset-react": "^7.24.6",
     "@babel/preset-typescript": "^7.24.6",
     "@babel/register": "^7.24.6",
-    "@cfaester/enzyme-adapter-react-18": "^0.8.0",
     "@skbkontur/icons": "1.10.0",
-    "@skbkontur/react-icons": "5.2.9",
     "@skbkontur/react-props2attrs": "0.1.3",
     "@skbkontur/react-sorge": "0.2.1",
     "@skbkontur/storybook-addon-live-examples": "0.0.17",
@@ -98,14 +95,12 @@
     "@testing-library/react": "15.0.7",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@types/enzyme": "^3.10.10",
     "@types/invariant": "^2.2.35",
     "@types/jest": "29.5.12",
     "@types/jest-axe": "^3.5.3",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.isequal": "^4.5.5",
     "@types/lodash.throttle": "^4.1.6",
-    "@types/prop-types": "15.7.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/react-input-mask": "3.0.5",
@@ -116,16 +111,14 @@
     "axios": "^1.7.2",
     "babel-jest": "29.7.0",
     "babel-loader": "^9.1.3",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "chalk": "4.1.0",
     "copyfiles": "^2.4.1",
     "core-js": "^3.37.1",
-    "creevey": "0.10.0-beta.13",
+    "creevey": "0.10.0-beta.47",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "dotenv": "^16.4.5",
     "dts-css-modules-loader": "^2.0.1",
-    "enzyme": "^3.11.0",
     "eslint-plugin-jest": "28.5.0",
     "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -140,6 +133,7 @@
     "jest": "29.7.0",
     "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-junit": "^16.0.0",
     "jest-teamcity-reporter": "^0.9.0",
     "npm-run-all": "^4.1.5",
     "output-file-sync": "^2.0.1",
@@ -151,8 +145,9 @@
     "selenium-webdriver": "^4.27.0",
     "semver": "^7.6.2",
     "serve": "^13.0.2",
-    "string-replace-loader": "3.1.0",
+    "start-server-and-test": "1.14.0",
     "storybook": "7.6.18",
+    "string-replace-loader": "3.1.0",
     "style-loader": "^4.0.0",
     "stylelint": "^16.6.0",
     "stylelint-config-standard": "^36.0.0",
@@ -163,8 +158,8 @@
     "webpack": "^5.91.0"
   },
   "peerDependencies": {
-    "react": ">=16.9",
-    "react-dom": ">=16.9"
+    "react": ">=16.9 <19",
+    "react-dom": ">=16.9 <19"
   },
   "publishConfig": {
     "tag": "unstable"

package/cjs/components/Autocomplete/__creevey__/Autocomplete.creevey.mts

@@ -1,239 +0,0 @@
-import { story, kind, test } from 'creevey';
-
-import { delay } from '../../../lib/delay';
-
-const commonTests = () => {
-  test('focus and type text', async (context) => {
-    const screenshotElement = context.webdriver.findElement({
-      css: '#test-element',
-    });
-    const autocompleteElement = context.webdriver.findElement({
-      css: '[data-comp-name~="Autocomplete"]',
-    });
-    await context.webdriver.actions({ bridge: true }).click(autocompleteElement).sendKeys('o').perform();
-    await delay(1000);
-    await context.matchImage(await screenshotElement.takeScreenshot());
-  });
-};
-
-const mobileHintsTests = () => {
-  test('noInputValue', async (context) => {
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: 'input' }))
-      .perform();
-    await delay(200);
-    await context.matchImage(await context.webdriver.takeScreenshot(), 'noInputValue');
-  });
-
-  test('nothingWasFound', async (context) => {
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: 'input' }))
-      .sendKeys('abc')
-      .perform();
-    await delay(200);
-    await context.matchImage(await context.webdriver.takeScreenshot(), 'nothingWasFound');
-  });
-
-  test('updateValue', async (context) => {
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: 'input' }))
-      .sendKeys('one')
-      .perform();
-    await delay(200);
-    await context.webdriver
-      .actions({
-        bridge: true,
-      })
-      .click(context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }))
-      .click(context.webdriver.findElement({ css: 'input' }))
-      .perform();
-    await delay(200);
-    await context.matchImage(await context.webdriver.takeScreenshot(), 'updateValue');
-  });
-};
-
-const sizeTests = () => {
-  test('focus and type text small', async (context) => {
-    const screenshotElement = context.webdriver.findElement({
-      css: '#test-element',
-    });
-    const autocompleteElements = await context.webdriver.findElements({
-      css: '[data-comp-name~="Autocomplete"]',
-    });
-    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[0]).sendKeys('o').perform();
-    await delay(1000);
-    await context.matchImage(await screenshotElement.takeScreenshot());
-  });
-
-  test('focus and type text medium', async (context) => {
-    const screenshotElement = context.webdriver.findElement({
-      css: '#test-element',
-    });
-    const autocompleteElements = await context.webdriver.findElements({
-      css: '[data-comp-name~="Autocomplete"]',
-    });
-    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[1]).sendKeys('o').perform();
-    await delay(1000);
-    await context.matchImage(await screenshotElement.takeScreenshot());
-  });
-
-  test('focus and type text large', async (context) => {
-    const screenshotElement = context.webdriver.findElement({
-      css: '#test-element',
-    });
-    const autocompleteElements = await context.webdriver.findElements({
-      css: '[data-comp-name~="Autocomplete"]',
-    });
-    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[2]).sendKeys('o').perform();
-    await delay(1000);
-    await context.matchImage(await screenshotElement.takeScreenshot());
-  });
-};
-
-const menuPosTests = () => {
-  test('focus and type text menu top', async (context) => {
-    const screenshotElement = context.webdriver.findElement({ css: '#test-element' });
-    const autocompleteElements = await context.webdriver.findElements({ css: '[data-comp-name~="Autocomplete"]' });
-
-    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[0]).sendKeys('o').perform();
-    await delay(1000);
-
-    await context.matchImage(await screenshotElement.takeScreenshot());
-  });
-  test('focus and type text menu bottom', async (context) => {
-    const screenshotElement = context.webdriver.findElement({ css: '#test-element' });
-    const autocompleteElements = await context.webdriver.findElements({ css: '[data-comp-name~="Autocomplete"]' });
-
-    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[1]).sendKeys('o').perform();
-    await delay(1000);
-
-    await context.matchImage(await screenshotElement.takeScreenshot());
-  });
-};
-
-kind('Autocomplete', () => {
-  story('Simple', () => {
-    test('idle', async (context) => {
-      await context.matchImage(await context.takeScreenshot(), 'idle');
-    });
-
-    test('focused', async (context) => {
-      const autocompleteElement = context.webdriver.findElement({
-        css: '[data-comp-name~="Autocomplete"]',
-      });
-      await context.webdriver.actions({ bridge: true }).click(autocompleteElement).perform();
-      await delay(1000);
-      await context.matchImage(await autocompleteElement.takeScreenshot());
-    });
-
-    commonTests();
-  });
-
-  story('WithRenderItem', () => {
-    commonTests();
-  });
-
-  story('WithBigRenderItemWidth', () => {
-    commonTests();
-  });
-
-  story('WithFixedMenuSize', () => {
-    commonTests();
-  });
-
-  story('WithPercentageWidth', () => {
-    commonTests();
-  });
-
-  story('WithFixedWidth', () => {
-    commonTests();
-  });
-
-  story('WithZeroWidth', () => {
-    commonTests();
-  });
-
-  story('MobileHints', () => {
-    mobileHintsTests();
-  });
-
-  story('MobileHintsEN', () => {
-    mobileHintsTests();
-  });
-
-  story('MobileWithTitle', () => {
-    test('opened', async (context) => {
-      await context.webdriver
-        .actions({
-          bridge: true,
-        })
-        .click(context.webdriver.findElement({ css: 'input' }))
-        .perform();
-      await delay(200);
-      await context.matchImage(await context.webdriver.takeScreenshot(), 'opened');
-    });
-  });
-
-  story('WithManualPosition', ({ setStoryParameters }) => {
-    setStoryParameters({
-      skip: {
-        'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ },
-        flaky: {
-          in: ['firefox2022'],
-          tests: ['opened top with portal', 'opened bottom with portal'],
-        },
-      },
-    });
-
-    test('opened top with portal', async (context) => {
-      const screenshotElement = context.webdriver.findElement({
-        css: '#test-element',
-      });
-      const autocompleteElement = context.webdriver.findElement({
-        css: '[data-comp-name~="Autocomplete"]',
-      });
-      await context.webdriver.actions({ bridge: true }).click(autocompleteElement).sendKeys('o').perform();
-      await delay(1000);
-      await context.matchImage(await screenshotElement.takeScreenshot());
-    });
-
-    test('opened bottom with portal', async (context) => {
-      const screenshotElement = context.webdriver.findElement({
-        css: '#test-element',
-      });
-      const autocompleteElement = context.webdriver.findElement({
-        css: '[data-comp-name~="Autocomplete"]',
-      });
-      await context.webdriver
-        .actions({ bridge: true })
-        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
-        .click(autocompleteElement)
-        .sendKeys('o')
-        .perform();
-      await delay(1000);
-      await context.matchImage(await screenshotElement.takeScreenshot());
-    });
-  });
-
-  story('Size', () => {
-    sizeTests();
-  });
-
-  story('WithDisabledPortal', () => {
-    commonTests();
-    menuPosTests();
-  });
-
-  story('MenuPos', () => {
-    menuPosTests();
-  });
-});

package/cjs/components/Autocomplete/__docs__/Autocomplete.mdx

@@ -1,26 +0,0 @@
-import * as AutocompleteStories from './Autocomplete.docs.stories.tsx';
-import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
-import { Meta } from '../../../.storybook/Meta';
-import { Autocomplete } from '../Autocomplete';
-import { Button, Group, Gapped } from '@skbkontur/react-ui';
-
-<Meta of={AutocompleteStories} />
-
-# Autocomplete
-
-<Description />
-
-## Базовый пример
-
-<Primary />
-
-## Пропы
-
-<details>
-  <summary>Открыть таблицу с пропами</summary>
-  <ArgTypes />
-</details>
-
-## Примеры использования
-
-<Stories title="" includePrimary={false} />