+ {json ?
+ {json || No data yet}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/jest.config.js b/jest.config.js
index 19c3e98609..a9c6ef3334 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -20,7 +20,7 @@ module.exports = {
],
},
transformIgnorePatterns: [
- 'node_modules/(?!(@gravity-ui|react-github-btn|tinygesture|swiper)/)',
+ 'node_modules/(?!(@gravity-ui|@uiw|@dnd-kit|@preact|colors-named|colors-named-hex|react-github-btn|tinygesture|swiper)/)',
],
coverageDirectory: './coverage',
collectCoverageFrom: [
@@ -37,6 +37,8 @@ module.exports = {
// Mock CSS imports
'^swiper/css.*': 'jest-transform-css',
'\\.(css|less|scss|sass)$': 'jest-transform-css',
+ // Mock SVG imports
+ '\\.svg$': '
+
+
+
+
+
+ Connection Types
+
+
+ Normal import
+
+
+
+ Circular / Selected
+
+
+
+
+
+
+
+ {items.map((item, index) => (
+
+ {item.content}
+
+ ))}
+
+
+ );
+};
+
+export default AccordionBlock;
diff --git a/playground/src/blocks/AccordionBlock/index.ts b/playground/src/blocks/AccordionBlock/index.ts
new file mode 100644
index 0000000000..24e0c31742
--- /dev/null
+++ b/playground/src/blocks/AccordionBlock/index.ts
@@ -0,0 +1,58 @@
+import {BlockData} from '../../../../src/constructor-items';
+import {Fields} from '../../../../src/form-generator-v2/types';
+
+import AccordionBlock from './AccordionBlock';
+
+const AccordionBlockConfig: BlockData = {
+ type: 'custom/atom-accordion',
+ component: AccordionBlock,
+ schema: {
+ name: 'Accordion',
+ group: 'custom/atoms',
+ inputs: [
+ {
+ type: 'section',
+ title: 'Settings',
+ opened: true,
+ fields: [
+ {
+ type: 'segmentedRadioGroup',
+ name: 'size',
+ title: 'Size',
+ options: [
+ {value: 'm', content: 'M'},
+ {value: 'l', content: 'L'},
+ {value: 'xl', content: 'XL'},
+ ],
+ defaultValue: 'm',
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Items',
+ withAddButton: true,
+ index: 'index',
+ itemTitle: 'Item {{index}}',
+ itemView: 'card',
+ fields: [
+ {type: 'textInput', name: 'items[{{index}}].summary', title: 'Summary'},
+ {type: 'textArea', name: 'items[{{index}}].content', title: 'Content'},
+ ],
+ },
+ ] as Fields,
+ default: {
+ size: 'm',
+ items: [
+ {summary: 'What is this?', content: 'This is the first accordion item content.'},
+ {
+ summary: 'How does it work?',
+ content: 'It uses the Accordion component from Gravity UI.',
+ },
+ {summary: 'Can I add more?', content: 'Yes! Add as many items as you need.'},
+ ],
+ },
+ },
+};
+
+export default AccordionBlockConfig;
diff --git a/playground/src/blocks/AlertBlock/AlertBlock.tsx b/playground/src/blocks/AlertBlock/AlertBlock.tsx
new file mode 100644
index 0000000000..4cb8510ef7
--- /dev/null
+++ b/playground/src/blocks/AlertBlock/AlertBlock.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import {Alert} from '@gravity-ui/uikit';
+
+export interface AlertBlockProps {
+ title?: string;
+ message?: string;
+ theme?: 'normal' | 'info' | 'success' | 'warning' | 'danger' | 'utility' | 'clear';
+ view?: 'filled' | 'outlined';
+ corners?: 'rounded' | 'square';
+ layout?: 'vertical' | 'horizontal';
+}
+
+const AlertBlock: React.FC
+
+ );
+};
+
+export default AlertBlock;
diff --git a/playground/src/blocks/AlertBlock/index.ts b/playground/src/blocks/AlertBlock/index.ts
new file mode 100644
index 0000000000..ff4d305209
--- /dev/null
+++ b/playground/src/blocks/AlertBlock/index.ts
@@ -0,0 +1,77 @@
+import {BlockData} from '../../../../src/constructor-items';
+import {Fields} from '../../../../src/form-generator-v2/types';
+
+import AlertBlock from './AlertBlock';
+
+const AlertBlockConfig: BlockData = {
+ type: 'custom/atom-alert',
+ component: AlertBlock,
+ schema: {
+ name: 'Alert',
+ group: 'custom/atoms',
+ inputs: [
+ {
+ type: 'section',
+ title: 'Alert',
+ opened: true,
+ fields: [
+ {type: 'textInput', name: 'title', title: 'Title'},
+ {type: 'textArea', name: 'message', title: 'Message'},
+ {
+ type: 'segmentedRadioGroup',
+ name: 'theme',
+ title: 'Theme',
+ options: [
+ {value: 'normal', content: 'Normal'},
+ {value: 'info', content: 'Info'},
+ {value: 'success', content: 'Success'},
+ {value: 'warning', content: 'Warning'},
+ {value: 'danger', content: 'Danger'},
+ ],
+ defaultValue: 'normal',
+ },
+ {
+ type: 'segmentedRadioGroup',
+ name: 'view',
+ title: 'View',
+ options: [
+ {value: 'filled', content: 'Filled'},
+ {value: 'outlined', content: 'Outlined'},
+ ],
+ defaultValue: 'filled',
+ },
+ {
+ type: 'segmentedRadioGroup',
+ name: 'corners',
+ title: 'Corners',
+ options: [
+ {value: 'rounded', content: 'Rounded'},
+ {value: 'square', content: 'Square'},
+ ],
+ defaultValue: 'rounded',
+ },
+ {
+ type: 'segmentedRadioGroup',
+ name: 'layout',
+ title: 'Layout',
+ options: [
+ {value: 'horizontal', content: 'Horizontal'},
+ {value: 'vertical', content: 'Vertical'},
+ ],
+ defaultValue: 'horizontal',
+ },
+ ],
+ },
+ ] as Fields,
+ default: {
+ title: 'Heads up!',
+ message: 'This is an informational message.',
+ theme: 'info',
+ view: 'filled',
+ corners: 'rounded',
+ layout: 'horizontal',
+ },
+ },
+};
+
+export default AlertBlockConfig;
diff --git a/playground/src/blocks/AvatarBlock/AvatarBlock.tsx b/playground/src/blocks/AvatarBlock/AvatarBlock.tsx
new file mode 100644
index 0000000000..8f48983549
--- /dev/null
+++ b/playground/src/blocks/AvatarBlock/AvatarBlock.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import {Avatar} from '@gravity-ui/uikit';
+import type {AvatarSize} from '@gravity-ui/uikit';
+
+export interface AvatarBlockProps {
+ text?: string;
+ imgUrl?: string;
+ size?: AvatarSize;
+ theme?: 'normal' | 'brand';
+ view?: 'filled' | 'outlined';
+}
+
+const AvatarBlock: React.FC
+
+ );
+};
+
+export default AvatarBlock;
diff --git a/playground/src/blocks/AvatarBlock/index.ts b/playground/src/blocks/AvatarBlock/index.ts
new file mode 100644
index 0000000000..6a403e5194
--- /dev/null
+++ b/playground/src/blocks/AvatarBlock/index.ts
@@ -0,0 +1,67 @@
+import {BlockData} from '../../../../src/constructor-items';
+import {Fields} from '../../../../src/form-generator-v2/types';
+
+import AvatarBlock from './AvatarBlock';
+
+const AvatarBlockConfig: BlockData = {
+ type: 'custom/atom-avatar',
+ component: AvatarBlock,
+ schema: {
+ name: 'Avatar',
+ group: 'custom/atoms',
+ inputs: [
+ {
+ type: 'section',
+ title: 'Avatar',
+ opened: true,
+ fields: [
+ {type: 'textInput', name: 'text', title: 'Initials / fallback text'},
+ {type: 'textInput', name: 'imgUrl', title: 'Image URL'},
+ {
+ type: 'segmentedRadioGroup',
+ name: 'size',
+ title: 'Size',
+ options: [
+ {value: 'xs', content: 'XS'},
+ {value: 's', content: 'S'},
+ {value: 'm', content: 'M'},
+ {value: 'l', content: 'L'},
+ {value: 'xl', content: 'XL'},
+ {value: '2xl', content: '2XL'},
+ {value: '3xl', content: '3XL'},
+ ],
+ defaultValue: 'xl',
+ },
+ {
+ type: 'segmentedRadioGroup',
+ name: 'theme',
+ title: 'Theme',
+ options: [
+ {value: 'normal', content: 'Normal'},
+ {value: 'brand', content: 'Brand'},
+ ],
+ defaultValue: 'normal',
+ },
+ {
+ type: 'segmentedRadioGroup',
+ name: 'view',
+ title: 'View',
+ options: [
+ {value: 'filled', content: 'Filled'},
+ {value: 'outlined', content: 'Outlined'},
+ ],
+ defaultValue: 'filled',
+ },
+ ],
+ },
+ ] as Fields,
+ default: {
+ text: 'AJ',
+ size: 'xl',
+ theme: 'brand',
+ view: 'filled',
+ },
+ },
+};
+
+export default AvatarBlockConfig;
diff --git a/playground/src/blocks/BreadcrumbsBlock/BreadcrumbsBlock.tsx b/playground/src/blocks/BreadcrumbsBlock/BreadcrumbsBlock.tsx
new file mode 100644
index 0000000000..34244d0d71
--- /dev/null
+++ b/playground/src/blocks/BreadcrumbsBlock/BreadcrumbsBlock.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import {Breadcrumbs} from '@gravity-ui/uikit';
+
+export interface BreadcrumbsItem {
+ text: string;
+ href?: string;
+}
+
+export interface BreadcrumbsBlockProps {
+ items?: BreadcrumbsItem[];
+}
+
+const BreadcrumbsBlock: React.FC
+
+ {items.map((item, index) => (
+
+ {item.text}
+
+ ))}
+
+
+ );
+};
+
+export default BreadcrumbsBlock;
diff --git a/playground/src/blocks/BreadcrumbsBlock/index.ts b/playground/src/blocks/BreadcrumbsBlock/index.ts
new file mode 100644
index 0000000000..52c333e9ec
--- /dev/null
+++ b/playground/src/blocks/BreadcrumbsBlock/index.ts
@@ -0,0 +1,36 @@
+import {BlockData} from '../../../../src/constructor-items';
+import {Fields} from '../../../../src/form-generator-v2/types';
+
+import BreadcrumbsBlock from './BreadcrumbsBlock';
+
+const BreadcrumbsBlockConfig: BlockData = {
+ type: 'custom/atom-breadcrumbs',
+ component: BreadcrumbsBlock,
+ schema: {
+ name: 'Breadcrumbs',
+ group: 'custom/atoms',
+ inputs: [
+ {
+ type: 'section',
+ title: 'Items',
+ withAddButton: true,
+ index: 'index',
+ itemTitle: 'Item {{index}}',
+ itemView: 'card',
+ fields: [
+ {type: 'textInput', name: 'items[{{index}}].text', title: 'Label'},
+ {type: 'textInput', name: 'items[{{index}}].href', title: 'Link URL'},
+ ],
+ },
+ ] as Fields,
+ default: {
+ items: [
+ {text: 'Home', href: '/'},
+ {text: 'Products', href: '/products'},
+ {text: 'Current page'},
+ ],
+ },
+ },
+};
+
+export default BreadcrumbsBlockConfig;
diff --git a/playground/src/blocks/ButtonBlock/ButtonBlock.tsx b/playground/src/blocks/ButtonBlock/ButtonBlock.tsx
new file mode 100644
index 0000000000..13c179b58c
--- /dev/null
+++ b/playground/src/blocks/ButtonBlock/ButtonBlock.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import {Button} from '@gravity-ui/uikit';
+
+export interface ButtonBlockProps {
+ text?: string;
+ view?: 'normal' | 'action' | 'outlined' | 'flat' | 'raised';
+ size?: 'xs' | 's' | 'm' | 'l' | 'xl';
+ href?: string;
+ target?: '_blank' | '_self';
+}
+
+const ButtonBlock: React.FC
+
+
+ );
+};
+
+export default ButtonBlock;
diff --git a/playground/src/blocks/ButtonBlock/index.ts b/playground/src/blocks/ButtonBlock/index.ts
new file mode 100644
index 0000000000..49d6af11cc
--- /dev/null
+++ b/playground/src/blocks/ButtonBlock/index.ts
@@ -0,0 +1,67 @@
+import {BlockData} from '../../../../src/constructor-items';
+import {Fields} from '../../../../src/form-generator-v2/types';
+
+import ButtonBlock from './ButtonBlock';
+
+const ButtonBlockConfig: BlockData = {
+ type: 'custom/atom-button',
+ component: ButtonBlock,
+ schema: {
+ name: 'Button',
+ group: 'custom/atoms',
+ inputs: [
+ {
+ type: 'section',
+ title: 'Button',
+ opened: true,
+ fields: [
+ {type: 'textInput', name: 'text', title: 'Label'},
+ {
+ type: 'segmentedRadioGroup',
+ name: 'view',
+ title: 'View',
+ options: [
+ {value: 'action', content: 'Action'},
+ {value: 'normal', content: 'Normal'},
+ {value: 'outlined', content: 'Outlined'},
+ {value: 'flat', content: 'Flat'},
+ {value: 'raised', content: 'Raised'},
+ ],
+ defaultValue: 'action',
+ },
+ {
+ type: 'segmentedRadioGroup',
+ name: 'size',
+ title: 'Size',
+ options: [
+ {value: 'xs', content: 'XS'},
+ {value: 's', content: 'S'},
+ {value: 'm', content: 'M'},
+ {value: 'l', content: 'L'},
+ {value: 'xl', content: 'XL'},
+ ],
+ defaultValue: 'm',
+ },
+ {type: 'textInput', name: 'href', title: 'Link URL'},
+ {
+ type: 'select',
+ name: 'target',
+ title: 'Link target',
+ hasClear: true,
+ options: [
+ {value: '_blank', content: 'New tab'},
+ {value: '_self', content: 'Same tab'},
+ ],
+ },
+ ],
+ },
+ ] as Fields,
+ default: {
+ text: 'Click me',
+ view: 'action',
+ size: 'm',
+ },
+ },
+};
+
+export default ButtonBlockConfig;
diff --git a/playground/src/blocks/CardContainer/CardContainer.tsx b/playground/src/blocks/CardContainer/CardContainer.tsx
new file mode 100644
index 0000000000..9723e555a8
--- /dev/null
+++ b/playground/src/blocks/CardContainer/CardContainer.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import {Card} from '@gravity-ui/uikit';
+
+import ChildrenItemWrap from '../../../../src/components/editor/ChildrenItemWrap/ChildrenItemWrap';
+import ChildrensWrap from '../../../../src/components/editor/ChildrensWrap/ChildrensWrap';
+
+export interface CardContainerProps extends React.PropsWithChildren {
+ title?: string;
+ description?: string;
+ theme?: 'normal' | 'info' | 'success' | 'warning' | 'danger';
+ view?: 'outlined' | 'filled' | 'raised';
+ size?: 'm' | 'l';
+}
+
+const CardContainer: React.FC
+
+ {(title || description) && (
+
+
+ );
+};
+
+export default CardContainer;
diff --git a/playground/src/blocks/CardContainer/index.ts b/playground/src/blocks/CardContainer/index.ts
new file mode 100644
index 0000000000..353b04718d
--- /dev/null
+++ b/playground/src/blocks/CardContainer/index.ts
@@ -0,0 +1,68 @@
+import {BlockData} from '../../../../src/constructor-items';
+import {Fields} from '../../../../src/form-generator-v2/types';
+
+import CardContainer from './CardContainer';
+
+const CardContainerConfig: BlockData = {
+ type: 'custom/container-card',
+ component: CardContainer,
+ schema: {
+ name: 'Card',
+ group: 'custom/containers',
+ inputs: [
+ {
+ type: 'section',
+ title: 'Card',
+ opened: true,
+ fields: [
+ {type: 'textInput', name: 'title', title: 'Title'},
+ {type: 'textArea', name: 'description', title: 'Description'},
+ {
+ type: 'segmentedRadioGroup',
+ name: 'theme',
+ title: 'Theme',
+ options: [
+ {value: 'normal', content: 'Normal'},
+ {value: 'info', content: 'Info'},
+ {value: 'success', content: 'Success'},
+ {value: 'warning', content: 'Warning'},
+ {value: 'danger', content: 'Danger'},
+ ],
+ defaultValue: 'normal',
+ },
+ {
+ type: 'segmentedRadioGroup',
+ name: 'view',
+ title: 'View',
+ options: [
+ {value: 'outlined', content: 'Outlined'},
+ {value: 'filled', content: 'Filled'},
+ {value: 'raised', content: 'Raised'},
+ ],
+ defaultValue: 'outlined',
+ },
+ {
+ type: 'segmentedRadioGroup',
+ name: 'size',
+ title: 'Size',
+ options: [
+ {value: 'm', content: 'M'},
+ {value: 'l', content: 'L'},
+ ],
+ defaultValue: 'l',
+ },
+ ],
+ },
+ ] as Fields,
+ default: {
+ title: 'Card Title',
+ description: 'Optional card description.',
+ theme: 'normal',
+ view: 'outlined',
+ size: 'l',
+ children: [],
+ },
+ },
+};
+
+export default CardContainerConfig;
diff --git a/playground/src/blocks/ColumnsContainer/ColumnsContainer.tsx b/playground/src/blocks/ColumnsContainer/ColumnsContainer.tsx
new file mode 100644
index 0000000000..419a32468f
--- /dev/null
+++ b/playground/src/blocks/ColumnsContainer/ColumnsContainer.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+import ChildrenItemWrap from '../../../../src/components/editor/ChildrenItemWrap/ChildrenItemWrap';
+import ChildrensWrap from '../../../../src/components/editor/ChildrensWrap/ChildrensWrap';
+
+export type ColumnsCount = 2 | 3 | 4;
+export type ColumnsGap = 's' | 'm' | 'l' | 'space-between';
+
+const GAP_SIZE: Record
+ {title && (
+
+ )}
+ + {title} +
+ )} + {description && ( ++ {description} +
+ )} +
+
+ {React.Children.map(children, (child, index) => (
+ {child}
+ ))}
+
+
+
+
+
+
+ );
+};
+
+export default ColumnsContainer;
diff --git a/playground/src/blocks/ColumnsContainer/index.ts b/playground/src/blocks/ColumnsContainer/index.ts
new file mode 100644
index 0000000000..98314bb4ad
--- /dev/null
+++ b/playground/src/blocks/ColumnsContainer/index.ts
@@ -0,0 +1,52 @@
+import {BlockData} from '../../../../src/constructor-items';
+import {Fields} from '../../../../src/form-generator-v2/types';
+
+import ColumnsContainer from './ColumnsContainer';
+
+const ColumnsContainerConfig: BlockData = {
+ type: 'custom/container-columns',
+ component: ColumnsContainer,
+ schema: {
+ name: 'Columns',
+ group: 'custom/containers',
+ inputs: [
+ {
+ type: 'section',
+ title: 'Layout',
+ opened: true,
+ fields: [
+ {
+ type: 'segmentedRadioGroup',
+ name: 'columns',
+ title: 'Columns',
+ options: [
+ {value: '2', content: '2'},
+ {value: '3', content: '3'},
+ {value: '4', content: '4'},
+ ],
+ defaultValue: '2',
+ },
+ {
+ type: 'segmentedRadioGroup',
+ name: 'gap',
+ title: 'Gap',
+ options: [
+ {value: 's', content: 'S'},
+ {value: 'm', content: 'M'},
+ {value: 'l', content: 'L'},
+ {value: 'space-between', content: 'Space between'},
+ ],
+ defaultValue: 'm',
+ },
+ ],
+ },
+ ] as Fields,
+ default: {
+ columns: 2,
+ gap: 'm',
+ children: [],
+ },
+ },
+};
+
+export default ColumnsContainerConfig;
diff --git a/playground/src/blocks/DefinitionListBlock/DefinitionListBlock.tsx b/playground/src/blocks/DefinitionListBlock/DefinitionListBlock.tsx
new file mode 100644
index 0000000000..6e508e3861
--- /dev/null
+++ b/playground/src/blocks/DefinitionListBlock/DefinitionListBlock.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+
+import {DefinitionList} from '@gravity-ui/uikit';
+
+export interface DefinitionListItem {
+ name: string;
+ value: string;
+ copyText?: string;
+ note?: string;
+}
+
+export interface DefinitionListBlockProps {
+ title?: string;
+ items?: DefinitionListItem[];
+ direction?: 'horizontal' | 'vertical';
+ responsive?: boolean;
+ nameMaxWidth?: number;
+ contentMaxWidth?: number;
+}
+
+const DefinitionListBlock: React.FC
+ {React.Children.map(children, (child, index) => (
+ {child}
+ ))}
+
+
+ {title && (
+
+ {items.map((item, index) => (
+
+ {item.value}
+
+ ))}
+
+
+ );
+};
+
+export default DefinitionListBlock;
diff --git a/playground/src/blocks/DefinitionListBlock/index.ts b/playground/src/blocks/DefinitionListBlock/index.ts
new file mode 100644
index 0000000000..5f576ed713
--- /dev/null
+++ b/playground/src/blocks/DefinitionListBlock/index.ts
@@ -0,0 +1,79 @@
+import {BlockData} from '../../../../src/constructor-items';
+import {Fields} from '../../../../src/form-generator-v2/types';
+
+import DefinitionListBlock from './DefinitionListBlock';
+
+const DefinitionListBlockConfig: BlockData = {
+ type: 'custom/definition-list-block',
+ component: DefinitionListBlock,
+ schema: {
+ name: 'Definition List Block',
+ group: 'custom/atoms',
+ inputs: [
+ {type: 'textInput', name: 'title', title: 'Block Title'},
+ {
+ type: 'segmentedRadioGroup',
+ name: 'direction',
+ title: 'Direction',
+ options: [
+ {value: 'horizontal', content: 'Horizontal'},
+ {value: 'vertical', content: 'Vertical'},
+ ],
+ defaultValue: 'horizontal',
+ },
+ {type: 'switch', name: 'responsive', title: 'Responsive (100% width)'},
+ {type: 'textInput', name: 'nameMaxWidth', title: 'Name Max Width (px)'},
+ {type: 'textInput', name: 'contentMaxWidth', title: 'Content Max Width (px)'},
+ {
+ type: 'section',
+ title: 'Definition Items',
+ index: 'index',
+ withAddButton: true,
+ itemTitle: 'Item {{index}}',
+ itemView: 'card',
+ fields: [
+ {type: 'textInput', name: 'items[{{index}}].name', title: 'Term Name'},
+ {type: 'textInput', name: 'items[{{index}}].value', title: 'Definition Value'},
+ {
+ type: 'textInput',
+ name: 'items[{{index}}].copyText',
+ title: 'Copy Text (optional)',
+ },
+ {
+ type: 'textInput',
+ name: 'items[{{index}}].note',
+ title: 'Note/Help Text (optional)',
+ },
+ ],
+ },
+ ] as Fields,
+ default: {
+ title: 'System Specifications',
+ direction: 'horizontal',
+ responsive: false,
+ items: [
+ {
+ name: 'CPU',
+ value: 'Intel Core i9-13900K',
+ copyText: 'Intel Core i9-13900K',
+ },
+ {
+ name: 'RAM',
+ value: '64GB DDR5-5600',
+ note: 'Maximum supported memory',
+ },
+ {
+ name: 'Storage',
+ value: '2TB NVMe SSD',
+ },
+ {
+ name: 'GPU',
+ value: 'NVIDIA RTX 4090 24GB',
+ copyText: 'NVIDIA RTX 4090 24GB',
+ },
+ ],
+ },
+ },
+};
+
+export default DefinitionListBlockConfig;
diff --git a/playground/src/blocks/LabelBlock/LabelBlock.tsx b/playground/src/blocks/LabelBlock/LabelBlock.tsx
new file mode 100644
index 0000000000..f9a2a727a0
--- /dev/null
+++ b/playground/src/blocks/LabelBlock/LabelBlock.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import {Label} from '@gravity-ui/uikit';
+
+export interface LabelBlockProps {
+ value?: string;
+ theme?: 'normal' | 'info' | 'danger' | 'warning' | 'success' | 'utility' | 'unknown' | 'clear';
+ size?: 'xs' | 's' | 'm';
+}
+
+const LabelBlock: React.FC+ {title} +
+ )} +
+
+
+ );
+};
+
+export default LabelBlock;
diff --git a/playground/src/blocks/LabelBlock/index.ts b/playground/src/blocks/LabelBlock/index.ts
new file mode 100644
index 0000000000..5ebbad9795
--- /dev/null
+++ b/playground/src/blocks/LabelBlock/index.ts
@@ -0,0 +1,57 @@
+import {BlockData} from '../../../../src/constructor-items';
+import {Fields} from '../../../../src/form-generator-v2/types';
+
+import LabelBlock from './LabelBlock';
+
+const LabelBlockConfig: BlockData = {
+ type: 'custom/atom-label',
+ component: LabelBlock,
+ schema: {
+ name: 'Label',
+ group: 'custom/atoms',
+ inputs: [
+ {
+ type: 'section',
+ title: 'Label',
+ opened: true,
+ fields: [
+ {type: 'textInput', name: 'value', title: 'Text'},
+ {
+ type: 'select',
+ name: 'theme',
+ title: 'Theme',
+ options: [
+ {value: 'normal'},
+ {value: 'info'},
+ {value: 'success'},
+ {value: 'warning'},
+ {value: 'danger'},
+ {value: 'utility'},
+ {value: 'unknown'},
+ {value: 'clear'},
+ ],
+ defaultValue: 'normal',
+ },
+ {
+ type: 'segmentedRadioGroup',
+ name: 'size',
+ title: 'Size',
+ options: [
+ {value: 'xs', content: 'XS'},
+ {value: 's', content: 'S'},
+ {value: 'm', content: 'M'},
+ ],
+ defaultValue: 'm',
+ },
+ ],
+ },
+ ] as Fields,
+ default: {
+ value: 'Status',
+ theme: 'info',
+ size: 'm',
+ },
+ },
+};
+
+export default LabelBlockConfig;
diff --git a/playground/src/blocks/ProgressBlock/ProgressBlock.tsx b/playground/src/blocks/ProgressBlock/ProgressBlock.tsx
new file mode 100644
index 0000000000..b13147613a
--- /dev/null
+++ b/playground/src/blocks/ProgressBlock/ProgressBlock.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import {Progress} from '@gravity-ui/uikit';
+
+export interface ProgressBlockProps {
+ value?: string;
+ text?: string;
+ theme?: 'default' | 'success' | 'warning' | 'danger' | 'misc';
+ size?: 'xs' | 's' | 'm';
+}
+
+const ProgressBlock: React.FC
+
+
+ );
+};
+
+export default ProgressBlock;
diff --git a/playground/src/blocks/ProgressBlock/index.ts b/playground/src/blocks/ProgressBlock/index.ts
new file mode 100644
index 0000000000..5223f203c8
--- /dev/null
+++ b/playground/src/blocks/ProgressBlock/index.ts
@@ -0,0 +1,65 @@
+import {BlockData} from '../../../../src/constructor-items';
+import {Fields} from '../../../../src/form-generator-v2/types';
+
+import ProgressBlock from './ProgressBlock';
+
+const ProgressBlockConfig: BlockData = {
+ type: 'custom/atom-progress',
+ component: ProgressBlock,
+ schema: {
+ name: 'Progress',
+ group: 'custom/atoms',
+ inputs: [
+ {
+ type: 'section',
+ title: 'Progress',
+ opened: true,
+ fields: [
+ {
+ type: 'select',
+ name: 'value',
+ title: 'Value (%)',
+ options: [0, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100].map((v) => ({
+ value: String(v),
+ content: `${v}%`,
+ })),
+ defaultValue: '50',
+ },
+ {type: 'textInput', name: 'text', title: 'Label text'},
+ {
+ type: 'segmentedRadioGroup',
+ name: 'theme',
+ title: 'Theme',
+ options: [
+ {value: 'default', content: 'Default'},
+ {value: 'success', content: 'Success'},
+ {value: 'warning', content: 'Warning'},
+ {value: 'danger', content: 'Danger'},
+ {value: 'misc', content: 'Misc'},
+ ],
+ defaultValue: 'default',
+ },
+ {
+ type: 'segmentedRadioGroup',
+ name: 'size',
+ title: 'Size',
+ options: [
+ {value: 'xs', content: 'XS'},
+ {value: 's', content: 'S'},
+ {value: 'm', content: 'M'},
+ ],
+ defaultValue: 'm',
+ },
+ ],
+ },
+ ] as Fields,
+ default: {
+ value: 65,
+ text: '65%',
+ theme: 'success',
+ size: 'm',
+ },
+ },
+};
+
+export default ProgressBlockConfig;
diff --git a/playground/src/blocks/SectionContainer/SectionContainer.tsx b/playground/src/blocks/SectionContainer/SectionContainer.tsx
new file mode 100644
index 0000000000..cfe4c7ef99
--- /dev/null
+++ b/playground/src/blocks/SectionContainer/SectionContainer.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+
+import {Divider} from '@gravity-ui/uikit';
+
+import ChildrenItemWrap from '../../../../src/components/editor/ChildrenItemWrap/ChildrenItemWrap';
+import ChildrensWrap from '../../../../src/components/editor/ChildrensWrap/ChildrensWrap';
+
+const BACKGROUND: Record
+ {(title || description) && (
+
+ );
+};
+
+export default SectionContainer;
diff --git a/playground/src/blocks/SectionContainer/index.ts b/playground/src/blocks/SectionContainer/index.ts
new file mode 100644
index 0000000000..d0740c18fe
--- /dev/null
+++ b/playground/src/blocks/SectionContainer/index.ts
@@ -0,0 +1,45 @@
+import {BlockData} from '../../../../src/constructor-items';
+import {Fields} from '../../../../src/form-generator-v2/types';
+
+import SectionContainer from './SectionContainer';
+
+const SectionContainerConfig: BlockData = {
+ type: 'custom/container-section',
+ component: SectionContainer,
+ schema: {
+ name: 'Section',
+ group: 'custom/containers',
+ inputs: [
+ {
+ type: 'section',
+ title: 'Section',
+ opened: true,
+ fields: [
+ {type: 'textInput', name: 'title', title: 'Title'},
+ {type: 'textArea', name: 'description', title: 'Description'},
+ {
+ type: 'segmentedRadioGroup',
+ name: 'background',
+ title: 'Background',
+ options: [
+ {value: 'none', content: 'None'},
+ {value: 'subtle', content: 'Subtle'},
+ {value: 'brand', content: 'Brand'},
+ ],
+ defaultValue: 'none',
+ },
+ {type: 'switch', name: 'withDivider', title: 'Show divider'},
+ ],
+ },
+ ] as Fields,
+ default: {
+ title: 'Section Title',
+ description: 'Optional section description.',
+ background: 'none',
+ withDivider: false,
+ children: [],
+ },
+ },
+};
+
+export default SectionContainerConfig;
diff --git a/playground/src/blocks/TabsAtomBlock/TabsAtomBlock.tsx b/playground/src/blocks/TabsAtomBlock/TabsAtomBlock.tsx
new file mode 100644
index 0000000000..7e692a2bfe
--- /dev/null
+++ b/playground/src/blocks/TabsAtomBlock/TabsAtomBlock.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+import {Tab, TabList, TabPanel, TabProvider} from '@gravity-ui/uikit';
+
+export interface TabsAtomItem {
+ title: string;
+ content: string;
+}
+
+export interface TabsAtomBlockProps {
+ items?: TabsAtomItem[];
+ size?: 'm' | 'l' | 'xl';
+}
+
+const TabsAtomBlock: React.FC
+ {title && (
+
+ )}
+ + {title} +
+ )} + {description && ( ++ {description} +
+ )} + {withDivider &&
+
+ {React.Children.map(children, (child, index) => (
+ {child}
+ ))}
+
+
+
+
+
+ {items.map((item) => (
+
+ {item.title}
+
+ ))}
+
+ {items.map((item) => (
+
+
+ ))}
+
+
+ );
+};
+
+export default TabsAtomBlock;
diff --git a/playground/src/blocks/TabsAtomBlock/index.ts b/playground/src/blocks/TabsAtomBlock/index.ts
new file mode 100644
index 0000000000..a85a17cb21
--- /dev/null
+++ b/playground/src/blocks/TabsAtomBlock/index.ts
@@ -0,0 +1,55 @@
+import {BlockData} from '../../../../src/constructor-items';
+import {Fields} from '../../../../src/form-generator-v2/types';
+
+import TabsAtomBlock from './TabsAtomBlock';
+
+const TabsAtomBlockConfig: BlockData = {
+ type: 'custom/atom-tabs',
+ component: TabsAtomBlock,
+ schema: {
+ name: 'Tabs',
+ group: 'custom/atoms',
+ inputs: [
+ {
+ type: 'section',
+ title: 'Settings',
+ opened: true,
+ fields: [
+ {
+ type: 'segmentedRadioGroup',
+ name: 'size',
+ title: 'Size',
+ options: [
+ {value: 'm', content: 'M'},
+ {value: 'l', content: 'L'},
+ {value: 'xl', content: 'XL'},
+ ],
+ defaultValue: 'm',
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Tabs',
+ withAddButton: true,
+ index: 'index',
+ itemTitle: 'Tab {{index}}',
+ itemView: 'card',
+ fields: [
+ {type: 'textInput', name: 'items[{{index}}].title', title: 'Tab title'},
+ {type: 'textArea', name: 'items[{{index}}].content', title: 'Tab content'},
+ ],
+ },
+ ] as Fields,
+ default: {
+ size: 'm',
+ items: [
+ {title: 'Overview', content: 'This is the overview tab content.'},
+ {title: 'Details', content: 'Here you can find more detailed information.'},
+ {title: 'Settings', content: 'Configuration options go here.'},
+ ],
+ },
+ },
+};
+
+export default TabsAtomBlockConfig;
diff --git a/playground/src/blocks/TestEditorBlock/TestEditorBlock.tsx b/playground/src/blocks/TestEditorBlock/TestEditorBlock.tsx
new file mode 100644
index 0000000000..f91fa0421e
--- /dev/null
+++ b/playground/src/blocks/TestEditorBlock/TestEditorBlock.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface TestEditorBlockProps extends React.PropsWithChildren {}
+
+export const TestEditorBlock = (props: TestEditorBlockProps) => {
+ return
+ {item.content}
+
+ {JSON.stringify(props, null, 2)}
;
+};
+
+export default TestEditorBlock;
diff --git a/playground/src/blocks/TestEditorBlock/form.ts b/playground/src/blocks/TestEditorBlock/form.ts
new file mode 100644
index 0000000000..730db9d6b9
--- /dev/null
+++ b/playground/src/blocks/TestEditorBlock/form.ts
@@ -0,0 +1,114 @@
+import {
+ ArrayObjectInput,
+ ArrayTextInput,
+ BooleanInput,
+ NumberInput,
+ ObjectInput,
+ OneOfInput,
+ SelectMultipleInput,
+ SelectSingleInput,
+ TextAreaInput,
+ TextInput,
+} from '../../../../src/form-generator';
+
+const textInput: TextInput = {
+ type: 'text',
+ name: 'text',
+ title: 'Text Input',
+};
+
+const textAreaInput: TextAreaInput = {
+ type: 'textarea',
+ name: 'textarea',
+ title: 'TextArea Input',
+};
+
+const booleanInput: BooleanInput = {
+ type: 'boolean',
+ name: 'boolean',
+ title: 'Boolean Input',
+};
+
+const numberInput: NumberInput = {
+ type: 'number',
+ name: 'number',
+ title: 'Number Input',
+};
+
+const selectInput: SelectSingleInput = {
+ type: 'select',
+ name: 'selectSingle',
+ title: 'Select Single Input',
+ mode: 'single',
+ view: 'select',
+ enum: [
+ {value: 'id_1', content: 'Option 1'},
+ {value: 'id_2', content: 'Option 2'},
+ ],
+};
+
+const radioButtonsViewSingleInput: SelectSingleInput = {
+ ...selectInput,
+ name: 'radioButtons',
+ title: 'Radio Button Input',
+
+ view: 'radiobutton',
+};
+
+// @ts-ignore
+const selectMultipleModeInput: SelectMultipleInput = {
+ ...selectInput,
+ name: 'selectMultiple',
+ title: 'Select Multiple Input',
+
+ mode: 'multiple',
+};
+
+const objectInput: ObjectInput = {
+ type: 'object',
+ name: 'object',
+ title: 'Object Input',
+ properties: [textInput, textAreaInput, selectInput],
+};
+
+const arrayTextInput: ArrayTextInput = {
+ type: 'array',
+ name: 'arrayText',
+ title: 'Array Text Input',
+ buttonText: 'Add Array Item',
+ arrayType: 'text',
+};
+
+const arrayObjectInput: ArrayObjectInput = {
+ type: 'array',
+ name: 'arrayObject',
+ title: 'Array Object Input',
+ buttonText: 'Add Array Item',
+ arrayType: 'object',
+ properties: [textInput, textAreaInput, selectInput],
+};
+
+const oneOfInput: OneOfInput = {
+ type: 'oneOf',
+ name: 'oneOf',
+ key: 'oneOfKey',
+ title: 'Array Text Input',
+ options: [
+ {value: 'text', title: 'Text', properties: [textInput]},
+ {value: 'textarea', title: 'TextArea', properties: [textAreaInput]},
+ ],
+};
+
+export default [
+ textInput,
+ textAreaInput,
+ booleanInput,
+ numberInput,
+ selectInput,
+ radioButtonsViewSingleInput,
+ selectMultipleModeInput,
+ objectInput,
+ arrayTextInput,
+ arrayObjectInput,
+ oneOfInput,
+];
diff --git a/playground/src/blocks/TestEditorBlock/index.ts b/playground/src/blocks/TestEditorBlock/index.ts
new file mode 100644
index 0000000000..646cc2c1fd
--- /dev/null
+++ b/playground/src/blocks/TestEditorBlock/index.ts
@@ -0,0 +1,18 @@
+import TestEditorBlock from './TestEditorBlock';
+import testEditorBlockInputs from './form';
+
+const TestEditorBlockConfig = {
+ type: 'custom/test-editor-block',
+ component: TestEditorBlock,
+ schema: {
+ name: 'Test Editor Block',
+ group: 'custom',
+ inputs: testEditorBlockInputs,
+ },
+};
+
+export const TestEditorBlockSchema = {
+ ['test-editor-block']: {},
+};
+
+export default TestEditorBlockConfig;
diff --git a/playground/src/blocks/UserBlock/UserBlock.tsx b/playground/src/blocks/UserBlock/UserBlock.tsx
new file mode 100644
index 0000000000..3a5591a337
--- /dev/null
+++ b/playground/src/blocks/UserBlock/UserBlock.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import {User} from '@gravity-ui/uikit';
+
+export interface UserBlockProps {
+ name?: string;
+ description?: string;
+ imgUrl?: string;
+ size?: '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+}
+
+const UserBlock: React.FC
+
+ );
+};
+
+export default UserBlock;
diff --git a/playground/src/blocks/UserBlock/index.ts b/playground/src/blocks/UserBlock/index.ts
new file mode 100644
index 0000000000..77f76d09c9
--- /dev/null
+++ b/playground/src/blocks/UserBlock/index.ts
@@ -0,0 +1,47 @@
+import {BlockData} from '../../../../src/constructor-items';
+import {Fields} from '../../../../src/form-generator-v2/types';
+
+import UserBlock from './UserBlock';
+
+const UserBlockConfig: BlockData = {
+ type: 'custom/atom-user',
+ component: UserBlock,
+ schema: {
+ name: 'User',
+ group: 'custom/atoms',
+ inputs: [
+ {
+ type: 'section',
+ title: 'User',
+ opened: true,
+ fields: [
+ {type: 'textInput', name: 'name', title: 'Name'},
+ {type: 'textInput', name: 'description', title: 'Description'},
+ {type: 'textInput', name: 'imgUrl', title: 'Avatar image URL'},
+ {
+ type: 'segmentedRadioGroup',
+ name: 'size',
+ title: 'Size',
+ options: [
+ {value: '3xs', content: '3XS'},
+ {value: '2xs', content: '2XS'},
+ {value: 'xs', content: 'XS'},
+ {value: 's', content: 'S'},
+ {value: 'm', content: 'M'},
+ {value: 'l', content: 'L'},
+ {value: 'xl', content: 'XL'},
+ ],
+ defaultValue: 'm',
+ },
+ ],
+ },
+ ] as Fields,
+ default: {
+ name: 'Alice Johnson',
+ description: 'Frontend Developer',
+ size: 'm',
+ },
+ },
+};
+
+export default UserBlockConfig;
diff --git a/playground/src/custom-plugin/index.tsx b/playground/src/custom-plugin/index.tsx
new file mode 100644
index 0000000000..aef7257b7a
--- /dev/null
+++ b/playground/src/custom-plugin/index.tsx
@@ -0,0 +1,352 @@
+import * as React from 'react';
+
+import {
+ Bell,
+ Flag,
+ Gear,
+ Globe,
+ Heart,
+ House,
+ Layers,
+ Magnifier,
+ Person,
+ PlanetEarth,
+ Star,
+} from '@gravity-ui/icons';
+import {AsideHeader} from '@gravity-ui/navigation';
+import type {MenuItem, SubheaderMenuItem} from '@gravity-ui/navigation';
+import type {IconData} from '@gravity-ui/uikit';
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+import {useContent} from '../../../src';
+import type {PageConstructorWrapperProps} from '../../../src/common/types';
+import type {PageConstructorExtension} from '../../../src/containers/PageConstructor/PageConstructor';
+import {Fields} from '../../../src/form-generator-v2/types';
+import type {BlockWrapperDataProps} from '../../../src/models';
+import {PageContent} from '../../../src/models';
+
+const ICON_MAP: Record
+
+
+
+ {children}
}
+ />
+ {children}
;
+};
+
+export const experementalBlocksExtension = ({
+ wrapperProps = {},
+ globalDefaults = {},
+}: {
+ wrapperProps?: ExperementalBlocksWrapperProps;
+ globalDefaults?: ExperementalBlocksGlobalConfig;
+} = {}): PageConstructorExtension<
+ ExperementalBlocksGlobalConfig,
+ ExperementalBlocksWrapperProps
+> => {
+ return {
+ name: 'Experemental Blocks Extension',
+ id: '@Experemental-ui/page-constructor/Experemental-blocks-extension',
+ settings: {
+ ContentWrapper: ExperementalBlocksContentWrapper,
+ contentWrapperProps: wrapperProps,
+ blockWrapper: ExperementalBlockWrapper,
+ blockInputs: [
+ {
+ type: 'section',
+ title: 'Padding',
+ fields: [
+ {
+ type: 'segmentedRadioGroup',
+ name: '_paddingMode',
+ title: 'Mode',
+ options: [
+ {value: 'all', content: 'All'},
+ {value: 'axes', content: 'Axes'},
+ {value: 'individual', content: 'Individual'},
+ ],
+ },
+ {
+ type: 'select',
+ name: 'padding.all',
+ title: 'All sides',
+ hasClear: true,
+ options: ['0', 'xs', 's', 'm', 'l', 'xl'].map((v) => ({
+ value: v,
+ content: v.toUpperCase(),
+ })),
+ when: [{field: '_paddingMode', operator: '===', value: 'all'}],
+ },
+ {
+ type: 'select',
+ name: 'padding.vertical',
+ title: 'Vertical (top / bottom)',
+ hasClear: true,
+ options: ['0', 'xs', 's', 'm', 'l', 'xl'].map((v) => ({
+ value: v,
+ content: v.toUpperCase(),
+ })),
+ when: [{field: '_paddingMode', operator: '===', value: 'axes'}],
+ },
+ {
+ type: 'select',
+ name: 'padding.horizontal',
+ title: 'Horizontal (left / right)',
+ hasClear: true,
+ options: ['0', 'xs', 's', 'm', 'l', 'xl'].map((v) => ({
+ value: v,
+ content: v.toUpperCase(),
+ })),
+ when: [{field: '_paddingMode', operator: '===', value: 'axes'}],
+ },
+ {
+ type: 'select',
+ name: 'padding.top',
+ title: 'Top',
+ hasClear: true,
+ options: ['0', 'xs', 's', 'm', 'l', 'xl'].map((v) => ({
+ value: v,
+ content: v.toUpperCase(),
+ })),
+ when: [{field: '_paddingMode', operator: '===', value: 'individual'}],
+ },
+ {
+ type: 'select',
+ name: 'padding.right',
+ title: 'Right',
+ hasClear: true,
+ options: ['0', 'xs', 's', 'm', 'l', 'xl'].map((v) => ({
+ value: v,
+ content: v.toUpperCase(),
+ })),
+ when: [{field: '_paddingMode', operator: '===', value: 'individual'}],
+ },
+ {
+ type: 'select',
+ name: 'padding.bottom',
+ title: 'Bottom',
+ hasClear: true,
+ options: ['0', 'xs', 's', 'm', 'l', 'xl'].map((v) => ({
+ value: v,
+ content: v.toUpperCase(),
+ })),
+ when: [{field: '_paddingMode', operator: '===', value: 'individual'}],
+ },
+ {
+ type: 'select',
+ name: 'padding.left',
+ title: 'Left',
+ hasClear: true,
+ options: ['0', 'xs', 's', 'm', 'l', 'xl'].map((v) => ({
+ value: v,
+ content: v.toUpperCase(),
+ })),
+ when: [{field: '_paddingMode', operator: '===', value: 'individual'}],
+ },
+ ],
+ },
+ ] as Fields,
+ globalInputs: [
+ {
+ type: 'section',
+ title: 'Header Settings',
+ fields: [
+ {type: 'switch', name: 'headerDecoration', title: 'Header decoration'},
+ {type: 'switch', name: 'hideCollapseButton', title: 'Hide collapse button'},
+ {
+ type: 'textInput',
+ name: 'collapseTitle',
+ title: 'Collapse button tooltip',
+ },
+ {type: 'textInput', name: 'expandTitle', title: 'Expand button tooltip'},
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Menu Items',
+ withAddButton: true,
+ index: 'index',
+ itemTitle: 'Item {{index}}',
+ itemView: 'card',
+ fields: [
+ {type: 'textInput', name: 'menuItems[{{index}}].id', title: 'ID'},
+ {type: 'textInput', name: 'menuItems[{{index}}].title', title: 'Title'},
+ {type: 'textInput', name: 'menuItems[{{index}}].link', title: 'Link URL'},
+ {
+ type: 'select',
+ name: 'menuItems[{{index}}].type',
+ title: 'Type',
+ hasClear: true,
+ options: [
+ {value: 'regular', content: 'Regular'},
+ {value: 'action', content: 'Action'},
+ {value: 'divider', content: 'Divider'},
+ ],
+ },
+ {
+ type: 'select',
+ name: 'menuItems[{{index}}].icon',
+ title: 'Icon',
+ hasClear: true,
+ options: ICON_OPTIONS,
+ },
+ {type: 'switch', name: 'menuItems[{{index}}].pinned', title: 'Pinned'},
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Subheader Items',
+ withAddButton: true,
+ index: 'index2',
+ itemTitle: 'Subheader Item {{index2}}',
+ itemView: 'card',
+ fields: [
+ {type: 'textInput', name: 'subheaderItems[{{index2}}].id', title: 'ID'},
+ {
+ type: 'textInput',
+ name: 'subheaderItems[{{index2}}].title',
+ title: 'Title',
+ },
+ {
+ type: 'select',
+ name: 'subheaderItems[{{index2}}].icon',
+ title: 'Icon',
+ hasClear: true,
+ options: ICON_OPTIONS,
+ },
+ ],
+ },
+ ] as Fields,
+ globalDefaults,
+ },
+ };
+};
diff --git a/playground/src/main.tsx b/playground/src/main.tsx
new file mode 100644
index 0000000000..54fce1af87
--- /dev/null
+++ b/playground/src/main.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import ReactDOM from 'react-dom/client';
+import {BrowserRouter} from 'react-router';
+
+import Router from './router';
+
+import './styles/globals.scss';
+import '@gravity-ui/uikit/styles/fonts.css';
+import '@gravity-ui/uikit/styles/styles.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+
+
+
+
+
+
+ );
+};
+
+export default function EditorPage() {
+ const initialUrl = import.meta.env.BASE_URL + '?page=gravity-blocks&id=1';
+
+ return (
+
+
+
+
+ Мы в Яндексе верим, что вклад в опенсорс — это вклад в технологическую эволюцию: без открытости, совместной работы и поддержки развитие IT‑индустрии сильно затруднено. Уже много лет мы используем в своих продуктах сторонние открытые технологии, а также делимся собственными и активно вовлекаем в их развитие разработчиков по всему миру.
", + "width": "s", + "verticalOffset": "l", + "offset": "default", + "resetPaddings": true, + "background": { + "image": { + "mobile": "https://storage.yandexcloud.net/yandex-opensource/pages/index/yos-index-cover-m.png", + "desktop": "https://storage.yandexcloud.net/yandex-opensource/pages/index/yos-index-cover.png" + }, + "color": "#EFF2F8", + "fullWidth": false, + "fullWidthMedia": true + } + }, + { + "type": "extended-features-block", + "title": { + "text": "Почему мы выкладываем наши технологии в открытый доступ?" + }, + "items": [ + { + "title": "Ответственность", + "icon": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/os-index-icon-01.svg", + "text": "Мы верим, что вкладываться в развитие опенсорс‑технологий — это ответственность каждого технологического лидера на рынке. Без опенсорс‑решений не появились бы многие продукты и сервисы не только Яндекса, но и других крупных компаний, и мы хотим отдавать обратно, делиться теми нашими решениями, которые, как мы считаем, принесут реальную пользу.
" + }, + { + "title": "Польза для сообщества", + "icon": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/os-index-icon-02.svg", + "text": "Технологии, которые мы разрабатываем, ежедневно помогают нам эффективно решать огромное количество самых разных задач в наших сервисах. Мы знаем, что разработчики вне Яндекса часто сталкиваются с теми же самыми задачами — и верим, что наши технологии могут быть полезны и им.
" + }, + { + "title": "Качество сервисов", + "icon": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/os-index-icon-03.svg", + "text": "Для нас важно разрабатывать и использовать только качественные технологические решения. В особенности это касается опенсорса: зная, что наши решения увидят и будут использовать другие, мы уделяем их качеству особое внимание. А уже в открытом доступе у технологии больше шансов развиваться и улучшаться — в том числе, при участии сообщества разработчиков.
" + }, + { + "title": "Бизнес‑потенциал", + "icon": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/os-index-icon-04.svg", + "text": "Мы верим, что при условии роста популярности наших решений и спроса на них со стороны сообщества, то, что мы выкладываем в опенсорс, может далее стать для нас бизнесом. То, что мы выкладываем в опенсорс, можно использовать и во внешних коммерческих проектах.
" + }, + { + "title": "Поиск талантов", + "icon": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/os-index-icon-05.svg", + "text": "Мы ценим каждого, кто вкладывается в сторонние опенсорс‑решения или делится с миром своими. Контрибьюторы в наши продукты нам особенно важны: среди них мы ищем и находим тех, кто сможет развивать технологии уже будучи частью команды Яндекса.
" + } + ] + }, + { + "type": "custom-parent-block", + "title": "Custom Grid Block", + "description": "A configurable grid with 3, 4, or 5 cards per row. Change perRow to try different layouts.", + "perRow": 4, + "children": [ + { + "type": "custom-children-block", + "title": "Design Systems", + "description": "Building consistent UI components across all products." + }, + { + "type": "custom-children-block", + "title": "Open Source", + "description": "Contributing to and maintaining public repositories." + }, + { + "type": "custom-children-block", + "title": "Performance", + "description": "Optimizing load times and runtime efficiency." + }, + { + "type": "custom-children-block", + "title": "Accessibility", + "description": "Making products usable for everyone, including assistive tech users." + }, + { + "type": "custom-children-block", + "title": "Developer Tools", + "description": "CLIs, plugins, and extensions that improve dev workflows." + }, + { + "type": "custom-children-block", + "title": "Documentation", + "description": "Clear and up-to-date guides for every project." + }, + { + "type": "custom-children-block", + "title": "Testing", + "description": "Unit, integration, and end-to-end test coverage." + }, + { + "type": "custom-children-block", + "title": "Security", + "description": "Audits, dependency scanning, and secure coding practices." + } + ] + }, + { + "type": "card-layout-block", + "animated": false, + "title": "Краткая история опенсорса в Яндексе", + "description": "С начала истории развития опенсорса в Яндексе мы успели выложить в открытый доступ десятки собственных проектов, использовать в разработке наших продуктов внешние технологии, а также внесли существенный вклад в их развитие.
", + "colSizes": { + "all": 12, + "lg": 3, + "md": 4, + "sm": 6 + }, + "anchor": { + "url": "history", + "text": "history" + }, + "children": [ + { + "type": "layout-item", + "content": { + "title": "2010", + "text": "Методология веб‑разработки БЭМ (Блок‑Элемент‑Модификатор) выходит в оперсорс
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-01.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2012", + "text": "Запуск Яндекс Браузера на базе Blink (Chromium)
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-02.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2013", + "text": "Яндекс начинает контрибьютить в ядро Linux
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-03.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2016", + "text": "Выход в опенсорс ClickHouse
\\nВыход в опенсорс Hermione (с 2024 года — Testplane)
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-2016.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2017", + "text": "Выход в опенсорс CatBoost
\\nЯндекс начинает контрибьютить в PostgreSQL
Выход в опенсорс Одиссея
\\nЯндекс — топ‑контрибьютор в WAL‑G
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-06.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2019", + "text": "В Яндексе появляется команда разработки СУБД с открытым исходным кодом
\\nЯндекс — спонсор разработки PostgreSQL
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-07.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2020", + "text": "Выход в опенсорс Testsuite
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-2020.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2022", + "text": "Яндекс — один из основных спонсоров разработки PostgreSQL
\\nВыход в опенсорс YDB, userver, YaLM 100B, DivKit, Yatagan
\\nСтарт программы «Код для всех»
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-09.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2023", + "text": "Выход в опенсорс YTsaurus, Gravity UI, AppMetrica, Diplodoc, DataLens и счётчика Метрики
\\nСтарт Программы грантов Yandex Open Source
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-2023.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2024", + "text": "Первый Yandex Open Source Jam
\\nВыход в опенсорс YaFSDP
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-2024.png" + } + } + ] + }, + { + "type": "card-layout-block", + "title": "Наши проекты", + "description": "В Яндексе мы разрабатываем и развиваем технологические решения самых разных сфер применения, размеров и сложности. Поэтому и в открытый доступ попадают самые разные проекты — главное, чтобы они приносили пользу не только нам, но и другим.
", + "colSizes": { + "all": 12, + "lg": 3, + "md": 4, + "sm": 6 + }, + "anchor": { + "url": "projects", + "text": "projects" + }, + "children": [ + { + "type": "background-card", + "title": "YDB", + "text": "Отказоустойчивая распределённая SQL база данных
", + "backgroundColor": "#2399FF", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-ydb.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "dark" + }, + { + "type": "background-card", + "title": "YTsaurus", + "text": "Платформа для хранения и обработки больших данных
", + "backgroundColor": "#FFB23E", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-yt.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "light" + }, + { + "type": "background-card", + "title": "GravityUI", + "text": "Библиотеки для создания интерфейсов
", + "backgroundColor": "#262626", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-gui.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "dark" + }, + { + "type": "background-card", + "title": "DivKit", + "text": "Фреймворк для server‑driven интерфейсов
", + "backgroundColor": "#F1F1F1", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-dk.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "light" + }, + { + "type": "background-card", + "title": "Diplodoc", + "text": "Платформа для написания документации в концепции Docs as Code
", + "backgroundColor": "#79F985", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-dd.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "light" + }, + { + "type": "background-card", + "title": "userver", + "text": "Фреймворк для создания высоконагруженных приложений
", + "backgroundColor": "#FF9D73", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-u.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "light" + }, + { + "type": "background-card", + "title": "DataLens", + "text": "BI-платформа для анализа и визуализации данных
", + "backgroundColor": "#FF7132", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-dl.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "dark" + }, + { + "type": "basic-card", + "title": "И это ещё не всё", + "text": "Узнать про наши опенсорс‑проекты больше вы можете на другой странице
", + "border": "none", + "buttons": [ + { + "text": "Все проекты", + "primary": true, + "theme": "monochrome", + "size": "promo", + "url": "/projects" + } + ] + } + ] + }, + { + "largeMedia": true, + "mediaOnly": false, + "size": "l", + "type": "media-block", + "direction": "content-media", + "anchor": { + "url": "1", + "text": "Фильм" + }, + "title": "Смотрите фильм с YaC 22
", + "description": "Руководители опенсорс‑проектов рассказывают про историю и культуру открытого кода в Яндексе.
", + "media": { + "youtube": "https://www.youtube.com/watch?v=G7G286S8ntc", + "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/video-cover.png" + }, + "disableShadow": true + }, + { + "type": "content-layout-block", + "size": "l", + "centered": true, + "textContent": { + "title": "", + "text": "", + "additionalInfo": "", + "buttons": [ + { + "text": "Сделано на GravityUI", + "theme": "monochrome", + "img": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/open-source-gravity-ui-button.svg", + "url": "https://gravity-ui.com/" + } + ] + } + } + ] +} diff --git a/playground/src/pages/pc/example-2/content.json b/playground/src/pages/pc/example-2/content.json new file mode 100644 index 0000000000..568c1b8d2d --- /dev/null +++ b/playground/src/pages/pc/example-2/content.json @@ -0,0 +1,402 @@ +{ + "meta": { + "title": "YDB — распределённая SQL база данных с открытым исходным кодом", + "description": "YDB — это открытая распределённая SQL база данных, которая сочетает высокую доступность и масштабируемость со строгой согласованностью и ACID транзакциями.", + "sharing": { + "image": "https://storage.yandexcloud.net/ydb-site-assets/share-ydb-eng.png" + } + }, + "blocks": [ + { + "type": "header-block", + "title": "YDB", + "description": "YDB — это распределённая отказоустойчивая Distributed SQL база данных с открытым исходным кодом, которая сочетает в себе высокую доступность и масштабируемость со строгой согласованностью и транзакциями ACID. Она поддерживает одновременное выполнение транзакционных (OLTP), аналитических (OLAP) и потоковых нагрузок.", + "width": "s", + "verticalOffset": "m", + "imageSize": "m", + "background": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/cover.png", + "disableCompress": true, + "alt": "Фон YDB" + }, + "color": "#e2eaff", + "fullWidth": false + }, + "buttons": [ + { + "text": "Быстрый старт", + "theme": "accent", + "url": "/../docs/ru/quickstart" + }, + { + "text": "Документация", + "theme": "outlined", + "url": "/../docs/ru/" + } + ] + }, + { + "type": "card-layout-block", + "title": "Что я могу делать с YDB?", + "animated": false, + "colSizes": { + "all": 12, + "sm": 6, + "md": 4 + }, + "anchor": { + "url": "whatcanido", + "text": "Что я могу делать с YDB?" + }, + "description": "", + "children": [ + { + "type": "background-card", + "backgroundColor": "#CCE7FF", + "title": "Транзакционные нагрузки (OLTP)", + "text": "Вы можете использовать YDB для хранения состояния вашего приложения, независимо от объема данных или частоты их изменения. Обрабатывать петабайты при миллионах транзакций в секунду — не проблема.", + "controlPosition": "footer", + "buttons": [ + { + "text": "Узнать больше", + "theme": "outlined", + "url": "/docs/ru/concepts/" + } + ] + }, + { + "type": "background-card", + "backgroundColor": "rgba(107,132,153,.12)", + "title": "Аналитические нагрузки (OLAP)", + "text": "Вы можете создавать аналитические отчёты на основе хранимых в YDB данных с производительностью, сопоставимой со специализированными аналитическими СУБД. При этом никаких компромиссов по согласованности и доступности не потребуется.", + "controlPosition": "footer", + "buttons": [ + { + "text": "Узнать больше", + "theme": "outlined", + "url": "/docs/ru/concepts/datamodel/table#column-oriented-tables" + } + ] + }, + { + "type": "background-card", + "backgroundColor": "rgba(107,132,153,.12)", + "title": "Потоковые нагрузки", + "text": "Вы можете использовать функциональность YDB-топиков для надёжной отправки данных между вашими приложениями или отслеживания изменений в таблицах YDB. Можно выбрать как семантику доставки сообщений ровно один раз (exactly once), так и не менее одного раза (at least once).", + "controlPosition": "footer", + "buttons": [ + { + "text": "Узнать больше", + "theme": "outlined", + "url": "/docs/ru/concepts/topic" + } + ] + } + ] + }, + { + "type": "extended-features-block", + "title": "Почему YDB?", + "animated": false, + "colSizes": { + "all": 12, + "sm": 6, + "md": 4 + }, + "items": [ + { + "title": "Эластичность и масштабируемость", + "text": "Добавляйте или удаляйте узлы на лету, чтобы легко масштабировать кластер по мере необходимости. YDB имеет отдельные слои вычисления и хранения, что позволяет независимо добавлять дисковую ёмкость или вычислительные ресурсы в зависимости от того, чего не хватает при текущей нагрузке.", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/features-icons/icon_01.svg" + }, + { + "title": "Отказоустойчивость", + "text": "YDB спроектирована для работы в трёх зонах доступности и обеспечивает работоспособность даже в случае выхода из строя одной из них. Она автоматически восстанавливается после сбоя диска, сервера или датацентра с минимальной задержкой для приложений.", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/features-icons/icon_03.svg" + }, + { + "title": "Простота в использовании", + "text": "Работа с кластером YDB ощущается как работа с одноузловой СУБД с безграничными ресурсами благодаря строгой согласованности, ACID-транзакциям, высокопроизводительным запросам, возможности загрузки больших объёмов данных, а также поддержке знакомого диалекта SQL и JSON API.", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/features-icons/icon_02.svg" + }, + { + "title": "Универсальность", + "text": "Благодаря поддержке различных видов нагрузок в одной системе YDB может заменить несколько систем хранения и обработки данных или всю корпоративную экосистему данных в компании.", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/features-icons/icon_06.svg" + }, + { + "title": "Открытый исходный код", + "text": "[Исходный код YDB](https://github.com/ydb-platform/ydb) опубликован под лицензией Apache 2.0, накладывающей минимум ограничений на использование. Таким образом, нет рисков, связанных с привязкой к конкретному поставщику или провайдеру облачных услуг.", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/features-icons/icon_05.svg" + }, + { + "title": "Совместимость с любым окружением", + "text": "YDB можно развернуть в [Kubernetes](https://github.com/ydb-platform/ydb-kubernetes-operator), в любом облачном окружении или в корпоративных ЦОД. Либо можно использовать YDB как [управляемый сервис в Yandex Cloud](https://cloud.yandex.ru/services/ydb). Также возможны локальные эксперименты на любом компьютере.", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/features-icons/icon_04.svg" + } + ] + }, + { + "type": "banner-block", + "animated": false, + "title": "Оценка производительности PostgreSQL vs Distributed DBMS", + "subtitle": "TPC-C является наиболее известным набором тестов производительности для OLTP. Мы подготовили исследование производительности, сравнивающее PostgreSQL, YDB и CockroachDB в отказоустойчивых конфигурациях.", + "image": "https://storage.yandexcloud.net/ydb-site-assets/banner-block-pg.png", + "color": "#CCE7FF", + "button": { + "text": "Читать дальше", + "theme": "raised", + "url": "https://habr.com/ru/companies/ydb/articles/801587/" + } + }, + { + "type": "card-layout-block", + "title": "Кто использует YDB?", + "animated": false, + "colSizes": { + "all": 12, + "sm": 6, + "md": 4 + }, + "anchor": { + "url": "whouses", + "text": "Кто использует YDB?" + }, + "description": "", + "children": [ + { + "type": "layout-item", + "media": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/clients/metrika.png", + "disableCompress": true + } + }, + "content": { + "title": "Метрика", + "text": "[Метрика](https://metrika.yandex.ru/) - одна из крупнейших в мире платформ мобильной и веб-аналитики. Она полагается на YDB для создания пользовательских сессий на лету.\n\nПереход на YDB позволил Метрике расширить объём хранимых данных и бесконечно наращивать обрабатываемую нагрузку. Теперь одна из баз данных Метрики в YDB содержит более 400 ТБ данных и выдерживает нагрузку более 1 000 000 RPS." + }, + "fullScreen": false, + "border": true + }, + { + "type": "layout-item", + "media": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/clients/yandex-cloud-new.png", + "disableCompress": true + } + }, + "content": { + "title": "Yandex Cloud", + "text": "YDB отвечает за слой хранения для сетевых дисков [Yandex Cloud](https://cloud.yandex.ru), используется в качестве СУБД для хранения данных и метаданных облачной инфраструктуры и сервисов платформы, а также в качестве базы данных для облачного Control Plane.\n\nИнфраструктурным и платформенным сервисам Yandex Cloud необходима высокая доступность и масштабируемость, поэтому платформа выбрала YDB в качестве ключевого компонента." + }, + "fullScreen": false, + "border": true + }, + { + "type": "layout-item", + "media": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/clients/praktikum.jpg", + "disableCompress": true + } + }, + "content": { + "title": "Практикум", + "text": "[Практикум](https://practicum.yandex.ru/) - это онлайн-ориентированная образовательная платформа. Она использует YDB в качестве гибкого хранилища состояний для своих микросервисов.\n\nНативная поддержка многоарендности в YDB позволяет им избежать создания и управления выделенными базами данных для каждого компонента сервиса." + }, + "fullScreen": false, + "border": true + }, + { + "type": "layout-item", + "media": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/clients/market.png", + "disableCompress": true + } + }, + "content": { + "title": "Яндекс Маркет", + "text": "[Яндекс Маркет](https://market.yandex.ru) - один из крупнейших сервисов электронной коммерции в СНГ. Многие ключевые функции сервиса, такие как корзина, скидки, и оформление заказа, используют YDB для хранения своего состояния.\n\nВыбор YDB в качестве базы данных позволил Яндекс Маркету выдержать стократное увеличение нагрузки на корзину при соблюдении строгих гарантий времени отклика." + }, + "fullScreen": false, + "border": true + }, + { + "type": "layout-item", + "media": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/clients/jaeger.png", + "disableCompress": true + } + }, + "content": { + "title": "Auto.ru", + "text": "[Auto.ru](https://auto.ru) снизила потребление CPU для трассировочной базы данных [Jaeger](https://www.jaegertracing.io/) в три раза после перехода на YDB, что позволило записывать 500 000 трассировок в секунду без семплирования.\n\nУспешная реализация YDB в качестве хранилища трассировок доказала применимость и ключевые свойства, такие как масштабируемость, отказоустойчивость и строгая согласованность. В результате Auto.ru выбрала YDB в качестве реляционной базы данных для некоторых своих микросервисов." + }, + "fullScreen": false, + "border": true + }, + { + "type": "layout-item", + "media": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/clients/alice-new-speakers.png", + "disableCompress": "true\"" + } + }, + "content": { + "title": "Алиса", + "text": "[Алиса](https://yandex.ru/alice) - это голосовой помощник и экосистема умного дома. После перехода на YDB команда Алисы решила проблемы синхронизации между дата‑центрами, простоев при переключении основных серверов, снизила нагрузку на команду DevOps, увеличила объём хранимых данных до сотен терабайт и нагрузку до сотен тысяч запросов в секунду.\n\nПереход на YDB позволил отказаться от ручного шардинга данных и добиться строгой согласованности в кросс-датацентровом кластере. Сейчас команда Алисы использует YDB как реляционную базу данных и как базу для хранения логов и трейсов." + }, + "fullScreen": false, + "border": true + } + ] + }, + { + "type": "slider-block", + "animated": false, + "anchor": { + "url": "scenarios", + "text": "scenarios" + }, + "title": { + "text": "В каких типовых сценариях стоит использовать YDB?", + "textSize": "m" + }, + "children": [ + { + "type": "basic-card", + "title": "Работа с внезапным ростом нагрузки", + "text": "Эластичность YDB позволяет быстро изменять количество ресурсов, выделенных базе данных, чтобы обеспечить необходимую пропускную способность в соответствии с нагрузкой. Вы можете легко увеличить или уменьшить количество вычислительных ресурсов в зависимости от предстоящих нагрузок, например, на «Чёрную пятницу» или для маркетинговых кампаний." + }, + { + "type": "basic-card", + "title": "Хранение Observability данных", + "text": "[Колоночные таблицы YDB](/docs/ru/concepts/column-table) отлично подходят для хранения логов и метрик с простым доступом к ним через SQL интерфейс. Также, низкое потребление вычислительных ресурсов и масштабируемость YDB делают запись [Jaeger трейсов](https://www.jaegertracing.io/) выгодной по себестоимости и лёгкой в использовании." + }, + { + "type": "basic-card", + "title": "Документоориентированная СУБД", + "text": "Не смотря на строгую систему типов данных YDB, поддержка [типа данных JSON и связанных с ним функций](/docs/ru/yql/reference/builtins/json), расширяет возможности YDB в роли системы хранения неструктурированных документов." + }, + { + "type": "basic-card", + "title": "Кеш с SQL-интерфейсом", + "text": "Быстрый отклик и масштабируемость пропускной способности позволяют использовать YDB одновременно в качестве онлайн-базы данных и предварительно посчитанного кеша. Возможности SQL значительно повышают удобство использования и позволяют проводить оперативную аналитику данных в кеше. Например, сайты туроператоров и агрегаторов путешествий могут использовать базу данных для кеширования результатов поиска авиабилетов или туров, а также для пересчёта цен и проверки сезонной доступности." + }, + { + "type": "basic-card", + "title": "Централизованная система учёта запасов", + "text": "YDB обеспечивает строгую целостность транзакций. Это позволяет предоставлять консистентные данные о запасах на всех складах и торговых объектах, и делает YDB подходящим решением для электронной коммерции, приложений складской или транспортной логистики." + }, + { + "type": "basic-card", + "title": "Система хранения данных для Internet of Things (IoT) экосистемы", + "text": "Поддержка автоматического шардирования YDB позволяет обрабатывать потоки данных от большого количества устройств — профиль нагрузки, который встречается в проектах интернета вещей." + } + ] + }, + { + "type": "media-block", + "animated": false, + "direction": "content-media", + "title": "Можете вкратце объяснить, что такое YDB, в видеоформате?", + "description": "Конечно, смотрите →", + "anchor": { + "url": "video", + "text": "Video" + }, + "largeMedia": true, + "media": { + "youtube": "https://youtu.be/QVmhR__wAJg" + } + }, + { + "type": "banner-block", + "animated": false, + "title": "Учебный курс по YDB от участника сообщества пользователей", + "subtitle": "_Сторонняя разработка - Contribution_\n\nНачальный [учебный курс по YDB](https://stepik.org/course/186264/promo), разработанный одним из наших пользователей - Владом Бурмистровым, позволяет ознакомиться с ключевыми свойствами, возможностями и архитектурой YDB, а также научиться основным приемам по работе с YDB.", + "color": "#CCE7FF", + "image": "https://storage.yandexcloud.net/ydb-site-assets/careers/img_4.png", + "button": { + "text": "Описание и программа курса", + "theme": "raised", + "url": "https://stepik.org/course/186264/promo" + } + }, + { + "type": "tabs-block", + "title": { + "text": "Как начать?" + }, + "anchor": { + "url": "howtostart", + "text": "Как начать?" + }, + "items": [ + { + "tabName": "Docker", + "title": "Docker", + "text": " Создайте рабочий каталог и запустите локальный контейнер YDB из этого каталога:\n```bash mkdir ydb-local && cd ydb-local \ndocker run -d --rm --name ydb-local -h localhost \\\n--platform linux/amd64 \\\n-p 2135:2135 -p 2136:2136 -p 8765:8765 \\\n-v $(pwd)/ydb_certs:/ydb_certs -v $(pwd)/ydb_data:/ydb_data \\\n-e GRPC_TLS_PORT=2135 -e GRPC_PORT=2136 -e MON_PORT=8765 \\\nydbplatform/local-ydb:latest\n```\nПерейдите в раздел [«Быстрый старт»](/docs/ru/quickstart) в документации YDB, чтобы получить дополнительную информацию. " + }, + { + "tabName": "Minikube", + "title": "Minikube", + "text": " Установите Kubernetes CLI [kubectl](https://kubernetes.io/docs/tasks/tools/install-kubectl) и менеджер пакетов [Helm 3](https://helm.sh/docs/intro/install/).\nУстановите и запустите [Minikube](https://kubernetes.io/ru/docs/tasks/tools/install-minikube/).\nСклонируйте репозиторий с [YDB Kubernetes Operator](https://github.com/ydb-platform/ydb-kubernetes-operator).\n```\ngit clone https://github.com/ydb-platform/ydb-kubernetes-operator && cd ydb-kubernetes-operator\n```\nУстановите контроллер YDB на кластер.\n```\nhelm upgrade --install ydb-operator deploy/ydb-operator --set metrics.enabled=false\n```\nПримените манифест для создания кластера YDB.\n```\nkubectl apply -f samples/minikube/storage.yaml\n```\nДождитесь, пока `kubectl get storages.ydb.tech` не станет `Ready`.\nПримените манифест для создания базы данных.\n```\nkubectl apply -f samples/minikube/database.yaml\n```\nДождитесь, пока `kubectl get databases.ydb.tech` не станет `Ready`.\n\nПосле обработки манифеста будет создан объект StatefulSet, описывающий набор динамических узлов. Созданная база данных будет доступна изнутри кластера Kubernetes по DNS имени `database-minikube-sample` на порту 2135.\n\nПерейдите в раздел [«Быстрый старт»](/docs/ru/quickstart) в документации YDB, чтобы получить дополнительную информацию. " + }, + { + "tabName": "Установка вручную", + "title": "Установка вручную (только для Linux x86_64)", + "text": " Создайте рабочий каталог, запустите скрипт установки из него, а затем запустите одноузловую базу данных YDB с включенным режимом работы в оперативной памяти:\n``` mkdir ydb-local && cd ydb-local\ncurl https://install.ydb.tech | bash\n./start.sh ram\n```\nПерейдите в раздел [«Быстрый старт»](/docs/ru/quickstart) в документации YDB, чтобы получить дополнительную информацию. " + } + ] + }, + { + "type": "icons-block", + "size": "s", + "title": "Как оставаться на связи?", + "items": [ + { + "url": "https://github.com/ydb-platform/ydb", + "text": "GitHub", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/git.svg" + }, + { + "url": "https://t.me/ydb_ru", + "text": "Telegram", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/telegram.svg" + }, + { + "url": "https://habr.com/ru/companies/ydb/articles/", + "text": "Habr", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/habr.svg" + }, + { + "url": "https://blog.ydb.tech", + "text": "Medium", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/medium.svg" + }, + { + "url": "https://twitter.com/YDBPlatform", + "text": "Twitter", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/twitter.svg" + }, + { + "url": "https://www.linkedin.com/company/ydb-platform/", + "text": "LinkedIn", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/linkedin.svg" + }, + { + "url": "https://www.youtube.com/c/YDBPlatform", + "text": "YouTube", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/youtube.svg" + } + ] + } + ] +} diff --git a/playground/src/pages/pc/example-2/navigation.json b/playground/src/pages/pc/example-2/navigation.json new file mode 100644 index 0000000000..8df0e9cccd --- /dev/null +++ b/playground/src/pages/pc/example-2/navigation.json @@ -0,0 +1,48 @@ +{ + "logo": { + "text": "", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/ydb_icon.svg" + }, + "header": { + "leftItems": [ + { + "type": "link", + "text": "Документация", + "url": "/../docs/ru", + "target": "_self" + }, + { + "type": "link", + "text": "Команда", + "url": "/careers/" + }, + { + "type": "link", + "text": "Студентам", + "url": "/students/" + }, + { + "type": "link", + "text": "Поддержка", + "url": "/support/" + }, + { + "type": "link", + "text": "Блог", + "url": "/blog/" + } + ], + "rightItems": [ + { + "type": "github-button", + "text": "Star", + "label": "Star ydb-platform/ydb on GitHub", + "url": "https://github.com/ydb-platform/ydb" + } + ] + }, + "meta": { + "title": "", + "description": "" + } +} diff --git a/playground/src/pages/pc/example-2/styles.scss b/playground/src/pages/pc/example-2/styles.scss new file mode 100644 index 0000000000..b44174a144 --- /dev/null +++ b/playground/src/pages/pc/example-2/styles.scss @@ -0,0 +1,118 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap'); + +.g-root_theme_light { + --g-border-radius-xs: 0px; + --g-border-radius-s: 0px; + --g-border-radius-m: 0px; + --g-border-radius-l: 0px; + --g-border-radius-xl: 0px; + + --g-font-family-sans: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; + --g-font-family-monospace: + 'Roboto Mono', 'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', 'Liberation Mono', + 'DejaVu Sans Mono', 'Courier New', 'Courier', monospace; + + --g-color-private-brand-50: rgba(203, 255, 92, 0.1); + --g-color-private-brand-100: rgba(203, 255, 92, 0.15); + --g-color-private-brand-150: rgba(203, 255, 92, 0.2); + --g-color-private-brand-200: rgba(203, 255, 92, 0.3); + --g-color-private-brand-250: rgba(203, 255, 92, 0.4); + --g-color-private-brand-300: rgba(203, 255, 92, 0.5); + --g-color-private-brand-350: rgba(203, 255, 92, 0.6); + --g-color-private-brand-400: rgba(203, 255, 92, 0.7); + --g-color-private-brand-450: rgba(203, 255, 92, 0.8); + --g-color-private-brand-500: rgba(203, 255, 92, 0.9); + --g-color-private-brand-550-solid: rgb(203, 255, 92); + --g-color-private-brand-1000-solid: rgb(59, 63, 43); + --g-color-private-brand-950-solid: rgb(68, 74, 46); + --g-color-private-brand-900-solid: rgb(85, 97, 51); + --g-color-private-brand-850-solid: rgb(102, 119, 57); + --g-color-private-brand-800-solid: rgb(119, 142, 63); + --g-color-private-brand-750-solid: rgb(135, 165, 69); + --g-color-private-brand-700-solid: rgb(152, 187, 75); + --g-color-private-brand-650-solid: rgb(169, 210, 80); + --g-color-private-brand-600-solid: rgb(186, 232, 86); + --g-color-private-brand-500-solid: rgb(208, 255, 108); + --g-color-private-brand-450-solid: rgb(213, 255, 125); + --g-color-private-brand-400-solid: rgb(219, 255, 141); + --g-color-private-brand-350-solid: rgb(224, 255, 157); + --g-color-private-brand-300-solid: rgb(229, 255, 174); + --g-color-private-brand-250-solid: rgb(234, 255, 190); + --g-color-private-brand-200-solid: rgb(239, 255, 206); + --g-color-private-brand-150-solid: rgb(245, 255, 222); + --g-color-private-brand-100-solid: rgb(247, 255, 231); + --g-color-private-brand-50-solid: rgb(250, 255, 239); + + --g-color-base-brand: rgb(203, 255, 92); + --g-color-base-background: rgb(255, 255, 255); + --g-color-base-brand-hover: var(--g-color-private-brand-600-solid); + --g-color-base-selection: var(--g-color-private-brand-200); + --g-color-base-selection-hover: var(--g-color-private-brand-300); + --g-color-line-brand: var(--g-color-private-brand-600-solid); + --g-color-text-brand: var(--g-color-private-brand-700-solid); + --g-color-text-brand-heavy: var(--g-color-private-brand-700-solid); + --g-color-text-brand-contrast: rgba(0, 0, 0, 0.85); + --g-color-text-link: var(--g-color-private-brand-600-solid); + --g-color-text-link-hover: var(--g-color-private-brand-800-solid); + --g-color-text-link-visited: var(--g-color-private-purple-550-solid); + --g-color-text-link-visited-hover: var(--g-color-private-purple-800-solid); +} + +.g-root_theme_dark { + --g-border-radius-xs: 0px; + --g-border-radius-s: 0px; + --g-border-radius-m: 0px; + --g-border-radius-l: 0px; + --g-border-radius-xl: 0px; + + --g-font-family-sans: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; + --g-font-family-monospace: + 'Roboto Mono', 'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', 'Liberation Mono', + 'DejaVu Sans Mono', 'Courier New', 'Courier', monospace; + + --g-color-private-brand-50: rgba(203, 255, 92, 0.1); + --g-color-private-brand-100: rgba(203, 255, 92, 0.15); + --g-color-private-brand-150: rgba(203, 255, 92, 0.2); + --g-color-private-brand-200: rgba(203, 255, 92, 0.3); + --g-color-private-brand-250: rgba(203, 255, 92, 0.4); + --g-color-private-brand-300: rgba(203, 255, 92, 0.5); + --g-color-private-brand-350: rgba(203, 255, 92, 0.6); + --g-color-private-brand-400: rgba(203, 255, 92, 0.7); + --g-color-private-brand-450: rgba(203, 255, 92, 0.8); + --g-color-private-brand-500: rgba(203, 255, 92, 0.9); + --g-color-private-brand-550-solid: rgb(203, 255, 92); + --g-color-private-brand-1000-solid: rgb(247, 255, 231); + --g-color-private-brand-950-solid: rgb(245, 255, 222); + --g-color-private-brand-900-solid: rgb(239, 255, 206); + --g-color-private-brand-850-solid: rgb(234, 255, 190); + --g-color-private-brand-800-solid: rgb(229, 255, 174); + --g-color-private-brand-750-solid: rgb(224, 255, 157); + --g-color-private-brand-700-solid: rgb(219, 255, 141); + --g-color-private-brand-650-solid: rgb(213, 255, 125); + --g-color-private-brand-600-solid: rgb(208, 255, 108); + --g-color-private-brand-500-solid: rgb(186, 232, 86); + --g-color-private-brand-450-solid: rgb(169, 210, 80); + --g-color-private-brand-400-solid: rgb(152, 187, 75); + --g-color-private-brand-350-solid: rgb(135, 165, 69); + --g-color-private-brand-300-solid: rgb(119, 142, 63); + --g-color-private-brand-250-solid: rgb(102, 119, 57); + --g-color-private-brand-200-solid: rgb(85, 97, 51); + --g-color-private-brand-150-solid: rgb(68, 74, 46); + --g-color-private-brand-100-solid: rgb(59, 63, 43); + --g-color-private-brand-50-solid: rgb(51, 52, 40); + + --g-color-base-brand: rgb(203, 255, 92); + --g-color-base-background: rgb(34, 29, 34); + --g-color-base-brand-hover: var(--g-color-private-brand-650-solid); + --g-color-base-selection: var(--g-color-private-brand-150); + --g-color-base-selection-hover: var(--g-color-private-brand-200); + --g-color-line-brand: var(--g-color-private-brand-600-solid); + --g-color-text-brand: var(--g-color-private-brand-600-solid); + --g-color-text-brand-heavy: var(--g-color-private-brand-700-solid); + --g-color-text-brand-contrast: rgba(0, 0, 0, 0.9); + --g-color-text-link: var(--g-color-private-brand-550-solid); + --g-color-text-link-hover: var(--g-color-private-brand-700-solid); + --g-color-text-link-visited: var(--g-color-private-purple-700-solid); + --g-color-text-link-visited-hover: var(--g-color-private-purple-850-solid); +} diff --git a/playground/src/pages/pc/pc.tsx b/playground/src/pages/pc/pc.tsx new file mode 100644 index 0000000000..eeae06384d --- /dev/null +++ b/playground/src/pages/pc/pc.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; + +import {NavigationData, PageConstructor, PageConstructorProvider} from '../../../../src'; +import {blocks} from '../../../../src/blocks'; +import {gravityBlocksExtension} from '../../../../src/gravity-blocks/extensions/GravityBlocksExtension'; + +import contentExample1 from './example-1/content.json'; +import contentExample2 from './example-2/content.json'; +import navigationExample2 from './example-2/navigation.json'; + +const customBlocks = [...blocks]; + +interface PCPageProps { + id?: string | null; +} + +export default function PCPage({id}: PCPageProps) { + const pageId = id || '1'; + + const page = React.useMemo(() => { + switch (Number(pageId)) { + case 2: + import('./example-2/styles.scss'); + return { + content: contentExample2, + navigation: navigationExample2 as NavigationData, + }; + default: + case 1: + return { + content: contentExample1, + navigation: undefined, + }; + } + }, [pageId]); + + return ( +
+
+
+
+
+
+`;
+}
+
+// Run
+const data = analyze();
+const html = generateHTML(data);
+fs.writeFileSync(path.join(PROJECT_ROOT, 'import-graph.html'), html);
+console.log('✅ Done! Open import-graph.html in your browser.');
diff --git a/scripts/analyze-imports.js b/scripts/analyze-imports.js
new file mode 100644
index 0000000000..a8c95c58a5
--- /dev/null
+++ b/scripts/analyze-imports.js
@@ -0,0 +1,935 @@
+#!/usr/bin/env node
+/**
+ * Анализатор import-зависимостей для page-constructor
+ * Сканирует TypeScript файлы и строит граф зависимостей
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const glob = require('glob');
+
+const PROJECT_ROOT = path.resolve(__dirname, '..');
+
+// Паттерны для поиска импортов
+const IMPORT_PATTERNS = [
+ /import\s+.*?\s+from\s+['"]([^'"]+)['"];?/g,
+ /import\s+['"]([^'"]+)['"];?/g,
+ /export\s+.*?\s+from\s+['"]([^'"]+)['"];?/g,
+];
+
+// Исключаемые пути
+const EXCLUDE_PATTERNS = [
+ 'node_modules',
+ 'build',
+ 'dist',
+ '.storybook',
+ '**/*.d.ts',
+ '**/*.test.ts',
+ '**/*.test.tsx',
+ '**/*.spec.ts',
+ '**/*.spec.tsx',
+ '**/__stories__/**',
+ '**/__tests__/**',
+ '**/demo/**',
+];
+
+function resolveImportPath(sourcePath, importPath) {
+ // Игнорируем все asset-файлы (стили, картинки, шрифты)
+ const assetExts = [
+ '.scss',
+ '.css',
+ '.sass',
+ '.less',
+ '.svg',
+ '.png',
+ '.jpg',
+ '.jpeg',
+ '.gif',
+ '.webp',
+ '.woff',
+ '.woff2',
+ '.ttf',
+ '.eot',
+ '.json',
+ ];
+ if (assetExts.some((ext) => importPath.endsWith(ext))) {
+ return null;
+ }
+
+ // Внешние зависимости (@gravity-ui, react, etc.)
+ if (!importPath.startsWith('.') && !importPath.startsWith('src/')) {
+ return {type: 'external', path: importPath};
+ }
+
+ // Относительные пути
+ const resolved = path.resolve(path.dirname(sourcePath), importPath);
+
+ // Проверяем существование файла с разными расширениями
+ const extensions = ['.ts', '.tsx', '.js', '.jsx'];
+ const indexExtensions = ['/index.ts', '/index.tsx', '/index.js'];
+
+ // Сначала проверяем как файл
+ for (const ext of extensions) {
+ const fullPath = resolved + ext;
+ if (fs.existsSync(fullPath)) {
+ return {type: 'internal', path: path.relative(PROJECT_ROOT, fullPath)};
+ }
+ }
+
+ // Потом проверяем как папку с index
+ for (const ext of indexExtensions) {
+ const fullPath = resolved + ext;
+ if (fs.existsSync(fullPath)) {
+ return {type: 'internal', path: path.relative(PROJECT_ROOT, fullPath)};
+ }
+ }
+
+ // Если ничего не найдено - возвращаем null, не создаем ноду
+ return null;
+}
+
+function parseImports(filePath) {
+ const content = fs.readFileSync(filePath, 'utf-8');
+ const imports = new Set();
+
+ for (const pattern of IMPORT_PATTERNS) {
+ let match;
+ while ((match = pattern.exec(content)) !== null) {
+ const importPath = match[1];
+ const resolved = resolveImportPath(filePath, importPath);
+ if (resolved) {
+ imports.add(JSON.stringify(resolved));
+ }
+ }
+ }
+
+ return Array.from(imports).map((i) => JSON.parse(i));
+}
+
+function analyzeProject() {
+ const files = glob.sync('src/**/*.{ts,tsx}', {
+ cwd: PROJECT_ROOT,
+ absolute: true,
+ ignore: EXCLUDE_PATTERNS,
+ });
+
+ const nodes = new Map();
+ const edges = [];
+ const externalDeps = new Set();
+
+ files.forEach((file) => {
+ const relativePath = path.relative(PROJECT_ROOT, file);
+ const imports = parseImports(file);
+
+ // Создаем узел
+ const dir = path.dirname(relativePath);
+ const category = dir.split('/')[1] || 'other'; // src/{category}/...
+
+ nodes.set(relativePath, {
+ id: relativePath,
+ path: relativePath,
+ category,
+ name: path.basename(relativePath, path.extname(relativePath)),
+ imports: [],
+ });
+
+ imports.forEach((imp) => {
+ if (imp.type === 'external') {
+ externalDeps.add(imp.path);
+ } else {
+ // Проверяем, что target файл существует (исключаем SCSS и несуществующие файлы)
+ const targetPath = path.join(PROJECT_ROOT, imp.path);
+ const targetExists =
+ fs.existsSync(targetPath) ||
+ fs.existsSync(targetPath + '.ts') ||
+ fs.existsSync(targetPath + '.tsx');
+
+ if (targetExists) {
+ edges.push({
+ source: relativePath,
+ target: imp.path,
+ });
+ nodes.get(relativePath).imports.push(imp.path);
+ }
+ }
+ });
+ });
+
+ // Находим циклические зависимости
+ const cycles = findCycles(nodes, edges);
+
+ return {
+ nodes: Array.from(nodes.values()),
+ edges,
+ externalDeps: Array.from(externalDeps),
+ cycles,
+ stats: {
+ totalFiles: nodes.size,
+ totalImports: edges.length,
+ externalDeps: externalDeps.size,
+ cycles: cycles.length,
+ },
+ };
+}
+
+function findCycles(nodes, edges) {
+ const cycles = [];
+ const visited = new Set();
+ const recursionStack = new Set();
+
+ const adj = new Map();
+ edges.forEach((e) => {
+ if (!adj.has(e.source)) adj.set(e.source, []);
+ adj.get(e.source).push(e.target);
+ });
+
+ function dfs(node, path) {
+ if (recursionStack.has(node)) {
+ const cycleStart = path.indexOf(node);
+ const cycle = path.slice(cycleStart);
+ cycles.push(cycle);
+ return;
+ }
+
+ if (visited.has(node)) return;
+
+ visited.add(node);
+ recursionStack.add(node);
+ path.push(node);
+
+ const neighbors = adj.get(node) || [];
+ for (const neighbor of neighbors) {
+ if (nodes.has(neighbor)) {
+ dfs(neighbor, [...path]);
+ }
+ }
+
+ recursionStack.delete(node);
+ }
+
+ for (const [nodeId] of nodes) {
+ if (!visited.has(nodeId)) {
+ dfs(nodeId, []);
+ }
+ }
+
+ return cycles;
+}
+
+function generateHTML(data) {
+ const categories = [...new Set(data.nodes.map((n) => n.category))];
+ const categoryColors = {
+ blocks: '#FF6B6B',
+ subBlocks: '#4ECDC4',
+ components: '#45B7D1',
+ editor: '#96CEB4',
+ 'editor-v2': '#96CEB4',
+ containers: '#FFEAA7',
+ models: '#DDA0DD',
+ hooks: '#98D8C8',
+ common: '#F7DC6F',
+ navigation: '#BB8FCE',
+ form: '#85C1E9',
+ schema: '#F8C471',
+ other: '#AAB7B8',
+ };
+
+ const nodesJson = JSON.stringify(data.nodes);
+ const edgesJson = JSON.stringify(data.edges);
+ const cyclesJson = JSON.stringify(data.cycles);
+ const categoriesJson = JSON.stringify(categories);
+ const colorsJson = JSON.stringify(categoryColors);
+ const statsJson = JSON.stringify(data.stats);
+
+ return `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+}
+
+// Main execution
+if (require.main === module) {
+ console.log('🔍 Analyzing project imports...');
+
+ const data = analyzeProject();
+
+ console.log(`
+📊 Statistics:
+ Files: ${data.stats.totalFiles}
+ Internal imports: ${data.stats.totalImports}
+ External deps: ${data.stats.externalDeps}
+ Circular deps: ${data.stats.cycles}
+ Categories: ${new Set(data.nodes.map((n) => n.category)).size}
+`);
+
+ if (data.cycles.length > 0) {
+ console.log('⚠️ Found circular dependencies:');
+ data.cycles.forEach((cycle, i) => {
+ console.log(` ${i + 1}. ${cycle.join(' → ')}`);
+ });
+ }
+
+ const outputPath = path.join(PROJECT_ROOT, 'import-graph.html');
+ const html = generateHTML(data);
+ fs.writeFileSync(outputPath, html);
+
+ console.log(`
+✅ Graph saved to: ${outputPath}
+🌐 Open this file in your browser to explore the dependencies
+`);
+}
+
+module.exports = {analyzeProject, generateHTML};
diff --git a/src/blocks/Banner/Banner.tsx b/src/blocks/Banner/Banner.tsx
index 89a7906fc7..efda5ab797 100644
--- a/src/blocks/Banner/Banner.tsx
+++ b/src/blocks/Banner/Banner.tsx
@@ -1,4 +1,5 @@
import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
+import {Grid, Row} from '../../gravity-blocks/grid';
import {BannerBlockProps} from '../../models';
import {BannerCard} from '../../sub-blocks';
import {block} from '../../utils';
@@ -12,7 +13,11 @@ export const BannerBlock = (props: BannerBlockProps) => {
return (
+
+
+
+
+
+ Connection Types
+
+
+ Normal import
+
+
+
+ Circular / Selected
+
+
+
+
+
+
-
- {React.Children.map(children, (child, index) => (
-
-
+
+
+
+ {React.Children.map(children, (child, index) => (
+
+ {child}
+
+
+ ))}
+
+
+
+
-
-
);
};
diff --git a/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx b/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx
index 8fe143e66d..64ce80b63f 100644
--- a/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx
+++ b/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx
@@ -3,12 +3,16 @@ import {Meta, StoryFn} from '@storybook/react';
import {blockTransform} from '../../../../.storybook/utils';
import {ExtendedFeaturesBlockModel, ExtendedFeaturesProps} from '../../../models';
import ExtendedFeatures, {ExtendedFeaturesBlock} from '../ExtendedFeatures';
+import {form} from '../form';
import data from './data.json';
export default {
component: ExtendedFeatures,
title: 'Blocks/ExtendedFeatures',
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const DefaultTemplate: StoryFn = (args) => {
diff --git a/src/blocks/ExtendedFeatures/form.ts b/src/blocks/ExtendedFeatures/form.ts
new file mode 100644
index 0000000000..da0d7ecd13
--- /dev/null
+++ b/src/blocks/ExtendedFeatures/form.ts
@@ -0,0 +1,73 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFormFieldsFromAjvSchema} from '../../form-generator-v2/utils/generateFormFieldsFromAjv';
+
+import {ExtendedFeaturesBlock as ExtendedFeaturesBlockSchema} from './schema';
+
+export const form = generateFormFieldsFromAjvSchema(
+ ExtendedFeaturesBlockSchema['extended-features-block'] as unknown as JSONSchemaType<{}>,
+);
+
+export const defaultValue = {
+ type: 'extended-features-block',
+ title: {
+ text: 'Lorem ipsum dolor sit amet',
+ textSize: 'm',
+ },
+ description:
+ 'Three cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone.',
+ items: [
+ {
+ title: 'Sed do eiusmod tempor incididunt',
+ text: 'Ut enim ad minim veniam quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ additionalInfo:
+ 'Duis aute irure dolor in reprehenderit n voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+ },
+ {
+ title: 'Sed do eiusmod tempor',
+ text: 'Ut enim ad minim veniam quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ buttons: [
+ {
+ text: 'Button',
+ theme: 'action',
+ url: 'https://example.com',
+ },
+ {
+ text: 'Button',
+ theme: 'outlined',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ {
+ title: 'Sed do eiusmod tempor incididunt',
+ text: 'Ut enim ad minim veniam quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ links: [
+ {
+ text: 'Go',
+ url: '#',
+ arrow: true,
+ theme: 'normal',
+ },
+ ],
+ },
+ {
+ title: 'Sed do eiusmod tempor incididunt',
+ text: 'Ut enim ad minim veniam quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ list: [
+ {
+ title: 'Lorem ipsum',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ title: 'Lorem ipsum ipsum',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ title: 'Lorem ipsum',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ ],
+ },
+ ],
+};
diff --git a/src/blocks/ExtendedFeatures/icon.ts b/src/blocks/ExtendedFeatures/icon.ts
new file mode 100644
index 0000000000..3a401fff33
--- /dev/null
+++ b/src/blocks/ExtendedFeatures/icon.ts
@@ -0,0 +1,20 @@
+import {svgToDataUri} from '../../utils/svg';
+
+export default svgToDataUri(
+ ``,
+);
diff --git a/src/blocks/ExtendedFeatures/index.ts b/src/blocks/ExtendedFeatures/index.ts
new file mode 100644
index 0000000000..e11e5b1294
--- /dev/null
+++ b/src/blocks/ExtendedFeatures/index.ts
@@ -0,0 +1,19 @@
+import {BlockData} from '../../constructor-items';
+
+import ExtendedFeaturesBlock from './ExtendedFeatures';
+import {defaultValue, form} from './form';
+import icon from './icon';
+
+const ExtendedFeaturesBlockConfig: BlockData = {
+ type: '@gravity-ui/page-constructor/extended-features-block',
+ component: ExtendedFeaturesBlock,
+ schema: {
+ name: 'Extended Features Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: form,
+ default: defaultValue,
+ previewImg: icon,
+ },
+};
+
+export default ExtendedFeaturesBlockConfig;
diff --git a/src/blocks/ExtendedFeatures/index_deprecated.ts b/src/blocks/ExtendedFeatures/index_deprecated.ts
new file mode 100644
index 0000000000..b6df6f4ef6
--- /dev/null
+++ b/src/blocks/ExtendedFeatures/index_deprecated.ts
@@ -0,0 +1,18 @@
+import ExtendedFeaturesBlock from './ExtendedFeatures';
+import {defaultValue, form} from './form';
+import icon from './icon';
+
+const ExtendedFeaturesBlockConfig = {
+ type: 'extended-features-block',
+ component: ExtendedFeaturesBlock,
+ schema: {
+ name: 'Extended Features Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ previewImg: icon,
+ },
+};
+
+export default ExtendedFeaturesBlockConfig;
diff --git a/src/blocks/ExtendedFeatures/schema.ts b/src/blocks/ExtendedFeatures/schema.ts
index a7705dfc17..3ca42cee58 100644
--- a/src/blocks/ExtendedFeatures/schema.ts
+++ b/src/blocks/ExtendedFeatures/schema.ts
@@ -5,9 +5,9 @@ import {
LinkProps,
containerSizesObject,
withTheme,
-} from '../../schema/validators/common';
-import {ImageProps} from '../../schema/validators/components';
-import {filteredArray} from '../../schema/validators/utils';
+} from '../../gravity-blocks/schema/validators/common';
+import {ImageProps} from '../../gravity-blocks/schema/validators/components';
+import {filteredArray} from '../../gravity-blocks/schema/validators/utils';
export const ExtendedFeaturesItem = {
additionalProperties: false,
@@ -20,6 +20,7 @@ export const ExtendedFeaturesItem = {
text: {
type: 'string',
contentType: 'yfm',
+ inputType: 'textarea',
},
label: {
type: 'string',
diff --git a/src/blocks/FilterBlock/FilterBlock.tsx b/src/blocks/FilterBlock/FilterBlock.tsx
index 8eb4a81ed4..8d2f1c587d 100644
--- a/src/blocks/FilterBlock/FilterBlock.tsx
+++ b/src/blocks/FilterBlock/FilterBlock.tsx
@@ -1,13 +1,13 @@
import * as React from 'react';
-import {CardLayoutBlock} from '..';
import {AnimateBlock, Title} from '../../components';
import ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';
import {ConstructorItem} from '../../containers/PageConstructor/components/ConstructorItem';
-import {Col, Row} from '../../grid';
-import {useAnalytics} from '../../hooks';
+import {Col, Grid, Row} from '../../gravity-blocks/grid';
+import {useAnalytics} from '../../gravity-blocks/hooks';
import {FilterBlockProps, FilterItem} from '../../models';
import {block, getBlockKey} from '../../utils';
+import {default as CardLayoutBlock} from '../CardLayout/CardLayout';
import {i18n} from './i18n';
@@ -21,7 +21,7 @@ const FilterBlock = ({
tags,
tagButtonSize,
allTag,
- items,
+ items = [],
colSizes,
centered,
animated,
@@ -90,35 +90,36 @@ const FilterBlock = ({
return (
- {title && (
-
-
+ {title && (
+
+
+ )}
+
+
+ {cards.map((card, index) => {
+ const key = getBlockKey(card, index);
+ return
- )}
-
-
- {cards.map((card, index) => {
- const key = getBlockKey(card, index);
-
- return
-
+
);
};
diff --git a/src/blocks/FilterBlock/__stories__/FilterBlock.stories.tsx b/src/blocks/FilterBlock/__stories__/FilterBlock.stories.tsx
index 262bc07ed9..716fa513be 100644
--- a/src/blocks/FilterBlock/__stories__/FilterBlock.stories.tsx
+++ b/src/blocks/FilterBlock/__stories__/FilterBlock.stories.tsx
@@ -4,6 +4,7 @@ import {blockTransform} from '../../../../.storybook/utils';
import {PageConstructor} from '../../../containers/PageConstructor';
import {FilterBlockModel} from '../../../models';
import FilterBlock from '../FilterBlock';
+import {form} from '../form';
import data from './data.json';
@@ -47,6 +48,9 @@ export default {
},
},
},
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const DefaultTemplate: StoryFn = (args) => (
diff --git a/src/blocks/FilterBlock/form.ts b/src/blocks/FilterBlock/form.ts
new file mode 100644
index 0000000000..8a6ad213e6
--- /dev/null
+++ b/src/blocks/FilterBlock/form.ts
@@ -0,0 +1,92 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFormFieldsFromAjvSchema} from '../../form-generator-v2/utils/generateFormFieldsFromAjv';
+
+import {FilterProps} from './schema';
+
+// TODO: change to custom block schema
+export const form = generateFormFieldsFromAjvSchema(FilterProps as unknown as JSONSchemaType<{}>);
+
+export const defaultValue = {
+ allTag: true,
+ description:
+ 'Three cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone.',
+ items: [
+ {
+ card: {
+ content: {
+ title: 'Layout Item 1',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ },
+ type: 'layout-item',
+ },
+ tags: ['one'],
+ },
+ {
+ card: {
+ content: {
+ title: 'Layout Item 2',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ },
+ type: 'layout-item',
+ },
+ tags: ['two'],
+ },
+ {
+ card: {
+ content: {
+ title: 'Layout Item 3',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ },
+ type: 'layout-item',
+ },
+ tags: ['three'],
+ },
+ {
+ card: {
+ content: {
+ title: 'Layout Item 4',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ },
+ type: 'layout-item',
+ },
+ tags: ['one'],
+ },
+ {
+ card: {
+ content: {
+ title: 'Layout Item 5',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ },
+ type: 'layout-item',
+ },
+ tags: ['two'],
+ },
+ {
+ card: {
+ content: {
+ title: 'Layout Item 6',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ },
+ type: 'layout-item',
+ },
+ tags: ['three'],
+ },
+ ],
+ tags: [
+ {
+ id: 'one',
+ label: 'First very long label',
+ },
+ {
+ id: 'two',
+ label: 'Second very long label',
+ },
+ {
+ id: 'three',
+ label: 'Third very long label',
+ },
+ ],
+ title: 'Card Layout',
+ type: 'filter-block',
+};
diff --git a/src/blocks/FilterBlock/index.ts b/src/blocks/FilterBlock/index.ts
new file mode 100644
index 0000000000..3add3dbe5e
--- /dev/null
+++ b/src/blocks/FilterBlock/index.ts
@@ -0,0 +1,15 @@
+import FilterBlock from './FilterBlock';
+import {defaultValue, form} from './form';
+
+const FilterBlockConfig = {
+ type: '@gravity-ui/page-constructor/filter-block',
+ component: FilterBlock,
+ schema: {
+ name: 'Filter Block',
+ group: '@gravity-ui/page-constructor/UnfinishedBlocks',
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default FilterBlockConfig;
diff --git a/src/blocks/FilterBlock/index_deprecated.ts b/src/blocks/FilterBlock/index_deprecated.ts
new file mode 100644
index 0000000000..6e0e6a0e64
--- /dev/null
+++ b/src/blocks/FilterBlock/index_deprecated.ts
@@ -0,0 +1,16 @@
+import FilterBlock from './FilterBlock';
+import {defaultValue, form} from './form';
+
+const FilterBlockConfig = {
+ type: 'filter-block',
+ component: FilterBlock,
+ schema: {
+ name: 'Filter Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default FilterBlockConfig;
diff --git a/src/blocks/FilterBlock/schema.ts b/src/blocks/FilterBlock/schema.ts
index eafe81483c..66db8f50c8 100644
--- a/src/blocks/FilterBlock/schema.ts
+++ b/src/blocks/FilterBlock/schema.ts
@@ -3,9 +3,9 @@ import {
BlockBaseProps,
BlockHeaderProps,
containerSizesObject,
-} from '../../schema/validators/common';
-import {AnalyticsEventSchema} from '../../schema/validators/event';
-import {filteredArray} from '../../schema/validators/utils';
+} from '../../gravity-blocks/schema/validators/common';
+import {AnalyticsEventSchema} from '../../gravity-blocks/schema/validators/event';
+import {filteredArray} from '../../gravity-blocks/schema/validators/utils';
export const FilterTagProps = {
type: 'object',
diff --git a/src/blocks/FoldableList/FoldableList.tsx b/src/blocks/FoldableList/FoldableList.tsx
index 86dfafd465..2ad23ea8db 100644
--- a/src/blocks/FoldableList/FoldableList.tsx
+++ b/src/blocks/FoldableList/FoldableList.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import {Col, Row} from '../../grid';
+import {Col, Row} from '../../gravity-blocks/grid';
import {FoldableListProps} from '../../models';
import {Content} from '../../sub-blocks';
import {block} from '../../utils';
diff --git a/src/blocks/FoldableList/__stories__/FoldableList.stories.tsx b/src/blocks/FoldableList/__stories__/FoldableList.stories.tsx
index 490f2461df..6af6146807 100644
--- a/src/blocks/FoldableList/__stories__/FoldableList.stories.tsx
+++ b/src/blocks/FoldableList/__stories__/FoldableList.stories.tsx
@@ -3,12 +3,16 @@ import {Meta, StoryFn} from '@storybook/react';
import {blockTransform} from '../../../../.storybook/utils';
import {FoldableListBlockModel, FoldableListProps} from '../../../models';
import FoldableListBlock from '../FoldableList';
+import {form} from '../form';
import data from './data.json';
export default {
title: 'Blocks/FoldableList',
component: FoldableListBlock,
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const DefaultTemplate: StoryFn = (args) => {
diff --git a/src/blocks/FoldableList/form.ts b/src/blocks/FoldableList/form.ts
new file mode 100644
index 0000000000..f6cfadc8ca
--- /dev/null
+++ b/src/blocks/FoldableList/form.ts
@@ -0,0 +1,23 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFormFieldsFromAjvSchema} from '../../form-generator-v2/utils/generateFormFieldsFromAjv';
+
+import {FoldableListBlock} from './schema';
+
+export const form = generateFormFieldsFromAjvSchema(
+ FoldableListBlock['foldable-list-block'] as unknown as JSONSchemaType<{}>,
+);
+
+export const defaultValue = {
+ title: 'Lorem ipsum dolor sit amet',
+ items: [
+ {
+ title: 'Item 1',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris.',
+ },
+ {
+ title: 'Item 2',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris.',
+ },
+ ],
+};
diff --git a/src/blocks/FoldableList/index.ts b/src/blocks/FoldableList/index.ts
new file mode 100644
index 0000000000..3593d2cebb
--- /dev/null
+++ b/src/blocks/FoldableList/index.ts
@@ -0,0 +1,17 @@
+import {BlockData} from '../../constructor-items';
+
+import FoldableListBlock from './FoldableList';
+import {defaultValue, form} from './form';
+
+const FoldableListBlockConfig: BlockData = {
+ type: '@gravity-ui/page-constructor/foldable-list-block',
+ component: FoldableListBlock,
+ schema: {
+ name: 'Foldable List Block',
+ group: '@gravity-ui/page-constructor/UnfinishedBlocks',
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default FoldableListBlockConfig;
diff --git a/src/blocks/FoldableList/index_deprecated.ts b/src/blocks/FoldableList/index_deprecated.ts
new file mode 100644
index 0000000000..8f5ddc845c
--- /dev/null
+++ b/src/blocks/FoldableList/index_deprecated.ts
@@ -0,0 +1,18 @@
+import {BlockData} from '../../constructor-items';
+
+import FoldableListBlock from './FoldableList';
+import {defaultValue, form} from './form';
+
+const FoldableListBlockConfig: BlockData = {
+ type: 'foldable-list-block',
+ component: FoldableListBlock,
+ schema: {
+ name: 'Foldable List Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default FoldableListBlockConfig;
diff --git a/src/blocks/FoldableList/schema.ts b/src/blocks/FoldableList/schema.ts
index 57437e0516..3f6f47aae6 100644
--- a/src/blocks/FoldableList/schema.ts
+++ b/src/blocks/FoldableList/schema.ts
@@ -1,7 +1,7 @@
import omit from 'lodash/omit';
-import {BlockBaseProps, LinkProps} from '../../schema/validators/common';
-import {filteredArray} from '../../schema/validators/utils';
+import {BlockBaseProps, LinkProps} from '../../gravity-blocks/schema/validators/common';
+import {filteredArray} from '../../gravity-blocks/schema/validators/utils';
import {ContentBase} from '../../sub-blocks/Content/schema';
const FoldableListBlockContentProps = omit(ContentBase, ['size', 'theme']);
diff --git a/src/blocks/Form/Form.tsx b/src/blocks/Form/Form.tsx
index c5c20dae49..8bb3ac560a 100644
--- a/src/blocks/Form/Form.tsx
+++ b/src/blocks/Form/Form.tsx
@@ -2,10 +2,10 @@ import * as React from 'react';
import {BackgroundImage, Title} from '../../components';
import InnerForm from '../../components/InnerForm/InnerForm';
-import {MobileContext} from '../../context/mobileContext';
-import {useTheme} from '../../context/theme';
-import {Col, Grid, GridAlignItems, GridColumnSize, Row} from '../../grid';
-import {useDeviceValue} from '../../hooks/useDeviceValue';
+import {MobileContext} from '../../gravity-blocks/context/mobileContext';
+import {useTheme} from '../../gravity-blocks/context/theme';
+import {Col, Grid, GridAlignItems, GridColumnSize, Row} from '../../gravity-blocks/grid';
+import {useDeviceValue} from '../../gravity-blocks/hooks/useDeviceValue';
import type {FormBlockProps} from '../../models';
import {
FormBlockDataTypes,
diff --git a/src/blocks/Form/formConfig.ts b/src/blocks/Form/formConfig.ts
new file mode 100644
index 0000000000..7d9baf35df
--- /dev/null
+++ b/src/blocks/Form/formConfig.ts
@@ -0,0 +1,15 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFormFieldsFromAjvSchema} from '../../form-generator-v2/utils/generateFormFieldsFromAjv';
+
+import {FormBlock as FormBlockSchema} from './schema';
+
+// TODO: change to custom block schema
+export const form = generateFormFieldsFromAjvSchema(
+ FormBlockSchema['form-block'] as unknown as JSONSchemaType<{}>,
+);
+
+export const defaultValue = {
+ title: 'Form Block',
+ formData: {},
+};
diff --git a/src/blocks/Form/index.ts b/src/blocks/Form/index.ts
new file mode 100644
index 0000000000..5a8bda0bd8
--- /dev/null
+++ b/src/blocks/Form/index.ts
@@ -0,0 +1,15 @@
+import FormBlock from './Form';
+import {defaultValue, form} from './formConfig';
+
+const FormBlockConfig = {
+ type: '@gravity-ui/page-constructor/form-block',
+ component: FormBlock,
+ schema: {
+ name: 'Form Block',
+ group: '@gravity-ui/page-constructor/UnfinishedBlocks',
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default FormBlockConfig;
diff --git a/src/blocks/Form/index_deprecated.ts b/src/blocks/Form/index_deprecated.ts
new file mode 100644
index 0000000000..ca84172b8f
--- /dev/null
+++ b/src/blocks/Form/index_deprecated.ts
@@ -0,0 +1,16 @@
+import FormBlock from './Form';
+import {defaultValue, form} from './formConfig';
+
+const FormBlockConfig = {
+ type: 'form-block',
+ component: FormBlock,
+ schema: {
+ name: 'Form Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default FormBlockConfig;
diff --git a/src/blocks/Form/schema.ts b/src/blocks/Form/schema.ts
index c971e17d27..916a8d1e75 100644
--- a/src/blocks/Form/schema.ts
+++ b/src/blocks/Form/schema.ts
@@ -2,7 +2,7 @@ import omit from 'lodash/omit';
import {ImageProps} from '../../components/Image/schema';
import {YandexFormProps} from '../../components/YandexForm/schema';
-import {BlockBaseProps, withTheme} from '../../schema/validators/common';
+import {BlockBaseProps, withTheme} from '../../gravity-blocks/schema/validators/common';
import {ContentBase} from '../../sub-blocks/Content/schema';
import {HubspotFormProps} from '../../sub-blocks/HubspotForm/schema';
diff --git a/src/blocks/Header/Header.tsx b/src/blocks/Header/Header.tsx
index ccb9369c83..04aca193c0 100644
--- a/src/blocks/Header/Header.tsx
+++ b/src/blocks/Header/Header.tsx
@@ -8,9 +8,9 @@ import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcru
import {getMediaImage} from '../../components/Media/Image/utils';
import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
import {BREAKPOINTS} from '../../constants';
-import {useTheme} from '../../context/theme';
-import {useWindowWidth} from '../../context/windowWidthContext';
-import {Col, Grid, Row} from '../../grid';
+import {useTheme} from '../../gravity-blocks/context/theme';
+import {useWindowWidth} from '../../gravity-blocks/context/windowWidthContext';
+import {Col, Grid, Row} from '../../gravity-blocks/grid';
import {ClassNameProps, HeaderBlockBackground, HeaderBlockProps} from '../../models';
import {block, getThemedValue} from '../../utils';
import {mergeVideoMicrodata} from '../../utils/microdata';
diff --git a/src/blocks/Header/__stories__/Header.stories.tsx b/src/blocks/Header/__stories__/Header.stories.tsx
index 90bbb5e22a..eaf03e0dd0 100644
--- a/src/blocks/Header/__stories__/Header.stories.tsx
+++ b/src/blocks/Header/__stories__/Header.stories.tsx
@@ -5,6 +5,7 @@ import {Meta, StoryFn} from '@storybook/react';
import {blockTransform} from '../../../../.storybook/utils';
import {HeaderBlockModel, HeaderBlockProps} from '../../../models';
import Header from '../Header';
+import {form} from '../form';
import data from './data.json';
@@ -17,6 +18,9 @@ const SIZES = ['l', 'm', 's'].map((width) => ({
export default {
title: 'Blocks/Header',
component: Header,
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const DefaultTemplate: StoryFn = (args) => (
diff --git a/src/blocks/Header/dynamic-form.ts b/src/blocks/Header/dynamic-form.ts
new file mode 100644
index 0000000000..607838e6bb
--- /dev/null
+++ b/src/blocks/Header/dynamic-form.ts
@@ -0,0 +1,732 @@
+import {imageInputs} from '../../components/Image/dynamic-form';
+import {BlockConfig, ConfigInput} from '../../form-generator';
+import {Theme} from '../../models';
+
+const mediaInputs: ConfigInput[] = [
+ {
+ type: 'oneOf',
+ name: '',
+ key: 'mediaType',
+ title: 'Media Type',
+ options: [
+ {
+ title: 'Empty',
+ value: 'emptyMedia',
+ properties: [
+ {
+ type: 'text',
+ name: 'color',
+ title: 'Color',
+ },
+ ],
+ },
+ {
+ title: 'Image',
+ value: 'image',
+ properties: [
+ {
+ type: 'oneOf',
+ name: 'image',
+ key: 'imagesCount',
+ title: 'Images Count',
+ options: [
+ {title: 'Single Image', value: 'singleImage', properties: imageInputs},
+ {
+ title: 'Multiple Images',
+ value: 'multipleImages',
+ properties: [
+ {
+ type: 'array',
+ name: '',
+ arrayType: 'object',
+ title: 'Images',
+ properties: imageInputs,
+ buttonText: 'Add Image',
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: 'Youtube',
+ value: 'youtube',
+ properties: [
+ {
+ type: 'text',
+ name: 'youtube',
+ title: 'Youtube',
+ },
+ {
+ type: 'text',
+ name: 'previewImg',
+ title: 'Preview Image',
+ },
+ ],
+ },
+ {
+ title: 'Datalens',
+ value: 'datalens',
+ properties: [],
+ },
+ {
+ title: 'Iframe',
+ value: 'iframe',
+ properties: [],
+ },
+ {
+ title: 'Video',
+ value: 'video',
+ properties: [],
+ },
+ ],
+ },
+ {
+ type: 'boolean',
+ name: 'disableImageSliderForArrayInput',
+ title: 'Disable Image Slider For Array Input',
+ },
+ {
+ type: 'boolean',
+ name: 'parallax',
+ title: 'Parallax',
+ },
+ {
+ type: 'number',
+ name: 'height',
+ title: 'Height',
+ },
+ {
+ type: 'boolean',
+ name: 'fullscreen',
+ title: 'Fullscreen',
+ },
+ {
+ type: 'number',
+ name: 'ratio',
+ title: 'Ratio',
+ },
+ {
+ type: 'boolean',
+ name: 'margins',
+ title: 'Margins',
+ },
+];
+
+const headerBackgroundInputs: ConfigInput[] = [
+ {
+ type: 'boolean',
+ name: 'fullWidthMedia',
+ title: 'Full width Media',
+ },
+ {
+ type: 'boolean',
+ name: 'fullWidth',
+ title: 'Full width',
+ },
+];
+
+const backgroundProperty = (properties: ConfigInput[]): ConfigInput => ({
+ type: 'oneOf',
+ name: 'background',
+ title: 'Background',
+ options: [
+ {
+ value: 'noThemes',
+ title: 'No Themes',
+ properties: properties,
+ },
+ {
+ value: 'withThemes',
+ title: 'With Themes',
+ properties: Object.values(Theme).map((theme) => ({
+ type: 'object',
+ name: theme,
+ title: theme,
+ properties: properties,
+ })),
+ },
+ ],
+});
+
+export const blockConfig: BlockConfig = {
+ name: 'Header Block',
+ inputs: [
+ {
+ type: 'text',
+ name: 'title',
+ title: 'Title',
+ },
+ {
+ type: 'text',
+ name: 'overtitle',
+ title: 'Overtitle',
+ },
+ {
+ type: 'textarea',
+ name: 'description',
+ title: 'Description',
+ },
+ backgroundProperty([...mediaInputs, ...headerBackgroundInputs]),
+ /* {
+ type: 'text',
+ name: 'when',
+ title: 'when',
+ },
+ {
+ type: 'object',
+ name: 'anchor',
+ title: 'anchor',
+ properties: [
+ {
+ type: 'text',
+ name: 'text',
+ title: 'text',
+ },
+ {
+ type: 'text',
+ name: 'url',
+ title: 'url',
+ },
+ {
+ type: 'text',
+ name: 'urlTitle',
+ title: 'urlTitle',
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'visible',
+ title: 'visible',
+ enum: [
+ {
+ content: 'sm',
+ value: 'sm',
+ },
+ {
+ content: 'md',
+ value: 'md',
+ },
+ {
+ content: 'lg',
+ value: 'lg',
+ },
+ {
+ content: 'xl',
+ value: 'xl',
+ },
+ {
+ content: 'all',
+ value: 'all',
+ },
+ ],
+ },
+ {
+ type: 'text',
+ name: 'context',
+ title: 'context',
+ },
+ {
+ type: 'object',
+ name: 'indent',
+ title: 'indent',
+ properties: [],
+ },
+ {
+ type: 'select',
+ name: 'width',
+ title: 'width',
+ enum: [
+ {
+ content: 's',
+ value: 's',
+ },
+ {
+ content: 'm',
+ value: 'm',
+ },
+ {
+ content: 'l',
+ value: 'l',
+ },
+ ],
+ },
+ {
+ type: 'array',
+ name: 'buttons',
+ title: 'buttons',
+ properties: [
+ {
+ type: 'text',
+ name: 'when',
+ title: 'when',
+ },
+ {
+ type: 'text',
+ name: 'text',
+ title: 'text',
+ },
+ {
+ type: 'text',
+ name: 'url',
+ title: 'url',
+ },
+ {
+ type: 'text',
+ name: 'urlTitle',
+ title: 'urlTitle',
+ },
+ {
+ type: 'select',
+ name: 'size',
+ title: 'size',
+ enum: [
+ {
+ content: 'xs',
+ value: 'xs',
+ },
+ {
+ content: 'ns',
+ value: 'ns',
+ },
+ {
+ content: 's',
+ value: 's',
+ },
+ {
+ content: 'n',
+ value: 'n',
+ },
+ {
+ content: 'm',
+ value: 'm',
+ },
+ {
+ content: 'l',
+ value: 'l',
+ },
+ {
+ content: 'xl',
+ value: 'xl',
+ },
+ {
+ content: 'head',
+ value: 'head',
+ },
+ {
+ content: 'promo',
+ value: 'promo',
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'theme',
+ title: 'theme',
+ enum: [
+ {
+ content: 'normal',
+ value: 'normal',
+ },
+ {
+ content: 'action',
+ value: 'action',
+ },
+ {
+ content: 'outlined',
+ value: 'outlined',
+ },
+ {
+ content: 'outlined-info',
+ value: 'outlined-info',
+ },
+ {
+ content: 'outlined-danger',
+ value: 'outlined-danger',
+ },
+ {
+ content: 'raised',
+ value: 'raised',
+ },
+ {
+ content: 'flat',
+ value: 'flat',
+ },
+ {
+ content: 'flat-info',
+ value: 'flat-info',
+ },
+ {
+ content: 'flat-danger',
+ value: 'flat-danger',
+ },
+ {
+ content: 'flat-secondary',
+ value: 'flat-secondary',
+ },
+ {
+ content: 'clear',
+ value: 'clear',
+ },
+ {
+ content: 'normal-contrast',
+ value: 'normal-contrast',
+ },
+ {
+ content: 'outlined-contrast',
+ value: 'outlined-contrast',
+ },
+ {
+ content: 'flat-contrast',
+ value: 'flat-contrast',
+ },
+ {
+ content: 'link',
+ value: 'link',
+ },
+ {
+ content: 'pseudo',
+ value: 'pseudo',
+ },
+ {
+ content: 'pseudo-special',
+ value: 'pseudo-special',
+ },
+ {
+ content: 'websearch',
+ value: 'websearch',
+ },
+ {
+ content: 'normal-dark',
+ value: 'normal-dark',
+ },
+ {
+ content: 'normal-special',
+ value: 'normal-special',
+ },
+ {
+ content: 'accent',
+ value: 'accent',
+ },
+ {
+ content: 'dark-grey',
+ value: 'dark-grey',
+ },
+ {
+ content: 'app-store',
+ value: 'app-store',
+ },
+ {
+ content: 'google-play',
+ value: 'google-play',
+ },
+ {
+ content: 'scale',
+ value: 'scale',
+ },
+ {
+ content: 'github',
+ value: 'github',
+ },
+ {
+ content: 'monochrome',
+ value: 'monochrome',
+ },
+ ],
+ },
+ {
+ type: 'oneOf',
+ name: 'img',
+ title: 'img',
+ options: [
+ {
+ value: 'url',
+ title: 'url',
+ properties: [],
+ },
+ {
+ value: 'options',
+ title: 'options',
+ properties: [],
+ },
+ ],
+ },
+ {
+ type: 'oneOf',
+ name: 'analyticsEvents',
+ title: 'analyticsEvents',
+ options: [
+ {
+ value: 'single',
+ title: 'single',
+ properties: [
+ {
+ type: 'text',
+ name: 'additionalProperties',
+ title: 'additionalProperties',
+ },
+ ],
+ },
+ {
+ value: 'list',
+ title: 'list',
+ properties: [
+ {
+ type: 'object',
+ name: 'items',
+ title: 'items',
+ properties: [
+ {
+ type: 'text',
+ name: 'name',
+ title: 'name',
+ },
+ {
+ type: 'text',
+ name: 'type',
+ title: 'type',
+ },
+ {
+ type: 'object',
+ name: 'counters',
+ title: 'counters',
+ properties: [],
+ },
+ {
+ type: 'text',
+ name: 'context',
+ title: 'context',
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'target',
+ title: 'target',
+ enum: [
+ {
+ content: '_self',
+ value: '_self',
+ },
+ {
+ content: '_blank',
+ value: '_blank',
+ },
+ {
+ content: '_parent',
+ value: '_parent',
+ },
+ {
+ content: '_top',
+ value: '_top',
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'width',
+ title: 'width',
+ enum: [
+ {
+ content: 'auto',
+ value: 'auto',
+ },
+ {
+ content: 'max',
+ value: 'max',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'offset',
+ title: 'offset',
+ enum: [
+ {
+ content: 'default',
+ value: 'default',
+ },
+ {
+ content: 'large',
+ value: 'large',
+ },
+ ],
+ },
+ {
+ type: 'oneOf',
+ name: 'image',
+ title: 'image',
+ options: [
+ {
+ value: 'no theme',
+ title: 'no theme',
+ properties: [],
+ },
+ {
+ value: 'themes',
+ title: 'themes',
+ properties: [],
+ },
+ ],
+ },
+ {
+ type: 'oneOf',
+ name: 'video',
+ title: 'video',
+ options: [
+ {
+ value: 'no theme',
+ title: 'no theme',
+ properties: [],
+ },
+ {
+ value: 'themes',
+ title: 'themes',
+ properties: [],
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'mediaView',
+ title: 'mediaView',
+ enum: [
+ {
+ content: 'fit',
+ value: 'fit',
+ },
+ {
+ content: 'full',
+ value: 'full',
+ },
+ ],
+ },
+ {
+ type: 'object',
+ name: 'backLink',
+ title: 'backLink',
+ properties: [
+ {
+ type: 'text',
+ name: 'url',
+ title: 'url',
+ },
+ {
+ type: 'text',
+ name: 'title',
+ title: 'title',
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'imageSize',
+ title: 'imageSize',
+ enum: [
+ {
+ content: 's',
+ value: 's',
+ },
+ {
+ content: 'm',
+ value: 'm',
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'verticalOffset',
+ title: 'verticalOffset',
+ enum: [
+ {
+ content: '0',
+ value: '0',
+ },
+ {
+ content: 's',
+ value: 's',
+ },
+ {
+ content: 'm',
+ value: 'm',
+ },
+ {
+ content: 'l',
+ value: 'l',
+ },
+ {
+ content: 'xl',
+ value: 'xl',
+ },
+ ],
+ },
+
+ {
+ type: 'select',
+ name: 'theme',
+ title: 'theme',
+ enum: [
+ {
+ content: 'default',
+ value: 'default',
+ },
+ {
+ content: 'dark',
+ value: 'dark',
+ },
+ ],
+ },
+ {
+ type: 'object',
+ name: 'breadcrumbs',
+ title: 'breadcrumbs',
+ properties: [
+ {
+ type: 'array',
+ name: 'items',
+ title: 'items',
+ properties: [
+ {
+ type: 'text',
+ name: 'url',
+ title: 'url',
+ },
+ {
+ type: 'text',
+ name: 'text',
+ title: 'text',
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'theme',
+ title: 'theme',
+ enum: [
+ {
+ content: 'light',
+ value: 'light',
+ },
+ {
+ content: 'dark',
+ value: 'dark',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'text',
+ name: 'status',
+ title: 'status',
+ },*/
+ ],
+};
diff --git a/src/blocks/Header/form.ts b/src/blocks/Header/form.ts
new file mode 100644
index 0000000000..6cd5224558
--- /dev/null
+++ b/src/blocks/Header/form.ts
@@ -0,0 +1,386 @@
+import {Fields} from '../../form-generator-v2/types';
+
+export const form = [
+ {
+ type: 'section',
+ title: 'Layout settings',
+ opened: true,
+ fields: [
+ {
+ title: 'Vertical offset',
+ name: 'verticalOffset',
+ type: 'select',
+ options: [
+ {content: '0', value: '0'},
+ {content: 'S', value: 's'},
+ {content: 'M', value: 'm'},
+ {content: 'L', value: 'l'},
+ {content: 'XL', value: 'xl'},
+ ],
+ defaultValue: 'm',
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Breadcrumbs',
+ withAddButton: true,
+ index: 'index',
+ itemTitle: 'Item {{index}}',
+ itemView: 'card',
+ fields: [
+ {
+ title: 'Text',
+ name: 'breadcrumbs.items[{{index}}].text',
+ type: 'textInput',
+ placeholder: 'Text',
+ },
+ {
+ title: 'URL',
+ name: 'breadcrumbs.items[{{index}}].url',
+ type: 'textInput',
+ placeholder: 'https://',
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Text',
+ opened: true,
+ fields: [
+ {
+ title: 'Overtitle',
+ name: 'overtitle',
+ type: 'textInput',
+ placeholder: 'Text',
+ },
+ {
+ title: 'Title',
+ name: 'title',
+ type: 'textInput',
+ placeholder: 'Text',
+ },
+ {
+ title: 'Description',
+ name: 'description',
+ type: 'textArea',
+ placeholder: 'Text',
+ },
+ {
+ title: 'Width',
+ name: 'width',
+ options: [
+ {content: 'S', value: 's'},
+ {content: 'M', value: 'm'},
+ ],
+ type: 'select',
+ },
+ {
+ title: 'Theme',
+ name: 'theme',
+ options: [
+ {content: 'Light', value: 'light'},
+ {content: 'Dark', value: 'dark'},
+ ],
+ type: 'segmentedRadioGroup',
+ defaultValue: 'light',
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Buttons',
+ withAddButton: true,
+ index: 'index',
+ itemTitle: 'Button {{index}}',
+ itemView: 'card',
+ fields: [
+ {
+ type: 'section',
+ title: 'Main settings',
+ opened: true,
+ fields: [
+ {
+ title: 'Text',
+ type: 'textInput',
+ name: 'buttons[{{index}}].text',
+ placeholder: 'Text',
+ },
+ {
+ title: 'URL',
+ type: 'textInput',
+ name: 'buttons[{{index}}].url',
+ placeholder: 'https://',
+ },
+ {
+ title: 'URL title',
+ type: 'textInput',
+ name: 'buttons[{{index}}].urlTitle',
+ placeholder: 'https://',
+ },
+ {
+ title: 'Style',
+ type: 'select',
+ name: 'buttons[{{index}}].theme',
+ options: [
+ {value: 'action', content: 'Action'},
+ {value: 'outlined', content: 'Outlined'},
+ {value: 'normal', content: 'Normal'},
+ {value: 'monochrome', content: 'Monochrome'},
+ {
+ value: 'outlined-contrast',
+ content: 'Outlined-contrast',
+ },
+ {value: 'normal-contrast', content: 'Normal-contrast'},
+ ],
+ },
+ {
+ title: 'Target',
+ type: 'select',
+ name: 'buttons[{{index}}].target',
+ options: [
+ {value: '_blank'},
+ {value: '_self'},
+ {value: '_parent'},
+ {value: '_top'},
+ ],
+ hasClear: true,
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Analytics tracking',
+ itemView: 'clear',
+ fields: [
+ {
+ title: 'Name',
+ type: 'textInput',
+ name: 'buttons[{{index}}].analyticsEvents[0].name',
+ placeholder: 'Text',
+ },
+ {
+ title: 'Target',
+ type: 'textInput',
+ name: 'buttons[{{index}}].analyticsEvents[0].target',
+ placeholder: 'Text',
+ },
+ {
+ title: 'Counter',
+ type: 'textInput',
+ name: 'buttons[{{index}}].analyticsEvents[0].counters[0].includes',
+ placeholder: 'Text',
+ },
+ {
+ type: 'text',
+ text: 'Only events for the counters listed in the input field will be sent.',
+ level: 'info',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Background',
+ opened: true,
+ fields: [
+ {
+ title: 'Color HEX',
+ type: 'colorInput',
+ name: 'background.color',
+ placeholder: '#000000',
+ },
+ {
+ title: 'Type',
+ name: '_mediaType',
+ options: [
+ {content: 'Image', value: 'image'},
+ {content: 'Video', value: 'video'},
+ ],
+ type: 'segmentedRadioGroup',
+ },
+ {
+ type: 'text',
+ text: 'Light theme',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Desktop',
+ type: 'textInput',
+ name: 'background.light.image.desktop',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Tablet',
+ type: 'textInput',
+ name: 'background.light.image.tablet',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Mobile',
+ type: 'textInput',
+ name: 'background.light.image.mobile',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ type: 'text',
+ text: 'Dark theme',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Desktop',
+ type: 'textInput',
+ name: 'background.dark.image.desktop',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Tablet',
+ type: 'textInput',
+ name: 'background.dark.image.tablet',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Mobile',
+ type: 'textInput',
+ name: 'background.dark.image.mobile',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Type',
+ type: 'select',
+ options: [{value: 'default'}, {value: 'player'}],
+ name: 'background.video.type',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'video',
+ },
+ ],
+ },
+ {
+ title: 'Video URL',
+ type: 'textInput',
+ name: 'background.video.src[0]',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'video',
+ },
+ ],
+ },
+ {
+ title: 'Muted',
+ type: 'switch',
+ name: 'background.video.muted',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'video',
+ },
+ ],
+ },
+ {
+ title: 'Autoplay',
+ type: 'switch',
+ name: 'background.video.autoplay',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'video',
+ },
+ ],
+ },
+ {
+ title: 'Loop',
+ type: 'switch',
+ name: 'background.video.loop',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'video',
+ },
+ ],
+ },
+ ],
+ },
+] as Fields;
+
+export const defaultValue = {
+ type: 'header-block',
+ title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+ description:
+ 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+ buttons: [
+ {
+ text: 'Button\r',
+ theme: 'action',
+ url: 'https://example.com',
+ },
+ {
+ text: 'Button',
+ theme: 'outlined',
+ url: 'https://example.com',
+ },
+ ],
+};
diff --git a/src/blocks/Header/icon.ts b/src/blocks/Header/icon.ts
new file mode 100644
index 0000000000..e9e056bee3
--- /dev/null
+++ b/src/blocks/Header/icon.ts
@@ -0,0 +1,13 @@
+import {svgToDataUri} from '../../utils/svg';
+
+export default svgToDataUri(
+ ``,
+);
diff --git a/src/blocks/Header/index.ts b/src/blocks/Header/index.ts
new file mode 100644
index 0000000000..e96b1ea6a4
--- /dev/null
+++ b/src/blocks/Header/index.ts
@@ -0,0 +1,19 @@
+import {BlockData} from '../../constructor-items';
+
+import HeaderBlock from './Header';
+import {defaultValue, form} from './form';
+import icon from './icon';
+
+const HeaderBlockConfig: BlockData = {
+ type: '@gravity-ui/page-constructor/header-block',
+ component: HeaderBlock,
+ schema: {
+ name: 'Header Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: form,
+ default: defaultValue,
+ previewImg: icon,
+ },
+};
+
+export default HeaderBlockConfig;
diff --git a/src/blocks/Header/index_deprecated.ts b/src/blocks/Header/index_deprecated.ts
new file mode 100644
index 0000000000..3f17bfbe44
--- /dev/null
+++ b/src/blocks/Header/index_deprecated.ts
@@ -0,0 +1,19 @@
+import {BlockData} from '../../constructor-items';
+
+import HeaderBlock from './Header';
+import {defaultValue, form} from './form';
+
+const HeaderBlockConfig: BlockData = {
+ type: 'header-block',
+ component: HeaderBlock,
+ schema: {
+ name: 'Header Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ previewImg: 'https://storage.cloud-preprod.yandex.net/qradle-test/header-block.svg',
+ },
+};
+
+export default HeaderBlockConfig;
diff --git a/src/blocks/Header/schema.ts b/src/blocks/Header/schema.ts
index 1c1d21baf4..3dacffb25e 100644
--- a/src/blocks/Header/schema.ts
+++ b/src/blocks/Header/schema.ts
@@ -7,8 +7,8 @@ import {
VideoProps,
mediaView,
withTheme,
-} from '../../schema/validators/common';
-import {filteredArray} from '../../schema/validators/utils';
+} from '../../gravity-blocks/schema/validators/common';
+import {filteredArray} from '../../gravity-blocks/schema/validators/utils';
export const HeaderVideoIframeProps = {
type: 'object',
diff --git a/src/blocks/HeaderSlider/HeaderSlider.tsx b/src/blocks/HeaderSlider/HeaderSlider.tsx
index 443f76dc97..d3dfc58a9e 100644
--- a/src/blocks/HeaderSlider/HeaderSlider.tsx
+++ b/src/blocks/HeaderSlider/HeaderSlider.tsx
@@ -1,10 +1,10 @@
import * as React from 'react';
-import {SliderBlock} from '../../blocks';
-import {MobileContext} from '../../context/mobileContext';
+import {MobileContext} from '../../gravity-blocks/context/mobileContext';
import {HeaderSliderBlockProps, SliderType} from '../../models';
import {block} from '../../utils';
import Header from '../Header/Header';
+import {default as SliderBlock} from '../Slider/Slider';
import './HeaderSlider.scss';
@@ -25,15 +25,16 @@ export const HeaderSliderBlock = ({items, arrows, ...props}: HeaderSliderBlockPr
blockClassName={b()}
arrowSize={20}
>
- {items.map((item, index) => (
-
);
diff --git a/src/blocks/HeaderSlider/__stories__/HeaderSlider.stories.tsx b/src/blocks/HeaderSlider/__stories__/HeaderSlider.stories.tsx
index f5f5c54756..8f221c5451 100644
--- a/src/blocks/HeaderSlider/__stories__/HeaderSlider.stories.tsx
+++ b/src/blocks/HeaderSlider/__stories__/HeaderSlider.stories.tsx
@@ -2,12 +2,16 @@ import {Meta, StoryFn} from '@storybook/react';
import {HeaderSliderBlockProps} from '../../../models';
import HeaderSlider from '../HeaderSlider';
+import {form} from '../form';
import data from './data.json';
export default {
title: 'Blocks/HeaderSlider',
component: HeaderSlider,
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const DefaultTemplate: StoryFn
-
+
+
);
};
diff --git a/src/blocks/Companies/__stories__/Companies.stories.tsx b/src/blocks/Companies/__stories__/Companies.stories.tsx
index 098ff6670d..44bd7d4842 100644
--- a/src/blocks/Companies/__stories__/Companies.stories.tsx
+++ b/src/blocks/Companies/__stories__/Companies.stories.tsx
@@ -3,6 +3,7 @@ import {Meta, StoryFn} from '@storybook/react';
import {blockTransform} from '../../../../.storybook/utils';
import {CompaniesBlockModel, CompaniesBlockProps} from '../../../models';
import Companies from '../Companies';
+import {form} from '../form';
import data from './data.json';
@@ -10,6 +11,7 @@ export default {
title: 'Blocks/Companies',
component: Companies,
parameters: {
+ inputs: form,
controls: {
exclude: ['type'],
},
diff --git a/src/blocks/Companies/form.ts b/src/blocks/Companies/form.ts
new file mode 100644
index 0000000000..50ae4f2287
--- /dev/null
+++ b/src/blocks/Companies/form.ts
@@ -0,0 +1,15 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFormFieldsFromAjvSchema} from '../../form-generator-v2/utils/generateFormFieldsFromAjv';
+
+import {CompaniesBlock as CompaniesBlockSchema} from './schema';
+
+// TODO: change to custom block schema
+export const form = generateFormFieldsFromAjvSchema(
+ CompaniesBlockSchema['companies-block'] as unknown as JSONSchemaType<{}>,
+);
+
+export const defaultValue = {
+ title: 'Companies Block',
+ description: 'Here is the list',
+};
diff --git a/src/blocks/Companies/index.ts b/src/blocks/Companies/index.ts
new file mode 100644
index 0000000000..9bea0f8014
--- /dev/null
+++ b/src/blocks/Companies/index.ts
@@ -0,0 +1,17 @@
+import {BlockData} from '../../constructor-items';
+
+import CompaniesBlock from './Companies';
+import {defaultValue, form} from './form';
+
+const CompaniesBlockConfig: BlockData = {
+ type: '@gravity-ui/page-constructor/companies-block',
+ component: CompaniesBlock,
+ schema: {
+ name: 'Companies Block',
+ group: '@gravity-ui/page-constructor/UnfinishedBlocks',
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default CompaniesBlockConfig;
diff --git a/src/blocks/Companies/index_deprecated.ts b/src/blocks/Companies/index_deprecated.ts
new file mode 100644
index 0000000000..7c7a895e21
--- /dev/null
+++ b/src/blocks/Companies/index_deprecated.ts
@@ -0,0 +1,18 @@
+import {BlockData} from '../../constructor-items';
+
+import CompaniesBlock from './Companies';
+import {defaultValue, form} from './form';
+
+const CompaniesBlockConfig: BlockData = {
+ type: 'companies-block',
+ component: CompaniesBlock,
+ schema: {
+ name: 'Companies Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default CompaniesBlockConfig;
diff --git a/src/blocks/Companies/schema.ts b/src/blocks/Companies/schema.ts
index 09e021d6f3..332434b9c7 100644
--- a/src/blocks/Companies/schema.ts
+++ b/src/blocks/Companies/schema.ts
@@ -1,4 +1,4 @@
-import {AnimatableProps, BaseProps, withTheme} from '../../schema/validators/common';
+import {AnimatableProps, BaseProps, withTheme} from '../../gravity-blocks/schema/validators/common';
export const CompaniesBlock = {
'companies-block': {
diff --git a/src/blocks/ContentLayout/ContentLayout.tsx b/src/blocks/ContentLayout/ContentLayout.tsx
index a6cfd666c6..884773d4e7 100644
--- a/src/blocks/ContentLayout/ContentLayout.tsx
+++ b/src/blocks/ContentLayout/ContentLayout.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
import {BackgroundImage, FileLink} from '../../components';
import {BREAKPOINTS} from '../../constants';
-import {useTheme} from '../../context/theme';
-import {useWindowWidth} from '../../context/windowWidthContext';
-import {Col} from '../../grid';
+import {useTheme} from '../../gravity-blocks/context/theme';
+import {useWindowWidth} from '../../gravity-blocks/context/windowWidthContext';
+import {Col, Grid} from '../../gravity-blocks/grid';
import {ContentLayoutBlockProps, ContentSize, ContentTextSize} from '../../models';
import {Content} from '../../sub-blocks';
import {block, getThemedValue} from '../../utils';
@@ -56,39 +56,41 @@ export const ContentLayoutBlock = (props: ContentLayoutBlockProps) => {
const themedBackground = getThemedValue(background, globalTheme);
return (
-
+
-
+
-
+
+
);
};
export default ContentLayoutBlock;
diff --git a/src/blocks/ContentLayout/__stories__/ContentLayout.stories.tsx b/src/blocks/ContentLayout/__stories__/ContentLayout.stories.tsx
index a17da46343..7eeea783e6 100644
--- a/src/blocks/ContentLayout/__stories__/ContentLayout.stories.tsx
+++ b/src/blocks/ContentLayout/__stories__/ContentLayout.stories.tsx
@@ -5,12 +5,16 @@ import {Meta, StoryFn} from '@storybook/react';
import {blockTransform} from '../../../../.storybook/utils';
import {ContentLayoutBlockModel, ContentLayoutBlockProps} from '../../../models';
import Content from '../ContentLayout';
+import {form} from '../form';
import data from './data.json';
export default {
title: 'Blocks/ContentLayout',
component: Content,
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const SIZES = ['l', 'm', 's'].map((size) => ({
diff --git a/src/blocks/ContentLayout/form.ts b/src/blocks/ContentLayout/form.ts
new file mode 100644
index 0000000000..9dad92fb28
--- /dev/null
+++ b/src/blocks/ContentLayout/form.ts
@@ -0,0 +1,423 @@
+import {Fields} from '../../form-generator-v2';
+
+export const form = [
+ {
+ type: 'section',
+ title: 'Layout settings',
+ opened: true,
+ fields: [
+ {
+ type: 'switch',
+ title: 'Centered',
+ name: 'centered',
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Text',
+ opened: true,
+ fields: [
+ {
+ type: 'textInput',
+ title: 'Title',
+ name: 'textContent.title',
+ placeholder: 'Text',
+ },
+ {
+ type: 'textArea',
+ title: 'Description',
+ name: 'textContent.text',
+ placeholder: 'Text',
+ },
+ {
+ type: 'textArea',
+ title: 'Additional info',
+ name: 'textContent.additionalInfo',
+ placeholder: 'Text',
+ },
+ {
+ type: 'select',
+ title: 'Width',
+ name: 'textWidth',
+ options: [
+ {value: 's', content: 'S'},
+ {value: 'm', content: 'M'},
+ {value: 'l', content: 'L'},
+ ],
+ defaultValue: 'm',
+ },
+ {
+ type: 'select',
+ title: 'Text size',
+ name: 'size',
+ options: [
+ {value: 's', content: 'S'},
+ {value: 'm', content: 'M'},
+ {value: 'l', content: 'L'},
+ ],
+ defaultValue: 'l',
+ },
+ {
+ type: 'segmentedRadioGroup',
+ title: 'Theme',
+ options: [
+ {content: 'Light', value: 'light'},
+ {content: 'Dark', value: 'dark'},
+ {content: 'Default', value: 'default'},
+ ],
+ name: 'theme',
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Content list',
+ withAddButton: true,
+ index: 'index1',
+ itemTitle: 'Item {{index1}}',
+ itemView: 'card',
+ fields: [
+ {
+ type: 'textInput',
+ title: 'Title',
+ name: 'textContent.list[{{index1}}].title',
+ placeholder: 'Text',
+ defaultValue: 'Item title',
+ },
+ {
+ type: 'textArea',
+ title: 'Description',
+ name: 'textContent.list[{{index1}}].text',
+ placeholder: 'Text',
+ defaultValue: 'Item text',
+ },
+ {
+ type: 'textInput',
+ title: 'URL icon',
+ name: 'textContent.list[{{index1}}].icon',
+ placeholder: 'https://',
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Buttons',
+ withAddButton: true,
+ index: 'index',
+ itemTitle: 'Button {{index}}',
+ itemView: 'card',
+ fields: [
+ {
+ type: 'section',
+ title: 'Main settings',
+ opened: true,
+ fields: [
+ {
+ title: 'Text',
+ type: 'textInput',
+ name: 'textContent.buttons[{{index}}].text',
+ placeholder: 'Text',
+ defaultValue: 'Learn more',
+ },
+ {
+ title: 'URL',
+ type: 'textInput',
+ name: 'textContent.buttons[{{index}}].url',
+ placeholder: 'https://',
+ },
+ {
+ title: 'URL title',
+ type: 'textInput',
+ name: 'textContent.buttons[{{index}}].urlTitle',
+ placeholder: 'https://',
+ },
+ {
+ title: 'Style',
+ type: 'select',
+ name: 'textContent.buttons[{{index}}].theme',
+ options: [
+ {value: 'action', content: 'Action'},
+ {value: 'outlined', content: 'Outlined'},
+ {value: 'normal', content: 'Normal'},
+ {value: 'monochrome', content: 'Monochrome'},
+ {
+ value: 'outlined-contrast',
+ content: 'Outlined-contrast',
+ },
+ {value: 'normal-contrast', content: 'Normal-contrast'},
+ ],
+ },
+ {
+ title: 'Target',
+ type: 'select',
+ name: 'textContent.buttons[{{index}}].target',
+ options: [
+ {value: '_blank'},
+ {value: '_self'},
+ {value: '_parent'},
+ {value: '_top'},
+ ],
+ hasClear: true,
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Analytics tracking',
+ itemView: 'clear',
+ fields: [
+ {
+ title: 'Name',
+ type: 'textInput',
+ name: 'textContent.buttons[{{index}}].analyticsEvents[0].name',
+ placeholder: 'Text',
+ },
+ {
+ title: 'Target',
+ type: 'textInput',
+ name: 'textContent.buttons[{{index}}].analyticsEvents[0].target',
+ placeholder: 'Text',
+ },
+ {
+ title: 'Counter',
+ type: 'textInput',
+ name: 'textContent.buttons[{{index}}].analyticsEvents[0].counters[0].includes',
+ placeholder: 'Text',
+ },
+ {
+ type: 'text',
+ text: 'Only events for the counters listed in the input field will be sent.',
+ level: 'info',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Link',
+ index: 'index1',
+ withAddButton: true,
+ itemTitle: 'Link {{index1}}',
+ itemView: 'card',
+ fields: [
+ {
+ type: 'textInput',
+ title: 'Text',
+ name: 'textContent.links[{{index1}}].text',
+ placeholder: 'Text',
+ defaultValue: 'Learn more',
+ },
+ {
+ type: 'textInput',
+ title: 'URL',
+ name: 'textContent.links[{{index1}}].url',
+ placeholder: 'https://',
+ },
+ {
+ type: 'textInput',
+ title: 'URL title',
+ name: 'textContent.links[{{index1}}].urlTitle',
+ placeholder: 'https://',
+ },
+ {
+ type: 'select',
+ title: 'Style',
+ name: 'textContent.links[{{index1}}].theme',
+ options: [
+ {content: 'File-link', value: 'file-link'},
+ {content: 'Normal', value: 'normal'},
+ {content: 'Back', value: 'back'},
+ {content: 'Underline', value: 'underline'},
+ ],
+ defaultValue: 'normal',
+ },
+ {
+ title: 'Target',
+ type: 'select',
+ name: 'textContent.links[{{index1}}].target',
+ options: [{value: '_blank'}, {value: '_self'}, {value: '_parent'}, {value: '_top'}],
+ hasClear: true,
+ },
+ {
+ type: 'section',
+ title: 'Analytics tracking',
+ itemView: 'clear',
+ fields: [
+ {
+ title: 'Name',
+ type: 'textInput',
+ name: 'textContent.links[{{index1}}].analyticsEvents[0].name',
+ placeholder: 'Text',
+ },
+ {
+ title: 'Target',
+ type: 'textInput',
+ name: 'textContent.links[{{index1}}].analyticsEvents[0].target',
+ placeholder: 'Text',
+ },
+ {
+ title: 'Counter',
+ type: 'textInput',
+ name: 'textContent.links[{{index1}}].analyticsEvents[0].counters[0].includes',
+ placeholder: 'Text',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'File',
+ withAddButton: true,
+ index: 'index1',
+ itemTitle: 'File {{index1}}',
+ itemView: 'card',
+ fields: [
+ {
+ type: 'textInput',
+ title: 'Href',
+ name: 'fileContent[{{index1}}].href',
+ placeholder: 'https://',
+ },
+ {
+ type: 'textInput',
+ title: 'Name',
+ name: 'fileContent[{{index1}}].text',
+ placeholder: 'Text',
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Background',
+ opened: true,
+ fields: [
+ {
+ title: 'Color HEX',
+ type: 'colorInput',
+ name: 'background.style.background',
+ placeholder: '#000000',
+ },
+ {
+ type: 'text',
+ text: 'Light theme',
+ },
+ {
+ title: 'Desktop',
+ type: 'textInput',
+ name: 'background.light.image.desktop',
+ placeholder: 'https://',
+ },
+ {
+ title: 'Tablet',
+ type: 'textInput',
+ name: 'background.light.image.tablet',
+ placeholder: 'https://',
+ },
+ {
+ title: 'Mobile',
+ type: 'textInput',
+ name: 'background.light.image.mobile',
+ placeholder: 'https://',
+ },
+ {
+ type: 'text',
+ text: 'Dark theme',
+ },
+ {
+ title: 'Desktop',
+ type: 'textInput',
+ name: 'background.dark.image.desktop',
+ placeholder: 'https://',
+ },
+ {
+ title: 'Tablet',
+ type: 'textInput',
+ name: 'background.dark.image.tablet',
+ placeholder: 'https://',
+ },
+ {
+ title: 'Mobile',
+ type: 'textInput',
+ name: 'background.dark.image.mobile',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ ],
+ },
+] as Fields;
+
+export const defaultValue = {
+ textContent: {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ additionalInfo:
+ 'Duis aute irure dolor in reprehenderit n voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+ buttons: [
+ {
+ text: 'Button',
+ theme: 'action',
+ url: 'https://example.com',
+ },
+ {
+ text: 'Button',
+ theme: 'outlined',
+ url: 'https://example.com',
+ },
+ ],
+ links: [
+ {
+ url: 'https://example.com',
+ text: 'Link',
+ theme: 'normal',
+ arrow: true,
+ },
+ ],
+ fileContent: [
+ {
+ href: 'https://example.xls',
+ text: 'File xls',
+ },
+ {
+ href: 'https://example.fig',
+ text: 'File PNG, JPG, and SVG format',
+ },
+ {
+ href: 'https://example.pdf',
+ text: 'Pdf file',
+ },
+ {
+ href: 'https://example.zip',
+ text: 'Archive file',
+ },
+ {
+ href: 'https://example.doc',
+ text: 'Microsoft Word document',
+ },
+ {
+ href: 'https://example.ppt',
+ text: 'PPT file',
+ },
+ ],
+ list: [
+ {
+ title: 'Lorem ipsum',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ title: 'Lorem ipsum ipsum',
+ },
+ ],
+};
diff --git a/src/blocks/ContentLayout/icon.ts b/src/blocks/ContentLayout/icon.ts
new file mode 100644
index 0000000000..203cd672cf
--- /dev/null
+++ b/src/blocks/ContentLayout/icon.ts
@@ -0,0 +1,15 @@
+import {svgToDataUri} from '../../utils/svg';
+
+export default svgToDataUri(
+ ``,
+);
diff --git a/src/blocks/ContentLayout/index.ts b/src/blocks/ContentLayout/index.ts
new file mode 100644
index 0000000000..1ec505f020
--- /dev/null
+++ b/src/blocks/ContentLayout/index.ts
@@ -0,0 +1,17 @@
+import ContentLayoutBlock from './ContentLayout';
+import {defaultValue, form} from './form';
+import icon from './icon';
+
+const ContentLayoutBlockConfig = {
+ type: '@gravity-ui/page-constructor/content-layout-block',
+ component: ContentLayoutBlock,
+ schema: {
+ name: 'Content Layout Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: form,
+ default: defaultValue,
+ previewImg: icon,
+ },
+};
+
+export default ContentLayoutBlockConfig;
diff --git a/src/blocks/ContentLayout/index_deprecated.ts b/src/blocks/ContentLayout/index_deprecated.ts
new file mode 100644
index 0000000000..7939ef002b
--- /dev/null
+++ b/src/blocks/ContentLayout/index_deprecated.ts
@@ -0,0 +1,16 @@
+import ContentLayoutBlock from './ContentLayout';
+import {defaultValue, form} from './form';
+
+const ContentLayoutBlockConfig = {
+ type: 'content-layout-block',
+ component: ContentLayoutBlock,
+ schema: {
+ name: 'Content Layout Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default ContentLayoutBlockConfig;
diff --git a/src/blocks/ContentLayout/schema.ts b/src/blocks/ContentLayout/schema.ts
index 20279e55ad..6f01c276f3 100644
--- a/src/blocks/ContentLayout/schema.ts
+++ b/src/blocks/ContentLayout/schema.ts
@@ -5,8 +5,8 @@ import {
contentSizes,
contentTextWidth,
contentThemes,
-} from '../../schema/validators/common';
-import {filteredArray} from '../../schema/validators/utils';
+} from '../../gravity-blocks/schema/validators/common';
+import {filteredArray} from '../../gravity-blocks/schema/validators/utils';
import {ContentBlock} from '../../sub-blocks/Content/schema';
const ContentLayoutBlockProperties = {
diff --git a/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx b/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx
index bc5e0b8fd8..925cf8cf55 100644
--- a/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx
+++ b/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx
@@ -1,8 +1,8 @@
import {AnimateBlock, Title, YFMWrapper} from '../../components/';
import Image from '../../components/Image/Image';
import {getMediaImage} from '../../components/Media/Image/utils';
-import {useTheme} from '../../context/theme';
-import {Col, Row} from '../../grid';
+import {useTheme} from '../../gravity-blocks/context/theme';
+import {Col, Grid, Row} from '../../gravity-blocks/grid';
import {ExtendedFeaturesProps} from '../../models';
import {Content} from '../../sub-blocks';
import {block, getThemedValue} from '../../utils';
@@ -29,69 +29,78 @@ export const ExtendedFeaturesBlock = ({
return (
+
+ )}
+
+
+
-
- )}
-
-
- {items.map(
- ({
- title: itemTitle,
- text,
- list,
- link,
- links,
- label,
- icon,
- buttons,
- additionalInfo,
- }) => {
- const itemLinks = links || [];
+
+
+
+
+
+ {items &&
+ items.map(
+ ({
+ title: itemTitle,
+ text,
+ list,
+ link,
+ links,
+ label,
+ icon,
+ buttons,
+ additionalInfo,
+ }) => {
+ const itemLinks = links || [];
- const iconThemed = icon && getThemedValue(icon, theme);
- const iconData = iconThemed && getMediaImage(iconThemed);
+ const iconThemed = icon && getThemedValue(icon, theme);
+ const iconData = iconThemed && getMediaImage(iconThemed);
- if (link) {
- itemLinks.push(link);
- }
+ if (link) {
+ itemLinks.push(link);
+ }
- return (
-
+
+ );
+ },
+ )}
+
-
- )}
-
- {itemTitle && (
-
- {label && (
- {label}
+ return (
+
+
+
+ )}
+
+ {itemTitle && (
+
+ {label && (
+
+ {label}
+
+ )}
+
)}
-
- )}
-
-
- );
- },
- )}
-
-
-
- ))}
+ {items &&
+ items.map((item, index) => (
+
+
+ ))}
- {(title || description) && (
-
+
- {itemContent}
-
- );
- })}
-
+ {(title || description) && (
+
+
+ {itemContent}
+
+ );
+ })}
+
- = (args) => (
diff --git a/src/blocks/Info/form.ts b/src/blocks/Info/form.ts
new file mode 100644
index 0000000000..7ec3398202
--- /dev/null
+++ b/src/blocks/Info/form.ts
@@ -0,0 +1,38 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFormFieldsFromAjvSchema} from '../../form-generator-v2/utils/generateFormFieldsFromAjv';
+
+import {InfoBlock as InfoBlockSchema} from './schema';
+
+// TODO: change to custom block schema
+export const form = generateFormFieldsFromAjvSchema(
+ InfoBlockSchema['info-block'] as unknown as JSONSchemaType<{}>,
+);
+
+export const defaultValue = {
+ type: 'info-block',
+ title: 'Info Block',
+ backgroundColor: '#2c2c2c',
+ sectionsTitle: 'Other links',
+ links: [
+ {
+ text: 'Link 1',
+ },
+ {
+ text: 'Link 2',
+ },
+ {
+ text: 'Link 3',
+ },
+ ],
+ buttons: [
+ {
+ text: 'Read more',
+ theme: 'outlined-contrast',
+ },
+ {
+ text: 'Go back',
+ theme: 'action',
+ },
+ ],
+};
diff --git a/src/blocks/Info/icon.ts b/src/blocks/Info/icon.ts
new file mode 100644
index 0000000000..bed9b8ee2c
--- /dev/null
+++ b/src/blocks/Info/icon.ts
@@ -0,0 +1,18 @@
+import {svgToDataUri} from '../../utils/svg';
+
+export default svgToDataUri(
+ ``,
+);
diff --git a/src/blocks/Info/index.ts b/src/blocks/Info/index.ts
new file mode 100644
index 0000000000..0c89f93a71
--- /dev/null
+++ b/src/blocks/Info/index.ts
@@ -0,0 +1,17 @@
+import InfoBlock from './Info';
+import {defaultValue, form} from './form';
+import icon from './icon';
+
+const InfoBlockConfig = {
+ type: '@gravity-ui/page-constructor/info-block',
+ component: InfoBlock,
+ schema: {
+ name: 'Info Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: form,
+ default: defaultValue,
+ previewImg: icon,
+ },
+};
+
+export default InfoBlockConfig;
diff --git a/src/blocks/Info/index_deprecated.ts b/src/blocks/Info/index_deprecated.ts
new file mode 100644
index 0000000000..0b261ea38b
--- /dev/null
+++ b/src/blocks/Info/index_deprecated.ts
@@ -0,0 +1,18 @@
+import InfoBlock from './Info';
+import {defaultValue, form} from './form';
+import icon from './icon';
+
+const InfoBlockConfig = {
+ type: 'info-block',
+ component: InfoBlock,
+ schema: {
+ name: 'Info Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ previewImg: icon,
+ },
+};
+
+export default InfoBlockConfig;
diff --git a/src/blocks/Info/schema.ts b/src/blocks/Info/schema.ts
index b5a60508ea..397f11e8dc 100644
--- a/src/blocks/Info/schema.ts
+++ b/src/blocks/Info/schema.ts
@@ -6,8 +6,8 @@ import {
LinkProps,
ThemeProps,
withTheme,
-} from '../../schema/validators/common';
-import {filteredArray} from '../../schema/validators/utils';
+} from '../../gravity-blocks/schema/validators/common';
+import {filteredArray} from '../../gravity-blocks/schema/validators/utils';
import {ContentBase} from '../../sub-blocks/Content/schema';
const ContentProps = {
diff --git a/src/blocks/Map/__stories__/Map.stories.tsx b/src/blocks/Map/__stories__/Map.stories.tsx
index 15bb798584..e5ee808c70 100644
--- a/src/blocks/Map/__stories__/Map.stories.tsx
+++ b/src/blocks/Map/__stories__/Map.stories.tsx
@@ -5,16 +5,23 @@ import {Meta, StoryFn} from '@storybook/react';
import {scriptsSrc, ymapApiKeyForStorybook} from '../../../../.storybook/maps';
import {blockTransform} from '../../../../.storybook/utils';
import {ApiKeyInput} from '../../../components/Map/__stories__/ApiKeyInput';
-import {MapType} from '../../../context/mapsContext/mapsContext';
-import {MapProvider, gmapApiKeyIdInLS} from '../../../context/mapsContext/mapsProvider';
+import {MapType} from '../../../gravity-blocks/context/mapsContext/mapsContext';
+import {
+ MapProvider,
+ gmapApiKeyIdInLS,
+} from '../../../gravity-blocks/context/mapsContext/mapsProvider';
import {MapBlockModel, MapBlockProps} from '../../../models';
import MapBlock from '../Map';
+import {form} from '../form';
import data from './data.json';
export default {
title: 'Blocks/Map',
component: MapBlock,
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const DefaultTemplate: StoryFn = (args) => (
diff --git a/src/blocks/Map/form.ts b/src/blocks/Map/form.ts
new file mode 100644
index 0000000000..ebac4e63ea
--- /dev/null
+++ b/src/blocks/Map/form.ts
@@ -0,0 +1,14 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFormFieldsFromAjvSchema} from '../../form-generator-v2/utils/generateFormFieldsFromAjv';
+
+import {MapBlock as MapBlockSchema} from './schema';
+
+// TODO: change to custom block schema
+export const form = generateFormFieldsFromAjvSchema(
+ MapBlockSchema['map-block'] as unknown as JSONSchemaType<{}>,
+);
+
+export const defaultValue = {
+ title: 'Map Block',
+};
diff --git a/src/blocks/Map/index.ts b/src/blocks/Map/index.ts
new file mode 100644
index 0000000000..ab70a8eb92
--- /dev/null
+++ b/src/blocks/Map/index.ts
@@ -0,0 +1,15 @@
+import MapBlock from './Map';
+import {defaultValue, form} from './form';
+
+const MapBlockConfig = {
+ type: '@gravity-ui/page-constructor/map-block',
+ component: MapBlock,
+ schema: {
+ name: 'Map Block',
+ group: '@gravity-ui/page-constructor/UnfinishedBlocks',
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default MapBlockConfig;
diff --git a/src/blocks/Map/index_deprecated.ts b/src/blocks/Map/index_deprecated.ts
new file mode 100644
index 0000000000..8e9fd33d47
--- /dev/null
+++ b/src/blocks/Map/index_deprecated.ts
@@ -0,0 +1,16 @@
+import MapBlock from './Map';
+import {defaultValue, form} from './form';
+
+const MapBlockConfig = {
+ type: 'map-block',
+ component: MapBlock,
+ schema: {
+ name: 'Map Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default MapBlockConfig;
diff --git a/src/blocks/Map/schema.ts b/src/blocks/Map/schema.ts
index dc2e3bb906..9b4f72357d 100644
--- a/src/blocks/Map/schema.ts
+++ b/src/blocks/Map/schema.ts
@@ -1,4 +1,4 @@
-import {MapProps} from '../../schema/validators/common';
+import {MapProps} from '../../gravity-blocks/schema/validators/common';
import {MediaBlockBaseProps} from '../Media/schema';
export const Map = {
diff --git a/src/blocks/Media/Media.tsx b/src/blocks/Media/Media.tsx
index e8e5720dbf..364c18d69b 100644
--- a/src/blocks/Media/Media.tsx
+++ b/src/blocks/Media/Media.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import Media from '../../components/Media/Media';
import MediaBase from '../../components/MediaBase/MediaBase';
-import {useTheme} from '../../context/theme';
+import {useTheme} from '../../gravity-blocks/context/theme';
import {MediaBlockProps} from '../../models';
import {block, getThemedValue} from '../../utils';
import {getMediaBorder} from '../../utils/borderSelector';
diff --git a/src/blocks/Media/__stories__/Media.stories.tsx b/src/blocks/Media/__stories__/Media.stories.tsx
index eaafa5e5bd..1ccd082956 100644
--- a/src/blocks/Media/__stories__/Media.stories.tsx
+++ b/src/blocks/Media/__stories__/Media.stories.tsx
@@ -5,12 +5,16 @@ import {Meta, StoryFn} from '@storybook/react';
import {blockTransform} from '../../../../.storybook/utils';
import {MediaBlockModel, MediaBlockProps} from '../../../models';
import Media from '../Media';
+import {form} from '../form';
import data from './data.json';
export default {
title: 'Blocks/Media',
component: Media,
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const DefaultTemplate: StoryFn = (args) => (
diff --git a/src/blocks/Media/form.ts b/src/blocks/Media/form.ts
new file mode 100644
index 0000000000..2b5d6f196c
--- /dev/null
+++ b/src/blocks/Media/form.ts
@@ -0,0 +1,539 @@
+import {Fields} from '../../form-generator-v2/types';
+
+export const form = [
+ {
+ type: 'section',
+ title: 'Layout settings',
+ opened: true,
+ fields: [
+ {
+ type: 'select',
+ title: 'Direction',
+ name: 'direction',
+ options: [
+ {content: 'Media-content', value: 'media-content'},
+ {content: 'Content-media', value: 'content-media'},
+ ],
+ defaultValue: 'content-media',
+ },
+ {
+ type: 'select',
+ title: 'Mobile direction',
+ name: 'mobileDirection',
+ options: [
+ {content: 'Media-content', value: 'media-content'},
+ {content: 'Content-media', value: 'content-media'},
+ ],
+ defaultValue: 'content-media',
+ },
+ {
+ type: 'switch',
+ title: 'Large media',
+ name: 'largeMedia',
+ },
+ {
+ type: 'switch',
+ title: 'Media only',
+ name: 'mediaOnly',
+ },
+ ],
+ },
+ {
+ type: 'section',
+ opened: true,
+ title: 'Text',
+ fields: [
+ {
+ type: 'textInput',
+ title: 'Title',
+ name: 'title',
+ placeholder: 'Text',
+ },
+ {
+ type: 'textArea',
+ title: 'Description',
+ name: 'description',
+ placeholder: 'Text',
+ },
+ {
+ type: 'textArea',
+ title: 'Additional info',
+ name: 'additionalInfo',
+ placeholder: 'Text',
+ },
+ {
+ type: 'select',
+ title: 'Text size',
+ name: 'size',
+ options: [
+ {value: 's', content: 'S'},
+ {value: 'm', content: 'M'},
+ {value: 'l', content: 'L'},
+ ],
+ defaultValue: 'l',
+ },
+ {
+ type: 'segmentedRadioGroup',
+ title: 'Theme',
+ options: [
+ {content: 'Light', value: 'light'},
+ {content: 'Dark', value: 'dark'},
+ ],
+ name: 'theme',
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Content list',
+ withAddButton: true,
+ index: 'index1',
+ itemTitle: 'Item {{index1}}',
+ itemView: 'card',
+ fields: [
+ {
+ type: 'textInput',
+ title: 'Title',
+ name: 'list[{{index1}}].title',
+ placeholder: 'Text',
+ },
+ {
+ type: 'textArea',
+ title: 'Description',
+ name: 'list[{{index1}}].text',
+ placeholder: 'Text',
+ },
+ {
+ type: 'textInput',
+ title: 'URL icon',
+ name: 'list[{{index1}}].icon',
+ placeholder: 'https://',
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Buttons',
+ withAddButton: true,
+ index: 'index',
+ itemTitle: 'Button {{index}}',
+ itemView: 'card',
+ fields: [
+ {
+ type: 'section',
+ title: 'Main settings',
+ opened: true,
+ fields: [
+ {
+ title: 'Text',
+ type: 'textInput',
+ name: 'buttons[{{index}}].text',
+ placeholder: 'Text',
+ },
+ {
+ title: 'URL',
+ type: 'textInput',
+ name: 'buttons[{{index}}].url',
+ placeholder: 'https://',
+ },
+ {
+ title: 'URL title',
+ type: 'textInput',
+ name: 'buttons[{{index}}].urlTitle',
+ placeholder: 'https://',
+ },
+ {
+ title: 'Style',
+ type: 'select',
+ name: 'buttons[{{index}}].theme',
+ options: [
+ {value: 'action', content: 'Action'},
+ {value: 'outlined', content: 'Outlined'},
+ {value: 'normal', content: 'Normal'},
+ {value: 'monochrome', content: 'Monochrome'},
+ {
+ value: 'outlined-contrast',
+ content: 'Outlined-contrast',
+ },
+ {value: 'normal-contrast', content: 'Normal-contrast'},
+ ],
+ },
+ {
+ title: 'Target',
+ type: 'select',
+ name: 'buttons[{{index}}].target',
+ options: [
+ {value: '_blank'},
+ {value: '_self'},
+ {value: '_parent'},
+ {value: '_top'},
+ ],
+ hasClear: true,
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Analytics tracking',
+ itemView: 'clear',
+ fields: [
+ {
+ title: 'Name',
+ type: 'textInput',
+ name: 'buttons[{{index}}].analyticsEvents[0].name',
+ placeholder: 'Text',
+ },
+ {
+ title: 'Target',
+ type: 'textInput',
+ name: 'buttons[{{index}}].analyticsEvents[0].target',
+ placeholder: 'Text',
+ },
+ {
+ title: 'Counter',
+ type: 'textInput',
+ name: 'buttons[{{index}}].analyticsEvents[0].counters[0].includes',
+ placeholder: 'Text',
+ },
+ {
+ type: 'text',
+ text: 'Only events for the counters listed in the input field will be sent.',
+ level: 'info',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Link',
+ index: 'index1',
+ withAddButton: true,
+ itemTitle: 'Link {{index1}}',
+ itemView: 'card',
+ fields: [
+ {
+ type: 'textInput',
+ title: 'Text',
+ name: 'links[{{index1}}].text',
+ placeholder: 'Text',
+ },
+ {
+ type: 'textInput',
+ title: 'URL',
+ name: 'links[{{index1}}].url',
+ placeholder: 'https://',
+ },
+ {
+ type: 'textInput',
+ title: 'URL title',
+ name: 'links[{{index1}}].urlTitle',
+ placeholder: 'https://',
+ },
+ {
+ type: 'select',
+ title: 'Style',
+ name: 'links[{{index1}}].theme',
+ options: [
+ {content: 'File-link', value: 'file-link'},
+ {content: 'Normal', value: 'normal'},
+ {content: 'Back', value: 'back'},
+ {content: 'Underline', value: 'underline'},
+ ],
+ },
+ {
+ title: 'Target',
+ type: 'select',
+ name: 'links[{{index1}}].target',
+ options: [{value: '_blank'}, {value: '_self'}, {value: '_parent'}, {value: '_top'}],
+ hasClear: true,
+ },
+ {
+ type: 'section',
+ title: 'Analytics tracking',
+ itemView: 'clear',
+ fields: [
+ {
+ title: 'Name',
+ type: 'textInput',
+ name: 'links[{{index1}}].analyticsEvents[0].name',
+ placeholder: 'Text',
+ },
+ {
+ title: 'Target',
+ type: 'textInput',
+ name: 'links[{{index1}}].analyticsEvents[0].target',
+ placeholder: 'Text',
+ },
+ {
+ title: 'Counter',
+ type: 'textInput',
+ name: 'links[{{index1}}].analyticsEvents[0].counters[0].includes',
+ placeholder: 'Text',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'section',
+ title: 'Media',
+ opened: true,
+ fields: [
+ {
+ title: 'Type',
+ name: '_mediaType',
+ options: [
+ {content: 'Image', value: 'image'},
+ {content: 'Video', value: 'video'},
+ ],
+ type: 'segmentedRadioGroup',
+ },
+ {
+ type: 'text',
+ text: 'Light theme',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Desktop',
+ type: 'textInput',
+ name: 'media.light.image.desktop',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Tablet',
+ type: 'textInput',
+ name: 'media.light.image.tablet',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Mobile',
+ type: 'textInput',
+ name: 'media.light.image.mobile',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ type: 'text',
+ text: 'Dark theme',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Desktop',
+ type: 'textInput',
+ name: 'media.dark.image.desktop',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Tablet',
+ type: 'textInput',
+ name: 'media.dark.image.tablet',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Mobile',
+ type: 'textInput',
+ name: 'media.dark.image.mobile',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'image',
+ },
+ ],
+ },
+ {
+ title: 'Type',
+ type: 'select',
+ options: [{value: 'default'}, {value: 'player'}],
+ name: 'media.video.type',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'video',
+ },
+ ],
+ },
+ {
+ title: 'Video URL',
+ type: 'textInput',
+ name: 'media.video.src[0]',
+ placeholder: 'https://',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'video',
+ },
+ ],
+ },
+ {
+ title: 'Muted',
+ type: 'switch',
+ name: 'media.video.muted',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'video',
+ },
+ ],
+ },
+ {
+ title: 'Autoplay',
+ type: 'switch',
+ name: 'media.video.autoplay',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'video',
+ },
+ ],
+ },
+ {
+ title: 'Loop',
+ type: 'switch',
+ name: 'media.video.loop',
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'video',
+ },
+ ],
+ },
+ {
+ type: 'divider',
+ },
+ {
+ title: 'Ratio',
+ type: 'select',
+ name: 'media.ratio',
+ options: [
+ {value: 'auto', content: 'Auto'},
+ {value: String(16 / 9), content: '16:9'},
+ ],
+ defaultValue: String(16 / 9),
+ when: [
+ {
+ field: '_mediaType',
+ operator: '===',
+ value: 'video',
+ },
+ ],
+ },
+ {
+ title: 'Border',
+ type: 'select',
+ name: 'border',
+ defaultValue: 'none',
+ options: [{value: 'none'}, {value: 'shadow'}, {value: 'line'}],
+ when: [
+ {
+ field: '_mediaType',
+ operator: '!==',
+ value: undefined,
+ },
+ ],
+ },
+ ],
+ },
+] as Fields;
+
+export const defaultValue = {
+ title: 'Lorem ipsum dolor sit',
+ description:
+ 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+ additionalInfo:
+ 'Duis aute irure dolor in reprehenderit n voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+ links: [
+ {
+ url: '#',
+ text: 'Learn more',
+ theme: 'normal',
+ arrow: true,
+ },
+ ],
+ buttons: [
+ {
+ text: 'Button',
+ theme: 'action',
+ url: 'https://example.com',
+ },
+ {
+ text: 'Button',
+ theme: 'outlined',
+ url: '#',
+ },
+ ],
+ list: [
+ {
+ title: 'Lorem ipsum',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ title: 'Lorem ipsum ipsum',
+ },
+ ],
+ media: {
+ light: {
+ image: {
+ desktop:
+ 'https://storage.yandexcloud.net/cloud-www-assets/constructor/main/new/media-01-01.jpg',
+ },
+ },
+ },
+ _mediaType: 'image',
+};
diff --git a/src/blocks/Media/icon.ts b/src/blocks/Media/icon.ts
new file mode 100644
index 0000000000..5e9b841673
--- /dev/null
+++ b/src/blocks/Media/icon.ts
@@ -0,0 +1,13 @@
+import {svgToDataUri} from '../../utils/svg';
+
+export default svgToDataUri(
+ ``,
+);
diff --git a/src/blocks/Media/index.ts b/src/blocks/Media/index.ts
new file mode 100644
index 0000000000..194c433a1e
--- /dev/null
+++ b/src/blocks/Media/index.ts
@@ -0,0 +1,17 @@
+import MediaBlock from './Media';
+import {defaultValue, form} from './form';
+import icon from './icon';
+
+const MediaBlockConfig = {
+ type: '@gravity-ui/page-constructor/media-block',
+ component: MediaBlock,
+ schema: {
+ name: 'Media Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: form,
+ default: defaultValue,
+ previewImg: icon,
+ },
+};
+
+export default MediaBlockConfig;
diff --git a/src/blocks/Media/index_deprecated.ts b/src/blocks/Media/index_deprecated.ts
new file mode 100644
index 0000000000..fc07ad1312
--- /dev/null
+++ b/src/blocks/Media/index_deprecated.ts
@@ -0,0 +1,18 @@
+import MediaBlock from './Media';
+import {defaultValue, form} from './form';
+import svgIcon from './icon';
+
+const MediaBlockConfig = {
+ type: 'media-block',
+ component: MediaBlock,
+ schema: {
+ name: 'Media Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ previewImg: svgIcon,
+ },
+};
+
+export default MediaBlockConfig;
diff --git a/src/blocks/Media/schema.ts b/src/blocks/Media/schema.ts
index adf596ab2b..1fad7f8e3e 100644
--- a/src/blocks/Media/schema.ts
+++ b/src/blocks/Media/schema.ts
@@ -8,7 +8,7 @@ import {
containerSizesObject,
mediaDirection,
withTheme,
-} from '../../schema/validators/common';
+} from '../../gravity-blocks/schema/validators/common';
import {ContentBase} from '../../sub-blocks/Content/schema';
export const Media = {
diff --git a/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx b/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx
index 4c34e6a958..16adb7b3ed 100644
--- a/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx
+++ b/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.tsx
@@ -5,7 +5,8 @@ import Media from '../../components/Media/Media';
import Title from '../../components/Title/Title';
import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
import {BREAKPOINTS} from '../../constants';
-import {useTheme} from '../../context/theme';
+import {useTheme} from '../../gravity-blocks/context/theme';
+import {Grid} from '../../gravity-blocks/grid';
import {PromoFeaturesProps} from '../../models';
import {block, getThemedValue} from '../../utils';
import {mergeVideoMicrodata} from '../../utils/microdata';
@@ -26,43 +27,50 @@ const PromoFeaturesBlock = (props: PromoFeaturesProps) => {
const globalTheme = useTheme();
return (
-
-
- {items.map(({title: cardTitle, text, media, theme: cardTheme}, index) => {
- const blockModifier = backgroundTheme === 'default' ? 'default' : 'light';
- const themeMod = cardTheme || blockModifier || '';
- const themedMedia = getThemedValue(media, globalTheme);
- const allProps = mergeVideoMicrodata(themedMedia, {
- name: cardTitle,
- description: text,
- });
+
+
+
+ {items &&
+ items.map(({title: cardTitle, text, media, theme: cardTheme}, index) => {
+ const blockModifier =
+ backgroundTheme === 'default' ? 'default' : 'light';
+ const themeMod = cardTheme || blockModifier || '';
+ const themedMedia = getThemedValue(media, globalTheme);
+ const allProps = mergeVideoMicrodata(themedMedia, {
+ name: cardTitle,
+ description: text,
+ });
- return (
- = (args) => (
diff --git a/src/blocks/Share/form.ts b/src/blocks/Share/form.ts
new file mode 100644
index 0000000000..04accfc1c0
--- /dev/null
+++ b/src/blocks/Share/form.ts
@@ -0,0 +1,15 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFormFieldsFromAjvSchema} from '../../form-generator-v2/utils/generateFormFieldsFromAjv';
+
+import {ShareBlock as ShareBlockSchema} from './schema';
+
+// TODO: change to custom block schema
+export const form = generateFormFieldsFromAjvSchema(
+ ShareBlockSchema['share-block'] as unknown as JSONSchemaType<{}>,
+);
+
+export const defaultValue = {
+ items: ['vk', 'telegram', 'facebook'],
+ title: 'Share Block',
+};
diff --git a/src/blocks/Share/index.ts b/src/blocks/Share/index.ts
new file mode 100644
index 0000000000..e280b94884
--- /dev/null
+++ b/src/blocks/Share/index.ts
@@ -0,0 +1,15 @@
+import ShareBlock from './Share';
+import {defaultValue, form} from './form';
+
+const ShareBlockConfig = {
+ type: '@gravity-ui/page-constructor/share-block',
+ component: ShareBlock,
+ schema: {
+ name: 'Share Block',
+ group: '@gravity-ui/page-constructor/UnfinishedBlocks',
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default ShareBlockConfig;
diff --git a/src/blocks/Share/index_deprecated.ts b/src/blocks/Share/index_deprecated.ts
new file mode 100644
index 0000000000..e6dbc45446
--- /dev/null
+++ b/src/blocks/Share/index_deprecated.ts
@@ -0,0 +1,16 @@
+import ShareBlock from './Share';
+import {defaultValue, form} from './form';
+
+const ShareBlockConfig = {
+ type: 'share-block',
+ component: ShareBlock,
+ schema: {
+ name: 'Share Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default ShareBlockConfig;
diff --git a/src/blocks/Share/schema.ts b/src/blocks/Share/schema.ts
index 2974e426c2..e151de7a87 100644
--- a/src/blocks/Share/schema.ts
+++ b/src/blocks/Share/schema.ts
@@ -1,4 +1,4 @@
-import {BaseProps} from '../../schema/validators/common';
+import {BaseProps} from '../../gravity-blocks/schema/validators/common';
export const ShareBlock = {
'share-block': {
diff --git a/src/blocks/Slider/Slider.tsx b/src/blocks/Slider/Slider.tsx
index 55618298c8..97c5ca7765 100644
--- a/src/blocks/Slider/Slider.tsx
+++ b/src/blocks/Slider/Slider.tsx
@@ -9,6 +9,7 @@ import {Swiper as SwiperReact, SwiperSlide} from 'swiper/react';
import Anchor from '../../components/Anchor/Anchor';
import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
import Title from '../../components/Title/Title';
+import {Grid} from '../../gravity-blocks/grid';
import {ClassNameProps, Refable, SliderProps as SliderParams, SliderType} from '../../models';
import {block} from '../../utils';
@@ -91,103 +92,105 @@ export const SliderBlock = ({
});
return (
-
+ setIsLocked(true)}
+ onUnlock={() => setIsLocked(false)}
+ watchOverflow
+ watchSlidesProgress
+ touchStartPreventDefault={false}
+ touchAngle={45}
+ threshold={10}
+ longSwipes={true}
+ longSwipesRatio={0.5}
+ resistance={true}
+ resistanceRatio={0.5}
+ a11y={{
+ slideLabelMessage: '',
+ paginationBulletMessage: i18n('dot-label', {index: '{{index}}'}),
+ }}
+ {...paginationProps}
+ >
+ {React.Children.map(children, (elem, index) => (
+
+ {({isVisible}) => (
+
+ ))}
+
+ {arrows && !isLocked && (
+
+
+ )}
+
+
+
);
};
diff --git a/src/blocks/Slider/__stories__/Slider.stories.tsx b/src/blocks/Slider/__stories__/Slider.stories.tsx
index 4528a485f4..2e0ec1f0e3 100644
--- a/src/blocks/Slider/__stories__/Slider.stories.tsx
+++ b/src/blocks/Slider/__stories__/Slider.stories.tsx
@@ -10,12 +10,16 @@ import {
} from '../../../models';
import {BannerCard, BasicCard, Quote} from '../../../sub-blocks';
import Slider, {SliderBlock, SliderProps} from '../Slider';
+import {form} from '../form';
import data from './data.json';
export default {
title: 'Blocks/Slider',
component: Slider,
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const renderChild = (childArgs: SubBlockModels, index?: number) => {
diff --git a/src/blocks/Slider/form.ts b/src/blocks/Slider/form.ts
new file mode 100644
index 0000000000..06f2641eb3
--- /dev/null
+++ b/src/blocks/Slider/form.ts
@@ -0,0 +1,41 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFormFieldsFromAjvSchema} from '../../form-generator-v2/utils/generateFormFieldsFromAjv';
+
+import {SliderBlock as SliderBlockSchema} from './schema';
+
+// TODO: change to custom block schema
+export const form = generateFormFieldsFromAjvSchema(
+ SliderBlockSchema['slider-block'] as unknown as JSONSchemaType<{}>,
+);
+
+export const defaultValue = {
+ dots: true,
+ type: 'slider-block',
+ title: 'Slider Block with Quote Cards',
+ description: 'You can insert any card inside block',
+ slidesToShow: 1,
+ arrows: true,
+ children: [
+ {
+ type: 'quote',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ url: 'https://example.com',
+ author: {
+ firstName: 'Lorem',
+ secondName: 'ipsum',
+ description: 'Lorem ipsum',
+ },
+ },
+ {
+ type: 'quote',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ url: 'https://example.com',
+ author: {
+ firstName: 'Lorem',
+ secondName: 'ipsum',
+ description: 'Lorem ipsum',
+ },
+ },
+ ],
+};
diff --git a/src/blocks/Slider/icon.ts b/src/blocks/Slider/icon.ts
new file mode 100644
index 0000000000..0e6853d2f4
--- /dev/null
+++ b/src/blocks/Slider/icon.ts
@@ -0,0 +1,55 @@
+import {svgToDataUri} from '../../utils/svg';
+
+export default svgToDataUri(
+ ``,
+);
diff --git a/src/blocks/Slider/index.ts b/src/blocks/Slider/index.ts
new file mode 100644
index 0000000000..9f27ac1aac
--- /dev/null
+++ b/src/blocks/Slider/index.ts
@@ -0,0 +1,17 @@
+import SliderBlock from './Slider';
+import {defaultValue, form} from './form';
+import icon from './icon';
+
+const SliderBlockConfig = {
+ type: '@gravity-ui/page-constructor/slider-block',
+ component: SliderBlock,
+ schema: {
+ name: 'Slider Block',
+ group: '@gravity-ui/page-constructor/CardContainers',
+ inputs: form,
+ default: defaultValue,
+ previewImg: icon,
+ },
+};
+
+export default SliderBlockConfig;
diff --git a/src/blocks/Slider/index_deprecated.ts b/src/blocks/Slider/index_deprecated.ts
new file mode 100644
index 0000000000..1f6a76821f
--- /dev/null
+++ b/src/blocks/Slider/index_deprecated.ts
@@ -0,0 +1,18 @@
+import SliderBlock from './Slider';
+import {defaultValue, form} from './form';
+import icon from './icon';
+
+const SliderBlockConfig = {
+ type: 'slider-block',
+ component: SliderBlock,
+ schema: {
+ name: 'Slider Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ previewImg: icon,
+ },
+};
+
+export default SliderBlockConfig;
diff --git a/src/blocks/Slider/schema.ts b/src/blocks/Slider/schema.ts
index 94f35b02c5..07e7eb65de 100644
--- a/src/blocks/Slider/schema.ts
+++ b/src/blocks/Slider/schema.ts
@@ -5,7 +5,7 @@ import {
ChildrenCardsProps,
sliderSizesObject,
textSize,
-} from '../../schema/validators/common';
+} from '../../gravity-blocks/schema/validators/common';
const LoadableProps = {
additionalProperties: false,
diff --git a/src/blocks/SliderOld/SliderOld.tsx b/src/blocks/SliderOld/SliderOld.tsx
index e6eea21d0b..013c26074b 100644
--- a/src/blocks/SliderOld/SliderOld.tsx
+++ b/src/blocks/SliderOld/SliderOld.tsx
@@ -11,10 +11,10 @@ import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
import OutsideClick from '../../components/OutsideClick/OutsideClick';
import Title from '../../components/Title/Title';
import {BREAKPOINTS} from '../../constants';
-import {MobileContext} from '../../context/mobileContext';
-import {SSRContext} from '../../context/ssrContext';
-import {StylesContext} from '../../context/stylesContext/StylesContext';
-import useFocus from '../../hooks/useFocus';
+import {MobileContext} from '../../gravity-blocks/context/mobileContext';
+import {SSRContext} from '../../gravity-blocks/context/ssrContext';
+import {StylesContext} from '../../gravity-blocks/context/stylesContext/StylesContext';
+import useFocus from '../../gravity-blocks/hooks/useFocus';
import {
ClassNameProps,
Refable,
diff --git a/src/blocks/SliderOld/__stories__/Slider.stories.tsx b/src/blocks/SliderOld/__stories__/Slider.stories.tsx
index 0872f8c2e9..8b1636fd2d 100644
--- a/src/blocks/SliderOld/__stories__/Slider.stories.tsx
+++ b/src/blocks/SliderOld/__stories__/Slider.stories.tsx
@@ -6,6 +6,7 @@ import {blockTransform} from '../../../../.storybook/utils';
import {subBlockMap} from '../../../constructor-items';
import {SliderOldBlockModel, SubBlock} from '../../../models';
import SliderOld, {SliderOldProps} from '../SliderOld';
+import {form} from '../form';
import data from './data.json';
@@ -34,6 +35,9 @@ export default {
),
],
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const DefaultTemplate: StoryFn
-
+
+
+
);
};
diff --git a/src/blocks/Info/__stories__/Info.stories.tsx b/src/blocks/Info/__stories__/Info.stories.tsx
index 08ad7ea7cc..47853a44d7 100644
--- a/src/blocks/Info/__stories__/Info.stories.tsx
+++ b/src/blocks/Info/__stories__/Info.stories.tsx
@@ -3,12 +3,16 @@ import {Meta, StoryFn} from '@storybook/react';
import {blockTransform} from '../../../../.storybook/utils';
import {CustomBlock, InfoBlockModel, InfoBlockProps} from '../../../models';
import Info from '../Info';
+import {form} from '../form';
import data from './data.json';
export default {
title: 'Blocks/Info',
component: Info,
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const DefaultTemplate: StoryFn
+
{
/>
-
+
-
- = (args) => {
diff --git a/src/blocks/PromoFeaturesBlock/form.ts b/src/blocks/PromoFeaturesBlock/form.ts
new file mode 100644
index 0000000000..1c117a7ab7
--- /dev/null
+++ b/src/blocks/PromoFeaturesBlock/form.ts
@@ -0,0 +1,44 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFormFieldsFromAjvSchema} from '../../form-generator-v2/utils/generateFormFieldsFromAjv';
+
+import {PromoFeaturesBlock as PromoFeaturesBlockSchema} from './schema';
+
+// TODO: change to custom block schema
+export const form = generateFormFieldsFromAjvSchema(
+ PromoFeaturesBlockSchema['promo-features-block'] as unknown as JSONSchemaType<{}>,
+);
+
+export const defaultValue = {
+ title: 'Promo Features Block',
+ theme: 'default',
+ items: [
+ {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ theme: 'accent',
+ },
+ {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ theme: 'accent-light',
+ },
+ {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ theme: 'primary',
+ },
+ ],
+};
diff --git a/src/blocks/PromoFeaturesBlock/index.ts b/src/blocks/PromoFeaturesBlock/index.ts
new file mode 100644
index 0000000000..90f68f5dce
--- /dev/null
+++ b/src/blocks/PromoFeaturesBlock/index.ts
@@ -0,0 +1,17 @@
+import {BlockData} from '../../constructor-items';
+
+import PromoFeaturesBlock from './PromoFeaturesBlock';
+import {defaultValue, form} from './form';
+
+const PromoFeaturesBlockConfig: BlockData = {
+ type: '@gravity-ui/page-constructor/promo-features-block',
+ component: PromoFeaturesBlock,
+ schema: {
+ name: 'Promo Features Block',
+ group: '@gravity-ui/page-constructor/UnfinishedBlocks',
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default PromoFeaturesBlockConfig;
diff --git a/src/blocks/PromoFeaturesBlock/index_deprecated.ts b/src/blocks/PromoFeaturesBlock/index_deprecated.ts
new file mode 100644
index 0000000000..013d043d39
--- /dev/null
+++ b/src/blocks/PromoFeaturesBlock/index_deprecated.ts
@@ -0,0 +1,16 @@
+import PromoFeaturesBlock from './PromoFeaturesBlock';
+import {defaultValue, form} from './form';
+
+const PromoFeaturesBlockConfig = {
+ type: 'promo-features-block',
+ component: PromoFeaturesBlock,
+ schema: {
+ name: 'Promo Features Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ },
+};
+
+export default PromoFeaturesBlockConfig;
diff --git a/src/blocks/PromoFeaturesBlock/schema.ts b/src/blocks/PromoFeaturesBlock/schema.ts
index 0f2407df9d..68e49ded52 100644
--- a/src/blocks/PromoFeaturesBlock/schema.ts
+++ b/src/blocks/PromoFeaturesBlock/schema.ts
@@ -1,5 +1,9 @@
-import {AnimatableProps, BlockBaseProps, BlockHeaderProps} from '../../schema/validators/common';
-import {filteredArray} from '../../schema/validators/utils';
+import {
+ AnimatableProps,
+ BlockBaseProps,
+ BlockHeaderProps,
+} from '../../gravity-blocks/schema/validators/common';
+import {filteredArray} from '../../gravity-blocks/schema/validators/utils';
import {Media} from '../Media/schema';
export const PromoFeaturesItem = {
diff --git a/src/blocks/Questions/Questions.tsx b/src/blocks/Questions/Questions.tsx
index a0160a5df0..39dc367549 100644
--- a/src/blocks/Questions/Questions.tsx
+++ b/src/blocks/Questions/Questions.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import {Col, Row} from '../../grid';
+import {Col, Grid, Row} from '../../gravity-blocks/grid';
import {QuestionsProps} from '../../models';
import {Content} from '../../sub-blocks';
import {block} from '../../utils';
@@ -60,50 +60,52 @@ const QuestionsBlock = (props: QuestionsProps) => {
return (
= (args) => {
diff --git a/src/blocks/Questions/form.ts b/src/blocks/Questions/form.ts
new file mode 100644
index 0000000000..5396609732
--- /dev/null
+++ b/src/blocks/Questions/form.ts
@@ -0,0 +1,44 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFormFieldsFromAjvSchema} from '../../form-generator-v2/utils/generateFormFieldsFromAjv';
+
+import {QuestionsBlock as QuestionsBlockSchema} from './schema';
+
+// TODO: change to custom block schema
+export const form = generateFormFieldsFromAjvSchema(
+ QuestionsBlockSchema['questions-block'] as unknown as JSONSchemaType<{}>,
+);
+
+export const defaultValue = {
+ type: 'questions-block',
+ title: 'Questions Block',
+ text: 'Here you can find answers.',
+ links: [
+ {
+ text: 'Report for 2024',
+ url: 'file.doc',
+ },
+ ],
+ buttons: [
+ {
+ text: 'Get more',
+ theme: 'outlined-info',
+ },
+ ],
+ list: [
+ {
+ title: 'Report for 2024',
+ text: 'Some advice here',
+ },
+ ],
+ items: [
+ {
+ title: 'Question 1',
+ text: 'Answer for question 1',
+ },
+ {
+ title: 'Question 2',
+ text: 'Answer for question 2',
+ },
+ ],
+};
diff --git a/src/blocks/Questions/icon.ts b/src/blocks/Questions/icon.ts
new file mode 100644
index 0000000000..0e49676093
--- /dev/null
+++ b/src/blocks/Questions/icon.ts
@@ -0,0 +1,19 @@
+import {svgToDataUri} from '../../utils/svg';
+
+export default svgToDataUri(
+ ``,
+);
diff --git a/src/blocks/Questions/index.ts b/src/blocks/Questions/index.ts
new file mode 100644
index 0000000000..6ab9c3daf9
--- /dev/null
+++ b/src/blocks/Questions/index.ts
@@ -0,0 +1,19 @@
+import {BlockData} from '../../constructor-items';
+
+import QuestionsBlock from './Questions';
+import {defaultValue, form} from './form';
+import icon from './icon';
+
+const QuestionsBlockConfig: BlockData = {
+ type: '@gravity-ui/page-constructor/questions-block',
+ component: QuestionsBlock,
+ schema: {
+ name: 'Questions Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: form,
+ default: defaultValue,
+ previewImg: icon,
+ },
+};
+
+export default QuestionsBlockConfig;
diff --git a/src/blocks/Questions/index_deprecated.ts b/src/blocks/Questions/index_deprecated.ts
new file mode 100644
index 0000000000..4785ffd4e8
--- /dev/null
+++ b/src/blocks/Questions/index_deprecated.ts
@@ -0,0 +1,18 @@
+import QuestionsBlock from './Questions';
+import {defaultValue, form} from './form';
+import icon from './icon';
+
+const QuestionsBlockConfig = {
+ type: 'questions-block',
+ component: QuestionsBlock,
+ schema: {
+ name: 'Questions Block',
+ group: '@deprecated',
+ hidden: true,
+ inputs: form,
+ default: defaultValue,
+ previewImg: icon,
+ },
+};
+
+export default QuestionsBlockConfig;
diff --git a/src/blocks/Questions/schema.ts b/src/blocks/Questions/schema.ts
index 6b910bbe56..10407e2e16 100644
--- a/src/blocks/Questions/schema.ts
+++ b/src/blocks/Questions/schema.ts
@@ -1,7 +1,7 @@
import omit from 'lodash/omit';
-import {BlockBaseProps, LinkProps} from '../../schema/validators/common';
-import {filteredArray} from '../../schema/validators/utils';
+import {BlockBaseProps, LinkProps} from '../../gravity-blocks/schema/validators/common';
+import {filteredArray} from '../../gravity-blocks/schema/validators/utils';
import {ContentBase} from '../../sub-blocks/Content/schema';
const QuestionsBlockContentProps = omit(ContentBase, ['size', 'theme']);
diff --git a/src/blocks/Share/Share.tsx b/src/blocks/Share/Share.tsx
index 0c17d7dd88..abbc61ab62 100644
--- a/src/blocks/Share/Share.tsx
+++ b/src/blocks/Share/Share.tsx
@@ -3,13 +3,13 @@ import * as React from 'react';
import {Button, Icon} from '@gravity-ui/uikit';
import {YFMWrapper} from '../../components';
-import {LocationContext} from '../../context/locationContext';
-import {useAnalytics} from '../../hooks';
-import {Facebook} from '../../icons/Facebook';
-import {Linkedin} from '../../icons/Linkedin';
-import {Telegram} from '../../icons/Telegram';
-import {Twitter} from '../../icons/Twitter';
-import {Vk} from '../../icons/Vk';
+import {LocationContext} from '../../gravity-blocks/context/locationContext';
+import {useAnalytics} from '../../gravity-blocks/hooks';
+import {Facebook} from '../../gravity-blocks/icons/Facebook';
+import {Linkedin} from '../../gravity-blocks/icons/Linkedin';
+import {Telegram} from '../../gravity-blocks/icons/Telegram';
+import {Twitter} from '../../gravity-blocks/icons/Twitter';
+import {Vk} from '../../gravity-blocks/icons/Vk';
import {DefaultEventNames, ShareBlockProps} from '../../models';
import {block, getAbsolutePath, getShareLink} from '../../utils';
@@ -52,29 +52,32 @@ const Share = ({items, title}: ShareBlockProps) => {
);
diff --git a/src/blocks/Share/__stories__/Share.stories.tsx b/src/blocks/Share/__stories__/Share.stories.tsx
index e09861e916..d0a098b12e 100644
--- a/src/blocks/Share/__stories__/Share.stories.tsx
+++ b/src/blocks/Share/__stories__/Share.stories.tsx
@@ -3,6 +3,7 @@ import {Meta, StoryFn} from '@storybook/react';
import {blockTransform} from '../../../../.storybook/utils';
import {PCShareSocialNetwork, ShareBLockModel, ShareBlockProps} from '../../../models';
import Share from '../Share';
+import {form} from '../form';
import data from './data.json';
@@ -15,6 +16,9 @@ export default {
options: Object.values(PCShareSocialNetwork),
},
},
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const DefaultTemplate: StoryFn
-
- );
- })}
-
-
+ );
+ })}
+
+
+
);
};
diff --git a/src/blocks/PromoFeaturesBlock/__stories__/PromoFeaturesBlock.stories.tsx b/src/blocks/PromoFeaturesBlock/__stories__/PromoFeaturesBlock.stories.tsx
index 964a41ff78..ff6c5ddcf6 100644
--- a/src/blocks/PromoFeaturesBlock/__stories__/PromoFeaturesBlock.stories.tsx
+++ b/src/blocks/PromoFeaturesBlock/__stories__/PromoFeaturesBlock.stories.tsx
@@ -3,6 +3,7 @@ import {Meta, StoryFn} from '@storybook/react';
import {blockTransform} from '../../../../.storybook/utils';
import {PromoFeaturesBlockModel, PromoFeaturesProps} from '../../../models';
import PromoFeaturesBlock from '../PromoFeaturesBlock';
+import {form} from '../form';
import data from './data.json';
@@ -12,6 +13,9 @@ export default {
args: {
theme: 'default',
},
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const DefaultTemplate: StoryFn{cardTitle}
-
-
- {media &&
+
-
+
+ {media && {cardTitle}
+
+
+
{faqMicrodataScript}
-
-
+
+
+ return (
+
+
);
};
diff --git a/src/blocks/Questions/__stories__/Questions.stories.tsx b/src/blocks/Questions/__stories__/Questions.stories.tsx
index d5b40a2e2c..db5d8c04a4 100644
--- a/src/blocks/Questions/__stories__/Questions.stories.tsx
+++ b/src/blocks/Questions/__stories__/Questions.stories.tsx
@@ -3,12 +3,16 @@ import {Meta, StoryFn} from '@storybook/react';
import {blockTransform} from '../../../../.storybook/utils';
import {QuestionsBlockModel, QuestionsProps} from '../../../models';
import QuestionsBlock from '../Questions';
+import {form} from '../form';
import data from './data.json';
export default {
title: 'Blocks/Questions',
component: QuestionsBlock,
+ parameters: {
+ inputs: form,
+ },
} as Meta;
const DefaultTemplate: StoryFn
-
-
-
+
+
+ {i18n('constructor-share')}
)}
- {items.map((type) => {
- const url = getAbsolutePath(hostname, pathname);
- const socialUrl = getShareLink(url, type);
- const icon = icons[type];
- const urlTitle = i18n(`${type}-title`);
- const buttonLabel = i18n(`${type}-label`);
+ {items &&
+ items.map((type) => {
+ const url = getAbsolutePath(hostname, pathname);
+ const socialUrl = getShareLink(url, type);
+ const icon = icons[type];
+ const urlTitle = i18n(`${type}-title`);
+ const buttonLabel = i18n(`${type}-label`);
- return (
-
- );
- })}
+ return (
+
+ );
+ })}
- {anchorId &&
- setIsLocked(true)}
- onUnlock={() => setIsLocked(false)}
- watchOverflow
- watchSlidesProgress
- touchStartPreventDefault={false}
- touchAngle={45}
- threshold={10}
- longSwipes={true}
- longSwipesRatio={0.5}
- resistance={true}
- resistanceRatio={0.5}
- a11y={{
- slideLabelMessage: '',
- paginationBulletMessage: i18n('dot-label', {index: '{{index}}'}),
- }}
- {...paginationProps}
- >
- {React.Children.map(children, (elem, index) => (
-
- {({isVisible}) => (
-
- ))}
-
- {arrows && !isLocked && (
-
-
+
+
-
+ >
+ {anchorId &&
- {elem}
-
- )}
-
-
-
- {disclaimer ? (
-
-
- {disclaimer?.text}
-
- ) : null}
-
+ {elem}
+
+ )}
+
+
+
+ {disclaimer ? (
+
+
+ {disclaimer?.text}
+
+ ) : null}
+
+ {children}
+
+ );
+};
+
+export default ChildrenItemWrap;
diff --git a/src/components/editor/ChildrensWrap/ChildrensWrap.scss b/src/components/editor/ChildrensWrap/ChildrensWrap.scss
new file mode 100644
index 0000000000..3338e32cc5
--- /dev/null
+++ b/src/components/editor/ChildrensWrap/ChildrensWrap.scss
@@ -0,0 +1,11 @@
+@import '../../../../styles/mixins.scss';
+@import '../../../../styles/variables.scss';
+
+$block: '.#{$ns}childrens-wrap';
+
+#{$block} {
+ // TODO: Custom drop zone styles
+ &_drop-zone {
+ padding: 20px;
+ }
+}
diff --git a/src/components/editor/ChildrensWrap/ChildrensWrap.tsx b/src/components/editor/ChildrensWrap/ChildrensWrap.tsx
new file mode 100644
index 0000000000..193a8e743b
--- /dev/null
+++ b/src/components/editor/ChildrensWrap/ChildrensWrap.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import _ from 'lodash';
+
+import {BlockIdContext} from '../../../context/blockIdContext';
+import {generateChildrenPathFromArray} from '../../../editor-v2';
+import {usePCEditorBlockRegister} from '../../../hooks/usePCEditorBlockRegister';
+import {usePCEditorStore} from '../../../hooks/usePCEditorStore';
+import {block} from '../../../utils';
+
+import './ChildrensWrap.scss';
+
+const b = block('childrens-wrap');
+
+export interface ChildrensWrapProps extends React.PropsWithChildren {}
+
+const ChildrensWrap = ({children}: ChildrensWrapProps) => {
+ const {manipulateOverlayMode, content} = usePCEditorStore();
+
+ const parentBlockId = React.useContext(BlockIdContext);
+
+ const newBlockIndex = React.useMemo(() => {
+ const contentConfig = _.get(content.blocks, generateChildrenPathFromArray(parentBlockId));
+ return contentConfig?.children?.length ?? 0;
+ }, [content.blocks, parentBlockId]);
+
+ const path = React.useMemo(
+ () => [...parentBlockId, newBlockIndex],
+ [parentBlockId, newBlockIndex],
+ );
+
+ const blockRef = usePCEditorBlockRegister(path, true);
+
+ if (manipulateOverlayMode === 'insert' && newBlockIndex === 0) {
+ return ;
+ }
+
+ if (manipulateOverlayMode === 'insert') {
+ return (
+
+ {children}
+
+ );
+ }
+
+ return children;
+};
+
+export default ChildrensWrap;
diff --git a/src/components/editor/EmptyBlocksWrapper/EmptyBlocksWrapper.scss b/src/components/editor/EmptyBlocksWrapper/EmptyBlocksWrapper.scss
new file mode 100644
index 0000000000..d3bc3498b3
--- /dev/null
+++ b/src/components/editor/EmptyBlocksWrapper/EmptyBlocksWrapper.scss
@@ -0,0 +1,59 @@
+@import '../../../../styles/mixins.scss';
+@import '../../../../styles/variables.scss';
+
+$block: '.#{$ns}empty-blocks-wrapper';
+
+#{$block} {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 400px;
+ padding: 40px;
+ margin: 20px;
+ border: 3px dashed var(--g-color-base-brand);
+ border-radius: 16px;
+ background-color: var(--g-color-base-generic);
+ user-select: none;
+ transition: all 0.2s ease;
+
+ &:hover {
+ background-color: var(--g-color-base-generic-hover);
+ border-color: var(--g-color-text-link);
+ }
+
+ &__content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 12px;
+ text-align: center;
+ }
+
+ &__icon {
+ width: 64px;
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 32px;
+ font-weight: 300;
+ color: var(--g-color-base-brand);
+ background-color: var(--g-color-base-background);
+ border-radius: 50%;
+ border: 2px dashed var(--g-color-base-brand);
+ line-height: 1;
+ }
+
+ &__text {
+ font-size: var(--g-text-header-2-font-size);
+ line-height: var(--g-text-header-2-line-height);
+ font-weight: 500;
+ color: var(--g-color-text-primary);
+ }
+
+ &__hint {
+ font-size: var(--g-text-body-1-font-size);
+ line-height: var(--g-text-body-1-line-height);
+ color: var(--g-color-text-secondary);
+ }
+}
diff --git a/src/components/editor/EmptyBlocksWrapper/EmptyBlocksWrapper.tsx b/src/components/editor/EmptyBlocksWrapper/EmptyBlocksWrapper.tsx
new file mode 100644
index 0000000000..da285517e0
--- /dev/null
+++ b/src/components/editor/EmptyBlocksWrapper/EmptyBlocksWrapper.tsx
@@ -0,0 +1,36 @@
+import {usePCEditorBlockRegister} from '../../../hooks/usePCEditorBlockRegister';
+import {usePCEditorStore} from '../../../hooks/usePCEditorStore';
+import {block} from '../../../utils';
+
+import './EmptyBlocksWrapper.scss';
+
+const b = block('empty-blocks-wrapper');
+
+export interface EmptyBlocksWrapperProps {}
+
+const EMPTY_DROP_PATH = [0];
+
+const EmptyBlocksWrapper = () => {
+ const {
+ initialized,
+ content: {blocks},
+ } = usePCEditorStore();
+
+ const blockRef = usePCEditorBlockRegister(EMPTY_DROP_PATH);
+
+ if (!initialized || blocks.length > 0) {
+ return null;
+ }
+
+ return (
+
+
+ );
+};
+
+export default EmptyBlocksWrapper;
diff --git a/src/constructor-items.ts b/src/constructor-items.ts
index cda2913cec..b5a814c6b7 100644
--- a/src/constructor-items.ts
+++ b/src/constructor-items.ts
@@ -1,87 +1,55 @@
-import {
- BannerBlock,
- CardLayoutBlock,
- CompaniesBlock,
- ContentLayoutBlock,
- ExtendedFeaturesBlock,
- FilterBlock,
- FoldableListBlock,
- FormBlock,
- HeaderBlock,
- HeaderSliderBlock,
- HeroBlock,
- IconsBlock,
- InfoBlock,
- MapBlock,
- MediaBlock,
- PromoFeaturesBlock,
- QuestionsBlock,
- ShareBlock,
- SliderBlock,
- SliderOldBlock,
- TableBlock,
- TabsBlock,
-} from './blocks';
-import {BlockType, NavigationItemType, SubBlockType} from './models';
+import * as React from 'react';
+
+import BannerBlockConfig from './blocks/Banner';
+import CardLayoutBlockConfig from './blocks/CardLayout';
+import CompaniesBlockConfig from './blocks/Companies';
+import ContentLayoutBlockConfig from './blocks/ContentLayout';
+import ExtendedFeaturesBlockConfig from './blocks/ExtendedFeatures';
+// import FilterBlockConfig from './blocks/FilterBlock';
+import FormBlockConfig from './blocks/Form';
+import HeaderBlockConfig from './blocks/Header';
+import HeaderSliderBlockConfig from './blocks/HeaderSlider';
+import IconsBlockConfig from './blocks/Icons';
+import InfoBlockConfig from './blocks/Info';
+import MapBlockConfig from './blocks/Map';
+import MediaBlockConfig from './blocks/Media';
+import PromoFeaturesBlockConfig from './blocks/PromoFeaturesBlock';
+import QuestionsBlockConfig from './blocks/Questions';
+import ShareBlockConfig from './blocks/Share';
+import SliderBlockConfig from './blocks/Slider';
+import TableBlockConfig from './blocks/Table';
+import TabsBlockConfig from './blocks/Tabs';
+import {BlockConfig} from './form-generator-v2/types';
import {
GithubButton,
NavigationButton,
NavigationDropdown,
NavigationLink,
-} from './navigation/components/NavigationItem';
-import SocialIcon from './navigation/components/SocialIcon/SocialIcon';
-import {
- BackgroundCard,
- BannerCard,
- BasicCard,
- Content,
- Divider,
- ImageCard,
- LayoutItem,
- MediaCard,
- PriceCard,
- PriceDetailed,
- Quote,
-} from './sub-blocks';
+} from './gravity-blocks/navigation';
+import SocialIcon from './gravity-blocks/navigation/components/SocialIcon/SocialIcon';
+import {BlockType, NavigationItemType, SubBlockType} from './models';
+import BackgroundCardConfig from './sub-blocks/BackgroundCard';
+import BannerCardConfig from './sub-blocks/BannerCard';
+import BasicCardConfig from './sub-blocks/BasicCard';
+import ContentConfig from './sub-blocks/Content';
+import DividerConfig from './sub-blocks/Divider';
+import ImageCardConfig from './sub-blocks/ImageCard';
+import LayoutItemConfig from './sub-blocks/LayoutItem';
+import MediaCardConfig from './sub-blocks/MediaCard';
+import PriceCardConfig from './sub-blocks/PriceCard';
+import QuoteConfig from './sub-blocks/Quote';
-export const blockMap = {
- [BlockType.SliderOldBlock]: SliderOldBlock,
- [BlockType.ExtendedFeaturesBlock]: ExtendedFeaturesBlock,
- [BlockType.PromoFeaturesBlock]: PromoFeaturesBlock,
- [BlockType.QuestionsBlock]: QuestionsBlock,
- [BlockType.FoldableListBlock]: FoldableListBlock,
- [BlockType.BannerBlock]: BannerBlock,
- [BlockType.CompaniesBlock]: CompaniesBlock,
- [BlockType.MediaBlock]: MediaBlock,
- [BlockType.InfoBlock]: InfoBlock,
- [BlockType.TableBlock]: TableBlock,
- [BlockType.TabsBlock]: TabsBlock,
- [BlockType.HeaderBlock]: HeaderBlock,
- [BlockType.HeroBlock]: HeroBlock,
- [BlockType.IconsBlock]: IconsBlock,
- [BlockType.HeaderSliderBlock]: HeaderSliderBlock,
- [BlockType.CardLayoutBlock]: CardLayoutBlock,
- [BlockType.ContentLayoutBlock]: ContentLayoutBlock,
- [BlockType.ShareBlock]: ShareBlock,
- [BlockType.MapBlock]: MapBlock,
- [BlockType.FilterBlock]: FilterBlock,
- [BlockType.FormBlock]: FormBlock,
- [BlockType.SliderBlock]: SliderBlock,
-};
+/**
+ * TODO: remove it
+ * @deprecated use blockDataMap
+ **/
+export const blockMap = {};
-export const subBlockMap = {
- [SubBlockType.Divider]: Divider,
- [SubBlockType.PriceDetailed]: PriceDetailed,
- [SubBlockType.MediaCard]: MediaCard,
- [SubBlockType.BannerCard]: BannerCard,
- [SubBlockType.LayoutItem]: LayoutItem,
- [SubBlockType.BackgroundCard]: BackgroundCard,
- [SubBlockType.BasicCard]: BasicCard,
- [SubBlockType.Content]: Content,
- [SubBlockType.Quote]: Quote,
- [SubBlockType.PriceCard]: PriceCard,
- [SubBlockType.ImageCard]: ImageCard,
-};
+/**
+ * TODO: remove it
+ * @deprecated use blockDataMap
+ **/
+export const subBlockMap = {};
export const navItemMap = {
[NavigationItemType.Button]: NavigationButton,
@@ -90,3 +58,45 @@ export const navItemMap = {
[NavigationItemType.Link]: NavigationLink,
[NavigationItemType.GithubButton]: GithubButton,
};
+
+export interface BlockData {
+ type: string;
+ // TODO: remove any
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ component: React.ComponentType
+
+ +
+ Перетащите блок сюда
+ Блоки находятся на панели слева
+
- {themedBackground && (
-
- {renderMenu && renderMenu()}
- {header && (
-
- {restBlocks && (
-
-
- )}
-
-
- {isBranded &&
- {children}
;
};
-...
+const customExtension = () => ({
+ name: 'Custom Decorator',
+ id: 'my-app/custom-decorator',
+ settings: {
+ blockWrapper: CustomDecoratorWrapper,
+ },
+});
-{wrappedContent}
;
};
diff --git a/src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx b/src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx
index 5ce480b4b2..037b1fa3db 100644
--- a/src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx
+++ b/src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx
@@ -2,10 +2,9 @@ import * as React from 'react';
import get from 'lodash/get';
+import EmptyBlocksWrapper from '../../../../components/editor/EmptyBlocksWrapper/EmptyBlocksWrapper';
import {InnerContext} from '../../../../context/innerContext';
-import {BlockDecoration} from '../../../../customization/BlockDecoration';
import {
- BlockType,
ConstructorBlock as ConstructorBlockType,
LoadableProps,
SubBlock,
@@ -19,20 +18,19 @@ export interface ConstructorBlocksProps {
items: ConstructorBlockType[];
}
-export const ConstructorBlocks = ({items}: ConstructorBlocksProps) => {
- const {blockTypes, loadables, itemMap, shouldRenderBlock} = React.useContext(InnerContext);
+export const ConstructorBlocks: React.FC
-
-
-
+
+ {children}
+
+ {children}
: null;
diff --git a/src/context/blockIdContext/blockIdContext.ts b/src/context/blockIdContext/blockIdContext.ts
index 289ed964df..bc82a8b723 100644
--- a/src/context/blockIdContext/blockIdContext.ts
+++ b/src/context/blockIdContext/blockIdContext.ts
@@ -1,5 +1,5 @@
import * as React from 'react';
-export type BlockIdContextProp = string;
+export type BlockIdContextProp = number[];
-export const BlockIdContext = React.createContext
+ {previewImg ? (
+ 
+ ) : (
+ 
+ )}
+
+ {name}
+
+
+ );
+};
diff --git a/src/editor-v2/components/MessageCard/index.ts b/src/editor-v2/components/MessageCard/index.ts
new file mode 100644
index 0000000000..6dea415f59
--- /dev/null
+++ b/src/editor-v2/components/MessageCard/index.ts
@@ -0,0 +1,2 @@
+export {MessageCard} from './MessageCard';
+export type {MessageCardProps, MessageTheme} from './MessageCard';
diff --git a/src/editor-v2/components/Panels/Panels.scss b/src/editor-v2/components/Panels/Panels.scss
new file mode 100644
index 0000000000..4388f63440
--- /dev/null
+++ b/src/editor-v2/components/Panels/Panels.scss
@@ -0,0 +1,37 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}panels';
+
+#{$block} {
+ &__button-wrap {
+ --pceditor-panels-button-gap: 8px;
+ position: absolute;
+ z-index: 1000;
+
+ &_left {
+ top: var(--pceditor-panels-button-gap);
+ left: calc(100% + var(--pceditor-panels-button-gap));
+ }
+
+ &_right {
+ top: var(--pceditor-panels-button-gap);
+ right: calc(100% + var(--pceditor-panels-button-gap));
+ }
+ }
+
+ &__draggable {
+ position: relative;
+
+ width: 8px;
+ height: 100%;
+ cursor: col-resize;
+ background-color: var(--g-color-line-generic);
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ color: var(--g-color-base-background);
+ }
+}
diff --git a/src/editor-v2/components/Panels/Panels.tsx b/src/editor-v2/components/Panels/Panels.tsx
new file mode 100644
index 0000000000..23c466b149
--- /dev/null
+++ b/src/editor-v2/components/Panels/Panels.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+import {Grip, LayoutSideContentLeft, LayoutSideContentRight} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+import {ImperativePanelHandle, Panel, PanelGroup, PanelResizeHandle} from 'react-resizable-panels';
+
+import {editorCn} from '../../utils/cn';
+
+import './Panels.scss';
+
+const b = editorCn('panels');
+
+interface PanelsProps {
+ left: React.ReactElement;
+ middle: React.ReactElement;
+ right: React.ReactElement;
+}
+
+export const Panels = ({left, right, middle}: PanelsProps) => {
+ const leftPanel = React.useRef
+
+ {title}
+
+
+ {description}
+
+
+
+
+
+ )}
+
+
+
+ )}
+
+ {top.map((TopComponent, idx) => (
+
+ );
+};
diff --git a/src/editor-v2/components/Tabs/Tabs.scss b/src/editor-v2/components/Tabs/Tabs.scss
new file mode 100644
index 0000000000..472aaff44d
--- /dev/null
+++ b/src/editor-v2/components/Tabs/Tabs.scss
@@ -0,0 +1,85 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}tabs';
+
+#{$block} {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ height: 100%;
+
+ .g-button#{$block}__item {
+ color: var(--g-color-text-hint);
+ font-weight: 500;
+ letter-spacing: 0.5px;
+ cursor: pointer;
+ font-size: var(--g-text-code-inline-1-font-size);
+ line-height: var(--g-text-code-inline-2-line-height);
+ align-items: center;
+
+ &_active {
+ pointer-events: none;
+ color: var(--g-color-text-primary);
+ }
+ }
+
+ &__tabs-wrapper {
+ width: 100%;
+ border-bottom: 1px solid var(--g-color-line-generic);
+ display: inline-flex;
+ flex-direction: row;
+ padding: 12px 4px;
+ flex: 0 0 auto;
+ box-sizing: border-box;
+ overflow-x: auto;
+ position: sticky;
+ top: 0;
+ background-color: var(--g-color-base-background);
+ /* This ensures the background is visible when sticky */
+ z-index: 2;
+ /* Higher z-index for parent tabs-wrapper */
+ }
+
+ /* Make sure any nested tabs component also has proper overflow behavior */
+ #{$block} {
+ overflow: visible;
+
+ /* Ensure nested tabs-wrapper elements are also sticky but positioned below parent tabs-wrapper */
+ /* This selector specifically targets tabs-wrapper elements inside a nested tabs component */
+ #{$block} &__tabs-wrapper {
+ position: sticky;
+ /* Position below parent tabs-wrapper */
+ z-index: 1;
+ background-color: var(--g-color-base-background);
+ }
+ }
+
+ &__body {
+ flex: 1;
+ min-height: 1px;
+ height: 100%;
+ position: relative;
+ }
+
+ &__panel {
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ height: 100%;
+
+ &[hidden] {
+ display: none;
+ }
+ }
+
+ &__item {
+ @include custom-scrollbar();
+ overflow-y: auto;
+ max-height: 100%;
+
+ &_padding {
+ padding: 16px 12px;
+ }
+ }
+}
diff --git a/src/editor-v2/components/Tabs/Tabs.tsx b/src/editor-v2/components/Tabs/Tabs.tsx
new file mode 100644
index 0000000000..69cb93d443
--- /dev/null
+++ b/src/editor-v2/components/Tabs/Tabs.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+import {Button} from '@gravity-ui/uikit';
+
+import {editorCn} from '../../utils/cn';
+
+import './Tabs.scss';
+
+const b = editorCn('tabs');
+
+export interface TabItemProps {
+ id: string;
+ title: string;
+ component: React.ElementType;
+ withPadding?: boolean;
+}
+
+export interface TabsProps {
+ className?: string;
+ items: TabItemProps[];
+ defaultTab?: string | null;
+}
+
+const Tabs = ({className, items, defaultTab}: TabsProps) => {
+ const [currentTab, setCurrentTab] = React.useState(defaultTab);
+
+ const activeTab = React.useMemo(() => {
+ if (currentTab) {
+ const findTab = items.find(({id}) => id === currentTab);
+ if (findTab) {
+ return findTab;
+ }
+ }
+
+ return items[0] || null;
+ }, [currentTab, items]);
+
+ const handleClick = React.useCallback(
+ (tabItem: TabItemProps) => () => {
+ setCurrentTab(tabItem.id);
+ },
+ [],
+ );
+
+ return (
+
+
+ ))}
+
+ {items.length > 1 && (
+
+ );
+};
+
+export default Tabs;
diff --git a/src/editor-v2/constants.ts b/src/editor-v2/constants.ts
new file mode 100644
index 0000000000..22c3e53f27
--- /dev/null
+++ b/src/editor-v2/constants.ts
@@ -0,0 +1 @@
+export const ZOOM_STEPS = [25, 33, 50, 75, 100, 125, 150, 200, 250, 300];
diff --git a/src/editor-v2/constants/messages.ts b/src/editor-v2/constants/messages.ts
new file mode 100644
index 0000000000..21fc108545
--- /dev/null
+++ b/src/editor-v2/constants/messages.ts
@@ -0,0 +1,12 @@
+export const MESSAGES = {
+ NO_BLOCK_SELECTED: {
+ title: 'Блок не выбран',
+ description:
+ 'Выберите блок на экране или в слоях в левом меню для редактирования его свойств',
+ },
+ UNSUPPORTED_BLOCK: {
+ title: 'Неподдерживаемый блок',
+ description:
+ 'Данный тип блока не поддерживается в редакторе. Но вы также можете отредактировать его конфигурацию вручную в меню RAW.',
+ },
+} as const;
diff --git a/src/editor-v2/containers/BigOverlay/BigOverlay.scss b/src/editor-v2/containers/BigOverlay/BigOverlay.scss
new file mode 100644
index 0000000000..1d09dfdb1b
--- /dev/null
+++ b/src/editor-v2/containers/BigOverlay/BigOverlay.scss
@@ -0,0 +1,31 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}big-overlay';
+
+#{$block} {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ overflow: hidden;
+
+ $border: 3px var(--g-color-base-brand) solid;
+
+ &__border {
+ pointer-events: none;
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ margin-left: -20px;
+ margin-top: -20px;
+ background-color: var(--g-color-base-brand);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 10px;
+ //transition: top .1s ease, left .1s ease, height .1s ease, width .1s ease;
+ }
+}
diff --git a/src/editor-v2/containers/BigOverlay/BigOverlay.tsx b/src/editor-v2/containers/BigOverlay/BigOverlay.tsx
new file mode 100644
index 0000000000..adcc724a9d
--- /dev/null
+++ b/src/editor-v2/containers/BigOverlay/BigOverlay.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+import {Stop} from '@gravity-ui/icons';
+
+import {useMainEditorStore} from '../../hooks/useMainEditorStore';
+import {editorCn} from '../../utils/cn';
+
+import './BigOverlay.scss';
+
+const b = editorCn('big-overlay');
+
+const BigOverlay = ({className}: {className?: string}) => {
+ const {manipulateOverlayMode} = useMainEditorStore();
+ const [mousePosition, setMousePosition] = React.useState<{x: number; y: number} | undefined>(
+ undefined,
+ );
+ const overlayRef = React.useRef
+ {items.map((item) => {
+ const isActive = item.id === activeTab.id;
+
+ return (
+
+ );
+ })}
+
+ )}
+
+ {items.map((item) => {
+ const isActive = item.id === activeTab.id;
+ const TabComponent = item.component;
+ return (
+
+
+
+ );
+ })}
+
+ {mousePosition && manipulateOverlayMode ? (
+
+ );
+};
+
+export default BigOverlay;
diff --git a/src/editor-v2/containers/BlockConfigForm/BlockConfigForm.scss b/src/editor-v2/containers/BlockConfigForm/BlockConfigForm.scss
new file mode 100644
index 0000000000..8e679df837
--- /dev/null
+++ b/src/editor-v2/containers/BlockConfigForm/BlockConfigForm.scss
@@ -0,0 +1,31 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}block-config-form';
+
+#{$block} {
+ height: 100%;
+
+ &_empty {
+ padding: 16px 12px;
+ }
+
+ &__title {
+ @include text-subheader-3;
+ padding: 16px 12px;
+ }
+
+ &__form {
+ padding: 0 0 12px;
+ }
+
+ &__empty {
+ padding: 12px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ height: 100%;
+ width: 100%;
+ }
+}
diff --git a/src/editor-v2/containers/BlockConfigForm/BlockConfigForm.tsx b/src/editor-v2/containers/BlockConfigForm/BlockConfigForm.tsx
new file mode 100644
index 0000000000..d25266fdac
--- /dev/null
+++ b/src/editor-v2/containers/BlockConfigForm/BlockConfigForm.tsx
@@ -0,0 +1,70 @@
+import _ from 'lodash';
+
+import FormGenerator from '../../../form-generator-v2/FormGenerator';
+import {MessageCard} from '../../components/MessageCard';
+import {MESSAGES} from '../../constants/messages';
+import {useMainEditorStore} from '../../hooks/useMainEditorStore';
+import {generateChildrenPathFromArray} from '../../utils';
+import {editorCn} from '../../utils/cn';
+
+import './BlockConfigForm.scss';
+
+const b = editorCn('block-config-form');
+
+interface BlockConfigFormProps {
+ className?: string;
+}
+
+const BlockConfigForm = ({className}: BlockConfigFormProps) => {
+ const {selectedBlock, content, blocks, subBlocks, updateField} = useMainEditorStore();
+
+ const currentBlockPath = selectedBlock ? generateChildrenPathFromArray(selectedBlock) : '[]';
+
+ const currentConfig = _.get(content.blocks, currentBlockPath || '');
+ const currentSchema = [...blocks, ...subBlocks].find(({type}) => type === currentConfig?.type);
+
+ const onUpdateByKey = (key: string, value: unknown) => {
+ updateField('blocks' + currentBlockPath + '.' + key, value);
+ };
+
+ if (!currentConfig) {
+ return (
+
+
+ ) : null}
+
+
+ );
+ }
+
+ if (!currentSchema) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default BlockConfigForm;
diff --git a/src/editor-v2/containers/BlocksList/BlocksList.scss b/src/editor-v2/containers/BlocksList/BlocksList.scss
new file mode 100644
index 0000000000..6f3a022dab
--- /dev/null
+++ b/src/editor-v2/containers/BlocksList/BlocksList.scss
@@ -0,0 +1,88 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}blocks-list';
+
+#{$block} {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ &__search {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ }
+
+ &__title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 4px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ width: 100%;
+ text-align: left;
+ user-select: none;
+ outline: none;
+
+ color: var(--g-color-text-secondary);
+ font-size: var(--g-text-subheader-1-font-size);
+ line-height: var(--g-text-subheader-1-line-height);
+ font-weight: 500;
+
+ border-radius: $editorControlBorderRadius;
+ transition: background-color $editorTransitionTime;
+
+ &:hover {
+ background-color: var(--g-color-base-generic-hover);
+ }
+
+ &:focus {
+ outline: none;
+ }
+
+ &-icon {
+ flex-shrink: 0;
+ color: var(--g-color-text-hint);
+ transition: transform $editorTransitionTime;
+ }
+ }
+
+ &__group {
+ &:first-child {
+ margin-top: 0;
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &_collapsed {
+ #{$block}__title-icon {
+ transform: rotate(0deg);
+ }
+ }
+
+ &:not(&_collapsed) {
+ #{$block}__title-icon {
+ transform: rotate(0deg);
+ }
+ }
+
+ &-items {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+ gap: 8px;
+ margin-top: 8px;
+ }
+ }
+
+ &__search {
+ &-icon {
+ margin-left: 8px;
+ margin-right: 8px;
+ }
+ }
+}
diff --git a/src/editor-v2/containers/BlocksList/BlocksList.tsx b/src/editor-v2/containers/BlocksList/BlocksList.tsx
new file mode 100644
index 0000000000..9959f75aec
--- /dev/null
+++ b/src/editor-v2/containers/BlocksList/BlocksList.tsx
@@ -0,0 +1,175 @@
+import * as React from 'react';
+
+import {
+ ChevronDown,
+ ChevronRight,
+ Eye,
+ EyeSlash,
+ Folder,
+ FolderOpen,
+ Magnifier,
+} from '@gravity-ui/icons';
+import {DropdownMenu, Icon, TextInput} from '@gravity-ui/uikit';
+
+import {ItemConfig} from '../../../common/types';
+import {ClassNameProps} from '../../../models';
+import BlockCard from '../../components/BlockCard/BlockCard';
+import {useMainEditorStore} from '../../hooks/useMainEditorStore';
+import {editorCn} from '../../utils/cn';
+
+import './BlocksList.scss';
+
+const b = editorCn('blocks-list');
+
+interface BlockGroups {
+ [key: string]: ItemConfig[];
+}
+
+interface BlockListProps extends ClassNameProps {}
+
+const BlocksList = ({className}: BlockListProps) => {
+ const {blocks, enableInsertMode} = useMainEditorStore();
+ const [search, setSearch] = React.useState('');
+ const [collapsedGroups, setCollapsedGroups] = React.useState{currentSchema.schema.name}
+
+ {currentSchema.schema.inputs && (
+
+
+
+ );
+};
+
+export default BlocksList;
diff --git a/src/editor-v2/containers/Editor/Editor.scss b/src/editor-v2/containers/Editor/Editor.scss
new file mode 100644
index 0000000000..da304c330d
--- /dev/null
+++ b/src/editor-v2/containers/Editor/Editor.scss
@@ -0,0 +1,48 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}editor';
+
+#{$block} {
+ margin: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ position: relative;
+
+ &__header {
+ height: $headerHeight;
+ width: 100%;
+ border-bottom: 1px solid var(--g-color-line-generic);
+ }
+
+ &__body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ width: 100%;
+ max-height: calc(100% - $headerHeight);
+ }
+
+ &__canvas {
+ flex: 1;
+ }
+
+ &__overlay {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ z-index: 100;
+ }
+
+ &__debug-store {
+ position: fixed;
+ right: 8px;
+ bottom: 8px;
+ z-index: 1000;
+ }
+}
diff --git a/src/editor-v2/containers/Editor/Editor.tsx b/src/editor-v2/containers/Editor/Editor.tsx
new file mode 100644
index 0000000000..a998babf2e
--- /dev/null
+++ b/src/editor-v2/containers/Editor/Editor.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react';
+
+import {usePostMessageAPIListener} from '../../../common/postMessage';
+import {PageContent} from '../../../models';
+import {Panels} from '../../components/Panels/Panels';
+import {Sidebar} from '../../components/Sidebar/Sidebar';
+import BigOverlay from '../../containers/BigOverlay/BigOverlay';
+import MiddleScreen from '../../containers/MiddleScreen/MiddleScreen';
+import {MainEditorStoreProvider} from '../../context/editorStore';
+import {IframeProvider} from '../../context/iframeContext';
+import {useEditorTabs} from '../../hooks/useEditorTabs';
+import useMainEditorInitialize from '../../hooks/useMainEditorInitialize';
+import {useMainEditorStore} from '../../hooks/useMainEditorStore';
+import {editorCn} from '../../utils/cn';
+import Source from '../Source/Source';
+import ViewSwitches from '../ViewSwitches/ViewSwitches';
+
+import './Editor.scss';
+
+const b = editorCn('editor');
+
+interface SidebarTabComponent {
+ id: string;
+ title: string;
+ component: React.ElementType;
+}
+
+interface EditorSlots {
+ middleTop?: React.ElementType;
+ leftTop?: React.ElementType[];
+ rightTop?: React.ElementType[];
+ leftTabs?: SidebarTabComponent[];
+ rightTabs?: SidebarTabComponent[];
+}
+
+export interface EditorProviderProps {
+ initialUrl: string;
+ disableUrlField?: boolean;
+ children: React.ReactNode;
+}
+
+export interface EditorViewProps {
+ onUpdate?: (pageContent: PageContent) => void;
+ content?: PageContent;
+ slots?: EditorSlots;
+}
+
+type EditorProps = Omit
+
+ {Object.entries(groups).map(([key, groupBlocks]) => {
+ const isCollapsed = collapsedGroups.has(key);
+ return (
+
+
+ {!isCollapsed && (
+
+ );
+ })}
+
+ {groupBlocks.map(({type, schema: {name, previewImg}}) => (
+
+ )}
+
+
+ );
+};
+
+export const EditorProvider = ({initialUrl, disableUrlField, children}: EditorProviderProps) => {
+ return (
+
+
+
+
+ );
+};
+
+export default GlobalConfig;
diff --git a/src/editor-v2/containers/MiddleScreen/MiddleScreen.scss b/src/editor-v2/containers/MiddleScreen/MiddleScreen.scss
new file mode 100644
index 0000000000..0119d9d515
--- /dev/null
+++ b/src/editor-v2/containers/MiddleScreen/MiddleScreen.scss
@@ -0,0 +1,137 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}middle-screen';
+
+#{$block} {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+
+ &__topbar {
+ flex: 0 0 auto;
+ }
+
+ &__content {
+ flex: 1 1 auto;
+ overflow-y: auto;
+ // height: 100%;
+ background-color: var(--g-color-text-secondary);
+
+ &_fullscreen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ z-index: 1000;
+ background-color: #000;
+ }
+ }
+
+ &__wrapper {
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ overflow: hidden;
+ position: relative;
+ }
+
+ &__canvas {
+ @include custom-scrollbar();
+ background-color: var(--g-color-base-background);
+ transform-origin: center top;
+ position: absolute;
+ height: 100%;
+ max-width: 100%;
+
+ &_fullscreen {
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ max-width: 100%;
+ }
+
+ &_withBackground {
+ background-color: var(--g-color-base-generic-accent);
+ }
+ }
+
+ &__iframe-container {
+ position: relative;
+ margin: 0 auto;
+
+ &_fullscreen {
+ height: 100%;
+ }
+ }
+
+ &__iframe {
+ display: block;
+
+ &_fullscreen {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &__exit-preview-container {
+ position: fixed;
+ top: 16px;
+ right: 24px;
+ z-index: 1001;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--g-color-base-background);
+
+ &:hover {
+ opacity: 1;
+
+ #{$block}__exit-preview-text {
+ max-width: 100%;
+ }
+ }
+ }
+
+ &__exit-preview-text {
+ display: inline-block;
+ width: auto;
+ max-width: 3px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ transition: max-width 0.3s ease-in-out;
+ }
+
+ &__overlay {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ &__border {
+ position: absolute;
+ border: 3px var(--g-color-line-brand) solid;
+ border-radius: 10px;
+ }
+
+ &__loading {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background: var(--g-color-base-background);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
diff --git a/src/editor-v2/containers/MiddleScreen/MiddleScreen.tsx b/src/editor-v2/containers/MiddleScreen/MiddleScreen.tsx
new file mode 100644
index 0000000000..0f07617daa
--- /dev/null
+++ b/src/editor-v2/containers/MiddleScreen/MiddleScreen.tsx
@@ -0,0 +1,140 @@
+import * as React from 'react';
+
+import {Xmark} from '@gravity-ui/icons';
+import {ActionTooltip, Button, Icon, Loader} from '@gravity-ui/uikit';
+
+import {usePostMessageAPIListener} from '../../../common/postMessage';
+import {IframeContext} from '../../context/iframeContext';
+import {useMainEditorStore} from '../../hooks/useMainEditorStore';
+import {editorCn} from '../../utils/cn';
+import Overlay from '../Overlay/Overlay';
+
+import './MiddleScreen.scss';
+
+const b = editorCn('middle-screen');
+
+// the maximum height of the iframe
+const IFRAME_MAX_HEIGHT = 50000;
+
+interface MiddleScreenProps {
+ className?: string;
+ CustomTop?: React.ElementType;
+}
+
+const MiddleScreen = ({className, CustomTop}: MiddleScreenProps) => {
+ const {zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode} = useMainEditorStore();
+ const {url, setIframeElement} = React.useContext(IframeContext);
+ const [canvasRef, setCanvasRef] = React.useStateGlobal Config
+
+ {CustomTop && !isPreviewMode ? (
+
+
+ ) : null}
+
+
+
+
+