muffin-admin 9.2.4 → 9.4.0

package/dist/types.d.ts

@@ -2,7 +2,7 @@ export type TID = string | number;
 export type TProps = {
     [key: string]: any;
 };
-export type TAdminType = "action-form" | "admin" | "appbar" | "auth-provider" | "auth-storage-get" | "auth-storage-set" | "create" | "create-toolbar" | "create-inputs" | "dashboard" | "dashboard-actions" | "dashboard-content" | "data-provider" | "edit" | "edit-actions" | "edit-toolbar" | "edit-form-toolbar" | "edit-inputs" | "layout" | "list" | "list-actions" | "list-toolbar" | "list-grid" | "list-grid-buttons" | "list-filters" | "list-fields" | "locale" | "loginpage" | "resource" | "show" | "show-actions" | "show-toolbar" | "show-fields" | "show-links";
+export type TAdminType = "action-form" | "admin" | "appbar" | "auth-provider" | "auth-storage-get" | "auth-storage-set" | "create" | "create-toolbar" | "create-inputs" | "dashboard" | "dashboard-actions" | "dashboard-content" | "data-provider" | "edit" | "edit-actions" | "edit-toolbar" | "edit-form-toolbar" | "edit-inputs" | "layout" | "list" | "list-actions" | "list-toolbar" | "list-grid" | "list-grid-buttons" | "list-filters" | "list-fields" | "locale" | "loginpage" | "menu" | "resource" | "show" | "show-actions" | "show-toolbar" | "show-fields" | "show-links";
 export type TAdminPath = [type: TAdminType, ...ids: string[]];
 export type AdminAction = {
     view?: ("show" | "edit" | "list" | "bulk")[];
@@ -45,6 +45,7 @@ export type AdminPayloadProps = {
 };
 export type AdminResourceProps = {
     name: string;
+    group?: string;
     icon?: string;
     label: string;
     help?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "9.2.4",
+  "version": "9.4.0",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",

package/src/MuffinAdmin.tsx

@@ -99,7 +99,7 @@ export function MuffinAdmin(props: AdminProps) {
 setupAdmin(["admin"], MuffinAdmin)
 
 export function MuffinAdminLayout(props: LayoutProps) {
-  return <Layout {...props} appBar={findBuilder(["appbar"])} />
+  return <Layout {...props} appBar={findBuilder(["appbar"])} menu={findBuilder(["menu"])} />
 }
 
 setupAdmin(["layout"], MuffinAdminLayout)

package/src/MuffinMenu.tsx

@@ -0,0 +1,70 @@
+import ExpandLess from "@mui/icons-material/ExpandLess"
+import ExpandMore from "@mui/icons-material/ExpandMore"
+import Collapse from "@mui/material/Collapse"
+import ListItemButton from "@mui/material/ListItemButton"
+import ListItemIcon from "@mui/material/ListItemIcon"
+import ListItemText from "@mui/material/ListItemText"
+
+import { Menu, MenuProps, useTranslate } from "react-admin"
+
+import groupBy from "lodash/groupBy"
+import { useContext, useState } from "react"
+import { MuffinAdminContext } from "./context"
+import { AdminResourceProps } from "./types"
+import { findIcon, setupAdmin } from "./utils"
+
+export function MuffinMenu(props: MenuProps) {
+  const { resources } = useContext(MuffinAdminContext)
+
+  const groups = groupBy(
+    resources.filter((r) => r.group),
+    "group"
+  )
+  const groupRendered = []
+
+  return (
+    <Menu {...props}>
+      <Menu.DashboardItem />
+      {resources.map(({ name, group, icon }) => {
+        if (!group) return <Menu.ResourceItem name={name} key={name} />
+        if (groupRendered.includes(group)) return null
+        groupRendered.push(group)
+        const groupResources = groups[group]
+        return <MenuGroup name={group} icon={icon} resources={groupResources} key={group} />
+      })}
+    </Menu>
+  )
+}
+
+setupAdmin(["menu"], MuffinMenu)
+
+function MenuGroup({
+  name,
+  icon,
+  resources,
+}: {
+  name: string
+  icon: string
+  resources: AdminResourceProps[]
+}) {
+  const Icon = findIcon(icon)
+  const translate = useTranslate()
+  const [groupOpen, setGroupOpen] = useState(false)
+
+  return (
+    <div>
+      <ListItemButton onClick={() => setGroupOpen(!groupOpen)}>
+        <ListItemIcon sx={{ minWidth: 40 }}>
+          <Icon />
+        </ListItemIcon>
+        <ListItemText primary={translate(`groups.${name}`)} />
+        {groupOpen ? <ExpandLess /> : <ExpandMore />}
+      </ListItemButton>
+      <Collapse in={groupOpen} timeout="auto" unmountOnExit>
+        {resources.map(({ name }) => (
+          <Menu.ResourceItem name={name} key={name} />
+        ))}
+      </Collapse>
+    </div>
+  )
+}

package/src/index.tsx

@@ -6,6 +6,7 @@ export * from "./utils"
 
 export * from "./MuffinAdmin"
 export * from "./MuffinDashboard"
+export * from "./MuffinMenu"
 export * from "./MuffinRecordList"
 export * from "./MuffinResource"
 export * from "./MuffinResourceCreate"
@@ -36,4 +37,4 @@ export async function initAdmin(prefix = "", containerId: string = "root") {
   )
 }
 
-export const VERSION = "9.2.4"
+export const VERSION = "9.4.0"

package/src/types.ts

@@ -33,6 +33,7 @@ export type TAdminType =
   | "list-fields"
   | "locale"
   | "loginpage"
+  | "menu"
   | "resource"
   | "show"
   | "show-actions"
@@ -55,7 +56,7 @@ export type AdminAction = {
 }
 
 export type AdminField = [string, { source: string }]
-export type AdminInput = [string, { required: boolean; source: string; [key: string]: any }]
+export type AdminInput = [string, { required: boolean; source: string;[key: string]: any }]
 
 export type AdminShowLink = {
   label: string
@@ -80,17 +81,18 @@ export type AdminPayloadProps = {
 
 export type AdminResourceProps = {
   name: string
+  group?: string
   icon?: string
   label: string
   help?: string
   actions: AdminAction[]
   create: AdminInput[] | false
   edit:
-    | {
-        inputs: AdminInput[]
-        remove?: boolean
-      }
-    | false
+  | {
+    inputs: AdminInput[]
+    remove?: boolean
+  }
+  | false
   list: {
     limit: number
     limitMax: number