refactor: migrate to @bem-react/classname (#917)

Co-authored-by: Pavel Klimov <[email protected]>

package.json

@@ -74,10 +74,10 @@
         "prepublishOnly": "npm run build"
     },
     "dependencies": {
+        "@bem-react/classname": "^1.6.0",
         "@gravity-ui/i18n": "^1.1.0",
         "@gravity-ui/icons": "^2.2.0",
         "@popperjs/core": "^2.11.8",
-        "bem-cn-lite": "^4.1.0",
         "blueimp-md5": "^2.19.0",
         "focus-trap": "^7.4.3",
         "lodash": "^4.17.21",

src/components/Breadcrumbs/__stories__/BreadcrumbsShowcase.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
-import block from 'bem-cn-lite';
-
+import {cn} from '../../utils/cn';
 import {Breadcrumbs} from '../Breadcrumbs';
 import type {BreadcrumbsProps} from '../Breadcrumbs';
 
 import './BreadcrumbsShowcase.scss';
 
-const b = block('breadcrumbs-showcase');
+const b = cn('breadcrumbs-showcase');
 
 const breadcrumbsItems = [
     {

src/components/Button/__stories__/ButtonShowcase.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
 import {Gear} from '@gravity-ui/icons';
-import block from 'bem-cn-lite';
 
 import {Showcase} from '../../../demo/Showcase';
 import {ShowcaseItem} from '../../../demo/ShowcaseItem';
 import {Icon} from '../../Icon';
+import {cn} from '../../utils/cn';
 import {Button} from '../Button';
 import type {ButtonProps} from '../Button';
 
 import './ButtonShowcase.scss';
 
-const b = block('button-showcase');
+const b = cn('button-showcase');
 
 export function ButtonShowcase() {
     return (

src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx

@@ -2,19 +2,19 @@ import React from 'react';
 
 import {Bars} from '@gravity-ui/icons';
 import type {Meta, StoryFn} from '@storybook/react';
-import block from 'bem-cn-lite';
 
 import {Icon} from '../../Icon';
 import {Label} from '../../Label';
 import type {LabelProps} from '../../Label';
+import {cn} from '../../utils/cn';
 import {DropdownMenu} from '../DropdownMenu';
 import type {DropdownMenuItem} from '../DropdownMenu';
 
 import {options, optionsAssorted, optionsWithGroups, optionsWithSubItems} from './options';
 
 import './DropdownMenu.stories.scss';
 
-const b = block('dropdown-menu-stories');
+const b = cn('dropdown-menu-stories');
 
 export default {
     title: 'Components/DropdownMenu',

src/components/Label/__stories__/Label.stories.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 
 import {Check, Gear} from '@gravity-ui/icons';
 import type {Meta, StoryFn} from '@storybook/react';
-import block from 'bem-cn-lite';
 
 import {Icon as IconComponent} from '../../Icon';
 import {Link} from '../../Link';
+import {cn} from '../../utils/cn';
 import {Label} from '../Label';
 import type {LabelProps} from '../Label';
 
 import {LabelShowcase} from './LabelShowcase';
 
 import './Label.stories.scss';
 
-const b = block('label-stories');
+const b = cn('label-stories');
 
 const icons = {
     '-': undefined,

src/components/Label/__stories__/LabelShowcase.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 
 import {Check, Gear} from '@gravity-ui/icons';
-import block from 'bem-cn-lite';
 
 import {Icon as IconComponent} from '../../Icon';
+import {cn} from '../../utils/cn';
 import {Label} from '../Label';
 import type {LabelProps} from '../Label';
 
 import './LabelShowcase.scss';
 
-const b = block('label-showcase');
+const b = cn('label-showcase');
 type WithKey<T> = T & {key: React.Key};
 
 const icons = (id: 'TickIcon' | 'GearIcon' | '-', size: 'xs' | 's' | 'm' = 'xs') => {

src/components/List/__stories__/ListShowcase.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 
-import block from 'bem-cn-lite';
 import _random from 'lodash/random';
 import _range from 'lodash/range';
 
 import {Button} from '../../Button';
 import {TextInput} from '../../controls';
+import {cn} from '../../utils/cn';
 import {List} from '../List';
 
 import './ListShowcase.scss';
 
-const b = block('list-showcase');
+const b = cn('list-showcase');
 
 function getRandomName(length: number) {
     let text = '';

src/components/RadioButton/__stories__/RadioButtonShowcase.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
 import {CircleInfoFill, TriangleExclamationFill} from '@gravity-ui/icons';
-import block from 'bem-cn-lite';
 
 import {Showcase} from '../../../demo/Showcase';
 import {ShowcaseItem} from '../../../demo/ShowcaseItem';
 import {Icon} from '../../Icon';
+import {cn} from '../../utils/cn';
 import {RadioButton} from '../RadioButton';
 import type {RadioButtonOption} from '../RadioButton';
 
 import './RadioButtonShowcase.scss';
 
-const b = block('radio-button-showcase');
+const b = cn('radio-button-showcase');
 
 export function RadioButtonShowcase() {
     const options: RadioButtonOption[] = [

src/components/Sheet/__stories__/DefaultShowcase/DefaultShowcase.stories.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 
 import type {Meta, StoryFn} from '@storybook/react';
-import block from 'bem-cn-lite';
 
 import {Button, Checkbox} from '../../../';
+import {cn} from '../../../utils/cn';
 import {Sheet} from '../../Sheet';
 import type {SheetProps} from '../../Sheet';
 
 import './DefaultShowcase.scss';
 
-const b = block('sheet-stories-default-showcase');
+const b = cn('sheet-stories-default-showcase');
 
 const getRandomText = (length: number) => {
     let result = '';

src/components/Sheet/__stories__/WithMenuShowcase/WithMenuShowcase.stories.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 
 import type {Meta, StoryFn} from '@storybook/react';
-import block from 'bem-cn-lite';
 
 import {Button, Menu} from '../../../';
+import {cn} from '../../../utils/cn';
 import {Sheet} from '../../Sheet';
 import type {SheetProps} from '../../Sheet';
 
 import './WithMenuShowcase.scss';
 
-const b = block('sheet-stories-with-menu-showcase');
+const b = cn('sheet-stories-with-menu-showcase');
 
 export default {
     title: 'Components/Sheet',

src/components/Skeleton/__stories__/SkeletonShowcase.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
-import block from 'bem-cn-lite';
-
 import {Button} from '../../Button';
+import {cn} from '../../utils/cn';
 import {Skeleton} from '../Skeleton';
 
 import './SkeletonShowcase.scss';
 
-const b = block('skeleton-showcase');
+const b = cn('skeleton-showcase');
 
 function PersonCard({info, info2}: {info: string; info2: string}) {
     return (

src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 
-import block from 'bem-cn-lite';
-
 import {Checkbox} from '../../../Checkbox';
 import {Text} from '../../../Text';
+import {cn} from '../../../utils/cn';
 import {TextArea} from '../TextArea';
 import type {TextAreaProps} from '../TextArea';
 
 import './TextAreaShowcase.scss';
 
-const b = block('text-input-showcase');
+const b = cn('text-input-showcase');
 
 export function TextAreaShowcase() {
     const [value, setValue] = React.useState('');

src/components/controls/TextInput/__stories__/TextInputShowcase.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 
 import {Eye, EyeSlash, Key} from '@gravity-ui/icons';
-import block from 'bem-cn-lite';
 
 import {Button} from '../../../Button';
 import {Checkbox} from '../../../Checkbox';
 import {Icon} from '../../../Icon';
 import {Text} from '../../../Text';
+import {cn} from '../../../utils/cn';
 import {mapTextInputSizeToButtonSize} from '../../common';
 import {TextInput} from '../TextInput';
 import type {TextInputProps} from '../TextInput';
 
 import './TextInputShowcase.scss';
 
-const b = block('text-input-showcase');
+const b = cn('text-input-showcase');
 
 const LABEL = 'Label:';
 const LONG_LABEL = 'Very very long label is limited by 50% width of the input control size';

src/components/utils/cn.ts

@@ -1,19 +1,15 @@
-import bemBlock from 'bem-cn-lite';
-
-export type CnBlock = ReturnType<typeof bemBlock>;
+import {withNaming} from '@bem-react/classname';
 
 export type CnMods = Record<string, string | boolean | undefined>;
 
 export const NAMESPACE = 'yc-';
 export const NAMESPACE_NEW = 'g-';
 
-export function block(name: string): CnBlock {
-    return bemBlock(`${NAMESPACE}${name}`);
-}
+export const cn = withNaming({e: '__', m: '_'});
+export const block = withNaming({n: NAMESPACE, e: '__', m: '_'});
+export const blockNew = withNaming({n: NAMESPACE_NEW, e: '__', m: '_'});
 
-export function blockNew(name: string): CnBlock {
-    return bemBlock(`${NAMESPACE_NEW}${name}`);
-}
+export type CnBlock = ReturnType<typeof cn>;
 
 /**
  * Extracts modifiers part from className

src/demo/DocsDecorator/DocsDecorator.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 
 import {DocsContainer} from '@storybook/addon-docs';
 import type {DocsContainerProps} from '@storybook/addon-docs';
-import block from 'bem-cn-lite';
 
 import {MobileProvider, ThemeProvider, getThemeType} from '../..';
 import {themes} from '../../../.storybook/theme';
+import {cn} from '../../components/utils/cn';
 
 import './DocsDecorator.scss';
 
 export interface DocsDecoratorProps extends React.PropsWithChildren<DocsContainerProps> {}
 
-const b = block('docs-decorator');
+const b = cn('docs-decorator');
 
 export function DocsDecorator({children, context}: DocsDecoratorProps) {
     // @ts-expect-error

src/demo/DocsExample/DocsExample.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import block from 'bem-cn-lite';
+import {cn} from '../../components/utils/cn';
 
 import './DocsExample.scss';
 
@@ -13,7 +13,7 @@ export interface DocsExampleProps {
     background?: string;
 }
 
-const b = block('docs-example');
+const b = cn('docs-example');
 
 export function DocsExample({
     children,

src/demo/Showcase/Showcase.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import block from 'bem-cn-lite';
+import {cn} from '../../components/utils/cn';
 
 import './Showcase.scss';
 
@@ -10,7 +10,7 @@ type Props = React.PropsWithChildren<{
     className?: string;
 }>;
 
-const b = block('showcase');
+const b = cn('showcase');
 
 export function Showcase({title, description, className, children}: Props) {
     return (

src/demo/ShowcaseItem/ShowcaseItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import block from 'bem-cn-lite';
+import {cn} from '../../components/utils/cn';
 
 import './ShowcaseItem.scss';
 
@@ -9,7 +9,7 @@ interface ShowcaseItemProps {
     children: React.ReactNode;
 }
 
-const b = block('showcase-item');
+const b = cn('showcase-item');
 
 export function ShowcaseItem({title, children}: ShowcaseItemProps) {
     return (

src/demo/colors/ColorTable.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 
 import {Ban} from '@gravity-ui/icons';
-import block from 'bem-cn-lite';
 import ReactCopyToClipboard from 'react-copy-to-clipboard';
 
 import {Icon} from '../../components';
+import {cn} from '../../components/utils/cn';
 
 import './ColorTable.scss';
 
 export interface ColorTableProps {
     theme: string;
 }
 
-const b = block('color-table');
+const b = cn('color-table');
 
 const steps: number[] = [];
 for (let i = 50; i <= 1000; i += 50) {