npm - @patternfly/documentation-framework - Versions diffs - 2.0.0-alpha.3 → 2.0.0-alpha.31 - Mend

@patternfly/documentation-framework 2.0.0-alpha.3 → 2.0.0-alpha.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/CHANGELOG.md +266 -0
package/app.js +12 -11
package/components/cssVariables/cssSearch.js +3 -4
package/components/cssVariables/cssVariables.js +69 -67
package/components/functionsTable/functionsTable.js +57 -0
package/components/propsTable/propsTable.js +85 -79
package/components/sectionGallery/sectionDataListLayout.js +67 -0
package/components/sectionGallery/sectionGallery.css +44 -0
package/components/sectionGallery/sectionGallery.js +53 -0
package/components/sectionGallery/sectionGalleryLayout.js +37 -0
package/components/sectionGallery/sectionGalleryToolbar.js +30 -0
package/components/sectionGallery/sectionGalleryWrapper.js +89 -0
package/components/sideNav/sideNav.js +10 -3
package/helpers/getTitle.js +2 -2
package/layouts/sideNavLayout/sideNavLayout.css +0 -4
package/layouts/sideNavLayout/sideNavLayout.js +54 -37
package/package.json +28 -25
package/pages/404/index.js +3 -3
package/routes.js +19 -5
package/scripts/cli/build.js +6 -0
package/scripts/cli/cli.js +2 -0
package/scripts/cli/generate.js +2 -2
package/scripts/cli/start.js +6 -8
package/scripts/md/parseMD.js +40 -8
package/scripts/tsDocgen.js +119 -91
package/scripts/typeDocGen.js +209 -0
package/scripts/webpack/webpack.base.config.js +34 -32
package/scripts/webpack/webpack.client.config.js +11 -8
package/scripts/webpack/webpack.server.config.js +8 -5
package/scripts/writeScreenshots.js +2 -2
package/templates/html.ejs +1 -3
package/templates/mdx.css +0 -5
package/templates/mdx.js +58 -41
package/templates/patternfly-docs/content/extensions/extension/design-guidelines/design-guidelines.md +2 -0
package/templates/patternfly-docs/content/extensions/extension/examples/basic.md +2 -0
package/versions.json +29 -9

package/scripts/webpack/webpack.server.config.js CHANGED Viewed

