feat(rtl): add postcss rtl plugin, browserlist and storybook toolbar

Author: dividead

.storybook/decorators/withDirection.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {DirectionProvider} from '@radix-ui/react-direction';
+import type {Decorator} from '@storybook/react';
+
+export const WithDirection: Decorator = (Story, context) => {
+    const dir = context.globals.direction;
+
+    return (
+        <DirectionProvider dir={dir}>
+            <div dir={dir}>
+                <Story {...context} />
+            </div>
+        </DirectionProvider>
+    );
+};

.storybook/preview.tsx

@@ -11,6 +11,7 @@ import type {Decorator, Preview} from '@storybook/react';
 import {Lang, MobileProvider, ThemeProvider, configure} from '../src';
 import {DocsDecorator} from '../src/demo/DocsDecorator/DocsDecorator';
 
+import {WithDirection} from './decorators/withDirection';
 import {WithLang} from './decorators/withLang';
 import {WithMobile} from './decorators/withMobile';
 import {themes} from './theme';
@@ -32,7 +33,7 @@ const withContextProvider: Decorator = (Story, context) => {
 };
 
 const preview: Preview = {
-    decorators: [WithMobile, WithLang, withContextProvider],
+    decorators: [WithMobile, WithLang, WithDirection, withContextProvider],
     parameters: {
         docs: {
             theme: themes.light,
@@ -78,6 +79,17 @@ const preview: Preview = {
                 ],
             },
         },
+        direction: {
+            name: 'Direction',
+            defaultValue: 'rtl',
+            toolbar: {
+                icon: 'transfer',
+                items: [
+                    {value: 'ltr', right: '->', title: 'left to right'},
+                    {value: 'rtl', right: '<-', title: 'right to left'},
+                ],
+            },
+        },
         platform: {
             defaultValue: 'desktop',
             toolbar: {

gulpfile.js

@@ -3,8 +3,10 @@ const path = require('path');
 
 const {task, src, dest, series, parallel} = require('gulp');
 const sass = require('gulp-dart-sass');
+const postcss = require('gulp-postcss');
 const replace = require('gulp-replace');
 const ts = require('gulp-typescript');
+const rtl = require('postcss-rtl');
 const rimraf = require('rimraf');
 
 const BUILD_DIR = path.resolve('build');
@@ -58,12 +60,14 @@ task('copy-i18n', () => {
 task('styles-global', () => {
     return src(['styles/styles.scss', 'styles/fonts.scss'])
         .pipe(sass().on('error', sass.logError))
+        .pipe(postcss([rtl()]))
         .pipe(dest('styles'));
 });
 
 task('styles-components', () => {
     return src(['src/components/**/*.scss', '!src/components/**/__stories__/**/*'])
         .pipe(sass().on('error', sass.logError))
+        .pipe(postcss([rtl()]))
         .pipe(dest(path.resolve(BUILD_DIR, 'esm', 'components')))
         .pipe(dest(path.resolve(BUILD_DIR, 'cjs', 'components')));
 });

package-lock.json

@@ -78,6 +78,7 @@
         "@gravity-ui/i18n": "^1.1.0",
         "@gravity-ui/icons": "^2.5.0",
         "@popperjs/core": "^2.11.8",
+        "@radix-ui/react-direction": "^1.0.1",
         "blueimp-md5": "^2.19.0",
         "focus-trap": "^7.5.2",
         "lodash": "^4.17.21",
@@ -98,6 +99,7 @@
         "@commitlint/cli": "^17.7.1",
         "@commitlint/config-conventional": "^17.7.0",
         "@faker-js/faker": "^8.0.2",
+        "@gravity-ui/browserslist-config": "^4.1.0",
         "@gravity-ui/eslint-config": "^2.2.0",
         "@gravity-ui/prettier-config": "^1.0.1",
         "@gravity-ui/stylelint-config": "^2.0.0",
@@ -126,6 +128,7 @@
         "gulp": "^4.0.2",
         "gulp-cli": "^2.3.0",
         "gulp-dart-sass": "^1.1.0",
+        "gulp-postcss": "^9.0.1",
         "gulp-replace": "^1.1.4",
         "gulp-typescript": "^5.0.1",
         "husky": "^8.0.3",
@@ -135,6 +138,7 @@
         "nano-staged": "^0.8.0",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.28",
+        "postcss-rtl": "^2.0.0",
         "prettier": "^2.8.8",
         "react": "^18.2.0",
         "react-docgen-typescript": "^2.2.2",
@@ -160,5 +164,10 @@
         "*.md": [
             "prettier --write"
         ]
-    }
+    },
+    "browserslist": [
+        "extends @gravity-ui/browserslist-config",
+        "Chrome >= 100",
+        "Firefox >= 100"
+    ]
 }