@applica-software-guru/react-admin 1.0.38 → 1.0.40

package/package.json

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

package/playground/src/menu.js

@@ -66,13 +66,6 @@ const config = [
         type: 'item',
         url: '/entities/device',
         icon: TableOutlined
-      },
-      {
-        id: 'entities/work-cycle',
-        title: 'ra.menu.item.entities/work-cycle',
-        type: 'item',
-        url: '/entities/work-cycle',
-        icon: TableOutlined
       }
     ]
   }

package/playground/src/theme.js

@@ -1,11 +1,9 @@
 const theme = (theme) => ({
   components: {
     MuiPaper: {
-      styleOverrides: {
-        backgroundColor: 'yellow'
-      }
+      styleOverrides: {}
     }
   }
-})
+});
 
-export default theme
+export default theme;

package/src/components/ra-forms/Edit.jsx

@@ -8,7 +8,7 @@ const StyledEdit = styled(RaEdit, {
   '& .RaEdi-card, & > div > div > form': {
     backgroundColor: theme.palette.background.default
   },
-  '& .RaEdit-main>.MuiPaper-root:first-child': {
+  '& .RaEdit-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.

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

@@ -0,0 +1,30 @@
+import { SimpleFormIterator as RaSimpleFormIterator } from 'ra-ui-materialui';
+import { styled } from '@mui/material/styles';
+
+// @ts-ignore
+export 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',
+      ml: 0
+    }
+  }
+}));
+
+export default SimpleFormIterator;

package/src/components/ra-inputs/ArrayInput.tsx

@@ -0,0 +1,39 @@
+import LabeledArrayInput, { LabeledArrayInputProps } from './LabeledArrayInput';
+import { ArrayInput as RaArrayInput, ArrayInputProps as RaArrayInputProps } from 'react-admin';
+
+import { styled } from '@mui/material/styles';
+
+const StyledArrayInput = styled(RaArrayInput, {
+  name: 'ApplicaArrayInput',
+  slot: 'root'
+})(({ theme }) => ({
+  '& label:first-of-type': {
+    marginTop: theme.spacing(2)
+  },
+  marginTop: '0 !important',
+  '& .RaSimpleFormIterator-line > .RaSimpleFormIterator-form': {
+    paddingBottom: theme.spacing(0.5),
+    '& > div': {
+      width: '100%'
+    }
+  }
+}));
+
+export type ArrayInputProps = RaArrayInputProps & LabeledArrayInputProps;
+
+/**
+ * Espone un componente di tipo ArrayInput con stile grafico di Applica.
+ * Se vuoi utilizzare il componente puro di react-admin puoi usare RaArrayInput esposto nella libreria.
+ *
+ * @param {ArrayInputProps}
+ * @returns {React.ReactElement}
+ */
+const ArrayInput = ({ children, label, addLabel, source, helperText, ...props }: ArrayInputProps): React.ReactElement => (
+  <LabeledArrayInput label={label} addLabel={addLabel} source={source} helperText={helperText} divider>
+    <StyledArrayInput source={source} label={false} {...props}>
+      {children}
+    </StyledArrayInput>
+  </LabeledArrayInput>
+);
+
+export default ArrayInput;

package/src/components/ra-inputs/LabeledArrayInput.tsx

