fix: change cn workflow (#12)

* fix: change cn workflow

* fix: ci jobs config

.github/workflows/ci.yml

@@ -27,20 +27,20 @@ jobs:
       - name: Typecheck
         run: npm run typecheck
 
-tests:
-  name: Tests
-  runs-on: ubuntu-latest
-  steps:
-    - name: Checkout
-      uses: actions/checkout@v2
-      with:
-        fetch-depth: 0
-    - name: Setup Node
-      uses: actions/setup-node@v2
-      with:
-        node-version: '14.x'
-        cache: 'npm'
-    - name: Install Packages
-      run: npm ci
-    - name: Unit Tests
-      run: npm run test
+  tests:
+    name: Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+          cache: 'npm'
+      - name: Install Packages
+        run: npm ci
+      - name: Unit Tests
+        run: npm run test

src/components/ChartKit.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import block from 'bem-cn-lite';
 import {settings} from '../libs';
-import {block, getRandomCKId} from '../utils';
+import {getRandomCKId} from '../utils';
 import type {ChartkitType, ChartKitProps} from '../types';
 import {ErrorBoundary} from './ErrorBoundary/ErrorBoundary';
 import {Loader} from './Loader/Loader';
@@ -9,7 +10,7 @@ import '@yandex-cloud/uikit/styles/styles.scss';
 import '../styles/theme.scss';
 import './ChartKit.scss';
 
-const b = block();
+const b = block('chartkit');
 
 export const ChartKit = <T extends ChartkitType>(props: ChartKitProps<T>) => {
     const {id = getRandomCKId(), type, data, onLoad, ...restProps} = props;

src/components/ErrorView/ErrorView.scss

@@ -1,8 +1,4 @@
-@import '../../styles/variables';
-
-$block: '.#{$ns}-error';
-
-#{$block} {
+.chartkit-error {
     display: flex;
     flex-direction: column;
     width: 100%;

src/components/ErrorView/ErrorView.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
+import block from 'bem-cn-lite';
 import {dict} from '../../dict/dict';
 import {settings} from '../../libs';
-import {block} from '../../utils';
 
 import './ErrorView.scss';
 
-const b = block('error');
+const b = block('chartkit-error');
 
 export const ErrorView = () => {
     const lang = settings.get('lang');

src/components/Loader/Loader.scss

@@ -1,8 +1,4 @@
-@import '../../styles/variables';
-
-$block: '.#{$ns}-loader';
-
-#{$block} {
+.chartkit-loader {
     display: flex;
     align-items: center;
     justify-content: center;

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 '@yandex-cloud/uikit';
-import {block} from '../../utils';
 
 import './Loader.scss';
 
-const b = block('loader');
+const b = block('chartkit-loader');
 
 type LoaderProps = BaseLoaderProps;
 

src/utils/__tests__/common.test.ts

@@ -0,0 +1,11 @@
+import {getRandomCKId} from '../common';
+
+// length of "ck." + 10 random symbols
+const ID_LENGTH = 13;
+
+describe('utils/getRandomCKId', () => {
+    it('Id should have 13 symbols', () => {
+        const result = getRandomCKId();
+        expect(result.length).toBe(ID_LENGTH);
+    });
+});

src/utils/index.ts

@@ -1,3 +1 @@
 export {getRandomCKId} from './common';
-export {block} from './cn';
-export type {CnBlock} from './cn';