muffin-admin 2.7.2 → 2.8.0

package/dist/utils.d.ts

@@ -1,9 +1,6 @@
-/// <reference types="react" />
-import { AdminOpts } from "./types";
-export declare function setupAdmin<T>(adminType: string[], fc: (opts: any, props?: any) => T): void;
+export declare function setupAdmin<T>(adminType: string[], fc: (props: any) => T): void;
 export declare function buildAdmin(adminType: string[], props?: {}): any;
 export declare function findBuilder(adminType: string[]): (props: any) => any;
-export declare const AdminPropsContext: import("react").Context<AdminOpts>;
 export type APIParams = {
     method?: string;
     query?: {

package/dist/utils.js

@@ -13,31 +13,31 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as icons from "@mui/icons-material";
 import { stringify } from "query-string";
 import { fetchUtils } from "ra-core";
-import { createContext } from "react";
 const builders = new Map();
 export function setupAdmin(adminType, fc) {
     const key = adminType.join("/");
     builders.set(key, fc);
 }
 export function buildAdmin(adminType, props = {}) {
-    if (process.env.NODE_ENV == "development")
-        console.log(adminType, props);
     const builder = findBuilder(adminType);
+    if (process.env.NODE_ENV == "development")
+        console.log(props);
     if (builder)
         return builder(props);
     console.warn(`No admin renderer found for ${adminType.join("/")}`);
     return null;
 }
 export function findBuilder(adminType) {
+    if (process.env.NODE_ENV == "development")
+        console.log(adminType);
     const key = [...adminType];
     while (key.length) {
-        const render = builders.get(key.join("/"));
-        if (render)
-            return render;
+        const builder = builders.get(key.join("/"));
+        if (builder)
+            return builder;
         key.pop();
     }
 }
-export const AdminPropsContext = createContext(null);
 export const requestHeaders = {};
 export function makeRequest(url, params = {}) {
     const _a = params || {}, { data, query } = _a, opts = __rest(_a, ["data", "query"]);

package/package.json

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

package/src/MuffinAdmin.tsx

@@ -2,21 +2,56 @@ import IconButton from "@mui/material/IconButton"
 import SvgIcon from "@mui/material/SvgIcon"
 import Tooltip from "@mui/material/Tooltip"
 import Typography from "@mui/material/Typography"
-import { Admin, AdminProps, AppBar, DataProvider, Layout, Login } from "react-admin"
-import { AdminOpts } from "./types"
-import { AdminPropsContext, buildAdmin, findBuilder, findIcon, setupAdmin } from "./utils"
-
-export function MuffinAdmin(opts: AdminOpts, props: AdminProps) {
-  const { resources, auth, appBarLinks, adminProps, dashboard } = opts
-  const children = resources.map((resource) =>
-    buildAdmin(["resource", resource.name], {
-      ...resource,
-    })
+import {
+  Admin,
+  AdminProps,
+  AppBar,
+  AppBarProps,
+  AuthProvider,
+  DataProvider,
+  Layout,
+  LayoutProps,
+  Login,
+} from "react-admin"
+
+import { useMuffinAdminOpts } from "./hooks"
+import { buildAdmin, findBuilder, findIcon, setupAdmin } from "./utils"
+
+export function MuffinAdmin(props: AdminProps) {
+  const opts = useMuffinAdminOpts()
+  const { resources = [], auth, adminProps, apiUrl } = opts
+
+  document.title = adminProps?.title || "Muffin Admin"
+  const authProvider = findBuilder(["authprovider"])(auth) as AuthProvider
+  const dataProvider = findBuilder(["dataprovider"])(apiUrl) as DataProvider
+
+  return (
+    <Admin
+      requireAuth={auth.required}
+      authProvider={authProvider}
+      dataProvider={dataProvider}
+      layout={findBuilder(["layout"])}
+      loginPage={findBuilder(["loginpage"])}
+      dashboard={findBuilder(["dashboard"])}
+      darkTheme={{ palette: { mode: "dark" } }}
+      {...props}
+    >
+      {resources?.map(({ name }) => buildAdmin(["resource", name], { name }))}
+    </Admin>
   )
+}
 
-  document.title = adminProps.title || "Muffin Admin"
+setupAdmin(["admin"], MuffinAdmin)
 
-  const appBar = (props) => (
+export function MuffinAdminLayout(props: LayoutProps) {
+  return <Layout {...props} appBar={findBuilder(["appbar"])} />
+}
+
+setupAdmin(["layout"], MuffinAdminLayout)
+
+export function MuffinAppBar(props: AppBarProps) {
+  const { appBarLinks } = useMuffinAdminOpts()
+  return (
     <AppBar {...props}>
       <Typography
         variant="h6"
@@ -38,26 +73,9 @@ export function MuffinAdmin(opts: AdminOpts, props: AdminProps) {
       ))}
     </AppBar>
   )
-
-  return (
-    <AdminPropsContext.Provider value={opts}>
-      <Admin
-        authProvider={buildAdmin(["authprovider"], auth)}
-        dataProvider={buildAdmin(["dataprovider"], opts) as unknown as DataProvider}
-        layout={(props) => <Layout {...props} appBar={appBar} />}
-        loginPage={findBuilder(["loginpage"])}
-        dashboard={dashboard ? buildAdmin(["dashboard"], dashboard) : null}
-        requireAuth={auth.required}
-        darkTheme={{ palette: { mode: "dark" } }}
-        {...props}
-      >
-        {children}
-      </Admin>
-    </AdminPropsContext.Provider>
-  )
 }
 
-setupAdmin(["admin"], MuffinAdmin)
+setupAdmin(["appbar"], MuffinAppBar)
 
 // Initialize login page
 setupAdmin(["loginpage"], Login)

package/src/MuffinDashboard.tsx

@@ -6,17 +6,21 @@ import TableBody from "@mui/material/TableBody"
 import TableCell from "@mui/material/TableCell"
 import TableRow from "@mui/material/TableRow"
 import Typography from "@mui/material/Typography"
-import { AdminDashboardBlock, AdminOpts } from "./types"
+import { useMuffinAdminOpts } from "./hooks"
+import { AdminDashboardBlock } from "./types"
 import { setupAdmin } from "./utils"
 
-export function MuffinDashboard({ src }: { src: AdminOpts["dashboard"] }) {
+export function MuffinDashboard() {
+  const { dashboard } = useMuffinAdminOpts()
   return (
     <Grid container spacing={1}>
-      <AdminCards src={src} />
+      <AdminCards src={dashboard} />
     </Grid>
   )
 }
 
+setupAdmin(["dashboard"], MuffinDashboard)
+
 function AdminCards({ src }: { src: AdminDashboardBlock | AdminDashboardBlock[] }) {
   if (Array.isArray(src))
     return (
@@ -60,5 +64,3 @@ const AdminTableView = ({ src }) => (
     </TableBody>
   </Table>
 )
-
-setupAdmin(["dashboard"], (dashboard) => () => <MuffinDashboard src={dashboard} />)

package/src/MuffinResource.tsx

@@ -1,25 +1,21 @@
-import { Resource } from "react-admin"
-import { AdminResourceProps } from "./types"
-import { buildAdmin, findIcon, setupAdmin } from "./utils"
+import { Resource, ResourceProps } from "react-admin"
+import { useMuffinAdminOpts } from "./hooks"
+import { findBuilder, findIcon, setupAdmin } from "./utils"
+
+export function MuffinResource({ name, ...props }: ResourceProps) {
+  const adminOpts = useMuffinAdminOpts()
+  const opts = adminOpts?.resources.find((r) => r.name == name)
+  if (!opts) return null
 
-export function MuffinResource({
-  name,
-  create: createProps,
-  edit: editProps,
-  list: listProps,
-  show: showProps,
-  icon,
-  ...props
-}: AdminResourceProps) {
   return (
     <Resource
       key={name}
       name={name}
-      icon={findIcon(icon)}
-      create={createProps ? buildAdmin(["create", name], createProps) : undefined}
-      edit={editProps ? buildAdmin(["edit", name], editProps) : undefined}
-      list={buildAdmin(["list", name], listProps)}
-      show={buildAdmin(["show", name], showProps)}
+      icon={findIcon(opts.icon)}
+      create={findBuilder(["create", name])}
+      edit={findBuilder(["edit", name])}
+      list={findBuilder(["list", name])}
+      show={findBuilder(["show", name])}
       {...props}
     />
   )

package/src/MuffinResourceCreate.tsx

@@ -1,19 +1,22 @@
-import { Create, ListButton, SimpleForm, TopToolbar, useResourceContext } from "react-admin"
+import { Create, ListButton, SimpleForm, TopToolbar } from "react-admin"
 import { buildRA } from "./buildRA"
-import { AdminResourceProps } from "./types"
-import { buildAdmin, setupAdmin } from "./utils"
+import { useMuffinResourceOpts } from "./hooks"
+import { buildAdmin, findBuilder, setupAdmin } from "./utils"
 
-export function MuffinResourceCreate({ inputs }: { inputs: AdminResourceProps["create"] }) {
-  const resourceName = useResourceContext()
+export function MuffinResourceCreate() {
+  const { name, create } = useMuffinResourceOpts()
+  if (!create) return null
+
+  const Actions = findBuilder(["create-actions", name])
 
   return (
-    <Create actions={buildAdmin(["create-actions", resourceName])}>
-      <SimpleForm>{buildAdmin(["create-inputs", resourceName], inputs)}</SimpleForm>
+    <Create actions={<Actions />}>
+      <SimpleForm>{buildAdmin(["create-inputs", name], create)}</SimpleForm>
     </Create>
   )
 }
 
-setupAdmin(["create"], (inputs) => <MuffinResourceCreate inputs={inputs} />)
+setupAdmin(["create"], MuffinResourceCreate)
 
 setupAdmin(["create-actions"], () => (
   <TopToolbar>

package/src/MuffinResourceEdit.tsx

@@ -1,4 +1,3 @@
-import { useContext } from "react"
 import {
   DeleteButton,
   Edit,
@@ -8,28 +7,25 @@ import {
   SimpleForm,
   Toolbar,
   TopToolbar,
-  useResourceContext,
 } from "react-admin"
 import { buildRA } from "./buildRA"
 import { ActionButton } from "./buttons"
-import { AdminAction, AdminOpts, AdminResourceProps } from "./types"
-import { AdminPropsContext, buildAdmin, setupAdmin } from "./utils"
+import { useMuffinAdminOpts, useMuffinResourceOpts } from "./hooks"
+import { AdminAction } from "./types"
+import { buildAdmin, findBuilder, setupAdmin } from "./utils"
 
-export function MuffinResourceEdit(props: AdminResourceProps["edit"]) {
-  const resourceName = useResourceContext()
+export function MuffinResourceEdit() {
   const {
-    adminProps: { mutationMode },
-  } = useContext(AdminPropsContext) as AdminOpts
+    adminProps: { mutationMode = "optimistic" },
+  } = useMuffinAdminOpts()
+  const { edit, name } = useMuffinResourceOpts()
+  if (!edit) return null
 
-  if (!props) return null
-  const { actions, inputs, remove, ...opts } = props
+  const { actions, inputs, remove, ...opts } = edit
+  const Actions = findBuilder(["edit-actions", name])
 
   return (
-    <Edit
-      actions={buildAdmin(["edit-actions", resourceName], actions)}
-      mutationMode={mutationMode || "optimistic"}
-      {...opts}
-    >
+    <Edit actions={<Actions actions={actions} />} mutationMode={mutationMode} {...opts}>
       <SimpleForm
         toolbar={
           <Toolbar>
@@ -44,20 +40,26 @@ export function MuffinResourceEdit(props: AdminResourceProps["edit"]) {
           </Toolbar>
         }
       >
-        {buildAdmin(["edit-inputs", resourceName], inputs)}
+        {buildAdmin(["edit-inputs", name], inputs)}
       </SimpleForm>
     </Edit>
   )
 }
 
-setupAdmin(["edit"], (props) => <MuffinResourceEdit {...props} />)
-setupAdmin(["edit-actions"], (actions: AdminAction[]) => (
-  <TopToolbar>
-    {actions.map((props, idx) => (
-      <ActionButton key={idx} {...props} />
-    ))}
-    <ListButton />
-    <ShowButton />
-  </TopToolbar>
-))
+setupAdmin(["edit"], MuffinResourceEdit)
+
+function MuffinResourceEditActions({ actions }: { actions: AdminAction[] }) {
+  return (
+    <TopToolbar>
+      {actions.map((props, idx) => (
+        <ActionButton key={idx} {...props} />
+      ))}
+      <ListButton />
+      <ShowButton />
+    </TopToolbar>
+  )
+}
+
+setupAdmin(["edit-actions"], MuffinResourceEditActions)
+
 setupAdmin(["edit-inputs"], buildRA)

package/src/MuffinResourceList.tsx

@@ -1,45 +1,49 @@
 import sortBy from "lodash/sortBy"
 import uniq from "lodash/uniq"
-import {
-  BulkDeleteButton,
-  Datagrid,
-  EditButton,
-  List,
-  Pagination,
-  useResourceContext,
-} from "react-admin"
+import { BulkDeleteButton, Datagrid, EditButton, List, Pagination } from "react-admin"
 import { buildRA } from "./buildRA"
 import { BulkActionButton } from "./buttons"
-import { AdminAction, AdminResourceProps } from "./types"
-import { buildAdmin, setupAdmin } from "./utils"
+import { useMuffinResourceOpts } from "./hooks"
+import { AdminAction } from "./types"
+import { buildAdmin, findBuilder, setupAdmin } from "./utils"
+
+export function MuffinResourceList() {
+  const { name, list } = useMuffinResourceOpts()
+  const { fields, edit, show, limit, limitMax, filters, actions, remove, sort } = list
+
+  const Actions = findBuilder(["list-actions", name])
 
-export function MuffinResourceList(props: AdminResourceProps["list"]) {
-  const resourceName = useResourceContext()
-  const { fields, edit, show, limit, limitMax, filters, actions, remove, sort } = props
   return (
     <List
       sort={sort}
       perPage={limit}
-      filters={buildAdmin(["list-filters", resourceName], filters) || undefined}
-      bulkActionButtons={buildAdmin(["list-actions", resourceName], { actions, remove })}
+      filters={buildAdmin(["list-filters", name], filters)}
+      bulkActionButtons={<Actions actions={actions} remove={remove} />}
       pagination={
         <Pagination rowsPerPageOptions={sortBy(uniq([10, 25, 50, 100, limit, limitMax]))} />
       }
     >
       <Datagrid rowClick={show ? "show" : edit ? "edit" : false}>
-        {buildAdmin(["list-fields", resourceName], fields)}
+        {buildAdmin(["list-fields", name], fields)}
         {edit && <EditButton />}
       </Datagrid>
     </List>
   )
 }
 
-setupAdmin(["list"], (props) => <MuffinResourceList {...props} />)
+setupAdmin(["list"], MuffinResourceList)
 setupAdmin(["list-fields"], buildRA)
+
 setupAdmin(["list-filters"], buildRA)
-setupAdmin(
-  ["list-actions"],
-  ({ actions, remove }: { actions: AdminAction[]; remove?: boolean }) => (
+
+function MuffinResourceListActions({
+  actions,
+  remove,
+}: {
+  actions: AdminAction[]
+  remove?: boolean
+}) {
+  return (
     <>
       {actions.map((props) => (
         <BulkActionButton key={props.id} {...props} />
@@ -47,4 +51,6 @@ setupAdmin(
       {remove && <BulkDeleteButton />}
     </>
   )
-)
+}
+
+setupAdmin(["list-actions"], MuffinResourceListActions)

package/src/MuffinResourceShow.tsx

@@ -9,16 +9,17 @@ import {
 import { LinkAction } from "./actions"
 import { buildRA } from "./buildRA"
 import { ActionButton } from "./buttons"
+import { useMuffinResourceOpts } from "./hooks"
 import { AdminAction, AdminShowProps } from "./types"
 import { buildAdmin, findBuilder, setupAdmin } from "./utils"
 
-export function MuffinResourceShow(props: AdminShowProps) {
-  const resourceName = useResourceContext()
-  const ShowActions = findBuilder(["show-actions", resourceName])
+export function MuffinResourceShow() {
+  const { show, name } = useMuffinResourceOpts()
+  const ShowActions = findBuilder(["show-actions", name])
 
   return (
-    <Show actions={<ShowActions {...props} />}>
-      <SimpleShowLayout>{buildAdmin(["show-fields", resourceName], props)}</SimpleShowLayout>
+    <Show actions={<ShowActions {...show} />}>
+      <SimpleShowLayout>{buildAdmin(["show-fields", name], show)}</SimpleShowLayout>
     </Show>
   )
 }

package/src/actions/LinkAction.tsx

@@ -1,16 +1,15 @@
-import { useContext } from "react"
 import { useRecordContext, useResourceContext } from "react-admin"
 import LinkButton from "../buttons/LinkButton"
+import { useMuffinAdminOpts } from "../hooks"
 import { AdminShowLink } from "../types"
-import { AdminPropsContext } from "../utils"
 
 export function LinkAction({ field, icon, ...props }: AdminShowLink & { resource: string }) {
-  const adminProps = useContext(AdminPropsContext)
+  const { resources } = useMuffinAdminOpts()
   const record = useRecordContext()
   const currentResource = useResourceContext()
   if (!record) return null
 
-  const resource = adminProps?.resources.find((r) => r.name === props.resource)
+  const resource = resources.find((r) => r.name === props.resource)
 
   return (
     <LinkButton

package/src/authprovider.ts

@@ -1,5 +1,5 @@
 import Cookies from "js-cookie"
-import { buildAdmin, makeRequest, requestHeaders, setupAdmin } from "."
+import { findBuilder, makeRequest, requestHeaders, setupAdmin } from "."
 import { AdminOpts } from "./types"
 
 setupAdmin(
@@ -19,8 +19,8 @@ setupAdmin(["auth-storage-set"], ({ storage }) => (name, value) => {
 export function MuffinAuthProvider(props: AdminOpts["auth"]) {
   const { identityURL, authorizeURL, logoutURL, required, storageName } = props
 
-  const authGet = buildAdmin(["auth-storage-get"], props)
-  const authSet = buildAdmin(["auth-storage-set"], props)
+  const authGet = findBuilder(["auth-storage-get"])(props)
+  const authSet = findBuilder(["auth-storage-set"])(props)
 
   // Initialize request headers
   authSet(storageName, authGet(storageName))

package/src/buildRA.tsx

@@ -37,7 +37,7 @@ import {
 import { AvatarField, EditableBooleanField, FKField, JsonField } from "./fields"
 import { FKInput, JsonInput } from "./inputs"
 
-export const UI: Record<string, JSX.ElementType> = {
+const UI: Record<string, JSX.ElementType> = {
   // Fields
   BooleanField,
   ChipField,
@@ -97,6 +97,10 @@ export function buildRAComponent(name, props) {
   return <Item key={props.source} {...props} />
 }
 
-export function buildRA(items) {
+export function buildRA(items: [string, Record<string, any>][]) {
   return items.map((item) => buildRAComponent(item[0], item[1]))
 }
+
+export function registerUI(name, component) {
+  UI[name] = component
+}

package/src/context.ts

@@ -0,0 +1,4 @@
+import { createContext } from "react"
+import { AdminOpts } from "./types"
+
+export const MuffinAdminContext = createContext<AdminOpts>(null)

package/src/dataprovider.ts

@@ -1,7 +1,6 @@
-import { AdminOpts } from "./types"
 import { APIParams, makeRequest, setupAdmin } from "./utils"
 
-export function MuffinDataprovider({ apiUrl }: AdminOpts) {
+export function MuffinDataprovider(apiUrl: string) {
   async function request(url: string, options?: APIParams) {
     if (!url.startsWith("/")) url = `${apiUrl}/${url}`
     const { json, headers } = await makeRequest(url, options)

package/src/hooks/index.ts

@@ -1 +1,3 @@
-export * from './useAction'
+export * from "./useAction"
+export * from "./useMuffinAdminOpts"
+export * from "./useMuffinResourceOpts"

package/src/hooks/useMuffinAdminOpts.ts

@@ -0,0 +1,6 @@
+import { useContext } from "react"
+import { MuffinAdminContext } from "../context"
+
+export function useMuffinAdminOpts() {
+  return useContext(MuffinAdminContext)
+}

package/src/hooks/useMuffinResourceOpts.ts

@@ -0,0 +1,8 @@
+import { useResourceContext } from "react-admin"
+import { useMuffinAdminOpts } from "./useMuffinAdminOpts"
+
+export function useMuffinResourceOpts() {
+  const resource = useResourceContext()
+  const { resources } = useMuffinAdminOpts()
+  return resources.find((r) => r.name === resource)
+}

package/src/index.tsx

@@ -1,5 +1,8 @@
 import { createRoot } from "react-dom/client"
-import { buildAdmin } from "./utils"
+import { MuffinAdmin } from "./MuffinAdmin"
+import { MuffinAdminContext } from "./context"
+
+export * from "./utils"
 
 export * from "./MuffinAdmin"
 export * from "./MuffinDashboard"
@@ -12,17 +15,21 @@ export * from "./actions"
 export * from "./authprovider"
 export * from "./buildRA"
 export * from "./buttons"
+export * from "./context"
 export * from "./dataprovider"
 export * from "./fields"
 export * from "./hooks"
 export * from "./types"
-export * from "./utils"
 
 export async function initAdmin(prefix = "", containerId: string = "root") {
   const response = await fetch(`${prefix}/ra.json`)
-  const props = await response.json()
+  const adminOpts = await response.json()
   const container = document.getElementById(containerId)
   if (!container) throw new Error(`Container #${containerId} not found`)
   const root = createRoot(container)
-  root.render(buildAdmin(["admin"], props))
+  root.render(
+    <MuffinAdminContext.Provider value={adminOpts}>
+      <MuffinAdmin />
+    </MuffinAdminContext.Provider>
+  )
 }

package/src/utils.tsx

@@ -1,36 +1,33 @@
 import * as icons from "@mui/icons-material"
 import { stringify } from "query-string"
 import { fetchUtils } from "ra-core"
-import { createContext } from "react"
-import { AdminOpts } from "./types"
 
 const builders = new Map<string, (props) => any>()
 
-export function setupAdmin<T>(adminType: string[], fc: (opts, props?) => T) {
+export function setupAdmin<T>(adminType: string[], fc: (props) => T) {
   const key = adminType.join("/")
   builders.set(key, fc)
 }
 
 export function buildAdmin(adminType: string[], props = {}) {
-  if (process.env.NODE_ENV == "development") console.log(adminType, props)
   const builder = findBuilder(adminType)
+  if (process.env.NODE_ENV == "development") console.log(props)
   if (builder) return builder(props)
 
   console.warn(`No admin renderer found for ${adminType.join("/")}`)
   return null
 }
 
-export function findBuilder(adminType: string[]) {
+export function findBuilder(adminType: string[]): (props) => any {
+  if (process.env.NODE_ENV == "development") console.log(adminType)
   const key = [...adminType]
   while (key.length) {
-    const render = builders.get(key.join("/"))
-    if (render) return render
+    const builder = builders.get(key.join("/"))
+    if (builder) return builder
     key.pop()
   }
 }
 
-export const AdminPropsContext = createContext<AdminOpts | null>(null)
-
 export type APIParams = {
   method?: string
   query?: {