From 5632f27c6022e032e2d136bb9d25fc3bd6d9b400 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Wed, 9 Oct 2024 16:53:56 +0100
Subject: [PATCH] Implemented very simple version of Breadcrumb component

---
 .../src/global/Breadcrumb.stories.tsx         | 25 +++++++++++++
 .../src/global/Breadcrumb.tsx                 | 37 +++++++++++++++++++
 .../src/global/modal/PreviewModal.stories.tsx |  2 +-
 .../src/global/modal/PreviewModal.tsx         | 31 +++++++++-------
 4 files changed, 81 insertions(+), 14 deletions(-)
 create mode 100644 apps/admin-x-design-system/src/global/Breadcrumb.stories.tsx
 create mode 100644 apps/admin-x-design-system/src/global/Breadcrumb.tsx

diff --git a/apps/admin-x-design-system/src/global/Breadcrumb.stories.tsx b/apps/admin-x-design-system/src/global/Breadcrumb.stories.tsx
new file mode 100644
index 0000000000..9f42f8fb5b
--- /dev/null
+++ b/apps/admin-x-design-system/src/global/Breadcrumb.stories.tsx
@@ -0,0 +1,25 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import React from 'react';
+import Breadcrumb, {BreadcrumbItem} from './Breadcrumb';
+
+const meta = {
+    title: 'Global / Breadcrumb',
+    component: Breadcrumb,
+    tags: ['autodocs']
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {
+    args: {
+        children: (
+            <Breadcrumb>
+                <BreadcrumbItem>f</BreadcrumbItem>
+                <BreadcrumbItem>f</BreadcrumbItem>
+                <BreadcrumbItem>f</BreadcrumbItem>
+            </Breadcrumb>
+        )
+    }
+};
diff --git a/apps/admin-x-design-system/src/global/Breadcrumb.tsx b/apps/admin-x-design-system/src/global/Breadcrumb.tsx
new file mode 100644
index 0000000000..ec6f5853f3
--- /dev/null
+++ b/apps/admin-x-design-system/src/global/Breadcrumb.tsx
@@ -0,0 +1,37 @@
+import React, {Children, isValidElement, useId} from 'react';
+
+export type BreadcrumbProps = {
+    children: React.ReactNode
+}
+
+export type BreadcrumbItemProps = {
+    children: React.ReactNode
+    onClick?: () => void;
+}
+
+const Breadcrumb: React.FC<BreadcrumbProps> = ({children}) => {
+    const id = useId();
+    const items = Children.toArray(children);
+
+    return (
+        <div>
+            {items.map((child, index) => {
+                if (isValidElement(child)) {
+                    return (
+                        <span key={id}>
+                            {child}
+                            {index < items.length - 1 && <span>/</span>}
+                        </span>
+                    );
+                }
+                return child;
+            })}
+        </div>
+    );
+};
+
+export const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({children, onClick}) => {
+    return <span onClick={onClick}>{children}</span>;
+};
+
+export default Breadcrumb;
diff --git a/apps/admin-x-design-system/src/global/modal/PreviewModal.stories.tsx b/apps/admin-x-design-system/src/global/modal/PreviewModal.stories.tsx
index 6f2c41718a..b3fb2feed5 100644
--- a/apps/admin-x-design-system/src/global/modal/PreviewModal.stories.tsx
+++ b/apps/admin-x-design-system/src/global/modal/PreviewModal.stories.tsx
@@ -101,6 +101,6 @@ export const BreadcrumbsToolbar: Story = {
     args: {
         ...Default.args,
         previewToolbarTabs: undefined,
-        previewToolbarBreadcrumbs: [{label: 'Previous', onClick: () => {}}, {label: 'Current'}]
+        previewToolbarBreadcrumbs: [{children: 'Previous', onClick: () => {}}, {children: 'Current'}]
     }
 };
diff --git a/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx b/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
index 7b70798cb6..e0f42ca53d 100644
--- a/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
+++ b/apps/admin-x-design-system/src/global/modal/PreviewModal.tsx
@@ -4,7 +4,8 @@ import React, {useEffect, useState} from 'react';
 import useGlobalDirtyState from '../../hooks/useGlobalDirtyState';
 import {confirmIfDirty} from '../../utils/modals';
 import {ButtonColor, ButtonProps} from '../Button';
-import Breadcrumbs, {BreadcrumbItem} from '../Breadcrumbs';
+// import Breadcrumbs, {BreadcrumbItem} from '../Breadcrumbs';
+import Breadcrumb, {BreadcrumbItem, BreadcrumbItemProps} from '../Breadcrumb';
 import ButtonGroup from '../ButtonGroup';
 import Heading, {HeadingLevel} from '../Heading';
 import Icon from '../Icon';
@@ -34,7 +35,7 @@ export interface PreviewModalProps {
     deviceSelector?: boolean;
     siteLink?: string;
     previewToolbarURLs?: SelectOption[];
-    previewToolbarBreadcrumbs?: BreadcrumbItem[];
+    previewToolbarBreadcrumbs?: BreadcrumbItemProps[];
     previewBgColor?: 'grey' | 'white' | 'greygradient';
     selectedURL?: string;
     previewToolbarTabs?: Tab[];
@@ -91,8 +92,8 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
     afterClose,
     onSelectURL,
     onSelectDesktopView,
-    onSelectMobileView,
-    onBreadcrumbsBack
+    onSelectMobileView
+    // onBreadcrumbsBack
 }) => {
     const modal = useModal();
     const {setGlobalDirtyState} = useGlobalDirtyState();
@@ -153,15 +154,19 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
                 onTabChange={onSelectURL!}
             />;
         } else if (previewToolbarBreadcrumbs) {
-            toolbarLeft = <Breadcrumbs
-                activeItemClassName='hidden md:!block md:!visible'
-                containerClassName='whitespace-nowrap'
-                itemClassName='hidden md:!block md:!visible'
-                items={previewToolbarBreadcrumbs}
-                separatorClassName='hidden md:!block md:!visible'
-                backIcon
-                onBack={onBreadcrumbsBack}
-            />;
+            // toolbarLeft = <Breadcrumbs
+            //     activeItemClassName='hidden md:!block md:!visible'
+            //     containerClassName='whitespace-nowrap'
+            //     itemClassName='hidden md:!block md:!visible'
+            //     items={previewToolbarBreadcrumbs}
+            //     separatorClassName='hidden md:!block md:!visible'
+            //     backIcon
+            //     onBack={onBreadcrumbsBack}
+            // />;
+            toolbarLeft = <Breadcrumb>
+                {previewToolbarBreadcrumbs.map(item => <BreadcrumbItem onClick={item.onClick}>{item.children}</BreadcrumbItem>
+                )}
+            </Breadcrumb>;
         }
 
         const selectedIconColorClass = 'text-black dark:text-green';