@applica-software-guru/react-admin 1.5.281 → 1.5.283

package/dist/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './lang';
 export * from './localStorage';
 export * from './localizedValue';
+export * from './react';
 export * from './time';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/dist/utils/react.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement, ReactNode } from 'react';
+/**
+ * This file contains utility functions that can be reused across the project.
+ */
+/**
+ * Originally made for LongForm component to find sources.
+ * Walks the children of a React element and calls a callback function for each child.
+ *
+ * @param {ReactNode} children - The children of a React element.
+ * @param {Function} callback - The callback function to call for each child.
+ */
+declare function walkChildren(children: ReactNode, callback: (el: ReactElement) => void): void;
+export { walkChildren };
+//# sourceMappingURL=react.d.ts.map

package/dist/utils/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/utils/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGhE;;GAEG;AAEH;;;;;;GAMG;AACH,iBAAS,YAAY,CAAC,QAAQ,WAAgB,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,YAAY,KAAK,IAAI,QAQnF;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/package.json

@@ -106,5 +106,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.281"
+  "version": "1.5.283"
 }

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,184 @@
+import { FC, ReactElement, memo, useCallback, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { TablePagination, TablePaginationBaseProps, Theme, Toolbar, useMediaQuery } from '@mui/material';
+import {
+  ComponentPropType,
+  ListPaginationContextValue,
+  sanitizeListRestProps,
+  useListPaginationContext,
+  useTranslate
+} from 'ra-core';
+
+import { PaginationActions, PaginationActionsProps } from './PaginationActions';
+import { debounce } from 'lodash';
+
+const Pagination: FC<PaginationProps> = memo((props) => {
+  const { rowsPerPageOptions = DefaultRowsPerPageOptions, actions, limit = null, ...rest } = props;
+  const { isLoading, hasNextPage, page, perPage, total, setPage, setPerPage } = useListPaginationContext(props);
+  const translate = useTranslate();
+  const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
+  const [currentPage, setCurrentPage] = useState(0); // Stato per la UI
+
+  const totalPages = useMemo(() => {
+    return total != null ? Math.ceil(total / perPage) : undefined;
+  }, [perPage, total]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedPageChange = useCallback(
+    debounce((page) => {
+      setPage(page + 1);
+    }, 500),
+    [setPage]
+  );
+
+  /**
+   * Warning: Material UI's page is 0-based
+   */
+  const handlePageChange = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null, page: number) => {
+      if (!event) {
+        return;
+      }
+
+      event.preventDefault();
+      if (page < 0 || (totalPages !== undefined && page > totalPages - 1)) {
+        throw new Error(
+          translate('ra.navigation.page_out_of_boundaries', {
+            page: page + 1
+          })
+        );
+      }
+
+      const arrowSelected =
+        ((event.target as HTMLElement).dataset?.testid || (event.target as HTMLElement).classList?.value) ?? '';
+      // check if user is clicking on the arrows or on the numbers
+      const isArrowClick =
+        arrowSelected.includes('MuiPaginationItem-previousNext') ||
+        arrowSelected.includes('NavigateBeforeIcon') ||
+        arrowSelected.includes('NavigateNextIcon') ||
+        arrowSelected.includes('KeyboardArrowLeftIcon') ||
+        arrowSelected.includes('KeyboardArrowRightIcon');
+
+      setCurrentPage(page);
+
+      if (isArrowClick) {
+        // apply debounced API call for arrows clicks
+        debouncedPageChange(page);
+      } else {
+        // apply immediate API call for number clicks
+        setPage(page + 1);
+      }
+    },
+    [debouncedPageChange, setPage, translate, totalPages]
+  );
+
+  const handlePerPageChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+      setPerPage(Number(event.target.value));
+    },
+    [setPerPage]
+  );
+
+  const labelDisplayedRows = useCallback(
+    ({ from, to, count }: { from: number; to: number; count: number }) =>
+      count === -1 && hasNextPage
+        ? translate('ra.navigation.partial_page_range_info', {
+            offsetBegin: from,
+            offsetEnd: to,
+            _: `%{from}-%{to} of more than %{to}`
+          })
+        : translate('ra.navigation.page_range_info', {
+            offsetBegin: from,
+            offsetEnd: to,
+            total: count === -1 ? to : count,
+            _: `%{from}-%{to} of %{count === -1 ? to : count}`
+          }),
+    [translate, hasNextPage]
+  );
+
+  const labelItem = useCallback(
+    (type: string) => translate(`ra.navigation.${type}`, { _: `Go to ${type} page` }),
+    [translate]
+  );
+
+  if (isLoading) {
+    return <Toolbar variant="dense" />;
+  }
+
+  // Avoid rendering TablePagination if "page" value is invalid
+  if (total === 0 || page < 1 || (totalPages !== undefined && page > totalPages)) {
+    if (limit != null && process.env.NODE_ENV === 'development') {
+      console.warn(
+        'The Pagination limit prop is deprecated. Empty state should be handled by the component displaying data (Datagrid, SimpleList).'
+      );
+    }
+    return null;
+  }
+
+  if (isSmall) {
+    return (
+      <TablePagination
+        count={total == null ? -1 : total}
+        rowsPerPage={perPage}
+        page={currentPage}
+        onPageChange={handlePageChange}
+        rowsPerPageOptions={emptyArray}
+        component="span"
+        labelDisplayedRows={labelDisplayedRows}
+        {...sanitizeListRestProps(rest)}
+      />
+    );
+  }
+
+  const ActionsComponent = actions
+    ? actions // overridden by caller
+    : !isLoading && total != null
+    ? PaginationActions // regular navigation
+    : undefined; // partial navigation (uses default TablePaginationActions)
+
+  return (
+    <TablePagination
+      count={total == null ? -1 : total}
+      rowsPerPage={perPage}
+      page={currentPage}
+      onPageChange={handlePageChange}
+      onRowsPerPageChange={handlePerPageChange}
+      // @ts-ignore
+      ActionsComponent={ActionsComponent}
+      nextIconButtonProps={{
+        disabled: !hasNextPage
+      }}
+      component="span"
+      labelRowsPerPage={translate('ra.navigation.page_rows_per_page')}
+      labelDisplayedRows={labelDisplayedRows}
+      getItemAriaLabel={labelItem}
+      rowsPerPageOptions={rowsPerPageOptions}
+      {...sanitizeListRestProps(rest)}
+    />
+  );
+});
+
+Pagination.propTypes = {
+  actions: ComponentPropType,
+  limit: PropTypes.element,
+  rowsPerPageOptions: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        label: PropTypes.string.isRequired,
+        value: PropTypes.number.isRequired
+      })
+    ])
+  ) as PropTypes.Validator<(number | { label: string; value: number })[] | null | undefined>
+};
+
+const DefaultRowsPerPageOptions = [5, 10, 25, 50];
+const emptyArray: any[] = [];
+
+interface PaginationProps extends TablePaginationBaseProps, Partial<ListPaginationContextValue> {
+  rowsPerPageOptions?: Array<number | { label: string; value: number }>;
+  actions?: FC<PaginationActionsProps>;
+  limit?: ReactElement;
+}
+
+export { Pagination };

