Merge pull request #647 from rvsia/antTS

Hyperkid123 · web-flow · commit 65f40efcc0ff · 2020-07-15T10:00:54.000+02:00
fix(ANT): add types for components
diff --git a/packages/ant-component-mapper/package.json b/packages/ant-component-mapper/package.json
@@ -4,15 +4,17 @@
   "description": "Component mapper for Ant Design component mapper form data-driven-forms.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
+  "typings": "dist/cjs/index.d.ts",
   "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",
     "vendor": "webpack --env vendor --config ./config/webpack.config.js",
-    "release": "semantic-release"
+    "release": "semantic-release",
+    "build:typings": "node ../../scripts/copy-files.js"
   },
   "files": [
     "dist/"
diff --git a/packages/ant-component-mapper/src/files/checkbox.d.ts b/packages/ant-component-mapper/src/files/checkbox.d.ts
@@ -0,0 +1,20 @@
+import { AnyObject } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+import { FormGroupProps } from "./form-group";
+
+import { CheckboxProps as AndCheckboxProps } from 'antd/es/checkbox/Checkbox';
+
+export interface CheckboxOption extends AnyObject {
+  value?: any;
+  label: ReactNode;
+}
+
+interface InternalCheckboxProps extends AndCheckboxProps {
+  options?: CheckboxOption[];
+}
+
+export type CheckboxProps = InternalCheckboxProps & FormGroupProps;
+
+declare const Checkbox: React.ComponentType<CheckboxProps>;
+
+export default Checkbox;
diff --git a/packages/ant-component-mapper/src/files/component-mapper.d.ts b/packages/ant-component-mapper/src/files/component-mapper.d.ts
@@ -0,0 +1,43 @@
+import { ComponentTypes, ComponentMapper } 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;
+  FueldArray: React.ComponentType;
+  Tabs: React.ComponentType;
+}
+
+interface componentMapper extends 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;
diff --git a/packages/ant-component-mapper/src/files/date-picker.d.ts b/packages/ant-component-mapper/src/files/date-picker.d.ts
@@ -0,0 +1,9 @@
+import { FormGroupProps } from "./form-group";
+
+import { DatePickerProps as AntDatePickerProps } from 'antd/es/date-picker/index';
+
+export type DatePickerProps = AntDatePickerProps & FormGroupProps;
+
+declare const DatePicker: React.ComponentType<DatePickerProps>;
+
+export default DatePicker;
diff --git a/packages/ant-component-mapper/src/files/dual-list-select.d.ts b/packages/ant-component-mapper/src/files/dual-list-select.d.ts
@@ -0,0 +1,20 @@
+import { FormGroupProps } from "./form-group";
+import { AnyObject } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+
+import { TransferProps } from "antd/es/transfer";
+
+export interface DualListSelectValue extends AnyObject {
+  value: any;
+  label: ReactNode;
+}
+
+interface InternalDualListSelectProps extends TransferProps {
+  options: DualListSelectValue[];
+}
+
+export type DualListSelectProps = InternalDualListSelectProps & FormGroupProps;
+
+declare const DualListSelect: React.ComponentType<DualListSelectProps>;
+
+export default DualListSelect;
diff --git a/packages/ant-component-mapper/src/files/field-array.d.ts b/packages/ant-component-mapper/src/files/field-array.d.ts
@@ -0,0 +1,41 @@
+import { FieldArrayField } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+import { RowProps } from "antd/lib/row";
+import { ButtonProps } from "antd/es/button";
+import { TextProps } from "antd/lib/typography/Text";
+import { ColProps } from "antd/lib/col";
+import { TitleProps } from "antd/lib/typography/Title";
+import { SpaceProps } from "antd/lib/space";
+
+export interface FieldArrayButtonLabels {
+  add?: ReactNode;
+  remove?: ReactNode;
+}
+
+export interface FieldArrayProps {
+  fields: FieldArrayField[];
+  defaultItem?: any;
+  minItems?: number;
+  maxItems?: number;
+  noItemsMessage?: ReactNode;
+  buttonLabels?: FieldArrayButtonLabels;
+  ArrayItemProps?: RowProps;
+  FieldsContainerProps?: ColProps;
+  RemoveContainerProps?: ColProps;
+  RemoveButtonProps?: ButtonProps;
+  FieldArrayRowProps?: RowProps;
+  FieldArrayRowCol?: ColProps;
+  FieldArrayHeaderProps?: RowProps;
+  FieldArrayLabelProps?: TitleProps;
+  FieldArrayButtonsProps?: SpaceProps;
+  UndoButtonProps?: ButtonProps;
+  RedoButtonProps?: ButtonProps;
+  AddButtonProps?: ButtonProps;
+  FieldArrayDescriptionProps?: TextProps;
+  NoItemsMessageProps?: TextProps;
+  ErrorMessageProps?: TextProps;
+}
+
+declare const FieldArray: React.ComponentType<FieldArrayProps>;
+
+export default FieldArray;
diff --git a/packages/ant-component-mapper/src/files/form-group.d.ts b/packages/ant-component-mapper/src/files/form-group.d.ts
@@ -0,0 +1,20 @@
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+
+import { FormItemProps } from 'antd/es/form/FormItem';
+
+export interface CommonProps {
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    description?: ReactNode;
+    validateOnMount?: boolean;
+    FormItemProps?: FormItemProps;
+    placeholder?: ReactNode;
+}
+
+export type FormGroupProps = CommonProps & UseFieldApiComponentConfig;
+
+export default FormGroupProps;
diff --git a/packages/ant-component-mapper/src/files/form-template.d.ts b/packages/ant-component-mapper/src/files/form-template.d.ts
@@ -0,0 +1,10 @@
+import { FormTemplateRenderProps, AnyObject } from "@data-driven-forms/react-form-renderer";
+
+export interface FormTemplateProps extends FormTemplateRenderProps {
+  formWrapperProps?: AnyObject;
+  layout?: string;
+}
+
+declare const FormTemplate: React.ComponentType<FormTemplateProps>;
+
+export default FormTemplate;
diff --git a/packages/ant-component-mapper/src/files/plain-text.d.ts b/packages/ant-component-mapper/src/files/plain-text.d.ts
@@ -0,0 +1,12 @@
+import { TypographyProps } from 'antd/es/typography/Typography';
+import { ParagraphProps } from 'antd/es/typography/Paragraph';
+
+export interface PlainTextProps extends ParagraphProps {
+  label: string;
+  name: string;
+  TypographyProps?: TypographyProps;
+}
+
+declare const PlainText: React.ComponentType<PlainTextProps>;
+
+export default PlainText;
diff --git a/packages/ant-component-mapper/src/files/plain-text.js b/packages/ant-component-mapper/src/files/plain-text.js
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 
 const { Paragraph } = Typography;
 
