muffin-admin 1.36.4 → 1.36.5

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "muffin-admin",
-  "version": "1.36.4",
+  "version": "1.36.5",
   "description": "NPM package for https://github.com/klen/muffin-admin",
-  "main": "dist/index.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -35,14 +40,5 @@
     "webpack": "^5.24.4",
     "webpack-cli": "^5.0.0",
     "webpack-dev-server": "^4.3.1"
-  },
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react"
-    ],
-    "plugins": [
-      "@babel/plugin-transform-runtime"
-    ]
   }
 }

package/src/admin.jsx

@@ -0,0 +1,78 @@
+import React from "react"
+
+import {
+  Admin,
+  AppBar,
+  Layout,
+  Login,
+  ToggleThemeButton,
+  defaultTheme,
+} from "react-admin"
+import {
+  IconButton,
+  SvgIcon,
+  Tooltip,
+  Typography,
+  createTheme,
+} from "@mui/material"
+import * as icons from "@mui/icons-material"
+
+import authProvider from "./authprovider"
+import dataProvider from "./dataprovider"
+import { processAdmin, setupAdmin } from "./utils"
+
+import "./dashboard"
+import "./resources"
+
+const darkTheme = createTheme({
+  palette: { mode: "dark" },
+})
+
+// Initialize the admin
+setupAdmin("admin", (props) => {
+  const { apiUrl, auth, adminProps, appBarLinks, dashboard, resources } = props
+
+  let appBar = (props) => (
+    <AppBar {...props}>
+      <Typography
+        variant="h6"
+        color="inherit"
+        id="react-admin-title"
+        style={{
+          flex: 1,
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+        }}
+      />
+      <ToggleThemeButton lightTheme={defaultTheme} darkTheme={darkTheme} />
+      {appBarLinks.map((info) => (
+        <Tooltip key={info.url} title={info.title}>
+          <IconButton color="inherit" href={info.url}>
+            <SvgIcon component={icons[info.icon]} />
+          </IconButton>
+        </Tooltip>
+      ))}
+    </AppBar>
+  )
+
+  return (
+    <Admin
+      authProvider={processAdmin("auth", auth)}
+      dataProvider={processAdmin("data", apiUrl)}
+      dashboard={processAdmin("dashboard", dashboard)}
+      loginPage={processAdmin("login", auth)}
+      layout={(props) => <Layout appBar={appBar} {...props} />}
+      {...adminProps}
+    >
+      {processAdmin("resources", resources)}
+    </Admin>
+  )
+})
+
+// Initialize authentication and data providers
+setupAdmin("auth", authProvider)
+setupAdmin("data", dataProvider)
+
+// Initialize login page
+setupAdmin("login", () => Login)

package/src/authprovider.js

@@ -0,0 +1,85 @@
+import Cookies from "js-cookie"
+
+import { makeRequest, processAdmin, requestHeaders, setupAdmin } from "./utils"
+
+setupAdmin(
+  "auth-get",
+  ({ storage }) =>
+    (name) =>
+      storage == "localstorage" ? localStorage.getItem(name) : Cookies.get(name)
+)
+
+setupAdmin("auth-set", ({ storage }) => (name, value) => {
+  if (storage == "localstorage") {
+    localStorage.setItem(name, value)
+    requestHeaders["Authorization"] = value
+  } else Cookies.set(name, value)
+})
+
+export default (props) => {
+  const { identityURL, authorizeURL, logoutURL, required, storage_name } = props
+
+  const authGet = processAdmin("auth-get", props)
+  const authSet = processAdmin("auth-set", props)
+
+  // Initialize request headers
+  authSet(storage_name, authGet(storage_name))
+
+  let getIdentity = async () => {
+    if (identityURL) {
+      let { json } = await makeRequest(identityURL)
+      return json
+    }
+  }
+
+  if (required)
+    return {
+      login: async (data) => {
+        if (!authorizeURL) throw { message: "Authorization is not supported" }
+
+        let { json } = await makeRequest(authorizeURL, { data, method: "POST" })
+        authSet(storage_name, json)
+      },
+
+      checkError: async (error) => {
+        const { status } = error
+
+        if (status == 401 || status == 403) {
+          // Clean storage
+          authSet(storage_name, "")
+
+          throw {
+            message: "Invalid authorization",
+            redirectTo: logoutURL,
+            logoutUser: !logoutURL,
+          }
+        }
+      },
+
+      checkAuth: async () => {
+        const auth = authGet(storage_name)
+        if (!auth) throw { message: "Authorization required" }
+
+        if (!identityURL) return auth
+
+        let user = await getIdentity()
+        if (!user) throw { message: "Authorization required" }
+
+        return user
+      },
+
+      logout: async () => {
+        // Clean storage
+        authSet(storage_name, "")
+
+        if (logoutURL) window.location = logoutURL
+      },
+
+      getIdentity,
+
+      getPermissions: () => {
+        const role = authGet(storage_name + "_role")
+        return role ? Promise.resolve(role) : Promise.reject()
+      },
+    }
+}