package/src/components/Pagination/PaginationActions.tsx

@@ -0,0 +1,84 @@
+import { FC, memo } from 'react';
+import { styled } from '@mui/material/styles';
+import { Pagination, PaginationProps } from '@mui/material';
+import PropTypes from 'prop-types';
+import { useTranslate } from 'ra-core';
+
+const PaginationActions: FC<PaginationActionsProps> = memo((props) => {
+  const { page, rowsPerPage, count, onPageChange, size = 'small', className, ...rest } = props;
+  const translate = useTranslate();
+
+  const nbPages = Math.ceil(count / rowsPerPage) || 1;
+
+  if (nbPages === 1) {
+    return <Root className={className} />;
+  }
+
+  function getItemAriaLabel(type: 'page' | 'first' | 'last' | 'next' | 'previous', page: number, selected: boolean) {
+    if (type === 'page') {
+      return selected
+        ? translate('ra.navigation.current_page', {
+            page,
+            _: `page ${page}`
+          })
+        : translate('ra.navigation.page', {
+            page,
+            _: `Go to page ${page}`
+          });
+    }
+    return translate(`ra.navigation.${type}`, { _: `Go to ${type} page` });
+  }
+
+  return (
+    <Root className={className}>
+      <Pagination
+        size={size}
+        count={nbPages}
+        // <TablePagination>, the parent, uses 0-based pagination
+        // while <Pagination> uses 1-based pagination
+        page={page + 1}
+        onChange={(e: any, page) => onPageChange(e, page - 1)}
+        {...sanitizeRestProps(rest)}
+        getItemAriaLabel={getItemAriaLabel}
+      />
+    </Root>
+  );
+});
+
+interface PaginationActionsProps extends PaginationProps {
+  page: number;
+  rowsPerPage: number;
+  count: number;
+  onPageChange: (event: MouseEvent, page: number) => void;
+}
+/**
+ * PaginationActions propTypes are copied over from Material UI’s
+ * TablePaginationActions propTypes. See
+ * https://github.com/mui/material-ui/blob/869692ecf3812bc4577ed4dde81a9911c5949695/packages/material-ui/src/TablePaginationActions/TablePaginationActions.js#L53-L85
+ * for reference.
+ */
+PaginationActions.propTypes = {
+  count: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
+  page: PropTypes.number.isRequired,
+  rowsPerPage: PropTypes.number.isRequired,
+  color: PropTypes.oneOf(['primary', 'secondary', 'standard']),
+  size: PropTypes.oneOf(['small', 'medium', 'large'])
+};
+
+const PREFIX = 'RaPaginationActions';
+
+const Root = styled('div', {
+  name: PREFIX,
+  overridesResolver: (styles) => styles.root
+})(() => ({
+  flexShrink: 0,
+  ml: 4
+}));
+
+function sanitizeRestProps({ nextIconButtonProps, backIconButtonProps, slotProps, ...rest }: any) {
+  return rest;
+}
+
+export { PaginationActions };
+export type { PaginationActionsProps };

