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

package/src/components/ra-forms/CardForm.tsx

@@ -0,0 +1,102 @@
+import { Form, SaveButton, useResourceContext, useTranslate } from 'react-admin';
+import { Grid, GridProps } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeConfig } from '../../hooks';
+import MainCard from '../MainCard';
+import React, { Fragment, useMemo } from 'react';
+import Toolbar from './Toolbar';
+
+export type SectionProps = {
+  children: React.ReactNode;
+  content?: boolean | undefined | null;
+  title?: string | React.ReactNode | null;
+  subheader?: string | React.ReactNode;
+  secondary?: string | React.ReactNode;
+  toolbar?: React.ReactNode | boolean;
+} & GridProps;
+
+function Section({
+  children,
+  // @ts-ignore
+  content = true,
+  title,
+  subheader = null,
+  secondary = null,
+  toolbar = false,
+  lg = 12,
+  md = 12,
+  sm = 12,
+  xs = 12,
+  ...gridProps
+}: SectionProps): JSX.Element {
+  const translate = useTranslate();
+  const resource = useResourceContext();
+  const { cardTitle, cardSubheader } = useMemo(() => {
+    const defaultTitle = (title || `resources.${resource}.title`) as string;
+    return {
+      cardTitle: translate(defaultTitle, { _: defaultTitle }),
+      cardSubheader: subheader !== null ? translate(subheader as string, { _: subheader }) : null
+    };
+  }, [resource, subheader, title, translate]);
+  return (
+    <Grid item {...gridProps} lg={lg} md={md} sm={sm} xs={xs}>
+      <MainCard content={content} title={cardTitle} subheader={cardSubheader} secondary={secondary} divider>
+        <Fragment>
+          {children}
+          {toolbar === true ? (
+            <Toolbar>
+              <SaveButton />
+            </Toolbar>
+          ) : (
+            toolbar
+          )}
+        </Fragment>
+      </MainCard>
+    </Grid>
+  );
+}
+
+type StyledFormProps = {
+  children: React.ReactNode;
+  spacing?: number;
+  defaultValues?: any;
+  theme: any;
+};
+
+const StyledForm = styled(Form, {
+  name: 'RaApplicaCardForm',
+  slot: 'root'
+})(({ theme, spacing }: StyledFormProps) => ({
+  backgroundColor: 'transparent',
+  '& .RaToolbar-desktopToolbar': {
+    marginTop: theme.spacing((spacing as number) * 2),
+    padding: 0
+  }
+}));
+
+export type CardFormProps = {
+  children: React.ReactNode;
+  spacing?: number;
+  defaultValues?: any;
+} & GridProps;
+
+/**
+ * Basic card form layout.
+ * It is a simple form layout that uses a card as the main container.
+ *
+ * @see https://mui.com/material-ui/react-stack/
+ */
+export function CardForm({ children, spacing, defaultValues, ...gridProps }: CardFormProps): JSX.Element {
+  const { spacing: themeSpacing } = useThemeConfig();
+  return (
+    // @ts-ignore
+    <StyledForm defaultValues={defaultValues} spacing={spacing || themeSpacing}>
+      <Grid container {...gridProps} spacing={spacing || themeSpacing}>
+        {children}
+      </Grid>
+    </StyledForm>
+  );
+}
+CardForm.Section = Section;
+
+export default CardForm;

package/src/components/ra-forms/ChangePasswordForm.tsx

@@ -1,18 +1,17 @@
 import { Alert, AlertTitle, Grid } from '@mui/material';
 import { EditContextProvider, ResourceContextProvider, required, useAuthProvider, useNotify, useTranslate } from 'ra-core';
-import { useCallback, useState } from 'react';
-
 import { SaveButton } from 'react-admin';
-import SimpleForm from './SimpleForm';
+import { SimpleForm } from './SimpleForm';
 import { TextInput } from '../ra-inputs';
 import { Toolbar } from '../ra-forms';
+import { useCallback, useState } from 'react';
 import { useThemeConfig } from '../../hooks';
 
 export type ChangePasswordFormProps = {
   onSuccess: () => void;
   firstAccess?: boolean;
 };
