feat(libs/form-builder): remove previous button and actions wrapper (#42

)

apps/demo/src/app/app.tsx

@@ -5,7 +5,7 @@ import { FormContainer } from './examples/with-material-ui/login/form.container'
 import MUIRegisterForm from './examples/with-material-ui/register/form.component';
 import { Generator as SchemaBuilder } from '@bedrockstreaming/form-editor';
 import StyledForm from './examples/with-styled-components/form.component';
-import { dictionary } from './examples/with-material-ui/dictionary';
+import { REDUX_DICTIONARY as dictionary } from './examples/with-material-ui/dictionary';
 import { extraValidation } from './extraValidation';
 
 export function App() {

apps/demo/src/app/examples/with-material-ui/atoms/previous-context.component.tsx

@@ -0,0 +1,36 @@
+import {
+  setPreviousStep,
+  useFormsDispatch,
+  useFormsState,
+  getCurrentStepIndex
+} from '@bedrockstreaming/form-context';
+import { Button } from '@mui/material';
+
+export const Previous = ({
+  label,
+  formId,
+  ...props
+}: {
+  label: string;
+  formId: string;
+}) => {
+  const dispatch = useFormsDispatch();
+  const state = useFormsState();
+  const shouldDisplayPrevious = getCurrentStepIndex(formId)(state) !== 0;
+
+  const handlePreviousStep = () => {
+    dispatch(setPreviousStep(formId));
+  };
+
+  return shouldDisplayPrevious ? (
+    <Button
+      onClick={handlePreviousStep}
+      variant="outlined"
+      sx={{ margin: 1 }}
+      type="button"
+      {...props}
+    >
+      {label}
+    </Button>
+  ) : null;
+};

apps/demo/src/app/examples/with-material-ui/atoms/previous-redux.component.tsx

@@ -0,0 +1,35 @@
+import { Button } from '@mui/material';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  setPreviousStep,
+  getCurrentStepIndex
+} from '@bedrockstreaming/form-redux';
+
+export const Previous = ({
+  label,
+  formId,
+  ...props
+}: {
+  label: string;
+  formId: string;
+}) => {
+  const dispatch = useDispatch();
+
+  const shouldDisplayPrevious = useSelector(getCurrentStepIndex(formId)) !== 0;
+
+  const handlePreviousStep = () => {
+    dispatch(setPreviousStep(formId));
+  };
+
+  return shouldDisplayPrevious ? (
+    <Button
+      onClick={handlePreviousStep}
+      variant="outlined"
+      sx={{ margin: 1 }}
+      type="button"
+      {...props}
+    >
+      {label}
+    </Button>
+  ) : null;
+};

apps/demo/src/app/examples/with-material-ui/dictionary.ts

@@ -1,17 +1,30 @@
 import { Text } from './dictionary/text.component';
 import { Password } from './dictionary/password.component';
 import { DateInput } from './dictionary/date.component';
-import { Submit } from './dictionary/submit.component';
 import { Select } from './dictionary/select.component';
-import { Previous } from './dictionary/previous.component';
 import { Checkbox } from './dictionary/checkBox.component';
+import { Submit as SubmitRedux } from './dictionary/submit-redux.component';
+import { Submit as SubmitContext } from './dictionary/submit-context.component';
 
