Add ui/progress-bar stories

[gitstart-twenty]

Fixes #894

Demo video
https://www.loom.com/share/c2bff7c8a0fd418aae1f135ea9bfb335?sid=c98cf124-613b-4fdf-bef3-3a9651f08fb3
Happy hacking! 🎉

[thaisguigon]

Here you can use the alias:

Suggested change

	import { CatalogDecorator } from '../../../../../testing/decorators/CatalogDecorator';
	import { ComponentDecorator } from '../../../../../testing/decorators/ComponentDecorator';
	import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
	import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';

[thaisguigon]

As the default duration value is really short and does not look good in storybook (we can't even see the animation because it's really fast), I would suggest that you set args to args: { duration: 10000 } in the meta object so it can be applied to the Default and the Catalog stories at once.
For the other args, I don't think they are needed for the Default story, as they have default values and we want the Default stories to display the component in its default state as much as possible.

[thaisguigon]

Sorry, it wasn't quite clear in the issue what we would like to test or not!
I'm not sure testing all existing easings and delays is really necessary for documentation purposes. Chromatic does not capture animations well either for visual regression.

Testing default vs custom color seems more important for visual regression testing.

Here is what I would suggest testing:

• animation (autoStart): true vs false (animated vs not animated)
• colors (barColor): default (undefined) vs one custom value (for instance: "blue")
• sizes (barHeight): default (undefined) vs one custom value (for instance: 10)

As for the argTypes, we would only need to disable controls for autoStart, barColor and barHeight. The other controls can still be relevant to this story.

[gitstart-twenty]

Hey @thaisguigon ,
The changes requested have been addressed

[charlesBochet]

LGTM, thank you!