@patternfly/documentation-framework 1.0.0

package/components/tableOfContents/tableOfContents.css

@@ -0,0 +1,77 @@
+.ws-toc {
+  top: 0;
+  align-self: flex-start;
+  position: sticky;
+  width: calc(100% + var(--pf-c-page__main-section--PaddingLeft) + var(--pf-c-page__main-section--PaddingRight));
+  background-color: var(--pf-global--BackgroundColor--200);
+  z-index: 501;
+  margin: calc(var(--pf-c-page__main-section--PaddingTop) * -1) calc(var(--pf-c-page__main-section--PaddingRight) * -2) var(--pf-global--spacer--md) calc(var(--pf-c-page__main-section--PaddingLeft) * -1);
+  padding: var(--pf-global--spacer--md) 0 var(--pf-global--spacer--md) var(--pf-global--spacer--md);
+  box-shadow: var(--pf-global--BoxShadow--lg-bottom);
+}
+
+.ws-toc.pf-m-expanded {
+  box-shadow: var(--pf-global--BoxShadow--sm-bottom)
+}
+
+/* Mobile jumplinks */
+@media (max-width: 1450px) {
+  .ws-toc.pf-m-expanded .pf-c-jump-links__main {
+    max-height: 65vh;
+    overflow: auto;
+  }
+  
+  .ws-toc .pf-c-jump-links__header {
+    position: sticky;
+    top: 0;
+    background-color: var(--pf-global--BackgroundColor--200);
+    z-index: 2;
+  }
+}
+
+.ws-toc .pf-c-jump-links__main {
+  scrollbar-width: none;
+}
+
+/* Hide TOC scrollbar Chrome, Safari & Opera */
+.ws-toc .pf-c-jump-links__main::-webkit-scrollbar {
+  display: none;
+}
+
+@media (min-width: 1451px) {
+  .ws-toc {
+    width: 280px;
+    max-height: calc(100vh - 76px);
+    overflow-y: auto;
+    /* Hide TOC scrollbar IE, Edge & Firefox */
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    order: 1;
+    padding: 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--2xl);
+    flex-grow: 1;
+    background: none;
+    margin: 0;
+  }
+
+  .ws-toc,
+  .ws-toc.pf-m-expanded {
+    box-shadow: none;
+  }
+}
+
+/* .ws-toc-link { */
+.ws-toc-item .pf-c-jump-links__link {
+  position: relative;
+  display: block;
+  color: var(--ws-toc-link--Color, var(--pf-global--Color--300));
+  font-size: var(--pf-global--FontSize--sm);
+  margin: -4px 0;
+}
+
+.ws-toc-sublist > .ws-toc-item:first-child .pf-c-jump-links__link {
+  margin-top: 0;
+}
+
+.ws-toc-item.pf-m-current .pf-c-jump-links__link::before {
+  z-index: 1;
+}

package/components/tableOfContents/tableOfContents.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
+import { trackEvent } from '../../helpers';
+
+export const TableOfContents = ({ items }) => {
+  // Used to recalculate JumpLinks offset if screen size changes
+  const [width, setWidth] = React.useState(window.innerWidth);
+  const updateWidth = () => {
+    const { innerWidth } = window;
+    innerWidth !== width && setWidth(innerWidth);
+  }
+  let jumpLinksItems = [];
+  let wasSublistRendered = false;
+
+  const renderSublist = (item, nextItemArr) => {
+    wasSublistRendered = true;
+    return (
+      <>
+        {item.text}
+        <JumpLinksList>
+          {nextItemArr.map(curItem => (
+            <JumpLinksItem
+              key={curItem.id}
+              href={`#${curItem.id}`}
+              className="ws-toc-item"
+              onKeyDown={updateWidth}
+              onMouseDown={updateWidth}
+              onClick={() => trackEvent('jump_link_click', 'click_event', curItem.id.toUpperCase())}
+            >
+              {curItem.text}
+            </JumpLinksItem>
+          ))}
+        </JumpLinksList>
+      </>
+    );
+  }
+
+  const renderJumpLinksItems = () => {
+    items.forEach((item, index) => {
+      let nextItem = items[index + 1];
+      // Don't render empty <JumpLinksItem> for an array of sublist items
+      if (wasSublistRendered) {
+        wasSublistRendered = false;
+        return;
+      }
+      if (!Array.isArray(nextItem) && Array.isArray(item)) {
+        {item.map(curItem => jumpLinksItems.push(
+          <JumpLinksItem
+            key={curItem.id}
+            href={`#${curItem.id}`}
+            className="ws-toc-item"
+            onKeyDown={updateWidth}
+            onMouseDown={updateWidth}
+            onClick={() => trackEvent('jump_link_click', 'click_event', curItem.id.toUpperCase())}
+          >
+            {curItem.text}
+          </JumpLinksItem>
+        ))}
+      } else {
+        jumpLinksItems.push(
+          <JumpLinksItem
+            key={item.id}
+            href={`#${item.id}`}
+            className="ws-toc-item"
+            onKeyDown={updateWidth}
+            onMouseDown={updateWidth}
+            onClick={() => trackEvent('jump_link_click', 'click_event', item.id.toUpperCase())}
+          >
+            { Array.isArray(nextItem) ? renderSublist(item, nextItem) : item.text }
+          </JumpLinksItem>
+        );
+      }
+    })
+    return jumpLinksItems;
+  }
+
+  return (
+    <JumpLinks
+      label="Table of contents"
+      isVertical
+      scrollableSelector="#ws-page-main"
+      className="ws-toc"
+      offset={width > 1450 ? 92 : 148}
+      expandable={{ default: 'expandable', '2xl': 'nonExpandable' }}
+    >
+      { renderJumpLinksItems() }
+    </JumpLinks>
+  );
+}

