@vkontakte/vkui 4.23.0 → 4.25.2

package/.cache/ts/src/lib/dom.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-export { canUseDOM, canUseEventListeners, onDOMLoaded } from '@vkontakte/vkjs';
+import * as React from "react";
+export { canUseDOM, canUseEventListeners, onDOMLoaded } from "@vkontakte/vkjs";
 export interface DOMContextInterface {
     /**
      * @ignore
@@ -12,10 +12,10 @@ export interface DOMContextInterface {
 }
 export declare type DOMProps = DOMContextInterface;
 export declare const getDOM: () => {
-    window: Window & typeof globalThis;
-    document: Document;
+    window: (Window & typeof globalThis) | undefined;
+    document: Document | undefined;
 };
 export declare const DOMContext: React.Context<DOMContextInterface>;
 export declare const useDOM: () => DOMContextInterface;
-export declare function withDOM<Props>(Component: React.ComponentType<Props & DOMProps>): React.FC<Props>;
+export declare function withDOM<Props>(Component: React.ComponentType<Props & DOMProps>): React.ComponentType<Props>;
 export declare function blurActiveElement(document: Document | undefined): void;

package/.cache/ts/src/lib/getNavId.d.ts

@@ -3,4 +3,4 @@ export interface NavIdProps {
     nav?: string;
     id?: string;
 }
-export declare function getNavId(props: NavIdProps, warn?: (text: string) => any): string;
+export declare function getNavId(props: NavIdProps, warn?: (text: string) => any): string | undefined;

package/.cache/ts/src/lib/isRefObject.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const isRefObject: <T, E = Element>(refObject: T | React.RefObject<E>) => refObject is React.RefObject<E>;

package/.cache/ts/src/lib/jsxRuntime.d.ts

@@ -1,4 +1,8 @@
-import * as React from 'react';
-export declare const createScopedElement: typeof React.createElement & {
-    Fragment: typeof React.Fragment;
-};
+import * as React from "react";
+declare function createScopedElement(_type: any, props?: any): React.ReactElement<{}, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+declare namespace createScopedElement {
+    var Fragment: React.ExoticComponent<{
+        children?: React.ReactNode;
+    }>;
+}
+export { createScopedElement };

package/.cache/ts/src/lib/offset.d.ts

@@ -1,7 +1,7 @@
 export interface OffsetRectInterface {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
+    top: number | undefined;
+    left: number | undefined;
+    width: number | undefined;
+    height: number | undefined;
 }
-export declare function getOffsetRect(elem: HTMLElement): OffsetRectInterface;
+export declare function getOffsetRect(elem: HTMLElement | null): OffsetRectInterface;

package/.cache/ts/src/lib/platform.d.ts

@@ -1,4 +1,4 @@
-import { BrowserInfo } from './browser';
+import { BrowserInfo } from "./browser";
 export declare enum Platform {
     ANDROID = "android",
     IOS = "ios",

package/.cache/ts/src/lib/prefixClass.d.ts

@@ -1 +1 @@
-export declare function prefixClass(scopedStyle?: string | string[]): string;
+export declare function prefixClass(scopedStyle: string | string[]): string;

package/.cache/ts/src/lib/select.d.ts

@@ -2,6 +2,6 @@ declare type Option = {
     label?: string;
     [index: string]: any;
 };
-declare type GetOptionLabel = (option: Option) => string;
-export declare const defaultFilterFn: (query: string, option: Option, getOptionLabel?: GetOptionLabel) => boolean;
+declare type GetOptionLabel = (option: Option) => string | undefined;
+export declare const defaultFilterFn: (query: string | undefined, option: Option, getOptionLabel?: GetOptionLabel) => boolean;
 export {};

package/.cache/ts/src/lib/styles.d.ts

@@ -1 +1 @@
-export declare function setTransformStyle(element: HTMLElement, transform: string): void;
+export declare function setTransformStyle(element: HTMLElement | undefined | null, transform: string): void;

package/.cache/ts/src/lib/supportEvents.d.ts

@@ -1,6 +1,6 @@
 export declare type VKUISupportEvents = {
     supported: boolean;
-    name?: string;
+    name?: string | null;
 };
 declare const animationEvent: {
     supported: boolean;

package/.cache/ts/src/lib/taptic.d.ts

@@ -1,2 +1,2 @@
-import { TapticVibrationPowerType } from '@vkontakte/vk-bridge';
+import { TapticVibrationPowerType } from "@vkontakte/vk-bridge";
 export declare function runTapticImpactOccurred(style: TapticVibrationPowerType): void;

package/.cache/ts/src/lib/useIsomorphicLayoutEffect.d.ts

@@ -1,2 +1,2 @@
-import * as React from 'react';
+import * as React from "react";
 export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;

package/.cache/ts/src/lib/utils.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
+import * as React from "react";
 export declare type ImgOnlyAttributes = {
     [index in Exclude<keyof React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>]: React.ImgHTMLAttributes<HTMLImageElement>[index];
 };
 export declare function isNumeric(value: any): boolean;
-export declare function isFunction(value: any): value is ((...args: any[]) => any);
+export declare function isFunction(value: any): value is (...args: any[]) => any;
 export declare function debounce<A extends any[]>(fn: (...args: A) => void, delay: number): (...args: A) => void;
 export declare function leadingZero(val: number): string;
 export declare function hasReactNode(value: React.ReactNode): boolean;
 export declare function isPrimitiveReactNode(node: React.ReactNode): boolean;
 export declare function setRef<T>(element: T, ref: React.Ref<T>): void;
-export declare function multiRef<T>(...refs: Array<React.Ref<T>>): React.RefObject<T>;
+export declare function multiRef<T>(...refs: Array<React.Ref<T> | undefined>): React.RefObject<T>;
 export declare const noop: () => void;
 export declare function getTitleFromChildren(children: React.ReactNode): string;

package/.cache/ts/src/testing/setup.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/.cache/ts/src/testing/utils.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="jest" />
-import * as React from 'react';
-import { AdaptivityProviderProps } from '../components/AdaptivityProvider/AdaptivityProvider';
-import { ImgOnlyAttributes } from '../lib/utils';
+import * as React from "react";
+import { AdaptivityProps } from "../components/AdaptivityProvider/AdaptivityContext";
+import { ImgOnlyAttributes } from "../lib/utils";
 export declare function fakeTimers(): void;
 export declare const runAllTimers: () => void;
 export declare const imgOnlyAttributes: ImgOnlyAttributes;
@@ -11,7 +11,7 @@ export declare type ComponentTestOptions = {
     domAttr?: boolean;
     className?: boolean;
     style?: boolean;
-    adaptivity?: AdaptivityProviderProps;
+    adaptivity?: AdaptivityProps;
 };
 declare type BasicProps = {
     style?: any;

package/.cache/ts/src/tokenized/tokenized.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "../components/Button/Button";
+export type { ButtonProps } from "../components/Button/Button";

package/.cache/ts/src/types.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { PlatformType } from './lib/platform';
-import { Insets } from '@vkontakte/vk-bridge';
+import * as React from "react";
+import { PlatformType } from "./lib/platform";
+import { Insets } from "@vkontakte/vk-bridge";
 export declare type AnyFunction = (...args: any[]) => any;
-export declare type AlignType = 'left' | 'center' | 'right';
+export declare type AlignType = "left" | "center" | "right";
 export interface HasRootRef<T> {
     getRootRef?: React.Ref<T>;
 }

package/.cache/ts/src/unstable/index.d.ts

@@ -1,17 +1,17 @@
 /**
  * Forms
  */
-export { default as ChipsSelect } from './../components/ChipsSelect/ChipsSelect';
-export type { ChipsSelectProps } from './../components/ChipsSelect/ChipsSelect';
-export { Dropdown } from '../components/Dropdown/Dropdown';
-export type { DropdownProps } from '../components/Dropdown/Dropdown';
-export { TextTooltip } from '../components/TextTooltip/TextTooltip';
-export type { TextTooltipProps } from '../components/TextTooltip/TextTooltip';
-export { RichTooltip } from '../components/RichTooltip/RichTooltip';
-export type { RichTooltipProps } from '../components/RichTooltip/RichTooltip';
-export { Popper } from '../components/Popper/Popper';
-export type { PopperProps } from '../components/Popper/Popper';
-export { default as ViewInfinite } from './../components/View/ViewInfinite';
-export type { ViewInfiniteProps } from './../components/View/ViewInfinite';
-export { default as SimpleCheckbox } from './../components/SimpleCheckbox/SimpleCheckbox';
-export type { SimpleCheckboxProps } from './../components/SimpleCheckbox/SimpleCheckbox';
+export { default as ChipsSelect } from "./../components/ChipsSelect/ChipsSelect";
+export type { ChipsSelectProps } from "./../components/ChipsSelect/ChipsSelect";
+export { Dropdown } from "../components/Dropdown/Dropdown";
+export type { DropdownProps } from "../components/Dropdown/Dropdown";
+export { TextTooltip } from "../components/TextTooltip/TextTooltip";
+export type { TextTooltipProps } from "../components/TextTooltip/TextTooltip";
+export { RichTooltip } from "../components/RichTooltip/RichTooltip";
+export type { RichTooltipProps } from "../components/RichTooltip/RichTooltip";
+export { Popper } from "../components/Popper/Popper";
+export type { PopperProps } from "../components/Popper/Popper";
+export { default as ViewInfinite } from "./../components/View/ViewInfinite";
+export type { ViewInfiniteProps } from "./../components/View/ViewInfinite";
+export { default as SimpleCheckbox } from "./../components/SimpleCheckbox/SimpleCheckbox";
+export type { SimpleCheckboxProps } from "./../components/SimpleCheckbox/SimpleCheckbox";

package/.codesandbox/ci.json

@@ -1,7 +1,5 @@
 {
   "node": "14",
   "installCommand": "codesandbox:install",
-  "sandboxes": [
-    "vkui-default-example-b7kyy"
-  ]
+  "sandboxes": ["vkui-default-example-b7kyy"]
 }

package/.eslintignore

@@ -3,3 +3,4 @@ dist/
 docs/
 *.test.js
 src/vkui.js
+stylelint.config.js

package/.eslintrc.json

@@ -1,5 +1,11 @@
 {
-  "extends": ["@vkontakte/eslint-config/typescript/react"],
+  "extends": [
+    "@vkontakte/eslint-config/typescript/react",
+    "prettier",
+    "prettier/react",
+    "prettier/@typescript-eslint",
+    "plugin:react-hooks/recommended"
+  ],
   "parserOptions": {
     "project": "./tsconfig.json",
     "ecmaVersion": 2018, // Allows for the parsing of modern ECMAScript features
@@ -13,76 +19,98 @@
   "globals": {
     "Element": true
   },
+  "ignorePatterns": ["unstable/**/*.ts", "tokenized/**/*.ts"],
   "env": {
     "es6": true, // Enable global es6 variables, like Set, Map, etc
     "browser": true,
     "node": true
   },
+  "plugins": ["import"],
   "rules": {
     "@typescript-eslint/explicit-member-accessibility": "off",
     "@typescript-eslint/no-unnecessary-condition": "off",
     "@typescript-eslint/no-magic-numbers": "off",
-    "@typescript-eslint/no-unused-vars": ["error", {
-      "ignoreRestSiblings": true
-    }],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "ignoreRestSiblings": true
+      }
+    ],
+    "@typescript-eslint/no-non-null-assertion": "off",
     "no-restricted-globals": ["error", "window", "document"],
-    "no-restricted-imports": ["error", {
-      "paths": [
-        // prevent absolute imports from src subfolders like `import { ... } from "lib"`
-        "appearance",
-        "components",
-        "helpers",
-        "hoc",
-        "hooks",
-        "lib",
-        "styles",
-        "testing",
-        "types",
-        "unstable"
-      ],
-      "patterns": [
-        "@vkontakte/icons/dist/*",
-        // prevent absolute imports from src subfolders like `import { ... } from "lib/platform"`
-        "appearance/*",
-        "components/*",
-        "helpers/*",
-        "hoc/*",
-        "hooks/*",
-        "lib/*",
-        "styles/*",
-        "testing/*",
-        "types/*",
-        "unstable/*"
-      ]
-    }],
-    "no-restricted-properties": ["error", {
-      "property": "querySelector",
-      "message": "Make sure to use [data-*] selector, not class"
-    }, {
-      "property": "querySelectorAll",
-      "message": "Make sure to use [data-*] selector, not class"
-    }, {
-      "property": "matches",
-      "message": "Make sure to use [data-*] selector, not class"
-    }, {
-      "property": "closest",
-      "message": "Make sure to use [data-*] selector, not class"
-    }, {
-      "property": "getElementsByClassName",
-      "message": "Use .querySelectorAll('[data-*]')"
-    }, {
-      "property": "classList",
-      "message": "Make sure to use 'vkui' prefix"
-    }, {
-      "property": "getElementById",
-      "message": "Absolutely do not use id"
-    }, {
-      "object": "React",
-      "property": "useLayoutEffect",
-      "message": "Prefer lib/useIsomorphicLayoutEffect"
-    }],
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          // prevent absolute imports from src subfolders like `import { ... } from "lib"`
+          "appearance",
+          "components",
+          "helpers",
+          "hoc",
+          "hooks",
+          "lib",
+          "styles",
+          "testing",
+          "types",
+          "unstable",
+          "tokenized"
+        ],
+        "patterns": [
+          "@vkontakte/icons/dist/*",
+          // prevent absolute imports from src subfolders like `import { ... } from "lib/platform"`
+          "appearance/*",
+          "components/*",
+          "helpers/*",
+          "hoc/*",
+          "hooks/*",
+          "lib/*",
+          "styles/*",
+          "testing/*",
+          "types/*",
+          "unstable/*",
+          "tokenized/*"
+        ]
+      }
+    ],
+    "no-restricted-properties": [
+      "error",
+      {
+        "property": "querySelector",
+        "message": "Make sure to use [data-*] selector, not class"
+      },
+      {
+        "property": "querySelectorAll",
+        "message": "Make sure to use [data-*] selector, not class"
+      },
+      {
+        "property": "matches",
+        "message": "Make sure to use [data-*] selector, not class"
+      },
+      {
+        "property": "closest",
+        "message": "Make sure to use [data-*] selector, not class"
+      },
+      {
+        "property": "getElementsByClassName",
+        "message": "Use .querySelectorAll('[data-*]')"
+      },
+      {
+        "property": "classList",
+        "message": "Make sure to use 'vkui' prefix"
+      },
+      {
+        "property": "getElementById",
+        "message": "Absolutely do not use id"
+      },
+      {
+        "object": "React",
+        "property": "useLayoutEffect",
+        "message": "Prefer lib/useIsomorphicLayoutEffect"
+      }
+    ],
     "react/react-in-jsx-scope": "off",