package/src/buttons/ActionButton.jsx

@@ -0,0 +1,99 @@
+import React from "react"
+
+import {
+  Button,
+  useRefresh,
+  useUnselectAll,
+  useNotify,
+  useRecordContext,
+} from "react-admin"
+import * as icons from "@mui/icons-material"
+
+import useAction from "../hooks/useAction"
+
+export const BulkActionButton = ({
+  label,
+  icon,
+  title,
+  action,
+  resource,
+  selectedIds,
+}) => {
+  const refresh = useRefresh(),
+    unselectAll = useUnselectAll(resource),
+    notify = useNotify(),
+    Icon = icons[icon]
+
+  const mutation = useAction(resource, action)
+
+  let onClick = () => {
+    mutation.mutate(
+      {
+        action,
+        ids: selectedIds,
+      },
+      {
+        onSuccess: ({ data }) => {
+          if (data && data.message) notify(data.message, { type: "success" })
+          refresh()
+          unselectAll()
+        },
+        onError: (err) => {
+          notify(typeof err === "string" ? err : err.message, { type: "error" })
+        },
+      }
+    )
+  }
+
+  return (
+    <Button
+      label={label}
+      title={title}
+      onClick={onClick}
+      disabled={mutation.isLoading}
+    >
+      {Icon && <Icon />}
+    </Button>
+  )
+}
+
+export const ActionButton = (props) => {
+  const { icon, label, title, resource, action } = props
+  const record = useRecordContext()
+  const mutation = useAction(resource, action)
+
+  const refresh = useRefresh(),
+    notify = useNotify(),
+    Icon = icons[icon]
+
+  let onClick = () => {
+    mutation.mutate(
+      { record },
+      {
+        onSuccess: ({ data }) => {
+          refresh()
+          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, {
+            type: "error",
+          })
+        },
+      }
+    )
+  }
+
+  return (
+    <Button
+      label={label}
+      title={title}
+      onClick={onClick}
+      disabled={mutation.isLoading}
+    >
+      {Icon && <Icon />}
+    </Button>
+  )
+}
+
+export default ActionButton

package/src/buttons/LinkButton.jsx

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

package/src/dashboard.jsx

@@ -0,0 +1,74 @@
+import React from "react"
+
+import {
+  Grid,
+  Card,
+  CardContent,
+  Typography,
+  Table,
+  TableBody,
+  TableRow,
+  TableCell,
+} from "@mui/material"
+
+import { setupAdmin } from "./utils"
+
+const AdminTableView = ({ src }) => (
+  <Table>
+    <TableBody>
+      {src.map((row, idx) => (
+        <TableRow key={idx} hover>
+          {row.map((cell, idx) => (
+            <TableCell key={idx}>{cell}</TableCell>
+          ))}
+        </TableRow>
+      ))}
+    </TableBody>
+  </Table>
+)
+
+const AdminCard = ({ src }) => {
+  if (Array.isArray(src)) {
+    return (
+      <Grid container item spacing={2}>
+        {src.map((card, idx) => (
+          <AdminCard key={idx} src={card} />
+        ))}
+      </Grid>
+    )
+  }
+
+  let { title, value } = src
+
+  return (
+    <Grid item xs>
+      <Card>
+        <CardContent>
+          <Typography
+            variant="h5"
+            component="h2"
+            m={2}
+            style={{ textAlign: "center" }}
+          >
+            {title}
+          </Typography>
+          {(Array.isArray(value) && <AdminTableView src={value} />) || (
+            <pre>{JSON.stringify(value, null, 2)}</pre>
+          )}
+        </CardContent>
+      </Card>
+    </Grid>
+  )
+}
+
+// Process dashboard
+setupAdmin("dashboard", (props) => {
+  if (!props) return
+
+  const Dashboard = () => (
+    <Grid container spacing={1}>
+      <AdminCard src={props} />
+    </Grid>
+  )
+  return Dashboard
+})

