@applica-software-guru/react-admin 1.5.282 → 1.5.284

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.282"
+  "version": "1.5.284"
 }

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,94 @@
+import { Children, ReactElement, ReactNode, isValidElement, useMemo } from 'react';
+import { Box, Button, Divider, Grid, useTheme } 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 theme = useTheme();
+  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>
+          <Box
+            sx={{
+              '& .MuiToolbar-root': {
+                paddingLeft: 0,
+                paddingRight: 0,
+                paddingBottom: 0,
+                paddingTop: theme.spacing(2)
+              }
+            }}
+          >
+            {toolbar && !cancelButton ? toolbar : <Toolbar cancelButton={cancelButton} />}
+          </Box>
+        </MainCard>
+      </Grid>
+    </Grid>
+  );
+}
+
+export { Content };

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

@@ -0,0 +1,107 @@
+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)}`
+      }
+    : {}
+}));
+
+/**
+ * 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 };

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

@@ -0,0 +1,113 @@
+import { ReactElement } from 'react';
+import { Box, Stepper as MuiStepper, Step, StepIconProps, StepLabel, styled } from '@mui/material';
+import { useWizardFormContext } from './Provider';
+import { useFormState } from 'react-hook-form';
+import _ from 'lodash';
+
+interface WizardStepperProps {
+  isHorizontal: boolean;
+  setCurrentStep: (step: number) => void;
+  stepFields: Array<Array<string>>;
+}
+
+const StyledStepper = styled(MuiStepper, {
+  shouldForwardProp: (prop) => prop !== 'isHorizontal'
+})<{ isHorizontal: boolean }>(({ theme, isHorizontal }) => ({
+  paddingBottom: theme.spacing(2),
+  display: 'flex',
+  justifyContent: isHorizontal ? 'space-between' : 'flex-start',
+  '.MuiStep-root': {
+    flex: isHorizontal ? 1 : 'none',
+    maxWidth: isHorizontal ? 'none' : '100%',
+    display: 'flex',
+    justifyContent: isHorizontal ? 'center' : 'flex-start'
+  },
+  '.MuiStepConnector-line.MuiStepConnector-lineVertical': {
+    minHeight: 12
+  },
+  '.MuiStepConnector-vertical': {
+    marginLeft: 14.5
+  },
+  '.MuiStepConnector-horizontal': {
+    marginLeft: -10
+  }
+}));
+
+const StyledStepIconRoot = styled(Box)<{
+  ownerState: { completed?: boolean; active?: boolean; error?: boolean };
+}>(({ theme, ownerState }) => ({
+  backgroundColor: ownerState.error
+    ? theme.palette.error.main
+    : ownerState.completed || ownerState.active
+    ? theme.palette.primary.main
+    : theme.palette.mode === 'dark'
+    ? theme.palette.grey[200]
+    : theme.palette.grey[400],
+  zIndex: 1,
+  color: theme.palette.common.white,
+  width: 30,
+  height: 30,
+  display: 'flex',
+  borderRadius: '50%',
+  justifyContent: 'center',
+  alignItems: 'center'
+}));
+
+function StyledStepIcon({ completed, active, error, icon, className }: StepIconProps) {
+  return (
+    <StyledStepIconRoot ownerState={{ completed, active, error }} className={className}>
+      {error ? '!' : icon}
+    </StyledStepIconRoot>
+  );
+}
+
+/**
+ * Stepper component for rendering a step-by-step navigation UI.
+ *
+ * @param {Object} props - The properties object.
+ * @param {boolean} props.isHorizontal - Determines the orientation of the stepper (horizontal or vertical).
+ * @param {function} props.setCurrentStep - Function to set the current step index.
+ * @param {Array} props.stepFields - Array of fields associated with each step.
+ *
+ * @returns {JSX.Element} The rendered Stepper component.
+ */
+function Stepper({ isHorizontal, setCurrentStep, stepFields }: WizardStepperProps) {
+  const { currentStep, steps } = useWizardFormContext();
+  const { errors } = useFormState();
+
+  function handleClick(index: number) {
+    if (index <= currentStep) {
+      setCurrentStep(index);
+    }
+  }
+
+  return (
+    <StyledStepper
+      activeStep={currentStep}
+      orientation={isHorizontal ? 'horizontal' : 'vertical'}
+      isHorizontal={isHorizontal}
+      sx={{ p: 3, mt: 1 }}
+    >
+      {steps.map((step: ReactElement, index: number) => {
+        const stepHasError = stepFields[index].some((field) => _.get(errors, field));
+        const { label, icon } = step.props;
+
+        return (
+          <Step key={index}>
+            <StepLabel
+              StepIconComponent={StyledStepIcon}
+              error={stepHasError}
+              icon={icon}
+              onClick={() => handleClick(index)}
+              style={{ cursor: index <= currentStep ? 'pointer' : 'default' }}
+            >
+              {isHorizontal ? null : label}
+            </StepLabel>
+          </Step>
+        );
+      })}
+    </StyledStepper>
+  );
+}
+
+export { Stepper };

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

@@ -0,0 +1,58 @@
+import { ReactNode, cloneElement, useCallback } from 'react';
+import { Box, Button } from '@mui/material';
+import { Toolbar as RaToolbar, ToolbarProps } from '@/components/ra-forms/Toolbar';
+import { SaveButton } from 'react-admin';
+import { useTranslate } from 'ra-core';
+import { useFormContext } from 'react-hook-form';
+import { useWizardFormContext } from './Provider';
+
+interface WizardToolbarProps extends ToolbarProps {
+  cancelButton?: ReactNode;
+}
+
+/**
+ * Toolbar component for the WizardForm.
+ *
+ * This component renders a toolbar with navigation buttons for a multi-step form.
+ * It includes buttons to navigate to the previous and next steps, as well as a cancel button.
+ *
+ * @param {WizardToolbarProps} props - The properties for the Toolbar component.
+ * @param {React.ReactElement} props.cancelButton - An optional cancel button element.
+ * @param {object} props.toolbarProps - Additional properties to pass to the RaToolbar component.
+ *
+ * @returns {JSX.Element} The rendered Toolbar component.
+ */
+function Toolbar({ cancelButton, ...props }: WizardToolbarProps) {
+  const { hasNextStep, hasPreviousStep, goToNextStep, goToPreviousStep } = useWizardFormContext();
+  const translate = useTranslate();
+  const { handleSubmit } = useFormContext();
+  const onSubmit = useCallback(() => {
+    goToNextStep();
+  }, [goToNextStep]);
+
+  return (
+    <RaToolbar {...props}>
+      <Box sx={{ '& .MuiButtonBase-root': { ml: 0 } }}>
+        {
+          //@ts-ignore
+          cancelButton ? cloneElement(cancelButton) : null
+        }
+      </Box>
+      <Box sx={{ flex: '1 1 auto' }} />
+      {hasPreviousStep() && (
+        <Button variant="text" color="primary" onClick={goToPreviousStep}>
+          {translate('ra.action.back')}
+        </Button>
+      )}
+      {hasNextStep() ? (
+        <Button variant="contained" color="primary" onClick={handleSubmit(onSubmit)}>
+          {translate('ra.action.next')}
+        </Button>
+      ) : (
+        <SaveButton />
+      )}
+    </RaToolbar>
+  );
+}
+
+export { Toolbar };

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

@@ -0,0 +1,4 @@
+import { Form } from './Form';
+import { useWizardFormContext } from './Provider';
+
+export { Form as WizardForm, useWizardFormContext };

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

@@ -10,3 +10,4 @@ export * from './SimpleFormIterator';
 export * from './TabbedForm';
 export * from './TableForm';
 export * from './Toolbar';
+export * from './WizardForm';

package/src/playground/App.jsx

@@ -3,7 +3,7 @@ import { menu } from './menu';
 import { theme } from './theme';
 import { ActivatePage, ApplicaAdmin, HttpError, RecoverPage, RegisterPage, Resource } from '@/';
 import build from '@/playground/build.json';
-import { CustomPage } from '@/playground/components';
+import { CustomPage, TestWizardForm } from '@/playground/components';
 import { API_URL, APP_NAME } from '@/playground/config';
 import { ApplicaDataProvider, createAttachmentsParser } from '@applica-software-guru/crud-client';
 import { ApplicaAuthProvider, LocalStorage } from '@applica-software-guru/iam-client';
@@ -44,6 +44,7 @@ function App() {
     >
       <CustomRoutes>
         <Route path="/custom-page" element={<CustomPage />} />
+        <Route path="/wizard-form" element={<TestWizardForm />} />
       </CustomRoutes>
       <Resource name="entities/notification" {...entities.notification} />
       <Resource name="entities/user" {...entities.user} />