From 9bf88c339b1921f6e76dda23578dfda0616c1140 Mon Sep 17 00:00:00 2001 From: Inomdzhon Mirdzhamolov Date: Thu, 30 Nov 2023 08:47:11 +0300 Subject: [PATCH] feat: rm legacy vk-bridge --- README.md | 6 +++--- package.json | 1 - packages/vkui/package.json | 1 - packages/vkui/src/components/View/Readme.md | 2 -- .../vkui/src/components/View/View.stories.tsx | 9 --------- packages/vkui/src/index.ts | 4 ++-- packages/vkui/src/types.ts | 8 -------- styleguide/pages/migration_v6.md | 15 +++++++++++++++ styleguide/pages/platforms_and_themes.md | 2 +- styleguide/pages/quick_start.md | 10 +++------- yarn.lock | 9 --------- 11 files changed, 24 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index c5a9bd910c..13b0899bb8 100644 --- 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 index bf76097e58..9b2d7ec856 100644 --- 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 index a412c9ff96..13644c41bb 100644 --- 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 index 4e1a493a7f..ffdc09b50e 100644 --- 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 index 4046f915a1..3a339e2424 100644 --- 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(null); diff --git a/packages/vkui/src/index.ts b/packages/vkui/src/index.ts index a476df5fc4..bd6712fee6 100644 --- 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 index 317f2f2b22..deba74d767 100644 --- 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; -} - export interface Version { major: number; minor?: number; diff --git a/styleguide/pages/migration_v6.md b/styleguide/pages/migration_v6.md index 13480be7ae..f56e405cd8 100644 --- 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; +} +``` +

## Поддержка браузеров diff --git a/styleguide/pages/platforms_and_themes.md b/styleguide/pages/platforms_and_themes.md index a753ebd5d9..e9df564240 100644 --- 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 index 4a76ed50c3..057ff7cfa0 100644 --- 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 index 443c76d37b..ef616bc38d 100644 --- 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