diff --git a/apps/demo/src/app/app.tsx b/apps/demo/src/app/app.tsx index d058ee3..3059179 100644 --- a/apps/demo/src/app/app.tsx +++ b/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() { diff --git a/apps/demo/src/app/examples/with-material-ui/atoms/previous-context.component.tsx b/apps/demo/src/app/examples/with-material-ui/atoms/previous-context.component.tsx new file mode 100644 index 0000000..1ad84f5 --- /dev/null +++ b/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 ? ( + + ) : null; +}; diff --git a/apps/demo/src/app/examples/with-material-ui/atoms/previous-redux.component.tsx b/apps/demo/src/app/examples/with-material-ui/atoms/previous-redux.component.tsx new file mode 100644 index 0000000..486052b --- /dev/null +++ b/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 ? ( + + ) : null; +}; diff --git a/apps/demo/src/app/examples/with-material-ui/dictionary.ts b/apps/demo/src/app/examples/with-material-ui/dictionary.ts index d535830..e316b1e 100644 --- a/apps/demo/src/app/examples/with-material-ui/dictionary.ts +++ b/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 }; diff --git a/apps/demo/src/app/examples/with-material-ui/dictionary/previous.component.tsx b/apps/demo/src/app/examples/with-material-ui/dictionary/previous.component.tsx deleted file mode 100644 index 951e05d..0000000 --- a/apps/demo/src/app/examples/with-material-ui/dictionary/previous.component.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { Button } from '@mui/material'; - -export const Previous = ({ label, ...props }: { label: string }) => { - return ( - - ); -}; diff --git a/apps/demo/src/app/examples/with-material-ui/dictionary/submit-context.component.tsx b/apps/demo/src/app/examples/with-material-ui/dictionary/submit-context.component.tsx new file mode 100644 index 0000000..d93d325 --- /dev/null +++ b/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 ( + + + + + ); +}; diff --git a/apps/demo/src/app/examples/with-material-ui/dictionary/submit-redux.component.tsx b/apps/demo/src/app/examples/with-material-ui/dictionary/submit-redux.component.tsx new file mode 100644 index 0000000..bdf0e84 --- /dev/null +++ b/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 ( + + + + + ); +}; diff --git a/apps/demo/src/app/examples/with-material-ui/dictionary/submit.component.tsx b/apps/demo/src/app/examples/with-material-ui/dictionary/submit.component.tsx deleted file mode 100644 index 7aab816..0000000 --- a/apps/demo/src/app/examples/with-material-ui/dictionary/submit.component.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { Button } from '@mui/material'; - -export const Submit = ({ label, ...props }: { label: string }) => { - return ( - - ); -}; diff --git a/apps/demo/src/app/examples/with-material-ui/login/form.component.tsx b/apps/demo/src/app/examples/with-material-ui/login/form.component.tsx index 8eaafc3..3b9cb54 100644 --- a/apps/demo/src/app/examples/with-material-ui/login/form.component.tsx +++ b/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 ( @@ -111,13 +106,13 @@ const Form = () => { { dispatch(setNextStep(formId)); }; - const handlePreviousStep = () => { - dispatch(setPreviousStep(formId)); - }; - useEffect( () => () => { cleanUseSubmit(); @@ -122,13 +117,13 @@ const Form = () => { { - return ( - - ); -}; diff --git a/apps/demo/src/app/examples/with-styled-components/dictionary/submit.component.tsx b/apps/demo/src/app/examples/with-styled-components/dictionary/submit.component.tsx index 66a8626..3b03ee4 100644 --- a/apps/demo/src/app/examples/with-styled-components/dictionary/submit.component.tsx +++ b/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 ( - + + {shouldDisplayPrevious && ( + + Previous + + )} + + {label} + + ); }; diff --git a/apps/demo/src/app/examples/with-styled-components/form.component.tsx b/apps/demo/src/app/examples/with-styled-components/form.component.tsx index 333de07..854020a 100644 --- a/apps/demo/src/app/examples/with-styled-components/form.component.tsx +++ b/apps/demo/src/app/examples/with-styled-components/form.component.tsx @@ -9,8 +9,7 @@ import { initForm, setNextStep, updateFormData, - getFormData, - setPreviousStep + getFormData } from '@bedrockstreaming/form-redux'; import _ from 'lodash'; @@ -67,10 +66,6 @@ const Form = () => { dispatch(setNextStep(formId)); }; - const handlePreviousStep = () => { - dispatch(setPreviousStep(formId)); - }; - useEffect( () => () => { cleanUseSubmit(); @@ -80,10 +75,10 @@ const Form = () => { return ( { + const dispatch = useDispatch(); + const shouldDisplayPrevious = useSelector(getCurrentStepIndex(formId)) !== 0; + + const handlePreviousStep = () => { + dispatch(setPreviousStep(formId)); + }; -export const Submit = ({ label, ...props }) => { return ( - + + {shouldDisplayPrevious && ( + + )} + + ); }; diff --git a/apps/docsite/src/form/form.component.jsx b/apps/docsite/src/form/form.component.jsx index 80ac915..bea9e40 100644 --- a/apps/docsite/src/form/form.component.jsx +++ b/apps/docsite/src/form/form.component.jsx @@ -110,6 +110,7 @@ const Form = () => { void; isValidating?: boolean; + formId?: string; } export function FormField({ diff --git a/libs/form-builder/src/lib/components/previousStepField.component.tsx b/libs/form-builder/src/lib/components/previousStepField.component.tsx deleted file mode 100644 index bbda6ef..0000000 --- a/libs/form-builder/src/lib/components/previousStepField.component.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import _ from 'lodash'; - -import { FormField } from './formField.component'; -import { PREVIOUS_FIELD_TYPE } from '../constants'; -import { Dictionary } from '../types'; - -export interface PreviousStepFieldProps { - dictionary: Dictionary; - onPreviousStep: (value?: any) => void; - currentStepIndex: number; - [key: string]: any; -} - -export const PreviousStepField = ({ - dictionary, - onPreviousStep, - currentStepIndex, - ...props -}: PreviousStepFieldProps) => { - if (currentStepIndex === 0) { - return null; - } - - return ( - - ); -}; - -PreviousStepField.defaultProps = { - onPreviousStep: _.noop -}; diff --git a/libs/form-builder/src/lib/components/submitField.component.tsx b/libs/form-builder/src/lib/components/submitField.component.tsx index 95bee2f..9631ae3 100644 --- a/libs/form-builder/src/lib/components/submitField.component.tsx +++ b/libs/form-builder/src/lib/components/submitField.component.tsx @@ -10,25 +10,23 @@ import { FormField } from './formField.component'; import { Dictionary } from '../types'; export interface SubmitFieldProps { + formId: string; dictionary: Dictionary; - isDirty: boolean; - isValid: boolean; - isPreFilled: boolean; + submitDisabled: boolean; + nextDisabled: boolean; getValues: UseFormGetValues; isLastStep: boolean; - isFormStepValid: boolean; submitLabel: string; onNextStep: (value: UnpackNestedValue) => void; } export function SubmitField({ + formId, dictionary, - isDirty, - isValid, - isPreFilled, + submitDisabled, + nextDisabled, getValues, isLastStep, - isFormStepValid, submitLabel, onNextStep }: SubmitFieldProps) { @@ -46,18 +44,20 @@ export function SubmitField({ ) : ( )} diff --git a/libs/form-builder/src/lib/constants.ts b/libs/form-builder/src/lib/constants.ts index 620c687..4e34507 100644 --- a/libs/form-builder/src/lib/constants.ts +++ b/libs/form-builder/src/lib/constants.ts @@ -1,5 +1,4 @@ export const SUBMIT_FIELD_TYPE = 'submit'; -export const PREVIOUS_FIELD_TYPE = 'previous'; interface DeFaultRulesNames { [key: string]: string; @@ -10,11 +9,3 @@ export const DEFAULT_RULES_NAMES: DeFaultRulesNames = { max: 'max', required: 'required' }; - -interface FormClassnames { - [key: string]: string; -} - -export const FORM_CLASSNAMES: FormClassnames = { - formActionsWrapper: 'form-actions-wrapper' -}; diff --git a/libs/form-builder/src/lib/formBuilder.tsx b/libs/form-builder/src/lib/formBuilder.tsx index 8ebdb59..abeca54 100644 --- a/libs/form-builder/src/lib/formBuilder.tsx +++ b/libs/form-builder/src/lib/formBuilder.tsx @@ -24,20 +24,18 @@ import { Stepper } from './components/stepper.component'; import { FormField } from './components/formField.component'; import { SubmitField } from './components/submitField.component'; import { getFieldRules, FieldRules } from './utils/validation.utils'; -import { PreviousStepField } from './components/previousStepField.component'; -import { FORM_CLASSNAMES } from './constants'; import { filterDependentsFieldsById } from './utils/conditionalFields.utils'; const EMPTY_OBJECT = {} as const; export interface FormBuilderProps { - defaultValues?: DefaultValues; - behavior?: keyof ValidationMode; + formId: string; schema: FormSchema; dictionary: Dictionary; - onNextStep?: (value: UnpackNestedValue) => void; - onPreviousStep?: (value: any) => void; onSubmit: SubmitHandler; + onNextStep?: (value: UnpackNestedValue) => void; + defaultValues?: DefaultValues; + behavior?: keyof ValidationMode; extraValidation?: ExtraValidation; isLastStep?: boolean; currentStepIndex?: number; @@ -46,14 +44,14 @@ export interface FormBuilderProps { } export function FormBuilder({ - defaultValues, - behavior = 'onChange', + formId, schema, dictionary, - onNextStep = _.noop, - onPreviousStep = _.noop, onSubmit, + onNextStep = _.noop, extraValidation, + defaultValues, + behavior = 'onChange', isLastStep = true, currentStepIndex = 0, formProps = EMPTY_OBJECT, @@ -184,24 +182,16 @@ export function FormBuilder({ ))} -
- - -
+ {debug && } diff --git a/libs/form-editor/src/lib/forms/dictionary/dictionary.form.tsx b/libs/form-editor/src/lib/forms/dictionary/dictionary.form.tsx index aac7277..f32554d 100644 --- a/libs/form-editor/src/lib/forms/dictionary/dictionary.form.tsx +++ b/libs/form-editor/src/lib/forms/dictionary/dictionary.form.tsx @@ -49,6 +49,7 @@ export const DictionaryForm = ({ dictionary }: { dictionary: Dictionary }) => { {schema && ( {