@applica-software-guru/react-admin 1.0.47 → 1.0.52

package/package.json

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

package/src/components/{MainCard.jsx → MainCard.tsx}

@@ -1,5 +1,5 @@
 import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material';
-import { lighten, useTheme } from '@mui/material/styles';
+import { SxProps, lighten, useTheme } from '@mui/material/styles';
 
 import PropTypes from 'prop-types';
 import { forwardRef } from 'react';
@@ -9,6 +9,74 @@ const headerSX = {
   '& .MuiCardHeader-action': { m: '0px auto', alignSelf: 'center' }
 };
 
+export type MainCardProps = {
+  /**
+   * Indicates if the card must be rendered with a border.
+   */
+  border?: boolean;
+  /**
+   * Indicates if the card must be rendered with a box shadow.
+   */
+  boxShadow?: boolean;
+  /**
+   * The content of the card.
+   */
+  children?: React.ReactNode | React.ReactNode[];
+  /**
+   * The subheader of the card.
+   */
+  subheader?: React.ReactNode | string;
+  /**
+   * Indicates if the card must be rendered with a content.
+   */
+  content?: boolean;
+  /**
+   * The class name of the content.
+   */
+  contentClass?: string;
+  /**
+   * The style of the content.
+   */
+  contentSX?: SxProps | any;
+  /**
+   * Indicates if the title of the card must be rendered with a dark color.
+   */
+  darkTitle?: boolean;
+  /**
+   * Indicates if the card must be rendered with a divider.
+   */
+  divider?: boolean;
+  /**
+   * The elevation of the card.
+   */
+  elevation?: number;
+  /**
+   * The secondary content of the card.
+   */
+  secondary?: React.ReactNode | string | object;
+  /**
+   * The shadow of the card.
+   * @example '0px 0px 0px 0px rgba(0,0,0,0.2)'
+   */
+  shadow?: string;
+  /**
+   * The style of the card.
+   */
+  sx?: SxProps | any;
+  /**
+   * The title of the card.
+   */
+  title?: React.ReactNode | string | object;
+  /**
+   * Indicates if the card must be rendered as a modal.
+   */
+  modal?: boolean;
+  /**
+   * The color of the card.
+   */
+  color?: 'default' | 'primary' | 'secondary';
+};
+
 const MainCard = forwardRef(
   (
     {
@@ -28,14 +96,15 @@ const MainCard = forwardRef(
       modal = false,
       color = 'default',
       ...others
-    },
+    }: MainCardProps,
     ref
   ) => {
-    const theme = useTheme();
+    const theme = useTheme() as any;
     boxShadow = theme.palette.mode === 'dark' ? boxShadow || true : boxShadow;
     return (
       <Card
         elevation={elevation || 0}
+        // @ts-ignore
         ref={ref}
         {...others}
         sx={{
@@ -69,6 +138,7 @@ const MainCard = forwardRef(
         }}
       >
         {!darkTitle && title && (
+          /** @ts-ignore */
           <CardHeader
             sx={headerSX}
             titleTypographyProps={{ variant: 'subtitle1' }}
@@ -77,6 +147,7 @@ const MainCard = forwardRef(
             subheader={subheader}
           />
         )}
+        {/** @ts-ignore */}
         {darkTitle && title && <CardHeader sx={headerSX} title={<Typography variant="h4">{title}</Typography>} action={secondary} />}
         {title && divider && <Divider />}
         {content && <CardContent sx={contentSX}>{children}</CardContent>}

package/src/components/ra-lists/{Datagrid.jsx → Datagrid.tsx}

@@ -1,8 +1,9 @@
-import { Datagrid as RaDatagrid } from 'react-admin';
+import { DatagridProps, Datagrid as RaDatagrid } from 'react-admin';
+
 import { styled } from '@mui/material/styles';
 
 const ApplicaStyledDatagrid = styled(RaDatagrid, {
-  name: 'RaApplicaDatagrid',
+  name: 'ApplicaDatagrid',
   slot: 'root'
 })(() => ({
   // Resolve an issue related to the visualization of the bulk actions toolbar.
@@ -29,7 +30,17 @@ const ApplicaStyledDatagrid = styled(RaDatagrid, {
   }
 }));
 
-const Datagrid = (props) => <ApplicaStyledDatagrid {...props} />;
+/**
+ * This component is a wrapper of the React-Admin Datagrid component.
+ * It is used to customize the Datagrid component.
+ * It is used by the List component.
+ * It is not meant to be used directly.
+ * Thsi version is designed by Applica for Mantis and expose few overrides on css styles based on this theme.
+ *
+ * @param {DatagridProps} props
+ * @returns {JSX.Element}
+ */
+const Datagrid = (props: DatagridProps): JSX.Element => <ApplicaStyledDatagrid {...props} />;
 
 Datagrid.propTypes = {
   ...RaDatagrid.propTypes

package/src/components/ra-lists/{Empty.jsx → Empty.tsx}

@@ -8,11 +8,40 @@ import PropTypes from 'prop-types';
 import { Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
+export type EmptyProps = {
+  /**
+   * The actions of the empty page.
+   *
+   * @example <Button label="Refresh" onClick={refresh} />
+   * @example <Button label="Add" onClick={add} />
+   * @example <Button label="Export" onClick={export} />
+   * @example <Button label="Import" onClick={import} />
+   **/
+  actions?: React.ReactNode;
+  /**
+   * The class name of the empty page.
+   *
+   * @example 'my-custom-empty'
+   * @example 'my-custom-empty my-custom-empty--full-width'
+   **/
+  className?: string;
+};
+
 const StyledToolbar = styled('div')(({ theme }) => ({
   padding: theme.spacing(2)
 }));
 
-const Empty = ({ actions, className, ...props }) => {
+/**
+ * The Empty component is used to display a message when the list is empty.
+ * This component can be used only inside a List component.
+ *
+ * @example
+ * <List empty={<Empty actions={<Button label="Add" onClick={add} />} />} />
+ *
+ * @param {EmptyProps}
+ * @returns {JSX.Element}
+ */
+const Empty = ({ actions, className, ...props }: EmptyProps): JSX.Element => {
   const { hasCreate } = useResourceDefinition(props);
   const resource = useResourceContext(props);
 
@@ -50,7 +79,7 @@ const Empty = ({ actions, className, ...props }) => {
   );
 };
 
-const PREFIX = 'RaApplicaEmpty';
+const PREFIX = 'ApplicaEmpty';
 
 export const EmptyClasses = {
   message: `${PREFIX}-message`,

package/src/components/ra-lists/{List.jsx → List.tsx}

@@ -1,5 +1,6 @@
+import { ListProps, List as RaList } from 'react-admin';
+
 import MainCard from '../MainCard';
-import { List as RaList } from 'react-admin';
 import { styled } from '@mui/system';
 
 const ApplicaStyledList = styled(RaList, {
@@ -63,7 +64,7 @@ const ApplicaStyledList = styled(RaList, {
   }
 }));
 
-const List = (props) => {
+const List = (props: ListProps): JSX.Element => {
   return (
     <MainCard content={false}>
       <ApplicaStyledList {...RaList.defaultProps} {...props} />

package/src/index.jsx

@@ -1,5 +1,6 @@
 export { default as Admin } from './Admin';
 export { default as ApplicaAdmin } from './ApplicaAdmin';
+export { ThemeCustomization as ThemeProvider } from './themes';
 
 export * from './hooks';
 export * from './components';