feat: added xpath utils (#614)

package.json

@@ -77,6 +77,7 @@
         "@gravity-ui/i18n": "^1.0.0",
         "@popperjs/core": "2.11.6",
         "bem-cn-lite": "4.0.0",
+        "blueimp-md5": "^2.19.0",
         "focus-trap": "7.4.0",
         "lodash": "4.17.21",
         "react-copy-to-clipboard": "5.1.0",
@@ -104,6 +105,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^14.4.3",
+        "@types/blueimp-md5": "^2.18.0",
         "@types/jest": "^27.4.0",
         "@types/lodash": "^4.14.177",
         "@types/react": "^18.0.26",

src/components/index.ts

@@ -49,6 +49,7 @@ export * from './Tooltip';
 export * from './User';
 export * from './UserAvatar';
 
+export * from './utils/class-transform';
 export * from './utils/event-broker';
 export {getComponentName} from './utils/getComponentName';
 export * from './utils/withEventBrokerDomHandlers';
@@ -64,3 +65,4 @@ export * from './utils/useListNavigation';
 export * from './utils/useForkRef';
 export * from './utils/setRef';
 export {useOnFocusOutside} from './utils/useOnFocusOutside';
+export * from './utils/xpath';

src/components/utils/__tests__/class-transform.test.ts

@@ -0,0 +1,63 @@
+import {formatClass, parseClass, ElementClass} from '../class-transform';
+
+describe('class-transform', () => {
+    function checkParseFormat(strClass: string, objClass: ElementClass) {
+        expect(parseClass(strClass)).toEqual(objClass);
+        expect(formatClass(objClass)).toEqual(strClass);
+    }
+
+    it('should parse and format block class', () => {
+        checkParseFormat('block', {
+            block: 'block',
+        });
+    });
+
+    it('should parse and format block__element class', () => {
+        checkParseFormat('block__element', {
+            block: 'block',
+            element: 'element',
+        });
+    });
+
+    it('should parse and format block__element_mod class', () => {
+        checkParseFormat('block__element_mod', {
+            block: 'block',
+            element: 'element',
+            mod: {
+                key: 'mod',
+                value: true,
+            },
+        });
+    });
+
+    it('should parse and format block__element_mod_value class', () => {
+        checkParseFormat('block__element_mod_value', {
+            block: 'block',
+            element: 'element',
+            mod: {
+                key: 'mod',
+                value: 'value',
+            },
+        });
+    });
+
+    it('should parse and format block_mod class', () => {
+        checkParseFormat('block_mod', {
+            block: 'block',
+            mod: {
+                key: 'mod',
+                value: true,
+            },
+        });
+    });
+
+    it('should parse and format block_mod_value class', () => {
+        checkParseFormat('block_mod_value', {
+            block: 'block',
+            mod: {
+                key: 'mod',
+                value: 'value',
+            },
+        });
+    });
+});