@patternfly/documentation-framework 1.1.34 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.2.0 (2022-08-18)
+
+
+### Features
+
+* **doc-framework:** Allow for 'next' core component usage alongside core components ([#3126](https://github.com/patternfly/patternfly-org/issues/3126)) ([8617112](https://github.com/patternfly/patternfly-org/commit/8617112840dd7c26cd6660120c6b24b8ca91e7d3))
+
+
+
+
+
+## 1.1.36 (2022-08-17)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 1.1.35 (2022-08-17)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
 ## 1.1.34 (2022-08-16)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/components/example/example.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useLocation } from '@reach/router';
-import { Badge, CodeBlock, CodeBlockCode, debounce, Switch } from '@patternfly/react-core';
+import { Badge, CodeBlock, CodeBlockCode, debounce } from '@patternfly/react-core';
 import * as reactCoreModule from '@patternfly/react-core';
+import * as reactCoreNextModule from '@patternfly/react-core/next';
 import * as reactTableModule from '@patternfly/react-table';
 import { css } from '@patternfly/react-styles';
 import { getParameters } from 'codesandbox/lib/api/define';
@@ -25,7 +26,7 @@ class ErrorBoundary extends React.Component {
     super(props);
     this.state = { error: null, errorInfo: null };
   }
-  
+
   componentDidCatch(error, errorInfo) {
     errorInfo._suppressLogging = true;
     this.setState({
@@ -39,13 +40,13 @@ class ErrorBoundary extends React.Component {
       this.setState({ error: null, errorInfo: null });
     }
   }
-  
+
   render() {
     if (this.state.errorInfo) {
       return errorComponent(this.state.error);
     }
     return this.props.children;
-  }  
+  }
 }
 
 // Props come from mdx-ast-to-mdx-hast.js
@@ -100,10 +101,11 @@ export const Example = ({
 
   const scope = {
     ...liveContext,
-    // These 2 are in the bundle anyways for the site since we dogfood
     ...reactCoreModule,
     ...reactTableModule,
+    ...(source === 'react-next' ? reactCoreNextModule : {})
   };
+
   let livePreview = null;
   if (lang === 'html') {
     livePreview = (
@@ -120,8 +122,13 @@ export const Example = ({
       } else {
         lang = 'js';
       }
-      const getPreviewComponent = new Function('React', ...Object.keys(scope), transformedCode);
-      const PreviewComponent = getPreviewComponent(React, ...Object.values(scope));
+
+      const componentNames = Object.keys(scope);
+      const componentValues = Object.values(scope);
+
+      const getPreviewComponent = new Function('React', ...componentNames, transformedCode);
+      const PreviewComponent = getPreviewComponent(React, ...componentValues);
+
       livePreview = (
         <ErrorBoundary>
           <PreviewComponent />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "1.1.34",
+  "version": "1.2.0",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -84,5 +84,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "8a2730747a4fd5e566262bf6bbf37ae2d4e138f3"
+  "gitHead": "e2b7e27265434339d7fb49783a5518a06c04467d"
 }

package/routes.js

@@ -48,8 +48,9 @@ const groupedRoutes = Object.entries(routes)
 
 const sourceOrder = {
   react: 1,
-  'react-composable': 1.1,
-  'react-legacy': 1.2,
+  'react-next': 1.1,
+  'react-composable': 1.2,
+  'react-legacy': 1.3,
   'react-demos': 2,
   html: 3,
   'html-demos': 4,

package/scripts/cli/build.js

@@ -46,7 +46,9 @@ async function buildWebpack(webpackConfig) {
 async function execFile(file, args) {
   const start = new Date();
   return new Promise((res, rej) => {
-    const child = fork(path.join(__dirname, file), args);
+    const child = fork(path.join(__dirname, file), args, {
+      execArgv: ['--max-old-space-size=4096']
+    });
     function errorHandler(err) {
       console.error(err);
       process.exit(1);

package/scripts/md/parseMD.js

@@ -60,15 +60,17 @@ function toReactComponent(mdFilePath, source, buildMode) {
         sourceRepo = 'patternfly-react';
       }
 
-      const propComponents = [...new Set(frontmatter.propComponents || [])]
-        .filter(propComponent => {
-          if (tsDocs[propComponent]) {
-            return true;
-          }
-          file.message(`Prop component ${propComponent} missing from tsDocgen`);
-          return false;
-        })
-        .map(propComponent => tsDocs[propComponent])
+      const propComponents = [...new Set(frontmatter.propComponents || [])].reduce((acc, componentName) => {
+        const name = getTsDocName(componentName, source === 'react-next');
+
+        if (tsDocs[name]) {
+          acc.push(tsDocs[name]);
+        } else {
+          file.message(`Prop component ${name} is missing from tsDocgen`);
+        }
+
+        return acc;
+      }, []);
 
       const normalizedPath = relPath
         .replace('node_modules/@patternfly/patternfly/docs', 'src/patternfly')
@@ -123,7 +125,7 @@ function toReactComponent(mdFilePath, source, buildMode) {
     // Delete HTML comments
     .use(require('./remove-comments'))
     // remark-mdx removes auto-link support
-    // this adds it back ONLY for links which are easily differentiable from JSX 
+    // this adds it back ONLY for links which are easily differentiable from JSX
     .use(require('./auto-link-url'))
     // Support for JSX in MD
     .use(require('remark-mdx'))
@@ -148,7 +150,7 @@ function toReactComponent(mdFilePath, source, buildMode) {
     // .use(require('remark-rehype'))
     // .use(require('rehype-react'), { createElement: require('react').createElement })
     // Transform AST to JSX elements. Includes special code block parsing
-    .use(require('./mdx-ast-to-mdx-hast'), { 
+    .use(require('./mdx-ast-to-mdx-hast'), {
       watchExternal(file) {
         if (buildMode === 'start') {
           const watcher = chokidar.watch(file, { ignoreInitial: true });
@@ -220,7 +222,6 @@ function toReactComponent(mdFilePath, source, buildMode) {
         console.error(vfileReport(err));
         exitCode = 2;
       } else {
-        // console.log(relPath, '->', path.relative(process.cwd(), outPath));
         if (file.messages.length > 0) {
           console.log(vfileReport(file));
         }
@@ -239,7 +240,7 @@ function sourcePropsFile(file) {
   tsDocgen(file)
     .filter(({ hide }) => !hide)
     .forEach(({ name, description, props }) => {
-      tsDocs[name] = { name, description, props };
+      tsDocs[getTsDocName(name, file.includes('/next'))] = { name, description, props };
     });
 }
 
@@ -279,6 +280,11 @@ function writeIndex() {
   return exitCode;
 }
 
+// Build unique names for components if they are a part of the "next" module.
+function getTsDocName(name, isNextComponent) {
+  return `${name}${isNextComponent ? '-next' : ''}`;
+};
+
 module.exports = {
   sourceProps(glob, ignore) {
     globs.props.push({ glob, ignore });

package/scripts/md/typecheck.js

@@ -34,13 +34,18 @@ declare module '\\*.svg' {
 const reactStylesDir = path.join(require.resolve('@patternfly/react-styles/package.json'), '../');
 const reactStyles = glob.sync(path.join(reactStylesDir, 'css/**/*.d.ts'))
   .map(f => f.replace(reactStylesDir, '@patternfly/react-styles/').replace(/\.d.ts$/, ''));
+const defaultImports = [
+  'react',
+  '@reach/router',
+  '@patternfly/react-core/next',
+];
 const files = {
-  'imports.ts': ['react', '@reach/router']
-      .concat(Object.keys(versions.Releases[0].versions))
-      .concat(reactStyles)
-      .filter(p => p !== '@patternfly/patternfly')
-      .map(p => `import '${p}';`)
-      .join('\n'),
+  'imports.ts': defaultImports
+    .concat(Object.keys(versions.Releases[0].versions))
+    .concat(reactStyles)
+    .filter(p => p !== '@patternfly/patternfly')
+    .map(p => `import '${p}';`)
+    .join('\n'),
   'declarations.d.ts': defaultDeclarations
 };
 
@@ -130,4 +135,3 @@ function typecheck(fname, text) {
 module.exports = {
   typecheck
 };
-

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

@@ -117,6 +117,7 @@ module.exports = (_env, argv) => {
         'client-styles': path.resolve(process.cwd(), 'patternfly-docs/patternfly-docs.css.js'),
         './routes-client': path.resolve(process.cwd(), 'patternfly-docs/patternfly-docs.routes.js'),
         './routes-generated': path.resolve(process.cwd(), 'patternfly-docs/generated/index.js'),
+        '@patternfly/react-core/next': '@patternfly/react-core/dist/esm/next/index.js', // Can remove when webpack is updated to v5
         'lodash': 'lodash-es' // Sanely bundle react-charts.
       },
       modules: [