-const PlainText = ({ label, name, ...rest }) => (
-  <Typography>
+const PlainText = ({ label, name, TypographyProps, ...rest }) => (
+  <Typography {...TypographyProps}>
     {label.split('\n').map((paragraph, index) => (
       <Paragraph key={`${index}-${name}`} {...rest}>
         {paragraph}
@@ -16,7 +16,8 @@ const PlainText = ({ label, name, ...rest }) => (
 
 PlainText.propTypes = {
   label: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired
+  name: PropTypes.string.isRequired,
+  TypographyProps: PropTypes.object
 };
 
 export default PlainText;
diff --git a/packages/ant-component-mapper/src/files/radio.d.ts b/packages/ant-component-mapper/src/files/radio.d.ts
@@ -0,0 +1,20 @@
+import { FormGroupProps } from "./form-group";
+import { AnyObject } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+
+import { RadioProps as AntRadioProps } from 'antd/es/radio/interface';
+
+export interface RadioOption extends AnyObject {
+    value: any;
+    label: ReactNode;
+}
+
+interface InternalRadioProps extends AntRadioProps {
+    options: RadioOption[];
+}
+
+export type RadioProps = InternalRadioProps & FormGroupProps;
+
+declare const Radio: React.ComponentType<RadioProps>;
+
+export default Radio;
diff --git a/packages/ant-component-mapper/src/files/radio.js b/packages/ant-component-mapper/src/files/radio.js
@@ -56,7 +56,6 @@ Radio.propTypes = {
   label: PropTypes.node.isRequired,
   isDisabled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
-  children: PropTypes.any,
   description: PropTypes.node,
   FormItemProps: PropTypes.object
 };
diff --git a/packages/ant-component-mapper/src/files/select.d.ts b/packages/ant-component-mapper/src/files/select.d.ts
@@ -0,0 +1,22 @@
+import { FormGroupProps } from "./form-group";
+import { AnyObject } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+
+export interface SelectOption extends AnyObject {
+  value?: any;
+  label: ReactNode;
+}
+
+interface InternalSelectProps {
+  options: SelectOption[];
+  isSearchable?: boolean;
+  isMulti?: boolean;
+  placeholder?: ReactNode;
+  isClearable?: boolean;
+}
+
+export type SelectProps = InternalSelectProps & FormGroupProps;
+
+declare const Select: React.ComponentType<SelectProps>;
+
+export default Select;
diff --git a/packages/ant-component-mapper/src/files/slider.d.ts b/packages/ant-component-mapper/src/files/slider.d.ts
@@ -0,0 +1,9 @@
+import { FormGroupProps } from "./form-group";
+
+import { SliderProps as AntSliderProps } from 'antd/es/slider/index';
+
+export type SliderProps = AntSliderProps & FormGroupProps;
+
+declare const Slider: React.ComponentType<SliderProps>;
+
+export default Slider;
diff --git a/packages/ant-component-mapper/src/files/sub-form.d.ts b/packages/ant-component-mapper/src/files/sub-form.d.ts
@@ -0,0 +1,26 @@
+import { Field } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+
+import { RowProps } from "antd/lib/row";
+import { ColProps } from "antd/lib/col";
+import { TitleProps } from "antd/lib/typography/Title";
+import { ParagraphProps } from "antd/es/typography/Paragraph";
+
+export interface SubFormProps {
+  fields: Field | Field[];
+  title?: ReactNode;
+  description?: ReactNode;
+  TitleRowProps?: RowProps;
+  TitleColProps?: ColProps;
+  TitleProps?: TitleProps;
+  DescriptionColProps?: ColProps;
+  DescriptionProps?: ParagraphProps;
+  DescriptionRowProps?: RowProps;
+  RowProps?: RowProps;
+  ColProps?: ColProps;
+  name: string;
+}
+
+declare const SubForm: React.ComponentType<SubFormProps>;
+
+export default SubForm;
diff --git a/packages/ant-component-mapper/src/files/switch.d.ts b/packages/ant-component-mapper/src/files/switch.d.ts
@@ -0,0 +1,14 @@
+import { FormGroupProps } from "./form-group";
+import { SwitchProps as AntSwitchProps } from 'antd/lib/switch';
+import { ReactNode } from "react";
+
+interface InternalSwitchProps extends AntSwitchProps { 
+    onText?: ReactNode;
+    offText?: ReactNode;
+}
+
+export type SwitchProps = InternalSwitchProps & FormGroupProps;
+
+declare const Switch: React.ComponentType<SwitchProps>;
+
+export default Switch;
diff --git a/packages/ant-component-mapper/src/files/tabs.d.ts b/packages/ant-component-mapper/src/files/tabs.d.ts
@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { Field } from "@data-driven-forms/react-form-renderer";
+
+import { TabsProps as AntTabsProps, TabPaneProps } from 'antd/lib/tabs';
+
+export interface TabField extends TabPaneProps {
+  name: string;
+  title?: ReactNode;
+  fields: Field[];
+}
+
+export interface TabsProps extends AntTabsProps {
+  fields: TabField[];
+}
+
+declare const Tabs: React.ComponentType<TabsProps>;
+
+export default Tabs;
diff --git a/packages/ant-component-mapper/src/files/text-field.d.ts b/packages/ant-component-mapper/src/files/text-field.d.ts
@@ -0,0 +1,8 @@
+import { FormGroupProps } from "./form-group";
+import { InputProps } from "antd/lib/input";
+
+export type TextFieldProps = InputProps & FormGroupProps;
+
+declare const TextField: React.ComponentType<TextFieldProps>;
+
+export default TextField;
diff --git a/packages/ant-component-mapper/src/files/textarea.d.ts b/packages/ant-component-mapper/src/files/textarea.d.ts
@@ -0,0 +1,9 @@
+import { FormGroupProps } from "./form-group";
+
+import { TextAreaProps } from "antd/lib/input";
+
+export type TextareaProps = TextAreaProps & FormGroupProps;
+
+declare const Textarea: React.ComponentType<TextareaProps>;
+
+export default Textarea;
diff --git a/packages/ant-component-mapper/src/files/time-picker.d.ts b/packages/ant-component-mapper/src/files/time-picker.d.ts
@@ -0,0 +1,9 @@
+import { FormGroupProps } from "./form-group";
+
+import { TimePickerProps as AntTimePickerProps } from 'antd/es/time-picker/index';
+
+export type TimePickerProps = AntTimePickerProps & FormGroupProps;
+
+declare const TimePicker: React.ComponentType<TimePickerProps>;
+
+export default TimePicker;
diff --git a/packages/ant-component-mapper/src/files/wizard.d.ts b/packages/ant-component-mapper/src/files/wizard.d.ts
diff --git a/packages/ant-component-mapper/tsconfig.json b/packages/ant-component-mapper/tsconfig.json
