From cbd2d8681dc54eda9990ba776972e968f8796eda Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Tue, 7 May 2024 16:54:05 +0200 Subject: [PATCH 1/5] feat: breadcrumbs implementation --- .../Molecules/Breadcrumbs.stories.tsx | 24 +++++ .../src/components/Molecules/Breadcrumbs.tsx | 66 ++++++++++++++ packages/ui/src/components/Routes/Menu.tsx | 90 +++++++++++++++++++ 3 files changed, 180 insertions(+) create mode 100644 packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx create mode 100644 packages/ui/src/components/Molecules/Breadcrumbs.tsx create mode 100644 packages/ui/src/components/Routes/Menu.tsx diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx new file mode 100644 index 000000000..a0ca464d7 --- /dev/null +++ b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx @@ -0,0 +1,24 @@ +import { FrameQuery, OperationExecutor } from '@custom/schema'; +import { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; + +import { Default as FrameStory } from '../Routes/Frame.stories'; +import BreadCrumbs from './Breadcrumbs'; + +export default { + component: BreadCrumbs, + parameters: { + layout: 'fullscreen', + location: { pathname: '/gatsby-turbo' }, + }, +} satisfies StoryObj; + +export const Default = { + render: () => { + return ( + + + + ); + }, +}; diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx new file mode 100644 index 000000000..7f0811eb4 --- /dev/null +++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx @@ -0,0 +1,66 @@ +import { Link } from '@custom/schema'; +import { ChevronRightIcon } from '@heroicons/react/24/outline'; +import clsx from 'clsx'; +import React from 'react'; + +import { isTruthy } from '../../utils/isTruthy'; +import { useBreadcrumbs } from '../Routes/Menu'; + +export default function BreadCrumbs({ + bgCol = 'gray-50', + className, +}: { + bgCol?: string; + className?: string; +}) { + const breadcrumbs = useBreadcrumbs(); + + console.log('breadcrumbs:', breadcrumbs); + + if (!breadcrumbs.length) { + console.log('breadcrumbs null:'); + return null; + } + + return ( + + ); +} diff --git a/packages/ui/src/components/Routes/Menu.tsx b/packages/ui/src/components/Routes/Menu.tsx new file mode 100644 index 000000000..2721f1a90 --- /dev/null +++ b/packages/ui/src/components/Routes/Menu.tsx @@ -0,0 +1,90 @@ +import { FrameQuery, NavigationItem, Url, useLocation } from '@custom/schema'; +import { useIntl } from 'react-intl'; + +import { useOperation } from '../../utils/operation'; + +export type MenuNameType = 'main' | 'footer'; + +export function useMenus() { + const intl = useIntl(); + const locale = intl.locale; + const settings = useOperation(FrameQuery).data; + return { + main: settings?.mainNavigation + ?.filter((nav) => nav?.locale === locale) + .pop(), + footer: settings?.footerNavigation + ?.filter((nav) => nav?.locale === locale) + .pop(), + }; +} + +export function useCurrentPath() { + const [loc] = useLocation(); + return loc.pathname; +} + +export function useMenuItem(path: string, menuName: MenuNameType) { + const menus = useMenus(); + return ( + menus && + menus[menuName]?.items.find((menuItem) => menuItem?.target === path) + ); +} + +export function useMenuChildren(path: string, menuName: MenuNameType) { + const menus = useMenus(); + const menuItemFromPath = useMenuItem(path, menuName); + return ( + menus && + menus[menuName]?.items.filter( + (menuItem) => menuItem?.parent === menuItemFromPath?.id, + ) + ); +} + +export function useCurrentMenuItem(menuName: MenuNameType) { + const currentPath = useCurrentPath(); + return useMenuItem(currentPath || '', menuName); +} + +export function useCurrentMenuChildren(menuName: MenuNameType) { + const currentPath = useCurrentPath(); + return useMenuChildren(currentPath || '', menuName); +} + +export function useMenuAncestors(path: string, menuName: MenuNameType) { + const menus = useMenus(); + const menuItemFromPath = useMenuItem(path, menuName); + let processingMenuItem = menuItemFromPath; + const ancestors: Array = []; + + // Set current page breadcrumb + if (typeof processingMenuItem !== 'undefined') { + ancestors.push(processingMenuItem); + } + + while ( + typeof processingMenuItem !== 'undefined' && + processingMenuItem?.parent + ) { + processingMenuItem = + menus && + menus[menuName]?.items.find( + (menuItem) => menuItem?.id === processingMenuItem?.parent, + ); + if (typeof processingMenuItem !== 'undefined') { + ancestors.push(processingMenuItem); + } + } + if (ancestors.length > 0) { + ancestors.push({ id: '_', target: '/' as Url, title: 'Home' }); + } + + return ancestors.reverse(); +} + +export const useBreadcrumbs = (menuName?: MenuNameType, path?: string) => { + const currentPath = useCurrentPath(); + return useMenuAncestors(path || currentPath || '', menuName || 'main'); +}; From bee3b2c5938a3bd5af4f6c6656e050c516ba3ebd Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Tue, 7 May 2024 20:20:23 +0200 Subject: [PATCH 2/5] feat: wip --- .../components/Molecules/Breadcrumbs.stories.tsx | 6 +++--- .../ui/src/components/Molecules/Breadcrumbs.tsx | 13 ++----------- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx index a0ca464d7..81dd002ba 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx @@ -1,5 +1,5 @@ import { FrameQuery, OperationExecutor } from '@custom/schema'; -import { Meta, StoryObj } from '@storybook/react'; +import { Meta } from '@storybook/react'; import React from 'react'; import { Default as FrameStory } from '../Routes/Frame.stories'; @@ -9,9 +9,9 @@ export default { component: BreadCrumbs, parameters: { layout: 'fullscreen', - location: { pathname: '/gatsby-turbo' }, + location: new URL('local:/gatsby-turbo'), }, -} satisfies StoryObj; +} satisfies Meta; export const Default = { render: () => { diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx index 7f0811eb4..f057661ce 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx @@ -6,19 +6,10 @@ import React from 'react'; import { isTruthy } from '../../utils/isTruthy'; import { useBreadcrumbs } from '../Routes/Menu'; -export default function BreadCrumbs({ - bgCol = 'gray-50', - className, -}: { - bgCol?: string; - className?: string; -}) { +export default function BreadCrumbs({ className }: { className?: string }) { const breadcrumbs = useBreadcrumbs(); - console.log('breadcrumbs:', breadcrumbs); - if (!breadcrumbs.length) { - console.log('breadcrumbs null:'); return null; } @@ -27,7 +18,7 @@ export default function BreadCrumbs({ className={clsx('pt-5 max-w-screen-xl mx-auto', className)} aria-label="Breadcrumb" > -
    +
      {breadcrumbs?.filter(isTruthy).map(({ title, target, id }, index) => (
    1. {index > 0 ? ( From 7b58f2ea3241e41cd3580e75066c5ec5d13a0caa Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Wed, 8 May 2024 09:39:42 +0200 Subject: [PATCH 3/5] feat: wip --- .../Molecules/Breadcrumbs.stories.tsx | 2 +- .../src/components/Molecules/Breadcrumbs.tsx | 9 +++---- .../src/components/Organisms/PageDisplay.tsx | 10 +++++++- packages/ui/src/components/Routes/Menu.tsx | 4 ++- .../ui/src/components/Routes/Page.stories.tsx | 25 ++++++++++++++----- 5 files changed, 35 insertions(+), 15 deletions(-) diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx index 81dd002ba..9a7c6d0e5 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx @@ -3,7 +3,7 @@ import { Meta } from '@storybook/react'; import React from 'react'; import { Default as FrameStory } from '../Routes/Frame.stories'; -import BreadCrumbs from './Breadcrumbs'; +import { BreadCrumbs } from './Breadcrumbs'; export default { component: BreadCrumbs, diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx index f057661ce..0efa3eb61 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { isTruthy } from '../../utils/isTruthy'; import { useBreadcrumbs } from '../Routes/Menu'; -export default function BreadCrumbs({ className }: { className?: string }) { +export function BreadCrumbs({ className }: { className?: string }) { const breadcrumbs = useBreadcrumbs(); if (!breadcrumbs.length) { @@ -14,11 +14,8 @@ export default function BreadCrumbs({ className }: { className?: string }) { } return ( -