@@ -0,0 +1,116 @@
+import { FormHelperText, InputLabel, Stack, SxProps } from '@mui/material';
+
+import { FieldTitle } from 'react-admin';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useAppConfig } from '../../hooks';
+import { useFormContext } from 'react-hook-form';
+import { useTheme } from '@emotion/react';
+
+export type LabeledArrayInputProps = {
+  label?: string | boolean;
+  addLabel?: boolean;
+  resource?: string;
+  isRequired?: boolean;
+  source: string;
+  display?: 'legend' | 'label';
+  helperText?: string | boolean;
+  divider?: boolean;
+  sx?: SxProps;
+  children: React.ReactElement;
+};
+
+/**
+ * Consente di visualizzare un array di input con un label e un helper text con lo stile del tema Mantis.
+ *
+ * @param {LabeledArrayInputProps}
+ * @returns {React.ReactElement}
+ */
+const LabeledArrayInput = ({
+  label,
+  children,
+  display,
+  helperText,
+  sx,
+  addLabel,
+  divider,
+  ...props
+}: LabeledArrayInputProps): React.ReactElement => {
+  const theme = useTheme() as any;
+  const { getCurrentDialog } = useAppConfig();
+  const { source, resource, isRequired } = props;
+  const { getFieldState, formState } = useFormContext();
+  const { error } = getFieldState(source, formState);
+  const dialogResource = getCurrentDialog();
+
+  return (
+    <Stack
+      spacing={1}
+      sx={{
+        '& .MuiFormHelperText-root': {
+          // @see: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx#L340
+          // the 'invalid' prop is not used inside the react-admin component. This is necessary if we want to support
+          // remove error message colorization when the field is in error state.
+          color: error ? theme.palette.error.main : theme.palette.text.secondary,
+          '& span': {
+            display: 'none'
+          }
+        },
+        ...sx
+      }}
+    >
+      {display === 'label' && label !== false && addLabel !== false && (
+        <InputLabel
+          error={!!error}
+          sx={{
+            borderBottom: divider ? `1px solid ${theme.palette.divider}` : 'none',
+            pb: divider ? 1 : 0,
+            mt: divider ? 1 : 0
+          }}
+        >
+          <FieldTitle label={label} source={source} resource={dialogResource || resource} isRequired={isRequired} />
+        </InputLabel>
+      )}
+      {React.isValidElement(children)
+        ? React.cloneElement(children, {
+            // @ts-ignore
+            ...children.props,
+            ...props,
+            label: display === 'legend' ? label : false
+          })
+        : children}
+      {display === 'label' && helperText && (
+        <FormHelperText
+          sx={{
+            pl: 1.8,
+            pb: 2,
+            marginTop: '0 !important'
+          }}
+          error={!!error}
+        >
+          {helperText}
+        </FormHelperText>
+      )}
+    </Stack>
+  );
+};
+
+LabeledArrayInput.propTypes = {
+  sx: PropTypes.object,
+  children: PropTypes.element,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  addLabel: PropTypes.bool,
+  resource: PropTypes.string,
+  isRequired: PropTypes.bool,
+  source: PropTypes.string,
+  display: PropTypes.oneOf(['legend', 'label']),
+  helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  divider: PropTypes.bool
+};
+
+LabeledArrayInput.defaultProps = {
+  display: 'label',
+  divider: false
+};
+
+export default LabeledArrayInput;

package/src/components/ra-inputs/LabeledInput.jsx

@@ -6,7 +6,7 @@ import React from 'react';
 import { useAppConfig } from '../../hooks';
 import { useTheme } from '@emotion/react';
 
