Add #435: Storybook stories for Progress component#536
Conversation
Before: No Story in place for Progress component as part of issue #435 After: Create Empty, Halfway and Full Progress stories showcasing different progress values Includes interactive controls for value, className and indicatorClassName. Issue: Progress bar renders utilizing a parent component however this comes with an 'error' that I am still figuring out
haydnkerr
requested review from
HoldUpFjord,
alexappleget,
bethanyann,
jennifertieu,
kepsteen,
nickytonline and
shashilo
as code owners
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Removed cn import as it is not needed
| @@ -0,0 +1,59 @@ | |||
| import type { Meta, StoryObj } from '@storybook/react'; | |||
There was a problem hiding this comment.
Headers have been added
There was a problem hiding this comment.
Just add a newline after the headers to fix the eslint error.
| args: { | ||
| value: 0, | ||
| }, | ||
| render: (args) => ( |
There was a problem hiding this comment.
Look up decorators in Storybook. This is a way to add a wrapper to the element so you can wrap each Progress in a div.
Then you can remove all the renders you have in each export.
https://storybook.js.org/docs/writing-stories/decorators
If it complains about a missing return type, import and use ReactElement. There might be a better type, but I found this works.
There was a problem hiding this comment.
I have implemented decorators and removed or renders for the individual examples
There was a problem hiding this comment.
There's still a missing return type on the decorator. Use import { ReactElement } from 'react'; instead of importing all of React.
Then use ReactElement as the decorator's return type.
|
Move the story file into the Progress component's folder.
|
add 'react' import
| argTypes: { | ||
| className: { | ||
| control: 'text', | ||
| defaultValue: 'relative h-2 w-screen overflow-hidden rounded-full bg-primary/20', |
There was a problem hiding this comment.
refactor (nit): The use of defaultValue inside argTypes isn’t necessary if you’re already setting the args at the top level (args: { value: 25 }). In Storybook, top-level args should set initial values; argTypes.defaultValue is older and can cause confusion, though it still works.
| }, | ||
| indicatorClassName: { | ||
| control: 'text', | ||
| defaultValue: 'h-full w-screen flex-1 bg-[#E26969] transition-all rounded-full', |
There was a problem hiding this comment.
refactor (nit): using w-screen for width, but the Storybook decorator restricts the parent to width: 300px. For a consistent, contained progress bar, use w-full instead of w-screen in your className/indicatorClassName defaults.
|
The build is failing. Pull from develop branch and run |
4 participants
Before: No Story in place for Progress component as part of issue #435
After:
Issue: Progress bar renders utilizing a parent component however this comes with an 'error' that I am still figuring out.