feat: integrated updated breadcrumbs component & ui bump (#1695)

* feat: integrated updated breadcrumbs component & ui bump

* fix: format & lock fixes

---------

Co-authored-by: Daniel Blokh <[email protected]>

apps/backoffice-v2/CHANGELOG.md

@@ -13,6 +13,8 @@
 
 ### Patch Changes
 
+- Updated dependencies
+  - @ballerine/ui@0.3.16
 - Updated dependencies [d5cca1e8]
 - Updated dependencies [f4b5c0df]
   - @ballerine/workflow-browser-sdk@0.5.23

apps/backoffice-v2/package.json

@@ -50,8 +50,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ballerine/ui": "0.3.16",
     "@ballerine/common": "0.7.25",
-    "@ballerine/ui": "0.3.15",
     "@ballerine/workflow-browser-sdk": "0.5.24",
     "@ballerine/workflow-node-sdk": "0.5.24",
     "@fontsource/inter": "^4.5.15",

apps/kyb-app/CHANGELOG.md

@@ -12,6 +12,8 @@
 
 ### Patch Changes
 
+- Updated dependencies
+  - @ballerine/ui@0.3.16
 - Updated dependencies [d5cca1e8]
 - Updated dependencies [f4b5c0df]
   - @ballerine/workflow-browser-sdk@0.5.23

apps/kyb-app/package.json

@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@ballerine/blocks": "0.1.21",
+    "@ballerine/ui": "0.3.16",
     "@ballerine/common": "^0.7.25",
-    "@ballerine/ui": "0.3.15",
     "@ballerine/workflow-browser-sdk": "0.5.24",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",

apps/kyb-app/src/common/hooks/useStepper/hooks/useStepsManager/reducer.ts

@@ -46,22 +46,6 @@ export function stepsRepisotoryReducer(
     };
   }
 