package/src/dataprovider.js

@@ -0,0 +1,94 @@
+import { makeRequest } from "./utils"
+
+export default (apiUrl) => {
+  const methods = {
+    getList: async (resource, { filter, pagination, sort }) => {
+      const query = {}
+      if (filter) query.where = JSON.stringify(filter)
+      if (pagination) {
+        const { page, perPage: limit } = pagination
+        query.limit = limit
+        query.offset = limit * (page - 1)
+      }
+      if (sort) {
+        const { field, order } = sort
+        query.sort = order == "ASC" ? field : `-${field}`
+      }
+
+      const { headers, json } = await makeRequest(`${apiUrl}/${resource}`, {
+        query,
+      })
+      return {
+        data: json,
+        total: parseInt(headers.get("x-total"), 10),
+      }
+    },
+
+    getOne: async (resource, { id }) => {
+      const { json } = await makeRequest(`${apiUrl}/${resource}/${id}`)
+      return { data: json }
+    },
+
+    create: async (resource, { data }) => {
+      const { json } = await makeRequest(`${apiUrl}/${resource}`, {
+        data,
+        method: "POST",
+      })
+      return { data: json }
+    },
+
+    update: async (resource, { id, data }) => {
+      const { json } = await makeRequest(`${apiUrl}/${resource}/${id}`, {
+        data,
+        method: "PUT",
+      })
+      return { data: json }
+    },
+
+    updateMany: async (resource, { ids, data }) => {
+      await Promise.all(ids.map((id) => methods.update(resource, { id, data })))
+      return { data: ids }
+    },
+
+    delete: async (resource, { id }) => {
+      await makeRequest(`${apiUrl}/${resource}/${id}`, {
+        method: "DELETE",
+      })
+      return { data: { id } }
+    },
+
+    deleteMany: async (resource, { ids }) => {
+      await makeRequest(`${apiUrl}/${resource}`, {
+        data: ids,
+        method: "DELETE",
+      })
+      return { data: ids }
+    },
+
+    getMany: (resource, { ids }) => {
+      return methods.getList(resource, { filter: { id: { $in: ids } } })
+    },
+
+    getManyReference: async (resource, { target, id, filter, ...opts }) => {
+      filter = filter || {}
+      filter[target] = id
+      return await methods.getList(resource, { filter, ...opts })
+    },
+
+    runAction: async (resource, action, props) => {
+      const { payload, ids, record } = props
+      action = action.replace(/^\/+/, "")
+      if (record) {
+        action = action.replace(/\{([^}]+)\}/, (_, field) => record[field])
+      }
+      const { json } = await makeRequest(`${apiUrl}/${action}`, {
+        query: { ids },
+        method: "POST",
+        data: payload,
+      })
+      return { data: json }
+    },
+  }
+
+  return methods
+}

package/src/fields/AvatarField.jsx

@@ -0,0 +1,33 @@
+import React from "react"
+import get from "lodash/get"
+import { useRecordContext } from "ra-core"
+import Avatar from "@mui/material/Avatar"
+
+const AvatarField = ({ source, alt, style, nameProp, ...props }) => {
+  const record = useRecordContext(props)
+
+  let value = get(record, source),
+    name = record[nameProp]
+
+  const letters = name
+    ? name
+        .trim(" ")
+        .split(/\s+/)
+        .slice(0, 2)
+        .map((n) => n[0].toUpperCase())
+        .join("")
+    : ""
+
+  return (
+    <Avatar src={value} alt={alt} style={style}>
+      {letters}
+    </Avatar>
+  )
+}
+
+AvatarField.displayName = "AvatarField"
+AvatarField.defaultProps = {
+  addLabel: true,
+}
+
+export default AvatarField

