From 8120d70aee3ea8a162b50f7b34b678f4eea71644 Mon Sep 17 00:00:00 2001 From: Mohammad Ali Shahbazi Date: Mon, 28 Aug 2023 14:19:32 +0330 Subject: [PATCH 1/7] [DEV-11478] Bump `story-content-format` to v0.64.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8f96fd1..4600a23 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,7 @@ "dependencies": { "@prezly/linear-partition": "^1.0.2", "@prezly/sdk": "^6.21.0", - "@prezly/story-content-format": "^0.63.0", + "@prezly/story-content-format": "^0.64.0", "@prezly/uploadcare": "^2.4.3", "@react-hookz/web": "^12.0.0", "classnames": "^2.2.6", From 48ef81536ecdd82d239ac1115c57c91e1846de25 Mon Sep 17 00:00:00 2001 From: Mohammad Ali Shahbazi Date: Mon, 28 Aug 2023 14:19:59 +0330 Subject: [PATCH 2/7] [DEV-11478] Support different layouts for `Embed` --- src/elements/Embed/Embed.scss | 13 +++++++++++++ src/elements/Embed/Embed.tsx | 14 +++++++++++--- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/elements/Embed/Embed.scss b/src/elements/Embed/Embed.scss index 9acc536..8c5965e 100644 --- a/src/elements/Embed/Embed.scss +++ b/src/elements/Embed/Embed.scss @@ -6,6 +6,19 @@ flex-direction: column; margin: $block-spacing-vertical 0; + &--expanded { + @include media-layout-expanded; + } + + &--contained { + margin-left: auto; + margin-right: auto; + } + + &--full-width { + @include media-layout-full-width; + } + &:focus-within { @include focus-state; } diff --git a/src/elements/Embed/Embed.tsx b/src/elements/Embed/Embed.tsx index 30aa9c5..69acd1e 100644 --- a/src/elements/Embed/Embed.tsx +++ b/src/elements/Embed/Embed.tsx @@ -1,4 +1,4 @@ -import type { EmbedNode } from '@prezly/story-content-format'; +import { EmbedNode } from '@prezly/story-content-format'; import classNames from 'classnames'; import type { HTMLAttributes } from 'react'; @@ -13,11 +13,19 @@ interface Props extends Omit, 'children'> { } export function Embed({ className, node, showAsScreenshot, ...props }: Props) { - const { oembed, url } = node; + const { oembed, url, layout } = node; const commonProps = { id: `embed-${node.uuid}`, - className: classNames('prezly-slate-embed', className), + className: classNames( + 'prezly-slate-embed', + { + 'prezly-slate-embed--contained': layout === EmbedNode.Layout.CONTAINED, + 'prezly-slate-embed--expanded': layout === EmbedNode.Layout.EXPANDED, + 'prezly-slate-embed--full-width': layout === EmbedNode.Layout.FULL_WIDTH, + }, + className, + ), title: oembed.title || url, ...props, }; From dcf8f9dd22aa206ddb8f9e15143ec2144968cdb2 Mon Sep 17 00:00:00 2001 From: Mohammad Ali Shahbazi Date: Mon, 28 Aug 2023 14:59:10 +0330 Subject: [PATCH 3/7] [DEV-11478] Fix embed object shape --- src/elements/Embed/Embed.slate.stories.tsx | 54 ++-------------------- 1 file changed, 4 insertions(+), 50 deletions(-) diff --git a/src/elements/Embed/Embed.slate.stories.tsx b/src/elements/Embed/Embed.slate.stories.tsx index 84148c4..26d33c3 100644 --- a/src/elements/Embed/Embed.slate.stories.tsx +++ b/src/elements/Embed/Embed.slate.stories.tsx @@ -21,36 +21,15 @@ export const VideoEmbedIframe: Story = () => ( }, { type: 'embed', - children: [ - { - text: '', - }, - ], uuid: 'ef4169f6-1189-406c-825a-45c282e71b90', url: 'https://www.youtube.com/watch?v=A5uqY2x25GE', + layout: 'contained', oembed: { - author: 'Nathan Latka', author_url: 'https://www.youtube.com/channel/UCJ4E393uI8mWRlSqgoeUKKw', cache_age: 86400, description: "Building stuff since i was young. Had 1 'real' job where I was hired as an assistant, built their website, their intranet, their parent company...Started web firm, grew it to about 10 people. Started startup which never really took off (trackmypeople.com). Moved on to a large agency where we grew from 5 to 80 people. In charge of sales. Moved to Prezly about 3 years ago, never looked back\n\nTo see how much revenue this company is doing visit: http://getlatka.com now\n\nFor more content go to http://nathanlatka.com\n\nAdd Nathan on snapchat: nlatka\nLike Nathan on Facebook for behind the scenes videos: http://nathanlatka.com/facebook\nFollow Nathan on Instagram for rare photos and contests: http://nathanlatka.com/instagram", html: '
', - options: { - _end: { - label: 'End on', - placeholder: 'ex.: 11, 1m10s', - value: '', - }, - _start: { - label: 'Start from', - placeholder: 'ex.: 11, 1m10s', - value: '', - }, - click_to_play: { - label: 'Hold load & play until clicked', - value: false, - }, - }, provider_name: 'YouTube', screenshot_url: 'https://avatars-cdn.prezly.com/embed/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g.dj1BNXVxWTJ4MjVHRQ__/3d02b090ce4d8695299760f56c4ae5a11bb64120ca178d8ab848a4327676a18b?v=1583930760', @@ -86,32 +65,15 @@ export const TwitterPostIframe: Story = () => ( }, { type: 'embed', - children: [ - { - text: '', - }, - ], uuid: '90bd57f9-523e-44df-ba65-a11674c45404', url: 'https://twitter.com/Prezly/status/1255868048222945281', + layout: 'contained', oembed: { - author: 'Prezly', author_url: 'https://twitter.com/Prezly', cache_age: 86400, description: 'The results of the Global PR Survey 2020 are now live! Read them in full at https://t.co/Zz61D3S7TqHuge thank you to everyone that took part ❤️— Prezly (@Prezly) April 30, 2020\n\n', html: '
', - options: { - _hide_media: { - label: 'Hide photos, videos, and cards', - value: false, - }, - _theme: { - value: '', - values: { - dark: 'Use dark theme', - }, - }, - }, provider_name: 'Twitter', screenshot_url: 'https://avatars-cdn.prezly.com/embed/aHR0cHM6Ly90d2l0dGVyLmNvbS9QcmV6bHkvc3RhdHVzLzEyNTU4NjgwNDgyMjI5NDUyODE_/7d7cf7768b2cf588c3e160f8a859da185315329a4d23e16a1e64ac29a4314e87?v=1583930760', @@ -144,13 +106,9 @@ export const RichWebsiteCardIframe: Story = () => ( }, { type: 'embed', - children: [ - { - text: '', - }, - ], uuid: '5024d558-75ef-4d56-a114-87674b522c1e', url: 'https://prezly.com', + layout: 'contained', oembed: { cache_age: 86400, description: @@ -191,13 +149,9 @@ export const Minimal: Story = () => ( }, { type: 'embed', - children: [ - { - text: '', - }, - ], uuid: 'da744513-8fe7-4e22-9e85-6f5e122b93a1', url: 'https://www.prezly.com/', + layout: 'contained', oembed: { type: 'link', cache_age: 86400, From d3094372e56e4f9047fb69d8ce912a6ddfc00f39 Mon Sep 17 00:00:00 2001 From: Mohammad Ali Shahbazi Date: Mon, 28 Aug 2023 15:15:28 +0330 Subject: [PATCH 4/7] [DEV-11478] Set `api.cache(true)` to resolve babel error --- babel.config.mjs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/babel.config.mjs b/babel.config.mjs index 03b22af..2b408dc 100644 --- a/babel.config.mjs +++ b/babel.config.mjs @@ -1,4 +1,5 @@ -export default () => { +export default (api) => { + api.cache(true); const isDevelopment = process.env.NODE_ENV === 'development'; return { From 80dd4bf0aef8a19ce9a90b1ddd8460c0cf8dba03 Mon Sep 17 00:00:00 2001 From: Mohammad Ali Shahbazi Date: Mon, 28 Aug 2023 15:18:55 +0330 Subject: [PATCH 5/7] [DEV-11478] Only enable cache in dev env --- babel.config.mjs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/babel.config.mjs b/babel.config.mjs index 2b408dc..c00c7d4 100644 --- a/babel.config.mjs +++ b/babel.config.mjs @@ -1,7 +1,10 @@ export default (api) => { - api.cache(true); const isDevelopment = process.env.NODE_ENV === 'development'; + if (isDevelopment) { + api.cache(true); + } + return { targets: { esmodules: false, From 10f93cacec1016fa2b7cc39b37af4a8d1c097eea Mon Sep 17 00:00:00 2001 From: Mohammad Ali Shahbazi Date: Mon, 28 Aug 2023 16:47:03 +0330 Subject: [PATCH 6/7] [DEV-11478] Make controls expanded in Storybook --- .storybook/preview.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 624c2c6..0384a62 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -4,7 +4,12 @@ import { importAll } from '../src/dev/importAll'; importAll(require.context('../src', true, /\.scss$/)); export const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, + actions: { + argTypesRegex: '^on[A-Z].*', + controls: { + expanded: true, + }, + }, }; export const decorators = [ From 8ee61e9b6a49b24ca949a2a284594e639b5ad0d1 Mon Sep 17 00:00:00 2001 From: Mohammad Ali Shahbazi Date: Mon, 28 Aug 2023 16:47:31 +0330 Subject: [PATCH 7/7] [DEV-11478] Allow changing `Embed`'s layout in Storybook --- src/elements/Embed/Embed.slate.stories.tsx | 24 ++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/elements/Embed/Embed.slate.stories.tsx b/src/elements/Embed/Embed.slate.stories.tsx index 26d33c3..ef9d0c4 100644 --- a/src/elements/Embed/Embed.slate.stories.tsx +++ b/src/elements/Embed/Embed.slate.stories.tsx @@ -1,4 +1,5 @@ -import type { Meta, Story } from '@storybook/react'; +import { EmbedNode } from '@prezly/story-content-format'; +import type { Meta, Story, StoryFn } from '@storybook/react'; import { StoryNameDecorator } from '../../dev/StoryNameDecorator'; import { Renderer } from '../../Renderer'; @@ -6,16 +7,28 @@ import { Renderer } from '../../Renderer'; export default { title: 'Elements/Embed', decorators: [StoryNameDecorator], + argTypes: { + layout: { + control: { type: 'radio' }, + options: [ + EmbedNode.Layout.CONTAINED, + EmbedNode.Layout.EXPANDED, + EmbedNode.Layout.FULL_WIDTH, + ], + defaultValue: EmbedNode.Layout.CONTAINED as `${EmbedNode.Layout}`, + description: 'The specified layout', + }, + }, } as Meta; -export const VideoEmbedIframe: Story = () => ( +export const VideoEmbedIframe: StoryFn<{ layout: `${EmbedNode.Layout}` }> = ({ layout }) => ( ( type: 'embed', uuid: 'ef4169f6-1189-406c-825a-45c282e71b90', url: 'https://www.youtube.com/watch?v=A5uqY2x25GE', - layout: 'contained', + layout, oembed: { author_url: 'https://www.youtube.com/channel/UCJ4E393uI8mWRlSqgoeUKKw', cache_age: 86400, @@ -50,6 +63,9 @@ VideoEmbedIframe.story = { parameters: { loki: { skip: true }, }, + args: { + layout: EmbedNode.Layout.CONTAINED, + }, }; export const TwitterPostIframe: Story = () => (