@applica-software-guru/react-admin 1.3.182 → 1.3.184

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.182",
+  "version": "1.3.184",
   "private": false,
   "repository": {
     "type": "git",

package/src/{Admin.jsx → Admin.tsx}

@@ -1,8 +1,9 @@
-import { AdminUI, localStorageStore } from 'react-admin';
+import { AdminUI, AdminUIProps, localStorageStore } from 'react-admin';
+import AdminContext, { AdminContextProps } from './AdminContext';
 
-import AdminContext from './AdminContext';
+export type AdminProps = AdminContextProps & AdminUIProps;
 
-const Admin = (props) => {
+export function Admin(props: AdminProps): JSX.Element {
   const {
     authProvider,
     catchAll,
@@ -20,7 +21,7 @@ const Admin = (props) => {
     notification,
     queryClient,
     requireAuth,
-    store,
+    store = localStorageStore(),
     ready,
     theme,
     title = 'React Admin'
@@ -53,15 +54,6 @@ const Admin = (props) => {
       </AdminUI>
     </AdminContext>
   );
-};
-
-Admin.defaultProps = {
-  store: localStorageStore(),
-  title: 'Applica Admin'
-};
-
-Admin.propTypes = {
-  ...AdminUI.propTypes
-};
+}
 
 export default Admin;

package/src/AdminContext.tsx

@@ -1,22 +1,20 @@
 import { CoreAdminContext, CoreAdminContextProps } from 'react-admin';
-
 import { ScrollTop } from './components';
 import { ThemeCustomization } from './themes';
 
 export type AdminContextProps = CoreAdminContextProps & {
   theme?: any;
 };
-const AdminContext = ({ children, theme, ...props }: AdminContextProps) => (
-  <CoreAdminContext {...props}>
-    <ThemeCustomization themeOverrides={theme}>
-      <ScrollTop>
-        {/** @ts-ignore */}
-        {children}
-      </ScrollTop>
-    </ThemeCustomization>
-  </CoreAdminContext>
-);
-
-AdminContext.displayName = 'ApplicaAdminContext';
-
+export function AdminContext({ children, theme, ...props }: AdminContextProps): JSX.Element {
+  return (
+    <CoreAdminContext {...props}>
+      <ThemeCustomization themeOverrides={theme}>
+        <ScrollTop>
+          {/** @ts-ignore */}
+          {children}
+        </ScrollTop>
+      </ThemeCustomization>
+    </CoreAdminContext>
+  );
+}
 export default AdminContext;

package/src/ApplicaAdmin.tsx

@@ -1,7 +1,7 @@
-import { AdminProps, AuthProvider, DataProvider } from 'react-admin';
+import { AdminProps, AuthProvider, DataProvider, I18nProvider } from 'react-admin';
 import { AppConfigProvider, MenuConfigProvider, ThemeConfig, ThemeConfigProvider } from './contexts';
 import { CatchResult, useErrorEventCatcher } from './dev';
-import { GenericErrorPage, Layout, LoginPage, MainIcon, Notification, SmallIcon } from './components';
+import { GenericErrorPage, Layout, LoginPage, MainIcon, Notification, SmallIcon, AuthBackground } from './components';
 import React, { useMemo } from 'react';
 import { useI18nProvider } from './i18n';
 import Admin from './Admin';
@@ -92,12 +92,13 @@ export type ApplicaAdminProps = AdminProps & {
   error: React.Component;
   /**
    * Indicates the name of the REST resource to use for notification management.
+   * The REST resource must be compatible with standard CRUD operations.
    * @default "entities/notification"
    * @example
    * // In this case, notifications will be managed through the "entities/notification" resource
-   * <ApplicaAdmin notification="entities/notification" />
+   * <ApplicaAdmin notificationAPI="entities/notification" />
    */
-  notification: string;
+  notificationAPI: string;
   /**
    * Indicates whether notifications should be disabled.
    * If notifications are enabled, an icon will automatically appear in the top right of the header.
@@ -147,37 +148,33 @@ export type ApplicaAdminProps = AdminProps & {
 
 /**
  * Define a basic super cool application based on React Admin, Mantis Theme and our style.
- *
- * @author A-Team - The Applica Software Guru
- * @param {ApplicaAdminProps}
- * @returns {React.ReactElement}
  */
-const ApplicaAdmin = ({
+export function ApplicaAdmin({
   theme,
   themeConfig,
   apiUrl,
-  defaultLocale,
-  development,
+  defaultLocale = 'en',
+  development = false,
   logoMain,
   logoIcon,
-  loginPage,
+  loginPage = <LoginPage version="0.0.0" name="Applica" redirectTo="/" background={<AuthBackground />} />,
   menu,
   name,
   copy,
-  version,
+  version = '0.0.0',
   dataProvider,
   authProvider,
   errorHandler,
   error,
-  notification,
-  enableNotification,
-  enableRegistration,
-  enablePasswordRecover,
-  queryClient,
+  enableNotification = false,
+  enableRegistration = false,
+  enablePasswordRecover = false,
+  enableThemeToggler = false,
+  queryClient = defaultQueryClient,
   background,
-  enableThemeToggler,
+  notificationAPI = 'entities/notification',
   ...props
-}: ApplicaAdminProps) => {
+}: ApplicaAdminProps): JSX.Element {
   useErrorEventCatcher({
     apiUrl,
     errorHandler,
@@ -188,6 +185,7 @@ const ApplicaAdmin = ({
         '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`.',
+        'Support for defaultProps will be removed from function components in a future major release.',
         'validateDOMNesting(...): <form> cannot appear as a descendant of <form>.',
         'Missing translation for key:',
         'HttpError: '
@@ -230,20 +228,20 @@ const ApplicaAdmin = ({
           version={version}
           logoMain={_logoMain}
           logoIcon={_logoIcon}
-          notification={notification}
+          notification={notificationAPI}
           enableNotification={enableNotification}
           error={error}
         />
       );
     },
-    [logoMain, logoIcon, name, version, error, notification, enableNotification]
+    [logoMain, logoIcon, name, version, error, notificationAPI, enableNotification]
   );
   const i18nProvider = useI18nProvider({
     apiUrl: apiUrl,
     defaultLocale: defaultLocale,
     allowMissing: development,
     createMissing: development
-  });
+  }) as I18nProvider;
 
   if (i18nProvider === undefined) {
     return <></>;
@@ -276,20 +274,6 @@ const ApplicaAdmin = ({
       </MenuConfigProvider>
     </AppConfigProvider>
   );
-};
+}
 
-ApplicaAdmin.defaultProps = {
-  ...Admin.defaultProps,
-  fileFields: [],
-  defaultLocale: 'en',
-  development: false,
-  version: '0.0.0',
-  notification: 'entities/notification',
-  enableNotification: false,
-  enableRegistration: false,
-  enableForgotPassword: false,
-  loginPage: <LoginPage version="0.0.0" name="Applica" redirectTo="/" />,
-  queryClient: defaultQueryClient,
-  enableThemeToggler: false
-};
 export default ApplicaAdmin;

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

@@ -29,7 +29,7 @@ const renderBreadcrumb = ({ id, title, icon, url, last }) => {
 };
 
 const Breadcrumbs = ({
-  home,
+  home = 'Home',
   card,
   divider = true,
   icon,
@@ -42,7 +42,7 @@ const Breadcrumbs = ({
   titleBottom,
   sx,
   breadcrumbs,
-  mode,
+  mode = 'navigation',
   ...others
 }) => {
   const theme = useTheme();
@@ -277,8 +277,4 @@ const Breadcrumbs = ({
 
   return breadcrumbContent;
 };
-Breadcrumbs.defaultProps = {
-  home: 'Home',
-  mode: 'navigation'
-};
 export default Breadcrumbs;

package/src/components/AuthBackground.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@mui/material';
 import { useTheme } from '@emotion/react';
 
-const AuthBackground = () => {
+export function AuthBackground(): JSX.Element {
   const theme = useTheme() as any;
   const isDark = theme.palette.mode === 'dark';
   const color = isDark ? theme.palette.primary.dark : theme.palette.primary.light;
@@ -96,6 +96,6 @@ const AuthBackground = () => {
       </svg>
     </Box>
   );
-};
+}
 
 export default AuthBackground;

package/src/components/Layout/Drawer/Drawer.tsx

@@ -10,7 +10,7 @@ type IDrawerProps = React.PropsWithChildren<{
   sx?: SxProps;
 }>;
 
-function Drawer(props: IDrawerProps) {
+export function Drawer(props: IDrawerProps): JSX.Element {
   const theme = useTheme(),
     sx = useSx(props, { flexShrink: { md: 0 }, zIndex: 1200 }),
     { downLg } = useLayoutMediaState(),
@@ -58,5 +58,4 @@ function Drawer(props: IDrawerProps) {
     </Box>
   );
 }
-
-export { Drawer };
+export default Drawer;

package/src/components/Layout/Drawer/DrawerHeader.tsx

@@ -8,7 +8,7 @@ type IDrawerHeaderType = React.PropsWithChildren<{
   sx?: SxProps;
 }>;
 
-function DrawerHeader(props: IDrawerHeaderType) {
+export function DrawerHeader(props: IDrawerHeaderType): JSX.Element {
   const theme = useTheme(),
     { horizontal } = useLayoutMediaState(),
     { open } = useLayoutDrawerState(),
@@ -28,4 +28,4 @@ function DrawerHeader(props: IDrawerHeaderType) {
   );
 }
 
-export { DrawerHeader };
+export default DrawerHeader;

package/src/components/Layout/Drawer/DrawerHeaderStyled.jsx

@@ -1,8 +1,7 @@
 import { Box } from '@mui/material';
-import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 
-const DrawerHeaderStyled = styled(Box, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
+export const DrawerHeaderStyled = styled(Box, { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
   ...theme.mixins.toolbar,
   display: 'flex',
   alignItems: 'center',
@@ -10,9 +9,4 @@ const DrawerHeaderStyled = styled(Box, { shouldForwardProp: (prop) => prop !== '
   paddingLeft: theme.spacing(open ? 3 : 0)
 }));
 
-DrawerHeaderStyled.propTypes = {
-  theme: PropTypes.object,
-  open: PropTypes.bool
-};
-
-export { DrawerHeaderStyled };
+export default DrawerHeaderStyled;

package/src/components/Layout/Footer.tsx

@@ -1,7 +1,5 @@
 import { Stack, Typography } from '@mui/material';
 
-import PropTypes from 'prop-types';
-
 type IFooterProps = {
   name: string;
   version: string;
@@ -9,23 +7,14 @@ type IFooterProps = {
 };
 
 function Footer(props: IFooterProps) {
-  const { name, version } = props;
+  const { name, version, copy = '© Applica Software Guru for' } = props;
   return (
     <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ p: '24px 16px 0px', mt: 'auto' }}>
       <Typography variant="caption">
-        <span dangerouslySetInnerHTML={{ __html: props?.copy || '' }} /> {name} - {version}
+        <span dangerouslySetInnerHTML={{ __html: copy || '' }} /> {name} - {version}
       </Typography>
     </Stack>
   );
 }
 
-Footer.propTypes = {
-  name: PropTypes.string.isRequired,
-  version: PropTypes.string.isRequired,
-  copy: PropTypes.string
-};
-Footer.defaultProps = {
-  copy: '&copy; Applica Software Guru for'
-};
-
 export { Footer };

package/src/components/Layout/Header/AppBarStyled.tsx

@@ -0,0 +1,29 @@
+import AppBar from '@mui/material/AppBar';
+import { styled } from '@mui/material/styles';
+import { useThemeConfig } from '../../../hooks';
+
+export const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !== 'open' })(
+  ({ theme, open }: { theme: any; open: boolean }) => {
+    const { drawerWidth } = useThemeConfig();
+    return {
+      zIndex: theme.zIndex.drawer + 1,
+      transition: theme.transitions.create(['width', 'margin'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen
+      }),
+      ...(!open && {
+        width: `calc(100% - ${theme.spacing(7.5)})`
+      }),
+      ...(open && {
+        marginLeft: drawerWidth,
+        width: `calc(100% - ${drawerWidth}px)`,
+        transition: theme.transitions.create(['width', 'margin'], {
+          easing: theme.transitions.easing.sharp,
+          duration: theme.transitions.duration.enteringScreen
+        })
+      })
+    };
+  }
+);
+
+export default AppBarStyled;

package/src/components/Layout/Layout.tsx

@@ -50,7 +50,6 @@ const Layout = withLayoutProvider(function Layout(props: ILayoutProps) {
             divider={false}
             icon
             icons
-            home={false}
           />
         )}
         {props.children}

package/src/components/Notification.tsx

@@ -0,0 +1,15 @@
+import { Notification as RaNotification, NotificationProps } from 'react-admin';
+import { styled } from '@mui/material/styles';
+
+const StyledNotification = styled(
+  RaNotification,
+  {}
+)(({ theme }) => ({
+  '& *': {
+    fontSize: theme.typography.body1.fontSize
+  }
+}));
+export function Notification(props: NotificationProps) {
+  return <StyledNotification {...props} />;
+}
+export default Notification;

package/src/components/index.jsx

@@ -1,3 +1,4 @@
+export * from './AuthBackground';
 import ActionsMenu from './ActionsMenu';
 import Layout from './Layout';
 import Loadable from './Loadable';

package/src/components/ra-buttons/CreateInDialogButton.tsx

@@ -16,7 +16,6 @@ import React, { useCallback, useState } from 'react';
 import { SxProps, Theme, styled } from '@mui/material/styles';
 
 import { Add } from '@mui/icons-material';
-import PropTypes from 'prop-types';
 import { Toolbar } from '../ra-forms';
 import clsx from 'clsx';
 import { useAppConfig } from '../../hooks';
@@ -43,7 +42,7 @@ const setListQueryData = (res: any, data: any) =>
 export type CreateInDialogContentProps = {
   onClose: () => void;
   record?: any;
-  redirect: RedirectionSideEffect;
+  redirect: RedirectionSideEffect | boolean | undefined;
   children: React.ReactElement;
   onSubmit?: (record: any, close: () => void) => void;
   onSuccess?: (data: any) => void;
@@ -54,7 +53,7 @@ const CreateInDialogContent = ({
   onClose,
   record,
   children,
-  redirect: _redirect,
+  redirect: _redirect = false,
   onSubmit,
   onSuccess,
   onError
@@ -80,7 +79,7 @@ const CreateInDialogContent = ({
       onClose();
       notify('ra.notification.created');
       if (_redirect !== undefined) {
-        redirect(_redirect, resource, data.id, data);
+        redirect(_redirect as RedirectionSideEffect, resource, data.id, data);
       }
       if (onSuccess) {
         onSuccess(data);
@@ -128,15 +127,6 @@ const CreateInDialogContent = ({
   );
 };
 
-CreateInDialogContent.propTypes = {
-  children: PropTypes.node,
-  onClose: PropTypes.func,
-  record: PropTypes.object,
-  redirect: PropTypes.oneOf(['list', 'edit', 'show', false])
-};
-CreateInDialogContent.defaultProps = {
-  redirect: false
-};
 const scrollStates = {
   true: { _scrollToTop: true },
   false: {}
@@ -174,25 +164,22 @@ export type CreateInDialogButtonProps = {
 };
 
 /**
- * Consente di gestire la creazione di un record, per una specifica entità, o in modalità completamente personalizzata, all'interno di una dialog.
- *
- * @param {CreateInDialogButtonProps}
- * @returns {React.ReactElement}
+ * Allows you to handle the creation of a record, for a specific entity, or in completely custom mode, within a dialog.
  */
-const CreateInDialogButton = ({
-  fullWidth,
-  maxWidth,
-  label,
+export function CreateInDialogButton({
+  fullWidth = true,
+  maxWidth = 'md',
+  label = 'ra.action.create',
   record,
   redirect,
-  scrollToTop,
+  scrollToTop = true,
   className,
   sx,
   onSubmit,
   onSuccess,
   onError,
   ...props
-}: CreateInDialogButtonProps): React.ReactElement => {
+}: CreateInDialogButtonProps): JSX.Element {
   const [open, setOpen] = useState(false);
   const translate = useTranslate();
   const resource = useResourceContext();
@@ -244,29 +231,6 @@ const CreateInDialogButton = ({
       </Dialog>
     </>
   );
-};
-
-CreateInDialogButton.defaultProps = {
-  fullWidth: true,
-  maxWidth: 'md',
-  label: 'ra.action.create',
-  scrollToTop: true
-};
-
-CreateInDialogButton.propTypes = {
-  ...Button.propTypes,
-  redirect: PropTypes.oneOf(['list', 'edit', 'show', false]),
-  fullWidth: PropTypes.bool,
-  maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]),
-  label: PropTypes.string,
-  record: PropTypes.object,
-  scrollToTop: PropTypes.bool,
-  className: PropTypes.string,
-  sx: PropTypes.object,
-  children: PropTypes.node,
-  onSubmit: PropTypes.func,
-  onSuccess: PropTypes.func,
-  onError: PropTypes.func
-};
+}
 
 export default CreateInDialogButton;

package/src/components/ra-buttons/{EditInDialogButton.jsx → EditInDialogButton.tsx}

@@ -11,13 +11,16 @@ import {
 } from 'react-admin';
 import React, { useCallback, useState } from 'react';
 
-import { Dialog } from '@mui/material';
+import { Breakpoint, Dialog } from '@mui/material';
 import { Edit } from '@mui/icons-material';
-import PropTypes from 'prop-types';
 import { Toolbar } from '../ra-forms';
 import { useAppConfig } from '../../hooks';
 
-const EditInDialogContent = ({ onClose, children }) => {
+type EditInDialogContentProps = {
+  onClose: () => void;
+  children: React.ReactElement;
+};
+const EditInDialogContent = ({ onClose, children }: EditInDialogContentProps) => {
   const notify = useNotify();
   const record = useRecordContext();
   const resource = useResourceContext();
@@ -44,6 +47,7 @@ const EditInDialogContent = ({ onClose, children }) => {
 
   return (
     <EditContextProvider
+      // @ts-ignore
       value={{
         record: data,
         isLoading,
@@ -63,12 +67,19 @@ const EditInDialogContent = ({ onClose, children }) => {
   );
 };
 
-EditInDialogContent.propTypes = {
-  children: PropTypes.node,
-  onClose: PropTypes.func
+export type EditInDialogButtonProps = {
+  fullWidth?: boolean;
+  maxWidth?: false | Breakpoint | undefined;
+  label?: string;
+  children: React.ReactElement;
 };
 
-const EditInDialogButton = ({ fullWidth, maxWidth, label, ...props }) => {
+export function EditInDialogButton({
+  fullWidth = true,
+  maxWidth = 'md',
+  label = 'ra.action.edit',
+  ...props
+}: EditInDialogButtonProps): JSX.Element {
   const [open, setOpen] = useState(false);
   const { openDialog, closeDialog } = useAppConfig();
   const resource = useResourceContext();
@@ -92,22 +103,10 @@ const EditInDialogButton = ({ fullWidth, maxWidth, label, ...props }) => {
         fullWidth={fullWidth}
         maxWidth={maxWidth}
       >
-        <EditInDialogContent {...props} onClose={handleClose} />
+        <EditInDialogContent onClose={handleClose}>{props?.children}</EditInDialogContent>
       </Dialog>
     </>
   );
-};
-
-EditInDialogButton.defaultProps = {
-  fullWidth: true,
-  maxWidth: 'md',
-  label: 'ra.action.edit'
-};
-
-EditInDialogButton.propTypes = {
-  fullWidth: PropTypes.bool,
-  maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]),
-  label: PropTypes.string
-};
+}
 
 export default EditInDialogButton;

package/src/components/ra-buttons/{ImpersonateUserButton.jsx → ImpersonateUserButton.tsx}

@@ -1,15 +1,17 @@
 import { Button, useAuthProvider, useRecordContext } from 'react-admin';
 import React, { useCallback, useState } from 'react';
-
-import PropTypes from 'prop-types';
 import { VpnKey } from '@mui/icons-material';
 
-const ImpersonateUserButton = ({ label = 'ra.auth.sign_in', ...props }) => {
+export type ImpersonateUserButtonProps = {
+  label?: string;
+};
+
+export function ImpersonateUserButton({ label = 'ra.auth.sign_in', ...props }: ImpersonateUserButtonProps): JSX.Element {
   const record = useRecordContext();
   const [loading, setLoading] = useState(false);
   const authProvider = useAuthProvider();
   const handleClick = useCallback(
-    (e) => {
+    (e: Event) => {
       e.stopPropagation();
       e.preventDefault();
       setLoading(true);
@@ -26,16 +28,13 @@ const ImpersonateUserButton = ({ label = 'ra.auth.sign_in', ...props }) => {
       color="primary"
       variant="text"
       label={label}
+      // @ts-ignore
       onClick={handleClick}
       {...props}
     >
       <VpnKey />
     </Button>
   );
-};
-
-ImpersonateUserButton.propTypes = {
-  label: PropTypes.string
-};
+}
 
 export default ImpersonateUserButton;

package/src/components/ra-buttons/index.ts

@@ -0,0 +1,3 @@
+export * from './ImpersonateUserButton';
+export * from './CreateInDialogButton';
+export * from './EditInDialogButton';