feat(suir): added typings to components

Hyperkid123 · Hyperkid123 · commit e2328dc81851 · 2020-06-16T11:16:24.000+02:00
diff --git a/packages/suir-component-mapper/src/files/checkbox.d.ts b/packages/suir-component-mapper/src/files/checkbox.d.ts
@@ -0,0 +1,22 @@
+import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
+import { CheckboxProps as SuirCheckboxProps, FormFieldProps, HeaderProps } from 'semantic-ui-react';
+import { ReactNode } from "react";
+import { FormFieldGridProps, HelperTextProps } from "./form-field-grid";
+import { CommonFieldProps } from "./common-field-props";
+
+export interface CheckboxOption extends AnyObject {
+  label: ReactNode;
+  value?: any;
+}
+
+export interface CheckboxProps extends SuirCheckboxProps {
+  options?: CheckboxOption[];
+  /** Sub components customization API */
+  FormFieldProps?: FormFieldProps;
+  HeaderProps?: HeaderProps;
+  OptionsListProps?: React.HTMLProps<HTMLDivElement>;
+}
+
+declare const Checkbox: React.ComponentType<CheckboxProps & CommonFieldProps & UseFieldApiComponentConfig>;
+
+export default Checkbox;
diff --git a/packages/suir-component-mapper/src/files/common-field-props.d.ts b/packages/suir-component-mapper/src/files/common-field-props.d.ts
@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { FormFieldGridProps, HelperTextProps } from "./form-field-grid";
+
+export interface CommonFieldProps {
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+  isRequired?: boolean;
+  label?: ReactNode;
+  helperText?: ReactNode;
+  description?: ReactNode;
+  validateOnMount?: boolean;
+  id?: string;
+  /** Sub components customization API */
+  FormFieldGridProps?: FormFieldGridProps;
+  HelperTextProps?: HelperTextProps;
+}
diff --git a/packages/suir-component-mapper/src/files/component-mapper.d.ts b/packages/suir-component-mapper/src/files/component-mapper.d.ts
@@ -0,0 +1,47 @@
+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;
+}
+
+interface RawComponents {
+  RawSelect: React.ComponentType;
+}
+
+export const rawComponents: RawComponents;
+
+declare const componentMapper: componentMapper;
+
+export const components: Components;
+
+export default componentMapper;
diff --git a/packages/suir-component-mapper/src/files/date-picker.d.ts b/packages/suir-component-mapper/src/files/date-picker.d.ts
@@ -0,0 +1,8 @@
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+import { CommonFieldProps } from "./common-field-props";
+
+export interface DatePickerProps {}
+
+declare const DatePicker: React.ComponentType<DatePickerProps & CommonFieldProps & UseFieldApiComponentConfig>;
+
+export default DatePicker;
diff --git a/packages/suir-component-mapper/src/files/date-picker.js b/packages/suir-component-mapper/src/files/date-picker.js
@@ -53,7 +53,6 @@ DatePicker.propTypes = {
   label: PropTypes.node,
   helperText: PropTypes.node,
   validateOnMount: PropTypes.bool,
-  locale: PropTypes.string,
   description: PropTypes.node,
   /** Sub components customization API */
   FormFieldGridProps: PropTypes.object,
diff --git a/packages/suir-component-mapper/src/files/dual-list-select.d.ts b/packages/suir-component-mapper/src/files/dual-list-select.d.ts
@@ -0,0 +1,48 @@
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+import { CommonFieldProps } from "./common-field-props";
+import { ReactNode } from "react";
+import { SegmentProps, FormFieldProps, InputProps, GridColumnProps, ButtonProps, HeaderProps } from "semantic-ui-react";
+
+export interface DualListSelectOption {
+  label: ReactNode;
+  value?: any;
+}
+
+export interface DualListSelectOptionProps extends React.HTMLProps<HTMLDivElement> {
+  selectedClassName?: string;
+}
+
+export interface DualListSelectProps {
+  leftTitle?: ReactNode;
+  rightTitle?: ReactNode;
+  moveLeftTitle?: ReactNode;
+  moveRightTitle?: ReactNode;
+  allToLeft?: boolean;
+  allToRight?: boolean;
+  moveAllLeftTitle?: ReactNode;
+  moveAllRightTitle?: ReactNode;
+  noValueTitle?: ReactNode;
+  noOptionsTitle?: ReactNode;
+  filterOptionsTitle?: ReactNode;
+  filterValueTitle?: ReactNode;
+  filterValueText?: ReactNode;
+  filterOptionsText?: ReactNode;
+  leftValues?: DualListSelectOption[];
+  rightValues?: DualListSelectOption[];
+  /** Sub components customization API */
+  OptionsListProps?: SegmentProps;
+  OptionProps?: DualListSelectOptionProps;
+  LabelProps?: FormFieldProps;
+  ToolbarProps?: InputProps;
+  ButtonGridProps?: GridColumnProps;
+  RightButtonProps?: ButtonProps;
+  DoubleRightButtonProps?: ButtonProps;
+  LeftButtonProps?: ButtonProps;
+  DoubleLeftButtonProps?: ButtonProps;
+  OptionsHeaderProps?: HeaderProps;
+  ValuesHeaderProps?: HeaderProps;
+}
+
+declare const DualListSelect: React.ComponentType<DualListSelectProps & CommonFieldProps & UseFieldApiComponentConfig>;
+
+export default DualListSelect;
diff --git a/packages/suir-component-mapper/src/files/field-array.d.ts b/packages/suir-component-mapper/src/files/field-array.d.ts
@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+import { FieldArrayField } from "@data-driven-forms/react-form-renderer";
+import { ButtonGroupProps, ButtonProps, HeaderProps } from "semantic-ui-react";
+
+export interface FieldArrayButtonLabels {
+  add?: ReactNode;
+  remove?: ReactNode;
+}
+
+export interface FieldArrayProps {
+  label?: ReactNode;
+  description?: ReactNode;
+  fields: FieldArrayField[];
+  defaultItem?: any;
+  minItems?: number;
+  maxItems?: number;
+  noItemsMessage?: ReactNode;
+  buttonLabels?: FieldArrayButtonLabels;
+  /** Sub components customization API */
+  FieldArrayGridProps?: React.HTMLProps<HTMLDivElement>;
+  FieldArrayHeaderProps?: React.HTMLProps<HTMLDivElement>;
+  FieldArrayButtonGridProps?: React.HTMLProps<HTMLDivElement>;
+  ButtonGroupProps?: ButtonGroupProps;
+  UndoButtonProps?: ButtonProps;
+  RedoButtonProps?: ButtonProps;
+  AddButtonProps?: ButtonProps;
+  DescriptionProps?: HeaderProps;
+  ArrayItemsGridProps?: React.HTMLProps<HTMLDivElement>;
+  NoItemsProps?: React.HTMLProps<HTMLParagraphElement>;
+  RemoveButtonProps?: ButtonProps;
+  ArrayItemGridProps?: React.HTMLProps<HTMLDivElement>;
+  ArrayItemFieldsGridProps?: React.HTMLProps<HTMLDivElement>;
+}
+
+declare const FieldArray: React.ComponentType<FieldArrayProps>;
+
+export default FieldArray;
diff --git a/packages/suir-component-mapper/src/files/form-field-grid.d.ts b/packages/suir-component-mapper/src/files/form-field-grid.d.ts
@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+export interface HelperTextProps {
+  className?: string;
+}
+
+export interface FormFieldGridProps {
+  className?: string;
+  helperText?: ReactNode;
+  HelperTextProps?: HelperTextProps;
+}
+
+declare const FormFieldGrid: React.ComponentType<FormFieldGridProps>;
+
+export default FormFieldGrid;
diff --git a/packages/suir-component-mapper/src/files/form-template.d.ts b/packages/suir-component-mapper/src/files/form-template.d.ts
@@ -0,0 +1,14 @@
+import { FormTemplateRenderProps } from "@data-driven-forms/react-form-renderer";
+
+export interface FormTemplateProps extends FormTemplateRenderProps {
+  FormWrapper?: React.ComponentType;
+  Button?: React.ComponentType;
+  ButtonGroup?: React.ComponentType;
+  Title?: React.ComponentType;
+  Description?: React.ComponentType;
+  FormWrapperProps?: React.HTMLAttributes<HTMLFormElement>;
+}
+
+declare const FormTemplate: React.ComponentType<FormTemplateProps>;
+
+export default FormTemplate;
diff --git a/packages/suir-component-mapper/src/files/plain-text.d.ts b/packages/suir-component-mapper/src/files/plain-text.d.ts
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+export interface PlainTextProps {
+  label: ReactNode;
+  name: string;
+  variant?: 'p'|'span'|'strong'|'b'|'cite'|'caption'|'code'|'em'|'i'|'h1'|'h2'|'h3'|'h4'|'h5'|'h6'|'h6'|'div'|'label'|'pre'|'q'|'samp'|'small'|'sub'|'sup';
+}
+
+declare const PlainText: React.ComponentType<PlainTextProps>;
+
+export default PlainText;
diff --git a/packages/suir-component-mapper/src/files/plain-text.js b/packages/suir-component-mapper/src/files/plain-text.js
@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 import validTextFields from '@data-driven-forms/common/src/utils/valid-text-fields';
 
 const PlainText = ({ variant, label, name, ...rest }) =>
-  label.split('\n').map((paragraph, index) => React.createElement(variant, { key: `${name}-${index}`, ...rest }, paragraph));
+  typeof label === 'string'
+    ? label.split('\n').map((paragraph, index) => React.createElement(variant, { key: `${name}-${index}`, ...rest }, paragraph))
+    : { label };
 
 PlainText.propTypes = {
   variant: PropTypes.oneOf(validTextFields),
diff --git a/packages/suir-component-mapper/src/files/radio.d.ts b/packages/suir-component-mapper/src/files/radio.d.ts
@@ -0,0 +1,18 @@
+import { CommonFieldProps } from "./common-field-props";
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+import { FormRadioProps, FormFieldProps } from "semantic-ui-react";
+import { ReactNode } from "react";
+
+export interface RadioOption {
+  label?: ReactNode;
+  value?: any;
+}
+
+export interface RadioProps extends FormRadioProps {
+  options?: RadioOption;
+  FormFieldProps?: FormFieldProps;
+}
+
+declare const Radio: React.ComponentType<RadioProps & CommonFieldProps & UseFieldApiComponentConfig>;
+
+export default Radio;
diff --git a/packages/suir-component-mapper/src/files/select.d.ts b/packages/suir-component-mapper/src/files/select.d.ts
@@ -0,0 +1,25 @@
+import { CommonFieldProps } from "./common-field-props";
+import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
+import { StrictDropdownProps } from 'semantic-ui-react';
+import { ReactNode } from "react";
+
+export interface SelectOption extends AnyObject {
+  label: ReactNode;
+  value?: any;
+}
+
+export interface SelectProps extends StrictDropdownProps {
+  [key: string]: any;
+  options?: SelectOption[];
+  isSearchable?: boolean;
+  isMulti?: boolean;
+  isClearable?: boolean;
+  noOptionsMessage?: string;
+  classNamePrefix?: string;
+  hideSelectedOptions?: boolean;
+  closeMenuOnSelect?: boolean;
+}
+
+declare const Select: React.ComponentType<SelectProps & CommonFieldProps & UseFieldApiComponentConfig>;
+
+export default Select;
diff --git a/packages/suir-component-mapper/src/files/slider.d.ts b/packages/suir-component-mapper/src/files/slider.d.ts
@@ -0,0 +1,5 @@
+import { TextFieldProps } from "./text-field";
+
+declare const Slider: React.ComponentType<TextFieldProps>;
+
+export default Slider;
diff --git a/packages/suir-component-mapper/src/files/sub-form.d.ts b/packages/suir-component-mapper/src/files/sub-form.d.ts
@@ -0,0 +1,17 @@
+import { Field } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+import { HeaderProps } from "semantic-ui-react";
+import { FormFieldGridProps } from "./form-field-grid";
+
+export interface SubFormProps {
+  fields: Field | Field[];
+  title?: ReactNode;
+  description?: ReactNode;
+  HeaderProps?: HeaderProps;
+  DescriptionProps?: React.HTMLProps<HTMLElement>;
+  FormFieldsGridProps?: React.HTMLProps<HTMLElement>;
+}
+
+declare const SubForm: React.ComponentType<SubFormProps>;
+
+export default SubForm;
diff --git a/packages/suir-component-mapper/src/files/switch.d.ts b/packages/suir-component-mapper/src/files/switch.d.ts
@@ -0,0 +1,13 @@
+import { CommonFieldProps } from "./common-field-props";
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+import { FormFieldProps } from "semantic-ui-react";
+import { ReactNode } from "react";
+
+export interface SwitchProps extends FormFieldProps {
+  onText?: ReactNode;
+  offText?: ReactNode;
+}
+
+declare const Switch: React.ComponentType<SwitchProps & CommonFieldProps & UseFieldApiComponentConfig>;
+
+export default Switch;
diff --git a/packages/suir-component-mapper/src/files/tabs.d.ts b/packages/suir-component-mapper/src/files/tabs.d.ts
@@ -0,0 +1,12 @@
+import { Field } from "@data-driven-forms/react-form-renderer";
+import { TabProps, TabPaneProps } from "semantic-ui-react";
+
+export interface TabsProps {
+  fields: Field[];
+  TabProps: TabProps;
+  TabPaneProps: TabPaneProps;
+}
+
+declare const Tabs: React.ComponentType<TabsProps>;
+
+export default Tabs;
diff --git a/packages/suir-component-mapper/src/files/text-field.d.ts b/packages/suir-component-mapper/src/files/text-field.d.ts
@@ -0,0 +1,11 @@
+import { CommonFieldProps } from "./common-field-props";
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+import { InputProps } from "semantic-ui-react";
+
+export interface TextFieldProps extends InputProps {
+  placeholder?: string;
+}
+
+declare const TextField: React.ComponentType<TextFieldProps & CommonFieldProps & UseFieldApiComponentConfig>;
+
+export default TextField;
diff --git a/packages/suir-component-mapper/src/files/textarea.d.ts b/packages/suir-component-mapper/src/files/textarea.d.ts
@@ -0,0 +1,9 @@
+import { CommonFieldProps } from "./common-field-props";
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+import { FormTextAreaProps } from "semantic-ui-react";
+
+export interface TextareaProps extends FormTextAreaProps {}
+
+declare const Textarea: React.ComponentType<TextareaProps & CommonFieldProps & UseFieldApiComponentConfig>;
+
+export default Textarea;
diff --git a/packages/suir-component-mapper/src/files/textarea.js b/packages/suir-component-mapper/src/files/textarea.js
@@ -4,7 +4,6 @@ import { FormTextArea } from 'semantic-ui-react';
 
 import FormFieldGrid from '../common/form-field-grid';
 import { validationError } from '../common/helpers';
-import { meta, input } from '@data-driven-forms/common/src/prop-types-templates';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import FormField from '../common/form-field';
 
@@ -39,8 +38,6 @@ const Textarea = (props) => {
 };
 
 Textarea.propTypes = {
-  input,
-  meta,
   isReadOnly: PropTypes.bool,
   isDisabled: PropTypes.bool,
   placeholder: PropTypes.node,
diff --git a/packages/suir-component-mapper/src/files/time-picker.d.ts b/packages/suir-component-mapper/src/files/time-picker.d.ts
@@ -0,0 +1,8 @@
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+import { CommonFieldProps } from "./common-field-props";
+
+export interface DatePickerProps {}
+
+declare const DatePicker: React.ComponentType<DatePickerProps & CommonFieldProps & UseFieldApiComponentConfig>;
+
+export default DatePicker;
diff --git a/packages/suir-component-mapper/src/files/wizard.d.ts b/packages/suir-component-mapper/src/files/wizard.d.ts
