feat(storybook): implement argTypeEnhancers for improved Slot API docs rendering #33838
Conversation
Hotell
changed the title
📊 Bundle size report✅ No changes found |
🕵 FluentUIV0 No visual regressions between this PR and main |
|
Pull request demo site: URL |
Hotell
changed the title
| * | ||
| * @type {import('@storybook/types').ArgTypesEnhancer} | ||
| */ | ||
| const withSlotEnhancer = context => { |
There was a problem hiding this comment.
this works as expected with default DocsPage as it updates context properly which is then obtained and used for rendering the view.
because we override DocsPage by our custom implementation, this is no longer working unfortunately, as the context won't propagate as expected within default SB ArgsTable component.
Task:
- determine if this can be set properly so SB ArgsTable would render enhanced data - if doable we don't have to execute the override inline within the custom DocsPage implementation
| const styles = useStyles(); | ||
|
|
||
| const { component } = withSlotEnhancer(story); |
There was a problem hiding this comment.
Task:
- verify that this doesn't mutate story object as we don't wanna do that to prevent any unwanted side effects
| @@ -219,7 +256,7 @@ export const FluentDocsPage = () => { | |||
| {videos && <VideoPreviews videos={videos} />} | |||
| </div> | |||
| <RenderPrimaryStory primaryStory={primaryStory} skipPrimaryStory={skipPrimaryStory} /> | |||
| <RenderArgsTable primaryStory={primaryStory} hideArgsTable={hideArgsTable} /> | |||
| <RenderArgsTable story={primaryStory} hideArgsTable={hideArgsTable} argTypes={primaryStoryContext.argTypes} /> | |||
There was a problem hiding this comment.
these argTypes are properly transformed via preview enhance in preview.js although we cannot use them it seems
Task:
- revert this argTypes prop change
|
@carlamntn please see comments and Task to follow-up/finish this PR ty |
| @@ -133,22 +133,58 @@ const getNativeElementsList = (elements: SBEnumType['value']): JSX.Element => { | |||
| ); | |||
| }; | |||
|
|
|||
| const RenderArgsTable = ({ hideArgsTable, primaryStory }: { primaryStory: PrimaryStory; hideArgsTable: boolean }) => { | |||
| const slotRegex = /as\?:\s*"([^"]+)"/; | |||
There was a problem hiding this comment.
it seems this is not catching all Slot apis as expected for example (Avatar Component / https://react.fluentui.dev/?path=/docs/components-avatar--docs):
Todo:
- make sure we are catching all actual Slot definitions
|
|
||
| // we are interested only on raw strings ( which is case of non Storybook supported types) | ||
| if (typeof value === 'string') { | ||
| const match = value.match(slotRegex); |
There was a problem hiding this comment.
we need to tweak the overrides if the Slot type is complex ( eg prop is using Slot<typeof SomeOtherComponent>:
if( value.includes('WithSlotShorthandValue')){
const match = value.match(slotRegex);
if(match) {
// we know that the origin prop was defined via `Slot<'html elemen'>`
// update value to `Slot<\"${match[1]}\">`
} else {
// we know that the origin prop is using non trivial type structure like `Slot<typeof PresenceBadgeProps>` -> we just fallback to `Slot` because we are unable to infer the correct value
// update to `Slot`
}
}
Previous Behavior
New Behavior
Leverages Storybook Arg enhancer hook to tweak ouput as needed without any changes necessary in v9 codebase ( not affecting consumers of v9 )
Related Issue(s)
Slot<T>type #27105