muffin-admin 3.8.5 → 3.10.0

package/dist/types.d.ts

@@ -3,6 +3,7 @@ export type TProps = {
 };
 export type AdminAction = {
     view?: ("show" | "edit" | "list" | "bulk")[];
+    help?: string;
     id: string;
     label: string;
     title: string;
@@ -36,11 +37,13 @@ export type AdminPayloadProps = {
     onHandle: (payload?: any) => void;
     title?: string;
     schema?: AdminInput[];
+    help?: string;
 };
 export type AdminResourceProps = {
     name: string;
     icon?: string;
     label: string;
+    help?: string;
     actions: AdminAction[];
     create: AdminInput[] | false;
     edit: {
@@ -90,5 +93,6 @@ export type AdminOpts = {
     };
     dashboard: AdminDashboardBlock[] | AdminDashboardBlock;
     resources: AdminResourceProps[];
+    help?: string;
     version: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "3.8.5",
+  "version": "3.10.0",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",
@@ -24,6 +24,7 @@
   "homepage": "https://github.com/klen/muffin-admin#readme",
   "dependencies": {
     "js-cookie": "^3.0.5",
+    "ra-language-russian": "^4.14.2",
     "react": "^18.3.1",
     "react-admin": "^5.0.3",
     "react-dom": "^18.3.1",

package/src/MuffinAdmin.tsx

@@ -8,7 +8,6 @@ import {
   AdminUI,
   AppBar,
   AppBarProps,
-  defaultI18nProvider,
   Layout,
   LayoutProps,
   localStorageStore,
@@ -17,6 +16,7 @@ import {
 
 import { ConfirmationProvider } from "./common"
 import { useMuffinAdminOpts } from "./hooks"
+import { muffinI18nProvider } from "./i18n"
 import { buildAdmin, findBuilder, findIcon, setupAdmin } from "./utils"
 
 export function MuffinAdmin(props: AdminProps) {
@@ -33,7 +33,7 @@ export function MuffinAdmin(props: AdminProps) {
     dashboard = findBuilder(["dashboard"]),
     disableTelemetry,
     error,
-    i18nProvider = defaultI18nProvider,
+    i18nProvider = muffinI18nProvider,
     layout = findBuilder(["layout"]),
     loading,
     loginPage = findBuilder(["loginpage"]),

package/src/MuffinDashboard.tsx

@@ -1,21 +1,34 @@
 import Card from "@mui/material/Card"
 import CardContent from "@mui/material/CardContent"
 import Grid from "@mui/material/Grid"
+import Stack from "@mui/material/Stack"
 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 { useTranslate } from "react-admin"
+import { HelpLink } from "./common/HelpLink"
 import { useMuffinAdminOpts } from "./hooks"
 import { AdminDashboardBlock } from "./types"
 import { setupAdmin } from "./utils"
 
 export function MuffinDashboard() {
-  const { dashboard } = useMuffinAdminOpts()
+  const { dashboard, help } = useMuffinAdminOpts()
+  const translate = useTranslate()
   return (
-    <Grid container spacing={1}>
-      <AdminCards src={dashboard} />
-    </Grid>
+    <Stack gap={2}>
+      {help && (
+        <Card>
+          <CardContent>
+            <HelpLink size="large" href={help} label={translate("muffin.how_to_use_admin")} />
+          </CardContent>
+        </Card>
+      )}
+      <Grid container spacing={1}>
+        <AdminCards src={dashboard} />
+      </Grid>
+    </Stack>
   )
 }
 

package/src/MuffinResourceList.tsx

@@ -15,6 +15,7 @@ import {
 } from "react-admin"
 import { buildRA } from "./buildRA"
 import { ActionButton, BulkActionButton } from "./buttons"
+import { HelpLink } from "./common/HelpLink"
 import { useMuffinResourceOpts } from "./hooks"
 import { buildAdmin, findBuilder, setupAdmin } from "./utils"
 
@@ -73,12 +74,14 @@ setupAdmin(["list-grid-buttons"], MuffinListGridButtons)
 function MuffinListToolbar() {
   const {
     actions: baseActions = [],
+    help,
     list: { create },
   } = useMuffinResourceOpts()
   const actions = baseActions.filter((a) => a.view.includes("list"))
   return (
     <TopToolbar>
       <SelectColumnsButton />
+      {help && <HelpLink href={help} />}
       <FilterButton />
       {actions.length ? actions.map((props) => <ActionButton key={props.id} {...props} />) : null}
       {create && <CreateButton />}

package/src/buttons/ActionButton.tsx

@@ -9,9 +9,11 @@ import {
 } from "react-admin"
 import { FormProvider } from "react-hook-form"
 
+import { Stack } from "@mui/material"
 import { useState } from "react"
 import { buildRA } from "../buildRA"
 import { AdminModal, PayloadButtons, useConfirmation } from "../common"
+import { HelpLink } from "../common/HelpLink"
 import { useAction } from "../hooks/useAction"
 import { AdminAction, AdminPayloadProps } from "../types"
 import { buildIcon, findBuilder } from "../utils"
@@ -66,6 +68,7 @@ function ActionButtonBase({
   icon,
   schema,
   id,
+  help,
 }: Omit<AdminAction, "paths"> & {
   isPending?: boolean
   onHandle: (payload?: any) => void
@@ -96,13 +99,21 @@ function ActionButtonBase({
           onClose={() => setPayloadActive(false)}
           title={title || label}
           schema={schema}
+          help={help}
         />
       )}
     </>
   )
 }
 
-export function CommonPayload({ active, onClose, onHandle, schema, title }: AdminPayloadProps) {
+export function CommonPayload({
+  active,
+  onClose,
+  onHandle,
+  schema,
+  title,
+  help,
+}: AdminPayloadProps) {
   schema[0][1] = { ...schema[0][1], autoFocus: true }
   const inputs = buildRA(schema)
   const translate = useTranslate()
@@ -122,7 +133,16 @@ export function CommonPayload({ active, onClose, onHandle, schema, title }: Admi
           maxWidth="sm"
           open={active}
           onClose={onClose}
-          title={translate(title, { _: title })}
+          title={
+            help
+              ? ((
+                  <Stack alignItems="flex-start">
+                    <span>{translate(title, { _: title })}</span>
+                    <HelpLink href={help} style={{ alignSelf: "flex-end" }} />
+                  </Stack>
+                ) as any)
+              : translate(title, { _: title })
+          }
           actions={
             <PayloadButtons
               onClose={onClose}

package/src/common/HelpLink.tsx

@@ -0,0 +1,13 @@
+import HelpIcon from "@mui/icons-material/Help"
+import Link from "@mui/material/Link"
+import { Button, useTranslate } from "react-admin"
+
+export function HelpLink({ label, ...props }: Parameters<typeof Button>[0]) {
+  const translate = useTranslate()
+  label = label || translate("muffin.instructions")
+  return (
+    <Button component={Link} label={label} target="_blank" {...props}>
+      <HelpIcon />
+    </Button>
+  )
+}

package/src/i18n/en.ts

@@ -0,0 +1,8 @@
+const muffinEnglishMessages = {
+  muffin: {
+    instructions: "Instructions",
+    how_to_use_admin: "How to use Admin?",
+  },
+}
+
+export default muffinEnglishMessages

package/src/i18n/index.ts

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

package/src/i18n/provider.ts

@@ -0,0 +1,21 @@
+import polyglotI18nProvider from "ra-i18n-polyglot"
+import raEnglishMessages from "ra-language-english"
+import raRussianMessages from "ra-language-russian"
+import { resolveBrowserLocale } from "react-admin"
+import muffinEnglishMessages from "./en"
+import muffinRussianMessages from "./ru"
+
+const translations = {
+  en: { ...raEnglishMessages, ...muffinEnglishMessages },
+  ru: { ...raRussianMessages, ...muffinRussianMessages },
+}
+
+export const muffinI18nProvider = polyglotI18nProvider(
+  (locale) => (translations[locale] ? translations[locale] : translations.en),
+  resolveBrowserLocale(),
+  [
+    { locale: "en", name: "English" },
+    { locale: "ru", name: "Русский" },
+  ],
+  { allowMissing: true }
+)

package/src/i18n/ru.ts

@@ -0,0 +1,8 @@
+const muffinRussianMessages = {
+  muffin: {
+    instructions: "Инструкции",
+    how_to_use_admin: "Как использовать админку?",
+  },
+}
+
+export default muffinRussianMessages

package/src/types.ts

@@ -4,6 +4,7 @@ export type TProps = {
 
 export type AdminAction = {
   view?: ("show" | "edit" | "list" | "bulk")[]
+  help?: string
   id: string
   label: string
   title: string
@@ -14,7 +15,7 @@ export type AdminAction = {
 }
 
 export type AdminField = [string, { source: string }]
-export type AdminInput = [string, { required: boolean; source: string; [key: string]: any }]
+export type AdminInput = [string, { required: boolean; source: string;[key: string]: any }]
 
 export type AdminShowLink = {
   label: string
@@ -34,20 +35,22 @@ export type AdminPayloadProps = {
   onHandle: (payload?: any) => void
   title?: string
   schema?: AdminInput[]
+  help?: string
 }
 
 export type AdminResourceProps = {
   name: string
   icon?: string
   label: string
+  help?: string
   actions: AdminAction[]
   create: AdminInput[] | false
   edit:
-    | {
-        inputs: AdminInput[]
-        remove?: boolean
-      }
-    | false
+  | {
+    inputs: AdminInput[]
+    remove?: boolean
+  }
+  | false
   list: {
     limit: number
     limitMax: number
@@ -92,5 +95,6 @@ export type AdminOpts = {
   }
   dashboard: AdminDashboardBlock[] | AdminDashboardBlock
   resources: AdminResourceProps[]
+  help?: string
   version: string
 }