-const ChangePasswordForm = ({ onSuccess, firstAccess }: ChangePasswordFormProps) => {
+export function ChangePasswordForm({ onSuccess, firstAccess }: ChangePasswordFormProps): JSX.Element {
   const { spacing } = useThemeConfig();
   const [saving, setSaving] = useState(false);
   const authProvider = useAuthProvider();
@@ -73,6 +72,5 @@ const ChangePasswordForm = ({ onSuccess, firstAccess }: ChangePasswordFormProps)
       </EditContextProvider>
     </ResourceContextProvider>
   );
-};
-
+}
 export default ChangePasswordForm;

package/src/components/ra-forms/Create.tsx

@@ -1,10 +1,10 @@
 import _ from 'lodash';
-import { useCallback, createContext, useContext, useMemo } from 'react';
 import { CreateProps, Identifier, Create as RaCreate, RaRecord, useDataProvider, useResourceContext } from 'react-admin';
+import { Stack, CircularProgress } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import { useCallback, createContext, useContext, useMemo } from 'react';
 import { useLocation } from 'react-router';
 import { useQuery, UseQueryOptions } from 'react-query';
-import { Stack, CircularProgress } from '@mui/material';
 
 type ICreateProps<
   RecordType extends Omit<RaRecord, 'id'> = any,
@@ -18,7 +18,7 @@ type ICreateProps<
 type IResourceDefaultValue = object;
 const ResourceDefaultValueContext = createContext<IResourceDefaultValue>({});
 
