feat(pf4-table): Introduce new package @patternfly/react-table for ta…

…ble implementation (#899)

packages/patternfly-4/react-table/.babelrc

@@ -0,0 +1,33 @@
+{
+  "presets": [
+    "../.babelrc.js"
+  ],
+  "env": {
+    "production:esm": {
+      "plugins": [
+        [
+          "@patternfly/react-styles/babel",
+          {
+            "srcDir": "./src",
+            "outDir": "./dist/esm",
+            "useModules": true
+          }
+        ],
+        "lodash"
+      ]
+    },
+    "production:cjs": {
+      "plugins": [
+        [
+          "@patternfly/react-styles/babel",
+          {
+            "srcDir": "./src",
+            "outDir": "./dist/js",
+            "useModules": false
+          }
+        ],
+        "lodash"
+      ]
+    }
+  }
+}

packages/patternfly-4/react-table/.npmignore

@@ -0,0 +1 @@
+build

packages/patternfly-4/react-table/README.md

@@ -0,0 +1,120 @@
+# @patternfly/react-table
+This package provides Table PatternFly components based on [PatternFly 4][patternfly-4]
+### Prerequisite
+
+#### Node Environment
+
+This project currently supports Node [Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react.
+
+For example, to develop with Node 8, use the following:
+
+```
+nvm install 8
+nvm use 8
+```
+
+This project also requires a Yarn version of >=1.6.0. The latest version can be installed [here](https://yarnpkg.com/).
+
+### Installing
+
+```
+yarn add @patternfly/react-table
+```
+
+or
+
+```
+npm install @patternfly/react-table --save
+```
+
+## Usage
+
+It's strongly advised to use the PatternFly Base CSS in your whole project, or some components may diverge in appearance:
+
+```javascript
+import '@patternfly/react-core/dist/styles/base.css';
+```
+
+#### Example Component Usage
+```javascript
+import React from 'react';
+import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+
+class SimpleTable extends React.Component {
+  static title = 'Simple Table';
+  constructor(props) {
+    super(props)
+    this.state = {
+      columns: [{ title: 'Repositories' }, 'Branches', { title: 'Pull requests' }, 'Workspaces', 'Last Commit'],
+      rows: [['one', 'two', 'three', 'four', 'five']]
+    };
+  }
+   render() {
+    const { columns, rows } = this.state;
+     return (
+      <Table caption="Simple Table">
+        <TableHeader headerRows={columns} />
+        <TableBody rows={rows} />
+      </Table>
+    );
+  }
+}
+export default SimpleTable;
+
+```
+## Contribution
+This library makes use of the babel plugin from [@patternfly/react-styles](../react-styles/README.md) to enable providing the CSS alongside the components. This removes the need for consumers to use (style|css|sass)-loaders. For an example of using CSS from core you can reference [Button.js](./src/components/Button/Button.js). For any CSS not provided by core please use the `StyleSheet.create` utility from [@patternfly/react-styles](../react-styles/README.md). This will prevent collisions with any consumers, and allow the CSS to be bundled with the component.
+
+### Documentation
+
+This project uses Gatsby. For an overview of the project structure please refer to the [Gatsby documentation - Building with Components](https://www.gatsbyjs.org/docs/building-with-components/).
+
+A comprehensive list of components and detailed usage of each can be found on the [PatternFly React Docs][docs] website
+You can also find how each component is meant to be used from a design perspective on the [PatternFly 4 Core][patternfly-4] website.
+
+Note: All commands below assume you are on the root directory in this repository.
+
+### Install
+
+Run to install all the dependencies
+
+```sh
+yarn && yarn bootstrap && yarn build && yarn build:docs
+```
+
+### Building
+```sh
+yarn bootstrap && yarn build && yarn build:docs
+```
+
+### Running
+
+To start the site locally.
+
+```sh
+yarn build && yarn start:pf4
+```
+
+### Building
+
+To build the site.
+
+```sh
+yarn build:docs
+```
+### Building
+
+```
+yarn build
+```
+
+### Testing
+
+Testing is done at the root of this repo. To only run the @patternfly/react-table tests:
+
+```
+yarn test packages/patternfly-4/react-table
+```
+
+[patternfly-4]: https://github.com/patternfly/patternfly-next
+[docs]: https://patternfly-react.surge.sh/patternfly-4

packages/patternfly-4/react-table/build/copyStyles.js

@@ -0,0 +1,42 @@
+/* eslint-disable no-case-declarations */
+const { copySync, readFileSync, writeFileSync } = require('fs-extra');
+const { resolve, dirname, join } = require('path');
+const { parse: parseCSS, stringify: stringifyCSS } = require('css');
+
+const baseCSSFilename = 'patternfly-base.css';
+const stylesDir = resolve(__dirname, '../dist/styles');
+const pfDir = dirname(require.resolve(`@patternfly/patternfly-next/${baseCSSFilename}`));
+
+const css = readFileSync(join(pfDir, baseCSSFilename), 'utf8');
+const ast = parseCSS(css);
+
+const unusedSelectorRegEx = /(\.fas?|\.sr-only)/;
+const unusedKeyFramesRegEx = /fa-/;
+const unusedFontFamilyRegEx = /Font Awesome 5 Free/;
+const ununsedFontFilesRegExt = /(fa-|\.html$|\.css$)/;
+
+// Core provides font awesome fonts and utlities. React does not use these
+ast.stylesheet.rules = ast.stylesheet.rules.filter(rule => {
+  switch (rule.type) {
+    case 'rule':
+      return !rule.selectors.some(sel => unusedSelectorRegEx.test(sel));
+    case 'keyframes':
+      return !unusedKeyFramesRegEx.test(rule.name);
+    case 'charset':
+    case 'comment':
+      return false;
+    case 'font-face':
+      const fontFamilyDecl = rule.declarations.find(decl => decl.property === 'font-family');
+      return !unusedFontFamilyRegEx.test(fontFamilyDecl.value);
+    default:
+      return true;
+  }
+});
+
+copySync(join(pfDir, 'assets/images'), join(stylesDir, 'assets/images'));
+copySync(join(pfDir, 'assets/fonts'), join(stylesDir, 'assets/fonts'), {
+  filter(src) {
+    return !ununsedFontFilesRegExt.test(src);
+  }
+});
+writeFileSync(join(stylesDir, 'base.css'), stringifyCSS(ast));

packages/patternfly-4/react-table/build/snapshot-serializer.js

@@ -0,0 +1,8 @@
+const fs = require('fs');
+const { createSerializer } = require('@patternfly/react-styles/snapshot-serializer');
+
+const pf4CSS = fs.readFileSync(require.resolve('@patternfly/patternfly-next/patternfly-base.css'), 'utf8');
+
+module.exports = createSerializer({
+  globalCSS: pf4CSS.match(/:root\W?\{(.|\n)*?\}/)[0]
+});

packages/patternfly-4/react-table/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@patternfly/react-table",
+  "version": "0.0.1",
+  "description": "This library provides a set of React table components for use with the PatternFly 4",
+  "main": "dist/js/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/js/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/patternfly/patternfly-react.git"
+  },
+  "keywords": [
+    "react",
+    "patternfly",
+    "table",
+    "reacttabular"
+  ],
+  "author": "Red Hat",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/patternfly/patternfly-react/issues"
+  },
+  "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-table#readme",
+  "dependencies": {
+    "@patternfly/react-icons": "^2.5.2",
+    "@patternfly/react-styles": "^2.3.0",
+    "@patternfly/react-core": "^1.25.6",
+    "babel-plugin-lodash": "^3.3.4",
+    "exenv": "^1.2.2",
+    "lodash": "^4.17.11",
+    "reactabular-table": "^8.14.0"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.6.1",
+    "react": "^16.4.0",
+    "react-dom": "^15.6.2 || ^16.4.0"
+  },
+  "scripts": {
+    "build": "yarn build:babel && yarn build:ts",
+    "build:babel": "concurrently \"yarn build:babel:cjs\" \"yarn build:babel:esm\"",
+    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js",
+    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm",
+    "build:ts": "node ./scripts/copyTS.js",
+    "postbuild": "node ./build/copyStyles.js"
+  },
+  "optionalDependencies": {
+    "@patternfly/react-tokens": "^1.0.0"
+  },
+  "devDependencies": {
+    "@patternfly/patternfly-next": "1.0.69",
+    "css": "^2.2.3",
+    "fs-extra": "^6.0.1",
+    "glob": "^7.1.2",
+    "npmlog": "^4.1.2"
+  }
+}

packages/patternfly-4/react-table/scripts/copyTS.js

@@ -0,0 +1,17 @@
+const path = require('path');
+const glob = require('glob');
+const fse = require('fs-extra');
+const log = require('npmlog');
+
+const srcDir = path.join('./src');
+const distDir = path.join('./dist/js');
+
+const files = glob.sync('**/*.d.ts', {
+  cwd: srcDir
+});
+files.forEach(file => {
+  const from = path.join(srcDir, file);
+  const to = path.join(distDir, file);
+  log.info('copyTS', `${from} --> ${to}`);
+  fse.copySync(from, to);
+});