package/src/fields/FKField.jsx

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

package/src/fields/JsonField.jsx

@@ -0,0 +1,26 @@
+import get from "lodash/get"
+
+import React, { useState } from "react"
+import { Button, FunctionField, useRecordContext } from "react-admin"
+
+export default function JsonField({ label, source }) {
+  const [expand, setExpand] = useState(false)
+  const record = useRecordContext()
+  const src = JSON.stringify(get(record, source), null, 2)
+  const retval = (
+    <div>
+      <p></p>
+      {label}
+      <Button
+        variant="contained"
+        color="primary"
+        size="small"
+        label={expand ? "colapse" : "expand"}
+        onClick={() => setExpand(!expand)}
+      />
+      <p>{expand && <pre>{src}</pre>}</p>
+    </div>
+  )
+
+  return <FunctionField render={() => retval} />
+}

package/src/hooks/useAction.js

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

package/src/index.js

@@ -0,0 +1,14 @@
+import { createRoot } from "react-dom/client"
+
+import "./admin"
+import { processAdmin } from "./utils"
+
+export * from "./utils"
+
+export async function initAdmin(prefix = "") {
+  const response = await fetch(`${prefix}/ra.json`)
+  const props = await response.json()
+  const container = document.getElementById("root")
+  const root = createRoot(container)
+  root.render(processAdmin("admin", props))
+}

package/src/inputs/FKInput.jsx

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

package/src/inputs/JsonInput.jsx

@@ -0,0 +1,62 @@
+import React from "react"
+import { TextInput } from "react-admin"
+import isJSON from "validator/lib/isJSON"
+
+const DEFAULT_ERRORTEXT = "Invalid JSON"
+
+const parseFunction = (json) => {
+  let retval = json
+  try {
+    retval = JSON.parse(json)
+  } finally {
+    return retval
+  }
+}
+
+/**
+ *
+ * `JsonInput` validates if the entered value is JSON or not. If entered value is not a invalid JSON, `JsonInput` will throw an error.
+ * Default error message is: `Invalid JSON` and can be overridden using `errortext` prop.
+ *
+ * @example
+ * <JsonInput source='config' label='JSON Config' errortext='Enter a valid JSON'/>
+ *
+ * or use translate function:
+ *
+ * @example
+ * <JsonInput source='config' label={translate('resources.resource_name.fields.config')} errortext={translate('myroot.validate.json')}/>
+ *
+ * By default, `JsonInput` parses and returns the entered string as object. Instead, to send string directly, please pass `parse` prop as `false`
+ *
+ * @example
+ * <JsonInput source='config' label='JSON Config' parse={false}/>
+ */
+export default function JsonInput(props) {
+  const {
+    validate = [],
+    errortext = DEFAULT_ERRORTEXT,
+    multiline = true,
+    parse = true,
+    ...rest
+  } = props
+  // const errorobj = { message: errortext }
+
+  const validateJSON = (value) => {
+    if (!value || typeof value === "object") return undefined
+    return isJSON(value) ? undefined : errortext
+  }
+  validate.push(validateJSON)
+  rest.validate = validate
+
+  const formatJSON = (json) => {
+    let retval = json
+    if (retval && typeof retval === "object")
+      retval = JSON.stringify(retval, null, 2)
+    return retval
+  }
+  rest.format = formatJSON
+  //
+  if (parse) rest.parse = parseFunction
+  if (multiline) rest.multiline = true
+  return <TextInput {...rest} />
+}

package/src/resources.jsx

