@financial-times/cp-content-pipeline-ui 6.9.1 → 6.10.0-beta.0

package/lib/stories/Expander.stories.js

@@ -0,0 +1,142 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnlyMobileServer = exports.OnlyMobileWithClient = exports.WithClient = exports.OnlyServer = void 0;
+const Expander_1 = require("../components/Expander");
+const client_1 = require("../components/Expander/client");
+const react_1 = __importStar(require("react"));
+const main_1 = __importDefault(require("@financial-times/o-tracking/main"));
+require("./Expander.stories.scss");
+const client_2 = __importDefault(require("../components/Clip/client"));
+require("./Clip.stories.scss");
+const RichText_1 = __importDefault(require("../components/RichText"));
+const structuredContent = {
+    type: 'body',
+    version: 1,
+    children: [
+        {
+            type: 'paragraph',
+            children: [
+                {
+                    type: 'text',
+                    value: 'Mike Johnson has survived an attempt to oust him as speaker of the House of Representatives by Marjorie Taylor Greene, a hardline Republican congresswoman from Georgia. ',
+                },
+            ],
+        },
+        {
+            type: 'paragraph',
+            children: [
+                {
+                    type: 'text',
+                    value: 'In a vote on Wednesday night, the lower chamber of Congress rejected Greene’s bid with overwhelming support from Democrats as well as Republicans. ',
+                },
+            ],
+        },
+        ,
+        {
+            type: 'paragraph',
+            children: [
+                {
+                    type: 'text',
+                    value: 'The vote all but ensures that Johnson will remain in his post until after the November election, and will put a lid on a debate over his political future that has lasted for weeks among Republicans in Congress.  ',
+                },
+            ],
+        },
+        {
+            type: 'clip-set',
+            id: 'http://api.ft.com/content/23a00095-d9fc-4cac-ad7c-477e61e3c159',
+            autoplay: false,
+            loop: false,
+            muted: false,
+            dataLayout: 'in-line',
+            data: {
+                referenceIndex: 3,
+            },
+        },
+    ],
+};
+const storyArgs = {
+    expandLabel: 'Open',
+    collapseLabel: 'Close',
+    onlyMobile: false,
+    id: '111232323-12123-2323',
+};
+exports.default = {
+    title: 'Expander',
+    component: Expander_1.ExpanderServer,
+    tags: ['autodocs'],
+};
+const LiveBLogWrapper = (args) => {
+    const { classNames } = args;
+    return (react_1.default.createElement("div", { className: classNames },
+        react_1.default.createElement("article", { id: "site-content", role: "main", className: "article article-grid  article-grid--no-full-width-graphics js enhanced", "data-article-type": "no-full-width-graphics" },
+            react_1.default.createElement("div", { className: "article__content", "data-trackable": "article-body", "data-component": "article-body", style: { position: 'relative' } },
+                react_1.default.createElement("div", { className: "article__content-body n-content-body js-article__content-body", "data-attribute": "article-content-body" },
+                    react_1.default.createElement(LiveBlogPostWrapper, { ...args, id: "111" }))),
+            react_1.default.createElement("div", { className: "article__right " }))));
+};
+const LiveBlogPostWrapper = (args) => {
+    (0, react_1.useEffect)(() => {
+        main_1.default.init({
+            context: { product: 'next' },
+            test: true,
+        });
+        const clips = client_2.default.init(null, {});
+        return () => {
+            clips.forEach((clip) => clip.unload());
+        };
+    }, []);
+    return (react_1.default.createElement("article", { id: args.id },
+        react_1.default.createElement("div", { className: "n-content-body" },
+            react_1.default.createElement("div", { "data-trackable": "truncated-post", "data-trackable-context-post": "1234", "data-component": "example-boundary" },
+                react_1.default.createElement(Expander_1.ExpanderServer, { ...args, id: `${args.id}_expander` },
+                    react_1.default.createElement(RichText_1.default, { structuredContent: { tree: structuredContent } }))))));
+};
+const OnlyServer = (args) => {
+    return react_1.default.createElement(LiveBLogWrapper, { ...args });
+};
+exports.OnlyServer = OnlyServer;
+exports.OnlyServer.args = { ...storyArgs };
+const WithClient = (args) => {
+    (0, react_1.useEffect)(() => {
+        const clips = client_2.default.init(null, {});
+        const expanders = client_1.ExpanderClient.init();
+        return () => {
+            clips.forEach((clip) => clip.unload());
+            expanders.forEach((expander) => expander?.destroy());
+        };
+    }, []);
+    return react_1.default.createElement(LiveBLogWrapper, { ...args });
+};
+exports.WithClient = WithClient;
+exports.WithClient.args = { ...storyArgs };
+exports.OnlyMobileWithClient = exports.WithClient;
+exports.OnlyMobileWithClient.args = { ...storyArgs, onlyMobile: true };
+exports.OnlyMobileServer = exports.OnlyServer;
+exports.OnlyMobileServer.args = { ...storyArgs, onlyMobile: true };
+//# sourceMappingURL=Expander.stories.js.map

