Typescript support for react-core

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 dist
+tsc_out
 .out
 /.changelog
 .DS_Store

package.json

@@ -24,6 +24,10 @@
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "devDependencies": {
     "@commitlint/cli": "^7.1.2",
+    "@types/enzyme": "^3.1.15",
+    "@types/jest": "^23.3.10",
+    "@types/prop-types": "^15.5.6",
+    "@types/react": "^16.7.13",
     "change-case": "^3.0.2",
     "commitizen": "^3.0.1",
     "commitlint-config-cz": "^0.10.1",
@@ -53,7 +57,8 @@
     "react": "^16.3.0",
     "react-dev-utils": "^5.0.0",
     "react-dom": "^16.3.0",
-    "travis-deploy-once": "^4.4.1"
+    "travis-deploy-once": "^4.4.1",
+    "ts-jest": "^23.10.5"
   },
   "sassIncludes": {
     "patternfly": "node_modules/patternfly/dist/sass",
@@ -64,6 +69,7 @@
     "bootstrap": "lerna bootstrap",
     "build": "yarn clean:build && lerna run prebuild --parallel && lerna run build --parallel && lerna run postbuild",
     "build:docs": "yarn build && lerna run docbuild --scope=@patternfly/react-docs --stream",
+    "build:typecheck": "lerna run build:typecheck --scope=@patternfly/react-core --stream",
     "build:prdocs": "lerna run pr-build --scope=@patternfly/react-docs --stream",
     "clean": "yarn clean:build",
     "clean:build": "rm -rf packages/*/dist && rm -rf packages/patternfly-?/*/dist",
@@ -115,6 +121,7 @@
       "<rootDir>/packages/patternfly-4/react-core/build/snapshot-serializer"
     ],
     "transform": {
+      "^.+\\.(ts|tsx)?$": "ts-jest",
       "^.+\\.jsx?$": "babel-jest",
       "\\.(css)$": "<rootDir>/packages/patternfly-4/react-styles/jest-transform.js"
     },
@@ -128,7 +135,8 @@
       "<rootDir>/packages",
       "<rootDir>/scripts"
     ],
-    "testURL": "http://localhost"
+    "testURL": "http://localhost",
+    "preset": "ts-jest/presets/js-with-babel"
   },
   "config": {
     "commitizen": {

packages/patternfly-4/package.json

@@ -30,5 +30,8 @@
     "lint:versions": "node ./verifyCoreVersions.js",
     "lint:styles": "yarn stylelint",
     "stylelint": "stylelint '**/sass/**/*.scss' !**/dist/**/*.scss"
+  },
+  "dependencies": {
+    "@types/jest": "^23.3.10"
   }
 }

packages/patternfly-4/react-core/.babelrc.js

@@ -0,0 +1,48 @@
+const babelENV = process.env.BABEL_ENV || 'development';
+const modules = babelENV !== 'production:esm' ? 'commonjs' : false;
+
+module.exports = {
+  presets: [['@babel/env', { modules }], '@babel/preset-typescript', '@babel/react'],
+  ignore: (() => {
+    const ignore = ['src/**/__snapshots__'];
+    ignore.push('src/**/*.d.ts');
+    if (babelENV.includes('production')) {
+      ignore.push('test.js', '__mocks__');
+    }
+    return ignore;
+  })(),
+  env: {
+    'production:esm': {
+      plugins: [
+        'babel-plugin-typescript-to-proptypes',
+        '@babel/plugin-proposal-export-default-from',
+        '@babel/proposal-class-properties',
+        '@babel/proposal-object-rest-spread',
+        [
+          '@patternfly/react-styles/babel',
+          {
+            srcDir: './src',
+            outDir: './dist/esm',
+            useModules: true
+          }
+        ]
+      ]
+    },
+    'production:cjs': {
+      plugins: [
+        'babel-plugin-typescript-to-proptypes',
+        '@babel/plugin-proposal-export-default-from',
+        '@babel/proposal-class-properties',
+        '@babel/proposal-object-rest-spread',
+        [
+          '@patternfly/react-styles/babel',
+          {
+            srcDir: './src',
+            outDir: './dist/js',
+            useModules: false
+          }
+        ]
+      ]
+    }
+  }
+};

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

@@ -38,21 +38,48 @@
     "react-dom": "^15.6.2 || ^16.4.0"
   },
   "scripts": {
-    "build": "yarn build:babel && yarn build:ts",
+    "build": "yarn build:babel && yarn build:tsd:copy",
     "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"
+    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js --extensions \".css,.js,jsx,.ts,.tsx\"",
+    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm --extensions \".css,.js,jsx,.ts,.tsx\"",
+    "build:typecheck": "tsc",
+    "build:tsd:copy": "node ./scripts/copyTS.js",
+    "postbuild": "yarn build:typecheck && node ./build/copyStyles.js"
   },
   "optionalDependencies": {
     "@patternfly/react-tokens": "^1.0.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-object-assign": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.0.0",
+    "@patternfly/react-styles": "^2.3.0",
+    "@types/enzyme": "^3.1.15",
+    "@types/jest": "^23.3.10",
+    "@types/prop-types": "^15.5.6",
+    "@types/react": "^16.7.13",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^22.4.3",
+    "babel-plugin-transform-imports": "^1.5.0",
+    "babel-plugin-typescript-to-proptypes": "^0.13.0",
     "@patternfly/patternfly-next": "1.0.87",
     "css": "^2.2.3",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16.3": "^1.2.0",
+    "enzyme-to-json": "^3.3.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
-    "npmlog": "^4.1.2"
+    "jest": "^23.6.0",
+    "jest-cli": "^23.6.0",
+    "npmlog": "^4.1.2",
+    "ts-jest": "^23.10.5",
+    "typescript": "^3.1.5"
   }
 }

