@diplodoc/client 2.0.5 → 2.1.0

package/build/utils.d.ts

@@ -1,4 +1,5 @@
-import { Theme } from '@diplodoc/components';
+import { Lang, Theme } from '@diplodoc/components';
+import { TextDirection } from './constants';
 export declare function strToBoolean(str: string | boolean): boolean;
 export declare function updateRootClassName({ theme, mobileView, wideFormat, fullHeader, }: {
     theme: Theme;
@@ -6,3 +7,4 @@ export declare function updateRootClassName({ theme, mobileView, wideFormat, ful
     wideFormat: boolean;
     fullHeader: boolean;
 }): void;
+export declare function getDirection(lang: Lang): TextDirection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diplodoc/client",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "",
   "main": "./build/server/app.js",
   "scripts": {
@@ -22,6 +22,7 @@
     ".": {
       "types": "./build/index.d.ts",
       "style": "./build/client/app.css",
+      "style-rtl": "./build/app.rtl.css",
       "default": "./build/client/app.js"
     },
     "./ssr": {
@@ -35,13 +36,13 @@
     "./styles": "./build/client/app.css"
   },
   "dependencies": {
-    "@diplodoc/components": "^3.6.0",
+    "@diplodoc/components": "^4.0.0",
     "@diplodoc/latex-extension": "^1.0.2",
     "@diplodoc/mermaid-extension": "^1.2.1",
-    "@diplodoc/openapi-extension": "^1.4.10",
+    "@diplodoc/openapi-extension": "^2.0.0",
     "@diplodoc/transform": "^4.10.3",
     "@gravity-ui/page-constructor": "^4.24.0",
-    "@gravity-ui/uikit": "^5.25.0",
+    "@gravity-ui/uikit": "6.0.0",
     "bem-cn-lite": "^4.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -60,6 +61,7 @@
     "lint-staged": "^13.2.2",
     "mini-css-extract-plugin": "^2.7.6",
     "react-svg-loader": "^3.0.3",
+    "rtlcss": "^4.1.1",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
@@ -68,5 +70,9 @@
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-cli": "^5.1.1",
     "webpack-manifest-plugin": "^5.0.0"
+  },
+  "overrides": {
+    "@gravity-ui/uikit": "6.0.0",
+    "@gravity-ui/components": "3.0.0"
   }
 }

package/rtl-css.js

@@ -0,0 +1,66 @@
+const path = require('path')
+
+const rtlcss = require('rtlcss')
+const webpack = require('webpack')
+
+const checkIsCss = filename => path.extname(filename) === '.css'
+
+class RtlCssPlugin {
+    constructor(options) {
+        this.options = {
+            filename: '[name].rtl.css',
+            options: {},
+            plugins: [],
+            hooks: {},
+            ...options
+        }
+    }
+
+    processAssets = (compilation, callback) => {
+        compilation.chunks.forEach(chunk => {
+            Array.from(chunk.files)
+                .filter(checkIsCss)
+                .forEach(filename => {
+                    // Get the asset source for each file generated by the chunk:
+                    const assetSource = compilation.assets[filename].source()
+                    const processedAssetSource = rtlcss.process(assetSource, this.options.options, this.options.plugins, this.options.hooks)
+
+                    let interpolatedFilePath
+
+                    if (Array.isArray(this.options.filename)) {
+                        if (this.options.filename.length !== 2) {
+                            throw Error('You should pass two elements and array')
+                        }
+                        // also allow save current file destination
+                        interpolatedFilePath = filename.replace(this.options.filename[0], this.options.filename[1])
+                    } else {
+                        interpolatedFilePath = compilation.getPath(this.options.filename, {
+                            chunk,
+                            cssFileName: filename,
+                        })
+                    }
+                    compilation.assets[interpolatedFilePath] = new webpack.sources.RawSource(processedAssetSource)
+                    if (this.options.addToChunkFiles) {
+                        /* for example: LoadablePlugin will add this chunks to loadable config, but it's not always required */
+                        chunk.files.add(interpolatedFilePath)
+                    }
+                })
+        })
+
+        callback()
+    }
+
+    apply(compiler) {
+        compiler.hooks.compilation.tap('RtlCssPlugin', compilation => {
+            compilation.hooks.processAssets.tapAsync(
+                {
+                    name: 'RtlCssPlugin-processing',
+                    stage: compilation.PROCESS_ASSETS_STAGE_OPTIMIZE,
+                },
+                (chunks, callback) => this.processAssets(compilation, callback),
+            )
+        })
+    }
+}
+
+module.exports = RtlCssPlugin