@applica-software-guru/react-admin 1.4.226 → 1.5.230

package/package.json

@@ -1,52 +1,11 @@
 {
-  "name": "@applica-software-guru/react-admin",
-  "version": "1.4.226",
-  "private": false,
-  "repository": {
-    "type": "git",
-    "url": "https://bitbucket.org/applicaguru/react-admin"
-  },
-  "keywords": [
-    "iam",
-    "react-admin"
-  ],
-  "author": "Roberto Conte Rosito (Applica)",
-  "homepage": "https://bitbucket.org/applicaguru/react-admin#readme",
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "start": "vite",
-    "build": "vite build",
-    "watch": "vite build --watch",
-    "preview": "vite preview",
-    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
-    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
-    "format": "prettier --write 'src//**/*.{js,jsx,ts,tsx}' --config ./.prettierrc",
-    "test": "vitest",
-    "clear": "rm -rf node_modules && rm -rf playground/node_modules && rm package-lock.json && rm playground/package-lock.json"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx}": [
-      "yarn  eslint",
-      "yarn  format"
+  "author": "Applica Software Guru",
+  "babel": {
+    "presets": [
+      "@babel/preset-react",
+      "@babel/preset-typescript"
     ]
   },
-  "main": "dist/react-admin.cjs.js",
-  "module": "dist/react-admin.esm.js",
-  "types": "dist/index.d.ts",
-  "typings": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/react-admin.es.js",
-      "require": "./dist/react-admin.umd.js"
-    },
-    "./style.css": "./dist/style.css"
-  },
   "dependencies": {
     "@ant-design/icons": "^5.3.1",
     "@emotion/react": "^11.4",
@@ -76,34 +35,84 @@
     "@applica-software-guru/iam-client": "^1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/node": "^18.7.6",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.34.0",
-    "@typescript-eslint/parser": "^5.34.0",
-    "@vitejs/plugin-react": "^4.0.2",
-    "eslint": "^8.2.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/node": "^20.12.13",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-import-resolver-webpack": "^0.13.8",
+    "eslint-plugin-export": "^0.1.2",
+    "eslint-plugin-filenames": "^1.3.2",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "husky": "^8.0.1",
+    "eslint-plugin-sort-exports": "^0.9.1",
+    "husky": "^9.0.11",
     "jsdom": "^22.1.0",
     "lint-staged": "^13.0.3",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
-    "typescript": "^4.6.4",
-    "vite": "^4.4.2",
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-overlay": "6.0.9",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.12",
     "vite-plugin-dts": "^2.3.0",
     "vite-plugin-linter": "^2.0.2",
-    "vitest": "^0.33.0"
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.6.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/react-admin.es.js",
+      "require": "./dist/react-admin.umd.js"
+    },
+    "./style.css": "./dist/style.css"
   },
+  "homepage": "https://bitbucket.org/applicaguru/react-admin#readme",
+  "keywords": [
+    "react-admin"
+  ],
+  "license": "MIT",
+  "main": "dist/react-admin.cjs.js",
+  "module": "dist/react-admin.esm.js",
+  "name": "@applica-software-guru/react-admin",
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-admin": "4.14.5",
+    "react-admin": "4.16.16",
     "react-dom": "^18.2.0"
-  }
+  },
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://bitbucket.org/applicaguru/react-admin"
+  },
+  "scripts": {
+    "build": "tsc --outDir dist && vite build",
+    "eslint": "eslint .",
+    "format": "prettier --write .",
+    "prepare": "husky",
+    "preview": "vite preview",
+    "start": "vite",
+    "test": "vitest run",
+    "watch": "vite build --watch"
+  },
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "typings": "dist/index.d.ts",
+  "version": "1.5.230"
 }

package/src/Admin.tsx

@@ -1,9 +1,9 @@
+import { AdminContext, AdminContextProps } from './AdminContext';
 import { AdminUI, AdminUIProps, localStorageStore } from 'react-admin';
-import AdminContext, { AdminContextProps } from './AdminContext';
 
