storybook
storybook copied to clipboard
Expose `extractArgTypes` helpers
Is your feature request related to a problem? Please describe
It is not possible to change arg types for a specific story easily. The arg types are generated based on the default exported story file configuration (the component
entry). In some cases, it is needed to actually display argTypes
for a different component in the controls. Because extractArgTypes
is not exposed officially, it has to be done manually and any manual work is quickly desynchronizing with the source code. The example use case:
import React from 'react';
import { Story } from '@storybook/react';
import { MetadataForm } from ;
// @ts-expect-error
import { extractArgTypes } from '@storybook/addon-docs/dist/esm/frameworks/react/extractArgTypes';
type MetadataParams = {
config: any
};
type MetadataFormProps = React.ComponentProps<typeof MetadataForm>;
export function applyMetadataFormStoryConfig<T>(
story: Story<T>,
metadata?: MetadataParams
): Story<T> {
const metadataFormArgTypes = extractArgTypes(MetadataForm);
// eslint-disable-next-line no-param-reassign
story.parameters = {
...story.parameters,
controls: {
// Disable all current story controls
// And show MetadataForm controls only
include: Object.keys(metadataFormArgTypes),
},
metadata,
};
// Inject MetadataForm args to enable controls for MetadataForm
// eslint-disable-next-line no-param-reassign
story.argTypes = {
...story.argTypes,
...metadataFormArgTypes,
};
return story;
}
Describe the solution you'd like
Make the extractArgTypes
function public so that users can use it in their storybook.
Describe alternatives you've considered Import from ESM sources but it is unstable
Are you able to assist to bring the feature to reality? Maybe
Additional context
You might be able to leverage import { extractComponentArgTypes } from "@storybook/blocks";
although I have not tested it.
I searched the entire internet for extractComponentArgTypes
and couldn't find any api docs for it 😞
Update on this: with newest Storybook (7.6.x) described workaround is not valid anymore. We have found a new workaround which looks like that:
import { parameters } from '@storybook/react/dist/entry-preview-docs';
const { extractArgTypes } = parameters.docs;
Still, it would be nice to have this exposed from somewhere more stable.