Date input improvements (#2889)

* refactor(*): changed handling of date inputs * ci(*): testing path change * temporarily disabled test * updated hook name --------- Co-authored-by: Tomer Shvadron <tomers@ballerine.com>
ballerine-io · Dec 12, 2024 · c72a40d · c72a40d
1 parent c9723b2
commit c72a40d
Show file tree

Hide file tree

Showing 15 changed files with 901 additions and 338 deletions.
diff --git a/apps/backoffice-v2/package.json b/apps/backoffice-v2/package.json
@@ -145,7 +145,7 @@
     "tesseract.js": "^4.0.1",
     "ts-pattern": "^5.0.8",
     "vite-plugin-terminal": "^1.1.0",
-    "zod": "^3.22.3"
+    "zod": "^3.23.4"
   },
   "devDependencies": {
     "@ballerine/config": "^1.1.27",
@@ -162,8 +162,9 @@
     "@storybook/react-vite": "^7.0.0-rc.10",
     "@storybook/testing-library": "^0.0.14-next.1",
     "@tanstack/react-query-devtools": "4.22.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/d3-hierarchy": "^3.1.7",
     "@types/dompurify": "^3.0.5",
@@ -173,7 +174,6 @@
     "@types/qs": "^6.9.7",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
-    "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.30.0",
     "@typescript-eslint/parser": "^5.30.0",
     "@vitejs/plugin-react-swc": "^3.0.1",
@@ -199,7 +199,7 @@
     "vite-plugin-mkcert": "^1.16.0",
     "vite-plugin-top-level-await": "^1.4.4",
     "vite-tsconfig-paths": "^5.0.1",
-    "vitest": "^0.29.8"
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "react": "^17.0.0",

diff --git a/apps/backoffice-v2/src/common/components/organisms/EditableDetailsV2/EditableDetailsV2.tsx b/apps/backoffice-v2/src/common/components/organisms/EditableDetailsV2/EditableDetailsV2.tsx
@@ -7,9 +7,9 @@ import { FunctionComponent } from 'react';
 import { FormItem } from '../Form/Form.Item';
 import { FormLabel } from '../Form/Form.Label';
 import { FormMessage } from '../Form/Form.Message';
-import { useNewEditableDetailsLogic } from './hooks/useEditableDetailsV2Logic/useEditableDetailsV2Logic';
+import { useEditableDetailsV2Logic } from './hooks/useEditableDetailsV2Logic/useEditableDetailsV2Logic';
 import { EditableDetailsV2Options } from './components/EditableDetailsV2Options';
-import { EditableDetailV2 } from './components/EditableDetailV2';
+import { EditableDetailV2 } from './components/EditableDetailV2/EditableDetailV2';
 import { IEditableDetailsV2Props } from './types';
 
 export const EditableDetailsV2: FunctionComponent<IEditableDetailsV2Props> = ({
@@ -24,9 +24,10 @@ export const EditableDetailsV2: FunctionComponent<IEditableDetailsV2Props> = ({
     throw new Error('Cannot provide both blacklist and whitelist');
   }
 
-  const { form, handleSubmit, filteredFields } = useNewEditableDetailsLogic({
+  const { form, handleSubmit, handleCancel, filteredFields } = useEditableDetailsV2Logic({
     fields,
     onSubmit,
+    onCancel,
     config,
   });
 
@@ -64,17 +65,19 @@ export const EditableDetailsV2: FunctionComponent<IEditableDetailsV2Props> = ({
                         {titleCase(title ?? '')}
                       </TextWithNAFallback>
                       <EditableDetailV2
+                        name={field.name}
                         type={props.type}
                         format={props.format}
                         minimum={props.minimum}
                         maximum={props.maximum}
                         pattern={props.pattern}
                         options={props.options}
                         isEditable={!config.actions.editing.disabled && props.isEditable}
+                        value={field.value}
                         valueAlias={props.valueAlias}
                         originalValue={originalValue}
-                        form={form}
-                        field={field}
+                        onInputChange={form.setValue}
+                        onOptionChange={field.onChange}
                         parse={config.parse}
                       />
                       <FormMessage />
@@ -91,7 +94,7 @@ export const EditableDetailsV2: FunctionComponent<IEditableDetailsV2Props> = ({
                   type="button"
                   className={`aria-disabled:pointer-events-none aria-disabled:opacity-50`}
                   aria-disabled={config.actions.cancel.disabled}
-                  onClick={onCancel}
+                  onClick={handleCancel}
                 >
                   Cancel
                 </Button>

diff --git a/...fice-v2/src/common/components/organisms/EditableDetailsV2/components/EditableDetailV2.tsx b/...fice-v2/src/common/components/organisms/EditableDetailsV2/components/EditableDetailV2.tsx