@vkontakte/vkui 4.23.0 → 4.24.0

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, transform: string): void;

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,9 +1,9 @@
-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;

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 { AdaptivityProviderProps } from "../components/AdaptivityProvider/AdaptivityProvider";
+import { ImgOnlyAttributes } from "../lib/utils";
 export declare function fakeTimers(): void;
 export declare const runAllTimers: () => void;
 export declare const imgOnlyAttributes: ImgOnlyAttributes;

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,10 @@
 {
-  "extends": ["@vkontakte/eslint-config/typescript/react"],
+  "extends": [
+    "@vkontakte/eslint-config/typescript/react",
+    "prettier",
+    "prettier/react",
+    "prettier/@typescript-eslint"
+  ],
   "parserOptions": {
     "project": "./tsconfig.json",
     "ecmaVersion": 2018, // Allows for the parsing of modern ECMAScript features
@@ -13,6 +18,7 @@
   "globals": {
     "Element": true
   },
+  "ignorePatterns": ["unstable/**/*.ts"],
   "env": {
     "es6": true, // Enable global es6 variables, like Set, Map, etc
     "browser": true,
@@ -22,67 +28,84 @@
     "@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
+      }
+    ],
     "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"
+        ],
+        "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"
+      }
+    ],
     "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"
@@ -95,7 +118,11 @@
   },
   "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).

package/TESTING.md

@@ -1,12 +1,13 @@
 Мы используем три вида тестов:
 
-__Юнит-тесты__ на jest в файлах `moduleName.test.ts` [пример](./src/helpers/getClassName.test.ts)
+**Юнит-тесты** на jest в файлах `moduleName.test.ts` [пример](./src/helpers/getClassName.test.ts)
 
-__Компонентные тесты__ на jest + [react-testing-library](https://testing-library.com/docs/react-testing-library/example-intro) + [jest-dom](https://github.com/testing-library/jest-dom#table-of-contents) в `ComponentName.test.tsx` [пример](./src/components/Checkbox/Checkbox.test.tsx)
+**Компонентные тесты** на jest + [react-testing-library](https://testing-library.com/docs/react-testing-library/example-intro) + [jest-dom](https://github.com/testing-library/jest-dom#table-of-contents) в `ComponentName.test.tsx` [пример](./src/components/Checkbox/Checkbox.test.tsx)
 
-__Скриншотные тесты__ на jest + [playwright](https://playwright.dev/#?path=docs/api.md) + [jest-playwright](https://github.com/playwright-community/jest-playwright) в `ComponentName.e2e.tsx` [пример](./src/components/Checkbox/Checkbox.e2e.tsx).
+**Скриншотные тесты** на jest + [playwright](https://playwright.dev/#?path=docs/api.md) + [jest-playwright](https://github.com/playwright-community/jest-playwright) в `ComponentName.e2e.tsx` [пример](./src/components/Checkbox/Checkbox.e2e.tsx).
 
 Чтобы запускать скриншотные тесты локально, нужно установить:
+
 - [git-lfs](https://git-lfs.github.com) — чтобы от эталонных скриншотов не раздувало репозиторий
 - [докер](https://www.docker.com/products/docker-desktop) — чтобы платформа не влияла на рендеринг шрифтов. На линуксе докер не нужен.
 
@@ -33,24 +34,25 @@ __Скриншотные тесты__ на jest + [playwright](https://playwrigh
 Функция `describeScreenshotFuzz` из [`/testing/utils`](./src/testing/e2e/utils.tsx) помогает быстро заскриншотить все состояния компонента в разных темах и на разных платформах:
 
 ```ts
-describe('Button', () => {
+describe("Button", () => {
   describeScreenshotFuzz(
     // Можем передать компонент или вот так добавить дефолтные пропы для скриншотов
     (props: ButtonProps) => <Button {...props}>Кнопка</Button>,
     // Описание комбинаций пропов — по элементу массива на независимый набор
     [
       // mode и disabled влияют на цвет, но не на размер
-      { mode: ['primary', 'secondary'], disabled: [undefined, true] },
+      { mode: ["primary", "secondary"], disabled: [undefined, true] },
       // size влияет на размер, но не на цвет
-      { size: ['s', 'm', 'l'] }
-    ]);
-    // всего 2 * 2 + 3 = 7 состояний:
-    // mode="primary"
-    // mode="primary" disabled
-    // mode="secondary"
-    // mode="secondary" disabled
-    // size="s"
-    // size="m"
-    // size="l"
+      { size: ["s", "m", "l"] },
+    ]
+  );
+  // всего 2 * 2 + 3 = 7 состояний:
+  // mode="primary"
+  // mode="primary" disabled
+  // mode="secondary"
+  // mode="secondary" disabled
+  // size="s"
+  // size="m"
+  // size="l"
 });
 ```

package/babel.cjs.config.js

@@ -1,10 +1,15 @@
 module.exports = {
-  extends: './babel.config.js',
-  presets: [['@babel/preset-env', {
-    modules: 'commonjs',
-    exclude: [
-      '@babel/plugin-proposal-unicode-property-regex',
-      '@babel/plugin-transform-unicode-regex'
-    ]
-  }]],
+  extends: "./babel.config.js",
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        modules: "commonjs",
+        exclude: [
+          "@babel/plugin-proposal-unicode-property-regex",
+          "@babel/plugin-transform-unicode-regex",
+        ],
+      },
+    ],
+  ],
 };