From c9b58ed0c5cd13e1cf083a579de2f195c191a147 Mon Sep 17 00:00:00 2001 From: berdysheva Date: Mon, 5 Dec 2022 20:23:02 +0300 Subject: [PATCH] feat(Share): create block --- src/blocks/Share/README.md | 10 +++++++ src/{components => blocks}/Share/Share.scss | 0 src/{components => blocks}/Share/Share.tsx | 9 ++----- .../Share/__stories__/Share.stories.tsx | 27 +++++++++++++++++++ .../Share/__stories__/data.json | 2 ++ src/{components => blocks}/Share/i18n/en.json | 0 .../Share/i18n/index.ts | 0 src/{components => blocks}/Share/i18n/ru.json | 0 src/blocks/Share/schema.ts | 21 +++++++++++++++ src/blocks/index.ts | 1 + src/blocks/validators.ts | 1 + src/components/Share/README.md | 5 ---- .../Share/__stories__/Share.stories.tsx | 23 ---------------- src/constructor-items.ts | 2 ++ src/models/components.ts | 7 ----- src/models/constructor-items/blocks.ts | 22 +++++++++++++-- src/schema/index.ts | 2 ++ src/schema/validators/blocks.ts | 1 + src/text-transform/blocks.ts | 6 +++++ 19 files changed, 95 insertions(+), 44 deletions(-) create mode 100644 src/blocks/Share/README.md rename src/{components => blocks}/Share/Share.scss (100%) rename src/{components => blocks}/Share/Share.tsx (87%) create mode 100644 src/blocks/Share/__stories__/Share.stories.tsx rename src/{components => blocks}/Share/__stories__/data.json (81%) rename src/{components => blocks}/Share/i18n/en.json (100%) rename src/{components => blocks}/Share/i18n/index.ts (100%) rename src/{components => blocks}/Share/i18n/ru.json (100%) create mode 100644 src/blocks/Share/schema.ts delete mode 100644 src/components/Share/README.md delete mode 100644 src/components/Share/__stories__/Share.stories.tsx diff --git a/src/blocks/Share/README.md b/src/blocks/Share/README.md new file mode 100644 index 000000000..061245ea4 --- /dev/null +++ b/src/blocks/Share/README.md @@ -0,0 +1,10 @@ +`type: share-block`; + +`title?: string` — Title + +`items?: []` - Share icons + +- `telegram` +- `facebook` +- `twitter` +- `vk` diff --git a/src/components/Share/Share.scss b/src/blocks/Share/Share.scss similarity index 100% rename from src/components/Share/Share.scss rename to src/blocks/Share/Share.scss diff --git a/src/components/Share/Share.tsx b/src/blocks/Share/Share.tsx similarity index 87% rename from src/components/Share/Share.tsx rename to src/blocks/Share/Share.tsx index 74497d9b9..3ad517295 100644 --- a/src/components/Share/Share.tsx +++ b/src/blocks/Share/Share.tsx @@ -3,7 +3,7 @@ import React, {useContext} from 'react'; import {ShareList, ShareSocialNetwork} from '@gravity-ui/uikit'; import {block, getAbsolutePath} from '../../utils'; -import {PCShareSocialNetwork} from '../../models'; +import {PCShareSocialNetwork, ShareBlockProps} from '../../models'; import {LocationContext} from '../../context/locationContext'; import i18n from './i18n'; @@ -19,12 +19,7 @@ const pcShareSocialNetwork = { [PCShareSocialNetwork.Facebook]: ShareSocialNetwork.Facebook, }; -export interface ShareProps { - items: PCShareSocialNetwork[]; - title?: string; -} - -const Share = ({items, title}: ShareProps) => { +const Share = ({items, title}: ShareBlockProps) => { const {pathname, hostname} = useContext(LocationContext); return ( diff --git a/src/blocks/Share/__stories__/Share.stories.tsx b/src/blocks/Share/__stories__/Share.stories.tsx new file mode 100644 index 000000000..b65ddfbd5 --- /dev/null +++ b/src/blocks/Share/__stories__/Share.stories.tsx @@ -0,0 +1,27 @@ +import {Meta, Story} from '@storybook/react/types-6-0'; +import React from 'react'; +import {configure as uikitConfigure, Lang as UIKitLang} from '@gravity-ui/uikit'; + +import Share from '../Share'; +import {BLOCKS} from '../../../demo/constants'; +import {PageConstructor} from '../../../containers/PageConstructor'; +import {ShareBLockModel, ShareBlockProps} from '../../../models'; + +import data from './data.json'; + +export default { + component: Share, + title: `${BLOCKS}/Share`, +} as Meta; + +uikitConfigure({lang: UIKitLang.En}); + +const DefaultTemplate: Story = (args) => ( + +); + +export const Default = DefaultTemplate.bind({}); +export const CustomTitle = DefaultTemplate.bind({}); + +Default.args = data.default.content as ShareBlockProps; +CustomTitle.args = data.customTitle.content as ShareBlockProps; diff --git a/src/components/Share/__stories__/data.json b/src/blocks/Share/__stories__/data.json similarity index 81% rename from src/components/Share/__stories__/data.json rename to src/blocks/Share/__stories__/data.json index 619c5fbb6..edee643fb 100644 --- a/src/components/Share/__stories__/data.json +++ b/src/blocks/Share/__stories__/data.json @@ -1,11 +1,13 @@ { "default": { "content": { + "type": "share-block", "items": ["facebook", "vk", "telegram", "twitter"] } }, "customTitle": { "content": { + "type": "share-block", "title": "Share on social networks", "items": ["facebook", "vk", "telegram", "twitter"] } diff --git a/src/components/Share/i18n/en.json b/src/blocks/Share/i18n/en.json similarity index 100% rename from src/components/Share/i18n/en.json rename to src/blocks/Share/i18n/en.json diff --git a/src/components/Share/i18n/index.ts b/src/blocks/Share/i18n/index.ts similarity index 100% rename from src/components/Share/i18n/index.ts rename to src/blocks/Share/i18n/index.ts diff --git a/src/components/Share/i18n/ru.json b/src/blocks/Share/i18n/ru.json similarity index 100% rename from src/components/Share/i18n/ru.json rename to src/blocks/Share/i18n/ru.json diff --git a/src/blocks/Share/schema.ts b/src/blocks/Share/schema.ts new file mode 100644 index 000000000..cc78cd417 --- /dev/null +++ b/src/blocks/Share/schema.ts @@ -0,0 +1,21 @@ +import {filteredArray} from '../../schema/validators/utils'; +import {BaseProps} from '../../schema/validators/common'; + +export const ShareBlock = { + 'share-block': { + additionalProperties: false, + required: ['items'], + properties: { + ...BaseProps, + title: { + type: 'string', + }, + items: filteredArray({ + properties: { + type: 'string', + enum: ['telegram', 'facebook', 'twitter', 'vk'], + }, + }), + }, + }, +}; diff --git a/src/blocks/index.ts b/src/blocks/index.ts index d76093c5b..8c855a812 100644 --- a/src/blocks/index.ts +++ b/src/blocks/index.ts @@ -17,3 +17,4 @@ export {default as IconsBlock} from './Icons/Icons'; export {default as HeaderSliderBlock} from './HeaderSlider/HeaderSlider'; export {default as CardLayoutBlock} from './CardLayout/CardLayout'; export {default as ContentLayoutBlock} from './ContentLayout/ContentLayout'; +export {default as ShareBlock} from './Share/Share'; diff --git a/src/blocks/validators.ts b/src/blocks/validators.ts index fa4f12475..1c5116259 100644 --- a/src/blocks/validators.ts +++ b/src/blocks/validators.ts @@ -16,3 +16,4 @@ export * from './Security/schema'; export * from './Simple/schema'; export * from './Slider/schema'; export * from './Table/schema'; +export * from './Share/schema'; diff --git a/src/components/Share/README.md b/src/components/Share/README.md deleted file mode 100644 index 6fcb8bb40..000000000 --- a/src/components/Share/README.md +++ /dev/null @@ -1,5 +0,0 @@ -type: "share" - -items: "telegram" | "facebook" | "twitter" | "vk" — Shows where to share - -title: text — Block title diff --git a/src/components/Share/__stories__/Share.stories.tsx b/src/components/Share/__stories__/Share.stories.tsx deleted file mode 100644 index 49e96fc93..000000000 --- a/src/components/Share/__stories__/Share.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import {Meta, Story} from '@storybook/react/types-6-0'; -import React from 'react'; -import {configure as uikitConfigure, Lang as UIKitLang} from '@gravity-ui/uikit'; - -import Share, {ShareProps} from '../Share'; -import {COMPONENTS} from '../../../demo/constants'; - -import data from './data.json'; - -export default { - component: Share, - title: `${COMPONENTS}/Share`, -} as Meta; - -uikitConfigure({lang: UIKitLang.En}); - -const DefaultTemplate: Story = (args) => ; - -export const Default = DefaultTemplate.bind({}); -export const CustomTitle = DefaultTemplate.bind({}); - -Default.args = data.default.content as ShareProps; -CustomTitle.args = data.customTitle.content as ShareProps; diff --git a/src/constructor-items.ts b/src/constructor-items.ts index e7c155809..8d8f3e26c 100644 --- a/src/constructor-items.ts +++ b/src/constructor-items.ts @@ -35,6 +35,7 @@ import { HeaderSliderBlock, CardLayoutBlock, ContentLayoutBlock, + ShareBlock, } from './blocks'; export const blockMap = { @@ -57,6 +58,7 @@ export const blockMap = { [BlockType.HeaderSliderBlock]: HeaderSliderBlock, [BlockType.CardLayoutBlock]: CardLayoutBlock, [BlockType.ContentLayoutBlock]: ContentLayoutBlock, + [BlockType.ShareBlock]: ShareBlock, }; export const subBlockMap = { diff --git a/src/models/components.ts b/src/models/components.ts index ef9d29645..30378523a 100644 --- a/src/models/components.ts +++ b/src/models/components.ts @@ -3,10 +3,3 @@ export type ArrowDirection = 'left' | 'right'; export interface ReactPlayerBlockHandler { pause: () => void; } - -export enum PCShareSocialNetwork { - Vk = 'vk', - Telegram = 'telegram', - Twitter = 'twitter', - Facebook = 'facebook', -} diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index 36bd39747..4d5642b15 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -30,7 +30,7 @@ import { ImageDeviceProps, } from './common'; import {ThemeSupporting} from '../../utils'; -import {GridColumnSize, GridColumnSizesType} from '../../grid/types'; +import {GridColumnSize, GridColumnSizesType} from '../../grid'; import {BannerCardProps, SubBlock} from './sub-blocks'; export enum BlockType { @@ -55,6 +55,7 @@ export enum BlockType { IconsBlock = 'icons-block', CardLayoutBlock = 'card-layout-block', ContentLayoutBlock = 'content-layout-block', + ShareBlock = 'share-block', } export const BlockTypes = Object.values(BlockType); @@ -350,6 +351,18 @@ export interface ContentBlockProps { theme?: ContentTheme; } +export enum PCShareSocialNetwork { + Vk = 'vk', + Telegram = 'telegram', + Twitter = 'twitter', + Facebook = 'facebook', +} + +export interface ShareBlockProps { + items: PCShareSocialNetwork[]; + title?: string; +} + //block models export type HeaderBlockModel = { type: BlockType.HeaderBlock; @@ -435,6 +448,10 @@ export type ContentLayoutBlockModel = { type: BlockType.ContentLayoutBlock; } & ContentLayoutBlockProps; +export type ShareBLockModel = { + type: BlockType.ShareBlock; +} & ShareBlockProps; + type BlockModels = | SliderBlockModel | ServiceDemoBlockModel @@ -456,6 +473,7 @@ type BlockModels = | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel - | ContentLayoutBlockModel; + | ContentLayoutBlockModel + | ShareBLockModel; export type Block = BlockModels & BlockBaseProps; diff --git a/src/schema/index.ts b/src/schema/index.ts index 7092889c0..9efc39ca4 100644 --- a/src/schema/index.ts +++ b/src/schema/index.ts @@ -22,6 +22,7 @@ import { HeaderSliderBlock, IconsBlock, CardLayoutBlock, + ShareBlock, } from './validators/blocks'; import { @@ -117,6 +118,7 @@ export function generateDefaultSchema(config?: SchemaCustomConfig) { ...CardLayoutBlock, ...ContentLayoutBlock, ...Divider, + ...ShareBlock, ...getBlocksCases(blocks), }, }), diff --git a/src/schema/validators/blocks.ts b/src/schema/validators/blocks.ts index 21926e256..eedaed816 100644 --- a/src/schema/validators/blocks.ts +++ b/src/schema/validators/blocks.ts @@ -17,3 +17,4 @@ export * from '../../blocks/HeaderSlider/schema'; export * from '../../blocks/Icons/schema'; export * from '../../blocks/CardLayout/schema'; export * from '../../blocks/ContentLayout/schema'; +export * from '../../blocks/Share/schema'; diff --git a/src/text-transform/blocks.ts b/src/text-transform/blocks.ts index abb359734..04ef64f01 100644 --- a/src/text-transform/blocks.ts +++ b/src/text-transform/blocks.ts @@ -379,6 +379,12 @@ const config: BlocksConfig = { parser: parseContentLayoutTitle, }, ], + [BlockType.ShareBlock]: [ + { + fields: ['title'], + transformer: typografTransformer, + }, + ], }; function addRandomOrder(block: ConstructorBlock) {