-export type AdminProps = AdminContextProps & AdminUIProps;
+type AdminProps = AdminContextProps & AdminUIProps;
 
-export function Admin(props: AdminProps): JSX.Element {
+function Admin(props: AdminProps): JSX.Element {
   const {
     authProvider,
     catchAll,
@@ -56,4 +56,5 @@ export function Admin(props: AdminProps): JSX.Element {
   );
 }
 
-export default Admin;
+export { Admin };
+export type { AdminProps };

package/src/AdminContext.tsx

@@ -1,11 +1,11 @@
-import { CoreAdminContext, CoreAdminContextProps } from 'react-admin';
 import { ScrollTop } from './components';
 import { ThemeCustomization } from './themes';
+import { CoreAdminContext, CoreAdminContextProps } from 'react-admin';
 
-export type AdminContextProps = CoreAdminContextProps & {
+type AdminContextProps = CoreAdminContextProps & {
   theme?: any;
 };
-export function AdminContext({ children, theme, ...props }: AdminContextProps): JSX.Element {
+function AdminContext({ children, theme, ...props }: AdminContextProps): JSX.Element {
   return (
     <CoreAdminContext {...props}>
       <ThemeCustomization themeOverrides={theme}>
@@ -17,4 +17,5 @@ export function AdminContext({ children, theme, ...props }: AdminContextProps):
     </CoreAdminContext>
   );
 }
-export default AdminContext;
+export { AdminContext };
+export type { AdminContextProps };

package/src/ApplicaAdmin.tsx

@@ -1,14 +1,23 @@
-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, AuthBackground } from './components';
-import React, { useMemo } from 'react';
+import { Admin } from './Admin';
+import { CatchResult, IErrorEventHandler, useErrorEventCatcher } from './dev';
 import { useI18nProvider } from './i18n';
-import Admin from './Admin';
-import { MenuProps } from './types';
-import { QueryClient } from 'react-query';
 import { ThemeCustomization } from './themes';
-import { IErrorEventHandler } from './dev/ErrorEventHandler';
+import {
+  AuthBackground,
+  GenericErrorPage,
+  Layout,
+  LoginPage,
+  MainIcon,
+  MenuConfigProvider,
+  MenuItem,
+  Notification,
+  SmallIcon
+} from '@/components';
+import { AppStateProvider } from '@/components/AppStateProvider';
+import { ThemeConfig, ThemeProvider } from '@/components/Layout/ThemeProvider';
+import React, { useMemo } from 'react';
+import { AdminProps, AuthProvider, DataProvider, I18nProvider } from 'react-admin';
+import { QueryClient } from 'react-query';
 
 const defaultQueryClient = new QueryClient({
   defaultOptions: {
@@ -18,7 +27,137 @@ const defaultQueryClient = new QueryClient({
   }
 });
 
-export type ApplicaAdminProps = AdminProps & {
+/**
+ * Define a basic super cool application based on React Admin, Mantis Theme and our style.
+ */
+function ApplicaAdmin({
+  theme,
+  themeConfig,
+  apiUrl,
+  defaultLocale = 'en',
+  development = false,
+  logoMain,
+  logoIcon,
+  loginPage = <LoginPage version="0.0.0" name="Applica" redirectTo="/" background={<AuthBackground />} />,
+  menu,
+  name,
+  copy,
+  version = '0.0.0',
+  dataProvider,
+  authProvider,
+  errorHandler,
+  error,
+  enableNotification = false,
+  enableRegistration = false,
+  enablePasswordRecover = false,
+  enableThemeToggler = false,
+  queryClient = defaultQueryClient,
+  background,
+  notificationAPI = 'entities/notification',
+  ...props
+}: ApplicaAdminProps): JSX.Element {
+  useErrorEventCatcher({
+    apiUrl,
+    errorHandler,
+    catcherFn: (error: ErrorEvent | string): CatchResult => {
+      const errorMessage = error?.toString();
+      const 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`.',
+        '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: '
+      ];
+      const isKnowBug = knownErrors.some((knownError) => errorMessage?.includes(knownError));
+      const result = new CatchResult({
+        catch: isKnowBug,
+        display: !isKnowBug,
+        log: !isKnowBug,
+        error: errorMessage
+      });
+      return result;
+    }
+  });
+  const login = useMemo(() => {
+    if (React.isValidElement(loginPage)) {
+      return React.cloneElement(loginPage, {
+        // @ts-ignore
+        name,
+        copy,
+        logo: logoMain,
+        version,
+        background,
+        enableRegistration,
+        enablePasswordRecover
+      });
+    }
+    return loginPage;
+  }, [loginPage, name, version, copy, background, logoMain, enableRegistration, enablePasswordRecover]);
+  const layout = useMemo(
+    () => (props: any) => {
+      const _logoMain = name ? <MainIcon title={name} /> : logoMain;
+      const _logoIcon = name ? <SmallIcon title={name} /> : logoIcon;
+      return (
+        <Layout
+          {...props}
+          name={name}
+          copy={copy}
+          enableThemeToggler={enableThemeToggler}
+          version={version}
+          logoMain={_logoMain}
+          logoIcon={_logoIcon}
+          notification={notificationAPI}
+          enableNotification={enableNotification}
+          error={error}
+        />
+      );
+    },
+    [logoMain, logoIcon, name, copy, version, error, notificationAPI, enableNotification, enableThemeToggler]
+  );
+  const i18nProvider = useI18nProvider({
+    apiUrl: apiUrl,
+    defaultLocale: defaultLocale,
+    allowMissing: development,
+    createMissing: development
+  }) as I18nProvider;
+
+  if (i18nProvider === undefined) {
+    return <></>;
+  } else if (i18nProvider.error) {
+    return (
+      <ThemeProvider initialConfig={themeConfig}>
+        <ThemeCustomization themeOverrides={theme}>
+          <GenericErrorPage />
+        </ThemeCustomization>
+      </ThemeProvider>
+    );
+  }
+
+  return (
+    <AppStateProvider>
+      <MenuConfigProvider menu={menu}>
+        <ThemeProvider initialConfig={themeConfig}>
+          <Admin
+            theme={theme}
+            layout={layout}
+            notification={Notification}
+            queryClient={queryClient}
+            dataProvider={dataProvider}
+            authProvider={authProvider}
+            i18nProvider={i18nProvider}
+            loginPage={login}
+            {...props}
+          />
+        </ThemeProvider>
+      </MenuConfigProvider>
+    </AppStateProvider>
+  );
+}
+
+type ApplicaAdminProps = AdminProps & {
   /**
    * Optionally, a custom theme to use in the application.
    * @remarks This theme is based on Mantis Theme (https://mantisdashboard.io/)
@@ -59,7 +198,7 @@ export type ApplicaAdminProps = AdminProps & {
   /**
    * Configured menu to display in the application.
    */
-  menu: MenuProps;
+  menu: MenuItem[];
   /**
    * The name of the application to display in the header.
    */
@@ -146,134 +285,5 @@ export type ApplicaAdminProps = AdminProps & {
   enableThemeToggler: boolean;
 };
 
-/**
- * Define a basic super cool application based on React Admin, Mantis Theme and our style.
- */
-export function ApplicaAdmin({
-  theme,
-  themeConfig,
-  apiUrl,
-  defaultLocale = 'en',
-  development = false,
-  logoMain,
-  logoIcon,
-  loginPage = <LoginPage version="0.0.0" name="Applica" redirectTo="/" background={<AuthBackground />} />,
-  menu,
-  name,
-  copy,
-  version = '0.0.0',
-  dataProvider,
-  authProvider,
-  errorHandler,
-  error,
-  enableNotification = false,
-  enableRegistration = false,
-  enablePasswordRecover = false,
-  enableThemeToggler = false,
-  queryClient = defaultQueryClient,
-  background,
-  notificationAPI = 'entities/notification',
-  ...props
-}: ApplicaAdminProps): JSX.Element {
-  useErrorEventCatcher({
-    apiUrl,
-    errorHandler,
-    catcherFn: (error: ErrorEvent | string): CatchResult => {
-      const errorMessage = error?.toString();
-      const 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`.',
-        '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: '
-      ];
-      const isKnowBug = knownErrors.some((knownError) => errorMessage?.includes(knownError));
-      const result = new CatchResult({
-        catch: isKnowBug,
-        display: !isKnowBug,
-        log: !isKnowBug,
-        error: errorMessage
-      });
-      return result;
-    }
-  });
-  const login = useMemo(() => {
-    if (React.isValidElement(loginPage)) {
-      return React.cloneElement(loginPage, {
-        // @ts-ignore
-        name,
-        copy,
-        logo: logoMain,
-        version,
-        background,
-        enableRegistration,
-        enablePasswordRecover
-      });
-    }
-    return loginPage;
-  }, [loginPage, name, version, copy, background, logoMain, enableRegistration, enablePasswordRecover]);
-  const layout = useMemo(
-    () => (props: any) => {
-      const _logoMain = name ? <MainIcon title={name} /> : logoMain;
-      const _logoIcon = name ? <SmallIcon title={name} /> : logoIcon;
-      return (
-        <Layout
-          {...props}
-          name={name}
-          copy={copy}
-          enableThemeToggler={enableThemeToggler}
-          version={version}
-          logoMain={_logoMain}
-          logoIcon={_logoIcon}
-          notification={notificationAPI}
-          enableNotification={enableNotification}
-          error={error}
-        />
-      );
-    },
-    [logoMain, logoIcon, name, version, error, notificationAPI, enableNotification]
-  );
-  const i18nProvider = useI18nProvider({
-    apiUrl: apiUrl,
-    defaultLocale: defaultLocale,
-    allowMissing: development,
-    createMissing: development
-  }) as I18nProvider;
-
-  if (i18nProvider === undefined) {
-    return <></>;
-  } else if (i18nProvider.error) {
-    return (
-      <ThemeConfigProvider initialConfig={themeConfig}>
-        <ThemeCustomization themeOverrides={theme}>
-          <GenericErrorPage />
-        </ThemeCustomization>
-      </ThemeConfigProvider>
-    );
-  }
-
-  return (
-    <AppConfigProvider>
-      <MenuConfigProvider menu={menu}>
-        <ThemeConfigProvider initialConfig={themeConfig}>
-          <Admin
-            theme={theme}
-            layout={layout}
-            notification={Notification}
-            queryClient={queryClient}
-            dataProvider={dataProvider}
-            authProvider={authProvider}
-            i18nProvider={i18nProvider}
-            loginPage={login}
-            {...props}
-          />
-        </ThemeConfigProvider>
-      </MenuConfigProvider>
-    </AppConfigProvider>
-  );
-}
-
-export default ApplicaAdmin;
+export { ApplicaAdmin };
+export type { ApplicaAdminProps };

package/src/components/@extended/{AnimateButton.jsx → AnimateButton.tsx}

@@ -1,11 +1,14 @@
-import PropTypes from 'prop-types';
-
-// third-party
 import { motion, useCycle } from 'framer-motion';
+import { PropsWithChildren } from 'react';
 
-// ==============================|| ANIMATION BUTTON ||============================== //
+type AnimateButtonProps = PropsWithChildren<{
+  type?: 'rotate' | 'slide' | 'scale';
+  direction?: 'up' | 'down' | 'left' | 'right';
+  offset?: number;
+  scale?: number | { hover: number; tap: number };
+}>;
 
-export default function AnimateButton({
+function AnimateButton({
   children,
   type = 'scale',
   direction = 'right',
@@ -14,7 +17,7 @@ export default function AnimateButton({
     hover: 1.05,
     tap: 0.95
   }
-}) {
+}: AnimateButtonProps) {
   let offset1;
   let offset2;
   switch (direction) {
@@ -52,7 +55,11 @@ export default function AnimateButton({
     case 'slide':
       if (direction === 'up' || direction === 'down') {
         return (
-          <motion.div animate={{ y: y !== undefined ? y : '' }} onHoverEnd={() => cycleY()} onHoverStart={() => cycleY()}>
+          <motion.div
+            animate={{ y: y !== undefined ? y : '' }}
+            onHoverEnd={() => cycleY()}
+            onHoverStart={() => cycleY()}
+          >
             {children}
           </motion.div>
         );
@@ -79,10 +86,5 @@ export default function AnimateButton({
   }
 }
 
-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])
-};
+export { AnimateButton };
+export type { AnimateButtonProps };

package/src/components/@extended/{Avatar.jsx → Avatar.tsx}

@@ -1,15 +1,17 @@
-// material-ui
-import { styled, useTheme } from '@mui/material/styles';
+import { getColors } from '@/themes/getColors';
+import { default as MuiAvatar } from '@mui/material/Avatar';
+import { Theme, styled, useTheme } from '@mui/material/styles';
+import { PropsWithChildren } from 'react';
 
-import MuiAvatar from '@mui/material/Avatar';
-import PropTypes from 'prop-types';
-// project import
-import getColors from '../../themes/getColors';
-
-// ==============================|| AVATAR - COLOR STYLE ||============================== //
+type GetColorStyleProps = {
+  theme: any;
+  color: string;
+  type: 'filled' | 'outlined' | 'combined';
+};
 
-function getColorStyle({ theme, color, type }) {
-  const colors = getColors(theme, color);
+function getColorStyle({ theme, color, type }: GetColorStyleProps) {
+  const colors = getColors(theme, color as any);
+  // @ts-ignore
   const { lighter, light, main, contrastText } = colors;
 
   switch (type) {
@@ -40,9 +42,7 @@ function getColorStyle({ theme, color, type }) {
   }
 }
 
-// ==============================|| AVATAR - SIZE STYLE ||============================== //
-
-function getSizeStyle(size) {
+function getSizeStyle(size: 'badge' | 'xs' | 'sm' | 'md' | 'lg' | 'xl') {
   switch (size) {
     case 'badge':
       return {
@@ -84,22 +84,32 @@ function getSizeStyle(size) {
       };
   }
 }
-
-// ==============================|| STYLED - AVATAR ||============================== //
+type AvatarStyleProps = {
+  variant: 'circular' | 'rounded' | 'square';
+  color: string;
+  type: 'filled' | 'outlined' | 'combined';
+  size: 'badge' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  theme: Theme;
+};
 
 const AvatarStyle = styled(MuiAvatar, {
   shouldForwardProp: (prop) => prop !== 'color' && prop !== 'type' && prop !== 'size'
-})(({ theme, variant, color, type, size }) => ({
+})(({ theme, color, type, size }: AvatarStyleProps) => ({
   ...getSizeStyle(size),
-  ...getColorStyle({ variant, theme, color, type }),
+  ...getColorStyle({ theme, color, type }),
   ...(size === 'badge' && {
     borderColor: theme.palette.background.default
   })
 }));
 
-// ==============================|| EXTENDED - AVATAR ||============================== //
+type AvatarProps = PropsWithChildren<{
+  color: string;
+  type: 'filled' | 'outlined' | 'combined';
+  size: 'badge' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  variant: 'circular' | 'rounded' | 'square';
+}>;
 
-export default function Avatar({ variant = 'circular', children, color = 'primary', type, size = 'md', ...others }) {
+function Avatar({ variant = 'circular', children, color = 'primary', type, size = 'md', ...others }: AvatarProps) {
   const theme = useTheme();
 
   return (
@@ -109,10 +119,5 @@ export default function Avatar({ variant = 'circular', children, color = 'primar
   );
 }
 
-Avatar.propTypes = {
-  children: PropTypes.node,
-  color: PropTypes.string,
-  type: PropTypes.string,
-  size: PropTypes.string,
-  variant: PropTypes.string
-};
+export { Avatar };
+export type { AvatarProps };