[Angular, NX] Incomplete documentation in the Args table (new behavior?)

[KyneSilverhide]

Summary

Hi,

We recently migrated our storybook to a monorepo. While the basic features do work, we've found out that the argument tables is now mostly empty.
BEFORE the migration, the whole table was filled with all "possible" properties from the component

And now, it's "empty".

If I look at the code, the arguments are indeed empty but.. the code is the same as before
export const Example: Story = { args: { } }

If I put a basic arg, it will be shown in the table, but everything else is still missing.
My concern is... how did this behavior change? Before, all properties (Inputs, etc) from the components were always displayed. And now, only the args from the FIRST example are displayed in the table..;

Additional information

package.json

  "@storybook/addon-a11y": "^7.6.16",
      "@storybook/addon-docs": "^7.4.2",
      "@storybook/addon-essentials": "7.6.20",
      "@storybook/addon-interactions": "^7.5.3",
      "@storybook/addon-links": "^7.4.2",
      "@storybook/angular": "7.6.20",
      "@storybook/core-server": "7.6.20",
      "@storybook/jest": "^0.2.3",
      "@storybook/test-runner": "^0.13.0",
      "@storybook/testing-library": "^0.2.2",
      "@storybook/theming": "^7.4.2",
  ...
      "nx": "18.2.4",
  ...
      "@angular/core": "17.3.12",

main.ts

import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  stories: [
    '../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)',
    '../src/lib/components/**/*.mdx'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-a11y'
  ],
  framework: {
    name: '@storybook/angular',
    options: {},
  },
  core: {
    builder: "@storybook/builder-webpack5"
  },
  docs: {
    autodocs: 'tag',
  },
  staticDirs: ['./public']
};

export default config;

// To customize your webpack configuration you can use the webpackFinal field.
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
// and https://nx.dev/recipes/storybook/custom-builder-configs

Create a reproduction

No response

[Marklb]

• What do you have for "compodoc" and "compodocArgs" in your angular.json(or Nx equivalent) builder for storybook.
• What is your compodoc version?
• Is setCompodocJson called anywhere? It is in .storybook/preview.ts by default.

Without more information, I am going to assume it is the config, but there isn't enough information to be sure.

Some things to check:

• Does a documentation.json file get generated, when you build Storybook?
  • If not, compodoc isn't configured. Add "compodoc": true, "compodocArgs": [ "-e", "json", "-d", "." ], to your builder, in angular.json(or Nx equivalent).
• Does documentation.json contain the properties for the component class?
  • If not, add import docJson from "../documentation.json"; setCompodocJson(docJson); to .storybook/preview.ts.
  • If it does contain the properties then I would assume your import is missing or wrong. Add import docJson from "../documentation.json"; setCompodocJson(docJson); to .storybook/preview.ts. If the import is already there, make sure the import path is correct.

[Marklb]

With that tsconfig, I would expect all the components imported by a stories file to be parsed by compodoc, but I haven't looked at how tsconfig include and compodoc work in a while. If you aren't seeing the components in the documentation.json then it seems like the problem has been narrowed down to compodoc, at least.

For the one that has an ArgsTable, all the controls, except maybe styleClass, have a value. So, could it be generating those from args/argTypes manually set for that story?

I would start running compodoc independently, adding specific files to the tsconfig "include" or "files" to see if it at least parses them. Then figure out what could cause your current tsconfig to not be finding them.

[KyneSilverhide]

i tried to just run compodoc, both from the nx root and from the lib folder, targeting the proper tsconfig.json (instead of the parent, that would result in a much larger documentation.json including all code...)

compodoc -p libs/care-common-lib/.storybook/tsconfig.json -e json -d .

But all I get is a compodoc file with no "component". Only "miscellanous".

And there, i do find the stories about one of the "broken" component.

{
                "name": "Example",
                "ctype": "miscellaneous",
                "subtype": "variable",
                "file": "libs/care-common-lib/src/lib/components/care-date-picker/care-date-picker.stories.ts",
                "deprecated": false,
                "deprecationMessage": "",
                "type": "Story",
                "defaultValue": "{\r\n  args: {\r\n  }\r\n}"
            },

For the one that has an ArgsTable, all the controls, except maybe styleClass, have a value. So, could it be generating those from args/argTypes manually set for that story?
Well, more or less. it is only using the args explicitely set in the story from the FIRST story. So if the first sotry is the basic one with no config... the table is empty. And all other tables seems to be empty too...

But before (as seen of the screenshot from the initial post), it somehow auto-generated all possible values in a table...
And the code from the stories have not changed since.

[KyneSilverhide]

We have just migrated to storybook 8, but the problem remains.

