Merge pull request #42 from internxt/fix/PB-3458-breadcurmbs_types

[PB-3458]:fix/breadcrumbs types

Author: Jona-Internxt

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",

src/components/breadcrumbs/Breadcrumbs.tsx

@@ -3,9 +3,9 @@ import { forwardRef, FunctionComponent, ReactNode, SVGProps } from 'react';
 import { Dispatch } from 'redux';
 import Dropdown from '../dropdown/Dropdown';
 import BreadcrumbsItem, { BreadcrumbItemData, BreadcrumbsMenuProps } from './BreadcrumbsItem';
-import { useDrop } from 'react-dnd';
+import { DropTargetMonitor, useDrop } from 'react-dnd';
 
-export interface BreadcrumbsProps<T extends Dispatch> {
+export interface BreadcrumbsProps<T extends Dispatch, U> {
   items: BreadcrumbItemData[];
   rootBreadcrumbItemDataCy?: string;
   menu?: (props: BreadcrumbsMenuProps) => JSX.Element;
@@ -14,18 +14,18 @@ export interface BreadcrumbsProps<T extends Dispatch> {
     uuid: string;
   }[];
   isSomeItemSelected: boolean;
-  selectedItems: [];
+  selectedItems: U[];
   onItemDropped: (
     item: BreadcrumbItemData,
     namePath: {
       name: string;
       uuid: string;
     }[],
     isSomeItemSelected: boolean,
-    selectedItems: [],
+    selectedItems: U[],
     dispatch: T,
-  ) => (draggedItem: unknown, monitor: unknown) => Promise<void>;
-  canItemDrop: (item: BreadcrumbItemData) => (draggedItem: unknown, monitor: unknown) => boolean;
+  ) => (draggedItem: U, monitor: DropTargetMonitor) => Promise<void>;
+  canItemDrop: (item: BreadcrumbItemData) => (draggedItem: U, monitor: DropTargetMonitor) => boolean;
   itemComponent?: FunctionComponent<SVGProps<SVGSVGElement>>;
   acceptedTypes: string[];
   dispatch: T;
@@ -74,7 +74,7 @@ export interface BreadcrumbsProps<T extends Dispatch> {
  * - Hook for dnd.
  */
 
-const Breadcrumbs = <T extends Dispatch>(props: Readonly<BreadcrumbsProps<T>>): JSX.Element => {
+const Breadcrumbs = <T extends Dispatch, U>(props: Readonly<BreadcrumbsProps<T, U>>): JSX.Element => {
   const MenuItem = forwardRef<HTMLDivElement, { children: ReactNode }>((props, ref) => {
     return (
       <div

src/components/breadcrumbs/BreadcrumbsItem.tsx

@@ -67,7 +67,7 @@ export interface BreadcrumbsMenuProps {
  * - Hook for dnd.
  */
 
-export interface BreadcrumbsItemProps<T extends Dispatch> {
+export interface BreadcrumbsItemProps<T extends Dispatch, U> {
   item: BreadcrumbItemData;
   totalBreadcrumbsLength: number;
   isHiddenInList?: boolean;
@@ -79,27 +79,25 @@ export interface BreadcrumbsItemProps<T extends Dispatch> {
     uuid: string;
   }[];
   isSomeItemSelected: boolean;
-  selectedItems: [];
+  selectedItems: U[];
   onItemDropped: (
     item: BreadcrumbItemData,
     namePath: {
       name: string;
       uuid: string;
     }[],
     isSomeItemSelected: boolean,
-    selectedItems: [],
+    selectedItems: U[],
     dispatch: T,
-  ) => (draggedItem: unknown, monitor: DropTargetMonitor) => Promise<void>;
-  canItemDrop: (
-    item: BreadcrumbItemData,
-  ) => (draggedItem: unknown, monitor: DropTargetMonitor<unknown, unknown>) => boolean;
+  ) => (draggedItem: U, monitor: DropTargetMonitor) => Promise<void>;
+  canItemDrop: (item: BreadcrumbItemData) => (draggedItem: U, monitor: DropTargetMonitor<unknown, unknown>) => boolean;
   itemComponent?: FunctionComponent<SVGProps<SVGSVGElement>>;
   acceptedTypes: string[];
   dispatch: T;
   useDrop: typeof useDrop;
 }
 
-const BreadcrumbsItem = <T extends Dispatch>(props: BreadcrumbsItemProps<T>): JSX.Element => {
+const BreadcrumbsItem = <T extends Dispatch, U>(props: BreadcrumbsItemProps<T, U>): JSX.Element => {
   const [{ isOver, canDrop }, drop] = props.useDrop(
     () => ({
       accept: props.acceptedTypes,

src/stories/components/breadcrumbs/breadcrumbs.stories.tsx

@@ -83,7 +83,7 @@ const menuBreadcrumbs = (props: BreadcrumbsMenuProps): JSX.Element => {
   );
 };
 
-const defaultBreadcrumbsProps: BreadcrumbsProps<Dispatch> = {
+const defaultBreadcrumbsProps: BreadcrumbsProps<Dispatch, unknown> = {
   items: breadcrumbItems,
   namePath: [
     { name: 'Home', uuid: '1' },