V6

.eslintrc

@@ -3,11 +3,15 @@
         "@gravity-ui/eslint-config",
         "@gravity-ui/eslint-config/client",
         "@gravity-ui/eslint-config/prettier",
+        "@gravity-ui/eslint-config/import-order",
         "@gravity-ui/eslint-config/a11y"
     ],
     "root": true,
     "rules": {
-        "react/jsx-fragments": ["error", "element"],
+        "react/jsx-fragments": [
+            "error",
+            "element"
+        ],
         "no-restricted-syntax": [
             "error",
             {
@@ -17,9 +21,16 @@
             {
                 "selector": "TSTypeReference>TSQualifiedName[left.name='React'][right.name='FC']",
                 "message": "Don't use React.FC"
+            },
+            {
+                "selector": "ImportDeclaration[source.value='@testing-library/react']",
+                "message": "Please use wrapper from 'test-utils/utils.tsx'."
             }
         ],
-        "jsx-a11y/no-autofocus": 0
+        "jsx-a11y/no-autofocus": "off",
+        "import/no-extraneous-dependencies": "off",
+        "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+        "@typescript-eslint/consistent-type-imports": ["error", {"prefer":  "type-imports", "fixStyle": "separate-type-imports"}]
     },
     "overrides": [
         {
@@ -30,7 +41,7 @@
             },
             "extends": ["plugin:testing-library/react"],
             "rules": {
-                "jsx-a11y/no-static-element-interactions": 0
+                "jsx-a11y/no-static-element-interactions": "off"
             },
             "excludedFiles": "**/__tests__/**/*.visual.test.*"
         },

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx commitlint -e

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx nano-staged

.storybook/decorators/withLang.tsx

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

.storybook/decorators/withMobile.tsx

@@ -2,16 +2,14 @@ import React from 'react';
 
 import type {Decorator} from '@storybook/react';
 
-import {useMobile} from '../../src';
+import {MobileProvider} from '../../src';
 
 export const WithMobile: Decorator = (Story, context) => {
-    const mobileValue = context.globals.platform === 'mobile';
+    const platform = context.globals.platform;
 
-    const [, setMobile] = useMobile(); // eslint-disable-line react-hooks/rules-of-hooks
-
-    React.useEffect(() => {
-        setMobile(mobileValue);
-    }, [mobileValue]);
-
-    return <Story {...context} />;
+    return (
+        <MobileProvider mobile={platform === 'mobile'} platform={platform}>
+            <Story key={platform} {...context} />
+        </MobileProvider>
+    );
 };

.storybook/decorators/withStrictMode.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import type {Decorator} from '@storybook/react';
+
+export const WithStrictMode: Decorator = (Story, context) => {
+    const children = <Story {...context} />;
+
+    if (context.parameters?.disableStrictMode) {
+        return children;
+    }
+
+    return <React.StrictMode>{children}</React.StrictMode>;
+};

.storybook/decorators/withTheme.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import type {Decorator} from '@storybook/react';
+
+import {ThemeProvider} from '../../src';
+
+export const WithTheme: Decorator = (Story, context) => {
+    return (
+        <ThemeProvider theme={context.globals.theme} direction={context.globals.direction}>
+            <Story {...context} />
+        </ThemeProvider>
+    );
+};

.storybook/preview.tsx

@@ -3,46 +3,19 @@ import '../styles/fonts.scss';
 // eslint-disable-next-line import/order
 import '../styles/styles.scss';
 
-import React from 'react';
-
 import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
-import type {Decorator, Preview} from '@storybook/react';
+import type {Preview} from '@storybook/react';
 
-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 {WithStrictMode} from './decorators/withStrictMode';
+import {WithTheme} from './decorators/withTheme';
 import {themes} from './theme';
 
-configure({
-    lang: Lang.En,
-});
-
-const withContextProvider: Decorator = (Story, context) => {
-    if (context.parameters?.disableStrictMode) {
-        return (
-            <ThemeProvider theme={context.globals.theme}>
-                <MobileProvider>
-                    <Story {...context} />
-                </MobileProvider>
-            </ThemeProvider>
-        );
-    }
-
-    return (
-        <React.StrictMode>
-            <ThemeProvider theme={context.globals.theme}>
-                <MobileProvider>
-                    <Story {...context} />
-                </MobileProvider>
-            </ThemeProvider>
-        </React.StrictMode>
-    );
-};
-
 const preview: Preview = {
-    decorators: [WithMobile, WithLang, withContextProvider],
+    decorators: [WithLang, WithMobile, WithTheme, WithStrictMode],
     parameters: {
         docs: {
             theme: themes.light,
@@ -79,9 +52,10 @@ const preview: Preview = {
                 items: [
                     {value: 'light', right: '☼', title: 'Light'},
                     {value: 'dark', right: '☾', title: 'Dark'},
-                    {value: 'light-hc', right: '☼', title: 'High Contrast Light (beta)'},
-                    {value: 'dark-hc', right: '☾', title: 'High Contrast Dark (beta)'},
+                    {value: 'light-hc', right: '☼', title: 'Light (high contrast)'},
+                    {value: 'dark-hc', right: '☾', title: 'Dark (high contrast)'},
                 ],
+                dynamicTitle: true,
             },
         },
         lang: {
@@ -93,6 +67,19 @@ const preview: Preview = {
                     {value: 'en', right: '🇬🇧', title: 'En'},
                     {value: 'ru', right: '🇷🇺', title: 'Ru'},
                 ],
+                dynamicTitle: true,
+            },
+        },
+        direction: {
+            defaultValue: 'ltr',
+            toolbar: {
+                title: 'Direction',
+                icon: 'menu',
+                items: [
+                    {value: 'ltr', title: 'Left to Right', icon: 'arrowrightalt'},
+                    {value: 'rtl', title: 'Right to Left', icon: 'arrowleftalt'},
+                ],
+                dynamicTitle: true,
             },
         },
         platform: {
@@ -103,6 +90,7 @@ const preview: Preview = {
                     {value: 'desktop', title: 'Desktop', icon: 'browser'},
                     {value: 'mobile', title: 'Mobile', icon: 'mobile'},
                 ],
+                dynamicTitle: true,
             },
         },
     },

