[WEB-4050] feat: breadcrumbs revamp

admin/core/components/auth-header.tsx

@@ -67,9 +67,8 @@ export const InstanceHeader: FC = observer(() => {
         {breadcrumbItems.length >= 0 && (
           <div>
             <Breadcrumbs>
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={
+              <Breadcrumbs.Item
+                component={
                   <BreadcrumbLink
                     href="/general/"
                     label="Settings"
@@ -80,10 +79,9 @@ export const InstanceHeader: FC = observer(() => {
               {breadcrumbItems.map(
                 (item) =>
                   item.title && (
-                    <Breadcrumbs.BreadcrumbItem
+                    <Breadcrumbs.Item
                       key={item.title}
-                      type="text"
-                      link={<BreadcrumbLink href={item.href} label={item.title} />}
+                      component={<BreadcrumbLink href={item.href} label={item.title} />}
                     />
                   )
               )}

packages/constants/src/project.ts

@@ -149,3 +149,12 @@ export const DEFAULT_PROJECT_FORM_VALUES: Partial<IProject> = {
   network: 2,
   project_lead: null,
 };
+
+export enum EProjectFeatureKey {
+  WORK_ITEMS = "work_items",
+  CYCLES = "cycles",
+  MODULES = "modules",
+  VIEWS = "views",
+  PAGES = "pages",
+  INTAKE = "intake",
+}

packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx

@@ -0,0 +1,233 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Home, Settings, Briefcase, GridIcon, Layers2, FileIcon } from "lucide-react";
+import * as React from "react";
+import { ContrastIcon, EpicIcon, LayersIcon } from "../icons";
+import { Breadcrumbs } from "./breadcrumbs";
+import { BreadcrumbNavigationDropdown } from "./navigation-dropdown";
+
+const meta: Meta<typeof Breadcrumbs> = {
+  title: "UI/Breadcrumbs",
+  component: Breadcrumbs,
+  tags: ["autodocs"],
+  argTypes: {
+    isLoading: {
+      control: "boolean",
+      description: "Shows loading state of breadcrumbs",
+    },
+    onBack: {
+      action: "onBack",
+      description: "Callback function when back button is clicked",
+    },
+  },
+};
+
+type TBreadcrumbBlockProps = {
+  href?: string;
+  label?: string;
+  icon?: React.ReactNode;
+  disableTooltip?: boolean;
+};
+
+// TODO: remove this component and use web Link component
+const BreadcrumbBlock: React.FC<TBreadcrumbBlockProps> = (props) => {
+  const { label, icon, disableTooltip = false } = props;
+
+  return (
+    <>
+      <Breadcrumbs.ItemWrapper label={label} disableTooltip={disableTooltip}>
+        {icon && <div className="flex size-4 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>}
+        {label && <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>}
+      </Breadcrumbs.ItemWrapper>
+    </>
+  );
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
+
+export const Default: Story = {
+  args: {
+    children: [
+      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
+      <Breadcrumbs.Item key="projects" component={<BreadcrumbBlock href="/projects" label="Projects" />} />,
+      <Breadcrumbs.Item
+        key="current"
+        component={<BreadcrumbBlock href="/projects/current" label="Current Project" />}
+      />,
+    ],
+  },
+};
+
+export const WithLoading: Story = {
+  args: {
+    isLoading: true,
+    children: [
+      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
+      <Breadcrumbs.Item key="projects" component={<BreadcrumbBlock href="/projects" label="Projects" />} />,
+    ],
+  },
+};
+
+export const WithCustomComponent: Story = {
+  args: {
+    children: [
+      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
+      <Breadcrumbs.Item
+        key="custom"
+        component={
+          <div className="flex items-center gap-2">
+            <span className="size-4 rounded-full bg-blue-500" />
+            <span>Custom Component</span>
+          </div>
+        }
+      />,
+    ],
+  },
+};
+
+export const SingleItem: Story = {
+  args: {
+    children: [<Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />],
+  },
+};
+
+export const WithNavigationDropdown: Story = {
+  args: {
+    children: [
+      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
+      <Breadcrumbs.Item
+        key="projects"
+        component={
+          <BreadcrumbNavigationDropdown
+            selectedItemKey="project-1"
+            navigationItems={[
+              {
+                key: "project-1",
+                title: "Project Alpha",
+
+                action: () => console.log("Project Alpha selected"),
+              },
+              {
+                key: "project-2",
+                title: "Project Beta",
+
+                action: () => console.log("Project Beta selected"),
+              },
+              {
+                key: "project-3",
+                title: "Project Gamma",
+
+                action: () => console.log("Project Gamma selected"),
+              },
+            ]}
+          />
+        }
+        showSeparator={false}
+      />,
+      <Breadcrumbs.Item key="settings" component={<BreadcrumbBlock href="/settings" label="Settings" />} />,
+    ],
+  },
+};
+
+export const WithNavigationDropdownAndIcons: Story = {
+  args: {
+    children: [
+      <Breadcrumbs.Item
+        key="home"
+        component={<BreadcrumbBlock href="/" label="Home" icon={<Home className="size-3.5" />} />}
+      />,
+      <Breadcrumbs.Item
+        key="projects"
+        component={
+          <BreadcrumbNavigationDropdown
+            selectedItemKey="project-1"
+            navigationItems={[
+              {
+                key: "project-1",
+                title: "Project Alpha",
+                icon: Briefcase,
+
+                action: () => console.log("Project Alpha selected"),
+              },
+              {
+                key: "project-2",
+                title: "Project Beta",
+                icon: Briefcase,
+
+                // disabled: true,
+                action: () => console.log("Project Beta selected"),
+              },
+              {
+                key: "project-3",
+                title: "Project Gamma",
+                icon: Briefcase,
+
+                action: () => console.log("Project Gamma selected"),
+              },
+            ]}
+          />
+        }
+        showSeparator={false}
+      />,
+      <Breadcrumbs.Item
+        key="features"
+        component={
+          <BreadcrumbNavigationDropdown
+            selectedItemKey="feature-1"
+            navigationItems={[
+              {
+                key: "feature-1",
+                title: "Epics",
+                icon: EpicIcon,
+
+                action: () => console.log("Feature Alpha selected"),
+              },
+              {
+                key: "feature-2",
+                title: "Work items",
+                icon: LayersIcon,
+
+                // disabled: true,
+                action: () => console.log("Feature Beta selected"),
+              },
+              {
+                key: "feature-3",
+                title: "Cycles",
+                icon: ContrastIcon,
+
+                action: () => console.log("Feature Gamma selected"),
+              },
+              {
+                key: "feature-3",
+                title: "Modules",
+                icon: GridIcon,
+
+                action: () => console.log("Feature Gamma selected"),
+              },
+              {
+                key: "feature-3",
+                title: "Views",
+                icon: Layers2,
+
+                action: () => console.log("Feature Gamma selected"),
+              },
+              {
+                key: "feature-3",
+                title: "Pages",
+                icon: FileIcon,
+
+                action: () => console.log("Feature Gamma selected"),
+              },
+            ]}
+          />
+        }
+        showSeparator={false}
+      />,
+      <Breadcrumbs.Item
+        key="settings"
+        component={<BreadcrumbBlock href="/settings" label="Settings" icon={<Settings className="size-3.5" />} />}
+        isLast
+      />,
+    ],
+  },
+};