feat(react-ui): update typescript and others (#3413)

skbkontur · Apr 27, 2024 · 5efbcec · 5efbcec
1 parent cce656b
commit 5efbcec
Show file tree

Hide file tree

Showing 12 changed files with 262 additions and 232 deletions.
diff --git a/...ges/react-ui-validations/docs/Pages/Concepts/InlineValidations/ControlsWithValidations.ts b/...ges/react-ui-validations/docs/Pages/Concepts/InlineValidations/ControlsWithValidations.ts
@@ -1,5 +1,5 @@
-import React from 'react';
-import { DatePicker } from '@skbkontur/react-ui/components/DatePicker';
+import React, { ComponentType } from 'react';
+import { DatePicker, DatePickerProps } from '@skbkontur/react-ui/components/DatePicker';
 import { Input } from '@skbkontur/react-ui/components/Input';
 
 import { RenderErrorMessage, ValidationInfo, ValidationWrapper } from '../../../../src';
@@ -87,7 +87,7 @@ function wrapControl<TComponent extends React.ComponentType<ExtractProps<TCompon
 }
 
 const WrappedInput = wrapControl(Input);
-const WrappedDatePicker = wrapControl(DatePicker);
+const WrappedDatePicker = wrapControl(DatePicker as ComponentType<DatePickerProps>);
 
 export { WrappedInput as Input };
 export { WrappedDatePicker as DatePicker };

diff --git a/packages/react-ui/.eslintrc b/packages/react-ui/.eslintrc
@@ -11,7 +11,8 @@
       ],
       "files": ["**/*.ts", "**/*.tsx"],
       "rules": {
-        "import/no-default-export": 0
+        "import/no-default-export": 0,
+        "@typescript-eslint/no-unused-vars": 0
       }
     }
   ]

