From c06f23412913550c988bc5eb5d84b2ea03413e4b Mon Sep 17 00:00:00 2001 From: Illia Rudniev Date: Thu, 3 Aug 2023 15:15:52 +0000 Subject: [PATCH] feat: updated UI & added DynamicForm & storybook & style fixes --- .changeset/orange-beds-act.md | 6 + .../PhoneInputAdapter/PhoneInputAdapter.tsx | 9 - .../ArrayFieldsLayout/ArrayFieldsLayout.tsx | 28 --- .../layouts/TitleLayout/TitleLayout.tsx | 11 - .../organisms/DynamicForm/fields.tsx | 18 -- .../DynamicForm/utils/file-storage.ts | 19 -- .../ViewStateProvider/SequencedViews.tsx | 3 +- .../providers/ViewStateProvider/types.ts | 3 +- .../helpers/serialize-workflow-run-data.ts | 2 +- .../src/components/organisms/KYBView/views.ts | 1 - .../BankInformationView.tsx | 2 +- .../bank-information.ui-schema.ts | 5 + .../CompanyActivityView.tsx | 2 +- .../companyActivity.ui-schema.ts | 5 + .../CompanyDocumentsView.tsx | 13 +- .../company-documents.ui-schema.ts | 5 + .../CompanyInformationView.tsx | 2 +- .../company-information.ui-schema.ts | 5 + .../HeadquartersView/HeadquartersView.tsx | 2 +- .../headquarters.ui-schema.ts | 5 + .../PersonalInformationView.tsx | 2 +- .../ShareholdersView/ShareholdersView.tsx | 16 +- .../shareholders.ui-schema.ts | 5 + packages/ui/package.json | 3 + packages/ui/src/common/index.ts | 1 + .../ui}/src/common/utils/base64-to-file.ts | 0 .../ui}/src/common/utils/file-to-base64.ts | 0 packages/ui/src/common/utils/index.ts | 2 + .../DynamicForm/DynamicForm.stories.tsx | 207 ++++++++++++++++++ .../organisms/DynamicForm/DynamicForm.tsx | 4 +- .../BooleanFieldAdapter.tsx | 14 +- .../BooleanFieldAdapter/index.ts | 0 .../DateInputAdater/DateInputAdater.tsx | 4 +- .../RSJVInputAdaters/DateInputAdater/index.ts | 0 .../FileInputAdapter/FileInputAdapter.tsx | 10 +- .../FileInputAdapter/index.ts | 0 .../PhoneInputAdapter/PhoneInputAdapter.tsx | 8 + .../PhoneInputAdapter/index.ts | 0 .../TextInputAdapter/TextInputAdapter.tsx | 4 +- .../components/SelectField/SelectField.tsx | 3 +- .../components/SelectField/index.ts | 0 .../components/TextField/TextField.tsx | 3 +- .../components/TextField/index.ts | 0 .../helpers/detectFieldType.ts | 0 .../TextInputAdapter/index.ts | 0 .../TextInputAdapter/types.ts | 0 .../components/RSJVInputAdaters/types.ts | 0 .../atoms/ErrorMessage/ErrorMessage.tsx | 0 .../components/atoms/ErrorMessage/index.ts | 0 .../ArrayFieldsLayout/ArrayFieldsLayout.tsx | 37 ++++ .../layouts/ArrayFieldsLayout/index.ts | 0 .../layouts/FieldLayout/FieldLayout.tsx | 10 +- .../components/layouts/FieldLayout/index.ts | 0 .../layouts/TitleLayout/TitleLayout.tsx | 18 ++ .../components/layouts/TitleLayout/helpers.ts | 9 + .../components/layouts/TitleLayout/index.ts | 0 .../buttons/SubmitLayout/SubmitLayout.tsx | 2 +- .../layouts/buttons/SubmitLayout/index.ts | 0 .../molecules/ErrorsList/ErrorsList.tsx | 2 +- .../components/molecules/ErrorsList/index.ts | 0 .../organisms/DynamicForm/fields.tsx | 18 ++ .../hooks/useWarnings/useWarnings.ts | 6 +- .../utils/convertFieldIdToObjectPath.ts | 0 .../components/organisms/DynamicForm/index.ts | 0 .../organisms/DynamicForm/templates.tsx | 8 +- .../organisms/DynamicForm/utils/is-base64.ts | 4 + .../organisms/DynamicForm/warnings.context.ts | 2 +- packages/ui/src/components/organisms/index.ts | 1 + pnpm-lock.yaml | 13 +- 69 files changed, 403 insertions(+), 159 deletions(-) create mode 100644 .changeset/orange-beds-act.md delete mode 100644 examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/PhoneInputAdapter.tsx delete mode 100644 examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/ArrayFieldsLayout.tsx delete mode 100644 examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/TitleLayout/TitleLayout.tsx delete mode 100644 examples/kyb-app/src/common/components/organisms/DynamicForm/fields.tsx delete mode 100644 examples/kyb-app/src/common/components/organisms/DynamicForm/utils/file-storage.ts rename {examples/kyb-app => packages/ui}/src/common/utils/base64-to-file.ts (100%) rename {examples/kyb-app => packages/ui}/src/common/utils/file-to-base64.ts (100%) create mode 100644 packages/ui/src/common/utils/index.ts create mode 100644 packages/ui/src/components/organisms/DynamicForm/DynamicForm.stories.tsx rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/DynamicForm.tsx (91%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/BooleanFieldAdapter.tsx (61%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/index.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/DateInputAdater/DateInputAdater.tsx (60%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/DateInputAdater/index.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/FileInputAdapter.tsx (81%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/index.ts (100%) create mode 100644 packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/PhoneInputAdapter.tsx rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/index.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/TextInputAdapter.tsx (82%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx (86%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/index.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/TextField.tsx (88%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/index.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/helpers/detectFieldType.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/index.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/types.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/RSJVInputAdaters/types.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/atoms/ErrorMessage/ErrorMessage.tsx (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/atoms/ErrorMessage/index.ts (100%) create mode 100644 packages/ui/src/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/ArrayFieldsLayout.tsx rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/index.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/layouts/FieldLayout/FieldLayout.tsx (64%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/layouts/FieldLayout/index.ts (100%) create mode 100644 packages/ui/src/components/organisms/DynamicForm/components/layouts/TitleLayout/TitleLayout.tsx create mode 100644 packages/ui/src/components/organisms/DynamicForm/components/layouts/TitleLayout/helpers.ts rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/layouts/TitleLayout/index.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout/SubmitLayout.tsx (92%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout/index.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/molecules/ErrorsList/ErrorsList.tsx (82%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/components/molecules/ErrorsList/index.ts (100%) create mode 100644 packages/ui/src/components/organisms/DynamicForm/fields.tsx rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/hooks/useWarnings/useWarnings.ts (53%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/hooks/useWarnings/utils/convertFieldIdToObjectPath.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/index.ts (100%) rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/templates.tsx (54%) create mode 100644 packages/ui/src/components/organisms/DynamicForm/utils/is-base64.ts rename {examples/kyb-app/src/common => packages/ui/src}/components/organisms/DynamicForm/warnings.context.ts (70%) diff --git a/.changeset/orange-beds-act.md b/.changeset/orange-beds-act.md new file mode 100644 index 0000000000..eb044ef650 --- /dev/null +++ b/.changeset/orange-beds-act.md @@ -0,0 +1,6 @@ +--- +'@ballerine/kyb-app': patch +'@ballerine/ui': patch +--- + +added DynamicForm & TextArea & css fixes diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/PhoneInputAdapter.tsx b/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/PhoneInputAdapter.tsx deleted file mode 100644 index 7fd12e4c9a..0000000000 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/PhoneInputAdapter.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { RJSVInputAdapter } from '@app/common/components/organisms/DynamicForm/components/RSJVInputAdaters/types'; -import { PhoneNumberInput } from '@ballerine/ui'; - -export const PhoneInputAdapter: RJSVInputAdapter = ({ formData, label, onChange, ...rest }) => { - console.log('adapter', rest); - return ( - void onChange(value)} /> - ); -}; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/ArrayFieldsLayout.tsx b/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/ArrayFieldsLayout.tsx deleted file mode 100644 index f0692e619b..0000000000 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/ArrayFieldsLayout.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import { Button } from '@ballerine/ui'; -import { ArrayFieldTemplateProps } from '@rjsf/utils'; -import { Plus } from 'lucide-react'; - -export const ArrayFieldsLayout = ({ - title, - schema, - items, - canAdd, - onAddClick, -}: ArrayFieldTemplateProps) => { - return ( -
-

{title}

-

{schema.description}

- {items.map(element => ( - {element.children} - ))} - {canAdd ? ( - - ) : null} -
- ); -}; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/TitleLayout/TitleLayout.tsx b/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/TitleLayout/TitleLayout.tsx deleted file mode 100644 index 8fb4c95b72..0000000000 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/TitleLayout/TitleLayout.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { TitleFieldProps } from '@rjsf/utils'; - -export const TitleLayout = ({ id, title, required }: TitleFieldProps) => { - return title ? ( -
-

- {title} {required && *} -

-
- ) : null; -}; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/fields.tsx b/examples/kyb-app/src/common/components/organisms/DynamicForm/fields.tsx deleted file mode 100644 index 1d1cdc97ef..0000000000 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/fields.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { FileInputAdapter } from '@app/common/components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter'; -import { RegistryFieldsType } from '@rjsf/utils'; -import { TextInputAdapter } from '@app/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter'; -import { DateInputAdater } from '@app/common/components/organisms/DynamicForm/components/RSJVInputAdaters/DateInputAdater'; -import { PhoneInputAdapter } from '@app/common/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter'; -import { RJSVInputAdapter } from '@app/common/components/organisms/DynamicForm/components/RSJVInputAdaters/types'; -import { BooleanFieldAdapter } from '@app/common/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter'; - -export const fields: Record> = { - // Component with suffix Field is an overriding of internal RSJV components - StringField: TextInputAdapter, - BooleanField: BooleanFieldAdapter, - - // Component with suffix Input is an extend of supported field types - FileInput: FileInputAdapter, - DateInput: DateInputAdater, - PhoneInput: PhoneInputAdapter, -}; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/utils/file-storage.ts b/examples/kyb-app/src/common/components/organisms/DynamicForm/utils/file-storage.ts deleted file mode 100644 index 3bd666cbba..0000000000 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/utils/file-storage.ts +++ /dev/null @@ -1,19 +0,0 @@ -export class FileStorage { - private storage: Map = new Map(); - - add(key: string, file: File) { - if (this.storage.has(key)) { - this.removeFile(key); - } - - this.storage.set(key, file); - } - - remove(key: string) { - this.removeFile(key); - } - - private removeFile(key: string) { - this.storage.delete(key); - } -} diff --git a/examples/kyb-app/src/common/providers/ViewStateProvider/SequencedViews.tsx b/examples/kyb-app/src/common/providers/ViewStateProvider/SequencedViews.tsx index 7f975896e4..c54011665a 100644 --- a/examples/kyb-app/src/common/providers/ViewStateProvider/SequencedViews.tsx +++ b/examples/kyb-app/src/common/providers/ViewStateProvider/SequencedViews.tsx @@ -1,6 +1,6 @@ import { stateContext } from './state.context'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { AnyChildren, AnyObject } from '@ballerine/ui'; +import { AnyChildren, AnyObject, InputsWarnings } from '@ballerine/ui'; import { View, ViewStateContext } from '@app/common/providers/ViewStateProvider/types'; import { ViewResolver } from '@app/common/providers/ViewStateProvider/components/ViewResolver'; import { useStepper } from '@app/common/hooks/useStepper'; @@ -9,7 +9,6 @@ import { getInitialStepIndexFromContext } from '@app/common/providers/ViewStateP import { convertViewsToPaths } from '@app/common/providers/ViewStateProvider/utils/convertViewsToPaths'; import { ViewsData } from '@app/common/providers/ViewStateProvider/hooks/useViewsDataRepository/types'; import { useViewsDataRepository } from '@app/common/providers/ViewStateProvider/hooks/useViewsDataRepository'; -import { InputsWarnings } from '@app/common/components/organisms/DynamicForm'; const { Provider } = stateContext; interface Props { diff --git a/examples/kyb-app/src/common/providers/ViewStateProvider/types.ts b/examples/kyb-app/src/common/providers/ViewStateProvider/types.ts index 6e691d02e7..9732b44d17 100644 --- a/examples/kyb-app/src/common/providers/ViewStateProvider/types.ts +++ b/examples/kyb-app/src/common/providers/ViewStateProvider/types.ts @@ -1,6 +1,5 @@ -import { InputsWarnings } from '@app/common/components/organisms/DynamicForm'; import { IStep, StepMetadata } from '@app/common/hooks/useStepper'; -import { AnyObject } from '@ballerine/ui'; +import { AnyObject, InputsWarnings } from '@ballerine/ui'; export type SchemaBase = { states: AnyObject }; diff --git a/examples/kyb-app/src/components/organisms/KYBView/flows/BaseFlow/helpers/serialize-workflow-run-data.ts b/examples/kyb-app/src/components/organisms/KYBView/flows/BaseFlow/helpers/serialize-workflow-run-data.ts index 6cdf6b7c45..2891e2791a 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/flows/BaseFlow/helpers/serialize-workflow-run-data.ts +++ b/examples/kyb-app/src/components/organisms/KYBView/flows/BaseFlow/helpers/serialize-workflow-run-data.ts @@ -1,8 +1,8 @@ -import { base64ToFile } from '@app/common/utils/base64-to-file'; import { parseBase64FileWithMetadata } from '@app/common/utils/parse-base64-file-with-metadata'; import { getFilesId } from '@app/components/organisms/KYBView/helpers/get-file-ids'; import { WorkflowFlowData } from '@app/domains/workflows/flow-data.type'; import { WorkflowUpdatePayload } from '@app/domains/workflows/types'; +import { base64ToFile } from '@ballerine/ui'; import { v4 as uuidv4 } from 'uuid'; export const serializeWorkflowRunData = async ( diff --git a/examples/kyb-app/src/components/organisms/KYBView/views.ts b/examples/kyb-app/src/components/organisms/KYBView/views.ts index 68f5174067..3e6d1eaca5 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views.ts +++ b/examples/kyb-app/src/components/organisms/KYBView/views.ts @@ -27,7 +27,6 @@ export const kybViews: View[] = [ label: 'Company Activity', key: 'companyActivity', Component: CompanyActivityView, - active: true, }, { label: 'Bank Information', diff --git a/examples/kyb-app/src/components/organisms/KYBView/views/BankInformationView/BankInformationView.tsx b/examples/kyb-app/src/components/organisms/KYBView/views/BankInformationView/BankInformationView.tsx index f1f4a0b7a9..8ea09ce74a 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views/BankInformationView/BankInformationView.tsx +++ b/examples/kyb-app/src/components/organisms/KYBView/views/BankInformationView/BankInformationView.tsx @@ -1,10 +1,10 @@ -import { DynamicForm } from '@app/common/components/organisms/DynamicForm'; import { AppShell } from '@app/components/layouts/AppShell'; import { useViewState } from '@app/common/providers/ViewStateProvider'; import { WorkflowFlowData } from '@app/domains/workflows/flow-data.type'; import { BankInformationContext } from './types'; import { bankInformationSchema } from '@app/components/organisms/KYBView/views/BankInformationView/bank-information.schema'; import { bankInformationUISchema } from '@app/components/organisms/KYBView/views/BankInformationView/bank-information.ui-schema'; +import { DynamicForm } from '@ballerine/ui'; export const BankInformationView = () => { const { context, saveAndPerformTransition } = useViewState(); diff --git a/examples/kyb-app/src/components/organisms/KYBView/views/BankInformationView/bank-information.ui-schema.ts b/examples/kyb-app/src/components/organisms/KYBView/views/BankInformationView/bank-information.ui-schema.ts index 6c5c7f5939..bdc8a1622f 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views/BankInformationView/bank-information.ui-schema.ts +++ b/examples/kyb-app/src/components/organisms/KYBView/views/BankInformationView/bank-information.ui-schema.ts @@ -1,6 +1,11 @@ import { UiSchema } from '@rjsf/utils'; export const bankInformationUISchema: UiSchema = { + 'ui:options': { + submitButtonOptions: { + submitText: 'Continue', + }, + }, country: { 'ui:placeholder': 'United Kingdom', }, diff --git a/examples/kyb-app/src/components/organisms/KYBView/views/CompanyActivityView/CompanyActivityView.tsx b/examples/kyb-app/src/components/organisms/KYBView/views/CompanyActivityView/CompanyActivityView.tsx index f31ab62089..7bd8292869 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views/CompanyActivityView/CompanyActivityView.tsx +++ b/examples/kyb-app/src/components/organisms/KYBView/views/CompanyActivityView/CompanyActivityView.tsx @@ -1,9 +1,9 @@ -import { DynamicForm } from '@app/common/components/organisms/DynamicForm'; import { useViewState } from '@app/common/providers/ViewStateProvider'; import { AppShell } from '@app/components/layouts/AppShell'; import { companyActivitySchema } from '@app/components/organisms/KYBView/views/CompanyActivityView/companyActivity.schema'; import { companyActivityUISchema } from '@app/components/organisms/KYBView/views/CompanyActivityView/companyActivity.ui-schema'; import { WorkflowFlowData } from '@app/domains/workflows/flow-data.type'; +import { DynamicForm } from '@ballerine/ui'; export const CompanyActivityView = () => { const { context, saveAndPerformTransition } = useViewState(); diff --git a/examples/kyb-app/src/components/organisms/KYBView/views/CompanyActivityView/companyActivity.ui-schema.ts b/examples/kyb-app/src/components/organisms/KYBView/views/CompanyActivityView/companyActivity.ui-schema.ts index cabd66d69a..2476b1723e 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views/CompanyActivityView/companyActivity.ui-schema.ts +++ b/examples/kyb-app/src/components/organisms/KYBView/views/CompanyActivityView/companyActivity.ui-schema.ts @@ -1,6 +1,11 @@ import { UiSchema } from '@rjsf/utils'; export const companyActivityUISchema: UiSchema = { + 'ui:options': { + submitButtonOptions: { + submitText: 'Continue', + }, + }, industry: { 'ui:placeholder': 'Food & Beverages', }, diff --git a/examples/kyb-app/src/components/organisms/KYBView/views/CompanyDocumentsView/CompanyDocumentsView.tsx b/examples/kyb-app/src/components/organisms/KYBView/views/CompanyDocumentsView/CompanyDocumentsView.tsx index ef5e1cd7b9..0f6a4ab563 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views/CompanyDocumentsView/CompanyDocumentsView.tsx +++ b/examples/kyb-app/src/components/organisms/KYBView/views/CompanyDocumentsView/CompanyDocumentsView.tsx @@ -1,22 +1,23 @@ -import { DynamicForm } from '@app/common/components/organisms/DynamicForm'; import { useViewState } from '@app/common/providers/ViewStateProvider'; import { AppShell } from '@app/components/layouts/AppShell'; import { ViewHeader } from '@app/components/organisms/KYBView/components/ViewHeader'; import { companyDocumentsSchema } from '@app/components/organisms/KYBView/views/CompanyDocumentsView/company-documents.schema.'; import { companyDocumetsUISchema } from '@app/components/organisms/KYBView/views/CompanyDocumentsView/company-documents.ui-schema'; import { DocumentsContext, WorkflowFlowData } from '@app/domains/workflows/flow-data.type'; +import { DynamicForm } from '@ballerine/ui'; import { useCallback } from 'react'; export const CompanyDocumentsView = () => { - const { context, state, warnings, saveAndPerformTransition } = useViewState(); + const { context, state, warnings, save, finish } = useViewState(); const handleSubmit = useCallback( (values: DocumentsContext) => { - void saveAndPerformTransition(values); + void save(values).then(finalContext => { + finish(finalContext); + }); }, - [saveAndPerformTransition], + [save, finish], ); - return ( }> @@ -25,7 +26,7 @@ export const CompanyDocumentsView = () => { formData={context.flowData[state] as DocumentsContext} uiSchema={companyDocumetsUISchema} onSubmit={values => { - void handleSubmit(values); + void handleSubmit(values as DocumentsContext); }} warnings={warnings} /> diff --git a/examples/kyb-app/src/components/organisms/KYBView/views/CompanyDocumentsView/company-documents.ui-schema.ts b/examples/kyb-app/src/components/organisms/KYBView/views/CompanyDocumentsView/company-documents.ui-schema.ts index c04bb297e7..a795845e0b 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views/CompanyDocumentsView/company-documents.ui-schema.ts +++ b/examples/kyb-app/src/components/organisms/KYBView/views/CompanyDocumentsView/company-documents.ui-schema.ts @@ -1,6 +1,11 @@ import { UiSchema } from '@rjsf/utils'; export const companyDocumetsUISchema: UiSchema = { + 'ui:options': { + submitButtonOptions: { + submitText: 'Continue', + }, + }, registrationCertificate: { 'ui:field': 'FileInput', }, diff --git a/examples/kyb-app/src/components/organisms/KYBView/views/CompanyInformationView/CompanyInformationView.tsx b/examples/kyb-app/src/components/organisms/KYBView/views/CompanyInformationView/CompanyInformationView.tsx index 4b92a48a9c..66eb61b6a5 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views/CompanyInformationView/CompanyInformationView.tsx +++ b/examples/kyb-app/src/components/organisms/KYBView/views/CompanyInformationView/CompanyInformationView.tsx @@ -1,9 +1,9 @@ -import { DynamicForm } from '@app/common/components/organisms/DynamicForm'; import { useViewState } from '@app/common/providers/ViewStateProvider'; import { AppShell } from '@app/components/layouts/AppShell'; import { companyInformationSchema } from '@app/components/organisms/KYBView/views/CompanyInformationView/company-information.schema'; import { companyInformationUISchema } from '@app/components/organisms/KYBView/views/CompanyInformationView/company-information.ui-schema'; import { WorkflowFlowData } from '@app/domains/workflows/flow-data.type'; +import { DynamicForm } from '@ballerine/ui'; export const CompanyInformationView = () => { const { context, saveAndPerformTransition } = useViewState(); diff --git a/examples/kyb-app/src/components/organisms/KYBView/views/CompanyInformationView/company-information.ui-schema.ts b/examples/kyb-app/src/components/organisms/KYBView/views/CompanyInformationView/company-information.ui-schema.ts index 7bc092969f..567f658698 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views/CompanyInformationView/company-information.ui-schema.ts +++ b/examples/kyb-app/src/components/organisms/KYBView/views/CompanyInformationView/company-information.ui-schema.ts @@ -1,6 +1,11 @@ import { UiSchema } from '@rjsf/utils'; export const companyInformationUISchema: UiSchema = { + 'ui:options': { + submitButtonOptions: { + submitText: 'Continue', + }, + }, registrationNumber: { 'ui:placeholder': 'CRN12345678', }, diff --git a/examples/kyb-app/src/components/organisms/KYBView/views/HeadquartersView/HeadquartersView.tsx b/examples/kyb-app/src/components/organisms/KYBView/views/HeadquartersView/HeadquartersView.tsx index 26c1f0b00e..d1dccf4da4 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views/HeadquartersView/HeadquartersView.tsx +++ b/examples/kyb-app/src/components/organisms/KYBView/views/HeadquartersView/HeadquartersView.tsx @@ -1,10 +1,10 @@ -import { DynamicForm } from '@app/common/components/organisms/DynamicForm'; import { useViewState } from '@app/common/providers/ViewStateProvider'; import { AppShell } from '@app/components/layouts/AppShell'; import { headquartersSchema } from '@app/components/organisms/KYBView/views/HeadquartersView/headquarters.schema'; import { headquartersUISchema } from '@app/components/organisms/KYBView/views/HeadquartersView/headquarters.ui-schema'; import { HeadquartersContext } from '@app/components/organisms/KYBView/views/HeadquartersView/types'; import { WorkflowFlowData } from '@app/domains/workflows/flow-data.type'; +import { DynamicForm } from '@ballerine/ui'; export const HeadquartersView = () => { const { context, saveAndPerformTransition } = useViewState(); diff --git a/examples/kyb-app/src/components/organisms/KYBView/views/HeadquartersView/headquarters.ui-schema.ts b/examples/kyb-app/src/components/organisms/KYBView/views/HeadquartersView/headquarters.ui-schema.ts index 7e09cca92d..8a6707336b 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views/HeadquartersView/headquarters.ui-schema.ts +++ b/examples/kyb-app/src/components/organisms/KYBView/views/HeadquartersView/headquarters.ui-schema.ts @@ -1,6 +1,11 @@ import { UiSchema } from '@rjsf/utils'; export const headquartersUISchema: UiSchema = { + 'ui:options': { + submitButtonOptions: { + submitText: 'Continue', + }, + }, address: { 'ui:placeholder': '10 Downing Street, London, UK, SW1A 2AA', }, diff --git a/examples/kyb-app/src/components/organisms/KYBView/views/PersonalInformationView/PersonalInformationView.tsx b/examples/kyb-app/src/components/organisms/KYBView/views/PersonalInformationView/PersonalInformationView.tsx index f92e4b5119..6f38777079 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views/PersonalInformationView/PersonalInformationView.tsx +++ b/examples/kyb-app/src/components/organisms/KYBView/views/PersonalInformationView/PersonalInformationView.tsx @@ -1,4 +1,3 @@ -import { DynamicForm } from '@app/common/components/organisms/DynamicForm'; import { useViewState } from '@app/common/providers/ViewStateProvider'; import { AppShell } from '@app/components/layouts/AppShell'; import { ViewHeader } from '@app/components/organisms/KYBView/components/ViewHeader'; @@ -9,6 +8,7 @@ import { PersonalInformationContext, WorkflowFlowData, } from '@app/domains/workflows/flow-data.type'; +import { DynamicForm } from '@ballerine/ui'; import { useCallback } from 'react'; export const PersonalInformationView = () => { diff --git a/examples/kyb-app/src/components/organisms/KYBView/views/ShareholdersView/ShareholdersView.tsx b/examples/kyb-app/src/components/organisms/KYBView/views/ShareholdersView/ShareholdersView.tsx index 9afa23071b..0121556534 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views/ShareholdersView/ShareholdersView.tsx +++ b/examples/kyb-app/src/components/organisms/KYBView/views/ShareholdersView/ShareholdersView.tsx @@ -1,24 +1,14 @@ -import { DynamicForm } from '@app/common/components/organisms/DynamicForm'; import { useViewState } from '@app/common/providers/ViewStateProvider'; import { AppShell } from '@app/components/layouts/AppShell'; -import { useCallback } from 'react'; import { shareholdersSchema } from './shareholders.schema'; import { ViewHeader } from '@app/components/organisms/KYBView/components/ViewHeader'; import { UBOSContext, WorkflowFlowData } from '@app/domains/workflows/flow-data.type'; import { FinalView } from '@app/components/organisms/KYBView/views/ShareholdersView/components/FinalView'; import { shareholdersUISchema } from '@app/components/organisms/KYBView/views/ShareholdersView/shareholders.ui-schema'; +import { DynamicForm } from '@ballerine/ui'; export const ShareholdersView = () => { - const { context, state, isFinished, save, finish } = useViewState(); - - const handleSubmit = useCallback( - (values: UBOSContext[]) => { - void save(values).then(finalContext => { - finish(finalContext); - }); - }, - [save, finish], - ); + const { context, state, isFinished, saveAndPerformTransition } = useViewState(); return !isFinished ? ( }> @@ -27,7 +17,7 @@ export const ShareholdersView = () => { schema={shareholdersSchema} uiSchema={shareholdersUISchema} formData={(context.flowData[state] as UBOSContext[]) || []} - onSubmit={values => handleSubmit(values)} + onSubmit={values => void saveAndPerformTransition(values)} /> ) : ( diff --git a/examples/kyb-app/src/components/organisms/KYBView/views/ShareholdersView/shareholders.ui-schema.ts b/examples/kyb-app/src/components/organisms/KYBView/views/ShareholdersView/shareholders.ui-schema.ts index c4a7dcc579..32dd191915 100644 --- a/examples/kyb-app/src/components/organisms/KYBView/views/ShareholdersView/shareholders.ui-schema.ts +++ b/examples/kyb-app/src/components/organisms/KYBView/views/ShareholdersView/shareholders.ui-schema.ts @@ -1,6 +1,11 @@ import { UiSchema } from '@rjsf/utils'; export const shareholdersUISchema: UiSchema = { + 'ui:options': { + submitButtonOptions: { + submitText: 'Continue', + }, + }, shareholders: { items: { name: { diff --git a/packages/ui/package.json b/packages/ui/package.json index 44f399f2e4..4f3a76e447 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -35,6 +35,9 @@ "@radix-ui/react-popover": "^1.0.6", "@radix-ui/react-scroll-area": "^1.0.2", "@radix-ui/react-slot": "^1.0.1", + "@rjsf/core": "^5.9.0", + "@rjsf/utils": "^5.9.0", + "@rjsf/validator-ajv8": "^5.9.0", "@tanstack/react-table": "^8.9.2", "class-variance-authority": "^0.6.0", "clsx": "^1.2.1", diff --git a/packages/ui/src/common/index.ts b/packages/ui/src/common/index.ts index 968a286718..659aebd4ca 100644 --- a/packages/ui/src/common/index.ts +++ b/packages/ui/src/common/index.ts @@ -1,2 +1,3 @@ export * from './enums'; export * from './types'; +export * from './utils'; diff --git a/examples/kyb-app/src/common/utils/base64-to-file.ts b/packages/ui/src/common/utils/base64-to-file.ts similarity index 100% rename from examples/kyb-app/src/common/utils/base64-to-file.ts rename to packages/ui/src/common/utils/base64-to-file.ts diff --git a/examples/kyb-app/src/common/utils/file-to-base64.ts b/packages/ui/src/common/utils/file-to-base64.ts similarity index 100% rename from examples/kyb-app/src/common/utils/file-to-base64.ts rename to packages/ui/src/common/utils/file-to-base64.ts diff --git a/packages/ui/src/common/utils/index.ts b/packages/ui/src/common/utils/index.ts new file mode 100644 index 0000000000..5cd4ac8976 --- /dev/null +++ b/packages/ui/src/common/utils/index.ts @@ -0,0 +1,2 @@ +export * from './base64-to-file'; +export * from './file-to-base64'; diff --git a/packages/ui/src/components/organisms/DynamicForm/DynamicForm.stories.tsx b/packages/ui/src/components/organisms/DynamicForm/DynamicForm.stories.tsx new file mode 100644 index 0000000000..df2b6f7dc1 --- /dev/null +++ b/packages/ui/src/components/organisms/DynamicForm/DynamicForm.stories.tsx @@ -0,0 +1,207 @@ +import { DynamicForm } from '@components/organisms/DynamicForm/DynamicForm'; +import { RJSFSchema, UiSchema } from '@rjsf/utils'; + +export default { + component: DynamicForm, +}; + +const simpleFormSchema: RJSFSchema = { + type: 'object', + properties: { + name: { + type: 'string', + title: 'First Name', + }, + lastName: { + type: 'string', + title: 'Last Name', + }, + }, +}; + +export const SimpleForm = { + render: () => {}} />, +}; + +const fileInputFormSchema: RJSFSchema = { + type: 'object', + properties: { + file: { + type: 'string', + title: 'Document', + }, + }, +}; + +const fileInputUISchema: UiSchema = { + file: { + 'ui:field': 'FileInput', + }, +}; + +export const FileInputsForm = { + render: () => ( + {}} /> + ), +}; + +const customFieldsSchema: RJSFSchema = { + type: 'object', + properties: { + phone: { + title: 'Phone', + type: 'string', + }, + file: { + title: 'Document', + type: 'string', + }, + date: { + title: 'Date', + type: 'string', + }, + select: { + title: 'Select', + type: 'string', + oneOf: [ + { title: 'Option - 1', const: 'option_value_1' }, + { title: 'Option - 2', const: 'option_value_2' }, + ], + }, + }, +}; + +const customFieldsUISChema = { + phone: { + 'ui:label': true, + 'ui:field': 'PhoneInput', + }, + file: { + 'ui:field': 'FileInput', + }, + date: { + 'ui:field': 'DateInput', + }, +}; + +export const CustomFieldsForm = { + render: () => ( + {}} /> + ), +}; + +const complexFormScheme: RJSFSchema = { + type: 'object', + properties: { + firstName: { + type: 'string', + title: 'First Name', + }, + lastName: { + type: 'string', + title: 'Last Name', + }, + birthDate: { + type: 'string', + title: 'Date of Birth', + }, + passportPhoto: { + type: 'string', + title: 'Passport photo', + }, + phoneNumber: { + type: 'string', + title: 'Phone Number', + }, + country: { + type: 'string', + title: 'Country', + oneOf: [ + { + title: 'Bhutan', + const: 'bhutan', + }, + { + title: 'Jamaica', + const: 'jamaica', + }, + { + title: 'Estonia', + const: 'estonia', + }, + { + title: 'Senegal', + const: 'senegal', + }, + { + title: 'Fiji', + const: 'fiji', + }, + ], + }, + childrens: { + title: 'Childrens', + type: 'array', + items: { + type: 'object', + title: 'Children', + properties: { + name: { + type: 'string', + title: 'First Name', + }, + lastName: { + type: 'string', + title: 'Last Name', + }, + birthDate: { + type: 'string', + title: 'Birth Date', + }, + birthCertificate: { + type: 'string', + title: 'Birth Certificate', + }, + }, + }, + }, + }, +}; + +const complexFormUISchema = { + firstName: { + 'ui:placeholder': 'John', + }, + lastName: { + 'ui:placeholder': 'Doe', + }, + birthDate: { + 'ui:field': 'DateInput', + }, + passportPhoto: { + 'ui:field': 'FileInput', + }, + phoneNumber: { + 'ui:field': 'PhoneInput', + }, + childrens: { + addText: 'Add Children', + deleteText: 'Remove Children', + + items: { + titleClassName: 'text-sm', + birthDate: { + 'ui:field': 'DateInput', + }, + birthCertificate: { + 'ui:field': 'FileInput', + }, + }, + }, +}; + +export const ComplexForm = { + render: () => ( + {}} /> + ), +}; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/DynamicForm.tsx b/packages/ui/src/components/organisms/DynamicForm/DynamicForm.tsx similarity index 91% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/DynamicForm.tsx rename to packages/ui/src/components/organisms/DynamicForm/DynamicForm.tsx index 9dcffaaa79..2c79ddcf0c 100644 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/DynamicForm.tsx +++ b/packages/ui/src/components/organisms/DynamicForm/DynamicForm.tsx @@ -1,8 +1,8 @@ import { RJSFSchema, RegistryFieldsType, UiSchema } from '@rjsf/utils'; import Form, { IChangeEvent } from '@rjsf/core'; import validator from '@rjsf/validator-ajv8'; -import { fields } from '@app/common/components/organisms/DynamicForm/fields'; -import { templates } from '@app/common/components/organisms/DynamicForm/templates'; +import { fields } from './fields'; +import { templates } from './templates'; import { useCallback, useMemo } from 'react'; import { Provider, WarningsContext } from './warnings.context'; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/BooleanFieldAdapter.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/BooleanFieldAdapter.tsx similarity index 61% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/BooleanFieldAdapter.tsx rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/BooleanFieldAdapter.tsx index bb56d74877..64b1f8c9ed 100644 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/BooleanFieldAdapter.tsx +++ b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/BooleanFieldAdapter.tsx @@ -1,15 +1,7 @@ -import { RJSVInputAdapter } from '@app/common/components/organisms/DynamicForm/components/RSJVInputAdaters/types'; -import { Checkbox } from '@ballerine/ui'; -import '@ballerine/ui/dist/style.css'; - -export const BooleanFieldAdapter: RJSVInputAdapter = ({ - formData, - uiSchema, - schema, - onChange, -}) => { - console.log('schema', schema); +import { Checkbox } from '@components/atoms'; +import { RJSVInputAdapter } from '@components/organisms/DynamicForm/components/RSJVInputAdaters/types'; +export const BooleanFieldAdapter: RJSVInputAdapter = ({ formData, schema, onChange }) => { return (
{ return ( diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/DateInputAdater/index.ts b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/DateInputAdater/index.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/DateInputAdater/index.ts rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/DateInputAdater/index.ts diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/FileInputAdapter.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/FileInputAdapter.tsx similarity index 81% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/FileInputAdapter.tsx rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/FileInputAdapter.tsx index f4772ba906..ecf2fe1e21 100644 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/FileInputAdapter.tsx +++ b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/FileInputAdapter.tsx @@ -1,9 +1,7 @@ -import { RJSVInputAdapter } from '@app/common/components/organisms/DynamicForm/components/RSJVInputAdaters/types'; -import { base64ToFile } from '@app/common/utils/base64-to-file'; -import { fileToBase64 } from '@app/common/utils/file-to-base64'; -import { isBase64 } from '@app/utils/is-base-64'; -import { Input } from '@ballerine/ui'; -import { Label } from '@ballerine/ui'; +import { base64ToFile, fileToBase64 } from '@common/utils'; +import { Input, Label } from '@components/atoms'; +import { RJSVInputAdapter } from '@components/organisms/DynamicForm/components/RSJVInputAdaters/types'; +import { isBase64 } from '@components/organisms/DynamicForm/utils/is-base64'; import { useCallback, useEffect, useRef } from 'react'; export const FileInputAdapter: RJSVInputAdapter = ({ diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/index.ts b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/index.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/index.ts rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter/index.ts diff --git a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/PhoneInputAdapter.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/PhoneInputAdapter.tsx new file mode 100644 index 0000000000..a44f597748 --- /dev/null +++ b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/PhoneInputAdapter.tsx @@ -0,0 +1,8 @@ +import { PhoneNumberInput } from '@components/atoms'; +import { RJSVInputAdapter } from '@components/organisms/DynamicForm/components/RSJVInputAdaters/types'; + +export const PhoneInputAdapter: RJSVInputAdapter = ({ formData, onChange }) => { + return ( + void onChange(value)} /> + ); +}; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/index.ts b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/index.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/index.ts rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/index.ts diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/TextInputAdapter.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/TextInputAdapter.tsx similarity index 82% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/TextInputAdapter.tsx rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/TextInputAdapter.tsx index 0c7e37da6c..8efe83a449 100644 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/TextInputAdapter.tsx +++ b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/TextInputAdapter.tsx @@ -4,11 +4,9 @@ import { TextField } from './components/TextField'; import { TextInputFieldType } from './types'; import { FieldProps } from '@rjsf/utils'; import { useMemo } from 'react'; -import { RJSVInputAdapter } from '@app/common/components/organisms/DynamicForm/components/RSJVInputAdaters/types'; +import { RJSVInputAdapter } from '@components/organisms/DynamicForm/components/RSJVInputAdaters/types'; export const TextInputAdapter: RJSVInputAdapter = props => { - console.log('props', props); - const InputComponent = useMemo(() => { const fieldsMap: Record>> = { select: SelectField, diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx similarity index 86% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx index 1e9bfa9fff..2616251732 100644 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx +++ b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx @@ -1,4 +1,5 @@ -import { AnyObject, DropdownOption, DropdownInput } from '@ballerine/ui'; +import { AnyObject } from '@common/types'; +import { DropdownInput, DropdownOption } from '@components/molecules'; import { FieldProps } from '@rjsf/utils'; import { useMemo } from 'react'; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/index.ts b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/index.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/index.ts rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/index.ts diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/TextField.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/TextField.tsx similarity index 88% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/TextField.tsx rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/TextField.tsx index 9c16e9b949..5f3a21d23c 100644 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/TextField.tsx +++ b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/TextField.tsx @@ -1,5 +1,4 @@ -import { TextArea } from '@ballerine/ui'; -import { Input } from '@ballerine/ui'; +import { Input, TextArea } from '@components/atoms'; import { FieldProps } from '@rjsf/utils'; import { useCallback } from 'react'; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/index.ts b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/index.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/index.ts rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/index.ts diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/helpers/detectFieldType.ts b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/helpers/detectFieldType.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/helpers/detectFieldType.ts rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/helpers/detectFieldType.ts diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/index.ts b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/index.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/index.ts rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/index.ts diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/types.ts b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/types.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/types.ts rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/types.ts diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/types.ts b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/types.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/RSJVInputAdaters/types.ts rename to packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/types.ts diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/atoms/ErrorMessage/ErrorMessage.tsx b/packages/ui/src/components/organisms/DynamicForm/components/atoms/ErrorMessage/ErrorMessage.tsx similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/atoms/ErrorMessage/ErrorMessage.tsx rename to packages/ui/src/components/organisms/DynamicForm/components/atoms/ErrorMessage/ErrorMessage.tsx diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/atoms/ErrorMessage/index.ts b/packages/ui/src/components/organisms/DynamicForm/components/atoms/ErrorMessage/index.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/atoms/ErrorMessage/index.ts rename to packages/ui/src/components/organisms/DynamicForm/components/atoms/ErrorMessage/index.ts diff --git a/packages/ui/src/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/ArrayFieldsLayout.tsx b/packages/ui/src/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/ArrayFieldsLayout.tsx new file mode 100644 index 0000000000..f9e139aef0 --- /dev/null +++ b/packages/ui/src/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/ArrayFieldsLayout.tsx @@ -0,0 +1,37 @@ +import { ArrayFieldTemplateProps } from '@rjsf/utils'; +import { Plus } from 'lucide-react'; +import { Button } from '@components/atoms'; +import { AnyObject } from '@common/types'; + +export const ArrayFieldsLayout = ({ + title, + items, + canAdd, + uiSchema, + onAddClick, +}: ArrayFieldTemplateProps) => { + const { addText = 'Add', removeText = 'Delete' } = uiSchema as AnyObject; + + return ( +
+

{title}

+ {items.map(element => ( +
+
{element.children}
+ + {removeText} + +
+ ))} + {canAdd ? ( + + ) : null} +
+ ); +}; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/index.ts b/packages/ui/src/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/index.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/index.ts rename to packages/ui/src/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/index.ts diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/FieldLayout/FieldLayout.tsx b/packages/ui/src/components/organisms/DynamicForm/components/layouts/FieldLayout/FieldLayout.tsx similarity index 64% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/FieldLayout/FieldLayout.tsx rename to packages/ui/src/components/organisms/DynamicForm/components/layouts/FieldLayout/FieldLayout.tsx index 10a574ca7b..26d9a97127 100644 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/FieldLayout/FieldLayout.tsx +++ b/packages/ui/src/components/organisms/DynamicForm/components/layouts/FieldLayout/FieldLayout.tsx @@ -1,6 +1,6 @@ -import { ErrorsList } from '@app/common/components/organisms/DynamicForm/components/molecules/ErrorsList'; -import { useWarnings } from '@app/common/components/organisms/DynamicForm/hooks/useWarnings/useWarnings'; -import { Label } from '@ballerine/ui'; +import { Label } from '@components/atoms'; +import { ErrorsList } from '@components/organisms/DynamicForm/components/molecules/ErrorsList'; +import { useWarnings } from '@components/organisms/DynamicForm/hooks/useWarnings/useWarnings'; import { FieldTemplateProps } from '@rjsf/utils'; export const FieldLayout = ({ @@ -17,7 +17,7 @@ export const FieldLayout = ({ const isLabelEnabled = displayLabel || (uiSchema && uiSchema['ui:label']); return ( -
+
{isLabelEnabled ? : null} {children} {rawErrors ? : null} @@ -27,7 +27,7 @@ export const FieldLayout = ({ type="warning" /> ) : null} -

{description}

+ {description}
); }; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/FieldLayout/index.ts b/packages/ui/src/components/organisms/DynamicForm/components/layouts/FieldLayout/index.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/FieldLayout/index.ts rename to packages/ui/src/components/organisms/DynamicForm/components/layouts/FieldLayout/index.ts diff --git a/packages/ui/src/components/organisms/DynamicForm/components/layouts/TitleLayout/TitleLayout.tsx b/packages/ui/src/components/organisms/DynamicForm/components/layouts/TitleLayout/TitleLayout.tsx new file mode 100644 index 0000000000..5dfb6738ef --- /dev/null +++ b/packages/ui/src/components/organisms/DynamicForm/components/layouts/TitleLayout/TitleLayout.tsx @@ -0,0 +1,18 @@ +import { getArrayFieldItemTitleIndex } from '@components/organisms/DynamicForm/components/layouts/TitleLayout/helpers'; +import { TitleFieldProps } from '@rjsf/utils'; +import clsx from 'clsx'; + +export const TitleLayout = ({ id, title, required, uiSchema }: TitleFieldProps) => { + const { titleClassName = '' } = uiSchema || {}; + + const index = getArrayFieldItemTitleIndex(id); + + return title ? ( +
+

+ {title} {`${typeof index === 'number' ? `- ${index + 1}` : ''}`}{' '} + {required && *} +

+
+ ) : null; +}; diff --git a/packages/ui/src/components/organisms/DynamicForm/components/layouts/TitleLayout/helpers.ts b/packages/ui/src/components/organisms/DynamicForm/components/layouts/TitleLayout/helpers.ts new file mode 100644 index 0000000000..5e73d81984 --- /dev/null +++ b/packages/ui/src/components/organisms/DynamicForm/components/layouts/TitleLayout/helpers.ts @@ -0,0 +1,9 @@ +export const getArrayFieldItemTitleIndex = (fieldId: string): number | null => { + const lastIndex = fieldId.lastIndexOf('__'); + + if (lastIndex === -1) return null; + + const parseResult = parseInt(fieldId.slice(lastIndex - 1, lastIndex)); + + return typeof parseResult === 'number' && !isNaN(parseResult) ? parseResult : null; +}; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/TitleLayout/index.ts b/packages/ui/src/components/organisms/DynamicForm/components/layouts/TitleLayout/index.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/TitleLayout/index.ts rename to packages/ui/src/components/organisms/DynamicForm/components/layouts/TitleLayout/index.ts diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout/SubmitLayout.tsx b/packages/ui/src/components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout/SubmitLayout.tsx similarity index 92% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout/SubmitLayout.tsx rename to packages/ui/src/components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout/SubmitLayout.tsx index 7e7b599483..194715acad 100644 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout/SubmitLayout.tsx +++ b/packages/ui/src/components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout/SubmitLayout.tsx @@ -1,4 +1,4 @@ -import { Button } from '@ballerine/ui'; +import { Button } from '@components/atoms'; import { SubmitButtonProps, getSubmitButtonOptions } from '@rjsf/utils'; export const SubmitLayout = ({ uiSchema }: SubmitButtonProps) => { diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout/index.ts b/packages/ui/src/components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout/index.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout/index.ts rename to packages/ui/src/components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout/index.ts diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/molecules/ErrorsList/ErrorsList.tsx b/packages/ui/src/components/organisms/DynamicForm/components/molecules/ErrorsList/ErrorsList.tsx similarity index 82% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/molecules/ErrorsList/ErrorsList.tsx rename to packages/ui/src/components/organisms/DynamicForm/components/molecules/ErrorsList/ErrorsList.tsx index 6d3bfc27c8..5db624939a 100644 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/molecules/ErrorsList/ErrorsList.tsx +++ b/packages/ui/src/components/organisms/DynamicForm/components/molecules/ErrorsList/ErrorsList.tsx @@ -1,5 +1,5 @@ +import { ErrorMessage } from '@components/organisms/DynamicForm/components/atoms/ErrorMessage'; import clsx from 'clsx'; -import { ErrorMessage } from '@app/common/components/organisms/DynamicForm/components/atoms/ErrorMessage'; interface Props { errors: string[]; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/components/molecules/ErrorsList/index.ts b/packages/ui/src/components/organisms/DynamicForm/components/molecules/ErrorsList/index.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/components/molecules/ErrorsList/index.ts rename to packages/ui/src/components/organisms/DynamicForm/components/molecules/ErrorsList/index.ts diff --git a/packages/ui/src/components/organisms/DynamicForm/fields.tsx b/packages/ui/src/components/organisms/DynamicForm/fields.tsx new file mode 100644 index 0000000000..4b5ec38a76 --- /dev/null +++ b/packages/ui/src/components/organisms/DynamicForm/fields.tsx @@ -0,0 +1,18 @@ +import { BooleanFieldAdapter } from '@components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter'; +import { DateInputAdater } from '@components/organisms/DynamicForm/components/RSJVInputAdaters/DateInputAdater'; +import { FileInputAdapter } from '@components/organisms/DynamicForm/components/RSJVInputAdaters/FileInputAdapter'; +import { PhoneInputAdapter } from '@components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter'; +import { TextInputAdapter } from '@components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter'; +import { RJSVInputAdapter } from '@components/organisms/DynamicForm/components/RSJVInputAdaters/types'; +import { RegistryFieldsType } from '@rjsf/utils'; + +export const fields: Record> = { + // Component with suffix Field is an overriding of internal RSJV components + StringField: TextInputAdapter, + BooleanField: BooleanFieldAdapter, + + // Component with suffix Input is an extend of supported field types + FileInput: FileInputAdapter, + DateInput: DateInputAdater, + PhoneInput: PhoneInputAdapter, +}; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/hooks/useWarnings/useWarnings.ts b/packages/ui/src/components/organisms/DynamicForm/hooks/useWarnings/useWarnings.ts similarity index 53% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/hooks/useWarnings/useWarnings.ts rename to packages/ui/src/components/organisms/DynamicForm/hooks/useWarnings/useWarnings.ts index 3e3a46e0bc..af46748de4 100644 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/hooks/useWarnings/useWarnings.ts +++ b/packages/ui/src/components/organisms/DynamicForm/hooks/useWarnings/useWarnings.ts @@ -1,8 +1,8 @@ -import { warningsContext } from '@app/common/components/organisms/DynamicForm/warnings.context'; import { useContext, useMemo } from 'react'; import get from 'lodash/get'; -import { convertFieldIdToObjectPath } from '@app/common/components/organisms/DynamicForm/hooks/useWarnings/utils/convertFieldIdToObjectPath'; -import { InputWarning } from '@app/common/components/organisms/DynamicForm/DynamicForm'; +import { warningsContext } from '@components/organisms/DynamicForm/warnings.context'; +import { convertFieldIdToObjectPath } from '@components/organisms/DynamicForm/hooks/useWarnings/utils/convertFieldIdToObjectPath'; +import { InputWarning } from '@components/organisms/DynamicForm/DynamicForm'; export const useWarnings = (fieldId: string) => { const { warnings } = useContext(warningsContext); diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/hooks/useWarnings/utils/convertFieldIdToObjectPath.ts b/packages/ui/src/components/organisms/DynamicForm/hooks/useWarnings/utils/convertFieldIdToObjectPath.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/hooks/useWarnings/utils/convertFieldIdToObjectPath.ts rename to packages/ui/src/components/organisms/DynamicForm/hooks/useWarnings/utils/convertFieldIdToObjectPath.ts diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/index.ts b/packages/ui/src/components/organisms/DynamicForm/index.ts similarity index 100% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/index.ts rename to packages/ui/src/components/organisms/DynamicForm/index.ts diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/templates.tsx b/packages/ui/src/components/organisms/DynamicForm/templates.tsx similarity index 54% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/templates.tsx rename to packages/ui/src/components/organisms/DynamicForm/templates.tsx index e5cb66aeea..a08fc03235 100644 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/templates.tsx +++ b/packages/ui/src/components/organisms/DynamicForm/templates.tsx @@ -1,8 +1,8 @@ -import { FieldLayout } from '@app/common/components/organisms/DynamicForm/components/layouts/FieldLayout'; -import { SubmitLayout } from '@app/common/components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout'; -import { TitleLayout } from '@app/common/components/organisms/DynamicForm/components/layouts/TitleLayout'; import { TemplatesType } from '@rjsf/utils'; -import { ArrayFieldsLayout } from '@app/common/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout'; +import { FieldLayout } from '@components/organisms/DynamicForm/components/layouts/FieldLayout'; +import { TitleLayout } from '@components/organisms/DynamicForm/components/layouts/TitleLayout'; +import { ArrayFieldsLayout } from '@components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout'; +import { SubmitLayout } from '@components/organisms/DynamicForm/components/layouts/buttons/SubmitLayout'; const Filler = () =>
Not Implemented
; diff --git a/packages/ui/src/components/organisms/DynamicForm/utils/is-base64.ts b/packages/ui/src/components/organisms/DynamicForm/utils/is-base64.ts new file mode 100644 index 0000000000..213f183e92 --- /dev/null +++ b/packages/ui/src/components/organisms/DynamicForm/utils/is-base64.ts @@ -0,0 +1,4 @@ +export const isBase64 = (str: string) => { + const base64Regex = /^(?:[A-Za-z0-9+\/]{4})*(?:[A-Za-z0-9+\/]{2}==|[A-Za-z0-9+\/]{3}=)?$/; + return base64Regex.test(str); +}; diff --git a/examples/kyb-app/src/common/components/organisms/DynamicForm/warnings.context.ts b/packages/ui/src/components/organisms/DynamicForm/warnings.context.ts similarity index 70% rename from examples/kyb-app/src/common/components/organisms/DynamicForm/warnings.context.ts rename to packages/ui/src/components/organisms/DynamicForm/warnings.context.ts index 16334c370c..eeee712db0 100644 --- a/examples/kyb-app/src/common/components/organisms/DynamicForm/warnings.context.ts +++ b/packages/ui/src/components/organisms/DynamicForm/warnings.context.ts @@ -1,4 +1,4 @@ -import { InputsWarnings } from '@app/common/components/organisms/DynamicForm/DynamicForm'; +import { InputsWarnings } from '@components/organisms/DynamicForm/DynamicForm'; import { createContext } from 'react'; export interface WarningsContext { diff --git a/packages/ui/src/components/organisms/index.ts b/packages/ui/src/components/organisms/index.ts index 0d82108883..066dd5ba0c 100644 --- a/packages/ui/src/components/organisms/index.ts +++ b/packages/ui/src/components/organisms/index.ts @@ -1 +1,2 @@ export * from './WorkflowsTable'; +export * from './DynamicForm'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1afbc7e6c2..f9a2746ee0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1132,6 +1132,15 @@ importers: '@radix-ui/react-slot': specifier: ^1.0.1 version: 1.0.1(react@18.2.0) + '@rjsf/core': + specifier: ^5.9.0 + version: 5.9.0(@rjsf/utils@5.9.0)(react@18.2.0) + '@rjsf/utils': + specifier: ^5.9.0 + version: 5.9.0(react@18.2.0) + '@rjsf/validator-ajv8': + specifier: ^5.9.0 + version: 5.9.0(@rjsf/utils@5.9.0) '@tanstack/react-table': specifier: ^8.9.2 version: 8.9.2(react-dom@18.2.0)(react@18.2.0) @@ -19141,7 +19150,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.22.5) magic-string: 0.27.0 react-refresh: 0.14.0 - vite: 4.4.6(@types/node@18.15.10)(less@4.1.3) + vite: 4.4.6(@types/node@20.4.1)(less@4.1.3) transitivePeerDependencies: - supports-color dev: true @@ -19171,7 +19180,7 @@ packages: '@babel/plugin-transform-react-jsx-self': 7.22.5(@babel/core@7.22.5) '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.22.5) react-refresh: 0.14.0 - vite: 4.4.6(@types/node@18.15.10)(less@4.1.3) + vite: 4.4.6(@types/node@20.4.1)(less@4.1.3) transitivePeerDependencies: - supports-color dev: true