-function Create(props: ICreateProps) {
+function CreateWithDefaults(props: ICreateProps) {
   const { useDefaults = false, queryOptions = {} } = props,
     resource = useResourceContext(),
     dataProvider = useDataProvider(),
@@ -67,11 +67,11 @@ function Create(props: ICreateProps) {
   );
 }
 
-function useResourceDefaultValues(): IResourceDefaultValue {
+export function useResourceDefaultValues(): IResourceDefaultValue {
   return useContext(ResourceDefaultValueContext);
 }
 
-const StyledCreate = styled(Create, {
+export const Create = styled(CreateWithDefaults, {
   name: 'RaApplicaEdit',
   slot: 'root'
 })(({ theme }) => ({
@@ -95,6 +95,4 @@ const StyledCreate = styled(Create, {
   }
 }));
 
-export default StyledCreate;
-
-export { useResourceDefaultValues };
+export default Create;

package/src/components/ra-forms/{Edit.jsx → Edit.tsx}

@@ -1,7 +1,7 @@
 import { Edit as RaEdit } from 'react-admin';
 import { styled } from '@mui/material/styles';
 
-const StyledEdit = styled(RaEdit, {
+export const Edit = styled(RaEdit, {
   name: 'RaApplicaEdit',
   slot: 'root'
 })(({ theme }) => ({
@@ -26,9 +26,9 @@ const StyledEdit = styled(RaEdit, {
   '& .RaEdit-main>.MuiPaper-root:first-of-type': {
     backgroundColor: theme.palette.background.default
   },
-  // Ci ho messo 4 ore per scrivere questa riga di codice e risolvere un problema con react-sticky-box ed i Long Form.
-  // L'overflow è di default 'hidden', a noi serve visibile per consentire a react-sticky-box di funzionare e gestire la visiblità con ancore
-  // di tutti gli elementi presenti all'interno della pagina.
+  // This line of code took me 4 hours to write and solve a problem with react-sticky-box and Long Forms.
+  // The overflow is 'hidden' by default, we need it to be visible to allow react-sticky-box to work and manage visibility with anchors
+  // of all the elements inside the page.
   '& .RaEdit-main:has(.ApplicaLongFormView)>.MuiPaper-root:first-of-type': {
     overflow: 'visible'
   },
@@ -37,4 +37,4 @@ const StyledEdit = styled(RaEdit, {
   }
 }));
 
-export default StyledEdit;
+export default Edit;

package/src/components/ra-forms/FormHeader.tsx

@@ -1,7 +1,5 @@
 import { CardHeader, Divider } from '@mui/material';
-
 import { Fragment } from 'react';
-import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { useTranslate } from 'react-admin';
 
@@ -27,14 +25,11 @@ export type FormHeaderProps = {
 };
 
 /**
- * Componente che implementa l'header di una form.
- * Può essere inserito all'interno di un CardForm o di un SimpleForm e mostra un titolo
- * con divider che copre l'intera larghezza della form.
- *
- * @param {FormHeaderProps} props
- * @returns {JSX.Element}
+ * Implements the header of a form.
+ * Can be inserted inside a CardForm or a SimpleForm and shows a title with a divider
+ * that covers the entire width of the form.
  */
-const FormHeader = ({ title, divider, variant }: FormHeaderProps): JSX.Element => {
+export function FormHeader({ title, divider = true, variant = 'h5' }: FormHeaderProps): JSX.Element {
   const translate = useTranslate();
   return (
     <Fragment>
@@ -47,17 +42,4 @@ const FormHeader = ({ title, divider, variant }: FormHeaderProps): JSX.Element =
       {divider && <StyledDivider />}
     </Fragment>
   );
-};
-
-FormHeader.propTypes = {
-  title: PropTypes.string.isRequired,
-  divider: PropTypes.bool,
-  variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
-};
-
-FormHeader.defaultProps = {
-  divider: true,
-  variant: 'h5'
-};
-
-export default FormHeader;
+}

package/src/components/ra-forms/LongForm/Content.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
-import { Grid, GridProps } from '@mui/material';
 import { Disposition } from './types';
+import { Grid, GridProps } from '@mui/material';
 
 type IContentProps = GridProps & {
   disposition?: Disposition;

package/src/components/ra-forms/LongForm/Form.tsx

@@ -1,10 +1,10 @@
 import _ from 'lodash';
 import { BaseForm, IBaseFormProps } from './BaseForm';
-import { IProviderProps, Provider } from './Provider';
-import { Disposition } from './types';
-import { Sidebar, useSidebarChildren } from './Sidebar';
 import { Content } from './Content';
+import { Disposition } from './types';
+import { IProviderProps, Provider } from './Provider';
 import { NavMenu } from './NavMenu';
+import { Sidebar, useSidebarChildren } from './Sidebar';
 import { useBaseItemChildren } from './Tab';
 
 type IFormProps = IProviderProps &

package/src/components/ra-forms/LongForm/NavMenu.tsx

@@ -12,12 +12,12 @@ import {
   ListItemAvatar,
   Badge
 } from '@mui/material';
-import { useSetActiveItem, useSyncWithLocation } from './Provider';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
+import { getLevel } from './utils';
 import { IItem } from './types';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useChildren, useIsActive, useNavigateForm } from './hooks';
-import { ExpandLess, ExpandMore } from '@mui/icons-material';
-import { getLevel } from './utils';
+import { useSetActiveItem, useSyncWithLocation } from './Provider';
 import { useThemeConfig } from '../../../hooks';
 import { useTranslate } from 'ra-core';
 

package/src/components/ra-forms/LongForm/Provider.tsx

@@ -1,9 +1,8 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useReducer } from 'react';
-import { matchPath, useLocation } from 'react-router';
-
-import { IItem } from './types';
 import _ from 'lodash';
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer } from 'react';
 import { getChildren, getItemsIds, getLevel } from './utils';
+import { IItem } from './types';
+import { matchPath, useLocation } from 'react-router';
 
 enum ActionType {
   SET_FORM_ROOT_PATH = 'setFormRootPath',

package/src/components/ra-forms/LongForm/Sidebar.tsx

@@ -1,8 +1,8 @@
 import _ from 'lodash';
+import { Box, Grid, GridProps, Stack } from '@mui/material';
 import { Children, isValidElement, useMemo } from 'react';
-import StickyBox from 'react-sticky-box';
 import { Disposition } from './types';
-import { Box, Grid, GridProps, Stack } from '@mui/material';
+import StickyBox from 'react-sticky-box';
 
 enum SidebarSectionPosition {
   TOP = 'top',

package/src/components/ra-forms/LongForm/Tab.tsx

@@ -1,12 +1,12 @@
 import _ from 'lodash';
 import { Box } from '@mui/material';
-import React, { Children, ReactElement, ReactNode, cloneElement, isValidElement, useEffect, useMemo } from 'react';
-import { useAddItem, useRemoveItem, useErrorCount } from './Provider';
-import { Optional } from 'src/types';
-import { IItem } from './types';
-import { useIsActive } from './hooks';
 import { getId } from './utils';
+import { IItem } from './types';
+import { Optional } from 'src/types';
+import { useAddItem, useRemoveItem, useErrorCount } from './Provider';
 import { useFormState } from 'react-hook-form';
+import { useIsActive } from './hooks';
+import React, { Children, ReactElement, ReactNode, cloneElement, isValidElement, useEffect, useMemo } from 'react';
 
 type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id' | 'index'> & { sources: Array<string> }>;
 type ITabProps = IBaseItemProps;

package/src/components/ra-forms/LongForm/hooks.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useMemo } from 'react';
-import { useActiveItem, useFormRootPath, useItems } from './Provider';
-import { IItem } from './types';
 import { getChildren, isChild } from './utils';
+import { IItem } from './types';
+import { useActiveItem, useFormRootPath, useItems } from './Provider';
+import { useCallback, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 
 function useIsActive(id: string): boolean {

package/src/components/ra-forms/LongForm/index.ts

@@ -1,19 +1,9 @@
-import { Form } from './Form';
 import { BaseForm } from './BaseForm';
 import { Content } from './Content';
-import {
-  Provider,
-  useActiveItem,
-  useItems,
-  useSyncWithLocation,
-  useErrorCount,
-  useSetActiveItem,
-  useAddItem,
-  useRemoveItem,
-  useFormRootPath
-} from './Provider';
-import { Sidebar, SidebarSection, SidebarSectionPosition, useSidebarChildren } from './Sidebar';
+import { Form } from './Form';
 import { NavMenu, NavMenuItem, useNavMenuItem } from './NavMenu';
+import { Provider, useActiveItem, useItems, useSyncWithLocation, useErrorCount, useSetActiveItem, useAddItem, useRemoveItem, useFormRootPath } from './Provider';
+import { Sidebar, SidebarSection, SidebarSectionPosition, useSidebarChildren } from './Sidebar';
 import { Tab, Group, useBaseItemChildren } from './Tab';
 
 type IForm = typeof Form & {

package/src/components/ra-forms/LongForm/utils.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { IItem } from './types';
-import { Optional } from 'src/types';
+import { Optional } from '../../../types';
 
 function getId(data: Optional<Pick<IItem, 'id' | 'label'>, 'id'>): string {
   return data.id ?? data.label;

package/src/components/ra-forms/Show.tsx

@@ -1,22 +1,24 @@
 import { Show as RaShow } from 'react-admin';
 import { styled } from '@mui/material/styles';
 
-const StyledShow = styled(RaShow, {
-  name: 'RaApplicaShow',
-  slot: 'root'
-})(({ theme }) => ({
-  '&>.MuiToolbar-root:first-of-type': {
-    backgroundColor: theme.palette.background.default
-  },
-  '& .RaShow-card, & > div > div > form': {
-    backgroundColor: theme.palette.background.default
-  },
-  '& .RaShow-main>.MuiPaper-root:first-of-type': {
-    // Ci ho messo 4 ore per scrivere questa riga di codice e risolvere un problema con react-sticky-box ed i Long Form.
-    // L'overflow è di default 'hidden', a noi serve visibile per consentire a react-sticky-box di funzionare e gestire la visiblità con ancore
-    // di tutti gli elementi presenti all'interno della pagina.
-    overflow: 'visible'
-  }
-}));
-
-export default StyledShow;
+export function Show(): JSX.Element {
+  // @ts-ignore
+  return styled(RaShow, {
+    name: 'RaApplicaShow',
+    slot: 'root'
+  })(({ theme }) => ({
+    '&>.MuiToolbar-root:first-of-type': {
+      backgroundColor: theme.palette.background.default
+    },
+    '& .RaShow-card, & > div > div > form': {
+      backgroundColor: theme.palette.background.default
+    },
+    '& .RaShow-main>.MuiPaper-root:first-of-type': {
+      // It took me 4 hours to write this line of code and solve a problem with react-sticky-box and Long Forms.
+      // The overflow is 'hidden' by default, we need it to be visible to allow react-sticky-box to work and manage visibility with anchors
+      // of all the elements inside the page.
+      overflow: 'visible'
+    }
+  }));
+}
+export default Show;

package/src/components/ra-forms/SimpleForm.tsx

@@ -5,13 +5,11 @@ import {
   SaveButton,
   useRecordContext
 } from 'react-admin';
-
+import { styled } from '@mui/system';
+import { useResourceTitle } from '../../hooks';
 import ActionsMenu from '../ActionsMenu';
 import MainCard from '../MainCard';
-import PropTypes from 'prop-types';
 import Toolbar from './Toolbar';
-import { styled } from '@mui/system';
-import { useResourceTitle } from '../../hooks';
 
 const ApplicaStyledSimpleForm = styled(RaSimpleForm, {
   name: 'RaApplicaSimpleForm',
@@ -33,11 +31,25 @@ export type SimpleFormProps = RaSimpleFormProps & {
   secondary?: string | React.ReactNode;
 };
 
-/**
- * @param {SimpleFormProps} props
- * @returns {JSX.Element}
- */
-const SimpleForm = ({ title, modal, content, subheader, secondary, sx, ...props }: SimpleFormProps): JSX.Element => {
+export function SimpleForm({
+  title,
+  modal = false,
+  // @ts-ignore
+  content = false,
+  subheader = null,
+  toolbar = (
+    <Toolbar>
+      <SaveButton type="button" />
+    </Toolbar>
+  ),
+  secondary = (
+    <ActionsMenu>
+      <DeleteWithConfirmButton />
+    </ActionsMenu>
+  ),
+  sx,
+  ...props
+}: SimpleFormProps): JSX.Element {
   const cardTitle = useResourceTitle(title);
   const record = useRecordContext();
   return (
@@ -59,36 +71,7 @@ const SimpleForm = ({ title, modal, content, subheader, secondary, sx, ...props
       divider
     >
       {/* @ts-ignore */}
-      <ApplicaStyledSimpleForm toolbar={<Toolbar />} {...props} />
+      <ApplicaStyledSimpleForm toolbar={toolbar} {...props} />
     </MainCard>
   );
-};
-
-SimpleForm.defaultProps = {
-  modal: false,
-  content: false,
-  subheader: null,
-  title: null,
-  toolbar: (
-    <Toolbar>
-      <SaveButton type="button" />
-    </Toolbar>
-  ),
-  secondary: (
-    <ActionsMenu>
-      <DeleteWithConfirmButton />
-    </ActionsMenu>
-  )
-};
-
-SimpleForm.propTypes = {
-  ...RaSimpleForm.propTypes,
-  modal: PropTypes.bool,
-  content: PropTypes.bool,
-  contained: PropTypes.bool,
-  subheader: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  secondary: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object])
-};
-
-export default SimpleForm;
+}

package/src/components/ra-forms/SimpleFormIterator.tsx

@@ -1,30 +1,32 @@
 import { SimpleFormIterator as RaSimpleFormIterator } from 'react-admin';
 import { styled } from '@mui/material/styles';
 
-// @ts-ignore
-const SimpleFormIterator = styled(RaSimpleFormIterator, {
-  name: 'ApplicaSimpleFormIterator',
-  root: 'root'
-})(({ theme }) => ({
-  '& .RaSimpleFormIterator-line': {
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(0.5)
-  },
-  '& .RaSimpleFormIterator-action': {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    mb: 1.5
-  },
-  '& section': {
-    width: '100%',
-    '& label': {
-      position: 'relative',
-      overflow: 'visible',
-      transform: 'none',
-      marginLeft: 0
+export function SimpleFormIterator(): JSX.Element {
+  // @ts-ignore
+  return styled(RaSimpleFormIterator, {
+    name: 'ApplicaSimpleFormIterator',
+    root: 'root'
+  })(({ theme }) => ({
+    '& .RaSimpleFormIterator-line': {
+      paddingTop: theme.spacing(1),
+      paddingBottom: theme.spacing(0.5)
+    },
+    '& .RaSimpleFormIterator-action': {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      mb: 1.5
+    },
+    '& section': {
+      width: '100%',
+      '& label': {
+        position: 'relative',
+        overflow: 'visible',
+        transform: 'none',
+        marginLeft: 0
+      }
     }
-  }
-}));
+  }));
+}
 
 export default SimpleFormIterator;