From 3153ee4f210bb6b3cbc2fb0496a15ecde8ffafdf Mon Sep 17 00:00:00 2001 From: Evan Date: Thu, 9 May 2024 11:19:04 -0400 Subject: [PATCH 1/3] chore(docs): fix page-loaded class --- .../components/example/example.js | 162 ++++++++++++------ 1 file changed, 112 insertions(+), 50 deletions(-) diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index 34c3d887e4..c854f1507a 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -1,6 +1,15 @@ import React, { useContext } from 'react'; import { useLocation } from '@reach/router'; -import { Button, CodeBlock, Flex, CodeBlockCode, debounce, Label, Switch, Tooltip } from '@patternfly/react-core'; +import { + Button, + CodeBlock, + Flex, + CodeBlockCode, + debounce, + Label, + Switch, + Tooltip, +} from '@patternfly/react-core'; import * as reactCoreModule from '@patternfly/react-core'; import * as reactCoreNextModule from '@patternfly/react-core/next'; import * as reactCoreDeprecatedModule from '@patternfly/react-core/deprecated'; @@ -16,13 +25,13 @@ import { getReactParams, getExampleClassName, getExampleId, - liveCodeTypes + liveCodeTypes, } from '../../helpers'; import { convertToReactComponent } from '@patternfly/ast-helpers'; import missingThumbnail from './missing-thumbnail.jpg'; import { RtlContext } from '../../layouts'; -const errorComponent = err => 
{err.toString()}
; +const errorComponent = (err) => 
{err.toString()}
; class ErrorBoundary extends React.Component { constructor(props) { @@ -34,7 +43,7 @@ class ErrorBoundary extends React.Component { errorInfo._suppressLogging = true; this.setState({ error: error, - errorInfo: errorInfo + errorInfo: errorInfo, }); } @@ -94,14 +103,19 @@ export const Example = ({ // md file location in node_modules, used to resolve relative import paths in examples relPath = '', // absolute url to hosted file - sourceLink = '' + sourceLink = '', }) => { if (isFullscreenPreview) { isFullscreen = false; - window.addEventListener('load', () => { - //append a class to the document body to indicate to screenshot/automated visual regression tools that the page has loaded + + //append a class to the document body to indicate to screenshot/automated visual regression tools that the page has loaded + if (document.readyState === 'complete') { document.body.classList.add('page-loaded'); - }); + } else { + window.addEventListener('load', () => { + document.body.classList.add('page-loaded'); + }); + } } if (!lang) { // Inline code @@ -124,20 +138,26 @@ export const Example = ({ ...reactCoreModule, ...reactTableModule, ...(source === 'react-next' ? reactCoreNextModule : {}), - ...(source === 'react-deprecated' ? {...reactCoreDeprecatedModule, ...reactTableDeprecatedModule} : {}) + ...(source === 'react-deprecated' + ? { ...reactCoreDeprecatedModule, ...reactTableDeprecatedModule } + : {}), }; let livePreview = null; if (lang === 'html') { livePreview = (
); } else { try { - const { code: transformedCode, hasTS } = convertToReactComponent(editorCode); + const { code: transformedCode, hasTS } = + convertToReactComponent(editorCode); if (hasTS) { lang = 'ts'; } else { @@ -147,7 +167,11 @@ export const Example = ({ const componentNames = Object.keys(scope); const componentValues = Object.values(scope); - const getPreviewComponent = new Function('React', ...componentNames, transformedCode); + const getPreviewComponent = new Function( + 'React', + ...componentNames, + transformedCode + ); const PreviewComponent = getPreviewComponent(React, ...componentValues); livePreview = ( @@ -167,17 +191,34 @@ export const Example = ({
{livePreview} {(hasDarkThemeSwitcher || hasRTLSwitcher) && ( - + {hasDarkThemeSwitcher && ( - - document.querySelector('html').classList.toggle('pf-v6-theme-dark')} /> + + document + .querySelector('html') + .classList.toggle('pf-v6-theme-dark') + } + /> )} {hasRTLSwitcher && ( - { - const html = document.querySelector('html'); - const curDir = html.dir; - html.dir = (curDir !== 'rtl') ? 'rtl' : 'ltr'; - }} /> + { + const html = document.querySelector('html'); + const curDir = html.dir; + html.dir = curDir !== 'rtl' ? 'rtl' : 'ltr'; + }} + /> )} )} @@ -188,12 +229,21 @@ export const Example = ({ const codeBoxParams = getParameters( lang === 'html' ? getStaticParams(title, editorCode) - : getReactParams(title, editorCode, scope, lang, relativeImports, relPath, sourceLink) + : getReactParams( + title, + editorCode, + scope, + lang, + relativeImports, + relPath, + sourceLink + ) ); - const fullscreenLink = loc.pathname.replace(/\/$/, '') - + (loc.pathname.endsWith(source) ? '' : `/${source}`) - + '/' - + slugger(title); + const fullscreenLink = + loc.pathname.replace(/\/$/, '') + + (loc.pathname.endsWith(source) ? '' : `/${source}`) + + '/' + + slugger(title); return (
@@ -204,21 +254,27 @@ export const Example = ({ {isBeta && ( )} {isDemo && ( )} {isDeprecated && ( )} @@ -232,28 +288,34 @@ export const Example = ({ {children}
- {isFullscreen - ?
- - {`${title} - -
- : - } + {`${title} + +
+ ) : ( +
+ {livePreview} +
+ )}
); -} +}; From bd8d50857cebd2df8d91ee77f7f817115fc01341 Mon Sep 17 00:00:00 2001 From: Evan Date: Mon, 13 May 2024 13:38:30 -0400 Subject: [PATCH 2/3] chore(docs): wrapped page-loaded in useeffect --- .../components/example/example.js | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index c854f1507a..c7138e34d2 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -107,16 +107,20 @@ export const Example = ({ }) => { if (isFullscreenPreview) { isFullscreen = false; - - //append a class to the document body to indicate to screenshot/automated visual regression tools that the page has loaded - if (document.readyState === 'complete') { - document.body.classList.add('page-loaded'); - } else { - window.addEventListener('load', () => { - document.body.classList.add('page-loaded'); - }); - } } + + //append a class to the document body on fullscreen examples to indicate to screenshot/automated visual regression tools that the page has loaded + const addPageLoadedClass = () => document.body.classList.add('page-loaded'); + useEffect(() => { + if (!isFullscreenPreview) return; + + document.readyState === 'complete' + ? addPageLoadedClass() + : window.addEventListener('load', addPageLoadedClass); + + return () => window.removeEventListener('load', addPageLoadedClass); + }, []); + if (!lang) { // Inline code return {code}; From fe0dbd3a046081deeb5ee52ceda03f7646182e34 Mon Sep 17 00:00:00 2001 From: Evan Date: Mon, 13 May 2024 13:43:24 -0400 Subject: [PATCH 3/3] chore(docs): import useeffect --- packages/documentation-framework/components/example/example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index c7138e34d2..99a249c474 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React, { useContext, useEffect } from 'react'; import { useLocation } from '@reach/router'; import { Button,