muffin-admin 1.44.4 → 1.45.1

package/dist/types.d.ts

@@ -0,0 +1,76 @@
+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/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { AdminOpts } from "./types";
+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?: {
+        where?: string;
+        limit?: number;
+        offset?: number;
+        sort?: string;
+        ids?: string[];
+    };
+    data?: any;
+    headers?: any;
+    body?: string;
+};
+export declare const requestHeaders: {};
+export declare function makeRequest(url: string, params?: APIParams): Promise<{
+    status: number;
+    headers: Headers;
+    body: string;
+    json: any;
+}>;
+export declare function findIcon(icon?: string): any;
+export declare function buildIcon(icon?: string): import("react/jsx-runtime").JSX.Element;

package/dist/utils.js

@@ -0,0 +1,57 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 (builder)
+        return builder(props);
+    console.warn(`No admin renderer found for ${adminType.join("/")}`);
+    return null;
+}
+export function findBuilder(adminType) {
+    const key = [...adminType];
+    while (key.length) {
+        const render = builders.get(key.join("/"));
+        if (render)
+            return render;
+        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"]);
+    if (data)
+        opts.body = JSON.stringify(data);
+    if (query)
+        url = `${url}?${stringify(query)}`;
+    return fetchUtils.fetchJson(url, Object.assign(Object.assign({}, opts), { headers: new Headers(Object.assign(Object.assign({}, requestHeaders), opts.headers)) }));
+}
+export function findIcon(icon) {
+    return icon ? icons[icon] : undefined;
+}
+export function buildIcon(icon) {
+    const Icon = findIcon(icon);
+    if (Icon)
+        return _jsx(Icon, {});
+}

package/dist/web.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/web.js

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

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "muffin-admin",
-  "version": "1.44.4",
+  "version": "1.45.1",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",
     "dist"
   ],
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.js",
   "scripts": {
+    "build": "tsc",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -22,26 +23,42 @@
   },
   "homepage": "https://github.com/klen/muffin-admin#readme",
   "dependencies": {
-    "@mui/icons-material": "^5.14.1",
-    "@mui/material": "^5.14.2",
     "js-cookie": "^3.0.5",
-    "ra-ui-materialui": "^4.12.2",
     "react": "^18.2.0",
     "react-admin": "^4.12.2",
     "react-dom": "^18.2.0",
     "validator": "^13.9.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.9",
-    "@babel/core": "^7.22.9",
-    "@babel/eslint-parser": "^7.22.9",
-    "@babel/plugin-transform-runtime": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
-    "babel-loader": "^9.1.3",
-    "eslint-plugin-react": "^7.33.0",
+    "@types/node": "20.3.2",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
+    "@types/react-window": "^1.8.5",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "dotenv": "^16.3.1",
+    "eslint": "8.46.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "html-webpack-plugin": "^5.5.3",
+    "husky": "^8.0.1",
+    "prettier": "^3.0.1",
+    "prettier-plugin-organize-imports": "^3.2.3",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.1.6",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
+  },
+  "prettier": {
+    "arrowParens": "always",
+    "plugins": [
+      "prettier-plugin-organize-imports"
+    ],
+    "printWidth": 100,
+    "semi": false,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
   }
 }

package/src/MuffinAdmin.tsx

