Notes (#2812)

* feat: notes

* feat: type fixes for note repository

* feat: started notes in the backoffice

* feat: more work on ui notes

* feat: visual work

* feat: more work

* feat: added pretty editor

* feat: more work

* feat: boyscouting nad moved sidebar to components directory

* feat: small fixes

* feat: changes for nitzan

* feat: small fixes

* feat: version bump

* feat: pr comments fix

* feat: version bump

* feat: pr comments fix

* feat: tests fix

* feat: test fix

Author: tomer-shvadron

apps/backoffice-v2/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @ballerine/backoffice-v2
 
+## 0.7.65
+
+### Patch Changes
+
+- bump
+- Updated dependencies
+  - @ballerine/ui@0.5.43
+  - @ballerine/react-pdf-toolkit@1.2.43
+
 ## 0.7.64
 
 ### Patch Changes

apps/backoffice-v2/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.7.64",
+  "version": "0.7.65",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com:ballerine-io/backoffice-vanilla.git"
@@ -52,8 +53,8 @@
   "dependencies": {
     "@ballerine/blocks": "0.2.25",
     "@ballerine/common": "0.9.48",
-    "@ballerine/react-pdf-toolkit": "^1.2.42",
-    "@ballerine/ui": "^0.5.42",
+    "@ballerine/react-pdf-toolkit": "^1.2.43",
+    "@ballerine/ui": "^0.5.43",
     "@ballerine/workflow-browser-sdk": "0.6.61",
     "@ballerine/workflow-node-sdk": "0.6.61",
     "@botpress/webchat": "^2.1.10",
@@ -77,13 +78,28 @@
     "@radix-ui/react-slot": "^1.0.1",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-pdf/renderer": "^3.1.14",
     "@rjsf/utils": "^5.9.0",
     "@saola.ai/browser": "^1.1.7",
     "@sentry/react": "^7.77.0",
     "@tanstack/react-query": "^4.19.1",
     "@tanstack/react-table": "^8.9.2",
+    "@tiptap/core": "^2.9.1",
+    "@tiptap/extension-code-block-lowlight": "^2.9.1",
+    "@tiptap/extension-color": "^2.9.1",
+    "@tiptap/extension-heading": "^2.9.1",
+    "@tiptap/extension-horizontal-rule": "^2.9.1",
+    "@tiptap/extension-image": "^2.9.1",
+    "@tiptap/extension-link": "^2.9.1",
+    "@tiptap/extension-placeholder": "^2.9.1",
+    "@tiptap/extension-text-style": "^2.9.1",
+    "@tiptap/extension-typography": "^2.9.1",
+    "@tiptap/pm": "^2.9.1",
+    "@tiptap/react": "^2.9.1",
+    "@tiptap/starter-kit": "^2.9.1",
     "@xyflow/react": "^12.3.0",
     "ballerine-daisyui": "^2.49.6",
     "broadcast-channel": "^7.0.0",
@@ -92,6 +108,7 @@
     "d3-hierarchy": "^3.1.2",
     "date-fns": "^3.0.6",
     "dayjs": "^1.11.6",
+    "dompurify": "^3.0.6",
     "eslint-plugin-tailwindcss": "^3.8.0",
     "face-api.js": "^0.22.2",
     "framer-motion": "^8.3.4",
@@ -100,6 +117,7 @@
     "i18next-http-backend": "^2.1.1",
     "leaflet": "^1.9.4",
     "libphonenumber-js": "^1.10.49",
+    "lowlight": "^3.1.0",
     "lucide-react": "0.445.0",
     "match-sorter": "^6.3.1",
     "msw": "^1.0.0",
@@ -115,6 +133,7 @@
     "react-image-crop": "^10.0.9",
     "react-json-view": "^1.21.3",
     "react-leaflet": "^4.2.1",
+    "react-medium-image-zoom": "^5.2.10",
     "react-router-dom": "^6.11.2",
     "react-zoom-pan-pinch": "^3.0.8",
     "recharts": "^2.7.2",
@@ -146,6 +165,7 @@
     "@testing-library/react": "^13.3.0",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/d3-hierarchy": "^3.1.7",
+    "@types/dompurify": "^3.0.5",
     "@types/leaflet": "^1.9.3",
     "@types/node": "^18.11.13",
     "@types/qs": "^6.9.7",
@@ -175,7 +195,7 @@
     "typescript": "^5.5.4",
     "vite": "^5.3.5",
     "vite-plugin-mkcert": "^1.16.0",
-    "vite-tsconfig-paths": "^4.0.7",
+    "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^0.29.8"
   },
   "peerDependencies": {

apps/backoffice-v2/postcss.config.js apps/backoffice-v2/postcss.config.cjsapps/backoffice-v2/postcss.config.js renamed to apps/backoffice-v2/postcss.config.cjs

@@ -96,5 +96,9 @@
     "success": "Merchant checks created successfully.",
     "error": "Error occurred while creating merchant checks.",
     "is_example": "Please contact Ballerine at [email protected] for access to this feature."
+  },
+  "note_created": {
+    "success": "Note added successfully.",
+    "error": "Error occurred while adding note."
   }
 }

