feat: create schemas (#41)

* feat: create shemas

* feat: refactor schemas usage after review

* feat: update import paths

package.json

@@ -73,7 +73,7 @@
     "@commitlint/config-conventional": "^17.4.3",
     "@doc-tools/transform": "^2.9.0",
     "@gravity-ui/eslint-config": "^2.0.0",
-    "@gravity-ui/page-constructor": "^2.6.0",
+    "@gravity-ui/page-constructor": "^2.13.0",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",

src/blocks/Author/schema.ts

@@ -0,0 +1,23 @@
+import {validators} from '@gravity-ui/page-constructor';
+
+const {
+    common: {BlockBaseProps},
+} = validators;
+
+import {BlockType} from '../../models/common';
+import {BlogBlockBase} from '../../schema/common';
+
+export const Author = {
+    [BlockType.Author]: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['authorId'],
+        properties: {
+            ...BlockBaseProps,
+            ...BlogBlockBase,
+            authorId: {
+                type: 'number',
+            },
+        },
+    },
+};

src/blocks/Banner/schema.ts

@@ -0,0 +1,32 @@
+import {validators} from '@gravity-ui/page-constructor';
+
+import {BlockType} from '../../models/common';
+import {BlogBlockBase} from '../../schema/common';
+
+const {
+    subBlocks: {ContentBase},
+    common: {BlockBaseProps},
+} = validators;
+
+export const Banner = {
+    [BlockType.Banner]: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['title', 'text', 'image'],
+        properties: {
+            ...BlockBaseProps,
+            ...BlogBlockBase,
+            ...ContentBase,
+            color: {
+                type: 'string',
+            },
+            image: {
+                type: 'string',
+            },
+            imageSize: {
+                type: 'string',
+                enum: ['s', 'm'],
+            },
+        },
+    },
+};

src/blocks/CTA/schema.ts

@@ -0,0 +1,32 @@
+import {validators} from '@gravity-ui/page-constructor';
+
+import {BlockType} from '../../models/common';
+import {BlogBlockBase} from '../../schema/common';
+
+const {
+    subBlocks: {ContentBase},
+    common: {BlockBaseProps},
+} = validators;
+
+export const CTA = {
+    [BlockType.CTA]: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['items'],
+        properties: {
+            ...BlockBaseProps,
+            ...BlogBlockBase,
+            items: {
+                type: 'array',
+                items: {
+                    type: 'object',
+                    additionalProperties: false,
+                    required: ['title', 'links'],
+                    properties: {
+                        ...ContentBase,
+                    },
+                },
+            },
+        },
+    },
+};

src/blocks/ColoredText/schema.ts

@@ -0,0 +1,39 @@
+import {validators} from '@gravity-ui/page-constructor';
+
+import {BlockType} from '../../models/common';
+import {BlogBlockBase} from '../../schema/common';
+
+const {
+    subBlocks: {ContentBase},
+    components: {ImageProps},
+    common: {BlockBaseProps},
+} = validators;
+
+const BackgroundProps = {
+    type: 'object',
+    additionalProperties: false,
+    properties: {
+        image: ImageProps,
+        color: {
+            type: 'string',
+        },
+        altText: {
+            type: 'string',
+            contentType: 'text',
+        },
+    },
+};
+
+export const ColoredText = {
+    [BlockType.ColoredText]: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['text'],
+        properties: {
+            ...BlockBaseProps,
+            ...BlogBlockBase,
+            ...ContentBase,
+            background: BackgroundProps,
+        },
+    },
+};

src/blocks/Feed/schema.ts

@@ -0,0 +1,29 @@
+import {validators} from '@gravity-ui/page-constructor';
+
+const {
+    common: {TitleProps, BlockBaseProps},
+} = validators;
+
+import {BlockType} from '../../models/common';
+
+export const Feed = {
+    [BlockType.Feed]: {
+        additionalProperties: false,
+        required: [],
+        properties: {
+            ...BlockBaseProps,
+            title: TitleProps,
+            image: {
+                type: 'string',
+            },
+            description: {
+                type: 'string',
+                contentType: 'text',
+            },
+            size: {
+                type: 'string',
+                enum: ['s', 'm'],
+            },
+        },
+    },
+};

src/blocks/Header/schema.ts

@@ -0,0 +1,21 @@
+import {validators} from '@gravity-ui/page-constructor';
+
+import {BlockType} from '../../models/common';
+import {BlogBlockBase} from '../../schema/common';
+
+const {
+    blocks: {HeaderProperties},
+    common: {BlockBaseProps},
+} = validators;
+
+export const Header = {
+    [BlockType.Header]: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            ...BlockBaseProps,
+            ...BlogBlockBase,
+            ...HeaderProperties,
+        },
+    },
+};

