rename Menu components

vivid-planet · Dec 30, 2024 · e31290c · e31290c
1 parent d64b214
commit e31290c
Show file tree

Hide file tree

Showing 20 changed files with 270 additions and 241 deletions.
diff --git a/packages/admin/admin/src/appHeader/menuButton/AppHeaderMenuButton.tsx b/packages/admin/admin/src/appHeader/menuButton/AppHeaderMenuButton.tsx
@@ -3,15 +3,15 @@ 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;
 
 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<typeof drawerVariant, ReactNode> = {
         temporary: <Close />,

diff --git 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
@@ -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 (
-        <MenuContext.Provider value={{ open, toggleOpen, drawerVariant, setDrawerVariant }}>
+        <MainNavigationContext.Provider value={{ open, toggleOpen, drawerVariant, setDrawerVariant }}>
             <MasterLayoutContext.Provider value={{ headerHeight }}>
                 <CssBaseline />
                 <Root {...slotProps?.root} {...restProps}>
@@ -93,7 +93,7 @@ export function MasterLayout(inProps: MasterLayoutProps) {
                     </ContentWrapper>
                 </Root>
             </MasterLayoutContext.Provider>
-        </MenuContext.Provider>
+        </MainNavigationContext.Provider>
     );
 }
 

diff --git a/...in/src/mui/menu/CollapsibleItem.styles.ts → .../mainNavigation/CollapsibleItem.styles.ts b/...in/src/mui/menu/CollapsibleItem.styles.ts → .../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")<MenuCollapsibleItemClassKey, OwnerState>({
-    componentName: "MenuCollapsibleItem",
+export const Root = createComponentSlot("div")<MainNavigationCollapsibleItemClassKey, OwnerState>({
+    componentName: "MainNavigationCollapsibleItem",
     slotName: "root",
     classesResolver: (ownerState) => {
         return [ownerState.open && "open", ownerState.childSelected && "childSelected"];
@@ -32,9 +32,9 @@ export const Root = createComponentSlot("div")<MenuCollapsibleItemClassKey, Owne
     `,
 );
 
-export const MenuItem = createComponentSlot(CometMenuItem)<MenuCollapsibleItemClassKey, OwnerState>({
-    componentName: "MenuCollapsibleItem",
-    slotName: "menuItem",
+export const MainNavigationItem = createComponentSlot(CometMainNavigationItem)<MainNavigationCollapsibleItemClassKey, OwnerState>({
+    componentName: "MainNavigationCollapsibleItem",
+    slotName: "mainNavigationItem",
 })(
     ({ theme, ownerState }) => css`
         background-color: ${theme.palette.common.white};
@@ -59,12 +59,12 @@ export const MenuItem = createComponentSlot(CometMenuItem)<MenuCollapsibleItemCl
 
         ${ownerState.childSelected &&
         css`
-            .CometAdminMenuItem-text,
-            .CometAdminMenuItem-icon {
+            .CometAdminMainNavigationItem-text,
+            .CometAdminMainNavigationItem-icon {
                 color: ${theme.palette.primary.main};
             }
 
-            .CometAdminMenuItem-primary {
+            .CometAdminMainNavigationItem-primary {
                 ${(ownerState.level === 2 || ownerState.level === 3) &&
                 css`
                     font-weight: 600;
@@ -74,8 +74,8 @@ export const MenuItem = createComponentSlot(CometMenuItem)<MenuCollapsibleItemCl
     `,
 );
 
-export const ItemTitle = createComponentSlot(Typography)<MenuCollapsibleItemClassKey>({
-    componentName: "MenuCollapsibleItem",
+export const ItemTitle = createComponentSlot(Typography)<MainNavigationCollapsibleItemClassKey>({
+    componentName: "MainNavigationCollapsibleItem",
     slotName: "itemTitle",
 })(
     ({ theme }) => css`
@@ -87,8 +87,8 @@ export const ItemTitle = createComponentSlot(Typography)<MenuCollapsibleItemClas
     `,
 );
 
-export const CollapsibleIndicator = createComponentSlot("div")<MenuCollapsibleItemClassKey, OwnerState>({
-    componentName: "MenuCollapsibleItem",
+export const CollapsibleIndicator = createComponentSlot("div")<MainNavigationCollapsibleItemClassKey, OwnerState>({
+    componentName: "MainNavigationCollapsibleItem",
     slotName: "collapsibleIndicator",
 })(
     ({ theme, ownerState }) => css`

diff --git a/...in/admin/src/mui/menu/CollapsibleItem.tsx → ...rc/mui/mainNavigation/CollapsibleItem.tsx b/...in/admin/src/mui/menu/CollapsibleItem.tsx → ...rc/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<MenuCollapsibleItemProps | MenuItemRouterLinkProps | MenuItemProps>;
-
-export interface MenuCollapsibleItemProps
-    extends Omit<MenuItemProps, "slotProps">,
+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<MainNavigationCollapsibleItemProps | MainNavigationItemRouterLinkProps | MainNavigationItemProps>;
+
+export interface MainNavigationCollapsibleItemProps
+    extends Omit<MainNavigationItemProps, "slotProps">,
         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 = <ChevronRight color="inherit" fontSize="inherit" />,
     } = 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<MenuCollapsibleItemProps | MenuItemRouterLinkProps | MenuItemProps>) {
+        function checkIfPathInLocation(
+            child: ReactElement<MainNavigationCollapsibleItemProps | MainNavigationItemRouterLinkProps | MainNavigationItemProps>,
+        ) {
             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<MenuCollapsibleItemProps | MenuItemRouterLinkProps | MenuItemProps>(child, {
+            return cloneElement<MainNavigationCollapsibleItemProps | MainNavigationItemRouterLinkProps | MainNavigationItemProps>(child, {
                 level: newItemLevel === 1 || newItemLevel === 2 || newItemLevel === 3 ? newItemLevel : undefined,
                 isMenuOpen,
                 isCollapsibleOpen: isSubmenuOpen,
@@ -157,7 +168,7 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => {
 
     return (
         <Root {...slotProps?.root} {...restProps} ownerState={ownerState}>
-            <MenuItem
+            <MainNavigationItem
                 id={itemId}
                 aria-haspopup="true"
                 aria-controls={isSubmenuOpen ? mouseOverMenuId : undefined}
@@ -174,7 +185,7 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => {
                 onClick={() => setIsSubmenuOpen(!isSubmenuOpen)}
                 secondaryAction={<CollapsibleIndicator ownerState={ownerState}>{collapsibleIndicatorIcon}</CollapsibleIndicator>}
                 ownerState={ownerState}
-                {...slotProps?.menuItem}
+                {...slotProps?.mainNavigationItem}
             />
             {!isMenuOpen && drawerVariant === "permanent" ? (
                 <Menu
@@ -215,17 +226,17 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => {
 
 declare module "@mui/material/styles" {
     interface ComponentNameToClassKey {
-        CometAdminMenuCollapsibleItem: MenuCollapsibleItemClassKey;
+        CometAdminMainNavigationCollapsibleItem: MainNavigationCollapsibleItemClassKey;
     }
 
     interface ComponentsPropsList {
-        CometAdminMenuCollapsibleItem: MenuCollapsibleItemProps;
+        CometAdminMainNavigationCollapsibleItem: MainNavigationCollapsibleItemProps;
     }
 
     interface Components {
-        CometAdminMenuCollapsibleItem?: {
-            defaultProps?: Partial<ComponentsPropsList["CometAdminMenuCollapsibleItem"]>;
-            styleOverrides?: ComponentsOverrides<Theme>["CometAdminMenuCollapsibleItem"];
+        CometAdminMainNavigationCollapsibleItem?: {
+            defaultProps?: Partial<ComponentsPropsList["CometAdminMainNavigationCollapsibleItem"]>;
+            styleOverrides?: ComponentsOverrides<Theme>["CometAdminMainNavigationCollapsibleItem"];
         };
     }
 }
diff --git a/...ages/admin/admin/src/mui/menu/Context.tsx → .../admin/src/mui/mainNavigation/Context.tsx b/...ages/admin/admin/src/mui/menu/Context.tsx → .../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<SetStateAction<"temporary" | "permanent">>;
 }
 
-export interface IWithMenu {
-    menu: IMenuContext;
+export interface IWithMainNavigation {
+    menu: IMainNavigationContext;
 }
-export const MenuContext = createContext<IMenuContext>({
+export const MainNavigationContext = createContext<IMainNavigationContext>({
     open: false,
     toggleOpen: () => {
         // nothing
@@ -21,8 +21,8 @@ export const MenuContext = createContext<IMenuContext>({
     },
 });
 
-export const withMenu = <P extends object>(WrappedComponent: ComponentType<P & IWithMenu>): FunctionComponent<P> => {
+export const withMenu = <P extends object>(WrappedComponent: ComponentType<P & IWithMainNavigation>): FunctionComponent<P> => {
     return (props: P) => {
-        return <MenuContext.Consumer>{(value) => <WrappedComponent {...props} menu={value!} />}</MenuContext.Consumer>;
+        return <MainNavigationContext.Consumer>{(value) => <WrappedComponent {...props} menu={value!} />}</MainNavigationContext.Consumer>;
     };
 };
diff --git a/...s/admin/admin/src/mui/menu/Item.styles.ts → ...min/src/mui/mainNavigation/Item.styles.ts b/...s/admin/admin/src/mui/menu/Item.styles.ts → ...min/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)<MenuItemClassKey, OwnerState>({
-    componentName: "MenuItem",
+export const Root = createComponentSlot(ListItemButton)<MainNavigationItemClassKey, OwnerState>({
+    componentName: "MainNavigationItem",
     slotName: "root",
     classesResolver(ownerState) {
         return [
@@ -321,12 +321,12 @@ export const Root = createComponentSlot(ListItemButton)<MenuItemClassKey, OwnerS
     `,
 );
 
-export const Icon = createComponentSlot(ListItemIcon)<MenuItemClassKey, OwnerState>({
-    componentName: "MenuItem",
+export const Icon = createComponentSlot(ListItemIcon)<MainNavigationItemClassKey, OwnerState>({
+    componentName: "MainNavigationItem",
     slotName: "icon",
 })();
 
-export const Text = createComponentSlot(ListItemText)<MenuItemClassKey, OwnerState>({
-    componentName: "MenuItem",
+export const Text = createComponentSlot(ListItemText)<MainNavigationItemClassKey, OwnerState>({
+    componentName: "MainNavigationItem",
     slotName: "text",
 })();