scality · bert-e · Nov 10, 2023 · Nov 8, 2023
diff --git a/src/lib/components/steppers/Stepper.component.tsx b/src/lib/components/steppers/Stepper.component.tsx
@@ -0,0 +1,80 @@
+import { createContext, useContext, useState } from 'react';
+import {
+  Add,
+  ExctractProps,
+  StepperContextType,
+  Steps,
+  Subtract,
+} from './types';
+import { Steppers } from './Steppers.component';
+import { Box } from '../box/Box';
+
+const StepperContext = createContext<StepperContextType | null>(null);
+
+export const useStepper = <
+  T extends any[],
+  StepIndex extends number,
+  NextIndex = Add<StepIndex, 1>,
+  PrevIndex = Subtract<StepIndex, 1>,
+>(
+  index: StepIndex,
+  steps: readonly [...Steps<T>],
+): (NextIndex extends number
+  ? {
+      next: (props: ExctractProps<T[NextIndex]>) => void;
+    }
+  : Record<string, unknown>) &
+  (PrevIndex extends -1
+    ? Record<string, unknown>
+    : PrevIndex extends number
+    ? {
+        prev: (props: ExctractProps<T[PrevIndex]>) => void;
+      }
+    : Record<string, unknown>) => {
+  const context = useContext(StepperContext);
+
+  if (context === null) {
+    throw new Error('Cannot use useStepper outside of Stepper');
+  }
+  const { next, prev } = context;
+
+  //@ts-expect-error generic type
+  return { next, prev };
+};
+
+export const Stepper = <T extends any[]>({
+  steps,
+}: {
+  steps: readonly [...Steps<T>];
+}) => {
+  const [currentStep, setCurrentStep] = useState<number>(0);
+  const [stepProps, setStepProps] = useState<Record<string, unknown>>({});
+
+  const next = (props: Record<string, unknown>) => {
+    setCurrentStep(currentStep + 1);
+    setStepProps(props);
+  };
+
+  const prev = (props: Record<string, unknown>) => {
+    setCurrentStep(currentStep - 1);
+    setStepProps(props);
+  };
+
+  const { Component } = steps[currentStep];
+
+  return (
+    <StepperContext.Provider value={{ next, prev }}>
+      <Box display={'flex'} gap={32} padding={32}>
+        <Steppers
+          activeStep={currentStep}
+          steps={steps.map((step) => {
+            return {
+              title: step.label,
+            };
+          })}
+        />
+        <Component {...stepProps} />
+      </Box>
+    </StepperContext.Provider>
+  );
+};
diff --git a/src/lib/components/steppers/Steppers.component.tsx b/src/lib/components/steppers/Steppers.component.tsx
@@ -6,8 +6,8 @@ import { Loader } from '../loader/Loader.component';
 import { getTheme, getThemePropSelector } from '../../utils';
 import { Icon } from '../icon/Icon.component';
 type StepProps = {
-  title: JSX.Element;
-  content: JSX.Element;
+  title: React.ReactNode;
+  content?: React.ReactNode;
   active?: boolean;
   completed?: boolean;
   isLast?: boolean;

diff --git a/src/lib/components/steppers/types.ts b/src/lib/components/steppers/types.ts
@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+
+type MAXIMUM_DEPTH = 20;
+
+type GetResults<T> = T extends Step<infer Props> ? Step<Props> : never;
+
+type Length<T extends any[]> = T extends { length: infer L } ? L : never;
+
+type BuildTuple<L extends number, T extends any[] = []> = T extends {
+  length: L;
+}
+  ? T
+  : BuildTuple<L, [...T, any]>;
+
+export interface Step<T> {
+  label: string;
+  Component: (args: T) => ReactNode;
+}
+
+export interface StepperContextType {
+  next: (props: Record<string, unknown>) => void;
+  prev: (props: Record<string, unknown>) => void;
+}
+
+export declare type Steps<
+  T extends any[],
+  Result extends any[] = [],
+  Depth extends ReadonlyArray<number> = [],
+> = Depth['length'] extends MAXIMUM_DEPTH
+  ? Step<unknown>[]
+  : T extends []
+  ? []
+  : T extends [infer Head]
+  ? [...Result, GetResults<Head>]
+  : T extends [infer Head, ...infer Tail]
+  ? Steps<[...Tail], [...Result, GetResults<Head>], [...Depth, 1]>
+  : unknown[] extends T
+  ? T
+  : never;
+
+export type Add<A extends number, B extends number> = Length<
+  [...BuildTuple<A>, ...BuildTuple<B>]
+>;
+
+export type Subtract<A extends number, B extends number> =
+  BuildTuple<A> extends [...infer U, ...BuildTuple<B>] ? Length<U> : -1;
+
+export type ExctractProps<T> = T extends Step<infer Props> ? Props : never;
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -69,3 +69,4 @@ export { Dropzone } from './components/dropzone/Dropzone';
 export { Toast } from './components/toast/Toast.component';
 export { ToastProvider, useToast } from './components/toast/ToastProvider';
 export { useMutationsHandler } from './components/toast/useMutationsHandler';
+export { Stepper } from './components/steppers/Stepper.component';
diff --git a/stories/stepper.stories.tsx b/stories/stepper.stories.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import {
+  Stepper,
+  useStepper,
+} from '../src/lib/components/steppers/Stepper.component';
+import styled from 'styled-components';
+import { Box } from '../src/lib/components/box/Box';
+import { Stack } from '../src/lib/spacing';
+import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
+import { Text } from '../src/lib/components/text/Text.component';
+import { Wrapper as StoryWrapper } from './common';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
+`;
+
+const FirstStepComponent = (props: Record<string, never>) => {
+  const { next } = useStepper(StepIndexes.Step1, STEPS);
+  return (
+    <Wrapper>
+      <Box
+        display="flex"
+        flexDirection={'row'}
+        alignItems="baseline"
+        gap={'2rem'}
+      ></Box>
+      <Stack>
+        <Text>First Step</Text>
+        <Button
+          label="Next"
+          variant="secondary"
+          onClick={() => next({ name: 'something' })}
+        />
+      </Stack>
+    </Wrapper>
+  );
+};
+
+const SecondStepComponent = ({ name }: { name: string }) => {
+  const { next, prev } = useStepper(StepIndexes.Step2, STEPS);
+  return (
+    <Wrapper>
+      <Box
+        display="flex"
+        flexDirection={'row'}
+        alignItems="baseline"
+        gap={'2rem'}
+      ></Box>
+      <Stack>
+        <Text>Second Step : {name}</Text>
+        <Button label="Back" variant="secondary" onClick={() => prev({})} />
+        <Button
+          label="Next"
+          variant="secondary"
+          onClick={() => next({ type: 'anything' })}
+        />
+      </Stack>
+    </Wrapper>
+  );
+};
+
+const ThirdStepComponent = ({ type }: { type: string }) => {
+  const { prev } = useStepper(StepIndexes.Step3, STEPS);
+  return (
+    <Wrapper>
+      <Box
+        display="flex"
+        flexDirection={'row'}
+        alignItems="baseline"
+        gap={'2rem'}
+      ></Box>
+      <Stack>
+        <Text>Third Step : {type}</Text>
+        <Button
+          label="Back"
+          variant="secondary"
+          onClick={() => prev({ name: 'something' })}
+        />
+      </Stack>
+    </Wrapper>
+  );
+};
+
+const STEPS = [
+  {
+    label: 'Step 1',
+    Component: FirstStepComponent,
+  },
+  {
+    label: 'Step 2',
+    Component: SecondStepComponent,
+  },
+  {
+    label: 'Step 3',
+    Component: ThirdStepComponent,
+  },
+] as const;
+
+enum StepIndexes {
+  Step1,
+  Step2,
+  Step3,
+}
+
+const meta: Meta<typeof Stepper> = {
+  tags: ['autodocs'],
+  title: 'Components/Stepper',
+  component: Stepper,
+};
+export default meta;
+
+type Story = StoryObj<typeof Stepper>;
+export const SimpleStepper: Story = {
+  name: 'Simple Stepper',
+  render: () => (
+    <StoryWrapper>
+      <Stepper steps={STEPS} />
+    </StoryWrapper>
+  ),
+};