chore(deps): Bump PatternFly versions to latest release candidates (#12)

* chore(deps): Bump PatternFly versions to latest release candidates * chore(docs): Extract examples to standalone files for debugging purposes * chore(docs): Apply codemod auto fixes * chore(docs): Run Prettier on extracted example files * chore(docs): Fix broken Dropdown and missing event arguments * chore(docs): Fix styling issues caused by missing class name * chore(docs): Resolve linting issues
patternfly · Jul 25, 2023 · 6594004 · 6594004
1 parent 97afa21
commit 6594004
Show file tree

Hide file tree

Showing 15 changed files with 1,515 additions and 1,514 deletions.
diff --git a/packages/module/package.json b/packages/module/package.json
@@ -39,9 +39,9 @@
     "tag": "prerelease"
   },
   "dependencies": {
-    "@patternfly/react-core": "^5.0.0-prerelease.13",
-    "@patternfly/react-icons": "^5.0.0-prerelease.7",
-    "@patternfly/react-styles": "^5.0.0-prerelease.5",
+    "@patternfly/react-core": "^5.0.0-prerelease.26",
+    "@patternfly/react-icons": "^5.0.0-prerelease.9",
+    "@patternfly/react-styles": "^5.0.0-prerelease.7",
     "linear-layout-vector": "0.0.1",
     "react-virtualized": "^9.22.5",
     "tslib": "^2.5.2"
@@ -51,12 +51,13 @@
     "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^2.0.0-alpha.69",
-    "@patternfly/patternfly": "^5.0.0-prerelease.10",
-    "@patternfly/react-table": "^5.0.0-prerelease.13",
-    "@patternfly/react-code-editor": "^5.0.0-prerelease.13",
+    "@patternfly/documentation-framework": "^5.0.15",
+    "@patternfly/patternfly": "^5.0.0-prerelease.16",
+    "@patternfly/react-table": "^5.0.0-prerelease.26",
+    "@patternfly/react-code-editor": "^5.0.0-prerelease.26",
     "rimraf": "^5.0.1",
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "react-monaco-editor": "^0.52.0"
+    "react-monaco-editor": "^0.51.0",
+    "monaco-editor": "0.34.1"
   }
 }
