feat: rm legacy vk-bridge (#6170)

h2. Описание Удаляем зависимость и его упоминания везде, кроме `integrations_vk_mini_apps.md`. h2. Изменения Также удалил `@vkontakte/icons` из инструкции по установке (см. #5718).
VKCOM · Nov 30, 2023 · 84eac04 · 84eac04
1 parent 78d5871
commit 84eac04
Show file tree

Hide file tree

Showing 11 changed files with 24 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -22,19 +22,19 @@ VKUI — это библиотека адаптивных React-компонен
 **npm:**
 
 ```sh
-npm i @vkontakte/vkui @vkontakte/vk-bridge
+npm i @vkontakte/vkui
 ```
 
 **yarn:**
 
 ```sh
-yarn add @vkontakte/vkui @vkontakte/vk-bridge
+yarn add @vkontakte/vkui
 ```
 
 **pnpm:**
 
 ```sh
-pnpm add @vkontakte/vkui @vkontakte/vk-bridge
+pnpm add @vkontakte/vkui
 ```
 
 > _Обратите внимание_: мы поддерживаем [react](https://www.npmjs.com/package/react) и [react-dom](https://www.npmjs.com/package/react-dom) `^17.0.0` и `^18.1.0`

diff --git a/package.json b/package.json
@@ -35,7 +35,6 @@
     "@vkontakte/eslint-plugin": "^1.1.1",
     "@vkontakte/prettier-config": "^0.1.0",
     "@vkontakte/stylelint-config": "3.5.3",
-    "@vkontakte/vk-bridge": "^2.1.3",
     "@vkontakte/vkui-tokens": "4.41.2",
     "autoprefixer": "^10.4.16",
     "concurrently": "^8.2.2",

diff --git a/packages/vkui/package.json b/packages/vkui/package.json
@@ -62,7 +62,6 @@
     "generate:css-custom-medias": "node scripts/generateCSSCustomMedias.js"
   },
   "peerDependencies": {
-    "@vkontakte/vk-bridge": "^2.4.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/packages/vkui/src/components/View/Readme.md b/packages/vkui/src/components/View/Readme.md
@@ -92,8 +92,6 @@ const App = () => {
 ```
 
 ```jsx
-import vkBridge from '@vkontakte/vk-bridge';
-
 const App = () => {
   const [history, setHistory] = useState(['main']);
   const activePanel = history[history.length - 1];

diff --git a/packages/vkui/src/components/View/View.stories.tsx b/packages/vkui/src/components/View/View.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import vkBridge from '@vkontakte/vk-bridge';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
 import { getRandomUsers } from '../../testing/mock';
 import { Alert } from '../Alert/Alert';
@@ -119,7 +118,6 @@ export const SwipeBlockExample: Story = {
   render: function Render() {
     const [history, setHistory] = React.useState(['main']);
     const activePanel = history[history.length - 1];
-    const isFirst = history.length === 1;
 
     const go = React.useCallback((panel: string) => {
       setHistory((prevHistory) => [...prevHistory, panel]);
@@ -131,13 +129,6 @@ export const SwipeBlockExample: Story = {
     const handleProfileClick = React.useCallback(() => go('profile'), [go]);
     const handleSettingsClick = React.useCallback(() => go('settings'), [go]);
 
-    React.useEffect(() => {
-      // В стандартных мини-приложениях делайте так:
-      void vkBridge.send('VKWebAppSetSwipeSettings', { history: isFirst });
-      // В мини-приложениях `'internal'` делайте так:
-      void vkBridge.send(isFirst ? 'VKWebAppEnableSwipeBack' : 'VKWebAppDisableSwipeBack');
-    }, [isFirst]);
-
     const [userName, setUserName] = React.useState('');
     const [popoutWithRestriction, setPopoutWithRestriction] =
       React.useState<React.ReactNode | null>(null);

diff --git a/packages/vkui/src/index.ts b/packages/vkui/src/index.ts
@@ -4,7 +4,7 @@ import './styles/dynamicTokens.css';
 import './styles/focusVisible.module.css';
 
 export { AppRoot } from './components/AppRoot/AppRoot';
-export type { AppRootProps } from './components/AppRoot/AppRoot';
+export type { AppRootProps, SafeAreaInsets } from './components/AppRoot/AppRoot';
 
 /**
  * Typography
@@ -382,7 +382,7 @@ export { CustomScrollView } from './components/CustomScrollView/CustomScrollView
 /**
  * Types
  */
-export type { AlignType, HasPlatform, HasInsets, HasRef, HasRootRef } from './types';
+export type { AlignType, HasPlatform, HasRef, HasRootRef } from './types';
 export type { NavIdProps } from './lib/getNavId';
 export type { PlatformType } from './lib/platform';
 export type { TransitionContextProps } from './components/NavTransitionContext/NavTransitionContext';

diff --git a/packages/vkui/src/types.ts b/packages/vkui/src/types.ts
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Insets } from '@vkontakte/vk-bridge';
 import { PlatformType } from './lib/platform';
 
 export type AnyFunction = (...args: any[]) => any;
@@ -38,13 +37,6 @@ export interface HasPlatform {
   platform?: PlatformType;
 }
 
-export interface HasInsets {
-  /**
-   * @ignore
-   */
-  insets?: Partial<Insets>;
-}
-
 export interface Version {
   major: number;
   minor?: number;

diff --git a/styleguide/pages/migration_v6.md b/styleguide/pages/migration_v6.md
@@ -74,6 +74,21 @@
 
 Используйте вместо него хук `useInsets()` из [@vkontakte/vk-bridge-react](https://www.npmjs.com/package/@vkontakte/vk-bridge-react).
 
+## Тип ~`HasInsets`~
+
+Используйте вместо него `SafeAreaInsets`.
+
+Если вы используете [@vkontakte/vk-bridge](https://www.npmjs.com/package/@vkontakte/vk-bridge), то
+вы можете объявить тип у себя следующим образом:
+
+```ts
+import type { Insets } form '@vkontakte/vk-brige';
+
+interface HasInsets {
+  insets?: Partial<Insets>;
+}
+```
+
 <br/><br/>
 
 ## Поддержка браузеров

diff --git a/styleguide/pages/platforms_and_themes.md b/styleguide/pages/platforms_and_themes.md
@@ -71,7 +71,7 @@
 
 ### Откуда взять значение темы при встраивании?
 
-`ConfigProvider` умеет сам определять тему из [vk-bridge](https://www.npmjs.com/package/@vkontakte/vk-bridge).
+`ConfigProvider` умеет сам определять тему ориентируясь на CSS медиа выражение [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
 
 ### Использование темы в коде
 

diff --git a/styleguide/pages/quick_start.md b/styleguide/pages/quick_start.md
@@ -15,17 +15,13 @@
 
 ```shell static
 # npm
-npm i --save @vkontakte/vkui @vkontakte/icons @vkontakte/vk-bridge
+npm i --save @vkontakte/vkui
 # yarn
-yarn add @vkontakte/vkui @vkontakte/icons @vkontakte/vk-bridge
+yarn add @vkontakte/vkui
 # or pnpm
-pnpm add @vkontakte/vkui @vkontakte/icons @vkontakte/vk-bridge
+pnpm add @vkontakte/vkui
 ```
 
-- `@vkontakte/icons` — это наши иконки, которые напрямую используются в некоторых компонентах VKUI.
-- `@vkontakte/vk-bridge` необходима для интеграции в клиенты VK (она обеспечит корректные отступы на мобильных
-  устройствах, свайпы, определение темы и тд).
-
 ## Шаг 3
 
 Добавьте тег viewport для корректного отображения интерфейса на безрамочных смартфонах (подробнее см. в статье ["The Notch" and CSS](https://css-tricks.com/the-notch-and-css/)).

diff --git a/yarn.lock b/yarn.lock
@@ -5434,13 +5434,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vkontakte/vk-bridge@npm:^2.1.3":
-  version: 2.12.2
-  resolution: "@vkontakte/vk-bridge@npm:2.12.2"
-  checksum: c43bc8f7ff7357e9fca591e796d7cf7ad8bd713c5aadca904e686152061b349d36784a4fc716be388117d2d4e0dbd2cdf63fb420506275bce9b66405513d9437
-  languageName: node
-  linkType: hard
-
 "@vkontakte/vkjs@npm:^1.1.1":
   version: 1.1.1
   resolution: "@vkontakte/vkjs@npm:1.1.1"
@@ -5510,7 +5503,6 @@ __metadata:
     "@vkontakte/eslint-plugin": ^1.1.1
     "@vkontakte/prettier-config": ^0.1.0
     "@vkontakte/stylelint-config": 3.5.3
-    "@vkontakte/vk-bridge": ^2.1.3
     "@vkontakte/vkui-tokens": 4.41.2
     autoprefixer: ^10.4.16
     concurrently: ^8.2.2
@@ -5614,7 +5606,6 @@ __metadata:
     mitt: ^3.0.1
     storybook: 7.5.3
   peerDependencies:
-    "@vkontakte/vk-bridge": ^2.4.9
     react: ^18.2.0
     react-dom: ^18.2.0
   languageName: unknown