@patternfly/documentation-framework 5.1.0 → 5.1.2

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.1.2 (2023-08-09)
+
+
+### Bug Fixes
+
+* clean up h2 and dark theme switcher styles ([#3690](https://github.com/patternfly/patternfly-org/issues/3690)) ([8319c0c](https://github.com/patternfly/patternfly-org/commit/8319c0ccecb018f72b277e070e4ccab1896f6cab))
+
+
+
+
+
+## 5.1.1 (2023-08-09)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
 # 5.1.0 (2023-08-08)
 
 

package/helpers/codesandbox.js

@@ -130,12 +130,12 @@ function getReactParams(title, code, scope, lang, relativeImports, relPath, sour
     // Ignore
   }
 
-  // Point to sourcelink for @patternfly images
+  // Update image imports from package to sourcelink - note this relies on image import path in example .md to be accurate
   if (relPath.includes('@patternfly')) {
     const imgImportRegex = /(import \W*(\w*)\W*[^'"`]*['"`](.*\.(?:png|jpe?g|webp|gif|svg))['"])/gm;
     let imgImportMatch;
     while ((imgImportMatch = imgImportRegex.exec(code))) {
-      const [match, importDeclaration, imgName, relImgPath] = imgImportMatch;
+      const [_match, importDeclaration, imgName, relImgPath] = imgImportMatch;
       // Point to sourceLink hosted file
       const sourceLinkPath = new URL(relImgPath, sourceLink.replace('/blob/', '/raw/')).href;
       const hostedImageDeclaration = `const ${imgName} = "${sourceLinkPath}"`;
@@ -143,15 +143,18 @@ function getReactParams(title, code, scope, lang, relativeImports, relPath, sour
     }
   }
 
-  const relImportRegex = /(import[\s*{])([\w*{}\n\r\t, ]+)([\s*]from\s["']([\.\/]+.*)["'])/gm;
+  // Add absolute imports to codesandbox file - comes from mdx-hast-to-jsx.js
+  if (relativeImports?.length > 0) {
+    const absoluteImports = relativeImports.split(';,').join(';\n');
+    code = `${absoluteImports}\n${code}`;
+  }
+  // Remove relative imports from codesandbox file (ignore images, which are addressed separately above)
+  const relImportRegex = /(import [^'"]*)['"](?:[\.\/]+(?:node_modules\/)?)(@?(?:(?!\.svg|\.jpe?g|\.png).)+)['"][;?]/gm;
   let relImportMatch;
   while (relImportMatch = relImportRegex.exec(code)) {
-    const [ relImportName, _name, relImportPath ] = relImportMatch;
-    if (relativeImports[relImportName]) {
-      code = code.replace(relImportPath, relativeImports[relImportName]);
-    }
+    const [ relImportStatement, _relImportItems, _relImportPath ] = relImportMatch;
+    code = code.replace(relImportStatement, '');
   }
-
   
   const dependencies = {
     '@patternfly/react-core': versions.Releases[0].versions['@patternfly/react-core']
@@ -197,14 +200,14 @@ function getReactParams(title, code, scope, lang, relativeImports, relPath, sour
 </html>`,
       },
       [lang === 'ts' ? 'index.tsx' : 'index.js']: {
-        content: `import ReactDOM from 'react-dom';
+        content: `import { createRoot } from "react-dom/client";
 import "@patternfly/react-core/dist/styles/base.css";
 import './fonts.css';
 
 ${code}
 
-const rootElement = document.getElementById("root");
-ReactDOM.render(<${toRender} />, rootElement);`
+const container = document.getElementById("root");
+createRoot(container).render(<${toRender} />);`
       },
       'fonts.css': {
         content: overpass
@@ -213,8 +216,8 @@ ReactDOM.render(<${toRender} />, rootElement);`
         content: {
           dependencies: {
             ...dependencies,
-            'react': '^16.8.0',
-            'react-dom': '^16.8.0'
+            'react': '^18',
+            'react-dom': '^18'
           }
         },
       },

package/layouts/sideNavLayout/sideNavLayout.css

@@ -36,3 +36,9 @@
 .ws-masthead .pf-v5-c-toolbar__item  {
   min-width: 0;
 }
+
+.ws-masthead .pf-v5-c-switch {
+  align-items: center;
+  --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-switch__input--checked__label--Color: var(--pf-v5-global--Color--100);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -17,7 +17,7 @@
     "@babel/plugin-transform-react-jsx": "7.17.12",
     "@babel/preset-env": "7.18.2",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.1.0",
+    "@patternfly/ast-helpers": "^1.1.2",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "9.8.6",
     "babel-loader": "9.1.2",
@@ -87,5 +87,5 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "bde845f520e6199295febe8b3b7c9ad9413a9ac4"
+  "gitHead": "d4410030244dfaba10f35dd528223cc2abf92a8c"
 }

package/scripts/md/mdx-hast-to-jsx.js

@@ -71,25 +71,14 @@ function serializeRoot(node, options) {
     .map(node => node.value)
     .map(imp => imp.replace(/(['"])\./g, (_, match) => `${match}${getRelPath()}${path.posix.sep}\.`));
 
-  // Map relative import name to '@package...'
-  const relativeImportsRegex = /(?:[\.\/]+.*)(@.*)['"]/gm;
+  // Build array of absolute import paths for relative imports
+  const relativeImportsRegex = /(import [^'"]*)['"](?:[\.\/]+(?:node_modules\/)?)(@?(?:(?!\.svg|\.jpe?g|\.png).)+)['"][;?]/gm;
   let relativeImportMatch;
-  let relativeImportMatches = {};
-  while (relativeImportMatch = relativeImportsRegex.exec(importStatements[0])) {
-    const [_match, absoluteImportPath] = relativeImportMatch;
-    if (absoluteImportPath && !absoluteImportPath.includes('srcImport')) {
-      // `@patternfly/react-core/src/demos/./examples/DashboardWrapper` to `DashboardWrapper`
-      let relativeFileImport = /(\.+\/.*)/gm.exec(absoluteImportPath);
-      if (relativeFileImport) {
-        // Build map of relative imports (from example.js code) to npm package import path (used in codesandbox.js)
-        const relativeFilePath = relativeFileImport[0];
-        const relativeImportName = relativeFilePath
-          .split('/')
-          .pop()
-          .split('.')
-          .shift();
-        relativeImportMatches[relativeImportName] = absoluteImportPath;
-      }
+  let relativeImportMatches = [];
+  while (relativeImportMatch = relativeImportsRegex.exec(importStatements.join())) {
+    const [match, importItems, absoluteImportPath] = relativeImportMatch;
+    if (absoluteImportPath && !match.includes('srcImport')) {
+      relativeImportMatches.push(`${importItems}'${absoluteImportPath}';`);
     }
   }
 
@@ -120,12 +109,8 @@ const pageData = ${JSON.stringify(pageData, null, 2)};
       '  ' + liveContext
     }\n};\n`
   }
-  if (relativeImportMatches) {
-    res += `pageData.relativeImports = {\n${
-      '  ' + Object.entries(relativeImportMatches)
-        .map(([key, val]) => `'${key}': '${val}'`)
-        .join(',\n  ')
-    }\n};\n`;
+  if (relativeImportMatches.length > 0) {
+    res += `pageData.relativeImports = "${relativeImportMatches}"\n`;
   }
   if (examples) {
     res += `pageData.examples = {\n${

package/templates/mdx.css

@@ -191,8 +191,7 @@
   margin-bottom: var(--pf-v5-c-content--h2--MarginBottom);
   font-size: var(--pf-v5-c-content--h2--FontSize);
   font-weight: var(--pf-v5-c-content--h2--FontWeight);
-  line-height: var(--pf-v5-c-content--h2--LineHeight); }
-  .ws-h2:not(:first-child) {
+  line-height: var(--pf-v5-c-content--h2--LineHeight);
     margin-top: var(--pf-v5-c-content--h2--MarginTop); }
 .ws-h3 {
   margin-bottom: var(--pf-v5-c-content--h3--MarginBottom);