src/blocks/Layout/schema.ts

@@ -0,0 +1,25 @@
+import {validators} from '@gravity-ui/page-constructor';
+
+const {
+    common: {BlockBaseProps, ChildrenProps},
+} = validators;
+
+import {BlockType} from '../../models/common';
+import {BlogBlockBase} from '../../schema/common';
+
+export const Layout = {
+    [BlockType.Layout]: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['children'],
+        properties: {
+            ...BlockBaseProps,
+            ...BlogBlockBase,
+            children: ChildrenProps,
+            mobileOrder: {
+                type: 'string',
+                enum: ['reverse', 'straight'],
+            },
+        },
+    },
+};

src/blocks/Media/schema.ts

@@ -0,0 +1,24 @@
+import {validators} from '@gravity-ui/page-constructor';
+
+import {BlockType} from '../../models/common';
+import {BlogBlockBase} from '../../schema/common';
+
+const {
+    common: {BlockBaseProps, MediaProps},
+} = validators;
+
+export const Media = {
+    [BlockType.Media]: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            ...BlockBaseProps,
+            ...BlogBlockBase,
+            ...MediaProps,
+            text: {
+                type: 'string',
+                contentType: 'text',
+            },
+        },
+    },
+};

src/blocks/Meta/schema.ts

@@ -0,0 +1,19 @@
+import {validators} from '@gravity-ui/page-constructor';
+
+const {
+    common: {BlockBaseProps},
+} = validators;
+
+import {BlockType} from '../../models/common';
+import {BlogBlockBase} from '../../schema/common';
+
+export const Meta = {
+    [BlockType.Meta]: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            ...BlockBaseProps,
+            ...BlogBlockBase,
+        },
+    },
+};

src/blocks/Suggest/schema.ts

@@ -0,0 +1,19 @@
+import {validators} from '@gravity-ui/page-constructor';
+
+const {
+    common: {BlockBaseProps},
+} = validators;
+
+import {BlockType} from '../../models/common';
+import {BlogBlockBase} from '../../schema/common';
+
+export const Suggest = {
+    [BlockType.Suggest]: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            ...BlockBaseProps,
+            ...BlogBlockBase,
+        },
+    },
+};

src/blocks/YFM/schema.ts

@@ -0,0 +1,24 @@
+import {validators} from '@gravity-ui/page-constructor';
+
+const {
+    common: {BlockBaseProps},
+} = validators;
+
+import {BlockType} from '../../models/common';
+import {BlogBlockBase} from '../../schema/common';
+
+export const YFM = {
+    [BlockType.YFM]: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['text'],
+        properties: {
+            ...BlockBaseProps,
+            ...BlogBlockBase,
+            text: {
+                type: 'string',
+                contentType: 'yfm',
+            },
+        },
+    },
+};

src/index.ts

@@ -8,4 +8,6 @@ export {BlogPage} from './containers/BlogPage/BlogPage';
 export * from './models/common';
 export * from './models/locale';
 
+export * from './schema';
+
 export {BREAKPOINTS} from './constants';

src/schema/README.md

@@ -0,0 +1,5 @@
+## Shemas and validators
+
+#### We use [`Ajv JSON schema validator`](https://ajv.js.org/) for validation configs with blocks descriptions.
+
+#### You can use blocks schemas in your backoffice or everything else places where you check configs.

src/schema/blocks.ts

@@ -0,0 +1,10 @@
+export * from '../blocks/Author/schema';
+export * from '../blocks/Banner/schema';
+export * from '../blocks/ColoredText/schema';
+export * from '../blocks/CTA/schema';
+export * from '../blocks/Feed/schema';
+export * from '../blocks/Layout/schema';
+export * from '../blocks/Media/schema';
+export * from '../blocks/Meta/schema';
+export * from '../blocks/Suggest/schema';
+export * from '../blocks/YFM/schema';

src/schema/common.ts

@@ -0,0 +1,34 @@
+export interface ObjectSchema extends Record<string, unknown> {
+    properties: object;
+}
+
+const sizeTypes = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
+
+export const filteredItem = (itemsSchema: ObjectSchema) => ({
+    ...itemsSchema,
+    type: 'object',
+    properties: {
+        when: {
+            type: 'string',
+        },
+        ...itemsSchema.properties,
+    },
+});
+
+export const BlogBlockBase = {
+    paddingTop: {
+        type: 'string',
+        enum: sizeTypes,
+    },
+    paddingBottom: {
+        type: 'string',
+        enum: sizeTypes,
+    },
+    fullWidth: {
+        type: 'boolean',
+    },
+    column: {
+        type: 'string',
+        enum: ['left', 'right'],
+    },
+};

src/schema/headers.ts

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