@gravity-ui/page-constructor 4.7.0 → 4.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,9 +4,9 @@ const tslib_1 = require("tslib");
4
4
  /* we won't use 'pc' class prefix here to let you opportunity to define yfm styles
5
5
  in your project via global 'yfm' class */
6
6
  const react_1 = tslib_1.__importDefault(require("react"));
7
- const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
8
7
  const snakecase_keys_1 = tslib_1.__importDefault(require("snakecase-keys"));
9
8
  const components_1 = require("../../components");
10
- const yfm = (0, bem_cn_lite_1.default)('yfm');
9
+ const utils_1 = require("../../utils");
10
+ const yfm = (0, utils_1.cn)('yfm');
11
11
  const YFMWrapper = ({ content, modifiers, className, itemProp, id, qa }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp, id: id, qa: qa }, content));
12
12
  exports.default = YFMWrapper;
@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const uikit_1 = require("@gravity-ui/uikit");
6
- const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
7
6
  const ErrorWrapper_1 = tslib_1.__importDefault(require("../../components/ErrorWrapper/ErrorWrapper"));
7
+ const cn_1 = require("../../utils/cn");
8
8
  const i18n_1 = tslib_1.__importDefault(require("./i18n"));
9
- const b = (0, bem_cn_lite_1.default)('loadable-block');
9
+ const b = (0, cn_1.block)('loadable-block');
10
10
  const initData = {
11
11
  loading: false,
12
12
  error: false,
@@ -4,7 +4,6 @@ exports.PageConstructor = exports.Constructor = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importStar(require("react"));
6
6
  require("@doc-tools/transform/dist/js/yfm");
7
- const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
8
7
  const BackgroundMedia_1 = tslib_1.__importDefault(require("../../components/BackgroundMedia/BackgroundMedia"));
9
8
  const constants_1 = require("../../components/constants");
10
9
  const constructor_items_1 = require("../../constructor-items");
@@ -19,7 +18,7 @@ const ConstructorBlocks_1 = require("./components/ConstructorBlocks");
19
18
  const ConstructorItem_1 = require("./components/ConstructorItem");
20
19
  const ConstructorRow_1 = require("./components/ConstructorRow");
21
20
  const b = (0, utils_1.block)('page-constructor');
22
- const ycr = (0, bem_cn_lite_1.default)(constants_1.UIKIT_ROOT_CLASS);
21
+ const ycr = (0, utils_1.cn)(constants_1.UIKIT_ROOT_CLASS);
23
22
  const Constructor = (props) => {
24
23
  const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
25
24
  const { context } = (0, react_1.useMemo)(() => ({
@@ -268,9 +268,9 @@ unpredictable css rules order in build */
268
268
  .pc-hubspot-form .hs-button.primary {
269
269
  margin: 0;
270
270
  padding: 0;
271
- font-family: var(--g-font-family-sans);
271
+ font-family: var(--g-text-body-font-family);
272
272
  font-size: inherit;
273
- font-weight: 400;
273
+ font-weight: var(--g-text-body-font-weight);
274
274
  color: inherit;
275
275
  background: none;
276
276
  border: none;
@@ -1,4 +1,4 @@
1
- import blockOrigin from 'bem-cn-lite';
2
1
  export declare const NAMESPACE = "pc-";
3
- export type CnBlock = ReturnType<typeof blockOrigin>;
4
- export declare function block(name: string): CnBlock;
2
+ export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
3
+ export declare const block: import("@bem-react/classname").ClassNameInitilizer;
4
+ export type CnBlock = ReturnType<typeof cn>;
@@ -1,10 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.block = exports.NAMESPACE = void 0;
4
- const tslib_1 = require("tslib");
5
- const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
3
+ exports.block = exports.cn = exports.NAMESPACE = void 0;
4
+ const classname_1 = require("@bem-react/classname");
6
5
  exports.NAMESPACE = 'pc-';
7
- function block(name) {
8
- return (0, bem_cn_lite_1.default)(`${exports.NAMESPACE}${name}`);
9
- }
10
- exports.block = block;
6
+ exports.cn = (0, classname_1.withNaming)({ e: '__', m: '_' });
7
+ exports.block = (0, classname_1.withNaming)({ n: exports.NAMESPACE, e: '__', m: '_' });
@@ -1,9 +1,9 @@
1
1
  /* we won't use 'pc' class prefix here to let you opportunity to define yfm styles
2
2
  in your project via global 'yfm' class */
3
3
  import React from 'react';
4
- import block from 'bem-cn-lite';
5
4
  import toSnakeCase from 'snakecase-keys';
6
5
  import { HTML } from '../../components';
7
- const yfm = block('yfm');
6
+ import { cn } from '../../utils';
7
+ const yfm = cn('yfm');
8
8
  const YFMWrapper = ({ content, modifiers, className, itemProp, id, qa }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp, id: id, qa: qa }, content));
9
9
  export default YFMWrapper;
@@ -1,7 +1,7 @@
1
1
  import React, { useCallback, useEffect, useState } from 'react';
2
2
  import { Spin } from '@gravity-ui/uikit';
3
- import blockCn from 'bem-cn-lite';
4
3
  import ErrorWrapper from '../../components/ErrorWrapper/ErrorWrapper';
4
+ import { block as blockCn } from '../../utils/cn';
5
5
  import i18n from './i18n';
6
6
  import './Loadable.css';
7
7
  const b = blockCn('loadable-block');
@@ -1,7 +1,6 @@
1
1
  import { __rest } from "tslib";
2
2
  import React, { useMemo } from 'react';
3
3
  import '@doc-tools/transform/dist/js/yfm';
4
- import blockOrigin from 'bem-cn-lite';
5
4
  import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
6
5
  import { UIKIT_ROOT_CLASS } from '../../components/constants';
7
6
  import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
@@ -11,7 +10,7 @@ import { useTheme } from '../../context/theme';
11
10
  import { Grid } from '../../grid';
12
11
  import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
13
12
  import Layout from '../../navigation/containers/Layout/Layout';
14
- import { block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
13
+ import { cn as blockOrigin, block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
15
14
  import { ConstructorBlocks } from './components/ConstructorBlocks';
16
15
  import { ConstructorHeader } from './components/ConstructorItem';
17
16
  import { ConstructorRow } from './components/ConstructorRow';
@@ -268,9 +268,9 @@ unpredictable css rules order in build */
268
268
  .pc-hubspot-form .hs-button.primary {
269
269
  margin: 0;
270
270
  padding: 0;
271
- font-family: var(--g-font-family-sans);
271
+ font-family: var(--g-text-body-font-family);
272
272
  font-size: inherit;
273
- font-weight: 400;
273
+ font-weight: var(--g-text-body-font-weight);
274
274
  color: inherit;
275
275
  background: none;
276
276
  border: none;
@@ -1,4 +1,4 @@
1
- import blockOrigin from 'bem-cn-lite';
2
1
  export declare const NAMESPACE = "pc-";
3
- export type CnBlock = ReturnType<typeof blockOrigin>;
4
- export declare function block(name: string): CnBlock;
2
+ export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
3
+ export declare const block: import("@bem-react/classname").ClassNameInitilizer;
4
+ export type CnBlock = ReturnType<typeof cn>;
@@ -1,5 +1,4 @@
1
- import blockOrigin from 'bem-cn-lite';
1
+ import { withNaming } from '@bem-react/classname';
2
2
  export const NAMESPACE = 'pc-';
3
- export function block(name) {
4
- return blockOrigin(`${NAMESPACE}${name}`);
5
- }
3
+ export const cn = withNaming({ e: '__', m: '_' });
4
+ export const block = withNaming({ n: NAMESPACE, e: '__', m: '_' });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "4.7.0",
3
+ "version": "4.8.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -80,11 +80,11 @@
80
80
  "test:watch": "jest --watchAll"
81
81
  },
82
82
  "dependencies": {
83
- "@gravity-ui/components": "^2.0.0",
83
+ "@bem-react/classname": "^1.6.0",
84
+ "@gravity-ui/components": "^2.4.0",
84
85
  "@gravity-ui/dynamic-forms": "^2.3.0",
85
86
  "@gravity-ui/i18n": "^1.0.0",
86
87
  "ajv": "^8.12.0",
87
- "bem-cn-lite": "^4.0.0",
88
88
  "final-form": "^4.20.9",
89
89
  "github-buttons": "2.23.0",
90
90
  "lodash": "^4.17.21",
@@ -120,7 +120,7 @@
120
120
  "@gravity-ui/prettier-config": "^1.0.1",
121
121
  "@gravity-ui/stylelint-config": "^1.0.0",
122
122
  "@gravity-ui/tsconfig": "^1.0.0",
123
- "@gravity-ui/uikit": "^5.4.1",
123
+ "@gravity-ui/uikit": "^5.9.1",
124
124
  "@storybook/addon-actions": "^7.1.0",
125
125
  "@storybook/addon-essentials": "^7.1.0",
126
126
  "@storybook/addon-knobs": "^7.0.2",
@@ -147,7 +147,6 @@
147
147
  "css-loader": "^5.2.7",
148
148
  "es5-ext": "0.10.53",
149
149
  "eslint": "^8.34.0",
150
- "eslint-plugin-local": "./eslint-plugin-local",
151
150
  "eslint-plugin-no-not-accumulator-reassign": "^0.1.0",
152
151
  "eslint-plugin-react": "^7.33.0",
153
152
  "eslint-plugin-testing-library": "^5.9.1",
@@ -1,4 +1,4 @@
1
- import blockOrigin from 'bem-cn-lite';
2
1
  export declare const NAMESPACE = "pc-";
3
- export type CnBlock = ReturnType<typeof blockOrigin>;
4
- export declare function block(name: string): CnBlock;
2
+ export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
3
+ export declare const block: import("@bem-react/classname").ClassNameInitilizer;
4
+ export type CnBlock = ReturnType<typeof cn>;
@@ -1,12 +1,7 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.block = exports.NAMESPACE = void 0;
7
- const bem_cn_lite_1 = __importDefault(require("bem-cn-lite"));
3
+ exports.block = exports.cn = exports.NAMESPACE = void 0;
4
+ const classname_1 = require("@bem-react/classname");
8
5
  exports.NAMESPACE = 'pc-';
9
- function block(name) {
10
- return (0, bem_cn_lite_1.default)(`${exports.NAMESPACE}${name}`);
11
- }
12
- exports.block = block;
6
+ exports.cn = (0, classname_1.withNaming)({ e: '__', m: '_' });
7
+ exports.block = (0, classname_1.withNaming)({ n: exports.NAMESPACE, e: '__', m: '_' });