@@ -0,0 +1,73 @@
+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 createTheme from "@mui/material/styles/createTheme"
+import {
+  Admin,
+  AppBar,
+  DataProvider,
+  Layout,
+  Login,
+  ToggleThemeButton,
+  defaultTheme,
+} from "react-admin"
+import { AdminOpts } from "./types"
+import { AdminPropsContext, buildAdmin, findBuilder, findIcon, setupAdmin } from "./utils"
+
+const darkTheme = createTheme({
+  palette: { mode: "dark" },
+})
+
+export function MuffinAdmin(props: AdminOpts) {
+  const { resources, auth } = props
+  const children = resources.map((resource) =>
+    buildAdmin(["resource", resource.name], {
+      ...resource,
+      key: resource.name,
+    })
+  )
+  const 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} />
+      {props.appBarLinks.map((info) => (
+        <Tooltip key={info.url} title={info.title}>
+          <IconButton color="inherit" href={info.url}>
+            <SvgIcon component={findIcon(info.icon)} />
+          </IconButton>
+        </Tooltip>
+      ))}
+    </AppBar>
+  )
+
+  return (
+    <AdminPropsContext.Provider value={props}>
+      <Admin
+        requireAuth={auth.required}
+        dashboard={buildAdmin(["dashboard"])}
+        loginPage={findBuilder(["loginpage"])}
+        authProvider={buildAdmin(["authprovider"], auth)}
+        layout={(props) => <Layout {...props} appBar={appBar} />}
+        dataProvider={buildAdmin(["dataprovider"], props) as unknown as DataProvider}
+      >
+        {children}
+      </Admin>
+    </AdminPropsContext.Provider>
+  )
+}
+
+setupAdmin(["admin"], MuffinAdmin)
+
+// Initialize login page
+setupAdmin(["loginpage"], Login)

package/src/MuffinDashboard.tsx

@@ -0,0 +1,52 @@
+import Card from "@mui/material/Card"
+import CardContent from "@mui/material/CardContent"
+import Grid from "@mui/material/Grid"
+import Table from "@mui/material/Table"
+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"
+
+export function MuffinDashboard(props: AdminOpts["dashboard"]) {
+  return (
+    <Grid container spacing={1}>
+      {Array.isArray(props) ? (
+        props.map((card, idx) => <DashboardCard key={idx} {...card} />)
+      ) : (
+        <DashboardCard {...props} />
+      )}
+    </Grid>
+  )
+}
+
+function DashboardCard(title, value: AdminDashboardBlock) {
+  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>
+  )
+}
+
+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>
+)

package/src/MuffinResource.tsx

@@ -0,0 +1,27 @@
+import { Resource } from "react-admin"
+import { AdminResourceProps } from "./types"
+import { buildAdmin, findIcon, setupAdmin } from "./utils"
+
+export function MuffinResource({
+  name,
+  create: createProps,
+  edit: editProps,
+  list: listProps,
+  show: showProps,
+  icon,
+  ...props
+}: AdminResourceProps) {
+  return (
+    <Resource
+      name={name}
+      icon={findIcon(icon)}
+      create={buildAdmin(["create", name], createProps)}
+      edit={buildAdmin(["edit", name], editProps)}
+      list={buildAdmin(["list", name], listProps)}
+      show={buildAdmin(["show", name], showProps)}
+      {...props}
+    />
+  )
+}
+
+setupAdmin(["resource"], MuffinResource)

package/src/MuffinResourceCreate.tsx

@@ -0,0 +1,24 @@
+import { Create, ListButton, SimpleForm, TopToolbar, useResourceContext } from "react-admin"
+import { buildRA } from "./buildRA"
+import { AdminResourceProps } from "./types"
+import { buildAdmin, setupAdmin } from "./utils"
+
+export function MuffinResourceCreate({ inputs }: { inputs: AdminResourceProps["create"] }) {
+  const resourceName = useResourceContext()
+
+  return (
+    <Create actions={buildAdmin(["create-actions", resourceName])}>
+      <SimpleForm>{buildAdmin(["create-inputs", resourceName], inputs)}</SimpleForm>
+    </Create>
+  )
+}
+
+setupAdmin(["create"], (inputs) => <MuffinResourceCreate inputs={inputs} />)
+
+setupAdmin(["create-actions"], () => (
+  <TopToolbar>
+    <ListButton />
+  </TopToolbar>
+))
+
+setupAdmin(["create-inputs"], buildRA)

package/src/MuffinResourceEdit.tsx

