@applica-software-guru/react-admin 1.0.32 → 1.0.34

package/src/hooks/useMenu.jsx

@@ -0,0 +1,223 @@
+import { useGetIdentity, usePermissions, useResourceDefinitions, useTranslate } from 'react-admin'
+
+import { AntDesignOutlined } from '@ant-design/icons'
+import { cloneDeep } from 'lodash'
+import { useMemo } from 'react'
+import useMenuConfig from './useMenuConfig'
+
+const RESOURCE_PREFIXES = ['e-', 'entities/']
+
+const getResourceName = (name) => {
+  let resourceName = name
+  RESOURCE_PREFIXES.forEach((prefix) => {
+    resourceName = resourceName?.startsWith(prefix)
+      ? resourceName?.substring(prefix.length)
+      : resourceName
+  })
+  return resourceName
+}
+
+const isInGroup = (group, resource) =>
+  resource.options?.group === group.id || (!resource.options?.group && group.id === 'admin')
+
+const hasPermission = (resource, permissions) => {
+  const name = getResourceName(resource.name)
+  const hasPermission = permissions?.includes(`${name}:list`)
+  return hasPermission
+}
+
+const getItem = (menu, id) => {
+  let item = menu.find((item) => item.id === id)
+  if (!item) {
+    for (let i = 0; i < menu.length; i++) {
+      const element = menu[i]
+      if (element.children) {
+        item = getItem(element.children, id)
+        if (item) {
+          return item
+        }
+      }
+    }
+  }
+  return item
+}
+
+const getGroup = (groups, resource, permissions) => {
+  let group = groups.find(
+    (g) =>
+      ['group', 'collapse'].indexOf(g.type) !== -1 &&
+      isInGroup(g, resource) /* && hasPermission(resource, permissions)*/
+  )
+  if (!group) {
+    for (let i = 0; i < groups.length; i++) {
+      const element = groups[i]
+      if (element.children) {
+        group = getGroup(element.children, resource, permissions)
+        if (group) {
+          return group
+        }
+      }
+    }
+  }
+  return group
+}
+
+const getGroupById = (groups, id) => {
+  let group = groups.find((g) => g.id === id)
+  if (!group) {
+    for (let i = 0; i < groups.length; i++) {
+      const element = groups[i]
+      if (element.children) {
+        group = getGroupById(element.children, id)
+        if (group) {
+          return group
+        }
+      }
+    }
+  }
+  return group
+}
+const filterNotEmpty = (group) => {
+  if (!group) {
+    return false
+  }
+  if (group.type === 'item') {
+    return true
+  }
+  if (group.children) {
+    group.children = group.children.filter(filterNotEmpty)
+  }
+  return group.children && group.children.length > 0
+}
+
+const mapParent = (group) => {
+  if (group.children) {
+    group.children.forEach((child) => {
+      child.parent = group
+      mapParent(child)
+    })
+  }
+  return group
+}
+
+const createNodes = ({ userGroups, resources, permissions, translate }) => {
+  const translateRecursive = (group) => {
+    group.title = translate(group.title, { _: group.title })
+
+    if (group.children) {
+      group.children.forEach((child) => translateRecursive(child))
+    }
+    return group
+  }
+  const resourceNames = Object.keys(resources)
+  const removeNotFoundResources = (group, resources) => {
+    if (group.children) {
+      group.children = group.children.filter((child) => {
+        if (child.resource === false) {
+          return true
+        }
+        if (child.type === 'item') {
+          return resources.includes(child.id)
+        }
+        removeNotFoundResources(child, resources)
+        return child.children && child.children.length > 0
+      })
+    }
+    return group
+  }
+
+  const groupsA = cloneDeep(userGroups)
+    .map((group) => ({
+      type: 'group',
+      icon: AntDesignOutlined,
+      children: [],
+      ...group
+    }))
+    .map(translateRecursive)
+    .map((group) => removeNotFoundResources(group, resourceNames))
+
+  const groupsB = Object.values(resources)
+    // Detect group of each configured ra resource.
+    .map((resource) => resource.options?.group || 'admin')
+    // Generate unique list of groups (because a resource can be configured with the same group of another resource)
+    .filter((group, index, self) => self.indexOf(group) === index)
+    // Remove from the list groups already defined by the user (Applica developer)
+    .filter((group) => group !== undefined && getGroupById(userGroups, group) === null)
+    .map((group) => ({
+      id: group,
+      title: translate(`ra.menu.group.${group}`),
+      type: 'group',
+      icon: AntDesignOutlined,
+      children: []
+    }))
+
+  const groups = [...groupsA, ...groupsB]
+
+  Object.values(resources).forEach((resource) => {
+    if (!resource.hasList) {
+      return
+    }
+
+    const group = getGroup(groups, resource, permissions)
+    const exists = group?.children?.some((c) => c.id === resource.name)
+    if (!hasPermission(resource, permissions)) {
+      if (exists && group?.children?.length > 0) {
+        group.children = group.children.filter((c) => c.id !== resource.name)
+      }
+      return
+    }
+    if (group) {
+      if (!group.children) {
+        group.children = []
+      }
+      if (exists) {
+        return
+      }
+      // group.children.push({
+      //   id: resource.name,
+      //   type: 'item',
+      //   title: translate(resource.options?.label || `ra.menu.item.${resource.name}`, {
+      //     _: resource.options?.label || resource.name
+      //   }),
+      //   url: `/${resource.name}`,
+      //   icon: resource.options?.icon || exists?.icon || AntDesignOutlined
+      // })
+    }
+  })
+
+  return groups.filter(filterNotEmpty).map(mapParent)
+}
+
+const useMenu = () => {
+  const resources = useResourceDefinitions()
+  const { isLoading: loadingIdentity, data: identity } = useGetIdentity()
+  const { permissions } = usePermissions()
+  const { groups: userGroups } = useMenuConfig()
+  const translate = useTranslate()
+
+  const menu = useMemo(() => {
+    if (loadingIdentity || !identity || identity === null || identity?.id <= 0) {
+      return null
+    }
+
+    const groups = createNodes({
+      resources,
+      permissions,
+      translate,
+      userGroups
+    })
+
+    return groups
+  }, [loadingIdentity, identity, resources, permissions, translate, userGroups])
+
+  const isLoading = useMemo(() => loadingIdentity, [loadingIdentity])
+
+  return {
+    menu,
+    isLoading,
+    getItem: (id) => (isLoading ? false : getItem(menu, id)),
+    findInMenu: isLoading ? () => undefined : getItem
+  }
+}
+
+export default useMenu

