chore(renderer): apply eslint to ts files

Author: Hyperkid123

package.json

@@ -18,8 +18,9 @@
     "release": "nx release",
     "codecov": "codecov",
     "start-demo": "nx run @data-driven-forms/react-renderer-demo:start",
-    "lint": "npx eslint ./packages/*/src --ext .js",
-    "lint:ts": "eslint 'packages/**/*.d.ts' --parser @typescript-eslint/parser",
+    "lint": "npm run lint:js && npm run lint:typescript",
+    "lint:js": "npx eslint ./packages/*/src --ext .js",
+    "lint:typescript": "eslint packages/react-form-renderer/src/**/* packages/react-form-renderer/demo/**/* --ext .ts,.tsx,.js,.jsx",
     "generate-template": "node ./scripts/generate-mapper.js",
     "clean-build": "node ./scripts/clean-build.js",
     "prebuild": "node ./scripts/clean-build.js"

packages/react-form-renderer/demo/form-fields-mapper.tsx

@@ -1,8 +1,8 @@
-/* eslint-disable no-unused-vars */
+/* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
 import React from 'react';
 import { componentTypes, useFormApi, ComponentMapper } from '../src';
 import FieldProvider from '../src/field-provider';
-import useFieldApi, { UseFieldApiProps, BaseFieldProps } from '../src/use-field-api';
+import useFieldApi, { BaseFieldProps } from '../src/use-field-api';
 
 interface FieldProviderRenderProps {
   input: any;
@@ -86,7 +86,7 @@ const SelectField = (props: SelectFieldProps & any) => {
 };
 
 const AsyncComponent = (props: BaseFieldProps<AsyncComponentProps>) => {
-  const { input, meta } = useFieldApi(props);
+  const { input: _input, meta: _meta } = useFieldApi(props);
   const { loadOptions, label } = props;
   const [loaded, setLoaded] = React.useState<boolean>(false);
   const [data, setData] = React.useState<any>({ message: 'nodata' });
@@ -146,15 +146,14 @@ const RadioOption = ({ name, option }: RadioOptionProps) => {
   );
 };
 
-const Radio = (props: RadioProps & any) => {
-  const { input, meta } = useFieldApi(props);
-  const { label, options, name } = props;
+const Radio = (props: BaseFieldProps<RadioProps>) => {
+  const { name, label, options, input: _input, meta: _meta } = useFieldApi(props);
   return (
     <div>
       <fieldset>
         <legend>{label}</legend>
         {options.map(({ value, label }: Option) => {
-          return <RadioOption key={value} option={{ value, label }} name={props.name} />;
+          return <RadioOption key={value} option={{ value, label }} name={name} />;
         })}
       </fieldset>
     </div>
@@ -179,4 +178,4 @@ const mapper: ComponentMapper = {
   },
 };
 
-export default mapper;
+export default mapper;

packages/react-form-renderer/demo/form-template.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable react/prop-types */
+/* eslint-disable react/prop-types, react/no-unused-prop-types */
 import React from 'react';
 import { useFormApi, FormSpy, FormOptions } from '../src';
 import { FormTemplateRenderProps } from '../src/common-types/form-template-render-props';
@@ -15,7 +15,7 @@ interface FormSpyProps {
 }
 
 const isDisabled = (disableStates: string[], getState: FormOptions['getState']): boolean =>
-  disableStates.map((item) => getState()[item]).find((item) => !!item);
+  disableStates.map((item) => (getState() as any)[item]).find((item) => !!item);
 
 const FormTemplate = ({ schema: { title, description }, formFields }: FormTemplateRenderProps) => {
   const { handleSubmit, getState, onReset, onCancel } = useFormApi();
@@ -52,4 +52,4 @@ const FormTemplate = ({ schema: { title, description }, formFields }: FormTempla
   );
 };
 
-export default FormTemplate;
+export default FormTemplate;

packages/react-form-renderer/demo/index.tsx

@@ -156,4 +156,4 @@ if (!container) {
 }
 
 const root = createRoot(container);
-root.render(<App />);
+root.render(<App />);

packages/react-form-renderer/demo/sandbox.ts