apps/backoffice-v2/public/locales/en/toast.json

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ctw } from '@ballerine/ui';
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={ctw(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

apps/backoffice-v2/src/common/components/atoms/Toggle/Toggle.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+import { toggleVariants } from '@/common/components/atoms/Toggle/Toggle';
+import { ctw } from '@ballerine/ui';
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: 'default',
+  variant: 'default',
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={ctw('flex items-center justify-center gap-1', className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={ctw(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

apps/backoffice-v2/src/common/components/atoms/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom';
+import { SquarePen } from 'lucide-react';
+
+import { ctw } from '@/common/utils/ctw/ctw';
+import { useUpdateIsNotesOpen } from '@/common/hooks/useUpdateIsNotesOpen/useUpdateIsNotesOpen';
+
+interface INotesButtonProps {
+  numberOfNotes: number | undefined;
+}
+
+export const NotesButton = ({ numberOfNotes = 0 }: INotesButtonProps) => {
+  const updateIsNotesOpen = useUpdateIsNotesOpen();
+
+  return (
+    <div className={`flex items-center space-x-2`}>
+      <span className={`me-2 text-sm leading-6`}>Notes</span>
+      <Link
+        className={`relative`}
+        to={{
+          search: updateIsNotesOpen(),
+        }}
+      >
+        <SquarePen className={`d-5`} />
+        {numberOfNotes > 0 && (
+          <div
+            className={ctw(
+              `absolute left-3 top-3 rounded-full bg-slate-600 text-center text-[10px] font-bold text-white`,
+              { 'd-[14px]': numberOfNotes < 10, 'h-3.5 w-5 ps-[3px]': numberOfNotes >= 10 },
+            )}
+          >
+            {numberOfNotes > 9 ? '9+' : numberOfNotes}
+          </div>
+        )}
+      </Link>
+    </div>
+  );
+};

apps/backoffice-v2/src/common/components/molecules/NotesButton/NotesButton.tsx

@@ -2,7 +2,7 @@ import { FunctionComponent } from 'react';
 import { BallerineLogo } from '../../atoms/icons';
 import { Link } from 'react-router-dom';
 import { env } from '../../../env/env';
-import { useCustomerQuery } from '@/domains/customer/hook/queries/useCustomerQuery/useCustomerQuery';
+import { useCustomerQuery } from '@/domains/customer/hooks/queries/useCustomerQuery/useCustomerQuery';
 import { AspectRatio } from '../../atoms/AspectRatio/AspectRatio';
 import { useRedirectToRootUrl } from '@/common/hooks/useRedirectToRootUrl/useRedirectToRootUrl';
 import { Skeleton } from '@ballerine/ui';

apps/backoffice-v2/src/common/components/organisms/Header/Header.Logo.tsx

@@ -4,7 +4,7 @@ import { useCallback, useMemo } from 'react';
 import { Building, Goal, Home, Users } from 'lucide-react';
 import { TRoutes, TRouteWithChildren } from '@/Router/types';
 import { useLocation } from 'react-router-dom';
-import { useCustomerQuery } from '@/domains/customer/hook/queries/useCustomerQuery/useCustomerQuery';
+import { useCustomerQuery } from '@/domains/customer/hooks/queries/useCustomerQuery/useCustomerQuery';
 import { useLocale } from '@/common/hooks/useLocale/useLocale';
 
 export const useNavbarLogic = () => {

apps/backoffice-v2/src/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ctw } from '@ballerine/ui';
+
+export const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="content"
+        className={ctw(
+          'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+SidebarContent.displayName = 'SidebarContent';