TASK: rewrite react-ui-components in TypeScript (#2128)

* TASK: prepare typescript dev env

* FEATURE: badge in typescript

* FEATURE: bar in typescript

* FEATURE: checkbox in typescript

* FEATURE: headline in typescript

* FEATURE: sidebar in typescript

* FEATURE: tabs/panel in typescript

* FEATURE: IconButtonDropDown/dropDownItem in typescript

* FEATURE: Button in typescript

* FEATURE: Icon in typescript

* FEATURE: IconButton & IconButtonDropDown in typescript

* TASK: remove verbosity of some import statements

* TASK: fix linting error

* BUGFIX: defaultProps do not work with type annotation!
So we can not benefit from intellisense and automatic type checking in defaultProps.

* TASK: stage fixes

* TASK: revert frontendDevelopmentMode setting

* REFACTOR: remove capital I from interface names, introduce better way to type defaultProps, minor fixes

* TASK: resolve //TODOs

* TASK: use only one typescript laoder

.gitignore

@@ -33,3 +33,9 @@ Resources/Public/Styles/**/*.map
 Resources/Public/Styles/Font*
 lerna-debug.log
 npm-debug.log
+
+#
+# editors / IDEs
+#
+.vscode/
+.idea/

package.json

@@ -71,6 +71,9 @@
     "ts-loader": "^3",
     "tslib": "^1.9.3",
     "tslint": "^5.11.0",
+    "tslint-config-prettier": "^1.15.0",
+    "tslint-immutable": "^4.7.0",
+    "tslint-react": "^3.6.0",
     "typescript": "^3.0.1",
     "watch": "^1.0.2",
     "webpack": "^3.8.1",

packages/react-ui-components/.storybook/webpack.config.js

@@ -14,6 +14,13 @@ module.exports = (storybookBaseConfig, configType) => {
         //
         module: {
             rules: [
+                {
+                    test: /\.tsx?$/,
+                    exclude: /(node_modules)/,
+                    use: [{
+                        loader: 'ts-loader'
+                    }]
+                },
                 {
                     test: /\.js$/,
                     exclude: /(node_modules)/,
@@ -58,6 +65,10 @@ module.exports = (storybookBaseConfig, configType) => {
                     }]
                 }
             ]
-        }
+        },
+
+        resolve: {
+            extensions: ['.ts', '.tsx', '.js']
+        },
     });
 };

packages/react-ui-components/package.json

@@ -12,7 +12,7 @@
     "babel": "babel ./src --out-dir ./lib",
     "css": "cpx './src/**/*.css' ./lib && cpx './src/**/*.woff' ./lib && cpx './src/**/*.woff2' ./lib",
     "clean": "rimraf ./lib ./dist",
-    "lint": "eslint src && stylelint 'src/**/*.css'",
+    "lint": "eslint src && stylelint 'src/**/*.css' && tslint -t codeFrame -p ../tsconfig.json -c ../../tslint.json",
     "jest": "NODE_ENV=test jest",
     "jest:updateSnapshots": "NODE_ENV=test jest -u",
     "start": "cross-env STORY=true start-storybook -p 9001"

