muffin-admin 1.44.4 → 1.45.1

package/src/{ui.jsx → buildRA.tsx}

@@ -1,48 +1,41 @@
-import React from "react"
-
-import { required } from "react-admin"
 import {
+  ArrayField,
+  ArrayInput,
+  AutocompleteArrayInput,
+  AutocompleteInput,
   BooleanField,
+  BooleanInput,
+  CheckboxGroupInput,
   ChipField,
   DateField,
-  EmailField,
-  ImageField,
-  FileField,
-  NumberField,
-  RichTextField,
-  TextField,
-  UrlField,
-  SelectField,
-  ArrayField,
-  ReferenceField,
-  ReferenceManyField,
-  ReferenceArrayField,
-} from "react-admin"
-import {
-  BooleanInput,
-  NullableBooleanInput,
   DateInput,
   DateTimeInput,
-  ImageInput,
+  EmailField,
+  FileField,
   FileInput,
+  ImageField,
+  ImageInput,
+  NullableBooleanInput,
+  NumberField,
   NumberInput,
   PasswordInput,
-  TextInput,
-  AutocompleteInput,
   RadioButtonGroupInput,
-  SelectInput,
-  ArrayInput,
-  AutocompleteArrayInput,
-  CheckboxGroupInput,
+  ReferenceArrayField,
   ReferenceArrayInput,
+  ReferenceField,
   ReferenceInput,
+  ReferenceManyField,
+  RichTextField,
+  SelectField,
+  SelectInput,
+  TextField,
+  TextInput,
+  UrlField,
+  required,
 } from "react-admin"
 