package/src/hooks/useMenuConfig.jsx

@@ -0,0 +1,6 @@
+import { MenuConfigContext } from '../contexts'
+import { useContext } from 'react'
+
+const useMenuConfig = () => useContext(MenuConfigContext)
+
+export default useMenuConfig

package/src/hooks/useResourceTitle.jsx

@@ -0,0 +1,25 @@
+import { useRecordContext, useResourceContext, useTranslate } from 'react-admin'
+
+import { useMemo } from 'react'
+
+const useResourceTitle = (title) => {
+  const record = useRecordContext()
+  const translate = useTranslate()
+  const resource = useResourceContext()
+  const mode = record?.id ? 'edit' : 'create'
+
+  const cardTitle = useMemo(() => {
+    const defaultTitle = `resources.${resource}.title`
+    return (
+      title ||
+      translate(`resources.${resource}.title.${mode}`, {
+        _: translate(defaultTitle, { _: defaultTitle }),
+        ...record,
+      })
+    )
+  }, [mode, record, resource, translate, title])
+
+  return cardTitle
+}
+
+export default useResourceTitle

package/src/hooks/useThemeConfig.jsx

@@ -0,0 +1,6 @@
+import { ThemeConfigContext } from '../contexts/ThemeConfigContext'
+import { useContext } from 'react'
+
+const useThemeConfig = () => useContext(ThemeConfigContext)
+
+export default useThemeConfig

