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

package/playground/src/resource/device.js

@@ -0,0 +1,23 @@
+import { Create, Edit } from '@applica-software-guru/react-admin'
+import { DeviceForm, DeviceList } from 'components'
+const DeviceCreate = () => (
+  <Create>
+    <DeviceForm />
+  </Create>
+)
+const DeviceEdit = () => (
+  <Edit>
+    <DeviceForm />
+  </Edit>
+)
+
+const config = {
+  list: DeviceList,
+  edit: DeviceEdit,
+  create: DeviceCreate,
+  options: {
+    group: 'control-panel'
+  }
+}
+
+export default config

package/playground/src/resource/i18n-message.js

@@ -0,0 +1,29 @@
+import { Create, Edit } from '@applica-software-guru/react-admin';
+import { I18nMessageForm, I18nMessageList } from 'components';
+
+import { FlagOutlined } from '@ant-design/icons';
+
+const MessageCreate = () => (
+  <Create>
+    <I18nMessageForm />
+  </Create>
+);
+
+const MessageEdit = () => (
+  <Edit>
+    <I18nMessageForm />
+  </Edit>
+);
+
+const config = {
+  list: I18nMessageList,
+  edit: MessageEdit,
+  create: MessageCreate,
+  options: {
+    group: 'control-panel',
+    icon: FlagOutlined,
+    roles: ['superuser']
+  }
+};
+
+export default config;

package/playground/src/resource/index.js

@@ -0,0 +1,4 @@
+export { default as user } from './user'
+export { default as notification } from './notification'
+export { default as i18nMessage } from './i18n-message'
+export { default as device } from './device'

package/playground/src/resource/notification.js

@@ -0,0 +1,18 @@
+import { NotificationList as BaseNotificationList, List } from '@applica-software-guru/react-admin';
+
+import { MessageOutlined } from '@ant-design/icons';
+import React from 'react';
+
+const NotificationList = () => (
+  <List>
+    <BaseNotificationList />
+  </List>
+);
+const config = {
+  list: NotificationList,
+  options: {
+    icon: MessageOutlined,
+    group: 'dashboard'
+  }
+};
+export default config;

package/playground/src/resource/user.js

@@ -0,0 +1,28 @@
+import { Create, Edit } from '@applica-software-guru/react-admin';
+import { UserForm, UserList } from 'components';
+
+import { CONFIGURED_ROLES } from 'config';
+import { UserOutlined } from '@ant-design/icons';
+
+const UserCreate = () => (
+  <Create>
+    <UserForm configuredRoles={CONFIGURED_ROLES} />
+  </Create>
+);
+const UserEdit = () => (
+  <Edit mutationMode="pessimistic">
+    <UserForm configuredRoles={CONFIGURED_ROLES} />
+  </Edit>
+);
+
+const config = {
+  list: <UserList configuredRoles={CONFIGURED_ROLES} />,
+  edit: UserEdit,
+  create: UserCreate,
+  options: {
+    icon: UserOutlined,
+    group: 'control-panel'
+  }
+};
+
+export default config;

package/playground/src/theme.js

@@ -0,0 +1,3 @@
+const theme = () => ({});
+
+export default theme;

package/src/Admin.jsx

@@ -0,0 +1,67 @@
+import { AdminUI, localStorageStore } from 'react-admin'
+
+import AdminContext from './AdminContext'
+
+const Admin = (props) => {
+  const {
+    authProvider,
+    catchAll,
+    children,
+    dashboard,
+    dataProvider,
+    disableTelemetry,
+    history,
+    i18nProvider,
+    layout,
+    loading,
+    loginPage,
+    authCallbackPage,
+    menu, // deprecated, use a custom layout instead
+    notification,
+    queryClient,
+    requireAuth,
+    store,
+    ready,
+    theme,
+    title = 'React Admin'
+  } = props
+  return (
+    <AdminContext
+      authProvider={authProvider}
+      dataProvider={dataProvider}
+      i18nProvider={i18nProvider}
+      store={store}
+      history={history}
+      queryClient={queryClient}
+      theme={theme}
+    >
+      <AdminUI
+        layout={layout}
+        dashboard={dashboard}
+        disableTelemetry={disableTelemetry}
+        menu={menu}
+        catchAll={catchAll}
+        title={title}
+        loading={loading}
+        loginPage={loginPage}
+        authCallbackPage={authCallbackPage}
+        notification={notification}
+        requireAuth={requireAuth}
+        ready={ready}
+      >
+        {children}
+      </AdminUI>
+    </AdminContext>
+  )
+}
+
+Admin.defaultProps = {
+  store: localStorageStore(),
+  title: 'Applica Admin'
+}
+
+Admin.propTypes = {
+  ...AdminUI.propTypes
+}
+
+export default Admin