diff --git a/packages/module/patternfly-docs/content/examples/Actions.tsx b/packages/module/patternfly-docs/content/examples/Actions.tsx
@@ -0,0 +1,149 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { debounce } from '@patternfly/react-core';
+import { ActionsColumn, TableGridBreakpoint } from '@patternfly/react-table';
+import { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';
+import { CellMeasurerCache, CellMeasurer } from 'react-virtualized';
+import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';
+
+export class ActionsExample extends React.Component {
+  constructor(props) {
+    super(props);
+    const rows = [];
+    for (let i = 0; i < 100; i++) {
+      rows.push({
+        disableActions: i % 3 === 2,
+        id: `actions-row-${i}`,
+        cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]
+      });
+    }
+
+    this.actionsVirtualBody = null;
+
+    this.state = {
+      columns: [
+        { title: 'Name', props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' } },
+        {
+          title: 'Namespace',
+          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }
+        },
+        {
+          title: 'Labels',
+          props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }
+        },
+        { title: 'Status', props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' } },
+        { title: 'Pod Selector', props: { className: 'pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-xl' } },
+        { title: '', props: { className: 'pf-v5-c-table__action' } }
+      ],
+      rows,
+      actions: [
+        {
+          title: 'Some action',
+          onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Some action, on row: ', rowId)
+        },
+        {
+          title: <div>Another action</div>,
+          onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Another action, on row: ', rowId)
+        },
+        {
+          isSeparator: true
+        },
+        {
+          title: 'Third action',
+          onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Third action, on row: ', rowId)
+        }
+      ]
+    };
+
+    this._handleResize = debounce(this._handleResize.bind(this), 100);
+  }
+
+  componentDidMount() {
+    // re-render after resize
+    window.addEventListener('resize', this._handleResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this._handleResize);
+  }
+
+  _handleResize() {
+    this.forceUpdate();
+  }
+
+  render() {
+    const { columns, rows } = this.state;
+
+    const measurementCache = new CellMeasurerCache({
+      fixedWidth: true,
+      minHeight: 44,
+      keyMapper: (rowIndex) => rowIndex
+    });
+
+    const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {
+      const { rows, columns, actions } = this.state;
+
+      return (
+        <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
+          <tr data-id={index} style={style} role="row">
+            <td className={columns[0].props.className} role="gridcell">
+              {rows[index].cells[0]}
+            </td>
+            <td className={columns[1].props.className} role="gridcell">
+              {rows[index].cells[1]}
+            </td>
+            <td className={columns[2].props.className} role="gridcell">
+              {rows[index].cells[2]}
+            </td>
+            <td className={columns[3].props.className} role="gridcell">
+              {rows[index].cells[3]}
+            </td>
+            <td className={columns[4].props.className} role="gridcell">
+              {rows[index].cells[4]}
+            </td>
+            <td className={columns[5].props.className} role="gridcell">
+              <ActionsColumn
+                items={actions}
+                rowData={rows[index]}
+                extraData={{ rowIndex: index }}
+                isDisabled={rows[index].disableActions}
+              />
+            </td>
+          </tr>
+        </CellMeasurer>
+      );
+    };
+
+    return (
+      <div aria-label="Scrollable Table" className="pf-v5-c-scrollablegrid">
+        <TableDeprecated
+          caption="Actions Virtualized Table"
+          cells={columns}
+          rows={rows}
+          gridBreakPoint={TableGridBreakpoint.none}
+          aria-rowcount={rows.length}
+        >
+          <TableHeaderDeprecated />
+        </TableDeprecated>
+        <AutoSizer disableHeight>
+          {({ width }) => (
+            <VirtualTableBody
+              ref={(ref) => (this.actionsVirtualBody = ref)}
+              className="pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller"
+              deferredMeasurementCache={measurementCache}
+              rowHeight={measurementCache.rowHeight}
+              height={400}
+              overscanRowCount={2}
+              columnCount={1}
+              rows={rows}
+              rowCount={rows.length}
+              rowRenderer={rowRenderer}
+              width={width}
+              role="grid"
+            />
+          )}
+        </AutoSizer>
+      </div>
+    );
+  }
+}
diff --git a/packages/module/patternfly-docs/content/examples/Basic.tsx b/packages/module/patternfly-docs/content/examples/Basic.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { debounce } from '@patternfly/react-core';
+import { TableGridBreakpoint } from '@patternfly/react-table';
+import { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';
+import { CellMeasurerCache, CellMeasurer } from 'react-virtualized';
+import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';
+
+export class VirtualizedExample extends React.Component {
+  constructor(props) {
+    super(props);
+    const rows = [];
+    for (let i = 0; i < 100; i++) {
+      rows.push({
+        id: `basic-row-${i}`,
+        cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]
+      });
+    }
+
+    this.state = {
+      columns: [
+        {
+          title: 'Repositories',
+          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }
+        },
+        {
+          title: 'Branches',
+          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }
+        },
+        {
+          title: 'Pull requests',
+          props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }
+        },
+        {
+          title: 'Workspaces',
+          props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }
+        },
+        { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }
+      ],
+      rows
+    };
+    this._handleResize = debounce(this._handleResize.bind(this), 100);
+  }
+
+  componentDidMount() {
+    // re-render after resize
+    window.addEventListener('resize', this._handleResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this._handleResize);
+  }
+
+  _handleResize() {
+    this.forceUpdate();
+  }
+
+  render() {
+    const { columns, rows } = this.state;
+
+    const measurementCache = new CellMeasurerCache({
+      fixedWidth: true,
+      minHeight: 44,
+      keyMapper: (rowIndex) => rowIndex
+    });
+
+    const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {
+      const { rows, columns } = this.state;
+
+      return (
+        <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
+          <tr style={style} role="row">
+            <td className={columns[0].props.className} role="gridcell">
+              {rows[index].cells[0]}
+            </td>
+            <td className={columns[1].props.className} role="gridcell">
+              {rows[index].cells[1]}
+            </td>
+            <td className={columns[2].props.className} role="gridcell">
+              {rows[index].cells[2]}
+            </td>
+            <td className={columns[3].props.className} role="gridcell">
+              {rows[index].cells[3]}
+            </td>
+            <td className={columns[4].props.className} role="gridcell">
+              {rows[index].cells[4]}
+            </td>
+          </tr>
+        </CellMeasurer>
+      );
+    };
+
+    return (
+      <div aria-label="Scrollable Table" className="pf-v5-c-scrollablegrid">
+        <TableDeprecated
+          caption="Simple Table"
+          cells={columns}
+          rows={rows}
+          gridBreakPoint={TableGridBreakpoint.none}
+          aria-rowcount={rows.length}
+        >
+          <TableHeaderDeprecated />
+        </TableDeprecated>
+        <AutoSizer disableHeight>
+          {({ width }) => (
+            <VirtualTableBody
+              className="pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller"
+              deferredMeasurementCache={measurementCache}
+              rowHeight={measurementCache.rowHeight}
+              height={400}
+              overscanRowCount={2}
+              columnCount={1}
+              rows={rows}
+              rowCount={rows.length}
+              rowRenderer={rowRenderer}
+              width={width}
+              role="grid"
+            />
+          )}
+        </AutoSizer>
+      </div>
+    );
+  }
+}