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

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/components/ra-lists/List.tsx

@@ -4,6 +4,7 @@ import { styled } from '@mui/system';
 import { ListBase, RaRecord } from 'ra-core';
 import { ReactElement } from 'react';
 import { ListProps } from 'react-admin';
+import { Pagination } from '@/components/Pagination/Pagination';
 
 /**
  * List page component
@@ -191,7 +192,7 @@ const StyledList = styled(RaList, { slot: 'root' })(({ theme }) => ({
 function List(props: ListProps): ReactElement {
   return (
     <MainCard content={false}>
-      <StyledList {...props} />
+      <StyledList {...props} pagination={<Pagination />} />
     </MainCard>
   );
 }

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} />

package/src/playground/components/ra-forms/TestWizardForm/AdvancedUsage.jsx

@@ -0,0 +1,176 @@
+import {
+  BooleanInput,
+  ReadonlyField,
+  TextInput,
+  Toolbar,
+  WizardForm,
+  required,
+  useThemeConfig,
+  useTranslate,
+  useWizardFormContext
+} from '@applica-software-guru/react-admin';
+import { Box, Button, Grid, Step, StepLabel, Stepper, Typography } from '@mui/material';
+import { SaveButton } from 'ra-ui-materialui';
+import { useFormContext } from 'react-hook-form';
+
+//il seguente form non avrà uno stile coerente, ma è solo per testare il funzionamento del WizardForm
+
+function CustomToolbar({ ...props }) {
+  const { hasNextStep, hasPreviousStep, goToNextStep, goToPreviousStep } = useWizardFormContext();
+  const translate = useTranslate();
+  const { handleSubmit } = useFormContext();
+
+  const handleNext = handleSubmit(() => {
+    goToNextStep();
+  });
+
+  return (
+    <Toolbar {...props}>
+      {hasPreviousStep() && (
+        <Button variant="text" color="primary" onClick={goToPreviousStep}>
+          {translate('ra.action.back')}
+        </Button>
+      )}
+      {hasNextStep() ? (
+        <>
+          <Button variant="contained" color="primary" onClick={goToNextStep}>
+            Skip
+          </Button>
+          <Button variant="contained" color="primary" onClick={handleNext}>
+            {translate('ra.action.next')}
+          </Button>
+        </>
+      ) : (
+        <SaveButton />
+      )}
+    </Toolbar>
+  );
+}
+
+function CustomProgress() {
+  const { steps, currentStep } = useWizardFormContext();
+  return (
+    <Stepper activeStep={currentStep} orientation="vertical">
+      {steps.map((step, index) => (
+        <Step key={index}>
+          <StepLabel>{step.props.label}</StepLabel>
+        </Step>
+      ))}
+    </Stepper>
+  );
+}
+
+function AdvancedUsage() {
+  const { spacing } = useThemeConfig();
+  return (
+    <WizardForm
+      defaultValues={{ name: 'Mario', surname: 'Rossi' }}
+      toolbar={<CustomToolbar />}
+      progress={<CustomProgress />}
+      title="Conferma ordine"
+      validate={(values) => {
+        const errors = {};
+        if (values.terms !== true) {
+          errors.terms = 'Devi accettare i termini e le condizioni';
+        }
+        return errors;
+      }}
+      secondary="Ordine #1"
+      subheader="Wizard Form"
+    >
+      <WizardForm.Step label="Indirizzo di spedizione">
+        <Grid container spacing={spacing}>
+          <Grid item xs={6}>
+            <TextInput source="name" label="Nome" validate={required()} fullWidth />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput source="surname" label="Cognome" validate={required()} fullWidth />
+          </Grid>
+          <Grid item xs={12}>
+            <TextInput source="address" label="Indirizzo" fullWidth />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput source="nation" label="Nazione" fullWidth />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput source="province" label="Provincia" fullWidth />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput source="city" label="Città" fullWidth />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput source="zip" label="Codice Postale" fullWidth />
+          </Grid>
+        </Grid>
+      </WizardForm.Step>
+      <WizardForm.Step label="Dati di fatturazione">
+        <Grid container spacing={spacing}>
+          <Grid item xs={6}>
+            <TextInput source="billingName" label="Nome sulla carta" validate={required()} fullWidth />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput source="cardNumber" label="Numero carta" validate={required()} fullWidth />
+          </Grid>
+          <Grid item xs={12}>
+            <TextInput source="expirationDate" label="Data di scadenza" fullWidth />
+          </Grid>
+          <Grid item xs={12}>
+            <TextInput source="cvv" label="CVV" fullWidth />
+          </Grid>
+        </Grid>
+      </WizardForm.Step>
+      <WizardForm.Step label="Controlla il tuo ordine">
+        <Grid container spacing={spacing}>
+          <Grid item xs={12}>
+            <Box display="flex" justifyContent="space-between">
+              <Box>
+                <Typography variant="h6">Prodotto 1</Typography>
+                <Typography variant="body2">Descrizione del prodotto 1</Typography>
+              </Box>
+              <Typography variant="body2" align="right">
+                €100.00
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={12}>
+            <Box display="flex" justifyContent="space-between">
+              <Box>
+                <Typography variant="h6">Prodotto 2</Typography>
+                <Typography variant="body2">Descrizione del prodotto 2</Typography>
+              </Box>
+              <Typography variant="body2" align="right">
+                €42.00
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={12}>
+            <Box display="flex" justifyContent="space-between">
+              <Box>
+                <Typography variant="h6">Prodotto 3</Typography>
+                <Typography variant="body2">Descrizione del prodotto 3</Typography>
+              </Box>
+              <Typography variant="body2" align="right">
+                €37.00
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={12}>
+            <Box display="flex" justifyContent="space-between">
+              <Box>
+                <Typography variant="h6">Totale</Typography>
+              </Box>
+              <Typography variant="h6" align="right">
+                €179.00
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={12}>
+            <BooleanInput source="terms" label="Accetto i termini e le condizioni" />
+          </Grid>
+        </Grid>
+      </WizardForm.Step>
+    </WizardForm>
+  );
+}
+
+export { AdvancedUsage };

package/src/playground/components/ra-forms/TestWizardForm/BaseUsage.jsx

@@ -0,0 +1,115 @@
+import { CreateInDialogButton } from '@/components';
+import { ContainerOutlined, CreditCardOutlined, UserOutlined } from '@ant-design/icons';
+import {
+  BooleanInput,
+  Create,
+  ReadonlyField,
+  TextInput,
+  WizardForm,
+  required,
+  useThemeConfig
+} from '@applica-software-guru/react-admin';
+import { Box, Grid, Typography } from '@mui/material';
+
+function BaseUsage() {
+  const { spacing } = useThemeConfig();
+  return (
+    //<CreateInDialogButton maxWidth="sm" resource="a">
+    <WizardForm>
+      <WizardForm.Step label="Indirizzo di spedizione" icon={<UserOutlined />}>
+        <Grid container spacing={spacing}>
+          <Grid item xs={6}>
+            <TextInput source="name" label="Nome" validate={required()} fullWidth />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput source="surname" label="Cognome" validate={required()} fullWidth />
+          </Grid>
+          <Grid item xs={12}>
+            <TextInput source="address" label="Indirizzo" fullWidth />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput source="nation" label="Nazione" fullWidth />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput source="province" label="Provincia" fullWidth />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput source="city" label="Città" fullWidth />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput source="zip" label="Codice Postale" fullWidth />
+          </Grid>
+        </Grid>
+      </WizardForm.Step>
+      <WizardForm.Step label="Dati di fatturazione" icon={<CreditCardOutlined />}>
+        <Grid container spacing={spacing}>
+          <Grid item xs={6}>
+            <TextInput source="billingName" label="Nome sulla carta" validate={required()} fullWidth />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput source="cardNumber" label="Numero carta" validate={required()} fullWidth />
+          </Grid>
+          <Grid item xs={12}>
+            <TextInput source="expirationDate" label="Data di scadenza" fullWidth />
+          </Grid>
+          <Grid item xs={12}>
+            <TextInput source="cvv" label="CVV" fullWidth />
+          </Grid>
+        </Grid>
+      </WizardForm.Step>
+      <WizardForm.Step label="Controlla il tuo ordine" icon={<ContainerOutlined />}>
+        <Grid container spacing={spacing}>
+          <Grid item xs={12}>
+            <Box display="flex" justifyContent="space-between">
+              <Box>
+                <Typography variant="h6">Prodotto 1</Typography>
+                <Typography variant="body2">Descrizione del prodotto 1</Typography>
+              </Box>
+              <Typography variant="body2" align="right">
+                €100.00
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={12}>
+            <Box display="flex" justifyContent="space-between">
+              <Box>
+                <Typography variant="h6">Prodotto 2</Typography>
+                <Typography variant="body2">Descrizione del prodotto 2</Typography>
+              </Box>
+              <Typography variant="body2" align="right">
+                €42.00
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={12}>
+            <Box display="flex" justifyContent="space-between">
+              <Box>
+                <Typography variant="h6">Prodotto 3</Typography>
+                <Typography variant="body2">Descrizione del prodotto 3</Typography>
+              </Box>
+              <Typography variant="body2" align="right">
+                €37.00
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={12}>
+            <Box display="flex" justifyContent="space-between">
+              <Box>
+                <Typography variant="h6">Totale</Typography>
+              </Box>
+              <Typography variant="h6" align="right">
+                €179.00
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={12}>
+            <BooleanInput source="terms" label="Accetto i termini e le condizioni" />
+          </Grid>
+        </Grid>
+      </WizardForm.Step>
+    </WizardForm>
+    //</CreateInDialogButton>
+  );
+}
+
+export { BaseUsage };

package/src/playground/components/ra-forms/TestWizardForm/TestWizardForm.jsx

@@ -0,0 +1,27 @@
+import {
+  BooleanInput,
+  ReadonlyField,
+  TextInput,
+  WizardForm,
+  required,
+  useThemeConfig
+} from '@applica-software-guru/react-admin';
+import { Box, Grid, Typography } from '@mui/material';
+import { BaseUsage } from './BaseUsage';
+import { AdvancedUsage } from './AdvancedUsage';
+
+function TestWizardForm() {
+  const { spacing } = useThemeConfig();
+  return (
+    <Grid container spacing={spacing}>
+      <Grid item xs={12}>
+        <BaseUsage />
+      </Grid>
+      <Grid item xs={12}>
+        <AdvancedUsage />
+      </Grid>
+    </Grid>
+  );
+}
+
+export { TestWizardForm };

package/src/playground/components/ra-forms/TestWizardForm/index.jsx

@@ -0,0 +1 @@
+export * from './TestWizardForm';

package/src/playground/components/ra-forms/index.jsx

@@ -2,4 +2,5 @@ export * from './CategoryForm';
 export * from './DeviceForm';
 export * from './I18nMessageForm';
 export * from './TestModelForm';
+export * from './TestWizardForm';
 export * from './UserForm';

package/src/playground/menu.jsx

@@ -36,6 +36,14 @@ export const menu = [
         url: '/custom-page',
         resource: false,
         icon: TableOutlined
+      },
+      {
+        id: 'custom-pages/wizard-form',
+        title: 'ra.menu.item.wizard_form',
+        type: 'item',
+        url: '/wizard-form',
+        resource: false,
+        icon: TableOutlined
       }
     ]
   },

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './lang';
 export * from './localStorage';
 export * from './localizedValue';
+export * from './react';
 export * from './time';

package/src/utils/react.ts

@@ -0,0 +1,25 @@
+import { ReactElement, ReactNode, isValidElement } from 'react';
+import _ from 'lodash';
+
+/**
+ * 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.
+ */
+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);
+  });
+}
+
+export { walkChildren };