muffin-admin 1.29.0 → 1.30.0

package/dataprovider.js

@@ -1,81 +1,94 @@
-import { makeRequest } from './utils';
-
+import { makeRequest } from './utils'
 
 export default (apiUrl) => {
-
   const methods = {
-
-    getList: async (resource, {filter, pagination, sort}) => {
-      const query = {};
-      if (filter) query.where = JSON.stringify(filter);
+    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);
+        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 { field, order } = sort
+        query.sort = order == 'ASC' ? field : `-${field}`
+      }
 
-      const {headers, json} = await makeRequest(`${apiUrl}/${resource}`, {query});
+      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};
+    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};
+    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};
+    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};
+    updateMany: async (resource, { ids, data }) => {
+      await Promise.all(ids.map((id) => methods.update(resource, { id, data })))
+      return { data: ids }
     },
 
-    delete: async (resource, {id}) => {
-      const {json} = await makeRequest(`${apiUrl}/${resource}/${id}`, {method: 'DELETE'});
-      return {data: {id}};
+    delete: async (resource, { id }) => {
+      await makeRequest(`${apiUrl}/${resource}/${id}`, {
+        method: 'DELETE',
+      })
+      return { data: { id } }
     },
 
-    deleteMany: async (resource, {ids}) => {
-      const {json} = await makeRequest(`${apiUrl}/${resource}`, {data: ids, method: 'DELETE'});
-      return {data: ids};
+    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}}});
+    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});
+    getManyReference: async (resource, { target, id, filter, ...opts }) => {
+      filter = filter || {}
+      filter[target] = id
+      return await methods.getList(resource, { filter, ...opts })
     },
 
-    runAction: async (resource, props) => {
-      let {action, payload, ids, record} = props;
+    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};
+      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;
-
+  return methods
 }

package/fields/AvatarField.jsx

@@ -1,25 +1,34 @@
-import React from 'react';
-
-import get from 'lodash/get';
-import { useRecordContext } from 'ra-core';
-import Avatar from '@material-ui/core/Avatar';
-
-
-const AvatarField = ({ source, record, alt, style, nameProp, ...props }) => {
-
-  let sourceValue = get(record, source),
-      letters = null,
-      name = record[nameProp];
-
-  if (name) letters = name.trim(' ').split(/\s+/).slice(0, 2).map( n => n[0].toUpperCase() ).join('');
-
-  return <Avatar src={ record[source] } alt={ alt } style={ style }>{ letters }</Avatar>
-
+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.displayName = 'AvatarField'
 AvatarField.defaultProps = {
   addLabel: true,
 }
 
-export default AvatarField;
+export default AvatarField

package/fields/FKField.jsx

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

package/fields/JsonField.jsx

@@ -0,0 +1,25 @@
+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/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/index.js

@@ -1,11 +1,14 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client'
 
 import { setupAdmin, processAdmin } from './utils.js'
 
-import './admin.jsx';
+import './admin.jsx'
 
-
-let initAdmin = globalThis.initAdmin = (props) => ReactDOM.render(processAdmin('admin', props), document.getElementById('root'))
+const initAdmin = (globalThis.initAdmin = (props) => {
+  const container = document.getElementById('root')
+  const root = createRoot(container)
+  root.render(processAdmin('admin', props))
+})
 
 export { setupAdmin, processAdmin }
 

package/inputs/FKInput.jsx

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

package/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/jsconfig.json

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

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "muffin-admin",
-  "version": "1.29.0",
+  "version": "1.30.0",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "main": "index.js",
+  "module": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -17,20 +18,22 @@
   },
   "homepage": "https://github.com/klen/muffin-admin#readme",
   "dependencies": {
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.6.3",
     "js-cookie": "^3.0.1",
-    "react": "17.0.2",
-    "react-admin": "3.19.11",
-    "react-admin-json-view": "^1.2.1",
-    "react-dom": "17.0.2"
+    "react": "^18.1.0",
+    "react-admin": "^4.0.1",
+    "react-dom": "^18.1.0",
+    "validator": "^13.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",
+    "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "babel-loader": "^8.2.4",
+    "eslint-plugin-react": "^7.29.4",
     "webpack": "^5.24.4",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.3.1"

package/resources.jsx

@@ -1,27 +1,37 @@
-import React from "react";
+import React from 'react'
 
-import { Resource } from "react-admin";
-import * as icons from "@material-ui/icons"
+import { Resource } from 'react-admin'
+import * as icons from '@mui/icons-material'
 
-import { checkParams, processAdmin, initRAItems, setupAdmin } from './utils'
+import { checkParams, processAdmin, setupAdmin } from './utils'
 
 import './views/list.jsx'
 import './views/show.jsx'
 import './views/edit.jsx'
 import './views/create.jsx'
 
-
 // Initialize Resources Components
-setupAdmin('resources', resources => resources.map(res => processAdmin('resource', res, res.name)));
+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;
+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 } />;
-}));
+    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/ui.jsx

@@ -1,51 +1,107 @@
-import React from "react";
+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 { JsonField, JsonInput } from "react-admin-json-view";
+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.jsx"
-import FKField from "./fields/FKField.jsx"
-import FKInput from "./inputs/FKInput.jsx"
-
-
-// Fix JsonField
-JsonField.displayName = 'JsonField';
-JsonField.defaultProps = {
-    addLabel: true,
-};
+import AvatarField from './fields/AvatarField.jsx'
+import FKField from './fields/FKField.jsx'
+import FKInput from './inputs/FKInput.jsx'
+import JsonField from './fields/JsonField.jsx'
+import JsonInput from './inputs/JsonInput.jsx'
 
 const ui = {
-
   // Fields
-  BooleanField, ChipField, DateField, EmailField, ImageField, FileField,
-  NumberField, RichTextField, TextField, UrlField, SelectField, ArrayField,
-  ReferenceField, ReferenceManyField, ReferenceArrayField, AvatarField,
-  JsonField, FKField,
+  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,
-
+  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 initRAItems = (itemsProps) =>
+  itemsProps.map((item) => {
     const Item = ui[item[0]],
-          props = {...item[1]};
+      props = { ...item[1] }
 
     if (props.required) {
-        props.validate = required();
-        delete 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 } />
-})
+    if (props.children) props.children = initRAItems(props.children)[0]
+
+    return <Item key={props.source} {...props} />
+  })
 
 export default initRAItems