I think it's somehow related to "autodocs" not working properly... but I don't know why.

I've also explicitely added autodocs to one of the broken components, but to no avail...

[Marklb]

"autodocs" is not necessarily related to the ArgTable. It basically just determines if the documentation pages should automatically be generated. In the Angular framework, the argTypes are generated purely from the json file that compodoc outputs, unless the story manually defines them.

The stories files are not important in the compodoc output. The tsconfig that compodoc receives only has to be able to find your component files.

If you made a project that reproduces your problem that I could clone then I could probably find the issue fairly quickly.

To break this down to a very simple example, just to confirm that the problem is your tsconfig, if my assumption is correct. The following steps are something I am doing myself, so I don't overlook something.

I am going to assume you have a component at src/app/example.component.ts.

Then I am going to create a simple tsconfig tsconfig.example.json, which does nothing except specify a path directly to the component file. So, I know there is no reason for compodoc to not find that file.

{
  "files": [
    "src/app/example.component.ts"
  ]
}

Now, I will run compodoc -p tsconfig.example.json -e json -d ..

To eliminate any path resolving issues to the compodoc output, I will copy the contents of documentation.json and paste it directly in .storybook/preview.ts.

import type { Preview } from "@storybook/angular";
import { setCompodocJson } from "@storybook/addon-docs/angular";
// import docJson from "../documentation.json";
setCompodocJson({
  "pipes": [],
  "interfaces": [],
  "injectables": [],
  "guards": [],
  "interceptors": [],
  "classes": [],
  "directives": [],
  "components": [
      {
          "name": "ExampleComponent",
          "id": "component-ExampleComponent-f983e02c1dd4624ac7d07dd98cbe611c8401fe7fcb395e58a93e6878c6ebd75f2511d39cf42724ccde2047db98406e335c58655b50fc5ac619d8ba5f687a934e",
          "file": "src/app/example.component.ts",
          "encapsulation": [],
          "entryComponents": [],
          "inputs": [],
          "outputs": [],
          "providers": [],
          "selector": "example",
          "styleUrls": [],
          "styles": [],
          "template": "",
          "templateUrl": [],
          "viewProviders": [],
          "hostDirectives": [],
          "inputsClass": [
              {
                  "name": "input1",
                  "defaultValue": "''",
                  "deprecated": false,
                  "deprecationMessage": "",
                  "line": 11,
                  "type": "string",
                  "decorators": []
              }
          ],
          "outputsClass": [],
          "propertiesClass": [],
          "methodsClass": [],
          "deprecated": false,
          "deprecationMessage": "",
          "hostBindings": [],
          "hostListeners": [],
          "standalone": true,
          "imports": [],
          "description": "",
          "rawdescription": "\n",
          "type": "component",
          "sourceCode": "import { Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'example',\r\n  standalone: true,\r\n  imports: [],\r\n  template: ``,\r\n  styles: [],\r\n})\r\nexport class ExampleComponent {\r\n  @Input() input1: string = ''\r\n}\r\n",
          "assetsDirs": [],
          "styleUrlsData": "",
          "stylesData": "",
          "extends": []
      }
  ],
  "modules": [],
  "miscellaneous": [],
  "routes": [],
  "coverage": {
      "count": 0,
      "status": "low",
      "files": [
          {
              "filePath": "src/app/example.component.ts",
              "type": "component",
              "linktype": "component",
              "name": "ExampleComponent",
              "coveragePercent": 0,
              "coverageCount": "0/2",
              "status": "low"
          }
      ]
  }
});

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

[KyneSilverhide]

Ok, now that I know how this args table is built, I was able to investigate a bit more.

As you expected, issue was in the tsconfig.json. During the NX migration, a new tsconfig.json was created... and was used instead of the old one.
I've merged them and now I can finally see the args.

But there's still an issue... whenever I'm updating anything, I've got an error..

Error: NG05104: The selector "story--design-system-components-forms-datepicker--example--primary-inner[story--design-system-components-forms-datepicker--example--primary-inner-4]" did not match any elements. Find more at https://angular.io/errors/NG05104

Maybe I should create anther discussion for this one...

[KyneSilverhide]

Edit : ok sorry, this was my fault... we used specific arguments before that I forgot to add back with all my tests..

"compodocArgs": ["-e", "json", "--disablePrivate", "--disableProtected", "--disableInternal", "--disableLifeCycleHooks", "-d", "libs/care-common-lib/.storybook"],

It's fine now ;)

[Walnussbaer]

I am facing the same issue, but in a Vue project :( (#28817)

[Marklb]

Just for reference, we resolved the Vue issue and it was due to incorrect vite plugin order. Angular's builder is different and doesn't generate documentation data that way, so it is unrelated.