storybook icon indicating copy to clipboard operation
storybook copied to clipboard

Expose `extractArgTypes` helpers

Open darkowic opened this issue 3 years ago • 3 comments

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

darkowic avatar Apr 21 '21 11:04 darkowic

You might be able to leverage import { extractComponentArgTypes } from "@storybook/blocks"; although I have not tested it.

mvarendorff avatar Apr 11 '23 07:04 mvarendorff

I searched the entire internet for extractComponentArgTypes and couldn't find any api docs for it 😞

TheMikeyRoss avatar Oct 04 '23 10:10 TheMikeyRoss

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.

krzempekk avatar Feb 19 '24 11:02 krzempekk