New Stepper Component

[jay-deshmukh]

[netlify]

✅ Deploy Preview for nifty-johnson-6002dd ready!

Name	Link
🔨 Latest commit	22f26de
🔍 Latest deploy log	https://app.netlify.com/sites/nifty-johnson-6002dd/deploys/66fbbe591e46ac0007f618a1
😎 Deploy Preview	https://deploy-preview-388--nifty-johnson-6002dd.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[ifrim]

The lib version is not incremented in package.json. Otherwise LGTM.

[lghiur]

I think this onStepChange, should accept a parameter a function (or a function should be one of the optiosn). If this function evaluates to true, then the step is changed. This way it will allow me in the code to write some validation, and then the step to change. @ifrim wdyt?

[ifrim]

Yeah, I would await on the response of the onStepChange call. This way you can make sync or async validations in the function. And then go ahead and increment the step only if the awaited value is truthy.

[jay-deshmukh]

I see, what do you think about doing it based on the props

example

<Stepper 
allowNextStep={false}
activeStepClass="step-error"
....
/>

@ifrim @lghiur

[ifrim]

The way I see it is that the problem that needs to be solved is that the user interacts with the component and then a decision needs to be made if the step is changed or not (in which case an error may or may not be displayed).
The simplest API I can think of for this is using a callback called at the moment of the user interaction and doing stuff based on the response.

The validations need to happen at the moment the user requested the step change. In order to do this with the props based approach then the parent component will need to know the next step and the moment the user interacted with the component requesting the step change. It will also need to keep track of the current step and transition the value of allowNextStep when the step changes and while the validations are running. This is boilerplate code that will need to be replicated every time you would use the component. I would rather have this encapsulated inside the component. It will also be easier to do future changes if everything that is not specific to a use case is inside the component instead of the outside.

Having said that not sure if I completely understand the use cases for this component so whatever you think is best.

[sonarqubecloud]

Quality Gate passed

Issues
11 New issues
0 Accepted issues

Measures
0 Security Hotspots
96.7% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud