ArgsTable not displaying defaultValue from Compodoc output

[ChazUK]

I'm using @storybook/addon-essentials@6.3.0 and @storybook/angular@6.3.0 along with @compodoc/compodoc@1.1.16 to automatically generate documentation for my components.

After configuring the docs to read the compodoc output I have noticed that none of the default values are shown in the table. When a default value is present in the code the hyphen is removed but no output shown.

I think I've nailed it down to this line https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/ArgsTable/ArgValue.tsx#L135. The props passed in do not match the structure.

Description follows the structure

{
  initialExpandedArgs: undefined,
  value: {
    summary: '"xs" | "sm" | "md" | "lg"',
    required: true
  }
}

But then the default value structure is as follows

{
  initialExpandedArgs: undefined,
  value: "xs"
}

So the ArgSummary is returned as null.

Below is the section from my outputted documentation.json file from Compodoc compodoc -p libs/eds-base/tsconfig.lib.json -e json -d libs/eds-base --disablePrivate --disableInternal --disableLifeCycleHooks --disableSourceCode

{
            "name": "IconComponent",
            "id": "component-IconComponent-fcc05ac35e04322d2d826b1731c939c9bf7706dbc456641e378c0cad5cb509c5e93859a3b3f1d5ae3a76e20407df8db99e6a514e0fae04682fe8855a8296fdf7",
            "file": "libs/eds-base/src/lib/atoms/icon/icon.component.ts",
            "encapsulation": [],
            "entryComponents": [],
            "inputs": [],
            "outputs": [],
            "providers": [],
            "selector": "eds-base-icon",
            "styleUrls": [
                "./icon.component.scss"
            ],
            "styles": [],
            "template": "",
            "templateUrl": [],
            "viewProviders": [],
            "inputsClass": [
                {
                    "name": "size",
                    "defaultValue": "'xs'",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 20,
                    "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"",
                    "decorators": []
                }
            ],
            "outputsClass": [],
            "propertiesClass": [],
            "methodsClass": [],
            "deprecated": false,
            "deprecationMessage": "",
            "hostBindings": [
                {
                    "name": "class",
                    "deprecated": false,
                    "deprecationMessage": "",
                    "line": 37,
                    "type": "string",
                    "decorators": []
                }
            ],
            "hostListeners": [],
            "description": "",
            "rawdescription": "\n",
            "type": "component",
            "assetsDirs": [],
            "styleUrlsData": [
                {
                    "data": "@use 'sass:map';\n@use '../../styles/vars/colors';\n@use '../../styles/spacing';\n\n:host {\n  display: inline-block;\n  vertical-align: middle;\n\n  /* stylelint-disable-next-line selector-pseudo-element-no-unknown */\n  ::ng-deep {\n    svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  &.icon-xs {\n    width: map.get(spacing.$spacing-map, 'xxs');\n    height: map.get(spacing.$spacing-map, 'xxs');\n  }\n  &.icon-sm {\n    width: map.get(spacing.$spacing-map, 'xs');\n    height: map.get(spacing.$spacing-map, 'xs');\n  }\n  &.icon-md {\n    width: map.get(spacing.$spacing-map, 's');\n    height: map.get(spacing.$spacing-map, 's');\n  }\n  &.icon-lg {\n    width: map.get(spacing.$spacing-map, 'm');\n    height: map.get(spacing.$spacing-map, 'm');\n  }\n}\n",
                    "styleUrl": "./icon.component.scss"
                }
            ],
            "stylesData": "",
            "constructorObj": {
                "name": "constructor",
                "description": "",
                "deprecated": false,
                "deprecationMessage": "",
                "args": [
                    {
                        "name": "element",
                        "type": "ElementRef",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "iconRegistry",
                        "type": "IconRegistryService",
                        "deprecated": false,
                        "deprecationMessage": ""
                    },
                    {
                        "name": "document",
                        "type": "HTMLDocument",
                        "deprecated": false,
                        "deprecationMessage": ""
                    }
                ],
                "line": 39,
                "jsdoctags": [
                    {
                        "name": "element",
                        "type": "ElementRef",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "iconRegistry",
                        "type": "IconRegistryService",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    },
                    {
                        "name": "document",
                        "type": "HTMLDocument",
                        "deprecated": false,
                        "deprecationMessage": "",
                        "tagName": {
                            "text": "param"
                        }
                    }
                ]
            },
            "accessors": {
                "_size": {
                    "name": "_size",
                    "getSignature": {
                        "name": "_size",
                        "type": "",
                        "returnType": "",
                        "line": 37
                    }
                }
            }
        }

[ChazUK]

And setting ArgTypes manually does work, so I'm not sure if it's an issue with compodoc or how Storybook handles that default.

<Meta
  argTypes={{
    size: {
      table: {
        defaultValue: { summary: 'Hello' },
      },
      control: { type: 'select' },
      options: ['xs', 'sm', 'md', 'lg'],
    }
  }}
...

[shilman]

@ChazUK https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#no-longer-inferring-default-values-of-args

what happens if you set:

<Meta args={{ size: 'xs' }} />

[ChazUK]

Thanks for the quick reply. I'm actually trying to get the default straight out of the Component itself rather than setting anything in the stories file, and having duplicate info that dev's will forget to update.

I was trying to use <Props of={IconComponent} /> but just seen that it's going to be deprecated.

<Meta
  title="Atoms/Icon"
  component={IconComponent}
  args={{ size: 'xs' }}
  argTypes={{
    icon: {
      control: { type: 'select' },
      options: completeIconSet.map((icon) => icon.name),
    },
    size: {
      control: { type: 'select' },
      options: ['xs', 'sm', 'md', 'lg'],
    },
  }}
/>

<Canvas>
  <Story
    name="Default"
    args={{
      icon: 'add',
      size: 'xs',
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

### Props

<Props of={IconComponent} />

### ArgsTable

<ArgsTable story="Default" />

[ChazUK]

Could this line https://github.com/storybookjs/storybook/blob/b88d2d92dae890f4fdec223f342fa0b8b0c19a31/lib/components/src/blocks/ArgsTable/ArgValue.tsx#L130

Perhaps be changed to

const summary = value.summary || value;
const detail = value.detail;

[ChazUK]

Also, what is the reason for deprecating the Props Component? It's quite useful when for instance documenting a component that has multiple children, like Tabs and TabItem. It can output the inputs / methods etc without creating a separate story whilst omitting the control functions?

Just looked through the props and found it can take of https://github.com/storybookjs/storybook/blob/next/addons/docs/src/blocks/ArgsTable.tsx#L28-L30

[shilman]

@ChazUK we renamed Props to ArgsTable in 6.0 https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#previewprops-renamed

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ChazUK]

@shilman is there any plan to fix the defaultValue issue?

[shilman]

@ChazUK Any interest in contributing a PR to solve this? We've documented how to contribute and there's also a #contributing channel on the Storybook discord if you have questions.

[ChazUK]

@shilman I will give it a go