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

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

.storybook/decorators/DocsDecorator/DocsDecorator.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import {DocsContainer, DocsContainerProps} from '@storybook/addon-docs';
 import {ThemeProvider, MobileProvider, getThemeType} from '@gravity-ui/uikit';
 import {themes} from '../../../.storybook/theme';
+import {cn} from '../../../src/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) {
     const storyContext = context.getStoryContext(context.storyById(context.id));

package.json

@@ -15,9 +15,9 @@
     "access": "public"
   },
   "dependencies": {
+    "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^1.4.1",
     "@gravity-ui/yagr": "^3.7.9",
-    "bem-cn-lite": "^4.1.0",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",
     "react-split-pane": "^0.1.92"

src/components/ChartKit.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import {i18n} from '../i18n';
 import {CHARTKIT_ERROR_CODE, ChartKitError, settings} from '../libs';
 import {getRandomCKId, typedMemo} from '../utils';
+import {cn} from '../utils/cn';
 import type {ChartKitType, ChartKitRef, ChartKitWidgetRef, ChartKitProps} from '../types';
 import {ErrorBoundary} from './ErrorBoundary/ErrorBoundary';
 import {Loader} from './Loader/Loader';
 
 import './ChartKit.scss';
 
-const b = block('chartkit');
+const b = cn('chartkit');
 
 type ChartKitComponentProps<T extends ChartKitType> = Omit<ChartKitProps<T>, 'onError'> & {
     instanceRef?: React.ForwardedRef<ChartKitRef | undefined>;

src/components/Loader/Loader.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import {Loader as BaseLoader, LoaderProps as BaseLoaderProps} from '@gravity-ui/uikit';
+import {block} from '../../utils/cn';
 
 import './Loader.scss';
 
-const b = block('chartkit-loader');
+const b = block('loader');
 
 type LoaderProps = BaseLoaderProps;
 

src/plugins/d3/renderer/components/AxisX.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import {axisBottom, select} from 'd3';
 import type {AxisScale, AxisDomain, Selection} from 'd3';
 
+import {block} from '../../../../utils/cn';
 import type {ChartOptions, ChartScale} from '../hooks';
 import {formatAxisTickLabel, parseTransformStyle} from '../utils';
 
-const b = block('chartkit-d3-axis');
+const b = block('d3-axis');
 const EMPTY_SPACE_BETWEEN_LABELS = 10;
 
 type Props = {

src/plugins/d3/renderer/components/AxisY.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import {axisLeft, select} from 'd3';
 import type {AxisScale, AxisDomain, Selection} from 'd3';
 
+import {block} from '../../../../utils/cn';
 import type {ChartOptions, ChartScale} from '../hooks';
 import {formatAxisTickLabel, parseTransformStyle} from '../utils';
 
-const b = block('chartkit-d3-axis');
+const b = block('d3-axis');
 const EMPTY_SPACE_BETWEEN_LABELS = 10;
 
 type Props = {

src/plugins/d3/renderer/components/Chart.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 
 import type {ChartKitWidgetData} from '../../../../types/widget-data';
+import {block} from '../../../../utils/cn';
 
 import {AxisY} from './AxisY';
 import {AxisX} from './AxisX';
@@ -22,7 +22,7 @@ import {isAxisRelatedSeries} from '../utils';
 
 import './styles.scss';
 
-const b = block('chartkit-d3');
+const b = block('d3');
 
 type Props = {
     width: number;

src/plugins/d3/renderer/components/Legend.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import {select} from 'd3';
 
+import {block} from '../../../../utils/cn';
 import type {ChartSeries, OnLegendItemClick} from '../hooks';
 
-const b = block('chartkit-d3-legend');
+const b = block('d3-legend');
 
 type Props = {
     width: number;

src/plugins/d3/renderer/components/Title.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 
+import {block} from '../../../../utils/cn';
 import type {PreparedTitle} from '../hooks';
 
-const b = block('chartkit-d3-title');
+const b = block('d3-title');
 
 type Props = PreparedTitle & {
     chartWidth: number;

src/plugins/d3/renderer/components/Tooltip/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 
 import type {TooltipHoveredData} from '../../../../../types/widget-data';
+import {block} from '../../../../../utils/cn';
 
 import type {PointerPosition, PreparedAxis, PreparedTooltip} from '../../hooks';
 import {DefaultContent} from './DefaultContent';
 
-const b = block('chartkit-d3-tooltip');
+const b = block('d3-tooltip');
 const POINTER_OFFSET_X = 20;
 
 type TooltipProps = {

src/plugins/d3/renderer/hooks/useShapes/bar-x.tsx

@@ -3,14 +3,14 @@ import {ChartOptions} from '../useChartOptions/types';
 import {ChartScale} from '../useAxisScales';
 import {OnSeriesMouseLeave, OnSeriesMouseMove} from '../useTooltip/types';
 import {BarXSeries, BarXSeriesData} from '../../../../../types/widget-data';
+import {block} from '../../../../../utils/cn';
 import {ScaleBand, ScaleLinear, ScaleTime} from 'd3';
-import block from 'bem-cn-lite';
 
 const DEFAULT_BAR_RECT_WIDTH = 50;
 const DEFAULT_LINEAR_BAR_RECT_WIDTH = 20;
 const MIN_RECT_GAP = 1;
 
-const b = block('chartkit-d3-bar');
+const b = block('d3-bar');
 
 type Args = {
     series: BarXSeries[];

src/plugins/d3/renderer/hooks/useShapes/scatter.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import {ChartOptions} from '../useChartOptions/types';
 import {ChartScale} from '../useAxisScales';
 import {OnSeriesMouseLeave, OnSeriesMouseMove} from '../useTooltip/types';
-import block from 'bem-cn-lite';
 import {ScatterSeries, ScatterSeriesData} from '../../../../../types/widget-data';
+import {block} from '../../../../../utils/cn';
 
 type PrepareScatterSeriesArgs = {
     series: ScatterSeries[];
@@ -18,7 +18,7 @@ type PrepareScatterSeriesArgs = {
     key?: string;
 };
 
-const b = block('chartkit-d3-scatter');
+const b = block('d3-scatter');
 const DEFAULT_SCATTER_POINT_RADIUS = 4;
 
 const prepareCategoricalScatterData = (data: ScatterSeriesData[]) => {

src/plugins/highcharts/renderer/components/StyledSplitPane/StyledSplitPane.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import SplitPane, {Pane, Split, SplitPaneProps} from 'react-split-pane';
-import block from 'bem-cn-lite';
+import {cn} from '../../../../../utils/cn';
 
 import './StyledSplitPane.scss';
 
-const b = block('styled-split-pane');
+const b = cn('styled-split-pane');
 const resizerClassName = b('pane-resizer');
 
 export type PaneSplit = Split;

src/plugins/highcharts/renderer/components/withSplitPane/withSplitPane.tsx

@@ -2,17 +2,17 @@
 
 import React from 'react';
 
-import block from 'bem-cn-lite';
 import {debounce, get} from 'lodash';
 
 import {getRandomCKId} from '../../../../../utils';
+import {cn} from '../../../../../utils/cn';
 import type {Highcharts} from '../../../types';
 import {chartTypesWithoutCrosshair} from '../../helpers/config/config';
 import {StyledSplitPane} from '../StyledSplitPane/StyledSplitPane';
 
 import './WithSplitPane.scss';
 
-const b = block('with-split-pane');
+const b = cn('with-split-pane');
 
 const PANE_RESIZER_HEIGHT = 24;
 const CHART_SECTION_PERCENTAGE = 0.6;

src/plugins/highcharts/renderer/helpers/config/config.js

@@ -1,7 +1,6 @@
 /* eslint new-cap: 0, complexity: 0 */
 
 import Highcharts from 'highcharts';
-import block from 'bem-cn-lite';
 import merge from 'lodash/merge';
 import mergeWith from 'lodash/mergeWith';
 import get from 'lodash/get';
@@ -14,6 +13,7 @@ import debounce from 'lodash/debounce';
 import {dateTime} from '@gravity-ui/date-utils';
 import {i18n} from '../../../../../i18n';
 import {formatNumber} from '../../../../shared';
+import {block} from '../../../../../utils/cn';
 import {
     getCommentsOnLine,
     drawComments,
@@ -47,7 +47,7 @@ import {
 import {handleLegendItemClick} from './handleLegendItemClick';
 import {getChartKitFormattedValue} from './utils/getChartKitFormattedValue';
 
-const b = block('chartkit-tooltip');
+const b = block('tooltip');
 const TOOLTIP_OFFSET_FROM_CURSOR = 15;
 const TOOLTIP_ROOT_CLASS_NAME = 'chartkit-highcharts-tooltip-container';
 const MOBILE_TOOLTIP_OFFSET_FROM_POINTER = 30;

src/plugins/highcharts/renderer/helpers/config/options.js

@@ -1,12 +1,12 @@
 /** Default options for Highcharts & Highstock */
 
-import block from 'bem-cn-lite';
 import merge from 'lodash/merge';
 import {i18n} from '../../../../../i18n';
+import {block} from '../../../../../utils/cn';
 import {getChartKitFormattedValue} from './utils';
 import LocalStorage from './utils/localStorage';
 
-const b = block('chartkit-tooltip');
+const b = block('tooltip');
 
 function getTooltipHeaderFormat(format, showColor) {
     return `<div class="${b('header')}">

src/plugins/indicator/renderer/IndicatorItem.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import type {ChartKitProps} from '../../../types';
+import {block} from '../../../utils/cn';
 import type {IndicatorWidgetDataItem} from '../types';
 
-const b = block('chartkit-indicator');
+const b = block('indicator');
 
 export const IndicatorItem = (
     props: IndicatorWidgetDataItem & {

src/plugins/indicator/renderer/IndicatorWidget.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import {isEmpty} from 'lodash';
 import {i18n} from '../../../i18n';
 import {CHARTKIT_ERROR_CODE, ChartKitError} from '../../../libs';
 import {CHARTKIT_SCROLLABLE_NODE_CLASSNAME} from '../../../constants';
 import {getChartPerformanceDuration, getRandomCKId, markChartPerformance} from '../../../utils';
+import {block} from '../../../utils/cn';
 import type {ChartKitWidgetRef, ChartKitProps} from '../../../types';
 import {IndicatorItem} from './IndicatorItem';
 
 import './IndicatorWidget.scss';
 
-const b = block('chartkit-indicator');
+const b = block('indicator');
 
 const IndicatorWidget = React.forwardRef<ChartKitWidgetRef | undefined, ChartKitProps<'indicator'>>(
     // _ref needs to avoid this React warning:

src/utils/cn.ts

@@ -0,0 +1,6 @@
+import {withNaming} from '@bem-react/classname';
+
+export const NAMESPACE = 'chartkit-';
+
+export const cn = withNaming({e: '__', m: '_'});
+export const block = withNaming({n: NAMESPACE, e: '__', m: '_'});