@@ -0,0 +1,36 @@
+import React from "react"
+
+import { Resource } from "react-admin"
+import * as icons from "@mui/icons-material"
+
+import { checkParams, processAdmin, setupAdmin } from "./utils"
+import "./views/list"
+import "./views/show"
+import "./views/edit"
+import "./views/create"
+
+// Initialize Resources Components
+setupAdmin("resources", (resources) =>
+  resources.map((res) => processAdmin("resource", res, res.name))
+)
+
+// Initialize a resource's component
+setupAdmin(
+  "resource",
+  checkParams((props, res) => {
+    let { create, edit, icon, list, name, show, ...resProps } = props
+
+    return (
+      <Resource
+        key={name}
+        name={name}
+        icon={icons[icon]}
+        create={processAdmin("create", create, res)}
+        edit={processAdmin("edit", edit, res)}
+        list={processAdmin("list", list, res)}
+        show={processAdmin("show", show, res)}
+        {...resProps}
+      />
+    )
+  })
+)

package/src/ui.jsx

@@ -0,0 +1,107 @@
+import React from "react"
+
+import { required } from "react-admin"
+import {
+  BooleanField,
+  ChipField,
+  DateField,
+  EmailField,
+  ImageField,
+  FileField,
+  NumberField,
+  RichTextField,
+  TextField,
+  UrlField,
+  SelectField,
+  ArrayField,
+  ReferenceField,
+  ReferenceManyField,
+  ReferenceArrayField,
+} from "react-admin"
+import {
+  BooleanInput,
+  NullableBooleanInput,
+  DateInput,
+  DateTimeInput,
+  ImageInput,
+  FileInput,
+  NumberInput,
+  PasswordInput,
+  TextInput,
+  AutocompleteInput,
+  RadioButtonGroupInput,
+  SelectInput,
+  ArrayInput,
+  AutocompleteArrayInput,
+  CheckboxGroupInput,
+  ReferenceArrayInput,
+  ReferenceInput,
+} 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"
+
+const ui = {
+  // Fields
+  BooleanField,
+  ChipField,
+  DateField,
+  EmailField,
+  ImageField,
+  FileField,
+  NumberField,
+  RichTextField,
+  TextField,
+  UrlField,
+  SelectField,
+  ArrayField,
+  ReferenceField,
+  ReferenceManyField,
+  ReferenceArrayField,
+  AvatarField,
+  JsonField,
+  FKField,
+
+  // Inputs
+  BooleanInput,
+  NullableBooleanInput,
+  DateInput,
+  DateTimeInput,
+  ImageInput,
+  FileInput,
+  NumberInput,
+  PasswordInput,
+  TextInput,
+  AutocompleteInput,
+  RadioButtonGroupInput,
+  SelectInput,
+  ArrayInput,
+  AutocompleteArrayInput,
+  CheckboxGroupInput,
+  ReferenceArrayInput,
+  ReferenceInput,
+  JsonInput,
+  FKInput,
+}
+
+const initRAItems = (itemsProps) =>
+  itemsProps.map((item) => {
+    const Item = ui[item[0]],
+      props = { ...item[1] }
+
+    if (props.required) {
+      props.validate = required()
+      delete props.required
+    }
+
+    props.fullWidth = props.fullWidth ?? true
+
+    if (props.children) props.children = initRAItems(props.children)[0]
+
+    return <Item key={props.source} {...props} />
+  })
+
+export default initRAItems

package/src/utils.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-console */
+
+import { isValidElement } from "react"
+import { fetchUtils } from "ra-core"
+import { stringify } from "query-string"
+
+const parts = {}
+
+export const setupAdmin = (part, gen) => (parts[part] = gen)
+
+export const checkParams = (fn) => (props, res) => {
+  if (!props || isValidElement(props)) return props
+  return fn(props, res)
+}
+
+export const processAdmin = (type, props, res) => {
+  if (process.env.NODE_ENV == "development")
+    console.log(`${type}${res ? "-" + res : ""}`, props)
+
+  if (parts[`${type}-${res}`]) return parts[`${type}-${res}`](props, res)
+  if (parts[type]) return parts[type](props, res)
+}
+
+export const requestHeaders = {}
+
+export const makeRequest = (url, params) => {
+  let { data, query, ...opts } = params || {}
+
+  if (data) opts.body = JSON.stringify(data)
+  if (query) url = `${url}?${stringify(query)}`
+
+  opts = {
+    ...opts,
+    headers: new Headers({ ...requestHeaders, ...opts.headers }),
+  }
+
+  return fetchUtils.fetchJson(url, opts)
+}

