feat: add Map-block

.gitignore

@@ -16,3 +16,4 @@ node_modules
 
 *.tgz
 .env
+.env.development

.storybook/maps.ts

@@ -0,0 +1,6 @@
+export const ymapApiKeyForStorybook = '536c9fe2-9365-40c1-aedc-f6f21817f82e';
+
+export const scriptsSrc = {
+    yandex: 'https://api-maps.yandex.ru/2.1',
+    google: 'https://www.google.com/maps/embed/v1/place',
+};

README.md

@@ -46,6 +46,7 @@ interface PageConstructorProviderProps {
   metrika?: Metrika; //Functions for sending analytics
   ssrConfig?: SSR; //A flag indicating that the code is run on the server size.
   theme?: 'light' | 'dark'; //Theme to render the page with.
+  mapsContext?: MapsContextType; //Params for map: apikey, type, scriptSrc, nonce
 }
 
 export interface PageContent extends Animatable {
@@ -211,6 +212,13 @@ import {configure, Lang} from '@gravity-ui/page-constructor';
 configure({lang: Lang.En});
 ```
 
+### Maps
+
+To use maps, put the map type, scriptSrc and apiKey in field `mapContext` in `PageConstructorProvider`.
+
+You can define environment variables for dev-mode in .env.development file within project root.
+`STORYBOOK_GMAP_API_KEY` - apiKey for google maps
+
 ## Development
 
 ```bash

src/blocks/Map/Map.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {MapBlockProps} from '../../models';
+import Map from '../../components/Map/Map';
+import MediaBase from '../../components/MediaBase/MediaBase';
+
+export const MapBlock = ({map, ...props}: MapBlockProps) => (
+    <MediaBase {...props}>
+        <MediaBase.Card>
+            <Map {...map} />
+        </MediaBase.Card>
+    </MediaBase>
+);
+
+export default MapBlock;

src/blocks/Map/README.md

@@ -0,0 +1,25 @@
+Map block
+
+`type: map-block`
+
+`title: string` — Title.
+
+`description: string` — Description.
+
+[`button: Button` — Button](?path=/story/information--common-types&viewMode=docs#button---button)
+
+[`map: Map` — Map description](?path=/story/components-map--y-map&viewMode=docs)
+
+`direction: 'media-content' | 'content-media'` — Relative position of map and content.
+
+`mobileDirection: 'media-content' | 'content-media'` - Relative position of map and content for touch
+
+`largeMedia?: boolean` — An image/video takes 8 columns.
+
+`disableShadow?: boolean` — Disable shadow for the block.
+
+`additionalInfo?: string` — Gray text (with YFM support)
+
+[`links?: Link[]` — An array with link objects](?path=/story/information--common-types&viewMode=docs#link---link)
+
+[`buttons?: Button[]` — An array with button objects](?path=/story/information--common-types&viewMode=docs#button---button)

src/blocks/Map/__stories__/Map.stories.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import {Meta, Story} from '@storybook/react/types-6-0';
+import {yfmTransform} from '../../../../.storybook/utils';
+import {ButtonProps, LinkProps, MapBlockModel, MapBlockProps} from '../../../models';
+import MapBlock from '../Map';
+import {PageConstructor} from '../../../containers/PageConstructor';
+import {MapProvider, gmapApiKeyIdInLS} from '../../../context/mapsContext/mapsProvider';
+import {MapType} from '../../../context/mapsContext/mapsContext';
+import {ApiKeyInput} from '../../../components/Map/__stories__/ApiKeyInput';
+import {ymapApiKeyForStorybook, scriptsSrc} from '../../../../.storybook/maps';
+
+import data from './data.json';
+
+export default {
+    title: 'Blocks/Map',
+    component: MapBlock,
+    args: {
+        largeMedia: false,
+        mediaOnly: false,
+        size: 'l',
+    },
+} as Meta;
+
+const DefaultTemplate: Story<MapBlockModel> = (args) => (
+    <MapProvider
+        scriptSrc={scriptsSrc[MapType.Yandex]}
+        apiKey={ymapApiKeyForStorybook}
+        type={MapType.Yandex}
+    >
+        <PageConstructor
+            content={{
+                blocks: [
+                    {
+                        ...args,
+                        additionalInfo: yfmTransform(data.common.additionalInfo),
+                        map: data.ymap,
+                    },
+                    {
+                        ...args,
+                        links: data.common.links as LinkProps[],
+                        map: {
+                            ...data.ymap,
+                            id: 'common-places-2',
+                        },
+                    },
+                    {
+                        ...args,
+                        buttons: data.common.buttons as ButtonProps[],
+                        map: {
+                            ...data.ymap,
+                            id: 'common-places-3',
+                        },
+                    },
+                ],
+            }}
+        />
+    </MapProvider>
+);
+
+const SizeTemplate: Story<MapBlockModel> = (args) => (
+    <MapProvider
+        scriptSrc={scriptsSrc[MapType.Yandex]}
+        apiKey={ymapApiKeyForStorybook}
+        type={MapType.Yandex}
+    >
+        <PageConstructor
+            content={{
+                blocks: [
+                    {
+                        ...args,
+                        title: data.size.defaultMediaTitle,
+                        map: data.ymap,
+                    },
+                    {
+                        ...args,
+                        largeMedia: true,
+                        title: data.size.largeMediaTitle,
+                        map: {
+                            ...data.ymap,
+                            id: 'common-places-2',
+                        },
+                    },
+                    {
+                        ...args,
+                        mediaOnly: true,
+                        description: undefined,
+                        title: data.size.mediaOnlyTitle,
+                        map: {
+                            ...data.ymap,
+                            id: 'common-places-3',
+                        },
+                    },
+                ],
+            }}
+        />
+    </MapProvider>
+);
+
+const DirectionTemplate: Story<MapBlockModel> = (args) => (
+    <MapProvider
+        scriptSrc={scriptsSrc[MapType.Yandex]}
+        apiKey={ymapApiKeyForStorybook}
+        type={MapType.Yandex}
+    >
+        <PageConstructor
+            content={{
+                blocks: [
+                    {
+                        ...args,
+                        title: data.direction.defaultDirectionTitle,
+                        map: data.ymap,
+                    },
+                    {
+                        ...args,
+                        title: data.direction.ReverseDirectionTitle,
+                        direction: 'media-content',
+                        map: {
+                            ...data.ymap,
+                            id: 'common-places-2',
+                        },
+                    },
+                    {
+                        ...args,
+                        title: data.direction.ReverseDirectionTitle,
+                        mobileDirection: 'media-content',
+                        map: {
+                            ...data.ymap,
+                            id: 'common-places-3',
+                        },
+                    },
+                ],
+            }}
+        />
+    </MapProvider>
+);
+
+const GMAP_API_KEY = process.env.STORYBOOK_GMAP_API_KEY;
+
+const MapsTypesTemplate: Story<MapBlockModel> = (args) => (
+    <>
+        <MapProvider
+            scriptSrc={scriptsSrc[MapType.Yandex]}
+            apiKey={ymapApiKeyForStorybook}
+            type={MapType.Yandex}
+        >
+            <PageConstructor
+                content={{
+                    blocks: [
+                        {
+                            ...args,
+                            title: data.direction.defaultDirectionTitle,
+                            map: data.ymap,
+                        },
+                    ],
+                }}
+            />
+        </MapProvider>
+        <MapProvider
+            scriptSrc={scriptsSrc[MapType.Google]}
+            type={MapType.Google}
+            apiKey={GMAP_API_KEY}
+        >
+            {!GMAP_API_KEY && (
+                <div style={{maxWidth: '500px', marginLeft: '40px'}}>
+                    <ApiKeyInput id={gmapApiKeyIdInLS} />
+                </div>
+            )}
+            <PageConstructor
+                content={{
+                    blocks: [
+                        {
+                            ...args,
+                            title: data.direction.ReverseDirectionTitle,
+                            direction: 'media-content',
+                            map: data.gmap,
+                        },
+                    ],
+                }}
+            />
+        </MapProvider>
+    </>
+);
+
+export const Default = DefaultTemplate.bind({});
+export const Size = SizeTemplate.bind({});
+export const Direction = DirectionTemplate.bind({});
+export const MapsTypes = MapsTypesTemplate.bind({});
+
+const DefaultArgs = {
+    ...data.default.content,
+    title: data.common.title,
+    description: yfmTransform(data.common.description),
+    map: data.ymap,
+};
+
+Default.args = DefaultArgs as MapBlockProps;
+
+Size.args = DefaultArgs as MapBlockProps;
+Direction.args = DefaultArgs as MapBlockProps;
+
+MapsTypes.args = DefaultArgs as MapBlockProps;

src/blocks/Map/__stories__/data.json

@@ -0,0 +1,65 @@
+{
+  "common": {
+    "title": "Lorem ipsum dolor sit",
+    "description": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) 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](https://example.com) 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": "#"
+      }
+    ]
+  },
+  "default": {
+    "content": {
+      "type": "map-block"
+    }
+  },
+  "ymap": {
+    "zoom": 9,
+    "id": "common-places",
+    "center": [55.753994, 37.622093],
+    "markers": [
+      {
+        "address": "Moscow Arbat",
+        "label": {
+          "preset": "islands#circleIcon"
+        }
+      },
+      {
+        "coordinate": [55.733974, 37.587093],
+        "label": {
+          "iconCaption": "Yandex",
+          "iconColor": "#3caa3c"
+        }
+      }
+    ]
+  },
+  "gmap": {
+    "zoom": 9,
+    "address": "Anthony Fokkerweg 1, 1059 CM Amsterdam"
+  },
+  "size": {
+    "defaultMediaTitle": "Default map",
+    "largeMediaTitle": "Large map",
+    "mediaOnlyTitle": "map Only"
+  },
+  "direction": {
+    "defaultDirectionTitle": "Default Direction",
+    "ReverseDirectionTitle": "Reverse Direction"
+  }
+}

src/blocks/Map/schema.ts

@@ -0,0 +1,20 @@
+import {MapProps} from '../../schema/validators/common';
+import {MediaBlockBaseProps} from '../Media/schema';
+
+export const Map = {
+    type: 'object',
+    additionalProperties: false,
+    required: [],
+    properties: MapProps,
+};
+
+export const MapBlock = {
+    'map-block': {
+        additionalProperties: false,
+        required: ['title', 'map'],
+        properties: {
+            ...MediaBlockBaseProps,
+            map: Map,
+        },
+    },
+};