package/src/AdminContext.jsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+import { CoreAdminContext } from 'react-admin'
+import PropTypes from 'prop-types'
+import { ScrollTop } from './components'
+import { ThemeCustomization } from './themes'
+
+const AdminContext = ({ children, theme, ...props }) => (
+  <CoreAdminContext {...props}>
+    <ThemeCustomization themeOverrides={theme}>
+      <ScrollTop>{children}</ScrollTop>
+    </ThemeCustomization>
+  </CoreAdminContext>
+)
+
+AdminContext.displayName = 'AdminContext'
+AdminContext.defaultProps = {
+  ...CoreAdminContext.defaultProps,
+}
+AdminContext.propTypes = {
+  ...CoreAdminContext.propTypes,
+  children: PropTypes.node.isRequired,
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+}
+
+export default AdminContext

package/src/ApplicaAdmin.jsx

@@ -0,0 +1,210 @@
+import {
+  AppConfigProvider,
+  MenuConfigProvider,
+  MenuPropTypes,
+  ThemeConfigProvider
+} from './contexts'
+import { CatchResult, useCliErrorCatcher } from './dev'
+import { Layout, MainIcon, Notification, SmallIcon } from './components'
+import { createI18nProvider, useI18nCatcher, useI18nLanguages } from './i18n'
+
+import Admin from './Admin'
+import PropTypes from 'prop-types'
+import { QueryClient } from 'react-query'
+import { useMemo } from 'react'
+
+const languageResponseMapper = (response) =>
+  response.reduce(
+    (messages, message) => ({
+      ...messages,
+      [message.lang]: {
+        ...(messages[message.lang] || {}),
+        [message.code]: message.text
+      }
+    }),
+    {}
+  )
+
+const i18nBodyRequestMapper = (locale, message) => ({
+  lang: locale,
+  code: message,
+  text: message
+})
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false
+    }
+  }
+})
+
+const ApplicaAdmin = ({
+  theme,
+  apiUrl,
+  defaultLocale,
+  development,
+  logoMain,
+  logoIcon,
+  menu,
+  name,
+  version,
+  dataProvider,
+  authProvider,
+  notification,
+  disableNotification,
+  ...props
+}) => {
+  const languages = useI18nLanguages({
+    apiUrl,
+    endpoint: '/i18n/messages',
+    mapper: languageResponseMapper
+  })
+
+  useI18nCatcher({
+    bodyBuilder: i18nBodyRequestMapper,
+    apiUrl,
+    endpoint: '/i18n/message',
+    loading: languages?.loading,
+    enabled: development
+  })
+  useCliErrorCatcher({
+    apiUrl,
+    endpoint: '/cli/error',
+    catcherFn: (error) => {
+      var errorMessage = error?.toString()
+      var knownErrors = [
+        // @see https://github.com/marmelab/react-admin/pull/8884
+        'Invalid prop `file` of type `string` supplied to `FileInputPreview`, expected `object`.',
+        'Failed prop type: Invalid prop `checked` of type `string` supplied to `ForwardRef(Switch)`, expected `boolean`.',
+        'Failed prop type: Invalid prop `checked` of type `string` supplied to `ForwardRef(SwitchBase)`, expected `boolean`.',
+        'validateDOMNesting(...): <form> cannot appear as a descendant of <form>.'
+      ]
+      const isKnowBug = knownErrors.some((knownError) => errorMessage?.includes(knownError))
+      const result = new CatchResult({
+        catch: isKnowBug,
+        display: !isKnowBug,
+        log: !isKnowBug,
+        error
+      })
+      return result
+    }
+  })
+
+  const layout = useMemo(
+    () => (props) => {
+      const _logoMain = name ? <MainIcon title={name} /> : logoMain
+      const _logoIcon = name ? <SmallIcon title={name} /> : logoIcon
+      return (
+        <Layout
+          {...props}
+          name={name}
+          version={version}
+          logoMain={_logoMain}
+          logoIcon={_logoIcon}
+          notification={notification}
+          disableNotification={disableNotification}
+        />
+      )
+    },
+    [logoMain, logoIcon, name, version, notification, disableNotification]
+  )
+
+  if (languages?.loading) {
+    return null
+  }
+
+  const i18nProivder = createI18nProvider({
+    languages,
+    defaultLocale,
+    allowMissing: development
+  })
+  return (
+    <AppConfigProvider>
+      <MenuConfigProvider menu={menu}>
+        <ThemeConfigProvider>
+          <Admin
+            theme={theme}
+            layout={layout}
+            notification={Notification}
+            queryClient={queryClient}
+            dataProvider={dataProvider}
+            authProvider={authProvider}
+            i18nProvider={i18nProivder}
+            {...props}
+          />
+        </ThemeConfigProvider>
+      </MenuConfigProvider>
+    </AppConfigProvider>
+  )
+}
+
+ApplicaAdmin.defaultProps = {
+  ...Admin.defaultProps,
+  fileFields: [],
+  defaultLocale: 'en',
+  development: false,
+  version: '0.0.0',
+  notification: 'entities/notification',
+  disableNotification: false
+}
+
+ApplicaAdmin.propTypes = {
+  ...Admin.propTypes,
+  /**
+   * Eventuali configurazioni aggiuntive da passare al tema.
+   */
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  /**
+   * URL dell'API da utilizzare nell'applicazione.
+   */
+  apiUrl: PropTypes.string.isRequired,
+
+  /**
+   * La lingua di default da utilizzare nell'applicazione.
+   */
+  defaultLocale: PropTypes.string,
+  /**
+   * Se impostato a true, l'applicazione lavora in modalità sviluppo.
+   * In questa modalità, per esempio, l'applicazione è in grando di catturare ed inoltrare al server eventuali messaggi non localizzati.
+   */
+  development: PropTypes.bool,
+  /**
+   * Il logo da visualizzare nella barra laterale quando il menu è espanso lateralmente.
+   */
+  logoMain: PropTypes.node,
+  /**
+   * Eventuale logo da visualizzare nella barra laterale quando il menu è ridotto lateralmente.
+   */
+  logoIcon: PropTypes.node,
+  /**
+   * Configurazione del menu da visualizzare nell'applicazione.
+   */
+  menu: PropTypes.arrayOf(MenuPropTypes),
+  /**
+   * Nome dell'applicazione.
+   */
+  name: PropTypes.string,
+  /**
+   * Versione dell'applicazione.
+   */
+  version: PropTypes.string,
+  /**
+   * Il provider di autenticazione da utilizzare nell'applicazione.
+   */
+  authProvider: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Il provider di dati da utilizzare nell'applicazione.
+   */
+  dataProvider: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Indica il nome della risorsa REST da utilizzare per la gestione delle notifiche.
+   */
+  notification: PropTypes.string,
+  /**
+   * Indica se le notifiche devono essere disabilitate.
+   */
+  disableNotification: PropTypes.bool
+}
+
+export default ApplicaAdmin

