types: types for UI Schema

Author: vip-git

src/types/ConfiguredField.type.tsx renamed to src/types/ConfiguredField.type.ts

@@ -0,0 +1,43 @@
+import { InputProps, AutocompleteProps, ButtonProps } from '@mui/material';
+import { UIWidgetType } from './ui/UIWidget.type';
+import { UISchemaPageType } from './ui/UIPage.type';
+import { UISchemaValidations } from './ui/UIValidations.type';
+
+interface UISchemaAutoCompleteProps<T> extends Omit<AutocompleteProps<{}, boolean, boolean, false>, 'options' | 'renderInput'> {
+  options?: ReadonlyArray<T>; 
+  renderInput?: any; 
+}
+
+type UISchemaOptions = InputProps 
+| UISchemaAutoCompleteProps<{}>
+| ButtonProps 
+| HTMLInputElement & { isMulti?: boolean; buttonTitle?: string; icon?: string; }
+
+type UISchemaProps = {
+    'ui:widget'?: UIWidgetType;
+    'ui:autofocus'?: boolean;
+    'ui:emptyValue'?: string;
+    'ui:isClearable'?: boolean;
+    'ui:help'?: string;
+    'ui:placeholder'?: string;
+    'ui:activeCompColor'?: string;
+    'ui:component'?: string;
+    'ui:interceptor'?: string;
+    'ui:title'?: string;
+    'ui:description'?: string;
+    'mui:className'?: string;
+    'mui:inputProps'?: InputProps;
+    'ui:validations'?: UISchemaValidations;
+    'ui:options'?: string | UISchemaOptions; // add types
+    'ui:props'?: UISchemaOptions;
+};
+
+type UISchemaPropsObj = {
+  [key: string]: UISchemaProps;
+};
+
+export type UISchemaType<T> = {
+  [key in keyof T]: UISchemaPropsObj | UISchemaProps | UISchemaPageType;
+} & {
+  'ui:page'?: UISchemaPageType;
+};

src/types/UISchema.type.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+
+export type UILayoutTabs = 'tabs';
+export type UILayoutSteps = 'steps';
+export type UIPageProps = {
+    'ui:schemaErrors'?: boolean;
+};
+
+export type UISchemaPageType = {
+    'ui:layout': UILayoutTabs | UILayoutSteps;
+    'props'?: UIPageProps;
+    'style'?: CSSProperties;
+    'tabs'?: {
+        'style': CSSProperties;
+    },
+    'tab'?: {
+        'style': CSSProperties;
+    }
+};

src/types/ui/UIPage.type.ts

@@ -0,0 +1,20 @@
+export type UIValidationMinLength = 'minLength';
+export type UIValidationMaxLength = 'maxLength';
+export type UIValidationMaximum = 'maximum';
+export type UIValidationMinimum = 'minimum';
+export type UIValidationPattern = 'pattern';
+
+type ValidationNames = UIValidationMinLength
+| UIValidationMaxLength
+| UIValidationMaximum
+| UIValidationMinimum
+| UIValidationPattern;
+type ValidationValues = {
+    'value': number;
+    'message': string;
+    'inline': boolean;
+};
+
+export type UISchemaValidations = {
+    [key in ValidationNames]?: ValidationValues;
+};

src/types/ui/UIValidations.type.ts

@@ -0,0 +1,23 @@
+export type UISchemaTypeAutoComplete = 'material-auto-complete';
+export type UISchemaTypeMaterialSelect = 'material-select';
+export type UISchemaTypeUpload = 'upload';
+export type UISchemaTypeTextArea = 'textarea';
+export type UISchemaTypePassword = 'password';
+export type UISchemaTypeMaterialDate = 'material-date';
+export type UISchemaTypeUpDown = 'updown';
+export type UISchemaTypeRadio = 'radio';
+export type UISchemaTypeMaterialMultiSelect = 'material-multiselect';
+export type UISchemaTypeCreatableSelect = 'creatable-select';
+export type UISchemaTypeCheckBoxes = 'checkboxes';
+
+export type UIWidgetType = UISchemaTypeAutoComplete 
+| UISchemaTypeMaterialSelect
+| UISchemaTypeUpload
+| UISchemaTypeTextArea
+| UISchemaTypePassword
+| UISchemaTypeMaterialDate
+| UISchemaTypeUpDown
+| UISchemaTypeRadio
+| UISchemaTypeMaterialMultiSelect
+| UISchemaTypeCreatableSelect
+| UISchemaTypeCheckBoxes;