.storybook/theme-addon/register.tsx

@@ -7,7 +7,7 @@
 import {getThemeType} from '../../src/components/theme/getThemeType';
 import {themes} from '../theme';
 
-const ADDON_ID = 'yc-theme-addon';
+const ADDON_ID = 'g-theme-addon';
 const TOOL_ID = `${ADDON_ID}tool`;
 
 addons.register(ADDON_ID, (api) => {
@@ -24,6 +24,6 @@
     const [{theme}] = useGlobals();
     React.useEffect(() => {
         api.setOptions({theme: themes[getThemeType(theme)]});
     }, [theme]);
     return null;
 }

.stylelintrc

@@ -1,6 +1,8 @@
 {
     "extends": ["@gravity-ui/stylelint-config", "@gravity-ui/stylelint-config/prettier"],
+    "plugins": ["stylelint-use-logical"],
     "rules": {
+        "csstools/use-logical": ["always", {"except": ["float", "width", "min-width", "max-width", "height", "min-height", "max-height"]}],
         "declaration-colon-space-after": "always-single-line"
     }
 }

CODEOWNERS

@@ -2,12 +2,13 @@
 /src/components/ActionTooltip @amje
 /src/components/Alert @IsaevAlexandr
 /src/components/ArrowToggle @Marginy605
+/src/components/Avatar @DakEnviy
 #/src/components/Breadcrumbs
 /src/components/Button @amje
 /src/components/Card @Lunory
 /src/components/Checkbox @zamkovskaya
-/src/components/ClipboardButton @SeqviriouM
-/src/components/ClipboardIcon @SeqviriouM
+/src/components/ClipboardButton @Raubzeug
+/src/components/ClipboardIcon @Raubzeug
 /src/components/ControlLabel @korvin89
 /src/components/CopyToClipboard @SeqviriouM
 #/src/components/Dialog
@@ -22,23 +23,22 @@
 /src/components/Menu @NikitaCG
 /src/components/Modal @amje
 /src/components/Pagination @jhoncool
-/src/components/Persona @DaffPunks
 /src/components/Popover @kseniya57
 /src/components/Popup @amje
 /src/components/Portal @amje
 /src/components/Progress @Lunory
 /src/components/Radio @zamkovskaya
 /src/components/RadioButton @zamkovskaya
 /src/components/RadioGroup @zamkovskaya
-/src/components/User @DaffPunks
-/src/components/UserAvatar @DaffPunks
+/src/components/User @DakEnviy
+/src/components/UserLabel @DakEnviy
 /src/components/Select @korvin89
 /src/components/Sheet @mournfulCoroner
 /src/components/Skeleton @SeqviriouM
 /src/components/Spin @SeqviriouM
 /src/components/Stories @DarkGenius
 /src/components/Switch @zamkovskaya
-#/src/components/Table
+/src/components/Table @Raubzeug
 /src/components/Tabs @sofiushko
 /src/components/Text @IsaevAlexandr
 /src/components/controls/TextArea @korvin89