package/src/components/Pagination/index.ts

@@ -0,0 +1,2 @@
+export * from './Pagination';
+export * from './PaginationActions';

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

@@ -3,25 +3,16 @@ import { useIsActive } from '@/components/ra-forms/LongForm/hooks';
 import { IItem } from '@/components/ra-forms/LongForm/types';
 import { getId } from '@/components/ra-forms/LongForm/utils';
 import { Optional } from '@/types';
+import { walkChildren } from '@/utils';
 import { Box } from '@mui/material';
 import _ from 'lodash';
-import React, { Children, ReactElement, ReactNode, cloneElement, isValidElement, useEffect, useMemo } from 'react';
+import React, { Children, cloneElement, isValidElement, useEffect, useMemo } from 'react';
 import { useFormState } from 'react-hook-form';
 
 type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id' | 'index'> & { sources: Array<string> }>;
 type ITabProps = IBaseItemProps;
 type IGroupProps = IBaseItemProps;
 
-function walkChildren(children: ReactNode = [], callback: (el: ReactElement) => void) {
-  const _children = _.isArray(children) ? children : [children];
-  const validChildren = _.filter(_children, (child) => isValidElement(child));
-  _.each(validChildren, (child) => {
-    callback(child);
-    // @ts-ignore @ts-expect-error Property 'children' does not exist on type '{}'.
-    walkChildren(child?.props?.children ?? [], callback);
-  });
-}
-
 function BaseItem(props: IBaseItemProps) {
   const { errors } = useFormState();
   const countErrors = useErrorCount();

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

@@ -0,0 +1,82 @@
+import { Children, ReactElement, ReactNode, isValidElement, useMemo } from 'react';
+import { Box, Button, Divider, Grid } from '@mui/material';
+import { MainCard } from '@/components/MainCard';
+import { Toolbar } from './Toolbar';
+import { useTranslate } from 'react-admin';
+import _ from 'lodash';
+import { useWizardFormContext } from './Provider';
+import { Stepper } from './Stepper';
+import { walkChildren } from '@/utils';
+
+interface ContentProps {
+  title?: ReactNode | string;
+  subheader?: ReactNode | string;
+  secondary?: ReactNode | string;
+  toolbar?: ReactElement;
+  progress?: ReactNode;
+  isSmall: boolean;
+  modal: boolean;
+  sx?: any;
+  setCurrentStep: (step: number) => void;
+}
+
+function Content({ title, subheader, secondary, toolbar, progress, isSmall, modal, sx, setCurrentStep }: ContentProps) {
+  const { currentStep, steps } = useWizardFormContext();
+  const translate = useTranslate();
+  const isHorizontal = isSmall || modal;
+
+  const cancelButton = useMemo(() => {
+    if (!toolbar) return null;
+
+    return Children.toArray(toolbar.props.children).find(
+      (child) =>
+        isValidElement(child) && child.type === Button && child.props?.children === translate('ra.action.cancel')
+    );
+  }, [toolbar, translate]);
+
+  const stepFields: Array<Array<string>> = steps.map((step: ReactElement) => {
+    const fields: Array<string> = [];
+    const { sources } = step.props;
+    if (sources !== undefined) {
+      fields.push(...sources);
+    } else {
+      walkChildren(step, (el) => {
+        if (el?.props?.source !== undefined) {
+          fields.push(el.props.source);
+        }
+      });
+    }
+    return fields;
+  });
+
+  return (
+    <Grid container spacing={2} sx={sx}>
+      <Grid item xl={modal ? 12 : 2} lg={modal ? 12 : 3} md={modal ? 12 : 3} sm={modal ? 12 : 4} xs={12}>
+        {progress || <Stepper isHorizontal={isHorizontal} setCurrentStep={setCurrentStep} stepFields={stepFields} />}
+      </Grid>
+      {modal ? <Divider sx={{ width: '100%' }} /> : null}
+      <Grid
+        item
+        xl={modal ? 12 : 10}
+        lg={modal ? 12 : 9}
+        md={modal ? 12 : 9}
+        sm={modal ? 12 : 8}
+        xs={12}
+        sx={{ paddingTop: modal ? '0 !important' : null }}
+      >
+        <MainCard
+          title={title || steps[currentStep].props.label}
+          subheader={subheader}
+          secondary={secondary}
+          border={!modal}
+          divider
+        >
+          <Box>{steps[currentStep]}</Box>
+          {toolbar && !cancelButton ? toolbar : <Toolbar cancelButton={cancelButton} />}
+        </MainCard>
+      </Grid>
+    </Grid>
+  );
+}
+
+export { Content };

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

@@ -0,0 +1,113 @@
+import { Children, ReactElement, ReactNode, useState } from 'react';
+import { Theme, styled, useMediaQuery } from '@mui/material';
+import { FormProps, Form as RaForm } from 'react-admin';
+import { Provider } from './Provider';
+import { Content } from './Content';
+
+type WizardFormProps = FormProps & {
+  toolbar?: ReactElement;
+  progress?: ReactElement;
+  title?: ReactNode | string;
+  subheader?: ReactNode | string;
+  secondary?: ReactNode | string;
+  sx?: any;
+  modal?: boolean;
+};
+
+const StyledForm = styled(RaForm, {
+  shouldForwardProp: (prop) => prop !== 'modal'
+})<{ modal: boolean }>(({ theme, modal }) => ({
+  [theme.breakpoints.down('sm')]: !modal
+    ? {
+        paddingBottom: `${theme.spacing(2.5)}`
+      }
+    : {},
+  '& .MuiToolbar-root': {
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important',
+    paddingBottom: '0 !important',
+    paddingTop: `${theme.spacing(2)} !important`
+  }
+}));
+
+/**
+ * Form component for handling wizard-style forms with multiple steps.
+ *
+ * @param {object} props - The properties object.
+ * @param {React.ReactNode} props.children - The child components representing each step of the wizard.
+ * @param {React.ReactNode} props.toolbar - The toolbar component to be displayed.
+ * @param {React.ReactNode} props.progress - The progress indicator component.
+ * @param {string} props.title - The title of the form.
+ * @param {string | null} [props.subheader=null] - The subheader text of the form.
+ * @param {React.ReactNode | null} [props.secondary=null] - The secondary content of the form.
+ * @param {object} props.sx - The style object for custom styling.
+ * @param {boolean} [props.modal=false] - Flag indicating if the form is displayed in a modal.
+ * @param {object} props.rest - Additional properties passed to the form.
+ *
+ * @returns {JSX.Element | null} The rendered form component.
+ */
+function Form({
+  children,
+  toolbar,
+  progress,
+  title,
+  subheader = null,
+  secondary = null,
+  sx,
+  modal = false,
+  ...props
+}: WizardFormProps): JSX.Element | null {
+  const [currentStep, setCurrentStep] = useState(0);
+  const steps = Children.toArray(children) as Array<ReactElement>;
+  const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
+
+  function hasNextStep(): boolean {
+    return currentStep < steps.length - 1;
+  }
+  function hasPreviousStep(): boolean {
+    return currentStep > 0;
+  }
+
+  function goToNextStep(): void {
+    setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
+  }
+
+  function goToPreviousStep(): void {
+    setCurrentStep((prev) => Math.max(prev - 1, 0));
+  }
+
+  const wizardFormContextValue = {
+    currentStep,
+    steps,
+    hasNextStep,
+    hasPreviousStep,
+    goToNextStep,
+    goToPreviousStep
+  };
+
+  return (
+    <Provider value={wizardFormContextValue}>
+      <StyledForm {...props} modal={modal}>
+        <Content
+          title={title}
+          subheader={subheader}
+          secondary={secondary}
+          modal={modal}
+          sx={sx}
+          toolbar={toolbar}
+          progress={progress}
+          isSmall={isSmall}
+          setCurrentStep={setCurrentStep}
+        />
+      </StyledForm>
+    </Provider>
+  );
+}
+
+function Step({ children }: { children: ReactNode; label: string; icon?: ReactNode; sources?: Array<string> }) {
+  return <>{children}</>;
+}
+
+Form.Step = Step;
+
+export { Form };

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

@@ -0,0 +1,62 @@
+import { ReactElement, ReactNode, createContext, useContext } from 'react';
+
+interface WizardFormContextValue {
+  currentStep: number;
+  steps: Array<ReactElement>;
+  hasNextStep: () => boolean;
+  hasPreviousStep: () => boolean;
+  goToNextStep: () => void;
+  goToPreviousStep: () => void;
+}
+
+const WizardFormContext = createContext<WizardFormContextValue | undefined>(undefined);
+
+/**
+ * Custom hook to access the wizard form context.
+ * This hook provides access to the current step, steps, and navigation methods
+ * for a wizard form.
+ *
+ * @throws Will throw an error if used outside of a `WizardFormProvider`.
+ *
+ * @property {number} currentStep - The index of the current step in the wizard form.
+ * @property {Array<ReactElement>} steps - An array of React elements representing the steps of the wizard form.
+ *
+ * @method hasNextStep
+ * @returns {boolean} - Returns true if there is a next step available, otherwise false.
+ *
+ * @method hasPreviousStep
+ * @returns {boolean} - Returns true if there is a previous step available, otherwise false.
+ *
+ * @method goToNextStep
+ * @returns {void} - Advances to the next step in the wizard form.
+ *
+ * @method goToPreviousStep
+ * @returns {void} - Goes back to the previous step in the wizard form.
+ *
+ *
+ * @example
+ * const { hasNextStep, goToNextStep } = useWizardFormContext();
+ * return (
+ *  <Button disabled={!hasNextStep} onClick={goToNextStep}>
+ *   Next
+ * </Button>
+ * );
+ */
+function useWizardFormContext() {
+  const context = useContext(WizardFormContext);
+  if (!context) {
+    throw new Error('useWizardFormContext must be used within a WizardFormProvider');
+  }
+  return context;
+}
+
+interface WizardFormProviderProps {
+  value: WizardFormContextValue;
+  children: ReactNode;
+}
+
+function Provider({ value, children }: WizardFormProviderProps) {
+  return <WizardFormContext.Provider value={value}>{children}</WizardFormContext.Provider>;
+}
+
+export { Provider, useWizardFormContext };