-export const dictionary = {
+/**
+ * Here we expose different dictionaries to demonstrate different stores management.
+ * The base dictionary is not exported since it contains no submit field.
+ */
+
+const DICTIONARY = {
   text: Text,
   password: Password,
   date: DateInput,
   select: Select,
-  checkbox: Checkbox,
-  submit: Submit,
-  previous: Previous
+  checkbox: Checkbox
+};
+
+export const REDUX_DICTIONARY = {
+  ...DICTIONARY,
+  submit: SubmitRedux
+};
+
+export const CONTEXT_DICTIONARY = {
+  ...DICTIONARY,
+  submit: SubmitContext
 };

apps/demo/src/app/examples/with-material-ui/dictionary/submit-context.component.tsx

@@ -0,0 +1,20 @@
+import { Button, Box } from '@mui/material';
+import { Previous } from '../atoms/previous-context.component';
+
+export const Submit = ({
+  label,
+  formId,
+  ...props
+}: {
+  label: string;
+  formId: string;
+}) => {
+  return (
+    <Box display="flex" justifyContent="center" width="100%">
+      <Previous label="Previous" formId={formId} />
+      <Button variant="contained" sx={{ margin: 1 }} type="submit" {...props}>
+        {label}
+      </Button>
+    </Box>
+  );
+};

apps/demo/src/app/examples/with-material-ui/dictionary/submit-redux.component.tsx

@@ -0,0 +1,20 @@
+import { Button, Box } from '@mui/material';
+import { Previous } from '../atoms/previous-redux.component';
+
+export const Submit = ({
+  label,
+  formId,
+  ...props
+}: {
+  label: string;
+  formId: string;
+}) => {
+  return (
+    <Box display="flex" justifyContent="center" width="100%">
+      <Previous label="Previous" formId={formId} />
+      <Button variant="contained" sx={{ margin: 1 }} type="submit" {...props}>
+        {label}
+      </Button>
+    </Box>
+  );
+};

apps/demo/src/app/examples/with-material-ui/login/form.component.tsx

@@ -11,8 +11,7 @@ import {
   initForm,
   setNextStep,
   updateFormData,
-  getFormData,
-  setPreviousStep
+  getFormData
 } from '@bedrockstreaming/form-context';
 import {
   Divider,
@@ -26,7 +25,7 @@ import {
 import { makeStyles } from '@mui/styles';
 
 import { config } from '../../../login.config';
-import { dictionary } from '../dictionary';
+import { CONTEXT_DICTIONARY as dictionary } from '../dictionary';
 import { useSubmit } from '../../../hooks/useLoginSubmit.hook';
 import { extraValidation } from '../../../extraValidation';
 
@@ -42,7 +41,7 @@ const {
 
 const useStyles = makeStyles({
   root: {
-    margin: '0 auto',
+    margin: '16px auto',
 
     '& .validation-rule-ul': {
       display: 'flex',
@@ -88,10 +87,6 @@ const Form = () => {
     dispatch(setNextStep(formId));
   };
 
-  const handlePreviousStep = () => {
-    dispatch(setPreviousStep(formId));
-  };
-
   return (
     <Paper className={classes.root} sx={{ p: 2, m: 2 }}>
       <Typography component="h1" variant="h6">
@@ -111,13 +106,13 @@ const Form = () => {
           </Stepper>
         </Box>
         <FormBuilder
+          formId={formId}
           dictionary={dictionary}
           schema={schema}
           defaultValues={
             _.isEmpty(previousValues) ? defaultValues : previousValues
           }
           onNextStep={handleNextStep}
-          onPreviousStep={handlePreviousStep}
           onSubmit={handleSubmit}
           currentStepIndex={currentStepIndex}
           isLastStep={isLastStep}

apps/demo/src/app/examples/with-material-ui/register/form.component.tsx

@@ -10,8 +10,7 @@ import {
   initForm,
   setNextStep,
   updateFormData,
-  getFormData,
-  setPreviousStep
+  getFormData
 } from '@bedrockstreaming/form-redux';
 
 import {
@@ -26,7 +25,7 @@ import {
 import { makeStyles } from '@mui/styles';
 
 import { config } from '../../../register.config';
-import { dictionary } from '../dictionary';
+import { REDUX_DICTIONARY as dictionary } from '../dictionary';
 import { useSubmit } from '../../../hooks/useRegisterSubmit.hook';
 import { extraValidation } from '../../../extraValidation';
 
@@ -47,7 +46,7 @@ const {
 
 const useStyles = makeStyles({
   root: {
-    margin: '0 auto',
+    margin: '16px auto',
 
     '& .validation-rule-ul': {
       display: 'flex',
@@ -92,10 +91,6 @@ const Form = () => {
     dispatch(setNextStep(formId));
   };
 
-  const handlePreviousStep = () => {
-    dispatch(setPreviousStep(formId));
-  };
-
   useEffect(
     () => () => {
       cleanUseSubmit();
@@ -122,13 +117,13 @@ const Form = () => {
           </Stepper>
         </Box>
         <FormBuilder
+          formId={formId}
           dictionary={dictionary}
           schema={schema}
           defaultValues={
             _.isEmpty(previousValues) ? defaultValues : previousValues
           }
           onNextStep={handleNextStep}
-          onPreviousStep={handlePreviousStep}
           onSubmit={handleSubmit}
           currentStepIndex={currentStepIndex}
           isLastStep={isLastStep}

apps/demo/src/app/examples/with-styled-components/dictionary.ts

@@ -2,16 +2,14 @@ import { Text } from './dictionary/text.component';
 import { Password } from './dictionary/password.component';
 import { DateInput } from './dictionary/date.component';
 import { Submit } from './dictionary/submit.component';
-import { Previous } from './dictionary/previous.component';
 import { Checkbox } from './dictionary/checkBox.component';
 import { Select } from './dictionary/select.component';
 
 export const dictionary = {
   text: Text,
   password: Password,
   date: DateInput,
-  submit: Submit,
-  previous: Previous,
   checkbox: Checkbox,
-  select: Select
+  select: Select,
+  submit: Submit
 };

apps/demo/src/app/examples/with-styled-components/dictionary/submit.component.tsx

@@ -1,7 +1,54 @@
-export const Submit = ({ label, ...props }: { label: string }) => {
+import styled from 'styled-components';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  getCurrentStepIndex,
+  setPreviousStep
+} from '@bedrockstreaming/form-redux';
+
+const ActionsWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+
+const SubmitButton = styled.button`
+  padding: 8px 16px;
+  background: rgba(150, 100, 255);
+`;
+
+const PreviousButton = styled.button`
+  padding: 8px 16px;
+  color: rgba(150, 100, 255);
+  background: white
+  border: 1px solid rgba(150, 100, 255);
+`;
+
+export const Submit = ({
+  label,
+  formId,
+  ...props
+}: {
+  label: string;
+  formId: string;
+}) => {
+  const dispatch = useDispatch();
+
+  const shouldDisplayPrevious = useSelector(getCurrentStepIndex(formId)) !== 0;
+
+  const handlePreviousStep = () => {
+    dispatch(setPreviousStep(formId));
+  };
+
   return (
-    <button type="submit" {...props}>
-      {label}
-    </button>
+    <ActionsWrapper>
+      {shouldDisplayPrevious && (
+        <PreviousButton onClick={handlePreviousStep} type="button">
+          Previous
+        </PreviousButton>
+      )}
+      <SubmitButton type="submit" {...props}>
+        {label}
+      </SubmitButton>
+    </ActionsWrapper>
   );
 };