chore(generator): update generator to support typescript files (#1143)

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

@@ -32,17 +32,40 @@ function setPF4Generators(plop) {
       };
       return [
         {
-          base,
           data,
-          type: 'addMany',
-          destination: join(reactCoreRoot, './src/{{typeDir}}/{{componentName}}/'),
-          templateFiles: join(base, '**/*.js')
+          type: 'add',
+          templateFile: join(base, 'component.tsx.hbs'),
+          path: join(reactCoreRoot, './src/{{typeDir}}/{{componentName}}/{{componentName}}.tsx')
+        },
+        {
+          data,
+          type: 'add',
+          templateFile: join(base, 'component.test.tsx.hbs'),
+          path: join(reactCoreRoot, './src/{{typeDir}}/{{componentName}}/{{componentName}}.test.tsx')
+        },
+        {
+          data,
+          type: 'add',
+          templateFile: join(base, 'component.docs.js.hbs'),
+          path: join(reactCoreRoot, './src/{{typeDir}}/{{componentName}}/{{componentName}}.docs.js')
+        },
+        {
+          data,
+          type: 'add',
+          templateFile: join(base, 'index.ts.hbs'),
+          path: join(reactCoreRoot, './src/{{typeDir}}/{{componentName}}/index.ts')
+        },
+        {
+          data,
+          type: 'add',
+          templateFile: join(base, 'example.js.hbs'),
+          path: join(reactCoreRoot, './src/{{typeDir}}/{{componentName}}/example/Simple{{componentName}}.ts')
         },
         {
           data,
           type: ADD_TO_BARREL_FILE,
           template: `export * from './{{componentName}}';`,
-          path: join(reactCoreRoot, './src/{{typeDir}}/index.js')
+          path: join(reactCoreRoot, './src/{{typeDir}}/index.ts')
         }
       ];
     }

scripts/generators/patternfly-4-component/templates/component/component.tsx.hbs

@@ -0,0 +1,24 @@
+import React, { DetailedHTMLProps } from 'react';
+import styles from '@patternfly/patternfly-next/{{typeDir}}/{{componentName}}/styles.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+interface {{ componentName }}Props {
+  children?: any;
+  className?: string;
+}
+
+const {{componentName}}: React.SFC<{{componentName}}Props> = (props) => (
+  <div {...props} className={css(styles.{{ camelCase componentName }}, props.className)}>
+    {props.children}
+  </div>
+);
+
+{{ componentName }}.defaultProps = defaultProps;
+
+export default {{ componentName }};

tsconfig.json

@@ -2,19 +2,26 @@
   "compilerOptions": {
     "baseUrl": ".",
     "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true, 
+    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "lib": ["es6", "dom"],
+    "lib": [
+      "es6",
+      "dom"
+    ],
     "module": "es2015",
     "moduleResolution": "node",
     "noEmit": true,
     "noImplicitAny": false,
     "target": "esnext",
     "allowJs": true,
     "paths": {
-      "*": ["./packages/patternfly-4/react-core/dist/esm/*"]
+      "*": [
+        "./packages/patternfly-4/react-core/dist/esm/*"
+      ]
     }
   },
-  "include": ["packages/**/src/**/*"]
+  "include": [
+    "packages/**/src/**/*"
+  ]
 }