Various Form stepper examples

DEPLOYME.md

@@ -1 +1,12 @@
 https://vitejs.dev/guide/static-deploy
+
+### Git Config
+
+```
+git config --global user.name "Test One"
+git config --global user.email "[email protected]"
+
+git config --get user.name
+git config --get user.email
+git config --list
+```

package.json

@@ -17,6 +17,7 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.52.1",
     "react-select": "^5.8.0"
   },
   "devDependencies": {

src/App.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import MuiBasicContainer from './components/layout/MuiBasicContainer';
-import MuiFixedContainer from './components/layout/MuiFixedContainer';
+// import MuiBasicContainer from './components/layout/MuiBasicContainer';
+// import MuiFixedContainer from './components/layout/MuiFixedContainer';
 import MuiGridLayout from './components/layout/MuiGridLayout';
 
 const App = () => {

src/components/form/FormLinearStepper.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import {
+  Button,
+  TextField,
+  Select,
+  MenuItem,
+  Stepper,
+  Step,
+  StepLabel,
+  Box,
+} from '@mui/material';
+
+const steps = ['Input Text', 'Select Option'];
+
+const FormComponent = () => {
+  const [activeStep, setActiveStep] = useState(0);
+  const { handleSubmit, control } = useForm();
+
+  const onSubmit = (data) => {
+    console.log(data);
+  };
+
+  const handleNext = () => {
+    setActiveStep((prevStep) => prevStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevStep) => prevStep - 1);
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Stepper activeStep={activeStep}>
+        {steps.map((label) => (
+          <Step key={label}>
+            <StepLabel>{label}</StepLabel>
+          </Step>
+        ))}
+      </Stepper>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {activeStep === 0 && (
+          <Controller
+            name="inputText"
+            control={control}
+            defaultValue=""
+            render={({ field }) => (
+              <TextField
+                {...field}
+                label="Input Text"
+                variant="outlined"
+                fullWidth
+                margin="normal"
+              />
+            )}
+          />
+        )}
+        {activeStep === 1 && (
+          <Controller
+            name="selectOption"
+            control={control}
+            defaultValue=""
+            render={({ field }) => (
+              <Select
+                {...field}
+                label="Select Option"
+                variant="outlined"
+                fullWidth
+                margin="normal"
+              >
+                <MenuItem value=""><em>None</em></MenuItem>
+                <MenuItem value="option1">Option 1</MenuItem>
+                <MenuItem value="option2">Option 2</MenuItem>
+                <MenuItem value="option3">Option 3</MenuItem>
+              </Select>
+            )}
+          />
+        )}
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}>
+          <Button
+            disabled={activeStep === 0}
+            onClick={handleBack}
+            variant="contained"
+          >
+            Back
+          </Button>
+          {activeStep === steps.length - 1 ? (
+            <Button type="submit" variant="contained" color="primary">
+              Save
+            </Button>
+          ) : (
+            <Button onClick={handleNext} variant="contained" color="primary">
+              Next
+            </Button>
+          )}
+        </Box>
+      </form>
+    </Box>
+  );
+};
+
+export default FormComponent;

src/components/form/FormNonLinearStepper.jsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import {
+  Stepper,
+  Step,
+  StepLabel,
+  StepContent,
+  Button,
+  Select,
+  MenuItem,
+  TextField,
+  Autocomplete
+} from '@mui/material';
+
+const steps = [
+  'Select a category',
+  'Choose an option',
+  'Save your selection'
+];
+
+const options = {
+  category1: ['Option 1-1', 'Option 1-2', 'Option 1-3'],
+  category2: ['Option 2-1', 'Option 2-2', 'Option 2-3'],
+};
+
+const MyFormComponent = () => {
+  const { control, handleSubmit, watch } = useForm();
+  const [activeStep, setActiveStep] = useState(0);
+
+  const onSubmit = data => {
+    console.log(data);
+  };
+
+  const handleNext = () => {
+    setActiveStep(prevStep => prevStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep(prevStep => prevStep - 1);
+  };
+
+  const category = watch('category');
+  const autocompleteOptions = category ? options[category] || [] : [];
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stepper activeStep={activeStep} orientation="horizontal" nonLinear>
+        {steps.map((label, index) => (
+          <Step key={label} completed={false}>
+            <StepLabel>{label}</StepLabel>
+            <StepContent>
+              {index === 0 && (
+                <Controller
+                  name="category"
+                  control={control}
+                  defaultValue=""
+                  render={({ field }) => (
+                    <Select {...field} displayEmpty fullWidth>
+                      <MenuItem value="" disabled>Select a category</MenuItem>
+                      <MenuItem value="category1">Category 1</MenuItem>
+                      <MenuItem value="category2">Category 2</MenuItem>
+                    </Select>
+                  )}
+                />
+              )}
+              {index === 1 && (
+                <Controller
+                  name="option"
+                  control={control}
+                  defaultValue=""
+                  render={({ field }) => (
+                    <Autocomplete
+                      {...field}
+                      options={autocompleteOptions}
+                      renderInput={(params) => (
+                        <TextField {...params} label="Choose an option" fullWidth />
+                      )}
+                      onChange={(event, value) => field.onChange(value)}
+                    />
+                  )}
+                />
+              )}
+              {index === 2 && (
+                <Button type="submit" variant="contained" color="primary">
+                  Save
+                </Button>
+              )}
+              <div>
+                <Button
+                  disabled={activeStep === 0}
+                  onClick={handleBack}
+                  style={{ marginRight: '8px' }}
+                >
+                  Back
+                </Button>
+                {index < steps.length - 1 && (
+                  <Button variant="contained" color="primary" onClick={handleNext}>
+                    Next
+                  </Button>
+                )}
+              </div>
+            </StepContent>
+          </Step>
+        ))}
+      </Stepper>
+    </form>
+  );
+};
+
+export default MyFormComponent;