From e31290c46b14175f74c1ee963aa5f62f9c970aaf Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Mon, 30 Dec 2024 09:49:53 +0100 Subject: [PATCH] rename Menu components --- .../menuButton/AppHeaderMenuButton.tsx | 4 +- packages/admin/admin/src/index.ts | 20 +++--- packages/admin/admin/src/mui/MasterLayout.tsx | 6 +- .../CollapsibleItem.styles.ts | 34 +++++----- .../CollapsibleItem.tsx | 65 +++++++++++-------- .../mui/{menu => mainNavigation}/Context.tsx | 12 ++-- .../{menu => mainNavigation}/Item.styles.ts | 22 +++---- .../src/mui/{menu => mainNavigation}/Item.tsx | 26 ++++---- .../ItemAnchorLink.tsx | 13 ++-- .../{menu => mainNavigation}/ItemGroup.tsx | 48 +++++++------- .../ItemRouterLink.tsx | 23 +++++-- .../MainNavigation.styles.ts} | 14 ++-- .../MainNavigation.tsx} | 32 ++++----- .../admin/cms-admin/src/common/MasterMenu.tsx | 64 +++++++++--------- .../RouteWithErrorBoundary.stories.tsx | 10 +-- storybook/src/admin/mui/AppHeader.stories.tsx | 10 +-- storybook/src/admin/mui/Menu.stories.tsx | 52 +++++++-------- .../admin/mui/MenuDynamicVariants.stories.tsx | 38 +++++------ .../docs/components/Master/Master.stories.tsx | 10 +-- storybook/src/helpers/storyDecorators.tsx | 8 +-- 20 files changed, 270 insertions(+), 241 deletions(-) rename packages/admin/admin/src/mui/{menu => mainNavigation}/CollapsibleItem.styles.ts (67%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/CollapsibleItem.tsx (77%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/Context.tsx (57%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/Item.styles.ts (94%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/Item.tsx (75%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/ItemAnchorLink.tsx (72%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/ItemGroup.tsx (74%) rename packages/admin/admin/src/mui/{menu => mainNavigation}/ItemRouterLink.tsx (54%) rename packages/admin/admin/src/mui/{menu/Menu.styles.ts => mainNavigation/MainNavigation.styles.ts} (86%) rename packages/admin/admin/src/mui/{menu/Menu.tsx => mainNavigation/MainNavigation.tsx} (79%) diff --git a/packages/admin/admin/src/appHeader/menuButton/AppHeaderMenuButton.tsx b/packages/admin/admin/src/appHeader/menuButton/AppHeaderMenuButton.tsx index 9392c04f63c..c38e5d566ed 100644 --- a/packages/admin/admin/src/appHeader/menuButton/AppHeaderMenuButton.tsx +++ b/packages/admin/admin/src/appHeader/menuButton/AppHeaderMenuButton.tsx @@ -3,7 +3,7 @@ import { ComponentsOverrides, css, IconButton, IconButtonClassKey, IconButtonPro import { ReactNode, useContext } from "react"; import { createComponentSlot } from "../../helpers/createComponentSlot"; -import { MenuContext } from "../../mui/menu/Context"; +import { MainNavigationContext } from "../../mui/mainNavigation/Context"; export type AppHeaderMenuButtonProps = IconButtonProps; @@ -11,7 +11,7 @@ export type AppHeaderMenuButtonClassKey = IconButtonClassKey; export const AppHeaderMenuButton = (inProps: AppHeaderMenuButtonProps) => { const { children: propChildren, ...restProps } = useThemeProps({ props: inProps, name: "CometAdminAppHeaderMenuButton" }); - const { toggleOpen, open, drawerVariant } = useContext(MenuContext); + const { toggleOpen, open, drawerVariant } = useContext(MainNavigationContext); const closeIcons: Record = { temporary: , diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts index aee23723760..bd04654d45b 100644 --- a/packages/admin/admin/src/index.ts +++ b/packages/admin/admin/src/index.ts @@ -201,18 +201,18 @@ export { useStoredState } from "./hooks/useStoredState"; export { InputWithPopper, InputWithPopperComponents, InputWithPopperProps } from "./inputWithPopper/InputWithPopper"; export { InputWithPopperClassKey } from "./inputWithPopper/InputWithPopper.slots"; export { messages } from "./messages"; +export { MainNavigationCollapsibleItem, MainNavigationCollapsibleItemProps } from "./mui/mainNavigation/CollapsibleItem"; +export { MainNavigationCollapsibleItemClassKey } from "./mui/mainNavigation/CollapsibleItem.styles"; +export { IMainNavigationContext, IWithMainNavigation, MainNavigationContext, withMenu } from "./mui/mainNavigation/Context"; +export { MainNavigationItem, MainNavigationItemProps } from "./mui/mainNavigation/Item"; +export { MainNavigationItemClassKey } from "./mui/mainNavigation/Item.styles"; +export { MainNavigationItemAnchorLink, MainNavigationItemAnchorLinkProps } from "./mui/mainNavigation/ItemAnchorLink"; +export { MainNavigationItemGroup, MainNavigationItemGroupClassKey, MainNavigationItemGroupProps } from "./mui/mainNavigation/ItemGroup"; +export { MainNavigationItemRouterLink, MainNavigationItemRouterLinkProps } from "./mui/mainNavigation/ItemRouterLink"; +export { MainNavigation, MainNavigationProps } from "./mui/mainNavigation/MainNavigation"; +export { MainNavigationClassKey } from "./mui/mainNavigation/MainNavigation.styles"; export { MasterLayout, MasterLayoutClassKey, MasterLayoutProps } from "./mui/MasterLayout"; export { MasterLayoutContext } from "./mui/MasterLayoutContext"; -export { MenuCollapsibleItem, MenuCollapsibleItemProps } from "./mui/menu/CollapsibleItem"; -export { MenuCollapsibleItemClassKey } from "./mui/menu/CollapsibleItem.styles"; -export { IMenuContext, IWithMenu, MenuContext, withMenu } from "./mui/menu/Context"; -export { MenuItem, MenuItemProps } from "./mui/menu/Item"; -export { MenuItemClassKey } from "./mui/menu/Item.styles"; -export { MenuItemAnchorLink, MenuItemAnchorLinkProps } from "./mui/menu/ItemAnchorLink"; -export { MenuItemGroup, MenuItemGroupClassKey, MenuItemGroupProps } from "./mui/menu/ItemGroup"; -export { MenuItemRouterLink, MenuItemRouterLinkProps } from "./mui/menu/ItemRouterLink"; -export { Menu, MenuProps } from "./mui/menu/Menu"; -export { MenuClassKey } from "./mui/menu/Menu.styles"; export { MuiThemeProvider } from "./mui/ThemeProvider"; export { RouterBrowserRouter } from "./router/BrowserRouter"; export { RouterConfirmationDialog, RouterConfirmationDialogClassKey, RouterConfirmationDialogProps } from "./router/ConfirmationDialog"; diff --git a/packages/admin/admin/src/mui/MasterLayout.tsx b/packages/admin/admin/src/mui/MasterLayout.tsx index 208d89b0e99..58708f854fe 100644 --- a/packages/admin/admin/src/mui/MasterLayout.tsx +++ b/packages/admin/admin/src/mui/MasterLayout.tsx @@ -6,8 +6,8 @@ import { AppHeader } from "../appHeader/AppHeader"; import { AppHeaderMenuButton } from "../appHeader/menuButton/AppHeaderMenuButton"; import { createComponentSlot } from "../helpers/createComponentSlot"; import { ThemedComponentBaseProps } from "../helpers/ThemedComponentBaseProps"; +import { MainNavigationContext } from "./mainNavigation/Context"; import { MasterLayoutContext } from "./MasterLayoutContext"; -import { MenuContext } from "./menu/Context"; export type MasterLayoutClassKey = "root" | "header" | "contentWrapper"; @@ -71,7 +71,7 @@ export function MasterLayout(inProps: MasterLayoutProps) { }; return ( - + @@ -93,7 +93,7 @@ export function MasterLayout(inProps: MasterLayoutProps) { - + ); } diff --git a/packages/admin/admin/src/mui/menu/CollapsibleItem.styles.ts b/packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.styles.ts similarity index 67% rename from packages/admin/admin/src/mui/menu/CollapsibleItem.styles.ts rename to packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.styles.ts index 976c1b8ccda..f1c9f1080bd 100644 --- a/packages/admin/admin/src/mui/menu/CollapsibleItem.styles.ts +++ b/packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.styles.ts @@ -2,22 +2,22 @@ import { Typography } from "@mui/material"; import { css } from "@mui/material/styles"; import { createComponentSlot } from "../../helpers/createComponentSlot"; -import { IMenuContext } from "./Context"; -import { MenuItem as CometMenuItem, MenuItemLevel } from "./Item"; +import { IMainNavigationContext } from "./Context"; +import { MainNavigationItem as CometMainNavigationItem, MainNavigationItemLevel } from "./Item"; -export type MenuCollapsibleItemClassKey = "root" | "open" | "childSelected" | "menuItem" | "itemTitle" | "collapsibleIndicator"; +export type MainNavigationCollapsibleItemClassKey = "root" | "open" | "childSelected" | "mainNavigationItem" | "itemTitle" | "collapsibleIndicator"; export type OwnerState = { childSelected: boolean; open: boolean; menuOpen: boolean; subMenuOpen: boolean; - level: MenuItemLevel; - variant: IMenuContext["drawerVariant"]; + level: MainNavigationItemLevel; + variant: IMainNavigationContext["drawerVariant"]; }; -export const Root = createComponentSlot("div")({ - componentName: "MenuCollapsibleItem", +export const Root = createComponentSlot("div")({ + componentName: "MainNavigationCollapsibleItem", slotName: "root", classesResolver: (ownerState) => { return [ownerState.open && "open", ownerState.childSelected && "childSelected"]; @@ -32,9 +32,9 @@ export const Root = createComponentSlot("div")({ - componentName: "MenuCollapsibleItem", - slotName: "menuItem", +export const MainNavigationItem = createComponentSlot(CometMainNavigationItem)({ + componentName: "MainNavigationCollapsibleItem", + slotName: "mainNavigationItem", })( ({ theme, ownerState }) => css` background-color: ${theme.palette.common.white}; @@ -59,12 +59,12 @@ export const MenuItem = createComponentSlot(CometMenuItem)({ - componentName: "MenuCollapsibleItem", +export const ItemTitle = createComponentSlot(Typography)({ + componentName: "MainNavigationCollapsibleItem", slotName: "itemTitle", })( ({ theme }) => css` @@ -87,8 +87,8 @@ export const ItemTitle = createComponentSlot(Typography)({ - componentName: "MenuCollapsibleItem", +export const CollapsibleIndicator = createComponentSlot("div")({ + componentName: "MainNavigationCollapsibleItem", slotName: "collapsibleIndicator", })( ({ theme, ownerState }) => css` diff --git a/packages/admin/admin/src/mui/menu/CollapsibleItem.tsx b/packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.tsx similarity index 77% rename from packages/admin/admin/src/mui/menu/CollapsibleItem.tsx rename to packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.tsx index fb6be637d51..bca88c1e80c 100644 --- a/packages/admin/admin/src/mui/menu/CollapsibleItem.tsx +++ b/packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.tsx @@ -4,22 +4,29 @@ import { Children, cloneElement, MouseEvent, ReactElement, ReactNode, useContext import { matchPath, useLocation } from "react-router"; import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps"; -import { CollapsibleIndicator, ItemTitle, MenuCollapsibleItemClassKey, MenuItem, OwnerState, Root } from "./CollapsibleItem.styles"; -import { MenuContext } from "./Context"; -import { MenuItem as CometMenuItem, MenuItemLevel, MenuItemProps } from "./Item"; -import { MenuItemRouterLinkProps } from "./ItemRouterLink"; - -export type MenuChild = ReactElement; - -export interface MenuCollapsibleItemProps - extends Omit, +import { + CollapsibleIndicator, + ItemTitle, + MainNavigationCollapsibleItemClassKey, + MainNavigationItem, + OwnerState, + Root, +} from "./CollapsibleItem.styles"; +import { MainNavigationContext } from "./Context"; +import { MainNavigationItem as CometMainNavigationItem, MainNavigationItemLevel, MainNavigationItemProps } from "./Item"; +import { MainNavigationItemRouterLinkProps } from "./ItemRouterLink"; + +export type MainNavigationChild = ReactElement; + +export interface MainNavigationCollapsibleItemProps + extends Omit, ThemedComponentBaseProps<{ root: "div"; - menuItem: typeof CometMenuItem; + mainNavigationItem: typeof CometMainNavigationItem; itemTitle: typeof Typography; collapsibleIndicator: "div"; }> { - children: MenuChild | MenuChild[]; + children: MainNavigationChild | MainNavigationChild[]; openByDefault?: boolean; isMenuOpen?: boolean; iconMapping?: { @@ -30,7 +37,7 @@ export interface MenuCollapsibleItemProps }; } -export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => { +export const MainNavigationCollapsibleItem = (inProps: MainNavigationCollapsibleItemProps) => { const { classes, level = 1, @@ -45,7 +52,7 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => { ...restProps } = useThemeProps({ props: inProps, - name: "CometAdminMenuCollapsibleItem", + name: "CometAdminMainNavigationCollapsibleItem", }); const { @@ -55,8 +62,8 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => { secondLevelHoverIndicator: secondLevelHoverIndicatorIcon = , } = iconMapping ?? {}; - const { drawerVariant } = useContext(MenuContext); - const itemLevel: MenuItemLevel = level ?? 1; + const { drawerVariant } = useContext(MainNavigationContext); + const itemLevel: MainNavigationItemLevel = level ?? 1; const hasSelectedChild = useRef(false); const location = useLocation(); @@ -69,12 +76,14 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => { }, [isMenuOpen]); const childElements = useMemo(() => { - function checkIfPathInLocation(child: ReactElement) { + function checkIfPathInLocation( + child: ReactElement, + ) { return "to" in child.props && matchPath(location.pathname, { path: child.props.to, strict: true }); } hasSelectedChild.current = false; - return Children.map(children, (child: MenuChild) => { + return Children.map(children, (child: MainNavigationChild) => { // child is selected if (checkIfPathInLocation(child)) { hasSelectedChild.current = true; @@ -83,15 +92,17 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => { // sub child is selected const subChildElements = - "children" in child.props ? Children.map(child?.props?.children, (child: MenuChild) => child) : ([] as MenuChild[]); - if (subChildElements?.some((child: MenuChild) => child.props && checkIfPathInLocation(child))) { + "children" in child.props + ? Children.map(child?.props?.children, (child: MainNavigationChild) => child) + : ([] as MainNavigationChild[]); + if (subChildElements?.some((child: MainNavigationChild) => child.props && checkIfPathInLocation(child))) { hasSelectedChild.current = true; setIsSubmenuOpen(true); } const newItemLevel = itemLevel + 1; - return cloneElement(child, { + return cloneElement(child, { level: newItemLevel === 1 || newItemLevel === 2 || newItemLevel === 3 ? newItemLevel : undefined, isMenuOpen, isCollapsibleOpen: isSubmenuOpen, @@ -157,7 +168,7 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => { return ( - { onClick={() => setIsSubmenuOpen(!isSubmenuOpen)} secondaryAction={{collapsibleIndicatorIcon}} ownerState={ownerState} - {...slotProps?.menuItem} + {...slotProps?.mainNavigationItem} /> {!isMenuOpen && drawerVariant === "permanent" ? ( { declare module "@mui/material/styles" { interface ComponentNameToClassKey { - CometAdminMenuCollapsibleItem: MenuCollapsibleItemClassKey; + CometAdminMainNavigationCollapsibleItem: MainNavigationCollapsibleItemClassKey; } interface ComponentsPropsList { - CometAdminMenuCollapsibleItem: MenuCollapsibleItemProps; + CometAdminMainNavigationCollapsibleItem: MainNavigationCollapsibleItemProps; } interface Components { - CometAdminMenuCollapsibleItem?: { - defaultProps?: Partial; - styleOverrides?: ComponentsOverrides["CometAdminMenuCollapsibleItem"]; + CometAdminMainNavigationCollapsibleItem?: { + defaultProps?: Partial; + styleOverrides?: ComponentsOverrides["CometAdminMainNavigationCollapsibleItem"]; }; } } diff --git a/packages/admin/admin/src/mui/menu/Context.tsx b/packages/admin/admin/src/mui/mainNavigation/Context.tsx similarity index 57% rename from packages/admin/admin/src/mui/menu/Context.tsx rename to packages/admin/admin/src/mui/mainNavigation/Context.tsx index 8b2b8ae6c9a..d0aa0aa8095 100644 --- a/packages/admin/admin/src/mui/menu/Context.tsx +++ b/packages/admin/admin/src/mui/mainNavigation/Context.tsx @@ -1,16 +1,16 @@ import { ComponentType, createContext, Dispatch, FunctionComponent, SetStateAction } from "react"; -export interface IMenuContext { +export interface IMainNavigationContext { open: boolean; toggleOpen: () => void; drawerVariant: "temporary" | "permanent"; setDrawerVariant: Dispatch>; } -export interface IWithMenu { - menu: IMenuContext; +export interface IWithMainNavigation { + menu: IMainNavigationContext; } -export const MenuContext = createContext({ +export const MainNavigationContext = createContext({ open: false, toggleOpen: () => { // nothing @@ -21,8 +21,8 @@ export const MenuContext = createContext({ }, }); -export const withMenu =

(WrappedComponent: ComponentType

): FunctionComponent

=> { +export const withMenu =

(WrappedComponent: ComponentType

): FunctionComponent

=> { return (props: P) => { - return {(value) => }; + return {(value) => }; }; }; diff --git a/packages/admin/admin/src/mui/menu/Item.styles.ts b/packages/admin/admin/src/mui/mainNavigation/Item.styles.ts similarity index 94% rename from packages/admin/admin/src/mui/menu/Item.styles.ts rename to packages/admin/admin/src/mui/mainNavigation/Item.styles.ts index 4b08263161b..b57c56deaa2 100644 --- a/packages/admin/admin/src/mui/menu/Item.styles.ts +++ b/packages/admin/admin/src/mui/mainNavigation/Item.styles.ts @@ -1,10 +1,10 @@ import { css, ListItemButton, ListItemIcon, listItemIconClasses, ListItemText, listItemTextClasses } from "@mui/material"; import { createComponentSlot } from "../../helpers/createComponentSlot"; -import { IMenuContext } from "./Context"; -import { MenuItemLevel } from "./Item"; +import { IMainNavigationContext } from "./Context"; +import { MainNavigationItemLevel } from "./Item"; -export type MenuItemClassKey = +export type MainNavigationItemClassKey = | "root" | "level1" | "level2" @@ -17,18 +17,18 @@ export type MenuItemClassKey = | "text"; export type OwnerState = { - level: MenuItemLevel; + level: MainNavigationItemLevel; open: boolean; collapsibleOpen: boolean; hasSubItems: boolean; hasIcon: boolean; hasSecondaryText: boolean; hasSecondaryAction: boolean; - variant: IMenuContext["drawerVariant"]; + variant: IMainNavigationContext["drawerVariant"]; }; -export const Root = createComponentSlot(ListItemButton)({ - componentName: "MenuItem", +export const Root = createComponentSlot(ListItemButton)({ + componentName: "MainNavigationItem", slotName: "root", classesResolver(ownerState) { return [ @@ -321,12 +321,12 @@ export const Root = createComponentSlot(ListItemButton)({ - componentName: "MenuItem", +export const Icon = createComponentSlot(ListItemIcon)({ + componentName: "MainNavigationItem", slotName: "icon", })(); -export const Text = createComponentSlot(ListItemText)({ - componentName: "MenuItem", +export const Text = createComponentSlot(ListItemText)({ + componentName: "MainNavigationItem", slotName: "text", })(); diff --git a/packages/admin/admin/src/mui/menu/Item.tsx b/packages/admin/admin/src/mui/mainNavigation/Item.tsx similarity index 75% rename from packages/admin/admin/src/mui/menu/Item.tsx rename to packages/admin/admin/src/mui/mainNavigation/Item.tsx index a71cd87a0a5..fec96d2daca 100644 --- a/packages/admin/admin/src/mui/menu/Item.tsx +++ b/packages/admin/admin/src/mui/mainNavigation/Item.tsx @@ -2,19 +2,19 @@ import { ComponentsOverrides, ListItemButton, ListItemButtonProps, ListItemIcon, import { ReactElement, ReactNode, useContext } from "react"; import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps"; -import { MenuContext } from "./Context"; -import { Icon, MenuItemClassKey, OwnerState, Root, Text } from "./Item.styles"; +import { MainNavigationContext } from "./Context"; +import { Icon, MainNavigationItemClassKey, OwnerState, Root, Text } from "./Item.styles"; -export type MenuItemLevel = 1 | 2 | 3; +export type MainNavigationItemLevel = 1 | 2 | 3; -export interface MenuItemProps +export interface MainNavigationItemProps extends ThemedComponentBaseProps<{ root: typeof ListItemButton; icon: typeof ListItemIcon; text: typeof ListItemText; }>, ListItemButtonProps { - level?: MenuItemLevel; + level?: MainNavigationItemLevel; primary: ReactNode; secondary?: ReactNode; icon?: ReactElement; @@ -24,7 +24,7 @@ export interface MenuItemProps hasSubitems?: boolean; } -export const MenuItem = (inProps: MenuItemProps) => { +export const MainNavigationItem = (inProps: MainNavigationItemProps) => { const { primary, secondary, @@ -36,9 +36,9 @@ export const MenuItem = (inProps: MenuItemProps) => { isCollapsibleOpen, slotProps, ...restProps - } = useThemeProps({ props: inProps, name: "CometAdminMenuItem" }); + } = useThemeProps({ props: inProps, name: "CometAdminMainNavigationItem" }); - const { drawerVariant } = useContext(MenuContext); + const { drawerVariant } = useContext(MainNavigationContext); if (level > 3) throw new Error("Maximum nesting level of 2 exceeded."); @@ -70,17 +70,17 @@ export const MenuItem = (inProps: MenuItemProps) => { declare module "@mui/material/styles" { interface ComponentsPropsList { - CometAdminMenuItem: MenuItemProps; + CometAdminMainNavigationItem: MainNavigationItemProps; } interface ComponentNameToClassKey { - CometAdminMenuItem: MenuItemClassKey; + CometAdminMainNavigationItem: MainNavigationItemClassKey; } interface Components { - CometAdminMenuItem?: { - defaultProps?: Partial; - styleOverrides?: ComponentsOverrides["CometAdminMenuItem"]; + CometAdminMainNavigationItem?: { + defaultProps?: Partial; + styleOverrides?: ComponentsOverrides["CometAdminMainNavigationItem"]; }; } } diff --git a/packages/admin/admin/src/mui/menu/ItemAnchorLink.tsx b/packages/admin/admin/src/mui/mainNavigation/ItemAnchorLink.tsx similarity index 72% rename from packages/admin/admin/src/mui/menu/ItemAnchorLink.tsx rename to packages/admin/admin/src/mui/mainNavigation/ItemAnchorLink.tsx index 89b0ebc95a0..5c6880a0c7d 100644 --- a/packages/admin/admin/src/mui/menu/ItemAnchorLink.tsx +++ b/packages/admin/admin/src/mui/mainNavigation/ItemAnchorLink.tsx @@ -2,11 +2,16 @@ import { LinkExternal } from "@comet/admin-icons"; import { ListItemButtonProps } from "@mui/material"; import { HTMLProps } from "react"; -import { MenuItem, MenuItemProps } from "./Item"; +import { MainNavigationItem, MainNavigationItemProps } from "./Item"; -export type MenuItemAnchorLinkProps = MenuItemProps & ListItemButtonProps & HTMLProps; +export type MainNavigationItemAnchorLinkProps = MainNavigationItemProps & ListItemButtonProps & HTMLProps; -export const MenuItemAnchorLink = ({ secondaryAction: passedSecondaryAction, isMenuOpen, slotProps, ...props }: MenuItemAnchorLinkProps) => { +export const MainNavigationItemAnchorLink = ({ + secondaryAction: passedSecondaryAction, + isMenuOpen, + slotProps, + ...props +}: MainNavigationItemAnchorLinkProps) => { const secondaryAction = passedSecondaryAction !== undefined ? ( // don't use ?? to allow null as value and with that an empty secondaryAction passedSecondaryAction @@ -15,7 +20,7 @@ export const MenuItemAnchorLink = ({ secondaryAction: passedSecondaryAction, isM ); return ( - ({ - componentName: "MenuItemGroup", +const Root = createComponentSlot("div")({ + componentName: "MainNavigationItemGroup", slotName: "root", classesResolver: (ownerState) => { return [ownerState.open && "open"]; @@ -27,13 +27,13 @@ const Root = createComponentSlot("div")({ `, ); -const Tooltip = createComponentSlot(CommonTooltip)({ - componentName: "MenuItemGroup", +const Tooltip = createComponentSlot(CommonTooltip)({ + componentName: "MainNavigationItemGroup", slotName: "tooltip", })(); -const TitleContainer = createComponentSlot("div")({ - componentName: "MenuItemGroup", +const TitleContainer = createComponentSlot("div")({ + componentName: "MainNavigationItemGroup", slotName: "titleContainer", })( ({ theme, ownerState }) => css` @@ -52,8 +52,8 @@ const TitleContainer = createComponentSlot("div")({ - componentName: "MenuItemGroup", +const Title = createComponentSlot(Typography)({ + componentName: "MainNavigationItemGroup", slotName: "title", })( ({ theme, ownerState }) => css` @@ -69,8 +69,8 @@ const Title = createComponentSlot(Typography) `, ); -const ShortTitle = createComponentSlot(Typography)({ - componentName: "MenuItemGroup", +const ShortTitle = createComponentSlot(Typography)({ + componentName: "MainNavigationItemGroup", slotName: "shortTitle", })( ({ theme, ownerState }) => css` @@ -88,7 +88,7 @@ const ShortTitle = createComponentSlot(Typography) { +export const MainNavigationItemGroup = (inProps: MainNavigationItemGroupProps) => { const { title, shortTitle, helperIcon, children, isMenuOpen, slotProps, ...restProps } = useThemeProps({ props: inProps, - name: "CometAdminMenuItemGroup", + name: "CometAdminMainNavigationItemGroup", }); const intl = useIntl(); @@ -141,8 +141,8 @@ export const MenuItemGroup = (inProps: MenuItemGroupProps) => { const childElements = useMemo( () => - Children.map(children, (child: MenuChild) => { - return cloneElement(child, { + Children.map(children, (child: MainNavigationChild) => { + return cloneElement(child, { isMenuOpen, }); }), @@ -176,17 +176,17 @@ export const MenuItemGroup = (inProps: MenuItemGroupProps) => { declare module "@mui/material/styles" { interface ComponentsPropsList { - CometAdminMenuItemGroup: MenuItemGroupProps; + CometAdminMainNavigationItemGroup: MainNavigationItemGroupProps; } interface ComponentNameToClassKey { - CometAdminMenuItemGroup: MenuItemGroupClassKey; + CometAdminMainNavigationItemGroup: MainNavigationItemGroupClassKey; } interface Components { - CometAdminMenuItemGroup?: { - defaultProps?: Partial; - styleOverrides?: ComponentsOverrides["CometAdminMenuItemGroup"]; + CometAdminMainNavigationItemGroup?: { + defaultProps?: Partial; + styleOverrides?: ComponentsOverrides["CometAdminMainNavigationItemGroup"]; }; } } diff --git a/packages/admin/admin/src/mui/menu/ItemRouterLink.tsx b/packages/admin/admin/src/mui/mainNavigation/ItemRouterLink.tsx similarity index 54% rename from packages/admin/admin/src/mui/menu/ItemRouterLink.tsx rename to packages/admin/admin/src/mui/mainNavigation/ItemRouterLink.tsx index 5b5673ce2f0..aa2a4e2ddbd 100644 --- a/packages/admin/admin/src/mui/menu/ItemRouterLink.tsx +++ b/packages/admin/admin/src/mui/mainNavigation/ItemRouterLink.tsx @@ -4,9 +4,9 @@ import { ReactNode } from "react"; import { Link, LinkProps, Route } from "react-router-dom"; import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps"; -import { MenuItem, MenuItemProps } from "./Item"; +import { MainNavigationItem, MainNavigationItemProps } from "./Item"; -interface MenuItemRouterLinkStandardProps +interface MainNavigationRouterLinkItemStandardProps extends ThemedComponentBaseProps<{ badge: typeof Badge; }> { @@ -14,10 +14,15 @@ interface MenuItemRouterLinkStandardProps badgeContent?: ReactNode; } -export type MenuItemRouterLinkProps = MenuItemRouterLinkStandardProps & MenuItemProps & ListItemProps & LinkProps; +export type MainNavigationItemRouterLinkProps = MainNavigationRouterLinkItemStandardProps & MainNavigationItemProps & ListItemProps & LinkProps; -export const MenuItemRouterLink = ({ badgeContent, secondaryAction: passedSecondaryAction, slotProps, ...restProps }: MenuItemRouterLinkProps) => { - const { badge, ...menuItemSlotProps } = slotProps ?? {}; +export const MainNavigationItemRouterLink = ({ + badgeContent, + secondaryAction: passedSecondaryAction, + slotProps, + ...restProps +}: MainNavigationItemRouterLinkProps) => { + const { badge, ...mainNavigationItemSlotProps } = slotProps ?? {}; const secondaryAction = badgeContent ? ( // prioritize badgeContent over passed secondaryAction {({ match }) => { return ( - + ); }} diff --git a/packages/admin/admin/src/mui/menu/Menu.styles.ts b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts similarity index 86% rename from packages/admin/admin/src/mui/menu/Menu.styles.ts rename to packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts index 2a9e368e102..0221a69b6ee 100644 --- a/packages/admin/admin/src/mui/menu/Menu.styles.ts +++ b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts @@ -1,7 +1,7 @@ import { css, Drawer as MuiDrawer, drawerClasses, DrawerProps, Theme } from "@mui/material"; import { createComponentSlot } from "../../helpers/createComponentSlot"; -import { DEFAULT_DRAWER_WIDTH, DEFAULT_DRAWER_WIDTH_COLLAPSED } from "./Menu"; +import { DEFAULT_DRAWER_WIDTH, DEFAULT_DRAWER_WIDTH_COLLAPSED } from "./MainNavigation"; const getOpenedAnimation = (theme: Theme, drawerVariant: DrawerProps["variant"], drawerWidth: number = DEFAULT_DRAWER_WIDTH) => css` width: ${drawerVariant === "temporary" ? "100%" : `${drawerWidth}px`}; @@ -18,7 +18,7 @@ const getClosedAnimation = ( transition: width ${theme.transitions.easing.sharp} ${theme.transitions.duration.leavingScreen}ms; `; -export type MenuClassKey = "drawer" | "permanent" | "temporary" | "open" | "closed"; +export type MainNavigationClassKey = "drawer" | "permanent" | "temporary" | "open" | "closed"; export type OwnerState = { drawerWidth: number; @@ -33,13 +33,13 @@ const getSharedStyles = (theme: Theme, headerHeight: number) => css` height: calc(100% - ${headerHeight}px); top: ${headerHeight}px; - .CometAdminMenuItemGroup-root + .CometAdminMenuItem-root { + .CometAdminMainNavigationItemGroup-root + .CometAdminMainNavigationItem-root { margin-top: ${theme.spacing(8)}; } `; -export const TemporaryDrawer = createComponentSlot(MuiDrawer)({ - componentName: "Menu", +export const TemporaryDrawer = createComponentSlot(MuiDrawer)({ + componentName: "MainNavigation", slotName: "temporary", classesResolver(ownerState) { return ["drawer", ownerState.open ? "open" : "closed"]; @@ -66,8 +66,8 @@ export const TemporaryDrawer = createComponentSlot(MuiDrawer)({ - componentName: "Menu", +export const PermanentDrawer = createComponentSlot(MuiDrawer)({ + componentName: "MainNavigation", slotName: "permanent", classesResolver(ownerState) { return ["drawer", ownerState.open ? "open" : "closed"]; diff --git a/packages/admin/admin/src/mui/menu/Menu.tsx b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.tsx similarity index 79% rename from packages/admin/admin/src/mui/menu/Menu.tsx rename to packages/admin/admin/src/mui/mainNavigation/MainNavigation.tsx index 7d234f843b1..40686df94d0 100644 --- a/packages/admin/admin/src/mui/menu/Menu.tsx +++ b/packages/admin/admin/src/mui/mainNavigation/MainNavigation.tsx @@ -4,16 +4,16 @@ import { useHistory } from "react-router"; import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps"; import { MasterLayoutContext } from "../MasterLayoutContext"; -import { MenuChild, MenuCollapsibleItemProps } from "./CollapsibleItem"; -import { MenuContext } from "./Context"; -import { MenuItemProps } from "./Item"; -import { MenuItemRouterLinkProps } from "./ItemRouterLink"; -import { MenuClassKey, OwnerState, PermanentDrawer, TemporaryDrawer } from "./Menu.styles"; +import { MainNavigationChild, MainNavigationCollapsibleItemProps } from "./CollapsibleItem"; +import { MainNavigationContext } from "./Context"; +import { MainNavigationItemProps } from "./Item"; +import { MainNavigationItemRouterLinkProps } from "./ItemRouterLink"; +import { MainNavigationClassKey, OwnerState, PermanentDrawer, TemporaryDrawer } from "./MainNavigation.styles"; export const DEFAULT_DRAWER_WIDTH = 300; export const DEFAULT_DRAWER_WIDTH_COLLAPSED = 60; -export interface MenuProps +export interface MainNavigationProps extends ThemedComponentBaseProps<{ temporaryDrawer: typeof MuiDrawer; permanentDrawer: typeof MuiDrawer; @@ -24,7 +24,7 @@ export interface MenuProps drawerWidthCollapsed?: number; } -export const Menu = (inProps: MenuProps) => { +export const MainNavigation = (inProps: MainNavigationProps) => { const { children, drawerWidth = DEFAULT_DRAWER_WIDTH, @@ -32,9 +32,9 @@ export const Menu = (inProps: MenuProps) => { variant = "permanent", slotProps, ...restProps - } = useThemeProps({ props: inProps, name: "CometAdminMenu" }); + } = useThemeProps({ props: inProps, name: "CometAdminMainNavigation" }); const history = useHistory(); - const { open, toggleOpen, setDrawerVariant, drawerVariant } = useContext(MenuContext); + const { open, toggleOpen, setDrawerVariant, drawerVariant } = useContext(MainNavigationContext); const initialRender = useRef(true); const { headerHeight } = useContext(MasterLayoutContext); @@ -78,8 +78,8 @@ export const Menu = (inProps: MenuProps) => { const childElements = useMemo( () => - Children.map(children, (child: MenuChild) => { - return cloneElement(child, { + Children.map(children, (child: MainNavigationChild) => { + return cloneElement(child, { isMenuOpen: open, }); }), @@ -120,17 +120,17 @@ export const Menu = (inProps: MenuProps) => { declare module "@mui/material/styles" { interface ComponentNameToClassKey { - CometAdminMenu: MenuClassKey; + CometAdminMainNavigation: MainNavigationClassKey; } interface ComponentsPropsList { - CometAdminMenu: MenuProps; + CometAdminMainNavigation: MainNavigationProps; } interface Components { - CometAdminMenu?: { - defaultProps?: ComponentsPropsList["CometAdminMenu"]; - styleOverrides?: ComponentsOverrides["CometAdminMenu"]; + CometAdminMainNavigation?: { + defaultProps?: ComponentsPropsList["CometAdminMainNavigation"]; + styleOverrides?: ComponentsOverrides["CometAdminMainNavigation"]; }; } } diff --git a/packages/admin/cms-admin/src/common/MasterMenu.tsx b/packages/admin/cms-admin/src/common/MasterMenu.tsx index c09d9307f7f..19b1b9cf650 100644 --- a/packages/admin/cms-admin/src/common/MasterMenu.tsx +++ b/packages/admin/cms-admin/src/common/MasterMenu.tsx @@ -1,14 +1,14 @@ import { - Menu, - MenuCollapsibleItem, - MenuCollapsibleItemProps, - MenuContext, - MenuItemAnchorLink, - MenuItemAnchorLinkProps, - MenuItemGroup, - MenuItemGroupProps, - MenuItemRouterLink, - MenuItemRouterLinkProps, + MainNavigation, + MainNavigationCollapsibleItem, + MainNavigationCollapsibleItemProps, + MainNavigationContext, + MainNavigationItemAnchorLink, + MainNavigationItemAnchorLinkProps, + MainNavigationItemGroup, + MainNavigationItemGroupProps, + MainNavigationItemRouterLink, + MainNavigationItemRouterLinkProps, useWindowSize, } from "@comet/admin"; import { ReactNode, useContext, useEffect } from "react"; @@ -21,7 +21,7 @@ type MasterMenuItemBase = { }; type MasterMenuItemRoute = MasterMenuItemBase & - Omit & { + Omit & { type: "route"; route?: RouteProps; to?: string; @@ -29,19 +29,19 @@ type MasterMenuItemRoute = MasterMenuItemBase & }; type MasterMenuItemCollapsible = MasterMenuItemBase & - Omit & { + Omit & { type: "collapsible"; items?: Array; route?: RouteProps; }; type MasterMenuItemAnchor = MasterMenuItemBase & - MenuItemAnchorLinkProps & { + MainNavigationItemAnchorLinkProps & { type: "externalLink"; }; type MasterMenuItemGroup = MasterMenuItemBase & - MenuItemGroupProps & { + MainNavigationItemGroupProps & { type: "group"; items: Array< (MasterMenuItemRoute | MasterMenuItemAnchor | MasterMenuItemCollapsible) & { @@ -60,23 +60,23 @@ export type MasterMenuData = MasterMenuItem[]; type MenuItemRouteElement = { type: "route"; - menuElement: MenuItemRouterLinkProps; + menuElement: MainNavigationItemRouterLinkProps; }; type MenuItemCollapsibleElement = { type: "collapsible"; - menuElement: Omit; + menuElement: Omit; items: MenuItem[]; }; type MenuItemAnchorElement = { type: "externalLink"; - menuElement: MenuItemAnchorLinkProps; + menuElement: MainNavigationItemAnchorLinkProps; }; type MenuItemGroupElement = { type: "group"; - menuElement: Omit; + menuElement: Omit; items: MenuItem[]; }; @@ -137,7 +137,7 @@ export function useMenuFromMasterMenuData(items: MasterMenuData): MenuItem[] { export const MasterMenu = ({ menu, permanentMenuMinWidth = 1024 }: MasterMenuProps) => { const menuItems = useMenuFromMasterMenuData(menu); - const { open, toggleOpen } = useContext(MenuContext); + const { open, toggleOpen } = useContext(MainNavigationContext); const windowSize = useWindowSize(); const match = useRouteMatch(); const useTemporaryMenu: boolean = windowSize.width < permanentMenuMinWidth; @@ -155,40 +155,42 @@ export const MasterMenu = ({ menu, permanentMenuMinWidth = 1024 }: MasterMenuPro items.flatMap((item, index) => { if (item.type === "collapsible") { return ( - + {renderMenuItems(item.items)} - + ); } else if (item.type === "externalLink") { - return ; + return ; } else if (item.type === "route") { - return ; + return ; } return []; }); return ( -

+ {menuItems.map((menuElement, index) => { switch (menuElement.type) { case "group": return ( - + {renderMenuItems(menuElement.items)} - + ); case "collapsible": return ( - + {renderMenuItems(menuElement.items)} - + ); case "externalLink": - return ; + return ; case "route": - return ; + return ( + + ); } })} - + ); }; diff --git a/storybook/src/admin/error-handling/RouteWithErrorBoundary.stories.tsx b/storybook/src/admin/error-handling/RouteWithErrorBoundary.stories.tsx index 8b473da6e3e..cb9208f5d0b 100644 --- a/storybook/src/admin/error-handling/RouteWithErrorBoundary.stories.tsx +++ b/storybook/src/admin/error-handling/RouteWithErrorBoundary.stories.tsx @@ -1,4 +1,4 @@ -import { Alert, MasterLayout, Menu, MenuItemRouterLink, RouteWithErrorBoundary } from "@comet/admin"; +import { Alert, MainNavigation, MainNavigationItemRouterLink, MasterLayout, RouteWithErrorBoundary } from "@comet/admin"; import { Card, CardContent, Typography } from "@mui/material"; import { Redirect, Route, Switch } from "react-router"; @@ -31,10 +31,10 @@ const ViewWithError = () => { function MasterMenu() { return ( - - - - + + + + ); } diff --git a/storybook/src/admin/mui/AppHeader.stories.tsx b/storybook/src/admin/mui/AppHeader.stories.tsx index 89702095f55..3659b854841 100644 --- a/storybook/src/admin/mui/AppHeader.stories.tsx +++ b/storybook/src/admin/mui/AppHeader.stories.tsx @@ -6,9 +6,9 @@ import { AppHeaderMenuButton, CometLogo, MainContent, + MainNavigation, + MainNavigationItemRouterLink, MasterLayout, - Menu as CometMenu, - MenuItemRouterLink, } from "@comet/admin"; import { Account, Dashboard, Language, Logout, Preview } from "@comet/admin-icons"; import { Avatar, Box, Button, Divider, MenuItem, MenuList } from "@mui/material"; @@ -28,9 +28,9 @@ function AccountHeaderItem() { function Menu() { return ( - - } to="/dashboard" selected /> - + + } to="/dashboard" selected /> + ); } diff --git a/storybook/src/admin/mui/Menu.stories.tsx b/storybook/src/admin/mui/Menu.stories.tsx index a1e2e61bf60..7ac98b645ab 100644 --- a/storybook/src/admin/mui/Menu.stories.tsx +++ b/storybook/src/admin/mui/Menu.stories.tsx @@ -4,12 +4,12 @@ import { AppHeaderMenuButton, CometLogo, MainContent, + MainNavigation, + MainNavigationCollapsibleItem, + MainNavigationItemAnchorLink, + MainNavigationItemGroup, + MainNavigationItemRouterLink, MasterLayout, - Menu, - MenuCollapsibleItem, - MenuItemAnchorLink, - MenuItemGroup, - MenuItemRouterLink, useWindowSize, } from "@comet/admin"; import { CometColor, Dashboard, Settings, Sort } from "@comet/admin-icons"; @@ -24,33 +24,33 @@ const AppMenu = () => { const windowSize = useWindowSize(); return ( - - - } to="/dashboard" /> - }> - - - - }> - - - - - - - - - - } to="/settings" /> - + + } to="/dashboard" /> + }> + + + + }> + + + + + + + + + + } to="/settings" /> + } /> - - + + ); }; diff --git a/storybook/src/admin/mui/MenuDynamicVariants.stories.tsx b/storybook/src/admin/mui/MenuDynamicVariants.stories.tsx index 55024be29ca..541aab10106 100644 --- a/storybook/src/admin/mui/MenuDynamicVariants.stories.tsx +++ b/storybook/src/admin/mui/MenuDynamicVariants.stories.tsx @@ -4,12 +4,12 @@ import { AppHeaderMenuButton, CometLogo, MainContent, + MainNavigation, + MainNavigationCollapsibleItem, + MainNavigationContext, + MainNavigationItemAnchorLink, + MainNavigationItemRouterLink, MasterLayout, - Menu, - MenuCollapsibleItem, - MenuContext, - MenuItemAnchorLink, - MenuItemRouterLink, useWindowSize, } from "@comet/admin"; import { CometColor, Dashboard, LinkExternal, Settings, Sort } from "@comet/admin-icons"; @@ -24,7 +24,7 @@ const permanentMenuMinWidth = 1024; const pathsToAlwaysUseTemporaryMenu = ["/foo3", "/foo4"]; const AppMenu = () => { - const { open, toggleOpen } = useContext(MenuContext); + const { open, toggleOpen } = useContext(MainNavigationContext); const windowSize = useWindowSize(); const location = useLocation(); @@ -44,18 +44,18 @@ const AppMenu = () => { }, [location]); return ( - - } to="/dashboard" /> - } to="/settings" /> - }> - - - - }> - - - - + } to="/dashboard" /> + } to="/settings" /> + }> + + + + }> + + + + { icon={} secondaryAction={} /> - + ); }; diff --git a/storybook/src/docs/components/Master/Master.stories.tsx b/storybook/src/docs/components/Master/Master.stories.tsx index efb96bdcf0a..eed5040e3d7 100644 --- a/storybook/src/docs/components/Master/Master.stories.tsx +++ b/storybook/src/docs/components/Master/Master.stories.tsx @@ -4,9 +4,9 @@ import { AppHeaderFillSpace, AppHeaderMenuButton, MainContent, + MainNavigation, + MainNavigationItem, MasterLayout, - Menu, - MenuItem, RouterBrowserRouter, Toolbar, ToolbarTitleItem, @@ -32,9 +32,9 @@ export const Master = { function MasterMenu() { return ( - - } /> - + + } /> + ); } diff --git a/storybook/src/helpers/storyDecorators.tsx b/storybook/src/helpers/storyDecorators.tsx index bc8d24444d7..9400d102ccf 100644 --- a/storybook/src/helpers/storyDecorators.tsx +++ b/storybook/src/helpers/storyDecorators.tsx @@ -1,4 +1,4 @@ -import { AppHeader, AppHeaderMenuButton, MasterLayout, Menu, MenuItemRouterLink, Stack } from "@comet/admin"; +import { AppHeader, AppHeaderMenuButton, MainNavigation, MainNavigationItemRouterLink, MasterLayout, Stack } from "@comet/admin"; import { Dashboard } from "@comet/admin-icons"; import { ComponentType } from "react"; import { Route } from "react-router"; @@ -11,9 +11,9 @@ export function masterLayoutDecorator() { ); const MasterMenu = () => ( - - } /> - + + } /> + ); return (Story: ComponentType) => {