feat(pf): added types definitions for components

Author: Hyperkid123

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

@@ -0,0 +1,17 @@
+import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
+import { CheckboxProps as PfCheckboxProps, FormGroupProps } from '@patternfly/react-core';
+import { ReactNode } from "react";
+
+interface CheckboxOptions extends AnyObject {
+  label?: ReactNode;
+  value?: any;
+}
+
+interface CheckboxProps extends PfCheckboxProps {
+  isReadOnly?: boolean;
+  options?: CheckboxOptions;
+}
+
+declare const Checkbox: React.ComponentType<CheckboxProps & FormGroupProps & UseFieldApiComponentConfig>;
+
+export default Checkbox;

packages/pf4-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;

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

@@ -0,0 +1,7 @@
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+import { TextInputProps } from "@patternfly/react-core";
+import FormGroupProps from "./form-group";
+
+declare const DatePicker: React.ComponentType<TextInputProps & FormGroupProps & UseFieldApiComponentConfig>;
+
+export default DatePicker;

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

@@ -0,0 +1,31 @@
+import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+import { FormGroupProps } from "@patternfly/react-core";
+
+export interface DualListSelectOption extends AnyObject {
+  value?: any;
+  label: ReactNode;
+}
+
+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[];
+}
+
+declare const DualListSelect: React.ComponentType<DualListSelectProps & FormGroupProps & UseFieldApiComponentConfig>;
+
+export default DualListSelect;

packages/pf4-component-mapper/src/files/field-array.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { Field } from "@data-driven-forms/react-form-renderer";
+
+export interface FieldArrayProps {
+  label?: ReactNode;
+  description?: ReactNode;
+  fields: Field[];
+  defaultItem?: any;
+  minItems?: number;
+  maxItems?: number;
+  noItemsMessage?: ReactNode;
+}
+
+declare const FieldArray: React.ComponentType<FieldArrayProps>;
+
+export default FieldArray;

packages/pf4-component-mapper/src/files/form-group.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+export default interface FormGroupProps {
+  description?: ReactNode;
+  hideLabel?: boolean;
+  id?: string;
+  label?: ReactNode;
+  isRequired?: boolean;
+  helperText?: ReactNode;
+}

packages/pf4-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;

packages/pf4-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;

packages/pf4-component-mapper/src/files/plain-text.js

@@ -6,11 +6,13 @@ import validTextFields from '@data-driven-forms/common/src/utils/valid-text-fiel
 
 const PlainText = ({ label, name, variant }) => (
   <TextContent>
-    {label.split('\n').map((paragraph, index) => (
-      <Text component={variant} key={`${name}-${index}`}>
-        {paragraph}
-      </Text>
-    ))}
+    {typeof label === 'string'
+      ? label.split('\n').map((paragraph, index) => (
+          <Text component={variant} key={`${name}-${index}`}>
+            {paragraph}
+          </Text>
+        ))
+      : label}
   </TextContent>
 );
 

packages/pf4-component-mapper/src/files/radio.d.ts

@@ -0,0 +1,19 @@
+import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
+import FormGroupProps from "./form-group";
+import { ReactNode } from "react";
+
+export interface RadioOption extends AnyObject {
+  label: ReactNode;
+  value?: any;
+}
+
+export interface RadioProps {
+  name: string;
+  options: RadioOption[];
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+}
+
+declare const Radio: React.ComponentType<RadioProps & FormGroupProps & UseFieldApiComponentConfig>;
+
+export default Radio;