chore: update dependencies (#39)

.babelrc

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.github/workflows/ci.yml

@@ -12,14 +12,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
       with:
         fetch-depth: 0
     - name: Setup Node
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: '14.x'
-        cache: 'npm'
+        node-version: 18
+        cache: npm
     - name: Install Packages
       run: npm ci
     - name: Lint Files
@@ -32,14 +32,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
       with:
         fetch-depth: 0
     - name: Setup Node
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: '14.x'
-        cache: 'npm'
+        node-version: 18
+        cache: npm
     - name: Install Packages
       run: npm ci
     - name: Unit Tests

.github/workflows/main-preview.yml

@@ -10,13 +10,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
       with:
         fetch-depth: 0
     - name: Setup Node
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: 14
+        node-version: 18
     - name: Install Packages
       run: npm ci
       shell: bash

.github/workflows/pr-preview-build.yml

@@ -9,5 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: gravity-ui/preview-build-action@v1
+      with:
+        node-version: 18
       env:
         TS_NODE_PROJECT: .storybook/tsconfig.json

.github/workflows/release.yml

@@ -12,3 +12,4 @@ jobs:
       with:
         github-token: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
         npm-token: ${{ secrets.GRAVITY_UI_BOT_NPM_TOKEN }}
+        node-version: 18

.github/workflows/sync.yml

@@ -11,14 +11,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
       with:
         fetch-depth: 0
     - name: Setup Node
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
-        node-version: 14
-        cache: 'npm'
+        node-version: 18
+        cache: npm
     - name: Install Packages
       run: npm ci
     - name: Download SVG Files

.nvmrc

@@ -1 +1 @@
-14
+18

.prettierrc

@@ -0,0 +1 @@
+"@gravity-ui/prettier-config"

.storybook/main.ts

@@ -1,6 +1,10 @@
-import type {StorybookConfig} from '@storybook/core-common';
+import type {StorybookConfig} from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {fastRefresh: true},
+    },
     stories: ['./**/*.stories.@(ts|tsx)'],
     addons: [
         {name: '@storybook/preset-scss', options: {rule: {sideEffects: true}}},
@@ -17,4 +21,4 @@ const config: StorybookConfig = {
     ],
 };
 
-module.exports = config;
+export default config;

.storybook/manager.ts

@@ -1,5 +1,6 @@
-import {addons} from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 import {create} from '@storybook/theming';
+import packageJson from '../package.json';
 
 addons.setConfig({
     showPanel: false,
@@ -30,7 +31,7 @@ addons.setConfig({
         inputBorderRadius: 4,
 
         brandTitle: `<div style="font-size: 18px; color: #027bf3; font-weight: 600; margin-top: -6px; margin-bottom: 2px;">Gravity UI</div>
-                <div style="font-size: 14px;color: #7d7d7d;font-weight: 400;">Icons</div>`,
+                <div style="font-size: 14px;color: #7d7d7d;font-weight: 400; white-space: nowrap">Icons v${packageJson.version}</div>`,
         brandUrl: 'https://gravity-ui.com',
     }),
 });

.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

.storybook/preview.tsx

@@ -1,29 +1,22 @@
+// eslint-disable-next-line import/order
+import '@gravity-ui/uikit/styles/fonts.css';
+// eslint-disable-next-line import/order
 import '@gravity-ui/uikit/styles/styles.css';
 
 import React from 'react';
-import type {DecoratorFn} from '@storybook/react';
+import type {Decorator, Preview} from '@storybook/react';
 import {ThemeProvider} from '@gravity-ui/uikit';
 
-const withThemeProvider: DecoratorFn = (Story, context) => {
+const withThemeProvider: Decorator = (Story, context) => {
     return (
-        <ThemeProvider theme={context.globals.theme}>
+        <ThemeProvider theme="light">
             <Story {...context} />
         </ThemeProvider>
     );
 };
 
-export const decorators = [withThemeProvider];
-
-export const globalTypes = {
-    theme: {
-        name: 'Theme',
-        defaultValue: 'light',
-        toolbar: {
-            icon: 'mirror',
-            items: [
-                {value: 'light', right: '☼', title: 'Light'},
-                {value: 'dark', right: '☾', title: 'Dark'},
-            ],
-        },
-    },
+const preview: Preview = {
+    decorators: [withThemeProvider],
 };
+
+export default preview;

.storybook/src/IconTooltip/IconTooltip.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {cn} from '../cn';
-import {Popover, PopoverInstanceProps, Label} from '@gravity-ui/uikit';
+import {Label, Popover, PopoverInstanceProps} from '@gravity-ui/uikit';
 
 import './IconTooltip.scss';
 
@@ -21,7 +21,7 @@ export function IconTooltip({
     forceOpen,
     children,
 }: IconTooltipProps) {
-    const popoverRef = React.useRef<PopoverInstanceProps>();
+    const popoverRef = React.useRef<PopoverInstanceProps>(null);
     const content = React.useMemo(
         () => (
             <div className={b('grid')}>

.storybook/src/Showcase.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {cn} from './cn';
-import {Meta, Story} from '@storybook/react';
+import {Meta, StoryFn} from '@storybook/react';
 import {Button, Icon as IconWrapper} from '@gravity-ui/uikit';
 import {IconTooltip} from './IconTooltip/IconTooltip';
 import metadata from '../../metadata.json';
@@ -27,10 +27,10 @@ const iconsMetadataByName = (metadata.icons as IconMeta[]).reduce(
     {} as Record<string, IconMeta>,
 );
 
-export const Showcase: Story = () => {
+export const Showcase: StoryFn = () => {
     const [search, setSearch] = React.useState('');
     const items = libContext.keys().map((path) => {
-        const module = libContext(path);
+        const module = libContext(path) as any;
         const Icon = module.default || module;
         const name = path.match(/(\w+)\.tsx$/)?.[1] ?? '';
         const meta = iconsMetadataByName[name];

.storybook/tsconfig.json

@@ -2,10 +2,11 @@
     "extends": "..",
     "compilerOptions": {
         "module": "commonjs",
-        "target": "ES2017",
-        "resolveJsonModule": true
+        "target": "ES2017"
     },
     "include": [
-        "src"
+        "src",
+        "../node_modules/webpack/module.d.ts",
+        "../package.json"
     ]
 }

commitlint.config.js

@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']};
+export default {extends: ['@commitlint/config-conventional']};

lib/AbbrApi.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const AbbrApi = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/AbbrMl.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const AbbrMl = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/AbbrQl.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const AbbrQl = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/AbbrSql.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const AbbrSql = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/AbbrZip.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const AbbrZip = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/AntennaSignal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const AntennaSignal = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/Aperture.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const Aperture = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/Archive.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const Archive = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowDown.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowDown = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowDownFromLine.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowDownFromLine = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowDownToLine.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowDownToLine = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowDownToSquare.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowDownToSquare = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowLeft.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowLeft = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowLeftFromLine.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowLeftFromLine = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowLeftToLine.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowLeftToLine = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowRight.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowRight = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowRightArrowLeft.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowRightArrowLeft = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowRightFromLine.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowRightFromLine = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowRightFromSquare.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowRightFromSquare = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowRightToLine.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowRightToLine = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowRightToSquare.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowRightToSquare = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"

lib/ArrowRotateLeft.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {SVGProps} from 'react';
+import type {SVGProps} from 'react';
 const ArrowRotateLeft = (props: SVGProps<SVGSVGElement>) => (
     <svg
         xmlns="http://www.w3.org/2000/svg"