[Bug]: SB 7.0 Beta - Story prop defaults aren't being set from Compodoc

[sir-captainmorgan21]

Describe the bug

I am maintaining an Angular component library, and I am using compodoc. Prior to the 7.0 release, I was able to rely on the default values of inputs for our Angular components when it came to defining stories. However after running npx sb upgrade --prerelease, the default values are no longer being set, and the stories are instead setting undefined props as undefined.

After running the upgrade, my deps look like:

  "dependencies": {
    "@angular/animations": "14.1.2",
    "@angular/cdk": "14.1.2",
    "@angular/common": "14.1.2",
    "@angular/compiler": "14.1.2",
    "@angular/core": "14.1.2",
    "@angular/forms": "14.1.2",
    "@angular/platform-browser": "14.1.2",
    "@angular/platform-browser-dynamic": "14.1.2",
    "@angular/router": "14.1.2",
    "@headlessui/react": "^1.5.0",
    "@storybook/core-server": "7.0.0-beta.55",
    "chalk": "^4.1.2",
    "known-css-properties": "^0.24.0",
    "ngx-device-detector": "^4.0.0",
    "rxjs": "7.5.6",
    "spring-animation-keyframes": "^0.2.5",
    "style-dictionary": "^3.1.1",
    "svg-inline-loader": "^0.8.2",
    "tailwindcss": "^3.0.17",
    "ts-key-enum": "^3.0.11",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "14.1.3",
    "@angular-devkit/schematics": "14.1.3",
    "@angular-eslint/eslint-plugin": "14.0.2",
    "@angular-eslint/eslint-plugin-template": "14.0.2",
    "@angular-eslint/template-parser": "14.0.2",
    "@angular/cli": "14.1.3",
    "@angular/compiler-cli": "14.1.2",
    "@angular/language-service": "14.1.2",
    "@commitlint/cli": "^17.0.0",
    "@commitlint/config-conventional": "^17.0.0",
    "@compodoc/compodoc": "^1.1.18",
    "@nrwl/angular": "14.4.2",
    "@nrwl/cli": "14.4.2",
    "@nrwl/eslint-plugin-nx": "14.4.2",
    "@nrwl/jest": "14.4.2",
    "@nrwl/js": "14.4.2",
    "@nrwl/linter": "14.4.2",
    "@nrwl/storybook": "15.8.0-beta.7",
    "@nrwl/workspace": "14.4.2",
    "@storybook/addon-a11y": "^7.0.0-beta.55",
    "@storybook/addon-essentials": "7.0.0-beta.55",
    "@storybook/addon-interactions": "^7.0.0-beta.55",
    "@storybook/angular": "7.0.0-beta.55",
    "@storybook/builder-webpack5": "7.0.0-beta.55",
    "@storybook/core-server": "~6.5.9",
    "@storybook/jest": "^0.0.11-next.0",
    "@storybook/manager-webpack5": "7.0.0-alpha.10",
    "@storybook/testing-library": "^0.0.14-next.1",
    "@tailwindcss/line-clamp": "^0.3.1",
    "@tailwindcss/typography": "^0.5.2",
    "@testing-library/jest-dom": "^5.16.5",
    "@types/jest": "27.4.1",
    "@types/node": "16.11.7",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "5.30.5",
    "@typescript-eslint/parser": "5.30.5",
    "chromatic": "^6.5.4",
    "css-loader": "^6.7.1",
    "eslint": "8.15.0",
    "eslint-config-prettier": "8.1.0",
    "husky": "^8.0.0",
    "jest": "27.5.1",
    "jest-preset-angular": "~11.1.2",
    "ng-mocks": "^14.3.3",
    "ng-packagr": "~14.0.0",
    "nx": "14.4.2",
    "postcss": "^8.4.5",
    "postcss-import": "14.1.0",
    "postcss-preset-env": "7.5.0",
    "postcss-url": "10.1.3",
    "prettier": "2.7.1",
    "release-please": "^13.18.6",
    "sass": "^1.52.3",
    "sass-loader": "^13.0.0",
    "storybook-addon-angular-router": "^1.7.2-next.1",
    "storybook-addon-docs-tabs": "^1.0.3",
    "storybook-preset-inline-svg": "^1.0.1",
    "style-loader": "^3.3.1",
    "svgo": "^2.8.0",
    "ts-jest": "27.1.4",
    "ts-node": "~10.8.0",
    "typescript": "4.7.3",
    "webpack": "^5.64.0"
  }

CC: @JReinhold

To Reproduce

I dont have a repro since this repo is private. I will try to get a example repro repo soon if I can find time. However, replication should be straightforward.

1. Create an angular component that has an input with a default value
2. Write a story that does not set that value (relying on the default value)
3. You will see that the default value is not set in the controls of the story

System

System:
    OS: macOS 12.6.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Firefox: 96.0
    Safari: 16.2
  npmPackages:
    @storybook/addon-a11y: ^7.0.0-beta.55 => 7.0.0-beta.55 
    @storybook/addon-essentials: 7.0.0-beta.55 => 7.0.0-beta.55 
    @storybook/addon-interactions: ^7.0.0-beta.55 => 7.0.0-beta.55 
    @storybook/angular: 7.0.0-beta.55 => 7.0.0-beta.55 
    @storybook/builder-webpack5: 7.0.0-beta.55 => 7.0.0-beta.55 
    @storybook/core-server: 7.0.0-beta.55 => 6.5.16 
    @storybook/jest: ^0.0.11-next.0 => 0.0.11-next.0 
    @storybook/manager-webpack5: 7.0.0-alpha.10 => 7.0.0-alpha.10 
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Additional context

No response

[tmeasday]

Do you have a reproduction of this? I'm no angular expert but I can say for sure (based on testing here) that we don't pass { x: undefined } into the framework's renderToCanvas function. Perhaps the function ends up adding extra props somehow? I'm not sure where it would get them from though:

storybook/code/frameworks/angular/src/client/render.ts

Lines 19 to 27 in 29be84d

	const renderer = await rendererFactory.getRendererInstance(element);
	await renderer.render({
	storyFnAngular: storyFn(),
	component,
	forced: !forceRemount,
	targetDOMNode: element,
	});
	}

The return value of storyFn() here won't have undefined props, AFAICT.

[miszol1]

I also faced this issue and all stories which have default values set in component stopped working so for me it's a big blocker :(
To avoid this I have to set all 'default' values in each Story manually.

Reproduction was provided in duplicate of this issue here:
#22222

[miszol1]

Any update here? This bug is critical as it breaks angular default functionality.

[tmeasday]

@miszol1 I'm going to close this issue and reopen the other as it has the reproduction. I'll comment there.