chore(generator): patternfly 3 component generator (patternfly#450)

ISSUES CLOSED: 440

Author: priley86

CONTRIBUTING.md

@@ -1,12 +1,14 @@
 const { setActionTypes } = require('./scripts/generators/actionTypes');
 const { setHelpers } = require('./scripts/generators/helpers');
 const setPF4Generators = require('./scripts/generators/patternfly-4-component');
+const setPF3Generators = require('./scripts/generators/patternfly-3-component');
 const setPackageGenerators = require('./scripts/generators/package');
 
 module.exports = plop => {
   setHelpers(plop);
   setActionTypes(plop);
 
   setPF4Generators(plop);
+  setPF3Generators(plop);
   setPackageGenerators(plop);
 };

plopfile.js

@@ -0,0 +1,48 @@
+const { join, resolve } = require('path');
+const { pascalCase } = require('change-case');
+const { ADD_TO_BARREL_FILE } = require('../actionTypes');
+
+const templatesDir = resolve(__dirname, './templates');
+const patternflyReactRoot = resolve(
+  __dirname,
+  '../../../packages/patternfly-react'
+);
+
+function setPF3Generators(plop) {
+  plop.setGenerator('PatternFly 3 Component', {
+    description: 'Component for PatternFly 3 patternfly-react package',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'What name should the component have?'
+      }
+    ],
+    actions: ({ name }) => {
+      const base = join(templatesDir, './component');
+      const data = {
+        componentName: pascalCase(name)
+      };
+      return [
+        {
+          base,
+          data,
+          type: 'addMany',
+          destination: join(
+            patternflyReactRoot,
+            './src/components/{{componentName}}/'
+          ),
+          templateFiles: join(base, '*.js')
+        },
+        {
+          data,
+          type: ADD_TO_BARREL_FILE,
+          template: `export * from './components/{{componentName}}';`,
+          path: join(patternflyReactRoot, './src/index.js')
+        }
+      ].filter(Boolean);
+    }
+  });
+}
+
+module.exports = setPF3Generators;

scripts/generators/patternfly-3-component/index.js

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

scripts/generators/patternfly-3-component/templates/component/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * {{componentName}} Component for PatternFly React
+ */
+const {{componentName}} = ({ children, ...props }) => <div {...props}>{children}</div>;
+
+{{componentName}}.propTypes = {
+  children: PropTypes.node
+};
+
+{{componentName}}.defaultProps = {
+  children: null
+};
+
+export default {{componentName}};

scripts/generators/patternfly-3-component/templates/component/{{componentName}}.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, text } from '@storybook/addon-knobs';
+import { withInfo } from '@storybook/addon-info';
+import { defaultTemplate } from 'storybook/decorators/storyTemplates';
+import {
+  storybookPackageName,
+  DOCUMENTATION_URL,
+  STORYBOOK_CATEGORY
+} from 'storybook/constants/siteConstants';
+import { {{componentName}} } from './index';
+import { name } from '../../../package.json';
+
+const stories = storiesOf(
+  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.SOME_CATEGORY}/{{componentName}}`,
+  module
+);
+stories.addDecorator(withKnobs);
+stories.addDecorator(
+  defaultTemplate({
+    title: '{{componentName}}',
+    documentationLink: `${
+      DOCUMENTATION_URL.SOME_PATTERNFLY_ORG_CATEGORY
+    }some-valid-component-url-here/`
+  })
+);
+
+stories.add(
+  '{{componentName}} story',
+  withInfo(`This is the {{componentName}} component.`)(() => (
+    <{{componentName}}>
+      <span>
+        {text(
+          'Label',
+          'Well done! You generated a PatternFly React component.'
+        )}
+      </span>
+    </{{componentName}}>
+  ))
+);

scripts/generators/patternfly-3-component/templates/component/{{componentName}}.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import {{componentName}} from './{{componentName}}';
+
+const props = {};
+
+test('replace with useful test name', () => {
+  const view = shallow(<{{componentName}} {...props} />);
+  // Add a useful assertion here.
+  expect(view).toBe(false);
+});