packages/patternfly-4/react-core/src/components/Avatar/Avatar.test.js → packages/patternfly-4/react-core/src/components/Avatar/Avatar.test.tsx

@@ -3,6 +3,6 @@ import { shallow } from 'enzyme';
 import Avatar from './Avatar';
 
 test('simple avatar', () => {
-  const view = shallow(<Avatar alt="avatar" />);
+  const view: any = shallow(<Avatar alt="avatar" />);
   expect(view).toMatchSnapshot();
 });

packages/patternfly-4/react-core/src/components/Avatar/Avatar.js → packages/patternfly-4/react-core/src/components/Avatar/Avatar.tsx

@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
 import styles from '@patternfly/patternfly-next/components/Avatar/avatar.css';
 import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
 
+const defaultProps = {
+  className: '',
+  src: ''
+};
+
 const propTypes = {
   /** Additional classes added to the Avatar. */
   className: PropTypes.string,
@@ -12,16 +17,22 @@ const propTypes = {
   alt: PropTypes.string.isRequired
 };
 
-const defaultProps = {
-  className: '',
-  src: ''
-};
+/**
+ * Column properties.
+ */
+export interface AvatarProps extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>{
+  /** Additional classes added to the Avatar. */
+  className?: string;
+  /** Attribute that specifies the URL of the image for the Avatar. */
+  src?: string;
+  /** Attribute that specifies the alt text of the image for the Avatar. */
+  alt: string;
+}
 
-const Avatar = ({ className, src, alt, ...props }) => (
-  <img {...props} className={css(styles.avatar, className)} src={src} alt={alt} />
+const Avatar:React.SFC<AvatarProps> = (props) => (
+  <img {...props} className={css(styles.avatar, props.className)} />
 );
 
-Avatar.propTypes = propTypes;
 Avatar.defaultProps = defaultProps;
 
 export default Avatar;

packages/patternfly-4/react-core/src/components/index.d.ts → packages/patternfly-4/react-core/src/components/index.ts

@@ -26,4 +26,4 @@ export * from './Switch';
 export * from './TextArea';
 export * from './TextInput';
 export * from './Title';
-export * from './Text';
+export * from './Text';

packages/patternfly-4/react-core/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "sourceMap": true, // allow sourcemap support
+    "lib": ["es6", "dom"],
+    "noEmit": true,
+    "module": "commonjs", // specify module code generation
+    "jsx": "react", // use typescript to transpile jsx to js
+    "target": "es5", // specify ECMAScript target version
+    "allowJs": true, // allow a partial TypeScript and JavaScript codebase
+    "paths": {
+      "*": ["dist/esm/*"]
+    }
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["./src/**/*.d.ts"]
+}

packages/patternfly-4/react-core/typings/react-styles.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const styles: any;
+  export default styles;
+}

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

@@ -5,6 +5,7 @@ module.exports = {
     title: 'PatternFly React'
   },
   plugins: [
+    'gatsby-plugin-typescript',
     'gatsby-plugin-react-helmet',
     {
       resolve: `gatsby-source-filesystem`,

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

@@ -158,5 +158,6 @@ exports.createPages = async ({ boundActionCreators, graphql }) => {
 
 exports.modifyBabelrc = ({ stage, babelrc }) => {
   babelrc.plugins.push(require.resolve('babel-plugin-react-docgen'));
+  babelrc.plugins.push(require.resolve('babel-plugin-react-docgen-typescript'));
   return babelrc;
 };

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

@@ -14,6 +14,7 @@
     "@patternfly/react-styled-system": "^1.3.2",
     "@patternfly/react-styles": "^2.3.0",
     "@patternfly/react-tokens": "^1.9.2",
+    "babel-plugin-react-docgen-typescript": "^1.0.1",
     "babel-standalone": "^6.26.0",
     "clipboard-copy": "^2.0.1",
     "emotion": "^9.2.9",
@@ -23,14 +24,16 @@
     "gatsby-plugin-emotion": "^2.0.5",
     "gatsby-plugin-react-helmet": "^2.0.10",
     "gatsby-plugin-react-next": "^1.0.11",
+    "gatsby-plugin-typescript": "^1.0.0",
     "gatsby-source-filesystem": "^1.5.36",
     "gatsby-transformer-react-docgen": "^1.0.17",
     "param-case": "^2.1.1",
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-helmet": "^5.2.0",
-    "react-live": "^1.11.0"
+    "react-live": "^1.11.0",
+    "typescript": "^3.1.5"
   },
   "keywords": [
     "gatsby"