@@ -2,8 +2,11 @@ const path = require('path');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const baseConfig = require('./webpack.base.config');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const reactCSSRegex = /(react-[\w-]+\/dist|react-styles\/css)\/.*\.css$/;
-const serverConfig = () => {
+const serverConfig = async (env, argv) => {
+  const isProd = argv.mode === 'production';
   return {
     output: {
       path: path.resolve('.cache/ssr-build'), // Don't bloat `public` dir
@@ -31,7 +34,7 @@ const serverConfig = () => {
         {
           test: /(novnc-core|@novnc\/novnc)\/.*\.js/,
           use: 'null-loader'
-        }
+        },
       ]
     },
     resolve: {
@@ -41,7 +44,7 @@ const serverConfig = () => {
         // The maintainer will not allow his bundle to be required from a node context
         // https://github.com/xtermjs/xterm.js/pull/3134
         'xterm':  '@patternfly/documentation-framework/helpers/xterm',
-        'xterm-addon-fit':  '@patternfly/documentation-framework/helpers/xterm-addon-fit'
+        'xterm-addon-fit':  '@patternfly/documentation-framework/helpers/xterm-addon-fit',
       },
     },
     // Load in prerender.js instead
@@ -49,7 +52,7 @@ const serverConfig = () => {
   };
 }
-module.exports = (env = {}, argv) => merge(
+module.exports = async (env = {}, argv) => merge(
   baseConfig(env, argv),
-  serverConfig(env, argv)
+  await serverConfig(env, argv)
 );

package/scripts/writeScreenshots.js CHANGED Viewed

@@ -27,7 +27,7 @@ async function writeScreenshot({ page, data: { url, urlPrefix } }) {
   await sharp(buffer).toFile(outfile);
 }
-async function writeScreenshots({ urlPrefix }) {
+async function writeScreenshots({ urlPrefix, allRoutes }) {
   const cluster = await Cluster.launch({
     concurrency: Cluster.CONCURRENCY_CONTEXT,
     maxConcurrency: os.cpus().length,
@@ -43,7 +43,7 @@ async function writeScreenshots({ urlPrefix }) {
   // Add some pages to queue
   Object.entries(fullscreenRoutes)
-    .filter(([, { isFullscreenOnly }]) => isFullscreenOnly)
+    .filter(([, { isFullscreenOnly }]) => allRoutes || isFullscreenOnly)
     .forEach(([url,]) => cluster.queue({
       url: `${urlPrefix}${url}`,
       urlPrefix

package/templates/html.ejs CHANGED Viewed

@@ -16,9 +16,7 @@
     <%= htmlWebpackPlugin.tags.headTags %>
   </head>
   <body class="pf-m-redhat-updated-font pf-m-redhatmono-font">
-    <div id="root">
-      <%= prerendering %>
-    </div>
+    <div id="root"><%= prerendering %></div>
     <%= htmlWebpackPlugin.tags.bodyTags %>
     <% if (algolia) { %>
     <script

package/templates/mdx.css CHANGED Viewed

@@ -297,11 +297,6 @@
   max-width: 832px;
 }
-.ws-mdx-content-katacoda {
-  flex-grow: 1;
-  padding: 0;
-}
 /* Overlay the footer */
 .ws-back-to-top {
   z-index: 2;

package/templates/mdx.js CHANGED Viewed

@@ -7,12 +7,14 @@ import { CSSVariables, PropsTable, TableOfContents, Link, AutoLinkHeader, Inline
 import { capitalize, getTitle, slugger, trackEvent } from '../helpers';
 import './mdx.css';
 import { convertToReactComponent } from '@patternfly/ast-helpers';
+import { FunctionsTable } from '../components/functionsTable/functionsTable';
 const MDXChildTemplate = ({
   Component,
   source,
   toc = [],
-  index = 0
+  index = 0,
+  id
 }) => {
   const {
     propComponents = [],
@@ -20,8 +22,7 @@ const MDXChildTemplate = ({
     cssPrefix = [],
     optIn,
     beta,
-    katacodaBroken,
-    katacodaLayout
+    functionDocumentation = []
   } = Component.getPageData();
   const cssVarsTitle = cssPrefix.length > 0 && 'CSS variables';
   const propsTitle = propComponents.length > 0 && 'Props';
@@ -59,23 +60,27 @@ const MDXChildTemplate = ({
           To learn more about the process, visit our <Link to="/get-started/about#beta-components">about page</Link> or our <a href="https://github.com/patternfly/patternfly-org/tree/main/beta-component-promotion">Beta components</a> page on GitHub.
         </InlineAlert>
       )}
-      {katacodaBroken && (
-        <InlineAlert variant="warning" title="Down for maintenance">
-          The embedded version of our tutorials are broken, but you can still access our tutorials on <a href="https://www.katacoda.com/patternfly">Katacoda.com <ExternalLinkAltIcon /></a>.
-        </InlineAlert>
-      )}
     </React.Fragment>
   );
+  console.log(id);
   // Create dynamic component for @reach/router
   const ChildComponent = () => (
     <div className="pf-u-display-flex ws-mdx-child-template">
       {toc.length > 1 && (
         <TableOfContents items={toc} />
       )}
-      <div className={katacodaLayout? "ws-mdx-content-katacoda" : "ws-mdx-content"}>
-        <div className={katacodaLayout ? "" : "ws-mdx-content-content"}>
+      <div className="ws-mdx-content">
+        <div className={id === 'All components' ? "" : "ws-mdx-content-content"}>
           {InlineAlerts}
           <Component />
+          {functionDocumentation.length > 0 && (
+            <React.Fragment>
+              <AutoLinkHeader size="h2" className="ws-h2" id="functions">
+                Functions
+              </AutoLinkHeader>
+              <FunctionsTable functionDescriptions={functionDocumentation}/>
+            </React.Fragment>
+          )}
           {propsTitle && (
             <React.Fragment>
               <AutoLinkHeader size="h2" className="ws-h2" id="props">
@@ -100,7 +105,7 @@ const MDXChildTemplate = ({
               <CSSVariables prefix={cssPrefix} />
             </React.Fragment>
           )}
-          {!katacodaLayout && sourceLink && (
+          {sourceLink && (
             <React.Fragment>
               <br />
               <a href={sourceLink} target="_blank" onClick={() => trackEvent('view_source_click', 'click_event', source.toUpperCase())}>View source on GitHub</a>
@@ -121,7 +126,15 @@ export const MDXTemplate = ({
   id,
   componentsData
 }) => {
-  const sourceKeys = sources.map(v => v.source);
+  // Build obj mapping source names to text displayed on tabs
+  const tabNames = sources.reduce((acc, curSrc) => {
+    const { source, tabName } = curSrc;
+    // use tabName for tab name if present, otherwise default to source
+    const tabLinkText = tabName || capitalize(source.replace('html', 'HTML').replace(/-/g, ' '));
+    acc[source] = tabLinkText;
+    return acc;
+  }, {});
+  const sourceKeys = Object.keys(tabNames);
   const isSinglePage = sourceKeys.length === 1;
   let isDevResources, isComponent, isExtension, isChart, isDemo, isLayout, isUtility;
@@ -159,7 +172,6 @@ export const MDXTemplate = ({
     (e) => e.includes("pages") || e.includes("training")
   );
   const { pathname } = useLocation();
-  const { katacodaLayout } = sources[0].Component.getPageData();
   let activeSource = pathname.replace(/\/$/, '').split('/').pop();
   // get summary text, convert to JSX to display above tabs on component pages
   const componentDasherized = id.split(' ').join('-').toLowerCase();
@@ -192,6 +204,14 @@ export const MDXTemplate = ({
     return "pf-m-light-100";
   };
+  const showTabs = (
+    (!isSinglePage && !hideTabName) ||
+    isComponent ||
+    isUtility ||
+    isDemo
+  );
+  console.log(id);
   return (
     <React.Fragment>
       <PageGroup>
@@ -201,38 +221,35 @@ export const MDXTemplate = ({
           isWidthLimited
         >
           <TextContent>
-          {!katacodaLayout && <Title headingLevel='h1' size='4xl' id="ws-page-title">{title}</Title>}
-          {isComponent && summary && (<SummaryComponent />)}
+            <Title headingLevel='h1' size='4xl' id="ws-page-title">{title}</Title>
+            {isComponent && summary && (<SummaryComponent />)}
           </TextContent>
         </PageSection>
-        {((!isSinglePage && !hideTabName) ||
-          isComponent ||
-          isUtility ||
-          isDemo) && (
-            <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{'default':'top'}} type="tabs">
-              <div className="pf-c-tabs pf-m-page-insets pf-m-no-border-bottom">
-                <ul className="pf-c-tabs__list">
-                  {sourceKeys.map((source, index) => (
-                    <li
-                      key={source}
-                      className={css(
-                        'pf-c-tabs__item',
-                        activeSource === source && 'pf-m-current'
-                      )}
-                      // Send clicked tab name for analytics
-                      onClick={() => trackEvent('tab_click', 'click_event', source.toUpperCase())}
-                    >
-                      <Link className="pf-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
-                        {capitalize(source.replace('html', 'HTML').replace(/-/g, ' '))}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </PageSection>
+        { showTabs && (
+          <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{'default':'top'}} type="tabs">
+            <div className="pf-c-tabs pf-m-page-insets pf-m-no-border-bottom">
+              <ul className="pf-c-tabs__list">
+                {sourceKeys.map((source, index) => (
+                  <li
+                    key={source}
+                    className={css(
+                      'pf-c-tabs__item',
+                      activeSource === source && 'pf-m-current'
+                    )}
+                    // Send clicked tab name for analytics
+                    onClick={() => trackEvent('tab_click', 'click_event', source.toUpperCase())}
+                  >
+                    <Link className="pf-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
+                      {tabNames[source]}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </PageSection>
         )}
         <PageSection id="main-content" isFilled className="pf-m-light-100">
-          {isSinglePage && <MDXChildTemplate {...sources[0]} />}
+          {isSinglePage && <MDXChildTemplate {...sources[0]} id={id}/>}
           {!isSinglePage && (
             <Router className="pf-u-h-100" primary={false}>
               {sources

package/templates/patternfly-docs/content/extensions/extension/design-guidelines/design-guidelines.md CHANGED Viewed

@@ -7,6 +7,8 @@ section: extensions
 id: My extension
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: design-guidelines
+# Optional custom text to display in tab in place of source
+tabName: My custom tab-name
 ---
 Design guidelines intro

package/templates/patternfly-docs/content/extensions/extension/examples/basic.md CHANGED Viewed

@@ -7,6 +7,8 @@ section: extensions
 id: My extension
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
+# Optional custom text to display in tab in place of source
+tabName: My custom tab-name
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provdided in patternfly-docs.source.js
 # Can also pass object { component: string, source: string } allowing to specify the source

package/versions.json CHANGED Viewed

@@ -5,25 +5,45 @@
       "date": "2022-02-08",
       "latest": true,
       "versions": {
-        "@patternfly/patternfly": "5.0.0-alpha.13",
+        "@patternfly/patternfly": "5.0.0-alpha.37",
+        "@patternfly/react-charts": "^7.0.0-alpha.14",
+        "@patternfly/react-code-editor": "^5.0.0-alpha.54",
+        "@patternfly/react-core": "^5.0.0-alpha.53",
+        "@patternfly/react-icons": "^5.0.0-alpha.8",
+        "@patternfly/react-styles": "^5.0.0-alpha.6",
+        "@patternfly/react-table": "^5.0.0-alpha.54",
+        "@patternfly/react-tokens": "^5.0.0-alpha.6",
         "@patternfly/react-catalog-view-extension": "4.95.1",
-        "@patternfly/react-charts": "7.0.0-alpha.3",
-        "@patternfly/react-code-editor": "5.0.0-alpha.7",
-        "@patternfly/react-core": "5.0.0-alpha.7",
-        "@patternfly/react-icons": "5.0.0-alpha.2",
+        "@patternfly/react-drag-drop": "5.0.0-alpha.0",
         "@patternfly/react-inline-edit-extension": "4.86.118",
         "@patternfly/react-log-viewer": "4.87.100",
-        "@patternfly/react-styles": "5.0.0-alpha.2",
-        "@patternfly/react-table": "5.0.0-alpha.7",
-        "@patternfly/react-tokens": "5.0.0-alpha.2",
         "@patternfly/react-topology": "4.91.27",
         "@patternfly/react-virtualized-extension": "4.88.113"
       }
     },
+    {
+      "name": "2023.02",
+      "date": "2022-03-27",
+      "versions": {
+        "@patternfly/patternfly": "4.224.4",
+        "@patternfly/react-catalog-view-extension": "4.96.0",
+        "@patternfly/react-charts": "6.94.19",
+        "@patternfly/react-code-editor": "4.82.115",
+        "@patternfly/react-console": "4.95.5",
+        "@patternfly/react-core": "4.276.8",
+        "@patternfly/react-icons": "4.93.6",
+        "@patternfly/react-inline-edit-extension": "4.86.122",
+        "@patternfly/react-log-viewer": "4.87.100",
+        "@patternfly/react-styles": "4.92.6",
+        "@patternfly/react-table": "4.113.0",
+        "@patternfly/react-tokens": "4.94.6",
+        "@patternfly/react-topology": "4.91.40",
+        "@patternfly/react-virtualized-extension": "4.88.115"
+      }
+    },
     {
       "name": "2023.01",
       "date": "2022-01-31",
-      "latest": true,
       "versions": {
         "@patternfly/patternfly": "4.224.2",
         "@patternfly/react-catalog-view-extension": "4.95.1",