Skip to content

Commit

Permalink
fix: fix after review
Browse files Browse the repository at this point in the history
  • Loading branch information
inomdzhon committed Jul 26, 2023
1 parent 121d85d commit e31e6ac
Show file tree
Hide file tree
Showing 12 changed files with 64 additions and 59 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<a href="https://npmjs.com/package/@vkontakte/vkui"><img src="https://img.shields.io/npm/v/@vkontakte/vkui/latest.svg?maxAge=3600" alt="open latest version"></a>
</p>
<p align="center">
VKUI — это библиотека адаптивных React-компонентов, <br> для создания веб-приложений.<br>
VKUI — это библиотека адаптивных React-компонентов<br> для создания веб-приложений.<br>
Библиотека основана на <a href="https://www.figma.com/@vk">дизайн-системе ВКонтакте</a> и реализует её интерфейсы для различных платформ.<br>
Релизы: <a href="https://github.com/VKCOM/VKUI/releases">https://github.com/VKCOM/VKUI/releases</a>.<br>
Гайд по миграции <a href="https://vkcom.github.io/VKUI/#/Migration">на версию 5</a>.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const AdaptivityProvider = ({
if (process.env.NODE_ENVIRONMENT === 'development') {
// TODO [>=6]: удалить warn
if (!LEGACY_disableInternalUseBridgeAdaptivity) {
warn("[@vkontakte/vk-bridge's deprecated] Если вы используете VK Bridge, то используйте хук `useAdaptivity()` из @vkontakte/vk-bridge-react и результат передайте в компонент (см. https://github.com/VKCOM/VKUI/issues/5049)"); // prettier-ignore
warn("[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useAdaptivity()` из @vkontakte/vk-bridge-react и результат передайте в компонент (см. https://github.com/VKCOM/VKUI/issues/5049)"); // prettier-ignore

Check warning on line 39 in packages/vkui/src/components/AdaptivityProvider/AdaptivityProvider.tsx

View check run for this annotation

Codecov / codecov/patch

packages/vkui/src/components/AdaptivityProvider/AdaptivityProvider.tsx#L38-L39

Added lines #L38 - L39 were not covered by tests
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/vkui/src/components/AppRoot/AppRoot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export const AppRoot = ({
if (process.env.NODE_ENVIRONMENT === 'development') {
if (!safeAreaInsets) {

Check warning on line 74 in packages/vkui/src/components/AppRoot/AppRoot.tsx

View check run for this annotation

Codecov / codecov/patch

packages/vkui/src/components/AppRoot/AppRoot.tsx#L74

Added line #L74 was not covered by tests
// TODO [>=6]: удалить warn
warn("[@vkontakte/vk-bridge's deprecated] Если вы используете VK Bridge, то используйте хук `useInsets()` из @vkontakte/vk-bridge-react и результат передайте в параметр `safeAreaInsets` (см. https://github.com/VKCOM/VKUI/issues/5049)"); // prettier-ignore
warn("[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useInsets()` из @vkontakte/vk-bridge-react и результат передайте в параметр `safeAreaInsets` (см. https://github.com/VKCOM/VKUI/issues/5049)"); // prettier-ignore

Check warning on line 76 in packages/vkui/src/components/AppRoot/AppRoot.tsx

View check run for this annotation

Codecov / codecov/patch

packages/vkui/src/components/AppRoot/AppRoot.tsx#L76

Added line #L76 was not covered by tests
}
}

Expand Down
10 changes: 5 additions & 5 deletions packages/vkui/src/components/ConfigProvider/ConfigProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,17 +58,17 @@ export const ConfigProvider = (props: ConfigProviderProps) => {

if (process.env.NODE_ENVIRONMENT === 'development') {
// TODO [>=6]: удалить warn
let thirdRule = '';
let webviewTypeRule = '';
if (props.webviewType) {
thirdRule =
webviewTypeRule =

Check warning on line 63 in packages/vkui/src/components/ConfigProvider/ConfigProvider.tsx

View check run for this annotation

Codecov / codecov/patch

packages/vkui/src/components/ConfigProvider/ConfigProvider.tsx#L61-L63

Added lines #L61 - L63 were not covered by tests
props.webviewType === WebviewType.INTERNAL
? '3. замените `webviewType={WebviewType.INTERNAL}` на `hasCustomPanelHeaderAfterProp={false}`'
: '3. замените `webviewType={WebviewType.VKAPPS}` на `hasCustomPanelHeaderAfterProp={true}`';
? 'замените webviewType={WebviewType.INTERNAL} на hasCustomPanelHeaderAfterProp={false}'
: 'замените webviewType={WebviewType.VKAPPS} на hasCustomPanelHeaderAfterProp={true}';

Check warning on line 66 in packages/vkui/src/components/ConfigProvider/ConfigProvider.tsx

View check run for this annotation

Codecov / codecov/patch

packages/vkui/src/components/ConfigProvider/ConfigProvider.tsx#L65-L66

Added lines #L65 - L66 were not covered by tests
}
warn(`[@vkontakte/vk-bridge's deprecated] Если вы используете VK Bridge, то:

Check warning on line 68 in packages/vkui/src/components/ConfigProvider/ConfigProvider.tsx

View check run for this annotation

Codecov / codecov/patch

packages/vkui/src/components/ConfigProvider/ConfigProvider.tsx#L68

Added line #L68 was not covered by tests
1. используйте хук \`useAppearance()\` из @vkontakte/vk-bridge-react и результат передайте в параметр \`appearance\`;
2. передайте \`bridge.isWebView()\` в параметр \`isWebView\`;
${thirdRule}
${webviewTypeRule}
Подробности см. https://github.com/VKCOM/VKUI/issues/5049
`);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export interface ConfigProviderContextInterface {
*
* > ⚠️ В **v6** свойство будет удалено (см. https://github.com/VKCOM/VKUI/issues/5049).
* >
* > Используете вместо него новые свойства:
* > Используйте вместо него новые свойства:
* >
* > - `webviewType={WebviewType.INTERNAL}` -> `hasCustomPanelHeaderAfter={false}`.
* > - `webviewType={WebviewType.VKAPPS}` -> `hasCustomPanelHeaderAfter={true}`. При необходимости передайте `customPanelHeaderAfterMinWidth={<value>}` (по умолчанию равен `90`).
Expand Down
8 changes: 4 additions & 4 deletions packages/vkui/src/components/ModalPage/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@

Если контента на странице достаточно для появления скролла, её можно свайпом раскрыть на весь экран.

> При передачи `hasCustomPanelHeaderAfter` в [ConfigProvider](#/ConfigProvider) модальная страница
> сверху имеет смещение на высоту [PanelHeader](#/PanelHeader), чтобы кнопка закрытия модальной
> страницы не перекрывалась пользовательским "плавающим" элементом (например, это может быть панель
> управления webview).
> При передаче `hasCustomPanelHeaderAfter` в [ConfigProvider](#/ConfigProvider) модальная страница
> сверху будет смещена на высоту [PanelHeader](#/PanelHeader), чтобы кнопка закрытия модальной
> страницы не перекрывалась пользовательским "плавающим" элементом (например, панелью управления
> webview).
Если у ModalRoot `settlingHeight={100}`, то модалка будет сразу открываться на всю высоту.

Expand Down
3 changes: 2 additions & 1 deletion packages/vkui/src/components/PanelHeader/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@

> **Важно**
>
> Правая часть шапки скрыта по умолчанию, если требуется показать её, передайте в [`ConfigProvider`](https://vkcom.github.io/VKUI/#/ConfigProvider) свойство `hasCustomPanelHeaderAfter={false}`.
> Правая часть шапки скрыта по умолчанию. Если хотите ее показать, передайте в
> [`ConfigProvider`](#/ConfigProvider) свойство `hasCustomPanelHeaderAfter={false}`.
>
> ⚠️ В v6 значение по умолчанию будет изменено на `false` (см. https://github.com/VKCOM/VKUI/issues/5049).
Expand Down
3 changes: 2 additions & 1 deletion packages/vkui/src/components/PanelHeaderContent/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@

> **Важно**
>
> Правая часть шапки скрыта по умолчанию, если требуется показать её, передайте в [`ConfigProvider`](https://vkcom.github.io/VKUI/#/ConfigProvider) свойство `hasCustomPanelHeaderAfter={false}`.
> Правая часть шапки скрыта по умолчанию. Если хотите ее показать, передайте в
> [`ConfigProvider`](#/ConfigProvider) свойство `hasCustomPanelHeaderAfter={false}`.
>
> ⚠️ В v6 значение по умолчанию будет изменено на `false` (см. https://github.com/VKCOM/VKUI/issues/5049).
Expand Down
18 changes: 12 additions & 6 deletions packages/vkui/src/components/PullToRefresh/PullToRefresh.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,19 @@ export interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {
/**
* Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)
*
* > ⚠️ В **v6** необходимо будет самостоятельно вызывать функцию `runTapticImpactOccurred()`
* > из `@vkontakte/vk-bridge-react` (см. https://github.com/VKCOM/VKUI/issues/5049).
* > ⚠️ **Для разработчиков VK Mini Apps**
* >
* > В рамках **v5** вы уже можете вызывать `runTapticImpactOccurred()` в обработчике `onRefresh()`,
* > но с одним условием – необходимо возвращать результат выполнения функции `runTapticImpactOccurred()`,
* > чтобы исключить его двойной вызов. Результат функции это `boolean`, если вернётся `true`, то
* > для нас это будет отвечать, что вызывать `runTapticImpactOccurred()` со стороны **VKUI** не нужно.
* > Сейчас метод под конец выполнения вызывает `runTapticImpactOccurred()`.
* >
* > В **v6** нужно будет самостоятельно вызывать эту функцию в вашем обработчике `onRefresh()`.
* > (см. https://github.com/VKCOM/VKUI/issues/5049). Функцию можете импортировать её из
* > бибилиотеки `@vkontakte/vk-bridge-react`.
* >
* > Чтобы подготовить ваше мини-приложение к обновлению до **v6**, в рамках **v5** вы уже можете
* > вызывать `runTapticImpactOccurred()`, но с одним условием: вы должны вернуть результат
* > выполнения функции, чтобы исключить двойной вызов. Результат функции — `boolean`. Если
* > вернётся `true`, значит, вызывать `runTapticImpactOccurred()` снова со стороны **VKUI** —
* > не нужно.
* >
* > ```jsx
* > const onRefresh = React.useCallback(() => {
Expand Down
46 changes: 32 additions & 14 deletions styleguide/pages/integrations_vk_mini_apps.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,33 @@
> **Предусловие**
>
> Изначально, **VKUI** создавался как инструмент для создания клиентской части мини-приложений
> [ВКонтакте](https://vk.com). В связи с этим, до версии **v5** включительно, **VKUI** содержит интеграцию с
> библиотекой [VK Bridge](https://www.npmjs.com/package/@vkontakte/vk-bridge), которая реализует
> общение между [VK Mini Apps](<(https://vk.com/miniapps)>) и официальными клиентами [ВКонтакте](https://vk.com).
>
> Сейчас **VKUI** уже больше чем просто мини-приложения. Разработчики используют библиотеку, чтобы
> создавать полноценные независимые приложения, которые никак не связаны с [VK Mini Apps](https://vk.com/miniapps).
> Но тем не менее им приходится иметь дело с этим наследием.
>
> Чтобы отделить **VKUI** от [VK Mini Apps](https://vk.com/miniapps), начиная с версии **v6** будет
> удалена интеграция с [VK Bridge](https://www.npmjs.com/package/@vkontakte/vk-bridge).
>
> В рамках **v5** добавлены советы по подготовке к обновлению на **v6**. Вам они будут попадаться на
> других страницах документации, а также в предупреждениях в **DevTools** (☝️ если вы не разработчик
> [VK Mini Apps](https://vk.com/miniapps), то просто игнорируйте эти советы).
[VK Mini Apps](https://vk.com/miniapps) – это кроссплатформенные мини-приложения в экосистеме социальной сети [ВКонтакте](https://vk.com/).

**VKUI** изначально создавался для создания таких приложений. Несмотря на то, что сейчас **VKUI**
это уже больше чем мини-приложения, он до сих пор хорошо подходит для их создания. Ниже
собраны советы по интеграции c **VK Mini Apps**.
**VKUI** изначально создавался как библиотека компонентов для таких приложений. Несмотря на то, что
сейчас **VKUI**больше, чем мини-приложения, он до сих пор хорошо подходит для них. Ниже мы
собрали советы по интеграции с **VK Mini Apps**.

Про саму разработку **VK Mini Apps** читайте здесь https://dev.vk.com/mini-apps/overview
Про саму разработку **VK Mini Apps** читайте [статью "Мини-приложения" на портале VK для разработчиков](https://dev.vk.com/mini-apps/overview).

## Конфигурация VKUI

> Советуем использовать шаблон https://github.com/VKCOM/create-vk-mini-app. В ней конфигурация
> описанная ниже есть по умолчанию.
> Советуем использовать шаблон [@vkontakte/create-vk-mini-app](https://github.com/VKCOM/create-vk-mini-app).
> В нем конфигурация, описанная ниже, есть по умолчанию.
Для начала устанавливаем библиотеки:

Expand Down Expand Up @@ -116,16 +134,16 @@ export const transformVKBridgeAdaptivity = (vkBridgeAdaptivity: UseAdaptivity):
требуется.

> _Правый верхний угол_ [PanelHeader](https://vkcom.github.io/VKUI/#/PanelHeader) зарезервирован для
> нативного бара с кнопками управления мини-приложенияем, поэтому не рекомендуется использовать
> нативного бара с кнопками управления мини-приложением, поэтому не рекомендуем использовать
> параметр `after`.
>
> Чтобы автоматически скрывать `after` у [PanelHeader](https://vkcom.github.io/VKUI/#/PanelHeader),
> в [ConfigProvider](https://vkcom.github.io/VKUI/#/ConfigProvider) существует параметр
> в [ConfigProvider](https://vkcom.github.io/VKUI/#/ConfigProvider) есть параметр
> `hasCustomPanelHeaderAfter`.
### [View](https://vkcom.github.io/VKUI/#/View)

На стартовой странице мини-приложения необходимо включать свайпбек нативного клиента, чтобы
На стартовой странице мини-приложения вы должны включить свайпбек нативного клиента, чтобы
пользователь смог выйти из мини-приложения. Для этого нужно вызывать определенные методы
**VK Bridge** в зависимости от типа мини-приложения:

Expand Down Expand Up @@ -172,14 +190,14 @@ const SomeViews = () => {

> На устройствах с Android нажатие кнопки **Назад** вызывает в WebView событие [history.back](https://developer.mozilla.org/ru/docs/Web/API/Window/history).
> По нажатию этой кнопки официальное приложение сделает возврат на предыдущую страницу вашего
> приложения или закроет его, если вернуться невозможно. Поэтому для корректной навигации необходимо
> обрабатывать нажатие аппаратной клавиши в мини-приложении и реализовывать роутинг. Например при
> помощи библиотеки `react-router`.
> приложения или закроет его, если вернуться невозможно. Поэтому для корректной навигации вы должны
> обрабатывать нажатие аппаратной клавиши в мини-приложении и реализовывать роутинг. Сделать это
> можно, например, при помощи библиотеки `react-router`.
## Виброотклик (Taptic Engine)

Для улучшения пользовательского опыта при взаимодействие с вашим мини-приложением, в **VK Bridge**
существует события вызова вибрации на устройстве, если те поддерживается.
Для улучшения пользовательского опыта при взаимодействии с вашим мини-приложением в **VK Bridge**
существуют события вызова вибрации на устройстве, которое их поддерживает.

[@vkontakte/vk-bridge-react](https://www.npmjs.com/package/@vkontakte/vk-bridge) предоставляет
функцию `runTapticImpactOccurred`, которая отправляет событие [VKWebAppTapticImpactOccurred](https://dev.vk.com/bridge/VKWebAppTapticImpactOccurred),
Expand Down
24 changes: 1 addition & 23 deletions styleguide/pages/intro.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,4 @@
**VKUI** — это библиотека адаптивных React-компонентов, для создания веб-приложений.

> **Подготовка к отвязке от [VK Mini Apps](https://vk.com/miniapps)**
>
> Изначально, **VKUI** создавался как инструмент для создания клиентской части мини-приложений
> [ВКонтакте](https://vk.com). В связи с этим, до версии **v5** включительно, **VKUI** содержит интеграцию с
> библиотекой [VK Bridge](https://www.npmjs.com/package/@vkontakte/vk-bridge), которая реализует
> общение между [VK Mini Apps](<(https://vk.com/miniapps)>) и официальными клиентами [ВКонтакте](https://vk.com).
>
> Сейчас **VKUI** уже больше чем просто мини-приложения. Разработчики используют библиотеку, чтобы
> создавать полноценные независимые приложения, которые никак не связаны с [VK Mini Apps](https://vk.com/miniapps).
> Но тем не менее им приходится иметь дело с этим наследием.
>
> Чтобы отделить **VKUI** от [VK Mini Apps](https://vk.com/miniapps), начиная с версии **v6** будет
> удалена интеграция с [VK Bridge](https://www.npmjs.com/package/@vkontakte/vk-bridge).
>
> В рамках **v5** внесены следующие подготовительные изменения:
>
> - добавлены советы по подготовке к обновлению на **v6** – в документации и в
> предупреждениях в **DevTools** (☝️ если вы не разработчик [VK Mini Apps](https://vk.com/miniapps),
> то просто игнорируйте эти советы);
> - создана страница [Интеграция с VK Mini Apps](https://vkcom.github.io/VKUI/#/integrations-vk-mini-apps),
> которая содержит всю информацию об интеграции **VKUI** с [VK Mini Apps](https://vk.com/miniapps).
**VKUI** — это библиотека адаптивных React-компонентов для создания веб-приложений.

Библиотека основана на [дизайн-системе ВКонтакте](https://www.figma.com/@vk) и реализует её интерфейсы для различных платформ.

Expand Down
Loading

0 comments on commit e31e6ac

Please sign in to comment.