Upgrade to Angular 16 LTS & Upgrade Storybook v7

[splashdust]

[green-design-system-bot[bot]]

🦋 Changeset status

Based on the included changeset, the following releases will be published as a result of this PR:

• @sebgroup/green-angular-charts: 2.0.1 → 3.0.0 (major bump)
• @sebgroup/green-angular: 3.8.0 → 4.0.0 (major bump)

Note: If unpublished changesets where merged to main after the first commit of this PR, this list will include those changes in addition to the ones specific to this PR.

[vsjolander]

@splashdust @astrit managed to migrate all storybooks to v7 with some issues that are still left:

• The format of some stories are not correct I think so they don't render. This needs to be fixed in all storybooks
• Not sure how we can add our webcomponents in the best way. Was not able to get them directly from src which I wanted.. maybe we can look at this together @splashdust
• Don't know how this have impacted the deploy of the storybooks so this needs to be tested.

[green-design-system-bot[bot]]

👋 Thanks for creating a pull request!

🚀 Checkout the storybooks we've created for it:

• angular
• angular-charts
• chlorophyll
• core
• react
• react-charts

[splashdust]

• Not sure how we can add our webcomponents in the best way. Was not able to get them directly from src which I wanted.. maybe we can look at this together @splashdust

@vsjolander To achieve this, I think we need to:

• Update to TC39 standard decorators (this removes the need for any special Typescript config and polyfills)
• Configure a SASS-loader for Storybook.

But for now it still works to fetch them from dist, so let's postpone this bit to a separate PR and focus now on just the Storybook and Angular upgrades.

[splashdust]

@vsjolander @astrit I've updated the stories in Core to use individual stories defined in Typescript instead of MDX. This gives the benefit of being able to auto-generate the Docs page for each component automatically, so that all components get the same structure. It's also a lot less finicky to work with than MDX.

I also set up manifest generation using Custom Elements Manifest, which results in a json file that can be consumed by Storybook to automatically generate a table of API props and controls. This means that a) we get automatic API docs based on the code and JSDoc comments, and b) we don't need to manually wire up Storybook controls for the components.

I think what's left to do now before we merge, is to go over the Angular and React storybooks and fix regressions in those.

[splashdust]

@vsjolander @astrit I think we're good to go now!

I marked the Angular packages as breaking releases, since bumping the Angular peer dependencies will technically break builds for anyone using a lower version.

[vsjolander]

Wow, had this on my todo list but you beat me to it. Simply amazing! Great work 🎊