-const LabeledInput = ({ label, children, display, helperText, sx, addLabel, ...props }) => {
+const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divider, ...props }) => {
   const theme = useTheme();
   const { getCurrentDialog } = useAppConfig();
   const { source, resource, isRequired } = props;
@@ -31,19 +31,28 @@ const LabeledInput = ({ label, children, display, helperText, sx, addLabel, ...p
       }}
     >
       {display === 'label' && label !== false && addLabel !== false && (
-        <InputLabel error={invalid === true}>
+        <InputLabel
+          error={invalid === true}
+          sx={{
+            borderBottom: divider ? `1px solid ${theme.palette.divider}` : 'none',
+            pb: divider ? 1 : 0,
+            mt: divider ? 1 : 0
+          }}
+        >
           <FieldTitle label={label} source={source} resource={dialogResource || resource} isRequired={isRequired} />
         </InputLabel>
       )}
-      {React.cloneElement(children, {
-        ...children.props,
-        ...props,
-        label: display === 'legend' ? label : false
-      })}
+      {React.isValidElement(children)
+        ? React.cloneElement(children, {
+            ...children.props,
+            ...props,
+            label: display === 'legend' ? label : false
+          })
+        : children}
       {display === 'label' && helperText && (
         <FormHelperText
           sx={{
-            pl: 2,
+            pl: 1.8,
             pb: 2,
             marginTop: '0 !important'
           }}
@@ -65,11 +74,13 @@ LabeledInput.propTypes = {
   isRequired: PropTypes.bool,
   source: PropTypes.string,
   display: PropTypes.oneOf(['legend', 'label']),
-  helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+  helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  divider: PropTypes.bool
 };
 
 LabeledInput.defaultProps = {
-  display: 'label'
+  display: 'label',
+  divider: false
 };
 
 export default LabeledInput;

package/src/components/ra-inputs/index.jsx

@@ -1,23 +1,24 @@
-import ArrayInput from './ArrayInput'
-import AttachmentInput from './AttachmentInput'
-import AutocompleteArrayInput from './AutocompleteArrayInput'
-import AutocompleteInput from './AutocompleteInput'
-import BooleanInput from './BooleanInput'
-import DateInput from './DateInput'
-import FileInput from './FileInput'
-import ImageInput from './ImageInput'
-import LabeledInput from './LabeledInput'
-import NumberInput from './NumberInput'
-import RecordInput from './RecordInput'
-import ReferenceArrayInput from './ReferenceArrayInput'
-import ReferenceInput from './ReferenceInput'
-import ReferenceManyInput from './ReferenceManyInput'
-import SearchInput from './SearchInput'
-import SelectArrayInput from './SelectArrayInput'
-import SelectInput from './SelectInput'
-import SmartTextInput from './SmartTextInput'
-import TextInput from './TextInput'
-import TimeInput from './TimeInput'
+import ArrayInput from './ArrayInput';
+import AttachmentInput from './AttachmentInput';
+import AutocompleteArrayInput from './AutocompleteArrayInput';
+import AutocompleteInput from './AutocompleteInput';
+import BooleanInput from './BooleanInput';
+import DateInput from './DateInput';
+import FileInput from './FileInput';
+import ImageInput from './ImageInput';
+import LabeledArrayInput from './LabeledArrayInput';
+import LabeledInput from './LabeledInput';
+import NumberInput from './NumberInput';
+import RecordInput from './RecordInput';
+import ReferenceArrayInput from './ReferenceArrayInput';
+import ReferenceInput from './ReferenceInput';
+import ReferenceManyInput from './ReferenceManyInput';
+import SearchInput from './SearchInput';
+import SelectArrayInput from './SelectArrayInput';
+import SelectInput from './SelectInput';
+import SmartTextInput from './SmartTextInput';
+import TextInput from './TextInput';
+import TimeInput from './TimeInput';
 export {
   ArrayInput,
   AttachmentInput,
@@ -28,6 +29,7 @@ export {
   FileInput,
   ImageInput,
   LabeledInput,
+  LabeledArrayInput,
   NumberInput,
   RecordInput,
   ReferenceArrayInput,
@@ -38,5 +40,5 @@ export {
   SelectInput,
   SmartTextInput,
   TextInput,
-  TimeInput,
-}
+  TimeInput
+};

package/src/components/ra-lists/Datagrid.jsx

@@ -1,5 +1,5 @@
-import { Datagrid as RaDatagrid } from 'react-admin'
-import { styled } from '@mui/material/styles'
+import { Datagrid as RaDatagrid } from 'react-admin';
+import { styled } from '@mui/material/styles';
 
 const ApplicaStyledDatagrid = styled(RaDatagrid, {
   name: 'RaApplicaDatagrid',
@@ -23,20 +23,19 @@ const ApplicaStyledDatagrid = styled(RaDatagrid, {
     left: -1
   },
   '& th': {
-    backgroundColor: 'yellow',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap'
   }
-}))
+}));
 
-const Datagrid = (props) => <ApplicaStyledDatagrid {...props} />
+const Datagrid = (props) => <ApplicaStyledDatagrid {...props} />;
 
 Datagrid.propTypes = {
   ...RaDatagrid.propTypes
-}
+};
 Datagrid.defaultProps = {
   ...RaDatagrid.defaultProps
-}
+};
 