-import AvatarField from "./fields/AvatarField"
-import FKField from "./fields/FKField"
-import FKInput from "./inputs/FKInput"
-import JsonField from "./fields/JsonField"
-import JsonInput from "./inputs/JsonInput"
+import { AvatarField, EditableBooleanField, FKField, JsonField } from "./fields"
+import { FKInput, JsonInput } from "./inputs"
 
 const UI = {
   // Fields
@@ -62,8 +55,9 @@ const UI = {
   ReferenceManyField,
   ReferenceArrayField,
   AvatarField,
-  JsonField,
+  EditableBooleanField,
   FKField,
+  JsonField,
 
   // Inputs
   BooleanInput,
@@ -89,6 +83,7 @@ const UI = {
 
 export function buildRAComponent(name, props) {
   const Item = UI[name]
+  if (!Item) return null
 
   if (props.required) {
     props.validate = required()
@@ -97,11 +92,11 @@ export function buildRAComponent(name, props) {
 
   props.fullWidth = props.fullWidth ?? true
 
-  if (props.children) props.children = initRAItems(props.children)[0]
+  if (props.children) props.children = buildRA(props.children)[0]
 
   return <Item key={props.source} {...props} />
 }
 
-export default function initRAItems(items) {
-  return items.map((item) => buildRAComponent(...item))
+export function buildRA(items) {
+  return items.map((item) => buildRAComponent(item[0], item[1]))
 }

package/src/buttons/{ActionButton.jsx → ActionButton.tsx}

@@ -1,32 +1,27 @@
-import React from "react"
-
+import * as icons from "@mui/icons-material"
 import {
   Button,
-  useRefresh,
-  useUnselectAll,
+  useListContext,
   useNotify,
   useRecordContext,
+  useRefresh,
+  useResourceContext,
+  useUnselectAll,
 } from "react-admin"
-import * as icons from "@mui/icons-material"
 
-import useAction from "../hooks/useAction"
+import { useAction } from "../hooks/useAction"
+import { buildIcon } from "../utils"
 
-export const BulkActionButton = ({
-  label,
-  icon,
-  title,
-  action,
-  resource,
-  selectedIds,
-}) => {
+export function BulkActionButton({ label, icon, title, action }) {
+  const resource = useResourceContext()
+  const { selectedIds } = useListContext()
   const refresh = useRefresh(),
     unselectAll = useUnselectAll(resource),
-    notify = useNotify(),
-    Icon = icons[icon]
+    notify = useNotify()
 
   const mutation = useAction(resource, action)
 
-  let onClick = () => {
+  const onClick = () => {
     mutation.mutate(
       {
         action,
@@ -46,18 +41,13 @@ export const BulkActionButton = ({
   }
 
   return (
-    <Button
-      label={label}
-      title={title}
-      onClick={onClick}
-      disabled={mutation.isLoading}
-    >
-      {Icon && <Icon />}
+    <Button label={label} title={title} onClick={onClick} disabled={mutation.isLoading}>
+      {buildIcon(icon)}
     </Button>
   )
 }
 
-export const ActionButton = (props) => {
+export function ActionButton(props) {
   const { icon, label, title, resource, action } = props
   const record = useRecordContext()
   const { mutate, isLoading } = useAction(resource, action)
@@ -66,7 +56,7 @@ export const ActionButton = (props) => {
     notify = useNotify(),
     Icon = icons[icon]
 
-  let onClick = () => {
+  const onClick = () => {
     mutate(
       { record },
       {
@@ -75,8 +65,8 @@ export const ActionButton = (props) => {
           if (data && data.redirectTo) window.location = data.redirectTo
           if (data && data.message) notify(data.message, { type: "success" })
         },
-        onError: (error) => {
-          notify(typeof error === "string" ? error : error.message, {
+        onError: (err) => {
+          notify(typeof err === "string" ? err : err.message, {
             type: "error",
           })
         },
@@ -90,5 +80,3 @@ export const ActionButton = (props) => {
     </Button>
   )
 }
-
-export default ActionButton

package/src/buttons/{LinkButton.jsx → LinkButton.tsx}

@@ -1,18 +1,23 @@
-import React from "react"
 import { Button } from "react-admin"
 import { Link } from "react-router-dom"
-import * as icons from "@mui/icons-material"
+import { AdminShowLink } from "../types"
+import { buildIcon } from "../utils"
 
-const LinkButton = ({ label, icon, title, resource, filters }) => {
-  const Icon = icons[icon] || icon
-  let linkParams = {
+const LinkButton = ({
+  filters,
+  icon,
+  label,
+  resource,
+  title,
+}: AdminShowLink & { resource: string; filters: any }) => {
+  const linkParams = {
     pathname: `/${resource}`,
     search: filters ? `filter=${JSON.stringify(filters)}` : undefined,
   }
 
   return (
     <Button label={label} title={title} component={Link} to={linkParams}>
-      {Icon && <Icon />}
+      {buildIcon(icon)}
     </Button>
   )
 }

package/src/buttons/index.ts

@@ -0,0 +1,2 @@
+export * from "./ActionButton"
+export * from "./LinkButton"

package/src/{dataprovider.js → dataprovider.ts}

@@ -1,9 +1,11 @@
-import { makeRequest } from "./utils"
+import { AdminOpts } from "./types"
+import { APIParams, makeRequest, setupAdmin } from "./utils"
 
-export default (apiUrl) => {
+export function MuffinDataprovider({ apiUrl }: AdminOpts) {
   const methods = {
-    getList: async (resource, { filter, pagination, sort }) => {
-      const query = {}
+    getList: async (resource: string, params: any) => {
+      const { filter, pagination, sort } = params
+      const query: APIParams["query"] = {}
       if (filter) query.where = JSON.stringify(filter)
       if (pagination) {
         const { page, perPage: limit } = pagination
@@ -14,7 +16,6 @@ export default (apiUrl) => {
         const { field, order } = sort
         query.sort = order == "ASC" ? field : `-${field}`
       }
-
       const { headers, json } = await makeRequest(`${apiUrl}/${resource}`, {
         query,
       })
@@ -89,6 +90,7 @@ export default (apiUrl) => {
       return { data: json }
     },
   }
-
   return methods
 }
+
+setupAdmin(["dataprovider"], MuffinDataprovider)

package/src/fields/{AvatarField.jsx → AvatarField.tsx}

@@ -1,12 +1,10 @@
-import React from "react"
+import Avatar from "@mui/material/Avatar"
 import get from "lodash/get"
 import { useRecordContext } from "ra-core"
-import Avatar from "@mui/material/Avatar"
 
-const AvatarField = ({ source, alt, style, nameProp, ...props }) => {
+export function AvatarField({ source, alt, style, nameProp, ...props }) {
   const record = useRecordContext(props)
-
-  let value = get(record, source),
+  const value = get(record, source),
     name = record[nameProp]
 
   const letters = name
@@ -29,5 +27,3 @@ AvatarField.displayName = "AvatarField"
 AvatarField.defaultProps = {
   addLabel: true,
 }
-
-export default AvatarField

package/src/fields/EditableBooleanField.tsx

@@ -0,0 +1,5 @@
+import { BooleanInput } from "ra-ui-materialui"
+
+export function EditableBooleanField({ source }) {
+  return <BooleanInput source={source} />
+}

package/src/fields/{FKField.jsx → FKField.tsx}

@@ -1,14 +1,8 @@
-import React from "react"
 import { ReferenceField, TextField } from "react-admin"
 
-const FKField = ({ refSource, refID, link, reference, source, ...props }) => {
+export function FKField({ refSource, refID, link, reference, source, ...props }) {
   return (
-    <ReferenceField
-      link={link || "show"}
-      reference={reference}
-      source={source}
-      {...props}
-    >
+    <ReferenceField link={link || "show"} reference={reference} source={source} {...props}>
       <>
         <TextField source={refSource} />
         {" (#"}
@@ -23,5 +17,3 @@ FKField.displayName = "FKField"
 FKField.defaultProps = {
   addLabel: true,
 }
-
-export default FKField

package/src/fields/{JsonField.jsx → JsonField.tsx}

@@ -1,9 +1,8 @@
 import get from "lodash/get"
-
-import React, { useState } from "react"
+import { useState } from "react"
 import { Button, FunctionField, useRecordContext } from "react-admin"
 
-export default function JsonField({ label, source }) {
+export function JsonField({ label, source }) {
   const [expand, setExpand] = useState(false)
   const record = useRecordContext()
   const src = JSON.stringify(get(record, source), null, 2)

package/src/fields/index.ts

@@ -0,0 +1,4 @@
+export * from "./AvatarField"
+export * from "./EditableBooleanField"
+export * from "./FKField"
+export * from "./JsonField"

package/src/hooks/{useAction.js → useAction.ts}

@@ -1,9 +1,9 @@
 import { useDataProvider } from "react-admin"
 import { useMutation } from "react-query"
 
-export default function useAction(resource, action) {
+export function useAction(resource, action) {
   const dataProvider = useDataProvider()
-  return useMutation((params) =>
+  return useMutation<{ data: any }, { message: string } | string, any>((params: any) =>
     dataProvider.runAction(resource, action, params)
   )
 }

package/src/index.tsx

@@ -0,0 +1,25 @@
+import { createRoot } from "react-dom/client"
+import { buildAdmin } from "./utils"
+
+export * from "./MuffinAdmin"
+export * from "./MuffinResource"
+export * from "./MuffinResourceCreate"
+export * from "./MuffinResourceEdit"
+export * from "./MuffinResourceList"
+export * from "./MuffinResourceShow"
+export * from "./authprovider"
+export * from "./buildRA"
+export * from "./buttons"
+export * from "./dataprovider"
+export * from "./fields"
+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 container = document.getElementById(containerId)
+  if (!container) throw new Error(`Container #${containerId} not found`)
+  const root = createRoot(container)
+  root.render(buildAdmin(["admin"], props))
+}

package/src/inputs/FKInput.tsx

@@ -0,0 +1,27 @@
+import { AutocompleteInput, ReferenceInput } from "react-admin"
+
+export function FKInput({ refProp, refSource, fullWidth, reference, source, ...props }) {
+  const filterToQuery = (search) => {
+    const filters = {}
+    filters[refProp] = search
+    return filters
+  }
+
+  refSource = refSource || "id"
+
+  const renderText = (record) => {
+    const pk = record[refSource]
+    return (pk && `${record[refProp]} (#${pk})`) || ""
+  }
+
+  return (
+    <ReferenceInput reference={reference} source={source} filterToQuery={filterToQuery} {...props}>
+      <AutocompleteInput
+        source={refSource}
+        optionText={renderText}
+        fullWidth={fullWidth}
+        {...props}
+      />
+    </ReferenceInput>
+  )
+}

package/src/inputs/{JsonInput.jsx → JsonInput.tsx}

@@ -1,4 +1,3 @@
-import React from "react"
 import { TextInput } from "react-admin"
 import isJSON from "validator/lib/isJSON"
 
@@ -9,6 +8,7 @@ const parseFunction = (json) => {
   try {
     retval = JSON.parse(json)
   } finally {
+    // eslint-disable-next-line no-unsafe-finally
     return retval
   }
 }
@@ -31,7 +31,7 @@ const parseFunction = (json) => {
  * @example
  * <JsonInput source='config' label='JSON Config' parse={false}/>
  */
-export default function JsonInput(props) {
+export function JsonInput(props) {
   const {
     validate = [],
     errortext = DEFAULT_ERRORTEXT,
@@ -50,8 +50,7 @@ export default function JsonInput(props) {
 
   const formatJSON = (json) => {
     let retval = json
-    if (retval && typeof retval === "object")
-      retval = JSON.stringify(retval, null, 2)
+    if (retval && typeof retval === "object") retval = JSON.stringify(retval, null, 2)
     return retval
   }
   rest.format = formatJSON

package/src/inputs/index.ts

@@ -0,0 +1,2 @@
+export * from "./FKInput"
+export * from "./JsonInput"

package/src/types.ts

@@ -0,0 +1,73 @@
+export type TProps = {
+  [key: string]: any
+}
+
+export type AdminAction = {
+  view: string
+  icon: string
+  action: string
+  title: string
+  label: string
+}
+
+export type AdminField = [string, { source: string }]
+export type AdminInput = [string, { required: boolean; source: string }]
+
+export type AdminShowLink = {
+  label: string
+  title?: string
+  icon?: string
+}
+export type AdminShowProps = {
+  actions: AdminAction[]
+  fields: AdminField[]
+  links: Record<string, AdminShowLink>
+}
+
+export type AdminResourceProps = {
+  name: string
+  icon?: string
+  label: string
+  create: AdminInput[]
+  edit: {
+    actions: AdminAction[]
+    inputs: AdminInput[]
+  }
+  list: {
+    limit: number
+    limitMax: number
+    actions: AdminAction[]
+    fields: AdminField[]
+    filters: AdminInput[]
+    show: boolean
+    edit?: boolean
+  }
+  show: AdminShowProps
+}
+
+export type AdminDashboardBlock = {
+  title: string
+  value: any
+}
+
+export type AdminOpts = {
+  adminProps: {
+    title: string
+    disableTelemetry?: boolean
+    mutationMode?: "optimistic" | "pessimistic" | "undoable"
+  }
+  apiUrl: string
+  appBarLinks: [{ ulr: string; title: string; icon?: string }]
+  auth: {
+    identityURL: string
+    authorizeURL: string
+    loginURL?: string
+    logoutURL?: string
+    required: boolean
+    storage: "localstorage" | "cookie"
+    storageName: string
+  }
+  dashboard: AdminDashboardBlock[] | AdminDashboardBlock
+  resources: AdminResourceProps[]
+  version: string
+}

package/src/utils.tsx

@@ -0,0 +1,69 @@
+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: (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 (builder) return builder(props)
+
+  console.warn(`No admin renderer found for ${adminType.join("/")}`)
+  return null
+}
+
+export function findBuilder(adminType: string[]) {
+  const key = [...adminType]
+  while (key.length) {
+    const render = builders.get(key.join("/"))
+    if (render) return render
+    key.pop()
+  }
+}
+
+export const AdminPropsContext = createContext<AdminOpts | null>(null)
+
+export type APIParams = {
+  method?: string
+  query?: {
+    where?: string
+    limit?: number
+    offset?: number
+    sort?: string
+    ids?: string[]
+  }
+  data?: any
+  headers?: any
+  body?: string
+}
+
+export const requestHeaders = {}
+
+export function makeRequest(url: string, params: APIParams = {}) {
+  const { data, query, ...opts } = params || {}
+
+  if (data) opts.body = JSON.stringify(data)
+  if (query) url = `${url}?${stringify(query)}`
+
+  return fetchUtils.fetchJson(url, {
+    ...opts,
+    headers: new Headers({ ...requestHeaders, ...opts.headers }),
+  })
+}
+
+export function findIcon(icon?: string) {
+  return icon ? icons[icon] : undefined
+}
+
+export function buildIcon(icon?: string) {
+  const Icon = findIcon(icon)
+  if (Icon) return <Icon />
+}

package/src/web.ts

@@ -0,0 +1,4 @@
+import { initAdmin } from "."
+
+// @ts-ignore
+globalThis.initAdmin = initAdmin

package/dist/cjs/admin.js

@@ -1,80 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _reactAdmin = require("react-admin");
-var _material = require("@mui/material");
-var icons = _interopRequireWildcard(require("@mui/icons-material"));
-var _authprovider = _interopRequireDefault(require("./authprovider"));
-var _dataprovider = _interopRequireDefault(require("./dataprovider"));
-var _utils = require("./utils");
-require("./dashboard");
-require("./resources");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var darkTheme = (0, _material.createTheme)({
-  palette: {
-    mode: "dark"
-  }
-});
-
-// Initialize the admin
-(0, _utils.setupAdmin)("admin", function (props) {
-  var apiUrl = props.apiUrl,
-    auth = props.auth,
-    adminProps = props.adminProps,
-    appBarLinks = props.appBarLinks,
-    dashboard = props.dashboard,
-    resources = props.resources;
-  var appBar = function appBar(props) {
-    return /*#__PURE__*/_react["default"].createElement(_reactAdmin.AppBar, props, /*#__PURE__*/_react["default"].createElement(_material.Typography, {
-      variant: "h6",
-      color: "inherit",
-      id: "react-admin-title",
-      style: {
-        flex: 1,
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        overflow: "hidden"
-      }
-    }), /*#__PURE__*/_react["default"].createElement(_reactAdmin.ToggleThemeButton, {
-      lightTheme: _reactAdmin.defaultTheme,
-      darkTheme: darkTheme
-    }), appBarLinks.map(function (info) {
-      return /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
-        key: info.url,
-        title: info.title
-      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
-        color: "inherit",
-        href: info.url
-      }, /*#__PURE__*/_react["default"].createElement(_material.SvgIcon, {
-        component: icons[info.icon]
-      })));
-    }));
-  };
-  return /*#__PURE__*/_react["default"].createElement(_reactAdmin.Admin, (0, _extends2["default"])({
-    authProvider: (0, _utils.processAdmin)("auth", auth),
-    dataProvider: (0, _utils.processAdmin)("data", apiUrl),
-    dashboard: (0, _utils.processAdmin)("dashboard", dashboard),
-    loginPage: (0, _utils.processAdmin)("login", auth),
-    layout: function layout(props) {
-      return /*#__PURE__*/_react["default"].createElement(_reactAdmin.Layout, (0, _extends2["default"])({
-        appBar: appBar
-      }, props));
-    }
-  }, adminProps), (0, _utils.processAdmin)("resources", {
-    resources: resources,
-    adminProps: adminProps
-  }));
-});
-
-// Initialize authentication and data providers
-(0, _utils.setupAdmin)("auth", _authprovider["default"]);
-(0, _utils.setupAdmin)("data", _dataprovider["default"]);
-
-// Initialize login page
-(0, _utils.setupAdmin)("login", function () {
-  return _reactAdmin.Login;
-});