package/src/assets/README.md

@@ -0,0 +1,7 @@
+# README
+
+This folder contains _standard_ assets necessary to create a basic Applica application.
+For example:
+
+- logo-icon.png (the icon of the application)
+- logo-main.png (the logo of the application)

package/src/components/@extended/AnimateButton.jsx

@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types'
+
+// third-party
+import { motion, useCycle } from 'framer-motion'
+
+// ==============================|| ANIMATION BUTTON ||============================== //
+
+export default function AnimateButton({
+  children,
+  type = 'scale',
+  direction = 'right',
+  offset = 10,
+  scale = {
+    hover: 1.05,
+    tap: 0.95,
+  },
+}) {
+  let offset1
+  let offset2
+  switch (direction) {
+    case 'up':
+    case 'left':
+      offset1 = offset
+      offset2 = 0
+      break
+    case 'right':
+    case 'down':
+    default:
+      offset1 = 0
+      offset2 = offset
+      break
+  }
+
+  const [x, cycleX] = useCycle(offset1, offset2)
+  const [y, cycleY] = useCycle(offset1, offset2)
+
+  switch (type) {
+    case 'rotate':
+      return (
+        <motion.div
+          animate={{ rotate: 360 }}
+          transition={{
+            repeat: Infinity,
+            repeatType: 'loop',
+            duration: 2,
+            repeatDelay: 0,
+          }}
+        >
+          {children}
+        </motion.div>
+      )
+    case 'slide':
+      if (direction === 'up' || direction === 'down') {
+        return (
+          <motion.div
+            animate={{ y: y !== undefined ? y : '' }}
+            onHoverEnd={() => cycleY()}
+            onHoverStart={() => cycleY()}
+          >
+            {children}
+          </motion.div>
+        )
+      }
+      return (
+        <motion.div
+          animate={{ x: x !== undefined ? x : '' }}
+          onHoverEnd={() => cycleX()}
+          onHoverStart={() => cycleX()}
+        >
+          {children}
+        </motion.div>
+      )
+
+    case 'scale':
+    default:
+      if (typeof scale === 'number') {
+        scale = {
+          hover: scale,
+          tap: scale,
+        }
+      }
+      return (
+        <motion.div whileHover={{ scale: scale?.hover }} whileTap={{ scale: scale?.tap }}>
+          {children}
+        </motion.div>
+      )
+  }
+}
+
+AnimateButton.propTypes = {
+  children: PropTypes.node,
+  offset: PropTypes.number,
+  type: PropTypes.oneOf(['slide', 'scale', 'rotate']),
+  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+  scale: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+}

