@gravity-ui/page-constructor 4.0.0-beta.0 → 4.0.1

package/server/models/navigation.d.ts

@@ -44,6 +44,8 @@ export interface NavigationButtonItem extends ButtonProps {
 export interface NavigationDropdownItem extends NavigationItemBase {
     type: NavigationItemType.Dropdown;
     items: NavigationLinkItem[];
+    hidePopup: () => void;
+    isActive: boolean;
 }
 export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     type: NavigationItemType.Social;
@@ -51,8 +53,7 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     url: string;
 }
 export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
-export type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
+export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | NavigationDropdownItem;
 export interface NavigationLogoData {
     icon: ImageProps;
     text?: string;
@@ -63,6 +64,7 @@ export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
     iconSize?: number;
+    withBorder?: boolean;
 }
 export interface FooterColumn {
     title: string;

package/server/text-transform/config.js

@@ -61,7 +61,7 @@ function parsePriceDetailedBlock(transformer, block) {
 }
 const parseContentLayout = (transformer, content) => {
     if (content) {
-        const { text, additionalInfo } = content;
+        const { text, additionalInfo, list } = content;
         /* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
         if (text) {
             content.text = transformer(text);
@@ -69,6 +69,14 @@ const parseContentLayout = (transformer, content) => {
         if (additionalInfo) {
             content.additionalInfo = transformer(additionalInfo);
         }
+        if (list) {
+            content.list = list.map((item) => {
+                if (item === null || item === void 0 ? void 0 : item.text) {
+                    return Object.assign(Object.assign({}, item), { text: transformer(item.text) });
+                }
+                return item;
+            });
+        }
         /* eslint-enable no-not-accumulator-reassign/no-not-accumulator-reassign */
     }
     return content;
@@ -197,6 +205,11 @@ exports.config = {
             fields: ['title', 'additionalInfo'],
             transformer: common_1.yfmTransformer,
         },
+        {
+            fields: ['list'],
+            transformer: common_1.yfmTransformer,
+            parser: (0, common_1.createItemsParser)(['text']),
+        },
     ],
     [models_1.BlockType.MapBlock]: [
         ...exports.blockHeaderTransformer,
@@ -271,6 +284,11 @@ exports.config = {
             transformer: common_1.typografTransformer,
             parser: parseTitle,
         },
+        {
+            fields: ['list'],
+            transformer: common_1.yfmTransformer,
+            parser: (0, common_1.createItemsParser)(['text']),
+        },
     ],
     [models_1.BlockType.InfoBlock]: [
         {

package/server/text-transform/filter.d.ts

@@ -0,0 +1,20 @@
+import { ContentVariables } from './transformers';
+type WhenValue = string | boolean | undefined;
+type OrArray<T> = T | T[];
+type OrArrayRecord<T> = Record<string, OrArray<T>>;
+interface FilteredContentItem extends OrArrayRecord<FilteredContentItem> {
+}
+type FilteredContent = OrArray<FilteredContentItem>;
+type FilterableContentItem = FilteredContentItem & {
+    when: WhenValue;
+};
+export type FilterableContent = OrArray<FilterableContentItem>;
+/**
+ * Filters content recoursively by result of it's 'when' property evaluation applied to vars argument.
+ * e.g. property {..., when: 'someVar == "someValue"' } will be included in result only if vars.someVar === 'someValue'
+ * @param {FilterableContent} content
+ * @param {ContentVariables} vars
+ * @return {FilteredContent}
+ */
+export declare function filterContent(content: FilterableContent | FilteredContent, vars: ContentVariables): FilteredContent;
+export {};

package/server/text-transform/filter.js

@@ -0,0 +1,63 @@
+"use strict";
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterContent = void 0;
+const evaluation_1 = __importDefault(require("@doc-tools/transform/lib/liquid/evaluation"));
+function filterItems(items, vars, propertyName) {
+    if (!Array.isArray(items)) {
+        throw new Error(`Error while filtering: items has invalid key '${propertyName}' equals ${JSON.stringify(items)}`);
+    }
+    return items.reduce((result, item) => {
+        const passedFiltration = checkWhenCondition(item.when, vars);
+        if (passedFiltration) {
+            const property = propertyName && item[propertyName];
+            if (property === undefined) {
+                result.push(item);
+            }
+            else {
+                const filteredProperty = filterItems(property, vars, propertyName);
+                if (filteredProperty.length !== 0) {
+                    result.push(Object.assign(Object.assign({}, item), { [propertyName]: filteredProperty }));
+                }
+            }
+        }
+        return result;
+    }, []);
+}
+function checkWhenCondition(whenValue, vars) {
+    return (whenValue === true ||
+        whenValue === undefined ||
+        (typeof whenValue === 'string' && (!whenValue || (0, evaluation_1.default)(whenValue, vars))));
+}
+function isItemArray(content) {
+    return Array.isArray(content);
+}
+function isItem(content) {
+    return content && typeof content === 'object' && !Array.isArray(content);
+}
+/**
+ * Filters content recoursively by result of it's 'when' property evaluation applied to vars argument.
+ * e.g. property {..., when: 'someVar == "someValue"' } will be included in result only if vars.someVar === 'someValue'
+ * @param {FilterableContent} content
+ * @param {ContentVariables} vars
+ * @return {FilteredContent}
+ */
+function filterContent(content, vars) {
+    if (isItemArray(content)) {
+        return filterItems(content, vars).map((item) => filterContent(item, vars));
+    }
+    else if (isItem(content)) {
+        return Object.entries(content).reduce((acc, [key, value]) => {
+            acc[key] = filterContent(value, vars);
+            return acc;
+        }, {});
+    }
+    else {
+        return content;
+    }
+}
+exports.filterContent = filterContent;

package/server/text-transform/index.d.ts

@@ -2,3 +2,4 @@ export * from './utils';
 export * from './config';
 export * from './common';
 export * from './transformers';
+export * from './filter';

package/server/text-transform/index.js

@@ -18,3 +18,4 @@ __exportStar(require("./utils"), exports);
 __exportStar(require("./config"), exports);
 __exportStar(require("./common"), exports);
 __exportStar(require("./transformers"), exports);
+__exportStar(require("./filter"), exports);

package/server/text-transform/transformers.d.ts

@@ -1,5 +1,6 @@
 import { ConstructorBlock } from '../models/constructor';
 import { Lang } from '../utils/configure';
+export type ContentVariables = Record<string, string>;
 export type ContentTransformerProps = {
     content: {
         blocks?: ConstructorBlock[];
@@ -7,6 +8,7 @@ export type ContentTransformerProps = {
     options: {
         lang: Lang;
         customConfig?: {};
+        vars?: ContentVariables;
     };
 };
 export declare const contentTransformer: ({ content, options }: ContentTransformerProps) => {

package/server/text-transform/transformers.js

@@ -8,6 +8,7 @@ exports.contentTransformer = void 0;
 /* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 const lodash_1 = __importDefault(require("lodash"));
 const config_1 = require("./config");
+const filter_1 = require("./filter");
 function transformBlocks(blocks, lang, customConfig = {}) {
     const fullConfig = Object.assign(Object.assign({}, config_1.config), customConfig);
     const clonedBlocks = lodash_1.default.cloneDeep(blocks);
@@ -48,8 +49,8 @@ function transformBlock(lang, blocksConfig, block) {
     return block;
 }
 const contentTransformer = ({ content, options }) => {
-    const { lang, customConfig = {} } = options;
-    const { blocks = [] } = content;
+    const { lang, customConfig = {}, vars } = options;
+    const { blocks = [] } = (vars ? (0, filter_1.filterContent)(content, vars) : content);
     const transformedBlocks = transformBlocks(blocks, lang, customConfig);
     return {
         blocks: transformedBlocks,

package/server/text-transform/utils.js

@@ -39,7 +39,12 @@ exports.DEFAULT_ALLOWED_TAGS = [
 ];
 exports.typografConfig = {
     enabled: ['common/nbsp/afterNumber', 'common/nbsp/afterParagraphMark'],
-    disabled: ['common/symbols/cf', 'ru/other/phone-number'],
+    disabled: [
+        'common/symbols/cf',
+        'ru/other/phone-number',
+        'common/space/afterColon',
+        'common/space/afterSemicolon',
+    ],
 };
 exports.sanitizeStripOptions = {
     allowedTags: [],

package/server/utils/blocks.d.ts

@@ -1,6 +1,6 @@
-import { Block, CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
-import { ConstructorBlock } from '../models/constructor';
+import { ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
 export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
+export declare function hasBlockTag(content: string): boolean;
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {
@@ -8,7 +8,6 @@ export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomCon
 };
 export declare const getCustomSubBlockTypes: (customBlocks?: CustomConfig) => string[];
 export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => string[];
-export declare const getOrderedBlocks: (blocks: Block[], headerBlockTypes?: string[]) => Block[];
-export declare const getHeaderBlock: (blocks: Block[], headerBlockTypes?: string[]) => Block | undefined;
+export declare const getOrderedBlocks: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock[];
+export declare const getHeaderBlock: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
-export declare const getBlockIndexFromId: (blockId?: string) => number;

package/server/utils/blocks.js

@@ -1,7 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBlockIndexFromId = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
 const models_1 = require("../models");
+const BLOCK_ELEMENTS = [
+    'div',
+    'p',
+    'h[1-6]',
+    'address',
+    'article',
+    'aside',
+    'blockquote',
+    'canvas',
+    'dd',
+    'dl',
+    'dt',
+    'fieldset',
+    'figcaption',
+    'footer',
+    'header',
+    'hr',
+    'main',
+    'nav',
+    'section',
+    'video',
+    'pre',
+    'figure',
+    'form',
+    'pre',
+    'ol',
+    'ul',
+    'li',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'th',
+    'td',
+];
+const BLOCK_ELEMENTS_REGEX = `<(${BLOCK_ELEMENTS.join('|')})[^>]*>`;
 function getHeaderTag(size) {
     switch (size) {
         case 'l':
@@ -16,6 +53,11 @@ function getHeaderTag(size) {
     }
 }
 exports.getHeaderTag = getHeaderTag;
+function hasBlockTag(content) {
+    const regex = new RegExp(BLOCK_ELEMENTS_REGEX, 'g');
+    return regex.test(content);
+}
+exports.hasBlockTag = hasBlockTag;
 function getBlockKey(block, index) {
     return `${block.type}-${index}`;
 }
@@ -83,5 +125,3 @@ const getShareLink = (url, type, title, text) => {
     }
 };
 exports.getShareLink = getShareLink;
-const getBlockIndexFromId = (blockId) => { var _a; return Number((_a = blockId === null || blockId === void 0 ? void 0 : blockId.split('-')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()); };
-exports.getBlockIndexFromId = getBlockIndexFromId;

package/server/utils/theme.d.ts

@@ -4,4 +4,4 @@ export interface ThemedValue<T> extends Partial<Record<string, T>> {
 }
 export type ThemeSupporting<T> = T | ThemedValue<T>;
 export declare function isThemedValue<T>(value: ThemeSupporting<T>): value is ThemedValue<T>;
-export declare function getThemedValue<T>(value: ThemeSupporting<T>, theme?: string): T;
+export declare function getThemedValue<T>(value: ThemeSupporting<T>, theme?: import("../models").Theme): T;

package/styles/colors/dark.scss

@@ -0,0 +1,6 @@
+@mixin pc-colors-dark {
+    --pc-color-base-silver: #bcc0c4;
+    --pc-color-base-gold: #ffde5d;
+    --pc-color-base-asphalt: #474d52;
+    --pc-color-base-copper: #7f7262;
+}

package/styles/colors/light.scss

@@ -0,0 +1,6 @@
+@mixin pc-colors-light {
+    --pc-color-base-silver: #eff2f8;
+    --pc-color-base-gold: #ffdb4d;
+    --pc-color-base-asphalt: #313538;
+    --pc-color-base-copper: #ffe6c4;
+}

package/styles/colors/social.scss

@@ -0,0 +1,10 @@
+@mixin pc-colors-social {
+    --pc-color-telegram: #51a4db;
+    --pc-color-facebook: #4968ad;
+    --pc-color-twitter: #4aa0eb;
+    --pc-color-vk: #436eab;
+    --pc-color-youtube: #eb3323;
+    --pc-color-github: #25292e;
+    --pc-color-rss: #f29c39;
+    --pc-color-linkedin: #0a66c2;
+}

package/styles/mixins.scss

@@ -4,21 +4,21 @@
 //common
 
 @mixin text-size($name) {
-    font-size: var(--yc-text-#{$name}-font-size);
-    line-height: var(--yc-text-#{$name}-line-height);
+    font-size: var(--g-text-#{$name}-font-size);
+    line-height: var(--g-text-#{$name}-line-height);
 }
 
 @mixin link() {
     @include islands-focus();
 
-    color: var(--yc-color-text-link);
+    color: var(--g-color-text-link);
     text-decoration: none;
     cursor: pointer;
 
     &:hover,
     &:active {
-        --pc-text-header-color: var(--yc-color-text-link-hover);
-        color: var(--yc-color-text-link-hover);
+        --pc-text-header-color: var(--g-color-text-link-hover);
+        color: var(--g-color-text-link-hover);
     }
 }
 
@@ -43,14 +43,6 @@
     }
 }
 
-@mixin add-file-ext-colors() {
-    @each $name, $value in $fileExtColors {
-        &_ext_#{$name} {
-            --pc-file-label-color: #{$value};
-        }
-    }
-}
-
 @mixin reset-button-style() {
     display: inline-block;
     margin: 0;
@@ -122,11 +114,11 @@
 @mixin header-link() {
     @include link;
 
-    --pc-text-header-color: var(--yc-color-text-link);
+    --pc-text-header-color: var(--g-color-text-link);
 
     &:hover,
     &:active {
-        --pc-text-header-color: var(--yc-color-text-link-hover);
+        --pc-text-header-color: var(--g-color-text-link-hover);
     }
 }
 
@@ -167,17 +159,19 @@
 //constructor
 
 @mixin block {
-    margin-top: $indentL;
-    padding: 0 0 $indentL;
+    @include add-specificity(&) {
+        margin-top: $indentL;
+        padding: 0 0 $indentL;
 
-    &:first-child {
-        margin-top: var(--pc-first-block-indent, #{$indentXXL});
+        &:first-child {
+            margin-top: var(--pc-first-block-indent, #{$indentXXL});
+        }
     }
 }
 
 @mixin add-theme() {
     &_theme_dark {
-        color: var(--yc-color-text-light-primary);
+        color: var(--g-color-text-light-primary);
 
         h1,
         h2,
@@ -186,7 +180,7 @@
         h5,
         h6,
         .yfm {
-            color: var(--yc-color-text-light-primary);
+            color: var(--g-color-text-light-primary);
         }
     }
 }
@@ -219,7 +213,7 @@
     @extend %shadow;
 
     &:hover {
-        box-shadow: 0px 4px 24px var(--yc-color-sfx-shadow), 0px 2px 8px var(--yc-color-sfx-shadow);
+        box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
         cursor: pointer;
     }
 }
@@ -242,12 +236,12 @@
     height: 100%;
     overflow-x: hidden;
     border-radius: $borderRadius;
-    background-color: var(--yc-color-base-float);
+    background-color: var(--g-color-base-float);
 
     transition: box-shadow 0.3s $ease-out-cubic;
 
     &_border_line {
-        border: 1px solid var(--yc-color-line-generic);
+        border: 1px solid var(--g-color-line-generic);
     }
 
     &_border_line,
@@ -454,25 +448,29 @@ unpredictable css rules order in build */
     min-width: 220px;
     padding: $indentXS;
 
-    border: 1px solid var(--yc-color-line-generic);
+    border: 1px solid var(--g-color-line-generic);
     border-top-width: 0;
     border-radius: calc(#{$borderRadius} / 2);
-    background: var(--yc-color-base-float);
-    box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+    background: var(--g-color-base-float);
+    box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
 }
 
 @mixin navigation-item {
-    color: var(--yc-color-text-primary);
+    color: var(--g-color-text-primary);
     @include reset-link-style();
     @include islands-focus();
 
     &:hover,
     &_active {
-        color: var(--yc-color-text-link);
+        color: var(--g-color-text-link);
     }
 }
 
 @mixin button($color, $backgroundColor, $hoverColor: $color, $hoverBackgroundColor) {
+    --g-button-background-color: #{$backgroundColor};
+    --g-button-background-color-hover: #{$hoverBackgroundColor};
+
+    //old named variables still in use in uikit, will be removed in next major ver
     --yc-button-background-color: #{$backgroundColor};
     --yc-button-background-color-hover: #{$hoverBackgroundColor};
 

package/styles/root.scss

@@ -1,27 +1,33 @@
+@import './colors/light.scss';
+@import './colors/dark.scss';
+@import './colors/social.scss';
+
 :root {
     --header-height: 64px;
 }
 
-.yc-root {
-    --yc-text-accent-font-weight: 500;
+.g-root {
+    @include pc-colors-social;
+
+    --g-text-accent-font-weight: 500;
 
     // cross-browser transparent color
     --pc-transparent: rgba(255, 255, 255, 0);
     --pc-border-radius: 24px;
     --pc-image-padding: 4px;
 
-    --pc-color-sfx-shadow: var(--yc-color-base-simple-hover);
+    --pc-color-sfx-shadow: var(--g-color-base-simple-hover);
     --pc-color-line-generic-active-solid: #b3b3b3;
-    --pc-color-base-float-hover: var(--yc-color-base-float);
+    --pc-color-base-float-hover: var(--g-color-base-float);
     --pc-monochrome-button-background-color: #262626;
     --pc-monochrome-button-background-color-hover: #393939;
-    --pc-monochrome-button-color: var(--yc-color-text-light-primary);
-    --pc-text-header-color: var(--yc-color-text-primary);
-    --pc-media-card-meta-info-color: var(--yc-color-text-secondary);
+    --pc-monochrome-button-color: var(--g-color-text-light-primary);
+    --pc-text-header-color: var(--g-color-text-primary);
+    --pc-media-card-meta-info-color: var(--g-color-text-secondary);
 
-    --pc-tab-item-color: var(--yc-color-text-primary);
-    --pc-tab-item-background-color: var(--yc-color-base-generic);
-    --pc-tab-item-background-color-hover: var(--yc-color-base-generic-hover);
+    --pc-tab-item-color: var(--g-color-text-primary);
+    --pc-tab-item-background-color: var(--g-color-base-generic);
+    --pc-tab-item-background-color-hover: var(--g-color-base-generic-hover);
 
     --pc-selected-tab-item-color: var(--pc-monochrome-button-color);
     --pc-selected-tab-item-background-color: var(--pc-monochrome-button-background-color);
@@ -29,12 +35,20 @@
         --pc-monochrome-button-background-color-hover
     );
 
-    &.yc-root_theme_dark {
-        --pc-color-sfx-shadow: var(--yc-color-sfx-shadow);
+    &_theme_light {
+        @include pc-colors-light;
+    }
+
+    &_theme_dark {
+        @include pc-colors-dark;
+    }
+
+    &.g-root_theme_dark {
+        --pc-color-sfx-shadow: var(--g-color-sfx-shadow);
         --pc-color-line-generic-active-solid: #6c6c70;
-        --pc-color-base-float-hover: var(--yc-color-base-float-hover);
+        --pc-color-base-float-hover: var(--g-color-base-float-hover);
         --pc-monochrome-button-background-color: #ffffff;
         --pc-monochrome-button-background-color-hover: #e9e9e9;
-        --pc-monochrome-button-color: var(--yc-color-text-dark-primary);
+        --pc-monochrome-button-color: var(--g-color-text-dark-primary);
     }
 }

package/styles/storybook/common.scss

@@ -5,25 +5,25 @@
 
 .demo-header {
     margin-bottom: 20px;
-    font-size: var(--yc-text-body-1-font-size);
+    font-size: var(--g-text-body-1-font-size);
     font-weight: bold;
     text-transform: uppercase;
-    color: var(--yc-color-text-primary);
+    color: var(--g-color-text-primary);
 }
 
 .demo-description {
     margin-bottom: 25px;
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    font-size: var(--g-text-body-2-font-size);
+    line-height: var(--g-text-body-2-line-height);
 }
 
 .demo-markdown {
     .markdown-body {
         padding: 20px;
-        color: var(--yc-color-text-primary);
+        color: var(--g-color-text-primary);
 
         a {
-            color: var(--yc-color-text-link);
+            color: var(--g-color-text-link);
         }
     }
 }

package/styles/storybook/palette.scss

@@ -6,7 +6,7 @@
     }
 
     &__section-message {
-        color: var(--yc-color-text-special);
+        color: var(--g-color-text-brand);
         margin-bottom: 10px;
         margin-top: -10px;
     }
@@ -40,7 +40,7 @@
         &-description {
             margin-top: 8px;
             height: 40px;
-            color: var(--yc-color-text-primary);
+            color: var(--g-color-text-primary);
             font-size: 13px;
         }
         &-caption {
@@ -55,21 +55,21 @@
             justify-content: center;
 
             &_border_yes {
-                border: 1px solid var(--yc-color-line-generic);
+                border: 1px solid var(--g-color-line-generic);
             }
 
             &_skip_yes {
-                color: var(--yc-color-text-info);
+                color: var(--g-color-text-info);
             }
         }
     }
 }
 
-.yc-root_theme_light .palette__section-contrast-layer {
+.g-root_theme_light .palette__section-contrast-layer {
     background: #000;
     opacity: 0.02;
 }
 
-.yc-root_theme_dark .palette__section-contrast-layer {
+.g-root_theme_dark .palette__section-contrast-layer {
     background: #323138;
 }