-    "no-restricted-syntax": ["error",
+    "no-restricted-syntax": [
+      "error",
       {
         "selector": "ImportDeclaration[source.value=/^\\W+(index(\\.ts)?)?$/i]",
         "message": "Do not import index"
@@ -91,11 +119,16 @@
         "selector": "ImportDeclaration[source.value=/\\.css$/i] ~ ImportDeclaration[source.value!=/\\.css$/i]",
         "message": "CSS import must be last"
       }
-    ]
+    ],
+    "import/no-default-export": "error"
   },
   "overrides": [
     {
-      "files": ["src/**/*.{test,spec,e2e}.{ts,tsx}", "e2e/**/*", "src/testing/**/*"],
+      "files": [
+        "src/**/*.{test,spec,e2e}.{ts,tsx}",
+        "e2e/**/*",
+        "src/testing/**/*"
+      ],
       "env": {
         "jest": true
       },

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pre-commit

package/.prettierignore

@@ -0,0 +1,14 @@
+node_modules
+dist
+coverage
+.idea
+.vscode
+e2e/dist
+test-results.json
+lint-results.json
+e2e-results.json
+.nyc_output
+__diff_output__
+.cache
+docs/
+src/styles/generated

package/.prettierrc.json

@@ -0,0 +1 @@
+{}

package/CONTRIBUTING.md

@@ -1,7 +1,8 @@
 ## Разработка
+
 1. Склонировать репозиторий и перейти в созданную директорию.
 2. Установить зависимости: `yarn install`.
-3. Поднять локально документацию с лайврелоадом: `yarn styleguide`.
+3. Поднять локально документацию с лайврелоадом: `yarn styleguide`. Свойства и методы компонента в режиме разработки по умолчанию не генерируются; если они вам нужны, используйте команду `yarn styleguide:props`.
 
 Документация будет доступна на `http://localhost:6060`. В ней ведётся вся разработка. Для удобства можно сразу перейти на страницу разрабатываемого компонента (`http://localhost:6060/#/UsersStack`)
 
@@ -9,33 +10,56 @@
 
 ### Организационные моменты
 
-* Дизайн компонента описан в [Figma](https://www.figma.com/@vk)
-* Компонент находится в своей папке в `src/components` и не делит её с другими публичными компонентами (один файл — один компонент)
-* У компонента есть понятная документация, описанная в директории компонента в файле `Readme.md`. Файл подключается в `styleguide/config.js`
-* Вся стилизация — в соответствующем `.css` файле. Файл подключается в `src/styles/components.css`
+- Один pull request — одна фича или багфикс. Рефакторинги выносим отдельно
+- Дизайн компонента описан в [Figma](https://www.figma.com/@vk)
+- Компонент находится в своей папке в `src/components` и не делит её с другими публичными компонентами (один файл — один компонент)
+- У компонента есть понятная документация, описанная в директории компонента в файле `Readme.md`. Файл подключается в `styleguide/config.js`
+- Вся стилизация — в соответствующем `.css` файле. Файл подключается в `src/styles/components.css`
 
 ### Требования к разработке
 
-* CSS-классы компонента передаем через `vkuiClass="Cmp"`
-* Свойства `className` и `style` навешиваются на корневой элемент компонента
-* Свойства, не используемые в коде компонента, навешиваются на **главный** элемент компонента. По умолчанию главным является корневой элемент:
+- CSS-классы компонента передаем через `vkuiClass="Cmp"`
+- CSS-классы названы по БЭМ: `.Component__element-name--modificator`
+- Свойства `className` и `style` навешиваются на корневой элемент компонента
+- Свойства, не используемые в коде компонента, навешиваются на **главный** элемент компонента. По умолчанию главным является корневой элемент:
+
 ```jsx
-props => <div {...props} vkuiClass="Component" />
+(props) => <div {...props} vkuiClass="Component" />;
 ```
 
-Бывают случаи, например поле ввода, когда главным является именно `input`, а не обёртка:
+Бывают случаи, например, поле ввода, когда главным является именно `input`, а не обёртка:
+
 ```jsx
-const { mode, style, className, ...restProps } = props;
+const Input: React.FC<InputProps> = ({
+  mode,
+  style,
+  className,
+  ...restProps
+}) => {
+  return (
+    <div
+      vkuiClass={classNames("Input", `Input--${mode}`)}
+      className={className}
+      style={style}
+    >
+      <input {...restProps} />
+    </div>
+  );
+};
+```
 
-return (
-  <div vkuiClass={classNames('Input', `Input--${mode}`)} className={className} style={style}>
-    <input {...restProps} />
-  </div>
-);
+- Компонент корректно отрисовывается, если не передавать никаких свойств. Вместо `defaultProps`, [deprecated для функциональных компонентов](https://github.com/facebook/react/pull/16210), используем спред:
+
+```jsx
+const Cmp: React.FC<CmpProps> = ({
+  mode = "default",
+  ...restProps,
+}) => <div vkuiClass={classNames("Cmp", `Cmp--${mode}`)} {...restProps} />;
 ```
-* Компонент корректно отрисовывается, если не передавать никаких свойств (пользуемся `defaultProps`)
-* Для цветов используются цветовые токены
-* Для типографии используются компоненты [Typography](https://vkcom.github.io/VKUI/#!/Typography) там, где это возможно
-* Добавлен `export` компонента и его свойств в `src/index.ts`
-* Компонент корректно отображается на всех платформах, размерах и цветовых схемах. В styleguide для всех этих параметров есть переключатели
-* Код корректно работает на [поддерживаемых нами браузерах](https://github.com/VKCOM/VKUI#%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D1%8B)
+
+- Для цветов используются цветовые токены
+- Для типографии используются компоненты [Typography](https://vkcom.github.io/VKUI/#!/Typography) там, где это возможно
+- Добавлен `export` компонента и его свойств в `src/index.ts`
+- Компонент покрыт юнит- и скриншотными тестами. [Гайд по тестированию](./TESTING.md)
+- Компонент корректно отображается на всех платформах, размерах и цветовых схемах. В styleguide для всех этих параметров есть переключатели
+- Код корректно работает на [поддерживаемых нами браузерах](https://github.com/VKCOM/VKUI#%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D1%8B)

package/README.md

@@ -12,13 +12,14 @@ VKUI — это библиотека адаптивных React-компонен
 Гайд по миграции на версию 4: <a href="https://github.com/VKCOM/VKUI/releases/tag/v4.0.0">https://github.com/VKCOM/VKUI/releases/tag/v4.0.0</a>.
 </p>
 
-
 ## Установка
+
 `npm i @vkontakte/vkui` или `yarn add @vkontakte/vkui`
 
 **Важно:** Нужно установить вручную [`peerDependencies`](package.json#L104-L112), либо использовать npm7+ который делает это автоматически.
 
 ## Hello World
+
 ```jsx static
 import React from "react";
 import ReactDOM from "react-dom";
@@ -35,13 +36,13 @@ import {
   PanelHeader,
   Header,
   Group,
-  SimpleCell
+  SimpleCell,
 } from "@vkontakte/vkui";
 import "@vkontakte/vkui/dist/vkui.css";
 
 const Example = () => {
   const { viewWidth } = useAdaptivity();
-  
+
   return (
     <AppRoot>
       <SplitLayout header={<PanelHeader separator={false} />}>
@@ -72,25 +73,34 @@ ReactDOM.render(
 ```
 
 ## Браузеры
+
 На данный момент мы поддерживаем WebView следующих операционных систем:
-* Android >= 4.4
-* iOS >= 9
+
+- Android >= 4.4
+- iOS >= 9
 
 Иными словами, мы поддерживаем браузеры следующих версий:
-* Safari для iOS >= 9
-* Android Browser >= 4.4 (Chrome 30)
-* Chrome для Android, начиная с Android 5.0 (Chrome 36)
+
+- Safari для iOS >= 9
+- Android Browser >= 4.4 (Chrome 30)
+- Chrome для Android, начиная с Android 5.0 (Chrome 36)
 
 ## Тестирование
 
 Мы работаем над качеством библиотеки и подвозим тесты. `yarn test` запускает юниты, проверяет типы и линтит. `yarn test:unit` запускает только юниты и поддерживает интерактивный режим с флагом `--watch`. Также мы поддерживаем скриншотные тесты — смотрите наш [гайд по тестированию](./TESTING.md).
 
 ## Документация
+
 В [документации](https://vkcom.github.io/VKUI/) вы сможете найти информацию об использовании компонентов и утилит.
 
 ## Сообщить о проблеме
+
 Напишите нам [issue](https://github.com/VKCOM/VKUI/issues/new/choose), если нашли баг или у вас есть предложения по улучшению библиотеки.
 
 ## Contributing
+
 Мы очень радуемся, когда пользователи библиотеки работают над её улучшением. Для того, чтобы оставить след в
-истории, сделайте форк проекта, внесите изменения и отправьте нам [pull request](https://github.com/VKCOM/VKUI/pulls).
+истории:
+
+- почитайте наши [чеклист компонента и общие требования к разработке](./CONTRIBUTING.md),
+- сделайте форк проекта, внесите изменения и отправьте нам [pull request](https://github.com/VKCOM/VKUI/pulls).