feat: updated UI & added DynamicForm & storybook & style fixes

.changeset/orange-beds-act.md

@@ -0,0 +1,6 @@
+---
+'@ballerine/kyb-app': patch
+'@ballerine/ui': patch
+---
+
+added DynamicForm & TextArea & css fixes

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<TContext extends ViewsData> {

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 };
 

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 (

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',

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<WorkflowFlowData>();

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',
   },

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<WorkflowFlowData>();

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',
   },

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<WorkflowFlowData>();
+  const { context, state, warnings, save, finish } = useViewState<WorkflowFlowData>();
 
   const handleSubmit = useCallback(
     (values: DocumentsContext) => {
-      void saveAndPerformTransition(values);
+      void save(values).then(finalContext => {
+        finish(finalContext);
+      });
     },
-    [saveAndPerformTransition],
+    [save, finish],
   );
-
   return (
     <AppShell.FormContainer header={<ViewHeader />}>
       <DynamicForm<DocumentsContext>
@@ -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}
       />

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',
   },

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<WorkflowFlowData>();

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',
   },

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<WorkflowFlowData>();

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',
   },

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 = () => {

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<WorkflowFlowData>();
-
-  const handleSubmit = useCallback(
-    (values: UBOSContext[]) => {
-      void save(values).then(finalContext => {
-        finish(finalContext);
-      });
-    },
-    [save, finish],
-  );
+  const { context, state, isFinished, saveAndPerformTransition } = useViewState<WorkflowFlowData>();
 
   return !isFinished ? (
     <AppShell.FormContainer header={<ViewHeader />}>
@@ -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)}
       />
     </AppShell.FormContainer>
   ) : (

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: {

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",

packages/ui/src/common/index.ts

@@ -1,2 +1,3 @@
 export * from './enums';
 export * from './types';
+export * from './utils';

packages/ui/src/common/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './base64-to-file';
+export * from './file-to-base64';