[PB-3276]:feat/ Add breadcrumbs

.github/workflows/deploy-storybook.yml

@@ -15,6 +15,11 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v2
 
+      - name: Set Git user identity
+        run: |
+          git config --global user.email "[email protected]"
+          git config --global user.name "GitHub Actions"
+
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:

package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.2.25",
+    "@internxt/css-config": "^1.0.2",
     "@internxt/eslint-config-internxt": "^1.0.9",
     "@internxt/prettier-config": "^1.0.2",
     "@storybook/addon-essentials": "^8.0.4",
@@ -32,7 +33,6 @@
     "@storybook/addon-onboarding": "^8.0.4",
     "@storybook/addon-themes": "^8.0.4",
     "@storybook/blocks": "^8.0.4",
-    "@internxt/css-config": "^1.0.2",
     "@storybook/react": "^8.0.4",
     "@storybook/react-vite": "^8.0.4",
     "@storybook/test": "^8.0.4",
@@ -89,7 +89,9 @@
   "dependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/themes": "^3.0.0"
+    "@radix-ui/themes": "^3.0.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1"
   },
   "lint-staged": {
     "*.{ts,tsx}": [

src/components/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,182 @@
+import { CaretRight, DotsThree } from '@phosphor-icons/react';
+import { forwardRef, FunctionComponent, ReactNode, SVGProps } from 'react';
+import { Dispatch } from 'redux';
+import Dropdown from '../dropdown/Dropdown';
+import { DropTargetMonitor } from 'react-dnd';
+import BreadcrumbsItem, { BreadcrumbItemData, BreadcrumbsMenuProps } from './BreadcrumbsItem';
+
+export interface BreadcrumbsProps<T extends Dispatch> {
+  items: BreadcrumbItemData[];
+  rootBreadcrumbItemDataCy?: string;
+  menu?: (props: BreadcrumbsMenuProps) => JSX.Element;
+  namePath: {
+    name: string;
+    uuid: string;
+  }[];
+  isSomeItemSelected: boolean;
+  selectedItems: [];
+  onItemDropped: (
+    item: BreadcrumbItemData,
+    namePath: {
+      name: string;
+      uuid: string;
+    }[],
+    isSomeItemSelected: boolean,
+    selectedItems: [],
+    dispatch: T,
+  ) => (draggedItem: unknown, monitor: DropTargetMonitor) => Promise<void>;
+  canItemDrop: (
+    item: BreadcrumbItemData,
+  ) => (draggedItem: unknown, monitor: DropTargetMonitor<unknown, unknown>) => boolean;
+  itemComponent?: FunctionComponent<SVGProps<SVGSVGElement>>;
+  acceptedTypes: string[];
+  dispatch: T;
+}
+
+/**
+ * Breadcrumbs component
+ *
+ * @property {BreadcrumbItemData[]} items
+ * - Array of breadcrumb items to be displayed, each containing a label, icon, and other related properties.
+ *
+ * @property {string} [rootBreadcrumbItemDataCy]
+ * - Custom `data-cy` attribute  applied to the root breadcrumb item.
+ *
+ * @property {Function} [menu]
+ * - Optional custom menu component for rendering a dropdown menu for breadcrumb items that need additional actions
+ * or options.
+ *
+ * @property {Object[]} namePath
+ * - Array of objects representing the path and UUID of the breadcrumb item, used for handling navigation or selection.
+ *
+ * @property {boolean} isSomeItemSelected
+ * - If true, indicates that some breadcrumb items are selected, affecting the display and behavior of the breadcrumbs.
+ *
+ * @property {any[]} selectedItems
+ * - Array of selected breadcrumb items, used to manage the selection state and related actions.
+ *
+ * @property {Function} onItemDropped
+ * - Callback function that is triggered when a breadcrumb item is dropped, used for handling drag-and-drop operations.
+ *
+ * @property {Function} canItemDrop
+ * - Determines if a breadcrumb item can be dropped. Used for validating drop actions in the drag-and-drop interaction.
+ *
+ * @property {FunctionComponent<SVGProps<SVGSVGElement>>} [itemComponent]
+ * - Optional custom component for rendering icons or other visual elements inside each breadcrumb item.
+ *
+ * @property {string[]} acceptedTypes
+ * - Array of accepted drag-and-drop types for breadcrumb items,
+ * specifying what types of items can be dragged and dropped.
+ *
+ * @property {Dispatch} dispatch
+ * - The Redux dispatch function for dispatching actions related to the breadcrumb items.
+ */
+
+const Breadcrumbs = <T extends Dispatch>(props: Readonly<BreadcrumbsProps<T>>): JSX.Element => {
+  const MenuItem = forwardRef<HTMLDivElement, { children: ReactNode }>((props, ref) => {
+    return (
+      <div
+        ref={ref}
+        className="flex cursor-pointer items-center hover:bg-gray-5 hover:text-gray-80 dark:hover:bg-gray-10"
+      >
+        {props.children}
+      </div>
+    );
+  });
+
+  const getItemsList = (): JSX.Element[] => {
+    const items = props.items;
+    const itemsList = [] as JSX.Element[];
+    const hiddenItemsList = [] as JSX.Element[];
+    const breadcrumbSeparator = (key: React.Key) => {
+      return (
+        <div key={key} className="text-dgray-50 flex items-center">
+          <CaretRight weight="bold" className="h-4 w-4" data-testid="caret-right" />
+        </div>
+      );
+    };
+
+    for (let i = 0; i < items.length; i++) {
+      const separatorKey = 'breadcrumbSeparator-' + items[i].uuid + i.toString();
+      const itemKey = 'breadcrumbItem-' + items[i].uuid + i.toString();
+
+      if (items.length > 3 && i !== 0 && i < items.length - 2) {
+        if (i === 1) {
+          itemsList.push(breadcrumbSeparator(separatorKey));
+        }
+        hiddenItemsList.push(
+          <MenuItem>
+            <BreadcrumbsItem
+              key={itemKey}
+              item={items[i]}
+              isHiddenInList
+              totalBreadcrumbsLength={items.length}
+              items={items}
+              namePath={props.namePath}
+              isSomeItemSelected={props.isSomeItemSelected}
+              selectedItems={props.selectedItems}
+              onItemDropped={props.onItemDropped}
+              canItemDrop={props.canItemDrop}
+              itemComponent={props.itemComponent}
+              acceptedTypes={props.acceptedTypes}
+              dispatch={props.dispatch}
+            />
+          </MenuItem>,
+        );
+      } else {
+        itemsList.push(
+          <BreadcrumbsItem
+            breadcrumbButtonDataCy={i === 0 ? props?.rootBreadcrumbItemDataCy : undefined}
+            key={itemKey}
+            item={items[i]}
+            totalBreadcrumbsLength={items.length}
+            items={items}
+            menu={props.menu}
+            namePath={props.namePath}
+            isSomeItemSelected={props.isSomeItemSelected}
+            selectedItems={props.selectedItems}
+            onItemDropped={props.onItemDropped}
+            canItemDrop={props.canItemDrop}
+            acceptedTypes={props.acceptedTypes}
+            dispatch={props.dispatch}
+          />,
+        );
+        if (i < items.length - 1) {
+          itemsList.push(breadcrumbSeparator(separatorKey));
+        }
+      }
+    }
+
+    if (hiddenItemsList.length > 0) {
+      const menu = (
+        <Dropdown
+          key="breadcrumbDropdownItems"
+          openDirection="left"
+          classMenuItems="left-0 top-1 w-max max-h-80 overflow-y-auto
+          rounded-md border border-gray-10 bg-surface dark:bg-gray-5 shadow-subtle-hard z-10"
+          menuItems={hiddenItemsList}
+        >
+          {({ open }: { open: boolean }) => {
+            return (
+              <div
+                className={`flex h-8 w-8 items-center justify-center
+                rounded-full text-gray-60 transition-all duration-75 ease-in-out hover:bg-gray-5 hover:text-gray-80 ${
+                  open ? 'bg-gray-5' : ''
+                }`}
+              >
+                <DotsThree weight="bold" className="h-5 w-5" />
+              </div>
+            );
+          }}
+        </Dropdown>
+      );
+      itemsList.splice(2, 0, menu);
+    }
+
+    return itemsList;
+  };
+
+  return <div className="flex w-full items-center">{getItemsList()}</div>;
+};
+
+export default Breadcrumbs;

src/components/breadcrumbs/BreadcrumbsItem.tsx

@@ -0,0 +1,162 @@
+import { DropTargetMonitor, useDrop } from 'react-dnd';
+import { Dispatch } from 'redux';
+import { FunctionComponent, SVGProps } from 'react';
+
+export interface BreadcrumbItemData {
+  uuid: string;
+  label: string;
+  icon: JSX.Element | null;
+  active: boolean;
+  isFirstPath?: boolean;
+  dialog?: boolean;
+  isBackup?: boolean;
+  onClick?: () => void;
+}
+
+export interface BreadcrumbsMenuProps {
+  item: BreadcrumbItemData;
+  items: BreadcrumbItemData[];
+  onItemClicked: (item: BreadcrumbItemData) => void;
+}
+
+/**
+ * BreadcrumbsItem component
+ *
+ * @property {BreadcrumbItemData} item
+ * - Data representing a single breadcrumb item, including label, icon, and other properties.
+ *
+ * @property {number} totalBreadcrumbsLength
+ * - The total number of breadcrumb items, used for styling the first item and determining when to apply certain styles.
+ *
+ * @property {boolean} [isHiddenInList]
+ * - If true, the breadcrumb is hidden in the list and only shown in a dropdown menu.
+ *
+ * @property {BreadcrumbItemData[]} items
+ * - Array of all breadcrumb items, used for rendering all the breadcrumbs and their separators.
+ *
+ * @property {string} [breadcrumbButtonDataCy]
+ * - Custom `data-cy` attribute applied to the breadcrumb button element.
+ *
+ * @property {FunctionComponent<BreadcrumbsMenuProps>} [menu]
+ * - A custom menu component that can be shown for the breadcrumb item when it's not active or dialog-based.
+ *
+ * @property {Object[]} namePath
+ * - Array of objects representing the path and UUID of the breadcrumb item.
+ *
+ * @property {boolean} isSomeItemSelected
+ * - If true, indicates that at least one breadcrumb item is selected, affecting styling or behavior.
+ *
+ * @property {any[]} selectedItems
+ * - Array of selected breadcrumb items, used to manage selected states and actions.
+ *
+ * @property {Function} onItemDropped
+ * - Callback function that is triggered when a breadcrumb item is dropped.
+ *
+ * @property {Function} canItemDrop
+ * - Determines if a breadcrumb item can be dropped. Used for validation during drag-and-drop operations.
+ *
+ * @property {FunctionComponent<SVGProps<SVGSVGElement>>} [itemComponent]
+ * - Optional custom component for rendering an icon or other visual elements within the breadcrumb item.
+ *
+ * @property {string[]} acceptedTypes
+ * - List of accepted drag-and-drop types for the breadcrumb item.
+ *
+ * @property {Dispatch} dispatch
+ * - The Redux dispatch function for dispatching actions related to the breadcrumb item.
+ */
+
+export interface BreadcrumbsItemProps<T extends Dispatch> {
+  item: BreadcrumbItemData;
+  totalBreadcrumbsLength: number;
+  isHiddenInList?: boolean;
+  items: BreadcrumbItemData[];
+  breadcrumbButtonDataCy?: string;
+  menu?: (props: BreadcrumbsMenuProps) => JSX.Element;
+  namePath: {
+    name: string;
+    uuid: string;
+  }[];
+  isSomeItemSelected: boolean;
+  selectedItems: [];
+  onItemDropped: (
+    item: BreadcrumbItemData,
+    namePath: {
+      name: string;
+      uuid: string;
+    }[],
+    isSomeItemSelected: boolean,
+    selectedItems: [],
+    dispatch: T,
+  ) => (draggedItem: unknown, monitor: DropTargetMonitor) => Promise<void>;
+  canItemDrop: (
+    item: BreadcrumbItemData,
+  ) => (draggedItem: unknown, monitor: DropTargetMonitor<unknown, unknown>) => boolean;
+  itemComponent?: FunctionComponent<SVGProps<SVGSVGElement>>;
+  acceptedTypes: string[];
+  dispatch: T;
+}
+
+const BreadcrumbsItem = <T extends Dispatch>(props: BreadcrumbsItemProps<T>): JSX.Element => {
+  const [{ isOver, canDrop }, drop] = useDrop(
+    () => ({
+      accept: props.acceptedTypes,
+      collect: (monitor) => ({
+        isOver: monitor.isOver(),
+        canDrop: monitor.canDrop(),
+      }),
+      canDrop: props.canItemDrop(props.item),
+      drop: props.onItemDropped(
+        props.item,
+        props.namePath,
+        props.isSomeItemSelected,
+        props.selectedItems,
+        props.dispatch,
+      ),
+    }),
+    [props.selectedItems],
+  );
+
+  const onItemClicked = (item: BreadcrumbItemData): void => {
+    if (item.active) {
+      item.onClick && item.onClick();
+    }
+  };
+  const isDraggingOverClassNames = isOver && canDrop ? 'drag-over-effect' : '';
+
+  return (
+    <>
+      {!props.item.active && !props.item.dialog && props.menu ? (
+        <props.menu item={props.item} items={props.items} onItemClicked={onItemClicked} />
+      ) : (
+        <div
+          ref={drop}
+          className={`flex ${props.isHiddenInList ? 'w-full' : 'max-w-fit'} ${
+            props.item.isFirstPath ? 'shrink-0 pr-1' : 'min-w-breadcrumb flex-1 px-1.5 py-1.5'
+          } cursor-pointer flex-row items-center truncate font-medium ${isDraggingOverClassNames}
+        ${
+          !props.item.active || (props.item.isFirstPath && props.totalBreadcrumbsLength === 1)
+            ? 'text-gray-80'
+            : 'text-gray-50 hover:text-gray-80'
+        }`}
+          key={props.item.uuid}
+          onClick={() => onItemClicked(props.item)}
+          onKeyDown={() => {}}
+          data-cy={props?.breadcrumbButtonDataCy}
+        >
+          {props.itemComponent && <props.itemComponent className="h-5 w-5" />}
+          {props.item.icon ? props.item.icon : null}
+          {props.item.label ? (
+            <span
+              className={`max-w-sm flex-1 cursor-pointer truncate ${props.isHiddenInList && 'pl-3 text-base'}`}
+              title={props.item.label}
+            >
+              {props.item.label}
+            </span>
+          ) : null}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default BreadcrumbsItem;