chore: lint rules (#467)

.eslintignore

@@ -1,2 +1,3 @@
 storybook-static
 build
+!/.storybook

.eslintrc

@@ -1,20 +1,40 @@
 {
-    "extends": ["@gravity-ui/eslint-config", "@gravity-ui/eslint-config/prettier"],
+    "extends": ["@gravity-ui/eslint-config", "@gravity-ui/eslint-config/client", "@gravity-ui/eslint-config/prettier"],
     "root": true,
-    "env": {
-        "node": true,
-        "jest": true
+    "rules": {
+        "react/jsx-fragments": ["error", "element"],
+        "no-restricted-syntax": [
+            "error",
+            {
+                "selector": "ImportDeclaration[source.value='react'] :matches(ImportNamespaceSpecifier, ImportSpecifier)",
+                "message": "Please use import React from 'react' instead."
+            },
+            {
+                "selector": "TSTypeReference>TSQualifiedName[left.name='React'][right.name='FC']",
+                "message": "Don't use React.FC"
+            }
+        ]
     },
     "overrides": [
         {
             "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
+            "env": {
+                "node": true,
+                "jest": true
+            },
             "extends": ["plugin:testing-library/react"]
         },
         {
             "files": ["**/__stories__/**/*.[jt]s?(x)"],
             "rules": {
                 "no-console": "off"
             }
+        },
+        {
+            "files": ["**/*.js", "!src/**/*"],
+            "env": {
+                "node": true
+            }
         }
     ]
 }

.storybook/decorators/withLang.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import type {DecoratorFn} from '@storybook/react';
+
 import {Lang, configure} from '../../src';
 
-export const withLang: DecoratorFn = (Story, context) => {
+export const WithLang: DecoratorFn = (Story, context) => {
     const lang = context.globals.lang;
 
     configure({

.storybook/decorators/withMobile.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import type {DecoratorFn} from '@storybook/react';
+
 import {useMobile} from '../../src';
 
-export const withMobile: DecoratorFn = (Story, context) => {
+export const WithMobile: DecoratorFn = (Story, context) => {
     const mobileValue = context.globals.platform === 'mobile';
 
     const [, setMobile] = useMobile(); // eslint-disable-line react-hooks/rules-of-hooks

.storybook/decorators/withTheme.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import type {DecoratorFn} from '@storybook/react';
+
 import {useTheme} from '../../src';
 
-export const withTheme: DecoratorFn = (Story, context) => {
+export const WithTheme: DecoratorFn = (Story, context) => {
     const themeValue = context.globals.theme;
     const [theme, setTheme] = useTheme();
 

.storybook/manager.ts

@@ -1,4 +1,5 @@
 import {addons} from '@storybook/addons';
+
 import {themes} from './theme';
 
 addons.setConfig({

.storybook/preview.tsx

@@ -1,14 +1,18 @@
+// eslint-disable-next-line import/order
 import '../styles/styles.scss';
 
 import React from 'react';
+
 import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
 import type {DecoratorFn} from '@storybook/react';
-import {themes} from './theme';
-import {withMobile} from './decorators/withMobile';
-import {withLang} from './decorators/withLang';
-import {ThemeProvider, MobileProvider, configure, Lang} from '../src';
+
+import {Lang, MobileProvider, ThemeProvider, configure} from '../src';
 import {DocsDecorator} from '../src/demo/DocsDecorator/DocsDecorator';
 
+import {WithLang} from './decorators/withLang';
+import {WithMobile} from './decorators/withMobile';
+import {themes} from './theme';
+
 configure({
     lang: Lang.En,
 });
@@ -25,7 +29,7 @@ const withContextProvider: DecoratorFn = (Story, context) => {
     );
 };
 
-export const decorators = [withMobile, withLang, withContextProvider];
+export const decorators = [WithMobile, WithLang, withContextProvider];
 
 export const parameters = {
     docs: {

.storybook/theme-addon/register.tsx

@@ -1,8 +1,11 @@
-import * as React from 'react';
+import React from 'react';
+
 import {addons, types} from '@storybook/addons';
-import {useGlobals, type API} from '@storybook/api';
-import {themes} from '../theme';
+import {useGlobals} from '@storybook/api';
+import type {API} from '@storybook/api';
+
 import {getThemeType} from '../../src/components/theme/getThemeType';
+import {themes} from '../theme';
 
 const ADDON_ID = 'yc-theme-addon';
 const TOOL_ID = `${ADDON_ID}tool`;

gulpfile.js

@@ -19,6 +19,8 @@ function compileTs(modules = false) {
     const tsProject = ts.createProject('tsconfig.json', {
         declaration: true,
         module: modules ? 'esnext' : 'commonjs',
+        // uncomment after switching to typescript 5 with verbatimModuleSyntax: true
+        // ...(modules ? undefined : {verbatimModuleSyntax: false}),
     });
 
     return src([

jest.config.js

@@ -3,7 +3,7 @@ module.exports = {
     moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
     rootDir: '.',
     transform: {
-        '^.+\\.[jt]sx?$': 'ts-jest',
+        '^.+\\.tsx?$': ['ts-jest', {tsconfig: './tsconfig.test.json'}],
     },
     transformIgnorePatterns: ['node_modules/(?!(@gravity-ui)/)'],
     coverageDirectory: './coverage',