@patternfly/documentation-framework 6.0.0-alpha.5 → 6.0.0-alpha.51

package/layouts/sideNavLayout/sideNavLayout.js

@@ -24,7 +24,7 @@ import {
   ToolbarItem,
   SkipToContent,
   Switch,
-  SearchInput,
+  // SearchInput,
   ToggleGroup,
   ToggleGroupItem
 } from '@patternfly/react-core';
@@ -35,6 +35,7 @@ import SunIcon from '@patternfly/react-icons/dist/esm/icons/sun-icon';
 import { SideNav, TopNav, GdprBanner } from '../../components';
 import staticVersions from '../../versions.json';
 import v5Logo from '../PF-HorizontalLogo-Reverse.svg';
+import { Footer } from '@patternfly/documentation-framework/components';
 
 export const RtlContext = createContext(false);
 
@@ -51,38 +52,38 @@ const HeaderTools = ({
   const initialVersion = staticVersions.Releases.find(release => release.latest);
   const latestVersion = versions.Releases.find(version => version.latest);
   const previousReleases = Object.values(versions.Releases).filter(version => !version.hidden && !version.latest);
-  const hasSearch = algolia;
+  // const hasSearch = algolia;
   const [isDropdownOpen, setDropdownOpen] = useState(false);
-  const [searchValue, setSearchValue] = React.useState('');
-  const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
+  // const [searchValue, setSearchValue] = React.useState('');
+  // const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
   const [isDarkTheme, setIsDarkTheme] = React.useState(false);
 
   const getDropdownItem = (version, isLatest = false) => (
     <DropdownItem itemId={version.name} key={version.name} to={isLatest ? '/' : `/${version.name}`}>
-      {`Release ${version.name}`}
+      {`Current ${version.name}`}
     </DropdownItem>
   );
 
-  const onChange = (_evt, value) => {
-    setSearchValue(value);
-  };
+  // const onChange = (_evt, value) => {
+  //   setSearchValue(value);
+  // };
 
-  const onToggleExpand = (_evt, isSearchExpanded) => {
-    setIsSearchExpanded(!isSearchExpanded);
-  };
+  // const onToggleExpand = (_evt, isSearchExpanded) => {
+  //   setIsSearchExpanded(!isSearchExpanded);
+  // };
 
   const toggleDarkTheme = (_evt, selected) => {
     const darkThemeToggleClicked = !selected === isDarkTheme
-    document.querySelector('html').classList.toggle('pf-v5-theme-dark', darkThemeToggleClicked);
+    document.querySelector('html').classList.toggle('pf-v6-theme-dark', darkThemeToggleClicked);
     setIsDarkTheme(darkThemeToggleClicked);
   };
 
-  useEffect(() => {
-    // reattach algolia to input each time search is expanded
-    if (hasSearch && isSearchExpanded) {
-      attachDocSearch(algolia, '.ws-global-search .pf-v5-c-text-input-group__text-input', 1000);
-    }
-  }, [isSearchExpanded])
+  // useEffect(() => {
+  //   // reattach algolia to input each time search is expanded
+  //   if (hasSearch && isSearchExpanded) {
+  //     attachDocSearch(algolia, '.ws-global-search .pf-v6-c-text-input-group__text-input', 1000);
+  //   }
+  // }, [isSearchExpanded])
 
   return (
     <Toolbar isFullHeight>
@@ -93,8 +94,7 @@ const HeaderTools = ({
           </ToolbarItem>
         )}
         <ToolbarGroup
-          align={{ default: 'alignRight' }}
-          spaceItems={{ default: 'spacerNone', md: 'spacerMd' }}
+          align={{ default: 'alignEnd' }}
         >
           {hasDarkThemeSwitcher && (
             <ToolbarItem>
@@ -109,7 +109,7 @@ const HeaderTools = ({
               <Switch id="ws-rtl-switch" label={'RTL'} defaultChecked={isRTL} onChange={() => setIsRTL(isRTL => !isRTL)} />
             </ToolbarItem>
           )}
-          {hasSearch && (
+          {/* {hasSearch && (
             <ToolbarItem>
               <SearchInput
                 className="ws-global-search"
@@ -120,7 +120,7 @@ const HeaderTools = ({
                 expandableInput={{ isExpanded: isSearchExpanded, onToggleExpand, toggleAriaLabel: 'Expandable search input toggle' }}
               />
             </ToolbarItem>
-          )}
+          )} */}
           <ToolbarItem>
             <Button
               component="a"
@@ -145,7 +145,7 @@ const HeaderTools = ({
                     onClick={() => setDropdownOpen(!isDropdownOpen)}
                     isExpanded={isDropdownOpen}
                   >
-                    Release {initialVersion.name}
+                    Current alphas
                   </MenuToggle>
                 )}
               >
@@ -163,12 +163,35 @@ const HeaderTools = ({
                     </DropdownList>
                   </DropdownGroup>
                 )}
-                <Divider key="divider" className="ws-switcher-divider"/>
+                <Divider key="divider1" className="ws-switcher-divider"/>
+                <DropdownGroup key="Alpha preview version" label="Alpha preview version">
+                  <DropdownList>
+                    <DropdownItem
+                      key="PatternFly 6"
+                      className="ws-patternfly-versions"
+                      isExternalLink
+                      to="https://staging-v6.patternfly.org/"
+                      itemId="patternfly-6"
+                    >
+                      PatternFly 6
+                    </DropdownItem>
+                  </DropdownList>
+                </DropdownGroup>
+                <Divider key="divider2" className="ws-switcher-divider"/>
                 <DropdownGroup key="Previous versions" label="Previous versions">
                   <DropdownList>
+                    <DropdownItem
+                      key="PatternFly 5"
+                      className="ws-patternfly-versions"
+                      isExternalLink
+                      to="https://www.patternfly.org"
+                      itemId="patternfly-5"
+                    >
+                      PatternFly 5
+                    </DropdownItem>
                     <DropdownItem
                       key="PatternFly 4"
-                      className="ws-patternfly-3"
+                      className="ws-patternfly-versions"
                       isExternalLink
                       to="http://v4-archive.patternfly.org/v4/"
                       itemId="patternfly-4"
@@ -177,7 +200,7 @@ const HeaderTools = ({
                     </DropdownItem>
                     <DropdownItem
                       key="PatternFly 3"
-                      className="ws-patternfly-3"
+                      className="ws-patternfly-versions"
                       isExternalLink
                       to="https://pf3.patternfly.org/"
                       itemId="patternfly-3"
@@ -201,7 +224,7 @@ export function attachDocSearch(algolia, inputSelector, timeout) {
       inputSelector,
       autocompleteOptions: {
         hint: false,
-        appendTo: `.ws-global-search .pf-v5-c-text-input-group`,
+        appendTo: `.ws-global-search .pf-v6-c-text-input-group`,
       },
       debug: process.env.NODE_ENV !== 'production',
       ...algolia
@@ -250,7 +273,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
     </PageSidebar>
   );
 
-  const Header = (
+  const masthead = (
     <Masthead className="ws-masthead">
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
@@ -263,7 +286,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
             <svg height="40px" viewBox="0 0 679 158">
               <title>PF-HorizontalLogo-Color</title>
               <defs>
-                <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-basic-masthead">
+                <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-website-masthead">
                   <stop stopColor="#2B9AF3" offset="0%"></stop>
                   <stop stopColor="#73BCF7" stopOpacity="0.502212631" offset="100%"></stop>
                 </linearGradient>
@@ -282,9 +305,9 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
                   <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"></path>
                 </g>
                 <g transform="translate(0.000000, 0.000000)">
-                  <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" fill="#0066CC"></path>
-                  <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" fill="url(#linearGradient-basic-masthead)"></path>
-                  <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" fill="url(#linearGradient-basic-masthead)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
+                  <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" fill='var(--pf-t--color--blue--50)'></path>
+                  <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" fill="url(#linearGradient-website-masthead)"></path>
+                  <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" fill="url(#linearGradient-website-masthead)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
                 </g>
               </g>
             </svg>
@@ -314,13 +337,15 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
         <Page
           id="ws-page"
           mainContainerId="ws-page-main"
-          header={Header}
+          mainComponent="div"
+          masthead={masthead}
           sidebar={SideBar}
           skipToContent={<SkipToContent href="#ws-page-main">Skip to content</SkipToContent>}
           isManagedSidebar
           defaultManagedSidebarIsOpen={navOpenProp}
         >
           {children}
+          {process.env.hasFooter && <Footer />}
         </Page>
         <div id="ws-page-banners">
           {hasGdprBanner && <GdprBanner />}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.0.0-alpha.5",
+  "version": "6.0.0-alpha.51",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -9,18 +9,14 @@
     "pf-docs-framework": "scripts/cli/cli.js"
   },
   "dependencies": {
-    "@babel/core": "7.18.2",
-    "@babel/plugin-proposal-class-properties": "7.17.12",
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
-    "@babel/plugin-proposal-private-methods": "7.17.12",
-    "@babel/plugin-proposal-private-property-in-object": "7.17.12",
-    "@babel/plugin-transform-react-jsx": "7.17.12",
-    "@babel/preset-env": "7.18.2",
+    "@babel/core": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.3.15-alpha.4",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.40",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "9.8.6",
-    "babel-loader": "9.1.2",
+    "babel-loader": "^9.1.3",
     "camelcase-css": "2.0.1",
     "chokidar": "3.5.3",
     "clean-webpack-plugin": "4.0.0",
@@ -43,18 +39,15 @@
     "mdast-util-to-hast": "9.1.1",
     "mdurl": "1.0.1",
     "mini-css-extract-plugin": "2.7.5",
-    "monaco-editor": "0.34.1",
-    "monaco-editor-webpack-plugin": "7.0.1",
     "null-loader": "4.0.1",
     "parse-entities": "2.0.0",
     "path-browserify": "1.0.1",
     "postcss": "8.4.32",
     "postcss-loader": "7.1.0",
     "process": "^0.11.10",
-    "puppeteer": "19.7.3",
+    "puppeteer": "19.11.1",
     "puppeteer-cluster": "0.23.0",
     "react-docgen": "5.3.1",
-    "react-monaco-editor": "^0.51.0",
     "react-ssr-prepass": "1.5.0",
     "remark-footnotes": "1.0.0",
     "remark-frontmatter": "2.0.0",
@@ -67,7 +60,7 @@
     "style-to-object": "0.3.0",
     "to-vfile": "6.1.0",
     "typedoc": "0.23.0",
-    "typescript": "4.3.5",
+    "typescript": "4.7.4",
     "unified": "9.1.0",
     "unist-util-remove": "2.0.0",
     "unist-util-visit": "2.0.3",
@@ -80,12 +73,12 @@
     "webpack-merge": "5.8.0"
   },
   "peerDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.38",
-    "@patternfly/react-code-editor": "6.0.0-alpha.5",
-    "@patternfly/react-core": "6.0.0-alpha.5",
-    "@patternfly/react-table": "6.0.0-alpha.5",
+    "@patternfly/patternfly": "6.0.0-alpha.139",
+    "@patternfly/react-code-editor": "6.0.0-alpha.69",
+    "@patternfly/react-core": "6.0.0-alpha.69",
+    "@patternfly/react-table": "6.0.0-alpha.69",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "04fc0b2681941add484819d9cb2def666ba1fd02"
+  "gitHead": "41ad3661e2b785c21f13aa5729cafbafe54994d7"
 }

package/pages/404/404.css

@@ -5,12 +5,12 @@
 }
 
 .ws-404-card-header {
-  padding: var(--pf-v5-global--spacer--lg);
+  padding: var(--pf-t--global--spacer--lg);
 }
 
 div.ws-404-button-wrapper {
   width: 100%;
   display: flex;
   justify-content: center;
-  padding: var(--pf-v5-global--spacer--xl);
+  padding: var(--pf-t--global--spacer--xl);
 }

package/pages/404/index.js

@@ -9,7 +9,6 @@ import {
   CardHeader,
   EmptyState,
   EmptyStateBody,
-  EmptyStateIcon,
   Grid,
   GridItem,
   PageSection,
@@ -68,12 +67,10 @@ const Page404 = () => {
   
   return (
     <PageSection>
-      <EmptyState variant="xl">
-        <EmptyStateIcon icon={() => <img src={PathMissingIcon} alt="Missing path" width="128px" />} />
-        <Title headingLevel="h1" size="2xl">
-          404: That page no longer exists
-        </Title>
-        <p style={{ marginTop: 'var(--pf-v5-global--spacer--sm)' }}>
+      <EmptyState headingLevel="h1" titleText="404: That page no longer exists" variant="xl" icon={() => <img src={PathMissingIcon} alt="" width="128px" />}>
+        <p
+          // style={{ marginTop: 'var(--pf-v6-global--spacer--sm)' }}
+        >
           Another page might have the information you need, so try searching PatternFly.
         </p>
         <EmptyStateBody>
@@ -90,7 +87,7 @@ const Page404 = () => {
           body="Learn about designing and developing with PatternFly."
           link={{
             text: 'View getting started resources',
-            to: '/get-started/about'
+            to: '/get-started/about-patternfly'
           }}
         />
         <Card404

package/routes.js

@@ -83,7 +83,9 @@ const sourceOrder = {
   html: 3,
   'html-demos': 4,
   'design-guidelines': 99,
-  'accessibility': 100
+  'accessibility': 100,
+  'upgrade-guide': 101,
+  'release-notes': 102,
 };
 
 const sortSources = ({ source: s1 }, { source: s2 }) => {

package/scripts/md/anchor-header.js

@@ -42,7 +42,7 @@ function anchorHeader(tocCallback) {
         // Add to TOC for indexing
         addTOCItem(tocItem, node.tagName);
 
-        node.properties.size = node.tagName;
+        node.properties.headingLevel = node.tagName;
         node.properties.className = node.properties.className || '';
         node.properties.className += node.properties.className ? ' ' : '';
         node.properties.className += `ws-title ws-${node.tagName}`;

package/scripts/md/parseMD.js

@@ -105,6 +105,7 @@ function toReactComponent(mdFilePath, source, buildMode) {
         section: frontmatter.section || '',
         subsection: frontmatter.subsection || '',
         deprecated: frontmatter.deprecated || false,
+        template: frontmatter.template || false,
         beta: frontmatter.beta || false,
         demo: frontmatter.demo || false,
         newImplementationLink: frontmatter.newImplementationLink || false,
@@ -213,24 +214,24 @@ function toReactComponent(mdFilePath, source, buildMode) {
           pageData.examples.push(node.title);
         }
         // Typecheck TS examples
-        if (node.properties.lang === 'ts') {
-          const typerrors = typecheck(
-            path.join(pageData.id, node.title + '.tsx'), // Needs to be unique per-example
-            node.properties.code
-          );
-          typerrors.forEach(({ line, character, message }) => {
-            line = node.position.start.line + line + 1;
-            const column = character;
-            if (buildMode === 'start') {
-              // Don't fail to start over types
-              file.message(`\u001b[31m THIS WILL FAIL THE BUILD\u001b[0m\n  ${message}`, { line, column });
-            } else {
-              console.log('\u001b[31m');
-              file.fail(`\n  ${message}\n`, { line, column });
-              console.log('\u001b[0m');
-            }
-          });
-        }
+        // if (node.properties.lang === 'ts') {
+        //   const typerrors = typecheck(
+        //     path.join(pageData.id, node.title + '.tsx'), // Needs to be unique per-example
+        //     node.properties.code
+        //   );
+        //   typerrors.forEach(({ line, character, message }) => {
+        //     line = node.position.start.line + line + 1;
+        //     const column = character;
+        //     if (buildMode === 'start') {
+        //       // Don't fail to start over types
+        //       file.message(`\u001b[31m THIS WILL FAIL THE BUILD\u001b[0m\n  ${message}`, { line, column });
+        //     } else {
+        //       console.log('\u001b[31m');
+        //       file.fail(`\n  ${message}\n`, { line, column });
+        //       console.log('\u001b[0m');
+        //     }
+        //   });
+        // }
       });
     })
     // Add custom PatternFly doc design things
@@ -295,6 +296,7 @@ function sourceMDFile(file, source, buildMode) {
       ...(pageData.hideNavItem && { hideNavItem: pageData.hideNavItem }),
       ...(pageData.beta && { beta: pageData.beta }),
       ...(pageData.deprecated && { deprecated: pageData.deprecated }),
+      ...(pageData.template && { template: pageData.template }),
       ...(pageData.demo && { demo: pageData.demo }),
       ...(pageData.sortValue && { sortValue: pageData.sortValue }),
       ...(pageData.subsectionSortValue && { subsectionSortValue: pageData.subsectionSortValue })

package/scripts/md/styled-tags.js

@@ -1,10 +1,8 @@
 const visit = require('unist-util-visit');
 
-const styledMdTags = [
+const contentStyledMdTags = [
   'p',
   'ul',
-  'ul',
-  'ul',
   'ol',
   'li',
   'dl',
@@ -12,35 +10,45 @@ const styledMdTags = [
   'small',
   'hr',
   'dt',
+  'dd'
+];
+
+const styledMdTags = [
+  ...contentStyledMdTags,
   'code',
   'table',
   'img'
-];
+]
 
 function styledTags() {
   return tree => {
     visit(tree, 'element', node => {
+      node.properties.className = node.properties.className || '';
+      
+      if (contentStyledMdTags.includes(node.tagName)) {
+        node.properties.className += `pf-v6-c-content--${node.tagName}`;
+      }
+
       if (styledMdTags.includes(node.tagName)) {
-        node.properties.className = node.properties.className || '';
         node.properties.className += node.properties.className ? ' ' : '';
-        node.properties.className += `ws-${node.tagName}`;
-        // Match pf-v5-c-table implementation
+        node.properties.className += `ws-${node.tagName} `;
+        // Match pf-v6-c-table implementation
         // https://pf4.patternfly.org/components/table/html/basic-table/
         if (node.tagName === 'table') {
-          node.properties.className += ' pf-v5-c-table pf-m-grid-lg pf-m-compact';
+          node.properties.className += ' pf-v6-c-table pf-m-grid-lg pf-m-compact';
           node.properties.role = 'grid';
           let columnHeaders = [];
           for (let child of node.children) {
             if (child.tagName === 'thead') {
-              child.properties.className = 'pf-v5-c-table__thead';
+              child.properties.className = 'pf-v6-c-table__thead';
               // Find column headers
               const tr = child.children.find(child => child.tagName === 'tr');
               tr.properties.role = 'row';
-              tr.properties.className = 'pf-v5-c-table__tr';
+              tr.properties.className = 'pf-v6-c-table__tr';
               tr.children
                 .filter(child => child.tagName === 'th')
                 .forEach(th => {
-                  th.properties.className = `${th.properties.className} pf-v5-c-table__th pf-m-wrap`;
+                  th.properties.className = `${th.properties.className} pf-v6-c-table__th pf-m-wrap`;
                   th.properties.role = 'columnheader';
                   th.properties.scope = 'col';
                   let colName = '';
@@ -57,17 +65,17 @@ function styledTags() {
             }
             else if (child.tagName === 'tbody') {
               child.properties.role = 'rowgroup';
-              child.properties.className = 'pf-v5-c-table__tbody';
+              child.properties.className = 'pf-v6-c-table__tbody';
               child.children
                 .filter(tr => tr.tagName === 'tr')
                 .forEach(tr => {
                   tr.properties.role = 'row';
-                  tr.properties.className = 'pf-v5-c-table__tr';
+                  tr.properties.className = 'pf-v6-c-table__tr';
                   tr.children
                     .filter(td => td.tagName === 'td')
                     .forEach((td, i) => {
                       td.properties.role = 'cell';
-                      td.properties.className = 'pf-v5-c-table__td';
+                      td.properties.className = 'pf-v6-c-table__td';
                       if (columnHeaders[i]) {
                         td.properties['data-label'] = columnHeaders[i];
                       }

package/scripts/webpack/webpack.base.config.js

@@ -2,7 +2,6 @@ const path = require('path');
 const webpack = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = (_env, argv) => {
   const {
@@ -47,6 +46,7 @@ module.exports = (_env, argv) => {
             /react-[\w-]+\\src\\.*\\examples/, // fix for Windows
             /react-[\w-]+\/patternfly-docs\/.*\/examples/, //fixes for extensions
             /react-[\w-]+\\patternfly-docs\\.*\\examples/,
+            path.resolve(__dirname, '../../../../node_modules/@patternfly/design-tokens/patternfly-docs/content')
           ].concat(includePaths.map(path => new RegExp(path))),
           exclude: [
             path.resolve(__dirname, '../../node_modules'), // Temporarily compile theme using webpack for development
@@ -56,20 +56,12 @@ module.exports = (_env, argv) => {
             options: {
               cacheDirectory: '.cache/babel',
               cacheCompression: false,
-              presets: [['@babel/preset-env', {
-                loose: true,
-                corejs: 3,
-                useBuiltIns: 'entry',
-                exclude: ['transform-regenerator', 'transform-async-to-generator'],
-                modules: false,
-                targets: "> 0.25%, not dead"
-              }]],
-              plugins: [
-                '@babel/plugin-transform-react-jsx',
-                '@babel/plugin-proposal-class-properties',
-                '@babel/plugin-proposal-optional-chaining',
-                ["@babel/plugin-proposal-private-methods", { "loose": false }],
-                ["@babel/plugin-proposal-private-property-in-object", { "loose": false }]
+              presets: [
+                '@babel/preset-react',
+                ['@babel/preset-env', {
+                  loose: true,
+                  targets: '> 1%, not dead'
+                }],
               ],
             }
           },
@@ -155,9 +147,6 @@ module.exports = (_env, argv) => {
         patterns: [
           { from: path.join(__dirname, '../../assets'), to: 'assets' }
         ]
-      }),
-      new MonacoWebpackPlugin({
-        globalAPI: true,
       })
     ],
     stats: 'minimal'

package/scripts/writeScreenshots.js

@@ -11,7 +11,7 @@ sharp.cache(false);
 async function writeScreenshot({ page, data: { url, urlPrefix } }) {
   await page.goto(url);
   await page.addStyleTag({content: '*,*::before,*::after{animation-delay:-1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:0s !important;transition-delay:0s !important;}'}); // disable animations/transitions so they don't interfere with screenshot tool
-  await page.waitForSelector('.pf-v5-u-h-100');
+  await page.waitForSelector('.pf-v6-u-h-100');
   const outfile = path.join(
     screenshotBase,
     url.replace(`${urlPrefix}/`, '') + '.png'
@@ -32,7 +32,7 @@ async function writeScreenshots({ urlPrefix, allRoutes, filterTerm }) {
     concurrency: Cluster.CONCURRENCY_CONTEXT,
     maxConcurrency: os.cpus().length,
     puppeteerOptions: {
-      headless: true, // set to false for testing...
+      headless: 'new', // set to false for testing...
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
       defaultViewport: {width: 1920, height: 1080}
     }