diff --git a/packages/react-ui/components/MiniModal/__stories__/MiniModal.stories.tsx b/packages/react-ui/components/MiniModal/__stories__/MiniModal.stories.tsx
@@ -12,7 +12,7 @@ import { ThemeFactory } from '../../../lib/theming/ThemeFactory';
 
 export default {
   title: 'MiniModal',
-  parameters: { creevey: { captureElement: '[data-testid="modal-content"]' } },
+  parameters: { creevey: { captureElement: '[data-tid="modal-content"]' } },
 } as Meta;
 
 export const Simple = () => (

diff --git a/packages/react-ui/components/Select/Select.tsx b/packages/react-ui/components/Select/Select.tsx
@@ -550,7 +550,7 @@ export class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps
           const element = item();
 
           if (React.isValidElement(element)) {
-            return React.cloneElement(element, { key: i, isMobile, size });
+            return React.cloneElement(element, { key: i, isMobile, size } as MenuItemProps);
           }
 
           return null;

diff --git a/packages/react-ui/components/Textarea/__stories__/Textarea.stories.tsx b/packages/react-ui/components/Textarea/__stories__/Textarea.stories.tsx
@@ -438,7 +438,7 @@ TextareaWithCounters.parameters = {
           .actions({
             bridge: true,
           })
-          .click(this.browser.findElement({ css: '[data-tid~="TextareaCounter__helpIcon"]' }))
+          .click(this.browser.findElement({ css: `svg` }))
           .perform();
         await delay(1000);
 

diff --git a/packages/react-ui/internal/CustomComboBox/__stories__/ComboBoxView.stories.tsx b/packages/react-ui/internal/CustomComboBox/__stories__/ComboBoxView.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import OkIcon from '@skbkontur/react-icons/Ok';
+import OkIcon from '@skbkontur/react-icons/';
 
 import { Story } from '../../../typings/stories';
 import { ComboBoxView } from '../ComboBoxView';
@@ -8,7 +8,6 @@ import { Modal } from '../../../components/Modal';
 import { MenuItem } from '../../../components/MenuItem';
 import { MenuSeparator } from '../../../components/MenuSeparator';
 import { MenuHeader } from '../../../components/MenuHeader';
-import { InputIconType } from '../../../components/Input';
 
 export default { title: 'ComboBoxView' };
 
@@ -44,8 +43,8 @@ export const InputLikeText: Story = () => (
     <ComboBoxView drawArrow />
     <ComboBoxView loading items={new Array(2)} value="Hello" />
     <div>
-      <ComboBoxView loading rightIcon={OkIcon as InputIconType} items={new Array(2)} value="Hello" /> ComboBoxView с
-      правой иконкой в состоянии загрузки
+      <ComboBoxView loading rightIcon={OkIcon} items={new Array(2)} value="Hello" /> ComboBoxView с правой иконкой в
+      состоянии загрузки
     </div>
     <ComboBoxView error disabled placeholder="Error and Disabled" />
   </Gapped>

diff --git a/...s/react-ui/internal/HideBodyVerticalScroll/__stories__/HideBodyVerticalScroll.stories.tsx b/...s/react-ui/internal/HideBodyVerticalScroll/__stories__/HideBodyVerticalScroll.stories.tsx
@@ -65,12 +65,14 @@ export const Sample: Story = () => (
 );
 Sample.parameters = { creevey: { tests: testScrollLockUnlock } };
 
-export const WithScrollableContent: Story = () => (
+const renderScrollableContent = () => (
   <div>
     <SampleLockScroll />
     <div>{'s c r o l l . '.repeat(1000)}</div>
   </div>
 );
+
+export const WithScrollableContent: Story = () => renderScrollableContent();
 WithScrollableContent.parameters = { creevey: { tests: testScrollLockUnlock } };
 
 export const WithHTMLOverflowYScroll: Story = () => {
@@ -95,7 +97,7 @@ WithHTMLOverflowYScroll.parameters = { creevey: { tests: testScrollLockUnlock }
 export const Multiple_WithScrollableContent: Story = () => (
   <>
     <HideBodyVerticalScroll />
-    {WithScrollableContent}
+    {renderScrollableContent()}
   </>
 );
 Multiple_WithScrollableContent.parameters = { creevey: { tests: testScrollLockUnlock } };
diff --git a/packages/react-ui/internal/Menu/__stories__/Menu.stories.tsx b/packages/react-ui/internal/Menu/__stories__/Menu.stories.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Meta, Story } from '../../../typings/stories';
 import { OkIcon } from '../../../internal/icons/16px';
 import { Menu } from '../Menu';
-import { MenuItem } from '../../../components/MenuItem';
+import { MenuItem, MenuItemProps } from '../../../components/MenuItem';
 import { MenuHeader } from '../../../components/MenuHeader';
 import { MenuSeparator } from '../../../components/MenuSeparator';
 
@@ -236,7 +236,7 @@ class MoveControls extends React.Component<React.PropsWithChildren> {
         <br />
         <div data-tid="menu-container" style={{ padding: 10 }}>
           {React.isValidElement(this.props.children)
-            ? React.cloneElement(this.props.children, { ref: this.refMenu })
+            ? React.cloneElement(this.props.children, { ref: this.refMenu } as MenuItemProps)
             : this.props.children}
         </div>
       </div>

diff --git a/packages/react-ui/internal/ZIndex/__stories__/ZIndex.stories.tsx b/packages/react-ui/internal/ZIndex/__stories__/ZIndex.stories.tsx
@@ -5,7 +5,7 @@ import { Story } from '../../../typings/stories';
 import { Gapped } from '../../../components/Gapped';
 import { Modal } from '../../../components/Modal';
 import { Loader } from '../../../components/Loader';
-import { Select } from '../../../components/Select';
+import { Select, SelectDataTids } from '../../../components/Select';
 import { Kebab } from '../../../components/Kebab';
 import { MenuItem } from '../../../components/MenuItem';
 import { Center } from '../../../components/Center';
@@ -420,7 +420,6 @@ class TooltipAndSelect extends React.Component {
             value={'small'}
             items={['small', 'medium', 'large']}
             size={'small'}
-            data-tid="test-select"
           />
         </Tooltip>
       </div>
@@ -777,7 +776,7 @@ TooltipAndSelectStory.parameters = {
 
         await this.browser
           .actions({ bridge: true })
-          .click(this.browser.findElement({ css: '[data-tid~="test-select"]' }))
+          .click(this.browser.findElement({ css: `[data-tid=${SelectDataTids.label}]` }))
           .sendKeys('q')
           .perform();
         await delay(1000);

diff --git a/packages/react-ui/lib/utils.ts b/packages/react-ui/lib/utils.ts
@@ -183,7 +183,7 @@ export function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React
  * @param props Props object to extract data attributes from.
  * @returns Separated data attributes and all other props.
  */
-export const extractDataProps = <T>(props: T) => {
+export const extractDataProps = <T extends Record<string, any>>(props: T) => {
   const dataProps: Record<string, any> = {};
   const restWithoutDataProps: Record<string, any> = {};
 

diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json
@@ -77,10 +77,10 @@
     "@babel/preset-typescript": "^7.24.1",
     "@babel/register": "^7.16.5",
     "@cfaester/enzyme-adapter-react-18": "^0.7.1",
-    "@skbkontur/icons": "1.5.1",
-    "@skbkontur/react-icons": "5.2.0",
-    "@skbkontur/react-props2attrs": "0.1.2",
-    "@skbkontur/react-sorge": "0.1.0",
+    "@skbkontur/icons": "1.9.0",
+    "@skbkontur/react-icons": "5.2.9",
+    "@skbkontur/react-props2attrs": "0.1.3",
+    "@skbkontur/react-sorge": "0.2.1",
     "@storybook/addon-a11y": "6.4.22",
     "@storybook/addon-essentials": "6.4.22",
     "@storybook/addon-ie11": "0.0.6",
@@ -89,7 +89,7 @@
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/react": "6.4.22",
     "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "15.0.2",
+    "@testing-library/react": "15.0.4",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/enzyme": "^3.10.10",
@@ -99,15 +99,15 @@
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.isequal": "^4.5.5",
     "@types/lodash.throttle": "^4.1.6",
-    "@types/prop-types": "15.7.4",
+    "@types/prop-types": "15.7.12",
     "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",
-    "@types/react-input-mask": "2.0.5",
-    "@types/react-is": "^17.0.3",
+    "@types/react-input-mask": "3.0.5",
+    "@types/react-is": "^18.2.4",
     "@types/react-transition-group": "^4.4.4",
     "@types/shallowequal": "^1.1.1",
     "@types/warning": "^3.0.0",
-    "axios": "^0.24.0",
+    "axios": "^1.6.8",
     "babel-jest": "29.7.0",
     "babel-loader": "^9.1.3",
     "chalk": "4.1.0",
@@ -116,19 +116,19 @@
     "creevey": "0.8.2-fix-wait.2",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.1",
-    "dotenv": "^10.0.0",
+    "dotenv": "^16.4.5",
     "dts-css-modules-loader": "^2.0.1",
     "enzyme": "^3.11.0",
     "eslint-plugin-jest": "28.2.0",
-    "eslint-plugin-jest-dom": "^5.2.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^6.2.2",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
-    "fs-extra": "^10.0.0",
+    "fs-extra": "^11.2.0",
     "fs-readdir-recursive": "^1.1.0",
-    "gh-pages": "^3.2.3",
+    "gh-pages": "^6.1.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.7.0",
     "jest-axe": "^8.0.0",
@@ -140,16 +140,16 @@
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-styleguidist": "^12.0.1",
-    "rimraf": "^3.0.2",
+    "rimraf": "^5.0.5",
     "semver": "^7.3.5",
     "serve": "^13.0.2",
     "style-loader": "^4.0.0",
-    "stylelint": "^14.2.0",
-    "stylelint-config-standard": "^24.0.0",
-    "typescript": "4.5.4",
+    "stylelint": "^16.4.0",
+    "stylelint-config-standard": "^36.0.0",
+    "typescript": "4.9.4",
     "upath": "^2.0.1",
     "url-loader": "^4.1.1",
-    "wait-on": "^6.0.0",
+    "wait-on": "^7.2.0",
     "webpack": "^5.91.0"
   },
   "peerDependencies": {