Merge pull request #553 from data-driven-forms/merge-ts-beta

Merge ts beta

Author: rvsia

babel.config.js

@@ -7,7 +7,7 @@ const camelToSnake = (string) => {
   };
 
 module.exports = {
-    presets: ["@babel/preset-env", "@babel/preset-react"],
+    presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
     plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-syntax-dynamic-import", "lodash", "@babel/plugin-proposal-class-properties" ],
     env: {
         cjs: {

package.json

@@ -8,7 +8,7 @@
   "private": true,
   "scripts": {
     "bootstrap": "lerna bootstrap",
-    "build": "lerna run build --ignore @data-driven-forms/react-renderer-demo",
+    "build": "lerna run build --concurrency 1 --ignore @data-driven-forms/react-renderer-demo",
     "vendor": "lerna run vendor",
     "test": "jest --coverage",
     "test:ci": "jest --coverage --runInBand",
@@ -17,6 +17,7 @@
     "codecov": "codecov",
     "start-demo": "lerna run start --scope=@data-driven-forms/react-render-demo",
     "lint": "yarn eslint .",
+    "lint:ts": "tslint -c ./tslint.json 'packages/**/*.d.ts'",
     "generate-template": "node ./scripts/generate-mapper.js"
   },
   "workspaces": [
@@ -40,14 +41,20 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/preset-typescript": "^7.9.0",
     "@khala/commit-analyzer-wildcard": "^2.4.1",
     "@khala/npm-release-monorepo": "^2.4.1",
     "@khala/wildcard-release-notes": "^2.4.1",
+    "@rollup/plugin-typescript": "^4.1.2",
     "@semantic-release/git": "^8.0.0",
     "@semantic-release/github": "^5.5.5",
     "@semantic-release/npm": "^5.1.4",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "@typescript-eslint/eslint-plugin": "^3.0.0",
     "atob-lite": "^2.0.0",
     "babel-plugin-transform-imports": "^2.0.0",
+    "dtslint": "^3.6.4",
     "eslint": "^6.8.0",
     "eslint-config-i-am-meticulous": "^12.0.0",
     "eslint-config-prettier": "^6.10.0",
@@ -68,7 +75,13 @@
     "prettier": "^1.19.1",
     "replace-in-file": "^6.0.0",
     "semantic-release": "^16.0.4",
-    "terser-webpack-plugin": "^1.3.0"
+    "source-map-loader": "^0.2.4",
+    "strip-ansi": "^6.0.0",
+    "terser-webpack-plugin": "^1.3.0",
+    "ts-loader": "^7.0.5",
+    "tslint": "^6.1.2",
+    "tslint-config-prettier": "^1.18.0",
+    "typescript": "^3.9.3"
   },
   "release": {
     "monorepo": "./packages",

packages/blueprint-component-mapper/config/webpack.config.js

@@ -4,13 +4,20 @@ const resolve = require('path').resolve;
 const merge = require('webpack-merge');
 
 const commonConfig = {
+  devtool: "source-map",
   module: {
     rules: [{
       test: /\.(js|jsx)$/,
       exclude: /node_modules/,
       use: {
         loader: 'babel-loader',
       },
+    }, {
+      test: /\.(ts|tsx)$/,
+      exclude: /node_modules/,
+      use: {
+        loader: 'ts-loader',
+      },
     }, {
       test: /\.(sa|sc|c)ss$/,
       use: [ 'style-loader', 'css-loader', 'sass-loader', 'resolve-url-loader' ],

packages/blueprint-component-mapper/package.json

@@ -4,16 +4,18 @@
   "description": "Blueprint component mapper for data-driven-forms.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
+  "typings": "dist/cjs/index.d.ts",
   "files": [
     "dist/"
   ],
   "license": "Apache-2.0",
   "scripts": {
     "start": "webpack-dev-server --env dev --config ./config/webpack.config.js --open --hot",
-    "build": "yarn build:cjs && yarn build:esm && yarn build:umd",
+    "build": "yarn build:cjs && yarn build:esm && yarn build:umd && yarn build:typings",
     "build:cjs": "BABEL_ENV=cjs rollup -c ./rollup.config.js --format=cjs --environment FORMAT:cjs",
     "build:esm": "BABEL_ENV=esm rollup -c ./rollup.config.js --format=esm --environment FORMAT:esm",
     "build:umd": "rollup -c ./rollup.config.js --format=umd --environment FORMAT:umd",
+    "build:typings": "node ../../scripts/copy-files.js",
     "release": "semantic-release"
   },
   "repository": "[email protected]:data-driven-forms/react-forms.git",
@@ -31,7 +33,6 @@
     "@blueprintjs/core": "^3.26.1",
     "@blueprintjs/datetime": "^3.17.0",
     "@blueprintjs/select": "^3.12.3",
-    "@data-driven-forms/react-form-renderer": "*",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "9.x",
     "babel-jest": "^23.6.0",

packages/blueprint-component-mapper/src/files/checkbox.d.ts

@@ -0,0 +1,19 @@
+import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+import { ICheckboxProps } from '@blueprintjs/core';
+import { FormGroupProps } from "./form-group";
+
+export interface CheckboxOption extends AnyObject {
+  value?: any;
+  label: ReactNode;
+}
+
+interface InternalCheckboxProps extends ICheckboxProps {
+  options?: CheckboxOption[];
+}
+
+export type CheckboxProps = InternalCheckboxProps & FormGroupProps &  UseFieldApiComponentConfig;
+
+declare const Checkbox: React.ComponentType<CheckboxProps>;
+
+export default Checkbox;

packages/blueprint-component-mapper/src/files/component-mapper.d.ts

@@ -0,0 +1,41 @@
+import { ComponentTypes } from '@data-driven-forms/react-form-renderer';
+
+interface Components  {
+  TextField: React.ComponentType;
+  Textarea: React.ComponentType;
+  Select: React.ComponentType;
+  Checkbox: React.ComponentType;
+  Radio: React.ComponentType;
+  Switch: React.ComponentType;
+  DatePicker: React.ComponentType;
+  TimePicker: React.ComponentType;
+  PlainText: React.ComponentType;
+  SubForm: React.ComponentType;
+  Wizard: React.ComponentType;
+  DualListSelect: React.ComponentType;
+  Slider: React.ComponentType;
+}
+
+interface componentMapper  {
+  [ComponentTypes.TEXT_FIELD]: React.ComponentType;
+  [ComponentTypes.TEXTAREA]: React.ComponentType;
+  [ComponentTypes.SELECT]: React.ComponentType;
+  [ComponentTypes.CHECKBOX]: React.ComponentType;
+  [ComponentTypes.SUB_FORM]: React.ComponentType;
+  [ComponentTypes.RADIO]: React.ComponentType;
+  [ComponentTypes.TABS]: React.ComponentType;
+  [ComponentTypes.DATE_PICKER]: React.ComponentType;
+  [ComponentTypes.TIME_PICKER]: React.ComponentType;
+  [ComponentTypes.SWITCH]: React.ComponentType;
+  [ComponentTypes.PLAIN_TEXT]: React.ComponentType;
+  [ComponentTypes.WIZARD]: React.ComponentType;
+  [ComponentTypes.FIELD_ARRAY]: React.ComponentType;
+  [ComponentTypes.DUAL_LIST_SELECT]: React.ComponentType;
+  [ComponentTypes.SLIDER]: React.ComponentType;
+}
+
+declare const componentMapper: componentMapper;
+
+export const components: Components;
+
+export default componentMapper;

packages/blueprint-component-mapper/src/files/component-mapper.js

@@ -46,5 +46,6 @@ export const components = {
   Switch,
   PlainText,
   DualListSelect,
-  Slider
+  Slider,
+  Wizard
 };

packages/blueprint-component-mapper/src/files/date-picker.d.ts

@@ -0,0 +1,21 @@
+import { FormGroupProps } from "./form-group";
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+import { IDatePickerProps } from '@blueprintjs/datetime';
+import { IPopoverProps, IButtonProps } from "@blueprintjs/core";
+
+export interface DatePickerValueRenderer {
+  (value?: string | Date): string;
+}
+
+interface InternalDatePickerProps extends IDatePickerProps {
+  disabled?: boolean;
+  valueRenderer?: DatePickerValueRenderer;
+  PopoverProps?: IPopoverProps;
+  ButtonProps: IButtonProps;
+}
+
+export type DatePickerProps = InternalDatePickerProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const DatePicker: React.ComponentType<DatePickerProps>;
+
+export default DatePicker;

packages/blueprint-component-mapper/src/files/date-picker.js

@@ -7,7 +7,7 @@ import { DatePicker as BDatePicker } from '@blueprintjs/datetime';
 import FormGroupWrapper from './form-group';
 import propsCatcher from '../common/props-catcher';
 
-const DatePicker = ({ input, className, disabled, placeholder, valueRenderer, PopoverProps, ButtonProps, ...props }) => (
+const DatePicker = ({ input, disabled, placeholder, valueRenderer, PopoverProps, ButtonProps, ...props }) => (
   <Popover disabled={disabled} {...PopoverProps}>
     <Button text={input.value ? valueRenderer(input.value) : placeholder} disabled={disabled} {...ButtonProps} />
     <BDatePicker id={input.name} {...propsCatcher(props)} {...input} value={input.value || null} />
@@ -21,7 +21,6 @@ DatePicker.defaultProps = {
 
 DatePicker.propTypes = {
   input: PropTypes.object,
-  className: PropTypes.string,
   disabled: PropTypes.bool,
   placeholder: PropTypes.node,
   valueRenderer: PropTypes.func,

packages/blueprint-component-mapper/src/files/dual-list-select.d.ts

@@ -0,0 +1,53 @@
+import { FormGroupProps } from "./form-group";
+import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+import { IButtonGroupProps, IButtonProps, IControlGroupProps, IInputGroupProps, IMenuProps, IMenuItemProps } from "@blueprintjs/core";
+
+export interface DualListSelectValue extends AnyObject {
+  value?: any;
+  label: ReactNode;
+}
+
+interface InternalDualListSelectProps {
+  leftTitle?: ReactNode;
+  rightTitle?: ReactNode;
+  moveLeftTitle?: ReactNode;
+  moveRightTitle?: ReactNode;
+  allToLeft?: boolean;
+  allToRight?: boolean;
+  validateOnMount?: boolean;
+  moveAllLeftTitle?: ReactNode;
+  moveAllRightTitle?: ReactNode;
+  noValueTitle?: ReactNode;
+  noOptionsTitle?: ReactNode;
+  filterOptionsTitle?: ReactNode;
+  filterValueTitle?: ReactNode;
+  filterValueText?: ReactNode;
+  filterOptionsText?: ReactNode;
+  leftValues?: DualListSelectValue[];
+  rightValues?: DualListSelectValue[];
+  WrapperProps?: React.HTMLProps<HTMLDivElement>;
+  LeftWrapperProps?: React.HTMLProps<HTMLDivElement>;
+  RightWrapperProps?: React.HTMLProps<HTMLDivElement>;
+  ButtonGroupProps?: IButtonGroupProps;
+  ToRightButtonProps?: IButtonProps;
+  AllToRightButtonProps?: IButtonProps;
+  AllToLeftButtonProps?: IButtonProps;
+  ToLeftButtonProps?: IButtonProps;
+  LeftControlGroupProps?: IControlGroupProps;
+  LeftInputGroupProps?: IInputGroupProps;
+  LeftButtonProps?: IButtonProps;
+  RightControlGroupProps?: IControlGroupProps;
+  RightInputGroupProps?: IInputGroupProps;
+  RightButtonProps?: IButtonProps;
+  LeftMenuProps?: IMenuProps;
+  LeftMenuItemProps?: IMenuItemProps;
+  RightMenuProps?: IMenuProps;
+  RightMenuItemProps?: IMenuItemProps;
+}
+
+export type DualListSelectProps = InternalDualListSelectProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const DualListSelect: React.ComponentType<DualListSelectProps>;
+
+export default DualListSelect;