@@ -0,0 +1,42 @@
+import { useContext } from "react"
+import {
+  Edit,
+  ListButton,
+  ShowButton,
+  SimpleForm,
+  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"
+
+export function MuffinResourceEdit({ actions, inputs, ...props }: AdminResourceProps["edit"]) {
+  const resourceName = useResourceContext()
+  const {
+    adminProps: { mutationMode },
+  } = useContext(AdminPropsContext) as AdminOpts
+
+  return (
+    <Edit
+      actions={buildAdmin(["edit-actions", resourceName], actions)}
+      mutationMode={mutationMode || "optimistic"}
+      {...props}
+    >
+      <SimpleForm>{buildAdmin(["edit-inputs", resourceName], 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-inputs"], buildRA)

package/src/MuffinResourceList.tsx

@@ -0,0 +1,46 @@
+import sortBy from "lodash/sortBy"
+import uniq from "lodash/uniq"
+import {
+  BulkDeleteButton,
+  Datagrid,
+  EditButton,
+  List,
+  Pagination,
+  useResourceContext,
+} from "react-admin"
+import { buildRA } from "./buildRA"
+import { BulkActionButton } from "./buttons"
+import { AdminAction, AdminResourceProps } from "./types"
+import { buildAdmin, setupAdmin } from "./utils"
+
+export function MuffinResourceList(props: AdminResourceProps["list"]) {
+  const resourceName = useResourceContext()
+  const { fields, edit, show, limit, limitMax, filters, actions } = props
+  return (
+    <List
+      bulkActionButtons={buildAdmin(["list-actions", resourceName], actions)}
+      filters={buildAdmin(["list-filters", resourceName], filters) || undefined}
+      perPage={limit}
+      pagination={
+        <Pagination rowsPerPageOptions={sortBy(uniq([10, 25, 50, 100, limit, limitMax]))} />
+      }
+    >
+      <Datagrid rowClick={show ? "show" : edit ? "edit" : false}>
+        {buildAdmin(["list-fields", resourceName], fields)}
+        {edit && <EditButton />}
+      </Datagrid>
+    </List>
+  )
+}
+
+setupAdmin(["list"], (props) => <MuffinResourceList {...props} />)
+setupAdmin(["list-fields"], buildRA)
+setupAdmin(["list-filters"], buildRA)
+setupAdmin(["list-actions"], (actions: AdminAction[]) => (
+  <>
+    {actions.map((props, idx) => (
+      <BulkActionButton key={idx} {...props} />
+    ))}
+    <BulkDeleteButton />
+  </>
+))

package/src/MuffinResourceShow.tsx

@@ -0,0 +1,39 @@
+import {
+  EditButton,
+  ListButton,
+  Show,
+  SimpleShowLayout,
+  TopToolbar,
+  useResourceContext,
+} from "react-admin"
+import { LinkAction } from "./actions"
+import { buildRA } from "./buildRA"
+import { ActionButton } from "./buttons"
+import { AdminShowProps } from "./types"
+import { buildAdmin, setupAdmin } from "./utils"
+
+export function MuffinResourceShow(props: AdminShowProps) {
+  const resourceName = useResourceContext()
+  return (
+    <Show actions={buildAdmin(["show-actions", resourceName], props)}>
+      <SimpleShowLayout>{buildAdmin(["show-fields", resourceName], props)}</SimpleShowLayout>
+    </Show>
+  )
+}
+
+setupAdmin(["show"], (props) => <MuffinResourceShow {...props} />)
+setupAdmin(["show-fields"], ({ fields }) => buildRA(fields))
+setupAdmin(["show-actions"], ({ actions, links }) => (
+  <TopToolbar>
+    <div style={{ marginRight: "auto" }}>
+      {Object.keys(links).map((key) => (
+        <LinkAction key={key} resource={key} {...links[key]} />
+      ))}
+    </div>
+    {actions.map((props, idx) => (
+      <ActionButton key={idx} {...props} />
+    ))}
+    <ListButton />
+    <EditButton />
+  </TopToolbar>
+))

package/src/actions/LinkAction.tsx

@@ -0,0 +1,10 @@
+import { useRecordContext, useResourceContext } from "react-admin"
+import LinkButton from "../buttons/LinkButton"
+import { AdminShowLink } from "../types"
+
+export function LinkAction(props: AdminShowLink & { resource: string }) {
+  const record = useRecordContext()
+  const currentResource = useResourceContext()
+  if (!record) return null
+  return <LinkButton {...props} filters={{ [currentResource]: record.id }} />
+}

package/src/actions/index.ts

@@ -0,0 +1 @@
+export * from "./LinkAction"

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

@@ -1,33 +1,33 @@
 import Cookies from "js-cookie"
-
-import { makeRequest, processAdmin, requestHeaders, setupAdmin } from "./utils"
+import { buildAdmin, makeRequest, requestHeaders, setupAdmin } from "."
+import { AdminOpts } from "./types"
 
 setupAdmin(
-  "auth-get",
-  ({ storage }) =>
-    (name) =>
-      storage == "localstorage" ? localStorage.getItem(name) : Cookies.get(name)
+  ["auth-storage-get"],
+  ({ storage, storageName }: AdminOpts["auth"]) =>
+    () =>
+      storage == "localstorage" ? localStorage.getItem(storageName) : Cookies.get(storageName)
 )
 
-setupAdmin("auth-set", ({ storage }) => (name, value) => {
+setupAdmin(["auth-storage-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
+export function MuffinAuthProvider(props: AdminOpts["auth"]) {
+  const { identityURL, authorizeURL, logoutURL, required, storageName } = props
 
-  const authGet = processAdmin("auth-get", props)
-  const authSet = processAdmin("auth-set", props)
+  const authGet = buildAdmin(["auth-storage-get"], props)
+  const authSet = buildAdmin(["auth-storage-set"], props)
 
   // Initialize request headers
-  authSet(storage_name, authGet(storage_name))
+  authSet(storageName, authGet(storageName))
 
-  let getIdentity = async () => {
+  const getIdentity = async () => {
     if (identityURL) {
-      let { json } = await makeRequest(identityURL)
+      const { json } = await makeRequest(identityURL)
       return json
     }
   }
@@ -37,8 +37,11 @@ export default (props) => {
       login: async (data) => {
         if (!authorizeURL) throw { message: "Authorization is not supported" }
 
-        let { json } = await makeRequest(authorizeURL, { data, method: "POST" })
-        authSet(storage_name, json)
+        const { json } = await makeRequest(authorizeURL, {
+          data,
+          method: "POST",
+        })
+        authSet(storageName, json)
       },
 
       checkError: async (error) => {
@@ -46,7 +49,7 @@ export default (props) => {
 
         if (status == 401 || status == 403) {
           // Clean storage
-          authSet(storage_name, "")
+          authSet(storageName, "")
 
           throw {
             message: "Invalid authorization",
@@ -57,12 +60,12 @@ export default (props) => {
       },
 
       checkAuth: async () => {
-        const auth = authGet(storage_name)
+        const auth = authGet(storageName)
         if (!auth) throw { message: "Authorization required" }
 
         if (!identityURL) return auth
 
-        let user = await getIdentity()
+        const user = await getIdentity()
         if (!user) throw { message: "Authorization required" }
 
         return user
@@ -70,16 +73,18 @@ export default (props) => {
 
       logout: async () => {
         // Clean storage
-        authSet(storage_name, "")
+        authSet(storageName, "")
 
-        if (logoutURL) window.location = logoutURL
+        if (logoutURL) window.location.href = logoutURL
       },
 
       getIdentity,
 
       getPermissions: async () => {
-        const role = authGet(storage_name + "_role")
+        const role = authGet(storageName + "_role")
         return role || ""
       },
     }
 }
+
+setupAdmin(["authprovider"], MuffinAuthProvider)