Web Components: methods not displayed

[dmartinjs]

Describe the bug
I updated my custom-elements.json to follow the new format introduced in Storybook 6.4,
everything is displayed properly except methods who doesn't seems to be extracted from the file.
exemple of a method in the custom-elements.json.

To Reproduce

git clone https://gitlab.com/mobivia-design/roadtrip/components.git
git checkout develop
npm install
npm run build
npm run storybook

System

System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    npm: 8.1.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Edge: 96.0.1054.62
    Firefox: 94.0.2
    Safari: 15.0
  npmPackages:
    @storybook/addon-a11y: ^6.4.1 => 6.4.9 
    @storybook/addon-docs: ^6.4.1 => 6.4.9 
    @storybook/addon-essentials: ^6.4.1 => 6.4.9 
    @storybook/web-components: ^6.4.1 => 6.4.9 

Additional context
I don't know if its related but methods doesn't seems to be exported here.
https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/web-components/custom-elements.ts#L137

[mbulfair]

This was working in a previous version of SB-WC, many of my components have public methods that need to be documented so +1 on this

[shilman]

@thepassle @gaetanmaisse perhaps a follow-up is needed for #15138 ?

[thepassle]

I don't know if its related but methods doesn't seems to be exported here.

methods are listed under members along with fields, so I dont think thats the issue

[james-cavanagh]

Hello, is there an update on how to display methods please?

[jwloka]

We ran into a similar issue. A brief analysis seems to indicate that the problem is twofold:

• (i) methods are ignored in the current implementation of custom-elements#mapData (and that might be for a reason?):

storybook/code/renderers/web-components/src/docs/custom-elements.ts

Lines 80 to 89 in 7bcf944

	function mapData(data: TagItem[], category: string) {
	return (
	data &&
	data
	.filter((item) => item && item.name)
	.reduce((acc, item) => {
	if (item.kind === 'method') return acc;
	switch (category) {
	case 'events':

• (ii) properties with clashing names are overridden, as their are used as key in the resulting object

We could live with the fact that properties with clashing names are overridden, but that might not be the case for everyone.

Would prefixing the property key with its kind in mapData be a valid solution, e.g. "method#close", "event#close"?

FYI @dreamora

[sebastian-kreft-simployer]

Same thing for me. I need to manually add methods in ArgTypes and duplicate the description from JSDocs in order to have the methods displayed in the table

argTypes: {
    show: {
      control: false,
      table: { category: 'Methods' },
      description: 'Method that triggers the open dialog action',
    },
    hide: {
      control: false,
      table: { category: 'Methods' },
      description: 'Method that triggers the close dialog action',
    },
  }