package/src/i18n/createI18nProvider.jsx

@@ -0,0 +1,15 @@
+import { get } from 'lodash'
+import polyglotI18nProvider from 'ra-i18n-polyglot'
+
+const createI18nProvider = ({ languages, defaultLocale, allowMissing = false }) =>
+  polyglotI18nProvider(
+    (locale) => {
+      const messages = get(languages, locale, {})
+      return messages
+    },
+    defaultLocale,
+    [{ locale: defaultLocale }],
+    { allowMissing },
+  )
+
+export default createI18nProvider

package/src/i18n/index.jsx

@@ -0,0 +1,4 @@
+export { default as createI18nProvider } from './createI18nProvider'
+export { default as useI18nCatcher } from './useI18nCatcher'
+export { default as useI18nLanguages } from './useI18nLanguages'
+export { default as useI18nProvider } from './useI18nProvider'

package/src/i18n/useI18nCatcher.jsx

@@ -0,0 +1,71 @@
+/* eslint-disable no-console */
+import * as React from 'react'
+
+import { useLocaleState } from 'react-admin'
+
+const queued = []
+
+const putMessage = ({ apiUrl, endpoint, locale, message, bodyBuilder }) =>
+  message != null &&
+  message !== 'undefined' &&
+  message.indexOf('[') === -1 &&
+  message.indexOf(']') === -1 &&
+  queued.indexOf(`${locale}-${message}`) === -1 &&
+  queued.push(`${locale}-${message}`) &&
+  fetch(`${apiUrl}${endpoint}`, {
+    method: 'PUT',
+    headers: new Headers({
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    }),
+    body: JSON.stringify(bodyBuilder(locale, message)),
+  })
+
+const useI18nCatcher = ({
+  apiUrl,
+  enabled = true,
+  endpoint = '/languages/put-message',
+  loading,
+  bodyBuilder = (locale, message) => ({
+    code: locale,
+    message: {
+      code: message,
+      text: message,
+    },
+  }),
+}) => {
+  const [locale] = useLocaleState()
+  React.useMemo(() => {
+    if (loading) {
+      return
+    }
+
+    if (!enabled) {
+      return
+    }
+
+    const consoleError = console.error
+
+    console.error = function (message) {
+      if (typeof message === 'string' && message === '%c%s') {
+        return
+      }
+      if (typeof message === 'string' && message.indexOf('Missing translation for key: ') >= 0) {
+        message = message.replace('Warning: Missing translation for key: ', '')
+        message = message.split('"').join('').trim()
+        if (message === null || message.indexOf(' ') !== -1 || message.indexOf('.') === -1) {
+          return
+        }
+
+        const lc = localStorage.getItem('locale') || locale
+        putMessage({ apiUrl, endpoint, locale: lc, message, bodyBuilder })
+        return
+      }
+
+      consoleError.apply(console, arguments)
+    }
+  }, [apiUrl, locale, loading, bodyBuilder, endpoint, enabled])
+  return true
+}
+
+export default useI18nCatcher

package/src/i18n/useI18nLanguages.jsx

@@ -0,0 +1,22 @@
+/* eslint-disable no-console */
+import React from 'react'
+window.React = React
+const useI18nLanguages = ({
+  apiUrl,
+  endpoint = '/languages/load',
+  mapper = ({ data }) => ({ data }),
+}) => {
+  const [data, setData] = React.useState({ loading: true, languages: null })
+  React.useEffect(() => {
+    let headers = new Headers()
+    headers.append('Accept', 'application/json')
+    headers.append('Content-Type', 'application/json')
+    fetch(`${apiUrl}${endpoint}`, { headers })
+      .then((response) => response.json())
+      .then((response) => setData({ loading: false, ...mapper(response) }))
+  }, [apiUrl, endpoint, mapper])
+
+  return data
+}
+
+export default useI18nLanguages

