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

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