feat(Table): support inline editing in PF4 (#1227)

packages/patternfly-4/react-core/src/components/TextInput/TextInput.js

@@ -52,7 +52,7 @@ const defaultProps = {
   isDisabled: false,
   isReadOnly: false,
   type: 'text',
-  value: null,
+  value: undefined,
   onChange: () => undefined,
   'aria-label': null
 };

packages/patternfly-4/react-core/src/components/TextInput/__snapshots__/TextInput.test.js.snap

@@ -23,7 +23,6 @@ exports[`disabled text input 1`] = `
   readOnly={false}
   required={false}
   type="text"
-  value={null}
 />
 `;
 

packages/patternfly-4/react-docs/build/copyDocs.js

@@ -5,7 +5,7 @@ const fs = require('fs-extra');
 
 const dest = path.resolve(__dirname, '../dist');
 
-const packageDirs = ['react-core', 'react-charts', 'react-table', 'react-styled-system'];
+const packageDirs = ['react-core', 'react-charts', 'react-table', 'react-inline-edit-extension', 'react-styled-system'];
 const moduleTypes = ['js', 'esm'];
 
 moduleTypes.forEach(moduleType => {

packages/patternfly-4/react-docs/gatsby-config.js

@@ -40,6 +40,13 @@ module.exports = {
         ignore: [`**/*.d.ts`]
       }
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `components`,
+        path: resolve(__dirname, '../react-inline-edit-extension/src')
+      }
+    },
     'gatsby-transformer-react-docgen'
   ],
   pathPrefix: 'patternfly-4'

packages/patternfly-4/react-docs/gatsby-node.js

@@ -1,6 +1,6 @@
 const path = require(`path`);
 const fs = require('fs-extra'); //eslint-disable-line
-const packageDirs = ['react-core', 'react-charts', 'react-styled-system', 'react-table'];
+const packageDirs = ['react-core', 'react-charts', 'react-styled-system', 'react-table', 'react-inline-edit-extension'];
 
 // Escape single quotes and backslashes in a file path
 const escapeFilePath = filePath => filePath.replace(/[\\']/g, '\\$&');
@@ -28,7 +28,8 @@ exports.onCreateWebpackConfig = ({ stage, loaders, actions, plugins, getConfig }
         '@patternfly/react-charts': path.resolve(__dirname, '../react-charts/src'),
         '@patternfly/react-core': path.resolve(__dirname, '../react-core/src'),
         '@patternfly/react-styles': path.resolve(__dirname, '../react-styles/src'),
-        '@patternfly/react-styled-system': path.resolve(__dirname, '../react-styled-system/src')
+        '@patternfly/react-styled-system': path.resolve(__dirname, '../react-styled-system/src'),
+        '@patternfly/react-inline-edit-extension': path.resolve(__dirname, '../react-inline-edit-extension/src'),
       }
     }
   });
@@ -119,7 +120,7 @@ exports.createPages = async ({ graphql, actions }) => {
     const filePath = path.resolve(__dirname, '.tmp', doc.base);
 
     const rawExamples = [];
-    const packageDir = packageDirs.find(pkg => doc.absolutePath.indexOf(pkg) !== -1);
+    const packageDir = packageDirs.find(pkg => doc.absolutePath.indexOf(`/${pkg}/`) !== -1);
 
     // In Windows environments, paths use backslashes to separate directories;
     // Ensure that forward slashes are used to make it comparable

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

@@ -11,6 +11,7 @@
     "@patternfly/react-charts": "^2.2.2",
     "@patternfly/react-core": "^2.9.3",
     "@patternfly/react-icons": "^3.6.1",
+    "@patternfly/react-inline-edit-extension": "^1.0.0",
     "@patternfly/react-styled-system": "^2.0.17",
     "@patternfly/react-styles": "^2.4.0",
     "@patternfly/react-table": "^1.3.5",

packages/patternfly-4/react-docs/src/components/example/liveDemo.js

@@ -4,6 +4,7 @@ import exampleStyles from './example.styles';
 import styles from './liveDemo.styles';
 import PropTypes from 'prop-types';
 import * as TableComponents from '@patternfly/react-table';
+import * as TableInlineEditingComponents from '@patternfly/react-inline-edit-extension';
 import * as ChartComponents from '@patternfly/react-charts';
 import * as CoreComponents from '@patternfly/react-core';
 import * as CoreIcons from '@patternfly/react-icons';
@@ -35,6 +36,7 @@ const scopePlayground = {
   React,
   ...ChartComponents,
   ...TableComponents,
+  ...TableInlineEditingComponents,
   ...StyledSystemComponents,
   ...CoreComponents,
   ...CoreIcons,

packages/patternfly-4/react-inline-edit-extension/.babelrc

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

packages/patternfly-4/react-inline-edit-extension/.npmignore

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

packages/patternfly-4/react-inline-edit-extension/README.md

@@ -0,0 +1,5 @@
+# @patternfly/react-inline-edit-extension
+
+Inline Edit extension provides inline editing support for PatternFly 4 React table.
+
+This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.

packages/patternfly-4/react-inline-edit-extension/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/${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-inline-edit-extension/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/patternfly-base.css'), 'utf8');
+
+module.exports = createSerializer({
+  globalCSS: pf4CSS.match(/:root\W?\{(.|\n)*?\}/)[0]
+});

packages/patternfly-4/react-inline-edit-extension/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@patternfly/react-inline-edit-extension",
+  "version": "1.0.0",
+  "description": "This library provides inline editing support for PatternFly 4 React table",
+  "main": "dist/js/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/js/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "tag": "prerelease"
+  },
+  "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/",
+  "dependencies": {
+    "@patternfly/patternfly": "1.0.244",
+    "@patternfly/react-core": "^2.9.2",
+    "@patternfly/react-table": "^1.3.4",
+    "@patternfly/react-icons": "^3.6.1",
+    "@patternfly/react-styles": "^2.4.0",
+    "classnames": "^2.2.5",
+    "exenv": "^1.2.2",
+    "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": "^2.0.2"
+  },
+  "devDependencies": {
+    "css": "^2.2.3",
+    "fs-extra": "^6.0.1",
+    "glob": "^7.1.2",
+    "npmlog": "^4.1.2"
+  }
+}

packages/patternfly-4/react-inline-edit-extension/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);
+});