package/src/i18n/useI18nProvider.jsx

@@ -0,0 +1,5 @@
+import createI18nProvider from './createI18nProvider'
+
+const useI18nProvider = ({ apiUrl, locale = 'en', languages = {} }) =>
+  createI18nProvider({ apiUrl, locale, languages })
+export default useI18nProvider

package/src/index.jsx

@@ -0,0 +1,67 @@
+export { default as Admin } from './Admin'
+export { default as ApplicaAdmin } from './ApplicaAdmin'
+
+export * from './hooks'
+export * from './components'
+export * from './contexts'
+export * from './utils'
+
+export {
+  ArrayInput,
+  ArrayInputContext,
+  BooleanField,
+  BulkDeleteWithConfirmButton,
+  Button,
+  ChipField,
+  choices,
+  Confirm,
+  Create,
+  CreateButton,
+  CreateContextProvider,
+  CustomRoutes,
+  DeleteWithConfirmButton,
+  DeleteWithUndoButton,
+  EditButton,
+  email,
+  Form,
+  HttpError,
+  ListToolbar,
+  maxLength,
+  maxValue,
+  minLength,
+  minValue,
+  number,
+  Pagination,
+  RecordContextProvider,
+  ReferenceArrayField,
+  ReferenceField,
+  regex,
+  required,
+  Resource,
+  ResourceContextProvider,
+  SaveButton,
+  SimpleFormIterator,
+  SimpleFormIteratorContext,
+  SimpleList,
+  SingleFieldList,
+  TopToolbar,
+  useArrayInput,
+  useAuthProvider,
+  useDataProvider,
+  useGetIdentity,
+  useGetList,
+  useGetMany,
+  useGetManyReference,
+  useGetOne,
+  useListContext,
+  useNotify,
+  usePermissions,
+  useRecordContext,
+  useResourceContext,
+  useResourceDefinition,
+  useResourceDefinitions,
+  useTranslate,
+  useUnselect,
+  useUnselectAll,
+  useUpdateMany
+} from 'react-admin'

package/src/themes/getColors.jsx

@@ -0,0 +1,18 @@
+const getColors = (theme, color) => {
+  switch (color) {
+    case 'secondary':
+      return theme.palette.secondary
+    case 'error':
+      return theme.palette.error
+    case 'warning':
+      return theme.palette.warning
+    case 'info':
+      return theme.palette.info
+    case 'success':
+      return theme.palette.success
+    default:
+      return theme.palette.primary
+  }
+}
+
+export default getColors

package/src/themes/getShadow.jsx

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types'
+
+const getShadow = (theme, shadow) => {
+  switch (shadow) {
+    case 'secondary':
+      return theme.customShadows.secondary
+    case 'error':
+      return theme.customShadows.error
+    case 'warning':
+      return theme.customShadows.warning
+    case 'info':
+      return theme.customShadows.info
+    case 'success':
+      return theme.customShadows.success
+    case 'primaryButton':
+      return theme.customShadows.primaryButton
+    case 'secondaryButton':
+      return theme.customShadows.secondaryButton
+    case 'errorButton':
+      return theme.customShadows.errorButton
+    case 'warningButton':
+      return theme.customShadows.warningButton
+    case 'infoButton':
+      return theme.customShadows.infoButton
+    case 'successButton':
+      return theme.customShadows.successButton
+    default:
+      return theme.customShadows.primary
+  }
+}
+
+getShadow.propTypes = {
+  theme: PropTypes.object,
+  shadow: PropTypes.string,
+}
+
+export default getShadow

package/src/themes/index.jsx