package/components/topNav/topNav.css

@@ -0,0 +1,30 @@
+/* Don't bother with specifity war */
+.ws-top-nav-link.pf-c-nav__link {
+  color: var(--pf-global--BackgroundColor--light-100);
+}
+
+.ws-top-nav-link.pf-c-nav__link:active,
+.ws-top-nav-link.pf-c-nav__link:hover,
+.ws-top-nav-link.pf-c-nav__link.pf-m-current {
+  color: var(--pf-global--BackgroundColor--dark-100);
+  background-color: var(--pf-global--BackgroundColor--light-100);
+  transition: .5s;
+}
+
+/* Don't bother with specifity war */
+.ws-top-nav-link.pf-c-nav__link::before {
+  top: 0 !important;
+  bottom: auto !important;
+  right: 0 !important;
+  left: 0 !important;
+  border-color: var(--pf-global--link--Color--light--hover) !important;
+  transform: scaleX(0);
+}
+
+/* Animate bar growing outwards */
+.ws-top-nav-link.pf-c-nav__link:active::before,
+.ws-top-nav-link.pf-c-nav__link:hover::before,
+.ws-top-nav-link.pf-c-nav__link.pf-m-current::before {
+  transition: transform .5s;
+  transform: scaleX(1);
+}

package/components/topNav/topNav.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from '@patternfly/documentation-framework/components';
+import { Nav, NavList, NavItem } from '@patternfly/react-core';
+import { Location } from '@reach/router';
+
+export const TopNav = ({ navItems }) => (
+  <Location>
+    {({ location }) => 
+      <Nav aria-label="Patternfly top nav" variant="horizontal">
+        <NavList>
+          {navItems.map(({ path, text }) => (
+            <NavItem
+              key={path}
+              isActive={location.pathname.includes(path)}
+            >
+              <Link className="ws-top-nav-link" to={path}>{text}</Link>
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
+    }
+  </Location>
+);
+  

package/global.css

@@ -0,0 +1,7 @@
+/* Please leave this file alone. */
+#root,
+#ws-router,
+#ws-page {
+  height: 100vh;
+}
+/* Please leave this file alone. */

package/helpers/asyncComponentFactory.js

@@ -0,0 +1,41 @@
+const React = require('react');
+
+const cache = {};
+
+function asyncComponentFactory(route, pageData) {
+  const { Component } = pageData;
+
+  class AsyncComponent extends React.Component {
+    state = {
+      isLoaded: false
+    };
+    static preload() {
+      return Component().then(res => {
+        cache[route] = res.default;
+        return res.default;
+      });
+    }
+    static getPageData() {
+      return cache[route] ? cache[route].pageData : {};
+    }
+    render() {
+      if (cache[route]) {
+        return React.createElement(cache[route]);
+      }
+      AsyncComponent.preload().then(() => this.setState({ isLoaded: true }));
+
+      // Simple loading state
+      return React.createElement('div',
+        { style: { height: '100vh' } },
+        'Loading...'
+      );
+    }
+  }
+  AsyncComponent.displayName = route.replace(/\//g, '.');
+
+  return AsyncComponent;
+}
+
+module.exports = {
+  asyncComponentFactory
+};

package/helpers/capitalize.js

@@ -0,0 +1,7 @@
+function capitalize(input) {
+  return input[0].toUpperCase() + input.substring(1);
+}
+
+module.exports = {
+  capitalize
+};

package/helpers/codeTitleTransformer.js

@@ -0,0 +1,40 @@
+const visit = require('unist-util-visit');
+
+function exampleCaptions() {
+  return tree => {
+    visit(tree, 'element', (node, _index, parent) => {
+      if (node.tagName !== 'pre') {
+        return;
+      }
+      const codeNode = node.children[0];
+      if (codeNode.tagName !== 'code' || codeNode.properties.title) {
+        return;
+      }
+      let title = 'Untitled example';
+
+      // Starting from node, look up for h3s
+      let startLooking = false;
+      for(let i = parent.children.length - 1; i > 0; i--) {
+        const child = parent.children[i];
+        if (child === node) {
+          startLooking = true;
+        }
+        else if (startLooking) {
+          if (
+            child.tagName === 'h3' &&
+            child.children && 
+            child.children[0].value
+          ) {
+            title = child.children[0].value;
+            parent.children.splice(i, 1);
+            break;
+          }
+        }
+      }
+
+      codeNode.properties.title = title;
+    });
+  }
+}
+
+module.exports = exampleCaptions;

package/helpers/codesandbox.js

@@ -0,0 +1,204 @@
+const { parse } = require('@patternfly/ast-helpers');
+const versions  = require('../versions.json');
+const overpass = require('./fonts');
+const { capitalize } = require('./capitalize');
+
+const getStaticParams = (title, html) => {
+  const imgAssetRegex = /['"](\/assets\/images\/.*)['"]/g;
+  let imgAsset;
+  while ((imgAsset = imgAssetRegex.exec(html))) {
+    const imgName = imgAsset[1];
+    html = html.replace(imgName, `https://www.patternfly.org/v4${imgName}`);
+  }
+
+  return {
+    files: {
+      'index.html': {
+        content: `
+          <!DOCTYPE html>
+          <html lang="en" class="pf-m-redhat-font">
+            <head>
+              <meta charset="utf-8" />
+              <meta name="viewport" content="width=device-width, initial-scale=1" />
+              <link rel="stylesheet" href="fonts.css" />
+              <!-- Include latest PatternFly CSS via CDN -->
+              <link 
+                rel="stylesheet" 
+                href="https://unpkg.com/@patternfly/patternfly/patternfly.css" 
+                crossorigin="anonymous"
+              >
+              <link rel="stylesheet" href="style.css" />
+              <title>PatternFly ${title} CodeSandbox Example</title>
+            </head>
+            <body>
+              ${html}
+            </body>
+          </html>
+        `,
+      },
+      'package.json': {
+        content: {},
+      },
+      'style.css': {
+        content: ''
+      },
+      'fonts.css': {
+        content: overpass
+      },
+      'sandbox.config.json': {
+        content: { template: 'static' }
+      }
+    },
+    template: 'static',
+  }
+};
+
+// Allow 4 formats for example identifiers
+// 1. Example = () => { return <jsx />; }
+// 2. class Example {}
+// 3. function Example() { return <jsx />; }
+// 4. const Example = () => { return <jsx />; }
+const allowedIdentifiers = [
+  'ClassDeclaration',
+  'FunctionDeclaration',
+  'ExpressionStatement',
+  'VariableDeclaration'
+];
+function getExampleDeclaration(code) {
+  code = code
+    .replace(/export\s+default\s+/g, '')
+    .replace(/export\s+/g, '');
+
+  const { body } = parse(code);
+  const lastParsed = body[body.length - 1];
+  if (allowedIdentifiers.includes(lastParsed.type)) {
+    return lastParsed;
+  }
+}
+
+function getIdentifier(title) {
+  return capitalize(
+    title
+      .replace(/^[^A-Za-z]/, '')
+      .replace(/\s+([a-z])?/g, (_, match) => match ? capitalize(match) : '')
+      .replace(/[^A-Za-z0-9_]/g, '')
+  );
+}
+
+function prettyExampleCode(title, code, declaration, identifier) {
+  // Create identifier from title
+  const ident = identifier || getIdentifier(title);
+  const jsxBlock = code.substring(declaration.start, declaration.end);
+  if (identifier) {
+    return code.replace(jsxBlock, `const ${jsxBlock}`);
+  }
+  if (jsxBlock.includes('\n')) {
+    // Make pretty
+    return code.replace(jsxBlock, `const ${ident} = () => (\n  ${
+      jsxBlock
+        .replace(/\n/g, '\n  ')
+        .replace(/;[ \t]*$/, '')
+      }\n)`);
+  }
+  else {
+    return code.replace(jsxBlock, `const ${ident} = () => ${jsxBlock}`);
+  }
+}
+
+// TODO: Make React examples work and use a template that has our assets.
+function getReactParams(title, code, scope, lang) {
+  let toRender = null;
+  try {
+    let declaration = getExampleDeclaration(code);
+    if (declaration.type === 'ExpressionStatement') {
+      if (!declaration.expression.left) {
+        // () => <jsx />
+        code = prettyExampleCode(title, code, declaration);
+        toRender = getIdentifier(title);
+      } else if (declaration.expression.type === 'AssignmentExpression') {
+        // Basic = () => <jsx />
+        code = prettyExampleCode(title, code, declaration, declaration.expression.left.name);
+        toRender = declaration.expression.left.name;
+      }
+    } else if (declaration.type === 'VariableDeclaration') {
+      toRender = declaration.declarations[0].id.name;
+    } else if (declaration.id) {
+      toRender = declaration.id.name;
+    }
+  }
+  catch (err) {
+    // Ignore
+  }
+
+  const imgImportRegex = /import\s*(\w*).*['"](.*)(\.(png|jpe?g|webp|gif|svg))['"]/g;
+  let imgImportMatch;
+  while ((imgImportMatch = imgImportRegex.exec(code))) {
+    const imgName = imgImportMatch[1];
+    code = code.replace(imgImportMatch[0], `const ${imgName} = "https://www.patternfly.org/v4${scope[imgName]}"`);
+  }
+
+  const dependencies = {
+    '@patternfly/react-core': versions.Releases[0].versions['@patternfly/react-core']
+  };
+
+  if (lang === 'ts') {
+    dependencies['@babel/runtime'] = 'latest';
+  }
+
+  Object.entries(versions.Releases[0].versions)
+    .filter(([pkg]) => code.includes(pkg))
+    .forEach(([pkg, version]) => dependencies[pkg] = version);
+
+  return {
+    files: {
+      'index.html': {
+        content: `<!DOCTYPE html>
+<html lang="en" class="pf-m-redhat-font">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>PatternFly-React ${title} CodeSandbox Example</title>
+  </head>
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root" style="height:100%"></div>
+</body>
+</html>`,
+      },
+      [lang === 'ts' ? 'index.tsx' : 'index.js']: {
+        content: `import ReactDOM from 'react-dom';
+import "@patternfly/react-core/dist/styles/base.css";
+import './fonts.css';
+
+${code}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(<${toRender} />, rootElement);`
+      },
+      'fonts.css': {
+        content: overpass
+      },
+      'package.json': {
+        content: {
+          dependencies: {
+            ...dependencies,
+            'react': '^16.8.0',
+            'react-dom': '^16.8.0'
+          }
+        },
+      },
+      'sandbox.config.json': {
+        content: { template: lang === 'ts' ? 'create-react-app-typescript' : 'create-react-app' }
+      }
+    },
+  }
+}
+
+module.exports = {
+  getReactParams,
+  getStaticParams,
+  getExampleDeclaration,
+  prettyExampleCode
+};

package/helpers/copy.js

@@ -0,0 +1,19 @@
+export const copy = textToCopy => {
+  let el = document.createElement('textarea');
+  // Set value (string to be copied)
+  el.value = textToCopy;
+  // Set non-editable to avoid focus and move outside of view
+  el.setAttribute('readonly', '');
+  el.style = {
+    display: 'none',
+    position: 'absolute',
+    left: '-9999px'
+  };
+  document.body.appendChild(el);
+  // Select text inside element
+  el.select();
+  // Copy text to clipboard
+  document.execCommand('copy');
+  // Remove temporary element
+  document.body.removeChild(el);
+};

package/helpers/createHandlebars.js

@@ -0,0 +1,26 @@
+const Handlebars = require('handlebars');
+
+const createHandlebars = nodes => {
+  const instance = Handlebars.create();
+
+  // Add helpers
+  instance.registerHelper('concat', (...params) => {
+    // Ignore the object appended by handlebars.
+    if (typeof params[params.length - 1] === 'object') {
+      params.pop();
+    }
+    return params.join('');
+  });
+
+  // Add partials
+  nodes.forEach(({ fields }) => instance.registerPartial(
+    fields.name, // Partial name
+    fields.partial // Partial template
+  ));
+
+  return instance;
+}
+
+module.exports = {
+  createHandlebars
+}

package/helpers/d3-timer.js

@@ -0,0 +1,7 @@
+// react-charts depends on victory-core which uses d3-timer to create an
+// animation event loop using setInterval. This event loop will cause Node.js
+// to hang if we prerender charts pages, so just replace with calls that resolve instantly.
+module.exports = {
+  timer: () => {},
+  now: () => {}
+};

package/helpers/extractExampleHelpers.js

@@ -0,0 +1,24 @@
+const { slugger } = require('./slugger');
+
+// Used in core's dev:lite
+function getExampleClassName(source, componentType, componentName) {
+  // Compatibility with old gatsby workspace
+  if (source === 'html') {
+    source = 'core';
+  }
+  return slugger(`ws-${source}-${componentType}-${componentName}`);
+}
+
+// Used in core's dev:lite
+function getExampleId(source, componentType, componentName, exampleTitle) {
+  // Compatibility with old gatsby workspace
+  if (source === 'html') {
+    source = 'core';
+  }
+  return slugger(`ws-${source}-${componentType}-${componentName}-${exampleTitle}`);
+}
+
+module.exports = {
+  getExampleClassName,
+  getExampleId
+};