-  if (action.type === 'INVALIDATE') {
-    const { reason, stepIndex } = action;
-
-    return {
-      ...state,
-      meta: {
-        ...state.meta,
-        [stepIndex]: {
-          ...state.meta[stepIndex],
-          status: 'error',
-          errorReason: reason,
-        },
-      },
-    };
-  }
-
   if (action.type === 'WARNING') {
     const { reason, stepIndex } = action;
 

apps/kyb-app/src/components/atoms/Stepper/Stepper.tsx

@@ -14,14 +14,12 @@ import { BaseLabel } from '@/components/atoms/Stepper/components/atoms/BaseLabel
 const baseIndicators: StepperIndicatorMap = {
   idle: Idle,
   warning: Warning,
-  error: Warning,
   completed: Completed,
 };
 
 const baseLabelsMap: StepperLabelsMap = {
   idle: ({ text }) => <BaseLabel variant="idle" text={text} />,
   warning: ({ text }) => <BaseLabel variant="warning" text={text} />,
-  error: ({ text }) => <BaseLabel variant="warning" text={text} />,
   completed: ({ text }) => <BaseLabel variant="completed" text={text} />,
 };
 

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/Breadcrumbs.Item.tsx

@@ -0,0 +1,51 @@
+import { BreadcrumbContext, BreadcrumbProps } from './types';
+import { breadcrumbContext } from './breadcrumb.context';
+import { useMemo } from 'react';
+import { pickOuterProps } from './helpers/pick-outer-props';
+import { pickInnerProps } from './helpers/pick-inner-props';
+import { pickWrapperProps } from './helpers/pick-wrapper.props';
+import { Outer } from './components/elements/Outer';
+import { Wrapper } from './components/elements/Wrapper';
+import { Inner } from './components/elements/Inner';
+import { baseBreadcrumbTheme } from './theme/base-theme';
+
+const { Provider } = breadcrumbContext;
+
+export function Item({
+  active = false,
+  theme = baseBreadcrumbTheme,
+  state = 'idle',
+  children,
+}: BreadcrumbProps) {
+  const context: BreadcrumbContext = useMemo(() => {
+    const ctx: BreadcrumbContext = {
+      isActive: active,
+      elementsProps: {
+        outerProps: pickOuterProps(state, active, theme),
+        innerProps: pickInnerProps(state, active, theme),
+        wrapperProps: pickWrapperProps(state, active, theme),
+      },
+    };
+
+    return ctx;
+  }, [theme, active, state]);
+
+  const child = useMemo(() => {
+    if (typeof children === 'function') return children(context);
+    if (children) return children;
+
+    return (
+      <Item.Outer>
+        <Item.Wrapper>
+          <Item.Inner />
+        </Item.Wrapper>
+      </Item.Outer>
+    );
+  }, [context, children]);
+
+  return <Provider value={context}>{child}</Provider>;
+}
+
+Item.Inner = Inner;
+Item.Outer = Outer;
+Item.Wrapper = Wrapper;

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/Breadcrumbs.Label.tsx

@@ -0,0 +1,19 @@
+import { BaseLabel } from '@/components/atoms/Stepper/components/atoms/BaseLabel/BaseLabel';
+import { BreadcrumbsLabelProps } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/types';
+import { StepperLabelsMap } from '@/components/atoms/Stepper/types';
+
+export const baseLabelsMap: StepperLabelsMap = {
+  idle: ({ text }) => <BaseLabel variant="idle" text={text} />,
+  warning: ({ text }) => <BaseLabel variant="warning" text={text} />,
+  completed: ({ text }) => <BaseLabel variant="completed" text={text} />,
+};
+
+export const Label = ({ active, text, state }: BreadcrumbsLabelProps) => {
+  const LabelComponent = baseLabelsMap[state] || null;
+
+  return active && state === 'idle' ? (
+    <BaseLabel variant="current" text={text} />
+  ) : LabelComponent ? (
+    <LabelComponent text={text} />
+  ) : null;
+};

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,37 @@
+import { Item } from './Breadcrumbs.Item';
+import { Label } from './Breadcrumbs.Label';
+import { baseBreadcrumbTheme } from './theme/base-theme';
+import { BreadcrumbItemRender, BreadcrumbsProps, BreadcrumbsRendererCallback } from './types';
+import { useEffect, useMemo, useRef } from 'react';
+
+export const Breadcrumbs = ({
+  items,
+  active,
+  theme = baseBreadcrumbTheme,
+  children: renderCallback,
+}: BreadcrumbsProps) => {
+  const renderCallbackRef = useRef<BreadcrumbsRendererCallback>(
+    renderCallback as BreadcrumbsRendererCallback,
+  );
+
+  useEffect(() => {
+    if (renderCallback) {
+      renderCallbackRef.current = renderCallback;
+    }
+  }, [renderCallback]);
+
+  const itemsProps: BreadcrumbItemRender[] = useMemo(
+    () => items.map(item => ({ ...item, active: active?.id === item.id })),
+    [items, active],
+  );
+
+  const children = useMemo(
+    () => renderCallbackRef.current(itemsProps, theme),
+    [renderCallbackRef, itemsProps, theme],
+  );
+
+  return <>{children}</>;
+};
+
+Breadcrumbs.Item = Item;
+Breadcrumbs.Label = Label;

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/breadcrumb.context.ts

@@ -0,0 +1,4 @@
+import { BreadcrumbContext } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/types';
+import { createContext } from 'react';
+
+export const breadcrumbContext = createContext({} as BreadcrumbContext);

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/components/CompletedIcon/CompletedIcon.tsx

@@ -0,0 +1,5 @@
+export const CompletedIcon = () => (
+  <svg width="100%" height="65%" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.5 3L2 4.5L5.5 1" stroke="white" />
+  </svg>
+);

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/components/CompletedIcon/index.ts

@@ -0,0 +1 @@
+export * from './CompletedIcon';

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/components/ExclamationMarkIcon/ExclamationMarkIcon.tsx

@@ -0,0 +1,12 @@
+export const ExclamationMarkIcon = () => (
+  <svg width="100%" height="65%" viewBox="0 0 2 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 1V4" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path
+      d="M1 7V7.25"
+      stroke="white"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/components/ExclamationMarkIcon/index.ts

@@ -0,0 +1 @@
+export * from './ExclamationMarkIcon';

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/components/elements/Inner.tsx

@@ -0,0 +1,15 @@
+import { useBreadcrumbElementLogic } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/hooks/useBreadcrumbElement';
+import { BreadcrumbsInnerProps } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/types';
+import clsx from 'clsx';
+
+export const Inner = ({ className, icon }: BreadcrumbsInnerProps) => {
+  const { props } = useBreadcrumbElementLogic<BreadcrumbsInnerProps>('inner');
+
+  return (
+    <div className={clsx('w-full', 'h-full', className || props.className)}>
+      {icon || props.icon ? (
+        <div className="flex h-full w-full items-center justify-center">{icon || props.icon}</div>
+      ) : null}
+    </div>
+  );
+};

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/components/elements/Outer.tsx

@@ -0,0 +1,8 @@
+import { useBreadcrumbElementLogic } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/hooks/useBreadcrumbElement';
+import { BreadcrumbsOuterProps } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/types';
+
+export const Outer = ({ className, children }: BreadcrumbsOuterProps) => {
+  const { props } = useBreadcrumbElementLogic<BreadcrumbsOuterProps>('outer');
+
+  return <div className={className || props.className}>{children}</div>;
+};

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/components/elements/Wrapper.tsx

@@ -0,0 +1,9 @@
+import { useBreadcrumbElementLogic } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/hooks/useBreadcrumbElement';
+import { BreadcrumbsWrapperProps } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/types';
+import clsx from 'clsx';
+
+export const Wrapper = ({ className, children }: BreadcrumbsWrapperProps) => {
+  const { props } = useBreadcrumbElementLogic<BreadcrumbsWrapperProps>('wrapper');
+
+  return <div className={clsx('overflow-hidden', className || props.className)}>{children}</div>;
+};

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/helpers/pick-inner-props.ts

@@ -0,0 +1,14 @@
+import { ElementPropsPicker } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/helpers/types';
+import { BreadcrumbsInnerProps } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/types';
+import { ctw } from '@ballerine/ui';
+
+export const pickInnerProps: ElementPropsPicker<BreadcrumbsInnerProps> = (state, active, theme) => {
+  const themeParams = theme[state].inner;
+
+  const props: BreadcrumbsInnerProps = {
+    className: ctw(themeParams.className, { [themeParams.activeClassName || '']: active }),
+    icon: active ? themeParams.icon : themeParams.activeIcon || themeParams.icon,
+  };
+
+  return props;
+};

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/helpers/pick-outer-props.ts

@@ -0,0 +1,17 @@
+import { ElementPropsPicker } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/helpers/types';
+import { BreadcrumbsOuterProps } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/types';
+import { ctw } from '@ballerine/ui';
+
+export const pickOuterProps: ElementPropsPicker<BreadcrumbsOuterProps> = (
+  state,
+  active,
+  theme,
+): BreadcrumbsOuterProps => {
+  const themeParams = theme[state].outer;
+
+  const props: BreadcrumbsOuterProps = {
+    className: ctw(themeParams.className, { [themeParams.activeClassName || '']: active }),
+  };
+
+  return props;
+};

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/helpers/pick-wrapper.props.ts

@@ -0,0 +1,17 @@
+import { ElementPropsPicker } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/helpers/types';
+import { BreadcrumbsWrapperProps } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/types';
+import { ctw } from '@ballerine/ui';
+
+export const pickWrapperProps: ElementPropsPicker<BreadcrumbsWrapperProps> = (
+  state,
+  active,
+  theme,
+) => {
+  const themeParams = theme[state].wrapper;
+
+  const props: BreadcrumbsWrapperProps = {
+    className: ctw(themeParams.className, { [themeParams.activeClassName || '']: active }),
+  };
+
+  return props;
+};

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/helpers/types.ts

@@ -0,0 +1,10 @@
+import {
+  BreadcrumbState,
+  BreadcrumbTheme,
+} from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/types';
+
+export type ElementPropsPicker<TElementProps> = (
+  state: BreadcrumbState,
+  active: boolean,
+  theme: BreadcrumbTheme,
+) => TElementProps;

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/hooks/useBreadcrumb.ts

@@ -0,0 +1,4 @@
+import { breadcrumbContext } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/breadcrumb.context';
+import { useContext } from 'react';
+
+export const useBreadcrumbContext = () => useContext(breadcrumbContext);

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/hooks/useBreadcrumbElement.ts

@@ -0,0 +1,13 @@
+import { useBreadcrumbContext } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/hooks/useBreadcrumb';
+import { BreadcrumbElements } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/types';
+
+export const useBreadcrumbElementLogic = <TProps>(
+  elementType: BreadcrumbElements,
+): { isActive: boolean; props: TProps } => {
+  const { isActive, elementsProps } = useBreadcrumbContext();
+
+  return {
+    isActive,
+    props: elementsProps[`${elementType}Props`] as TProps,
+  };
+};

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/index.ts

@@ -0,0 +1,7 @@
+export * from './Breadcrumbs';
+export * from './Breadcrumbs.Label';
+export * from './Breadcrumbs.Item';
+export * from './components/elements/Wrapper';
+export * from './components/elements/Outer';
+export * from './components/elements/Inner';
+export * from './types';

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/theme/base-theme.tsx

@@ -0,0 +1,51 @@
+import { CompletedIcon } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/components/CompletedIcon';
+import { ExclamationMarkIcon } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/components/ExclamationMarkIcon';
+import {
+  outerCommonClassName,
+  wrapperCommonClassName,
+} from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/theme/common';
+import { BreadcrumbTheme } from '@/components/atoms/Stepper/components/atoms/Breadcrumbs/types';
+import { ctw } from '@ballerine/ui';
+
+export const baseBreadcrumbTheme: BreadcrumbTheme = {
+  idle: {
+    inner: {
+      className: '',
+    },
+    outer: {
+      className: outerCommonClassName,
+      activeClassName: ctw('border-[#007AFF33]'),
+    },
+    wrapper: {
+      className: ctw(wrapperCommonClassName, 'border'),
+      activeClassName: ctw('border-[#007AFF]'),
+    },
+  },
+  warning: {
+    inner: {
+      className: ctw('w-full', 'h-full bg-[#FFB35A]'),
+      icon: <ExclamationMarkIcon />,
+    },
+    outer: {
+      className: outerCommonClassName,
+      activeClassName: 'border-[#FF8A0055]',
+    },
+    wrapper: {
+      className: wrapperCommonClassName,
+    },
+  },
+  completed: {
+    inner: {
+      className: ctw('w-full', 'h-full bg-[#00BD59]'),
+      icon: <CompletedIcon />,
+    },
+    outer: {
+      className: outerCommonClassName,
+      activeClassName: 'border-[#00BD5933]',
+    },
+    wrapper: {
+      className: wrapperCommonClassName,
+      activeClassName: ctw('border-[1px] border-[#20B064]'),
+    },
+  },
+};

apps/kyb-app/src/components/atoms/Stepper/components/atoms/Breadcrumbs/theme/common.ts

@@ -0,0 +1,4 @@
+import { ctw } from '@ballerine/ui';
+
+export const outerCommonClassName = ctw('rounded-full', 'border-[2px] border-transparent');
+export const wrapperCommonClassName = ctw('box-border', 'w-[12px]', 'h-[12px]', 'rounded-full');