packages/react-ui-components/src/Badge/badge.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 import toJson from 'enzyme-to-json';
-import Badge from './badge.js';
+import Badge from './badge';
 
 describe('<Badge/>', () => {
     let props;

packages/react-ui-components/src/Badge/badge.tsx

@@ -0,0 +1,41 @@
+import mergeClassNames from 'classnames';
+import React, {PureComponent} from 'react';
+
+interface BadgeTheme {
+    readonly badge: string;
+}
+
+interface BadgeProps {
+    /**
+     * An optional `className` to attach to the wrapper.
+     */
+    readonly className?: string;
+
+    /**
+     * Badge's label.
+     */
+    readonly label: string;
+
+    /**
+     * An optional css theme to be injected.
+     */
+    readonly theme?: BadgeTheme;
+}
+
+class Badge extends PureComponent<BadgeProps> {
+    public render(): JSX.Element {
+        const {
+            className,
+            theme,
+            label,
+            ...rest
+        } = this.props;
+        const finalClassName = mergeClassNames(theme!.badge, className);
+
+        return (
+            <div {...rest} className={finalClassName}>{label}</div>
+        );
+    }
+}
+
+export default Badge;

packages/react-ui-components/src/Badge/index.js

@@ -1,6 +1,6 @@
 import {themr} from '@friendsofreactjs/react-css-themr';
-import identifiers from './../identifiers';
+import identifiers from '../identifiers';
 import style from './style.css';
-import Badge from './badge.js';
+import Badge from './badge';
 
 export default themr(identifiers.badge, style)(Badge);

packages/react-ui-components/src/Badge/index.spec.js

@@ -1,4 +1,4 @@
-import Badge from './index.js';
+import Badge from '.';
 
 describe('<Badge/> (entry point)', () => {
     it('should export a Component.', () => {

packages/react-ui-components/src/Badge/index.story.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {withKnobs, text} from '@storybook/addon-knobs';
-import {StoryWrapper} from './../_lib/storyUtils.js';
-import Badge from './index.js';
+import {StoryWrapper} from './../_lib/storyUtils';
+import Badge from '.';
 
 storiesOf('Badge', module)
     .addDecorator(withKnobs)

packages/react-ui-components/src/Bar/bar.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 import toJson from 'enzyme-to-json';
-import Bar from './bar.js';
+import Bar from './bar';
 
 describe('<Bar/>', () => {
     let props;

packages/react-ui-components/src/Bar/bar.tsx

@@ -0,0 +1,59 @@
+import mergeClassNames from 'classnames';
+import React, {PureComponent} from 'react';
+
+type BarPosition = 'top' | 'bottom';
+
+interface BarTheme {
+    readonly 'bar': string;
+    readonly 'bar--top': string;
+    readonly 'bar--bottom': string;
+}
+
+interface BarProps {
+    /**
+     * This prop controls the vertical positioning of the Bar.
+     */
+    readonly position: BarPosition;
+
+    /**
+     * An optional css theme to be injected.
+     */
+    readonly theme?: BarTheme;
+
+    /**
+     * An optional `className` to attach to the wrapper.
+     */
+    readonly className?: string;
+
+    /**
+     * The contents to be rendered within the `Bar`.
+     */
+    readonly children: React.ReactNode;
+}
+
+class Bar extends PureComponent<BarProps> {
+    public render(): JSX.Element {
+        const {position, className, theme, children, ...rest} = this.props;
+        const finalClassName = mergeClassNames(
+            className,
+            theme!.bar,
+            {
+                [theme!['bar--top']]: position === 'top',
+                [theme!['bar--bottom']]: position === 'bottom'
+            }
+        );
+
+        // TODO:
+        //  The prop 'rest' is empty here. I suppose it contains all the attributes that are not part of the Badge Api/Interface.
+        //  Consider enxtending Bagde with React.HTMLAttributes<HTMLDivElement> like we did in the Button component.
+        //  It also enables autocomplete for the whole div Api.
+        //  Consider this for the other components.
+        return (
+            <div className={finalClassName} {...rest}>
+                {children}
+            </div>
+        );
+    }
+}
+
+export default Bar;

packages/react-ui-components/src/Bar/index.js

@@ -1,6 +1,6 @@
 import {themr} from '@friendsofreactjs/react-css-themr';
-import identifiers from './../identifiers';
+import identifiers from '../identifiers';
 import style from './style.css';
-import Bar from './bar.js';
+import Bar from './bar';
 
 export default themr(identifiers.bar, style)(Bar);

packages/react-ui-components/src/Bar/index.spec.js

@@ -1,4 +1,4 @@
-import Bar from './index.js';
+import Bar from '.';
 
 describe('<Bar/> (entry point)', () => {
     it('should export a Component.', () => {

packages/react-ui-components/src/Bar/index.story.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {withKnobs, select} from '@storybook/addon-knobs';
-import {StoryWrapper} from './../_lib/storyUtils.js';
-import Bar from './index.js';
+import {StoryWrapper} from './../_lib/storyUtils';
+import Bar from '.';
 
 storiesOf('Bar', module)
     .addDecorator(withKnobs)

packages/react-ui-components/src/Button/__snapshots__/button.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`<Button/> should render correctly. 1`] = `
 <button
   className="cleanClassName cleanHoverClassName foo className"
+  disabled={false}
   onClick={[Function]}
   role="button"
   type="button"