V3

.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

@@ -1,15 +1,11 @@
 import React from 'react';
 
-import type {DecoratorFn} from '@storybook/react';
+import {configure} from '@gravity-ui/uikit';
+import type {Decorator} from '@storybook/react';
 
-import {Lang, configure} from '../../src';
-
-export const withLang: DecoratorFn = (Story, context) => {
+export const withLang: Decorator = (Story, context) => {
     const lang = context.globals.lang;
-
-    configure({
-        lang: lang as Lang,
-    });
+    configure({lang});
 
     return <Story key={lang} {...context} />;
 };

.storybook/decorators/withMobile.tsx

@@ -1,17 +1,14 @@
 import React from 'react';
 
-import {useMobile} from '@gravity-ui/uikit';
-import type {DecoratorFn} from '@storybook/react';
+import {MobileProvider} from '@gravity-ui/uikit';
+import type {Decorator} from '@storybook/react';
 
-export const withMobile: DecoratorFn = (Story, context) => {
-    const mobileValue = context.globals.platform === 'mobile';
+export const withMobile: Decorator = (Story, context) => {
+    const platform = context.globals.platform;
 
-    const [, setMobile] = useMobile(); // eslint-disable-line react-hooks/rules-of-hooks
-
-    // eslint-disable-next-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,12 @@
+import React from 'react';
+
+import {ThemeProvider} from '@gravity-ui/uikit';
+import type {Decorator} from '@storybook/react';
+
+export const withTheme: Decorator = (Story, context) => {
+    return (
+        <ThemeProvider theme={context.globals.theme} direction={context.globals.direction}>
+            <Story {...context} />
+        </ThemeProvider>
+    );
+};

.storybook/preview.tsx

@@ -3,39 +3,17 @@ import './styles.scss';
 // eslint-disable-next-line import/order
 import '@gravity-ui/uikit/styles/styles.css';
 
-import React from 'react';
-
-import {Lang, MobileProvider, ThemeProvider, configure as uiKitConfigure} from '@gravity-ui/uikit';
 import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
-import type {Decorator, Preview} from '@storybook/react';
-
-import {configure} from '../src';
+import type {Preview} from '@storybook/react';
 
 import {withLang} from './decorators/withLang';
 import {withMobile} from './decorators/withMobile';
+import {withStrictMode} from './decorators/withStrictMode';
+import {withTheme} from './decorators/withTheme';
 import {Docs} from './docs';
 
-configure({
-    lang: Lang.En,
-});
-uiKitConfigure({
-    lang: Lang.En,
-});
-
-const withContextProvider: Decorator = (Story, context) => {
-    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: {
             page: Docs,
@@ -60,9 +38,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: {
@@ -74,6 +53,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: {
@@ -84,6 +76,7 @@ const preview: Preview = {
                     {value: 'desktop', title: 'Desktop', icon: 'browser'},
                     {value: 'mobile', title: 'Mobile', icon: 'mobile'},
                 ],
+                dynamicTitle: true,
             },
         },
     },

.stylelintrc

@@ -1,3 +1,8 @@
 {
-    "extends": ["@gravity-ui/stylelint-config", "@gravity-ui/stylelint-config/prettier"]
+    "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"
+    }
 }

gulpfile.js

@@ -5,13 +5,13 @@ const {task, src, dest, series, parallel} = require('gulp');
 const sass = require('gulp-dart-sass');
 const replace = require('gulp-replace');
 const ts = require('gulp-typescript');
-const rimraf = require('rimraf');
+const {rimrafSync} = require('rimraf');
 
 const BUILD_DIR = path.resolve('build');
 
 task('clean', (done) => {
-    rimraf.sync(BUILD_DIR);
-    rimraf.sync('styles/**/*.css');
+    rimrafSync(BUILD_DIR);
+    rimrafSync('styles/**/*.css');
     done();
 });
 
@@ -28,11 +28,7 @@ function compileTs(modules = false) {
         '!src/**/__stories__/**/*',
         '!src/**/__tests__/**/*',
     ])
-        .pipe(
-            replace(/import '.+\.scss';/g, (match) =>
-                modules ? match.replace('.scss', '.css') : '',
-            ),
-        )
+        .pipe(replace(/(import.+)\.scss/g, '$1.css'))
         .pipe(tsProject())
         .pipe(dest(path.resolve(BUILD_DIR, modules ? 'esm' : 'cjs')));
 }