packages/patternfly-4/react-inline-edit-extension/src/components/CancelButton/CancelButton.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CloseIcon } from '@patternfly/react-icons';
+import { Button } from '@patternfly/react-core';
+
+const CancelButton = props => (
+  <Button {...props}>
+    <CloseIcon />
+  </Button>
+);
+
+CancelButton.propTypes = {
+  ...Button.propTypes
+};
+
+CancelButton.defaultProps = {
+  ...Button.defaultProps,
+  variant: 'plain'
+};
+
+export default CancelButton;

packages/patternfly-4/react-inline-edit-extension/src/components/CancelButton/CancelButton.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { CancelButton } from './index';
+
+test('it renders properly', () => {
+  const component = shallow(<CancelButton />);
+
+  expect(component).toMatchSnapshot();
+});

packages/patternfly-4/react-inline-edit-extension/src/components/CancelButton/__snapshots__/CancelButton.test.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders properly 1`] = `
+<Button
+  aria-label={null}
+  className=""
+  component="button"
+  isActive={false}
+  isBlock={false}
+  isDisabled={false}
+  isFocus={false}
+  isHover={false}
+  type="button"
+  variant="plain"
+>
+  <CloseIcon
+    color="currentColor"
+    size="sm"
+    title={null}
+  />
+</Button>
+`;

packages/patternfly-4/react-inline-edit-extension/src/components/CancelButton/index.js

@@ -0,0 +1 @@
+export { default as CancelButton } from './CancelButton';

packages/patternfly-4/react-inline-edit-extension/src/components/ConfirmButton/ConfirmButton.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CheckIcon } from '@patternfly/react-icons';
+import { Button } from '@patternfly/react-core';
+
+const ConfirmButton = props => (
+  <Button {...props}>
+    <CheckIcon />
+  </Button>
+);
+
+ConfirmButton.propTypes = {
+  ...Button.propTypes
+};
+
+ConfirmButton.defaultProps = {
+  ...Button.defaultProps,
+  variant: 'primary'
+};
+
+export default ConfirmButton;

packages/patternfly-4/react-inline-edit-extension/src/components/ConfirmButton/ConfirmButton.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { ConfirmButton } from './index';
+
+test('it renders properly', () => {
+  const component = shallow(<ConfirmButton />);
+
+  expect(component).toMatchSnapshot();
+});

packages/patternfly-4/react-inline-edit-extension/src/components/ConfirmButton/__snapshots__/ConfirmButton.test.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders properly 1`] = `
+<Button
+  aria-label={null}
+  className=""
+  component="button"
+  isActive={false}
+  isBlock={false}
+  isDisabled={false}
+  isFocus={false}
+  isHover={false}
+  type="button"
+  variant="primary"
+>
+  <CheckIcon
+    color="currentColor"
+    size="sm"
+    title={null}
+  />
+</Button>
+`;

packages/patternfly-4/react-inline-edit-extension/src/components/ConfirmButton/index.js

@@ -0,0 +1 @@
+export { default as ConfirmButton } from './ConfirmButton';