From 8b4c123a69009918518d4c296af3c315f811afd9 Mon Sep 17 00:00:00 2001 From: Evgenij Shangin Date: Wed, 1 Feb 2023 15:42:47 +0300 Subject: [PATCH] feat!: up @gravity-ui/uikit to 4 version (#39) --- package-lock.json | 140 ++++++++++-------- package.json | 22 +-- .../DashKit/__stories__/DashKitShowcase.tsx | 12 +- src/components/DashKit/__stories__/Demo.tsx | 44 +++--- .../OverlayControls/OverlayControls.tsx | 21 ++- 5 files changed, 132 insertions(+), 107 deletions(-) diff --git a/package-lock.json b/package-lock.json index fde6138..193f171 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2069,21 +2069,22 @@ "dev": true }, "@gravity-ui/uikit": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-3.0.2.tgz", - "integrity": "sha512-BTkAPgvltxSdrOACkXec4IBpF5eHofHyMgV9oC7+Hj0U7oy4kmvpxVX0syGjM04EoPtThlDjNdPQuQh9q7AtDw==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-4.0.5.tgz", + "integrity": "sha512-/vz03oKH3sXPL4caEyNoECVRM9D0r7zGFgdcJw/am9kNLuCUuTDlzB/xLVo8V/zbiSHuIg0/i4SeqoxyS0edBw==", "dev": true, "requires": { "@gravity-ui/i18n": "^1.0.0", - "@popperjs/core": "2.11.2", + "@popperjs/core": "2.11.6", "bem-cn-lite": "4.0.0", - "focus-trap": "6.7.2", + "focus-trap": "7.2.0", "lodash": "4.17.21", - "react-copy-to-clipboard": "5.0.4", - "react-popper": "2.2.5", + "react-copy-to-clipboard": "5.1.0", + "react-popper": "2.3.0", "react-sortable-hoc": "2.0.0", - "react-virtualized-auto-sizer": "1.0.6", - "react-window": "1.8.6", + "react-transition-group": "^4.4.5", + "react-virtualized-auto-sizer": "1.0.7", + "react-window": "1.8.8", "resize-observer-polyfill": "1.5.1", "tslib": "2.3.1", "utility-types": "3.10.0" @@ -2701,9 +2702,9 @@ } }, "@popperjs/core": { - "version": "2.11.2", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", - "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==", + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", "dev": true }, "@sinonjs/commons": { @@ -4501,9 +4502,9 @@ "dev": true }, "@types/react": { - "version": "17.0.47", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.47.tgz", - "integrity": "sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==", + "version": "18.0.27", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz", + "integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==", "dev": true, "requires": { "@types/prop-types": "*", @@ -7527,9 +7528,9 @@ } }, "copy-to-clipboard": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz", - "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz", + "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==", "dev": true, "requires": { "toggle-selection": "^1.0.6" @@ -7913,9 +7914,9 @@ } }, "csstype": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", - "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", "dev": true }, "currently-unhandled": { @@ -8395,6 +8396,16 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -10099,12 +10110,12 @@ } }, "focus-trap": { - "version": "6.7.2", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.7.2.tgz", - "integrity": "sha512-mRVv9QPCXITaDreu+pNXiPk1Rpn0WQtGvGrDo3Z/s2kdwtzFw/WOPfbLkdxWWvcahoInm9eRztuQOr1RNyQGrw==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.2.0.tgz", + "integrity": "sha512-v4wY6HDDYvzkBy4735kW5BUEuw6Yz9ABqMYLuTNbzAFPcBOGiGHwwcNVMvUz4G0kgSYh13wa/7TG3XwTeT4O/A==", "dev": true, "requires": { - "tabbable": "^5.2.1" + "tabbable": "^6.0.1" } }, "for-in": { @@ -16862,23 +16873,22 @@ } }, "react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dev": true, "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "react-copy-to-clipboard": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz", - "integrity": "sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz", + "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==", "dev": true, "requires": { - "copy-to-clipboard": "^3", - "prop-types": "^15.5.8" + "copy-to-clipboard": "^3.3.1", + "prop-types": "^15.8.1" } }, "react-docgen": { @@ -16917,24 +16927,22 @@ "dev": true }, "react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "dev": true, "requires": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" }, "dependencies": { "scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "dev": true, "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } } } @@ -17008,9 +17016,9 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "react-popper": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", - "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", "dev": true, "requires": { "react-fast-compare": "^3.0.1", @@ -17068,16 +17076,28 @@ "scheduler": "^0.19.1" } }, + "react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dev": true, + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "react-virtualized-auto-sizer": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz", - "integrity": "sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.7.tgz", + "integrity": "sha512-Mxi6lwOmjwIjC1X4gABXMJcKHsOo0xWl3E3ugOgufB8GJU+MqrtY35aBuvCYv/razQ1Vbp7h1gWJjGjoNN5pmA==", "dev": true }, "react-window": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.6.tgz", - "integrity": "sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==", + "version": "1.8.8", + "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.8.tgz", + "integrity": "sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ==", "dev": true, "requires": { "@babel/runtime": "^7.0.0", @@ -19109,9 +19129,9 @@ "dev": true }, "tabbable": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz", - "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.0.1.tgz", + "integrity": "sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA==", "dev": true }, "table": { @@ -19654,9 +19674,9 @@ } }, "typescript": { - "version": "4.7.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", - "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "dev": true }, "uglify-js": { diff --git a/package.json b/package.json index f39c098..9e8a823 100644 --- a/package.json +++ b/package.json @@ -41,25 +41,25 @@ "react-grid-layout": "^1.3.4" }, "peerDependencies": { - "@gravity-ui/uikit": "^3.0.0", + "@gravity-ui/uikit": "^4.0.0", "bem-cn-lite": "^4.0.0", - "react": "^16.0.0 || ^17.0.0" + "react": "^16.8.0 || ^17 || ^18" }, "devDependencies": { "@commitlint/cli": "^17.0.3", "@commitlint/config-conventional": "^17.0.3", + "@gravity-ui/eslint-config": "^1.0.2", + "@gravity-ui/prettier-config": "^1.0.1", + "@gravity-ui/stylelint-config": "^1.0.1", + "@gravity-ui/tsconfig": "^1.0.0", + "@gravity-ui/uikit": "^4.0.5", "@storybook/addon-essentials": "^6.5.9", "@storybook/preset-scss": "^1.0.3", "@storybook/react": "^6.5.9", "@types/enzyme": "^3.10.8", "@types/jest": "^26.0.20", "@types/lodash": "^4.14.170", - "@types/react": "^17.0.47", - "@gravity-ui/eslint-config": "^1.0.2", - "@gravity-ui/prettier-config": "^1.0.1", - "@gravity-ui/stylelint-config": "^1.0.1", - "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^3.0.0", + "@types/react": "^18.0.27", "babel-jest": "^26.6.3", "bem-cn-lite": "^4.0.0", "copyfiles": "^2.4.1", @@ -78,15 +78,15 @@ "npm-run-all": "^4.1.5", "postcss": "^8.4.12", "prettier": "^2.6.0", - "react": "^17.0.2", + "react": "^18.2.0", "react-docgen-typescript": "^2.2.2", - "react-dom": "^17.0.2", + "react-dom": "^18.2.0", "rimraf": "^3.0.2", "sass": "^1.53.0", "sass-loader": "^10.3.1", "stylelint": "^14.6.0", "ts-jest": "^26.5.3", - "typescript": "^4.7.4" + "typescript": "^4.9.5" }, "husky": { "hooks": { diff --git a/src/components/DashKit/__stories__/DashKitShowcase.tsx b/src/components/DashKit/__stories__/DashKitShowcase.tsx index bc76bd2..682d5e7 100644 --- a/src/components/DashKit/__stories__/DashKitShowcase.tsx +++ b/src/components/DashKit/__stories__/DashKitShowcase.tsx @@ -8,7 +8,7 @@ import {DeleteIcon} from '../../../icons/DeleteIcon'; import {WarningIcon} from '../../../icons/WarningIcon'; import i18n from '../../../i18n'; import {getConfig, makeid, titleId} from './utils'; -import Demo from './Demo'; +import {Demo, DemoRow} from './Demo'; type DashKitDemoState = { editMode: boolean; @@ -83,7 +83,7 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> { return ( - + - - {this.state.lastAction} - + + {this.state.lastAction} + { ref={this.dashKitRef} overlayControls={controls} /> - + ); } diff --git a/src/components/DashKit/__stories__/Demo.tsx b/src/components/DashKit/__stories__/Demo.tsx index 4b19a83..859cf8c 100644 --- a/src/components/DashKit/__stories__/Demo.tsx +++ b/src/components/DashKit/__stories__/Demo.tsx @@ -2,34 +2,30 @@ import React from 'react'; import block from 'bem-cn-lite'; import './Demo.scss'; -export type DemoProps = { +export type DemoProps = React.PropsWithChildren<{ title: string; -}; +}>; -export type DemoRowProps = { +export type DemoRowProps = React.PropsWithChildren<{ title: string; -}; +}>; const b = block('dashkit-demo'); -export default class Demo extends React.Component { - static Row: React.FC = function ({title, children}) { - return ( -
-
{title}
-
{children}
-
- ); - }; - - render() { - const {title, children} = this.props; +export const Demo = ({title, children}: DemoProps) => { + return ( +
+

{title}

+
{children}
+
+ ); +}; - return ( -
-

{title}

-
{children}
-
- ); - } -} +export const DemoRow = ({title, children}: DemoRowProps) => { + return ( +
+
{title}
+
{children}
+
+ ); +}; diff --git a/src/components/OverlayControls/OverlayControls.tsx b/src/components/OverlayControls/OverlayControls.tsx index bec307c..c50f164 100644 --- a/src/components/OverlayControls/OverlayControls.tsx +++ b/src/components/OverlayControls/OverlayControls.tsx @@ -14,7 +14,8 @@ import { MenuItemProps, } from '@gravity-ui/uikit'; import {COPIED_WIDGET_STORE_KEY, MenuItems} from '../../constants'; -import {ConfigLayout, ConfigItem, PluginBase, StringParams} from '../../shared'; +import {ConfigLayout, ConfigItem, PluginBase, StringParams, Config} from '../../shared'; +import type {RegisterManager} from '../../utils/register-manager'; import {DotsIcon} from '../../icons/DotsIcon'; import {CogIcon} from '../../icons/CogIcon'; import {CloseIcon} from '../../icons/CloseIcon'; @@ -63,6 +64,14 @@ interface OverlayControlsProps extends OverlayControlsDefaultProps { overlayControls?: Record; } +type DashKitCtx = React.Context<{ + registerManager: RegisterManager; + itemsParams: Record; + editItem: (item: ConfigItem) => void; + removeItem: (id: string) => void; + config: Config; +}>; + const DEFAULT_DROPDOWN_MENU = [MenuItems.Copy, MenuItems.Delete]; class OverlayControls extends React.Component { @@ -72,6 +81,7 @@ class OverlayControls extends React.Component { view: 'normal', size: 'm', }; + context!: React.ContextType; render() { const {items = [], position} = this.props; const hasCustomControlsWithWidgets = items.length > 0; @@ -196,13 +206,12 @@ class OverlayControls extends React.Component { } private renderDropdownMenu() { const {view, size} = this.props; - const {registerManager} = this.context; + const {registerManager, itemsParams} = this.context; - const itemsParams: Record = this.context.itemsParams; const configItem = this.props.configItem; const itemParams = itemsParams[configItem.id]; - let menu = registerManager.settings.menu; + let menu = registerManager.settings.menu as any; if (!menu.length) { menu = DEFAULT_DROPDOWN_MENU; } @@ -289,8 +298,8 @@ class OverlayControls extends React.Component { defaults: this.props.configItem.defaults, namespace: this.props.configItem.namespace, layout: { - w: correspondedItemLayout.w, - h: correspondedItemLayout.h, + w: correspondedItemLayout!.w, + h: correspondedItemLayout!.h, }, };