package/src/views/create.jsx

@@ -0,0 +1,30 @@
+import React from "react"
+
+import { Create, SimpleForm, TopToolbar, ListButton } from "react-admin"
+
+import initRAItems from "../ui"
+import { checkParams, processAdmin, setupAdmin } from "../utils"
+
+// Initialize a create component
+setupAdmin(
+  "create",
+  checkParams(
+    (inputs, res) =>
+      function MACreate(props) {
+        const Actions = (
+          <TopToolbar>
+            <ListButton />
+          </TopToolbar>
+        )
+
+        return (
+          <Create actions={Actions} {...props}>
+            <SimpleForm>
+              {processAdmin("create-inputs", inputs, res)}
+            </SimpleForm>
+          </Create>
+        )
+      }
+  )
+)
+setupAdmin("create-inputs", initRAItems)

package/src/views/edit.jsx

@@ -0,0 +1,41 @@
+import React from "react"
+
+import {
+  Edit,
+  ListButton,
+  ShowButton,
+  SimpleForm,
+  TopToolbar,
+} from "react-admin"
+
+import initRAItems from "../ui"
+import { checkParams, processAdmin, setupAdmin } from "../utils"
+import { ActionButton } from "../buttons/ActionButton"
+
+// Initialize an edit component
+setupAdmin(
+  "edit",
+  checkParams(
+    ({ actions, inputs }, res) =>
+      function MAEdit(props) {
+        const Actions = ({ basePath, resource, ...baseProps }) => (
+          <TopToolbar>
+            {actions.map((props, idx) => {
+              let aProps = { resource, basePath, ...baseProps, ...props }
+              return <ActionButton key={idx} {...aProps} />
+            })}
+            <ListButton />
+            <ShowButton />
+          </TopToolbar>
+        )
+
+        return (
+          <Edit actions={<Actions />} {...props}>
+            <SimpleForm>{processAdmin("edit-inputs", inputs, res)}</SimpleForm>
+          </Edit>
+        )
+      }
+  )
+)
+
+setupAdmin("edit-inputs", initRAItems)

package/src/views/list.jsx

@@ -0,0 +1,86 @@
+import React from "react"
+
+import {
+  BulkDeleteButton,
+  Datagrid,
+  EditButton,
+  Filter,
+  List,
+  Pagination,
+} from "react-admin"
+import uniq from "lodash/uniq"
+import sortBy from "lodash/sortBy"
+
+import initRAItems from "../ui"
+import { checkParams, processAdmin, setupAdmin } from "../utils"
+import { BulkActionButton } from "../buttons/ActionButton"
+
+const defaultPagination = <Pagination rowsPerPageOptions={[10, 25, 50, 100]} />
+
+// Initiliaze a list component
+setupAdmin(
+  "list",
+  checkParams((props, res) => {
+    let {
+      children,
+      filters,
+      edit,
+      pagination,
+      show,
+      limit,
+      limitMax,
+      actions,
+      ...listProps
+    } = props
+
+    children = processAdmin("list-fields", children, res)
+    if (edit) children.push(<EditButton key="edit-button" />)
+
+    pagination = pagination || (
+      <Pagination
+        rowsPerPageOptions={sortBy(uniq([10, 25, 50, 100, limit, limitMax]))}
+      />
+    )
+
+    return function MAList(props) {
+      let Filters = (props) => (
+        <Filter {...props}>{processAdmin("list-filters", filters, res)}</Filter>
+      )
+      let Actions = processAdmin("list-bulkActions", actions)
+
+      props = { ...props, ...listProps }
+      return (
+        <List
+          filters={<Filters />}
+          bulkActionButtons={<Actions />}
+          perPage={limit}
+          pagination={pagination || defaultPagination}
+          {...props}
+        >
+          <Datagrid rowClick={show ? "show" : null}>{children}</Datagrid>
+        </List>
+      )
+    }
+  })
+)
+
+setupAdmin(
+  "list-bulkActions",
+  (actions) =>
+    function MABulkActions(props) {
+      let buttons = actions.map((action, idx) => {
+        let aProps = { ...action, ...props }
+        return <BulkActionButton key={idx} {...aProps} />
+      })
+
+      return (
+        <>
+          {buttons}
+          <BulkDeleteButton {...props} />
+        </>
+      )
+    }
+)
+
+setupAdmin("list-filters", initRAItems)
+setupAdmin("list-fields", initRAItems)

