Improve storybook story

packages/stepper/package.json

@@ -56,9 +56,9 @@
     "i18next": "^20.1.0",
     "prop-types": "^15.5.10",
     "react": ">= 16.14.0",
-    "react-dom": ">= 16.14.0",
     "react-i18next": "^11.18.6",
-    "react-redux": "^7.2.9",
+    "react-dom": ">= 16.14.0",
+    "react-hook-form": ">=6.15.8",
     "react-transition-group": "^2.3.1"
   },
   "publishConfig": {

packages/stepper/src/components/StepperForm/StepperForm.component.tsx

@@ -1,57 +1,37 @@
 import { Stepper as StepperDS } from '@talend/design-system';
-import { useStepperForm } from '../../hooks/useStepperForm/useStepperForm.hook';
-import StepperFormContext from './StepperForm.context';
+import { useContext } from 'react';
+import { StepperFormContext } from './StepperForm.context';
 import style from './StepperForm.module.scss';
 import { StepperProps } from './StepperForm.types';
 import { getStepComponent } from './StepperForm.utils';
-import { StepperFormFooter } from './StepperFormFooter/StepperFormFooter.component';
 import { StepperFormHeader } from './StepperFormHeader/StepperFormHeader.component';
 
-const StepperForm = ({ initalStepIndex = 0, footer, header, isLoading, steps }: StepperProps) => {
-	const {
-		onNextStep,
-		onPreviousStep,
-		currentStep,
-		steps: stepperSteps,
-	} = useStepperForm(steps, initalStepIndex);
-
+const StepperForm = ({ header, isLoading }: StepperProps) => {
+	const { steps, currentStep } = useContext(StepperFormContext);
 	const Component = steps[currentStep].component;
+
 	return (
-		<StepperFormContext.Provider value={{ currentStep, isLoading, stepperSteps }}>
-			<div className={style['stepper-form']}>
-				<div className={style['stepper-form__steps']}>
-					<StepperDS currentStepIndex={currentStep}>
-						{stepperSteps.map((step, index) => {
-							const { key, navigation, tooltip, ...rest } = step;
-							const Step = getStepComponent(currentStep, index, !!navigation?.disableCause);
-							return (
-								<Step key={`step-${key}`} tooltip={navigation?.disableCause ?? tooltip} {...rest} />
-							);
-						})}
-					</StepperDS>
-				</div>
-				<div className={style['stepper-form__container']}>
-					<StepperFormHeader {...header} />
+		<div className={style['stepper-form']}>
+			<div className={style['stepper-form__steps']}>
+				<StepperDS currentStepIndex={currentStep} loading={isLoading}>
+					{steps.map((step, index) => {
+						const { key, navigation, tooltip, ...rest } = step;
+						const Step = getStepComponent(currentStep, index, !!navigation?.disableCause);
 
-					<div className={style['stepper-form__content']}>
-						<Component />
-					</div>
+						return (
+							<Step key={`step-${key}`} tooltip={navigation?.disableCause ?? tooltip} {...rest} />
+						);
+					})}
+				</StepperDS>
+			</div>
+			<div className={style['stepper-form__container']}>
+				<StepperFormHeader {...header} />
 
-					<StepperFormFooter
-						{...footer}
-						isLoading={isLoading}
-						onPrevious={() => {
-							onPreviousStep();
-							footer.onPrevious?.();
-						}}
-						onNext={() => {
-							onNextStep();
-							footer.onNext?.();
-						}}
-					/>
+				<div className={style['stepper-form__content']}>
+					<Component />
 				</div>
 			</div>
-		</StepperFormContext.Provider>
+		</div>
 	);
 };
 

packages/stepper/src/components/StepperForm/StepperForm.context.tsx

@@ -0,0 +1,55 @@
+import { createContext, ReactNode } from 'react';
+
+import { useStepperForm } from '../../hooks/useStepperForm/useStepperForm.hook';
+import { StepperState } from '../../hooks/useStepperForm/useStepperForm.types';
+import { StepperStep } from './StepperForm.types';
+
+const emptyFn = () => {};
+
+interface StepperFormValues {
+	currentStep: number;
+	onDisableStep: (stepKey: string, cause: string) => void;
+	onEnableStep: (stepKey: string) => void;
+	onNext: () => void;
+	onPrevious: () => void;
+	steps: StepperState;
+}
+
+export const StepperFormContext = createContext<StepperFormValues>({
+	onDisableStep: emptyFn,
+	onEnableStep: emptyFn,
+	onNext: emptyFn,
+	onPrevious: emptyFn,
+	steps: [],
+	currentStep: 0,
+});
+
+export interface StepperFormProviderProps {
+	children: ReactNode;
+	initialStepIndex: number;
+	steps: StepperStep[];
+}
+
+export const StepperFormContextProvider = ({
+	children,
+	initialStepIndex,
+	steps,
+}: StepperFormProviderProps) => {
+	const { currentStep, onDisableStep, onEnableStep, onNextStep, onPreviousStep, stepperSteps } =
+		useStepperForm(steps, initialStepIndex);
+
+	return (
+		<StepperFormContext.Provider
+			value={{
+				currentStep,
+				onDisableStep,
+				onEnableStep,
+				onNext: onNextStep,
+				onPrevious: onPreviousStep,
+				steps: stepperSteps,
+			}}
+		>
+			{children}
+		</StepperFormContext.Provider>
+	);
+};

packages/stepper/src/components/StepperForm/StepperForm.module.scss

@@ -33,6 +33,10 @@
 
 	&__content {
 		height: calc(100% - 11.5rem);
+
+		fieldset {
+			height: 100%;
+		}
 	}
 
 	&__footer {

packages/stepper/src/components/StepperForm/StepperForm.types.ts

@@ -1,5 +1,4 @@
 import { ComponentType } from 'react';
-import { StepperFormFooter } from './StepperFormFooter/StepperFormFooter.types';
 import { StepperFormHeader } from './StepperFormHeader/StepperFormHeader.types';
 
 export interface StepperStepNavigation {
@@ -16,9 +15,6 @@ export interface StepperStep {
 }
 
 export interface StepperProps {
-	footer: StepperFormFooter;
 	header: StepperFormHeader;
-	initalStepIndex?: number;
 	isLoading?: boolean;
-	steps: StepperStep[];
 }

packages/stepper/src/components/StepperForm/StepperForm.utils.ts

@@ -1,6 +1,8 @@
 import type { ElementType } from 'react';
 
 import { Stepper } from '@talend/design-system';
+import { StepperStep } from './StepperForm.types';
+import { StepperState } from '../../hooks/useStepperForm/useStepperForm.types';
 
 export const getStepComponent = (
 	current: number,
@@ -16,3 +18,19 @@ export const getStepComponent = (
 	}
 	return Stepper.Step.Enabled;
 };
+
+export const getStepperState = (initialSteps: StepperStep[]) => {
+	const steps: StepperState = [];
+
+	initialSteps.forEach((step: StepperStep, index: number) => {
+		steps.push({
+			...step,
+			navigation: {
+				previous: index - 1 >= 0 ? initialSteps[index - 1].key : undefined,
+				next: index + 1 < initialSteps.length ? initialSteps[index + 1].key : undefined,
+			},
+		});
+	});
+
+	return steps;
+};

packages/stepper/src/components/StepperForm/StepperFormFooter/StepperFormFooter.component.tsx

@@ -2,28 +2,28 @@ import { ButtonPrimary, ButtonSecondary, Divider, StackHorizontal } from '@talen
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import I18N from '../../../constants/i18n';
-import StepperFormContext from '../StepperForm.context';
+import { StepperFormContext } from '../StepperForm.context';
 import style from '../StepperForm.module.scss';
 import { StepperFormFooterProps } from './StepperFormFooter.types';
 
-export const StepperFormFooter = ({
+const StepperFormFooter = ({
+	children,
 	dataFeature,
-	extraActions,
 	isLoading,
 	onCancel,
 	onPrevious,
 	onNext,
 	onSubmit,
 }: StepperFormFooterProps) => {
 	const { t } = useTranslation(I18N.STEPPER_NAMESPACE);
-	const hasRightButtons = onPrevious || onNext || extraActions;
-	const { currentStep, stepperSteps } = useContext(StepperFormContext);
+	const { currentStep, steps } = useContext(StepperFormContext);
 
-	const currentStepNavigation = stepperSteps[currentStep].navigation;
+	const currentStepNavigation = steps[currentStep].navigation;
 
-	const showNextButton = currentStepNavigation?.next && currentStep < stepperSteps.length - 1;
+	const showNextButton = currentStepNavigation?.next && currentStep < steps.length - 1;
 	const showPreviousButton = currentStepNavigation?.previous;
-	const showRunButton = currentStep === stepperSteps.length - 1;
+	const showRunButton = !currentStepNavigation?.next;
+	const hasRightButtons = showPreviousButton || showNextButton || children || showRunButton;
 
 	return (
 		<div className={style['stepper-form__footer']}>
@@ -39,7 +39,7 @@ export const StepperFormFooter = ({
 					</ButtonSecondary>
 				)}
 
-				{extraActions?.map(action => action)}
+				{children}
 
 				{showNextButton && onNext && (
 					<ButtonPrimary onClick={onNext} data-feature={dataFeature?.next} disabled={isLoading}>
@@ -56,3 +56,5 @@ export const StepperFormFooter = ({
 		</div>
 	);
 };
+
+export default StepperFormFooter;

packages/stepper/src/components/StepperForm/StepperFormFooter/StepperFormFooter.types.ts

@@ -1,11 +1,13 @@
+import { ReactNode } from 'react';
+
 export interface StepperFormFooterProps {
+	children?: ReactNode;
 	dataFeature?: {
 		cancel?: string;
 		next?: string;
 		previous?: string;
 		submit?: string;
 	};
-	extraActions?: JSX.Element[];
 	isLoading?: boolean;
 	onCancel(): void;
 	onNext?(): void;

packages/stepper/src/components/StepperForm/StepperFormFooter/index.ts

@@ -0,0 +1,3 @@
+import StepperFormFooter from './StepperFormFooter.component';
+
+export default StepperFormFooter;

packages/stepper/src/components/StepperForm/index.ts

@@ -1,3 +1,13 @@
 import StepperForm from './StepperForm.component';
+import StepperFormFooter from './StepperFormFooter';
+import { StepperFormContextProvider } from './StepperForm.context';
 
-export default StepperForm;
+const StepperFormComponent = StepperForm as typeof StepperForm & {
+	ContextProvider: typeof StepperFormContextProvider;
+	Footer: typeof StepperFormFooter;
+};
+
+StepperFormComponent.ContextProvider = StepperFormContextProvider;
+StepperFormComponent.Footer = StepperFormFooter;
+
+export default StepperFormComponent;