@@ -0,0 +1,70 @@
+import { CssBaseline, StyledEngineProvider } from '@mui/material'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+
+import CustomShadows from './shadows'
+import Palette from './palette'
+import PropTypes from 'prop-types'
+import Typography from './typography'
+import componentsOverride from './overrides'
+import getColors from './getColors'
+import getShadow from './getShadow'
+import { useMemo } from 'react'
+import { useThemeConfig } from '../hooks'
+
+const ThemeCustomization = ({ themeOverrides, children }) => {
+  const { themeDirection, mode, presetColor, fontFamily } = useThemeConfig()
+
+  const theme = useMemo(() => Palette(mode, presetColor), [mode, presetColor])
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const themeTypography = useMemo(() => Typography(fontFamily), [fontFamily])
+  const themeCustomShadows = useMemo(() => CustomShadows(theme), [theme])
+
+  const themeOptions = useMemo(
+    () => ({
+      breakpoints: {
+        values: {
+          xs: 0,
+          sm: 768,
+          md: 1024,
+          lg: 1266,
+          xl: 1440,
+        },
+      },
+      direction: themeDirection,
+      mixins: {
+        toolbar: {
+          minHeight: 60,
+          paddingTop: 8,
+          paddingBottom: 8,
+        },
+      },
+      palette: theme.palette,
+      customShadows: themeCustomShadows,
+      typography: themeTypography,
+      shadows: theme.shadows.map(() => 'none'),
+      ...(typeof themeOverrides === 'function' ? themeOverrides(theme) : themeOverrides),
+    }),
+    [themeDirection, theme, themeTypography, themeCustomShadows, themeOverrides],
+  )
+
+  const themes = createTheme(themeOptions)
+
+  themes.components = componentsOverride(themes)
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={themes}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </StyledEngineProvider>
+  )
+}
+
+ThemeCustomization.propTypes = {
+  children: PropTypes.node,
+  themeOverrides: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+}
+
+export { ThemeCustomization, getColors as getThemeColor, getShadow as getThemeShadow }

package/src/themes/overrides/Accordion.jsx

@@ -0,0 +1,27 @@
+// ==============================|| OVERRIDES - ALERT TITLE ||============================== //
+
+export default function Accordion(theme) {
+  return {
+    MuiAccordion: {
+      defaultProps: {
+        disableGutters: true,
+        square: true,
+        elevation: 0,
+      },
+      styleOverrides: {
+        root: {
+          border: `1px solid ${theme.palette.secondary.light}`,
+          '&:not(:last-child)': {
+            borderBottom: 0,
+          },
+          '&:before': {
+            display: 'none',
+          },
+          '&.Mui-disabled': {
+            backgroundColor: theme.palette.secondary.lighter,
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/AccordionDetails.jsx

@@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - ALERT TITLE ||============================== //
+
+export default function AccordionDetails(theme) {
+  return {
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(2),
+          borderTop: `1px solid ${theme.palette.secondary.light}`,
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/AccordionSummary.jsx

@@ -0,0 +1,33 @@
+// assets
+import { RightOutlined } from '@ant-design/icons'
+
+// ==============================|| OVERRIDES - ALERT TITLE ||============================== //
+
+export default function AccordionSummary(theme) {
+  const { palette, spacing } = theme
+
+  return {
+    MuiAccordionSummary: {
+      defaultProps: {
+        expandIcon: <RightOutlined style={{ fontSize: '0.75rem' }} />,
+      },
+      styleOverrides: {
+        root: {
+          backgroundColor: palette.secondary.lighter,
+          flexDirection: 'row-reverse',
+          minHeight: 46,
+        },
+        expandIconWrapper: {
+          '&.Mui-expanded': {
+            transform: 'rotate(90deg)',
+          },
+        },
+        content: {
+          marginTop: spacing(1.25),
+          marginBottom: spacing(1.25),
+          marginLeft: spacing(1),
+        },
+      },
+    },
+  }
+}