package/src/components/@extended/Avatar.jsx

@@ -0,0 +1,125 @@
+// material-ui
+import { styled, useTheme } from '@mui/material/styles'
+
+import MuiAvatar from '@mui/material/Avatar'
+import PropTypes from 'prop-types'
+// project import
+import getColors from '../../themes/getColors'
+
+// ==============================|| AVATAR - COLOR STYLE ||============================== //
+
+function getColorStyle({ theme, color, type }) {
+  const colors = getColors(theme, color)
+  const { lighter, light, main, contrastText } = colors
+
+  switch (type) {
+    case 'filled':
+      return {
+        color: contrastText,
+        backgroundColor: main,
+      }
+    case 'outlined':
+      return {
+        color: main,
+        border: '1px solid',
+        borderColor: main,
+        backgroundColor: 'transparent',
+      }
+    case 'combined':
+      return {
+        color: main,
+        border: '1px solid',
+        borderColor: light,
+        backgroundColor: lighter,
+      }
+    default:
+      return {
+        color: main,
+        backgroundColor: lighter,
+      }
+  }
+}
+
+// ==============================|| AVATAR - SIZE STYLE ||============================== //
+
+function getSizeStyle(size) {
+  switch (size) {
+    case 'badge':
+      return {
+        border: '2px solid',
+        fontSize: '0.675rem',
+        width: 20,
+        height: 20,
+      }
+    case 'xs':
+      return {
+        fontSize: '0.75rem',
+        width: 24,
+        height: 24,
+      }
+    case 'sm':
+      return {
+        fontSize: '0.875rem',
+        width: 32,
+        height: 32,
+      }
+    case 'lg':
+      return {
+        fontSize: '1.2rem',
+        width: 52,
+        height: 52,
+      }
+    case 'xl':
+      return {
+        fontSize: '1.5rem',
+        width: 64,
+        height: 64,
+      }
+    case 'md':
+    default:
+      return {
+        fontSize: '1rem',
+        width: 40,
+        height: 40,
+      }
+  }
+}
+
+// ==============================|| STYLED - AVATAR ||============================== //
+
+const AvatarStyle = styled(MuiAvatar, {
+  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'type' && prop !== 'size',
+})(({ theme, variant, color, type, size }) => ({
+  ...getSizeStyle(size),
+  ...getColorStyle({ variant, theme, color, type }),
+  ...(size === 'badge' && {
+    borderColor: theme.palette.background.default,
+  }),
+}))
+
+// ==============================|| EXTENDED - AVATAR ||============================== //
+
+export default function Avatar({
+  variant = 'circular',
+  children,
+  color = 'primary',
+  type,
+  size = 'md',
+  ...others
+}) {
+  const theme = useTheme()
+
+  return (
+    <AvatarStyle variant={variant} theme={theme} color={color} type={type} size={size} {...others}>
+      {children}
+    </AvatarStyle>
+  )
+}
+
+Avatar.propTypes = {
+  children: PropTypes.node,
+  color: PropTypes.string,
+  type: PropTypes.string,
+  size: PropTypes.string,
+  variant: PropTypes.string,
+}