@@ -12,19 +12,19 @@ const output: Schema = {
       options: [
         {
           label: 'Option 1',
-          value: 1
+          value: 1,
         },
         {
           label: 'Option 2',
-          value: 2
-        }
-      ]
+          value: 2,
+        },
+      ],
     },
     {
       name: 'text_box_1',
       label: 'Text Box 1',
       title: 'Text Box',
-      component: componentTypes.TEXT_FIELD
+      component: componentTypes.TEXT_FIELD,
     },
     {
       name: 'text_box_1_condition',
@@ -34,50 +34,50 @@ const output: Schema = {
       condition: [
         {
           when: ['text_box_1', 'text_box_4'],
-          is: 'a'
+          is: 'a',
         },
         {
           when: 'text_box_3',
-          is: 'x'
-        }
-      ]
+          is: 'x',
+        },
+      ],
     },
     {
       name: 'text_box_2',
       label: 'Text Box 2',
       helperText: 'Helper text',
       component: componentTypes.TEXT_FIELD,
-      hideField: true
+      hideField: true,
     },
     {
       name: 'text_box_3',
       label: 'Text Box 3',
       isRequired: true,
       component: componentTypes.TEXT_FIELD,
       clearedValue: 'override',
-      validate: [{ type: validatorTypes.MIN_LENGTH, threshold: 12, message: 'bar' }]
+      validate: [{ type: validatorTypes.MIN_LENGTH, threshold: 12, message: 'bar' }],
     },
     {
       name: 'text_box_4',
       label: 'Text Box 4',
       isReadOnly: true,
-      component: componentTypes.TEXT_FIELD
+      component: componentTypes.TEXT_FIELD,
     },
     {
       name: 'foo',
       label: 'Uaaaaaaaaaaaaaaaaa',
       component: componentTypes.TEXT_FIELD,
       condition: {
         when: 'text_box_1',
-        is: 'a'
-      }
+        is: 'a',
+      },
     },
     {
       name: 'text_box_6',
       label: 'Text Box unvisible',
       title: 'Text Box unvisible',
       isVisible: false,
-      component: componentTypes.TEXT_FIELD
+      component: componentTypes.TEXT_FIELD,
     },
     {
       name: 'text_box_7',
@@ -86,32 +86,32 @@ const output: Schema = {
       validate: [
         {
           type: validatorTypes.PATTERN,
-          pattern: '[0-9]'
-        }
+          pattern: '[0-9]',
+        },
       ],
-      component: componentTypes.TEXT_FIELD
+      component: componentTypes.TEXT_FIELD,
     },
     {
       name: 'text_box_8',
       label: 'Text Box integer value',
       title: 'Text Box integer value',
       dataType: 'integer',
       component: componentTypes.TEXT_FIELD,
-      type: 'number'
+      type: 'number',
     },
     {
       name: 'text_box_9',
       label: 'Text Box string value',
       title: 'Text Box string value',
       dataType: 'string',
-      component: componentTypes.TEXT_FIELD
+      component: componentTypes.TEXT_FIELD,
     },
     {
       name: 'dataShower',
       id: 'shower 1',
       label: 'Test select',
       component: 'dataShower',
-      loadOptions: () => new Promise((resolve) => setTimeout(() => resolve({ custom: 'data' }), 1500))
+      loadOptions: () => new Promise((resolve) => setTimeout(() => resolve({ custom: 'data' }), 1500)),
     },
     {
       name: 'dataShower',
@@ -120,17 +120,17 @@ const output: Schema = {
       component: 'dataShower',
       actions: {
         loadOptions: ['loadData', { x: 'y', pp: 'adsad' }],
-        label: ['loadLabel', 'cosi']
-      }
-    }
-  ]
+        label: ['loadLabel', 'cosi'],
+      },
+    },
+  ],
 };
 
 export const defaultValues: Record<string, any> = {
   text_box_5: '"hello"',
   check_box_2: 'true',
   radio_button_4: '2',
-  dropdown_list_2: '2'
+  dropdown_list_2: '2',
 };
 
-export default output;
+export default output;

packages/react-form-renderer/src/common-types/any-object.d.ts

@@ -1,3 +1,3 @@
 export interface AnyObject {
   [key: string]: any;
-}
+}

packages/react-form-renderer/src/common-types/any-object.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AnyObject } from "./any-object";
+import { AnyObject } from './any-object';
 
 export interface ExtendedMapperComponent extends AnyObject {
   component: React.ComponentType | React.FunctionComponent | React.ElementType;
@@ -9,4 +9,4 @@ interface ComponentMapper {
   [key: string]: React.ComponentType | React.FunctionComponent | React.ElementType | ExtendedMapperComponent;
 }
 
-export default ComponentMapper;
+export default ComponentMapper;

packages/react-form-renderer/src/common-types/component-mapper.d.ts

@@ -1,7 +1,7 @@
 import { Validator } from '../validators';
 import { ConditionDefinition } from '../condition';
 import { DataType } from '../data-types';
-import { AnyObject } from '../common-types/any-object';
+import { AnyObject } from './any-object';
 import { FieldInputProps } from 'react-final-form';
 import { FormOptions } from '../renderer-context';
 import { Meta } from '../use-field-api';