Ugrades/eslint

[ndelangen]

Unblock the TS4.9 upgrade by upgrading to ESlint v8

@kasperpeulen I hope this helps you.

For those trying to review:
99.8% of the changes are just to make TS/ESlint happy.
This commit does the actual upgrade: a889dac

[ndelangen]

@storybookjs/angular Can someone, perhaps @kroeder assist with these errors I'm getting during the build-sandboxes step in CI:

ERR! => Failed to build the preview
ERR! src/stories/frameworks/angular/basics/component-with-ng-content/ng-content-about-parent.stories.ts:32:41 - error TS4111: Property 'color' comes from an index signature, so it must be accessed with ['color'].
ERR! 
ERR! 32       ({ args }) => ({ propsColor: args.color })
ERR!                                            ~~~~~
ERR! 
ERR! src/stories/frameworks/angular/basics/component-with-ng-content/ng-content-about-parent.stories.ts:49:21 - error TS4111: Property 'content' comes from an index signature, so it must be accessed with ['content'].
ERR! 
ERR! 49   template: `${args.content}`,
ERR!                        ~~~~~~~
ERR! 
ERR! src/stories/frameworks/angular/basics/component-with-ng-content/ng-content-simple.stories.ts:24:52 - error TS4111: Property 'content' comes from an index signature, so it must be accessed with ['content'].
ERR! 
ERR! 24   template: `<storybook-with-ng-content><h1>${args.content}</h1></storybook-with-ng-content>`,
ERR!                                                       ~~~~~~~
ERR! 
ERR! src/stories/frameworks/angular/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts:70:17 - error TS4111: Property 'color' comes from an index signature, so it must be accessed with ['color'].
ERR! 
ERR! 70     color: args.color,
ERR!                    ~~~~~
ERR! 
ERR! src/stories/frameworks/angular/basics/component-without-selector/without-selector.stories.ts:22:65 - error TS4111: Property 'color' comes from an index signature, so it must be accessed with ['color'].
ERR! 
ERR! 22       { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args.color, name: args.name } },
ERR!                                                                    ~~~~~
ERR! 
ERR! src/stories/frameworks/angular/basics/component-without-selector/without-selector.stories.ts:22:83 - error TS4111: Property 'name' comes from an index signature, so it must be accessed with ['name'].
ERR! 
ERR! 22       { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args.color, name: args.name } },
ERR!                                                                                      ~~~~
ERR! 
ERR! src/stories/frameworks/angular/core/decorators/theme-decorator/decorators.stories.ts:17:47 - error TS4111: Property 'theme' comes from an index signature, so it must be accessed with ['theme'].
ERR! 
ERR! 17       ({ globals }) => ({ myTheme: `${globals.theme}-theme` })
ERR!        

See: https://app.circleci.com/pipelines/github/storybookjs/storybook/30773/workflows/9c10a080-17a1-44e2-80c5-22b0427ef88c/jobs/431068/parallel-runs/1?filterBy=FAILED

[ndelangen]

This seems to be a report of a similar issue about angular:
https://www.tutsmake.com/angular-13-property-name-comes-from-an-index-signature-so-it-must-be-accessed-with-required/

[ndelangen]

And this might be a solution:

"compilerOptions": {
// ...
  "noPropertyAccessFromIndexSignature": false,
// ...
}

found on:
https://stackoverflow.com/questions/70106472/property-fname-comes-from-an-index-signature-so-it-must-be-accessed-with-fn

[ndelangen]

Yes, these changes make angular happy 👍
https://app.circleci.com/pipelines/github/storybookjs/storybook/30886/workflows/566744e1-fea6-4f18-bddc-0451d3886769