muffin-admin 3.19.0 → 4.0.0

package/dist/types.d.ts

@@ -1,6 +1,9 @@
+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-inputs" | "create-toolbar" | "dashboard" | "dashboard-actions" | "dashboard-content" | "data-provider" | "edit" | "edit-actions" | "edit-inputs" | "edit-toolbar" | "layout" | "list" | "list-toolbar" | "list-grid" | "list-grid-buttons" | "list-filters" | "list-fields" | "list-bulk-actions" | "locale" | "loginpage" | "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")[];
     help?: string;

package/dist/utils.d.ts

@@ -1,6 +1,7 @@
-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;
+import { TAdminPath } from "./types";
+export declare function setupAdmin<T>(adminType: TAdminPath, fc: (props: any) => T): void;
+export declare function buildAdmin(adminType: TAdminPath, props?: {}): any;
+export declare function findBuilder(adminType: TAdminPath): (props: any) => any;
 export type APIParams = {
     method?: string;
     query?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "3.19.0",
+  "version": "4.0.0",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",
@@ -31,6 +31,7 @@
     "validator": "^13.12.0"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.10",
     "@types/node": "20.14.2",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",

package/src/MuffinAdmin.tsx

@@ -37,8 +37,8 @@ export function MuffinAdmin(props: AdminProps) {
 
   const {
     basename,
-    authProvider = findBuilder(["authprovider"])(auth),
-    dataProvider = findBuilder(["dataprovider"])(apiUrl),
+    authProvider = findBuilder(["auth-provider"])(auth),
+    dataProvider = findBuilder(["data-provider"])(apiUrl),
     catchAll,
     dashboard = findBuilder(["dashboard"]),
     disableTelemetry,

package/src/MuffinDashboard.tsx

@@ -65,9 +65,9 @@ function DashboardCard({ title, value }: AdminDashboardBlock) {
 const AdminTableView = ({ src }) => (
   <Table>
     <TableBody>
-      {src.map((row, idx) => (
+      {src.map((row: any, idx: number) => (
         <TableRow key={idx} hover>
-          {row.map((cell, idx) => (
+          {row.map((cell: any, idx: number) => (
             <TableCell key={idx}>{cell}</TableCell>
           ))}
         </TableRow>

package/src/authprovider.ts

@@ -89,4 +89,4 @@ export function MuffinAuthProvider(props: AdminOpts["auth"]) {
     }
 }
 
-setupAdmin(["authprovider"], MuffinAuthProvider)
+setupAdmin(["auth-provider"], MuffinAuthProvider)

package/src/buildRA.tsx

@@ -81,7 +81,7 @@ const UI: Record<string, JSX.ElementType> = {
   FKInput,
 }
 
-export function buildRAComponent(name, props) {
+export function buildRAComponent(name: string, props: any) {
   const Item = UI[name]
   if (!Item) return null
 
@@ -99,6 +99,6 @@ export function buildRA(items: [string, Record<string, any>][]) {
   return items.map((item) => buildRAComponent(item[0], item[1]))
 }
 
-export function registerUI(name, component) {
+export function registerUI(name: string, component: JSX.ElementType) {
   UI[name] = component
 }

package/src/buttons/ActionButton.tsx

@@ -76,7 +76,7 @@ export function BulkActionButton({ paths, confirm, ...props }: AdminAction) {
   const confirmMessage =
     typeof confirm === "string" ? translate(confirm) : "Do you confirm this action?"
 
-  const onHandle = async (payload?) => {
+  const onHandle = async (payload?: any) => {
     const process = confirm ? await confirmation.confirm({ message: confirmMessage }) : true
     if (process) await mutate({ ids: selectedIds, payload })
   }
@@ -100,32 +100,32 @@ function ActionButtonBase({
   const resource = useResourceContext()
   const [payloadActive, setPayloadActive] = useState(false)
 
-  const PayloadBuilder =
-    findBuilder(["action", "payload", id, resource]) || (schema && CommonPayload)
+  const PayloadForm = findBuilder(["action-form", id, resource]) || (schema && CommonPayload)
+  if (!PayloadForm)
+    return (
+      <Button label={label} title={title} onClick={onHandle} disabled={isPending}>
+        {buildIcon(icon)}
+      </Button>
+    )
 
   return (
     <>
       <Button
         label={label}
         title={title}
-        onClick={() => {
-          if (PayloadBuilder) setPayloadActive(true)
-          else onHandle()
-        }}
+        onClick={() => setPayloadActive(true)}
         disabled={isPending}
       >
         {buildIcon(icon)}
       </Button>
-      {PayloadBuilder && (
-        <PayloadBuilder
-          active={payloadActive}
-          onHandle={onHandle}
-          onClose={() => setPayloadActive(false)}
-          title={title || label}
-          schema={schema}
-          help={help}
-        />
-      )}
+      <PayloadForm
+        active={payloadActive}
+        onHandle={onHandle}
+        onClose={() => setPayloadActive(false)}
+        title={title || label}
+        schema={schema}
+        help={help}
+      />
     </>
   )
 }
@@ -160,11 +160,11 @@ export function CommonPayload({
           title={
             help
               ? ((
-                <Stack alignItems="flex-start">
-                  <span>{translate(title, { _: title })}</span>
-                  <HelpLink href={help} style={{ alignSelf: "flex-end" }} />
-                </Stack>
-              ) as any)
+                  <Stack alignItems="flex-start">
+                    <span>{translate(title, { _: title })}</span>
+                    <HelpLink href={help} style={{ alignSelf: "flex-end" }} />
+                  </Stack>
+                ) as any)
               : translate(title, { _: title })
           }
           actions={

package/src/dataprovider.ts

@@ -1,3 +1,4 @@
+import { TID } from "./types"
 import { APIParams, makeRequest, setupAdmin } from "./utils"
 
 export function MuffinDataprovider(apiUrl: string) {
@@ -26,35 +27,35 @@ export function MuffinDataprovider(apiUrl: string) {
       return { data, total: parseInt(headers.get("x-total"), 10) }
     },
 
-    getOne: async (resource, { id }) => {
+    getOne: async (resource: string, { id }: { id: TID }) => {
       return await request(`${resource}/${id}`)
     },
 
-    create: async (resource, { data }) => {
+    create: async (resource: string, { data }) => {
       return await request(resource, {
         data,
         method: "POST",
       })
     },
 
-    update: async (resource, { id, data }) => {
+    update: async (resource: string, { id, data }: { id: TID; data: any }) => {
       return await makeRequest(`${apiUrl}/${resource}/${id}`, {
         data,
         method: "PUT",
       }).then(({ json }) => ({ data: json }))
     },
 
-    updateMany: async (resource, { ids, data }) => {
+    updateMany: async (resource: string, { ids, data }: { ids: TID[]; data: any }) => {
       await Promise.all(ids.map((id) => methods.update(resource, { id, data })))
       return { data: ids }
     },
 
-    delete: async (resource, { id }) => {
+    delete: async (resource: string, { id }: { id: TID }) => {
       await request(`${resource}/${id}`, { method: "DELETE" })
       return { data: { id } }
     },
 
-    deleteMany: async (resource, { ids }) => {
+    deleteMany: async (resource: string, { ids }: { ids: TID[][] }) => {
       await request(resource, {
         data: ids,
         method: "DELETE",
@@ -62,13 +63,13 @@ export function MuffinDataprovider(apiUrl: string) {
       return { data: ids }
     },
 
-    getMany: (resource, props) => {
+    getMany: (resource: string, props: { ids: TID[]; meta: any }) => {
       const { ids, meta } = props
       const key = meta?.key || "id"
       return methods.getList(resource, { filter: { [key]: { $in: ids } } })
     },
 
-    getManyReference: async (resource, { target, id, filter, ...opts }) => {
+    getManyReference: async (resource: string, { target, id, filter, ...opts }) => {
       filter = filter || {}
       filter[target] = id
       return await methods.getList(resource, { filter, ...opts })
@@ -96,4 +97,4 @@ export type TActionProps<T = any> = {
   ids?: string[]
   record?: T
 }
-setupAdmin(["dataprovider"], MuffinDataprovider)
+setupAdmin(["data-provider"], MuffinDataprovider)

package/src/fields/AvatarField.tsx

@@ -12,7 +12,7 @@ export function AvatarField({ source, alt, style, nameProp, ...props }) {
         .trim(" ")
         .split(/\s+/)
         .slice(0, 2)
-        .map((n) => n[0].toUpperCase())
+        .map((n: string) => n[0].toUpperCase())
         .join("")
     : ""
 

package/src/types.ts

@@ -1,7 +1,45 @@
+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-inputs"
+  | "create-toolbar"
+  | "dashboard"
+  | "dashboard-actions"
+  | "dashboard-content"
+  | "data-provider"
+  | "edit"
+  | "edit-actions"
+  | "edit-inputs"
+  | "edit-toolbar"
+  | "layout"
+  | "list"
+  | "list-toolbar"
+  | "list-grid"
+  | "list-grid-buttons"
+  | "list-filters"
+  | "list-fields"
+  | "list-bulk-actions"
+  | "locale"
+  | "loginpage"
+  | "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")[]
   help?: string

package/src/utils.tsx

@@ -1,15 +1,16 @@
 import * as icons from "@mui/icons-material"
 import { stringify } from "query-string"
 import { fetchUtils } from "ra-core"
+import { TAdminPath } from "./types"
 
-const builders = new Map<string, (props) => any>()
+const builders = new Map<string, (props: any) => any>()
 
-export function setupAdmin<T>(adminType: string[], fc: (props) => T) {
+export function setupAdmin<T>(adminType: TAdminPath, fc: (props: any) => T) {
   const key = adminType.join("/")
   builders.set(key, fc)
 }
 
-export function buildAdmin(adminType: string[], props = {}) {
+export function buildAdmin(adminType: TAdminPath, props = {}) {
   const builder = findBuilder(adminType)
   if (process.env.NODE_ENV == "development") console.log(props)
   if (builder) return builder(props)
@@ -18,7 +19,7 @@ export function buildAdmin(adminType: string[], props = {}) {
   return null
 }
 
-export function findBuilder(adminType: string[]): (props) => any {
+export function findBuilder(adminType: TAdminPath): (props: any) => any {
   if (process.env.NODE_ENV == "development") console.log(adminType)
   const key = [...adminType]
   while (key.length) {