Illiar/kyb/UI fixes (#2784)

* fix: fixed placeholder & labels on checkboxes

* fix: fixed various ui bugs

* fix: removed log

---------

Co-authored-by: Alon Peretz <[email protected]>

apps/kyb-app/CHANGELOG.md

@@ -21,6 +21,7 @@
 ### Patch Changes
 
 - Updated dependencies
+  - @ballerine/ui@0.5.39
   - @ballerine/common@0.9.41
   - @ballerine/workflow-browser-sdk@0.6.53
 

apps/kyb-app/package.json

@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@ballerine/blocks": "0.2.23",
+    "@ballerine/ui": "0.5.39",
     "@ballerine/common": "^0.9.43",
-    "@ballerine/ui": "0.5.38",
     "@ballerine/workflow-browser-sdk": "0.6.55",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",

apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/CheckboxList/CheckboxList.tsx

@@ -22,7 +22,7 @@ export const CheckboxList = (props: WithTestId<RJSFInputProps>) => {
       {options.map(option => (
         <label className="flex items-center gap-2" key={option.value}>
           <Checkbox
-            className="border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground bg-white"
+            className="border bg-white data-[state=checked]:bg-white data-[state=checked]:text-black"
             color="primary"
             value={option.value}
             checked={Array.isArray(formData) && formData.includes(option.value)}

apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/RadioInput/RadioInput.tsx

@@ -30,7 +30,7 @@ export const RadioInputAdapter: RJSFInputAdapter<string> = ({
           data-testid={testId ? `${testId}-radio-group-item` : undefined}
         >
           <RadioGroupItem
-            className="border-secondary text-black"
+            className="border-secondary bg-white text-black"
             value={value}
             id={`radio-group-item-${value}`}
           ></RadioGroupItem>

apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/TagsInput/TagsInput.tsx

@@ -33,6 +33,10 @@ export const TagsInput: FunctionComponent<ITagsInputProps> = ({
       setActiveTagIndex={setActiveTagIndex}
       placeholder={uiSchema?.['ui:placeholder']}
       addTagsOnBlur
+      styleClasses={{
+        input:
+          'border-none outline-none focus:outline-none focus:ring-0 shadow-none placeholder:text-muted-foreground',
+      }}
     />
   );
 };

apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/helpers/createFormSchemaFromUIElements.ts

@@ -79,7 +79,10 @@ export const createFormSchemaFromUIElements = (
 
       uiSchema.items[uiElement.name] = {
         ...uiElement?.options?.uiSchema,
-        'ui:label': Boolean(uiElement?.options?.label),
+        'ui:label':
+          (uiElement.options?.uiSchema || {})['ui:label'] === undefined
+            ? Boolean(uiElement?.options?.label)
+            : (uiElement.options?.uiSchema || {})['ui:label'],
         'ui:placeholder': uiElement?.options?.hint,
       };
     });

packages/react-pdf-toolkit/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @ballerine/react-pdf-toolkit
 
+## 1.2.39
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.5.39
+
 ## 1.2.38
 
 ### Patch Changes

packages/react-pdf-toolkit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/react-pdf-toolkit",
   "private": false,
-  "version": "1.2.38",
+  "version": "1.2.39",
   "types": "./dist/build.d.ts",
   "main": "./dist/react-pdf-toolkit.js",
   "module": "./dist/react-pdf-toolkit.mjs",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@ballerine/config": "^1.1.21",
-    "@ballerine/ui": "0.5.38",
+    "@ballerine/ui": "0.5.39",
     "@react-pdf/renderer": "^3.1.14",
     "@sinclair/typebox": "^0.31.7",
     "ajv": "^8.12.0",

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ballerine/ui
 
+## 0.5.39
+
+### Patch Changes
+
+- Fixed styles in dynamic form
+
 ## 0.5.38
 
 ### Patch Changes

packages/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/ui",
   "private": false,
-  "version": "0.5.38",
+  "version": "0.5.39",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/ui/src/components/atoms/inputs/Input/Input.tsx

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
       <input
         type={type}
         className={ctw(
-          'border-input bg-background !placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border  px-2 py-1.5 align-middle text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+          'border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border  px-2 py-1.5 align-middle text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}

packages/ui/src/components/atoms/inputs/TextArea/TextArea.tsx

@@ -8,7 +8,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
     return (
       <textarea
         className={ctw(
-          'border-input ring-offset-background !placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border bg-white px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border bg-white px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}

packages/ui/src/components/molecules/inputs/AutocompleteInput/AutocompleteInput.tsx

@@ -1,3 +1,4 @@
+import { ctw } from '@/common';
 import { muiTheme } from '@/common/mui-theme';
 import { Paper } from '@/components/atoms/Paper';
 import { ThemeProvider } from '@mui/material';
@@ -21,6 +22,7 @@ export interface AutocompleteInputProps {
   name?: string;
   disabled?: boolean;
   testId?: string;
+  textInputClassName?: string;
   onChange: (event: AutocompleteChangeEvent) => void;
   onBlur?: (event: FocusEvent<any>) => void;
 }
@@ -32,6 +34,7 @@ export const AutocompleteInput = ({
   name,
   disabled,
   testId,
+  textInputClassName,
   onChange,
   onBlur,
 }: AutocompleteInputProps) => {
@@ -93,7 +96,10 @@ export const AutocompleteInput = ({
             InputProps={{
               ...params.InputProps,
               classes: {
-                root: 'border-input bg-background placeholder:text-muted-foreground rounded-md border text-sm transition-colors px-3 py-0 shadow-none',
+                root: ctw(
+                  'border-input bg-background placeholder:text-muted-foreground rounded-md border text-sm transition-colors px-3 py-0 shadow-none',
+                  textInputClassName,
+                ),
                 focused: 'border-input ring-ring ring-1',
                 disabled: 'opacity-50 cursor-not-allowed',
               },

packages/ui/src/components/molecules/inputs/DatePickerInput/DatePickerInput.tsx

@@ -1,3 +1,4 @@
+import { ctw } from '@/common';
 import { muiTheme } from '@/common/mui-theme';
 import { Paper } from '@/components/atoms';
 import { TextField, TextFieldProps, ThemeProvider } from '@mui/material';
@@ -32,6 +33,7 @@ export interface DatePickerProps {
   disabled?: boolean;
   params?: DatePickerParams;
   testId?: string;
+  textInputClassName?: string;
   onChange: (event: DatePickerChangeEvent) => void;
   onBlur?: (event: FocusEvent<any>) => void;
 }
@@ -42,6 +44,7 @@ export const DatePickerInput = ({
   disabled = false,
   params,
   testId,
+  textInputClassName,
   onChange,
   onBlur,
 }: DatePickerProps) => {
@@ -131,7 +134,10 @@ export const DatePickerInput = ({
           InputProps={{
             ...props.InputProps,
             classes: {
-              root: 'shadow-none bg-background border-input rounded-md border text-sm shadow-sm transition-colors px-3 py-0',
+              root: ctw(
+                'bg-background border-input rounded-md border text-sm shadow-sm transition-colors px-3 py-0',
+                textInputClassName,
+              ),
               focused: 'border-input ring-ring ring-1',
               disabled: 'opacity-50 cursor-not-allowed',
             },

packages/ui/src/components/molecules/inputs/DropdownInput/DropdownInput.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { CheckIcon } from 'lucide-react';
 import React, { FocusEvent, FunctionComponent, useCallback, useMemo, useState } from 'react';
 
+import { ctw } from '@/common';
 import {
   Button,
   Command,
@@ -53,6 +54,7 @@ export const DropdownInput: FunctionComponent<DropdownInputProps> = ({
   onChange,
   onBlur,
   props,
+  textInputClassName,
 }) => {
   const { placeholder = '', searchPlaceholder = '' } = placeholdersParams;
   const [open, setOpen] = useState(false);
@@ -100,7 +102,7 @@ export const DropdownInput: FunctionComponent<DropdownInputProps> = ({
           disabled={disabled}
           data-testid={testId ? `${testId}-trigger` : undefined}
         >
-          <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left">
+          <span className="flex-1 truncate text-left">
             {selectedOption ? selectedOption.label : placeholder}
           </span>
           {props?.trigger?.icon ?? <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />}
@@ -115,7 +117,11 @@ export const DropdownInput: FunctionComponent<DropdownInputProps> = ({
       >
         <Command className="w-full">
           {searchable ? (
-            <CommandInput onBlur={onBlur} placeholder={searchPlaceholder} className="h-9" />
+            <CommandInput
+              onBlur={onBlur}
+              placeholder={searchPlaceholder}
+              className={ctw('placeholder:text-muted-foreground h-9', textInputClassName)}
+            />
           ) : null}
           <CommandEmpty>{notFoundText || ''}</CommandEmpty>
           <ScrollArea orientation="both" className={clsx({ 'h-[200px]': options.length > 6 })}>

packages/ui/src/components/molecules/inputs/DropdownInput/types.ts

@@ -32,4 +32,5 @@ export interface DropdownInputProps {
     };
   };
   testId?: string;
+  textInputClassName?: string;
 }

packages/ui/src/components/molecules/inputs/MultiSelect/MultiSelect.tsx

@@ -1,8 +1,8 @@
+import { ctw } from '@/common/utils/ctw';
 import { Popover, PopoverContent, PopoverTrigger, ScrollArea } from '@/components/atoms';
 import { Command, CommandGroup, CommandInput, CommandItem } from '@/components/atoms/Command';
 import { UnselectButtonProps } from '@/components/molecules/inputs/MultiSelect/components/Chip/UnselectButton';
 import { SelectedElementParams } from '@/components/molecules/inputs/MultiSelect/types';
-import { ctw } from '@/common/utils/ctw';
 import { ClickAwayListener } from '@mui/material';
 import keyBy from 'lodash/keyBy';
 import { FocusEvent, useCallback, useMemo, useRef, useState } from 'react';
@@ -26,6 +26,7 @@ export interface MultiSelectProps {
   searchPlaceholder?: string;
   disabled?: boolean;
   testId?: string;
+  textInputClassName?: string;
   renderSelected: MultiSelectSelectedItemRenderer;
   onChange: (selected: MultiSelectValue[], inputName: string) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
@@ -38,6 +39,7 @@ export const MultiSelect = ({
   searchPlaceholder = 'Select more...',
   disabled,
   testId,
+  textInputClassName,
   renderSelected,
   onChange,
   onBlur,
@@ -171,7 +173,7 @@ export const MultiSelect = ({
                   onValueChange={setInputValue}
                   placeholder={searchPlaceholder}
                   style={{ border: 'none' }}
-                  className="h-6"
+                  className={ctw('placeholder:text-muted-foreground h-6', textInputClassName)}
                   onFocus={() => setOpen(true)}
                   onBlur={onBlur}
                   data-testid={testId ? `${testId}-search-input` : undefined}

packages/ui/src/components/organisms/DynamicForm/DynamicForm.stories.tsx

@@ -18,6 +18,9 @@ const simpleFormSchema: RJSFSchema = {
       type: 'string',
       title: 'Last Name',
     },
+    confirm: {
+      type: 'boolean',
+    },
   },
 };
 

packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/AutocompleteTextInputAdapter/AutocompleteTextInputAdapter.tsx

@@ -35,6 +35,7 @@ export const AutocompleteTextInputAdapter: RJSFInputAdapter = ({
       testId={testId}
       placeholder={placeholder || uiSchema?.['ui:placeholder']}
       onChange={event => void onChange(event.target.value || '')}
+      textInputClassName={'placeholder:text-gray-400'}
       onBlur={handleBlur}
     />
   );

packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/BooleanFieldAdapter.tsx

@@ -1,6 +1,6 @@
+import { ctw } from '@/common/utils/ctw';
 import { Checkbox } from '@/components/atoms';
 import { RJSFInputAdapter } from '@/components/organisms/DynamicForm/components/RSJVInputAdaters/types';
-import { ctw } from '@/common/utils/ctw';
 import { useCallback } from 'react';
 
 export const BooleanFieldAdapter: RJSFInputAdapter<boolean> = ({
@@ -24,7 +24,7 @@ export const BooleanFieldAdapter: RJSFInputAdapter<boolean> = ({
       })}
     >
       <Checkbox
-        className="border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground bg-white"
+        className="border bg-white data-[state=checked]:bg-white data-[state=checked]:text-black"
         color="primary"
         checked={formData}
         disabled={disabled}

packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/DateInputAdapter/DateInputAdapter.tsx

@@ -63,6 +63,7 @@ export const DateInputAdapter: RJSFInputAdapter<string | null> = ({
       disabled={disabled}
       onBlur={handleBlur}
       testId={testId}
+      textInputClassName={'placeholder:text-gray-400'}
     />
   );
 };

packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/MultiselectInputAdapter/MultiselectInputAdapter.tsx

@@ -53,6 +53,7 @@ export const MultiselectInputAdapter: RJSFInputAdapter<MultiSelectValue[], Multi
         </Chip>
       );
     };
+
     return defaultRenderer;
   }, [renderSelected]);
 
@@ -67,6 +68,7 @@ export const MultiselectInputAdapter: RJSFInputAdapter<MultiSelectValue[], Multi
       onBlur={handleBlur}
       renderSelected={selectedItemRenderer}
       testId={testId}
+      textInputClassName={'placeholder:text-gray-400'}
     />
   );
 };

packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/RadioInputAdapter/RadioInputAdapter.tsx

@@ -18,7 +18,7 @@ export const RadioInputAdapter: RJSFInputAdapter<string> = ({
     [schema],
   );
 
-  return !!options?.length ? (
+  return options?.length ? (
     <RadioGroup
       value={formData}
       onValueChange={onChange}
@@ -32,7 +32,11 @@ export const RadioInputAdapter: RJSFInputAdapter<string> = ({
           key={`radio-group-item-${value}`}
           data-testid={testId ? `${testId}-radio-group-item` : undefined}
         >
-          <RadioGroupItem value={value} id={`radio-group-item-${value}`}></RadioGroupItem>
+          <RadioGroupItem
+            value={value}
+            id={`radio-group-item-${value}`}
+            className="!bg-white"
+          ></RadioGroupItem>
           <Label htmlFor={`radio-group-item-${value}`}>{label}</Label>
         </div>
       ))}

packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx

@@ -49,6 +49,7 @@ export const SelectField = ({
       value={formData}
       disabled={disabled}
       testId={testId}
+      textInputClassName="placeholder:text-gray-400"
       onChange={onChange}
       onBlur={handleBlur}
     />

packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/TextField.tsx

@@ -1,4 +1,4 @@
-import { WithTestId } from '@/common';
+import { ctw, WithTestId } from '@/common';
 import { Input, TextArea } from '@/components/atoms';
 import { FieldProps } from '@rjsf/utils';
 import { useCallback } from 'react';
@@ -11,6 +11,7 @@ export const TextField = ({
   disabled,
   schema,
   testId,
+  className,
   onChange,
   onBlur,
 }: WithTestId<FieldProps<string | number>>) => {
@@ -44,12 +45,17 @@ export const TextField = ({
   };
 
   return uiSchema?.['ui:widget'] === 'textarea' ? (
-    <TextArea {...inputProps} data-testid={testId} />
+    <TextArea
+      {...inputProps}
+      data-testid={testId}
+      className={ctw('placeholder:text-gray-400', className)}
+    />
   ) : (
     <Input
       {...inputProps}
       type={schema.type === 'number' ? 'number' : 'text'}
       data-testid={testId}
+      className={ctw('placeholder:text-gray-400', className)}
     />
   );
 };