Merge branch 'main' into apanchuk-adaptive-tabs-small-case-fix-v2-2

.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"
+    }
 }

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [3.0.0](https://github.com/gravity-ui/components/compare/v2.12.0...v3.0.0) (2024-02-06)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove configure (i18n from uikit used instead) ([#142](https://github.com/gravity-ui/components/issues/142))
+
+### Features
+
+* remove configure (i18n from uikit used instead) ([#142](https://github.com/gravity-ui/components/issues/142)) ([41475bf](https://github.com/gravity-ui/components/commit/41475bff73f5b27705c7f87dc4138983e137388a))
+* support RTL ([df4aa17](https://github.com/gravity-ui/components/commit/df4aa179834d159aaa08932ea89f80003f5ec243))
+* update deps ([01fd827](https://github.com/gravity-ui/components/commit/01fd827b56c298cee87f13242cdbcafc5b4f56e0))
+
+
+### Bug Fixes
+
+* fix lint issues ([6b99075](https://github.com/gravity-ui/components/commit/6b99075bdcbfc17fad09f030cccbed26bad8d83c))
+
 ## [2.12.0](https://github.com/gravity-ui/components/compare/v2.11.0...v2.12.0) (2024-02-05)
 
 

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')));
 }