feat(Navigation): add schema validation (#120)

Author: Juli Ovechkina

src/containers/PageConstructor/__stories__/data.json

@@ -188,25 +188,31 @@
           ]
         },
         {
+          "type": "link",
           "text": "Link with spaces",
           "url": "https://example.com",
           "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg"
         },
         {
-          "text": "Link2",
-          "url": "https://example.com"
+          "type": "link",
+          "text": "Link with arrow",
+          "url": "https://example.com",
+          "arrow": true
         },
         {
+          "type": "link",
           "text": "Link3",
           "url": "https://example.com"
         },
         {
+          "type": "link",
           "text": "Link4",
           "url": "https://example.com"
         }
       ],
       "rightItems": [
         {
+          "type": "link",
           "text": "Link",
           "url": "https://example.com",
           "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg"

src/models/navigation.ts

@@ -14,7 +14,7 @@ export interface NavigationItemBase {
     url?: string;
 }
 
-export interface NavigationLinkItem extends NavigationItemBase {
+export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;
     arrow?: boolean;
@@ -23,8 +23,6 @@ export interface NavigationLinkItem extends NavigationItemBase {
 
 export interface NavigationButtonItem extends ButtonProps {
     type: NavigationItemType.Button;
-    url: string;
-    target?: string;
 }
 
 export interface NavigationDropdownItem extends NavigationItemBase {

src/navigation/schema.ts

@@ -0,0 +1,99 @@
+import {ButtonProps} from '../schema/validators/common';
+import {ImageProps, urlPattern} from '../components/Image/schema';
+import {omit} from 'lodash';
+import {filteredArray} from '../schema/validators/utils';
+
+const NavigationItemType = {
+    type: 'string',
+    enum: ['link', 'button', 'dropdown'],
+};
+
+export const LogoProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['icon'],
+    properties: {
+        icon: ImageProps,
+        text: {
+            type: 'string',
+            contentType: 'text',
+        },
+        url: {
+            type: 'string',
+        },
+    },
+};
+
+const NavigationItemBaseProps = {
+    text: {
+        type: 'string',
+        contentType: 'text',
+    },
+    url: {
+        type: 'string',
+    },
+    icon: {
+        type: 'string',
+        pattern: urlPattern,
+    },
+};
+
+const NavigationItemBaseLinkProps = omit(NavigationItemBaseProps, ['url']);
+
+const NavigationLinkItemProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['type', 'text'],
+    properties: {
+        ...NavigationItemBaseLinkProps,
+        type: {...NavigationItemType},
+        url: {
+            type: 'string',
+        },
+        target: {
+            type: 'string',
+        },
+        arrow: {
+            type: 'boolean',
+        },
+    },
+};
+
+const NavigationButtonItemProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['type', 'text', 'url'],
+    properties: {
+        ...ButtonProps,
+        type: {...NavigationItemType},
+    },
+};
+
+const NavigationDropdownItemProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['type', 'items'],
+    properties: {
+        ...NavigationItemBaseProps,
+        type: {...NavigationItemType},
+        items: filteredArray(NavigationLinkItemProps),
+    },
+};
+
+const NavigationItemProps = {
+    oneOf: [
+        filteredArray(NavigationLinkItemProps),
+        filteredArray(NavigationButtonItemProps),
+        filteredArray(NavigationDropdownItemProps),
+    ],
+};
+
+export const NavigationHeaderProps = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['leftItems'],
+    properties: {
+        leftItems: NavigationItemProps,
+        rightItems: NavigationItemProps,
+    },
+};

src/schema/index.ts

@@ -40,6 +40,7 @@ import {
 
 import {AnimatableProps, BackgroundProps, MenuProps, withTheme} from './validators/common';
 import {filteredItem} from './validators/utils';
+import {LogoProps, NavigationHeaderProps} from './validators/navigation';
 
 export type SchemaBlock = object;
 
@@ -185,6 +186,8 @@ export function generateDefaultSchema(config?: SchemaCustomConfig) {
         required: ['blocks'],
         properties: {
             ...AnimatableProps,
+            logo: withTheme(LogoProps),
+            header: NavigationHeaderProps,
             blocks: {
                 type: 'array',
                 items: {

src/schema/validators/index.ts

@@ -3,11 +3,13 @@ import * as common from './common';
 import * as subBlocks from './sub-blocks';
 import * as pixel from './pixel';
 import * as utils from './utils';
+import * as navigation from './navigation';
 
 export const validators = {
     blocks,
     common,
     subBlocks,
     pixel,
     utils,
+    navigation,
 };

src/schema/validators/navigation.ts

@@ -0,0 +1 @@
+export * from '../../navigation/schema';