-export default Datagrid
+export default Datagrid;

package/src/index.jsx

@@ -7,7 +7,7 @@ export * from './contexts';
 export * from './utils';
 
 export {
-  ArrayInput,
+  ArrayInput as RaArrayInput,
   ArrayInputContext,
   BooleanField,
   BulkDeleteWithConfirmButton,
@@ -42,6 +42,7 @@ export {
   Resource,
   ResourceContextProvider,
   SaveButton,
+  SimpleFormIterator as RaSimpleFormIterator,
   SimpleFormIteratorContext,
   SimpleList,
   SingleFieldList,

package/dist/components/ra-forms/SimpleFormIterator.d.ts

@@ -1,5 +0,0 @@
-export const SimpleFormIterator: import("@emotion/styled").StyledComponent<Pick<import("ra-ui-materialui").SimpleFormIteratorProps, keyof import("ra-ui-materialui").SimpleFormIteratorProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {
-    ref?: import("react").Ref<import("react").Component<import("ra-ui-materialui").SimpleFormIteratorProps, any, any>> | undefined;
-}>;
-export default SimpleFormIterator;
-//# sourceMappingURL=SimpleFormIterator.d.ts.map

package/dist/components/ra-forms/SimpleFormIterator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SimpleFormIterator.d.ts","sourceRoot":"","sources":["../../../../src/components/ra-forms/SimpleFormIterator.jsx"],"names":[],"mappings":"AAGA;;GAQG"}

package/dist/components/ra-inputs/ArrayInput.d.ts

@@ -1,6 +0,0 @@
-export default ArrayInput;
-declare function ArrayInput(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace ArrayInput {
-    const propTypes: any;
-}
-//# sourceMappingURL=ArrayInput.d.ts.map

package/dist/components/ra-inputs/ArrayInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ArrayInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ra-inputs/ArrayInput.jsx"],"names":[],"mappings":";AAiBA,iFAIC"}

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

@@ -1,14 +0,0 @@
-import { SimpleFormIterator as RaSimpleFormIterator } from 'ra-ui-materialui'
-import { styled } from '@mui/material/styles'
-
-export const SimpleFormIterator = styled(RaSimpleFormIterator, {
-  name: 'ApplicaSimpleFormIterator',
-  root: 'root'
-})(({ theme }) => ({
-  '& .RaSimpleFormIterator-line': {
-    paddingTop: theme.spacing(1),
-		paddingBottom: theme.spacing(0.5),
-  }
-}))
-
-export default SimpleFormIterator

package/src/components/ra-inputs/ArrayInput.jsx

@@ -1,29 +0,0 @@
-import LabeledInput from './LabeledInput'
-import { ArrayInput as RaArrayInput } from 'react-admin'
-import { styled } from '@mui/material/styles'
-
-const StyledArrayInput = styled(RaArrayInput, {
-  name: 'RaApplicaArrayInput',
-  slot: 'root',
-})(({ theme }) => ({
-  marginTop: '0 !important',
-  '& .RaSimpleFormIterator-line > .RaSimpleFormIterator-form': {
-    paddingBottom: theme.spacing(0.5),
-    '& > div': {
-      width: '100%',
-    },
-  },
-}))
-
-const ArrayInput = (props) => (
-  <LabeledInput {...props}>
-    <StyledArrayInput {...props} />
-  </LabeledInput>
-)
-
-ArrayInput.propTypes = {
-  ...RaArrayInput.propTypes,
-  ...LabeledInput.propTypes,
-}
-
-export default ArrayInput