package/lib/stories/Expander.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.stories.js","sourceRoot":"","sources":["../../src/stories/Expander.stories.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "6.9.1",
+  "version": "6.10.0-beta.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -17,9 +17,6 @@
     "@babel/preset-react": "^7.22.5",
     "@dotcom-tool-kit/npm": "^3.1.4",
     "@financial-times/content-tree": "github:financial-times/content-tree#14370e3",
-    "@financial-times/cp-content-pipeline-client": "^3.8.0",
-    "@financial-times/cp-content-pipeline-schema": "^2.11.0",
-    "@financial-times/cp-content-pipeline-styles": "^2.5.2",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-colors": "^6.6.2",
     "@financial-times/o-grid": "^6.1.5",
@@ -61,7 +58,7 @@
     "@financial-times/o-loading": "^5.2.3",
     "@financial-times/o-teaser": "^6.2.2",
     "@financial-times/x-teaser": "^14.6.5",
-    "classnames": "^2.3.1"
+    "classnames": "^2.5.1"
   },
   "peerDependencies": {
     "@financial-times/x-interaction": ">=14",

package/src/components/BackToTopButton/client/index.tsx

@@ -1,3 +1,5 @@
+//To know when scroll event was triggered by scrollIntoView, it needs to polyfill scrollIntoView method
+import '../../../extensions/scrollIntoView'
 import React, { useState, useEffect, useRef } from 'react'
 import { throttle } from './utils'
 
@@ -51,7 +53,12 @@ export default function BackToTop({
         const hasPassedTriggerPosition = startElement
           ? startElement?.getBoundingClientRect()?.bottom <= 0
           : (element?.current?.getBoundingClientRect()?.top ?? 0) <= 0 // Add a fallback value of 0 if element is undefined
-        if (hasPassedTriggerPosition) {
+        // if the user has scrolled past the trigger element and the scroll is not programatic
+        const window =
+          ((scrollableElement as HTMLElement)?.ownerDocument
+            ?.defaultView as Window & { programmaticScroll?: boolean }) ||
+          (scrollableElement as Window & { programmaticScroll?: boolean })
+        if (hasPassedTriggerPosition && !window?.programmaticScroll) {
           result = true
         }
       }

package/src/components/Body/__snapshots__/index.test.tsx.snap

@@ -145,6 +145,7 @@ exports[`Body default renderers renders default renderer for LiveBlogPackage 1`]
 <DocumentFragment>
   <div
     class="x-live-blog-wrapper"
+    data-component="live-blog-wrapper"
     data-live-blog-wrapper-id="live-blog-wrapper"
   >
     <article
@@ -172,7 +173,7 @@ exports[`Body default renderers renders default renderer for LiveBlogPackage 1`]
                 <time
                   class="o-date x-live-blog-post__timestamp"
                   data-o-component="o-date"
-                  data-o-date-format="time-ago-no-seconds"
+                  data-o-date-format="MMM dd, HH:mm"
                   data-o-date-text-case="sentence"
                   datetime="2024-06-11T14:13:25.527Z"
                   itemprop="datePublished"
@@ -180,7 +181,7 @@ exports[`Body default renderers renders default renderer for LiveBlogPackage 1`]
                   <span
                     data-o-date-printer="true"
                   >
-                    6/11/2024, 2:13:25 PM
+                    11/06/2024, 14:13:25
                   </span>
                 </time>
               </span>
@@ -202,10 +203,59 @@ exports[`Body default renderers renders default renderer for LiveBlogPackage 1`]
       </h2>
       <div
         class="x-live-blog-post__body n-content-body article--body"
+        data-trackable="truncated-post"
+        data-trackable-category="live-blog"
+        data-trackable-context-post="00000000-0000-0000-0000-000000000000"
       >
-        <p>
-          Lorem ipsum dolor sit amet
-        </p>
+        <div
+          class="cp-expander cp-expander--mobile-only cp-expander--not-initialised"
+          data-component="expander"
+          data-state="collapsed"
+          id="truncated-00000000-0000-0000-0000-000000000000__container"
+        >
+          <div
+            class="cp-expander-content"
+            id="truncated-00000000-0000-0000-0000-000000000000"
+          >
+            <div
+              class="cp-expander__expand"
+            >
+              <a
+                aria-controls="truncated-00000000-0000-0000-0000-000000000000"
+                aria-expanded="false"
+                aria-hidden="false"
+                class="cp-expander__link"
+                data-action="expand"
+                data-trackable="truncated-post"
+                data-trackable-context-truncated-id="truncated-00000000-0000-0000-0000-000000000000"
+                data-trackable-context-truncated-post="expand"
+                href="#truncated-00000000-0000-0000-0000-000000000000"
+              >
+                Expand post
+              </a>
+            </div>
+            <p>
+              Lorem ipsum dolor sit amet
+            </p>
+            <div
+              class="cp-expander__collapse"
+            >
+              <a
+                aria-controls="truncated-00000000-0000-0000-0000-000000000000"
+                aria-expanded="false"
+                aria-hidden="true"
+                class="cp-expander__link"
+                data-action="collapse"
+                data-trackable="truncated-post"
+                data-trackable-context-truncated-id="truncated-00000000-0000-0000-0000-000000000000"
+                data-trackable-context-truncated-post="collapse"
+                href="#truncated-00000000-0000-0000-0000-000000000000__container"
+              >
+                Collapse post
+              </a>
+            </div>
+          </div>
+        </div>
       </div>
       <div
         class="x-live-blog-post__controls"

package/src/components/Body/index.test.tsx

@@ -103,6 +103,15 @@ const legacyOverridesToTest: [
 ]
 
 describe('Body', () => {
+  let mockDate: jest.SpyInstance
+  beforeAll(() => {
+    mockDate = jest
+      .spyOn(Date.prototype, 'toLocaleString')
+      .mockReturnValue('11/06/2024, 14:13:25')
+  })
+  afterAll(() => {
+    mockDate.mockRestore()
+  })
   describe('default renderers', () => {
     test.each(typesToTest)('renders default renderer for %s', (type) => {
       const { asFragment } = render(

package/src/components/Clip/client/index.ts

@@ -134,6 +134,7 @@ class Clip extends ClipInterface {
   private lastTimeUpdate: number | null = null
   private muteIcon: HTMLElement | null = null
   private controls: HTMLElement | null = null
+  private playPauseButton: HTMLElement | null = null
   private bottomBar: HTMLElement | null = null
   private playText: HTMLElement | null = null
   private progressBar: ProgressBar | null = null
@@ -516,27 +517,42 @@ class Clip extends ClipInterface {
     this.muteIcon.addEventListener('click', () => {
       this.muted = !this.muted
     })
+    // this will ensure that the controls can fade out for mouse-based users
+    this.muteIcon.onmouseup = () => {
+      this.muteIcon?.blur()
+    }
+
+    const playPauseButton = document.createElement('button')
+    playPauseButton.setAttribute('type', 'button')
+    this.playPauseButton = playPauseButton
+    this.togglePlayPauseButton()
 
-    const pauseIcon = document.createElement('button')
     if (this.opts.loop) {
+      playPauseButton.classList.add('cp-clip__playpause-icon-autoplay')
       customControls.classList.add('cp-clip__video-mode-autoplay')
-      pauseIcon.classList.add('cp-clip__pause-icon-autoplay')
-      pauseIcon.setAttribute('tabindex', '-1')
-      pauseIcon.setAttribute('data-trackable', 'video-clip-pause')
-      pauseIcon.setAttribute('aria-label', 'Pause')
       const progressRing = document.createElement('div')
-      progressRing.classList.add('cp-clip__pause-icon-autoplay-progress')
-      pauseIcon.appendChild(progressRing)
+      progressRing.classList.add('cp-clip__playpause-icon-autoplay-progress')
+      playPauseButton.appendChild(progressRing)
       this.progressRing = progressRing
     } else {
-      pauseIcon.classList.add('cp-clip__pause-icon')
-      pauseIcon.setAttribute('aria-label', 'Pause')
-      pauseIcon.setAttribute('data-trackable', 'video-clip-pause')
-      pauseIcon.setAttribute('tabindex', '-1')
+      playPauseButton.classList.add('cp-clip__playpause-icon')
       this.progressBar = this.createProgressBar()
+      // if we have a progress bar then we have the ability to step back and forward, so permit focussing on the video
+      video.setAttribute('tabIndex', '0')
+      video.setAttribute(
+        'aria-label',
+        'Video clip: use left and right arrow keys to skip backward or forwards'
+      )
     }
 
-    pauseIcon.onclick = () => video.pause()
+    playPauseButton.onclick = () => {
+      this.togglePlay()
+    }
+
+    // this will ensure that the controls can fade out for mouse-based users
+    playPauseButton.onmouseup = () => {
+      playPauseButton.blur()
+    }
 
     const noAudioIcon = this.createNoAudioIcon()
 
@@ -560,7 +576,7 @@ class Clip extends ClipInterface {
       bottomBar.append(closedCaptionIcon)
     }
 
-    bottomBar.append(pauseIcon)
+    bottomBar.append(playPauseButton)
     bottomBar.append(this.videoHasNoAudio() ? noAudioIcon : muteIcon)
     customControls.prepend(playIconContainer)
     customControls.append(bottomBar)
@@ -575,15 +591,24 @@ class Clip extends ClipInterface {
     video.addEventListener('playing', () => {
       //resize controls in case poster is different size than video at the end
       this.resizeControls()
-
+      this.togglePlayPauseButton()
+      this.containerEl.classList.remove(
+        'cp-clip--paused',
+        'cp-clip--loading',
+        'cp-clip--ready'
+      )
       this.containerEl.classList.add('cp-clip--playing')
-      this.containerEl.classList.remove('cp-clip--loading')
       this.fadeOut()
     })
 
     video.addEventListener('pause', () => {
-      this.containerEl.classList.remove('cp-clip--playing')
-      this.containerEl.classList.remove('cp-clip--loading')
+      this.togglePlayPauseButton()
+      this.containerEl.classList.remove(
+        'cp-clip--playing',
+        'cp-clip--loading',
+        'cp-clip--ready'
+      )
+      this.containerEl.classList.add('cp-clip--paused')
       playIcon.setAttribute('data-trackable', 'video-clip-resume')
 
       this.fadeIn()
@@ -630,6 +655,7 @@ class Clip extends ClipInterface {
       this.playText.innerText = `PLAY | ${duration}`
       this.playText.classList.add('cp-clip__play-text')
       playIconContainer.append(this.playText)
+      this.containerEl.classList.add('cp-clip--ready')
     }
 
     if (video.readyState >= 1) {
@@ -1051,14 +1077,7 @@ class Clip extends ClipInterface {
     const hasFocus = this.isFocused()
     const isPlaying = this.isVideoPlaying()
     if (!hasFocus) return
-    if (event.keyCode === 32) {
-      // The default action from pressing the spacebar is to scroll down the page
-      // We prevent the page from scrolling down if the video is in view and someone presses the space bar
-      event.preventDefault()
-      event.stopImmediatePropagation()
-      const currentElement: HTMLElement = document.activeElement as HTMLElement
-      if (currentElement === this.videoEl) this.togglePlay()
-    } else if (isPlaying && event.key === 'ArrowLeft') {
+    if (isPlaying && event.key === 'ArrowLeft') {
       this.progressBar?.stepBackward()
       event.preventDefault()
       event.stopImmediatePropagation()
@@ -1087,7 +1106,30 @@ class Clip extends ClipInterface {
       this.videoEl.play()
     }
     this.videoEl.classList.add('no-focus-style')
-    this.videoEl.focus()
+  }
+
+  togglePlayPauseButton() {
+    if (!this.playPauseButton) return
+
+    const isPlaying = this.isVideoPlaying()
+
+    this.playPauseButton.classList.toggle(
+      'cp-clip__playpause-icon-pause',
+      isPlaying
+    )
+    this.playPauseButton.classList.toggle(
+      'cp-clip__playpause-icon-play',
+      !isPlaying
+    )
+
+    this.playPauseButton.setAttribute(
+      'aria-label',
+      isPlaying ? 'Pause' : 'Play'
+    )
+    this.playPauseButton.setAttribute(
+      'data-trackable',
+      isPlaying ? 'video-clip-pause' : 'video-clip-play'
+    )
   }
 
   createProgressBar(): ProgressBar {

package/src/components/Clip/client/main.scss

@@ -50,7 +50,7 @@
 	}
 
 	.cp-clip__video-controls-bottom-bar {
-		display: none;
+		display: flex;
 		width: 100%;
 		height: 35%;
 		bottom: 0px;
@@ -64,7 +64,7 @@
 		}
 		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 38.38%, rgba(153, 153, 153, 0) 100%);
 
-		&--fade-out {
+		&--fade-out:not(:has(button:focus)) {
 			@include fade-out-animation();
 		}
 	}
@@ -121,9 +121,21 @@
 		background-position: 50%;
 	}
 
-	&.cp-clip--playing .cp-clip__play-icon-container {
+	&.cp-clip--ready .cp-clip__video-controls-bottom-bar:not(:has(button:focus)),
+	&.cp-clip--paused .cp-clip__video-controls-bottom-bar:not(:has(button:focus)) {
+		@include fade-out-animation();
+	}
+
+	// do not show the large play button when any of these are true:
+		// if the video is playing
+		// if the video is loading
+		// if the bottom bar area has a focussed button
+	&.cp-clip--playing .cp-clip__play-icon-container,
+	&.cp-clip--loading .cp-clip__play-icon-container,
+	.cp-clip__video-controls:has(.cp-clip__video-controls-bottom-bar button:focus) .cp-clip__play-icon-container {
 		display: none;
 	}
+
 	&.cp-clip--playing .cp-clip__video-controls-bottom-bar {
 		display: flex;
 	}
@@ -132,27 +144,30 @@
 		display: block;
 	}
 
-	&.cp-clip--loading .cp-clip__play-icon-container {
-		display: none;
+	.cp-clip__playpause-icon-pause {
+		// The icon will be cached in the FT-App
+		// See: https://github.com/Financial-Times/ft-app/blob/main/tools/webpack/client/webpack.config.common.js#L218
+		@include oIconsContent($icon-name: 'pause', $size: 32px, $color: oColorsByName('white'));
 	}
 
-	.cp-clip__pause-icon {
+	.cp-clip__playpause-icon-play {
 		// The icon will be cached in the FT-App
 		// See: https://github.com/Financial-Times/ft-app/blob/main/tools/webpack/client/webpack.config.common.js#L218
-		@include oIconsContent($icon-name: 'pause', $size: 32px, $color: oColorsByName('white'));
-		border: none;
+		@include oIconsContent($icon-name: 'play', $size: 32px, $color: oColorsByName('white'));
 	}
 
+	.cp-clip__playpause-icon {
+		border: none;
+	}
 
-	.cp-clip__pause-icon-autoplay {
-		@include oIconsContent($icon-name: 'pause', $size: 32px, $color: oColorsByName('white'));
+	.cp-clip__playpause-icon-autoplay {
 		border-radius: 50%;
 		border: 2px solid oColorsByName('ft-grey');
 		padding:0px;
 		margin-left:oSpacingByName('s2');
 	}
 
-	.cp-clip__pause-icon-autoplay-progress {
+	.cp-clip__playpause-icon-autoplay-progress {
 		width: 100%;
 		height: 100%;
 		border-radius: 50%;
@@ -198,7 +213,7 @@
 		@include oIconsContent($icon-name: 'closed-captions-on', $size: 32px, $color: oColorsByName('white'));
 	}
 
-	.cp-clip--fade-out {
+	.cp-clip--fade-out:not(:has(button:focus)) {
 		@include fade-out-animation();
 	}
 

package/src/components/Clip/client/progressBar.ts

@@ -68,7 +68,7 @@ class ProgressBar {
       }
     })
 
-    container.addEventListener('touchend', (e: TouchEvent) => {
+    const touchEnd = (e: TouchEvent) => {
       this.touchStarted = false
       this.timeoutPressed = window.setTimeout(() => {
         mainBar.classList.remove('cp-clip__progress-enlarged')
@@ -77,7 +77,10 @@ class ProgressBar {
         this.scrub(e.changedTouches[0].clientX)
       }
       e.preventDefault()
-    })
+    }
+
+    container.addEventListener('touchend', touchEnd)
+    container.addEventListener('touchcancel', touchEnd)
 
     container.addEventListener('touchmove', (e) => {
       if (e.changedTouches[0]) {

package/src/components/Clip/components/ClipTag.tsx

@@ -88,7 +88,6 @@ export const ClipTag = ({
           loop={loop}
           poster={poster}
           preload={preload}
-          tabIndex={0}
         >
           {clip?.dataSource?.map(({ binaryUrl, mediaType }, index) => {
             return (

package/src/components/Clip/components/Container.tsx

@@ -7,9 +7,11 @@ interface ContainerProps {
 
 export const Container = ({ dataLayout, children }: ContainerProps) => {
   return dataLayout === 'full-grid' ? (
-    <div className="n-content-layout__container">{children}</div>
+    <div className="n-content-layout__container" data-component="clip-set">
+      {children}
+    </div>
   ) : dataLayout === 'mid-grid' ? (
-    <div className="n-content-layout__container">
+    <div className="n-content-layout__container" data-component="clip-set">
       <div
         data-o-grid-colspan="12 S12 M12 L10 XL10"
         className="n-content-layout__container--mid-grid"
@@ -18,6 +20,11 @@ export const Container = ({ dataLayout, children }: ContainerProps) => {
       </div>
     </div>
   ) : (
-    <div className="n-content-layout__container--in-line">{children}</div>
+    <div
+      className="n-content-layout__container--in-line"
+      data-component="clip-set"
+    >
+      {children}
+    </div>
   )
 }

package/src/components/Clip/template/index.ts

@@ -1,5 +1,4 @@
 // This file will is used by next-es-interface and it renders the component as a string
-/* eslint-disable import/no-unused-modules */
 // TODO: Remove this file once next-es-interface and Elastic Search won't be used anymore to render articles (After r13n API will be used in Production by all the consumers: FT-App, next-article, FT Edit)
 import React from 'react'
 import ReactDOMServer from 'react-dom/server'