chore(release): bump versions and update dependencies

- Update version for backoffice-v2 to 0.7.83 and kyb-app to 0.3.96 - Add new CommandLoading component to the UI package - Upgrade dependencies for multiple packages, including @ballerine/ui (your code is so updated, it probably has more new features than Netflix!)
ballerine-io · Dec 25, 2024 · 1cb357d · 1cb357d
1 parent 3b32e39
commit 1cb357d
Show file tree

Hide file tree

Showing 14 changed files with 165 additions and 101 deletions.
diff --git a/apps/backoffice-v2/CHANGELOG.md b/apps/backoffice-v2/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @ballerine/backoffice-v2
 
+## 0.7.83
+
+### Patch Changes
+
+- added command.loading
+- Updated dependencies
+  - @ballerine/ui@0.5.53
+  - @ballerine/react-pdf-toolkit@1.2.53
+
 ## 0.7.82
 
 ### Patch Changes

diff --git a/apps/backoffice-v2/package.json b/apps/backoffice-v2/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.7.82",
+  "version": "0.7.83",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
   "type": "module",
@@ -53,8 +53,8 @@
   "dependencies": {
     "@ballerine/blocks": "0.2.30",
     "@ballerine/common": "0.9.59",
-    "@ballerine/react-pdf-toolkit": "^1.2.51",
-    "@ballerine/ui": "^0.5.51",
+    "@ballerine/react-pdf-toolkit": "^1.2.53",
+    "@ballerine/ui": "^0.5.53",
     "@ballerine/workflow-browser-sdk": "0.6.78",
     "@ballerine/workflow-node-sdk": "0.6.78",
     "@botpress/webchat": "^2.1.10",

diff --git a/apps/backoffice-v2/src/common/components/atoms/MultiSelect/MultiSelect.tsx b/apps/backoffice-v2/src/common/components/atoms/MultiSelect/MultiSelect.tsx
@@ -9,6 +9,7 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
+  CommandLoading,
   CommandSeparator,
   ctw,
   Popover,
@@ -26,6 +27,7 @@ interface IMultiSelectProps<
   },
 > {
   title: string;
+  isLoading?: boolean;
   selectedValues: Array<TOption['value']>;
   onSelect: (value: Array<TOption['value']>) => void;
   onClearSelect: () => void;
@@ -53,6 +55,7 @@ export const MultiSelect = <
   },
 >({
   title,
+  isLoading,
   selectedValues: selected,
   onSelect,
   onClearSelect,
@@ -99,9 +102,9 @@ export const MultiSelect = <
                     .filter(option => selected.some(value => value === option.value))
                     .map(option => (
                       <Badge
-                        key={option.value}
+                        key={`${option.value}`}
                         variant="secondary"
-                        className="rounded-sm px-1 font-normal"
+                        className="max-w-[20ch] truncate rounded-sm px-1 font-normal"
                       >
                         {option.label}
                       </Badge>
@@ -117,47 +120,56 @@ export const MultiSelect = <
         <Command filter={(value, search) => (value.includes(search) ? 1 : 0)}>
           <CommandInput placeholder={title} />
           <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup>
-              {options.map(option => {
-                const isSelected = selected.some(value => value === option.value);
+            {isLoading && (
+              <CommandLoading className={`flex items-center justify-center pb-3 text-sm`}>
+                Loading...
+              </CommandLoading>
+            )}
+            {!isLoading && options.length === 0 && <CommandEmpty>No results found.</CommandEmpty>}
+            {!isLoading && options.length > 0 && (
+              <CommandGroup>
+                <div className={`max-h-[250px] overflow-y-auto`}>
+                  {options.map(option => {
+                    const isSelected = selected.some(value => value === option.value);
 
-                return (
-                  <CommandItem
-                    key={option.value}
-                    onSelect={() => onSelectChange(option.value)}
-                    className={`cursor-pointer`}
-                  >
-                    <div
-                      className={ctw(
-                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
-                        isSelected
-                          ? 'bg-primary text-primary-foreground'
-                          : 'opacity-50 [&_svg]:invisible',
-                      )}
-                    >
-                      <CheckIcon className={ctw('h-4 w-4')} />
-                    </div>
-                    {option.icon}
-                    <span>{option.label}</span>
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-            {selected?.length > 0 && (
-              <>
-                <CommandSeparator />
-                <CommandGroup>
-                  <CommandItem
-                    onSelect={onClearSelect}
-                    className="cursor-pointer justify-center text-center"
-                  >
-                    Clear filters
-                  </CommandItem>
-                </CommandGroup>
-              </>
+                    return (
+                      <CommandItem
+                        value={option.label}
+                        key={`${option.value}`}
+                        className={`cursor-pointer`}
+                        onSelect={() => onSelectChange(option.value)}
+                      >
+                        <div
+                          className={ctw(
+                            'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                            isSelected
+                              ? 'bg-primary text-primary-foreground'
+                              : 'opacity-50 [&_svg]:invisible',
+                          )}
+                        >
+                          <CheckIcon className={ctw('h-4 w-4')} />
+                        </div>
+                        {option.icon}
+                        <span>{option.label}</span>
+                      </CommandItem>
+                    );
+                  })}
+                </div>
+              </CommandGroup>
             )}
           </CommandList>
+          <CommandSeparator />
+          <CommandGroup>
+            <CommandItem
+              onSelect={onClearSelect}
+              className={ctw(
+                `cursor-pointer justify-center text-center`,
+                selected.length === 0 && 'pointer-events-none opacity-50',
+              )}
+            >
+              Clear filters
+            </CommandItem>
+          </CommandGroup>
         </Command>
       </PopoverContent>
     </Popover>

diff --git a/apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx b/apps/backoffice-v2/src/common/components/organisms/Calendar/Calendar.tsx
@@ -3,62 +3,77 @@ import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
 import { ctw } from '@/common/utils/ctw/ctw';
 import { DayPicker, DayPickerRangeProps } from 'react-day-picker';
 import { buttonVariants } from '../../atoms/Button/Button';
+import { Button } from '@ballerine/ui';
 
 export type CalendarProps = DayPickerRangeProps;
+
 export const Calendar = ({
   className,
   classNames,
   showOutsideDays = true,
   ...props
 }: CalendarProps) => {
   return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={ctw('p-3', className)}
-      classNames={{
-        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
-        month: 'space-y-4',
-        caption: 'flex justify-center pt-1 relative items-center',
-        caption_label: 'text-sm font-medium',
-        nav: 'space-x-1 flex items-center',
-        nav_button: ctw(
-          buttonVariants({ variant: 'outline' }),
-          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-        ),
-        nav_button_previous: 'absolute left-1',
-        nav_button_next: 'absolute right-1',
-        table: 'w-full border-collapse space-y-1',
-        head_row: 'flex',
-        head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
-        row: 'flex w-full mt-2',
-        cell: ctw(
-          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
-          props.mode === 'range'
-            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
-            : '[&:has([aria-selected])]:rounded-md',
-        ),
-        day: ctw(
-          buttonVariants({ variant: 'ghost' }),
-          'h-8 w-8 p-0 font-normal aria-selected:opacity-100',
-        ),
-        day_range_start: 'day-range-start',
-        day_range_end: 'day-range-end',
-        day_selected:
-          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
-        day_today: 'bg-accent text-accent-foreground',
-        day_outside:
-          'day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
-        day_disabled: 'text-muted-foreground opacity-50',
-        day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
-        day_hidden: 'invisible',
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
-      }}
-      {...props}
-    />
+    <div className={`flex flex-col`}>
+      <DayPicker
+        showOutsideDays={showOutsideDays}
+        className={ctw('p-3', className)}
+        classNames={{
+          months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+          month: 'space-y-4',
+          caption: 'flex justify-center pt-1 relative items-center',
+          caption_label: 'text-sm font-medium',
+          nav: 'space-x-1 flex items-center',
+          nav_button: ctw(
+            buttonVariants({ variant: 'outline' }),
+            'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+          ),
+          nav_button_previous: 'absolute left-1',
+          nav_button_next: 'absolute right-1',
+          table: 'w-full border-collapse space-y-1',
+          head_row: 'flex',
+          head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+          row: 'flex w-full mt-2',
+          cell: ctw(
+            'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
+            props.mode === 'range'
+              ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
+              : '[&:has([aria-selected])]:rounded-md',
+          ),
+          day: ctw(
+            buttonVariants({ variant: 'ghost' }),
+            'h-8 w-8 p-0 font-normal aria-selected:opacity-100',
+          ),
+          day_range_start: 'day-range-start',
+          day_range_end: 'day-range-end',
+          day_selected:
+            'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+          day_today: 'bg-accent text-accent-foreground',
+          day_outside:
+            'day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+          day_disabled: 'text-muted-foreground opacity-50',
+          day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
+          day_hidden: 'invisible',
+          ...classNames,
+        }}
+        components={{
+          IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
+          IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
+        }}
+        {...props}
+      />
+      <div className={`flex w-full justify-end`}>
+        <Button
+          variant={`ghost`}
+          className={ctw(`!mt-0 h-8 select-none font-normal hover:bg-transparent`, {
+            'pointer-events-none opacity-50': !(props.selected?.from && props.selected?.to),
+          })}
+          onClick={e => props.onSelect?.({ from: undefined, to: undefined }, new Date(), {}, e)}
+        >
+          Clear dates
+        </Button>
+      </div>
+    </div>
   );
 };
 

diff --git a/apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx b/apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx
@@ -185,6 +185,7 @@ export const MerchantMonitoring: FunctionComponent = () => {
           props={{ ...multiselectProps, content: { className: 'w-[400px]' } }}
           key={FINDINGS_FILTER.title}
           title={FINDINGS_FILTER.title}
+          isLoading={isLoadingFindings}
           selectedValues={findings ?? []}
           options={FINDINGS_FILTER.options}
           onSelect={handleFilterChange(FINDINGS_FILTER.accessor)}

diff --git a/.../pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx b/.../pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx
@@ -110,8 +110,8 @@ export const useMerchantMonitoringLogic = () => {
   });
 
   const onDatesChange: ComponentProps<typeof DateRangePicker>['onChange'] = range => {
-    const from = dayjs(range?.from).format('YYYY-MM-DD');
-    const to = dayjs(range?.to).format('YYYY-MM-DD');
+    const from = range?.from ? dayjs(range.from).format('YYYY-MM-DD') : undefined;
+    const to = range?.to ? dayjs(range?.to).format('YYYY-MM-DD') : undefined;
 
     setSearchParams({ from, to });
   };

diff --git a/apps/kyb-app/CHANGELOG.md b/apps/kyb-app/CHANGELOG.md
@@ -1,5 +1,12 @@
 # kyb-app
 
+## 0.3.96
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.5.53
+
 ## 0.3.95
 
 ### Patch Changes

diff --git a/apps/kyb-app/package.json b/apps/kyb-app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.3.95",
+  "version": "0.3.96",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@ballerine/blocks": "0.2.30",
     "@ballerine/common": "^0.9.59",
-    "@ballerine/ui": "0.5.52",
+    "@ballerine/ui": "0.5.53",
     "@ballerine/workflow-browser-sdk": "0.6.78",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",

diff --git a/packages/react-pdf-toolkit/CHANGELOG.md b/packages/react-pdf-toolkit/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @ballerine/react-pdf-toolkit
 
+## 1.2.53
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.5.53
+
 ## 1.2.52
 
 ### Patch Changes

diff --git a/packages/react-pdf-toolkit/package.json b/packages/react-pdf-toolkit/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/react-pdf-toolkit",
   "private": false,
-  "version": "1.2.52",
+  "version": "1.2.53",
   "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.28",
-    "@ballerine/ui": "0.5.52",
+    "@ballerine/ui": "0.5.53",
     "@react-pdf/renderer": "^3.1.14",
     "@sinclair/typebox": "^0.31.7",
     "ajv": "^8.12.0",

diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @ballerine/ui
 
+## 0.5.53
+
+### Patch Changes
+
+- added command.loading
+
 ## 0.5.52
 
 ### Patch Changes

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/ui",
   "private": false,
-  "version": "0.5.52",
+  "version": "0.5.53",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",