Feat: Stepper

[mariaozamiz]

📌 References

• Issue: Closes https://app.clickup.com/t/8693n2ugf

📝 Implementation

Using wizard component

📹 Screenshots/Screen capture

🔥 Notes to the tester

check /#/analysis page

[eperedo]

Thanks @mariaozamiz code looks good! Just a couple of observations about reusing repeated components.

Also we're waiting for a beta version for the wizard component in order to mark a step as completed. EyeSeeTea/d2-ui-components#235

[eperedo]

Since we're repeating the same Container and Title component we can extract both into a separate file and reuse them for all the steps:

// ./components/step-container/StepContainer.tsx
import styled from "styled-components";

export const StepContainer = styled.section`
    height: 39.125rem;
`;

export const StepTitle = styled.h2`
    color: blue;
`;

and use them in each step:

export const ConfigurationStep: React.FC<PageProps> = React.memo(props => {
    const { name } = props;
    return (
        <StepContainer>
            <StepTitle>{i18n.t("Configuration")}</StepTitle>
        </StepContainer>
    );
});

[mariaozamiz]

This one might need a layout, as we should insert the table and filters inside the step container later on. What do you think?

[eperedo]

Just to be sure I'm following the idea, do you mean something like:

// StepLayout.tsx
<StepLayout>
   <StepContainer> 
       <StepTitle>{i18n.t("Configuration")}</StepTitle>
    </StepContainer>
    {children} 
</StepLayout>

[mariaozamiz]

In my head is like:

// StepLayout.tsx
<StepLayout or StepContainer>
  <Header>
     <StepTitle>{i18n.t("Configuration")}</StepTitle>
     <Filters />
  </Header>
   {children} // table
</StepLayout or StepContainer>

Maybe it's just an early abstraction 🤔 and might get difficult later on to relate table and filters. To deal with the duplicated code I can delete the styling for now and add it later on in the project.

[eperedo]

Agree, we don't have all the information to do this abstraction.