feat(react-codemods): Added pf3-pf4 codemod (patternfly#468)

affects: @patternfly/react-codemods

Added pf3-pf4 codemod for Buttons.  The general framework should work for other components too.

ISSUES CLOSED: patternfly#444

packages/react-codemods/README.md

@@ -1,6 +1,6 @@
 # @patternfly/react-codemods
 
-_PatternFly React codemods are currently experimental only. These may be useful in the future after package namespaces are changed for PatternFly Next._
+_PatternFly React codemods are currently experimental only._
 
 This repository contains a collection of codemod scripts for use with
 [JSCodeshift](https://github.com/facebook/jscodeshift) that help update Patternfly React projects.
@@ -19,22 +19,55 @@ This repository contains a collection of codemod scripts for use with
 
 ## Included Scripts
 
-### `patternfly-react-to-react-core`
+## `pf3-pf4`
 
-Converts imports of `patternfly-react` to compatible `@patternfly/react-core`;
+Converts PF3 components of `patternfly-react` to compatible PF4 `@patternfly/react-core` components;
 
 ```sh
-jscodeshift -t node_modules/@patternfly/react-codemods/transforms/patternfly-react-to-react-core.js <path>
+jscodeshift -t node_modules/@patternfly/react-codemods/transforms/pf3-pf4.js <path> [--component]=comma,separated,components
 ```
 
+## Options
+```text
+--components     Comma separated list of components to transform. Defaults to "*". EX: --components=Button,Alert
+```
+
+## Components
+
+### `Button`
+
+### Supported Props
+|  In Prop         | Out Prop     | Value Tranforms           |
+|------------------|--------------|---------------------------|
+| `block`          | `isBlock`    | n/a                       |
+| `active`         | `isActive`   | n/a                       |
+| `disabled`       | `isDisabled` | n/a                       |
+| `componentClass` | `component`  | n/a                       |
+| `bsClass`        | `undefined`  | n/a (removed)             |
+| `bsStyle`        | `variant`    | primary     -> primary    |
+|                  |              | secondary   -> secondary  |
+|                  |              | danger      -> danger     |
+|                  |              | link        -> link       |
+|                  |              | info        -> secondary  |
+|                  |              | `undefined` -> secondary  |
+
+### Unsupported props
+* `componentClass`
+* `href`
+
+
 #### Before
 
 ```jsx
-import { Button, Alert } from 'patternfly-react';
+import { Button } from 'patternfly-react';
+
+const primary = <Button bsStyle="primary">Primary Button</Button>;
 ```
 
 #### After
 
 ```jsx
-import { Button, Alert } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+const primary = <Button variant="primary">Primary Button</Button>;
 ```

packages/react-codemods/componentConfig.js

@@ -0,0 +1,23 @@
+module.exports = {
+  Button: {
+    package: '@patternfly/react-core',
+    props: {
+      bsStyle: {
+        name: 'variant',
+        values: {
+          primary: 'primary',
+          link: 'link',
+          danger: 'danger'
+        },
+        defaultValue: 'secondary',
+        fallbackValue: 'secondary'
+      },
+      active: 'isActive',
+      componentClass: 'component',
+      disabled: 'isDisabled',
+      block: 'isBlock',
+      bsClass: { remove: true }
+    },
+    unsupportedProps: ['bsSize']
+  }
+};

packages/react-codemods/package.json

@@ -22,5 +22,8 @@
   "homepage": "https://github.com/patternfly/patternfly-react/blob/master/packages/codemods/README.md",
   "devDependencies": {
     "jscodeshift": "^0.5.0"
+  },
+  "dependencies": {
+    "colors": "^1.3.0"
   }
 }

packages/react-codemods/transforms/__snapshots__/pf3-pf4.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`throws error for components that are not supported 1`] = `"UnsupportedComponent is not a supported component"`;

packages/react-codemods/transforms/pf3-pf4.button.test.js

@@ -0,0 +1,119 @@
+import prettier from 'prettier';
+import { defineInlineTest } from 'jscodeshift/dist/testUtils';
+import transform from './pf3-pf4';
+
+const prettierConfig = prettier.resolveConfig.sync(process.cwd());
+const pretty = src =>
+  prettier.format(src, { parser: 'babylon', ...prettierConfig });
+
+global.console.log = jest.fn();
+
+defineInlineTest(
+  transform,
+  {},
+  `
+import { Button as PFButton } from 'patternfly-react';
+const btn = <PFButton bsStyle='primary'>Button</PFButton>;
+`,
+  pretty(`
+    import { Button as PFButton  } from '@patternfly/react-core';
+    const btn = <PFButton variant="primary">Button</PFButton>;
+  `),
+  'Supports import alias'
+);
+
+defineInlineTest(
+  transform,
+  {},
+  `
+import { Button } from 'patternfly-react';
+const btn = <Button bsStyle='primary'>Button</Button>;
+`,
+  pretty(`
+    import { Button } from '@patternfly/react-core';
+    const btn = <Button variant="primary">Button</Button>;
+  `),
+  'Transforms bsStyle primary to variant primary'
+);
+
+defineInlineTest(
+  transform,
+  {},
+  `
+import { Button } from 'patternfly-react';
+const btn = <Button block>Button</Button>;
+`,
+  pretty(`
+    import { Button } from '@patternfly/react-core';
+    const btn = <Button isBlock variant="secondary">Button</Button>;
+  `),
+  'Transforms block to isBlock'
+);
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import { Button } from 'patternfly-react';
+  const btn = <Button disabled>Button</Button>;
+`,
+  pretty(`
+    import { Button } from '@patternfly/react-core';
+    const btn = <Button isDisabled variant="secondary">Button</Button>;
+  `),
+  'Transforms disabled to isDisabled'
+);
+
+defineInlineTest(
+  transform,
+  {},
+  `
+import { Button } from 'patternfly-react';
+const btn = <Button active>Button</Button>;
+`,
+  pretty(`
+    import { Button } from '@patternfly/react-core';
+    const btn = <Button isActive variant="secondary">Button</Button>;
+  `),
+  'Transforms active to isActive'
+);
+
+defineInlineTest(
+  transform,
+  {},
+  `
+import { Button } from 'patternfly-react';
+const btn = <Button componentClass="a">Button</Button>;
+`,
+  pretty(`
+    import { Button } from '@patternfly/react-core';
+    const btn = <Button component="a" variant="secondary">Button</Button>;
+  `),
+  'Transforms componentClass to component'
+);
+
+defineInlineTest(
+  transform,
+  {},
+  `
+import { Button } from 'patternfly-react';
+const btn = <Button bsClass="btn">Button</Button>;
+`,
+  pretty(`
+    import { Button } from '@patternfly/react-core';
+    const btn = <Button variant="secondary">Button</Button>;
+  `),
+  'Removes bsClass prop'
+);
+
+defineInlineTest(
+  transform,
+  {},
+  `
+import { Button } from 'patternfly-react';
+const btn = <Button bsSize="sm">Button</Button>;
+const supported = <Button>Button</Button>;
+`,
+  '',
+  'Ignores file for bsSize references'
+);