package/src/views/show.jsx

@@ -0,0 +1,42 @@
+import React from "react"
+
+import {
+  ListButton,
+  EditButton,
+  Show,
+  SimpleShowLayout,
+  TopToolbar,
+} from "react-admin"
+
+import initRAItems from "../ui"
+import { checkParams, processAdmin, setupAdmin } from "../utils"
+import { ActionButton } from "../buttons/ActionButton"
+
+// Initiliaze a show component
+setupAdmin(
+  "show",
+  checkParams(
+    ({ actions, fields }, resource) =>
+      function MAShow(props) {
+        const Actions = () => (
+          <TopToolbar>
+            {actions.map((props, idx) => {
+              return <ActionButton key={idx} resource={resource} {...props} />
+            })}
+            <ListButton />
+            <EditButton />
+          </TopToolbar>
+        )
+
+        return (
+          <Show actions={<Actions />} {...props}>
+            <SimpleShowLayout>
+              {processAdmin("show-fields", fields, resource)}
+            </SimpleShowLayout>
+          </Show>
+        )
+      }
+  )
+)
+
+setupAdmin("show-fields", initRAItems)

package/src/web.js

@@ -0,0 +1,3 @@
+import { initAdmin } from "."
+
+global.initAdmin = initAdmin

package/.eslintrc.json

@@ -1,44 +0,0 @@
-{
-  "root": true,
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "prettier"
-  ],
-  "parser": "@babel/eslint-parser",
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true,
-      "experimentalObjectRestSpread": true
-    },
-    "ecmaVersion": 2020,
-    "sourceType": "module",
-    "babelOptions": {
-      "presets": [
-        "@babel/preset-react"
-      ],
-      "rootMode": "upward"
-    }
-  },
-  "plugins": [
-    "prettier",
-    "react"
-  ],
-  "env": {
-    "browser": true,
-    "es6": true,
-    "jest": true,
-    "node": true
-  },
-  "rules": {
-    "no-console": "warn",
-    "no-debugger": "warn",
-    "prettier/prettier": "warn",
-    "react/prop-types": "off"
-  }
-}

package/Makefile

@@ -1,18 +0,0 @@
-all: node_modules
-	$(CURDIR)/node_modules/.bin/webpack
-
-node_modules: package.json
-	npm install
-	touch node_modules
-
-npm: node_modules
-	$(CURDIR)/node_modules/.bin/babel src --out-dir dist
-
-pypi:
-	$(CURDIR)/node_modules/.bin/webpack
-
-watch: node_modules
-	$(CURDIR)/node_modules/.bin/webpack --watch
-
-dev: node_modules
-	NODE_ENV=development $(CURDIR)/node_modules/.bin/webpack serve

package/jsconfig.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "noImplicitAny": false,
-    "target": "ESNext",
-    "moduleResolution": "node",
-    "checkJs": true,
-    "jsx": "react-jsx"
-  }
-}

package/webpack.config.js

@@ -1,45 +0,0 @@
-const path = require("path"),
-  webpack = require("webpack"),
-  mode = process.env.NODE_ENV
-
-module.exports = {
-  entry: "./src/web",
-
-  output: {
-    filename: "main.js",
-    path: path.resolve(__dirname, "../muffin_admin"),
-    publicPath: "/admin",
-  },
-
-  module: {
-    rules: [
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        use: {
-          loader: "babel-loader",
-        },
-      },
-    ],
-  },
-
-  plugins: [new webpack.EnvironmentPlugin({ NODE_ENV: "production" })],
-
-  mode: mode || "production",
-  devtool: mode == "development" && "inline-source-map",
-
-  resolve: {
-    extensions: [".jsx", ".js"],
-  },
-
-  devServer: {
-    hot: true,
-    open: true,
-    proxy: [
-      {
-        context: ["!*.js"],
-        target: "http://localhost:5555",
-      },
-    ],
-  },
-}