WfoArrayField, WfoObjectField, fix some import and types for the forms

Author: Georgi2704

.changeset/wicked-grapes-report.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': patch
+---
+
+WfoArrayField, WfoObjectField, fix some import and types for the forms

package-lock.json

@@ -21,7 +21,7 @@ import { EuiCheckbox, EuiFlexItem, EuiText } from '@elastic/eui';
 
 import { useWithOrchestratorTheme } from '@/hooks';
 
-import { getStyles } from './AcceptFieldStyling';
+import { getAcceptFieldStyles } from './AcceptFieldStyling';
 import { FieldProps } from './types';
 
 type AcceptItemType =
@@ -73,7 +73,7 @@ function Accept({
     ...props
 }: AcceptFieldProps) {
     const t = useTranslations();
-    const { acceptFieldStyle } = useWithOrchestratorTheme(getStyles);
+    const { acceptFieldStyle } = useWithOrchestratorTheme(getAcceptFieldStyles);
 
     const legacy = !data;
     const i18nBaseKey = data

packages/orchestrator-ui-components/src/components/WfoForms/formFields/AcceptField.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 
 import { WfoTheme } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getAcceptFieldStyles = ({ theme }: WfoTheme) => {
     const acceptFieldStyle = css({
         '.acceptField': {
             'label.warning': {

packages/orchestrator-ui-components/src/components/WfoForms/formFields/AcceptFieldStyling.ts

@@ -18,9 +18,9 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiCheckbox, EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
 
+import { FieldProps } from '@/components';
 import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
 import { useWithOrchestratorTheme } from '@/hooks';
-import { FieldProps } from '@/types';
 
 import { boolFieldStyling } from './BoolFieldStyling';
 

packages/orchestrator-ui-components/src/components/WfoForms/formFields/BoolField.tsx

@@ -18,7 +18,7 @@ import { connectField } from 'uniforms';
 
 import { EuiHorizontalRule } from '@elastic/eui';
 
-import { FieldProps } from '@/types';
+import { FieldProps } from '@/components';
 
 export type DividerFieldProps = FieldProps<null, object, null, HTMLDivElement>;
 

packages/orchestrator-ui-components/src/components/WfoForms/formFields/DividerField.tsx

@@ -16,7 +16,7 @@ import React from 'react';
 
 import { connectField, filterDOMProps } from 'uniforms';
 
-import { FieldProps } from '@/types';
+import { FieldProps } from '@/components';
 
 export type ErrorFieldProps = FieldProps<null>;
 

packages/orchestrator-ui-components/src/components/WfoForms/formFields/ErrorField.tsx

@@ -16,8 +16,8 @@ import React from 'react';
 
 import { connectField, filterDOMProps } from 'uniforms';
 
+import { FieldProps } from '@/components';
 import { useOrchestratorTheme } from '@/hooks';
-import { FieldProps } from '@/types';
 
 export type LabelFieldProps = FieldProps<null, object, null, HTMLDivElement>;
 

packages/orchestrator-ui-components/src/components/WfoForms/formFields/LabelField.tsx

@@ -18,7 +18,7 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFormRow, EuiText, EuiTextArea } from '@elastic/eui';
 
-import { FieldProps } from '@/types';
+import { FieldProps } from '@/components';
 
 export type LongTextFieldProps = FieldProps<
     string,

packages/orchestrator-ui-components/src/components/WfoForms/formFields/LongTextField.tsx

@@ -18,10 +18,10 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFieldNumber, EuiFormRow, EuiText } from '@elastic/eui';
 
+import { FieldProps } from '@/components';
 import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { getFormFieldsBaseStyle } from '@/theme';
-import { FieldProps } from '@/types';
 
 export type NumFieldProps = FieldProps<
     number,

packages/orchestrator-ui-components/src/components/WfoForms/formFields/NumField.tsx

@@ -19,7 +19,7 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFormRow, EuiRadio, EuiText } from '@elastic/eui';
 
-import { FieldProps } from '@/types';
+import { FieldProps } from '@/components';
 
 const base64 =
     typeof btoa !== 'undefined'

packages/orchestrator-ui-components/src/components/WfoForms/formFields/RadioField.tsx

@@ -16,7 +16,7 @@ import React from 'react';
 
 import { filterDOMProps, useForm } from 'uniforms';
 
-import { FieldProps } from '@/types';
+import { FieldProps } from '@/components';
 
 export type SubmitFieldProps = FieldProps<
     null,

packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubmitField.tsx

@@ -18,10 +18,10 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFieldText, EuiFormRow, EuiText } from '@elastic/eui';
 
+import { FieldProps } from '@/components';
 import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { getFormFieldsBaseStyle } from '@/theme';
-import { FieldProps } from '@/types';
 
 export type TextFieldProps = FieldProps<string>;
 

packages/orchestrator-ui-components/src/components/WfoForms/formFields/TextField.tsx

@@ -22,7 +22,7 @@ import { useWithOrchestratorTheme } from '@/hooks';
 
 import { ContactPerson } from '../types';
 import { isEmpty } from '../utils';
-import { getStyles } from './ContactPersonAutocompleteStyles';
+import { getContactPersonStyles } from './ContactPersonAutocompleteStyles';
 
 interface ContactPersonAutocompleteProps {
     query: string;
@@ -39,8 +39,9 @@ export const ContactPersonAutocomplete = ({
     itemSelected,
     suggestions,
 }: ContactPersonAutocompleteProps) => {
-    const { contactPersonAutocompleteStyling } =
-        useWithOrchestratorTheme(getStyles);
+    const { contactPersonAutocompleteStyling } = useWithOrchestratorTheme(
+        getContactPersonStyles,
+    );
 
     // Intentionally not done with state since we don't need a rerender
     // This is only to store a ref for the scroll into view part

packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/ContactPersonAutocomplete.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 
 import { WfoTheme } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getContactPersonStyles = ({ theme }: WfoTheme) => {
     const contactPersonAutocompleteStyling = css`
         .autocomplete-container {
             position: relative;

packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/ContactPersonAutocompleteStyles.ts

@@ -19,10 +19,10 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFilePicker, EuiFormRow, EuiText } from '@elastic/eui';
 
+import { FieldProps } from '@/components';
 import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { useUploadFileMutation } from '@/rtk/endpoints/fileUpload';
-import { FieldProps } from '@/types';
 
 export type FileUploadProps = FieldProps<string>;
 

packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/FileUploadField.tsx

@@ -26,3 +26,4 @@ export * from './CustomerField';
 export * from './ConnectedSelectField';
 export * from './deprecated/FileUploadField';
 export * from './commonStyles';
+export * from './types';

packages/orchestrator-ui-components/src/components/WfoForms/formFields/index.ts

@@ -33,6 +33,7 @@ export type FieldProps<
 export interface ContactPerson {
     name: string;
     email: string;
+    phone?: string;
 }
 
 export interface Option<Value = string> {

packages/orchestrator-ui-components/src/components/WfoForms/formFields/types.ts

@@ -4,7 +4,7 @@ import type { RowRenderComponent } from 'pydantic-forms';
 
 import { EuiFormRow, EuiText } from '@elastic/eui';
 
-import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
+import { getCommonFormFieldStyles } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 
 export const Row: RowRenderComponent = ({

packages/orchestrator-ui-components/src/components/WfoPydanticForm/Row.tsx

@@ -5,10 +5,9 @@ import type { PydanticFormElement } from 'pydantic-forms';
 import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
 import { tint } from '@elastic/eui';
 import { css } from '@emotion/react';
-import type { WfoTheme } from '@orchestrator-ui/orchestrator-ui-components';
 
-import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
-import { useWithOrchestratorTheme } from '@/hooks';
+import { getCommonFormFieldStyles } from '@/components';
+import { WfoTheme, useWithOrchestratorTheme } from '@/hooks';
 
 export const getStyles = ({ theme }: WfoTheme) => {
     const toShadeColor = (color: string) => tint(color, 0.9);

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/Summary.tsx

@@ -11,13 +11,10 @@ import {
 
 import { EuiIcon } from '@elastic/eui';
 
+import { getWfoArrayFieldStyles } from '@/components';
 import { useOrchestratorTheme } from '@/hooks';
 
-import { getWfoArrayFieldStyles } from './styles';
-
-// adjust relative path accordingly
-
-const MinusButton = ({
+export const MinusButton = ({
     index,
     onRemove,
 }: {
@@ -34,7 +31,7 @@ const MinusButton = ({
     );
 };
 
-const PlusButton = ({ onClick }: { onClick: () => void }) => {
+export const PlusButton = ({ onClick }: { onClick: () => void }) => {
     const { theme } = useOrchestratorTheme();
     const { plusButtonWrapper } = getWfoArrayFieldStyles();
 
@@ -75,6 +72,9 @@ export const WfoArrayField = ({
     );
 
     const renderField = (field: Record<'id', string>, index: number) => {
+        //TODO: Temporary fix for wrapper showing in arrayItem when not necessary
+        delete arrayItem.description;
+        arrayItem.title = '';
         const arrayField = itemizeArrayItem(index, arrayItem);
 
         return (

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoArrayField/WfoArrayField.tsx

@@ -0,0 +1,2 @@
+export * from './WfoArrayField';
+export * from './arrayFieldStyles';

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoArrayField/styles.ts renamed to packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoArrayField/arrayFieldStyles.ts

@@ -9,7 +9,7 @@ import {
 
 import { EuiFlexGroup } from '@elastic/eui';
 
-import { getWfoObjectFieldStyles } from '../fields/styles';
+import { getWfoObjectFieldStyles } from '@/components';
 
 export const WfoObjectField = ({
     pydanticFormField,

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoArrayField/index.ts

@@ -0,0 +1,2 @@
+export * from './WfoObjectField';
+export * from './objectFieldStyles';

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoObjectField.tsx renamed to packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoObjectField/WfoObjectField.tsx

@@ -5,4 +5,4 @@ export * from './Divider';
 export * from './Checkbox';
 export * from './Summary';
 export * from './WfoObjectField';
-export * from './WfoArrayField/WfoArrayField';
+export * from './WfoArrayField';

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoObjectField/index.ts

@@ -1 +1,4 @@
 export * from './WfoPydanticForm';
+export * from './fields';
+export * from './Row';
+export * from './Footer';

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/styles.ts renamed to packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoObjectField/objectFieldStyles.ts

@@ -1,7 +1,4 @@
-import { Ref } from 'react';
-
 import { JSONSchema6 } from 'json-schema';
-import { HTMLFieldProps } from 'uniforms';
 
 import { HttpStatus } from '@/rtk';
 
@@ -27,20 +24,6 @@ export interface FormNotCompleteResponse {
     meta?: { hasNext?: boolean };
 }
 
-export type FieldProps<
-    Value,
-    Extra = object,
-    InputElementType = HTMLInputElement,
-    ElementType = HTMLDivElement,
-> = HTMLFieldProps<
-    Value,
-    ElementType,
-    {
-        inputRef?: Ref<InputElementType>;
-        description?: string;
-    } & Extra
->;
-
 type ValidationErrorData = {
     detail: string;
     status: HttpStatus;